@godxjp/ui 18.15.3 → 19.0.0

package/dist/tokens/foundation.css

@@ -29,7 +29,28 @@
   --destructive: 357 64% 44%; /* 茜 #b7282e */
   --destructive-foreground: 60 33% 99%;
   --border: 30 7% 83%; /* #d6d3d0 SmartHR BORDER */
-  --input: 30 7% 83%;
+  /* CONTROL BOUNDARY role — deliberately NOT the same value as --border (gh#315).
+   *
+   * The two roles answer different questions and are held to different bars:
+   *   · --border is DECORATIVE chrome — table rules, card edges, section dividers. WCAG 2.2
+   *     SC 1.4.11 does not reach it (nothing about a divider is "required to identify a
+   *     component or its state"), and darkening it would make the JP-dense table grid roar.
+   *     It stays exactly where it is.
+   *   · --input is the boundary that IS the control — the 1px edge of Input, Textarea, Select,
+   *     the outline Button, TagInput, the composite date field, the topbar search. `--input`
+   *     also fills the Switch's unchecked track. A text field here has NO fill of its own
+   *     (`background: hsl(var(--background))`) and NO shadow to speak of, so that edge is the
+   *     only thing that says "you may type here". That is squarely SC 1.4.11's 3:1 minimum.
+   *
+   * They shipped sharing `30 7% 83%`, which measured 1.46:1 on --background/--card — the one
+   * live WCAG failure a full DXS Platform sweep turned up. 53% clears 3:1 with margin on every
+   * surface a control actually sits on, not just the plain page (the gh#299 lesson: a value that
+   * passes on a card and fails inside a filter bar is not a line anyone can defend):
+   * --background/--card/--popover 3.47:1 · --muted/--secondary 3.18:1 · zebra stripe 3.35:1 ·
+   * row hover 3.32:1. It also lifts the Switch's unchecked track from 1.46:1 to 3.47:1 against
+   * both the page and its own white thumb, so "off" is finally a visible state.
+   * Guarded by src/tokens/__tests__/input-boundary-contrast.test.ts. */
+  --input: 30 7% 53%; /* #90877f — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11) */
   --ring: 204 100% 39%;
   --success: 146 40% 58%; /* 若竹 #68be8d */
   --success-foreground: 60 33% 99%;
@@ -161,7 +182,16 @@
    * rule reads it with the live-role fallback `hsl(var(--focus-ring-color, var(--ring)))`, so the
    * default re-resolves at the element that paints the ring while an explicit override still wins. */
   --focus-ring-color: initial; /* default = the live --ring role */
