@godxjp/ui 16.5.0 → 16.7.0

package/dist/components/data-display/badge.d.ts

@@ -2,7 +2,12 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import type { ShapeProp, ToneProp } from "../../props/vocabulary";
 export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
-export type BadgeTone = ToneProp;
+/**
+ * Badge tones extend the shared status `ToneProp` with a brand `primary` tone — a SOFT brand pill
+ * (tinted fill + brand text), the dashboard "role pill" pattern. The status tones stay status-only;
+ * for a SOLID brand fill use `variant="default"`.
+ */
+export type BadgeTone = ToneProp | "primary";
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "dashed" | "secondary" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;

package/dist/components/data-display/badge.js

@@ -17,6 +17,7 @@ import {
   toneInfoClass,
   toneMutedClass,
   toneNeutralClass,
+  tonePrimaryClass,
   toneSuccessClass,
   toneWarningClass
 } from "../../lib/control-styles";
@@ -65,6 +66,7 @@ const badgeVariants = cva(
 );
 const badgeToneClass = {
   default: void 0,
+  primary: cn("border-transparent", tonePrimaryClass),
   success: cn("border-transparent", toneSuccessClass),
   warning: cn("border-transparent", toneWarningClass),
   destructive: cn("border-transparent", toneDestructiveClass),

package/dist/components/data-entry/input.d.ts

@@ -4,6 +4,12 @@ export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A leading affordance pinned inside the start of the field — e.g. a mail or
+     * search icon (the common auth/search pattern). Decorative by default; the
+     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     */
+    leadingIcon?: React.ReactNode;
     /**
      * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
      * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field
@@ -16,6 +22,12 @@ export declare const Input: React.ForwardRefExoticComponent<React.InputHTMLAttri
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /**
+     * A leading affordance pinned inside the start of the field — e.g. a mail or
+     * search icon (the common auth/search pattern). Decorative by default; the
+     * input keeps the keyboard focus. Pairs with `trailingIcon`/`allowClear`.
+     */
+    leadingIcon?: React.ReactNode;
     /**
      * A trailing affordance pinned inside the field — e.g. a calendar / clock popover
      * trigger button. ONE trailing icon shows at a time: when `allowClear` and the field

package/dist/components/data-entry/input.js

@@ -18,6 +18,7 @@ const Input = React.forwardRef(
     type,
     allowClear = false,
     onClear,
+    leadingIcon,
     trailingIcon,
     value,
     defaultValue,
@@ -58,7 +59,7 @@ const Input = React.forwardRef(
       setHasText(false);
       onClear?.();
     };
-    if (!allowClear && trailingIcon == null) {
+    if (!allowClear && trailingIcon == null && leadingIcon == null) {
       return /* @__PURE__ */ jsx(
         "input",
         {
@@ -86,6 +87,15 @@ const Input = React.forwardRef(
       }
     ) : trailingIcon;
     return /* @__PURE__ */ jsxs("span", { "data-slot": "input-affix-wrapper", className: "relative inline-flex w-full items-center", children: [
+      leadingIcon != null ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "input-leading",
+          "aria-hidden": "true",
+          className: "text-muted-foreground pointer-events-none absolute inset-y-0 start-2 inline-flex items-center",
+          children: leadingIcon
+        }
+      ) : null,
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -95,7 +105,12 @@ const Input = React.forwardRef(
           value,
           defaultValue,
           onChange: handleChange,
-          className: cn(inputBaseClass, (showClear || trailingIcon != null) && "pe-9", className),
+          className: cn(
+            inputBaseClass,
+            leadingIcon != null && "ps-9",
+            (showClear || trailingIcon != null) && "pe-9",
+            className
+          ),
           ...props
         }
       ),

package/dist/components/general/typography.d.ts

@@ -27,4 +27,5 @@ export declare const Heading: React.ForwardRefExoticComponent<Omit<React.HTMLAtt
     tone?: import("../../props").TextToneProp;
     align?: import("../../props").TextAlignProp;
     truncate?: boolean;
+    weight?: import("../../props").FontWeightProp;
 } & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/general/typography.js

@@ -28,12 +28,13 @@ const Text = React.forwardRef(
 );
 Text.displayName = "Text";
 const Heading = React.forwardRef(
-  ({ level = 2, as, tone = "default", align, truncate, className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
+  ({ level = 2, as, tone = "default", align, truncate, weight = "medium", className, ...props }, ref) => React.createElement(as ?? `h${level}`, {
     ref,
     "data-slot": "heading",
     "data-level": level,
     "data-tone": tone,
     "data-align": align,
+    "data-weight": weight,
     "data-truncate": truncate ? "" : void 0,
     className: cn("ui-heading", className),
     ...props

package/dist/lib/control-styles.d.ts

@@ -23,6 +23,11 @@ export declare const tableCellPaddingClass = "py-[length:var(--table-cell-paddin
 export declare const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
 export declare const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
 export declare const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+/** Soft BRAND pill — a tinted primary tone (border/fill keep the brand role; the TEXT uses the
+ * AA-strong brand colour `text-primary-strong`, darker than the fill, so a small brand label clears
+ * WCAG AA on the soft tint — `text-primary` alone is only 4.04:1 in light). For a SOLID brand fill
+ * use the Badge `default` variant instead. */
+export declare const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
 export declare const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 export declare const toneMutedClass = "border-border bg-muted text-muted-foreground";
 export declare const toneNeutralClass = "border-border bg-muted text-muted-foreground";

package/dist/lib/control-styles.js

@@ -11,6 +11,7 @@ const tableCellPaddingClass = "py-[length:var(--table-cell-padding-y)]";
 const toneSuccessClass = "border-success/30 bg-success/10 text-success-strong";
 const toneWarningClass = "border-warning/30 bg-warning/10 text-warning-strong";
 const toneInfoClass = "border-info/30 bg-info/10 text-info-strong";
+const tonePrimaryClass = "border-primary/30 bg-primary/10 text-primary-strong";
 const toneDestructiveClass = "border-destructive/30 bg-destructive/10 text-error-strong";
 const toneMutedClass = "border-border bg-muted text-muted-foreground";
 const toneNeutralClass = "border-border bg-muted text-muted-foreground";
@@ -29,6 +30,7 @@ export {
   toneInfoClass,
   toneMutedClass,
   toneNeutralClass,
+  tonePrimaryClass,
   toneSuccessClass,
   toneWarningClass
 };

package/dist/props/components/data-display.prop.d.ts

@@ -23,7 +23,8 @@ export type DescriptionsItemProp = {
 /** @see Badge */
 export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
-    tone?: ToneProp;
+    /** Status tones plus a brand `primary` tone (soft brand pill); solid brand = `variant="default"`. */
+    tone?: ToneProp | "primary";
     status?: string;
     icon?: React.ComponentType<{
         className?: string;

package/dist/props/components/data-entry.prop.d.ts

@@ -15,6 +15,10 @@ export type InputProp = React.InputHTMLAttributes<HTMLInputElement> & {
     allowClear?: boolean;
     /** Called after the field is cleared via the inline ✕. */
     onClear?: () => void;
+    /** A leading affordance pinned inside the start of the field (e.g. a mail/lock icon). */
+    leadingIcon?: React.ReactNode;
+    /** A trailing affordance pinned inside the end of the field (replaced by the clear ✕ when `allowClear` + value). */
+    trailingIcon?: React.ReactNode;
 };
 /** @see Textarea */
 export type TextareaProp = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {

package/dist/props/components/general.prop.d.ts

@@ -28,6 +28,8 @@ export type HeadingProp = Omit<React.HTMLAttributes<HTMLHeadingElement>, "color"
     tone?: TextToneProp;
     align?: TextAlignProp;
     truncate?: boolean;
+    /** Weight (system canon: 400 · 500 · 700). Default `medium` — set `bold` for an emphasised title. */
+    weight?: FontWeightProp;
 };
 /** @see Button */
 export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {

package/dist/styles/alert-layout.css

@@ -170,7 +170,7 @@
 
   .ui-skeleton-block {
     border-radius: var(--skeleton-radius);
-    background: var(--skeleton-background);
+    background: var(--skeleton-background, hsl(var(--muted)));
     animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 

package/dist/styles/card-layout.css

@@ -27,13 +27,15 @@
      * `[data-accent]` rail-width override below can win within the same cascade layer. */
     border-width: 1px;
     border-style: solid;
-    border-color: hsl(var(--card-border));
+    border-color: hsl(var(--card-border, var(--border)));
     border-radius: var(--card-radius);
     /* Fill = base card colour with an opt-in role tint washed over it (--card-tint default
-     * transparent → byte-identical at rest). Tint layer sits ABOVE the base colour. */
+     * transparent → byte-identical at rest). Tint layer sits ABOVE the base colour.
+     * --card-background defaults to the LIVE --card role at the call site (re-resolves under a
+     * scoped theme); a service overrides --card-background to win. */
     background:
       linear-gradient(var(--card-tint), var(--card-tint)),
-      hsl(var(--card-background));
+      hsl(var(--card-background, var(--card)));
     color: hsl(var(--card-foreground));
     /* Resting elevation + opt-in brand glow — both quiet no-ops by default so a service theme can
      * lift (--card-shadow) and/or glow (--card-glow) every card with no markup change. */
@@ -126,7 +128,7 @@
     align-items: center;
     gap: var(--space-inline-md);
     padding: var(--card-space-header-y) var(--card-space-inset);
-    border-block: 1px solid hsl(var(--card-border));
+    border-block: 1px solid hsl(var(--card-border, var(--border)));
   }
 
   [data-slot="card-bar"]:first-child {
@@ -154,8 +156,10 @@
   }
 
   .ui-card-header--banded {
-    border-bottom: var(--card-header-border-bottom);
-    background-color: hsl(var(--card-header-background) / var(--card-header-background-alpha));
+    border-bottom: var(--card-header-border-bottom, 1px solid hsl(var(--card-border, var(--border))));
+    background-color: hsl(
+      var(--card-header-background, var(--muted)) / var(--card-header-background-alpha)
+    );
   }
 
   [data-slot="card-header"][data-banded] {
@@ -343,7 +347,7 @@
   }
 
   [data-slot="card-footer"][data-separated] {
-    border-top: 1px solid hsl(var(--card-border));
+    border-top: 1px solid hsl(var(--card-border, var(--border)));
     /* Divided band → symmetric vertical padding (border-aware), in sync with a banded header. */
     padding-block: var(--card-space-divided-y);
     justify-content: flex-end;
@@ -401,8 +405,8 @@
     height: var(--stat-card-icon-size);
     margin-bottom: var(--stat-card-gap);
     border-radius: var(--stat-card-icon-radius);
-    background: var(--stat-card-icon-background);
-    color: var(--stat-card-icon-foreground);
+    background: var(--stat-card-icon-background, hsl(var(--primary) / 0.1));
+    color: var(--stat-card-icon-foreground, hsl(var(--primary)));
   }
 
   [data-slot="stat-card-icon"] svg {

package/dist/styles/control.css

@@ -50,13 +50,13 @@
   }
 
   .ui-toggle[data-state="on"] {
-    background: var(--toggle-on-background);
+    background: var(--toggle-on-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
   }
 
   .ui-toggle:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color) / 0.35);
+    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color, var(--ring)) / 0.35);
   }
 
   .ui-toggle:disabled,
@@ -85,7 +85,7 @@
 
   .ui-button:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
   }
 
   .ui-button:disabled {
@@ -287,7 +287,7 @@
   .ui-slider-thumb:focus-visible,
   .ui-switch:focus-visible {
     outline: none;
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
   }
 
   .ui-checkbox:disabled,
@@ -299,7 +299,7 @@
   }
 
   .ui-checkbox[data-state="checked"] {
-    background: var(--checkbox-checked-background);
+    background: var(--checkbox-checked-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
   }
 
@@ -336,7 +336,7 @@
   }
 
   .ui-switch[data-state="checked"] {
-    background: var(--switch-checked-background);
+    background: var(--switch-checked-background, hsl(var(--primary)));
   }
 
   .ui-switch[data-state="unchecked"] {
@@ -374,13 +374,13 @@
     flex-grow: 1;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: var(--slider-track-background);
+    background: var(--slider-track-background, hsl(var(--primary) / 0.2));
   }
 
   .ui-slider-range {
     position: absolute;
     height: 100%;
-    background: var(--slider-range-background);
+    background: var(--slider-range-background, hsl(var(--primary)));
   }
 
   .ui-slider-thumb {
@@ -656,7 +656,7 @@
 }
 .ui-otp-slot[data-active="true"] {
   z-index: 1;
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
 }
 .ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-slot {
   border-color: hsl(var(--destructive));
@@ -727,7 +727,7 @@
   fill: currentColor;
 }
 .ui-rating-star:focus-visible {
-  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -745,8 +745,8 @@
   background: hsl(var(--background));
 }
 .ui-tag-input:focus-within {
-  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color));
-  border-color: hsl(var(--focus-ring-color));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  border-color: hsl(var(--focus-ring-color, var(--ring)));
 }
 .ui-tag-input-disabled {
   opacity: 0.6;

package/dist/styles/data-display-layout.css

@@ -12,7 +12,7 @@
     /* Tint washes over the role background (default transparent = no-op, rule #44). */
     background:
       linear-gradient(var(--avatar-tint), var(--avatar-tint)),
-      var(--avatar-background);
+      var(--avatar-background, hsl(var(--muted)));
     color: hsl(var(--muted-foreground));
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -30,7 +30,7 @@
     height: 100%;
     align-items: center;
     justify-content: center;
-    background: var(--avatar-background);
+    background: var(--avatar-background, hsl(var(--muted)));
   }
 
   .ui-progress {
@@ -43,13 +43,13 @@
     height: 0.5rem;
     overflow: hidden;
     border-radius: var(--radius-pill);
-    background: var(--progress-track-background);
+    background: var(--progress-track-background, hsl(var(--secondary)));
   }
 
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--progress-fill-background);
+    background: var(--progress-fill-background, hsl(var(--success)));
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
@@ -78,8 +78,8 @@
   }
 
   .ui-tree-item[data-active="true"] {
-    border-color: var(--tree-item-active-border);
-    background: var(--tree-item-active-background);
+    border-color: var(--tree-item-active-border, hsl(var(--primary) / 0.3));
+    background: var(--tree-item-active-background, hsl(var(--primary) / 0.05));
   }
 
   .ui-tree-item[data-depth="1"] {
@@ -154,7 +154,7 @@
     place-items: center;
     border: 1px solid transparent;
     border-radius: var(--radius-pill);
-    background: var(--timeline-dot-done-background);
+    background: var(--timeline-dot-done-background, hsl(var(--success)));
     color: hsl(var(--success-foreground));
     font-size: var(--timeline-note-font-size);
     font-weight: var(--font-weight-medium);
@@ -163,14 +163,14 @@
 
   /* done → success fill. */
   .ui-timeline-dot[data-status="done"] {
-    background: var(--timeline-dot-done-background);
+    background: var(--timeline-dot-done-background, hsl(var(--success)));
     color: hsl(var(--success-foreground));
   }
 
   /* current → primary fill + ring (also the legacy data-current shorthand). */
   .ui-timeline-dot[data-status="current"],
   .ui-timeline-dot[data-current="true"] {
-    background: var(--timeline-dot-current-background);
+    background: var(--timeline-dot-current-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
     box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
   }
@@ -205,7 +205,7 @@
 
   /* The segment below a done/current step reads as travelled (completed). */
   .ui-timeline-line[data-completed="true"] {
-    background: var(--timeline-line-completed-background);
+    background: var(--timeline-line-completed-background, hsl(var(--primary)));
   }
 
   .ui-timeline-head {
@@ -259,7 +259,7 @@
   text-decoration: underline;
 }
 .ui-accordion-trigger:focus-visible {
-  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
   outline-offset: 2px;
   border-radius: var(--radius-sm);
 }
@@ -386,7 +386,7 @@
 }
 
 .ui-carousel-dot:focus-visible {
-  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color));
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
   outline-offset: 2px;
 }
 
