Search and jump across dense destinations or actions from a modal command surface — a role="combobox" search field owning a role="listbox" result list over the overlay recipe. The primary search gets a generous integrated header, while results and group labels use the same dense application-choice recipe as Menu, Select, and SidebarNav; filtering, focus trapping, and command execution remain host/L2 behavior.
The real thing over the live section list — ⌘K / Ctrl+K opens it from anywhere; arrows move the active row, Enter jumps, Escape returns focus to the trigger.
A modal's anatomy only exists over the scrim, so there is no static twin — open the live demo and inspect the real thing.
| Part | Roles | Notes |
|---|---|---|
| Shell | surface.panelradius.containersurface.overlayshadow.high | The distinct modal recipe — viewport minus a space.8 gutter, capped just under container.sm wide and eighteen dense-row units tall. |
| Search row | size.control.lgfont.size.button-mdspace.3 | A 48px integrated header with the quieter 14px text and 16px i-search glyph used by the default control recipe — the area has presence without enlarging its contents. |
| Search actions | i-xEscfont.tracking.normal | The clear action appears before a persistent, unboxed Escape hint at the far edge; it matches the shortcut treatment but keeps normal tracking because it is one named key, while the reserved clear slot prevents querying from shifting it. |
| Results | space.1size.control.sm | The same panel inset and row gap as Menu, scroll-capped at fourteen dense rows with matching scroll padding. |
| Group label | font.size.label-smfont.weight.regularfont.tracking.wide | SidebarNav's section-label register and navigation rhythm: the first label keeps the same comfortable top breathing room, with 12px from label to first result and 20px from the previous result to the next label. Menu remains tighter because it is an anchored action popover. |
| Item | size.control.smfont.size.copy-smradius.nested | The shared 32px application-choice row; highlight is driven by data-highlighted or aria-selected. |
| Shortcut | font.role.uifont.size.copy-smfont.tracking.wider | Optional semantic kbd.ds-command__shortcut, identical to Menu's shortcut treatment. |
| Kind hint | font.role.uifont.size.caption | Optional quiet ds-command__meta for a category or result kind — never a shortcut or second label. |
| Empty | text.secondaryfont.size.copy-smspace.8 | The contracted literal No results, no query echo, centered in a space.8 block pad; the query stays in the field. |
A command menu is search-first navigation; the search is the interface.
| Verdict | Rule |
|---|---|
| Do | Keep result labels short and scannable — group for context with the shared group-label grammar instead of writing longer descriptions. |
| Do | Keep trailing hints semantic — shortcuts use kbd.ds-command__shortcut; category or kind hints use ds-command__meta. Neither becomes a second label. |
| Do | Always supply the empty message — a filtered list that can go silent reads as broken. |
| Do | Expose the active row through aria-activedescendant or real item focus, trap focus while open, and return it to the trigger on close — host/L2 behavior under this visual contract. |
| Don’t | Reach for a command menu when a handful of always-visible actions would do — that is a Menu wearing the same item recipe. |
| Don’t | Run a destructive command directly — a destructive command opens a confirmation flow. |