# Drawer

Modal side panel for detail views, filters, and secondary forms that need more room than
a Popover and less interruption than a full page.

## Rules

- Focus moves into the panel on open and Tab stays inside it. Escape closes, the scrim
  closes, and focus returns to the trigger. That is built in; do not add a second close
  path that skips focus restoration.
- Use `right` for detail and editing, `left` for navigation on narrow screens, and
  `bottom` for mobile sheets.
- Actions go in `footer`, not loose at the end of the body. The footer stays visible
  while the body scrolls.
- A drawer is modal. If the user needs to reference the page behind it while working,
  use an inline panel instead.
- It sits at `--dt-z-overlay`, above every sticky role, so a fixed page header never
  floats over the drawer's own scrim. Do not lower a header's z-index to make room.

## Surfaces
`surface` sets the panel's fill: `raised` (default), `glass` or `glass-strong` (what's behind shows through, blurred), or `brand` and `brand-muted`. The brand fills bring the text, links, borders and buttons that read on them, the same as a brand `Section`; `Navbar` passes its own surface down so the menu it opens matches the bar.

## Tradeoffs

Drawers preserve page context but cover a third of the screen and trap focus. For tasks
longer than a couple of fields, a dedicated page respects the browser's back button.