@godxjp/ui 24.0.0 → 24.1.0

package/dist/components/navigation/dropdown-menu.js

@@ -29,6 +29,23 @@ const DROPDOWN_MENU_PLACEMENT = {
   bottomStart: { side: "bottom", align: "start" },
   bottomEnd: { side: "bottom", align: "end" }
 };
+class MenuCollectionBoundary extends React.Component {
+  state = { failed: false };
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+  // Logged in EVERY build, not only development: "blank, with nothing in the console" is the half
+  // of gh#637 that cost the reporter a night of instrumenting `Object.prototype`.
+  componentDidCatch(error) {
+    console.error(
+      "[@godxjp/ui] DropdownMenu: the menu could not be built and was left empty; the rest of the application is unaffected. A menu's children must be collection nodes (DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuSub) or components returning one \u2014 an icon or a text label belongs INSIDE an item, not beside it. Underlying error:",
+      error
+    );
+  }
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
 function borrowedTag(children, asChild) {
   return asChild ? React.Children.only(children) : null;
 }
@@ -357,7 +374,7 @@ function DropdownMenuContent({
         )
       ),
       children: [
-        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }),
+        /* @__PURE__ */ jsx(MenuCollectionBoundary, { children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, autoFocus: openedByHover.current ? false : void 0, children }) }),
         arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
           "svg",
           {
@@ -601,7 +618,7 @@ function DropdownMenuSubContent({
           }
         )
       ),
-      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
+      children: /* @__PURE__ */ jsx(MenuCollectionBoundary, { children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }) })
     }
   );
 }

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "23.4.12",
+  "version": "24.1.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/shell-layout.css

