@godxjp/ui 33.18.0 → 33.20.0

package/README.md

@@ -18,7 +18,7 @@ npm i @godxjp/ui
 
 <!-- agent-catalog-counts:start -->
 
-The catalog — 171 components, 2263 tokens, 44 cardinal rules — is published in two forms from one
+The catalog — 171 components, 2266 tokens, 44 cardinal rules — is published in two forms from one
 source. **Entry point for either: [`AGENTS.md`](AGENTS.md).**
 <!-- agent-catalog-counts:end -->
 
@@ -56,7 +56,7 @@ static files straight from this public repo — no hosting, no deploy step:
 | [`agent/components-index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json) | 54 KB | all 171 as name + group + tagline — **fetch this first** |
 | [`agent/components/<Name>.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json) | 1 KB–38 KB | one file per component, each with its `importPath` — **this is the route to take** |
 | [`agent/components.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json) | 1.3 MB | all 171 entries in one file — most URL fetchers truncate this silently; prefer the per-component files |
-| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 862 KB | all 2263 design tokens, their values and why they exist |
+| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 863 KB | all 2266 design tokens, their values and why they exist |
 | [`agent/vocabulary.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json) | 7 KB | the controlled prop vocabulary |
 | [`agent/rules.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json) | 23 KB | the 44 cardinal rules |
 <!-- prettier-ignore-end -->

package/agent/START-HERE.md

@@ -3,7 +3,7 @@
 You are about to write code against a design system you did not author. This file is the whole
 contract. Read it before you write JSX.
 
-**This catalog describes `@godxjp/ui` 33.18.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 33.20.0.** If the project you are editing has a different
 version in its `package.json`, read the pinned catalog for THAT version instead
 (`…/v<their-version>/agent/…`). A catalog newer than the installed package describes props that do
 not exist yet; older, and it hides props that do. Neither failure announces itself.
@@ -61,10 +61,10 @@ screen anatomy, the visual target the rules below do not give you. Then fetch in
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 44 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2263 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2266 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 220 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1930 `component` entries are per-part knobs; reach for one only when a role is
+   1933 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 35 shapes that make generated UI look generated, each with the
    fix. Read before you reach for a gradient hero or a wall of coloured chips.
@@ -150,7 +150,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 220 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** The default `--primary` is a neutral placeholder: set it (`:root { --primary: <H> <S>% <L>%; }`, HSL components, no `hsl()` wrapper) or import a theme preset such as `@godxjp/ui/themes/godx.css` |
 | `semantic` | 113 | named roles that follow the seeds — `--ring`, `--text-link`, `--primary-hover`, `--overlay-background` | only when the seed is right and ONE role must differ. That role then stops following a later brand change |
-| `component` | 1930 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
+| `component` | 1933 | per-part knobs, `--{component}-{part}-{property}` | rarely. Most are declared `initial` with the real default at the call site — deliberate, so a scoped override re-resolves instead of freezing at `:root` |
 
 A token whose `value` is `initial` is not empty and not broken: `initial` is the guaranteed-invalid
 value, so the real default is computed where the element paints it. Set it and yours wins.

package/agent/components/Descriptions.json

@@ -22,6 +22,12 @@
       "name": "layout",
       "type": "\"vertical\" | \"horizontal\""
     },
+    {
+      "defaultValue": "\"auto\"",
+      "description": "Horizontal labels only. Omitted/auto retains --descriptions-label-width (8rem), even with columns=1. content (also max-content, min-content or fit-content) uses a shared intrinsic grid track: longest label per visual column, capped by --descriptions-label-max-width (40%) so long labels wrap without clipping at 320px. Use columns=1 for one aligned label column across the entire list. WidthProp lengths and expressions override the width per list; numbers are px. Vertical layout ignores this prop. No consumer CSS override required.",
+      "name": "labelWidth",
+      "type": "WidthProp | \"content\""
+    },
     {
       "defaultValue": "\"start\"",
       "description": "Applies only in layout=\"horizontal\" — a vertical label sits above its value and end-aligning it there would read as a mistake, the same contract `Form` keeps.",

package/agent/components/Flex.json

@@ -95,7 +95,7 @@
     {
       "description": "A FIXED column: number = px, string = any CSS length. Comes with flex: none — a width a sibling can still squeeze is a suggestion, and stacked rows would start at different x offsets. Leaves data-width-raw on the DOM so the measurement stays countable, like gapRaw/padRaw.",
       "name": "width",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "CENTRE this box and CAP it at a page measure (--page-measure-narrow 42rem / -medium 48rem / -wide 72rem): margin-inline:auto + inline-size:100% + max-inline-size. THE public answer to \"full-bleed outside, measured column inside\" — a marketing <section> paints edge to edge and its inner Flex measure=\"wide\" holds the content on the page measure. Deliberately NOT on PageContainer: that owns page padding and a header/toolbar/footer scaffold, so a full-bleed page cannot consume it, and the refusal left the centred column owned by nobody — three showcases each hand-wrote the same four declarations (gh#839). It adds NO gutter: the page inset is pad={{ inline: 6 }}, and one band with two padding owners drifts. A MAX, so nothing binds below the cap at 390px. An explicit `width` wins. Do not give a READING column \"wide\" — prose stays narrow/medium, which bracket Bringhurst's 45-75 characters. Omitted emits no attribute at all.",

package/agent/components/Form.json

@@ -13,12 +13,12 @@
     {
       "description": "Label column width in horizontal layout (number→px). e.g. 120 or '8rem'.",
       "name": "labelWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
-      "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
+      "description": "Cap the control width: number→px, or a CSS length ('20rem', '50%', 'calc(…)'). Omit to fill the column. Caps the control only — the helper and error still span the field column. A size word ('md', 'lg') is a type error, not a width (gh#1431).",
       "name": "controlWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "defaultValue": "\"end\"",

package/agent/components/FormField.json

@@ -61,12 +61,12 @@
     {
       "description": "Override the Form's label width for this field.",
       "name": "labelWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
       "name": "controlWidth",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "Span N columns when inside a `columns` Form grid.",

package/agent/components/Sheet.json

@@ -23,7 +23,7 @@
     {
       "description": "On SheetContent (side left/right): desired panel width (number→px). Default w-3/4 sm:max-w-md.",
       "name": "width",
-      "type": "number | string"
+      "type": "WidthProp"
     },
     {
       "description": "On SheetContent (same name as on DialogContent): fires on every close before focus returns to the trigger. Call event.preventDefault() and focus your own target (e.g. the new page's heading after a drawer navigation) to send focus there instead (gh#1134).",

package/agent/components/Tabs.json

@@ -5,9 +5,9 @@
   "name": "Tabs",
   "props": [
     {
-      "description": "Optional data-driven tab list. When provided, Tabs renders all triggers and content panels. When Tabs owns the initial selection (no `value`, and no `defaultValue` naming an existing ENABLED item), it falls back to the first item that is NOT `disabled` — never a disabled one — and selects nothing if every item is disabled. `icon` is a leading glyph in the trigger (Ant Design `Tab.icon`). `closable` / `closeIcon` only apply under `variant=\"editable-card\"`; `closable: false` opts one tab out of removal (Ant Design `getRemovable`). `forceRender` (Ant Design `Tab.forceRender`) mounts THAT panel up front and keeps it mounted while another tab is selected, without switching the whole strip over with `destroyOnHidden={false}` — antd's per-item `destroyOnHidden` is deliberately not offered, because on this component \"kept mounted\" is one state and it would be a second spelling of `forceRender`. `count` (+ `overflowCount`, default 99; `showZero`, default true; `countLabel`) draws the counter pill beside the label — 「未対応 12」 — in the SAME vocabulary Button and Toggle publish and through the same helper, formatted with `Intl.NumberFormat` in the active locale. Pass `countLabel` to say what the number is: the pill is `aria-hidden` and an `sr-only` clause carries the digits, so the tab announces \"未対応, 12 件の課題\" and never the concatenated \"未対応12\". Prefer this over antd's answer, which is to put a Badge inside `label` — with the number inside the label the package owns neither its size nor its tone as the tab moves between selected / unselected / disabled, so every consumer aligns it differently. `href` makes the strip a ROUTE strip (gh#1364) — see `linkComponent`.",
+      "description": "Optional data-driven tab list. When provided, Tabs renders all triggers and content panels. When Tabs owns the initial selection (no `value`, and no `defaultValue` naming an existing ENABLED item), it falls back to the first item that is NOT `disabled` — never a disabled one — and selects nothing if every item is disabled. `icon` is a leading glyph in the trigger (Ant Design `Tab.icon`). `closable` / `closeIcon` only apply under `variant=\"editable-card\"`; `closable: false` opts one tab out of removal (Ant Design `getRemovable`). `forceRender` (Ant Design `Tab.forceRender`) mounts THAT panel up front and keeps it mounted while another tab is selected, without switching the whole strip over with `destroyOnHidden={false}` — antd's per-item `destroyOnHidden` is deliberately not offered, because on this component \"kept mounted\" is one state and it would be a second spelling of `forceRender`. `countTone=\"neutral\"` keeps passive counts muted in both selected and resting states; omitted/\"accent\" preserves the existing muted resting and accent selected appearance. The compound TabsTrigger accepts the same countTone. Neutral uses --tabs-count-neutral-background/color; accent uses the existing --tabs-count-background/color and --tabs-count-active-background/color knobs (all role mirrors). `count` (+ `overflowCount`, default 99; `showZero`, default true; `countLabel`) draws the counter pill beside the label — 「未対応 12」 — in the SAME vocabulary Button and Toggle publish and through the same helper, formatted with `Intl.NumberFormat` in the active locale. Pass `countLabel` to say what the number is: the pill is `aria-hidden` and an `sr-only` clause carries the digits, so the tab announces \"未対応, 12 件の課題\" and never the concatenated \"未対応12\". Prefer this over antd's answer, which is to put a Badge inside `label` — with the number inside the label the package owns neither its size nor its tone as the tab moves between selected / unselected / disabled, so every consumer aligns it differently. `href` makes the strip a ROUTE strip (gh#1364) — see `linkComponent`.",
       "name": "items",
-      "type": "{ value: string; label: React.ReactNode; content?: React.ReactNode; href?: string; disabled?: boolean; icon?: React.ReactNode; closable?: boolean; closeIcon?: React.ReactNode; forceRender?: boolean; count?: number; overflowCount?: number; showZero?: boolean; countLabel?: string }[]"
+      "type": "{ value: string; label: React.ReactNode; content?: React.ReactNode; href?: string; disabled?: boolean; icon?: React.ReactNode; closable?: boolean; closeIcon?: React.ReactNode; forceRender?: boolean; count?: number; countTone?: \"neutral\" | \"accent\"; overflowCount?: number; showZero?: boolean; countLabel?: string }[]"
     },
     {
       "description": "Controlled active tab key.",

package/agent/components.json

@@ -1020,7 +1020,7 @@
       {
         "description": "A FIXED column: number = px, string = any CSS length. Comes with flex: none — a width a sibling can still squeeze is a suggestion, and stacked rows would start at different x offsets. Leaves data-width-raw on the DOM so the measurement stays countable, like gapRaw/padRaw.",
         "name": "width",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "CENTRE this box and CAP it at a page measure (--page-measure-narrow 42rem / -medium 48rem / -wide 72rem): margin-inline:auto + inline-size:100% + max-inline-size. THE public answer to \"full-bleed outside, measured column inside\" — a marketing <section> paints edge to edge and its inner Flex measure=\"wide\" holds the content on the page measure. Deliberately NOT on PageContainer: that owns page padding and a header/toolbar/footer scaffold, so a full-bleed page cannot consume it, and the refusal left the centred column owned by nobody — three showcases each hand-wrote the same four declarations (gh#839). It adds NO gutter: the page inset is pad={{ inline: 6 }}, and one band with two padding owners drifts. A MAX, so nothing binds below the cap at 390px. An explicit `width` wins. Do not give a READING column \"wide\" — prose stays narrow/medium, which bracket Bringhurst's 45-75 characters. Omitted emits no attribute at all.",
@@ -4729,6 +4729,12 @@
         "name": "layout",
         "type": "\"vertical\" | \"horizontal\""
       },
+      {
+        "defaultValue": "\"auto\"",
+        "description": "Horizontal labels only. Omitted/auto retains --descriptions-label-width (8rem), even with columns=1. content (also max-content, min-content or fit-content) uses a shared intrinsic grid track: longest label per visual column, capped by --descriptions-label-max-width (40%) so long labels wrap without clipping at 320px. Use columns=1 for one aligned label column across the entire list. WidthProp lengths and expressions override the width per list; numbers are px. Vertical layout ignores this prop. No consumer CSS override required.",
+        "name": "labelWidth",
+        "type": "WidthProp | \"content\""
+      },
       {
         "defaultValue": "\"start\"",
         "description": "Applies only in layout=\"horizontal\" — a vertical label sits above its value and end-aligning it there would read as a mistake, the same contract `Form` keeps.",
@@ -5960,12 +5966,12 @@
       {
         "description": "Label column width in horizontal layout (number→px). e.g. 120 or '8rem'.",
         "name": "labelWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
-        "description": "Cap the control width (number→px). Omit to fill the column. Caps the control only — the helper and error still span the field column.",
+        "description": "Cap the control width: number→px, or a CSS length ('20rem', '50%', 'calc(…)'). Omit to fill the column. Caps the control only — the helper and error still span the field column. A size word ('md', 'lg') is a type error, not a width (gh#1431).",
         "name": "controlWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "defaultValue": "\"end\"",
@@ -6096,12 +6102,12 @@
       {
         "description": "Override the Form's label width for this field.",
         "name": "labelWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "Override the Form's control width for this field. Caps the control only — the helper and error still span the field column.",
         "name": "controlWidth",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "Span N columns when inside a `columns` Form grid.",
@@ -8349,7 +8355,7 @@
       {
         "description": "On SheetContent (side left/right): desired panel width (number→px). Default w-3/4 sm:max-w-md.",
         "name": "width",
-        "type": "number | string"
+        "type": "WidthProp"
       },
       {
         "description": "On SheetContent (same name as on DialogContent): fires on every close before focus returns to the trigger. Call event.preventDefault() and focus your own target (e.g. the new page's heading after a drawer navigation) to send focus there instead (gh#1134).",
@@ -8563,9 +8569,9 @@
     "name": "Tabs",
     "props": [
       {
-        "description": "Optional data-driven tab list. When provided, Tabs renders all triggers and content panels. When Tabs owns the initial selection (no `value`, and no `defaultValue` naming an existing ENABLED item), it falls back to the first item that is NOT `disabled` — never a disabled one — and selects nothing if every item is disabled. `icon` is a leading glyph in the trigger (Ant Design `Tab.icon`). `closable` / `closeIcon` only apply under `variant=\"editable-card\"`; `closable: false` opts one tab out of removal (Ant Design `getRemovable`). `forceRender` (Ant Design `Tab.forceRender`) mounts THAT panel up front and keeps it mounted while another tab is selected, without switching the whole strip over with `destroyOnHidden={false}` — antd's per-item `destroyOnHidden` is deliberately not offered, because on this component \"kept mounted\" is one state and it would be a second spelling of `forceRender`. `count` (+ `overflowCount`, default 99; `showZero`, default true; `countLabel`) draws the counter pill beside the label — 「未対応 12」 — in the SAME vocabulary Button and Toggle publish and through the same helper, formatted with `Intl.NumberFormat` in the active locale. Pass `countLabel` to say what the number is: the pill is `aria-hidden` and an `sr-only` clause carries the digits, so the tab announces \"未対応, 12 件の課題\" and never the concatenated \"未対応12\". Prefer this over antd's answer, which is to put a Badge inside `label` — with the number inside the label the package owns neither its size nor its tone as the tab moves between selected / unselected / disabled, so every consumer aligns it differently. `href` makes the strip a ROUTE strip (gh#1364) — see `linkComponent`.",
+        "description": "Optional data-driven tab list. When provided, Tabs renders all triggers and content panels. When Tabs owns the initial selection (no `value`, and no `defaultValue` naming an existing ENABLED item), it falls back to the first item that is NOT `disabled` — never a disabled one — and selects nothing if every item is disabled. `icon` is a leading glyph in the trigger (Ant Design `Tab.icon`). `closable` / `closeIcon` only apply under `variant=\"editable-card\"`; `closable: false` opts one tab out of removal (Ant Design `getRemovable`). `forceRender` (Ant Design `Tab.forceRender`) mounts THAT panel up front and keeps it mounted while another tab is selected, without switching the whole strip over with `destroyOnHidden={false}` — antd's per-item `destroyOnHidden` is deliberately not offered, because on this component \"kept mounted\" is one state and it would be a second spelling of `forceRender`. `countTone=\"neutral\"` keeps passive counts muted in both selected and resting states; omitted/\"accent\" preserves the existing muted resting and accent selected appearance. The compound TabsTrigger accepts the same countTone. Neutral uses --tabs-count-neutral-background/color; accent uses the existing --tabs-count-background/color and --tabs-count-active-background/color knobs (all role mirrors). `count` (+ `overflowCount`, default 99; `showZero`, default true; `countLabel`) draws the counter pill beside the label — 「未対応 12」 — in the SAME vocabulary Button and Toggle publish and through the same helper, formatted with `Intl.NumberFormat` in the active locale. Pass `countLabel` to say what the number is: the pill is `aria-hidden` and an `sr-only` clause carries the digits, so the tab announces \"未対応, 12 件の課題\" and never the concatenated \"未対応12\". Prefer this over antd's answer, which is to put a Badge inside `label` — with the number inside the label the package owns neither its size nor its tone as the tab moves between selected / unselected / disabled, so every consumer aligns it differently. `href` makes the strip a ROUTE strip (gh#1364) — see `linkComponent`.",
         "name": "items",
-        "type": "{ value: string; label: React.ReactNode; content?: React.ReactNode; href?: string; disabled?: boolean; icon?: React.ReactNode; closable?: boolean; closeIcon?: React.ReactNode; forceRender?: boolean; count?: number; overflowCount?: number; showZero?: boolean; countLabel?: string }[]"
+        "type": "{ value: string; label: React.ReactNode; content?: React.ReactNode; href?: string; disabled?: boolean; icon?: React.ReactNode; closable?: boolean; closeIcon?: React.ReactNode; forceRender?: boolean; count?: number; countTone?: \"neutral\" | \"accent\"; overflowCount?: number; showZero?: boolean; countLabel?: string }[]"
       },
       {
         "description": "Controlled active tab key.",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 171,
     "patterns": 28,
     "rules": 44,
-    "tokens": 2263,
+    "tokens": 2266,
     "vocabulary": 16
   },
   "design": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/DESIGN.md",
@@ -54,19 +54,19 @@
   "note": "Pin to the tag that matches the @godxjp/ui version you installed. A catalog newer than your package describes props you do not have; older, and it hides props you do.",
   "read": {
     "live": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json",
-    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.18.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.20.0/agent/index.json"
   },
   "source": "mcp/src/data — the same data @godxjp/ui-mcp serves — plus the foundation and semantic token tiers, read from src/tokens/*.css",
   "start": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md",
   "tokenTiers": {
     "component": "per-part knobs, --{component}-{part}-{property}; usually leave these alone",
     "counts": {
-      "component": 1930,
+      "component": 1933,
       "foundation": 220,
       "semantic": 113
     },
     "foundation": "the seeds a consumer is invited to set — --primary, --background, --radius",
     "semantic": "named roles that follow the seeds — --ring, --text-link, --overlay-background"
   },
-  "version": "33.18.0"
+  "version": "33.20.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 171 components, 2263 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.18.0.
+> A Japanese-enterprise React design system: 171 components, 2266 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.20.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.18.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.20.0`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -19,7 +19,7 @@ that can only fetch URLs.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 54 KB — all 171 components as name, group, tagline, plus `absorbed`: the names that do NOT exist and map to it (`Combobox` → `Select`).
 - [components/<Name>.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json): one file per component (1 KB–38 KB, median 6 KB). Read the index, then fetch only the ones you chose — this is the selective route, and the reason you do not need the blob.
 - [components.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json): 1.3 MB — every entry in one file. Most URL fetchers truncate a response this size without saying so; prefer the per-component files.
-- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 220 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1930 `component` knobs.
+- [tokens.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json): every design token with its value, the reason it exists, and its `tier` — 220 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1933 `component` knobs.
 - [vocabulary.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json): the controlled prop vocabulary — which prop name means what, across every component.
 - [rules.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json): 44 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 35 shapes that make generated UI look generated, each with its fix.
@@ -27,7 +27,7 @@ that can only fetch URLs.
 ## Pinning
 
 Every URL above tracks `main`. To pin to the release a project actually installed, swap `main` for
-the tag: `.../godx-jp/godxjp-ui/v33.18.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.20.0/agent/...`. A catalog that does not match the installed
 package describes props that are absent, or hides props that are present, and says nothing either way.
 
 Pinned catalogs only exist for releases whose tag actually contains `agent/`. If `…/v<version>/agent/index.json` returns 404, that release predates this catalog: read `…/main/…` instead and compare `index.json` → `version` against the package you have, so you at least know which way it drifted.

package/agent/tokens.json

@@ -6600,11 +6600,17 @@
     "value": "var(--icon-size-xs)"
   },
   {
-    "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 — a service theme tunes it here instead of forking CSS.)",
+    "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; use labelWidth=\"content\" for shared intrinsic sizing. (rule #44/#45 — a service theme tunes it here instead of forking CSS.)",
     "name": "--descriptions-label-width",
     "tier": "component",
     "value": "8rem"
   },
+  {
+    "description": "Cap intrinsic labels so long labels wrap and values retain space on narrow screens.",
+    "name": "--descriptions-label-max-width",
+    "tier": "component",
+    "value": "40%"
+  },
   {
     "description": "Row-to-row gap (gh#294). Default = the historical hardcoded `gap-y-3`, so nothing changes visually by default. A consumer composing Descriptions beside a Form/FormField (a read-only block above an editable field on the same card) retunes this to `var(--space-4)` to match Form's own field-to-field rhythm instead of the two blocks reading as visually unrelated.",
     "name": "--descriptions-row-gap",
@@ -9449,6 +9455,18 @@
     "tier": "component",
     "value": "var(--radius-pill)"
   },
+  {
+    "description": "default = hsl(var(--muted)) at the call site",
+    "name": "--tabs-count-neutral-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "default = hsl(var(--muted-foreground)) at the call site",
+    "name": "--tabs-count-neutral-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "default = hsl(var(--muted)) at the call site",
     "name": "--tabs-count-background",

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { WidthProp } from "../../props/vocabulary/shared.prop.js";
 import type { DescriptionsLayoutProp } from "../../props/vocabulary/interaction.prop.js";
 import type { DescriptionsColumnProp, DescriptionsItemsProp, DescriptionsSpanProp } from "../../props/vocabulary/data.prop.js";
 export type { DescriptionsLayoutProp };
@@ -16,6 +17,9 @@ export interface DescriptionsProps {
      * it there would read as a mistake, exactly like `Form`'s own contract.
      */
     labelAlign?: "start" | "end";
+    /** Horizontal label width. Omitted/auto keeps the theme width; content shares the longest
+     * label track per visual column. CSS lengths (numbers are px) override the theme per list. */
+    labelWidth?: WidthProp | "content";
     /**
      * Draw the grid as a bordered table (antd `bordered`): an outer frame, a rule between every
      * cell, and a shaded label cell. Colour and rhythm come from the `--descriptions-*` tokens.
@@ -29,7 +33,7 @@ export interface DescriptionsProps {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function Descriptions({ columns, layout, labelAlign, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
+export declare function Descriptions({ columns, layout, labelAlign, labelWidth, bordered, items, className, children, }: DescriptionsProps): React.JSX.Element;
 export declare namespace Descriptions {
     export { DescriptionsItem as Item };
 }

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

@@ -5,7 +5,8 @@ import { cn } from "../../lib/utils.js";
 const DescriptionsLayoutContext = React.createContext({
   layout: "vertical",
   labelAlign: "start",
-  bordered: false
+  bordered: false,
+  contentLabels: false
 });
 const BREAKPOINT_LADDER = ["sm", "md", "lg", "xl"];
 function responsiveVars(name, base, steps) {
@@ -25,6 +26,7 @@ function Descriptions({
   columns = 2,
   layout = "vertical",
   labelAlign = "start",
+  labelWidth,
   bordered = false,
   items,
   className,
@@ -32,21 +34,31 @@ function Descriptions({
 }) {
   const legacyColumns = typeof columns === "number" ? LEGACY_COLUMN_CLASS[columns] : void 0;
   const responsiveColumns = legacyColumns === void 0 ? typeof columns === "number" ? { sm: Math.min(columns, 2), lg: columns } : columns : void 0;
+  const intrinsicWidth = labelWidth === "content" || labelWidth === "max-content" || labelWidth === "min-content" || labelWidth === "fit-content";
+  const contentLabels = layout === "horizontal" && intrinsicWidth;
+  const labelStyle = layout === "horizontal" && labelWidth !== void 0 && labelWidth !== "auto" && !intrinsicWidth ? {
+    "--descriptions-label-width": typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth
+  } : {};
+  const contentColumns = contentLabels && !responsiveColumns ? typeof columns === "number" ? columns === 3 ? { sm: 2, lg: 3 } : columns === 2 ? { sm: 2 } : {} : columns : responsiveColumns;
   const context = React.useMemo(
-    () => ({ layout, labelAlign, bordered }),
-    [layout, labelAlign, bordered]
+    () => ({ layout, labelAlign, bordered, contentLabels }),
+    [layout, labelAlign, bordered, contentLabels]
   );
   return /* @__PURE__ */ jsx(DescriptionsLayoutContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
     "dl",
     {
       "data-slot": "descriptions",
       "data-columns": typeof columns === "number" ? columns : void 0,
-      "data-columns-responsive": responsiveColumns ? "" : void 0,
+      "data-columns-responsive": responsiveColumns || contentLabels ? "" : void 0,
+      "data-label-width": contentLabels ? "content" : void 0,
       "data-bordered": bordered ? "" : void 0,
-      style: responsiveColumns ? responsiveVars("--descriptions-column-count", 1, responsiveColumns) : void 0,
+      style: {
+        ...contentColumns ? responsiveVars("--descriptions-column-count", 1, contentColumns) : {},
+        ...labelStyle
+      },
       className: cn(
         "grid gap-x-[var(--descriptions-column-gap)] gap-y-[var(--descriptions-row-gap)]",
-        legacyColumns,
+        !contentLabels && legacyColumns,
         className
       ),
       children: [
@@ -71,9 +83,9 @@ const LEGACY_SPAN_CLASS = {
   3: "sm:col-span-2 lg:col-span-3"
 };
 function DescriptionsItem({ label, mono, span, className, children }) {
-  const { layout, labelAlign } = React.useContext(DescriptionsLayoutContext);
-  const legacySpan = typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
-  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? { sm: span } : span : void 0;
+  const { layout, labelAlign, contentLabels } = React.useContext(DescriptionsLayoutContext);
+  const legacySpan = !contentLabels && typeof span === "number" ? LEGACY_SPAN_CLASS[span] : void 0;
+  const responsiveSpan = span !== void 0 && span !== "filled" && legacySpan === void 0 ? typeof span === "number" ? span === 3 ? { sm: 2, lg: 3 } : { sm: span } : span : void 0;
   const endAlignedLabel = layout === "horizontal" && labelAlign === "end";
   return /* @__PURE__ */ jsxs(
     "div",

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

@@ -55,9 +55,10 @@ type TogglePressedFields = {
  * accessible name (gh#734) — without a second counting API growing beside this one (gh#762).
  * It defaults to `toggle`, so every existing call emits the identical markup it always has.
  */
-declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, }: ToggleCountFields & {
+declare function useCounterPill({ count, overflowCount, showZero, countLabel, ariaLabel, slot, countTone, }: ToggleCountFields & {
     ariaLabel?: string;
     slot?: string;
+    countTone?: "neutral" | "accent";
 }): {
     pill: null;
     resolvedAriaLabel: string | undefined;

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

@@ -58,7 +58,8 @@ function useCounterPill({
   showZero = true,
   countLabel,
   ariaLabel,
-  slot = "toggle"
+  slot = "toggle",
+  countTone
 }) {
   const { locale } = useTranslation();
   const visible = count != null && (count !== 0 || showZero);
@@ -73,7 +74,16 @@ function useCounterPill({
   const spoken = countLabel ? `${formatted} ${countLabel}` : formatted;
   return {
     pill: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("span", { "data-slot": `${slot}-count`, className: `ui-${slot}-count`, "aria-hidden": "true", children: formatted }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": `${slot}-count`,
+          "data-count-tone": countTone,
+          className: `ui-${slot}-count`,
+          "aria-hidden": "true",
+          children: formatted
+        }
+      ),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spoken}` })
     ] }),
     resolvedAriaLabel: ariaLabel == null ? ariaLabel : `${ariaLabel}, ${spoken}`

package/dist/components/navigation/tabs.d.ts

@@ -24,7 +24,7 @@ export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<Reac
     value: string;
     /** RAC `isDisabled`; ALSO written to the button so `disabled:` utilities keep matching. */
     disabled?: boolean;
-} & Pick<TabItemProp, "count" | "countLabel" | "overflowCount" | "showZero"> & React.RefAttributes<HTMLButtonElement>>;
+} & Pick<TabItemProp, "count" | "countLabel" | "countTone" | "overflowCount" | "showZero"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "value"> & {
     /** The panel's key — must match a `TabsTrigger value`. RAC `id`. */
     value: string;

package/dist/components/navigation/tabs.js

@@ -37,9 +37,17 @@ function TabCount({
   count,
   overflowCount,
   showZero,
-  countLabel
+  countLabel,
+  countTone
 }) {
-  const { pill } = useCounterPill({ count, overflowCount, showZero, countLabel, slot: "tabs" });
+  const { pill } = useCounterPill({
+    count,
+    overflowCount,
+    showZero,
+    countLabel,
+    countTone,
+    slot: "tabs"
+  });
   return pill;
 }
 const TABS_LIST_BASE_CLASS_NAME = "group/tabs-list text-muted-foreground inline-flex w-fit max-w-full min-w-0 items-center justify-center-safe rounded-lg p-1 group-data-[orientation=vertical]/tabs:flex-col data-[orientation=horizontal]:[scrollbar-width:none] data-[orientation=horizontal]:overflow-x-auto data-[orientation=horizontal]:overflow-y-hidden data-[variant=line]:gap-[var(--tabs-list-line-space-gap)] data-[variant=line]:rounded-none data-[variant=line]:bg-transparent [&[data-orientation=horizontal]::-webkit-scrollbar]:hidden";
@@ -344,7 +352,8 @@ function Tabs({
                   count: item.count,
                   overflowCount: item.overflowCount,
                   showZero: item.showZero,
-                  countLabel: item.countLabel
+                  countLabel: item.countLabel,
+                  countTone: item.countTone
                 }
               ),
               removable ? (
@@ -612,7 +621,8 @@ function TabsRouteStrip({
                   count: item.count,
                   overflowCount: item.overflowCount,
                   showZero: item.showZero,
-                  countLabel: item.countLabel
+                  countLabel: item.countLabel,
+                  countTone: item.countTone
                 }
               )
             ]
@@ -717,6 +727,7 @@ const TabsTrigger = React.forwardRef(
     overflowCount,
     showZero,
     countLabel,
+    countTone,
     children,
     onKeyDown,
     onClick,
@@ -810,7 +821,8 @@ const TabsTrigger = React.forwardRef(
               count,
               overflowCount,
               showZero,
-              countLabel
+              countLabel,
+              countTone
             }
           )
         ]

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "33.18.0",
+  "version": "33.20.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

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

