Overlays

Every overlay follows one contract (ADR-0108), so a menu inside a dialog and a toast over a drawer behave the same everywhere.

Layers and sizes

Layers come from tokens, not DOM order. Dialog sizes are 440, 560 and 720 px, full screen below 640 px. Drawer widths are 340, 480 and 640 px, from the inline end (mirrored in right to left).

Token	CSS variable	Value

Token	CSS variable	Value

Stack depth

At most two. A dialog may sit over a drawer; an alert dialog may open over either for a discard or delete; never a third level. A toast never opens a modal. A tooltip never lives inside a modal’s focus trap.

Dismissal

Overlay	Escape	Outside press	Close button
Informational dialog, popover, menu	yes	yes	yes
Dialog with inputs	yes, guarded	no	yes, guarded
Alert dialog	yes (cancel)	no	optional
Drawer and sheet	yes	yes, unless the form is dirty	yes

A dirty form vetoes the close and asks “Discard changes?”, with “Keep editing” focused.

Focus

Initial focus goes to the first tabbable element, to the title for long content, and to the least destructive button for an irreversible action. Focus returns to the trigger when the layer closes. A modal always shows a close control; the focus ring is 2 px.

Motion

Tooltip uses micro; menu, popover and toast use standard; dialog, drawer and sheet use panel. Exits are 0.8 times as long. Reduced motion keeps only a fade.

Pages

Dialog, Alert dialog, Drawer, Popover, Menu, Tooltip, Toast, Keyboard shortcuts.