#089
Right (default)
A default drawer titled Filters with status and role filter groups, two switches and Reset and Apply actions.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Right (default)" pattern (@codeatlasdev/ui demo #089, feedback/drawer) in my app.
Call get_demo({ ids: ["#089"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Filter panels for tables and lists that would crowd the page if shown inline.
Keep these library parts, with the props and tokens the demo uses:
- Drawer, Button, Switch, Stack, FilterGroup from "@codeatlasdev/ui"
Behaviour to keep:
- `<Drawer bind:open title="Filters">` with no side or width prop
- Two `<FilterGroup` blocks: status with 2 options (Active, Inactive) and role with 3 options (Admin, Editor, Viewer)
- Filter state: `onchange={(v) => (statusF = v)}` and `onchange={(v) => (roleF = v)}`, both starting at `'all'`
- Two `<Switch label="Show inactive only" />` and `<Switch label="Include archived" />` inside `<Stack gap="4">`
- `{#snippet actions()}` holds ghost Reset and filled Apply buttons
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
- Drawer
@codeatlasdev/ui - Button
@codeatlasdev/ui - Switch
@codeatlasdev/ui - Stack
@codeatlasdev/ui - FilterGroup
@codeatlasdev/ui
How it is built
- `<Drawer bind:open title="Filters">` with no side or width prop
- Two `<FilterGroup` blocks: status with 2 options (Active, Inactive) and role with 3 options (Admin, Editor, Viewer)
- Filter state: `onchange={(v) => (statusF = v)}` and `onchange={(v) => (roleF = v)}`, both starting at `'all'`
- Two `<Switch label="Show inactive only" />` and `<Switch label="Include archived" />` inside `<Stack gap="4">`
- `{#snippet actions()}` holds ghost Reset and filled Apply buttons
Related
Loading source.