@godxjp/ui 19.4.0 → 19.4.2

package/dist/styles/control.css

@@ -2063,3 +2063,32 @@
     color: var(--button-count-secondary-color, hsl(var(--secondary)));
   }
 }
+
+@layer components {
+  .ui-button[data-wrap] {
+    --button-wrap-min-height: var(--control-height);
+    height: auto;
+    min-height: var(--button-wrap-min-height);
+    max-inline-size: 100%;
+    padding-block: var(--space-1);
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+  .ui-button[data-wrap][data-size="xs"] {
+    --button-wrap-min-height: var(--control-height-xs);
+  }
+  .ui-button[data-wrap][data-size="sm"] {
+    --button-wrap-min-height: var(--control-height-sm);
+  }
+  .ui-button[data-wrap][data-size="lg"] {
+    --button-wrap-min-height: var(--control-height-lg);
+  }
+  .ui-button[data-align="start"] {
+    justify-content: flex-start;
+    text-align: start;
+  }
+  .ui-button[data-align="end"] {
+    justify-content: flex-end;
+    text-align: end;
+  }
+}

package/dist/styles/data-display-layout.css

@@ -983,7 +983,9 @@
     box-sizing: border-box;
     inline-size: calc(100% / var(--timeline-grid-event-lanes, 1));
     block-size: calc(var(--timeline-grid-hour-height) * var(--timeline-grid-event-span, 0));
-    min-block-size: var(--timeline-grid-event-min-height);
+    min-block-size: calc(
+      var(--timeline-grid-hour-height) * var(--timeline-grid-event-min-height-minutes) / 60
+    );
     padding-inline-end: var(--timeline-grid-event-gap);
     padding-block-end: var(--timeline-grid-event-gap);
   }
@@ -1064,3 +1066,22 @@
     pointer-events: none;
   }
 }
+
+@layer components {
+  a.ui-list-row {
+    color: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  a.ui-list-row:hover {
+    background: hsl(var(--muted));
+  }
+  a.ui-list-row[aria-current="page"] {
+
+    background: hsl(var(--accent));
+    box-shadow: inset var(--space-1) 0 0 hsl(var(--primary));
+  }
+  [dir="rtl"] a.ui-list-row[aria-current="page"] {
+    box-shadow: inset calc(-1 * var(--space-1)) 0 0 hsl(var(--primary));
+  }
+}

package/dist/styles/focus-ring.css

@@ -34,6 +34,7 @@
 
   :is(
     .ui-focus-ring-outline,
+    a.ui-list-row,
     .ui-accordion-trigger,
     .ui-carousel-dot,
     .ui-rating-star,
@@ -57,6 +58,10 @@
     --focus-ring-opacity: var(--topbar-icon-focus-ring-alpha);
   }
 
+  a.ui-list-row {
+    --focus-ring-offset: calc(-1 * var(--focus-ring-width));
+  }
+
   .ui-accordion-trigger {
     --focus-ring-offset: var(--accordion-focus-ring-offset);
   }
@@ -78,4 +83,8 @@
     outline: none;
     box-shadow: none;
   }
+
+  [aria-invalid="true"] {
+    --focus-ring-color: var(--destructive);
+  }
 }

package/dist/styles/form-layout.css

@@ -1,6 +1,12 @@
 
 
 @layer components {
+
+  .ui-form-field-required {
+    margin-inline-start: var(--space-inline-xs);
+    color: hsl(var(--destructive));
+  }
+
   .ui-form {
     display: flex;
     flex-direction: column;

package/dist/styles/layout.css

@@ -239,7 +239,7 @@
   .ui-responsive-grid {
     display: grid;
     gap: var(--space-stack-md);
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
   }
 
   .ui-responsive-grid[data-gap="none"] {
@@ -1348,3 +1348,38 @@
     }
   }
 }
+
+@layer components {
+  .ui-master-detail-back {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-pane] {
+    position: relative;
+  }
+  .ui-master-detail-measure {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 0;
+    overflow: hidden;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  .ui-master-detail-measure > span {
+    display: block;
+    inline-size: var(--master-detail-collapse-below);
+    block-size: 0;
+  }
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="master"] > .ui-master-detail-detail,
+  .ui-master-detail[data-mobile-compact][data-mobile-pane="detail"] > .ui-master-detail-master {
+    display: none;
+  }
+  .ui-master-detail[data-mobile-compact] > .ui-master-detail-master {
+    max-block-size: none;
+    overflow: visible;
+  }
+  .ui-master-detail[data-mobile-compact] .ui-master-detail-back {
+    display: block;
+    margin-block-end: var(--space-3);
+  }
+}

package/dist/styles/navigation-layout.css

@@ -82,7 +82,8 @@
     }
   }
 
-  .ui-pagination .ui-button svg {
+  .ui-pagination .ui-button svg,
+  .ui-pagination .ui-pagination-link svg {
     inline-size: var(--pagination-icon-size);
     block-size: var(--pagination-icon-size);
   }

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

@@ -86,7 +86,8 @@
   --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-event-min-height-minutes: 36;
   --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);

