@godxjp/ui 32.1.0 → 32.1.2

package/README.md

@@ -18,7 +18,7 @@ npm i @godxjp/ui
 
 <!-- agent-catalog-counts:start -->
 
-The catalog — 161 components, 2186 tokens, 43 cardinal rules — is published in two forms from one
+The catalog — 161 components, 2193 tokens, 43 cardinal rules — is published in two forms from one
 source. **Entry point for either: [`AGENTS.md`](AGENTS.md).**
 <!-- agent-catalog-counts:end -->
 
@@ -55,7 +55,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) | 47 KB | all 161 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–36 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.2 MB | all 161 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) | 842 KB | all 2186 design tokens, their values and why they exist |
+| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 845 KB | all 2193 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) | 21 KB | the 43 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` 32.1.0.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 32.1.2.** 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.
@@ -56,10 +56,10 @@ Then ask it: `search_components`, `get_component`, `get_tokens`, `get_rule`, `li
    its `importPath`, and its examples. Fetch only the handful you picked in step 1.
 3. `rules.json` — 43 cardinal rules. The ones about raw HTML and hardcoded colour are not
    style advice.
-4. `tokens.json` — 2186 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2193 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 211 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1863 `component` entries are per-part knobs; reach for one only when a role is
+   1870 `component` entries are per-part knobs; reach for one only when a role is
    right everywhere except one component.
 5. `anti-ai-tells.json` — 26 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.
@@ -145,7 +145,7 @@ has stopped following the brand.
 |---|---|---|---|
 | `foundation` | 211 | the seeds — `--primary`, `--background`, `--foreground`, `--radius`, `--font-size-base`, `--shadow-color`. Everything below is derived from these | **yes — this is the main road.** Handed a brand colour, this is where it goes: `:root { --primary: <H> <S>% <L>%; }` (HSL components, no `hsl()` wrapper) |
 | `semantic` | 112 | 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` | 1863 | 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` | 1870 | 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/Calendar.json

@@ -22,7 +22,7 @@
     },
     {
       "defaultValue": "\"auto\"",
-      "description": "How the grid claims horizontal space. `auto` (default) shrink-wraps to seven fixed day columns — the shape a picker popover needs, because the panel is shrink-to-fit and takes ITS width from the calendar inside it. Use `full` for an EMBEDDED calendar (a shift board, a booking month) that is the content of a Card rather than a dropdown: it stacks the months and lets the day cells share the row. Measured at a 1200px container: auto → root 248px / cells 32px; full → root 1200px / cells 168px; the DatePicker popover stays 250px either way. Do NOT reach for `className=\"w-full\"` instead — it widens the root and leaves the grid at 224px pinned left.",
+      "description": "How the grid claims horizontal space. `auto` (default) shrink-wraps to seven fixed day columns — the shape a picker popover needs, because the panel is shrink-to-fit and takes ITS width from the calendar inside it. Use `full` for an EMBEDDED calendar (a shift board, a booking month) that is the content of a Card rather than a dropdown: it stacks the months and lets the day cells share the row, each reading from the start edge with an inset (`--calendar-full-day-padding-inline` / `-block`, default --space-2 / --space-1, so the numeral clears the `text-edge-inset` audit; gh#1258). Measured at a 1200px container: auto → root 248px / cells 32px; full → root 1200px / cells 168px; the DatePicker popover stays 250px either way. Do NOT reach for `className=\"w-full\"` instead — it widens the root and leaves the grid at 224px pinned left.",
       "name": "width",
       "type": "\"auto\" | \"full\""
     },

package/agent/components/ListRow.json

