@godxjp/ui 16.3.0 → 16.5.0

package/dist/styles/navigation-layout.css

@@ -8,7 +8,7 @@
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
     padding: var(--space-1);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
   .ui-context-menu-item,
@@ -55,8 +55,8 @@
   .ui-menubar-sub-trigger:hover,
   .ui-navigation-menu-link:hover,
   .ui-navigation-menu-item:hover {
-    background: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
+    background: var(--menubar-item-hover-background);
+    color: var(--menubar-item-hover-foreground);
   }
 
   .ui-context-menu-item[data-state="open"],
@@ -68,8 +68,8 @@
   .ui-menubar-sub-trigger[data-state="open"],
   .ui-navigation-menu-link[data-highlighted],
   .ui-navigation-menu-item[data-focus-visible] {
-    background: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
+    background: var(--menubar-item-hover-background);
+    color: var(--menubar-item-hover-foreground);
   }
 
   .ui-context-menu-item[data-variant="destructive"],
@@ -146,7 +146,7 @@
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
     padding: var(--space-1);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
   .ui-context-menu-sub-trigger-icon,
@@ -179,13 +179,13 @@
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
     padding: var(--space-1);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
   .ui-menubar-trigger[data-state="open"],
   .ui-menubar-sub-trigger[data-state="open"] {
-    background: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
+    background: var(--menubar-item-hover-background);
+    color: var(--menubar-item-hover-foreground);
   }
 
   .ui-navigation-menu {
@@ -233,7 +233,7 @@
     background: hsl(var(--popover));
     color: hsl(var(--popover-foreground));
     padding: var(--space-1);
-    box-shadow: var(--shadow-md);
+    box-shadow: var(--shadow-md), var(--shadow-glow);
   }
 
   .ui-navigation-menu-link {

package/dist/styles/shell-layout.css

@@ -30,6 +30,8 @@
     overflow: hidden;
     border-inline-end: 1px solid hsl(var(--border));
     background: hsl(var(--card));
+    /* Opt-in brand-chrome wash — invisible by default (--sidebar-gradient: none). */
+    background-image: var(--sidebar-gradient);
     color: hsl(var(--foreground));
   }
 
@@ -45,6 +47,8 @@
     padding-inline: var(--space-4);
     border-bottom: 1px solid hsl(var(--border));
     background: hsl(var(--background) / 0.92);
+    /* Opt-in brand-chrome wash — invisible by default (--topbar-gradient: none). */
+    background-image: var(--topbar-gradient);
     backdrop-filter: blur(12px);
   }
 
@@ -52,6 +56,9 @@
     grid-area: main;
     min-width: 0;
     overflow: auto;
+    /* Ambient brand glow hook — invisible by default (--gradient-glow: none); a service paints a
+     * radial/linear brand wash behind the whole content area by configuring the token alone. */
+    background-image: var(--gradient-glow);
     /* Sole scroll/clip boundary for the page area. `overflow:auto` alone does NOT reliably
      * establish a paint-containment boundary in Chrome: tall nested scrollers (a two-pane
      * `grid` of long lists, a nested `overflow-y:auto` region) — or any absolutely-positioned
@@ -254,13 +261,17 @@
     text-align: start;
   }
 
-  .sb-nav-item:hover,
-  .sb-nav-item[data-active="true"] {
+  .sb-nav-item:hover {
     background: hsl(var(--accent));
     color: hsl(var(--foreground));
   }
 
+  /* Active item reads its own bg/fg tokens (defaults = the hover look) so a service can give the
+   * selected nav row a brand treatment — e.g. a gold tint + gold text on a navy sidebar — without
+   * forking CSS. Defaults are byte-identical to the hover state. */
   .sb-nav-item[data-active="true"] {
+    background: var(--sidebar-item-active-background);
+    color: var(--sidebar-item-active-foreground);
     font-weight: var(--font-weight-medium);
   }
 
@@ -351,12 +362,12 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: hsl(var(--primary));
+    color: var(--sidebar-item-active-color);
     font-weight: 500;
   }
 
   .sb-nav-item--sub[data-active="true"]::before {
-    background: hsl(var(--primary));
+    background: var(--sidebar-item-active-tint);
     opacity: 1;
   }
 