-  --focus-ring-width: 2px;
+  --focus-ring-width: var(--stroke-md);
+  /* Alpha of the ring fill. Exists so a component that needs a SOFTER ring
+   * (a filled toggle, tinted shell chrome) tunes one knob instead of writing
+   * its own `hsl(... / 0.35)` — which is how four incompatible ring shapes
+   * appeared before the single-source rule in styles/focus-ring.css. */
+  --focus-ring-opacity: 1;
+  /* Gap between element and ring, for the OUTLINE form only (a star, a dot, a
+   * heading anchor — marks where a radius-hugging shadow would touch the
+   * glyph). The shadow form ignores it by construction. */
+  --focus-ring-offset: 0px;
   /* Ring headroom for clipped chrome (`overflow-clip-margin` on the topbar family, gh#291).
    * MUST stay a plain length consumed via a bare var(): Chromium rejects any calc() in
    * overflow-clip-margin at parse time (even calc(2 * 2px)), silently dropping the
@@ -308,6 +338,114 @@
   --space-10: calc(2.5rem * var(--scaling));
   --space-12: calc(3rem * var(--scaling));
 
+  /* ── ICON SIZE — the geometric axis that had a vocabulary but no name (gh#326).
+   *
+   * 28 component tokens were declaring raw numbers, and between them they only ever used NINE
+   * values. The scale was already there; nobody had written it down. These nine names ARE that
+   * list — naming an existing vocabulary, not inventing a new one.
+   *
+   * A FIXED LIST, NOT A RATIO. Unlike --font-size-* there is no `base * ratio^n` here, and that
+   * is deliberate: 14/16 = 0.875 but 20/16 = 1.25, so no single ratio generates these steps.
+   * Type can sit between pixels because hinting and antialiasing carry it; a 1px-stroke glyph
+   * cannot — half a pixel of icon is a blurred icon. So every step is a whole pixel at the 16px
+   * root, and a service retunes a STEP rather than a ratio.
+   *
+   * NOT SCALED HERE. --scaling is applied by the tokens that opt IN
+   * (`calc(var(--icon-size-md) * var(--scaling))`, as --control-icon-size does), so the scale
+   * itself stays the crisp whole-pixel list. Density is a per-token decision, not a property of
+   * the vocabulary.
+   *
+   * TIER 1 / TIER 2 — where the boundary sits. These nine steps are tier 1: the value appears in
+   * more than one place, so it earns a name and a service retunes it once. A value that appears
+   * in exactly ONE place (the 6px status dot) is tier 2 and does NOT belong on the scale — set
+   * that component's own `--*-icon-size` / `--*-glyph-size` token at the call site instead
+   * (`style={{ "--menu-icon-size": "6px" }}` or a `[data-…]`-scoped rule in the app theme). An
+   * inline custom property wins by inheritance proximity, so tier 2 needs no `!important`, no
+   * `:root` override and no fork. Every icon rule in src/styles reads its token through `var()`
+   * with no literal fallback, which is what keeps that route open — see docs/TOKENS.md. */
+  --icon-size-2xs: 0.625rem; /* 10px */
+  --icon-size-xs: 0.75rem; /* 12px */
+  --icon-size-sm: 0.875rem; /* 14px */
+  --icon-size-md: 1rem; /* 16px — the default icon step */
+  --icon-size-lg: 1.25rem; /* 20px */
+  --icon-size-xl: 1.5rem; /* 24px */
+  --icon-size-2xl: 2.25rem; /* 36px */
+  --icon-size-3xl: 2.5rem; /* 40px */
+  --icon-size-4xl: 3rem; /* 48px */
+
+  /* ── STROKE — the thickness of a painted LINE (gh#324, the second axis to be named).
+   *
+   * gh#324 measured `width` at 91% raw and called it the worst axis in the system. It is not one
+   * axis. Three unrelated concerns wear the `-width` suffix: the thickness of a drawn line, the
+   * measure of a container (a dialog, a reading column, a sidebar), and the content width of a
+   * field (how wide a locale picker must be to hold its longest label). Only the FIRST is a
+   * vocabulary — see the verdict recorded in `scripts/token-scale-bypass-rules.mjs`.
+   *
+   * The vocabulary was already there and repeats hard: SIX values across ~20 tokens spanning
+   * borders, focus rings, accent rails, selected-state markers and presence strokes. Naming it is
+   * what lets a service retune line weight once — a hi-dpi theme that wants 1.5px hairlines, or a
+   * high-contrast theme that wants every emphasis stroke at 3px — instead of hunting 20 tokens.
+   *
+   * PIXELS, NOT REM, AND DELIBERATELY SO. A stroke is a DEVICE line: its job is to read as one
+   * crisp rule at any type size, so it must not grow when the root font-size does. Every token
+   * that moves onto this scale was already `px` for that reason; a `rem` thickness
+   * (`--slider-track-height: 0.375rem`) is a different decision and stays where it is.
+   *
+   * NOT SCALED. `--scaling` is a DENSITY knob — it tightens the spacing rhythm, and a 1px divider
+   * that became 0.92px under compact density would blur, not tighten. No token on this axis
+   * multiplies by it today and none should.
+   *
+   * `--stroke-hairline` sits BELOW `--stroke-sm` rather than being called `xs`, because 1px is
+   * not really a step: it is the device hairline, the one thickness a service retunes the
+   * EXISTENCE of rather than the value (cardinal rule #44). The scale-bypass guard exempts a bare
+   * `1px` for the same reason. Naming it anyway gives the retune-the-value route to the themes
+   * that want it.
+   *
+   * TIER 2 — a thickness that appears in exactly one place does not belong here. Set that
+   * component's own `--*-border-width` / `--*-ring-width` token at the call site or in the app
+   * theme; every stroke rule in src/styles reads its token through `var()`. */
+  --stroke-hairline: 1px; /* every resting border, divider and rule */
+  --stroke-sm: 1.5px;
+  --stroke-md: 2px; /* the emphasis stroke — focus rings, selected markers */
+  --stroke-lg: 3px;
+  --stroke-xl: 4px;
+  --stroke-2xl: 6px;
+
+  /* ── BAND HEIGHT — the vertical extent of a horizontal band that content is centred in
+   * (gh#324, the third axis to be named).
+   *
+   * Same split as `width`: `height` is TWO concerns wearing one suffix. A control, a table row, a
+   * menu item, a sidebar nav row and the app-shell top bar are all the same decision — how tall
+   * is the band this content sits in — and they share ONE vocabulary of seven values, each of
+   * which is declared by two to five tokens. A chart plot's height, a transfer pane's min-height
+   * and a select popover's max-height are the OTHER concern: container measures, chosen per
+   * surface, with almost no repeated value between them. Those are tier 2 and stay literal.
+   *
+   * gh#324's fourth case is the whole argument: `PageContainer`'s chrome band had no height token
+   * while `AppShell`'s bar did, so nothing could be aligned to it. The two were never conceived
+   * as members of one axis, because the axis had no name.
+   *
+   * WHY THIS IS NOT `--control-height-*`. The control tier is a RUNTIME LADDER: `--control-height`
+   * multiplies by `--scaling`, `-sm`/`-lg`/`-xs` step off it, and `@media (pointer: coarse)` lifts
+   * the whole ladder to the 44px tap floor. This scale is the STATIC vocabulary that the ladder is
+   * anchored on — `--control-height-default: var(--band-height-md)` — exactly as `--font-size-base`
+   * anchors the type scale. Do NOT point a band token at `--control-height-*` to "reuse a step":
+   * that silently enrols it in density AND in the coarse-pointer growth, which is a geometry
+   * change, not a rename. `--table-row-height-default` is `var(--band-height-md)` and NOT
+   * `var(--control-height-default)` for precisely that reason.
+   *
+   * NOT SCALED HERE, for the gh#328 reason: whether a band breathes with density is a per-token
+   * decision made long ago. `--control-height` opts in (`calc(… * var(--scaling))`);
+   * `--app-shell-bar-height` deliberately does not. Baking `--scaling` into the scale would flip
+   * every one of them at once. */
+  --band-height-xs: 1.5rem; /* 24px */
+  --band-height-sm: 1.75rem; /* 28px */
+  --band-height-md: 2rem; /* 32px — the default control/row band */
+  --band-height-lg: 2.25rem; /* 36px */
+  --band-height-xl: 2.75rem; /* 44px — the WCAG 2.2 AA touch floor (rule #24) */
+  --band-height-2xl: 3rem; /* 48px */
+  --band-height-3xl: 3.5rem; /* 56px */
+
   /* Golden ratio scale */
   --ratio-phi: 1.6180339887;
   --phi-unit: var(--space-4);
