#989
Components
Button, Switch, Tabs, Slider, Toast and Dialog with their sound prop on, behind one sound toggle.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Components" pattern (@codeatlasdev/ui demo #989, feedback/sound) in my app.
Call get_demo({ ids: ["#989"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Show which components speak when the sound prop is set, and that they stay silent until the toggle is on.
Keep these library parts, with the props and tokens the demo uses:
- Button, Dialog, Slider, Switch, Tabs, TabsList, TabsTrigger, toast from "@codeatlasdev/ui"
- SoundToggle from "@codeatlasdev/ui/sound"
Behaviour to keep:
- `<SoundToggle />` on top, off until the user presses it
- `<Button sound>`, `<Switch sound`, `<Tabs sound bind:value={tab}>`, `<Slider sound`
- `toast.success('Saved', { sound: true })` from a Toast button
- `<Dialog sound bind:open title="Sound on open and close">`
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
- Button
@codeatlasdev/ui - Dialog
@codeatlasdev/ui - Slider
@codeatlasdev/ui - Switch
@codeatlasdev/ui - Tabs
@codeatlasdev/ui - TabsList
@codeatlasdev/ui - TabsTrigger
@codeatlasdev/ui - SoundToggle
@codeatlasdev/ui/sound
How it is built
- `<SoundToggle />` on top, off until the user presses it
- `<Button sound>`, `<Switch sound`, `<Tabs sound bind:value={tab}>`, `<Slider sound`
- `toast.success('Saved', { sound: true })` from a Toast button
- `<Dialog sound bind:open title="Sound on open and close">`
Related
Loading source.