@godxjp/ui 24.1.0 → 25.0.0

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

@@ -39,23 +39,52 @@ 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
-
-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.
+## 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
 

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/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>{" "}
                 に同意したものとみなされます。

package/docs/showcase/case5-shift-calendar.tsx

@@ -126,8 +126,10 @@ function ShiftPill({
       <Text as="span" size="2xs" weight="medium">
         {meta.label}
       </Text>
+      {/* `inherit`, not `muted` (gh#643): the chip is a TINTED surface, and `muted` is an absolute
+          token that measured 4.46:1 on it. Inheriting lets the chip's own ink win. */}
       {staff ? (
-        <Text as="span" size="2xs" tone="muted" truncate>
+        <Text as="span" size="2xs" tone="inherit" truncate>
           {staff}
         </Text>
       ) : null}
@@ -433,7 +435,7 @@ export default function ShiftCalendarShowcase() {
                     <Text size="xs" weight="medium" className="whitespace-nowrap">
                       {SHIFT_META[k].label}
                     </Text>
-                    <Text size="xs" tone="muted" tabular className="whitespace-nowrap">
+                    <Text size="xs" tone="inherit" tabular className="whitespace-nowrap">
                       {SHIFT_META[k].time}
                     </Text>
                   </Badge>
@@ -582,7 +584,7 @@ function MonthGrid({ onPick }: { onPick: (d: DayCell) => void }) {
                                 tone="destructive"
                                 variant="outline"
                                 shape="sharp"
-                                className="text-[var(--font-size-2xs)]"
+                                className="text-[length:var(--font-size-2xs)]"
                               >
                                 祝
                               </Badge>

package/docs/showcase/case6-agency-handy.tsx

@@ -368,7 +368,7 @@ function TabBar({ active, onChange }: { active: string; onChange: (id: string) =
             onClick={() => onChange(t.id)}
             aria-current={isActive ? "page" : undefined}
             className={
-              "h-full flex-col rounded-none font-medium text-[var(--font-size-2xs)] " +
+              "h-full flex-col rounded-none text-[length:var(--font-size-2xs)] font-medium " +
               (isActive ? "text-primary" : "text-muted-foreground")
             }
           >
@@ -637,12 +637,16 @@ function InboundTab({
             <ToggleGroupItem
               key={f.id}
               value={f.id}
-              className="h-9 shrink-0 rounded-full whitespace-nowrap text-[var(--font-size-xs)]"
+              className="h-9 shrink-0 rounded-full text-[length:var(--font-size-xs)] whitespace-nowrap"
+              // The library's OWN counter pill, not a `Text` at 70% opacity (gh#643). The
+              // hand-rolled one measured 2.15:1 on the selected chip's --primary fill, because
+              // `opacity-70` blends whatever ink it inherits back towards the fill underneath it —
+              // `tone="inherit"` cannot help with that. `.ui-toggle[data-state="on"]
+              // .ui-toggle-count` inverts instead (--primary on --primary-foreground, 6.32:1) and
+              // folds the number into the accessible name.
+              count={f.count}
             >
               {f.label}
-              <Text size="xs" mono tabular className="opacity-70">
-                {f.count}
-              </Text>
             </ToggleGroupItem>
           ))}
         </Flex>
@@ -848,19 +852,19 @@ function OutboundTab({ seg, setSeg }: { seg: string; setSeg: (v: string) => void
         <ResponsiveGrid columns={3} gap="xs">
           <ToggleGroupItem
             value="seal"
-            className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Chờ niêm phong
           </ToggleGroupItem>
           <ToggleGroupItem
             value="handoff"
-            className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Chờ bàn giao
           </ToggleGroupItem>
           <ToggleGroupItem
             value="done"
-            className="h-9 rounded-xl whitespace-nowrap text-[var(--font-size-xs)]"
+            className="h-9 rounded-xl text-[length:var(--font-size-xs)] whitespace-nowrap"
           >
             Đã bàn giao
           </ToggleGroupItem>
@@ -1014,7 +1018,7 @@ export default function AgencyHandyShowcase() {
                 <ToggleGroupItem
                   key={s}
                   value={s}
-                  className="size-7 rounded-md text-[var(--font-size-2xs)] uppercase"
+                  className="size-7 rounded-md text-[length:var(--font-size-2xs)] uppercase"
                   title={s}
                 >
                   {s[0]}

package/docs/showcase/futurelastic-web.tsx

@@ -63,7 +63,15 @@ const THEME = `
 [data-tenant="futurelastic"] .fl-section { padding-block: 5.5rem; }
 [data-tenant="futurelastic"] .fl-navbar { position: sticky; top: 0; z-index: 30; background: hsl(var(--background) / 0.8);
   backdrop-filter: blur(12px); border-bottom: 1px solid hsl(var(--border)); }
-[data-tenant="futurelastic"] .fl-navbar-inner { height: 68px; display: flex; align-items: center; gap: 2rem; }
+/* REFLOW, NOT DECORATION (gh#643). This row was a fixed 68px flex line with no wrap, so at 320 its
+   content ran to x=569.6 inside a 320px nav: every link painted OUTSIDE the navbar's own
+   translucent box, over the page behind it, and axe read the white labels against the light
+   isolate background at 1.01:1 — 2 nodes at 320, 1 at 375. It was never a contrast bug; it was
+   WCAG 2.2 SC 1.4.10 reflow, reported by the contrast rule because that is what an overflowing
+   element looks like from the outside. min-height rather than height, so a wrapped row may be
+   taller than one line and the language cluster stops overflowing the bar vertically (measured at
+   320: it was 148.3px tall, starting at y=-40.2). */
+[data-tenant="futurelastic"] .fl-navbar-inner { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; column-gap: 2rem; row-gap: 0.75rem; padding-block: 0.75rem; }
 [data-tenant="futurelastic"] .fl-brand { font-family: var(--font-family-display); font-weight: 700; font-size: 1.25rem; color: hsl(var(--foreground)); }
 [data-tenant="futurelastic"] .fl-eyebrow { font-family: var(--font-family-body); font-weight: 600; font-size: 0.75rem;
   letter-spacing: 0.18em; text-transform: uppercase; color: hsl(var(--primary)); }
@@ -122,14 +130,14 @@ function Navbar() {
         <span className="fl-brand">
           futur<span className="fl-gold">elastic</span>
         </span>
-        <Flex direction="row" gap="xs" align="center">
+        <Flex direction="row" gap="xs" align="center" wrap>
           {links.map((l, i) => (
             <Button key={l} variant="ghost" size="sm" aria-current={i === 0 ? "page" : undefined}>
               {l}
             </Button>
           ))}
         </Flex>
-        <Flex direction="row" gap="sm" align="center" className="ms-auto">
+        <Flex direction="row" gap="sm" align="center" wrap className="ms-auto">
           <Text as="span" size="xs" tone="muted">
             EN · 日本語 · VI
           </Text>

package/docs/showcase/table-bulk-actions.tsx

@@ -205,8 +205,19 @@ function BulkActionBar({
     <Card className="bg-primary/5 border-primary/30">
       <CardContent solo>
         <Flex role="region" aria-label="一括操作" wrap align="center" gap="md">
-          {/* left: count + cross-page select-all escalation + safe batch actions */}
-          <Flex direction="row" align="center" gap="sm" className="min-w-0 flex-1">
+          {/* left: count + cross-page select-all escalation + safe batch actions.
+              THE `wrap`, AND THE ABSENT `min-w-0`, ARE BOTH LOAD-BEARING (gh#643). This cluster
+              used to carry `min-w-0 flex-1` — "squeeze me to nothing" — while every child inside
+              refuses to be squeezed: two `Button`s and a `whitespace-nowrap` count. At 375 the box
+              duly shrank to 113.6px, the content still ran to x=462, and it painted straight over
+              the destructive cluster beside it — 一括承認 at 264.6→360.2 under 解除 at
+              272.3→341.0, which axe reported as `target-size` with 19.2×30.2 of the button left
+              unobscured against SC 2.5.8's 24×24. Without `min-w-0` the cluster keeps a real
+              min-content width, and `wrap` is what makes that width small enough to be honest:
+              measured after, 375 puts the two clusters on separate rows (left 307px over two
+              lines, destructive below) and 1440 is unchanged — one 30.2px row, destructive still
+              pushed to x=1217.5 by `flex-1`. */}
+          <Flex direction="row" align="center" gap="sm" wrap className="flex-1">
             <Text tone="primary" weight="medium" tabular className="whitespace-nowrap">
               {effective}件を選択中
             </Text>

package/docs/showcase/table-density.tsx

@@ -267,7 +267,9 @@ export default function Demo() {
                     >
                       <Flex direction="row" align="center" gap="xs">
                         <span>{DENSITY_META[key].label}</span>
-                        <Text size="2xs" tone="muted" tabular>
+                        {/* `inherit` (gh#643): a SELECTED item fills with --primary, and `muted`
+                            is an absolute token — it measured 1.11:1 on that fill. */}
+                        <Text size="2xs" tone="inherit" tabular>
                           {DENSITY_META[key].px}
                         </Text>
                       </Flex>

package/docs/showcase/table-expandable-rows.tsx

@@ -299,7 +299,7 @@ function DetailPanel({ employee }: { employee: Employee }) {
           {/* Per-day breakdown — quiet nested list, real Card chrome */}
           <Card>
             <CardHeader>
-              <CardTitle level={2} className="text-[var(--font-size-xs)]">
+              <CardTitle level={2} className="text-[length:var(--font-size-xs)]">
                 今週の打刻
               </CardTitle>
               <CardAction>
@@ -396,27 +396,37 @@ function ExpandableList() {
           const panelId = `row-detail-${emp.id}`;
           return (
             <React.Fragment key={emp.id}>
+              {/* THE DISCLOSURE IS THE BUTTON, NOT THE ROW (gh#643, found by check:frame-axe).
+                  This row used to carry `tabIndex={0}` + `aria-expanded` + `aria-controls` and be
+                  the control itself. `aria-expanded` is valid on a TREEGRID row and not on a table
+                  row, so axe scored it `aria-conditional-attr` — and the row was a focus stop with
+                  no role and no name, which is the worse half of the same mistake. The chevron is
+                  now a real button: it owns the state, the name and the tab stop. Clicking the row
+                  still works, as a pointer convenience that claims no semantics of its own. */}
               <TableRow
                 data-state={isOpen ? "selected" : undefined}
-                tabIndex={0}
-                aria-expanded={isOpen}
-                aria-controls={panelId}
                 onClick={() => {
                   toggle(emp.id);
                 }}
-                onKeyDown={(e) => {
-                  if (e.key !== "Enter" && e.key !== " ") return;
-                  if (e.target !== e.currentTarget) return;
-                  e.preventDefault();
-                  toggle(emp.id);
-                }}
-                className="hover:bg-muted/50 focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset"
+                className="hover:bg-muted/50 cursor-pointer"
               >
                 <TableCell className={CELL}>
-                  <ChevronRight
-                    className={`text-muted-foreground size-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
-                    aria-hidden="true"
-                  />
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-expanded={isOpen}
+                    aria-controls={isOpen ? panelId : undefined}
+                    aria-label={`${emp.name} の詳細を${isOpen ? "折りたたむ" : "展開する"}`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggle(emp.id);
+                    }}
+                  >
+                    <ChevronRight
+                      className={`text-muted-foreground size-4 transition-transform ${isOpen ? "rotate-90" : ""}`}
+                      aria-hidden="true"
+                    />
+                  </Button>
                 </TableCell>
                 <TableCell className={CELL}>
                   <Text as="div" weight="medium">

package/docs/showcase/table-grouped-subtotals.tsx

@@ -232,7 +232,11 @@ function GroupHeaderRow({
           size="sm"
           onClick={onToggle}
           aria-expanded={open}
-          aria-controls={`grp-${group.id}`}
+          /* NO `aria-controls` (gh#643, found by check:frame-axe). It pointed at `grp-<id>`, and
+             no element in this table ever carried that id — axe: `aria-valid-attr-value`, 5 nodes.
+             It cannot simply be added, either: what this button expands is a RUN OF SIBLING `<tr>`s
+             with no single container to name. `aria-expanded` alone is complete and valid here —
+             `aria-controls` is optional, and a broken one is worse than none. */
           className="h-7 font-medium"
         >
           <Chevron className="text-muted-foreground size-4" aria-hidden="true" />