@@ -81,7 +81,8 @@
     "DO put the row's action in `trailing` (a `ghost`/`outline` Button, a DropdownMenu trigger, a Switch, or a status Badge). DO pass `as=\"li\"` when the rows live inside a semantic list, and build that list as `<Flex as=\"ul\" marker=\"none\">` — `ui-audit` flags a raw `<ul>`/`role=\"list\"` as `no-hand-rolled-list`.",
     "DO use `unread` for a notification list — the dot is a SHAPE with localized `sr-only` text (\"Unread\"/\"Read\"), so it never reads as colour alone, and the row surface reads `--list-row-unread-background` (default `hsl(var(--muted))` — chosen so the xs muted description line stays WCAG AA on the emphasized surface; `--accent` would drop it to 4.23:1). DON'T substitute a `Badge` — that renders a labelled pill, not a compact status dot.",
     "DO pass `density=\"compact\"` for the canonical invitation / history row — an Avatar, a title (+ description) and one or two small trailing Buttons that must read as ONE line inside a narrow card (≈326px content at 390px), or a history row whose status Badge + ISO-8601 date belongs beside the title. Measured at 390px: 62px tall vs 126px at the default density (where the actions wrapped), history row 41px vs 114px. DON'T reach for it just to \"make things tighter\" on a roomy page — the default density is the entity-row measure.",
-    "DON'T add one-off `min-width`/wrapping CSS in the consumer app for a long title + two trailing Buttons. The row already shrinks and WRAPS: the content column keeps only `min(var(--list-row-body-min-width), 100%)` and the trailing actions drop onto their own line below the threshold. Retune the threshold with `--list-row-body-min-width` (default 12rem) and the action gap with `--list-row-trailing-gap`; pass `overflow=\"wrap\"` (usually with `align=\"start\"`) when the title must stay fully readable at 390px instead of truncating."
+    "DON'T add one-off `min-width`/wrapping CSS in the consumer app for a long title + two trailing Buttons. The row already shrinks and WRAPS: the content column keeps only `min(var(--list-row-body-min-width), 100%)` and the trailing actions drop onto their own line below the threshold. Retune the threshold with `--list-row-body-min-width` (default 12rem) and the action gap with `--list-row-trailing-gap`; pass `overflow=\"wrap\"` (usually with `align=\"start\"`) when the title must stay fully readable at 390px instead of truncating.",
+    "DO expect rows placed DIRECTLY in a padded (non-flush) `CardContent` — or in a `Flex as=\"ul\"` there — to drop their own inline padding: the card already holds the inset, so the row text lines up with the CardTitle instead of sitting 16px inside it. Inside `CardContent flush` (the documented home, with edge-to-edge dividers) the row keeps `--list-row-padding-x`."
   ],
   "useCases": [
     "Account security page — a list of active sessions (device + last-seen as title/description, a destructive 'Revoke' Button in trailing).",

package/agent/components/Select.json

@@ -24,7 +24,7 @@
       "type": "number"
     },
     {
-      "description": "Collapse extra selected labels.",
+      "description": "Collapse extra selected labels into a \"+N\" chip. Without it (mode=\"multiple\"/\"tags\"), the chips WRAP and the trigger grows to hold them, antd's default — a chip is never clipped out of sight. Set it when the trigger must stay one line (a dense rail or table cell).",
       "name": "maxTagCount",
       "type": "number"
     },
@@ -288,7 +288,7 @@
       "type": "React.ReactNode"
     },
     {
-      "description": "antd `suffixIcon` — replaces the trailing chevron; `null` removes the indicator entirely (antd's own replacement for the deprecated showArrow). While a value is clearable the ✕ owns that seat, as in antd.",
+      "description": "antd `suffixIcon` — replaces the trailing chevron; `null` removes the indicator entirely (antd's own replacement for the deprecated showArrow) — and, with no clear and no loading, the trigger stops reserving the chevron's end padding, so a `width=\"auto\"` trigger ends at its value. While a value is clearable the ✕ owns that seat, as in antd.",
       "name": "suffixIcon",
       "type": "React.ReactNode"
     },

package/agent/components/Toggle.json

