@hegemonart/get-design-done 1.14.8 → 1.16.0

package/reference/components/card.md

@@ -0,0 +1,200 @@
+# Card — Benchmark Spec
+
+**Harvested from**: Material 3, Polaris, Carbon, Atlassian, Mantine, shadcn/ui, Ant Design, Fluent 2
+**Wave**: 2 · **Category**: Containers
+
+---
+
+## Purpose
+
+A card is a contained surface that groups related information and actions. It is a visual container, not a navigation element by default — only make the entire card clickable when the primary action is navigation and there is a single dominant action. Mixed-content cards with multiple actions should not be entirely clickable. *(Material 3, Polaris, Carbon all agree on this boundary)*
+
+---
+
+## Anatomy
+
+```
+┌────────────────────────────┐  ← card surface (border/shadow/background)
+│ [Media / Image]            │  ← optional, always with alt text
+│────────────────────────────│
+│ Eyebrow / Category         │  ← optional; 12px/600 uppercase
+│ Title                      │  ← primary label; ≥16px
+│ Description                │  ← supporting text; 14px/400
+│────────────────────────────│
+│ [Action 1] [Action 2]      │  ← optional action area
+└────────────────────────────┘
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| Container | Yes | `<article>` for standalone content; `<div>` for layout |
+| Title | Yes | Descriptive; h2/h3 depending on hierarchy |
+| Content | Yes | Body text, metadata, or media |
+| Media / image | No | Always provide `alt`; decorative images use `alt=""` |
+| Actions | No | Keep ≤2 primary actions per card |
+| Footer / metadata | No | 12px/400; secondary information |
+
+---
+
+## Variants
+
+| Variant | Description | Systems |
+|---------|-------------|---------|
+| Elevated | Drop shadow; floats above surface | Material 3, shadcn |
+| Outlined | Border, no shadow | Material 3, Carbon, Polaris |
+| Filled | Filled background, no shadow or border | Material 3, Mantine |
+| Clickable / Interactive | Entire card is a link or button | Material 3, Polaris, Carbon |
+| Horizontal | Media left, content right | Carbon, Polaris, Atlassian |
+| Compact | Dense layout; no media | Carbon, Fluent |
+
+**Norm** (≥5/18): outlined or elevated; ≤2 actions per card.
+**Diverge**: elevation vs. outline — both are valid; use elevated for content that needs to float (dashboards), outlined for dense lists (tables of cards).
+
+---
+
+## States
+
+| State | Trigger | Visual | ARIA/HTML |
+|-------|---------|--------|-----------|
+| default | — | Resting surface | — |
+| hover (clickable) | pointer | Shadow deepens or border darkens | — |
+| focus (clickable) | keyboard | 2px focus ring on outer card | — |
+| active (clickable) | mousedown | Scale 0.99 | — |
+| selected | programmatic | Border + background tint | `aria-selected="true"` |
+| loading | async content | Skeleton placeholder | `aria-busy="true"` |
+| disabled | programmatic | 38% opacity | `aria-disabled="true"` |
+
+---
+
+## Sizing & Spacing
+
+| Property | Value | Notes |
+|----------|-------|-------|
+| Padding | 16px (sm), 20px (md), 24px (lg) | *(Carbon: 16px default, Material 3: 16px)* |
+| Border radius | Use token; match `reference/surfaces.md` concentric rule | |
+| Media aspect ratio | 16:9 (landscape), 1:1 (square) | `object-fit: cover` |
+| Min width | 240px | Prevents content collapse |
+| Max width | 480px (typical) | Grid controls actual width; max-width is a guideline |
+| Gap between cards | 16px (sm grid), 24px (md grid) | |
+
+Cross-link: `reference/surfaces.md` — concentric radius, 3-layer shadow formula, elevation tokens
+
+---
+
+## Typography
+
+- Title: 16–20px/600 depending on card prominence (h2/h3 in DOM hierarchy)
+- Eyebrow: 11px/600 uppercase, muted colour
+- Body: 14px/400
+- Metadata: 12px/400 muted
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: No specific card role. Use `<article>` for independent pieces of content; `<li>` in a list of cards; `<div>` for layout grouping.
+
+### Clickable Card Rules
+
+*Per WAI-ARIA APG link + button patterns — W3C — 2024*
+
+| Invocation | Element | Key |
+|------------|---------|-----|
+| Navigate to new page | `<a href>` wrapping or inside card | Enter |
+| Trigger action in context | `<button>` wrapping or inside card | Enter, Space |
+
+- **Do not wrap an entire card in `<a>` if it contains other interactive elements** (links, buttons inside) — nested interactive elements are inaccessible by keyboard
+- Use the "card with primary action + secondary actions" pattern: one `<a>` stretched via `::after` pseudo-element to fill the card; secondary action buttons sit above in stacking context
+
+### Accessibility Rules
+
+- Card with image: always provide `alt`; use `alt=""` for decorative images
+- Clickable card: heading inside card should be the accessible name (via `aria-labelledby` or the stretched-link pattern)
+- Card grid: use `role="list"` on the grid container and `role="listitem"` on each card, or a semantic `<ul>/<li>` structure, so screen readers announce item count
+- Loading skeleton: add `aria-busy="true"` on the card container; remove when content loads
+
+---
+
+## Motion
+
+| Transition | Duration | Easing | Notes |
+|------------|----------|--------|-------|
+| hover shadow | 150ms | ease-out | Elevation increase |
+| press scale | 80ms | ease | 1→0.99 (subtle; card is large) |
+| skeleton shimmer | 1.5s | linear loop | Respect `prefers-reduced-motion` |
+
+Cross-link: `reference/motion.md` — Skeleton shimmer pattern, `prefers-reduced-motion`
+
+---
+
+## Do / Don't
+
+### Do
+- Use `<article>` when the card is an independent, self-contained piece of content *(Carbon, Polaris)*
+- Keep clickable cards to a single primary action; surface secondary actions as explicit buttons *(Material 3, Polaris)*
+- Use the stretched-link (`::after`) pattern for clickable cards with nested links/buttons *(Carbon, Bootstrap pattern)*
+- Provide `alt` text for all card images, or `alt=""` for decorative images *(WCAG 1.1.1)*
+
+### Don't
+- Don't wrap the entire card in `<a>` if it contains other interactive elements *(WAI-ARIA APG)*
+- Don't use `<div>` as a clickable card without `role="button"` or `role="link"` + keyboard handler *(WAI-ARIA APG)*
+- Don't place the entire card title in a plain `<span>` when it could be `<h2>/<h3>` *(Atlassian, Carbon)*
+- Don't use more than 2 primary actions per card — extract to a detail view *(Material 3, Polaris)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Nested interactive elements in clickable container | `reference/anti-patterns.md` |
+| Missing alt on card media | `reference/anti-patterns.md` |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| ≤2 actions per card | Material 3, Polaris, Carbon |
+| Stretched-link pattern for nested interactivity | Carbon, Bootstrap |
+| article element for standalone card content | Carbon, Polaris |
+| 16px default padding | Carbon, Material 3 |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# Entire card wrapped in <a> with nested buttons/links
+grep -rn '<a ' src/ | grep -i 'card' | xargs grep -l 'button\|<a ' 2>/dev/null
+
+# Clickable div without role
+grep -rn 'class.*card\|data-testid.*card' src/ | grep 'onClick\|on:click' | grep -v 'role='
+
+# Card image without alt
+grep -rn '<img' src/ | grep -i 'card' | grep -v 'alt='
+
+# Missing heading hierarchy in card
+grep -rn 'class.*card' src/ | xargs grep -L 'h[1-6]\|aria-label' 2>/dev/null
+```
+
+---
+
+## Failing Example
+
+```html
+<!-- BAD: entire card is <a> but contains a button — button is inaccessible by keyboard in most AT -->
+<a href="/product/42" class="card">
+  <img src="product.jpg" />
+  <h3>Product Name</h3>
+  <p>Description…</p>
+  <button onclick="addToCart(42)">Add to cart</button>
+</a>
+```
+
+**Why it fails**: Nested `<button>` inside `<a>` is invalid HTML. Keyboard users pressing Tab inside the link may reach the button, but Enter on the button may also trigger the link. Screen reader behavior is unpredictable.
+**Grep detection**: `grep -rn '<a.*href' src/ | xargs grep -l '<button' 2>/dev/null`
+**Fix**: Use the stretched-link pattern — `<h3><a href="/product/42">Product Name</a></h3>` with `::after { position: absolute; inset: 0; }` on the `<a>`, and position the "Add to cart" button above via `position: relative; z-index: 1`.