@@ -444,7 +444,7 @@
     align-items: flex-start;
   }
   [data-slot="list-row"]:not(:last-child) {
-    border-block-end: var(--list-row-border);
+    border-block-end: var(--list-row-border, 1px solid hsl(var(--border)));
   }
   [data-slot="list-row-leading"] {
     display: inline-flex;

package/dist/styles/data-entry-layout.css

@@ -83,8 +83,8 @@
   }
 
   .ui-time-input:focus-visible {
-    border-color: hsl(var(--focus-ring-color));
-    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color) / 0.3);
+    border-color: hsl(var(--focus-ring-color, var(--ring)));
+    box-shadow: 0 0 0 3px hsl(var(--focus-ring-color, var(--ring)) / 0.3);
   }
 
   .ui-time-input[aria-invalid="true"] {

package/dist/styles/index.css

@@ -42,7 +42,7 @@
 @source inline("rounded-{xs,xl,2xl}");
 @source inline("text-2xs");
 @source inline("text-{3xl,4xl,5xl}");
-@source inline("text-{success,warning,info,error}-strong");
+@source inline("text-{primary,success,warning,info,error}-strong");
 /* `.js` matters: the published package ships only compiled JS under dist (no
  * .tsx sources), and this file is copied verbatim into dist/styles — without
  * it Tailwind finds no component classes in consumers (unstyled popovers and
@@ -103,6 +103,7 @@
   --color-attention-foreground: hsl(var(--attention-foreground));
   /* AA-strong status TEXT colours (text-{success,warning,info,error}-strong) — darker than the
    * fills so small coloured labels clear WCAG AA on white; flip light on the dark theme. */
+  --color-primary-strong: hsl(var(--text-primary));
   --color-success-strong: hsl(var(--text-success));
   --color-warning-strong: hsl(var(--text-warning));
   --color-info-strong: hsl(var(--text-info));

package/dist/styles/layout.css

@@ -23,6 +23,16 @@
     overflow: hidden;
   }
 
