@godxjp/ui-mcp 15.0.0 → 16.5.0

package/dist/index.js

@@ -1125,7 +1125,8 @@ export default function InvoiceList({
       "DO use <CardContent flush> for edge-to-edge children such as DataTable, Table, or a Tabs list \u2014 this removes horizontal padding. Combine with <CardContent tight> when there is no visual gap needed after the header, and <CardContent solo> when there is no CardHeader above (top padding matches the card shell).",
       "DO use <CardFooter separated> to render a top-bordered action band (Save/Cancel buttons, table summary row). Use <CardFooter flush> for a full-bleed footer bar.",
       "DO use <CardCover> as the first child for full-bleed cover media \u2014 the header below it uses card-section top spacing, not the card shell.",
-      "DON'T hand-roll a stat/KPI tile with <Card> + raw divs \u2014 use <StatCard> (label, value, hint, delta, layout, inverse props) which is already a Card internally with correct token-driven layout."
+      "DON'T hand-roll a stat/KPI tile with <Card> + raw divs \u2014 use <StatCard> (label, value, hint, delta, layout, inverse props) which is already a Card internally with correct token-driven layout.",
+      "SPACING IS BORDER-AWARE & token-driven (theme via src/tokens/components/card.css, never hard-code padding on slots): `--card-space-inset` is the shared horizontal column every slot (header/content/footer) aligns to. A DIVIDED section \u2014 a `banded` header or a `separated` footer, i.e. one carrying a divider border \u2014 pads SYMMETRICALLY top+bottom from `--card-space-divided-y` (a band reads as its own region). A PLAIN header flows into the body instead: top `--card-space-inset`, no bottom, and the body supplies the gap via `--card-space-body-y`. Special case: a header above `<CardContent flush>` with a <Table> gets its own `--card-space-body-y` bottom gap (the flush table zeroes its top), so the title never butts the table. `--card-space-gap` is the in-slot stack gap (title\u2195description). Tune the band rhythm once at `--card-space-divided-y`; tune the accent stripe width at `--card-accent-rail-width` (default 6px)."
     ],
     useCases: [
       'Dashboard KPI summary row: wrap each metric in <StatCard> (or a plain <Card size="compact"> with <CardContent>) to render a uniform grid of labeled value tiles with optional trend deltas.',
@@ -1216,6 +1217,11 @@ export default function InvoiceList({
         description: "Metric value (string/number/ReactNode)."
       },
       { name: "hint", type: "ReactNode", description: "Secondary context below the value." },
+      {
+        name: "icon",
+        type: "LucideIcon",
+        description: "Optional leading icon rendered as a tinted medallion above the metric. Decorative (aria-hidden) \u2014 the label carries the meaning. Tint via the --stat-card-icon-{background,foreground} tokens (default a soft brand-primary wash)."
+      },
       {
         name: "delta",
         type: "ReactNode",
@@ -1434,6 +1440,12 @@ import { Smartphone } from "lucide-react";
         defaultValue: "2",
         description: "Column count; collapses to 1 on mobile."
       },
+      {
+        name: "layout",
+        type: '"vertical" | "horizontal"',
+        defaultValue: '"vertical"',
+        description: "Label placement within each item \u2014 `vertical` stacks the label over the value (default); `horizontal` puts the label BESIDE the value in a token-aligned column (mirrors `<Form layout>`). Tune the horizontal label-column width via `--descriptions-label-width`."
+      },
       {
         name: "children",
         type: "ReactNode",
@@ -1961,6 +1973,11 @@ import { Smartphone } from "lucide-react";
         name: "onClear",
         type: "() => void",
         description: "Called after the field is cleared via the inline \u2715 (requires `allowClear`)."
+      },
+      {
+        name: "trailingIcon",
+        type: "React.ReactNode",
+        description: "A trailing affordance pinned inside the field (e.g. a calendar / clock popover trigger). ONE trailing icon shows at a time: when `allowClear` and the field holds a value the clear \u2715 REPLACES this icon; otherwise this icon shows. Never both \u2014 this is how DatePicker/TimePicker render their open trigger."
       }
     ],
     usage: [
@@ -2087,7 +2104,7 @@ import { Smartphone } from "lucide-react";
       "Input \u2014 the plain single-line field NumberInput composes; use Input directly only for free numeric text with no stepper/clamp need.",
       "Slider \u2014 use instead when the user picks an approximate value within a range by dragging; NumberInput is for exact keyed entry.",
       "FormField \u2014 compose NumberInput inside FormField (matching id) for label/helper/error a11y wiring.",
-      "TimeInput \u2014 the HH:mm sibling spinbutton; NumberInput is for plain numbers, TimeInput for clock times."
+      "TimePicker \u2014 the HH:mm time sibling; NumberInput is for plain numbers, TimePicker for clock times."
     ],
     storyPath: "data-entry/NumberInput.stories.tsx",
     rules: [3, 6],
@@ -6871,15 +6888,19 @@ export default function PasswordBlock() {
       },
       {
         name: "defaultSize",
-        type: "number",
-        description: "ResizablePanel initial size as a percentage (0\u2013100) of the group."
+        type: "string | number",
+        description: 'ResizablePanel initial size. react-resizable-panels v4: a STRING is a unit ("35%", "20rem", "240px"); a bare NUMBER is PIXELS. For a percentage of the group pass a string like "35%" \u2014 `defaultSize={35}` means 35px (a sliver), not 35%.'
       },
       {
         name: "minSize",
-        type: "number",
-        description: "ResizablePanel minimum size (%) \u2014 drag can't shrink below this."
+        type: "string | number",
+        description: `ResizablePanel minimum size \u2014 drag can't shrink below this. Same unit rule: "20%" for percent, bare number = px.`
+      },
+      {
+        name: "maxSize",
+        type: "string | number",
+        description: 'ResizablePanel maximum size. "60%" for percent, bare number = px.'
       },
-      { name: "maxSize", type: "number", description: "ResizablePanel maximum size (%)." },
       {
         name: "collapsible",
         type: "boolean",
@@ -6894,7 +6915,7 @@ export default function PasswordBlock() {
     ],
     usage: [
       'DO put the layout on `<ResizablePanelGroup orientation="horizontal|vertical">`, the resizable regions in `<ResizablePanel>`, and a `<ResizableHandle>` BETWEEN every adjacent pair \u2014 a group of N panels needs N-1 handles or there is nothing to drag.',
-      "DO size panels with `defaultSize`/`minSize`/`maxSize` as PERCENTAGES (the group totals 100), not pixels \u2014 don't fight this with a fixed `w-[280px]` className on the panel.",
+      'DO express `defaultSize`/`minSize`/`maxSize` as PERCENTAGE STRINGS like `defaultSize="35%"` (react-resizable-panels v4: a bare number is PIXELS, so `defaultSize={35}` renders a 35px sliver, NOT 35% \u2014 pass the string). Don\'t fight sizing with a fixed `w-[280px]` className on the panel.',
       "DON'T reach for ResizablePanel when the split is fixed and never user-adjustable \u2014 use a plain `Flex`/`ResponsiveGrid`, or `SplitPane` for a simple two-pane layout. Resizable is for *user-draggable* boundaries only.",
       "DO give each panel a stable `id` and use `collapsible` + `collapsedSize` for a side panel the user can fully tuck away (e.g. a filters rail), reacting via `onResize`.",
       "DON'T hand-roll a draggable divider with mouse-move listeners \u2014 the primitive handles pointer + keyboard resizing, ARIA separator semantics, and min/max clamping. Always render `<ResizableHandle>`, never a bare styled `<div>`."
@@ -6909,10 +6930,10 @@ export default function PasswordBlock() {
     rules: [3, 6],
     example: `import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@godxjp/ui/layout";
 
-<ResizablePanelGroup>
-  <ResizablePanel>Panel A</ResizablePanel>
+<ResizablePanelGroup orientation="horizontal">
+  <ResizablePanel id="list" defaultSize="35%" minSize="20%">Panel A</ResizablePanel>
   <ResizableHandle />
-  <ResizablePanel>Panel B</ResizablePanel>
+  <ResizablePanel id="detail" defaultSize="65%" minSize="40%">Panel B</ResizablePanel>
 </ResizablePanelGroup>`
   },
   {
@@ -6964,50 +6985,6 @@ export default function PasswordBlock() {
   <CarouselNext />
   <CarouselDots />
 </Carousel>`
-  },
-  {
-    name: "TimeInput",
-    group: "data-entry",
-    tagline: "Masking HH:mm input with validation and optional minute step quantization.",
-    props: [
-      { name: "value", type: "string", description: "Controlled HH:mm value." },
-      {
-        name: "defaultValue",
-        type: "string",
-        description: "Uncontrolled initial HH:mm value."
-      },
-      {
-        name: "onValueChange",
-        type: "(value: string) => void",
-        description: "Validated value callback."
-      },
-      {
-        name: "step",
-        type: "number",
-        defaultValue: "1",
-        description: "Minute step (clamped 1\u201359). Snaps the committed minute to the nearest lower multiple and sets the ArrowUp/ArrowDown increment."
-      },
-      { name: "name", type: "string", description: "Form field name." }
-    ],
-    usage: [
-      "DO treat the value as a plain `HH:mm` string (24-hour, zero-padded) \u2014 TimeInput is calendar-free. For a date, or a date+time, use `DatePicker`/`Calendar`; for a richer dropdown time selector use `TimePicker`.",
-      "DO drive it controlled with `value` + `onValueChange` (it follows the vocabulary \u2014 NOT `onChange`/`defaultValue` pairing for control). `onValueChange` fires only with a VALID, step-snapped `HH:mm`, so your state never holds a half-typed value.",
-      "DON'T pass `value` without `onValueChange` \u2014 like every controlled @godxjp/ui input that freezes the field. Omit both for uncontrolled (use `defaultValue`).",
-      "DO set `step` to your scheduling granularity (e.g. `15` or `30`) \u2014 the user can still type freely, but blur/Enter snaps the minute down to the nearest multiple, and ArrowUp/ArrowDown step by that amount (wrapping across midnight).",
-      "DO let the built-in masking + validation work: digits auto-format to `HH:mm`, invalid input sets `aria-invalid` and is reverted on blur. Don't add your own regex/onChange masking on top.",
-      "DON'T use it for a duration/elapsed time that can exceed 23:59 \u2014 it's a clock time-of-day input (00:00\u201323:59). Use a numeric Input for durations."
-    ],
-    useCases: [
-      "\u52E4\u6020 (attendance) start/end time fields \u2014 \u51FA\u52E4 / \u9000\u52E4 HH:mm entry with step={1} or a rounding step for shift schedules.",
-      "Business-hours / reservation slot editor where times snap to a 15- or 30-minute grid (step={15}).",
-      "A from\u2013to time range filter on a report or log screen (two TimeInputs) with no date component.",
-      "Any calendar-free HH:mm-only form field (e.g. a recurring daily batch time, a \u7DE0\u3081\u6642\u523B)."
-    ],
-    storyPath: "data-entry/TimeInput.stories.tsx",
-    rules: [3, 6],
-    example: `import { TimeInput } from "@godxjp/ui/data-entry";
-
-<TimeInput value="09:00" step={15} onValueChange={(time) => console.log(time)} />`
   },
   {
     name: "AppSettingPicker",
@@ -7664,6 +7641,36 @@ var TOKENS = [
     tier: "primitive",
     role: "Distance (10px) a revealed element travels on enter (translateY/-X). Read instead of a literal `translateY(10px)` for staggered reveals."
   },
+  {
+    name: "--shadow-color",
+    category: "primitive",
+    tier: "primitive",
+    role: "RGB channels (space-separated, e.g. `12 26 49`) that tint the WHOLE elevation ramp (--shadow-xs..2xl) at once. Default `0 0 0`. Single-brand :root only \u2014 a scoped override does not re-resolve the ramp (the steps compute at :root); for a scoped/multi-tenant card lift set --card-shadow to a literal value."
+  },
+  {
+    name: "--shadow-glow",
+    category: "primitive",
+    tier: "primitive",
+    role: "Opt-in brand GLOW halo layered on the primary CTA's resting shadow. Default invisible (`0 0 0 0 transparent`, valid inside a comma shadow list). A service sets the whole value, e.g. `--shadow-glow: 0 8px 20px hsl(var(--primary) / .32)` \u2014 works scoped under [data-tenant] because the service declares it inside the scope."
+  },
+  {
+    name: "--focus-ring-color",
+    category: "primitive",
+    tier: "primitive",
+    role: "Themeable hue of EVERY keyboard-focus ring (HSL components, default var(--ring)). A leaf token, so it re-resolves at the element that paints the ring \u2014 override it once, even scoped under [data-tenant], to retint all focus rings. Pair with --focus-ring-width."
+  },
+  {
+    name: "--focus-ring-width",
+    category: "primitive",
+    tier: "primitive",
+    role: "Thickness (2px) of the solid keyboard-focus ring. Leaf token \u2014 :focus-visible rules read it directly as `0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color))`, never via an intermediate composite (which would freeze at :root). Propagates scoped."
+  },
+  {
+    name: "--gradient-{brand,hero,glow}",
+    category: "primitive",
+    tier: "primitive",
+    role: "Opt-in decorative gradient fills, default `none`. --gradient-hero paints the PageContainer header (hero banner); --gradient-glow paints the AppShell .app-main (ambient brand wash); --gradient-brand is a spare. A service sets the full gradient, e.g. `--gradient-glow: radial-gradient(60% 80% at 50% 0%, hsl(var(--primary) / .25), transparent)`."
+  },
   { name: "--primary", category: "semantic", tier: "semantic", role: "Brand/action color role." },
   { name: "--success", category: "semantic", tier: "semantic", role: "Success status role." },
   { name: "--warning", category: "semantic", tier: "semantic", role: "Warning status role." },
@@ -7681,6 +7688,12 @@ var TOKENS = [
     tier: "semantic",
     role: "PageContainer header bottom divider. Default none; a service theme opts in with `1px solid hsl(var(--border))`."
   },
+  {
+    name: "--overlay-background",
+    category: "semantic",
+    tier: "semantic",
+    role: "Modal scrim \u2014 the single backdrop colour shared by every overlay (Dialog, AlertDialog, Sheet, Drawer). Default `rgb(0 0 0 / 0.5)`. A service tints it once, e.g. a navy `rgb(12 26 49 / .55)`. NOTE: portaled overlays render outside a [data-tenant] subtree, so for multi-tenant scoping put the tenant attribute on the portal container too."
+  },
   {
     name: "--page-header-pad-bottom",
     category: "semantic",
@@ -7749,72 +7762,77 @@ var COMPONENT_TOKENS = [
   {
     "name": "--card-space-inset",
     "value": "var(--space-section-active)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "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."
   },
   {
     "name": "--card-space-header-y",
     "value": "var(--space-stack-sm)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y."
   },
   {
     "name": "--card-space-body-y",
     "value": "var(--space-section-active)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Gap between the header and the body, and the body's own top padding \u2014 the breathing * room under a title before content begins."
   },
   {
     "name": "--card-space-footer-y",
     "value": "var(--space-stack-sm)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y."
+  },
+  {
+    "name": "--card-space-divided-y",
+    "value": "var(--card-space-header-y)",
+    "description": "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 \u2014 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."
   },
   {
     "name": "--card-space-gap",
     "value": "var(--space-stack-xs)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-title-font-size",
     "value": "var(--font-size-base)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-title-line-height",
     "value": "var(--line-height-tight)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-title-font-weight",
     "value": "var(--font-weight-semibold)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-description-font-size",
     "value": "var(--font-size-sm)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-description-line-height",
     "value": "var(--line-height-normal)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-background",
     "value": "var(--card)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-border",
     "value": "var(--border)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Vertical gap between stacked items WITHIN a slot (e.g. title \u2195 description in the header)."
   },
   {
     "name": "--card-header-background",
     "value": "var(--muted)",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Banded-header fill \u2014 already 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. No separate tint token needed."
   },
   {
     "name": "--card-header-background-alpha",
     "value": "0.55",
-    "description": "Card component tokens: card chrome derives from semantic layout tokens."
+    "description": "Banded-header fill \u2014 already 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. No separate tint token needed."
   },
   {
     "name": "--card-header-border-bottom",
@@ -7826,6 +7844,21 @@ var COMPONENT_TOKENS = [
     "value": "var(--radius)",
     "description": "Banded-header divider \u2014 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."
   },
+  {
+    "name": "--card-shadow",
+    "value": "0 0 0 0 transparent",
+    "description": "Resting elevation \u2014 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."
+  },
+  {
+    "name": "--card-glow",
+    "value": "0 0 0 0 transparent",
+    "description": "Brand glow layer \u2014 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."
+  },
+  {
+    "name": "--card-tint",
+    "value": "transparent",
+    "description": "Fill tint \u2014 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."
+  },
   {
     "name": "--card-accent-rail-width",
     "value": "6px",
@@ -7876,10 +7909,30 @@ var COMPONENT_TOKENS = [
     "value": "2.25rem",
     "description": "Accent edge \u2014 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."
   },
+  {
+    "name": "--stat-card-icon-glyph-size",
+    "value": "1.25rem",
+    "description": "Accent edge \u2014 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."
+  },
+  {
+    "name": "--stat-card-icon-radius",
+    "value": "var(--radius-md)",
+    "description": "Accent edge \u2014 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."
+  },
+  {
+    "name": "--stat-card-icon-background",
+    "value": "hsl(var(--primary) / 0.1)",
+    "description": "Medallion tint \u2014 soft brand wash + brand glyph by default; a service retints by overriding * --primary or these tokens directly (rule #44/#45)."
+  },
+  {
+    "name": "--stat-card-icon-foreground",
+    "value": "hsl(var(--primary))",
+    "description": "Medallion tint \u2014 soft brand wash + brand glyph by default; a service retints by overriding * --primary or these tokens directly (rule #44/#45)."
+  },
   {
     "name": "--stat-card-delta-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Accent edge \u2014 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."
+    "description": "Medallion tint \u2014 soft brand wash + brand glyph by default; a service retints by overriding * --primary or these tokens directly (rule #44/#45)."
   },
   {
     "name": "--control-height-compact",
@@ -7963,7 +8016,7 @@ var COMPONENT_TOKENS = [
   },
   {
     "name": "--control-focus-ring-width",
-    "value": "2px",
+    "value": "var(--focus-ring-width)",
     "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
   {
@@ -8076,85 +8129,110 @@ var COMPONENT_TOKENS = [
     "value": "1rem",
     "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
   },
+  {
+    "name": "--checkbox-checked-background",
+    "value": "hsl(var(--primary))",
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
+  },
+  {
+    "name": "--switch-checked-background",
+    "value": "hsl(var(--primary))",
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
+  },
+  {
+    "name": "--toggle-on-background",
+    "value": "hsl(var(--primary))",
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
+  },
+  {
+    "name": "--slider-track-background",
+    "value": "hsl(var(--primary) / 0.2)",
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
+  },
+  {
+    "name": "--slider-range-background",
+    "value": "hsl(var(--primary))",
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
+  },
   {
     "name": "--color-picker-input-width",
     "value": "6.5rem",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-list-max-height",
     "value": "min(300px, 50vh)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-input-padding-x",
     "value": "var(--space-3)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-group-padding",
     "value": "var(--space-1)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-item-padding-y",
     "value": "var(--space-2)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-item-padding-x",
     "value": "var(--space-2)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--search-input-edge-inset",
     "value": "var(--space-3)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--search-input-start-padding",
     "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--search-input-end-padding",
     "value": "calc( var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap) )",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--choice-description-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--color-picker-hex-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--command-group-heading-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--search-input-label-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--tag-input-chip-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--toggle-sm-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--button-sm-font-size",
     "value": "var(--font-size-xs)",
-    "description": "Adjacent control sizes, derived from the active --control-height. The \xB1step * is scaled too so the whole control ladder stays proportional under --scaling."
+    "description": 'Checked/on/active fills \u2014 themeable role expression, defaults equal the current literal * (quiet: no visual change). A service retints the "selected" state by overriding these.'
   },
   {
     "name": "--control-height-compact",
@@ -8186,6 +8264,51 @@ var COMPONENT_TOKENS = [
     "value": "var(--font-size-xs)",
     "description": "Data-display component tokens \u2014 small-by-design text knobs (rule #45/#46)."
   },
+  {
+    "name": "--avatar-background",
+    "value": "hsl(var(--muted))",
+    "description": "Avatar surface \u2014 reads the muted role by default. A service can re-tint the placeholder fill once (e.g. --avatar-background: hsl(var(--accent)))."
+  },
+  {
+    "name": "--avatar-tint",
+    "value": "transparent",
+    "description": "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)."
+  },
+  {
+    "name": "--progress-track-background",
+    "value": "hsl(var(--secondary))",
+    "description": "Progress track + fill \u2014 quiet defaults equal the current literals (rule #44). Track reads secondary, fill reads success; a service re-tones once."
+  },
+  {
+    "name": "--progress-fill-background",
+    "value": "hsl(var(--success))",
+    "description": "Progress track + fill \u2014 quiet defaults equal the current literals (rule #44). Track reads secondary, fill reads success; a service re-tones once."
+  },
+  {
+    "name": "--timeline-dot-done-background",
+    "value": "hsl(var(--success))",
+    "description": "Timeline accents \u2014 dot/line roles, defaults unchanged (rule #44)."
+  },
+  {
+    "name": "--timeline-dot-current-background",
+    "value": "hsl(var(--primary))",
+    "description": "Timeline accents \u2014 dot/line roles, defaults unchanged (rule #44)."
+  },
+  {
+    "name": "--timeline-line-completed-background",
+    "value": "hsl(var(--primary))",
+    "description": "Timeline accents \u2014 dot/line roles, defaults unchanged (rule #44)."
+  },
+  {
+    "name": "--tree-item-active-border",
+    "value": "hsl(var(--primary) / 0.3)",
+    "description": "Tree active item \u2014 border + soft bg tint over the primary role. Defaults equal the current literals (rule #44)."
+  },
+  {
+    "name": "--tree-item-active-background",
+    "value": "hsl(var(--primary) / 0.05)",
+    "description": "Tree active item \u2014 border + soft bg tint over the primary role. Defaults equal the current literals (rule #44)."
+  },
   {
     "name": "--password-strength-score-font-size",
     "value": "var(--font-size-xs)",
@@ -8196,6 +8319,11 @@ var COMPONENT_TOKENS = [
     "value": "var(--font-size-xs)",
     "description": "Data-entry component tokens \u2014 small-by-design text knobs (rule #45/#46)."
   },
+  {
+    "name": "--descriptions-label-width",
+    "value": "8rem",
+    "description": '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 \u2014 a service theme tunes it here instead of forking CSS.)'
+  },
   {
     "name": "--dialog-space-x",
     "value": "var(--space-chrome-x)",
@@ -8251,35 +8379,55 @@ var COMPONENT_TOKENS = [
     "value": "0.3",
     "description": "Soft (subtle) semantic tint ratios \u2014 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)."
   },
+  {
+    "name": "--dialog-content-glow",
+    "value": "0 0 0 0 transparent",
+    "description": "Brand glow layer for the raised dialog/sheet panel \u2014 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."
+  },
   {
     "name": "--empty-state-space-y",
     "value": "var(--space-10)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "Brand glow layer for the raised dialog/sheet panel \u2014 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."
   },
   {
     "name": "--empty-state-space-x",
     "value": "var(--space-6)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "Brand glow layer for the raised dialog/sheet panel \u2014 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."
+  },
+  {
+    "name": "--empty-state-icon-foreground",
+    "value": "hsl(var(--muted-foreground))",
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
+  },
+  {
+    "name": "--empty-state-icon-tint",
+    "value": "hsl(var(--muted))",
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
   },
   {
     "name": "--skeleton-row-gap",
     "value": "var(--space-stack-sm)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
   },
   {
     "name": "--skeleton-cell-gap",
     "value": "var(--space-inline-lg)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
   },
   {
     "name": "--skeleton-card-inset",
     "value": "var(--space-section-active)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
   },
   {
     "name": "--skeleton-radius",
     "value": "var(--radius)",
-    "description": "Soft (subtle) semantic tint ratios \u2014 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)."
+    "description": "EmptyState icon medallion colour \u2014 defaults to the current literal (rule #44), so a service can * recolour the glyph (--icon-foreground) or wash the medallion fill (--icon-tint) without forking."
+  },
+  {
+    "name": "--skeleton-background",
+    "value": "hsl(var(--muted))",
+    "description": "Skeleton placeholder fill \u2014 defaults to the current literal hsl(var(--muted)); themeable so a * service can tint the shimmer to its surface (rule #44) without forking the keyframes."
   },
   {
     "name": "--form-label-width",
@@ -8366,6 +8514,16 @@ var COMPONENT_TOKENS = [
     "value": "var(--font-size-xs)",
     "description": "Navigation primitive tokens: pagination, filters, compact pickers."
   },
+  {
+    "name": "--menubar-item-hover-background",
+    "value": "hsl(var(--accent))",
+    "description": "Menu item hover/highlight tint \u2014 reads the accent role; default unchanged."
+  },
+  {
+    "name": "--menubar-item-hover-foreground",
+    "value": "hsl(var(--accent-foreground))",
+    "description": "Menu item hover/highlight tint \u2014 reads the accent role; default unchanged."
+  },
   {
     "name": "--sidebar-section-label-font-size",
     "value": "var(--font-size-2xs)",
@@ -8421,6 +8579,36 @@ var COMPONENT_TOKENS = [
     "value": "var(--font-size-xs)",
     "description": "Shell (sidebar / topbar / kbd) component tokens \u2014 small-by-design text * knobs (rule #45/#46). A service re-tunes chrome text without moving the * global scale."
   },
+  {
+    "name": "--sidebar-gradient",
+    "value": "none",
+    "description": "Brand-chrome gradient hooks \u2014 opt-in, invisible by default. A service paints * the sidebar/topbar surface by setting these to a gradient (no-op = none)."
+  },
+  {
+    "name": "--topbar-gradient",
+    "value": "none",
+    "description": "Brand-chrome gradient hooks \u2014 opt-in, invisible by default. A service paints * the sidebar/topbar surface by setting these to a gradient (no-op = none)."
+  },
+  {
+    "name": "--sidebar-item-active-color",
+    "value": "hsl(var(--primary))",
+    "description": "Sidebar active-item tint/marker \u2014 tokenised from the literal hsl(var(--primary)) * usages; defaults are byte-identical to the prior hard-coded values. A service * can re-tune the active sub-item accent without forking CSS."
+  },
+  {
+    "name": "--sidebar-item-active-tint",
+    "value": "hsl(var(--primary))",
+    "description": "Sidebar active-item tint/marker \u2014 tokenised from the literal hsl(var(--primary)) * usages; defaults are byte-identical to the prior hard-coded values. A service * can re-tune the active sub-item accent without forking CSS."
+  },
+  {
+    "name": "--sidebar-item-active-background",
+    "value": "hsl(var(--accent))",
+    "description": "Main nav-item active row \u2014 defaults are byte-identical to 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)."
+  },
+  {
+    "name": "--sidebar-item-active-foreground",
+    "value": "hsl(var(--foreground))",
+    "description": "Main nav-item active row \u2014 defaults are byte-identical to 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)."
+  },
   {
     "name": "--table-row-height-compact",
     "value": "1.75rem",
@@ -8456,10 +8644,35 @@ var COMPONENT_TOKENS = [
     "value": "var(--font-size-xs)",
     "description": "Table component tokens: row height, cell padding."
   },
+  {
+    "name": "--table-header-background",
+    "value": "hsl(var(--muted))",
+    "description": "Header band \u2014 its OWN bg + fg tokens (decoupled from --secondary, which == --muted by default so * this is byte-identical). A brand whose --secondary is dark (navy buttons) no longer bleeds a * dark band under the dark header text; it sets both header tokens together to keep contrast."
+  },
+  {
+    "name": "--table-header-foreground",
+    "value": "hsl(var(--muted-foreground))",
+    "description": "Header band \u2014 its OWN bg + fg tokens (decoupled from --secondary, which == --muted by default so * this is byte-identical). A brand whose --secondary is dark (navy buttons) no longer bleeds a * dark band under the dark header text; it sets both header tokens together to keep contrast."
+  },
   {
     "name": "--table-pin-shadow",
     "value": "-6px 0 6px -5px hsl(var(--foreground) / 0.12)",
     "description": "Inline-end shadow that lifts a pinned (sticky) action column off the body it scrolls over."
+  },
+  {
+    "name": "--table-row-striped-background",
+    "value": "hsl(var(--muted) / 0.4)",
+    "description": "Row-state tint washes \u2014 translucent muted over the opaque base. Defaults equal * the prior literals; a service retints by reading another role (e.g. --primary)."
+  },
+  {
+    "name": "--table-row-hover-background",
+    "value": "hsl(var(--muted) / 0.5)",
+    "description": "Row-state tint washes \u2014 translucent muted over the opaque base. Defaults equal * the prior literals; a service retints by reading another role (e.g. --primary)."
+  },
+  {
+    "name": "--table-row-selected-background",
+    "value": "hsl(var(--muted) / 0.3)",
+    "description": "Row-state tint washes \u2014 translucent muted over the opaque base. Defaults equal * the prior literals; a service retints by reading another role (e.g. --primary)."
   }
 ];
 
@@ -12518,7 +12731,7 @@ ${c.example}
 // package.json
 var package_default = {
   name: "@godxjp/ui-mcp",
-  version: "15.0.0",
+  version: "16.5.0",
   description: "Model Context Protocol server for @godxjp/ui \u2014 gives Claude Code / Codex CLI / Cursor / any MCP-aware agent live access to the component catalog, prop vocabulary, design tokens, 45 cardinal rules, copy-paste-ready patterns, 12 design / taste skills synthesised from Leonxlnx/taste-skill, 20+ anti-AI-tell patterns, and a 50-check redesign audit \u2014 token-efficient (list \u2192 drill-down).",
   type: "module",
   main: "./dist/index.js",