Backdrop

1import { Backdrop } from '@/ui/Overlay'23// The scrim and its overlay live in ONE portal, so nothing in the app can4// slide a z-index between them.5<Portal>6  <Backdrop open={open} onClose={close} />7  <Dialog open={open} onClose={close} />8</Portal>910// The scrim is visual. This is what actually makes the page unavailable.11React.useEffect(() => {12  if (!open) return13  const root = document.getElementById('app')!14  root.inert = true15  return () => { root.inert = false }   // including on an error path16}, [open])1718// Scroll lock without the sideways jump. Removing the scrollbar shifts the19// page by its width — pad the body by exactly that amount.20function useScrollLock(locked: boolean) {21  React.useEffect(() => {22    if (!locked) return23    const width = window.innerWidth - document.documentElement.clientWidth24    const prev = {25      overflow: document.body.style.overflow,26      padding: document.body.style.paddingRight,27    }28    document.body.style.overflow = 'hidden'29    document.body.style.paddingRight = `${width}px`30    return () => {31      document.body.style.overflow = prev.overflow32      document.body.style.paddingRight = prev.padding33    }34  }, [locked])35}3637// Two overlays: reuse one scrim rather than stacking two to 92%.38const scrimVisible = dialogOpen || drawerOpen

<!-- The page. inert is the mechanism; the scrim is the appearance. -->
<div id="app" inert>
  <h1>api-gateway</h1>
  <button type="button">Deploy</button>
</div>

<!-- Both in one stacking context. -->
<div class="ds-overlay-root">
  <!-- Pure decoration: never announced, never focusable. -->
  <div class="ds-backdrop" aria-hidden="true"></div>

  <div role="dialog" aria-modal="true" aria-labelledby="t">
    <h2 id="t">Roll back?</h2>
  </div>
</div>

.ds-backdrop {
  position: fixed;
  /* dvh, not vh: a collapsing mobile URL bar otherwise reveals an
     undimmed strip at the bottom. */
  inset: 0;
  block-size: 100dvh;
  z-index: 95;                       /* exactly one below its overlay */
  background: var(--ds-layer-scrim);
  animation: fade-in 180ms var(--ease-standard) both;
}

/* Theme-dependent, not a constant. A white page reads as inactive at far
   less dimming than a dark one. */
[data-theme='dark']  { --ds-layer-scrim: rgb(0 0 0 / 0.72); }
[data-theme='light'] { --ds-layer-scrim: rgb(0 0 0 / 0.42); }

/* Buys separation without extra dimming — at a real compositing cost.
   Never animate it. */
.ds-backdrop--blur { backdrop-filter: blur(2px); }

/* The scrim and the overlay must share one stacking context, or a z-index
   elsewhere in the app can slide between them. */
.ds-overlay-root { position: fixed; inset: 0; z-index: 95; }

@media (prefers-reduced-motion: reduce) {
  .ds-backdrop { animation: none; }
}

/* Scrims are typically removed here, so the overlay must stand on its
   border alone. */
@media (forced-colors: active) {
  .ds-backdrop { background: transparent; }
  [role='dialog'] { border: 1px solid; }
}