Drawer

Drawers are token-driven overlay panels. Spectra ships the shell, placements, motion, and backdrop. App code handles open state and focus flow.

Drawer API

Class / hook	Used for	Notes
`.sp-drawer-wrap`	Overlay wrapper	Fixed viewport layer. Toggle `data-open="true"` to enable interaction.
`.sp-drawer-backdrop`	Dismiss layer	Uses `--sp-backdrop` and motion tokens for fade in/out.
`.sp-drawer`	Drawer panel	Provides surfaced container, border, radius, and slide transition.
`.sp-drawer--right` / `--left` / `--top` / `--bottom`	Placement	Choose one placement modifier per drawer instance.
`.sp-drawer__header`	Top bar	Standard header spacing and divider.
`.sp-drawer__title`	Heading	Bold title inside the header row.
`.sp-drawer__body`	Scrollable content	Main content area. Safe-area padding is applied per placement.
`.sp-drawer__footer`	Action area	Bottom action row with divider.
`.sp-drawer__footer--flat`	Flat footer	Removes the divider when the footer should feel merged into the body.
`body.sp-scroll-lock`	Scroll lock	Optional helper class to keep the page from moving behind an open drawer.

Interactive preview

Open the demo drawer

The demo uses one drawer shell and swaps the placement modifier. Production apps should also manage focus return and keyboard dismissal.

Contract

Spectra owns the shell, placement, motion, and safe-area padding. Your app owns state, focus management, and what content lives inside the drawer.

Typical markup

<div class="sp-drawer-wrap" data-open="false">
  <button class="sp-drawer-backdrop" type="button" aria-label="Close drawer"></button>
  <aside class="sp-drawer sp-drawer--right" role="dialog" aria-modal="true">
    <div class="sp-drawer__header">...</div>
    <div class="sp-drawer__body">...</div>
    <div class="sp-drawer__footer">...</div>
  </aside>
</div>

Guidance

Keep only one active drawer per viewport. If the content becomes a full page workflow, move it to a route or modal instead of nesting more overlay layers.