Drawer

1import { Drawer } from '@/ui/Overlay'23const [open, setOpen] = useState(false)4const [selected, setSelected] = useState<Service>()56<Drawer7  open={open}8  onClose={handleClose}9  side="right"          // detail goes right; left is navigation10  width="26rem"11  title={selected?.name}12  description="Deployment settings for this service"13  footer={14    <>15      <Button variant="text" onClick={handleClose}>Cancel</Button>16      <Button onClick={save}>Save changes</Button>17    </>18  }19>20  <ServiceForm value={selected} onChange={setDraft} />21</Drawer>2223// Three exits, one guard — Escape, the scrim and the close button24// all land here, so the dirty check belongs in one place.25function handleClose() {26  if (dirty && !confirm('Discard changes?')) return27  setOpen(false)28}2930// Below the tablet breakpoint a drawer becomes a bottom sheet.31// Same content, same state, the container follows the thumb.32const isPhone = useMediaQuery('(max-width: 639px)')33const Panel = isPhone ? BottomSheet : Drawer

<div class="ds-page" inert>
  <!-- the list stays rendered and stays visible -->
</div>

<div class="ds-scrim" data-close></div>

<aside
  class="ds-drawer ds-drawer--right"
  role="dialog"
  aria-modal="true"
  aria-labelledby="drawer-title"
  aria-describedby="drawer-desc"
  tabindex="-1"
>
  <header class="ds-drawer__header">
    <div>
      <h2 id="drawer-title">api-gateway</h2>
      <p id="drawer-desc">Deployment settings for this service</p>
    </div>
    <button type="button" class="ds-icon-button" aria-label="Close panel" data-close>
      <svg aria-hidden="true"><!-- × --></svg>
    </button>
  </header>

  <div class="ds-drawer__body"><!-- the only scrolling region --></div>

  <footer class="ds-drawer__footer">
    <button class="ds-button ds-button--text" data-close>Cancel</button>
    <button class="ds-button ds-button--filled">Save changes</button>
  </footer>
</aside>

.ds-drawer {
  position: fixed;
  inset-block: 0;
  z-index: 75;
  display: flex;
  flex-direction: column;

  /* Clamped, so a sliver of scrim always shows on a phone.
     A full-bleed panel reads as a new page, not as an overlay. */
  inline-size: min(26rem, 100vw - 2rem);

  background: var(--ds-surface-overlay);   /* modal surface: top of the ramp */
  box-shadow: var(--shadow-e5);
}

/* Enter from the edge you are anchored to — the motion is the
   explanation of where the panel came from. */
.ds-drawer--right {
  inset-inline-end: 0;
  border-inline-start: 1px solid var(--ds-border);
  animation: drawer-in-right 260ms var(--ease-emphasized) both;
}
.ds-drawer--left {
  inset-inline-start: 0;
  border-inline-end: 1px solid var(--ds-border);
  animation: drawer-in-left 260ms var(--ease-emphasized) both;
}

@keyframes drawer-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes drawer-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Header and footer are fixed; only the body moves. */
.ds-drawer__header,
.ds-drawer__footer { flex: none; }

.ds-drawer__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;   /* stops the page behind scrolling */
  padding: 20px;
}

.ds-drawer__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;

  /* The rule separates it; a fill would not. An opaque surface token here is
     an absolute value inside a container one rung above it, so it reads as a
     hole punched in the panel rather than a bar attached to it. */
  border-block-start: 1px solid var(--ds-border-subtle);
}

.ds-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--ds-layer-scrim);
  animation: fade-in 180ms linear both;
}

/* The slide is information, not decoration — but not everyone
   can take it. Keep the panel, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  .ds-drawer { animation: fade-in 120ms linear both; }
}