Form

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

Build the "Form" pattern (@codeatlasdev/ui demo #161, navigation/popover) in my app.

Call get_demo({ ids: ["#161"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Inline editing of a single value, such as renaming a label, without opening a modal.

Keep these library parts, with the props and tokens the demo uses:
- Popover, Button, TextField, Stack, Flex from "@codeatlasdev/ui"

Behaviour to keep:
- `<Popover side="bottom" align="start">`
- `{#snippet triggerChild(props)}` renders `<Button variant="filled" {...props}>Edit label</Button>`
- `<TextField label="Label name" placeholder="e.g. Priority" />` inside `<Stack gap="3">`
- `<Flex gap="2" justify="end">` holds `<Button size="sm" variant="ghost">Cancel</Button>` and `<Button size="sm" variant="filled">Save</Button>`

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

• Popover @codeatlasdev/ui
• Button @codeatlasdev/ui
• TextField @codeatlasdev/ui
• Stack @codeatlasdev/ui
• Flex @codeatlasdev/ui

How it is built

• `<Popover side="bottom" align="start">`
• `{#snippet triggerChild(props)}` renders `<Button variant="filled" {...props}>Edit label</Button>`
• `<TextField label="Label name" placeholder="e.g. Priority" />` inside `<Stack gap="3">`
• `<Flex gap="2" justify="end">` holds `<Button size="sm" variant="ghost">Cancel</Button>` and `<Button size="sm" variant="filled">Save</Button>`

Related

• #160 Basic component/navigation
• #470 Close on pick component/navigation
• #085 Form component/feedback
• #162 Horizontal stepper component/navigation
• #255 Fast and slow loads component/navigation
• #146 autofocus component/navigation