#082
Controlled pending
An alert dialog driven by parent state: the pending prop is set for 1.5 seconds before the dialog closes itself.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Controlled pending" pattern (@codeatlasdev/ui demo #082, feedback/alert-dialog) in my app.
Call get_demo({ ids: ["#082"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Publishing or saving flows where the confirm button must show progress and the parent decides when to close.
Keep these library parts, with the props and tokens the demo uses:
- AlertDialog, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<AlertDialog bind:open title="Publish changes?" confirmLabel="Publish"` with no description
- `{pending}` shorthand passes `let pending = $state(false)` to the dialog
- `onconfirm={publish}` sets `pending = true`, awaits 1500 ms, then sets `pending = false` and `open = false`
- Trigger is `<Button variant="outlined"` labelled Open controlled
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
- AlertDialog
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<AlertDialog bind:open title="Publish changes?" confirmLabel="Publish"` with no description
- `{pending}` shorthand passes `let pending = $state(false)` to the dialog
- `onconfirm={publish}` sets `pending = true`, awaits 1500 ms, then sets `pending = false` and `open = false`
- Trigger is `<Button variant="outlined"` labelled Open controlled
Related
Loading source.