#941
Delays, side and bind:open
An outlined Plan details button with a top-start hover card, plus a button that shows or hides the card from code and a line reporting the last user-driven change.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Delays, side and bind:open" pattern (@codeatlasdev/ui demo #941, navigation/hover-card) in my app.
Call get_demo({ ids: ["#941"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Short delays, a custom side and alignment, and driving the card with bind:open while onOpenChange reports only what the user did.
Keep these library parts, with the props and tokens the demo uses:
- Button, HoverCard from "@codeatlasdev/ui"
Behaviour to keep:
- `let open = $state(false)` is bound with `<HoverCard bind:open openDelay={150} closeDelay={150} side="top" align="start" {onOpenChange}>`
- `{#snippet triggerChild(props)}<Button variant="outlined" {...props}>Plan details</Button>{/snippet}`
- `function onOpenChange(o: boolean)` sets `log` to `opened by the user` or `closed by the user`; the code button toggles `open` and does not touch `log`
- A second button flips `open` with `onclick={() => (open = !open)}`
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
- `let open = $state(false)` is bound with `<HoverCard bind:open openDelay={150} closeDelay={150} side="top" align="start" {onOpenChange}>`
- `{#snippet triggerChild(props)}<Button variant="outlined" {...props}>Plan details</Button>{/snippet}`
- `function onOpenChange(o: boolean)` sets `log` to `opened by the user` or `closed by the user`; the code button toggles `open` and does not touch `log`
- A second button flips `open` with `onclick={() => (open = !open)}`
Related
Loading source.