Small, full width, disabled item

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

Build the "Small, full width, disabled item" pattern (@codeatlasdev/ui demo #039, inputs/segmented-control) in my app.

Call get_demo({ ids: ["#039"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Compact filter bar that should stretch to its container, such as a table toolbar.

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

Behaviour to keep:
- `<SegmentedControl` with `size="sm"`, `fullWidth` and `aria-label="Size"`
- `bind:value={size}` with initial `$state('b')`
- 4 items: Alpha, Beta, Gamma, Delta
- Gamma has `disabled: true`
- Wrapper `.wide` uses `max-width: 420px`

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

• SegmentedControl @codeatlasdev/ui

How it is built

• `<SegmentedControl` with `size="sm"`, `fullWidth` and `aria-label="Size"`
• `bind:value={size}` with initial `$state('b')`
• 4 items: Alpha, Beta, Gamma, Delta
• Gamma has `disabled: true`
• Wrapper `.wide` uses `max-width: 420px`

Related

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