package/dist/tokens/foundation.css

@@ -14,7 +14,8 @@
   --secondary: 45 15% 95%;
   --secondary-foreground: 48 8% 13%;
   --muted: 45 15% 95%;
-  --muted-foreground: 44 5% 42%;
+
+  --muted-foreground: 44 5% 39%;
   --accent: 40 13% 91%;
   --accent-foreground: 48 8% 13%;
   --destructive: 357 64% 44%;

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/data-display/list-row.tsx

@@ -26,6 +26,27 @@ export default function Demo() {
       subtitle="leading · title/description · trailing action · short entity lists inside a Card"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Navigation rows</CardTitle>
+            <CardDescription>
+              The whole row is one link, including its metadata. Current location uses aria-current.
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <ListRow
+              asChild
+              title="Roles and permissions"
+              description="Inspect organization access"
+              overflow="wrap"
+            >
+              <a href="?section=roles" aria-current="page" />
+            </ListRow>
+            <ListRow asChild title="Members" description="Assign roles to organization members">
+              <a href="?section=members" />
+            </ListRow>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>アクティブなセッション Active sessions</CardTitle>

package/docs/data-display/popover.tsx

@@ -135,7 +135,10 @@ export default function Demo() {
             <Flex direction="row" wrap gap="sm">
               <Popover>
                 <PopoverTrigger asChild>
-                  <Button variant="outline">side=top</Button>
+                  {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                  <Button data-axe-open variant="outline">
+                    side=top
+                  </Button>
                 </PopoverTrigger>
                 <PopoverContent side="top" aria-label="上側の配置例">
                   <PopoverDescription>上に開きます。</PopoverDescription>

package/docs/data-entry/date-picker.tsx

@@ -33,7 +33,8 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens the calendar before scanning. */}
+          <CardContent data-axe-open>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"

package/docs/data-entry/form-field/index.tsx

@@ -130,7 +130,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Field identity · data-field (gh#337)</CardTitle>
+            <CardTitle level={2}>Field identity · data-field</CardTitle>
             <CardDescription>
               項目キーを control の data-field に出す。既定は id から導出。id が DOM
               一意化のためのもので項目キーと違う場合だけ field を明示する。AppProvider
@@ -176,7 +176,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Static value · mixed with editable fields (gh#294)</CardTitle>
+            <CardTitle level={2}>Static value · mixed with editable fields</CardTitle>
             <CardDescription>
               staticText renders a read-only VALUE as a FormField itself: Descriptions.Item's exact
               value typography, no control, no id/aria-* wiring. An immutable name/email row and an

package/docs/data-entry/search-input.tsx

@@ -7,6 +7,7 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
 
 /**
  * SearchInput — debounced search box with a built-in clear button.
+ * onSearch runs after a changed query settles, never on mount.
  * Always listen to onSearch (NOT onChange). Uncontrolled for local filters,
  * controlled when search state lives in a URL param. Never a raw <input>.
  * Composed only from real @godxjp/ui components.

package/docs/data-entry/select-matrix.tsx

@@ -142,7 +142,8 @@ export default function Demo() {
               references. The internal search textbox has its own visible-purpose accessible name.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens the searchable panel before scanning. */}
+          <CardContent data-axe-open>
             <FormField
               id="searchable-invalid"
               label="担当拠点"

package/docs/data-entry/select.tsx

@@ -82,7 +82,9 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open: check-frame-axe opens this Select before scanning, so the
+              overlay-open a11y state is measured. See docs/FRAME-A11Y-CI.md. */}
+          <CardContent data-axe-open>
             <FormField id="status" label="状態">
               <Select
                 id="status"

package/docs/feedback/dialog.tsx

@@ -109,7 +109,8 @@ export default function Demo() {
           <CardContent>
             <Dialog open={detailOpen} onOpenChange={setDetailOpen}>
               <DialogTrigger asChild>
-                <Button variant="outline" size="sm">
+                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                <Button data-axe-open variant="outline" size="sm">
                   取引詳細を見る
                 </Button>
               </DialogTrigger>

package/docs/feedback/sheet.tsx

@@ -213,7 +213,8 @@ export default function Demo() {
           <CardContent>
             <Sheet open={editOpen} onOpenChange={setEditOpen}>
               <SheetTrigger asChild>
-                <Button variant="ghost" size="sm">
+                {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
+                <Button data-axe-open variant="ghost" size="sm">
                   取引先を編集
                 </Button>
               </SheetTrigger>

package/docs/general/button/index.md

@@ -10,3 +10,7 @@ For filter tabs / segmented toggles that show a per-option total, pass the `coun
 (`<Button variant="outline" count={18}>Chờ bay</Button>`) instead of nesting a `Badge` —
 it renders a borderless counter pill, formatted in the active locale and toned to the
 button variant, so an outline button never ends up with a doubled border.
+
+For long collection labels, use `wrap` with `align="start"` and `fullWidth`. The button
+grows vertically while retaining the size preset's minimum target height. Keep badges
+and other row metadata outside the button. `align="end"` follows the document direction.

package/docs/layout/app-shell.tsx

@@ -282,8 +282,8 @@ export default function Demo() {
                 を切り替え、sidebar・topbar・page actions・grid・split pane
                 の変換を同じ実用構成で確認する。900px 以下ではドックされたサイドバーが隠れ、
                 AppShell 所有のモバイルドロワー（トップバー左のハンバーガー → フォーカストラップ付き
-                Sheet · Esc で閉じてトリガーへフォーカス復帰）が navigation を提供する（gh#165）。
-                このデモは mobileNav を渡していないため、同じ Sidebar がドロワーに再利用される。
+                Sheet · Esc で閉じてトリガーへフォーカス復帰）が navigation を提供する。 このデモは
+                mobileNav を渡していないため、同じ Sidebar がドロワーに再利用される。
               </CardDescription>
               <CardDescription>
                 「トップバーなし（チャット型）」を押すと topbar / topbarLeft / topbarRight / logo の
@@ -297,8 +297,8 @@ export default function Demo() {
                 で代用しないこと ― それは 4 スロットが埋まった状態と同じで、バーの行は残る。
               </CardDescription>
               <CardDescription>
-                横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ（gh#330）。
-                トップバーは <code>.app-main</code> と同じグリッド列に載っている ―
+                横方向のページ余白軸の持ち主は <code>--space-page-x</code> ひとつ。 トップバーは{" "}
+                <code>.app-main</code> と同じグリッド列に載っている ―
                 つまりバー先頭のコントロールとページタイトルは同じ縦線に並ぶべきもので、
                 <code>--app-shell-bar-inset</code> はその持ち主を読む （
                 <code>--app-shell-bar-inset-compact</code> も同様に

package/docs/layout/master-detail.tsx

@@ -15,6 +15,9 @@ import { Button, Text } from "@godxjp/ui/general";
 import { Flex, MasterDetail, PageContainer } from "@godxjp/ui/layout";
 
 /**
+ * Pass mobilePane="master" or "detail" for one-pane navigation below the token-owned collapse threshold.
+ * Supply detailBack with a native back link; own selection in URL/router history.
+ * Omit mobilePane to retain the original stacked composition.
  * MasterDetail · チーム画面 (SCR-110) の正準構成 — 流動的な一覧 + 固定幅の詳細レール。
  *
  * Shows: rail="detail" (既定 · 1fr / 320px) と rail="master" (先頭ナビゲーションレール)、

package/docs/layout/responsive-grid.tsx

@@ -16,7 +16,7 @@ import { Flex, PageContainer, ResponsiveGrid, SplitPane } from "@godxjp/ui/layou
  * with no external container-type declaration. Direct children are typically
  * StatCard (self-contained bordered card · never wrap in Card/CardContent) or
  * Card+CardContent for richer tile bodies. columns accepts a number OR breakpoint
- * object { sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
+ * object { base?, sm?, md?, lg? } — or use the named `preset` prop (e.g. "pricing-plans") for a
  * recognised collection shape instead of hand-rolling the breakpoint map. Composed only from
  * real @godxjp/ui components.
  */
@@ -27,6 +27,23 @@ export default function Demo() {
       subtitle="等幅タイルグリッド · KPI・カード比較・ダッシュボード行"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Compact mobile metrics</CardTitle>
+            <CardDescription>
+              columns=&#123;&#123; base: 2, sm: 4 &#125;&#125; keeps two columns below the first
+              container breakpoint and four above it.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ base: 2, sm: 4 }}>
+              <StatCard label="Services" value="3" />
+              <StatCard label="Members" value="14" />
+              <StatCard label="Invitations" value="0" />
+              <StatCard label="Invoices" value="2" />
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>コンテナクエリで折り返し（自己所有のクエリコンテナ）</CardTitle>
@@ -35,8 +52,8 @@ export default function Demo() {
               列、右の狭いサイドバー（約 20rem）は 1 列に折り返す。ビューポート幅は同一なので、
               折り返しの基準がコンテナ幅であることが分かる。ResponsiveGrid は自身のクエリコンテナ
               （container-type: inline-size）を持つため、外側に @container を用意しなくても正しく
-              折り返す（gh#165）。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は
-              var(--space-stack-md) に固定で、prop では変更できない。
+              折り返す。閾値はコンテナ幅 40 / 48 / 64rem。 列間の gap は var(--space-stack-md)
+              が既定で、gap prop で変更できます。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -72,7 +89,7 @@ export default function Demo() {
             <CardDescription>
               固定幅の親の中でも、同じ columns=&#123;4&#125; が親幅で列数を変える。親には
               container-type を付けていない。ResponsiveGrid が自身のスコープでクエリするため、
-              外側にコンテナ宣言がなくても 1 列に潰れない（gh#165）。
+              外側にコンテナ宣言がなくても 1 列に潰れない。
             </CardDescription>
           </CardHeader>
           <CardContent>