@hideyukimori/nene2-ui 0.19.1 → 0.21.0

package/README.md

@@ -35,6 +35,16 @@ bound. Providing the parts scales with the number of screens, which is finite.**
    cannot express it, add a variant — for everyone. _This is the principle that matters:_ the
    13,021 style violations the fleet is currently remediating exist because values could be
    written inline. Make them unwritable and there is nothing to inspect.
+
+   🔴 **But "add a variant" is the wrong move when the axis is wrong** (#487). `Button` carried
+   one closed enum that mixed *shape* with *colour* — `primary | secondary | danger | ghost` —
+   so "the ghost shape in the danger colour" was not sayable. Five ships each invented a
+   private name for that one cell and no two agreed (`ghost-danger`, `danger-ghost`,
+   `link-danger`, `danger-outline`, and nene-deal reached it through slots). Enumerating four
+   more values would have left `4 shapes × 4 tones = 16` names to chase. 0.20.0 splits the
+   axis instead: `variant` is the shape, `tone` is the colour. **Before adding a value, check
+   whether what is missing is a value or an axis** — a value that ships keep spelling with a
+   hyphen in the middle is usually two axes wearing one name.
 4. **No strings.** The kit ships no user-visible text. `Spinner` takes `label`, `ErrorState` takes
    `retryLabel`. Localisation stays with the product (`@hideyukimori/nene2-i18n`), so a wording
    change never becomes a kit release.

package/dist/data/Pagination.js

@@ -28,9 +28,9 @@ export function Pagination(props) {
     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);
-    const prev = (_jsx(Button, { variant: "secondary", size: size, disabled: atStart, onClick: goPrev, "aria-label": previousLabel, children: previousLabel }, "prev"));
+    const prev = (_jsx(Button, { variant: "outline", tone: "neutral", size: size, disabled: atStart, onClick: goPrev, "aria-label": previousLabel, children: previousLabel }, "prev"));
     const current = (_jsx("span", { "aria-current": "page", className: "font-sans text-x-slot-pagination-fg", children: status }, "status"));
-    const next = (_jsx(Button, { variant: "secondary", size: size, disabled: atEnd, onClick: goNext, "aria-label": nextLabel, children: nextLabel }, "next"));
+    const next = (_jsx(Button, { variant: "outline", tone: "neutral", size: size, disabled: atEnd, onClick: goNext, "aria-label": nextLabel, children: nextLabel }, "next"));
     const order = statusPlacement === 'start'
         ? [current, prev, next]
         : statusPlacement === 'end'

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;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiElC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,aAAa,EACb,eAAe,GAAG,QAAQ,GAC3B,GAAG,KAAK,CAAC;IAEV,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,MAAM,IAAI,GAAG,CACX,KAAC,MAAM,IAEL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,MAAM,gBACH,aAAa,YAExB,aAAa,IAPV,MAAM,CAQH,CACV,CAAC;IACF,MAAM,OAAO,GAAG,CACd,+BAAgC,MAAM,EAAC,SAAS,EAAC,qCAAqC,YACnF,MAAM,IADC,QAAQ,CAEX,CACR,CAAC;IACF,MAAM,IAAI,GAAG,CACX,KAAC,MAAM,IAEL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,MAAM,gBACH,SAAS,YAEpB,SAAS,IAPN,MAAM,CAQH,CACV,CAAC;IACF,MAAM,KAAK,GACT,eAAe,KAAK,OAAO;QACzB,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC;QACvB,CAAC,CAAC,eAAe,KAAK,KAAK;YACzB,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;YACvB,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAE9B,OAAO,CACL,4BAAiB,KAAK,EAAE,SAAS,EAAE,SAAS,YAC1C,KAAC,KAAK,IACJ,SAAS,EAAC,YAAY,EACtB,GAAG,EAAC,KAAK,EACT,KAAK,EAAC,QAAQ;YACd,6EAA6E;YAC7E,SAAS,EAAE,EAAE,CAAC,aAAa,KAAK,IAAI,IAAI,sCAAsC,CAAC,YAE9E,KAAK,GACA,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;AAC3C,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiElC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EACJ,KAAK,EACL,aAAa,EACb,SAAS,EACT,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,aAAa,EACb,eAAe,GAAG,QAAQ,GAC3B,GAAG,KAAK,CAAC;IAEV,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,MAAM,IAAI,GAAG,CACX,KAAC,MAAM,IAEL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,OAAO,EACjB,OAAO,EAAE,MAAM,gBACH,aAAa,YAExB,aAAa,IARV,MAAM,CASH,CACV,CAAC;IACF,MAAM,OAAO,GAAG,CACd,+BAAgC,MAAM,EAAC,SAAS,EAAC,qCAAqC,YACnF,MAAM,IADC,QAAQ,CAEX,CACR,CAAC;IACF,MAAM,IAAI,GAAG,CACX,KAAC,MAAM,IAEL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,SAAS,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,MAAM,gBACH,SAAS,YAEpB,SAAS,IARN,MAAM,CASH,CACV,CAAC;IACF,MAAM,KAAK,GACT,eAAe,KAAK,OAAO;QACzB,CAAC,CAAC,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC;QACvB,CAAC,CAAC,eAAe,KAAK,KAAK;YACzB,CAAC,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,CAAC;YACvB,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;IAE9B,OAAO,CACL,4BAAiB,KAAK,EAAE,SAAS,EAAE,SAAS,YAC1C,KAAC,KAAK,IACJ,SAAS,EAAC,YAAY,EACtB,GAAG,EAAC,KAAK,EACT,KAAK,EAAC,QAAQ;YACd,6EAA6E;YAC7E,SAAS,EAAE,EAAE,CAAC,aAAa,KAAK,IAAI,IAAI,sCAAsC,CAAC,YAE9E,KAAK,GACA,GACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/feedback/Badge.d.ts

@@ -10,6 +10,22 @@ export interface BadgeProps {
      * badge as it does in an alert (0.17.0, #422).
      */
     tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warn' | 'info';
+    /**
+     * Draw a small filled circle before the label.
+     *
+     * 🔴 It takes its colour from `currentColor`, so there is no dot colour slot and there
+     * must not be one: the dot is the tone, shown small. A slot would let a product set a
+     * badge whose dot disagrees with its own text, and it would have to be redefined for
+     * every tone — six values to keep in step with six that already exist (the
+     * redefine-the-default shape nene-vault retired in #481).
+     *
+     * Whether a badge has one is a per-call-site decision, not a theme value: nene-clear
+     * renders dotted and undotted badges **on the same screen** (`DunningPage` marks overdue
+     * with a dot and paused without one), so it cannot be a slot. Hence a prop.
+     *
+     * Omit it and the render is byte-for-byte what it was before this prop existed.
+     */
+    dot?: boolean;
     /** Composed after the kit's own classes (design principle 2). */
     className?: string;
     children: ReactNode;
@@ -36,4 +52,4 @@ export interface BadgeProps {
  *
  * A badge that already fits is unchanged (35.88 × 26.5 before and after, measured).
  */
-export declare function Badge({ tone, className, children }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ tone, dot, className, children }: BadgeProps): import("react").JSX.Element;

package/dist/feedback/Badge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../lib/cx.js';
 const TONE_CLASS = {
     neutral: 'bg-x-slot-badge-neutral-bg text-x-slot-badge-neutral-fg border-x-slot-badge-neutral-border',
@@ -30,7 +30,7 @@ const TONE_CLASS = {
  *
  * A badge that already fits is unchanged (35.88 × 26.5 before and after, measured).
  */
-export function Badge({ tone = 'neutral', className, children }) {
-    return (_jsx("span", { className: cx('inline-flex items-center whitespace-nowrap gap-x-slot-badge-gap rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans text-x-slot-badge font-x-slot-badge', TONE_CLASS[tone], className), children: children }));
+export function Badge({ tone = 'neutral', dot = false, className, children }) {
+    return (_jsxs("span", { className: cx('inline-flex items-center whitespace-nowrap gap-x-slot-badge-gap rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans text-x-slot-badge font-x-slot-badge', TONE_CLASS[tone], className), children: [dot && (_jsx("span", { "aria-hidden": "true", className: "size-x-slot-badge-dot shrink-0 rounded-full bg-current" })), children] }));
 }
 //# sourceMappingURL=Badge.js.map

package/dist/feedback/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/feedback/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkBlC,MAAM,UAAU,GAAoD;IAClE,OAAO,EACL,4FAA4F;IAC9F,MAAM,EAAE,yFAAyF;IACjG,MAAM,EAAE,yFAAyF;IACjG,OAAO,EACL,4FAA4F;IAC9F,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;CAC1F,CAAC;AAEF;;;;;;GAMG;AACH;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAc;IACzE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,uLAAuL,EACvL,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/feedback/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAkClC,MAAM,UAAU,GAAoD;IAClE,OAAO,EACL,4FAA4F;IAC9F,MAAM,EAAE,yFAAyF;IACjG,MAAM,EAAE,yFAAyF;IACjG,OAAO,EACL,4FAA4F;IAC9F,IAAI,EAAE,mFAAmF;IACzF,IAAI,EAAE,mFAAmF;CAC1F,CAAC;AAEF;;;;;;GAMG;AACH;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAc;IACtF,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,uLAAuL,EACvL,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,aAQA,GAAG,IAAI,CACN,8BACc,MAAM,EAClB,SAAS,EAAC,wDAAwD,GAClE,CACH,EACA,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/feedback/InlineAlert.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 export interface InlineAlertProps {
-    /** What the message means. `danger` is announced assertively; `info` politely. */
-    tone?: 'info' | 'warn' | 'danger';
+    /** What the message means. `danger` is announced assertively; the rest politely. */
+    tone?: 'info' | 'warn' | 'danger' | 'success';
     /**
      * 🔴 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
@@ -22,8 +22,14 @@ export interface InlineAlertProps {
  * 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.
+ * which interrupts a screen reader; every other tone 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.
+ *
+ * 🔴 `success` (#486) is deliberately **polite**, not assertive. Good news does not earn an
+ * interruption, and `ToastProvider` already settled the same question the same way
+ * (`POLITE_TONES = ['info', 'success']`). Announcing a success assertively would cut off
+ * whatever the person was reading to tell them nothing went wrong.
  */
 export declare function InlineAlert({ tone, id, className, children }: InlineAlertProps): import("react").JSX.Element;

package/dist/feedback/InlineAlert.js

@@ -4,6 +4,7 @@ const TONE_CLASS = {
     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',
+    success: 'bg-x-slot-alert-success-bg text-x-slot-alert-success-fg border-x-slot-alert-success-border',
 };
 /**
  * A message attached to the thing it is about, rather than to the page.
@@ -14,9 +15,15 @@ const TONE_CLASS = {
  * 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.
+ * which interrupts a screen reader; every other tone 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.
+ *
+ * 🔴 `success` (#486) is deliberately **polite**, not assertive. Good news does not earn an
+ * interruption, and `ToastProvider` already settled the same question the same way
+ * (`POLITE_TONES = ['info', 'success']`). Announcing a success assertively would cut off
+ * whatever the person was reading to tell them nothing went wrong.
  */
 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 }));

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;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"}
+{"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;IACjG,OAAO,EACL,4FAA4F;CAC/F,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;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/layout/PageHeader.d.ts

@@ -4,6 +4,24 @@ export interface PageHeaderProps {
     className?: string;
     /** Localized page title. */
     title: string;
+    /**
+     * Localized one-line description of the page, under the title.
+     *
+     * 🔴 Not decoration. nene-clear carries one on **every one of its ten pages** — the prop
+     * is `sub` there and the value is always a catalog key (`t('dunning.subtitle')`,
+     * `t('audit.subtitle')`, …), so folding it into `title` is not available to it: the two
+     * halves are separate keys, and joining them would put the separator — a string — in the
+     * ship, against principle 4. `PageHeader` takes no `children` either, so without this prop
+     * the line has nowhere to go and ten pages lose their description (#492).
+     *
+     * Omit it and the render is byte-for-byte what it was before this prop existed.
+     *
+     * ⚠️ Its size is not a slot, on purpose. The title has no size slot either — an `<h1>`
+     * reset by Preflight inherits the body size — so adding one here alone would let a product
+     * scale the description while its title stayed put. Products that need a type scale of
+     * their own are blocked on the same missing thing, and it is one gap, not two.
+     */
+    description?: string;
     actions?: ReactNode;
 }
-export declare function PageHeader({ title, actions, className }: PageHeaderProps): import("react").JSX.Element;
+export declare function PageHeader({ title, description, actions, className }: PageHeaderProps): import("react").JSX.Element;

package/dist/layout/PageHeader.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cx } from '../lib/cx.js';
-export function PageHeader({ title, actions, className }) {
-    return (_jsxs("header", { className: cx('flex items-center justify-between py-x-slot-page-header-pad-y', className), children: [_jsx("h1", { className: "font-sans font-x-slot-page-header text-x-slot-page-header-fg", children: title }), actions] }));
+export function PageHeader({ title, description, actions, className }) {
+    const heading = (_jsx("h1", { className: "font-sans font-x-slot-page-header text-x-slot-page-header-fg", children: title }));
+    return (_jsxs("header", { className: cx('flex items-center justify-between py-x-slot-page-header-pad-y', className), children: [description === undefined ? (heading) : (_jsxs("div", { children: [heading, _jsx("p", { className: "mt-x-slot-page-header-gap font-sans text-x-slot-page-header-description-fg", children: description })] })), actions] }));
 }
 //# sourceMappingURL=PageHeader.js.map

package/dist/layout/PageHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/layout/PageHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAUlC,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAmB;IACvE,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CAAC,+DAA+D,EAAE,SAAS,CAAC,aAEzF,aAAI,SAAS,EAAC,8DAA8D,YAAE,KAAK,GAAM,EACxF,OAAO,IACD,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/layout/PageHeader.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AA4BlC,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAmB;IACpF,MAAM,OAAO,GAAG,CACd,aAAI,SAAS,EAAC,8DAA8D,YAAE,KAAK,GAAM,CAC1F,CAAC;IAEF,OAAO,CACL,kBACE,SAAS,EAAE,EAAE,CAAC,+DAA+D,EAAE,SAAS,CAAC,aAMxF,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,CAC3B,OAAO,CACR,CAAC,CAAC,CAAC,CACF,0BACG,OAAO,EACR,YAAG,SAAS,EAAC,4EAA4E,YACtF,WAAW,GACV,IACA,CACP,EACA,OAAO,IACD,CACV,CAAC;AACJ,CAAC"}

package/dist/overlay/ConfirmDialog.js

@@ -12,6 +12,6 @@ import { Modal } from './Modal.js';
  * kind of detail that differs between five independent implementations.
  */
 export function ConfirmDialog({ open, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, tone = 'default', }) {
-    return (_jsx(Modal, { open: open, onClose: onCancel, title: title, children: _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { children: message }), _jsxs(Stack, { direction: "horizontal", gap: "2xs", justify: "end", children: [_jsx(Button, { variant: "secondary", onClick: onCancel, children: cancelLabel }), _jsx(Button, { variant: tone === 'danger' ? 'danger' : 'primary', onClick: onConfirm, children: confirmLabel })] })] }) }));
+    return (_jsx(Modal, { open: open, onClose: onCancel, title: title, children: _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { children: message }), _jsxs(Stack, { direction: "horizontal", gap: "2xs", justify: "end", children: [_jsx(Button, { variant: "outline", tone: "neutral", onClick: onCancel, children: cancelLabel }), _jsx(Button, { tone: tone === 'danger' ? 'danger' : 'accent', onClick: onConfirm, children: confirmLabel })] })] }) }));
 }
 //# sourceMappingURL=ConfirmDialog.js.map

