Command Palette
A Ctrl/Cmd+K-activated overlay for fuzzy-searching and running commands, with grouped results and full keyboard navigation.
API
All inputs and configuration options for zyra-command-palette.
| Prop | Type | Default | Description |
|---|---|---|---|
items | CommandPaletteItem[] | [] | { id, label, description?, icon?, shortcut?, group?, disabled? } per command |
open | boolean | false | Two-way bound visibility state via [(open)] |
placeholder | string | 'Search commands…' | Search input placeholder |
emptyText | string | 'No matching commands' | Shown when the query matches nothing |
globalShortcut | boolean | true | Disables the document-level Ctrl/Cmd+K listener when false |
opened (output) | void | - | Emits when the palette opens |
closed (output) | void | - | Emits when the palette closes, for any reason (Escape, backdrop, selection, shortcut) |
selected (output) | CommandPaletteItem | - | Emits the chosen item; the palette also closes itself on selection |
Tokens
CSS custom properties zyra-command-palette reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Panel background--zyra-color-command-palette-bg | var(--zyra-color-surface-dropdown) | Fill color of the palette panel. |
Panel shadow--zyra-color-command-palette-shadow | var(--zyra-card-elevated-shadow) | Drop shadow behind the panel. |
Active item background--zyra-color-command-palette-item-active-bg | var(--zyra-color-surface-inset) | Background of the keyboard/mouse-active result row. |
Group label--zyra-color-command-palette-group-label | var(--zyra-color-foreground-subtle) | Color of section header text above each group. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Search input uses role="combobox" with aria-controls/aria-activedescendant pointing at the active result
- Results list uses role="listbox" / role="option", with aria-selected reflecting the active item
- Same focus trap and Escape/backdrop dismiss behavior as zyra-modal
- The global Ctrl/Cmd+K shortcut requires one <zyra-command-palette> to stay mounted (typically once, near the app root) — it listens on document even while closed