@@ -338,13 +476,15 @@
   --space-12: 3rem;
   --radius: 0.375rem;
   --control-height: var(--control-height-default);
-  /* baseline tier values (2rem ∓ step) as literals — keeps the control-sizing
-   * guard happy and avoids re-deriving from the (baked) active --control-height. */
-  --control-height-sm: 1.75rem;
-  --control-height-lg: 2.25rem;
-  --control-height-xs: 1.5rem;
-  --control-icon-size: 1rem;
-  --control-icon-size-sm: 0.875rem;
+  /* baseline tier values (2rem ∓ step) read straight off the band scale — keeps the
+   * control-sizing guard happy and avoids re-deriving from the (baked) active
+   * --control-height. Scale steps rather than literals since gh#324, so a service that
+   * retunes --band-height-* retunes the scale-fixed chrome with everything else. */
+  --control-height-sm: var(--band-height-sm);
+  --control-height-lg: var(--band-height-lg);
+  --control-height-xs: var(--band-height-xs);
+  --control-icon-size: var(--icon-size-md);
+  --control-icon-size-sm: var(--icon-size-sm);
   --control-padding-x: var(--space-3);
   --control-gap: var(--space-2);
   --control-gap-sm: var(--space-1);
@@ -388,6 +528,21 @@
   /* One step of the Reveal stagger ladder — `<Reveal delay={n}>` waits n × this before entering,
    * so a column of reveals cascades. Read instead of a literal `.04s`/`.09s` per-item delay. */
   --reveal-stagger-step: 60ms;
