# Side sheet and bottom sheet

Quick edit without leaving the list. A side sheet slides in from the right on desktop (404 / 532 / 856px); on the phone it becomes a bottom sheet or a full-screen sheet. Header, scrolling body, sticky footer with the one primary.

- **Group:** Overlays · **family:** `overlays` · **shadcn:** Sheet, Drawer
- **Build:** shadcn `Sheet` (Radix Dialog, side=right); phone bottom sheet = shadcn `Drawer` (vaul) or `Sheet side="bottom"`.
- **In apps/admin today:** @radix-ui/react-dialog is installed (via ui/dialog.tsx); `sheet.tsx` and `drawer.tsx` are new.
- **Client component:** yes. 

## Content rules

- Title = the record ("Navy birdseye two-piece suit"), code below in mono.
- Primary names the result: "Save price", not "Done".

## Do

- Use for edits that keep the list context.
- Keep footer actions visible while the body scrolls.

## Don't

- Stack two sheets; use the guard dialog above one.
- Put a whole page in a sheet: route instead.

## Motion

- Side sheet in: `translateX(104% → 0)` on `--motion-sheet-in` (260ms, `--ease-in`); out on `--motion-sheet-out` (180ms, `--ease-out`).
- Scrim fades to `--scrim` (rgba(10,14,24,.38)) on the same timings.
- Phone bottom sheet travels on Y with the same tokens and `--e-phone-sheet`.

## 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="true"`, `aria-labelledby` the title.
- **ARIA:** Opener carries `aria-expanded`.
- **Focus:** Opening moves focus inside (`[data-k-autofocus]` first, else the first field); closing returns it to the opener.

## Tokens

`--scrim` `--motion-sheet-out` `--z-scrim` `--sheet-w` `--popover` `--e-sheet` `--z-sheet` `--motion-handoff-sheet` `--motion-sheet-in` `--r-frame` `--e-phone-sheet` `--r-pill` `--border` `--input` `--s-2` `--topbar-h` `--sheet-w-md` `--sheet-w-lg` `--s-3` `--s-4` `--s-5` `--s-8` `--s-1` `--s-12` `--muted-foreground` `--ring`

## Files

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