+  /* Decorative brand SPOTLIGHT backdrop — the token-driven radial halo behind a hero / auth card,
+   * replacing a hand-authored `radial-gradient(... hsl(var(--primary)/.18) ...)`. Apply to an
+   * `aria-hidden` layer (e.g. an absolutely-positioned full-bleed div behind the card). All geometry
+   * and tint come from the `--brand-glow*` tokens, so a theme retints/repositions it with no markup
+   * change. `pointer-events:none` keeps the backdrop from stealing clicks from the card above it. */
+  .ui-brand-glow {
+    background-image: var(--brand-glow);
+    pointer-events: none;
+  }
+
   .ui-flex,
   .ui-stack-xs {
     display: flex;
@@ -497,7 +507,10 @@
     width: 3rem;
     height: 3rem;
     border-radius: var(--radius-pill);
-    background-color: hsl(var(--muted));
+    /* Medallion fill + glyph colour read their knobs, defaulting to the LIVE --muted /
+     * --muted-foreground roles at the call site (re-resolves under a scoped theme). */
+    background-color: var(--empty-state-icon-tint, hsl(var(--muted)));
+    color: var(--empty-state-icon-foreground, hsl(var(--muted-foreground)));
   }
 }
 

package/dist/styles/navigation-layout.css

@@ -55,8 +55,8 @@
   .ui-menubar-sub-trigger:hover,
   .ui-navigation-menu-link:hover,
   .ui-navigation-menu-item:hover {
-    background: var(--menubar-item-hover-background);
-    color: var(--menubar-item-hover-foreground);
+    background: var(--menubar-item-hover-background, hsl(var(--accent)));
+    color: var(--menubar-item-hover-foreground, hsl(var(--accent-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: var(--menubar-item-hover-background);
-    color: var(--menubar-item-hover-foreground);
+    background: var(--menubar-item-hover-background, hsl(var(--accent)));
+    color: var(--menubar-item-hover-foreground, hsl(var(--accent-foreground)));
   }
 
   .ui-context-menu-item[data-variant="destructive"],
@@ -184,8 +184,8 @@
 
   .ui-menubar-trigger[data-state="open"],
   .ui-menubar-sub-trigger[data-state="open"] {
-    background: var(--menubar-item-hover-background);
-    color: var(--menubar-item-hover-foreground);
+    background: var(--menubar-item-hover-background, hsl(var(--accent)));
+    color: var(--menubar-item-hover-foreground, hsl(var(--accent-foreground)));
   }
 
   .ui-navigation-menu {

package/dist/styles/shell-layout.css

@@ -270,8 +270,8 @@
    * 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);
+    background: var(--sidebar-item-active-background, hsl(var(--accent)));
+    color: var(--sidebar-item-active-foreground, hsl(var(--foreground)));
     font-weight: var(--font-weight-medium);
   }
 
@@ -362,12 +362,12 @@
 
   .sb-nav-item--sub[data-active="true"] {
     background: transparent;
-    color: var(--sidebar-item-active-color);
+    color: var(--sidebar-item-active-color, hsl(var(--primary)));
     font-weight: 500;
   }
 
   .sb-nav-item--sub[data-active="true"]::before {
-    background: var(--sidebar-item-active-tint);
+    background: var(--sidebar-item-active-tint, hsl(var(--primary)));
     opacity: 1;
   }
 
@@ -417,7 +417,7 @@
   }
 
   .sb-user:focus-visible {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color) / 0.45);
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)) / 0.45);
   }
 
   .sb-user-avatar {
@@ -660,7 +660,7 @@
   }
 
   .tb-icon-btn:focus-visible {
-    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color) / 0.45);
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)) / 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: var(--table-header-background);
+    background: var(--table-header-background, hsl(var(--muted)));
     font-size: var(--table-head-font-size);
     font-weight: var(--font-weight-medium);
