#470
Close on pick
A button showing the chosen date that opens a popover holding a calendar; picking a day closes the popover.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Close on pick" pattern (@codeatlasdev/ui demo #470, navigation/popover) in my app.
Call get_demo({ ids: ["#470"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A choice made inside a popover (date, option, color) that should dismiss it and hand focus back to the trigger.
Keep these library parts, with the props and tokens the demo uses:
- Popover, Button, Calendar, getLocalTimeZone, today, DateValue from "@codeatlasdev/ui"
Behaviour to keep:
- `<Popover bind:open align="start">`
- `{#snippet triggerChild(props)}` renders `<Button {...props}>` labelled with the selected date or `Pick a date`
- `{#snippet children({ close })}` renders `<Calendar bind:value label="Due date" locale="en-US" weekStartsOn={0} onchange={() => close()} />`
- `close()` closes the popover and returns focus to the trigger
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
How it is built
- `<Popover bind:open align="start">`
- `{#snippet triggerChild(props)}` renders `<Button {...props}>` labelled with the selected date or `Pick a date`
- `{#snippet children({ close })}` renders `<Calendar bind:value label="Due date" locale="en-US" weekStartsOn={0} onchange={() => close()} />`
- `close()` closes the popover and returns focus to the trigger
Related
Loading source.