The living catalog

Elements06/15

Overlay

G1

The one mount above z-float: modal (460/640px) or bare. Focus trap, Esc, scroll lock, stage shadow, scale-in. Overlays never stack two deep.

Posture

Modal — focus trap, Esc, never stacked two deep

npx candlelight-ds add overlay

Use when

The user must address something before continuing on this surface — a blocking decision.

Don't use when

Editing an object adjacent to a list (Sheet) or a whole workflow (a route). Modal is the last resort, not the first thought.

States
closedopen sm (460px)open lg (640px)barelocked (typed-confirm)
Keyboard
  • Esccloses (unless locked)
  • Tabcycles inside the trap
Acceptance
  • Overlays never stack two deep — a modal needing a picker uses an inline combobox.
  • Scrim is stage/80 with 2px blur; the panel wears shadow-stage.

Raw twin: /components/overlay.md·Registry item: /r/overlay.json