package/reference/components/checkbox.md

@@ -0,0 +1,207 @@
+# Checkbox — Benchmark Spec
+
+**Harvested from**: Material 3, Carbon, Polaris, Ant Design, WAI-ARIA APG, Mantine, Chakra UI, Atlassian
+**Wave**: 1 · **Category**: Inputs
+
+---
+
+## Purpose
+
+A checkbox allows the user to select or deselect a binary option, or to represent an indeterminate state (partially selected group). Checkboxes are independent — selecting one does not affect others. Use radio buttons for mutually exclusive choices within a group. Always group related checkboxes in a `<fieldset>` with a `<legend>`.
+
+---
+
+## Anatomy
+
+```
+┌──┐  Label text
+│✓ │  ← <input type="checkbox" id="x"> (or role="checkbox")
+└──┘  Helper text (opt.)
+      Error message (opt.)
+
+Group:
+<fieldset>
+  <legend>Preferences</legend>
+  [checkbox] Option A
+  [checkbox] Option B
+  [checkbox] Option C (indeterminate)
+</fieldset>
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| Input / control | Yes | Native `<input type="checkbox">` preferred |
+| Label | Yes | `<label for="id">` — click zone includes label text |
+| Fieldset + legend | Yes (group) | Required when ≥2 related checkboxes |
+| Helper text | No | Below label; `aria-describedby` |
+| Error message | Conditional | Field-level or group-level |
+| Indeterminate indicator | Conditional | Dash/minus mark; set via `.indeterminate = true` (JS) |
+
+---
+
+## Variants
+
+| Variant | Description | Systems |
+|---------|-------------|---------|
+| Default | Binary checked / unchecked | All |
+| Indeterminate | Partial selection indicator (parent of group) | Material 3, Carbon, Ant, Mantine |
+| Standalone | Single checkbox (e.g. "I agree to terms") | All |
+| Group | ≥2 checkboxes in `<fieldset>` | All |
+| With description | Label + helper text below | Material 3, Polaris, Carbon |
+
+**Norm** (≥6/18): indeterminate state is a visual-only UI state — the underlying `checked` value is still boolean; set via DOM `.indeterminate` property, not HTML attribute.
+**Diverge**: size — Material 3 uses 18px; Carbon 16px; Polaris 16px; Ant 14–16px. 16px is the de-facto norm.
+
+---
+
+## States
+
+| State | Trigger | Visual | ARIA |
+|-------|---------|--------|------|
+| unchecked | default | Empty box | `aria-checked="false"` |
+| checked | user interaction | Checkmark | `aria-checked="true"` |
+| indeterminate | set via JS | Dash / minus | `aria-checked="mixed"` |
+| hover | pointer over | Box border darkens | — |
+| focus | keyboard | 2px focus ring around box | — |
+| disabled unchecked | `disabled` | 38% opacity | `aria-disabled="true"` |
+| disabled checked | `disabled` | 38% opacity + check | `aria-disabled="true"` |
+| error | validation | Red box border | `aria-invalid="true"` |
+
+---
+
+## Sizing & Spacing
+
+| Property | Value | Notes |
+|----------|-------|-------|
+| Control size | 16×16px (20px touch target via pseudo-element) | *(Carbon, Polaris, Material 3)* |
+| Gap: control → label | 8px | |
+| Label min click zone | Full row width | Increases tap target |
+| Group item spacing | 8px vertical between items | *(Carbon, Material 3)* |
+| Indentation (nested) | 24px | When showing hierarchical groups |
+
+Cross-link: `reference/surfaces.md` — hit-area pseudo-element pattern (44×44px minimum touch target)
+
+---
+
+## Typography
+
+- Label: 14px/400; same weight as body — checkboxes are options, not headings
+- Legend: 14px/500 or 12px/600 uppercase — distinguishes group from items
+- Helper/error: 12px/400
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: `checkbox` (implicit on `<input type="checkbox">`)
+> **Required attributes**: `aria-checked` (if not native); `aria-describedby` for helper/error
+
+### Keyboard Contract
+
+*Quoted verbatim from WAI-ARIA APG — https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ — W3C — 2024*
+
+| Key | Action |
+|-----|--------|
+| Tab | Moves focus to the checkbox |
+| Space | Toggles the checkbox state (checked / unchecked / indeterminate) |
+
+Within a group: Tab moves between checkboxes (not arrow keys — checkboxes are independent).
+
+### Accessibility Rules
+
+- Label MUST be associated via `<label for="id">` — clicking the label must toggle the checkbox
+- `<fieldset>` + `<legend>` MUST wrap every group of related checkboxes — the legend provides group context to screen readers
+- Indeterminate state MUST be set via JS `.indeterminate = true` — there is no HTML attribute; `aria-checked="mixed"` must be set simultaneously on `role="checkbox"` elements
+- Disabled checkboxes: use native `disabled` attribute for form semantics; `aria-disabled="true"` if the element must remain in tab order (e.g. with explanatory tooltip)
+- Error state: `aria-invalid="true"` on the control; group-level error on the `<fieldset>` via `aria-describedby`
+
+---
+
+## Motion
+
+| Transition | Duration | Easing | Notes |
+|------------|----------|--------|-------|
+| check fill | 120ms | ease-out | SVG path draw or scale from center |
+| indeterminate dash | 120ms | ease | Width animation of dash element |
+| hover border | 80ms | ease | Border colour only |
+
+Cross-link: `reference/motion.md` — `prefers-reduced-motion`: skip path animation, show fill instantly
+
+---
+
+## Do / Don't
+
+### Do
+- Use `<fieldset>` + `<legend>` for every group *(WAI-ARIA APG, Carbon, Polaris)*
+- Set indeterminate via `.indeterminate = true` AND `aria-checked="mixed"` *(WAI-ARIA APG, Mantine)*
+- Make the entire label row clickable, not just the box *(Material 3, Carbon, Polaris)*
+- Align label text to the top of the control in multiline label scenarios *(Carbon)*
+
+### Don't
+- Don't use checkboxes for mutually exclusive options — use radio buttons *(Material 3, Carbon, Polaris)*
+- Don't use a custom `<div>` checkbox without `role="checkbox"` and keyboard handler *(WAI-ARIA APG)*
+- Don't set `aria-checked="mixed"` via HTML attribute — it must be set dynamically *(WAI-ARIA APG)*
+- Don't rely on colour alone for checked state — always include a visible checkmark *(WCAG 1.4.1)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Custom checkbox without role | `reference/anti-patterns.md` |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| Space toggles checkbox | WAI-ARIA APG §3.5 |
+| fieldset+legend required for group | WAI-ARIA APG, Carbon, Polaris |
+| .indeterminate = true (JS only) | WAI-ARIA APG, MDN |
+| 16px control size | Carbon, Polaris, Material 3 |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# Custom checkbox div/span without role="checkbox"
+grep -rn 'class.*checkbox\|type.*checkbox' src/ | grep '<div\|<span' | grep -v 'role='
+
+# Missing label association
+grep -rn 'type="checkbox"' src/ | grep -v 'id=\|aria-label'
+
+# Group without fieldset
+grep -rn 'checkbox' src/ | grep -v 'fieldset\|role="group"'
+
+# Indeterminate set via attribute instead of JS
+grep -rn 'indeterminate' src/ | grep 'setAttribute\|attr(' | grep '"true"'
+```
+
+---
+
+## Failing Example
+
+```html
+<!-- BAD: checkboxes in a group without fieldset/legend — group context lost for screen readers -->
+<div>
+  <p>Notification preferences</p>
+  <input type="checkbox" id="email"> <label for="email">Email</label>
+  <input type="checkbox" id="sms"> <label for="sms">SMS</label>
+</div>
+```
+
+**Why it fails**: Screen readers announce each option without the group context ("Email — checkbox") — users don't know what these options belong to without reading surrounding text.
+**Grep detection**: `grep -B5 'type="checkbox"' src/ | grep -v 'fieldset\|role="group"'`
+**Fix**:
+```html
+<fieldset>
+  <legend>Notification preferences</legend>
+  <input type="checkbox" id="email"> <label for="email">Email</label>
+  <input type="checkbox" id="sms"> <label for="sms">SMS</label>
+</fieldset>
+```

