#116
Deletable
Removable chips: deleting one drops it from the list, and a reset link appears when all are gone.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Deletable" pattern (@codeatlasdev/ui demo #116, display/chip) in my app.
Call get_demo({ ids: ["#116"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Tag inputs and filter pills the user can remove, with a way to restore them.
Keep these library parts, with the props and tokens the demo uses:
- Chip from "@codeatlasdev/ui"
Behaviour to keep:
- `const initial = ['Design', 'Svelte', 'Glass']` seeds `let tags = $state([...initial])`
- `{#each tags as tag (tag)}` renders `<Chip label={tag} deletable ondelete={() => (tags = tags.filter((t) => t !== tag))} />`
- `{#if tags.length === 0}` shows a `<button class="reset" type="button"` labelled Reset tags
- The reset button runs `onclick={() => (tags = [...initial])}`
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
- Chip
@codeatlasdev/ui
How it is built
- `const initial = ['Design', 'Svelte', 'Glass']` seeds `let tags = $state([...initial])`
- `{#each tags as tag (tag)}` renders `<Chip label={tag} deletable ondelete={() => (tags = tags.filter((t) => t !== tag))} />`
- `{#if tags.length === 0}` shows a `<button class="reset" type="button"` labelled Reset tags
- The reset button runs `onclick={() => (tags = [...initial])}`
Related
Loading source.