# Dialog

A centred, focused task that needs the person's full attention but is short: rename, choose a scope, connect an app. 480px wide, 15px radius.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** Dialog
- **Build:** shadcn `Dialog` (Radix).
- **In apps/admin today:** `ui/dialog.tsx` exists. Restyle panel radius to 15px and the muted footer.
- **Client component:** yes. 

## Content rules

- Title is a question or task ("Rename saved view").

## Do

- Keep to one decision.

## Don't

- Scroll a dialog: use a sheet.

## Motion

- In: opacity + `translate(-50%,-48%) scale(.98)` → centred on `--motion-sheet-in`; out on `--motion-pop-out` (110ms).

## Accessibility

- **Keyboard:** Escape closes the top layer and returns focus to the opener.
- **Keyboard:** Tab and Shift+Tab cycle inside the open layer only.
- **ARIA:** `role="dialog"` `aria-modal`, `aria-labelledby` + `aria-describedby`.
- **Focus:** Opening moves focus inside (`[data-k-autofocus]` first, else the first field); closing returns it to the opener.

## Tokens

`--dialog-w` `--popover` `--r-frame` `--e-dialog` `--z-sheet` `--motion-pop-out` `--motion-handoff` `--motion-sheet-in` `--s-3` `--s-5` `--s-6` `--s-2` `--s-4` `--muted-foreground` `--foreground` `--w-medium` `--border` `--muted`

## Files

`dialog.html` live specimen · `dialog.css` kit rules · `dialog.d.ts` props · full page: `docs/components/dialog/` (phone: `m/`).