Axismundi · v3.5.8 · Wave 1 #17

Search bar — Full Spec + Runtime Module

Baseline components.css §10 remains unchanged. This page consolidates the previous search-expansion/ runtime into the Search bar component lane while preserving the old module as historical evidence.

Runtime scope. Search bar owns search shell, combobox/listbox suggestions, keyboard movement, and Escape clear/collapse policy. Search data, autocomplete source, analytics, and federated search remain plugin territory.

§1. Rest shell

Baseline class names only: .search-bar, .search-bar__leading-icon, .search-bar__input, and .search-bar__trailing.

Rest shell. Focus the input to open static lab suggestions.

Filled state with clear action. Clear is runtime-local; data source remains plugin territory.

§2. Contained and divided styles

Contained follows the current baseline. Divided is lab-scoped evidence for M3 search style coverage, not a baseline edit.

Contained style: current baseline shell.

Divided style specimen. Baseline promotion is not part of Phase 2.

§3. Trailing actions

Trailing controls are icon-button consumers. Ripple is attached to the icon buttons only, never to the Search field host.

Clicking clear mutates the local input only. Filter, mic, and product search behavior are integration/plugin territory.

§4. core/search-inspired form

This is a lab mapping specimen only. No WordPress block registration, theme.json, or backend query behavior is implemented.

Native form semantics are preserved. Real query behavior belongs to WordPress/plugin integration.

§5. Empty, no-results, and disabled specimens

Static no-results copy. Real result state and announcements are plugin territory.

Disabled specimen. Runtime should not attach useful interaction to inactive controls.

§6. Forbidden ancestor negative cases

Runtime must not attach inside prose, post content, entry content, or editable surfaces.

Inside .prose: focus should not create suggestions.

Inside [contenteditable]: focus should not create suggestions.

§7. Google Account header specimen

Observed implementation pattern: form role="search", leading submit button, text input combobox, and clear action.

Google Account-style header search. The leading magnifier is an action, not decorative chrome.

§8. Google home search specimen

Observed implementation pattern: centered search surface, textarea combobox, leading add action, clear action, AI mode button, and attached suggestion popover.

Google home-style active search. Focus the textarea to attach the suggestions popover to the shell.

§9. Code snippets

<label class="search-bar" data-search-suggestions="최근 검색어|컴포넌트 토큰">
  <span class="search-bar__leading-icon">...</span>
  <input class="search-bar__input" type="search" aria-label="Search" />
  <span class="search-bar__trailing">
    <button class="ax-icon-button" data-ax-ripple="unbounded" aria-label="Clear search">...</button>
  </span>
</label>

§10. Cross-references