Variants and orientation

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

Build the "Variants and orientation" pattern (@codeatlasdev/ui demo #061, inputs/toggle-group) in my app.

Call get_demo({ ids: ["#061"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing a view such as list, grid or board with a button-style group.

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

Behaviour to keep:
- Outlined group: `variant="outlined"`, `size="md"`, `aria-label="Outlined"`
- Outlined items: List, Grid, Board, and Board has `disabled: true`
- Ghost group: `variant="ghost"`, `size="sm"`, `aria-label="Ghost"`
- Vertical group: `orientation="vertical"`, `aria-label="Vertical"`
- All 3 use `bind:value={view}` with initial `$state('list')`

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

• ToggleGroup @codeatlasdev/ui

How it is built

• Outlined group: `variant="outlined"`, `size="md"`, `aria-label="Outlined"`
• Outlined items: List, Grid, Board, and Board has `disabled: true`
• Ghost group: `variant="ghost"`, `size="sm"`, `aria-label="Ghost"`
• Vertical group: `orientation="vertical"`, `aria-label="Vertical"`
• All 3 use `bind:value={view}` with initial `$state('list')`

Related

• #060 Single and multiple component/input
• #038 Default component/input
• #980 Text, icon and filled groups component/input
• #001 Full width component/input
• #002 With icons component/input
• #003 Loading component/input