@hideyukimori/nene2-ui 0.11.0 → 0.14.0

package/README.md

@@ -258,6 +258,47 @@ wrap every choice in a `<div>` to say them.
 label, so the kit carries it). That was right and it left the reason in place. **Fixing what
 a report names is not the same as fixing what it is about.**
 
+### 🔴 A palette that is missing a meaning
+
+The kit's theme defines **8 of the 28 colours** in the frozen Core Token Contract v1. That
+is a legal theme — the contract says what a name means, not that every name must be used —
+but it stops being harmless the moment a component needs one of the twenty.
+
+`warn` was one. Six ships define `--color-warn`; nene-payout, the product this theme was
+promoted from, does not. So `--color-x-slot-alert-warn-*` pointed at `--color-danger` and a
+warning rendered as an error — as nene-vault put it, **the difference reached someone
+listening and no one looking**.
+
+🔑 Same root cause as the radius scale, and the same shape as it: **a set whose members all
+resolve to one value cannot express the distinction it is named for.** Both are now checked
+— radius by step count, colour by whether two meanings resolve to the same value.
+
+Still undefined: `surface-overlay`, `surface-sunken`, `text-faint`, `text-inverse`,
+`border-strong`, `accent-hover`, `accent-soft`, `on-danger`, `success`, `success-soft`,
+`on-success`, `info`, `info-soft`, `on-info`, `focus-ring`, `scrim`. Two of those —
+`focus-ring` and `scrim` — already have component slots pointing at substitutes.
+
+### 🔴 Two validity states, and only one of them is invalid
+
+A value can be worth flagging without being wrong. nene-vault marks a retention period under
+ten years, which satisfies every rule its form has.
+
+|           | ARIA                                                  | paints                                          |
+| --------- | ----------------------------------------------------- | ----------------------------------------------- |
+| `error`   | `aria-invalid`                                        | `--color-x-slot-control-invalid-*`              |
+| `warning` | 🔴 **nothing** — announced through `aria-describedby` | `--color-x-slot-control-warn-*` via `data-warn` |
+
+Setting `aria-invalid` on a legal value announces it as an error; leaving it off left the
+field with no signal at all, because **the kit painted neither state** until 0.12.0. Seven of
+nine ships paint validity themselves, so migrating onto the kit removed a signal the product
+already had.
+
+🔑 The test guarding vault's amber border asserted `aria-invalid="true"` — the attribute, not
+the paint — and stayed green through the loss. **A test can check a stand-in for the thing it
+cares about; while both live in the same component that is the same test, and the moment the
+real thing moves upstream the stand-in stays behind and keeps passing.** Moving an
+implementation upstream produces this shape structurally.
+
 ### 🔴 What a slot check must cover
 
 The rule above — _every design value a component uses comes from a slot_ — was false in 26 of

package/dist/feedback/InlineAlert.d.ts

@@ -2,19 +2,28 @@ import type { ReactNode } from 'react';
 export interface InlineAlertProps {
     /** What the message means. `danger` is announced assertively; `info` politely. */
     tone?: 'info' | 'warn' | 'danger';
+    /**
+     * 🔴 Needed to point an `aria-describedby` at this message. Without it a product that
+     * wants the alert read out with a control has nowhere to put an id, and nene-vault
+     * wrapped the alert in a `<div>` to get one (2026-08-23). `FormField`'s `hint` is static
+     * help text, so it does not cover "a warning about the value that is in there now".
+     */
+    id?: string;
+    /** Composed after the kit's own classes (design principle 2). */
+    className?: string;
     children: ReactNode;
 }
 /**
  * A message attached to the thing it is about, rather than to the page.
  *
  * 🔴 Each tone reads its colours from the theme, so a product can tell "warning" from
- * "failure" by sight. Until it sets them, `warn` and `danger` share this palette's single
- * alert hue and only the announced urgency differs — and as nene-vault put it, that
- * difference reaches someone listening and no one looking.
+ * "failure" by sight. Until 0.12.0 they could not: `warn` pointed at `--color-danger`, so
+ * only the announced urgency differed — and as nene-vault put it, that difference reaches
+ * someone listening and no one looking. The palette now carries `warn` of its own.
  *
  * 🔴 The tone decides the ARIA role, not just the colour. `danger` becomes `role="alert"`,
  * which interrupts a screen reader; `info` becomes `role="status"`, which waits its turn.
  * Six ships wrote this component (three as `InlineAlert`, three as `Alert`) and the choice
  * of role is precisely the part that is easy to get wrong and invisible when you do.
  */
-export declare function InlineAlert({ tone, children }: InlineAlertProps): import("react").JSX.Element;
+export declare function InlineAlert({ tone, id, className, children }: InlineAlertProps): import("react").JSX.Element;

package/dist/feedback/InlineAlert.js

