Search Filter

Features

• Compact resting pill that expands smoothly (width spring) on focus, with a layered primary halo instead of a hard focus ring
• Detached dropdown panel (absolutely positioned) that fades/rises in while typing — zero page layout shift
• Panel height morphs between measured pixel values as results change; rows re-cascade with staggered fade-rises on every query
• Live search over item titles, case-insensitive, debounced input (90ms)
• Every match occurrence wrapped in an iris highlight span, built with safe DOM text nodes
• Everything / Files / People segmented scope filter with a gliding active pill and live tick-pop counts
• Full combobox a11y — role="combobox" + role="listbox"/option, aria-expanded, aria-activedescendant, aria-live status
• Keyboard: ↑/↓ cycles options, Enter selects, Escape closes then clears, ←/→/Home/End switch scopes, ⌘K / Ctrl+K and / focus from anywhere
• Click-outside and focus-out dismiss the panel and contract the pill
• Photo avatars with green (active now) and amber (active earlier) presence dots; image error fallback swaps in an initials tile
• Icon tiles for folder, image, video, archive, and code results (Tabler icons)
• Footer hint row with kbd chips (navigate / select / dismiss) and a live result count
• Empty state echoes the query; skeleton row covers the initial fetch behind the async data seam (js/api.js)
• Honors prefers-reduced-motion: reduce — all motion collapses to 0.01ms

Accessibility

Combobox

Input has role="combobox", aria-expanded, aria-haspopup="listbox", aria-autocomplete="list", aria-controls="sf-listbox"

Listbox

role="listbox" results with role="option" rows, aria-selected, unique option ids, aria-activedescendant tracking

Scopes

role="tablist" / role="tab" with aria-selected, roving tabindex, ←/→/Home/End activation

Search landmark

role="search" on the field with a visually-hidden <label>

Live results

Visually-hidden aria-live="polite" status announces result counts and selections

Dismissal

Escape closes the panel (then clears), click-outside and focus-out dismiss

Focus indicators

Engaged pill halo + primary border for the input; high-contrast :focus-visible outline elsewhere

Target sizes

All operable controls ≥ 24×24px (input stretches to pill height)

Skeleton / glider / dots

aria-hidden="true" — purely decorative

Reduced motion

prefers-reduced-motion: reduce collapses all animation

Customise it with AI

Open Search Filter in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the filter is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.