Dialog

1import { Dialog } from '@/ui/Overlay'23// Confirmation. Proportional friction for something irreversible.4const [open, setOpen] = useState(false)5const [typed, setTyped] = useState('')67<Dialog8  open={open}9  onClose={() => { setOpen(false); setTyped('') }}10  size="sm"11  tone="danger"12  icon={<AlertTriangle size={17} />}13  title={'Delete ' + service.name + '?'}14  description="This removes the service and all deployment history. It cannot be undone."15  footer={16    <>17      <Button variant="text" onClick={() => setOpen(false)}>Cancel</Button>18      <Button19        variant="danger"20        disabled={typed !== service.name}21        loading={deleting}22        onClick={confirmDelete}23      >24        Delete service25      </Button>26    </>27  }28>29  <Field label={'Type ' + service.name + ' to confirm'} htmlFor="confirm">30    <TextInput id="confirm" value={typed} onChange={(e) => setTyped(e.target.value)} />31  </Field>32</Dialog>3334// Guard the exit when data would be lost35function requestClose() {36  if (!dirty) return setOpen(false)37  if (confirm('Discard your changes?')) setOpen(false)38}3940// The native <dialog> element gives you the top layer, the backdrop41// and Escape for free. Its focus trap is still worth verifying.42const ref = useRef<HTMLDialogElement>(null)43useEffect(() => { open ? ref.current?.showModal() : ref.current?.close() }, [open])

<!-- Native dialog: top layer, ::backdrop and Escape come free -->
<dialog class="ds-dialog" aria-labelledby="d-title" aria-describedby="d-desc">
  <header class="ds-dialog__header">
    <span class="ds-dialog__icon" aria-hidden="true"><svg>…</svg></span>
    <div>
      <h2 class="ds-dialog__title" id="d-title">Delete api-gateway?</h2>
      <p class="ds-dialog__desc" id="d-desc">
        This removes the service and all deployment history. It cannot be undone.
      </p>
    </div>
    <button class="ds-dialog__close" aria-label="Close dialog">
      <svg aria-hidden="true">…</svg>
    </button>
  </header>

  <div class="ds-dialog__body">…</div>

  <footer class="ds-dialog__footer">
    <button class="ds-btn ds-btn--text">Cancel</button>
    <button class="ds-btn ds-btn--danger">Delete service</button>
  </footer>
</dialog>

<!-- Destructive confirmations use role="alertdialog" -->
<dialog role="alertdialog" aria-labelledby="d-title">…</dialog>

.ds-dialog {
  inline-size: min(32rem, calc(100vw - 2rem));
  max-block-size: min(44rem, calc(100dvh - 3rem));
  padding: 0;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-2xl);
  background: var(--ds-surface-overlay);
  box-shadow: var(--shadow-e5);
  animation: scale-in 200ms var(--ease-emphasized) both;
}

/* The page behind should read as paused, not gone */
.ds-dialog::backdrop {
  background: var(--ds-layer-scrim);
  backdrop-filter: blur(2px);
  animation: fade-in 160ms var(--ease-standard) both;
}

/* Scrollable: header and footer pin, only the body moves */
.ds-dialog__header { padding: 20px 24px 16px; }
.ds-dialog__body   { overflow-y: auto; padding: 20px 24px; }
.ds-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-block-start: 1px solid var(--ds-border-subtle);
  background: var(--ds-surface);
}

/* Mobile: fullscreen beats a centred modal in the margins */
@media (max-width: 640px) {
  .ds-dialog {
    inline-size: 100vw;
    max-block-size: 100dvh;
    border-radius: 0;
    margin: 0;
  }
  .ds-dialog__footer { flex-direction: column-reverse; }
  .ds-dialog__footer > * { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-dialog { animation-name: fade-in; }
}