@godxjp/ui 33.6.1 → 33.7.0

package/README.md

@@ -18,7 +18,7 @@ npm i @godxjp/ui
 
 <!-- agent-catalog-counts:start -->
 
-The catalog — 166 components, 2232 tokens, 44 cardinal rules — is published in two forms from one
+The catalog — 166 components, 2235 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) | 50 KB | all 166 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–37 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 166 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) | 858 KB | all 2232 design tokens, their values and why they exist |
+| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json) | 859 KB | all 2235 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.6.1.** If the project you are editing has a different
+**This catalog describes `@godxjp/ui` 33.7.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` — 2232 design tokens, each tagged with its `tier`. **If you were handed a
+4. `tokens.json` — 2235 design tokens, each tagged with its `tier`. **If you were handed a
    brand, read the 216 `foundation` entries first** — `--primary`, `--background`,
    `--radius`, `--font-size-base` are the handful everything else derives from. The
-   1903 `component` entries are per-part knobs; reach for one only when a role is
+   1906 `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` | 216 | 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` | 1903 | 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` | 1906 | 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/Button.json

@@ -12,9 +12,9 @@
     },
     {
       "defaultValue": "\"default\"",
-      "description": "Size preset (height, padding, icon dims).",
+      "description": "Size preset (height, padding, icon dims). `touch` (gh#1304) is the glove step for wet or gloved hands — food-production stations, a HACCP 良/否 verdict: 56px tall (`--control-height-touch`) and never narrower than it is tall, under a mouse as well as a finger. Button owns no siblings, so lay a row of touch Buttons out with a gap of at least `--control-touch-gap` (8px), e.g. `Flex direction=\"row\" gap=\"sm\"` (8px); pair with `fullWidth` for a full-width bar.",
       "name": "size",
-      "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\""
+      "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | \"touch\""
     },
     {
       "defaultValue": "\"default\"",

package/agent/components/RadioGroup.json

@@ -16,6 +16,12 @@
       "name": "buttonStyle",
       "type": "\"outline\" | \"solid\""
     },