+
+  /* AMBIENT/LOOPING motion (gh#313) — the cycle member of the motion tier. `--duration-fast|base|
+   * slow` time a TRANSITION (something moves from A to B and stops); a loop needs an INTERVAL, so
+   * every ambient affordance in the product breathes at one rate. `Activity` reads these; the
+   * remaining Activity knobs (geometry / colour) live in tokens/components/activity.css.
+   * NOTE these two are Activity-scoped but live HERE, beside `--reveal-*`, because the motion tier
+   * is where timing belongs and because component-token names must carry a geometry/colour
+   * property word (`check-token-tiers`) — there is none for a duration. */
+  --duration-loop: 1400ms;
+  /* Per-component override (#45): a service tunes its typing rhythm without moving every loop. */
+  --activity-interval: var(--duration-loop);
+  /* Offset between the three `dots` marks — the loop counterpart to `--reveal-stagger-step`,
+   * named to match. In RTL the dots reverse with the row, so the cascade follows the reading
+   * direction with no extra rule. */
+  --activity-stagger-step: 160ms;
 }
 
 .dark,
@@ -416,7 +571,13 @@
   --destructive: 357 55% 48%;
   --destructive-foreground: 0 0% 100%;
   --border: 45 6% 22%;
-  --input: 45 6% 22%;
+  /* Control boundary (dark) — recomputed on the dark spine, not merely lightened by eye
+   * (gh#315). The dark pair shared `45 6% 22%`, which sat at 1.55:1 on --background and 1.43:1
+   * on the --card/--popover surface where dialogs put their fields. 47% gives
+   * --background 4.22:1 · --card/--popover 3.88:1 · --muted/--secondary 3.17:1 · zebra 3.81:1 ·
+   * hover 3.71:1. --border stays at 22%: dividers are decorative and a dark grid at 47% would
+   * read as a wireframe. See the light block above for the full reasoning. */
+  --input: 45 6% 47%; /* #7f7b71 — control boundary, ≥3:1 (WCAG 2.2 SC 1.4.11) */
   --ring: 204 90% 60%;
   --success: 146 45% 55%;
   --success-foreground: 48 9% 9%;

package/dist/tokens/semantic/layout.css

@@ -18,6 +18,13 @@
   --space-inline-md: var(--space-3); /* 12px */
   --space-inline-lg: var(--space-4); /* 16px */
 
+  /* OVERLAY STACKING — one system-level layer for every portaled surface (rule #44/#45).
+   * Tooltip, Popover, Select, DropdownMenu and Sheet all hard-coded `z-50` independently, so a
+   * host app that mounts @godxjp/ui under its own stacking context (a sticky masthead, a
+   * third-party chat widget) had to fight five separate literals. Stacking is a SYSTEM decision,
+   * not a per-primitive one: a service raises every overlay together by setting this once. */
+  --overlay-z-index: 50;
+
   /* Master-detail geometry. Consumers choose a semantic rail preset; they never author grid tracks. */
   --master-detail-rail-compact: 18.75rem; /* 300px */
   --master-detail-rail-standard: 20rem; /* 320px */
@@ -69,10 +76,62 @@
    * `--page-header-divider: 1px solid hsl(var(--border));` */
   --page-header-divider: none;
 
