J3W1 / DESIGN SYSTEM

Editor search

Literal search and match navigation over escaped read-only source text.

stable · LIGHT DOM · 1.1.0

Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.

Standalone example ↗Copy file manifest Canonical JSON Vue gallery ↗Prepare an agent kit →

Live variants

default

Find in source

Enter text to search.

const theme = 'j3w1';
const mode = 'dark';
export { theme, mode };

<j3w1-editor-search id="example-editor-search-default"><section class="editor-search" aria-label="Search source"><label for="example-editor-search-default-editor-query">Find in source</label><input class="editor-search-control" id="example-editor-search-default-editor-query" type="search" data-query="" data-demo-focus-target=""><div class="editor-search-actions"><button class="editor-search-control" type="button" data-previous="">Previous match</button><button class="editor-search-control" type="button" data-next="">Next match</button></div><p role="status" data-search-status="">Enter text to search.</p><pre data-source="">const theme = 'j3w1';
const mode = 'dark';
export { theme, mode };</pre></section></j3w1-editor-search>

Install and register

Use the exact version. If npm publication is pending, install the release tarball from the installation guide.

npm install --save-exact @j3w1/ui@1.1.0

import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/editor-search.css';
import '@j3w1/ui/register/editor-search';

Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.

Vue SFC, React, Astro and plain HTML integration →

Copy the complete implementation

npx --package=@j3w1/ui@1.1.0 j3w1-ui copy editor-search --out ./vendor/j3w1/editor-search

The CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.

Public API

attributes

Name	Type / signature	Meaning
`disabled`	`CustomEvent`	Disable the native controls owned by this instance.
`loading`	`CustomEvent`	Mark the primary control busy and prevent duplicate activation.

properties

Name	Type / signature	Meaning
`disabled`	`boolean`	Delegates disabled state to native children.
`name`	`string`	Native control name; application form keys remain explicit.
`source`	`string`	Read-only literal source text.
`query`	`string`	Literal case-insensitive query.
`matchCount`	`number`	Current number of matches. Read only.

methods

Name	Type / signature	Meaning
`refresh`	`(): void`	Reconnect behavior after replacing native child structure.
`focus`	`(options?: FocusOptions): void`	Focus the first usable native control.
`next`	`(direction?: number): void`	Move among existing matches without moving input focus.

events

Name	Type / signature	Meaning

Dependencies and verification

Registered components: none. Style dependencies: none.

Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.

Full implementation manifest, API and token dependency closure

Canonical specification

Purpose

Find literal text in a read-only code sample. Search, previous and next expose exact match counts and the current match. The component does not execute regexes, mutate source text or provide a code editor backend.

Anatomy

query: Labelled search input.
navigation: Previous and next actions, disabled without matches.
source: Escaped text with native mark elements.
status: Current and total match counts.

States

State	Presentation	Non-colour channel
default	Plain escaped source.	Readable preformatted text.
filled	Match fill; current match has its own marker.	Exact current and total counts.
no-results	No highlighted matches.	Explicit zero-results status.
focus-visible	Dashed control ring.	Native keyboard focus.

Keyboard

Tab / Shift+Tab: Reach query and match navigation.
Enter / Shift+Enter: Move to next or previous match.
Escape: Clear the query and retain focus.

Accessibility

Render source as text, never as trusted HTML from the consumer. Highlighted matches must retain the exact source text for copying. Announce counts without moving input focus. Match navigation scrolls the current mark into view, and reduced motion requires no animation.

Portability

Wrap labels and actions without changing source order. Use logical spacing in RTL. Preserve native target sizes at both densities; only bounded data regions may scroll horizontally. Use equivalent native semantics and approved roles; record any unsupported behavior as a mapping deviation. The host owns application data, persistence, permissions and services.

Non-examples

Unlabelled controls, color-only status, drag-only operations, hidden required instructions, stolen focus or an invented service success.