Dialog

Anatomy: title (<h2>) → body → actions, secondary before primary in DOM order.

Rules

• Use the platform: <dialog> with showModal() gives focus trapping, Escape, inertness and top-layer stacking for free (H-48).
• Focus moves to the dialog on open — to the first control, or the container if none — and returns to the trigger on close.
• Dismissible by Escape and by backdrop click, unless it reports data loss. Then require an explicit choice.
• Title states the decision, not the category: "Delete three invoices?", not "Confirm".
• The confirming button names the outcome: "Delete invoices", not "Confirm".
• Never nest dialogs. If a dialog needs a dialog, the flow is wrong.
• Never use a dialog for something a page can hold. Dialogs cannot be linked to, bookmarked or reloaded.
• --shadow-raised is used here — this is one of the few places elevation is legitimate.