Search Panel

Preview

Set el.results in a script, then open with el.open = true.

<button id="open-right">Open search</button>

<esa-search-panel id="sp-right" position="right"></esa-search-panel>

Positions

The panel slides in from the right (default) or the left.

<esa-search-panel position="right"></esa-search-panel>
<esa-search-panel position="left"></esa-search-panel>

States

Set loading to show a searching message while results are fetched.

<esa-search-panel position="right" loading></esa-search-panel>

API

Events

The live query also participates in the enclosing <form> via ElementInternals.

Accessibility

• The panel is role="search"; the close button carries an aria-label.
• The input is focused automatically when the panel opens.
• Escape and backdrop click both close the panel and fire open-change.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.