Alert Dialog

Use AlertDialog to ask for an explicit answer before an action that is destructive or hard to undo: deleting an incident, ending a shift, discarding unsaved work. It is a Dialog with role="alertdialog", a required title and description, and a cancel action that holds focus on open. For a task that needs a form or a choice, use Dialog. Import @prepared911/ui/alert-dialog from its subpath. Load @prepared911/ui/styles.css once at the document root. Labels are the Buttons' children, so there is no default English string in the component. A press on the backdrop does not close an AlertDialog. The person answers with the cancel action, the action, or Escape. Escape and the cancel action both dismiss without running the action; only a press on the action runs it. An AlertDialog opened from inside a Dialog stacks above it in the same document, and Escape closes the alert dialog first. Focus returns to the control that opened it, inside the Dialog. To confirm before a dirty form closes, control both roots: veto the form Dialog's close request with details.cancel() and open the AlertDialog; "Keep editing" closes only the alert dialog, and the action closes both. onOpenChange(open, details) runs once for each request: trigger-press, close-press (the cancel or the action), and close-request (Escape or the platform back gesture). For a close-press, details.source is the pressed Button. Call details.cancel() on a cancelable request to keep the dialog open, for example while an async action runs: control open, start the work in the action's onClick, and veto the close-press until it settles. On open, focus moves to the cancel action, so pressing Enter or Space never confirms by accident. For a confirmation that is not destructive, pass initialFocus with a ref to the action. If the dialog has no cancel action, focus goes to the first focusable element. On close, focus returns to the trigger; pass finalFocus to send it elsewhere. The shell provides what an alert dialog needs from the page, once: its entry imports @prepared911/ui/styles.css, it sets data-theme on the document element, and it renders DesignSystemEnvironment for the locale and time zone (see remote composition). An AlertDialog needs no provider, portal root, or z-index: it is a native <dialog> opened with showModal(), so it paints in the top layer above the shell's chrome, a slot's overflow, transform, or z-index cannot clip or cover it, and the page behind it does not scroll. It renders in place and takes the theme of the nearest data-theme region around its trigger. AlertDialogTrigger clones its child, so a RemoteComponent mount cannot be the trigger. A remote that asks for an answer renders the whole AlertDialog, trigger included, imported from @prepared911/ui/alert-dialog as above, and imports no @prepared911/ui stylesheet. When the shell owns the trigger, the shell renders the AlertDialog too, and a remote can fill a Dialog's content slot instead. Focus starts on the cancel, Tab stays in the dialog, and Escape returns focus to the trigger inside the remote.