#155
Keyboard
A static list of four keyboard hints for the command palette, each pairing a Kbd key with a description.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Keyboard" pattern (@codeatlasdev/ui demo #155, navigation/command-palette) in my app.
Call get_demo({ ids: ["#155"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Documenting the shortcuts of a search or command palette next to the feature it belongs to.
Keep these library parts, with the props and tokens the demo uses:
- Kbd from "@codeatlasdev/ui"
Behaviour to keep:
- `const keys` has four entries with fields `key` and `desc`
- Rendered with `{#each keys as k}` as `<Kbd>{k.key}</Kbd><span>{k.desc}</span>` inside a `<ul class="list">`
- Key labels: `Type`, `↑ ↓`, `↵`, `ESC`
- Descriptions: `Filter by label or module name`, `Move through the results`, `Navigate to the selected item`, `Close the palette`
Reduced motion: the demo handles it; keep that branch.
Keyboard: not an interactive control.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Kbd
@codeatlasdev/ui
How it is built
- `const keys` has four entries with fields `key` and `desc`
- Rendered with `{#each keys as k}` as `<Kbd>{k.key}</Kbd><span>{k.desc}</span>` inside a `<ul class="list">`
- Key labels: `Type`, `↑ ↓`, `↵`, `ESC`
- Descriptions: `Filter by label or module name`, `Move through the results`, `Navigate to the selected item`, `Close the palette`
Related
Loading source.