# Unsaved-changes guard

The small dialog that appears above an open sheet (or page) when you try to leave with unsaved edits: Keep editing, Discard, Save and close.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** AlertDialog
- **Build:** shadcn `AlertDialog` rendered above the open `Sheet`.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Title "Discard your changes?" · body names what is lost ("The new GBP price and 2 photos") · actions Keep editing / Discard / Save and close.

## Do

- Say exactly what will be lost.

## Don't

- Show the guard when nothing changed.

## Accessibility

- **Keyboard:** Escape = Keep editing.
- **Keyboard:** Enter does not discard.
- **ARIA:** `role="alertdialog"`, described by the sentence.
- **Focus:** Focus lands on Keep editing; returns to the sheet field after.

## Tokens

`--z-guard-scrim` `--z-guard` `--text-small` `--warning` `--w-medium`

## Files

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