Basic

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

Build the "Basic" pattern (@codeatlasdev/ui demo #040, inputs/select) in my app.

Call get_demo({ ids: ["#040"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Picking one value from a known list in a form, such as a framework or category.

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

Behaviour to keep:
- `<Select label="Framework" options={frameworks}` with `bind:value={framework}`
- `frameworks` has 5 options: Svelte 5, React 19, Vue 3, SolidJS, Astro
- Initial value is `$state('svelte')`
- Selected value is shown in `<strong>{framework}</strong>`
- Wrapper `.col` uses `max-width: 320px`

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

• Select @codeatlasdev/ui

How it is built

• `<Select label="Framework" options={frameworks}` with `bind:value={framework}`
• `frameworks` has 5 options: Svelte 5, React 19, Vue 3, SolidJS, Astro
• Initial value is `$state('svelte')`
• Selected value is shown in `<strong>{framework}</strong>`
• Wrapper `.col` uses `max-width: 320px`

Related

• #041 Empty-value option component/input
• #042 Placeholder component/input
• #043 States component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input