package/reference/components/drawer.md

@@ -0,0 +1,201 @@
+# Drawer / Sheet — Benchmark Spec
+
+**Harvested from**: Material 3, Polaris (Sheet), Carbon, Atlassian, Mantine, shadcn/ui, Headless UI, Apple HIG
+**Wave**: 2 · **Category**: Containers
+
+---
+
+## Purpose
+
+A drawer (or sheet) is a panel that slides in from an edge of the viewport. It is less disruptive than a modal for workflows that benefit from co-existing with the background — detail panels, navigation menus, filter sidebars, multi-step flows. Like a modal, it traps focus and requires Escape to close. Unlike a modal, the backdrop is optional and can be semi-transparent. *(Material 3, Carbon, Polaris all position drawer as less disruptive than modal)*
+
+---
+
+## Anatomy
+
+```
+Side drawer (right):
+┌────────────────┬──────────────┐
+│                │ [✕] Title    │
+│   Page         │──────────────│
+│   content      │  Body        │
+│   (inert)      │  content     │
+│                │──────────────│
+│                │  [Actions]   │
+└────────────────┴──────────────┘
+
+Bottom sheet (mobile):
+┌──────────────────────────────┐
+│   Page content               │
+├──────────────────────────────┤  ← handle / drag indicator
+│   Sheet content              │  ← slides up; partial height
+└──────────────────────────────┘
+```
+
+| Part | Required | Notes |
+|------|----------|-------|
+| Panel container | Yes | `role="dialog"` + `aria-modal="true"` |
+| Title | Yes | `id` → `aria-labelledby` on panel |
+| Close button | Yes | Top-right; keyboard accessible |
+| Backdrop | Conditional | Semi-transparent; may click-to-close (configurable) |
+| Drag handle | No | Bottom sheet only; swipe gesture affordance |
+| Scroll container | Conditional | Body scrollable when content exceeds height |
+
+---
+
+## Variants
+
+| Variant | Direction | Use case | Systems |
+|---------|-----------|----------|---------|
+| Right side | Slides from right | Detail panels, settings | All |
+| Left side | Slides from left | Navigation menus | Material 3, Carbon |
+| Bottom sheet | Slides from bottom | Mobile actions, filters | Material 3, Apple HIG |
+| Top | Slides from top | Notifications, alerts | Rare; avoid |
+| Full-height | 100vh, pushes content | Persistent navigation | Material 3 |
+| Partial height | 60–80vh, overlays | Mobile bottom sheet | Apple HIG, Material 3 |
+
+**Norm** (≥5/18): right-side is default; bottom sheet for mobile.
+**Diverge**: backdrop-click-to-close — same debate as modal; for navigation drawers, backdrop click should close; for form/detail drawers, configurable.
+
+---
+
+## States
+
+Same as Modal/Dialog — see `modal-dialog.md`. Key differences:
+
+| State | Drawer-specific |
+|-------|-----------------|
+| open | Slides in from edge; `aria-expanded="true"` on trigger (nav drawer) |
+| closed | Slides out; `aria-expanded="false"` |
+| partial (bottom sheet) | Dragged to partial height; swipe-up to expand |
+
+---
+
+## Sizing & Spacing
+
+| Variant | Width / Height | Notes |
+|---------|---------------|-------|
+| Right side | 400–480px (desktop), 100% (mobile) | `min-width: 280px` |
+| Left side (nav) | 240–320px | 256px is common (Carbon, Material 3) |
+| Bottom sheet | 60–100vh | Drag handle at 12px × 36px |
+| Padding | 20–24px | Match modal padding |
+
+Cross-link: `reference/surfaces.md` — shadow on drawer edge (unilateral shadow)
+
+---
+
+## Typography
+
+- Title: 16–18px/600
+- Body: 14px/400
+- Section headers within body: 12px/600 uppercase muted
+
+---
+
+## Keyboard & Accessibility
+
+> **WAI-ARIA role**: `dialog` (same as modal — drawer is a type of dialog)
+> **Required attributes**: `aria-modal="true"`, `aria-labelledby` (title id)
+
+### Keyboard Contract
+
+*Quoted verbatim from WAI-ARIA APG — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ — W3C — 2024*
+
+Same Tab/Shift+Tab/Escape contract as modal (see `modal-dialog.md`).
+
+### Drawer-specific Accessibility Rules
+
+- Focus trap: MUST trap focus inside the drawer while open — same as modal
+- On open: focus moves to first focusable element (or close button if no primary action)
+- On close: focus MUST return to the element that triggered the drawer open
+- Navigation drawer (`role="navigation"`): if the drawer IS the main nav, use `role="navigation"` + `aria-label="Main"` instead of `role="dialog"`; different keyboard contract (no focus trap — it IS a landmark)
+- Background `inert`: set `inert` attribute (or equivalent) on background content when drawer is open
+
+---
+
+## Motion
+
+| Transition | Duration | Easing | Notes |
+|------------|----------|--------|-------|
+| Slide in (right) | 250ms | ease-out (cubic-bezier 0.4,0,0.2,1) | |
+| Slide out (right) | 200ms | ease-in | |
+| Bottom sheet expand | 300ms | spring (bounce: 0) | |
+| Backdrop fade | 200ms | ease | opacity 0→0.4 |
+
+Swipe-to-close (bottom sheet): detect `pointerup` with velocity + displacement threshold.
+Cross-link: `reference/motion.md` — spring bounce=0, `prefers-reduced-motion` (disable slide, instant toggle)
+
+---
+
+## Do / Don't
+
+### Do
+- Trap focus inside the drawer when open — same rule as modal *(WAI-ARIA APG)*
+- Return focus to the trigger element on close *(WAI-ARIA APG, Radix, Mantine)*
+- Use right-side drawer for content-detail panels; left-side for navigation *(Material 3, Carbon)*
+- Support swipe-to-close on bottom sheets for mobile *(Apple HIG, Material 3)*
+
+### Don't
+- Don't use `role="navigation"` for content drawers — only for navigation-purpose drawers *(WAI-ARIA APG)*
+- Don't let Tab escape the drawer while it's open *(WAI-ARIA APG)*
+- Don't disable background scroll without setting `overflow:hidden` on body *(all systems)*
+- Don't slide from top for content — top drawers conflict with browser UI and notifications *(Material 3)*
+
+---
+
+## Anti-patterns Cross-links
+
+| Anti-pattern | Entry |
+|--------------|-------|
+| Focus escaping drawer | `reference/anti-patterns.md` |
+| No focus return on close | `reference/anti-patterns.md` |
+
+---
+
+## Benchmark Citations
+
+| Claim | Sources |
+|-------|---------|
+| role="dialog" for content drawers | WAI-ARIA APG, Radix |
+| Focus trap required | WAI-ARIA APG |
+| Swipe-to-close on bottom sheet | Apple HIG, Material 3 |
+| 256px left nav width | Carbon, Material 3 |
+| ease-out 250ms slide-in | Material 3 motion spec |
+
+Full system URLs: `connections/design-corpora.md`
+
+---
+
+## Grep Signatures
+
+```bash
+# Drawer without focus trap
+grep -rn 'drawer\|sheet\|sidebar' src/ | grep -L 'FocusTrap\|focus-trap\|inert'
+
+# Drawer missing aria-modal
+grep -rn 'class.*drawer\|class.*sheet' src/ | grep 'role="dialog"' | grep -v 'aria-modal'
+
+# Background scroll not prevented
+grep -rn 'drawer.*open\|isOpen.*drawer' src/ | grep -v 'overflow\|body\.'
+```
+
+---
+
+## Failing Example
+
+```jsx
+// BAD: drawer panel with no focus management — Tab escapes to background
+function Drawer({ isOpen }) {
+  return isOpen ? (
+    <div className="drawer-panel">
+      <button onClick={close}>✕</button>
+      <h2>Settings</h2>
+      <SettingsForm />
+    </div>
+  ) : null;
+}
+```
+
+**Why it fails**: No `role="dialog"`, no `aria-modal`, no focus trap. Tab navigates freely into the background while the drawer is open. Escape does nothing.
+**Grep detection**: `grep -rn 'class.*drawer\|class.*panel' src/ | grep -v 'role=\|aria-modal'`
+**Fix**: Use Radix `<Dialog>` with `data-side` variant, or Vaul (drawer library), which handles focus trap, Escape, portal, and `aria-modal` automatically.