#096
Swipe to dismiss
A sheet titled Switch session with a description and a list of eight accounts that close it on click.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Swipe to dismiss" pattern (@codeatlasdev/ui demo #096, feedback/sheet) in my app.
Call get_demo({ ids: ["#096"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Mobile account or option pickers that slide up and can be dragged down to dismiss.
Keep these library parts, with the props and tokens the demo uses:
- Sheet, Button, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Sheet bind:open title="Switch session" description="Choose the active account">`
- `const accounts` has 8 entries, Account A to Account H, rendered by `{#each accounts as acc}`
- Each item is `<button class="item" onclick={() => (open = false)}>` inside `<Stack gap="1">`
- Trigger is `<Button variant="outlined"` labelled Open sheet
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
How it is built
- `<Sheet bind:open title="Switch session" description="Choose the active account">`
- `const accounts` has 8 entries, Account A to Account H, rendered by `{#each accounts as acc}`
- Each item is `<button class="item" onclick={() => (open = false)}>` inside `<Stack gap="1">`
- Trigger is `<Button variant="outlined"` labelled Open sheet
Related
Loading source.