+  /* PageContainer `toolbar` — the fixed chrome band between the header and the (scrolling) body.
+   * ALL THREE knobs are quiet by default (rule #44):
+   *   background    — `transparent`, i.e. the band shows the page ground exactly as it did before
+   *                   the knob existed. It is bound at `:root` and NOT `initial`, unlike the
+   *                   divider below, because the default is a plain CSS keyword rather than
+   *                   another role token: there is nothing for a scoped [data-tenant]/.dark
+   *                   override to re-resolve, so the `initial` + call-site-fallback dance would
+   *                   buy nothing and only hide the default from anyone reading this file. A
+   *                   service that wants the band to read as its own surface — the design that
+   *                   asked for this knob puts a chat channel's workflow rail on the card ground —
+   *                   sets `--page-toolbar-background: hsl(var(--card));` ONCE in its theme. Never
+   *                   `className="bg-card"` at the call site: that is hand-laid page chrome, it
+   *                   paints only under `variant="flush"` gutters correctly by accident, and it
+   *                   cannot be re-themed per tenant.
+   *   pad-block 0   — the band's ONLY breathing room, and the only one it should ever have. The
+   *                   band is chrome, so it sits FLUSH against the header above and the body
+   *                   below (src/styles/layout.css cancels the container's --page-band-gap from
+   *                   the band itself); there is deliberately no outside space to tune, because a
+   *                   ruled, painted band floating in a void divides nothing. A service that opts
+   *                   into the background or the divider gives the band its inset HERE
+   *                   (`--page-toolbar-pad-block: var(--space-2)`) instead of padding the strip at
+   *                   the call site. Still 0 by default: a transparent band is not a surface and
+   *                   has no inside to breathe, and under `fill` every pixel of it comes straight
+   *                   off the scroll viewport the slot exists to protect.
+   *   divider       — declared `initial` so the CALL SITE can fall back to --page-header-divider
+   *                   (`var(--page-toolbar-divider, var(--page-header-divider))`). One theme
+   *                   declaration therefore rules the whole page chrome consistently, and a
+   *                   scoped [data-tenant]/.dark override of the header divider still reaches the
+   *                   band — a `:root` binding would freeze it at the :root value
+   *                   (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`"). Set
+   *                   `--page-toolbar-divider: none` to silence just this band. */
+  --page-toolbar-background: transparent;
+  --page-toolbar-pad-block: 0px;
+  --page-toolbar-divider: initial;
+
+  /* Top rule of the PageContainer `footer` — the third page chrome band, brought onto the same
+   * contract as the header and the toolbar (its rule used to be a hard literal in layout.css, so
+   * a page could not turn it off at all). Declared `initial` like the toolbar's, so the CALL SITE
+   * resolves it as `var(--page-footer-divider, 1px solid hsl(var(--border)))` and a scoped
+   * [data-tenant]/.dark override still reaches it (docs/TOKENS.md · "Role-mirror knobs MUST be
+   * `initial`").
+   *
+   * It is the ONE chrome knob whose default is a RULE rather than silence, and deliberately so:
+   * `footer` is the shared slot a form's Save/Cancel bar lands in, where the line separating the
+   * actions from the page content is the behaviour every existing page already depends on. The
+   * old literal is the fallback verbatim, so unset is byte-identical. A page whose footer content
+   * already carries its own frame — a chat composer is a bordered Card — silences the duplicate
+   * with `--page-footer-divider: none`. */
+  --page-footer-divider: initial;
+
   /* Bottom inset of the page header, sized so title→body distance (this pad + the
    * --space-section-active container gap) EQUALS the page's top padding — the title
    * band reads vertically balanced (24 above / 24 below by default), instead of the
-   * old fixed 16px pad that left 24 above vs 32 below. */
+   * old fixed 16px pad that left 24 above vs 32 below. A page that passes a `toolbar`
+   * measures title→BAND instead (this pad alone, the gap being cancelled): the band is
+   * chrome attached to the header, not the next section down. */
   --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
 
   /* Inline measure of the header `extra` region while the page header is in `responsive-inline`
@@ -119,6 +178,66 @@
   --page-subtitle-font-size: var(--font-size-base);
   --page-subtitle-font-size-compact: var(--font-size-sm);
 
+  /* PageContainer `headerScale="chrome"` — the title step for a page whose top row IS CHROME
+   * rather than a document title: a chat channel name, a mail subject line, an IDE tab. It is a
+   * SEPARATE knob from the two above on purpose: those are ONE document title at two viewport
+   * sizes (a responsive step), while this is a different KIND of page and holds at every width.
+   * `--heading-h3` (= --font-size-base, 14px) is the body step, which is the point — the row
+   * reads as a label ON the surface, not as the page's headline, and the header band collapses
+   * from the measured 61px to ~40px once it stops carrying a 20px h1. Quiet by default: a page
+   * that never passes `headerScale` never reads this token (rule #44). */
+  --page-title-font-size-chrome: var(--heading-h3);
+
+  /* The SUBTITLE step of the same fact. Measured against the reference chat screen, the chrome
+   * title and the chrome subtitle were rendering at the SAME step (both --font-size-base), which
+   * is not a hierarchy — a channel name and the channel's purpose line read as one undifferentiated
+   * block. The design puts the purpose line two steps down (`Text size="2xs"`), and the size is
+   * what carries the LINE BOX: at 14px/1.7 the subtitle line is 23.8px tall, at 11px/1.7 it is
+   * 18.9px, so the whole header band loses ~5px it was spending on a caption. `--font-size-2xs`
+   * (ratio⁻², ≈11px) is that step, and it is the same golden scale the title step reads — never a
+   * literal. Quiet by default: a page that never passes `headerScale` never resolves it (#44). */
+  --page-subtitle-font-size-chrome: var(--font-size-2xs);
+
+  /* The page's TOP inset under `headerScale="chrome"`, the second half of the same fact: chrome
+   * sits on the frame's edge. A document page opens with --space-page-active-y (24px, 16px below
+   * the 720px step) because a title needs air above it; a chat channel head, a mail subject bar or
+   * an IDE tab strip is the frame itself, and 24px of margin above it reads as a page floating
+   * inside its own shell — measured on a consumer chat screen as 24px lost off the top of the
+   * transcript viewport, against a design whose channel head starts at y=0. 0 is therefore the
+   * quiet default (rule #44), and it is a knob rather than a literal so a service whose grid wants
+   * its chrome inset (`--page-pad-block-start-chrome: var(--space-2)`) retunes it once instead of
+   * forking the page shell. Read ONLY when the prop is passed, so no document page resolves it. */
+  --page-pad-block-start-chrome: 0px;
+
+  /* The BAND HEIGHT of the same fact (gh#331). A document header is content-height by definition —
+   * a title is as tall as the title is. A chrome band is the opposite: it is furniture, and
+   * furniture has a height that things centre INTO. `AppShell` has had `--app-shell-bar-height`
+   * for exactly that since it shipped; `PageContainer` had no equivalent, so a `headerScale="chrome"`
+   * band's vertical centre drifted with its own copy — measured in Chromium on
+   * /isolate/layout-page-container, 42.02px with an `extra` control and 40.38px without, i.e. the
+   * centre moves 0.8px for a change of content and there is no value a service can aim at.
+   *
+   * WHO OWNS THE BAND-HEIGHT AXIS (the question gh#331 defers to gh#330). `--app-shell-bar-height`
+   * does: it is the system's one declared chrome-band height, and `--centered-shell-bar-height`
+   * already reads it. A service that wants its page chrome to sit on the shell bar's band writes
+   * ONE line — `--page-header-min-block-size-chrome: var(--app-shell-bar-height)` — and the two
+   * bands are on one axis for good.
+   *
+   * It is NOT that value by DEFAULT, and the reason is not timidity: a `PageContainer` with a
+   * chrome header is not necessarily inside an `AppShell` (the canonical chat composition renders
+   * one inside a bordered region, a SplitPane pane, a Card), and a band that is not trying to line
+   * up with a bar has no business inheriting that bar's height. `auto` is the quiet state (rule
+   * #44): no floor, content-height, byte-identical to every page rendered before this token
+   * existed — document AND chrome.
+   *
+   * A MIN, never a fixed height: a taller `extra` (an `lg` control, a wrapped JA/VI channel name)
+   * must still fit rather than overflow its own band. The header centres its content in whatever
+   * band it ends up with — see `justify-content` in styles/layout.css — so raising this knob
+   * centres, it does not top-pack. The header's own `--page-header-pad-bottom` lives INSIDE the
+   * band (border-box); under the canonical chrome composition (`variant="ghost"`) that pad is 0
+   * and the centring is exact. */
+  --page-header-min-block-size-chrome: auto;
+
   /* Section "chrome" padding — the SHARED inset for header / body / footer of every overlay-ish
    * surface (Dialog · Sheet · Drawer · Card). One global knob: a service sets these once instead of
    * per-component. Vertical is tightened (16 vs the old 24) and density-aware (see density.css);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.15.3",
-  "godxUiMcp": "18.15.3",
+  "version": "19.0.0",
+  "godxUiMcp": "19.0.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -299,8 +299,9 @@
     }
   },
   "scripts": {
-    "typecheck": "tsc --noEmit -p tsconfig.json",
-    "typecheck:docs": "tsc --noEmit -p tsconfig.docs.json",
+    "typecheck": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.json",
+    "typecheck:ts6": "tsc --noEmit -p tsconfig.json",
+    "typecheck:docs": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.docs.json",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --check .",
@@ -318,6 +319,7 @@
     "check:frame-coverage-ledger": "node scripts/gen-frame-coverage-ledger.mjs --check && node scripts/check-frame-coverage-ledger.mjs",
     "check:screen-reader-evidence": "node scripts/check-screen-reader-evidence.mjs",
     "check:voiceover-capture": "node scripts/check-voiceover-capture.mjs",
+    "capture:voiceover": "node scripts/capture-voiceover-evidence.mjs",
     "check:data-entry-frame-runtime": "node scripts/check-data-entry-frame-runtime.mjs",
     "check:data-entry-owner-source": "node scripts/check-data-entry-owner-source.mjs",
     "check:data-entry-touch-aria": "node scripts/check-data-entry-touch-aria.mjs",
@@ -331,9 +333,13 @@
     "check:final-touch-rtl": "node scripts/check-final-touch-rtl.mjs",
     "check:frame-runtime": "pnpm check:data-entry-frame-runtime && pnpm check:data-entry-touch-aria && pnpm check:layout-nav-frames && pnpm check:provider-feedback-query-runtime && pnpm check:layout-nav-closure && pnpm check:final-touch-rtl && pnpm check:data-table-pagination-wrap && pnpm check:button-icon-xs",
     "pretest": "pnpm check:frame-coverage",
-    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
-    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
+    "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",
+    "verify:ci": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
+    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync",
+    "verify:browser": "pnpm check:contrast && pnpm check:visual-audit",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage && pnpm check:frame-axe",
+    "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve && pnpm check:mcp-lockstep",
     "check:mcp-lockstep": "node scripts/check-release-lockstep.mjs",
     "check:release-plan": "node scripts/check-release-command-plan.mjs",
     "check:packed-public-contract": "node scripts/check-packed-public-contract.mjs",
@@ -342,11 +348,18 @@
     "check:mcp-catalog-coverage": "node scripts/check-mcp-catalog-coverage.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
+    "check:doc-prop-existence": "node scripts/check-doc-prop-existence.mjs",
     "gen:component-api-manifest": "node scripts/gen-component-api-manifest.mjs",
     "check:component-api-manifest": "node scripts/gen-component-api-manifest.mjs --check",
     "audit:component-cases": "node scripts/check-component-case-evidence.mjs",
     "check:prop-vocabulary": "node scripts/check-prop-vocabulary.mjs",
     "check:token-tiers": "node scripts/check-token-tiers.mjs",
+    "check:token-scale-bypass": "node scripts/check-token-scale-bypass.mjs",
+    "check:dist-tokens-resolve": "node scripts/check-dist-tokens-resolve.mjs",
+    "check:no-hardcoded-geometry": "node scripts/check-no-hardcoded-geometry.mjs",
+    "check:no-hardcoded-css-values": "node scripts/check-no-hardcoded-css-values.mjs",
+    "check:no-inline-magic-numbers": "node scripts/check-no-inline-magic-numbers.mjs",
+    "check:no-tailwind-class-assertions": "node scripts/check-no-tailwind-class-assertions.mjs",
     "check:control-sizing": "node scripts/check-control-sizing.mjs",
     "check:rtl": "node scripts/check-rtl.mjs",
     "check:typography": "node scripts/check-typography.mjs",
@@ -358,7 +371,9 @@
     "check:no-consumer-coupling": "node scripts/check-no-consumer-coupling.mjs",
     "release": "node scripts/release.mjs",
     "preview": "node preview/scripts/kill-port.mjs && vite --config preview/vite.config.ts --port 6008 --strictPort",
-    "preview:build": "vite build --config preview/vite.config.ts",
+    "preview:build": "vite build --config preview/vite.config.ts && node scripts/gen-registry.mjs",
+    "gen:registry": "node scripts/gen-registry.mjs",
+    "check:registry": "node scripts/gen-registry.mjs --check",
     "docs:sync-primitives": "node preview/scripts/sync-primitive-docs.mjs && prettier --write \"docs/primitives/**/*.tsx\"",
     "audit": "node scripts/ui-audit.mjs",
     "audit:examples": "node scripts/ui-audit.mjs docs",
