Installation
tokens.css + command-search.css + button.csshead.html
<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/command-search/command-search.css">Basic
Preview
Command/search list with live filtering and empty state.
Code
command-search.html
<p class="fixture-note">Command/search list with live filtering and empty state.</p><div class="au-command-search" data-au-component="command-search" data-au-state="idle"></div>Component contract
- Install
- tokens.css · command-search.css · button.css
- States
- Host-owned via data-au-state and documented variants
- Host
- content, state transitions, and execution behind actions
For agents
command-search.contract
# agent-ui / command-search
component: command-search
selector: .au-command-search
data_au_component: command-search
purpose: Command/search list with live filtering and empty state.
install:
- tokens.css
- command-search.css
- button.css when rendering actions
states: Host-owned via data-au-state and documented variants.
css_variables: Uses shared semantic tokens.
events: native form, focus, and click only — no custom events or runtime required
no_javascript: Markup and native controls remain usable without script.
host_owns: The host owns content, state transitions, and execution behind actions.
accessibility: Prefer labelled regions and text status, not color alone.
security: Escape untrusted model and tool text before insertion.
rules:
- Host owns execution, authorization, persistence, validation, and state transitions.
- Components render host-provided state; they never execute tools or imply approval.
- Escape untrusted model output, tool args, and tool output before insertion.
- Use only documented data-au-* attributes and data-au-state values.
- Keep the no-JS path usable. Do not add React, Tailwind, bundlers, or remote assets.
source: components/command-search/command-search.{html,css} + README.md + fixture.html