package/dist/overlay/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/overlay/ConfirmDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAkBnC;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,SAAS,GACG;IACnB,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAChD,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aACb,KAAC,IAAI,cAAE,OAAO,GAAQ,EACtB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,aACnD,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,QAAQ,YAC1C,WAAW,GACL,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,YAC1E,YAAY,GACN,IACH,IACF,GACF,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../src/overlay/ConfirmDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAkBnC;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,EACL,OAAO,EACP,YAAY,EACZ,WAAW,EACX,SAAS,EACT,QAAQ,EACR,IAAI,GAAG,SAAS,GACG;IACnB,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,YAChD,MAAC,KAAK,IAAC,GAAG,EAAC,IAAI,aACb,KAAC,IAAI,cAAE,OAAO,GAAQ,EACtB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,OAAO,EAAC,KAAK,aACnD,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,YACvD,WAAW,GACL,EAIT,KAAC,MAAM,IAAC,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,YACtE,YAAY,GACN,IACH,IACF,GACF,CACT,CAAC;AACJ,CAAC"}

package/dist/overlay/Modal.d.ts

@@ -28,6 +28,20 @@ interface ModalBase {
      * `showModal`, so it can only be verified in a real browser (see #392, live lane).
      */
     scrollable?: boolean;
+    /**
+     * The dialog's actions, laid out below the body and **outside its scroll area**.
+     *
+     * 🔴 Not a matter of layout — a matter of structure. Pushed into `children`, the action row
+     * joins the body's scroll region, so with `scrollable` it slides off the bottom of a tall
+     * dialog and the person cannot reach "Confirm". nene-clear uses a footer in **11 of 11**
+     * dialogs and makes it a required prop (#493); eight ships wrote a modal and every one of
+     * them drew this row.
+     *
+     * The kit lays the row out end-aligned with a gap, which is what those eleven do. A product
+     * that wants another arrangement composes it inside — `footer={<div className="flex w-full
+     * justify-between">…</div>}` — rather than the kit growing an alignment prop.
+     */
+    footer?: ReactNode;
     children: ReactNode;
 }
 interface PlainModal extends ModalBase {
@@ -37,6 +51,19 @@ interface PlainModal extends ModalBase {
 interface HeaderModal extends ModalBase {
     /** Draw a header: the title, and a control that closes the dialog. */
     header: true;
+    /**
+     * Localized one-line description, under the title.
+     *
+     * 🔴 On `HeaderModal` only, and deliberately. Without a header the title is never drawn —
+     * it becomes the dialog's `aria-label` — so a description would have nothing to sit under
+     * and would be dropped in silence. The same reasoning `closeLabel` uses below: let the
+     * compiler ask for it exactly where it is going to be rendered.
+     *
+     * 🔴 Named `description`, matching `PageHeader` (#492/#497) and `EmptyState` (#456), not
+     * clear's local `sub`. Nine of clear's eleven dialogs carry this line (#493). One word for
+     * one thing across the kit — the rule `Badge`'s tone vocabulary states, applied to a prop.
+     */
+    description?: string;
     /**
      * Localized name for the close control.
      *

package/dist/overlay/Modal.js

@@ -33,7 +33,7 @@ const SHEET_CLASS = 'max-sm:mt-auto max-sm:mb-0 max-sm:w-full max-sm:max-w-none
  * up until a consumer overrode one side of a pair.
  */
 export function Modal(props) {
-    const { open, onClose, title, size, sheetOnMobile, scrollable, children } = props;
+    const { open, onClose, title, size, sheetOnMobile, scrollable, footer, children } = props;
     const ref = useRef(null);
     const titleId = useId();
     useEffect(() => {
@@ -72,6 +72,13 @@ export function Modal(props) {
         // The sheet classes below (`max-sm:mt-auto max-sm:mb-0`) always assumed this margin was
         // there; saying it explicitly is the kit owning an assumption it had been borrowing.
         // jsdom does not implement `showModal`, so the position itself is a live-lane check.
-        'm-auto bg-x-slot-modal-bg text-x-slot-modal-fg border border-x-slot-modal-border rounded-x-slot-modal', 'p-x-slot-modal-pad font-sans backdrop:bg-x-slot-modal-scrim/50', size !== undefined && SIZE_CLASS[size], sheetOnMobile === true && SHEET_CLASS, scrollable === true && 'flex flex-col'), children: [props.header === true && (_jsxs("header", { className: "mb-x-slot-modal-header-gap flex items-start justify-between gap-x-slot-modal-header-gap", children: [_jsx("h2", { id: titleId, className: "font-x-slot-modal-title text-x-slot-modal-title-size", children: title }), _jsx("button", { type: "button", "aria-label": props.closeLabel, onClick: onClose, className: "rounded-x-slot-control text-x-slot-modal-close-fg leading-none hover:brightness-x-slot-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-x-slot-focus-ring", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] })), scrollable === true ? _jsx("div", { className: "min-h-0 overflow-y-auto", children: children }) : children] }));
+        'm-auto bg-x-slot-modal-bg text-x-slot-modal-fg border border-x-slot-modal-border rounded-x-slot-modal', 'p-x-slot-modal-pad font-sans backdrop:bg-x-slot-modal-scrim/50', size !== undefined && SIZE_CLASS[size], sheetOnMobile === true && SHEET_CLASS, 
+        // The column is what keeps the footer out of the scroll region: the body flexes and
+        // scrolls, the footer keeps its height. Without `scrollable` there is nothing to
+        // scroll, so the dialog keeps the block layout every caller has had until now.
+        scrollable === true && 'flex flex-col'), children: [props.header === true && (_jsxs("header", { className: "mb-x-slot-modal-header-gap flex items-start justify-between gap-x-slot-modal-header-gap", children: [props.description === undefined ? (_jsx("h2", { id: titleId, className: "font-x-slot-modal-title text-x-slot-modal-title-size", children: title })) : (_jsxs("div", { children: [_jsx("h2", { id: titleId, className: "font-x-slot-modal-title text-x-slot-modal-title-size", children: title }), _jsx("p", { className: "mt-x-slot-modal-description-gap font-sans text-x-slot-modal-description-fg", children: props.description })] })), _jsx("button", { type: "button", "aria-label": props.closeLabel, onClick: onClose, className: "rounded-x-slot-control text-x-slot-modal-close-fg leading-none hover:brightness-x-slot-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-x-slot-focus-ring", children: _jsx("span", { "aria-hidden": "true", children: "\u00D7" }) })] })), scrollable === true ? _jsx("div", { className: "min-h-0 overflow-y-auto", children: children }) : children, footer !== undefined && (
+            // `shrink-0` matters only in the scrollable column, where the body would otherwise
+            // take the footer's height with it; it is inert in the block layout.
+            _jsx("footer", { className: "mt-x-slot-modal-footer-gap flex shrink-0 justify-end gap-x-slot-modal-footer-gap", children: footer }))] }));
 }
 //# sourceMappingURL=Modal.js.map

package/dist/overlay/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAkB,MAAM,OAAO,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAuDlC,MAAM,UAAU,GAA8B;IAC5C,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;IAC3B,EAAE,EAAE,uBAAuB;CAC5B,CAAC;AAEF,yDAAyD;AACzD,MAAM,WAAW,GACf,kFAAkF,CAAC;AAErF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,UAAU,KAAK,CAAC,KAAiB;IACrC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAClF,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,GAAG,GAAG,CAAC,OAAO,CAAC;QACvB,IAAI,EAAE,KAAK,IAAI;YAAE,OAAO;QAExB,IAAI,IAAI,EAAE,CAAC;YACT,IAAI,OAAO,EAAE,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;gBACvC,IAAI,CAAC,EAAE,CAAC,IAAI;oBAAE,EAAE,CAAC,SAAS,EAAE,CAAC;YAC/B,CAAC;iBAAM,CAAC;gBACN,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC9B,CAAC;YACD,OAAO;QACT,CAAC;QAED,IAAI,OAAO,EAAE,CAAC,KAAK,KAAK,UAAU,EAAE,CAAC;YACnC,IAAI,EAAE,CAAC,IAAI;gBAAE,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,yFAAyF;IACzF,4EAA4E;IAC5E,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;IAEvF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,KACJ,MAAM;QACV,qFAAqF;QACrF,wEAAwE;QACxE,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,OAAO,EACjB,SAAS,EAAE,EAAE;QACX,qFAAqF;QACrF,yFAAyF;QACzF,0FAA0F;QAC1F,uFAAuF;QACvF,wFAAwF;QACxF,qFAAqF;QACrF,qFAAqF;QACrF,uGAAuG,EACvG,gEAAgE,EAChE,IAAI,KAAK,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,EACtC,aAAa,KAAK,IAAI,IAAI,WAAW,EACrC,UAAU,KAAK,IAAI,IAAI,eAAe,CACvC,aAEA,KAAK,CAAC,MAAM,KAAK,IAAI,IAAI,CACxB,kBAAQ,SAAS,EAAC,yFAAyF,aACzG,aAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC,sDAAsD,YAC9E,KAAK,GACH,EACL,iBACE,IAAI,EAAC,QAAQ,gBACD,KAAK,CAAC,UAAU,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,6LAA6L,YAIvM,8BAAkB,MAAM,uBAAc,GAC/B,IACF,CACV,EACA,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,yBAAyB,YAAE,QAAQ,GAAO,CAAC,CAAC,CAAC,QAAQ,IACpF,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/overlay/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/primitives/Button.d.ts

@@ -1,6 +1,37 @@
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
+    /**
+     * The shape: which properties get painted. Not which colour they get painted in.
+     *
+     * 🔴 This used to be one closed enum that mixed shape and colour
+     * (`primary | secondary | danger | ghost`), so "the ghost shape in the danger colour" was
+     * not expressible. Five ships each invented their own name for that one missing cell, and
+     * no two agreed: nene-clear `ghost-danger`, nene-field `danger-ghost` (the same thing,
+     * written backwards), nene-profile `link-danger`, nene-origin `danger-outline`, and
+     * nene-deal reached the same place through slots instead — it set
+     * `--color-x-slot-button-danger-bg: transparent` and turned the filled danger into an
+     * outlined one (#455). One need, five workarounds, because the API could not say it.
+     *
+     * 🔴 `bare`, not `ghost`. The old name meant "no fill, no border" here, but nene-clear's
+     * `.btn-ghost` has both a background and a border — it is this kit's `outline`. The word is
+     * split across the industry too (Bootstrap's ghost is an outline, Material's is a text
+     * button), so a ship reading `ghost` cannot know which one it got. Renaming costs nothing:
+     * neither consuming ship uses it (nene-vault 0, nene-deal 0, measured 2026-08-27).
+     */
+    variant?: 'solid' | 'outline' | 'bare' | 'link';
+    /**
+     * The colour: what the shape means. Not how loud it is.
+     *
+     * 🔴 The same six words `Badge` has carried since 0.17.0, in the same order, painted from
+     * the same shape of slot. A tone means one thing across the kit or it means nothing.
+     *
+     * 🔴 The default is `accent`, not `neutral`. What 0.19.x called `primary` was never a tone
+     * — it was "the accent-coloured filled button", so `<Button>` keeps rendering exactly that.
+     * `neutral` is the quiet grey step, which is what `Badge` has always meant by the word.
+     * Reading `neutral` as "the ordinary action" is how this kit ended up with two vocabularies
+     * in the first place.
+     */
+    tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warn' | 'info';
     /**
      * Two sizes, not a length. `sm` for dense rows and toolbars.
      *
@@ -10,4 +41,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'md' | 'sm';
     children: ReactNode;
 }
-export declare function Button({ variant, size, children, type, className, ...rest }: ButtonProps): import("react").JSX.Element;
+export declare function Button({ variant, tone, size, children, type, className, ...rest }: ButtonProps): import("react").JSX.Element;

package/dist/primitives/Button.js

@@ -1,18 +1,82 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cx } from '../lib/cx.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 shadow-x-slot-button-primary',
-    secondary: 'bg-x-slot-button-secondary-bg text-x-slot-button-secondary-fg border-x-slot-button-secondary-border',
-    danger: 'bg-x-slot-button-danger-bg text-x-slot-button-danger-fg border-x-slot-button-danger-border',
-    // 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.
-    ghost: 'bg-transparent text-x-slot-button-ghost-fg',
+/**
+ * Shape × tone, written out.
+ *
+ * 🔴 Sixteen literal strings and no interpolation, because Tailwind reads the source as text.
+ * `` `bg-x-slot-button-${tone}-bg` `` produces the right class at runtime and no CSS for it at
+ * build time — the generator never sees the string, so the rule is never emitted. The kit has
+ * to spell every combination it supports.
+ *
+ * 🔴 `solid` paints `-bg` + `-fg`; every other shape paints `-ink`. They are separate slots
+ * because they are separate colours: on a filled danger button the text is the on-accent
+ * colour, and on an outlined one it is the danger colour itself. Deriving one from the other
+ * would have made the outlined button's label white on white.
+ *
+ * 🔴 `outline`'s background is a single slot that does not vary with tone. nene-clear's
+ * outlined danger sits on the plain surface (`background: var(--surface)`) and only reaches
+ * for a tinted one on hover; painting the rest a tone-tinted colour would be louder than what
+ * any ship draws today.
+ */
+const SHAPE_TONE_CLASS = {
+    solid: {
+        neutral: 'bg-x-slot-button-neutral-bg text-x-slot-button-neutral-fg shadow-x-slot-button-solid',
+        accent: 'bg-x-slot-button-accent-bg text-x-slot-button-accent-fg shadow-x-slot-button-solid',
+        danger: 'bg-x-slot-button-danger-bg text-x-slot-button-danger-fg shadow-x-slot-button-solid',
+        success: 'bg-x-slot-button-success-bg text-x-slot-button-success-fg shadow-x-slot-button-solid',
+        warn: 'bg-x-slot-button-warn-bg text-x-slot-button-warn-fg shadow-x-slot-button-solid',
+        info: 'bg-x-slot-button-info-bg text-x-slot-button-info-fg shadow-x-slot-button-solid',
+    },
+    outline: {
+        neutral: 'bg-x-slot-button-outline-bg text-x-slot-button-neutral-ink border-x-slot-button-neutral-border',
+        accent: 'bg-x-slot-button-outline-bg text-x-slot-button-accent-ink border-x-slot-button-accent-border',
+        danger: 'bg-x-slot-button-outline-bg text-x-slot-button-danger-ink border-x-slot-button-danger-border',
+        success: 'bg-x-slot-button-outline-bg text-x-slot-button-success-ink border-x-slot-button-success-border',
+        warn: 'bg-x-slot-button-outline-bg text-x-slot-button-warn-ink border-x-slot-button-warn-border',
+        info: 'bg-x-slot-button-outline-bg text-x-slot-button-info-ink border-x-slot-button-info-border',
+    },
+    bare: {
+        neutral: 'bg-transparent text-x-slot-button-neutral-ink',
+        accent: 'bg-transparent text-x-slot-button-accent-ink',
+        danger: 'bg-transparent text-x-slot-button-danger-ink',
+        success: 'bg-transparent text-x-slot-button-success-ink',
+        warn: 'bg-transparent text-x-slot-button-warn-ink',
+        info: 'bg-transparent text-x-slot-button-info-ink',
+    },
+    link: {
+        neutral: 'bg-transparent text-x-slot-button-neutral-ink underline-offset-4 hover:underline',
+        accent: 'bg-transparent text-x-slot-button-accent-ink underline-offset-4 hover:underline',
+        danger: 'bg-transparent text-x-slot-button-danger-ink underline-offset-4 hover:underline',
+        success: 'bg-transparent text-x-slot-button-success-ink underline-offset-4 hover:underline',
+        warn: 'bg-transparent text-x-slot-button-warn-ink underline-offset-4 hover:underline',
+        info: 'bg-transparent text-x-slot-button-info-ink underline-offset-4 hover:underline',
+    },
 };
-const SIZE_CLASS = {
-    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',
+/**
+ * 🔴 Padding and type size are separate because `link` takes one and not the other.
+ *
+ * A link-shaped button is a run of text inside a sentence or a table cell; padding would push
+ * it off the line it belongs to. nene-clear's `.btn-link` sets `padding: 0` and
+ * nene-profile's renders through a `linkbtn` class that does the same. The type size still
+ * applies — it is the same two sizes as every other button.
+ */
+const PAD_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 TEXT_CLASS = {
+    md: 'text-x-slot-button-size',
+    sm: 'text-x-slot-button-sm-size',
+};
+/**
+ * `link` drops the box the other three shapes share.
+ *
+ * 🔴 `border-0` rather than leaving the transparent border in place: the border is there so a
+ * bordered button matches an unbordered one in height, and a link has no height to match.
+ * `rounded-none` for the same reason — there is no box to round.
+ */
+const LINK_UNBOX = 'border-0 rounded-none';
 // 🔴 `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
@@ -42,8 +106,21 @@ 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 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 }));
+// 🔴 `whitespace-nowrap` is load-bearing (#501). A button's label is a command, not body
+// copy: it names one action, and a wrapped command reads as two. nene-clear measured 15
+// buttons wrapping on its SP layout (PC 1440x900: zero) — "督促を送信" became four lines at
+// 70px, and "消込を確定" broke *inside* a word as "消込を / 確定".
+//
+// 🔴 CJK breaks at any character and Latin breaks at word boundaries, so fixing one is not
+// evidence about the other (nene-vault, #477). `nowrap` stops both.
+//
+// This is the same property `Badge` got in #477. It was added there by naming the component
+// rather than by deriving which components need it, so `Button` was simply not on the list —
+// the third instance of that shape (#486 / #501 / #503). The inventory that would have
+// caught all of them at once is a separate, larger piece of work; this line is the stanch.
+const BASE_CLASS = `whitespace-nowrap 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 = 'solid', tone = 'accent', size = 'md', children, type = 'button', className, ...rest }) {
+    const isLink = variant === 'link';
+    return (_jsx("button", { type: type, className: cx(BASE_CLASS, isLink ? LINK_UNBOX : PAD_CLASS[size], TEXT_CLASS[size], SHAPE_TONE_CLASS[variant][tone], className), ...rest, children: children }));
 }
 //# sourceMappingURL=Button.js.map

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,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAchE,MAAM,aAAa,GAAwD;IACzE,OAAO,EAAE,wFAAwF;IACjG,SAAS,EACP,qGAAqG;IACvG,MAAM,EACJ,4FAA4F;IAC9F,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"}
+{"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;AA6ChE;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,gBAAgB,GAGlB;IACF,KAAK,EAAE;QACL,OAAO,EAAE,sFAAsF;QAC/F,MAAM,EAAE,oFAAoF;QAC5F,MAAM,EAAE,oFAAoF;QAC5F,OAAO,EAAE,sFAAsF;QAC/F,IAAI,EAAE,gFAAgF;QACtF,IAAI,EAAE,gFAAgF;KACvF;IACD,OAAO,EAAE;QACP,OAAO,EACL,gGAAgG;QAClG,MAAM,EACJ,8FAA8F;QAChG,MAAM,EACJ,8FAA8F;QAChG,OAAO,EACL,gGAAgG;QAClG,IAAI,EAAE,0FAA0F;QAChG,IAAI,EAAE,0FAA0F;KACjG;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,+CAA+C;QACxD,MAAM,EAAE,8CAA8C;QACtD,MAAM,EAAE,8CAA8C;QACtD,OAAO,EAAE,+CAA+C;QACxD,IAAI,EAAE,4CAA4C;QAClD,IAAI,EAAE,4CAA4C;KACnD;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,kFAAkF;QAC3F,MAAM,EAAE,iFAAiF;QACzF,MAAM,EAAE,iFAAiF;QACzF,OAAO,EAAE,kFAAkF;QAC3F,IAAI,EAAE,+EAA+E;QACrF,IAAI,EAAE,+EAA+E;KACtF;CACF,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,SAAS,GAAqD;IAClE,EAAE,EAAE,+CAA+C;IACnD,EAAE,EAAE,qDAAqD;CAC1D,CAAC;AAEF,MAAM,UAAU,GAAqD;IACnE,EAAE,EAAE,yBAAyB;IAC7B,EAAE,EAAE,4BAA4B;CACjC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,GAAG,uBAAuB,CAAC;AAE3C,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,yFAAyF;AACzF,wFAAwF;AACxF,uFAAuF;AACvF,yDAAyD;AACzD,EAAE;AACF,2FAA2F;AAC3F,oEAAoE;AACpE,EAAE;AACF,4FAA4F;AAC5F,6FAA6F;AAC7F,uFAAuF;AACvF,2FAA2F;AAC3F,MAAM,UAAU,GAAG,gKAAgK,SAAS,IAAI,WAAW,IAAI,eAAe,EAAE,CAAC;AAEjO,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,OAAO,EACjB,IAAI,GAAG,QAAQ,EACf,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,GAAG,IAAI,EACK;IACZ,MAAM,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC;IAClC,OAAO,CACL,iBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,UAAU,EACV,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EACrC,UAAU,CAAC,IAAI,CAAC,EAChB,gBAAgB,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,EAC/B,SAAS,CACV,KACG,IAAI,YAEP,QAAQ,GACF,CACV,CAAC;AACJ,CAAC"}

package/dist/states/ErrorState.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../primitives/Button.js';
 import { cx } from '../lib/cx.js';
 export function ErrorState({ message, retryLabel, onRetry, className }) {
-    return (_jsxs("div", { className: cx('py-x-slot-state-pad-y', className), role: "alert", children: [_jsx("p", { className: "font-sans text-x-slot-error-state-fg", children: message }), _jsx("div", { className: "py-x-slot-state-action-pad-y", children: _jsx(Button, { variant: "secondary", onClick: onRetry, children: retryLabel }) })] }));
+    return (_jsxs("div", { className: cx('py-x-slot-state-pad-y', className), role: "alert", children: [_jsx("p", { className: "font-sans text-x-slot-error-state-fg", children: message }), _jsx("div", { className: "py-x-slot-state-action-pad-y", children: _jsx(Button, { variant: "outline", tone: "neutral", onClick: onRetry, children: retryLabel }) })] }));
 }
 //# sourceMappingURL=ErrorState.js.map

package/dist/states/ErrorState.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../src/states/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAYlC,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAmB;IACrF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,aAClE,YAAG,SAAS,EAAC,sCAAsC,YAAE,OAAO,GAAK,EACjE,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,OAAO,YACzC,UAAU,GACJ,GACL,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ErrorState.js","sourceRoot":"","sources":["../../src/states/ErrorState.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAYlC,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,SAAS,EAAmB;IACrF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,aAClE,YAAG,SAAS,EAAC,sCAAsC,YAAE,OAAO,GAAK,EACjE,cAAK,SAAS,EAAC,8BAA8B,YAC3C,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,OAAO,YACtD,UAAU,GACJ,GACL,IACF,CACP,CAAC;AACJ,CAAC"}

package/package.json

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

@@ -42,6 +42,11 @@
   --color-warn-soft: oklch(95% 0.035 80);
   --color-on-warn: oklch(21% 0.04 75);
   --color-danger-soft: oklch(95% 0.03 30);
+  /* 🔴 契約キーだが値が無かった2つ（#487 で必要になったので与える）。
+   * `on-danger` は 0.19.x が danger の塗りに使っていた `on-accent` と同値＝描画は不変。
+   * `accent-soft` は他の *-soft（95% / chroma ~0.03 / 同 hue）と同じ作り方。 */
+  --color-on-danger: oklch(99% 0 0);
+  --color-accent-soft: oklch(95% 0.03 250);
 
   /* 🔴 Six more contract colours, added in 0.17.0 for `Badge` (#422). Five ships carry a
    * success tone and a warning tone in their own badge (clear / field / invoice / origin /
@@ -170,6 +175,7 @@
    * nene-deal — were already correcting that independently, so the painting this replaces
    * is one no consumer used. */
   --spacing-x-slot-badge-gap: var(--spacing-x-3xs);
+  --spacing-x-slot-badge-dot: var(--spacing-x-3xs);
   --spacing-x-slot-switch-pad-x: var(--spacing-x-2xs);
   --spacing-x-slot-switch-pad-y: var(--spacing-x-3xs);
   --spacing-x-slot-alert-pad: var(--spacing-x-2xs);
@@ -187,6 +193,7 @@
   /* Between an EmptyState's two lines (#456). Only read when `description` is passed. */
   --spacing-x-slot-empty-state-gap: var(--spacing-x-3xs);
   --spacing-x-slot-page-header-pad-y: var(--spacing-x-md);
+  --spacing-x-slot-page-header-gap: var(--spacing-x-3xs);
 
   --radius-x-slot-button: var(--radius-x-md);
   --radius-x-slot-control: var(--radius-x-md);
@@ -230,6 +237,11 @@
   --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);
+  /* `success` (#486). Shaped like `danger`: the surface stays the page's, and the meaning is
+   * carried by the border and the text — an alert is read, not filled. */
+  --color-x-slot-alert-success-bg: var(--color-surface);
+  --color-x-slot-alert-success-fg: var(--color-success);
+  --color-x-slot-alert-success-border: var(--color-success);
   --color-x-slot-field-label: var(--color-text-muted);
   --color-x-slot-field-hint: var(--color-text-muted);
   --text-x-slot-field-hint-size: var(--text-x-2xs);
@@ -283,22 +295,65 @@
    * there is now an opening. */
   --color-x-slot-focus-ring: var(--color-text-primary);
 
-  --color-x-slot-button-primary-bg: var(--color-accent);
-  --color-x-slot-button-primary-fg: var(--color-on-accent);
-  --color-x-slot-button-secondary-bg: var(--color-surface-raised);
-  --color-x-slot-button-secondary-fg: var(--color-text-primary);
-  --color-x-slot-button-secondary-border: var(--color-border);
+  /* Button: shape × tone (#487).
+   *
+   * 🔴 The six tones are `Badge`'s six, in `Badge`'s order, read through the same shape of
+   * slot. That was the whole argument for splitting the axis — if the words do not line up,
+   * the kit still has two vocabularies and has only moved where they disagree.
+   *
+   * 🔴 `-fg` reads the contract's own `on-<tone>`, not `on-accent` for everything. The
+   * contract has carried `on-warn` since it was frozen (2026-07-14) and it is a dark brown,
+   * because `--color-warn` is mid-luminance and white on it measures 3.48:1 — below AA.
+   * With `on-warn` it is 4.97:1. The first draft of this PR painted every tone's label with
+   * `on-accent` and shipped that 3.48:1; the contract had already solved it.
+   *
+   * 🔴 The default tone is `accent`, so `<Button>` is still the accent-coloured filled
+   * button 0.19.x called `primary`. `neutral` is the quiet grey step.
+   *
+   * Four colours per tone, none derivable from the others:
+   *   -bg     the fill, painted by `solid` only
+   *   -fg     what sits on that fill (the contract's `on-<tone>`)
+   *   -ink    the tone itself, painted by `outline` / `bare` / `link`
+   *   -border the outline's frame — the *-soft step, not the tone
+   *
+   * 🔴 `-border` is the soft step. nene-clear draws its outlined danger with a frame far
+   * lighter than the label (`--bad-line` #e3bcbc against `--bad` #9c2c2c). Using the tone for
+   * both makes every outlined button louder than any ship draws today.
+   *
+   * 🔴 Renaming a slot fails SILENTLY. A ship that redefined `primary-* / secondary-* /
+   * danger-border / ghost-fg` sees no error — the property stops being read and the kit
+   * default paints instead. Both consuming ships redefined some (nene-deal 4, nene-vault 3,
+   * measured 2026-08-27), so the migration note carries the mapping. */
+  --color-x-slot-button-outline-bg: var(--color-surface-raised);
+  --color-x-slot-button-neutral-bg: var(--color-border);
+  --color-x-slot-button-neutral-fg: var(--color-text-primary);
+  --color-x-slot-button-neutral-ink: var(--color-text-primary);
+  --color-x-slot-button-neutral-border: var(--color-border);
+  --color-x-slot-button-accent-bg: var(--color-accent);
+  --color-x-slot-button-accent-fg: var(--color-on-accent);
+  --color-x-slot-button-accent-ink: var(--color-accent);
+  --color-x-slot-button-accent-border: var(--color-accent-soft);
   --color-x-slot-button-danger-bg: var(--color-danger);
-  --color-x-slot-button-danger-fg: var(--color-on-accent);
-  /* 🔴 Defaults to the fill, so a filled danger button looks exactly as it did: the border
-   * and the background are the same colour, which is what `border-transparent` over a filled
-   * background already rendered. The slot exists for the ships whose danger button is an
-   * outline rather than a fill — nene-deal's is `background: transparent` with a tinted
-   * border (#455), and it could not express that: the variant emitted no border class at
-   * all, so `border-transparent` from BASE_CLASS won and no slot value could reach it. */
-  --color-x-slot-button-danger-border: var(--color-danger);
-  --color-x-slot-button-ghost-fg: var(--color-text-primary);
-
+  --color-x-slot-button-danger-fg: var(--color-on-danger);
+  --color-x-slot-button-danger-ink: var(--color-danger);
+  --color-x-slot-button-danger-border: var(--color-danger-soft);
+  --color-x-slot-button-success-bg: var(--color-success);
+  --color-x-slot-button-success-fg: var(--color-on-success);
+  --color-x-slot-button-success-ink: var(--color-success);
+  --color-x-slot-button-success-border: var(--color-success-soft);
+  --color-x-slot-button-warn-bg: var(--color-warn);
+  --color-x-slot-button-warn-fg: var(--color-on-warn);
+  /* 🔴 warn の ink だけ tone 本体色ではない。`--color-warn` は中間輝度で、白地に置くと
+   * 3.58:1 ——AA を割る（他の tone は本体色のままで 4.7〜5.5 通る）。契約の `--color-on-warn`
+   * は 16:1 で、**InlineAlert が既に「白地に載る warn の字」として使っている**
+   * （`--color-x-slot-alert-warn-fg`）。同じ用途に同じトークンを充てるのは揃える方向であって、
+   * 例外ではない。⇒ 契約の値は1つも変えずに済む（Badge も InlineAlert も動かない）。 */
+  --color-x-slot-button-warn-ink: var(--color-on-warn);
+  --color-x-slot-button-warn-border: var(--color-warn-soft);
+  --color-x-slot-button-info-bg: var(--color-info);
+  --color-x-slot-button-info-fg: var(--color-on-info);
+  --color-x-slot-button-info-ink: var(--color-info);
+  --color-x-slot-button-info-border: var(--color-info-soft);
   /* Shared by Input, Select and Textarea — they are one control with three shapes, and a
    * product that darkens one and not the others has a bug, not a design. */
   --color-x-slot-control-fg: var(--color-text-primary);
@@ -360,8 +415,10 @@
   --color-x-slot-toast-border: var(--color-border);
   --color-x-slot-toast-danger-fg: var(--color-danger);
   --color-x-slot-toast-danger-border: var(--color-danger);
-  /* `success` tone (#457). Badge and InlineAlert already carry this meaning; the toast is
-   * the one surface that had only two. */
+  /* `success` tone (#457). ⚠️ This comment claimed InlineAlert already carried the meaning.
+   * It did not, and would not until #486 — the sentence was written from the enumeration in
+   * the issue rather than from the component. Corrected here rather than deleted: a note
+   * that was wrong about a neighbour is the exact shape #486 is about. */
   --color-x-slot-toast-success-fg: var(--color-success);
   --color-x-slot-toast-success-border: var(--color-success);
   /* The toast's second line (#457). Only read when `description` is passed. */
@@ -388,6 +445,7 @@
 
   --color-x-slot-pagination-fg: var(--color-text-muted);
   --color-x-slot-page-header-fg: var(--color-text-primary);
+  --color-x-slot-page-header-description-fg: var(--color-text-muted);
   --color-x-slot-text-fg: var(--color-text-primary);
   --color-x-slot-text-muted-fg: var(--color-text-muted);
   --color-x-slot-spinner-fg: var(--color-text-muted);
@@ -473,12 +531,19 @@
   --container-x-slot-modal-lg: var(--container-xl);
 
   --spacing-x-slot-modal-header-gap: var(--spacing-x-xs);
+  /* The action row (#493). One slot for both the space above it and the space between the
+   * buttons: they are the same rhythm, and a product that wants them apart can say so. */
+  --spacing-x-slot-modal-footer-gap: var(--spacing-x-xs);
+  /* The dialog's second line (#493). Only read when `description` is passed. Same value as
+   * PageHeader's and EmptyState's — one word, one look. */
+  --spacing-x-slot-modal-description-gap: var(--spacing-x-3xs);
   --font-weight-x-slot-modal-title: var(--font-weight-medium);
   /* `inherit`, so the header title takes the dialog's own size unless a product says
    * otherwise. There is no previous rendering to copy — the header is new — and picking a
    * step here would decide type for every product that turns the header on. */
   --text-x-slot-modal-title-size: inherit;
   --color-x-slot-modal-close-fg: var(--color-text-muted);
+  --color-x-slot-modal-description-fg: var(--color-text-muted);
 
   /* ── Shadow slots ─────────────────────────────────────────────────────────────
    * 🔴 Shadow was the one dimension that never got slots (#386). 0.9.0 moved "colour, weight
@@ -492,7 +557,10 @@
    * `Card` and `Toast` wrote `shadow-sm`, so theirs point at the scale. A default that is
    * anything other than the current rendering changes how every product already looks —
    * and "the default is harmless" only holds while the default is that copy. */
-  --shadow-x-slot-button-primary: none;
+  /* 🔴 Renamed from `--shadow-x-slot-button-primary` (#487): the shadow belongs to the
+   * filled shape, not to one colour. nene-vault redefines this one (`var(--shadow-sm)`) and
+   * must rename it — see the migration note. */
+  --shadow-x-slot-button-solid: none;
   --shadow-x-slot-card-raised: var(--shadow-sm);
   --shadow-x-slot-toast: var(--shadow-sm);