@hideyukimori/nene2-ui 0.4.0 → 0.6.0

package/README.md

@@ -191,8 +191,22 @@ A slot can hold several steps — four-sided padding is just CSS:
 🔴 **There is no shorthand for this, on purpose.** The kit's tokens are written by tooling,
 not typed by hand, so brevity buys nothing — and a shorthand would need an expander, which is
 one more layer that can quietly drop meaning. Plain `var()` composition has no such layer, and
-it can be checked with a regular expression exactly as written: **every value in a slot is a
-`var(--spacing-*)` or `var(--radius-*)`, and nothing else.**
+it can be checked with a regular expression exactly as written.
+
+### What the rule covers
+
+| namespace                             | slot values                  | why                                                                                                                                                                                   |
+| ------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--spacing-*` `--radius-*` `--text-*` | 🔒 **scale references only** | each has a scale, so a literal here is a step the product invented                                                                                                                    |
+| `--color-*`                           | scale (palette) references   | same                                                                                                                                                                                  |
+| `--brightness-*` `--opacity-*`        | literals are fine            | **there is no scale to reference.** A hover darkening of 95% is not a step in a series; inventing a "brightness scale" so the rule could cover it would be a scale with one real user |
+
+🔴 **Check the three namespaces that have scales, not every slot.** Until 0.6.0 this section
+said "and nothing else", while the kit's own theme held `--text-x-slot-field-label-size:
+0.75rem` and `--brightness-x-slot-hover: 95%` — so a product implementing the rule as written
+built a check that failed the kit (nene-vault did exactly that, 2026-08-23). The type scale
+now exists and the text slots reference it; brightness is stated as the exception it always
+was.
 
 That check is what keeps the scale from leaking. `--spacing-x-slot-field-gap: 0.5625rem`
 compiles, looks reasonable, and reintroduces the drift the scale exists to stop — so it fails

package/dist/data/Pagination.d.ts

@@ -1,26 +1,57 @@
-export interface PaginationProps {
-    /** 1-based. */
-    page: number;
-    pageCount: number;
-    onPageChange: (page: number) => void;
+interface PaginationBase {
     /** Localized name for the navigation region, e.g. "Invoice pages". */
     label: string;
     previousLabel: string;
     nextLabel: string;
-    /** Localized current position, e.g. "Page 2 of 9". The kit ships no strings. */
+    /**
+     * Localized statement of where the reader is: "Page 2 of 9", or "Showing 21–40 of 384".
+     *
+     * 🔴 Composed by the caller, and it has to be. Across nene-vault's three paginated screens
+     * the sentence is a *range of items*, not a page number — and a range cannot be recovered
+     * from `page` and `pageCount` once the last page is short (measured 2026-08-23). A
+     * component that only knew about pages could not produce the sentence the product needs.
+     */
     status: string;
 }
+interface PagePagination extends PaginationBase {
+    /** 1-based. */
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    canPrev?: never;
+    canNext?: never;
+    onPrev?: never;
+    onNext?: never;
+}
+interface OffsetPagination extends PaginationBase {
+    canPrev: boolean;
+    canNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    page?: never;
+    pageCount?: never;
+    onPageChange?: never;
+}
+export type PaginationProps = PagePagination | OffsetPagination;
 /**
  * Page-by-page navigation for a list.
  *
+ * 🔴 Two models, because products keep the position in two different ways. All three of
+ * nene-vault's paginated screens hold an **offset**, and none of them holds a page number
+ * (measured 2026-08-23). Converting offset to a page is arithmetic; converting the sentence
+ * "21–40 of 384" back out of a page number is not. So the component takes whichever the
+ * caller already has, rather than making two thirds of the fleet keep a second copy of its
+ * own position.
+ *
+ * A finite choice between two arrangements, which is structure — not a design value that a
+ * caller could invent (design principle 3).
+ *
  * 🔴 The current position is text, and the region is a named `<nav>`. Four ships wrote this
- * component and the recurring shape marks the current page by colour alone — which is
- * invisible to a screen reader and to anyone who cannot distinguish the two shades. The
- * `status` string is required for the same reason: "you are here" has to be readable, not
- * merely visible.
+ * component and the recurring shape marks the current page by colour alone — invisible to a
+ * screen reader and to anyone who cannot distinguish the two shades.
  *
  * The ends are disabled rather than hidden. A control that disappears at the boundary makes
- * the row of controls jump, and moves the next-page button under the cursor that just
- * clicked it.
+ * the row jump, and moves the next-page button under the cursor that just clicked it.
  */
-export declare function Pagination({ page, pageCount, onPageChange, label, previousLabel, nextLabel, status, }: PaginationProps): import("react").JSX.Element;
+export declare function Pagination(props: PaginationProps): import("react").JSX.Element;
+export {};

package/dist/data/Pagination.js

@@ -4,17 +4,29 @@ import { Stack } from '../layout/Stack.js';
 /**
  * Page-by-page navigation for a list.
  *
+ * 🔴 Two models, because products keep the position in two different ways. All three of
+ * nene-vault's paginated screens hold an **offset**, and none of them holds a page number
+ * (measured 2026-08-23). Converting offset to a page is arithmetic; converting the sentence
+ * "21–40 of 384" back out of a page number is not. So the component takes whichever the
+ * caller already has, rather than making two thirds of the fleet keep a second copy of its
+ * own position.
+ *
+ * A finite choice between two arrangements, which is structure — not a design value that a
+ * caller could invent (design principle 3).
+ *
  * 🔴 The current position is text, and the region is a named `<nav>`. Four ships wrote this
- * component and the recurring shape marks the current page by colour alone — which is
- * invisible to a screen reader and to anyone who cannot distinguish the two shades. The
- * `status` string is required for the same reason: "you are here" has to be readable, not
- * merely visible.
+ * component and the recurring shape marks the current page by colour alone — invisible to a
+ * screen reader and to anyone who cannot distinguish the two shades.
  *
  * The ends are disabled rather than hidden. A control that disappears at the boundary makes
- * the row of controls jump, and moves the next-page button under the cursor that just
- * clicked it.
+ * the row jump, and moves the next-page button under the cursor that just clicked it.
  */
-export function Pagination({ page, pageCount, onPageChange, label, previousLabel, nextLabel, status, }) {
-    return (_jsx("nav", { "aria-label": label, children: _jsxs(Stack, { direction: "horizontal", gap: "2xs", align: "center", children: [_jsx(Button, { variant: "secondary", disabled: page <= 1, onClick: () => onPageChange(page - 1), "aria-label": previousLabel, children: previousLabel }), _jsx("span", { "aria-current": "page", className: "font-sans text-text-muted", children: status }), _jsx(Button, { variant: "secondary", disabled: page >= pageCount, onClick: () => onPageChange(page + 1), "aria-label": nextLabel, children: nextLabel })] }) }));
+export function Pagination(props) {
+    const { label, previousLabel, nextLabel, status } = props;
+    const atStart = props.page === undefined ? !props.canPrev : props.page <= 1;
+    const atEnd = props.page === undefined ? !props.canNext : props.page >= props.pageCount;
+    const goPrev = () => props.page === undefined ? props.onPrev() : props.onPageChange(props.page - 1);
+    const goNext = () => props.page === undefined ? props.onNext() : props.onPageChange(props.page + 1);
+    return (_jsx("nav", { "aria-label": label, children: _jsxs(Stack, { direction: "horizontal", gap: "2xs", align: "center", children: [_jsx(Button, { variant: "secondary", disabled: atStart, onClick: goPrev, "aria-label": previousLabel, children: previousLabel }), _jsx("span", { "aria-current": "page", className: "font-sans text-text-muted", children: status }), _jsx(Button, { variant: "secondary", disabled: atEnd, onClick: goNext, "aria-label": nextLabel, children: nextLabel })] }) }));
 }
 //# sourceMappingURL=Pagination.js.map

package/dist/data/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/data/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAe3C;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,UAAU,CAAC,EACzB,IAAI,EACJ,SAAS,EACT,YAAY,EACZ,KAAK,EACL,aAAa,EACb,SAAS,EACT,MAAM,GACU;IAChB,OAAO,CACL,4BAAiB,KAAK,YACpB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,aACpD,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,IAAI,CAAC,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBACzB,aAAa,YAExB,aAAa,GACP,EACT,+BAAmB,MAAM,EAAC,SAAS,EAAC,2BAA2B,YAC5D,MAAM,GACF,EACP,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,QAAQ,EAAE,IAAI,IAAI,SAAS,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,CAAC,gBACzB,SAAS,YAEpB,SAAS,GACH,IACH,GACJ,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/data/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAyC3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,SAAS,CAAC;IAExF,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACjF,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,4BAAiB,KAAK,YACpB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,aACpD,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAc,aAAa,YACtF,aAAa,GACP,EACT,+BAAmB,MAAM,EAAC,SAAS,EAAC,2BAA2B,YAC5D,MAAM,GACF,EACP,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAc,SAAS,YAChF,SAAS,GACH,IACH,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/feedback/InlineAlert.d.ts

@@ -7,6 +7,11 @@ export interface InlineAlertProps {
 /**
  * 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.
+ *
  * 🔴 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

package/dist/feedback/InlineAlert.js

@@ -1,16 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../lib/cx.js';
 const TONE_CLASS = {
-    info: 'bg-surface text-text-primary border-border',
-    // `warn` reuses the danger colour deliberately: the kit's palette has one alert hue, and
-    // inventing a second here would be a design value living outside themes/default.css. What
-    // differs is the urgency it is announced with, which is the part that matters.
-    warn: 'bg-surface text-danger border-danger',
-    danger: 'bg-surface text-danger border-danger',
+    info: 'bg-x-slot-alert-info-bg text-x-slot-alert-info-fg border-x-slot-alert-info-border',
+    warn: 'bg-x-slot-alert-warn-bg text-x-slot-alert-warn-fg border-x-slot-alert-warn-border',
+    danger: 'bg-x-slot-alert-danger-bg text-x-slot-alert-danger-fg border-x-slot-alert-danger-border',
 };
 /**
  * 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.
+ *
  * 🔴 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

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,4CAA4C;IAClD,yFAAyF;IACzF,0FAA0F;IAC1F,+EAA+E;IAC/E,IAAI,EAAE,sCAAsC;IAC5C,MAAM,EAAE,sCAAsC;CAC/C,CAAC;AAEF;;;;;;;GAOG;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;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"}

package/dist/forms/FormField.js

@@ -20,6 +20,6 @@ export function FormField({ id, label, error = null, hint, labelAdornment, requi
     const errorId = error === null ? null : `${id}-error`;
     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-danger", children: requiredMarker })) : null, labelAdornment] }), children, hintId === null ? null : (_jsx("span", { id: hintId, className: "font-sans text-text-muted", children: hint })), errorId === null ? null : (_jsx("p", { id: errorId, role: "alert", className: "font-sans text-danger", children: error }))] }) }));
+    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-danger", 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 }))] }) }));
 }
 //# 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,aAAa,YAAE,cAAc,GAAQ,CACtD,CAAC,CAAC,CAAC,IAAI,EACP,cAAc,IACT,EACP,QAAQ,EACR,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxB,eAAM,EAAE,EAAE,MAAM,EAAE,SAAS,EAAC,2BAA2B,YACpD,IAAI,GACA,CACR,EACA,OAAO,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACzB,YAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,uBAAuB,YAC3D,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;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,aAAa,YAAE,cAAc,GAAQ,CACtD,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"}

package/dist/primitives/Button.js

@@ -3,7 +3,7 @@ import { cx } from '../lib/cx.js';
 import { CLICKABLE_CLASS } from '../lib/states.js';
 const VARIANT_CLASS = {
     primary: 'bg-accent text-on-accent',
-    secondary: 'bg-surface-raised text-text-primary border border-border',
+    secondary: 'bg-surface-raised text-text-primary border-border',
     danger: 'bg-danger text-on-accent',
     // No fill and no border: for the third action in a row, where two framed buttons would
     // compete with each other. nene-vault ships this variant already.
@@ -13,7 +13,12 @@ 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',
 };
-const BASE_CLASS = `rounded-x-slot-button font-sans font-medium ${CLICKABLE_CLASS}`;
+// 🔴 `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
+// modal footers, where that shows up as a step (measured 2026-08-23); its own Button carries
+// the same transparent border for the same reason.
+const BASE_CLASS = `rounded-x-slot-button border border-transparent font-sans font-medium ${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,0BAA0B;IACnC,SAAS,EAAE,0DAA0D;IACrE,MAAM,EAAE,0BAA0B;IAClC,uFAAuF;IACvF,kEAAkE;IAClE,KAAK,EAAE,kCAAkC;CAC1C,CAAC;AAEF,MAAM,UAAU,GAAqD;IACnE,EAAE,EAAE,+CAA+C;IACnD,EAAE,EAAE,qDAAqD;CAC1D,CAAC;AAEF,MAAM,UAAU,GAAG,+CAA+C,eAAe,EAAE,CAAC;AAEpF,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,MAAM,kBAAkB,CAAC;AAcnD,MAAM,aAAa,GAAwD;IACzE,OAAO,EAAE,0BAA0B;IACnC,SAAS,EAAE,mDAAmD;IAC9D,MAAM,EAAE,0BAA0B;IAClC,uFAAuF;IACvF,kEAAkE;IAClE,KAAK,EAAE,kCAAkC;CAC1C,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,MAAM,UAAU,GAAG,yEAAyE,eAAe,EAAE,CAAC;AAE9G,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.d.ts

@@ -10,5 +10,12 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
  * `<input>` next to a `<label>` whose `htmlFor` is missing or stale — which loses nothing
  * visible, and loses the ability to click the text to toggle the box, plus the name the
  * control is announced by. Making the label a prop means it cannot be forgotten.
+ *
+ * 🔴 `cursor-pointer` and the gap live here rather than being left to the caller, because
+ * the caller cannot reach them: `className` is forwarded to the `<input>`, and both belong
+ * to the `<label>` that wraps it. nene-vault carries them on the label in its own
+ * implementation (measured 2026-08-23, checking Tailwind classes and CSS both), so a
+ * migration that could not set them would lose the pointer cursor on every choice in the
+ * product — visible to a mouse user, invisible in a diff.
  */
 export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/primitives/Checkbox.js

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 import { cx } from '../lib/cx.js';
 import { CONTROL_CLASS } from '../lib/states.js';
 import { useFieldWiring } from '../forms/field-context.js';
-const BOX_CLASS = `rounded-x-slot-control border border-border accent-accent ${CONTROL_CLASS}`;
+const BOX_CLASS = `size-x-slot-choice-box shrink-0 rounded-x-slot-control border border-border accent-x-slot-choice-accent ${CONTROL_CLASS}`;
 /**
  * A checkbox and its label, as one part.
  *
@@ -11,9 +11,16 @@ const BOX_CLASS = `rounded-x-slot-control border border-border accent-accent ${C
  * `<input>` next to a `<label>` whose `htmlFor` is missing or stale — which loses nothing
  * visible, and loses the ability to click the text to toggle the box, plus the name the
  * control is announced by. Making the label a prop means it cannot be forgotten.
+ *
+ * 🔴 `cursor-pointer` and the gap live here rather than being left to the caller, because
+ * the caller cannot reach them: `className` is forwarded to the `<input>`, and both belong
+ * to the `<label>` that wraps it. nene-vault carries them on the label in its own
+ * implementation (measured 2026-08-23, checking Tailwind classes and CSS both), so a
+ * migration that could not set them would lose the pointer cursor on every choice in the
+ * product — visible to a mouse user, invisible in a diff.
  */
 export const Checkbox = forwardRef(function Checkbox({ label, className, id, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired, ...rest }, ref) {
     const wiring = useFieldWiring({ id, ariaInvalid, ariaDescribedBy, ariaRequired });
-    return (_jsxs("label", { className: "inline-flex items-center gap-x-slot-choice-gap font-sans text-text-primary", children: [_jsx("input", { ref: ref, type: "checkbox", className: cx(BOX_CLASS, className), ...wiring, ...rest }), label] }));
+    return (_jsxs("label", { className: "inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-text-primary", children: [_jsx("input", { ref: ref, type: "checkbox", className: cx(BOX_CLASS, className), ...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;AAO3D,MAAM,SAAS,GAAG,6DAA6D,aAAa,EAAE,CAAC;AAE/F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CACnF,EACE,KAAK,EACL,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,iBAAO,SAAS,EAAC,4EAA4E,aAC3F,gBAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,EAC7F,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,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAO3D,MAAM,SAAS,GAAG,2GAA2G,aAAa,EAAE,CAAC;AAE7I;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAkC,SAAS,QAAQ,CACnF,EACE,KAAK,EACL,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,iBAAO,SAAS,EAAC,2FAA2F,aAC1G,gBAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,MAAM,KAAM,IAAI,GAAI,EAC7F,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/primitives/Radio.d.ts

@@ -12,6 +12,10 @@ export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * its own group of one: it can be checked but never unchecked, and arrow keys do not move
  * between the options. Nothing about the rendered page shows this, so it survives review.
  *
+ * 🔴 `cursor-pointer`, the gap and the box size are the component's, for the same reason as
+ * on `Checkbox`: `className` reaches the `<input>`, and those belong to the `<label>`.
+ * nene-vault's radios share one label style with its checkboxes, so the same hole was here.
+ *
  * 🔴 This does not take the `FormField` wiring. A group of radios shares one label and one
  * error, so the id and `aria-describedby` belong on a `<fieldset>` around the group, not on
  * each option — putting them here would give every option the same id.

package/dist/primitives/Radio.js

@@ -2,7 +2,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';
-const DOT_CLASS = `border border-border accent-accent ${CONTROL_CLASS}`;
+const DOT_CLASS = `size-x-slot-choice-box shrink-0 border border-border accent-x-slot-choice-accent ${CONTROL_CLASS}`;
 /**
  * One option in a radio group, with its label.
  *
@@ -10,11 +10,15 @@ const DOT_CLASS = `border border-border accent-accent ${CONTROL_CLASS}`;
  * its own group of one: it can be checked but never unchecked, and arrow keys do not move
  * between the options. Nothing about the rendered page shows this, so it survives review.
  *
+ * 🔴 `cursor-pointer`, the gap and the box size are the component's, for the same reason as
+ * on `Checkbox`: `className` reaches the `<input>`, and those belong to the `<label>`.
+ * nene-vault's radios share one label style with its checkboxes, so the same hole was here.
+ *
  * 🔴 This does not take the `FormField` wiring. A group of radios shares one label and one
  * error, so the id and `aria-describedby` belong on a `<fieldset>` around the group, not on
  * each option — putting them here would give every option the same id.
  */
 export const Radio = forwardRef(function Radio({ label, name, className, ...rest }, ref) {
-    return (_jsxs("label", { className: "inline-flex items-center gap-x-slot-choice-gap font-sans text-text-primary", children: [_jsx("input", { ref: ref, type: "radio", name: name, className: cx(DOT_CLASS, className), ...rest }), label] }));
+    return (_jsxs("label", { className: "inline-flex cursor-pointer items-center gap-x-slot-choice-gap font-sans text-text-primary", children: [_jsx("input", { ref: ref, type: "radio", name: name, className: cx(DOT_CLASS, className), ...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;AASjD,MAAM,SAAS,GAAG,sCAAsC,aAAa,EAAE,CAAC;AAExE;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACnC,GAAG;IAEH,OAAO,CACL,iBAAO,SAAS,EAAC,4EAA4E,aAC3F,gBAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,IAAI,GAAI,EAC1F,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,MAAM,kBAAkB,CAAC;AASjD,MAAM,SAAS,GAAG,oFAAoF,aAAa,EAAE,CAAC;AAEtH;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,SAAS,KAAK,CAC1E,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EACnC,GAAG;IAEH,OAAO,CACL,iBAAO,SAAS,EAAC,2FAA2F,aAC1G,gBAAO,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,KAAM,IAAI,GAAI,EAC1F,KAAK,IACA,CACT,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hideyukimori/nene2-ui",
-  "version": "0.4.0",
+  "version": "0.6.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

@@ -38,6 +38,22 @@
    * focused input is under 16px, and a product whose body text is 14px would inherit that.
    * Keeping a control readable is the control's job, not the product's. */
 
+  /* The type scale. Six steps, from what the fleet actually writes (measured 2026-08-23):
+   * nene-records uses `sm` 65 times and `xs` 40, nene-field `sm` 59 / `xs` 57 / `base` 21 /
+   * `lg` 13, nene-vault `2xs` 33. Nothing above `xl` recurs.
+   *
+   * 🔴 `--text-x-ios-floor` is not a design step and products should not use it as one. It
+   * is here because iOS Safari zooms the page when a focused control is under 16px, which is
+   * a fact about the device rather than a decision about the product. Slots reference it so
+   * that the rule "a slot contains only scale references" stays true. */
+  --text-x-2xs: 0.6875rem;
+  --text-x-xs: 0.75rem;
+  --text-x-sm: 0.875rem;
+  --text-x-md: 1rem;
+  --text-x-lg: 1.125rem;
+  --text-x-xl: 1.5rem;
+  --text-x-ios-floor: 16px;
+
   /* ─────────────────────────────────────────────────────────────────────────
    * ② SLOTS — a product may redefine these.
    *
@@ -58,6 +74,10 @@
   --spacing-x-slot-control-pad-y: var(--spacing-x-xs);
   --spacing-x-slot-field-gap: var(--spacing-x-2xs);
   --spacing-x-slot-choice-gap: var(--spacing-x-2xs);
+  /* The box itself. 1rem = 16px, which is what every product that ships a checkbox uses
+   * (measured 2026-08-23). Sized from the scale so a product that wants a larger hit area
+   * moves a step rather than inventing a length. */
+  --spacing-x-slot-choice-box: var(--spacing-x-sm);
   --spacing-x-slot-badge-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-badge-pad-y: var(--spacing-x-3xs);
   --spacing-x-slot-switch-pad-x: var(--spacing-x-2xs);
@@ -95,10 +115,31 @@
   --brightness-x-slot-hover: 95%;
   --brightness-x-slot-press: 90%;
 
+  --color-x-slot-choice-accent: var(--color-accent);
+
+  /* Alert colours. `warn` defaults to the same hue as `danger` because this palette has one
+   * alert colour — a second one is a decision a product makes, not something the kit can
+   * invent. Until a product sets these, "warning" and "failure" look alike, and only the
+   * announced urgency differs: role="status" against role="alert". That difference reaches
+   * someone listening and no one looking (nene-vault, 2026-08-23), which is why the slots
+   * exist rather than the tones being hard-coded. */
+  --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);
+  --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-danger-bg: var(--color-surface);
+  --color-x-slot-alert-danger-fg: var(--color-danger);
+  --color-x-slot-alert-danger-border: var(--color-danger);
   --color-x-slot-field-label: var(--color-text-muted);
-  --text-x-slot-field-label-size: 0.75rem;
+  --color-x-slot-field-hint: var(--color-text-muted);
+  --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);
+  --text-x-slot-field-label-size: var(--text-x-xs);
   --font-weight-x-slot-field-label: 500;
-  --text-x-slot-control-size: max(1rem, 16px);
+  --text-x-slot-control-size: max(var(--text-x-md), var(--text-x-ios-floor));
 
   /* Sentinel for the consumer's build (#316). Zero-width, so applying it does nothing.
    * Its only job is to exist: `p-x-source-probe` appears nowhere except this kit's `dist`,