Drawer

A detail panel that slides in from the right edge. Use it to view or edit item details without navigating away from the current page. A scrim (.ov) covers the background; the drawer panel (.drawer) is fixed to the right.

Structure

Composed of a scrim and a drawer panel. In the showcase, the open state is rendered statically inside a relative container rather than fixed to the viewport.

Rules

  • Scrim — rgba(10,30,51,.35), inset:0, z-index:20. Values are fixed — theme-independent.
  • Drawer position — position:fixed; right:0; top:0; bottom:0. Width min(560px,94vw). z-index must be 1 higher than the scrim.
  • Surface — --card-bg + --c-line-soft left border. Shadow --sh-full. Radius --r-xl (top two corners). Padding --sp-xl.
  • Accessibility — role=dialog aria-modal=true required. Closes on Esc. Move focus inside the drawer on open.
  • Close button — Pill shape in the top-right corner (--r-pill). X icon + "Close" label.