@@ -16,9 +16,9 @@
     },
     {
       "defaultValue": "\"default\"",
-      "description": "Visual style. `default` is a 1px TRANSPARENT border (a toolbar affordance — no resting surface at all), `outline` a hairline on --background, and `soft` (gh#734) the REST FILL a chip needs: hsl(var(--secondary)), byte-identical to the fill `Badge variant=\"secondary\"` and `Button variant=\"secondary\"` already paint, so a chip, a badge and a button on one row are one family. `soft` is antd Tag's resting surface and is what makes a FILTER CHIP legible before it is pressed — with `default` or `outline` the chip reads as transparent, which is the reported defect. Hover is the opaque --secondary-hover (not a translucent tint, which would shift between a page and a Card); pressed still wins over both.",
+      "description": "Visual style. `default` is a 1px TRANSPARENT border (a toolbar affordance — no resting surface at all), `outline` a hairline on --background, and `soft` (gh#734) the REST FILL a chip needs: hsl(var(--secondary)), byte-identical to the fill `Badge variant=\"secondary\"` and `Button variant=\"secondary\"` already paint, so a chip, a badge and a button on one row are one family. `soft` is antd Tag's resting surface and is what makes a FILTER CHIP legible before it is pressed — with `default` or `outline` the chip reads as transparent, which is the reported defect. Hover is the opaque --secondary-hover (not a translucent tint, which would shift between a page and a Card); pressed still wins over both. `quiet` (gh#1257) is the LOW-KEY pressed state for a mark beside content (a comment star, a reaction): the transparent rest of `default`, and pressed as a --secondary fill with --foreground text and the primary hairline, instead of a solid primary block; knobs `--toggle-quiet-on-{background,color,count-background,count-color}`.",
       "name": "variant",
-      "type": "\"default\" | \"outline\" | \"soft\""
+      "type": "\"default\" | \"outline\" | \"soft\" | \"quiet\""
     },
     {
       "defaultValue": "\"md\"",
@@ -68,6 +68,7 @@
   "storyPath": "data-entry/toggle.tsx",
   "tagline": "React Aria toggle button with default/outline/soft variants and tokenized sizes.",
   "usage": [
+    "DO use `variant=\"quiet\"` for a pressed state that should stay LOW-KEY — a comment star, a like/reaction, a pin beside a row. The solid primary fill is for a selected filter or mode; on a mark beside content it reads as the loudest thing on the screen. No app CSS needed (gh#1257).",
     "DO provide an accessible label when the toggle only contains an icon.",
     "DON'T use Toggle for multi-option selection; use ToggleGroup.",
     "DO reach for `count` for a faceted filter chip, a counted segmented toggle or a reaction chip — Toggle is the primitive that owns BOTH the count and the pressed state.",

package/agent/components/ToggleGroup.json

@@ -29,7 +29,7 @@
       "defaultValue": "\"default\"",
       "description": "Visual style, PROVIDED TO EVERY ITEM via context — set it once on the group, not on each ToggleGroupItem. An explicit `variant` on an item still wins. The default is applied per item by toggleVariants, so an unset group emits no `data-variant` at all. `soft` (gh#734) is the chip fill: use it for a tag-filter panel, where `default`/`outline` leave the unselected chips reading as transparent.",
       "name": "variant",
-      "type": "\"default\" | \"outline\" | \"soft\""
+      "type": "\"default\" | \"outline\" | \"soft\" | \"quiet\""
     },
     {
       "defaultValue": "\"default\"",

package/agent/components.json

@@ -4353,7 +4353,8 @@
       "DO put the row's action in `trailing` (a `ghost`/`outline` Button, a DropdownMenu trigger, a Switch, or a status Badge). DO pass `as=\"li\"` when the rows live inside a semantic list, and build that list as `<Flex as=\"ul\" marker=\"none\">` — `ui-audit` flags a raw `<ul>`/`role=\"list\"` as `no-hand-rolled-list`.",
       "DO use `unread` for a notification list — the dot is a SHAPE with localized `sr-only` text (\"Unread\"/\"Read\"), so it never reads as colour alone, and the row surface reads `--list-row-unread-background` (default `hsl(var(--muted))` — chosen so the xs muted description line stays WCAG AA on the emphasized surface; `--accent` would drop it to 4.23:1). DON'T substitute a `Badge` — that renders a labelled pill, not a compact status dot.",
       "DO pass `density=\"compact\"` for the canonical invitation / history row — an Avatar, a title (+ description) and one or two small trailing Buttons that must read as ONE line inside a narrow card (≈326px content at 390px), or a history row whose status Badge + ISO-8601 date belongs beside the title. Measured at 390px: 62px tall vs 126px at the default density (where the actions wrapped), history row 41px vs 114px. DON'T reach for it just to \"make things tighter\" on a roomy page — the default density is the entity-row measure.",
-      "DON'T add one-off `min-width`/wrapping CSS in the consumer app for a long title + two trailing Buttons. The row already shrinks and WRAPS: the content column keeps only `min(var(--list-row-body-min-width), 100%)` and the trailing actions drop onto their own line below the threshold. Retune the threshold with `--list-row-body-min-width` (default 12rem) and the action gap with `--list-row-trailing-gap`; pass `overflow=\"wrap\"` (usually with `align=\"start\"`) when the title must stay fully readable at 390px instead of truncating."
+      "DON'T add one-off `min-width`/wrapping CSS in the consumer app for a long title + two trailing Buttons. The row already shrinks and WRAPS: the content column keeps only `min(var(--list-row-body-min-width), 100%)` and the trailing actions drop onto their own line below the threshold. Retune the threshold with `--list-row-body-min-width` (default 12rem) and the action gap with `--list-row-trailing-gap`; pass `overflow=\"wrap\"` (usually with `align=\"start\"`) when the title must stay fully readable at 390px instead of truncating.",
+      "DO expect rows placed DIRECTLY in a padded (non-flush) `CardContent` — or in a `Flex as=\"ul\"` there — to drop their own inline padding: the card already holds the inset, so the row text lines up with the CardTitle instead of sitting 16px inside it. Inside `CardContent flush` (the documented home, with edge-to-edge dividers) the row keeps `--list-row-padding-x`."
     ],
     "useCases": [
       "Account security page — a list of active sessions (device + last-seen as title/description, a destructive 'Revoke' Button in trailing).",
@@ -6431,7 +6432,7 @@
         "type": "number"
       },
       {
-        "description": "Collapse extra selected labels.",
+        "description": "Collapse extra selected labels into a \"+N\" chip. Without it (mode=\"multiple\"/\"tags\"), the chips WRAP and the trigger grows to hold them, antd's default — a chip is never clipped out of sight. Set it when the trigger must stay one line (a dense rail or table cell).",
         "name": "maxTagCount",
         "type": "number"
       },
@@ -6695,7 +6696,7 @@
         "type": "React.ReactNode"
       },
       {
-        "description": "antd `suffixIcon` — replaces the trailing chevron; `null` removes the indicator entirely (antd's own replacement for the deprecated showArrow). While a value is clearable the ✕ owns that seat, as in antd.",
+        "description": "antd `suffixIcon` — replaces the trailing chevron; `null` removes the indicator entirely (antd's own replacement for the deprecated showArrow) — and, with no clear and no loading, the trigger stops reserving the chevron's end padding, so a `width=\"auto\"` trigger ends at its value. While a value is clearable the ✕ owns that seat, as in antd.",
         "name": "suffixIcon",
         "type": "React.ReactNode"
       },
