@godxjp/ui 19.3.1 → 19.4.1

package/dist/styles/shell-layout.css

@@ -112,9 +112,19 @@
   .ui-auth-shell-bar {
     display: flex;
     align-items: center;
+
+    flex-wrap: wrap;
+    gap: var(--auth-shell-bar-gap);
     padding: var(--auth-shell-bar-padding);
   }
 
+  .ui-auth-shell-bar-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--auth-shell-bar-gap);
+    margin-inline-start: auto;
+  }
+
   .ui-auth-shell-main {
     display: flex;
     flex: 1 1 auto;
@@ -142,6 +152,15 @@
     --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
   }
 
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) {
+    --auth-shell-card-max-width: var(--auth-shell-wide-card-max-width);
+    --auth-shell-main-align: flex-start;
+  }
+
+  .ui-auth-shell[data-measure="wide"]:not([data-preset]) .ui-auth-shell-card {
+    margin-block: auto;
+  }
+
   .ui-auth-shell[data-preset] .ui-auth-shell-card {
     display: flex;
     flex-direction: column;
@@ -1417,6 +1436,135 @@
   }
 }
 
+@layer components {
+  .ui-mobile-shell {
+    --control-height: var(--mobile-shell-control-height);
+
+    --mobile-shell-padding-inline: calc(
+      var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
+    );
+    display: flex;
+
+    block-size: var(--mobile-shell-block-size);
+    flex-direction: column;
+    overflow: hidden;
+    background: hsl(var(--background));
+  }
+
+  .ui-mobile-shell[data-height="fill"] {
+    --mobile-shell-block-size: 100%;
+  }
+
+  .ui-mobile-shell-chrome {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    flex-direction: column;
+  }
+
+  .ui-mobile-shell-status {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-status-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--mobile-shell-region-gap);
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-header {
+    display: flex;
+    min-block-size: var(--mobile-shell-header-bar-height);
+    min-inline-size: 0;
+    flex: 0 0 auto;
+
+    overflow: clip;
+    overflow-clip-margin: var(--focus-ring-clip-margin);
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-end: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+    background-image: var(--topbar-gradient);
+  }
+
+  .ui-mobile-shell-header:first-child {
+    min-block-size: calc(
+      var(--mobile-shell-header-bar-height) + var(--mobile-shell-safe-inset-block-start)
+    );
+    padding-block-start: var(--mobile-shell-safe-inset-block-start);
+  }
+
+  .ui-mobile-shell-main {
+    display: flex;
+    min-block-size: 0;
+    min-inline-size: 0;
+
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow-y: auto;
+
+    overscroll-behavior-block: contain;
+
+    contain: paint;
+    padding-block: var(--mobile-shell-main-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    background-image: var(--gradient-glow);
+  }
+
+  .ui-mobile-shell-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--region-focus-ring-width)
+      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
+  }
+
+  .ui-mobile-shell-actions {
+    display: flex;
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--mobile-shell-region-gap);
+    padding-block: var(--mobile-shell-actions-padding-block);
+    padding-inline: var(--mobile-shell-padding-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar {
+    display: flex;
+    min-block-size: calc(
+      var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end)
+    );
+    min-inline-size: 0;
+    flex: 0 0 auto;
+    padding-block-end: var(--mobile-shell-safe-inset-block-end);
+    padding-inline: var(--mobile-shell-safe-inset-inline);
+    border-block-start: 1px solid hsl(var(--border));
+    background: hsl(var(--card));
+  }
+
+  .ui-mobile-shell-tabbar > * {
+    min-inline-size: 0;
+    flex: 1 1 0;
+  }
+
+  .ui-mobile-shell-actions:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-actions-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+
+  .ui-mobile-shell-main:last-child {
+    padding-block-end: calc(
+      var(--mobile-shell-main-padding-block) + var(--mobile-shell-safe-inset-block-end)
+    );
+  }
+}
+
 @layer components {
 
   .ui-centered-shell[data-preset="public-landing"] {

package/dist/styles/table-layout.css

@@ -46,6 +46,17 @@
     padding-inline-end: 0;
   }
 
+  [data-slot="table-cell"][data-indent] {
+    padding-inline-start: calc(
+      var(--table-cell-space-x) + var(--table-cell-indent-level, 0) *
+        var(--table-cell-indent-space-step)
+    );
+  }
+
+  [data-slot="table-cell"][data-flush] {
+    padding: 0;
+  }
+
   .ui-data-table-toolbar {
     display: flex;
     flex-wrap: wrap;
@@ -520,7 +531,9 @@
 
     [data-collapse-below="sm"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -562,7 +575,9 @@
 
     [data-collapse-below="md"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -604,7 +619,9 @@
 
     [data-collapse-below="lg"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);
@@ -646,7 +663,9 @@
 
     [data-collapse-below="xl"] .ui-table-row {
       display: block;
-      border: 1px solid hsl(var(--border));
+
+      height: auto;
+      border: var(--stroke-hairline) solid hsl(var(--border));
       border-radius: var(--radius-md);
       padding: var(--table-stacked-collection-card-padding-y)
         var(--table-stacked-collection-card-padding-x);

package/dist/tokens/components/control.css

@@ -31,6 +31,7 @@
 
   --rating-focus-ring-offset: 2px;
 
+  --checkbox-border-width: var(--stroke-hairline);
   --checkbox-size: calc(1rem * var(--scaling));
   --checkbox-size-compact: 0.875rem;
   --checkbox-size-comfortable: 1.125rem;

package/dist/tokens/components/data-display.css

@@ -83,6 +83,26 @@
   --scroll-area-bar-padding: 1px;
   --scroll-area-thumb-radius: var(--radius-pill);
 
+  --timeline-grid-hour-height: 2.5rem;
+  --timeline-grid-axis-width: 3.25rem;
+  --timeline-grid-column-min-width: 6rem;
+  --timeline-grid-event-min-height: 1.5rem;
+  --timeline-grid-axis-font-size: var(--font-size-2xs);
+  --timeline-grid-head-font-size: var(--font-size-xs);
+  --timeline-grid-event-font-size: var(--font-size-2xs);
+  --timeline-grid-event-gap: var(--space-1);
+  --timeline-grid-event-space-inset: var(--space-1);
+  --timeline-grid-event-radius: var(--radius-sm);
+  --timeline-grid-event-border-width: var(--stroke-md);
+  --timeline-grid-now-width: var(--stroke-sm);
+
+  --timeline-grid-line-color: initial;
+  --timeline-grid-event-color: initial;
+
+  --timeline-grid-event-muted-color: hsl(var(--foreground));
+  --timeline-grid-now-color: initial;
+  --timeline-grid-current-tint: initial;
+
   --permission-matrix-label-width: 16rem;
   --permission-matrix-role-space-gap: var(--space-1);
   --permission-matrix-name-space-gap: 0.375rem;

package/dist/tokens/components/shell.css

@@ -107,6 +107,10 @@
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 
+  --auth-shell-bar-gap: var(--space-inline-sm);
+
+  --auth-shell-wide-card-max-width: 64rem;
+
   --auth-shell-canonical-control-height: var(--band-height-lg);
   --auth-shell-canonical-card-max-width: 22.5rem;
   --auth-shell-canonical-heading-size: var(--font-size-base);
@@ -228,3 +232,21 @@
     --app-shell-bar-height: var(--band-height-3xl);
   }
 }
+
+:root {
+  --mobile-shell-block-size: 100dvh;
+  --mobile-shell-safe-inset-block-start: env(safe-area-inset-top);
+  --mobile-shell-safe-inset-block-end: env(safe-area-inset-bottom);
+  --mobile-shell-safe-inset-inline: max(env(safe-area-inset-left), env(safe-area-inset-right));
+
+  --mobile-shell-inset-inline: var(--space-4);
+
+  --mobile-shell-control-height: var(--control-height-comfortable);
+  --mobile-shell-region-gap: var(--space-2);
+  --mobile-shell-status-bar-height: var(--band-height-lg);
+  --mobile-shell-header-bar-height: var(--band-height-3xl);
+
+  --mobile-shell-tab-bar-height: calc(var(--band-height-3xl) + var(--space-2));
+  --mobile-shell-main-padding-block: var(--space-4);
+  --mobile-shell-actions-padding-block: var(--space-3);
+}

package/dist/tokens/components/table.css

@@ -8,6 +8,8 @@
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
 
+  --table-cell-indent-space-step: var(--space-4);
+
   --table-border-color: initial;
   --table-pagination-padding-y: initial;
   --table-pagination-padding-x: initial;

package/docs/FRAME-A11Y-CI.md

@@ -20,11 +20,56 @@ A control the **user cannot bring into the frame** — not merely one whose box
 
 - `check:contrast` (`scripts/check-contrast.mjs`) — a hand-picked set of ~6 pages checked for WCAG-AA text contrast. It never saw the other ~100 component frames. - `audit:examples` (`pnpm audit docs`) — a static source-regex linter. It can catch a hard-coded hex value but cannot see what actually renders: computed contrast, DOM landmark structure, focus order, or anything a Radix portal produces at runtime.
 
-## Chrome vs component: two independently-tracked scopes
+## Chrome vs component vs overlay: three independently-tracked scopes
 
-`check:frame-axe` runs axe **twice** per frame/viewport:
+`check:frame-axe` runs axe **twice** per frame/viewport, and a **third** time on the frames that declare an open step:
 
 - **Preview chrome** = the zoom / dimension **toolbar** (`.demo-block-toolbar`, `preview/src/demo-block.tsx`). We own this. It **must be 0** — a chrome violation fails the build.
+- **Component/demo** = everything else, in the frame's **default** state (the rendered frame _and_ its Radix portals). Allowlisted in `baseline.component`.
+- **Overlay** = the same scope re-measured **after opening an overlay** — see below. Allowlisted separately in `baseline.overlay`.
+
+### The overlay scope: opening the thing before measuring it (#355)
+
+The gate used to load each frame in its default state and scan once, so every axe rule whose _condition only exists while an overlay is open_ — `aria-hidden-focus` first among them — was **outside its field of view**, not merely un-triggered. 164 frames × 2 viewports reported clean while `aria-hidden-focus` fired on the app background the moment a `Select` or `DropdownMenu` opened in a consumer app.
+
+A frame opts in **declaratively**, from the demo itself:
+
+```tsx
+// the trigger itself, when it forwards DOM props
+<DropdownMenuTrigger asChild>
+  <Button data-axe-open …>…</Button>
+</DropdownMenuTrigger>
+
+// the region that owns the trigger, when the component renders it internally
+<CardContent data-axe-open>
+  <FormField id="status" label="状態"><Select … /></FormField>
+</CardContent>
+
+// right-click, for the one overlay that opens on no other gesture
+<ContextMenuTrigger data-axe-open="contextmenu" …>
+```
+
+What the gate does with it, per frame/viewport, **after** the two default-state scans (opening an overlay is destructive to the state those measure):
+
+1. Take the **first** `[data-axe-open]` on the page. No declaration ⇒ the frame skips this scope entirely and costs nothing.
+2. Press **Escape** up to three times while any overlay is mounted. Several demos deliberately render one open at rest, and a modal one makes the rest of the page inert — so the trigger is unreachable until it is dismissed. This also makes the measurement a real **closed → open transition** rather than whatever the demo happened to leave mounted.
+3. Resolve the click target: the declaring element itself when it matches `button, [role=button], [role=combobox], [role=menuitem], a[href], summary`, otherwise the first such control inside it. (`DatePicker`, the data-driven `Select` and `SearchSelect` own their trigger DOM and forward no `data-*` to it — hence the "declare on the region" form. `DatePicker`'s combobox `<input>` opens the calendar on click, which is what gets pressed there.)
+4. Click (or right-click), then wait until **one more** overlay is mounted (`[data-radix-popper-content-wrapper], [role=dialog], [role=alertdialog], [role=menu], [role=listbox]`) plus a 400 ms animation settle — never a bare timer.
+5. Re-run axe with the same scope as the component pass and record it under `baseline.overlay`.
+
+A declaration whose overlay never opens is an **infrastructure error** (blocking), not a silent skip: a broken declaration must not read as a clean frame.
+
+**Frames declaring an open step today** (the overlay families named in #355): `data-entry-select`, `data-entry-select-matrix` (SearchSelect), `data-entry-date-picker`, `data-display-popover`, `navigation-dropdown-menu`, `navigation-context-menu`, `feedback-dialog`, `feedback-sheet`.
+
+**Cost**: the overlay pass only runs on declaring frames, so it is ~8 frames × 2 viewports, measured at **+~55 s on a ~9.5 min local sweep (~10 %)**. Both viewports are kept for now; if the declaring set grows, narrow `OVERLAY_VIEWPORTS` in the script to `["desktop"]` — an overlay is portalled to `<body>` and its aria-hidden background is the same tree at either width.
+
+**What is still outside this scope** — deliberately, and worth knowing before trusting a green run:
+
+- Only the **first** declaration per frame is exercised. A frame with several distinct overlays (the Sheet demo has five) is measured on one of them.
+- Only **one step deep**: submenus (`DropdownMenuSub`), an overlay opened _from inside_ another overlay, and the state _after_ a selection are not reached.
+- **Keyboard-only opening** is not exercised — the gate clicks. A trigger that opens on click but not on `Enter`/`Space` would pass.
+- The overlay's own **focus trap and focus order** are still not asserted by axe here (`focus-order-semantics` needs the focus to actually move); `src/components/__tests__/overlay-hidden-background.a11y.test.tsx` remains the DOM-level guard for the aria-hidden/inert contract, and it is what fails first if the `inert` mirror in `src/components/general/inert-background.ts` regresses in jsdom.
+- Frames with **no declaration** (156 of 164) are unchanged: default state only.
 
 ## The component allowlist — and how it shrinks to zero
 
@@ -43,6 +88,10 @@ git add scripts/frame-axe.baseline.json && git commit -m "chore(a11y): tighten f
 
 There is **no blanket suppression**: a documented axe false positive would be an explicit per-rule entry with a comment, never a mute.
 
+`baseline.overlay` is the same shape and obeys the same rule, for the overlay-open scope. It is only rewritten for frames whose open step **actually ran** — a frame that stopped declaring one has not been proven clean, it has been left unmeasured.
+
+**Keys that are not violation data are preserved (#356).** The baseline also carries human notes — `scopeGap` records what the gate cannot see and which violations are deliberately unfixed. `--update-baseline` used to rebuild the file from scratch and delete them without a word. It now regenerates only the keys it owns (`generatedAt`, `note`, `component`, `overlay`), carries every other key over verbatim, and **names them in its log line** (`carried over: scopeGap`) so a disappearing key cannot go unnoticed.
+
 `0` chrome violations, `0` regressions. See [Remaining baseline debt](#remaining-baseline-debt--the-12-frames) below for exactly what's left and the path to zero.
 
 ## Running it locally
@@ -68,28 +117,47 @@ pnpm exec playwright install chromium        # local dev — downloads Playwrigh
 | `pnpm check:frame-axe --format json`                | Machine-readable result on stdout (same exit-code semantics) — no colored human report            |
 | `pnpm check:frame-axe --update-baseline`            | Regenerate the allowlist (2-pass union by default) — see below                                    |
 | `AXE_RUNS=3 pnpm check:frame-axe --update-baseline` | More union passes, for a component with flaky portal timing                                       |
+| `AXE_SHARD=2/4 pnpm check:frame-axe`                | Run only shard 2 of 4 (1-based) for CI fan-out — see below                                        |
 | `pnpm check:frame-axe http://localhost:6008`        | Point at an already-running preview instead of building+serving one                               |
 
+#### Sharding the sweep (`AXE_SHARD=i/n`)
+
+`AXE_SHARD=2/4` runs only the frames of shard 2 of 4. The partition is taken over frame ids sorted **by code point**, not in manifest/directory order, so the same tree always yields the same partition, every frame lands in exactly one shard, and the union of all `n` shards is exactly the full sweep. Unset (the default) leaves the frame list untouched — sharding changes nothing until you ask for it.
+
+Two things are deliberately _not_ the same under a shard, because a shard cannot know them:
+
+- **"Baseline rule no longer fires" (shrink hints) is skipped.** The baseline is keyed per frame, so _new_ rule detection stays exact on a partial run — but a frame this shard never visited looks identical to a frame that got fixed. Only a full sweep can tell those apart.
+- **`--update-baseline` refuses to run** with `AXE_SHARD` set (exit 2). Writing the baseline from a fraction of the frames would delete every frame the shard did not visit.
+
+`AXE_FRAMES_LIMIT` truncates the list instead of partitioning it; it is a local smoke-test knob, not a fan-out mechanism.
+
 If no preview server answers at the base URL (`http://localhost:6008` by default), the script builds one itself: `pnpm preview:build` then serves the static output with `vite preview` (`ensurePreviewServer` in `scripts/frame-harness.mjs`) — deterministic and stable under a long headless sweep, unlike the dev server's per-request recompilation. If a `pnpm preview` dev server (or a remote base) is already reachable, it's reused as-is and never rebuilt.
 
 ### Reading the output
 
-Terminal report (human mode) has two blocks:
+Terminal report (human mode) has three blocks:
 
 ```
 Preview-chrome axe (blocking — must be 0):
-  ✓ 0 chrome violations across all 107 frame(s).
+  ✓ 0 chrome violations across all 164 frame(s).
 
 Component/demo axe (allowlisted — baseline may only shrink):
-  47 component violation node(s) remaining across 12 frame(s).
+  0 component violation node(s) remaining across 0 frame(s).
   ✓ no new component violation types (rule-set within baseline).
+
+Overlay axe (frames declaring data-axe-open — baseline may only shrink):
+  8 frame(s) opened an overlay before scanning; 128 violation node(s) while open.
+  ✓ no new overlay violation types (rule-set within baseline).
 ```
 
 - A **red `✗ <rule>`** under chrome is always blocking.
 - A **red `✗ N NEW violation-type(s) not in baseline`** under component means a frame gained a
   rule the baseline didn't have — that's the actual CI failure mode for a component regression.
+- A **red `✗ N NEW violation-type(s) not in the overlay baseline`** is the same failure for the
+  overlay-open state — that is what turns red when, say, the `inert` background patch regresses
+  and `aria-hidden-focus` comes back.
 - A **yellow `↓ shrink hint`** means a baseline rule no longer fires anywhere it's listed — free
-  baseline tightening available via `--update-baseline`.
+  baseline tightening available via `--update-baseline`. Not emitted under `AXE_SHARD`.
 
 ### Evidence JSON
 
@@ -103,19 +171,27 @@ Shape:
   "base": "http://localhost:6008",
   "summary": {
     "status": "ok", // "ok" | "fail"
-    "frames": 107,
+    "frames": 164,
+    "shard": null, // "i/n" when AXE_SHARD is set
     "viewports": ["desktop", "mobile"],
     "chromeViolations": 0, // total chrome violation NODE count
-    "componentViolations": 47, // total component violation NODE count (reporting only)
+    "componentViolations": 0, // total component violation NODE count (reporting only)
     "componentRegressions": 0, // rules present now but not in the baseline
+    "overlayFrames": 8, // frames whose declared open step ran
+    "overlayViolations": 128, // total NODE count measured with an overlay open
+    "overlayRegressions": 0, // overlay rules present now but not in baseline.overlay
     "infrastructureErrors": 0, // frames that failed to load / axe crashed
   },
   "chrome": {/* rule → { impact, nodes, frames: ["<frameId>@<viewport>", …] } */},
   "componentCurrent": {/* frameId → viewport → ruleId → node count, this run */},
   "regressions": [/* { frame, rule } — new rules, the actual gate failure */],
   "shrinkHints": [/* { frame, rule } — baseline rules that no longer fire */],
-  "infraErrors": [/* { frame, viewport, message } */],
-  "results": [/* per-frame { id, viewports: { desktop: { chrome, component }, mobile: {…} } } */],
+  "overlayCurrent": {/* frameId → viewport → ruleId → node count, with the overlay OPEN */},
+  "overlayFrames": [/* frame ids whose declared open step ran */],
+  "overlayRegressions": [/* { frame, rule } — new rules in the overlay-open state */],
+  "overlayShrinkHints": [/* { frame, rule } */],
+  "infraErrors": [/* { frame, viewport, message } — includes "overlay open: …" failures */],
+  "results": [/* per-frame { id, viewports: { desktop: { chrome, component, overlay? }, … } } */],
 }
 ```
 
@@ -140,6 +216,8 @@ Playwright Inspector / browser devtools with the `axe-core` extension against th
    violation, not fixed an old one).
 4. Commit the baseline alongside the fix in the same PR.
 
+`--update-baseline` also preserves every non-violation key in the file verbatim (see #356 above) and refuses to run under `AXE_SHARD`.
+
 `AXE_FRAMES_LIMIT` + `--update-baseline` together only touch the frames actually run — the merge
 logic in `check-frame-axe.mjs` overwrites `runFrameIds` and leaves every other frame's baseline
 entry untouched, so a scoped re-snapshot (e.g. after fixing just `Select`) never silently drops
@@ -258,10 +336,14 @@ Before opening a PR that adds or meaningfully changes a `/frame/**` example:
 8. If you do land a frame with a tracked violation, add it to `scripts/frame-axe.baseline.json` via
    `--update-baseline` (never hand-edit the JSON) and note _why_ + the follow-up issue in the PR
    description — the baseline file's own `note` field explains it may only shrink from here.
-9. Register the case you authored in `preview/frame-coverage.ledger.json` so
-   `check:frame-coverage-ledger` stops reporting that dimension `UNTESTED`. You **cannot** hand-write
-   a verdict — add an entry to the ledger's `cases` array (frame path + case heading + resolvable
-   evidence paths + reviewer + HTTPS review link + ISO timestamp) and run
-   `pnpm gen:frame-coverage-ledger`; the gate recomputes every cell from that evidence and rejects
-   any verdict it cannot reproduce. See [FRAME-COVERAGE-LEDGER.md](./FRAME-COVERAGE-LEDGER.md) and
-   [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md).
+9. **If the frame demos an overlay, declare its open step**: `data-axe-open` on the trigger (or on
+   the region that owns it when the component renders the trigger itself), `data-axe-open="contextmenu"`
+   for a context menu. Without it the frame is only ever measured closed, and the whole
+   `aria-hidden-focus` family of rules cannot fire — see [the overlay scope](#the-overlay-scope-opening-the-thing-before-measuring-it-355).
+10. Register the case you authored in `preview/frame-coverage.ledger.json` so
+    `check:frame-coverage-ledger` stops reporting that dimension `UNTESTED`. You **cannot** hand-write
+    a verdict — add an entry to the ledger's `cases` array (frame path + case heading + resolvable
+    evidence paths + reviewer + HTTPS review link + ISO timestamp) and run
+    `pnpm gen:frame-coverage-ledger`; the gate recomputes every cell from that evidence and rejects
+    any verdict it cannot reproduce. See [FRAME-COVERAGE-LEDGER.md](./FRAME-COVERAGE-LEDGER.md) and
+    [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md).

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **124**
-- With ≥1 frame: **124** · zero-frame: **0**
+- Public components: **126**
+- With ≥1 frame: **126** · zero-frame: **0**
 - Fully covered (every contract axis declared): **0**
 
 ## Per-component contract axes
@@ -19,6 +19,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | AppShell | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | AuthShell | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | CenteredShell | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
+| MobileShell | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Sidebar | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Topbar | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | MasterDetail | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
@@ -47,6 +48,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | CodeBlock | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Prose | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | Timeline | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
+| TimelineGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Table | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | DataState | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | InfiniteQueryState | ✓ | N/A | · | N/A | · | · | · | · | · | · |

package/docs/SPACING.md

@@ -42,15 +42,28 @@ Implementation: `src/tokens/base.css` (values) · layout owners: `src/styles/*-l
 | `--card-space-body-y`                             | `--space-section-active` | Header↔body gap                            |
 | `--card-space-header-y` / `--card-space-footer-y` | `--space-stack-sm`       | Banded header + separated footer band      |
 
-| Component                 | Use                                                |
-| ------------------------- | -------------------------------------------------- |
-| `StatCard`                | KPI / stat tile (`solo` path)                      |
-| `CardContent solo`        | Body-only card (same padding as `StatCard`)        |
-| `CardContent flush tight` | Edge-to-edge table/tabs in card                    |
-| `ui-card-inset-x`         | Align nested cells to shell (tables in flush body) |
+| Component                 | Use                                         |
+| ------------------------- | ------------------------------------------- |
+| `StatCard`                | KPI / stat tile (`solo` path)               |
+| `CardContent solo`        | Body-only card (same padding as `StatCard`) |
+| `CardContent flush tight` | Edge-to-edge table/tabs in card             |
 
 See preview **Data Display → Card** for live examples.
 
+### Inset classes (padding on something that is not a `Card*` slot)
+
+`Card*` slots get their padding from `data-slot`. Everything else that must sit on the same rhythm (a table cell, a grid header strip, a scroll body, a sticky action row, a full-bleed toolbar) uses one of three public classes. They are the only legal way to take card-token padding onto a plain element, because the audit rejects Tailwind `p-*` / `px-*` (`no-utility-spacing`).
+
+Pick by AXIS, and note that the three do **not** share one value: each reads a different card token, so `ui-card-inset` is not `ui-card-inset-x` plus `ui-card-inset-y`.
+
+| Class             | Axis               | Token                   | Use when                                                                                                                                                                                                     |
+| ----------------- | ------------------ | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `ui-card-inset-x` | inline (start/end) | `--card-space-inset`    | The element must line up with the card shell edge, and the block axis is owned by something else (a fixed row height, a table cell). Rows in a `CardContent flush` table, a header strip in a bordered grid. |
+| `ui-card-inset-y` | block (top/bottom) | `--card-space-header-y` | The element runs edge to edge inline but needs the band rhythm of a banded header / separated footer. A weekday header strip, a full-bleed toolbar cell.                                                     |
+| `ui-card-inset`   | all four sides     | `--card-space-body-y`   | A self-contained panel that owns its own padding on every side: a scrollable body, a sticky action bar, an expanded row panel below a table row.                                                             |
+
+Because `ui-card-inset-x` reads `--card-space-inset`, it follows the card it sits in: a `Card density="tight"` or `"cozy"` moves those cells with the shell. The other two read fixed steps (band and body) and do not.
+
 ## MCP
 
 `get_pattern page-sections` (a page of Cards, spaced by the page) · `get_rule 40` (mobile-first spacing) · `list_audit_rules` (the spacing rules the CLI enforces).

package/docs/charts/compact-bar-trend.tsx

@@ -13,13 +13,12 @@ import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
- * CompactBarTrend — the DEPENDENCY-FREE compact bar trend (gh#218).
+ * CompactBarTrend — the DEPENDENCY-FREE compact bar trend.
  *
- * `BarChart` needs the `recharts` optional peer; a platform whose policy forbids screen
- * implementers from adding dependencies cannot use it, and used to fall back to a page-local
- * grid with inline heights. `CompactBarTrend` closes that gap: the marks are token-sized CSS
- * blocks, so the canonical SCR-201 admin dashboard gets a real framework chart with zero
- * consumer CSS, zero inline height math and zero hardcoded colour.
+ * `BarChart` needs the `recharts` optional peer, so a platform whose policy forbids screen
+ * implementers from adding dependencies cannot use it. The marks here are token-sized CSS
+ * blocks instead, so a dashboard gets a real framework chart with zero consumer CSS, zero
+ * inline height math and zero hardcoded colour.
  *
  * Everything below is composed from real @godxjp/ui primitives only.
  */

package/docs/data-display/avatar.tsx

@@ -25,12 +25,10 @@ import portraitSlate from "../assets/portrait-slate.svg";
  * URL against PREVIEW_BASE — an absolute "/assets/…" would 404 wherever the site is served from a
  * sub-path.
  *
- * They used to be `https://picsum.photos/...`. A docs page that fetches a THIRD-PARTY image cannot
- * render without the public internet, and on CI it does not merely look wrong — it hangs: the
- * request never settles, `networkidle` never fires, and `page.goto` times out at 30s. That is what
- * failed `data-display-avatar` and `data-display-card-index` at every viewport in both the axe and
- * geometry sweeps (gh#333), long after the preview server itself was fixed. Committed files cost
- * no request that can hang and no service that can disappear.
+ * A docs page must never fetch a THIRD-PARTY image: without the public internet it cannot render,
+ * and on CI it does not merely look wrong, it hangs — the request never settles, `networkidle`
+ * never fires, and `page.goto` times out. Committed files cost no request that can hang and no
+ * service that can disappear.
  */
 
 /**
@@ -93,7 +91,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* shape="square" — the entity-header organization / service mark (gh#249) */}
+        {/* shape="square" — the entity-header organization / service mark */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>エンティティヘッダー · shape=&quot;square&quot;</CardTitle>
@@ -136,7 +134,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* appearance="tinted" — the capability medallion (gh#12) */}
+        {/* appearance="tinted" — the capability medallion */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>
@@ -192,7 +190,7 @@ export default function Demo() {
           </CardContent>
         </Card>
 
-        {/* presence — the realtime reachability dot (gh#309) */}
+        {/* presence — the realtime reachability dot */}
         <Card>
           <CardHeader>
             <CardTitle level={2}>プレゼンス · presence</CardTitle>

package/docs/data-display/badge.tsx

@@ -59,7 +59,7 @@ const tones = [
 const statuses = ["active", "draft", "pending", "cancelled", "failed", "scheduled"];
 
 /**
- * Subscription/billing lifecycle keys (gh#216). They ship the SAME canonical status→tone→icon
+ * Subscription/billing lifecycle keys. They ship the SAME canonical status→tone→icon
  * map as every other key, so a billing screen never keeps a page-local colour table. They are
  * demoed explicitly because their i18n labels were once missing. A missing key renders the raw
  * `status.trialing` string, and only a rendered demo makes that regression visible.