Entity Search

Preview

Data is set as properties in a script. Open with the button or /. Try a query (e.g. “ri”) to see counts + highlighting; ← / → change the scope; ⌘/Ctrl + Enter fires show-all.

<button id="open-es">Open entity search</button>

<esa-entity-search id="es" hotkey="slash" placeholder="Search projects, people, documents…"></esa-entity-search>

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@esa/ecology/esa-entity-search';

@Component({
  selector: 'app-entity-search-demo',
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `
    <button id="open-es">Open entity search</button>
    <esa-entity-search
      id="es"
      hotkey="slash"
      placeholder="Search projects, people, documents…"
    ></esa-entity-search>
  `,
})
export class EntitySearchDemo {}

API

Events

Methods

Accessibility

• A native modal <dialog>, opened with showModal() — so the page behind it is genuinely inert, focus is contained, Esc closes, and focus returns to the trigger. None of that is our code.
• The input is a role="combobox" driving a role="listbox" of role="option" rows via aria-activedescendant. The rows are <div>s, not buttons: an option may not be an interactive widget, and while they were buttons the per-row action buttons were nested inside them.
• ArrowUp / ArrowDown move the active row (wrapping across groups), Enter selects, ⌘/Ctrl + Enter fires show-all, Esc closes.
• Facets are a role="radiogroup" navigated with ← / →. Until 2026-08-18 they claimed role="tablist" and bound Tab instead — the exact inversion of what the role promises, and it cost the per-row action buttons any keyboard route at all (SC 2.1.1, Level A). Tab is now plain Tab.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. 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.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

No other component reads these — re-point them and esa-entity-search is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.