-    color: var(--table-header-foreground);
+    color: var(--table-header-foreground, hsl(var(--muted-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: var(--table-row-striped-background);
+    background-color: var(--table-row-striped-background, hsl(var(--muted) / 0.4));
   }
 
   /* Empty-state cell hosts the built-in EmptyState (which brings its own padding). */
@@ -110,7 +110,7 @@
   }
 
   [data-slot="card-content"][data-flush] .ui-data-table-toolbar {
-    border-bottom: 1px solid hsl(var(--card-border));
+    border-bottom: 1px solid hsl(var(--card-border, var(--border)));
     padding: var(--card-space-header-y) var(--card-space-inset);
   }
 
@@ -195,10 +195,16 @@
   /* 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(var(--table-row-hover-background), var(--table-row-hover-background));
+    background-image: linear-gradient(
+      var(--table-row-hover-background, hsl(var(--muted) / 0.5)),
+      var(--table-row-hover-background, hsl(var(--muted) / 0.5))
+    );
   }
 
   .ui-data-table-surface tbody tr[data-state="selected"] > .ui-data-table-pin-end {
-    background-image: linear-gradient(var(--table-row-selected-background), var(--table-row-selected-background));
+    background-image: linear-gradient(
+      var(--table-row-selected-background, hsl(var(--muted) / 0.3)),
+      var(--table-row-selected-background, hsl(var(--muted) / 0.3))
+    );
   }
 }

package/dist/styles/text-layout.css

@@ -33,14 +33,19 @@
     font-size: var(--font-size-2xl);
   }
 
-  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600. */
-  [data-slot="text"][data-weight="regular"] {
+  /* Weight — the dxs-kintai canon (400 body · 500 heading/label · 700 emphasis). No 600.
+   * Shared by text + heading; the two-attribute heading selectors outrank the base heading
+   * rule below, so `<Heading weight="bold">` renders a semantic, emphasised title. */
+  [data-slot="text"][data-weight="regular"],
+  [data-slot="heading"][data-weight="regular"] {
     font-weight: var(--font-weight-normal);
   }
-  [data-slot="text"][data-weight="medium"] {
+  [data-slot="text"][data-weight="medium"],
+  [data-slot="heading"][data-weight="medium"] {
     font-weight: var(--font-weight-medium);
   }
-  [data-slot="text"][data-weight="bold"] {
+  [data-slot="text"][data-weight="bold"],
+  [data-slot="heading"][data-weight="bold"] {
     font-weight: var(--font-weight-bold);
   }
 

package/dist/tokens/components/badge.css

@@ -0,0 +1,10 @@
+/* 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

@@ -0,0 +1,79 @@
+/* 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 fill + edge — opt-in knobs that DEFAULT to the live --card / --border roles. Declared
+   * `initial` (not `var(--card)`) so the default re-resolves at the call site under a scoped theme:
+   * a :root binding to a role var freezes at the :root value and a scoped `[data-tenant]` override of
+   * the role never reaches it (see docs/STANDARDS-vocabulary-tokens.md · "role-mirror knobs"). A
+   * service still overrides the knob directly (--card-background: …) to win over the role default. */
+  --card-background: initial; /* default = hsl(var(--card)) */
+  --card-border: initial; /* default = hsl(var(--border)) */
+  /* Banded-header fill — role-tintable (rule #45): a service points this at any role,
+   * e.g. --card-header-background: var(--primary), and tunes --card-header-background-alpha for
+   * the wash strength. Default = the live --muted role (resolved at the call site). */
+  --card-header-background: initial; /* default = hsl(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.
+   * Default = 1px solid hsl(var(--card-border)) (resolved at the call site). */
+  --card-header-border-bottom: initial;
+  --card-radius: var(--radius);
+  /* Resting elevation — quiet by default (rule #44): cards are flat (1px border, no shadow) in the
+   * dxs-kintai baseline. A service that wants lifted cards sets this to an elevation token once,
+   * e.g. --card-shadow: var(--shadow-sm), and every Card picks up the shadow with no markup change. */
+  --card-shadow: 0 0 0 0 transparent;
+  /* Brand glow layer — invisible no-op at rest (rule #44). Paired AFTER --card-shadow in the
+   * surface box-shadow so a service can wash every card with the global glow, e.g.
+   * --card-glow: var(--shadow-glow), with no markup change. */
+  --card-glow: 0 0 0 0 transparent;
+  /* Fill tint — subtle role wash over the card background (default transparent = invisible).
+   * Painted as an overlay so a service sets --card-tint: hsl(var(--primary) / 0.04) once. */
+  --card-tint: transparent;
+  /* 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-icon-glyph-size: 1.25rem;
+  --stat-card-icon-radius: var(--radius-md);
+  /* Medallion tint — soft brand wash + brand glyph by default; a service retints by overriding
+   * --primary or these tokens directly (rule #44/#45). `initial` so the --primary default
+   * re-resolves at the call site under a scoped theme (no :root freeze).
+   * Defaults = hsl(var(--primary) / 0.1) fill · hsl(var(--primary)) glyph. */
+  --stat-card-icon-background: initial;
+  --stat-card-icon-foreground: initial;
+  --stat-card-delta-font-size: var(--font-size-xs);
+}

package/dist/tokens/components/control.css

@@ -0,0 +1,92 @@
+/* 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: var(--focus-ring-width);
+
+  --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;
+
+  /* Checked/on/active fills — `initial` so the --primary default re-resolves at the call site
+   * under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped
+   * [data-tenant] override of --primary never reaches it). A service retints the "selected" state
+   * by overriding these directly. Defaults = hsl(var(--primary)) · slider track 0.2α. */
+  --checkbox-checked-background: initial;
+  --switch-checked-background: initial;
+  --toggle-on-background: initial;
+  --slider-track-background: initial;
+  --slider-range-background: initial;
+
+  --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

@@ -0,0 +1,34 @@
+/* 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);
+
+  /* Avatar surface — `initial` so the --muted default re-resolves at the call site under a scoped
+     theme (a :root binding to a role var freezes at :root; a scoped role override never reaches it).
+     A service re-tints the placeholder fill once (e.g. --avatar-background: hsl(var(--accent))).
+     Default = hsl(var(--muted)). */
+  --avatar-background: initial;
+  /* Optional role wash over the avatar (default transparent = invisible, rule #44).
+     Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08). */
+  --avatar-tint: transparent;
+
+  /* Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme.
+     Track reads --secondary, fill reads --success; a service re-tones once.
+     Defaults = hsl(var(--secondary)) track · hsl(var(--success)) fill. */
+  --progress-track-background: initial;
+  --progress-fill-background: initial;
+
+  /* Timeline accents — `initial` so the dot/line role defaults re-resolve under a scoped theme.
+     Defaults = hsl(var(--success)) done · hsl(var(--primary)) current/line. */
+  --timeline-dot-done-background: initial;
+  --timeline-dot-current-background: initial;
+  --timeline-line-completed-background: initial;
+
+  /* Tree active item — border + soft bg tint over the --primary role. `initial` so the default
+     re-resolves under a scoped theme. Defaults = hsl(var(--primary) / 0.3) border · 0.05 fill. */
+  --tree-item-active-border: initial;
+  --tree-item-active-background: initial;
+}

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

@@ -0,0 +1,6 @@
+/* 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

@@ -0,0 +1,9 @@
+/* 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

@@ -0,0 +1,39 @@
+/* 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;
+  /* Brand glow layer for the raised dialog/sheet panel — invisible no-op at rest (rule #44).
+   * Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the
+   * global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change. */
+  --dialog-content-glow: 0 0 0 0 transparent;
+  --empty-state-space-y: var(--space-10);
+  --empty-state-space-x: var(--space-6);
+  /* EmptyState icon medallion colour — `initial` so the role defaults re-resolve at the call site
+   * under a scoped theme (rule #44). A service recolours the glyph (--empty-state-icon-foreground)
+   * or washes the medallion fill (--empty-state-icon-tint) without forking.
+   * Defaults = hsl(var(--muted-foreground)) glyph · hsl(var(--muted)) fill. */
+  --empty-state-icon-foreground: initial;
+  --empty-state-icon-tint: initial;
+  --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);
+  /* Skeleton placeholder fill — `initial` so the --muted default re-resolves at the call site under
+   * a scoped theme (a :root binding to a role var freezes at :root). A service tints the shimmer to
+   * its surface (rule #44) without forking the keyframes. Default = hsl(var(--muted)). */
+  --skeleton-background: initial;
+}