@@ -10200,7 +10201,7 @@
       },
       {
         "defaultValue": "\"auto\"",
-        "description": "How the grid claims horizontal space. `auto` (default) shrink-wraps to seven fixed day columns — the shape a picker popover needs, because the panel is shrink-to-fit and takes ITS width from the calendar inside it. Use `full` for an EMBEDDED calendar (a shift board, a booking month) that is the content of a Card rather than a dropdown: it stacks the months and lets the day cells share the row. Measured at a 1200px container: auto → root 248px / cells 32px; full → root 1200px / cells 168px; the DatePicker popover stays 250px either way. Do NOT reach for `className=\"w-full\"` instead — it widens the root and leaves the grid at 224px pinned left.",
+        "description": "How the grid claims horizontal space. `auto` (default) shrink-wraps to seven fixed day columns — the shape a picker popover needs, because the panel is shrink-to-fit and takes ITS width from the calendar inside it. Use `full` for an EMBEDDED calendar (a shift board, a booking month) that is the content of a Card rather than a dropdown: it stacks the months and lets the day cells share the row, each reading from the start edge with an inset (`--calendar-full-day-padding-inline` / `-block`, default --space-2 / --space-1, so the numeral clears the `text-edge-inset` audit; gh#1258). Measured at a 1200px container: auto → root 248px / cells 32px; full → root 1200px / cells 168px; the DatePicker popover stays 250px either way. Do NOT reach for `className=\"w-full\"` instead — it widens the root and leaves the grid at 224px pinned left.",
         "name": "width",
         "type": "\"auto\" | \"full\""
       },
