@godxjp/ui 24.1.0 → 25.1.0

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/FRAME-A11Y-CI.md

@@ -31,6 +31,7 @@ pnpm check:frame-axe -- /isolate/layout-topbar   # one route, while fixing
 | 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**                                                  |
+| states    | as rendered, **plus** one overlay OPEN on the routes that declare `data-axe-open` |
 
 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.
@@ -39,23 +40,160 @@ Showcases are included on purpose. They are the only frames here shaped like a r
 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
+## The overlay scope — opening the thing before measuring it
 
-54 rows, **159 violation nodes**, on code that passed every other gate in this repository:
+A menu, dialog, listbox or popover that is closed at rest **paints nothing**. Every axe rule whose
+condition only exists while one is open was therefore outside this gate's field of view, not passing
+it. The gate shipped in 24.1.0 without this half; it is back (gh#643 item 4), rebuilt from the
+version #492 deleted.
 
-| 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                                                                              |
+A demo opts in **declaratively**, from the demo itself:
 
-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.
+```tsx
+// the trigger, when it forwards DOM props
+<DialogTrigger asChild>
+  <Button data-axe-open size="sm">仕訳新規作成</Button>
+</DialogTrigger>
+
+// the region that owns it, when the component renders its own trigger
+<CardContent data-axe-open>
+  <FormField id="status" label="状態"><Select … /></FormField>
+</CardContent>
+
+// right-click, for the gesture nothing else reaches
+<Button data-axe-open="contextmenu" variant="outline">…</Button>
+```
+
+What the gate then does, per route/viewport, **after** the default-state scan (opening an overlay is
+destructive to the state that scan measures):
+
+1. Take the **first** `[data-axe-open]` on the page. No declaration ⇒ the route skips this entirely
+   and costs nothing.
+2. Press **Escape** up to three times while any overlay is mounted. Several demos deliberately
+   render one open at rest (`popover`'s anchored panel, `dropdown-menu`'s `defaultOpen` card), and a
+   modal one makes the rest of the page unreachable. Dismissing first 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. (`Select` and `DatePicker` own their trigger DOM and forward no `data-*`
+   to it — hence the declare-on-the-region form. `DatePicker`'s combobox `<input>` is what opens the
+   calendar, and it is what gets pressed.)
+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]`) — never a bare timer.
+5. Scan again, and key the rows `@<viewport>+open`:
+
+```
+/isolate/data-entry-select-matrix @1440+open aria-required-children
+```
+
+**A declaration whose overlay never opens is a gate FAILURE**, recorded as `overlay-did-not-open`
+and red on the spot. A broken declaration otherwise reads exactly like a clean frame, which is the
+one thing this scope exists to prevent.
+
+**Routes declaring an open step today — 7 declared, 7 open:** `data-entry-select`,
+`data-entry-select-matrix`, `data-entry-date-picker`, `data-display-popover`,
+`navigation-dropdown-menu`, `feedback-dialog`, `feedback-sheet`. (The old `navigation-context-menu`
+frame is gone — `ContextMenu` was folded into `DropdownMenu trigger={["contextMenu"]}` in v23 — so
+the right-click gesture is declared on that card of `navigation-dropdown-menu` instead.)
+
+### What it found, and the proof it has teeth
+
+**`aria-required-children`, CRITICAL, on `/isolate/data-entry-select-matrix` at all three
+viewports.** `SelectSeparator` rendered react-aria's `<Separator>`, i.e. `role="separator"`, as a
+direct child of the viewport's `role="listbox"`. ARIA 1.2 lets a `listbox` own `option` and `group`
+and nothing else. Fixed in `src/components/data-entry/select.tsx` — the divider is decoration over a
+structure the two `SelectGroup`s already announce, so it now renders `aria-hidden` with no role.
+`menu` **does** own `separator`, so `DropdownMenuSeparator` is correct as it stands. Regression test:
+`src/components/data-entry/__tests__/select-groups.test.tsx`.
+
+The control run is the part worth keeping. On the **same defective build**:
+
+| declarations | result                                                                      |
+| ------------ | --------------------------------------------------------------------------- |
+| removed      | ✓ green, `0 route(s) opened a declared overlay`                             |
+| present      | ✗ red, 3 × `aria-required-children` on `@1440+open / @375+open / @320+open` |
+
+A `data-axe-open` on a `Button` that opens nothing turns the gate red with three
+`overlay-did-not-open` rows, one per viewport.
+
+**The original 2026-09 proof no longer reproduces, and the reason matters more than the proof.** That
+commit disabled `src/components/general/inert-background.ts` and watched `aria-hidden-focus` go red
+on `select`, `dropdown-menu` and `context-menu`. Disabling it today changes nothing measurable:
+these overlays are **react-aria-components**, not Radix: react-aria inerts the background itself —
+`#root` plus three focus sentinels carry `inert` the moment a listbox opens, with no `aria-hidden`
+anywhere on them. Stripping every `inert` attribute immediately before the scan still leaves the
+page clean and `aria-hidden-focus` in axe's `passes` bucket, because that rule needs an
+`aria-hidden` ancestor to fire at all. No `src/` component imports `useInertHiddenBackground` any
+more; the only importer is the Radix parity fixture
+`src/components/data-entry/__tests__/radix-select.fixture.tsx`. So `inert-background.ts` is dead
+for `Select` and `DropdownMenu`, and the overlay scope's value is no longer the rule it was built
+for.
+
+Be careful with the stronger version of that claim, because the first draft of this paragraph made
+it and it is false: `data-aria-hidden` is **not** absent from the built preview. The `aria-hidden`
+npm package ships inside the `command` chunk (`cmdk`'s dependency tree), so the marker exists in
+the bundle even though no first-party overlay sets it. What is measured above is the narrow claim —
+`Select` and `DropdownMenu` background-inert via `inert`, not `aria-hidden` — not a repo-wide
+absence. It is still the rule class: `aria-required-children` is the same
+shape, and nothing else here could see it.
+
+### What is still outside this scope, stated rather than hidden
+
+- Only the **first** declaration per route is exercised. A route with several distinct overlays is
+  measured on one of them.
+- Only **one step deep**: submenus, an overlay opened from inside another, and the state after a
+  selection are not reached.
+- **Keyboard opening is not exercised** — the gate clicks. A trigger that opens on click but not on
+  `Enter`/`Space` passes.
+- The overlay's **focus trap and focus order** are not asserted; axe cannot see a JS focus trap.
+
+## 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
 
@@ -76,12 +214,10 @@ The gate fails on a key that is **not** in the baseline, and on a baselined key
 
 ## 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:
+The gate deleted in #492 did three things this one does not. One is now back; two are still gaps:
 
-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.
+1. ~~**No overlay scope.**~~ Restored — see [the overlay
+   scope](#the-overlay-scope--opening-the-thing-before-measuring-it) above.
 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.
@@ -98,11 +234,16 @@ which changes what `color-contrast` resolves a background to). Two sweeps after
 
 ## 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                                                                                 |
+|                                       |                                                                                                                |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| 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                                                                                                            |
+| full sweep **with the overlay scope** | **2m14s** on the machine gh#643 item 4 was built on, same 215 × 3 — the runner number has not been re-measured |
+
+The overlay pass is bounded by declaration: only the 7 declaring routes pay it (21 extra scans plus
+their open steps), and no `/showcase/**` route declares one, so `--scope=showcase` — the merge lane —
+is unchanged.
 
 `--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`.

package/docs/data-display/popover.tsx

@@ -61,7 +61,9 @@ export default function Demo() {
           <CardContent>
             <Popover open={filterOpen} onOpenChange={setFilterOpen}>
               <PopoverTrigger asChild>
-                <Button variant="outline">
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan, so the
+                    panel is measured OPEN as well as closed. See docs/FRAME-A11Y-CI.md. */}
+                <Button data-axe-open variant="outline">
                   <SlidersHorizontal />
                   絞り込み
                 </Button>

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

@@ -41,7 +41,9 @@ export default function Demo() {
               形式に整形され、 解釈できない入力は元の値へ復帰する。
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the region: DatePicker owns its trigger DOM. The gate presses the
+              `[role="combobox"]` input inside, which is what opens the calendar. */}
+          <CardContent data-axe-open>
             <FormField id="issue-date" label="発行日" required>
               <DatePicker
                 id="issue-date"

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

@@ -37,7 +37,9 @@ export default function Demo() {
               content. Radix owns keyboard focus and collision handling.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the region: the gate presses the first `[role="combobox"]` inside it,
+              which is the compound SelectTrigger. */}
+          <CardContent data-axe-open>
             <Flex direction="col" gap="md">
               <FormField
                 id="compound-controlled"

package/docs/data-entry/select.tsx

@@ -90,7 +90,10 @@ export default function Demo() {
               Pass an options array; name= submits the value with the form.
             </CardDescription>
           </CardHeader>
-          <CardContent>
+          {/* data-axe-open on the REGION, not the trigger: the data-driven Select renders its own
+              trigger and forwards no `data-*` to it, so the gate resolves the `[role="combobox"]`
+              inside this element and presses that. See docs/FRAME-A11Y-CI.md. */}
+          <CardContent data-axe-open>
             <FormField id="status" label="状態">
               <Select
                 id="status"

package/docs/feedback/dialog.tsx

@@ -64,7 +64,10 @@ export default function Demo() {
           <CardContent>
             <Dialog open={createOpen} onOpenChange={setCreateOpen}>
               <DialogTrigger asChild>
-                <Button size="sm">仕訳新規作成</Button>
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
+                <Button data-axe-open size="sm">
+                  仕訳新規作成
+                </Button>
               </DialogTrigger>
               <DialogContent className="max-w-lg">
                 <DialogHeader>

package/docs/feedback/sheet.tsx

@@ -104,7 +104,8 @@ export default function Demo() {
           <CardContent>
             <Sheet open={filterOpen} onOpenChange={setFilterOpen}>
               <SheetTrigger asChild>
-                <Button variant="outline" size="sm">
+                {/* data-axe-open: check:frame-axe presses this before its overlay scan. */}
+                <Button data-axe-open variant="outline" size="sm">
                   <SlidersHorizontal />
                   詳細検索
                 </Button>

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>