@@ -59,7 +59,7 @@ export type ProseProp = {
     className?: ClassNameProp;
     children?: ChildrenProp;
 };
-import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ExtraProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp, TypographyCopyConfigProp } from "../vocabulary/index.js";
+import type { ActionProp, ClassNameProp, DescriptionProp, IconProp, TitleProp, ExtraProp, ColumnDefProp, GetRowIdProp, GetRowLabelProp, OnRowClickProp, OnSelectChangeProp, OnSortChangeProp, OnTableDensityChangeProp, SelectedIdsProp, SortStateProp, TableDensityProp, TablePresetProp, BreakpointProp, DensityProp, ChildrenProp, PendingProp, ToneProp, WidthProp, AvatarShapeProp, HeadingLevelProp, HandlerProp, SizeProp, LabelProp, IdProp, DescriptionsLayoutProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, GapProp, SortDirectionProp, OnColumnFilterChangeProp, OnRowProp, TableExpandableProp, TableRowSelectionProp, TableScrollProp, TableStickyProp, TableSummaryProp, DisabledProp, OnClickProp, ValueProp, DefaultValueProp, OnValueChangeProp, TypographyCopyConfigProp } from "../vocabulary/index.js";
 import type { TreeFieldNamesProp, TreeOptionProp } from "./data-entry.prop.js";
 /**
  * One key in a `Legend`: a tone, and the words that tone stands for.
@@ -206,6 +206,8 @@ export type DescriptionsProp = {
     layout?: DescriptionsLayoutProp;
     /** Label text alignment inside the label column. Applies only to `layout="horizontal"`. */
     labelAlign?: "start" | "end";