@@ -406,7 +417,7 @@
   }
 
   .sb-user:focus-visible {
-    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring) / 0.45);
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color) / 0.45);
   }
 
   .sb-user-avatar {
@@ -649,7 +660,7 @@
   }
 
   .tb-icon-btn:focus-visible {
-    box-shadow: 0 0 0 var(--control-focus-ring-width) hsl(var(--ring) / 0.45);
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color) / 0.45);
   }
 
   .tb-bell {

package/dist/styles/table-layout.css

@@ -8,10 +8,10 @@
     padding: var(--table-cell-padding-y) var(--table-cell-space-x);
     text-align: start;
     vertical-align: middle;
-    background: hsl(var(--secondary));
+    background: var(--table-header-background);
     font-size: var(--table-head-font-size);
     font-weight: var(--font-weight-medium);
-    color: hsl(var(--muted-foreground));
+    color: var(--table-header-foreground);
     white-space: nowrap;
   }
 
@@ -97,7 +97,7 @@
   /* Zebra striping (opt-in via the `striped` prop). Selected rows keep their
    * own emphasis, so they are excluded from the stripe. */
   .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
-    background-color: hsl(var(--muted) / 0.4);
+    background-color: var(--table-row-striped-background);
   }
 
   /* Empty-state cell hosts the built-in EmptyState (which brings its own padding). */
@@ -195,10 +195,10 @@
   /* Mirror the row's hover / selected tint — a translucent muted wash layered
    * over the opaque base, so the pinned cell matches the rest of its row. */
   .ui-data-table-surface tbody tr:hover > .ui-data-table-pin-end {
-    background-image: linear-gradient(hsl(var(--muted) / 0.5), hsl(var(--muted) / 0.5));
+    background-image: linear-gradient(var(--table-row-hover-background), var(--table-row-hover-background));
   }
 
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
-    background-image: linear-gradient(hsl(var(--muted) / 0.3), hsl(var(--muted) / 0.3));
+    background-image: linear-gradient(var(--table-row-selected-background), var(--table-row-selected-background));
   }
 }

package/dist/tokens/foundation.css

@@ -37,6 +37,13 @@
   --text-disabled: 40 6% 68%; /* disabled control text */
   --text-link: 204 100% 39%; /* inline link — defaults to brand blue */
   --text-brand: 204 100% 39%; /* brand-colored text / numerals */
+  /* Status TEXT colours — darker than the fill roles so small coloured text (a StatCard delta, an
+   * outline status badge label) clears WCAG AA 4.5:1 on white. The fill roles (--success/--warning/
+   * --info) stay the brighter wa-iro for badges/bars; only TEXT reads these via text-*-strong. */
+  --text-success: 152 84% 22%; /* deep 若竹 — AA green text on white */
+  --text-warning: 36 100% 28%; /* dark 山吹 amber — yellow can never pass as text */
+  --text-info: 221 70% 38%; /* deep 群青 — AA blue text on white */
+  --text-error: 357 75% 38%; /* deep 茜 — AA red text on white */
 
   /* Interaction ramp — hover / active steps (services override to their own brand ramp). */
   --primary-hover: 204 100% 33%;
@@ -93,18 +100,51 @@
     0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 8px 10px -6px rgb(var(--shadow-color) / 0.1);
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
 