package/dist/tokens/components/form.css

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,11 @@
+/* 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);
+  /* Row divider — `initial` so the --border default re-resolves at the call site under a scoped
+   * theme (a :root binding to a role var freezes at :root). Default = 1px solid hsl(var(--border)). */
+  --list-row-border: initial;
+}

package/dist/tokens/components/navigation.css

@@ -0,0 +1,21 @@
+/* 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);
+
+  /* Menu item hover/highlight tint — `initial` so the --accent default re-resolves at the call site
+   * under a scoped theme (a :root binding to a role var freezes at :root).
+   * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */
+  --menubar-item-hover-background: initial;
+  --menubar-item-hover-foreground: initial;
+}

package/dist/tokens/components/shell.css

@@ -0,0 +1,35 @@
+/* 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);
+
+  /* Brand-chrome gradient hooks — opt-in, invisible by default. A service paints
+   * the sidebar/topbar surface by setting these to a gradient (no-op = none). */
+  --sidebar-gradient: none;
+  --topbar-gradient: none;
+
+  /* Sidebar active-item tint/marker — `initial` so the role defaults re-resolve at the call site
+   * under a scoped theme (a :root binding to a role var freezes at :root; a scoped role override
+   * never reaches it). A service re-tunes the active sub-item accent without forking CSS.
+   * Defaults = hsl(var(--primary)) marker/tint. */
+  --sidebar-item-active-color: initial;
+  --sidebar-item-active-tint: initial;
+  /* Main nav-item active row — defaults mirror the hover state (accent bg, foreground text); a
+   * service overrides these to brand the selected row (e.g. a gold tint + gold text on a navy
+   * sidebar). `initial` so the defaults re-resolve under a scoped theme.
+   * Defaults = hsl(var(--accent)) fill · hsl(var(--foreground)) text. */
+  --sidebar-item-active-background: initial;
+  --sidebar-item-active-foreground: initial;
+}

