Command Palette

Features

• Cmd/Ctrl+K global shortcut to open and close the palette
• Fuzzy subsequence matching with substring-first ranking and best-match preselection
• Multi-span <mark> highlighting of every matched character run
• Gliding selection cursor that slides between rows via transform
• Staggered cascade animation on the result rows after every query change
• Two-layer open motion — backdrop fade desynced from the panel spring-and-deblur — with an instant close
• Full keyboard navigation: Arrow keys, Home/End, Enter to run, layered Escape (clears the query first, then closes)
• Roving aria-activedescendant combobox pattern with aria-selected options
• Grouped sections that hide automatically when they have no matches
• Characterful empty state that echoes the failed query and suggests fixes
• Live results count in the footer announced via aria-live="polite"
• Responsive overlay that adapts down to 280px
• Fully respects prefers-reduced-motion

Accessibility

Dialog role

The panel uses role="dialog" with aria-modal and an aria-label

Listbox semantics

The list uses role="listbox" and items use role="option"

Search labelling

The input has an aria-label and aria-controls for the list

Focus indicators

:focus-visible with --ring outline on all interactive elements

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Command Palette in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the popover 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.