+    {
+      "defaultValue": "\"md\"",
+      "description": "Button-bar size while `optionType=\"button\"`. `touch` (gh#1304) is the glove step: every button at least 56×56 CSS px (`--control-height-touch`) and the bar un-welded into separate buttons `--control-touch-gap` (8px) apart, for wet or gloved hands. Inert on radio dots.",
+      "name": "size",
+      "type": "\"md\" | \"touch\""
+    },
     {
       "description": "Id của nhóm; `FormField` tự truyền xuống để nối nhãn ↔ control.",
       "name": "id",

package/agent/components/Segmented.json

@@ -18,9 +18,9 @@
     },
     {
       "defaultValue": "\"md\"",
-      "description": "Control height tier — reads the shared `--control-height` ladder: xs 24px · sm 28px · md 32px · lg 36px. The TRACK measures exactly one control height, so the bar sits level with an Input, a Button or a ToggleGroup of the same step on the same row. Pick the step the ROW already has: xs (gh#719) is the one that fits a 24px-dense toolbar or audit-log row — before it, that row could only get a hand-rolled set of Buttons, which loses the radiogroup semantics and the arrow keys. xs is the DENSE step, not a smaller default: the track spends its 2px inset at every step, so the individual SEGMENT measures 20px and clears WCAG 2.2 SC 2.5.8 through the Spacing exception (adjacent segments 26.47px apart for a one-glyph label) rather than the 24px minimum. Keep labels at a glyph or more, and stay on sm or md wherever the row height is yours to choose.",
+      "description": "Control height tier — reads the shared `--control-height` ladder: xs 24px · sm 28px · md 32px · lg 36px. `touch` (gh#1304) is the glove step and the one exception to the track rule below: every SEGMENT is at least 56×56 CSS px (`--control-height-touch`), segments stand `--control-touch-gap` (8px) apart, and the track grows around them — pair with `block` for full-width pass/fail bars. The TRACK measures exactly one control height, so the bar sits level with an Input, a Button or a ToggleGroup of the same step on the same row. Pick the step the ROW already has: xs (gh#719) is the one that fits a 24px-dense toolbar or audit-log row — before it, that row could only get a hand-rolled set of Buttons, which loses the radiogroup semantics and the arrow keys. xs is the DENSE step, not a smaller default: the track spends its 2px inset at every step, so the individual SEGMENT measures 20px and clears WCAG 2.2 SC 2.5.8 through the Spacing exception (adjacent segments 26.47px apart for a one-glyph label) rather than the 24px minimum. Keep labels at a glyph or more, and stay on sm or md wherever the row height is yours to choose.",
       "name": "size",
-      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
     },
     {
       "description": "The closed set of choices, in reading order. `label` is the visible content AND the item's accessible name. Use `count` for a filter total — do not nest `Badge` in `label` (gh#602).",

package/agent/components/Toggle.json

@@ -22,9 +22,9 @@
     },
     {
       "defaultValue": "\"md\"",
-      "description": "Control size on the --control-height tier: xs 24px · sm 28px · md 32px · lg 36px. Pick the step the ROW already has — an xs chip is what lets a 24px-dense row carry a pressed/segmented control instead of someone hand-rolling one out of Buttons (gh#716). Every step clears the WCAG 2.2 SC 2.5.8 24px target floor, xs exactly.",
+      "description": "Control size on the --control-height tier: xs 24px · sm 28px · md 32px · lg 36px · touch ≥56×56 (gh#1304, the glove step, `--control-height-touch`). Pick the step the ROW already has — an xs chip is what lets a 24px-dense row carry a pressed/segmented control instead of someone hand-rolling one out of Buttons (gh#716). Every step clears the WCAG 2.2 SC 2.5.8 24px target floor, xs exactly.",
       "name": "size",
-      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
     },
     {
       "defaultValue": "\"default\"",

package/agent/components/ToggleGroup.json

@@ -39,9 +39,9 @@
     },
     {
       "defaultValue": "\"md\"",
-      "description": "Control size, PROVIDED TO EVERY ITEM via context — set it once on the group. An explicit `size` on an item still wins. Heights come from the --control-height tier (xs 24px · sm 28px · md 32px · lg 36px). Pick the step the ROW already has: xs is the one that fits a 24px-dense row (gh#716).",
+      "description": "Control size, PROVIDED TO EVERY ITEM via context — set it once on the group. An explicit `size` on an item still wins. Heights come from the --control-height tier (xs 24px · sm 28px · md 32px · lg 36px). Pick the step the ROW already has: xs is the one that fits a 24px-dense row (gh#716). `touch` (gh#1304) is the glove step: every item at least 56×56 CSS px and the items spaced `--control-touch-gap` (8px) apart, for wet or gloved hands.",
       "name": "size",
-      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+      "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
     },
     {
       "description": "Disables the whole group; individual items also accept `disabled`.",

package/agent/components.json

@@ -2636,9 +2636,9 @@
       },
       {
         "defaultValue": "\"default\"",
-        "description": "Size preset (height, padding, icon dims).",
+        "description": "Size preset (height, padding, icon dims). `touch` (gh#1304) is the glove step for wet or gloved hands — food-production stations, a HACCP 良/否 verdict: 56px tall (`--control-height-touch`) and never narrower than it is tall, under a mouse as well as a finger. Button owns no siblings, so lay a row of touch Buttons out with a gap of at least `--control-touch-gap` (8px), e.g. `Flex direction=\"row\" gap=\"sm\"` (8px); pair with `fullWidth` for a full-width bar.",
         "name": "size",
-        "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\""
+        "type": "\"default\" | \"xs\" | \"sm\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\" | \"touch\""
       },
       {
         "defaultValue": "\"default\"",
@@ -7438,6 +7438,12 @@
         "name": "buttonStyle",
         "type": "\"outline\" | \"solid\""
       },