package/dist/tokens/components/table.css

@@ -0,0 +1,26 @@
+/* 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);
+  /* Header band — its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the
+   * default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root
+   * binding to a role var freezes at the :root value and a scoped [data-tenant] role override never
+   * reaches it. A brand sets both header tokens together to keep band/text contrast.
+   * Defaults = hsl(var(--muted)) band · hsl(var(--muted-foreground)) text. */
+  --table-header-background: initial;
+  --table-header-foreground: initial;
+  /* 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);
+  /* Row-state tint washes — translucent muted over the opaque base. `initial` so the --muted
+   * default re-resolves under a scoped theme; a service retints by reading another role (e.g.
+   * --primary). Defaults = hsl(var(--muted) / 0.4 striped · 0.5 hover · 0.3 selected). */
+  --table-row-striped-background: initial;
+  --table-row-hover-background: initial;
+  --table-row-selected-background: initial;
+}

package/dist/tokens/foundation.css

@@ -40,6 +40,7 @@
   /* 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-primary: 204 100% 30%; /* deep brand blue — AA brand text on the soft primary tint */
   --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 */
@@ -107,15 +108,30 @@
    * — the CTA then carries a brand glow with no component change. */
   --shadow-glow: 0 0 0 0 transparent;
 
+  /* Brand SPOTLIGHT — a decorative radial brand halo for hero / auth backdrops (the `.ui-brand-glow`
+   * utility paints this as a background-image on an aria-hidden layer). Every knob is a token, so a
+   * service retints (`--brand-glow-color`), softens (`--brand-glow-alpha`), resizes
+   * (`--brand-glow-size`) or repositions (`--brand-glow-position`) the halo with no markup change;
+   * override the whole `--brand-glow` for a bespoke gradient. Default: a soft primary glow up top. */
+  --brand-glow-color: var(--primary);
+  --brand-glow-alpha: 0.18;
+  --brand-glow-size: 60% 50%;
+  --brand-glow-position: 50% 0%;
+  --brand-glow: radial-gradient(
+    ellipse var(--brand-glow-size) at var(--brand-glow-position),
+    hsl(var(--brand-glow-color) / var(--brand-glow-alpha)),
+    transparent 70%
+  );
+
   /* 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);
+   * `[data-tenant]` — to retint or resize EVERY focus ring. `--focus-ring-color` is declared
+   * `initial` (NOT `var(--ring)`): a :root binding to a role var would freeze at the :root --ring
+   * and a scoped [data-tenant] override of --ring alone would never reach it. Every :focus-visible
+   * 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;
 
   /* GRADIENTS — opt-in decorative fills exposed at the token layer so a service can paint a hero
@@ -345,6 +361,7 @@
   --text-link: 204 90% 66%;
   --text-brand: 204 90% 66%;
   /* Status text on the dark spine reads LIGHT (AA on dark surfaces). */