@@ -11770,9 +11771,9 @@
       },
       {
         "defaultValue": "\"default\"",
-        "description": "Visual style. `default` is a 1px TRANSPARENT border (a toolbar affordance — no resting surface at all), `outline` a hairline on --background, and `soft` (gh#734) the REST FILL a chip needs: hsl(var(--secondary)), byte-identical to the fill `Badge variant=\"secondary\"` and `Button variant=\"secondary\"` already paint, so a chip, a badge and a button on one row are one family. `soft` is antd Tag's resting surface and is what makes a FILTER CHIP legible before it is pressed — with `default` or `outline` the chip reads as transparent, which is the reported defect. Hover is the opaque --secondary-hover (not a translucent tint, which would shift between a page and a Card); pressed still wins over both.",
+        "description": "Visual style. `default` is a 1px TRANSPARENT border (a toolbar affordance — no resting surface at all), `outline` a hairline on --background, and `soft` (gh#734) the REST FILL a chip needs: hsl(var(--secondary)), byte-identical to the fill `Badge variant=\"secondary\"` and `Button variant=\"secondary\"` already paint, so a chip, a badge and a button on one row are one family. `soft` is antd Tag's resting surface and is what makes a FILTER CHIP legible before it is pressed — with `default` or `outline` the chip reads as transparent, which is the reported defect. Hover is the opaque --secondary-hover (not a translucent tint, which would shift between a page and a Card); pressed still wins over both. `quiet` (gh#1257) is the LOW-KEY pressed state for a mark beside content (a comment star, a reaction): the transparent rest of `default`, and pressed as a --secondary fill with --foreground text and the primary hairline, instead of a solid primary block; knobs `--toggle-quiet-on-{background,color,count-background,count-color}`.",
         "name": "variant",
-        "type": "\"default\" | \"outline\" | \"soft\""
+        "type": "\"default\" | \"outline\" | \"soft\" | \"quiet\""
       },
       {
         "defaultValue": "\"md\"",
@@ -11822,6 +11823,7 @@
     "storyPath": "data-entry/toggle.tsx",
     "tagline": "React Aria toggle button with default/outline/soft variants and tokenized sizes.",
     "usage": [
+      "DO use `variant=\"quiet\"` for a pressed state that should stay LOW-KEY — a comment star, a like/reaction, a pin beside a row. The solid primary fill is for a selected filter or mode; on a mark beside content it reads as the loudest thing on the screen. No app CSS needed (gh#1257).",
       "DO provide an accessible label when the toggle only contains an icon.",
       "DON'T use Toggle for multi-option selection; use ToggleGroup.",
       "DO reach for `count` for a faceted filter chip, a counted segmented toggle or a reaction chip — Toggle is the primitive that owns BOTH the count and the pressed state.",
@@ -11873,7 +11875,7 @@
         "defaultValue": "\"default\"",
         "description": "Visual style, PROVIDED TO EVERY ITEM via context — set it once on the group, not on each ToggleGroupItem. An explicit `variant` on an item still wins. The default is applied per item by toggleVariants, so an unset group emits no `data-variant` at all. `soft` (gh#734) is the chip fill: use it for a tag-filter panel, where `default`/`outline` leave the unselected chips reading as transparent.",
         "name": "variant",
-        "type": "\"default\" | \"outline\" | \"soft\""
+        "type": "\"default\" | \"outline\" | \"soft\" | \"quiet\""
       },
       {
         "defaultValue": "\"default\"",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 161,
     "patterns": 24,
     "rules": 43,
-    "tokens": 2186,
+    "tokens": 2193,
     "vocabulary": 14
   },
   "files": [
@@ -48,19 +48,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/v32.1.0/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v32.1.2/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": 1863,
+      "component": 1870,
       "foundation": 211,
       "semantic": 112
     },
     "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": "32.1.0"
+  "version": "32.1.2"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 161 components, 2186 design tokens,
-> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.1.0.
+> A Japanese-enterprise React design system: 161 components, 2193 design tokens,
+> 43 cardinal rules. This file is the entry point for AI agents. Catalog version 32.1.2.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@32.1.0`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@32.1.2`). It is searchable and version-locked. These files exist for agents
 that can only fetch URLs.
 
 ## Start