+      {
+        "defaultValue": "\"md\"",
+        "description": "Button-bar size while `optionType=\"button\"`. `touch` (gh#1304) is the glove step: every button at least 56×56 CSS px (`--control-height-touch`) and the bar un-welded into separate buttons `--control-touch-gap` (8px) apart, for wet or gloved hands. Inert on radio dots.",
+        "name": "size",
+        "type": "\"md\" | \"touch\""
+      },
       {
         "description": "Id của nhóm; `FormField` tự truyền xuống để nối nhãn ↔ control.",
         "name": "id",
@@ -12193,9 +12199,9 @@
       },
       {
         "defaultValue": "\"md\"",
-        "description": "Control size on the --control-height tier: xs 24px · sm 28px · md 32px · lg 36px. Pick the step the ROW already has — an xs chip is what lets a 24px-dense row carry a pressed/segmented control instead of someone hand-rolling one out of Buttons (gh#716). Every step clears the WCAG 2.2 SC 2.5.8 24px target floor, xs exactly.",
+        "description": "Control size on the --control-height tier: xs 24px · sm 28px · md 32px · lg 36px · touch ≥56×56 (gh#1304, the glove step, `--control-height-touch`). Pick the step the ROW already has — an xs chip is what lets a 24px-dense row carry a pressed/segmented control instead of someone hand-rolling one out of Buttons (gh#716). Every step clears the WCAG 2.2 SC 2.5.8 24px target floor, xs exactly.",
         "name": "size",
-        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
       },
       {
         "defaultValue": "\"default\"",
@@ -12301,9 +12307,9 @@
       },
       {
         "defaultValue": "\"md\"",
-        "description": "Control size, PROVIDED TO EVERY ITEM via context — set it once on the group. An explicit `size` on an item still wins. Heights come from the --control-height tier (xs 24px · sm 28px · md 32px · lg 36px). Pick the step the ROW already has: xs is the one that fits a 24px-dense row (gh#716).",
+        "description": "Control size, PROVIDED TO EVERY ITEM via context — set it once on the group. An explicit `size` on an item still wins. Heights come from the --control-height tier (xs 24px · sm 28px · md 32px · lg 36px). Pick the step the ROW already has: xs is the one that fits a 24px-dense row (gh#716). `touch` (gh#1304) is the glove step: every item at least 56×56 CSS px and the items spaced `--control-touch-gap` (8px) apart, for wet or gloved hands.",
         "name": "size",
-        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
       },
       {
         "description": "Disables the whole group; individual items also accept `disabled`.",
@@ -12851,9 +12857,9 @@
       },
       {
         "defaultValue": "\"md\"",
-        "description": "Control height tier — reads the shared `--control-height` ladder: xs 24px · sm 28px · md 32px · lg 36px. The TRACK measures exactly one control height, so the bar sits level with an Input, a Button or a ToggleGroup of the same step on the same row. Pick the step the ROW already has: xs (gh#719) is the one that fits a 24px-dense toolbar or audit-log row — before it, that row could only get a hand-rolled set of Buttons, which loses the radiogroup semantics and the arrow keys. xs is the DENSE step, not a smaller default: the track spends its 2px inset at every step, so the individual SEGMENT measures 20px and clears WCAG 2.2 SC 2.5.8 through the Spacing exception (adjacent segments 26.47px apart for a one-glyph label) rather than the 24px minimum. Keep labels at a glyph or more, and stay on sm or md wherever the row height is yours to choose.",
+        "description": "Control height tier — reads the shared `--control-height` ladder: xs 24px · sm 28px · md 32px · lg 36px. `touch` (gh#1304) is the glove step and the one exception to the track rule below: every SEGMENT is at least 56×56 CSS px (`--control-height-touch`), segments stand `--control-touch-gap` (8px) apart, and the track grows around them — pair with `block` for full-width pass/fail bars. The TRACK measures exactly one control height, so the bar sits level with an Input, a Button or a ToggleGroup of the same step on the same row. Pick the step the ROW already has: xs (gh#719) is the one that fits a 24px-dense toolbar or audit-log row — before it, that row could only get a hand-rolled set of Buttons, which loses the radiogroup semantics and the arrow keys. xs is the DENSE step, not a smaller default: the track spends its 2px inset at every step, so the individual SEGMENT measures 20px and clears WCAG 2.2 SC 2.5.8 through the Spacing exception (adjacent segments 26.47px apart for a one-glyph label) rather than the 24px minimum. Keep labels at a glyph or more, and stay on sm or md wherever the row height is yours to choose.",
         "name": "size",
-        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\""
+        "type": "\"xs\" | \"sm\" | \"md\" | \"lg\" | \"touch\""
       },
       {
         "description": "The closed set of choices, in reading order. `label` is the visible content AND the item's accessible name. Use `count` for a filter total — do not nest `Badge` in `label` (gh#602).",

package/agent/index.json

@@ -4,7 +4,7 @@
     "components": 166,
     "patterns": 28,
     "rules": 44,
-    "tokens": 2232,
+    "tokens": 2235,
     "vocabulary": 14
   },
   "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.6.1/agent/index.json"