+    /** Horizontal labels: auto keeps the theme width; content shares an intrinsic track across rows. */
+    labelWidth?: WidthProp | "content";
     /** Draw the grid as a bordered table with shaded label cells (antd `bordered`). */
     bordered?: boolean;
     /** Declarative items (antd `items`) — the alternative to composing `Descriptions.Item`. */

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

@@ -355,6 +355,8 @@ export type TabItemProp = {
      * lands somewhere different. The slot is what lets the tab state drive the pill.
      */
     count?: number;
+    /** neutral stays muted even when selected; accent preserves the existing selection emphasis. */
+    countTone?: "neutral" | "accent";
     /** Cap for `count` — beyond it the pill shows `{overflowCount}+` (e.g. `99+`). Default `99`. */
     overflowCount?: number;
     /** Render the pill when `count` is 0. Default `true`, matching Button and Toggle. */

package/dist/props/registry.d.ts

@@ -122,7 +122,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly WidthProp: {
         readonly file: "vocabulary/shared.prop.ts";
         readonly category: "shared";
-        readonly description: "Explicit layout length (number→px | CSS string) — NOT the SizeProp tier";
+        readonly description: 'Explicit layout length (number→px | CSS length string: 20rem, 50%, calc()/min()/var()) — NOT the SizeProp tier; "md" is a type error';
     };
     readonly ControlWidthProp: {
         readonly file: "vocabulary/shared.prop.ts";
@@ -2189,7 +2189,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly DescriptionsProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ClassNameProp"];
+        readonly vocabulary: readonly ["ClassNameProp", {
+            readonly field: "labelWidth";
+            readonly local: true;
+            readonly reason: "WidthProp CSS lengths plus content for shared intrinsic label tracks; auto preserves the theme width (gh#1441).";
+        }];
     };
     readonly DescriptionsItemProp: {
         readonly group: "data-display";
@@ -3034,6 +3038,10 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly group: "navigation";
         readonly file: "components/navigation.prop.ts";
         readonly vocabulary: readonly ["ValueProp", "LabelProp", "ChildrenProp", "DisabledProp", "IconProp", {
+            readonly field: "countTone";
+            readonly local: true;
+            readonly reason: "Counter intent: neutral (shared ToneProp term, as Badge) or accent (existing selected emphasis). Per-item and compound trigger parity, gh#1442.";
+        }, {
             readonly field: "count";
             readonly local: true;
             readonly reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp and ToggleProp (count/overflowCount/showZero) and drawn by the same `useCounterPill`, so a counted tab, a counted chip and a counted button are one thing — gh#312 / gh#734 / gh#762.";