@@ -18,7 +18,7 @@ that can only fetch URLs.
 - [components-index.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json): 47 KB — all 161 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–36 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.2 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` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1863 `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` — 211 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 112 `semantic` roles, 1870 `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): 43 cardinal rules.
 - [anti-ai-tells.json](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/anti-ai-tells.json): 26 shapes that make generated UI look generated, each with its fix.
@@ -26,7 +26,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/v32.1.0/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v32.1.2/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

@@ -3659,6 +3659,36 @@
     "tier": "component",
     "value": "initial"
   },
+  {
+    "description": "Pressed Toggle LABEL colour — the pair to --toggle-on-background, `initial` like it (default hsl(var(--primary-foreground)) at the call site). Without it a service that quietened the pressed fill to a pale tint was left with white text on it.",
+    "name": "--toggle-on-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "`Toggle variant=\"quiet\"` pressed state (gh#1257) — role-mirror knobs, `initial`; defaults at the call site: fill hsl(var(--secondary)), label hsl(var(--foreground)), counter hsl(var(--background)) / hsl(var(--foreground)).",
+    "name": "--toggle-quiet-on-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-color",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-count-background",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--toggle-quiet-on-count-color",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--slider-track-background",
@@ -4475,6 +4505,18 @@
     "tier": "component",
     "value": "var(--space-1)"
   },
+  {
+    "description": "Text inset of a `width=\"full\"` day cell (gh#1258). The full cell reads from the start edge so a number can sit above badges, and with the unruled cell's `padding: 0` the numeral touched the cell edge — 0px left, 3px top, flagged by the library's own `text-edge-inset` rule (cell: >= 8px inline, >= 4px block). `initial` so the density-scaled defaults (var(--space-2) inline, var(--space-1) block) resolve at the call site, not frozen at the :root density. A shift board that wants a tighter or roomier cell sets these.",
+    "name": "--calendar-full-day-padding-inline",
+    "tier": "component",
+    "value": "initial"
+  },
+  {
+    "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
+    "name": "--calendar-full-day-padding-block",
+    "tier": "component",
+    "value": "initial"
+  },
   {
     "description": "Colour of the day-grid ruling (`Calendar bordered`, on by default). `initial` on purpose: the role default is read at the call site as `var(--calendar-grid-border-color, hsl(var(--border)))` so it follows a scoped theme. The --border tier: L* 93.80 / 1.149:1 on the popover in light, L* 20.76 / 1.270:1 in dark — a rule exactly as heavy as a Card edge or a DataTable row rule. Asked for three times: 25.3.0 drew the grid at all, 27.6.0 lightened the full --input (3.47 / 3.88) to --input/0.5 (1.74 / 1.95, L* 78.67), and gh#730 measured that still darker than the --border every card and table uses and asked for the --border tier itself. Same tier as the RangeTimeline grid. Set any colour to retint, e.g. `hsl(var(--input) / 0.5)` for the 27.6.0 weight or `hsl(var(--input))` for the heavy line.",
     "name": "--calendar-grid-border-color",

package/dist/components/data-entry/search-select.js

@@ -488,8 +488,11 @@ function SearchSelect(props) {
       // order and make that token dead. Same reasoning as SelectTrigger.
       width === "auto" && "w-auto",
       width === "full" && "w-full",
-      // Reserve trailing room for the single clear-or-chevron overlay rendered below.
-      "ui-control-trigger-affixed"
+      // Reserve trailing room for the single clear-or-chevron overlay rendered below — only when
+      // something can sit there. `suffixIcon={null}` with no clear and no loading renders an empty
+      // overlay, and reserving the chevron's room anyway left a dead 2.25rem gap at the end of a
+      // `width="auto"` trigger (gh#1257).
+      (loadingProp || clearControl.enabled || suffixIcon !== null) && "ui-control-trigger-affixed"
     )
   };
   const chipsRemovable = !disabled && !readOnly;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | "soft" | null | undefined;
+    variant?: "default" | "outline" | "quiet" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -78,7 +78,7 @@ declare function restoreDomProps<P extends {
 export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePressedFields & VariantProps<typeof toggleVariants> & ToggleCountFields;
 export type ToggleProps = ToggleProp;
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
-    variant?: "default" | "outline" | "soft" | null | undefined;
+    variant?: "default" | "outline" | "quiet" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;

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

@@ -18,7 +18,11 @@ const toggleVariants = cva("ui-toggle", {
       // no pressed state at all. `soft` is antd `Tag`'s resting surface, on the SAME
       // `hsl(var(--secondary))` fill `Badge variant="secondary"` and `Button variant="secondary"`
       // already paint, so a chip, a badge and a button on one row are one family.
-      soft: "ui-toggle-soft"
+      soft: "ui-toggle-soft",
+      // A LOW-KEY pressed state (gh#1257): the `default` rest, and pressed as a --secondary fill with
+      // --foreground text and the primary hairline instead of a solid primary block — for a comment
+      // star or a reaction, where a pressed toggle is a mark beside content, not a selected filter.
+      quiet: "ui-toggle-quiet"
     },
     size: {
       // The fourth step of the shared control ladder (gh#716): 24px, `--control-height-xs`, the

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": "32.1.0",
+  "version": "32.1.2",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/styles/control.css

@@ -69,7 +69,7 @@
 
   .ui-toggle[data-state="on"] {
     background: var(--toggle-on-background, hsl(var(--primary)));
-    color: hsl(var(--primary-foreground));
+    color: var(--toggle-on-color, hsl(var(--primary-foreground)));
   }
 
   .ui-toggle:disabled,
@@ -1970,11 +1970,17 @@
     display: flex;
     min-inline-size: 0;
     flex: 1 1 0%;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--search-select-option-space-gap);
     overflow: hidden;
   }
 
+  .ui-control-trigger[data-mode="multiple"]:has(.ui-search-select-values) {
+    block-size: auto;
+    min-block-size: var(--control-height);
+  }
+
   .ui-search-select-value {
     display: inline-flex;
     max-inline-size: 100%;
@@ -2759,6 +2765,9 @@
     justify-content: flex-start;
     text-align: start;
     white-space: normal;
+
+    padding-inline: var(--calendar-full-day-padding-inline, var(--space-2));
+    padding-block: var(--calendar-full-day-padding-block, var(--space-1));
   }
 
   .ui-calendar-month {
@@ -3180,8 +3189,8 @@
   }
 
   .ui-button--secondary .ui-button-count {
-    background: var(--button-count-secondary-background, hsl(var(--secondary-foreground)));
-    color: var(--button-count-secondary-color, hsl(var(--secondary)));
+    background: var(--button-count-secondary-background, hsl(var(--background)));
+    color: var(--button-count-secondary-color, hsl(var(--foreground)));
   }
 }
 

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

@@ -905,6 +905,13 @@
     padding: var(--list-row-compact-padding-y, var(--space-2))
       var(--list-row-compact-padding-x, var(--list-row-padding-x));
   }