+    "pinned": "https://raw.githubusercontent.com/godx-jp/godxjp-ui/v33.7.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": 1903,
+      "component": 1906,
       "foundation": 216,
       "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.6.1"
+  "version": "33.7.0"
 }

package/agent/llms.txt

@@ -1,10 +1,10 @@
 # @godxjp/ui
 
-> A Japanese-enterprise React design system: 166 components, 2232 design tokens,
-> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.6.1.
+> A Japanese-enterprise React design system: 166 components, 2235 design tokens,
+> 44 cardinal rules. This file is the entry point for AI agents. Catalog version 33.7.0.
 
 If your client can run a process, do not read these files — run the MCP server instead
-(`npx @godxjp/ui-mcp@33.6.1`). It is searchable and version-locked. These files exist for agents
+(`npx @godxjp/ui-mcp@33.7.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): 50 KB — all 166 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–37 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` — 216 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1903 `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` — 216 `foundation` seeds (`--primary`, `--background`, `--radius`: set these when you are handed a brand), 113 `semantic` roles, 1906 `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.6.1/agent/...`. A catalog that does not match the installed
+the tag: `.../godx-jp/godxjp-ui/v33.7.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

@@ -3203,6 +3203,12 @@
     "tier": "component",
     "value": "calc(var(--control-height) - calc(0.5rem * var(--scaling)))"
   },
+  {
+    "description": "THE GLOVE TIER (gh#1304) — `size=\"touch\"` on Button, Segmented, Toggle/ToggleGroup and `RadioGroup optionType=\"button\"`. 56px: wet or gloved hands at a food-production station need more than the 44px WCAG 2.2 SC 2.5.5 target, so this sits one band above `--number-input-touch-height`. A band, NOT derived from `--control-height` — not by density, not by a shell's tier — because the floor is the hand's, not the layout's.",
+    "name": "--control-height-touch",
+    "tier": "component",
+    "value": "var(--band-height-3xl)"
+  },
   {
     "description": "Control primitive tokens: heights, horizontal padding, adjacent control sizes.",
     "name": "--control-padding-x",
@@ -3341,6 +3347,18 @@
     "tier": "component",
     "value": "var(--band-height-2xl)"
   },