+  --text-primary: 204 90% 64%; /* lifted brand blue — AA on the dark primary tint */
   --text-success: 146 55% 64%;
   --text-warning: 44 95% 62%;
   --text-info: 221 70% 72%;

package/dist/tokens/semantic/layout.css

@@ -0,0 +1,54 @@
+/* Layout primitive tokens: page, section, stack, inline. */
+
+:root {
+  /* Semantic spacing — ONE coherent 4px grid (Tailwind/Material/Ant standard). All steps reference
+   * the linear `--space-*` scale (NOT the golden φ scale — golden ratio is for modular SIZE scales
+   * like type/radius, not the spacing grid; mixing the two left an incoherent density rhythm). The
+   * φ tokens remain available as an optional golden-layout utility, just not the spacing baseline. */
+  --space-page-x: var(--space-6); /* 24px — page gutter */
+  --space-page-y: var(--space-6); /* 24px */
+  --space-section: var(--space-4); /* 16px */
+  --space-stack-xs: var(--space-1); /* 4px */
+  --space-stack-sm: var(--space-2); /* 8px */
+  --space-stack-md: var(--space-4); /* 16px */
+  --space-stack-lg: var(--space-6); /* 24px */
+  --space-stack-xl: var(--space-10); /* 40px */
+  --space-inline-xs: var(--space-1); /* 4px */
+  --space-inline-sm: var(--space-2); /* 8px */
+  --space-inline-md: var(--space-3); /* 12px */
+  --space-inline-lg: var(--space-4); /* 16px */
+
+  --space-page-active-x: var(--space-page-x);
+  --space-page-active-y: var(--space-page-y);
+  --space-section-active: var(--space-section);
+
+  /* Modal scrim — the single backdrop colour shared by EVERY overlay (Dialog, AlertDialog, Sheet,
+   * Drawer). Themeable (rule #44) so a service tints the wash to its brand once, e.g. a navy
+   * `--overlay-background: rgb(12 26 49 / .55)`, instead of forking each overlay. */
+  --overlay-background: rgb(0 0 0 / 0.5);
+
+  /* Full-bleed rule under the PageContainer header. OFF by default — the title/body
+   * gap already separates them; a divider is a service-theme opt-in:
+   * `--page-header-divider: 1px solid hsl(var(--border));` */
+  --page-header-divider: none;
+
+  /* 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. */
+  --page-header-pad-bottom: calc(var(--space-page-active-y) - var(--space-section-active));
+
+  /* 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);
+   * horizontal stays 24 (Ant standard). Per-component tokens (--sheet-pad-*, --dialog-space-inset…)
+   * default to these and only override when a surface genuinely needs to differ. */
+  --space-chrome-x: var(--space-6); /* 24px — horizontal inset */
+  --space-chrome-y: var(--space-4); /* 16px — vertical inset (header/footer/body) */
+  --space-chrome-gap: var(--space-stack-sm); /* gap between header ↔ body ↔ footer */
+
+  /* The ONE vertical gap between a field's LABEL and its CONTENT — same everywhere a label sits above
+   * a control or a value (FormField, Descriptions, Form, any label-above stack). Single source so the
+   * whole system stays in sync (gh feedback: Descriptions was ~0px while FormField was 8px). */
+  --field-label-gap: var(--space-2); /* 8px */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godxjp/ui",
-  "version": "16.5.0",
+  "version": "16.7.0",
   "type": "module",
   "packageManager": "pnpm@10.29.1",
   "sideEffects": false,