Custom colors

Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.

Build the "Custom colors" pattern (@codeatlasdev/ui demo #048, inputs/swatch-group) in my app.

Call get_demo({ ids: ["#048"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Letting users pick a label or tag color from a fixed palette.

Keep these library parts, with the props and tokens the demo uses:
- SwatchGroup from "@codeatlasdev/ui"

Behaviour to keep:
- `<SwatchGroup` with `size="sm"` and `aria-label="Label color"` and `bind:value={color}`
- Items set `value`, `label` and `color`: Blue `#2563eb`, Green `#16a34a`, Red `#dc2626`, Purple `#9333ea`
- Purple has `disabled: true`
- Initial value is `$state('#2563eb')`
- Current value is shown as `value: {color}`

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

• SwatchGroup @codeatlasdev/ui

How it is built

• `<SwatchGroup` with `size="sm"` and `aria-label="Label color"` and `bind:value={color}`
• Items set `value`, `label` and `color`: Blue `#2563eb`, Green `#16a34a`, Red `#dc2626`, Purple `#9333ea`
• Purple has `disabled: true`
• Initial value is `$state('#2563eb')`
• Current value is shown as `value: {color}`

Related

• #049 Theme presets component/input
• #034 Cards component/input
• #060 Single and multiple component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input