#158
Default
A dropdown menu of file actions with icons, a separator and a destructive Delete item, reporting the last action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default" pattern (@codeatlasdev/ui demo #158, navigation/menu) in my app.
Call get_demo({ ids: ["#158"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Row or toolbar action menus offering several operations, with the dangerous one set apart.
Keep these library parts, with the props and tokens the demo uses:
- DropdownMenu, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>Open menu</Button>`
- `<DropdownMenuLabel>File actions</DropdownMenuLabel>` then items Edit, Duplicate, Download
- Each item has `{#snippet icon()}` with `<Edit2 />`, `<Copy />`, `<Download />` or `<Trash2 />`
- `<DropdownMenuSeparator />` precedes `<DropdownMenuItem variant="destructive"` for Delete
- `let last = $state('')` is set per item and shown as `Last action: {last}` with `aria-live="polite"`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- DropdownMenu
@codeatlasdev/ui - DropdownMenuItem
@codeatlasdev/ui - DropdownMenuSeparator
@codeatlasdev/ui - DropdownMenuLabel
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>Open menu</Button>`
- `<DropdownMenuLabel>File actions</DropdownMenuLabel>` then items Edit, Duplicate, Download
- Each item has `{#snippet icon()}` with `<Edit2 />`, `<Copy />`, `<Download />` or `<Trash2 />`
- `<DropdownMenuSeparator />` precedes `<DropdownMenuItem variant="destructive"` for Delete
- `let last = $state('')` is set per item and shown as `Last action: {last}` with `aria-live="polite"`
Related
Loading source.