# Help drawer

The page-help sheet (380px, below the top bar so "?" stays clickable): Summary, What you can do here, Connected to, Where the data comes from, Key terms. Loading, empty and error states. Phone: a bottom sheet.

- **Group:** Page help · **family:** `page-help` · **shadcn:** Sheet
- **Build:** shadcn `Sheet` (modal={false} on desktop) / `Drawer` on the phone; `Collapsible` for terms.
- **In apps/admin today:** Sheet is new.
- **Client component:** yes. 

## Content rules

- Plain language; the "mum test": no jargon.
- Sources name the system (Laravel ERP, Holland & Sherry feed).

## Do

- Keep blocks in the fixed order.

## Don't

- Duplicate the page's own labels as help.

## Motion

- Sheet motion (`--motion-sheet-in` 260ms / out 180ms).

## Accessibility

- **Keyboard:** Escape closes; focus returns to "?".
- **ARIA:** `role="dialog"` labelled by the page title; not modal on desktop (page stays usable).
- **Focus:** Focus moves to the drawer heading.

## Tokens

`--w-medium` `--text-micro` `--font-ui` `--muted-foreground` `--muted` `--r-chip` `--help-w` `--s-3` `--s-4` `--s-5` `--border` `--r-control` `--accent` `--primary` `--w-semibold` `--text-section` `--lh-section` `--font-voice` `--tr-section` `--font-stretch-title` `--text-small` `--s-2` `--text-card` `--lh-card` `--text-read` `--lh-read` `--motion-hover` `--ring` `--text-body` `--warning` `--destructive` `--text-label` `--motion-skeleton` `--s-8` `--text-18` `--control-h-m-lg`

## Files

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