Drawer

The shared transient side-panel and bottom-sheet grammar for shell-attached workflows that need more room than a menu without becoming a detached modal.

Status: Active
Signed-off family member: `context-nav drawer` shell
Component readiness: Deferred until second-consumer confirmation

Live Surfaces

Review This Pattern

The generic drawer contract is expressed today through the signed-off context-nav drawer shell and its host context-nav family.

PrioritycanonicalsContext-nav drawer canonicals hostContext-nav canonical family payloadDisplay-settings payload pattern

Contract Highlights

What This Pattern Governs

Drawers stay attached to the shell, close honestly, and preserve the same grammar across desktop side panels and mobile bottom sheets.

Attachment

Shell-attached only

Desktop uses an attached side panel and mobile uses a bottom-attached sheet. Floating detached card treatment is explicitly out of bounds.

Accessibility

Truthful transient behavior

Open from the launcher, close on outside click or `Escape`, and return focus to the trigger with a named close control.

Variation

Content may vary, shell may not

Different drawers can host different content, but they should not invent new attachment, focus-return, or close-button grammar.