@@ -9,16 +9,16 @@ const TONE_CLASS = {
  * A message attached to the thing it is about, rather than to the page.
  *
  * 🔴 Each tone reads its colours from the theme, so a product can tell "warning" from
- * "failure" by sight. Until it sets them, `warn` and `danger` share this palette's single
- * alert hue and only the announced urgency differs — and as nene-vault put it, that
- * difference reaches someone listening and no one looking.
+ * "failure" by sight. Until 0.12.0 they could not: `warn` pointed at `--color-danger`, so
+ * only the announced urgency differed — and as nene-vault put it, that difference reaches
+ * someone listening and no one looking. The palette now carries `warn` of its own.
  *
  * 🔴 The tone decides the ARIA role, not just the colour. `danger` becomes `role="alert"`,
  * which interrupts a screen reader; `info` becomes `role="status"`, which waits its turn.
  * Six ships wrote this component (three as `InlineAlert`, three as `Alert`) and the choice
  * of role is precisely the part that is easy to get wrong and invisible when you do.
  */
-export function InlineAlert({ tone = 'info', children }) {
-    return (_jsx("div", { role: tone === 'danger' ? 'alert' : 'status', className: cx('rounded-x-slot-alert border p-x-slot-alert-pad font-sans', TONE_CLASS[tone]), children: children }));
+export function InlineAlert({ tone = 'info', id, className, children }) {
+    return (_jsx("div", { id: id, role: tone === 'danger' ? 'alert' : 'status', className: cx('rounded-x-slot-alert border p-x-slot-alert-pad font-sans', TONE_CLASS[tone], className), children: children }));
 }
 //# sourceMappingURL=InlineAlert.js.map

package/dist/feedback/InlineAlert.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../src/feedback/InlineAlert.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC,MAAM,UAAU,GAA0D;IACxE,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;IACzF,MAAM,EAAE,yFAAyF;CAClG,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,QAAQ,EAAoB;IACvE,OAAO,CACL,cACE,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,SAAS,EAAE,EAAE,CAAC,0DAA0D,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC,YAE1F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"InlineAlert.js","sourceRoot":"","sources":["../../src/feedback/InlineAlert.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiBlC,MAAM,UAAU,GAA0D;IACxE,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;IACzF,MAAM,EAAE,yFAAyF;CAClG,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAoB;IACtF,OAAO,CACL,cACE,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC5C,SAAS,EAAE,EAAE,CACX,0DAA0D,EAC1D,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/forms/FormField.d.ts

@@ -6,6 +6,16 @@ export interface FormFieldProps {
     label: string;
     /** Localized error message, or null when valid. */
     error?: string | null;
+    /**
+     * Localized warning, or null when there is nothing to flag.
+     *
+     * 🔴 Not a milder `error`. A warning marks a value the form accepts — nene-vault flags a
+     * retention period under ten years, which satisfies every rule the field has. So it does
+     * NOT set `aria-invalid`: announcing a legal value as invalid is worse than saying
+     * nothing. It is announced as a `role="status"` and linked through `aria-describedby`,
+     * and it paints through `data-warn`.
+     */
+    warning?: string | null;
     /**
      * Localized help text, shown under the control and read out with it.
      *
@@ -44,4 +54,4 @@ export interface FormFieldProps {
  * 🔴 The hint stays visible when there is an error. nene-profile hides it in that case, and
  * that is the moment the user most needs it; the error is read first instead.
  */
-export declare function FormField({ id, label, error, hint, labelAdornment, required, requiredMarker, children, }: FormFieldProps): import("react").JSX.Element;
+export declare function FormField({ id, label, error, warning, hint, labelAdornment, required, requiredMarker, children, }: FormFieldProps): import("react").JSX.Element;

package/dist/forms/FormField.js

@@ -16,10 +16,14 @@ import { FieldContext } from './field-context.js';
  * 🔴 The hint stays visible when there is an error. nene-profile hides it in that case, and
  * that is the moment the user most needs it; the error is read first instead.
  */
-export function FormField({ id, label, error = null, hint, labelAdornment, required = false, requiredMarker, children, }) {
+export function FormField({ id, label, error = null, warning = null, hint, labelAdornment, required = false, requiredMarker, children, }) {
     const errorId = error === null ? null : `${id}-error`;
+    const warningId = warning === null ? null : `${id}-warning`;
     const hintId = hint === undefined || hint === null ? null : `${id}-hint`;
-    const value = useMemo(() => ({ id, errorId, hintId, required }), [id, errorId, hintId, required]);
-    return (_jsx(FieldContext.Provider, { value: value, children: _jsxs("div", { className: "flex flex-col gap-x-slot-field-gap", children: [_jsxs("label", { htmlFor: id, className: "font-sans font-x-slot-field-label text-x-slot-field-label-size text-x-slot-field-label", children: [label, required && requiredMarker !== undefined && requiredMarker !== null ? (_jsx("span", { className: "text-x-slot-field-error-fg", children: requiredMarker })) : null, labelAdornment] }), children, hintId === null ? null : (_jsx("span", { id: hintId, className: "font-sans text-x-slot-field-hint-size text-x-slot-field-hint", children: hint })), errorId === null ? null : (_jsx("p", { id: errorId, role: "alert", className: "font-sans text-x-slot-field-error-size text-x-slot-field-error", children: error }))] }) }));
+    const value = useMemo(() => ({ id, errorId, warningId, hintId, required }), [id, errorId, warningId, hintId, required]);
+    return (_jsx(FieldContext.Provider, { value: value, children: _jsxs("div", { className: "flex flex-col gap-x-slot-field-gap", children: [_jsxs("label", { htmlFor: id, className: "font-sans font-x-slot-field-label text-x-slot-field-label-size text-x-slot-field-label", children: [label, required && requiredMarker !== undefined && requiredMarker !== null ? (_jsx("span", { className: "text-x-slot-field-required-marker", children: requiredMarker })) : null, labelAdornment] }), children, hintId === null ? null : (_jsx("span", { id: hintId, className: "font-sans text-x-slot-field-hint-size text-x-slot-field-hint", children: hint })), warningId === null ? null : (
+                // role="status" ではなく role="alert" にすると、入力の途中で読み上げを割り込む。
+                // 警告は「見直す価値がある」であって「止まれ」ではないので、次の切れ目で読ませる。
+                _jsx("p", { id: warningId, role: "status", className: "font-sans text-x-slot-field-error-size text-x-slot-field-warning-fg", children: warning })), errorId === null ? null : (_jsx("p", { id: errorId, role: "alert", className: "font-sans text-x-slot-field-error-size text-x-slot-field-error", children: error }))] }) }));
 }
 //# sourceMappingURL=FormField.js.map

package/dist/forms/FormField.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/forms/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAiClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,GAAG,IAAI,EACZ,IAAI,EACJ,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GACO;IACf,MAAM,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC;IACtD,MAAM,MAAM,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;IACzE,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAElG,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,eAAK,SAAS,EAAC,oCAAoC,aACjD,iBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,wFAAwF,aAEjG,KAAK,EACL,QAAQ,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,CAAC,CAAC,CAAC,CACrE,eAAM,SAAS,EAAC,4BAA4B,YAAE,cAAc,GAAQ,CACrE,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,IACT,EACP,QAAQ,EACR,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,eACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,8DAA8D,YAEvE,IAAI,GACA,CACR,EACA,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,YACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,gEAAgE,YAEzE,KAAK,GACJ,CACL,IACG,GACgB,CACzB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/forms/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAkB,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AA2ClD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,EACxB,EAAE,EACF,KAAK,EACL,KAAK,GAAG,IAAI,EACZ,OAAO,GAAG,IAAI,EACd,IAAI,EACJ,cAAc,EACd,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,QAAQ,GACO;IACf,MAAM,OAAO,GAAG,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,QAAQ,CAAC;IACtD,MAAM,SAAS,GAAG,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC;IAC5D,MAAM,MAAM,GAAG,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,EAAE,OAAO,CAAC;IACzE,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,EACpD,CAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,CAAC,CAC3C,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACjC,eAAK,SAAS,EAAC,oCAAoC,aACjD,iBACE,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,wFAAwF,aAEjG,KAAK,EACL,QAAQ,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,IAAI,CAAC,CAAC,CAAC,CACrE,eAAM,SAAS,EAAC,mCAAmC,YAAE,cAAc,GAAQ,CAC5E,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,IACT,EACP,QAAQ,EACR,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,eACE,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,8DAA8D,YAEvE,IAAI,GACA,CACR,EACA,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC3B,wDAAwD;gBACxD,2CAA2C;gBAC3C,YACE,EAAE,EAAE,SAAS,EACb,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qEAAqE,YAE9E,OAAO,GACN,CACL,EACA,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,YACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,gEAAgE,YAEzE,KAAK,GACJ,CACL,IACG,GACgB,CACzB,CAAC;AACJ,CAAC"}

package/dist/forms/field-context.d.ts

@@ -6,6 +6,13 @@ export interface FieldContextValue {
     errorId: string | null;
     /** id of the rendered hint, or null when there is no hint. */
     hintId: string | null;
+    /**
+     * id of the rendered warning, or null when there is none.
+     *
+     * 🔴 Separate from `errorId`, and deliberately not `aria-invalid`. A warning marks a
+     * value worth a second look, not a value the form rejects.
+     */
+    warningId: string | null;
     /** Whether the field must be filled in. */
     required: boolean;
 }
@@ -15,6 +22,12 @@ export interface FieldWiring {
     'aria-invalid'?: AriaAttributes['aria-invalid'] | undefined;
     'aria-describedby'?: string | undefined;
     'aria-required'?: AriaAttributes['aria-required'] | undefined;
+    /**
+     * Present when the field carries a warning. Not an ARIA attribute — it paints, and says
+     * nothing to assistive technology, because the warning text is already linked through
+     * `aria-describedby`.
+     */
+    'data-warn'?: '' | undefined;
 }
 /**
  * Wire a control to the `FormField` around it.

package/dist/forms/field-context.js

@@ -38,14 +38,19 @@ export function useFieldWiring(explicit) {
             'aria-invalid': explicit.ariaInvalid,
             'aria-describedby': explicit.ariaDescribedBy,
             'aria-required': explicit.ariaRequired,
+            'data-warn': undefined,
         };
     }
-    const described = [field.errorId, field.hintId].filter((v) => v !== null).join(' ');
+    // Error first, then warning, then hint — read in the order they matter.
+    const described = [field.errorId, field.warningId, field.hintId]
+        .filter((v) => v !== null)
+        .join(' ');
     return {
         id: explicit.id ?? field.id,
         'aria-invalid': explicit.ariaInvalid ?? (field.errorId === null ? undefined : true),
         'aria-describedby': explicit.ariaDescribedBy ?? (described === '' ? undefined : described),
         'aria-required': explicit.ariaRequired ?? (field.required ? true : undefined),
+        'data-warn': field.warningId === null ? undefined : '',
     };
 }
 //# sourceMappingURL=field-context.js.map

package/dist/forms/field-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-context.js","sourceRoot":"","sources":["../../src/forms/field-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAavE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAW1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,cAAc,CAAC,QAK9B;IACC,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,OAAO;YACL,EAAE,EAAE,QAAQ,CAAC,EAAE;YACf,cAAc,EAAE,QAAQ,CAAC,WAAW;YACpC,kBAAkB,EAAE,QAAQ,CAAC,eAAe;YAC5C,eAAe,EAAE,QAAQ,CAAC,YAAY;SACvC,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEjG,OAAO;QACL,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE;QAC3B,cAAc,EAAE,QAAQ,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QACnF,kBAAkB,EAAE,QAAQ,CAAC,eAAe,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1F,eAAe,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;KAC9E,CAAC;AACJ,CAAC"}
+{"version":3,"file":"field-context.js","sourceRoot":"","sources":["../../src/forms/field-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAoBvE,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAiB1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,cAAc,CAAC,QAK9B;IACC,MAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACnB,OAAO;YACL,EAAE,EAAE,QAAQ,CAAC,EAAE;YACf,cAAc,EAAE,QAAQ,CAAC,WAAW;YACpC,kBAAkB,EAAE,QAAQ,CAAC,eAAe;YAC5C,eAAe,EAAE,QAAQ,CAAC,YAAY;YACtC,WAAW,EAAE,SAAS;SACvB,CAAC;IACJ,CAAC;IAED,wEAAwE;IACxE,MAAM,SAAS,GAAG,CAAC,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC;SAC7D,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;SACtC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEb,OAAO;QACL,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,KAAK,CAAC,EAAE;QAC3B,cAAc,EAAE,QAAQ,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC;QACnF,kBAAkB,EAAE,QAAQ,CAAC,eAAe,IAAI,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;QAC1F,eAAe,EAAE,QAAQ,CAAC,YAAY,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;QAC7E,WAAW,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;KACvD,CAAC;AACJ,CAAC"}

package/dist/lib/states.d.ts

@@ -64,6 +64,36 @@ export declare const DISABLED_CLASS = "disabled:opacity-x-disabled disabled:curs
  */
 export declare const HOVER_CLASS = "hover:brightness-x-slot-hover active:brightness-x-slot-press disabled:hover:brightness-100 disabled:active:brightness-100";
 /** Controls that can be focused and disabled — every interactive primitive in the kit. */
-export declare const CONTROL_CLASS = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-x-slot-focus-ring disabled:opacity-x-disabled disabled:cursor-not-allowed";
+/**
+ * Validity, painted.
+ *
+ * 🔴 Two states, and only one of them is `aria-invalid`. A value can be worth flagging
+ * without being wrong: nene-vault marks a retention period under ten years, which satisfies
+ * every rule the form has. Setting `aria-invalid` there would announce a legal value as an
+ * error, and not setting it left the field with no signal at all — the kit painted neither.
+ * So the warning is `data-warn`, an attribute that carries no ARIA meaning; the message
+ * beside it is what a screen reader gets, through `aria-describedby`.
+ *
+ * The error keeps `aria-invalid`, which is what it is for.
+ */
+export declare const VALIDITY_CLASS: string;
+/**
+ * The minimum a control may be on a touch screen.
+ *
+ * 🔴 Deliberately NOT part of `CONTROL_CLASS`, though everything else here is. This has to
+ * go on the element that *is* the target, and for a checkbox that is the `<label>`, not the
+ * `<input>` — the box is `size-x-slot-choice-box` (16px square), so a minimum height on it
+ * produces a 44×16 rectangle instead of a bigger target. Folding it into the shared bundle
+ * would have applied it there, and the result would have looked like a styling bug rather
+ * than a mis-placed constraint.
+ *
+ * 🔴 It only works at all because the elements that carry it are flex containers. A
+ * `min-height` on an `inline-block` leaves the label at the top of the taller box; with
+ * `items-center` it stays centred. `Button` became one in 0.13.0 for an unrelated reason
+ * (an icon and its label sat on a shared baseline), and that turned out to be a
+ * prerequisite for this.
+ */
+export declare const TOUCH_CLASS = "pointer-coarse:min-h-x-slot-control-touch-min";
+export declare const CONTROL_CLASS: string;
 /** Controls that are also clicked: buttons, switches, the toast dismiss. */
-export declare const CLICKABLE_CLASS = "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-x-slot-focus-ring disabled:opacity-x-disabled disabled:cursor-not-allowed hover:brightness-x-slot-hover active:brightness-x-slot-press disabled:hover:brightness-100 disabled:active:brightness-100";
+export declare const CLICKABLE_CLASS: string;

package/dist/lib/states.js

@@ -64,7 +64,42 @@ export const DISABLED_CLASS = 'disabled:opacity-x-disabled disabled:cursor-not-a
  */
 export const HOVER_CLASS = 'hover:brightness-x-slot-hover active:brightness-x-slot-press disabled:hover:brightness-100 disabled:active:brightness-100';
 /** Controls that can be focused and disabled — every interactive primitive in the kit. */
-export const CONTROL_CLASS = `${FOCUS_CLASS} ${DISABLED_CLASS}`;
+/**
+ * Validity, painted.
+ *
+ * 🔴 Two states, and only one of them is `aria-invalid`. A value can be worth flagging
+ * without being wrong: nene-vault marks a retention period under ten years, which satisfies
+ * every rule the form has. Setting `aria-invalid` there would announce a legal value as an
+ * error, and not setting it left the field with no signal at all — the kit painted neither.
+ * So the warning is `data-warn`, an attribute that carries no ARIA meaning; the message
+ * beside it is what a screen reader gets, through `aria-describedby`.
+ *
+ * The error keeps `aria-invalid`, which is what it is for.
+ */
+export const VALIDITY_CLASS = [
+    'aria-invalid:border-x-slot-control-invalid-border',
+    'aria-invalid:bg-x-slot-control-invalid-bg',
+    'data-[warn]:border-x-slot-control-warn-border',
+    'data-[warn]:bg-x-slot-control-warn-bg',
+].join(' ');
+/**
+ * The minimum a control may be on a touch screen.
+ *
+ * 🔴 Deliberately NOT part of `CONTROL_CLASS`, though everything else here is. This has to
+ * go on the element that *is* the target, and for a checkbox that is the `<label>`, not the
+ * `<input>` — the box is `size-x-slot-choice-box` (16px square), so a minimum height on it
+ * produces a 44×16 rectangle instead of a bigger target. Folding it into the shared bundle
+ * would have applied it there, and the result would have looked like a styling bug rather
+ * than a mis-placed constraint.
+ *
+ * 🔴 It only works at all because the elements that carry it are flex containers. A
+ * `min-height` on an `inline-block` leaves the label at the top of the taller box; with
+ * `items-center` it stays centred. `Button` became one in 0.13.0 for an unrelated reason
+ * (an icon and its label sat on a shared baseline), and that turned out to be a
+ * prerequisite for this.
+ */
+export const TOUCH_CLASS = 'pointer-coarse:min-h-x-slot-control-touch-min';
+export const CONTROL_CLASS = `${FOCUS_CLASS} ${DISABLED_CLASS} ${VALIDITY_CLASS}`;
 /** Controls that are also clicked: buttons, switches, the toast dismiss. */
 export const CLICKABLE_CLASS = `${CONTROL_CLASS} ${HOVER_CLASS}`;
 //# sourceMappingURL=states.js.map

package/dist/lib/states.js.map

@@ -1 +1 @@
-{"version":3,"file":"states.js","sourceRoot":"","sources":["../../src/lib/states.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,kFAAkF;AAClF,MAAM,CAAC,MAAM,WAAW,GACtB,gGAAgG,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,yDAAyD,CAAC;AAExF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GACtB,2HAA2H,CAAC;AAE9H,0FAA0F;AAC1F,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,WAAW,IAAI,cAAc,EAAE,CAAC;AAEhE,4EAA4E;AAC5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,aAAa,IAAI,WAAW,EAAE,CAAC"}
+{"version":3,"file":"states.js","sourceRoot":"","sources":["../../src/lib/states.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AAEH,kFAAkF;AAClF,MAAM,CAAC,MAAM,WAAW,GACtB,gGAAgG,CAAC;AAEnG;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,yDAAyD,CAAC;AAExF;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,WAAW,GACtB,2HAA2H,CAAC;AAE9H,0FAA0F;AAC1F;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,mDAAmD;IACnD,2CAA2C;IAC3C,+CAA+C;IAC/C,uCAAuC;CACxC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,+CAA+C,CAAC;AAE3E,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,WAAW,IAAI,cAAc,IAAI,cAAc,EAAE,CAAC;AAElF,4EAA4E;AAC5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,aAAa,IAAI,WAAW,EAAE,CAAC"}

package/dist/primitives/Button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../lib/cx.js';
-import { CLICKABLE_CLASS } from '../lib/states.js';
+import { CLICKABLE_CLASS, TOUCH_CLASS } from '../lib/states.js';
 const VARIANT_CLASS = {
     primary: 'bg-x-slot-button-primary-bg text-x-slot-button-primary-fg',
     secondary: 'bg-x-slot-button-secondary-bg text-x-slot-button-secondary-fg border-x-slot-button-secondary-border',
@@ -10,9 +10,22 @@ const VARIANT_CLASS = {
     ghost: 'bg-transparent text-x-slot-button-ghost-fg',
 };
 const SIZE_CLASS = {
-    md: 'px-x-slot-button-pad-x py-x-slot-button-pad-y',
-    sm: 'px-x-slot-button-sm-pad-x py-x-slot-button-sm-pad-y',
+    md: 'px-x-slot-button-pad-x py-x-slot-button-pad-y text-x-slot-button-size',
+    sm: 'px-x-slot-button-sm-pad-x py-x-slot-button-sm-pad-y text-x-slot-button-sm-size',
 };
+// 🔴 `inline-flex`, so the button places what is inside it. A `<button>` is `inline-block`
+// by default, which leaves an icon and its label on a shared baseline rather than centred —
+// visible as a half-pixel of drift on every icon button, and invisible in a diff. The kit
+// already takes responsibility for the size of an `<svg>` in here (`SVG_BOUND`); taking
+// responsibility for where it sits is the other half of the same job, and leaving one to the
+// caller while doing the other is the asymmetry nene-vault had to work around by writing
+// `inline-flex` at the call site.
+//
+// ⚠️ This changes rendering. A text-only button is laid out by flex rather than by inline
+// flow, so it no longer sits on the surrounding text's baseline the way an inline-block does.
+// Inside a paragraph that is visible; in the button rows and toolbars these are actually used
+// in, it is not. `inline-flex` rather than `flex` keeps the element from claiming a line.
+//
 // 🔴 `border border-transparent` is load-bearing. Height comes from the padding, so the
 // `secondary` variant — the only one with a visible border — would otherwise stand 2px
 // taller than the others. nene-vault puts a primary and a secondary side by side in seven
@@ -29,7 +42,7 @@ const SIZE_CLASS = {
 // instead of its own. A maximum cannot collide with a height: different property, and it
 // leaves anything already smaller alone.
 const SVG_BOUND = '[&_svg]:max-h-x-slot-button-icon [&_svg]:max-w-x-slot-button-icon';
-const BASE_CLASS = `rounded-x-slot-button border border-transparent font-sans text-x-slot-button-size font-x-slot-button ${SVG_BOUND} ${CLICKABLE_CLASS}`;
+const BASE_CLASS = `rounded-x-slot-button border border-transparent inline-flex items-center justify-center gap-x-slot-button-gap font-sans font-x-slot-button ${SVG_BOUND} ${TOUCH_CLASS} ${CLICKABLE_CLASS}`;
 export function Button({ variant = 'primary', size = 'md', children, type = 'button', className, ...rest }) {
     return (_jsx("button", { type: type, className: cx(BASE_CLASS, SIZE_CLASS[size], VARIANT_CLASS[variant], className), ...rest, children: children }));
 }

package/dist/primitives/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/primitives/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAcnD,MAAM,aAAa,GAAwD;IACzE,OAAO,EAAE,2DAA2D;IACpE,SAAS,EACP,qGAAqG;IACvG,MAAM,EAAE,yDAAyD;IACjE,uFAAuF;IACvF,kEAAkE;IAClE,KAAK,EAAE,4CAA4C;CACpD,CAAC;AAEF,MAAM,UAAU,GAAqD;IACnE,EAAE,EAAE,+CAA+C;IACnD,EAAE,EAAE,qDAAqD;CAC1D,CAAC;AAEF,wFAAwF;AACxF,uFAAuF;AACvF,0FAA0F;AAC1F,6FAA6F;AAC7F,mDAAmD;AACnD,2FAA2F;AAC3F,6FAA6F;AAC7F,4FAA4F;AAC5F,yDAAyD;AACzD,EAAE;AACF,2FAA2F;AAC3F,0FAA0F;AAC1F,yFAAyF;AACzF,yFAAyF;AACzF,yCAAyC;AACzC,MAAM,SAAS,GAAG,mEAAmE,CAAC;AAEtF,MAAM,UAAU,GAAG,wGAAwG,SAAS,IAAI,eAAe,EAAE,CAAC;AAE1J,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,GAAG,IAAI,EACK;IACZ,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,KAC1E,IAAI,YAEP,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/primitives/Button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAchE,MAAM,aAAa,GAAwD;IACzE,OAAO,EAAE,2DAA2D;IACpE,SAAS,EACP,qGAAqG;IACvG,MAAM,EAAE,yDAAyD;IACjE,uFAAuF;IACvF,kEAAkE;IAClE,KAAK,EAAE,4CAA4C;CACpD,CAAC;AAEF,MAAM,UAAU,GAAqD;IACnE,EAAE,EAAE,uEAAuE;IAC3E,EAAE,EAAE,gFAAgF;CACrF,CAAC;AAEF,2FAA2F;AAC3F,4FAA4F;AAC5F,0FAA0F;AAC1F,wFAAwF;AACxF,6FAA6F;AAC7F,yFAAyF;AACzF,kCAAkC;AAClC,EAAE;AACF,0FAA0F;AAC1F,8FAA8F;AAC9F,8FAA8F;AAC9F,0FAA0F;AAC1F,EAAE;AACF,wFAAwF;AACxF,uFAAuF;AACvF,0FAA0F;AAC1F,6FAA6F;AAC7F,mDAAmD;AACnD,2FAA2F;AAC3F,6FAA6F;AAC7F,4FAA4F;AAC5F,yDAAyD;AACzD,EAAE;AACF,2FAA2F;AAC3F,0FAA0F;AAC1F,yFAAyF;AACzF,yFAAyF;AACzF,yCAAyC;AACzC,MAAM,SAAS,GAAG,mEAAmE,CAAC;AAEtF,MAAM,UAAU,GAAG,8IAA8I,SAAS,IAAI,WAAW,IAAI,eAAe,EAAE,CAAC;AAE/M,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,GAAG,IAAI,EACK;IACZ,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,KAC1E,IAAI,YAEP,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/primitives/Checkbox.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CONTROL_CLASS } from '../lib/states.js';
+import { CONTROL_CLASS, TOUCH_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
 const BOX_CLASS = `size-x-slot-choice-box shrink-0 rounded-x-slot-control border border-x-slot-choice-border accent-x-slot-choice-accent ${CONTROL_CLASS}`;
 /**
@@ -31,6 +31,6 @@ const BOX_CLASS = `size-x-slot-choice-box shrink-0 rounded-x-slot-control border
  */
 export const Checkbox = forwardRef(function Checkbox({ label, className, inputClassName, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired, ...rest }, ref) {
     const wiring = useFieldWiring({ id, ariaInvalid, ariaDescribedBy, ariaRequired });
-    return (_jsxs("label", { className: cx('inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-x-slot-choice-size text-x-slot-choice-fg', className), children: [_jsx("input", { ref: ref, type: "checkbox", className: cx(BOX_CLASS, inputClassName), ...wiring, ...rest }), label] }));
+    return (_jsxs("label", { className: cx(TOUCH_CLASS, 'inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-x-slot-choice-size text-x-slot-choice-fg', className), children: [_jsx("input", { ref: ref, type: "checkbox", className: cx(BOX_CLASS, inputClassName), ...wiring, ...rest }), label] }));
 });
 //# sourceMappingURL=Checkbox.js.map

package/dist/primitives/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/primitives/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAY3D,MAAM,SAAS,GAAG,yHAAyH,aAAa,EAAE,CAAC;AAE3J;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CACnF,EACE,KAAK,EACL,SAAS,EACT,cAAc,EACd,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,uHAAuH,EACvH,SAAS,CACV,aAED,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,KACpC,MAAM,KACN,IAAI,GACR,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../src/primitives/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAY3D,MAAM,SAAS,GAAG,yHAAyH,aAAa,EAAE,CAAC;AAE3J;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CACnF,EACE,KAAK,EACL,SAAS,EACT,cAAc,EACd,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,WAAW,EACX,uHAAuH,EACvH,SAAS,CACV,aAED,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,KACpC,MAAM,KACN,IAAI,GACR,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Input.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CONTROL_CLASS } from '../lib/states.js';
+import { CONTROL_CLASS, TOUCH_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg placeholder:text-x-slot-control-placeholder ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg placeholder:text-x-slot-control-placeholder ${CONTROL_CLASS} ${TOUCH_CLASS}`;
 /**
  * Text input primitive. forwardRef so it works directly with react-hook-form `register`.
  * Visual values come from theme tokens only.

package/dist/primitives/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,8RAA8R,aAAa,EAAE,CAAC;AAEjU;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AACzF,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../src/primitives/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4B,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,8RAA8R,aAAa,IAAI,WAAW,EAAE,CAAC;AAEhV;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,gBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AACzF,CAAC,CAAC,CAAC"}

package/dist/primitives/Radio.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CONTROL_CLASS } from '../lib/states.js';
+import { CONTROL_CLASS, TOUCH_CLASS } from '../lib/states.js';
 const DOT_CLASS = `size-x-slot-choice-box shrink-0 border border-x-slot-choice-border accent-x-slot-choice-accent ${CONTROL_CLASS}`;
 /**
  * One option in a radio group, with its label.
@@ -28,6 +28,6 @@ const DOT_CLASS = `size-x-slot-choice-box shrink-0 border border-x-slot-choice-b
  * the pointer cursor on every choice — visible to a mouse user, invisible in a diff.
  */
 export const Radio = forwardRef(function Radio({ label, name, className, inputClassName, ...rest }, ref) {
-    return (_jsxs("label", { className: cx('inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-x-slot-choice-size text-x-slot-choice-fg', className), children: [_jsx("input", { ref: ref, type: "radio", name: name, className: cx(DOT_CLASS, inputClassName), ...rest }), label] }));
+    return (_jsxs("label", { className: cx(TOUCH_CLASS, 'inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-x-slot-choice-size text-x-slot-choice-fg', className), children: [_jsx("input", { ref: ref, type: "radio", name: name, className: cx(DOT_CLASS, inputClassName), ...rest }), label] }));
 });
 //# sourceMappingURL=Radio.js.map

package/dist/primitives/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/primitives/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAcjD,MAAM,SAAS,GAAG,kGAAkG,aAAa,EAAE,CAAC;AAEpI;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EACnD,GAAG;IAEH,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,uHAAuH,EACvH,SAAS,CACV,aAED,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,KACpC,IAAI,GACR,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/primitives/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA4C,MAAM,OAAO,CAAC;AAC7E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAc9D,MAAM,SAAS,GAAG,kGAAkG,aAAa,EAAE,CAAC;AAEpI;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,EAAE,EACnD,GAAG;IAEH,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,WAAW,EACX,uHAAuH,EACvH,SAAS,CACV,aAED,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,cAAc,CAAC,KACpC,IAAI,GACR,EACD,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Select.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CONTROL_CLASS } from '../lib/states.js';
+import { CONTROL_CLASS, TOUCH_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg ${CONTROL_CLASS} ${TOUCH_CLASS}`;
 /**
  * Select primitive. forwardRef so it works directly with react-hook-form `register`.
  * Visual values come from theme tokens only.

package/dist/primitives/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/primitives/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6C,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAM3D,MAAM,UAAU,GAAG,kPAAkP,aAAa,EAAE,CAAC;AAErR;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,YACzE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/primitives/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6C,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAM3D,MAAM,UAAU,GAAG,kPAAkP,aAAa,IAAI,WAAW,EAAE,CAAC;AAEpS;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EACE,QAAQ,EACR,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,iBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,YACzE,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Switch.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CLICKABLE_CLASS } from '../lib/states.js';
+import { CLICKABLE_CLASS, TOUCH_CLASS } from '../lib/states.js';
 /**
  * An on/off control that takes effect immediately.
  *
@@ -14,7 +14,7 @@ import { CLICKABLE_CLASS } from '../lib/states.js';
  * `aria-checked` carries the state; the visible track is decoration on top of it.
  */
 export const Switch = forwardRef(function Switch({ checked, onCheckedChange, label, className, ...rest }, ref) {
-    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, onClick: () => onCheckedChange(!checked), className: cx('inline-flex items-center rounded-x-slot-switch border border-x-slot-switch-border px-x-slot-switch-pad-x py-x-slot-switch-pad-y font-sans', checked
+    return (_jsx("button", { ref: ref, type: "button", role: "switch", "aria-checked": checked, "aria-label": label, onClick: () => onCheckedChange(!checked), className: cx(TOUCH_CLASS, 'inline-flex items-center rounded-x-slot-switch border border-x-slot-switch-border px-x-slot-switch-pad-x py-x-slot-switch-pad-y font-sans', checked
             ? 'bg-x-slot-switch-on-bg text-x-slot-switch-on-fg'
             : 'bg-x-slot-switch-off-bg text-x-slot-switch-off-fg', CLICKABLE_CLASS, className), ...rest, children: label }));
 });

package/dist/primitives/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/primitives/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAUnD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EACxC,SAAS,EAAE,EAAE,CACX,2IAA2I,EAC3I,OAAO;YACL,CAAC,CAAC,iDAAiD;YACnD,CAAC,CAAC,mDAAmD,EACvD,eAAe,EACf,SAAS,CACV,KACG,IAAI,YAEP,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/primitives/Switch.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA6B,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUhE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAiC,SAAS,MAAM,CAC9E,EAAE,OAAO,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACvD,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,kBACC,OAAO,gBACT,KAAK,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EACxC,SAAS,EAAE,EAAE,CACX,WAAW,EACX,2IAA2I,EAC3I,OAAO;YACL,CAAC,CAAC,iDAAiD;YACnD,CAAC,CAAC,mDAAmD,EACvD,eAAe,EACf,SAAS,CACV,KACG,IAAI,YAEP,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Textarea.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
-import { CONTROL_CLASS } from '../lib/states.js';
+import { CONTROL_CLASS, TOUCH_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg placeholder:text-x-slot-control-placeholder ${CONTROL_CLASS}`;
+const BASE_CLASS = `w-full rounded-x-slot-control border border-x-slot-control-border bg-x-slot-control-bg px-x-slot-control-pad-x py-x-slot-control-pad-y font-sans text-x-slot-control-size pointer-coarse:text-x-slot-control-touch-size text-x-slot-control-fg placeholder:text-x-slot-control-placeholder ${CONTROL_CLASS} ${TOUCH_CLASS}`;
 /**
  * Multi-line text input. Deliberately identical to `Input` apart from the element, so the
  * two never drift: five ships wrote their own `Textarea.tsx` and the kit shipped without

package/dist/primitives/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/primitives/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,8RAA8R,aAAa,EAAE,CAAC;AAEjU;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,mBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AAC5F,CAAC,CAAC,CAAC"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/primitives/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAA+B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAI3D,MAAM,UAAU,GAAG,8RAA8R,aAAa,IAAI,WAAW,EAAE,CAAC;AAEhV;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAqC,SAAS,QAAQ,CACtF,EACE,SAAS,EACT,EAAE,EACF,cAAc,EAAE,WAAW,EAC3B,kBAAkB,EAAE,eAAe,EACnC,eAAe,EAAE,YAAY,EAC7B,GAAG,IAAI,EACR,EACD,GAAG;IAEH,MAAM,MAAM,GAAG,cAAc,CAAC,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,CAAC;IAElF,OAAO,mBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,CAAC;AAC5F,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hideyukimori/nene2-ui",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "description": "NeNe fleet shared React UI kit — token-driven primitives on Tailwind v4 @theme. Components carry no design of their own; themes do.",
   "type": "module",
   "license": "MIT",

package/themes/default.css

@@ -19,6 +19,30 @@
   --color-on-accent: oklch(99% 0 0);
   --color-danger: oklch(55% 0.2 25);
 
+  /* 🔴 Four contract colours the theme did not define. They are not new: `warn`,
+   * `warn-soft`, `on-warn` and `danger-soft` are in the frozen Core Token Contract v1
+   * (28 colours), and this theme defined 8 of them. Twenty are still missing — see the
+   * README — but these four are what a validity state needs.
+   *
+   * Same root cause as the radius scale: the theme was promoted verbatim from nene-payout,
+   * and payout has no warn. Six other ships do (nene-vault, nene-invoice, nene-field,
+   * nene-records, nene-deal, nene-profile), so `--color-x-slot-alert-warn-*` pointed at
+   * `--color-danger` — a warning that renders as an error. Promoting from the product with
+   * the fewest violations exported its missing distinctions along with its consistency.
+   *
+   * Values are the fleet median of the eight `--color-warn` definitions in use
+   * (2026-08-23; nene-field's hex converted to OKLCH to be counted).
+   *
+   * 🔴 `on-warn` is measured, not chosen. Against this `warn` fill: white is 3.48:1 and
+   * `text-primary` is 4.47:1 — which misses the 4.5:1 body-text threshold by 0.03, and is
+   * exactly the kind of near-miss that survives review by eye. The dark amber below is
+   * 4.97:1. The `warn` fill itself is 3.58:1 against `surface-raised`, clearing the 3:1
+   * that WCAG 1.4.11 asks of a non-text boundary. */
+  --color-warn: oklch(63% 0.135 75);
+  --color-warn-soft: oklch(95% 0.035 80);
+  --color-on-warn: oklch(21% 0.04 75);
+  --color-danger-soft: oklch(95% 0.03 30);
+
   --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.06);
 
   /* Typography. Until 0.3.0 the kit had none of these and the components carried
@@ -54,6 +78,21 @@
   --text-x-xl: 1.5rem;
   --text-x-ios-floor: 16px;
 
+  /* The smallest a control may be on a touch screen. Not a design step, for the same reason
+   * `--text-x-ios-floor` is not: it is what the platform requires, and a product lowering it
+   * is not expressing a preference, it is making targets people miss.
+   *
+   * 🔴 44px, which is what WCAG 2.5.5 (AAA) and Apple's HIG both ask for — the smallest
+   * value that satisfies the standards rather than the fleet's average. Two ships already
+   * set 48px (nene-profile, nene-deal), Material's number; a product that wants it raises
+   * the slot. Picking the higher one here would be the kit imposing a size, and picking a
+   * median would make a device constraint look like a preference.
+   *
+   * ⚠️ The kit's own `sm` button computes to about 31px against a 14px body — above the
+   * 24px WCAG 2.5.8 (AA) asks for, and well under this. The `md` button is already ~47px,
+   * so this changes nothing there. */
+  --spacing-x-touch-floor: 44px;
+
   /* ─────────────────────────────────────────────────────────────────────────
    * ② SLOTS — a product may redefine these.
    *
@@ -70,6 +109,12 @@
   --spacing-x-slot-button-pad-y: var(--spacing-x-xs);
   --spacing-x-slot-button-sm-pad-x: var(--spacing-x-xs);
   --spacing-x-slot-button-sm-pad-y: var(--spacing-x-3xs);
+  /* 🔴 The gap between an icon and its label. It exists because the button became a flex
+   * container in 0.13.0, and a flex container drops the whitespace that used to separate
+   * them: `<Button><Icon /> Save</Button>` renders the text as an anonymous flex item, and
+   * leading whitespace in one is stripped. `3xs` is 0.25rem, which is about the width of
+   * the space that disappears — so the change of display does not also change the spacing. */
+  --spacing-x-slot-button-gap: var(--spacing-x-3xs);
   --spacing-x-slot-control-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-control-pad-y: var(--spacing-x-xs);
   --spacing-x-slot-field-gap: var(--spacing-x-2xs);
@@ -126,9 +171,11 @@
   --color-x-slot-alert-info-bg: var(--color-surface);
   --color-x-slot-alert-info-fg: var(--color-text-primary);
   --color-x-slot-alert-info-border: var(--color-border);
+  /* 🔴 Changed in 0.12.0: these pointed at `--color-danger`, so a warning rendered as an
+   * error. Not a shade — a different meaning wearing the wrong one. */
   --color-x-slot-alert-warn-bg: var(--color-surface);
-  --color-x-slot-alert-warn-fg: var(--color-danger);
-  --color-x-slot-alert-warn-border: var(--color-danger);
+  --color-x-slot-alert-warn-fg: var(--color-on-warn);
+  --color-x-slot-alert-warn-border: var(--color-warn);
   --color-x-slot-alert-danger-bg: var(--color-surface);
   --color-x-slot-alert-danger-fg: var(--color-danger);
   --color-x-slot-alert-danger-border: var(--color-danger);
@@ -137,6 +184,10 @@
   --text-x-slot-field-hint-size: var(--text-x-2xs);
   --color-x-slot-field-error: var(--color-danger);
   --text-x-slot-field-error-size: var(--text-x-2xs);
+  /* 🔴 `on-warn`, not `warn`. This text sits on the page, not on a warn fill: `--color-warn`
+   * measures 3.58:1 against `surface-raised`, which clears the 3:1 a border needs and misses
+   * the 4.5:1 body text needs. The dark amber clears both. */
+  --color-x-slot-field-warning-fg: var(--color-on-warn);
   --text-x-slot-field-label-size: var(--text-x-xs);
   /* 🔴 `var(--font-weight-medium)`, not `500`. Identical output — Tailwind defines that
    * step as 500 — but a literal here is a weight the kit invented, and the namespace has a
@@ -156,6 +207,11 @@
    * only because the kit cannot know a product's rem base — not because it is yours to tune. */
   --text-x-slot-control-size: var(--text-x-md);
   --text-x-slot-control-touch-size: var(--text-x-ios-floor);
+  /* The other half of the same constraint: the first says a focused control must not be
+   * small enough to make iOS zoom, this says it must not be small enough to miss. Applied
+   * only under `@media (pointer: coarse)` — pointer, not width, for the reason recorded
+   * above (an iPad in landscape is wide and still has fingers). */
+  --spacing-x-slot-control-touch-min: var(--spacing-x-touch-floor);
 
   /* ── Colour slots ─────────────────────────────────────────────────────────────
    * Every colour a component paints comes from here.
@@ -192,6 +248,25 @@
   --color-x-slot-control-border: var(--color-border);
   --color-x-slot-control-placeholder: var(--color-text-muted);
 
+  /* 🔴 The kit painted nothing for validity until 0.12.0 — an invalid control looked exactly
+   * like a valid one, while `aria-invalid` was set and announced. Seven of nine ships paint
+   * it themselves (Tailwind `aria-invalid:` variants, CSS selectors, or a class name), so a
+   * migration onto the kit silently removed a signal the product already had. nene-vault
+   * lost an amber border on retention periods under ten years, and the test that guarded it
+   * asserted `aria-invalid="true"` — the attribute, not the paint — so it stayed green.
+   *
+   * 🔑 A test can check a stand-in for the thing it cares about. While both live in the
+   * same component that is the same test; the moment the real thing moves upstream, the
+   * stand-in stays behind and keeps passing.
+   *
+   * Border, not a ring: `ring-*` is a box-shadow and a parent with `overflow: hidden` clips
+   * it — the same reason the focus indicator here is an `outline`. The background carries
+   * the rest, and neither competes with the focus outline. */
+  --color-x-slot-control-invalid-border: var(--color-danger);
+  --color-x-slot-control-invalid-bg: var(--color-danger-soft);
+  --color-x-slot-control-warn-border: var(--color-warn);
+  --color-x-slot-control-warn-bg: var(--color-warn-soft);
+
   --color-x-slot-choice-fg: var(--color-text-primary);
   --color-x-slot-choice-border: var(--color-border);
 
@@ -242,7 +317,10 @@
   --color-x-slot-spinner-fg: var(--color-text-muted);
   --color-x-slot-empty-state-fg: var(--color-text-muted);
   --color-x-slot-error-state-fg: var(--color-danger);
-  --color-x-slot-field-error-fg: var(--color-danger);
+  /* 🔴 The required marker, not the error message — that one is `--color-x-slot-field-error`.
+   * Named `-error-fg` when the colour slots were swept in (0.9.0, same day), which reads as
+   * "the error message's colour" and is not. Renamed before anything consumed it. */
+  --color-x-slot-field-required-marker: var(--color-danger);
 
   /* An upper bound for an `<svg>` written directly inside a `Button`.
    *
@@ -282,6 +360,12 @@
    * rather than acted on: changing the type scale is its own decision, with its own
    * measurement, and it is not this release's. */
   --text-x-slot-button-size: inherit;
+  /* 🔴 `sm` gets its own, because padding already has one and the pair was asymmetric:
+   * `--spacing-x-slot-button-{,sm-}pad-{x,y}` is four slots, the font was one. nene-vault
+   * shipped md=13px and sm=12px, and on the kit both came out at the same size — its
+   * pagination "Previous" measured 12px in production against 13px on the migrated build.
+   * Defaults to `inherit` like its sibling, so nothing renders differently today. */
+  --text-x-slot-button-sm-size: inherit;
   --text-x-slot-choice-size: inherit;
 
   /* Sentinel for the consumer's build (#316). Zero-width, so applying it does nothing.