@@ -405,89 +420,90 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@fontsource/m-plus-2": "^5.2.9",
-    "@fontsource/noto-sans-jp": "^5.2.9",
-    "@radix-ui/react-accordion": "^1.2.16",
-    "@radix-ui/react-alert-dialog": "^1.1.19",
-    "@radix-ui/react-aspect-ratio": "^1.1.11",
-    "@radix-ui/react-avatar": "^1.2.2",
-    "@radix-ui/react-checkbox": "^1.3.7",
-    "@radix-ui/react-collapsible": "^1.1.16",
-    "@radix-ui/react-context": "^1.2.0",
-    "@radix-ui/react-context-menu": "^2.3.3",
-    "@radix-ui/react-dialog": "^1.1.19",
-    "@radix-ui/react-dropdown-menu": "^2.1.20",
-    "@radix-ui/react-hover-card": "^1.1.19",
-    "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-menubar": "^1.1.20",
-    "@radix-ui/react-navigation-menu": "^1.2.18",
-    "@radix-ui/react-popover": "^1.1.19",
-    "@radix-ui/react-radio-group": "^1.4.3",
-    "@radix-ui/react-scroll-area": "^1.2.14",
-    "@radix-ui/react-select": "^2.3.3",
-    "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slider": "^1.4.3",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.3",
-    "@radix-ui/react-tabs": "^1.1.17",
-    "@radix-ui/react-toggle": "^1.1.14",
-    "@radix-ui/react-toggle-group": "^1.1.15",
-    "@radix-ui/react-tooltip": "^1.2.12",
-    "@tanstack/react-table": "^8.21.3",
+    "@fontsource/m-plus-2": "^5.3.0",
+    "@fontsource/noto-sans-jp": "^5.3.0",
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-aspect-ratio": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context": "^1.2.2",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-menubar": "^1.1.24",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tanstack/react-table": "^9.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
-    "input-otp": "^1.4.2",
-    "lucide-react": "^1.25.0",
+    "input-otp": "^1.5.0",
+    "lucide-react": "^1.37.0",
     "qrcode.react": "4.2.0",
     "react-day-picker": "^10.0.1",
