@godxjp/ui 24.0.0 → 25.0.0

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);
 
@@ -209,12 +211,14 @@
   --app-launcher-launchpad-title-letter-spacing: 0.08em;
   --app-launcher-launchpad-close-space-padding: var(--space-2);
 
-  --sidebar-item-active-color: initial;
-  --sidebar-item-active-tint: initial;
-
   --sidebar-item-active-background: initial;
+
   --sidebar-item-active-foreground: initial;
 
+  --sidebar-item-active-tint: initial;
+
+  --sidebar-item-active-background-alpha: 12%;
+
   --auth-shell-control-height: var(--control-height-comfortable);
   --auth-shell-heading-size: var(--font-size-2xl);
   --auth-shell-card-max-width: 24rem;

package/dist/tokens/derived.css

@@ -2,15 +2,15 @@
 
 :root {
 
-  --primary-hover: 206 100% 29.4%;
+  --primary-hover: 268.7 100% 41.6%;
 
-  --primary-active: 208 100% 22%;
+  --primary-active: 268.7 100% 34.5%;
 
-  --primary-border: 198 68% 66%;
+  --primary-border: 268.7 68% 66%;
   --destructive-hover: 359 50.6% 53.1%;
   --destructive-active: 355 70.6% 33.3%;
 
-  --control-outline: 192.1 100% 44.7%;
+  --control-outline: 268.7 100% 44.7%;
   --control-outline-alpha: 0.11;
 
   --control-outline-error: 4.3 87.6% 34.7%;
@@ -22,15 +22,15 @@
 .dark,
 :root[data-theme="dark"] {
 
-  --primary-hover: 202.2 74.6% 64.5%;
+  --primary-hover: 268.7 100% 92.7%;
 
-  --primary-active: 200.2 81.3% 74.9%;
+  --primary-active: 268.7 100% 81.1%;
 
-  --primary-border: 204.6 46.7% 23.5%;
+  --primary-border: 268.7 46.7% 23.5%;
   --destructive-hover: 358.8 42.3% 53.1%;
   --destructive-active: 357.3 50.6% 34.1%;
 
-  --control-outline: 204.6 99% 61.8%;
+  --control-outline: 268.7 99% 61.8%;
   --control-outline-alpha: 0.29;
 
   --control-outline-error: 351.5 98.3% 53.5%;

package/dist/tokens/foundation.css

@@ -26,13 +26,13 @@
   --input: 30 7% 53%;
 
   --success: 146 40% 58%;
-  --success-foreground: 60 33% 99%;
+  --success-foreground: 48 8% 13%;
   --warning: 44 100% 49%;
   --warning-foreground: 48 8% 13%;
   --info: 221 40% 50%;
   --info-foreground: 60 33% 99%;
   --attention: 25 99% 46%;
-  --attention-foreground: 60 33% 99%;
+  --attention-foreground: 48 8% 13%;
 
   --brand: 268.7 100% 50%;
   --brand-foreground: 60 33% 99%;

package/docs/DESIGN-AUTHORITY.md

@@ -18,8 +18,8 @@ It changes no code by itself. It is the tie-breaker a reviewer points at.
 | Behaviour primitives                                               | **Radix**                                       | already the implementation — 193 references                                                                                                          |
 | Component composition shape                                        | **shadcn**                                      | already the structural convention — 23 references                                                                                                    |
 | Component taxonomy / grouping                                      | **Ant Design** groups                           | already the catalog shape: `data-entry`, `data-display`, `layout`, `feedback`, `navigation`, `general` — a naming precedent, nothing is installed    |
-| Colour foundation                                                  | **SmartHR**                                     | already the palette source — `--primary` = SmartHR MAIN `#0071bd`, `--foreground` = TEXT_BLACK, `--border` = BORDER                                  |
-| **Derived colour — the interaction states hanging off each seed**  | **Measured contrast (WCAG 2.2 / JIS X 8341-3)** | Authored in `src/tokens/derived.css`; no algorithm derives them. Four contrast suites read that file and hold every value to a threshold — see below |
+| Colour foundation                                                  | **SmartHR**, brand roles aside                  | the NEUTRAL spine is SmartHR's — `--foreground` = TEXT_BLACK, `--border` = BORDER. `--primary` was SmartHR MAIN `#0071bd` until identity v2.3 took the brand roles back: it is GoDX violet `#7A00FF` today |
+| **Derived colour — the interaction states hanging off each seed**  | **Measured contrast (WCAG 2.2 / JIS X 8341-3)** | Authored in `src/tokens/derived.css`; no algorithm derives them. Four contrast suites read that file and hold every value to a threshold, and a fifth holds it to the seed's HUE (gh#648) — see below |
 | **Japanese UI convention — density, JP typography, form patterns** | **SmartHR**                                     | **NEW — this decision.** Extends SmartHR from "where the colours came from" to the authority for how a JP business screen behaves                    |
 | **Japanese accessibility / public-sector convention**              | **デジタル庁 Design System** (Digital Agency)   | **NEW — this decision.** The reference when a JP customer asks which standard a screen meets (JIS X 8341-3)                                          |
 | **Spacing, density, type scale, information architecture**         | **IBM Carbon**                                  | **NEW — this decision**                                                                                                                              |
@@ -385,17 +385,25 @@ the property actually being sold.
 suite — that is CI's job on the PR), and if a threshold breaks the value is
 wrong. Do not relax the threshold.
 
-**The four overrides that existed even while a generator did** — the clearest evidence the
-algorithm was never the real authority. Stepping an interactive fill towards the label sitting on
-it lands under 4.5:1, so those four states take the same ramp at the same step size in the
-opposite direction:
-
-| token                    | conventional step | shipped           |
-| ------------------------ | ----------------- | ----------------- |
-| light `--primary-hover`  | #208bc9 · 3.69:1  | #005596 · 7.53:1  |
-| light `--primary-active` | #005596 · 7.53:1  | #003c70 · 10.97:1 |
-| dark `--primary-hover`   | #61b6e8 · 7.92:1  | #61b6e8 · 7.92:1  |
-| dark `--primary-active`  | #2f76a6 · 3.60:1  | #8bd0f3 · 10.50:1 |
+**The primary interaction ramp, and the one override left in it.** The light states are TAKEN from
+the identity v2.3 kit rather than computed — the kit publishes its own violet ramp — and each is
+snapped to the seed's hue (1.008:1 / 1.010:1 from the kit value, i.e. the same colour). Dark takes
+the kit's `action.primary.hover` and then reflects the pressed step, because the dark seed sits at
+86.9% L and the conventional step runs out of LIGHTNESS rather than out of contrast:
+
+| token                    | conventional step        | shipped                            |
+| ------------------------ | ------------------------ | ---------------------------------- |
+| light `--primary-hover`  | kit #6400D4              | #6500d4 · 8.23:1                   |
+| light `--primary-active` | kit #5200B0              | #5400b0 · 10.31:1                  |
+| dark `--primary-hover`   | kit #E8DAFF              | #ecdaff · 13.51:1                  |
+| dark `--primary-active`  | #fbf7ff · 1.056:1 from white | #cd9fff · 8.41:1 (sign flipped) |
+
+**The ratio is blind to hue, and that cost a release (gh#648).** Identity v2.3 moved the seed 63
+degrees and this tier stayed on the blue it was derived from: 24.0.0 and 24.1.0 shipped a primary
+button that was violet at rest and navy on hover, with all four contrast suites green throughout,
+because #005596 clears 7.53:1 on the primary label whatever the seed underneath it is. A threshold
+is still the right authority — it just answers one axis of two.
+`src/tokens/__tests__/derived-hue-lock.test.ts` answers the other, and asserts nothing else.
 
 **What was deliberately never derived, and why — each a measurement, not a preference:**
 
@@ -482,11 +490,16 @@ the **field** indicator on every control — one hairline (1px) in the focus hue
 `--control-outline` halo — rather than the heavy 3px outline form. Measured, in Chromium, on
 `ql.test` after the transition settles:
 
-| control                    | switch off                                           | switch on                                                             |
-| -------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------- |
-| Input / Select trigger     | border `1px rgb(144,135,127)`, resting shadow intact | border `1px rgb(0,113,189)` + `rgba(0,182,228,0.11) 0 0 0 2px`        |
-| Button (primary)           | outline `0px`, resting shadow intact                 | `outline: 1px solid rgb(0,113,189)` @ `0px` + same halo               |
-| Sidebar nav row / list row | outline `0px`                                        | `outline: 1px solid rgb(0,113,189)` @ **`-1px`** (inset into the row) |
+| control                    | switch off                                           | switch on                                                      |
+| -------------------------- | ---------------------------------------------------- | -------------------------------------------------------------- |
+| Input / Select trigger     | border `1px rgb(144,135,127)`, resting shadow intact | border `1px` of `--ring` + `--control-outline` halo `0 0 0 2px` |
+| Button (primary)           | outline `0px`, resting shadow intact                 | `outline: 1px solid` `--ring` @ `0px` + same halo              |
+| Sidebar nav row / list row | outline `0px`                                        | `outline: 1px solid` `--ring` @ **`-1px`** (inset into the row) |
+
+The GEOMETRY above is the Chromium measurement; the COLOUR is named by token rather than pinned as
+a hex, because it follows the seed and the hexes this table used to carry were the pre-v2.3 blue —
+the same staleness gh#648 found one tier down. Today `--ring` resolves to rgb(122,0,255) light /
+rgb(220,188,255) dark and the halo to `rgba(109,0,228,0.11)` / `rgba(153,61,254,0.29)`.
 
 The field pair is the recoloured boundary plus the halo, exactly as the convention specifies for
 this seed. The nav row insets its mark into its own shape rather than wrapping an already-shaded surface,
@@ -497,10 +510,11 @@ after: the field form only recolours a border and an `outline` is painted outsid
 Input, Save and Delete all stay at 32.00px.
 
 **Two criteria, and only one is met by thickness alone.** SC 1.4.11 (AA, non-text contrast) is about
-COLOUR — the 1px mark measures 5.05:1 light and 7.07:1 dark on every surface a control sits on, so
-the light weight costs nothing there. `--primary-border` (#6dc0e3) measures **2.00:1 light /
-1.66:1 dark** and could not have satisfied it at any thickness, which is why the on-state takes the
-focus hue instead — the single place it departs from the outline form. SC 2.4.13 Focus Appearance
+COLOUR — the 1px mark measures at worst 5.30:1 light and 6.87:1 dark across every surface a control
+sits on (an accent panel in both themes), so the light weight costs nothing there. `--primary-border`
+(#a66de3) reaches 3.49:1 on the page and **2.92:1 light / 1.03:1 dark on that same accent panel**, so
+it still could not satisfy the criterion everywhere at any thickness, which is why the on-state takes
+the focus hue instead — the single place it departs from the outline form. SC 2.4.13 Focus Appearance
 (AAA) additionally wants a 2px perimeter; the on-state does not target it, and
 `--focus-outline-weight: var(--stroke-lg)` restores the 3px weight if a customer needs the area
 clause.

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,164 @@
+# 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 — and what came of it
+
+54 rows, **159 violation nodes**, on code that passed every other gate in this repository. Fixing
+them took it to **12 rows / 19 nodes**, and then to **0**:
+
+| rule                    | first run | now | what it was                                                                                                                              |
+| ----------------------- | --------: | --: | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `color-contrast`        |        62 |   0 | text under 4.5:1 (SC 1.4.3)                                                                                                              |
+| `target-size`           |        28 |   0 | under 24×24 (SC 2.5.8) — `Carousel` dots, `SearchInput`'s clear button, `Attachments`' file input                                        |
+| `aria-prohibited-attr`  |        21 |   0 | `Badge`'s `aria-label` on a `generic` div — the name was dropped by every screen reader                                                  |
+| `button-name`           |        18 |   0 | **`Select`'s trigger is `role="combobox"`, which cannot be named by its contents** — every unlabelled Select shipped a nameless combobox |
+| `aria-valid-attr-value` |        18 |   0 | `aria-controls` pointing at ids that do not exist                                                                                        |
+| `aria-conditional-attr` |        12 |   0 | `aria-expanded` on a `<tr>`, which only a `treegrid` row may carry                                                                       |
+
+Four of those were LIBRARY defects, not demo slips — `Badge`, `Select`, `Carousel`, `SearchInput` —
+and the fifth produced a new vocabulary member: `tone="inherit"` on `Text` / `Heading` / `Title` /
+`Activity` / `Separator`, because every other tone is an absolute token and there was no way to put
+text on a coloured surface without fighting it.
+
+The `target-size` rows are the sharpest point about two rulers. Our own `target-size-min` was
+running on those same frames and reporting them clean, because it measures a painted box. And the
+fix axe wants is not the fix the standard wants: a centred `::after` genuinely makes the target
+24×24 — `docs/MEASUREMENT-CONTRACT.md` records that under `expanders` — but axe reads
+`getBoundingClientRect()`, which cannot see a pseudo-element. Both fixes were tried; the boxes had
+to grow.
+
+## The last twelve rows, and what each one turned out to be
+
+The table above is what the sweep found; this is what the remaining 12 rows / 19 nodes turned out
+to be once each was measured rather than reasoned about. The rows are kept, with the verdict this
+file used to carry quoted back, because four of the five were wrong: two had no diagnosis at all
+and two had one the measurement contradicted — and in both of those the guess pointed AWAY from
+this package.
+
+| rows | what                                                                                                   | the measurement, and where it was fixed                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| ---: | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|    3 | `foundation-colors` · `--success-foreground` on `--success`, `--attention-foreground` on `--attention` | Called "a PALETTE decision, an owner-level call". It was not the palette: the FILL was fine and the INK was wrong. Two of the light theme's eight fills carried a near-white ink their own lightness cannot support (2.19:1 / 3.32:1) while the sibling `--warning` had always used the near-black one on the equally pale 山吹, and the DARK theme already flipped both. `src/tokens/foundation.css`: ink only — success 2.19 → **7.08**, attention 3.32 → **4.68**. Guarded by `__tests__/status-fill-contrast.test.ts`.                                                                                                                           |
+|    3 | `case6-agency-handy` · a SELECTED `ToggleGroupItem` paints `--foreground` over `--primary`             | "Cause not yet found." Found, with `CSS.getMatchedStylesForNode`: the demo wrote `text-[var(--font-size-xs)]`, and Tailwind v4 reads a bare `var()` in `text-*` as a COLOUR — it compiled to `color: var(--font-size-xs)` in the UTILITIES layer, an invalid colour that clobbered the component's own `color: hsl(var(--primary-foreground))` in `components` and left the trigger inheriting the page ink. The component rule was right all along. Demo fix (`text-[length:var(…)]`, 10 sites in `docs/`), plus the count pill: the hand-rolled `Text` at `opacity-70` measured 2.15:1 and `ToggleGroupItem`'s own `count` prop inverts to 6.32:1. |
+|    3 | `table-view-tabs` · a `Tab`'s `aria-controls` points at a `tabpanel` that is never rendered            | A LIBRARY defect, and the composition is published: `Tabs` / `TabsList` / `TabsTrigger` are three separate exports, nothing in their types asks for a fourth, and the attribute could not be overridden (`withDomProps` puts RAC's props after the caller's). `TabsContent` now registers its value and a trigger claims a panel only when one is declared. No new public prop. `__tests__/tabs-panel-reference-643.test.tsx`.                                                                                                                                                                                                                       |
+|    2 | `futurelastic-web` @320/@375 · white ghost buttons read as 1.01:1                                      | "Probably a false positive." It was not. The tenant's `.fl-navbar-inner` was a fixed-height flex row with no wrap, so at 320 its content ran to **x=569.6 inside a 320px nav** — the links painted outside the navbar's own box, over the page behind it. A WCAG 2.2 SC 1.4.10 reflow failure reported by the contrast rule, because that is what an overflowing element looks like from the outside. Demo CSS + `Flex wrap`.                                                                                                                                                                                                                        |
+|    1 | `table-bulk-actions` @375 · `target-size`                                                              | "Not yet diagnosed." The left cluster carried `min-w-0 flex-1` — "squeeze me to nothing" — over children that refuse to shrink, so its box shrank to 113.6px while its content ran to x=462 and painted 一括承認 (264.6→360.2) under 解除 (272.3→341.0), leaving 19.2×30.2 unobscured against SC 2.5.8's 24×24. Demo: `wrap`, and no `min-w-0`.                                                                                                                                                                                                                                                                                                      |
+
+Two of the five were library defects and three were genuine demo slips — a different split from the
+first sweep, where four of five were the library's. Which is the point of writing the number down
+next to each one: "it is the demo" and "it is the palette" are both cheap to say and neither
+survived a measurement here.
+
+## 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/foundation/colors.tsx

@@ -69,7 +69,10 @@ function SwatchTile({ swatch, text }: { swatch: Swatch; text?: boolean }) {
       {/* ui-audit-disable-next-line no-hand-rolled-surface no-utility-layout no-utility-spacing — a swatch showing the token itself; the fill IS the subject */}
       <div className={`border-border flex h-14 items-end rounded-md border p-2 ${swatch.cls}`}>
         {text ? (
-          <Text size="xs" mono className="leading-none">
+          /* `tone="inherit"` — the specimen's whole job is to show the token's PAIRED foreground,
+             and every other tone is an absolute colour. Without it `Text` repainted itself in
+             `--foreground` over `--primary` and measured 2.45:1 on this very page (gh#643). */
+          <Text size="xs" mono tone="inherit" className="leading-none">
             Aa 亜
           </Text>
         ) : null}

package/docs/general/logo.tsx

@@ -125,6 +125,69 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Product suffix — 「GoDX | ID」</CardTitle>
+            <CardDescription>
+              productSuffix は製品名を lockup の内側に置きます。マスターは
+              mark=&quot;godx-lockup&quot; の 1 つだけで、区切り線・その前後の間隔・size
+              スケール・light/dark
+              の切替はすべてパッケージのトークンが所有します（--logo-divider-color / -width /
+              -height / -alpha、--logo-product-suffix-gap / -color /
+              -font-weight）。製品名は「描いた図形」ではなく wordmark と同じ組版
+              （--logo-wordmark-font-size-* /
+              -font-family）です。別座標系のマスターを増やさず、製品が増えても
+              リリースが要らず、ローカライズできるためです。 区切り線の色はロゴタイプの ink
+              （--logo-godx-ink-color）の 0.25 alpha で、light では #c1c2cb（1.74:1、 公式キットの
+              #c5c8d6 = 1.64:1 とほぼ同じ）、dark では #515150（2.30:1）。 キットの固定値と違い dark
+              の対応があります。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* size は suffix にも効く — マークもロゴタイプも製品名も同じティアで動きます。 */}
+              <Flex direction="row" align="center" wrap gap="lg">
+                <Logo mark="godx-lockup" productSuffix="ID" size="xs" />
+                <Logo mark="godx-lockup" productSuffix="ID" size="sm" />
+                <Logo mark="godx-lockup" productSuffix="ID" />
+                <Logo mark="godx-lockup" productSuffix="ID" size="lg" />
+              </Flex>
+              {/* 将来の製品名も同じ API。追加のアセットもリリースも要りません。 */}
+              <Flex direction="row" align="center" wrap gap="lg">
+                <Logo mark="godx-lockup" productSuffix="Console" />
+                <Logo mark="godx-lockup" productSuffix="Admin" />
+                <Logo mark="godx-lockup" productSuffix="管理コンソール" />
+              </Flex>
+              {/* 描かれた "GoDX" は sr-only テキストで補われ、名前は "GoDX ID" になります。
+               * role="img" を使わないのは、asChild でリンクにしたとき link ロールを
+               * 上書きしてしまうためです。 */}
+              <Flex direction="col" gap="sm">
+                <Logo mark="godx-lockup" productSuffix="ID" size="lg" />
+                <Text size="2xs" mono tone="muted">
+                  {`mark="godx-lockup" productSuffix="ID" → accessible name "GoDX ID"`}
+                </Text>
+              </Flex>
+              {/* 組版の wordmark と併用すると、suffix はその後ろに入ります。 */}
+              <Flex direction="col" gap="sm">
+                <Logo glyph="c" wordmark="CoreBooks" productSuffix="Admin" />
+                <Text size="2xs" mono tone="muted">
+                  {`glyph + wordmark + productSuffix → name "CoreBooks Admin"`}
+                </Text>
+              </Flex>
+              {/* suffix がノードでも名前は壊れません。label は従来どおり上書きできます。 */}
+              <Logo
+                mark="godx-lockup"
+                productSuffix={<Text size="xs">ID</Text>}
+                label="GoDX ID ホーム"
+              />
+              {/* リンク化も同じ。lockup そのものが <a> になります。 */}
+              <Logo asChild mark="godx-lockup" productSuffix="ID">
+                <a href="#logo-product-suffix" />
+              </Logo>
+            </Flex>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/general/typography.tsx

@@ -94,6 +94,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone=&quot;inherit&quot; · 面が決める</CardTitle>
+            <CardDescription>
+              他の tone は絶対的なトークンを塗るため、色つきの面に置いた途端にページの文字色へ戻って
+              しまいます。inherit はその面が持つ対になる前景色をそのまま使う唯一のメンバーです。
+              これを入れる前、--primary の上の Text は --foreground を塗って 2.45:1
+              でした（gh#643）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {/* ui-audit-disable-next-line no-hand-rolled-surface no-utility-layout no-utility-spacing — the COLOURED SURFACE is the subject here, exactly as in docs/foundation/colors.tsx */}
+              <div className="bg-primary text-primary-foreground rounded-md p-4">
+                <Flex direction="col" gap="xs">
+                  <Heading level={3} tone="inherit">
+                    請求サマリー
+                  </Heading>
+                  <Text tone="inherit">今月の請求は締め処理まで完了しています。</Text>
+                  <Text size="2xs" mono tone="inherit">
+                    {`tone="inherit"`}
+                  </Text>
+                </Flex>
+              </div>
+              <Text size="xs" tone="muted">
+                同じ二行を tone=&quot;default&quot; で置くと、面ではなくページの文字色を塗ります。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Text sizes</CardTitle>

package/docs/layout/auth-identity.tsx

@@ -1,9 +1,15 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Logo } from "@godxjp/ui/general";
 import { AuthAccountSummary, AuthIdentity, AuthStack, PageContainer } from "@godxjp/ui/layout";
 
 /**
  * AuthIdentity — canonical identity title with optional relying-party request context. The
  * requester line is consumer data and may be omitted for first-party authentication.
+ *
+ * `brand` is the product's own artwork, in the MARK's place: the h1 stays painted and keeps naming
+ * the block, and the artwork is decorative whatever fills it — so a lockup that spells "GoDX | ID"
+ * is not announced on top of the heading. When the lockup already carries the product name, make
+ * `title` the SCREEN'S purpose ("サインイン") rather than repeating the brand.
  */
 export default function Demo() {
   return (
@@ -31,6 +37,34 @@ export default function Demo() {
           </AuthStack>
         </CardContent>
       </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle level={2}>brand · 製品ロックアップ</CardTitle>
+          <CardDescription>
+            brandを渡すとパッケージのマークが製品のロックアップに置き換わります。h1はtitleを読み上げ名
+            として保持し、ロックアップは装飾扱いになるため製品名は一度だけ読まれます。ロックアップが製品名
+            を含む場合、titleには画面の目的を入れてください。
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <AuthStack>
+            <AuthIdentity
+              title="サインイン"
+              brand={<Logo mark="godx-lockup" productSuffix="ID" />}
+            />
+            <AuthIdentity
+              title="サインイン"
+              brand={<Logo mark="godx-lockup" productSuffix="ID" size="lg" />}
+              requester="勤怠管理が認証を要求しています"
+            />
+            <AuthIdentity
+              title="サインイン"
+              brand={<Logo glyph="a" wordmark="Acme" productSuffix="ID" />}
+            />
+          </AuthStack>
+        </CardContent>
+      </Card>
     </PageContainer>
   );
 }

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/docs/showcase/acme-website.tsx

@@ -80,7 +80,9 @@ const THEME = `
 [data-tenant="acme-web"] .tx-h2 { font-family: var(--font-family-display); font-weight: 800; font-size: 2.25rem;
   line-height: 1.15; letter-spacing: -0.02em; margin: 0.75rem 0 0.625rem; color: hsl(var(--foreground)); }
 [data-tenant="acme-web"] .tx-lead { font-size: 1.1875rem; line-height: 1.6; color: hsl(var(--muted-foreground)); max-width: 480px; }
-[data-tenant="acme-web"] .tx-gold { color: hsl(var(--primary)); }
+/* --text-brand, not --primary (gh#643): --primary is a FILL role, and as ink it measured
+   2.01:1 here. The AA-safe text tier already exists and .tx-eyebrow above already reads it. */
+[data-tenant="acme-web"] .tx-gold { color: hsl(var(--text-brand)); }
 [data-tenant="acme-web"] .tx-stat { font-family: var(--font-family-display); font-weight: 800; font-size: 1.75rem; color: hsl(var(--primary)); }
 [data-tenant="acme-web"] .tx-hero-grid { display: grid; gap: 3rem; align-items: center; padding-block: 6rem; }
 @media (min-width: 1024px) { [data-tenant="acme-web"] .tx-hero-grid { grid-template-columns: 1.1fr 0.9fr; } }

package/docs/showcase/case4-login.tsx

@@ -283,11 +283,11 @@ export default function LoginShowcase() {
 
               <Text as="p" size="2xs" tone="muted" align="center" className="leading-relaxed">
                 ログインすると{" "}
-                <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
+                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
                   利用規約
                 </Button>{" "}
                 ·{" "}
-                <Button variant="link" size="sm" className="text-[var(--font-size-2xs)]">
+                <Button variant="link" size="sm" className="text-[length:var(--font-size-2xs)]">
                   プライバシーポリシー
                 </Button>{" "}
                 に同意したものとみなされます。