+
+  [data-slot="card-content"]:not([data-flush]) > [data-slot="list-row"],
+  [data-slot="card-content"]:not([data-flush])
+    > :is(ul, ol, [role="list"])
+    > [data-slot="list-row"] {
+    padding-inline: 0;
+  }
   [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
     min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
     flex-basis: var(--list-row-compact-body-min-width, 6rem);

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "32.1.0",
+  "version": "32.1.2",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",

package/dist/styles/toggle.css

@@ -36,6 +36,20 @@
     color: var(--toggle-pressed-count-color, hsl(var(--primary)));
   }
 
+  .ui-toggle-quiet {
+    border: var(--stroke-hairline) solid transparent;
+  }
+
+  .ui-toggle.ui-toggle-quiet[data-state="on"] {
+    background: var(--toggle-quiet-on-background, hsl(var(--secondary)));
+    color: var(--toggle-quiet-on-color, hsl(var(--foreground)));
+  }
+
+  .ui-toggle.ui-toggle-quiet[data-state="on"] .ui-toggle-count {
+    background: var(--toggle-quiet-on-count-background, hsl(var(--background)));
+    color: var(--toggle-quiet-on-count-color, hsl(var(--foreground)));
+  }
+
   @media (forced-colors: active) {
     .ui-toggle[data-state="on"] {
       border-color: Highlight;