-    "react-resizable-panels": "^4.12.2",
-    "sonner": "^2.0.7",
+    "react-resizable-panels": "^4.12.3",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.5.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.12.1",
-    "@eslint/js": "^9.39.4",
-    "@hookform/resolvers": "^5.4.0",
+    "@axe-core/playwright": "^4.13.0",
+    "@eslint/js": "^10.0.1",
+    "@hookform/resolvers": "^5.9.1",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-query": "^5.101.2",
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^22.19.19",
+    "@tanstack/react-query": "^5.102.8",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.6",
+    "@types/node": "^26.4.0",
     "@types/pngjs": "^6.0.5",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
-    "@vitest/coverage-v8": "^4.1.10",
-    "axe-core": "^4.12.1",
-    "eslint": "^9.39.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.5",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^4.1.11",
+    "axe-core": "^4.13.0",
+    "eslint": "^10.9.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "globals": "^15.15.0",
-    "jsdom": "^29.1.1",
+    "globals": "^17.11.0",
+    "jsdom": "^30.0.1",
     "jsqr": "^1.4.0",
-    "playwright": "^1.61.1",
+    "playwright": "^1.62.1",
     "pngjs": "^7.0.0",
-    "prettier": "^3.9.5",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "react-hook-form": "^7.81.0",
-    "react-router-dom": "^7.18.1",
-    "recharts": "^3.9.2",
+    "prettier": "^3.9.6",
+    "prettier-plugin-tailwindcss": "^0.8.1",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-hook-form": "^7.86.0",
+    "react-router-dom": "^7.18.3",
+    "recharts": "^3.10.1",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.64.0",
-    "vite": "^8.1.5",
-    "vitest": "^4.1.10",
+    "typescript-7": "npm:typescript@7.0.2",
+    "typescript-eslint": "^8.68.0",
+    "vite": "^8.2.2",
+    "vitest": "^4.1.11",
     "vitest-axe": "1.0.0-pre.5",
-    "zod": "^4.4.3"
+    "zod": "^4.5.4"
   },
   "bin": {
     "godxjp-ui": "scripts/cli.mjs"