+  {
+    "description": "`size=\"touch\"` (gh#1304). The SPACE between two glove targets: ToggleGroup items, Segmented segments and the buttons of a `RadioGroup optionType=\"button\"` bar stand this far apart at the touch step (8px), so a gloved press on one edge cannot land on the neighbour. Button has no siblings of its own — lay a row of touch Buttons out with a gap of at least this.",
+    "name": "--control-touch-gap",
+    "tier": "component",
+    "value": "var(--space-2)"
+  },
+  {
+    "description": "Button's inline inset at the touch step — one rung under `lg`'s, because a touch Button is usually a short verdict (良 / 否) and its 56px min-inline-size already makes the box.",
+    "name": "--button-touch-space-inline",
+    "tier": "component",
+    "value": "var(--space-6)"
+  },
   {
     "description": "CHROME VARIANT — antd's `variant` axis. `outlined` needs no token: it is what a field already draws. `filled` swaps the boundary for a tinted surface; `borderless` drops both. Kept as knobs so a service theme can retune the dense-form treatment once, globally.",
     "name": "--control-variant-filled-background",

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

@@ -120,7 +120,7 @@ function DescriptionsItem({ label, mono, span, className, children }) {
             "data-slot": "descriptions-value",
             "data-mono": mono ? "" : void 0,
             className: cn(
-              "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] break-all",
+              "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] [overflow-wrap:anywhere]",
               mono && "font-mono"
             ),
             children

package/dist/components/data-entry/date-picker.js

@@ -717,7 +717,7 @@ function DatePicker(props) {
           onBlur: (event) => {
             const parsed = parse(event.target.value);
             const accepted = parsed && allowed(parsed) && timeAllowed(parsed) ? parsed : void 0;
-            if (accepted && !multiple && !needConfirm && +periodDate(accepted) !== +(committedSingle ?? NaN))
+            if (accepted && !multiple && +periodDate(accepted) !== +(committedSingle ?? NaN))
               emit(periodDate(accepted));
             if (!preserveInvalidOnBlur)
               setText(accepted ? display(accepted) : displayAll(committedSingle));

package/dist/components/data-entry/form-field.js

@@ -81,7 +81,7 @@ function FormField({
   const childWithA11y = isStatic ? (
     // read-only FormField row and a Descriptions value are indistinguishable when mixed. That
     // cannot drift. --descriptions-value-line-height is the mandatory companion: `text-sm` also
-    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] break-all", children: staticText })
+    /* @__PURE__ */ jsx("span", { className: "text-[length:var(--descriptions-value-font-size)] leading-[var(--descriptions-value-line-height)] [overflow-wrap:anywhere]", children: staticText })
   ) : React.isValidElement(children) ? React.cloneElement(children, {
     // The label is associated via aria-labelledby (not <label for>): composite
     // controls (Radio.Group, checkbox lists, range pairs) have no labelable root,

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

@@ -13,7 +13,7 @@ declare const RadioGroupRoot: React.ForwardRefExoticComponent<Omit<Omit<React.De
 declare const RadioItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
     value: string;
 } & React.RefAttributes<HTMLLabelElement>>;
-declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, optionType, buttonStyle, disabled, name, id, className, children, ...ariaProps }: RadioGroupProp): React.JSX.Element;
+declare function RadioGroupOptions({ value, defaultValue, onValueChange, options, orientation, optionType, buttonStyle, size, disabled, name, id, className, children, ...ariaProps }: RadioGroupProp): React.JSX.Element;
 /** Single radio — use inside `Radio.Group` / `RadioGroupRoot`, or via `options` API. */
 export declare const Radio: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & {
     value: string;

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

@@ -116,6 +116,7 @@ function RadioGroupOptions({
   orientation = "vertical",
   optionType = "default",
   buttonStyle = "outline",
+  size,
   disabled,
   name,
   id,
@@ -145,6 +146,7 @@ function RadioGroupOptions({
         "data-orientation": orientation,
         "data-option-type": optionType === "default" ? void 0 : optionType,
         "data-button-style": optionType === "button" ? buttonStyle : void 0,
+        "data-size": optionType === "button" && size === "touch" ? size : void 0,
         className: cn(
           optionType === "button" ? "ui-radio-button-bar" : choiceGroupClassName(orientation),
           className

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

@@ -178,29 +178,25 @@ function SearchSelect(props) {
     },
     [filterOption, optionFilterProp, fold]
   );
-  const resolvedLoad = React.useMemo(
-    () => loadOptions ?? (async ({ query: search }) => {
-      const needle = search.trim();
-      const list = staticOptions ?? [];
-      const kept = needle ? list.filter((option) => matchesQuery(option, needle)) : list;
-      return {
-        options: filterSort ? [...kept].sort((a, b) => filterSort(a, b, { searchValue: needle })) : kept,
-        hasMore: false
-      };
-    }),
-    [loadOptions, staticOptions, matchesQuery, filterSort]
-  );
+  const typedText = query.trim();
+  const staticListed = React.useMemo(() => {
+    if (loadOptions) return [];
+    const list = staticOptions ?? [];
+    const kept = typedText ? list.filter((option) => matchesQuery(option, typedText)) : list;
+    return filterSort ? [...kept].sort((a, b) => filterSort(a, b, { searchValue: typedText })) : kept;
+  }, [loadOptions, staticOptions, typedText, matchesQuery, filterSort]);
   React.useEffect(() => {
     const handle = window.setTimeout(() => setDebouncedQuery(query.trim()), DEBOUNCE_MS);
     return () => window.clearTimeout(handle);
   }, [query]);
   const fetchPage = React.useCallback(
     async (nextPage, search, append) => {
+      if (!loadOptions) return;
       const ticket = ++reqId.current;
       setLoading(true);
       if (!append) setError(false);
       try {
-        const result = await resolvedLoad({ query: search, page: nextPage });
+        const result = await loadOptions({ query: search, page: nextPage });
         if (ticket !== reqId.current) return;
         setLoaded((prev) => append ? [...prev, ...result.options] : result.options);
         if (!append) setFreshPage((tick) => tick + 1);
@@ -215,17 +211,22 @@ function SearchSelect(props) {
         if (ticket === reqId.current) setLoading(false);
       }
     },
-    [resolvedLoad]
+    [loadOptions]
   );
+  const remoteQuery = loadOptions ? debouncedQuery : null;
   React.useEffect(() => {
     if (!open) return;
     setActiveIndex(0);
-    void fetchPage(1, debouncedQuery, false);
-  }, [open, debouncedQuery, fetchPage]);
-  const typedText = query.trim();
+    if (remoteQuery === null) {
+      setFreshPage((tick) => tick + 1);
+      return;
+    }
+    void fetchPage(1, remoteQuery, false);
+  }, [open, remoteQuery, fetchPage]);
+  const listed = loadOptions ? loaded : staticListed;
   const { displayOptions, createOption } = React.useMemo(() => {
-    if (!tagsMode) return { displayOptions: loaded, createOption: void 0 };
-    const known = new Set(loaded.map((option) => option.value));
+    if (!tagsMode) return { displayOptions: listed, createOption: void 0 };
+    const known = new Set(listed.map((option) => option.value));
     const extras = [];
     for (const entry of working) {
       if (known.has(entry)) continue;
@@ -234,21 +235,21 @@ function SearchSelect(props) {
       if (!typedText || matchesQuery(held, typedText)) extras.push(held);
     }
     const typed = fold(typedText);
-    const exists = [...known].some((entry) => fold(entry) === typed) || [...staticOptions ?? [], ...loaded].some(
+    const exists = [...known].some((entry) => fold(entry) === typed) || [...staticOptions ?? [], ...listed].some(
       (option) => fold(option.value) === typed || fold(option.label) === typed
     );
     const create = typedText && !exists && canCreate(typedText) ? { value: typedText, label: typedText } : void 0;
-    const exact = typedText ? loaded.find(
+    const exact = typedText ? listed.find(
       (option) => !working.includes(option.value) && (fold(option.value) === typed || fold(option.label) === typed)
     ) : void 0;
-    const rest = exact ? loaded.filter((option) => option !== exact) : loaded;
+    const rest = exact ? listed.filter((option) => option !== exact) : listed;
     return {
-      displayOptions: create || exact || extras.length ? [...create ? [create] : [], ...exact ? [exact] : [], ...rest, ...extras] : loaded,
+      displayOptions: create || exact || extras.length ? [...create ? [create] : [], ...exact ? [exact] : [], ...rest, ...extras] : listed,
       createOption: create
     };
   }, [
     tagsMode,
-    loaded,
+    listed,
     working,
     typedText,
     pickedOptions,
@@ -290,7 +291,7 @@ function SearchSelect(props) {
     setActiveIndex(firstEnabled >= 0 ? firstEnabled : 0);
   }, [flatOrdered, typedText, freshPage]);
   const resolvedPlaceholder = placeholder ?? t("dataEntry.searchSelect.placeholder");
-  const optionFor = (optionValue) => pickedOptions[optionValue] ?? (staticOptions ?? []).find((option) => option.value === optionValue) ?? loaded.find((option) => option.value === optionValue) ?? null;
+  const optionFor = (optionValue) => pickedOptions[optionValue] ?? (staticOptions ?? []).find((option) => option.value === optionValue) ?? listed.find((option) => option.value === optionValue) ?? null;
   const selectedOption = value ? optionFor(value) : null;
   const currentLabel = value ? selectedOption?.label ?? selectedLabel ?? value : resolvedPlaceholder;
   const currentIcon = value ? selectedOption?.icon ?? selectedIcon : null;

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

@@ -46,9 +46,10 @@ export type SegmentedProp = {
      * Control height tier: `md` (default), `xs`, `sm` or `lg` — the same `--control-height-*` tier
      * every other control reads. `xs` is the fourth step (gh#719, the one Toggle/ToggleGroup took in
      * gh#716): a 24px-dense row can carry a real segmented control instead of a hand-rolled row of
-     * Buttons.
+     * Buttons. `touch` (gh#1304) is the glove step: every segment at least 56×56 CSS px, standing
+     * `--control-touch-gap` (8px) apart — pair it with `block` for full-width pass/fail bars.
      */
-    size?: "xs" | "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg" | "touch";
     /** Disable the whole group. */
     disabled?: boolean;
     /** Form field name — submits the selected value with the form. */

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

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

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

@@ -31,7 +31,10 @@ const toggleVariants = cva("ui-toggle", {
       xs: "ui-toggle-xs",
       sm: "ui-toggle-sm",
       md: "ui-toggle-default-size",
-      lg: "ui-toggle-lg"
+      lg: "ui-toggle-lg",
+      // The glove step (gh#1304): ≥56×56, `--control-height-touch`; a ToggleGroup at this step
+      // also spaces its items `--control-touch-gap` (8px) apart.
+      touch: "ui-toggle-touch"
     },
     // Corner shape at parity with `Button` and `Badge` — the same three values mapped to the same
     // two radius tokens, so `shape="pill"` means one thing across the library. `default` is empty

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "bare" | "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
-    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs" | null | undefined;
+    size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "touch" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type { ButtonProp, ButtonProp as ButtonProps } from "../../props/components/general.prop.js";

package/dist/components/general/button.js

@@ -60,7 +60,9 @@ const buttonVariants = cva("ui-button", {
       icon: "ui-button--icon",
       "icon-xs": "ui-button--icon-xs [&_svg]:size-[var(--button-xs-icon-size)] [&_svg]:shrink-0",
       "icon-sm": "ui-button--icon-sm",
-      "icon-lg": "ui-button--icon-lg"
+      "icon-lg": "ui-button--icon-lg",
+      // The glove step (gh#1304): ≥56×56, `--control-height-touch`.
+      touch: "ui-button--touch"
     },
     // Single source of corner radius (deterministic — no competing rounded-* utility): default uses
     // pill is fully rounded, sharp is square.

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.6.1",
+  "version": "33.7.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-entry.prop.d.ts

@@ -350,7 +350,7 @@ export type FormProp = React.FormHTMLAttributes<HTMLFormElement> & {
 /**
  * @see FormField — exactly one of `children` (an interactive control) or `staticText`:
  * a read-only VALUE row inside the same Form, styled to match `Descriptions.Item`'s value
- * typography (`text-sm break-all`) byte-for-byte. This is the "mixed read-only + editable fields
+ * typography (the `--descriptions-value-*` tokens, wrapping only where a word would overflow) byte-for-byte. This is the "mixed read-only + editable fields
  * on one form" case (an immutable name/email row above an editable role Select, for example) —
  * putting the read-only rows through FormField itself, not a separate `Descriptions` composed
  * alongside it, gets perfect layout/labelAlign/row-gap sync FOR FREE because it IS the same
@@ -598,6 +598,12 @@ export type RadioGroupProp = FieldA11yProps & {
     optionType?: RadioOptionTypeProp;
     /** antd `buttonStyle` — fill of the selected choice while `optionType="button"`. */
     buttonStyle?: RadioButtonStyleProp;
+    /**
+     * Button-bar size while `optionType="button"`: `md` (default, the control band) or `touch`
+     * (gh#1304) — every button at least 56×56 CSS px, the bar un-welded into buttons standing
+     * `--control-touch-gap` (8px) apart, for wet or gloved hands. No effect on radio dots.
+     */
+    size?: Extract<SizeProp, "md"> | "touch";
 };
 /** antd `RadioGroupOptionType` — a radio group drawn as dots or as a welded button bar. */
 export type RadioOptionTypeProp = "default" | "button";

package/dist/props/registry.d.ts

@@ -412,7 +412,7 @@ export declare const VOCABULARY_REGISTRY: {
     readonly ButtonSizeProp: {
         readonly file: "vocabulary/interaction.prop.ts";
         readonly category: "interaction";
-        readonly description: "Button size preset; includes documented icon-only subset";
+        readonly description: "Button size preset; includes documented icon-only subset and the 56px glove step `touch` (gh#1304)";
     };
     readonly BadgeVariantProp: {
         readonly file: "vocabulary/interaction.prop.ts";

package/dist/props/registry.js

@@ -411,7 +411,7 @@ const VOCABULARY_REGISTRY = {
   ButtonSizeProp: {
     file: "vocabulary/interaction.prop.ts",
     category: "interaction",
-    description: "Button size preset; includes documented icon-only subset"
+    description: "Button size preset; includes documented icon-only subset and the 56px glove step `touch` (gh#1304)"
   },
   BadgeVariantProp: {
     file: "vocabulary/interaction.prop.ts",

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -251,8 +251,13 @@ export type AppSettingPickerAppearanceProp = "labeled" | "icon" | "bar" | "inlin
 export type AppSettingCycleAppearanceProp = "bar" | "icon";
 /** Button size preset. */
 export type SizeProp = "xs" | "sm" | "md" | "lg";
-/** Button size preset; icon-only sizes are a documented Button subset. */
-export type ButtonSizeProp = SizeProp | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
+/**
+ * Button size preset; icon-only sizes are a documented Button subset. `touch` (gh#1304) is the
+ * glove step — at least 56×56 CSS px (`--control-height-touch`) for wet or gloved hands; it is
+ * shared with Segmented, Toggle/ToggleGroup and `RadioGroup optionType="button"`, and is NOT a
+ * member of `SizeProp`, so a control that cannot honour it does not type-check it.
+ */
+export type ButtonSizeProp = SizeProp | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "touch";
 /**
  * Validation state a data-entry control PAINTS — Ant Design's `status` axis, which
  * docs/DESIGN-AUTHORITY.md names the taxonomy authority for this library.