@hideyukimori/nene2-ui 0.19.1 → 0.20.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/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/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
@@ -43,7 +107,8 @@ const SIZE_CLASS = {
 // 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 }));
+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,MAAM,UAAU,GAAG,8IAA8I,SAAS,IAAI,WAAW,IAAI,eAAe,EAAE,CAAC;AAE/M,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.20.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);
@@ -283,22 +290,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);
@@ -388,6 +438,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);
@@ -492,7 +543,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);