+  /* Brand GLOW — an opt-in coloured halo for the primary CTA (and any surface that opts in).
+   * Quiet by default (cardinal rule #44): a zero-size transparent shadow, which is invalid as a
+   * bare `none` inside a comma shadow list but valid as `0 0 0 0 transparent`. A service turns it
+   * on by overriding the whole value once, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)`
+   * — the CTA then carries a brand glow with no component change. */
+  --shadow-glow: 0 0 0 0 transparent;
+
+  /* FOCUS RING — the two global knobs for the keyboard-focus affordance (WCAG 2.4.7 / 2.4.11).
+   * `--focus-ring-color` is the themeable hue (HSL components, defaults to --ring) and
+   * `--focus-ring-width` the standard thickness; override either ONCE — even scoped under a
+   * `[data-tenant]` — to retint or resize EVERY focus ring. Both are leaf tokens (a colour and a
+   * length, no nested var) so they re-resolve at the element that paints the ring; every
+   * :focus-visible rule reads them DIRECTLY as `0 0 0 var(--focus-ring-width)
+   * hsl(var(--focus-ring-color))`, never via an intermediate composite (a `:root`-declared
+   * composite that wraps these would freeze at :root and ignore a scoped override). */
+  --focus-ring-color: var(--ring);
+  --focus-ring-width: 2px;
+
+  /* GRADIENTS — opt-in decorative fills exposed at the token layer so a service can paint a hero
+   * banner, a brand wash, or a radial brand glow purely by configuring tokens (cardinal rule #45).
+   * All default to a transparent no-op so nothing renders until a theme opts in; a surface that
+   * supports a gradient reads one of these as its background-image. Examples a service might set:
+   *   --gradient-brand: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent)));
+   *   --gradient-hero:  linear-gradient(180deg, hsl(var(--secondary)), hsl(var(--background)));
+   *   --gradient-glow:  radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent); */
+  --gradient-brand: none;
+  --gradient-hero: none;
+  --gradient-glow: none;
+
   /* Sans stack — script-aware per the international convention for mixed
    * Latin/CJK UI: native Latin system fonts FIRST (clean, familiar English &
-   * Vietnamese on every OS), then the bundled "M PLUS 2" + Hiragino / Noto Sans JP
-   * as the CJK fallback. Browsers resolve fonts per-glyph, so Latin renders in the
-   * system sans while 日本語 falls through to M PLUS 2 (still shipped, so JP is
-   * consistent across machines). Listing M PLUS 2 first — its Latin glyphs are
-   * tuned to harmonise with kana, not for standalone English — made English read
-   * oddly; Latin-first fixes that without losing the bundled JP face. */
+   * DEFAULT face is the bundled "Noto Sans JP" (Japanese + clean Latin), with system sans as
+   * the network/loading fallback. The Vietnamese locale swaps this token to Montserrat via
+   * `:root:lang(vi)` in styles/index.css (set by AppProvider's <html lang>). Browsers resolve
+   * fonts per-glyph, so 日本語 and Latin both render in Noto Sans JP when it's loaded. */
   --font-family-sans:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
-    system-ui, "M PLUS 2", "Hiragino Sans", "Noto Sans JP", "Be Vietnam Pro", sans-serif;
+    "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    system-ui, "Hiragino Sans", sans-serif;
   --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  /* Dual-font split (opt-in) — many brand designs pair a DISPLAY face for headings with a separate
+   * BODY face (e.g. Source Sans 3 display + Inter body). Both default to --font-family-sans, so a
+   * single-font system is unchanged; a service overrides one or both. Headings read
+   * --font-family-display, body reads --font-family-body (wired in styles/index.css @layer base). */
+  --font-family-display: var(--font-family-sans);
+  --font-family-body: var(--font-family-sans);
   /* ── Type scale — GOLDEN-RATIO modular scale (Ant/Tailwind model). ONE base + ONE ratio; every
    * step is base × ratioⁿ, so the whole scale stays in golden proportion. `--font-size-ratio` is
    * φ^¼ (the golden ratio's quarter-step ≈ 1.1227) — a TRUE golden ratio yet dense enough that
@@ -124,6 +164,19 @@
   --font-size-xl: calc(var(--font-size-lg) * var(--font-size-ratio)); /* ratio³ ≈ 19.8px */
   --font-size-2xl: calc(var(--font-size-xl) * var(--font-size-ratio)); /* ratio⁴ ≈ 22.3px */
 
+  /* DISPLAY type — OPT-IN large sizes for MARKETING / hero surfaces (landing pages, CTA banners).
+   * The enterprise heading scale stays small by design (h1 = 20px, 渋み restraint); these are a
+   * SEPARATE bolder ramp a marketing surface opts into via the text-3xl/-4xl/-5xl utilities (wired
+   * in styles/index.css @theme). A service rescales the whole display ramp from --font-size-display
+   * (its own base). Nothing in the admin system uses them, so defaults are unchanged. */
+  --font-size-display: 3.375rem; /* 54px — hero display (the single display knob) */
+  --font-size-display-ratio: 1.28; /* bolder step than the body φ^¼ — marketing wants more contrast */
+  --font-size-3xl: calc(
+    var(--font-size-display) / var(--font-size-display-ratio) / var(--font-size-display-ratio)
+  ); /* ≈ 33 → 28px feature heading */
+  --font-size-4xl: calc(var(--font-size-display) / var(--font-size-display-ratio)); /* ≈ 36px section */
+  --font-size-5xl: var(--font-size-display); /* 54px hero */
+
   /* Headings — also golden-derived. h1=ratio³, h2=ratio²; h3/h4 reuse body sizes (single source). */
   --heading-h1: calc(
     var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) * var(--font-size-ratio)
@@ -141,6 +194,10 @@
    * so any remaining reference renders at 500. `bold` is the 700 emphasis weight. */
   --font-weight-semibold: 500;
   --font-weight-bold: 700;
+  /* Display/black weight — OPT-IN for marketing display type (hero/CTA). The enterprise system caps
+   * at 700 (簡素 restraint); this is only reached via the .font-display-weight utility / a service
+   * setting it on a display surface, so admin text is unchanged. */
+  --font-weight-black: 800;
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-body: 1.7;
@@ -287,6 +344,11 @@
   --text-disabled: 45 6% 40%;
   --text-link: 204 90% 66%;
   --text-brand: 204 90% 66%;
+  /* Status text on the dark spine reads LIGHT (AA on dark surfaces). */
+  --text-success: 146 55% 64%;
+  --text-warning: 44 95% 62%;
+  --text-info: 221 70% 72%;
+  --text-error: 357 75% 68%;
   --primary-hover: 204 90% 66%;
   --primary-active: 204 90% 72%;
   --secondary-hover: 45 6% 22%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.3.0",
+  "version": "16.5.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,
@@ -275,7 +275,7 @@
     "test:coverage": "vitest run --coverage",
     "check:example-imports": "node scripts/check-example-imports.mjs",
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && 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:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm test",
-    "verify:release": "pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && 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:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm test",
+    "verify:release": "pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && 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:mcp-sync && pnpm check:mcp-orphans && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm test",
     "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
     "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
     "check:mcp-prop-sync": "node scripts/check-mcp-prop-sync.mjs",
@@ -297,23 +297,24 @@
     "dev": "node scripts/dev.mjs",
     "prepublishOnly": "pnpm run build",
     "check:audit-sync": "node scripts/check-audit-sync.mjs",
+    "check:contrast": "node scripts/check-contrast.mjs",
     "visual-audit": "node scripts/visual-audit.mjs",
     "postinstall": "node scripts/postinstall.mjs",
     "init-agent": "node scripts/init-agent-kit.mjs"
   },
   "peerDependencies": {
+    "@axe-core/playwright": "*",
     "@hookform/resolvers": "^5.2.0",
     "@tanstack/react-query": ">=5.0.0",
+    "axe-core": "*",
+    "playwright": "*",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-hook-form": "^7.76.0",
     "react-router-dom": ">=7.0.0",
     "recharts": "^2.13.0 || ^3.0.0",
     "tailwindcss": ">=4.0.0",
-    "zod": "^4.4.0",
-    "playwright": "*",
-    "@axe-core/playwright": "*",
-    "axe-core": "*"
+    "zod": "^4.4.0"
   },
   "peerDependenciesMeta": {
     "recharts": {
@@ -331,8 +332,8 @@
   },
   "dependencies": {
     "@date-fns/tz": "^1.5.0",
-    "@tanstack/react-table": "^8.21.3",
-    "@fontsource/m-plus-2": "^5.2.9",
+    "@fontsource/montserrat": "^5.2.8",
+    "@fontsource/noto-sans-jp": "^5.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -359,6 +360,7 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/dist/tokens/components/badge.css

@@ -1,10 +0,0 @@
-/* Badge component tokens. */
-
-:root {
-  --badge-space-gap: var(--space-inline-xs);
-  --badge-space-x: var(--space-2);
-  --badge-space-y: var(--space-1);
-  /* Small-by-design (badge/pill/counter). A knob (rule #45) so a service can
-   * re-tune badge text without touching the global --font-size-xs step. */
-  --badge-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/card.css

@@ -1,51 +0,0 @@
-/* Card component tokens: card chrome derives from semantic layout tokens. */
-
-:root {
-  /* Horizontal inset of every slot (header / content / footer) + the resting top/bottom
-   * shell padding. This is the column the title, body and footer all align to. */
-  --card-space-inset: var(--space-section-active);
-  /* Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y. */
-  --card-space-header-y: var(--space-stack-sm);
-  /* Gap between the header and the body, and the body's own top padding — the breathing
-   * room under a title before content begins. */
-  --card-space-body-y: var(--space-section-active);
-  /* Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y. */
-  --card-space-footer-y: var(--space-stack-sm);
-  /* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider
-   * border (banded header, separated footer) reads as its own band, so it pads SYMMETRICALLY
-   * top+bottom — distinct from a plain header that flows into the body (top inset, no bottom).
-   * One themeable knob keeps the header- and footer-band rhythm in sync; a service theme tunes
-   * the band density here instead of forking per-slot CSS. */
-  --card-space-divided-y: var(--card-space-header-y);
-  /* Vertical gap between stacked items WITHIN a slot (e.g. title ↕ description in the header). */
-  --card-space-gap: var(--space-stack-xs);
-  --card-title-font-size: var(--font-size-base);
-  --card-title-line-height: var(--line-height-tight);
-  --card-title-font-weight: var(--font-weight-semibold);
-  --card-description-font-size: var(--font-size-sm);
-  --card-description-line-height: var(--line-height-normal);
-  --card-background: var(--card);
-  --card-border: var(--border);
-  --card-header-background: var(--muted);
-  --card-header-background-alpha: 0.55;
-  /* Banded-header divider — tokenised (rule #44) so a service theme can make it
-   * dashed / heavier / none without forking CSS. Pair with
-   * --card-header-background-alpha: 0 for a quiet borderless-band header. */
-  --card-header-border-bottom: 1px solid hsl(var(--card-border));
-  --card-radius: var(--radius);
-  /* Accent edge — width of the semantic leading-edge stripe (data-accent).
-   * Tokenised (rule #44) so a service theme can re-tune it without forking CSS.
-   * The slot padding compensation in card-layout.css subtracts the same token,
-   * so content stays aligned on the shell whatever the rail width. */
-  --card-accent-rail-width: 6px;
-  --stat-card-label-font-size: var(--font-size-xs);
-  --stat-card-label-font-weight: var(--font-weight-medium);
-  --stat-card-label-letter-spacing: 0.04em;
-  --stat-card-value-font-size: var(--font-size-2xl);
-  --stat-card-value-line-height: 1.1;
-  --stat-card-value-font-weight: var(--font-weight-semibold);
-  --stat-card-hint-font-size: var(--font-size-xs);
-  --stat-card-gap: var(--space-stack-xs);
-  --stat-card-icon-size: 2.25rem;
-  --stat-card-delta-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/control.css

@@ -1,82 +0,0 @@
-/* Control primitive tokens: heights, horizontal padding, adjacent control sizes. */
-
-:root {
-  --control-height-compact: 1.75rem;
-  --control-height-default: 2rem;
-  --control-height-comfortable: 2.75rem;
-  --control-padding-x-compact: var(--space-2);
-  --control-padding-x-default: var(--space-3);
-  --control-padding-x-comfortable: var(--space-4);
-
-  --control-height: calc(var(--control-height-default) * var(--scaling));
-  /* Adjacent control sizes, derived from the active --control-height. The ±step
-   * is scaled too so the whole control ladder stays proportional under --scaling. */
-  --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
-  --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
-  --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
-  --control-padding-x: var(--control-padding-x-default);
-  --control-gap: var(--space-inline-sm);
-  --control-gap-sm: var(--space-inline-xs);
-  --control-radius: var(--radius);
-  --control-icon-size: calc(1rem * var(--scaling));
-  --control-icon-size-sm: calc(0.875rem * var(--scaling));
-  --control-focus-ring-width: 2px;
-
-  --checkbox-size: calc(1rem * var(--scaling));
-  --checkbox-size-compact: 0.875rem;
-  --checkbox-size-comfortable: 1.125rem;
-  --choice-gap: var(--space-inline-sm);
-  --choice-group-gap-x: var(--space-6);
-  --choice-group-gap-y: var(--space-3);
-  --choice-description-gap: 0.125rem;
-  --choice-control-offset: 0.125rem;
-
-  --switch-width: calc(2.25rem * var(--scaling));
-  --switch-width-compact: 2rem;
-  --switch-width-comfortable: 2.5rem;
-  --switch-height: calc(1.25rem * var(--scaling));
-  --switch-height-compact: 1.125rem;
-  --switch-height-comfortable: 1.375rem;
-  --switch-thumb-size: calc(1rem * var(--scaling));
-  --switch-thumb-size-compact: 0.875rem;
-  --switch-thumb-size-comfortable: 1.125rem;
-  --switch-thumb-translate: calc(1rem * var(--scaling));
-  --switch-thumb-translate-compact: 0.875rem;
-  --switch-thumb-translate-comfortable: 1.125rem;
-
-  --slider-track-height: 0.375rem;
-  --slider-thumb-size: 1rem;
-
-  --color-picker-input-width: 6.5rem;
-
-  --command-list-max-height: min(300px, 50vh);
-  --command-input-padding-x: var(--space-3);
-  --command-group-padding: var(--space-1);
-  --command-item-padding-y: var(--space-2);
-  --command-item-padding-x: var(--space-2);
-  --search-input-edge-inset: var(--space-3);
-  --search-input-start-padding: calc(
-    var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
-  );
-  --search-input-end-padding: calc(
-    var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
-  );
-
-  --choice-description-font-size: var(--font-size-xs);
-  --color-picker-hex-font-size: var(--font-size-xs);
-  --command-group-heading-font-size: var(--font-size-xs);
-  --search-input-label-font-size: var(--font-size-xs);
-  --tag-input-chip-font-size: var(--font-size-xs);
-  --toggle-sm-font-size: var(--font-size-xs);
-  --button-sm-font-size: var(--font-size-xs);
-}
-
-/* Rule #24 — on touch devices (coarse pointer) interactive controls keep a ≥44px tap target
- * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height
- * resolves through these via var(), so inputs/buttons/selects/table rows all bump together. */
-@media (pointer: coarse) {
-  :root {
-    --control-height-compact: 2.75rem;
-    --control-height-default: 2.75rem;
-  }
-}

package/dist/tokens/components/data-display.css

@@ -1,8 +0,0 @@
-/* Data-display component tokens — small-by-design text knobs (rule #45/#46). */
-
-:root {
-  --progress-label-font-size: var(--font-size-xs);
-  --tree-item-title-font-size: var(--font-size-xs);
-  --tree-item-description-font-size: var(--font-size-xs);
-  --timeline-note-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/data-entry.css

@@ -1,6 +0,0 @@
-/* Data-entry component tokens — small-by-design text knobs (rule #45/#46). */
-
-:root {
-  --password-strength-score-font-size: var(--font-size-xs);
-  --password-strength-checklist-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/descriptions.css

@@ -1,9 +0,0 @@
-/* Descriptions component tokens. */
-
-:root {
-  /* Width of the label column when <Descriptions layout="horizontal">. Labels align to this
-   * shared column so the values line up (the horizontal-detail look, mirroring <Form layout>).
-   * A rem value gives a fixed aligned column; set `max-content` to size each label to its text.
-   * (rule #44/#45 — a service theme tunes it here instead of forking CSS.) */
-  --descriptions-label-width: 8rem;
-}

package/dist/tokens/components/feedback.css

@@ -1,25 +0,0 @@
-/* Feedback primitive tokens: dialog, alert, empty state. */
-
-:root {
-  /* Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the
-   * whole system, or --dialog-space-x/-y for dialogs only). */
-  --dialog-space-x: var(--space-chrome-x);
-  --dialog-space-y: var(--space-chrome-y);
-  --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
-  --dialog-space-gap: var(--space-stack-md);
-  --dialog-close-space-offset: var(--space-4);
-  --alert-space-inset: var(--space-section-active);
-  --alert-space-gap: var(--space-inline-md);
-  --alert-inner-space-gap: var(--space-stack-sm);
-  --alert-dismiss-space-offset: var(--space-3);
-  /* Soft (subtle) semantic tint ratios — themeable so a service can hit its exact spec
-   * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
-  --alert-bg-alpha: 0.05;
-  --alert-border-alpha: 0.3;
-  --empty-state-space-y: var(--space-10);
-  --empty-state-space-x: var(--space-6);
-  --skeleton-row-gap: var(--space-stack-sm);
-  --skeleton-cell-gap: var(--space-inline-lg);
-  --skeleton-card-inset: var(--space-section-active);
-  --skeleton-radius: var(--radius);
-}

package/dist/tokens/components/form.css

@@ -1,11 +0,0 @@
-/* Form layout tokens: horizontal-layout label column geometry. */
-
-:root {
-  /* Width of the label column in horizontal/inline layout. A service theme sets
-   * this once (e.g. 110px) to align every form to its design grid; the Form/
-   * FormField `labelWidth` prop overrides per form/field. */
-  --form-label-width: max-content;
-
-  /* Column gap between the label and its control in horizontal/inline layout. */
-  --form-label-gap: var(--space-4); /* 16px */
-}

package/dist/tokens/components/list-row.css

@@ -1,9 +0,0 @@
-/* ListRow component tokens — a single-line entity row for short lists inside a Card
- * (sessions / API tokens / linked accounts / passkeys …). Sits in a flush CardContent;
- * rows separate with a quiet divider (#44 — chrome defaults to the calm semantic border). */
-:root {
-  --list-row-padding-y: var(--space-3);
-  --list-row-padding-x: var(--space-4);
-  --list-row-gap: var(--space-3);
-  --list-row-border: 1px solid hsl(var(--border));
-}

package/dist/tokens/components/navigation.css

@@ -1,15 +0,0 @@
-/* Navigation primitive tokens: pagination, filters, compact pickers. */
-
-:root {
-  --pagination-gap: var(--space-inline-sm);
-  --pagination-item-gap: var(--space-inline-xs);
-  --pagination-size-width: 5.5rem;
-  --pagination-total-font-size: var(--font-size-sm);
-  --filter-bar-gap: var(--space-3);
-  --filter-bar-padding-y: var(--space-2);
-  --filter-label-font-size: var(--font-size-xs);
-  --filter-picker-width-sm: 11rem;
-  --filter-picker-width-md: 14rem;
-  --breadcrumb-font-size: var(--font-size-xs);
-  --menubar-shortcut-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/shell.css

@@ -1,17 +0,0 @@
-/* Shell (sidebar / topbar / kbd) component tokens — small-by-design text
- * knobs (rule #45/#46). A service re-tunes chrome text without moving the
- * global scale. */
-
-:root {
-  --sidebar-section-label-font-size: var(--font-size-2xs);
-  --sidebar-product-tenant-font-size: var(--font-size-2xs);
-  --sidebar-badge-font-size: var(--font-size-2xs);
-  --sidebar-user-role-font-size: var(--font-size-2xs);
-  --sidebar-nav-sub-font-size: var(--font-size-xs);
-  --sidebar-flyout-title-font-size: var(--font-size-xs);
-  --topbar-chip-icon-font-size: var(--font-size-2xs);
-  --kbd-font-size: var(--font-size-2xs);
-  --sidebar-logo-mark-font-size: var(--font-size-xs);
-  --sidebar-avatar-font-size: var(--font-size-2xs);
-  --sidebar-user-name-font-size: var(--font-size-xs);
-}

package/dist/tokens/components/table.css

@@ -1,13 +0,0 @@
-/* Table component tokens: row height, cell padding. */
-
-:root {
-  --table-row-height-compact: 1.75rem;
-  --table-row-height-default: 2rem;
-  --table-row-height-comfortable: 2.75rem;
-  --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
-  --table-cell-padding-y: var(--space-2);
-  --table-cell-space-x: var(--control-padding-x);
-  --table-head-font-size: var(--font-size-xs);
-  /* Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over. */
-  --table-pin-shadow: -6px 0 6px -5px hsl(var(--foreground) / 0.12);
-}