@@ -2239,6 +2239,11 @@
   }
 
   @media (max-width: 768px) {
+
+    .ui-topbar-item {
+      padding-inline: var(--topbar-item-padding-inline-compact);
+    }
+
     .tb-chip-sep,
     .tb-search .kbd,
 
@@ -2250,8 +2255,12 @@
       width: auto;
 
       flex: 0 0 auto;
-      min-inline-size: var(--control-height);
-      min-width: var(--control-height);
+      min-inline-size: var(--control-height-sm);
+      min-width: var(--control-height-sm);
+      inline-size: var(--control-height-sm);
+      block-size: var(--control-height-sm);
+      justify-content: center;
+      padding-inline: 0;
     }
 
     .tb-search span {

package/dist/tokens/components/shell.css

@@ -101,6 +101,8 @@
   --topbar-center-compact-display: none;
 
   --topbar-item-padding-inline: var(--space-3);
+
+  --topbar-item-padding-inline-compact: var(--space-2);
   --topbar-item-gap: var(--space-2);
   --topbar-item-min-width: var(--control-height);
 

package/docs/DEVELOPMENT.md

@@ -122,10 +122,30 @@ pnpm test                 # FULL suite — CI only, never from an agent loop
 pnpm preview:build        # integration test: examples + docs must build — at most once, pre-PR
 pnpm audit                # godxjp-ui-audit — 0 errors for touched files
 pnpm check:mcp-sync       # MCP registry ↔ library export drift guard
+pnpm check:frame-axe      # WCAG 2.2 AA over every frame — see FRAME-A11Y-CI.md
 ```
 
 `pnpm verify` and `pnpm verify:release` run these together (verify:release also builds) — **both include the full suite, so both belong to CI.** Locally, run them at most once immediately before opening a PR, never inside an edit loop and never while other agents are working on the same machine. It needs `pnpm exec playwright install chromium` once locally; see [FRAME-A11Y-CI.md](./FRAME-A11Y-CI.md) for how to run/scope it, read the evidence, and regenerate its baseline after an accessibility fix.
 
+### Reproducing one screen at one width — the frame routes
+
+Three gates and every bug report start here, so the addressing is written down rather than guessed
+(godx-jp/id#639 burned three attempts on `?frame=…`, which is not a thing):
+
+```
+pnpm preview                                  # :6008
+http://localhost:6008/isolate/<id>            # the demo ALONE, at the real viewport — measure here
+http://localhost:6008/frame/<id>              # the same demo inside the device-preset chrome
+```
+
+`<id>` is the demo's path under `docs/`, minus `.tsx`, with `/` turned into `-`:
+`docs/layout/topbar.tsx` → `layout-topbar`, `docs/data-entry/date-picker.tsx` → `data-entry-date-picker`.
+A file may override it with a `slug` in its frontmatter. Both routes accept
+`?dir=rtl&density=compact&theme=dark&locale=ja`; `/frame/**` additionally takes `?preset=`/`?w=`/`?h=`/`?zoom=`.
+
+For an axe measurement at a given width, drive `/isolate/<id>` with Playwright at that viewport —
+that is what `scripts/topbar-collision-visual.mjs` and the other `test:visual:*` gates do.
+
 All gates are **self-contained** — no internal/external tooling package required. The eslint, prettier, and vitest setup live in the package (`eslint.config.js`, `prettier.config.mjs`, `vitest.config.ts`, `src/test/`), so a fresh checkout can lint/type-check/test without anything beyond the declared devDependencies.
 
 The app side additionally runs **`npm run ui:audit`** (the design-system linter) and must report 0 errors for touched files.

package/docs/FRAME-A11Y-CI.md

@@ -0,0 +1,135 @@
+# Per-frame accessibility CI — `check:frame-axe`
+
+One ruler, run in the repository that owns the CSS.
+
+## Why it exists (gh#643)
+
+`scripts/visual-audit.mjs` carries **eight** rules. A consumer's nightly runs `@axe-core/playwright`
+with **68**. Six of our eight are design-language opinions with no axe equivalent —
+`oversaturated-accent`, `sibling-card-gap`, `row-content-starved`, `emoji-rendered`,
+`alert-controls-misplaced`, `css-layers-missing` — and a design system **should** own those. The
+other sixty (names, roles, `aria-*`, contrast, focus order, target size) were checked **nowhere in
+this repository**, and only in a consumer that cannot fix the CSS, because the CSS is here.
+
+gh#639 is what that costs. A topbar shipped; every gate here said green; `target-size` failed in
+`godx-jp/id`'s nightly at 320px. And our own `target-size-min` could not have caught it at any
+threshold — it measures a **painted box**, and that failure was an **obscured** target (axe:
+`partiallyObscured`, 8×28). Two rulers, and the disagreement only ever surfaces downstream.
+
+## What it does
+
+```bash
+pnpm check:frame-axe                       # every frame, 3 viewports
+pnpm check:frame-axe -- --update           # rewrite the baseline
+pnpm check:frame-axe -- --scope=showcase   # the 30 whole-page frames only, 30s
+pnpm check:frame-axe -- /isolate/layout-topbar   # one route, while fixing
+```
+
+|           |                                                                                   |
+| --------- | --------------------------------------------------------------------------------- |
+| tool      | `@axe-core/playwright`                                                            |
+| tags      | `wcag2a` · `wcag2aa` · `wcag21aa` · `wcag22aa` — **the consumer's set, verbatim** |
+| routes    | every `/isolate/<id>` in `window.__STORY_MANIFEST__` + every `/showcase/<id>`     |
+| viewports | 1440×900 · 375×667 · **320×568**                                                  |
+
+320 is not decoration: it is WCAG 2.2 SC 1.4.10's reflow width, it is the width the consumer's
+nightly runs, and it is the width gh#639 failed at while 390 passed.
+
+Showcases are included on purpose. They are the only frames here shaped like a real screen — a whole
+page, a landmark tree, a focus order — which is precisely the class the component frames cannot
+reach and the consumer has been carrying alone.
+
+## What it found on its first run
+
+54 rows, **159 violation nodes**, on code that passed every other gate in this repository:
+
+| nodes | rows | rule                    | what it means                                                                                                                  |
+| ----: | ---: | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+|    62 |   17 | `color-contrast`        | text under 4.5:1 (SC 1.4.3)                                                                                                    |
+|    28 |   16 | `target-size`           | under 24×24 with no spacing exception (SC 2.5.8) — on `Carousel`, `Attachments`, `FilterBar` and `Toolbar`, at **every** width |
+|    21 |    6 | `aria-prohibited-attr`  | an `aria-*` on a role that does not allow it                                                                                   |
+|    18 |    6 | `button-name`           | **a button a screen reader announces as nothing**                                                                              |
+|    18 |    6 | `aria-valid-attr-value` | an `aria-*` pointing at an id that is not there                                                                                |
+|    12 |    3 | `aria-conditional-attr` | an `aria-*` that is invalid in the state it is in                                                                              |
+
+48 of those nodes are on `/isolate/**` — single components, this package's own output — and 111 on
+`/showcase/**`. None of the six rules exists in `scripts/visual-audit.mjs`. The `target-size` rows
+are the sharpest: our own `target-size-min` rule was running on those same frames and reporting them
+clean, because it measures a painted box.
+
+## The baseline is a debt ledger, not an allowlist
+
+The package did not start compliant, and a gate that fails the whole build on its first day gets
+deleted rather than obeyed. `frame-axe-baseline.json` records what was already failing when the gate
+landed, keyed one row per `(route, viewport, rule)`:
+
+```
+"/isolate/layout-topbar @320 target-size": { "count": 2, "help": "…" }
+```
+
+The gate fails on a key that is **not** in the baseline, and on a baselined key whose `count`
+**grows**. A key that stops firing is reported so it can be dropped.
+
+- **Delete rows as you fix them.** `--update` rewrites the file; the diff is the review.
+- **Never add a row by hand to turn a red build green.** That is the one move this file exists to
+  make visible.
+
+## What this gate does NOT do — stated, not hidden
+
+The gate deleted in #492 did three things this one does not, and each is a real gap:
+
+1. **No overlay scope.** It scans the frame as rendered. A menu, dialog, listbox or popover that is
+   closed at rest is never measured, so `aria-hidden-focus` and friends stay outside its field of
+   view. The old gate opened one overlay per frame from a `data-axe-open` attribute; that attribute
+   was removed from the demos along with the gate and would have to come back.
+2. **No chrome/component split.** The old gate held the preview toolbar to zero violations and
+   allowlisted the component scope separately. `/isolate/**` renders the demo alone, so there is
+   little chrome to separate — but `/showcase/**` is scanned whole.
+3. **No per-rule severity.** Every WCAG-tagged rule is treated alike.
+
+## Determinism
+
+Two consecutive sweeps of identical code first disagreed on five `color-contrast` rows: a fade-in
+caught mid-flight renders text at partial opacity and axe scores whatever it finds. A gate that
+disagrees with itself gets ignored, so each page is pinned before the scan —
+`reducedMotion: "reduce"`, an injected stylesheet zeroing every animation and transition duration,
+and `document.fonts.ready` (web fonts change glyph geometry, which changes which boxes overlap,
+which changes what `color-contrast` resolves a background to). Two sweeps after that: identical.
+
+## Cost
+
+|                                    |                                                                                     |
+| ---------------------------------- | ----------------------------------------------------------------------------------- |
+| full sweep                         | **3m20s** locally · **12m01s** on the self-hosted runner — 215 routes × 3 viewports |
+| sequential                         | ~55 min — the three viewport passes run concurrently, which is the whole difference |
+| showcase only (`--scope=showcase`) | 30s                                                                                 |
+
+`--shard=i/n` is in the script for the day the sweep outgrows the lane. Using it adds check-run
+names, which costs nothing here because none of them is in `REQUIRED_CI_CHECK_RUNS`.
+
+## Where it runs
+
+Two lanes, split on a **measurement taken on the runner, not on a laptop**:
+
+| lane                                                              | what                                      | when                                                           | measured                               |
+| ----------------------------------------------------------------- | ----------------------------------------- | -------------------------------------------------------------- | -------------------------------------- |
+| `ci-browser.yml` · `Per-frame axe (showcases, WCAG 2.2 AA)`       | `--scope=showcase` — 30 whole-page frames | every push to `main`                                           | 30s locally                            |
+| `ci-browser-full.yml` · `Per-frame axe (all frames, WCAG 2.2 AA)` | the full 215-route sweep                  | nightly, `workflow_dispatch`, or a `run-browser` label on a PR | **12m01s on the pool** (3m20s locally) |
+
+The full sweep went into the merge lane first, on the local 3m20s. On the pool's runner the same
+job took **12m01s** — three times the local wall clock and more than twice CONTRACT.md L4's
+five-minute budget for that whole lane. So the merge lane keeps the showcases, which are the only
+frames here shaped like the screens a consumer ships, and the wide matrix moved to the lane this
+repository already reserves for wide matrices.
+
+**Not** the PR lane: that file's own header lists axe among what it deliberately excludes, at a
+measured 653–745s, and that decision is not reopened here.
+
+The job is not in `REQUIRED_CI_CHECK_RUNS` (#492 removed it from the release proof map and this does
+not put it back). It still protects a release through `assertCiProvenance`'s collateral rule — **any**
+red check run on the SHA being published refuses the publish.
+
+## Related
+
+- [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md) — which frames must exist at all.
+- [DEVELOPMENT.md](./DEVELOPMENT.md) §5 — the `/isolate/<id>` · `/frame/<id>` addressing.

package/docs/layout/topbar.tsx

@@ -94,10 +94,18 @@ export default function Demo() {
       >
         {collapsed ? <PanelLeftOpen /> : <PanelLeftClose />}
       </Button>
-      {/* Decorative mark — hidden below sm so the budget goes to the two real controls. */}
-      <Avatar className="rounded-md">
-        <AvatarFallback className="bg-primary text-primary-foreground font-bold">C</AvatarFallback>
-      </Avatar>
+      {/* Decorative mark — hidden below sm so the budget goes to the two real controls. That was
+          only ever a COMMENT: nothing here hid anything, and at 320px the 32px mark was part of
+          why the switcher beside it was crushed to 0 visible px (gh#639). `hideBelow` is the
+          contract that makes the sentence true — a slot cannot shrink a control, so a bar that
+          does not fit has to drop one. */}
+      <Flex as="span" hideBelow="sm" gap="none">
+        <Avatar className="rounded-md">
+          <AvatarFallback className="bg-primary text-primary-foreground font-bold">
+            C
+          </AvatarFallback>
+        </Avatar>
+      </Flex>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
           {/* Button ships `shrink-0`, and only the LAST child of the start slot gets the built-in
@@ -150,10 +158,13 @@ export default function Demo() {
   // end · notifications + user menu, both consumer-composed.
   const end = (
     <>
-      {}
-      <Badge tone="warning" className="text-xs">
-        ステージング
-      </Badge>
+      {/* The environment marker is the end cluster's most optional item — 92px of a 320px bar, and
+          the single biggest reason the start cluster had nothing left. It goes first. */}
+      <Flex as="span" hideBelow="sm" gap="none">
+        <Badge tone="warning" className="text-xs">
+          ステージング
+        </Badge>
+      </Flex>
       <TopbarItem
         aria-label="通知"
         badge={unread ? 12 : undefined}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "24.0.0",
-  "godxUiMcp": "24.0.0",
+  "version": "24.1.0",
+  "godxUiMcp": "24.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -322,6 +322,7 @@
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "check:frame-coverage": "node scripts/frame-coverage.mjs",
     "check:frame-coverage-report": "node scripts/frame-coverage.mjs --check",
+    "check:frame-axe": "node scripts/check-frame-axe.mjs",
     "gen:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs",
     "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
@@ -469,6 +470,7 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.13.0",
     "@eslint/js": "^10.0.1",
     "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-accordion": "^1.2.20",