@hideyukimori/nene2-ui 0.16.1 → 0.17.0

package/README.md

@@ -258,11 +258,17 @@ wrap every choice in a `<div>` to say them.
 label, so the kit carries it). That was right and it left the reason in place. **Fixing what
 a report names is not the same as fixing what it is about.**
 
+Until 0.17.0 seven components accepted no `className` at all. Four of them now do — `Badge`,
+`FormField`, `DataTable`, `Pagination` — because a caller could not add a margin or a width
+without wrapping them. **Three still do not, on purpose**: `Modal`, `ConfirmDialog` and
+`ToastProvider` are overlays and a provider; a class landed on a `<dialog>` from outside can
+undo the margin and top-layer assumptions the kit relies on (0.16.1 is the case in point).
+
 ### 🔴 A palette that is missing a meaning
 
-The kit's theme defines **8 of the 28 colours** in the frozen Core Token Contract v1. That
+The kit's theme defines **14 of the 28 colours** in the frozen Core Token Contract v1. That
 is a legal theme — the contract says what a name means, not that every name must be used —
-but it stops being harmless the moment a component needs one of the twenty.
+but it stops being harmless the moment a component needs one of the fourteen.
 
 `warn` was one. Six ships define `--color-warn`; nene-payout, the product this theme was
 promoted from, does not. So `--color-x-slot-alert-warn-*` pointed at `--color-danger` and a
@@ -273,10 +279,11 @@ listening and no one looking**.
 resolve to one value cannot express the distinction it is named for.** Both are now checked
 — radius by step count, colour by whether two meanings resolve to the same value.
 
-Still undefined: `surface-overlay`, `surface-sunken`, `text-faint`, `text-inverse`,
-`border-strong`, `accent-hover`, `accent-soft`, `on-danger`, `success`, `success-soft`,
-`on-success`, `info`, `info-soft`, `on-info`, `focus-ring`, `scrim`. Two of those —
-`focus-ring` and `scrim` — already have component slots pointing at substitutes.
+`success` / `success-soft` / `on-success` and `info` / `info-soft` / `on-info` were added in
+0.17.0 because `Badge` needed them (#422) — defined when a component needs them, not all at
+once. Still undefined: `surface-overlay`, `surface-sunken`, `text-faint`, `text-inverse`,
+`border-strong`, `accent-hover`, `accent-soft`, `on-danger`, `focus-ring`, `scrim`. Two of
+those — `focus-ring` and `scrim` — already have component slots pointing at substitutes.
 
 ### 🔴 Two validity states, and only one of them is invalid
 

package/dist/data/DataTable.d.ts

@@ -16,17 +16,23 @@ export interface DataTableProps<Row> {
     rowKey: (row: Row) => string;
     /** Localized description of what the table contains. Becomes the table's caption. */
     caption: string;
+    /** Composed after the kit's own classes (design principle 2). Lands on the `<table>`. */
+    className?: string;
+    /**
+     * Below `sm`, draw each row as a card: every cell becomes a block headed by its column's
+     * name. Off by default — a table that changes shape at a breakpoint is a decision, the
+     * same rule as `Modal`'s `sheetOnMobile`.
+     *
+     * 🔴 Four ships already do this by hand (`<td data-label>` + `content: attr(data-label)`;
+     * invoice / profile / records / vault, measured 2026-08-25), which is why it is here and
+     * not left to them (#423). The kit does it with utilities, every one carrying the
+     * `max-sm:` prefix, so a wide viewport is untouched.
+     *
+     * ⚠️ The visual header row is hidden (`sr-only`), not removed: the `<th scope="col">` stay
+     * in the document, so assistive tech still pairs a cell with its column. The `::before`
+     * label is presentational and is not read on its own. That the two do not double up is a
+     * live-lane check — jsdom does not lay out, and it is not asserted here.
+     */
+    collapse?: 'sm';
 }
-/**
- * A tabular list.
- *
- * 🔴 Every heading carries `scope="col"`. Without it a screen reader cannot pair a cell with
- * its column, so each cell is read as a bare value — and nothing about the rendered table
- * looks any different, which is why three ships each shipped a table and the `scope` is the
- * detail most likely to differ between them.
- *
- * 🔴 The caption is required, not optional. A visually obvious table ("it's clearly the
- * invoice list") is not obvious to someone arriving at it by keyboard from elsewhere on the
- * page. It is visually hidden, not absent.
- */
-export declare function DataTable<Row>({ columns, rows, rowKey, caption }: DataTableProps<Row>): import("react").JSX.Element;
+export declare function DataTable<Row>({ columns, rows, rowKey, caption, className, collapse, }: DataTableProps<Row>): import("react").JSX.Element;

package/dist/data/DataTable.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../lib/cx.js';
 /**
  * A tabular list.
  *
@@ -11,7 +12,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * invoice list") is not obvious to someone arriving at it by keyboard from elsewhere on the
  * page. It is visually hidden, not absent.
  */
-export function DataTable({ columns, rows, rowKey, caption }) {
-    return (_jsxs("table", { className: "w-full border-collapse font-sans text-x-slot-table-fg", children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", className: `border-b border-x-slot-table-border px-x-slot-table-cell-pad-x py-x-slot-table-cell-pad-y font-x-slot-table-header text-x-slot-table-header-fg ${col.align === 'end' ? 'text-right' : 'text-left'}`, children: col.header }, col.key))) }) }), _jsx("tbody", { children: rows.map((row) => (_jsx("tr", { children: columns.map((col) => (_jsx("td", { className: `border-b border-x-slot-table-border px-x-slot-table-cell-pad-x py-x-slot-table-cell-pad-y ${col.align === 'end' ? 'text-right' : 'text-left'}`, children: col.cell(row) }, col.key))) }, rowKey(row)))) })] }));
+// Every class here carries `max-sm:`. Only structure — the label's weight and colour are
+// the header's own slots, read through `before:`.
+const CARD_TABLE = 'max-sm:block';
+const CARD_THEAD = 'max-sm:sr-only';
+const CARD_TBODY = 'max-sm:block';
+const CARD_ROW = 'max-sm:block max-sm:border-b max-sm:border-x-slot-table-border';
+const CARD_CELL = 'max-sm:block max-sm:border-b-0 max-sm:text-left max-sm:before:block max-sm:before:content-[attr(data-label)] max-sm:before:font-x-slot-table-header max-sm:before:text-x-slot-table-header-fg';
+export function DataTable({ columns, rows, rowKey, caption, className, collapse, }) {
+    const cards = collapse === 'sm';
+    return (_jsxs("table", { className: cx('w-full border-collapse font-sans text-x-slot-table-fg', cards && CARD_TABLE, className), children: [_jsx("caption", { className: "sr-only", children: caption }), _jsx("thead", { className: cards ? CARD_THEAD : undefined, children: _jsx("tr", { children: columns.map((col) => (_jsx("th", { scope: "col", className: `border-b border-x-slot-table-border px-x-slot-table-cell-pad-x py-x-slot-table-cell-pad-y font-x-slot-table-header text-x-slot-table-header-fg ${col.align === 'end' ? 'text-right' : 'text-left'}`, children: col.header }, col.key))) }) }), _jsx("tbody", { className: cards ? CARD_TBODY : undefined, children: rows.map((row) => (_jsx("tr", { className: cards ? CARD_ROW : undefined, children: columns.map((col) => (_jsx("td", { ...(cards ? { 'data-label': col.header } : {}), className: cx('border-b border-x-slot-table-border px-x-slot-table-cell-pad-x py-x-slot-table-cell-pad-y', col.align === 'end' ? 'text-right' : 'text-left', cards && CARD_CELL), children: col.cell(row) }, col.key))) }, rowKey(row)))) })] }));
 }
 //# sourceMappingURL=DataTable.js.map

package/dist/data/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../src/data/DataTable.tsx"],"names":[],"mappings":";AAsBA;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,SAAS,CAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAuB;IACpF,OAAO,CACL,iBAAO,SAAS,EAAC,uDAAuD,aACtE,kBAAS,SAAS,EAAC,SAAS,YAAE,OAAO,GAAW,EAChD,0BACE,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAEE,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,kJACT,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WACvC,EAAE,YAED,GAAG,CAAC,MAAM,IANN,GAAG,CAAC,GAAG,CAOT,CACN,CAAC,GACC,GACC,EACR,0BACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAEE,SAAS,EAAE,6FACT,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WACvC,EAAE,YAED,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IALT,GAAG,CAAC,GAAG,CAMT,CACN,CAAC,IAVK,MAAM,CAAC,GAAG,CAAC,CAWf,CACN,CAAC,GACI,IACF,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../src/data/DataTable.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAwClC;;;;;;;;;;;GAWG;AACH,yFAAyF;AACzF,kDAAkD;AAClD,MAAM,UAAU,GAAG,cAAc,CAAC;AAClC,MAAM,UAAU,GAAG,gBAAgB,CAAC;AACpC,MAAM,UAAU,GAAG,cAAc,CAAC;AAClC,MAAM,QAAQ,GAAG,gEAAgE,CAAC;AAClF,MAAM,SAAS,GACb,+LAA+L,CAAC;AAElM,MAAM,UAAU,SAAS,CAAM,EAC7B,OAAO,EACP,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACY;IACpB,MAAM,KAAK,GAAG,QAAQ,KAAK,IAAI,CAAC;IAChC,OAAO,CACL,iBACE,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,KAAK,IAAI,UAAU,EACnB,SAAS,CACV,aAED,kBAAS,SAAS,EAAC,SAAS,YAAE,OAAO,GAAW,EAChD,gBAAO,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,YAC9C,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,aAEE,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,kJACT,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WACvC,EAAE,YAED,GAAG,CAAC,MAAM,IANN,GAAG,CAAC,GAAG,CAOT,CACN,CAAC,GACC,GACC,EACR,gBAAO,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,YAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,aAAsB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,YAC1D,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,gBAEM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,SAAS,EAAE,EAAE,CACX,2FAA2F,EAC3F,GAAG,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAChD,KAAK,IAAI,SAAS,CACnB,YAEA,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IART,GAAG,CAAC,GAAG,CAST,CACN,CAAC,IAbK,MAAM,CAAC,GAAG,CAAC,CAcf,CACN,CAAC,GACI,IACF,CACT,CAAC;AACJ,CAAC"}

package/dist/data/DetailList.d.ts

@@ -8,9 +8,21 @@ export interface DetailListProps {
     /** Composed after the kit's own classes (design principle 2). */
     className?: string;
     rows: DetailRow[];
+    /**
+     * `stack` (default) is one row per line — what the component always drew. `columns` lays
+     * the rows out in two columns on a wide viewport and **falls back to one column below
+     * `md` on its own**, so a caller never has to say so (nene-vault's own `<dl>` carries
+     * `max-md:grid-cols-1`, and so do the other four ships' — measured 2026-08-25, #391).
+     *
+     * 🔴 A choice between two arrangements, not a column count. Five ships write a two-column
+     * detail block and none writes three; a `columns: number` would be a value the kit
+     * invented (design principle 3). `rows[].span` was considered and rejected for the same
+     * reason: it brings a column count into every row (#424).
+     *
+     * Only structure lives here. The term's weight and colour are slots
+     * (`--font-weight-x-slot-detail-term`, `--color-x-slot-detail-term-fg`) and reach a
+     * product through the theme, not through a prop.
+     */
+    layout?: 'stack' | 'columns';
 }
-/**
- * Read-only key/value display for detail screens. Uses a description list so the
- * label/value relationship is conveyed to assistive technology.
- */
-export declare function DetailList({ rows, className }: DetailListProps): import("react").JSX.Element;
+export declare function DetailList({ rows, className, layout }: DetailListProps): import("react").JSX.Element;

package/dist/data/DetailList.js

@@ -4,7 +4,13 @@ import { cx } from '../lib/cx.js';
  * Read-only key/value display for detail screens. Uses a description list so the
  * label/value relationship is conveyed to assistive technology.
  */
-export function DetailList({ rows, className }) {
-    return (_jsx("dl", { className: cx('flex flex-col gap-x-slot-detail-gap', className), children: rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-x-slot-detail-row-gap border-b border-x-slot-detail-border py-x-slot-detail-row-pad-y", children: [_jsx("dt", { className: "font-sans font-x-slot-detail-term text-x-slot-detail-term-fg", children: row.label }), _jsx("dd", { className: "font-sans text-x-slot-detail-description-fg", children: row.value })] }, row.label))) }));
+const LAYOUT_CLASS = {
+    stack: 'flex flex-col',
+    // One gap slot for both axes — the fleet's two-column blocks use one value, and a second
+    // slot would be a step nobody asked for.
+    columns: 'grid grid-cols-2 max-md:grid-cols-1',
+};
+export function DetailList({ rows, className, layout = 'stack' }) {
+    return (_jsx("dl", { className: cx(LAYOUT_CLASS[layout], 'gap-x-slot-detail-gap', className), children: rows.map((row) => (_jsxs("div", { className: "flex flex-col gap-x-slot-detail-row-gap border-b border-x-slot-detail-border py-x-slot-detail-row-pad-y", children: [_jsx("dt", { className: "font-sans font-x-slot-detail-term text-x-slot-detail-term-fg", children: row.label }), _jsx("dd", { className: "font-sans text-x-slot-detail-description-fg", children: row.value })] }, row.label))) }));
 }
 //# sourceMappingURL=DetailList.js.map

package/dist/data/DetailList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailList.js","sourceRoot":"","sources":["../../src/data/DetailList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAclC;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAmB;IAC7D,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,qCAAqC,EAAE,SAAS,CAAC,YAChE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAEE,SAAS,EAAC,yGAAyG,aAEnH,aAAI,SAAS,EAAC,8DAA8D,YACzE,GAAG,CAAC,KAAK,GACP,EACL,aAAI,SAAS,EAAC,6CAA6C,YAAE,GAAG,CAAC,KAAK,GAAM,KANvE,GAAG,CAAC,KAAK,CAOV,CACP,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}
+{"version":3,"file":"DetailList.js","sourceRoot":"","sources":["../../src/data/DetailList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AA8BlC;;;GAGG;AACH,MAAM,YAAY,GAA2D;IAC3E,KAAK,EAAE,eAAe;IACtB,yFAAyF;IACzF,yCAAyC;IACzC,OAAO,EAAE,qCAAqC;CAC/C,CAAC;AAEF,MAAM,UAAU,UAAU,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,EAAmB;IAC/E,OAAO,CACL,aAAI,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,uBAAuB,EAAE,SAAS,CAAC,YACxE,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAEE,SAAS,EAAC,yGAAyG,aAEnH,aAAI,SAAS,EAAC,8DAA8D,YACzE,GAAG,CAAC,KAAK,GACP,EACL,aAAI,SAAS,EAAC,6CAA6C,YAAE,GAAG,CAAC,KAAK,GAAM,KANvE,GAAG,CAAC,KAAK,CAOV,CACP,CAAC,GACC,CACN,CAAC;AACJ,CAAC"}

package/dist/data/Pagination.d.ts

@@ -12,6 +12,30 @@ interface PaginationBase {
      * component that only knew about pages could not produce the sentence the product needs.
      */
     status: string;
+    /** Composed after the kit's own classes (design principle 2). Lands on the `<nav>`. */
+    className?: string;
+    /**
+     * Passed to both buttons. `sm` for a dense list footer. Omitted, the buttons keep the
+     * size they had — which is what every caller got before 0.17.0.
+     */
+    size?: 'md' | 'sm';
+    /**
+     * On a narrow viewport, stack the three parts vertically. Off by default: the same rule as
+     * `Modal`'s `sheetOnMobile` — a component that changes shape at a breakpoint is a decision.
+     */
+    stackOnMobile?: boolean;
+    /**
+     * Where the status sentence sits. `center` (default) is between the two buttons — what the
+     * component always drew. `start` puts it before both, `end` after both.
+     *
+     * 🔴 Not a free layout. Three positions is the whole space a row of two buttons and one
+     * sentence has, which makes it structure (design principle 3), not a value.
+     *
+     * There is deliberately no "hide when empty" prop: the kit cannot know a list is empty (the
+     * offset model carries no total), and `{total > 0 && <Pagination … />}` says it in the one
+     * place that does know. A prop would only move that line and pretend the kit decided.
+     */
+    statusPlacement?: 'start' | 'center' | 'end';
 }
 interface PagePagination extends PaginationBase {
     /** 1-based. */

package/dist/data/Pagination.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '../primitives/Button.js';
 import { Stack } from '../layout/Stack.js';
+import { cx } from '../lib/cx.js';
 /**
  * Page-by-page navigation for a list.
  *
@@ -22,11 +23,21 @@ import { Stack } from '../layout/Stack.js';
  * the row jump, and moves the next-page button under the cursor that just clicked it.
  */
 export function Pagination(props) {
-    const { label, previousLabel, nextLabel, status } = props;
+    const { label, previousLabel, nextLabel, status, className, size = 'md', stackOnMobile, statusPlacement = 'center', } = props;
     const atStart = props.page === undefined ? !props.canPrev : props.page <= 1;
     const atEnd = props.page === undefined ? !props.canNext : props.page >= props.pageCount;
     const goPrev = () => props.page === undefined ? props.onPrev() : props.onPageChange(props.page - 1);
     const goNext = () => props.page === undefined ? props.onNext() : props.onPageChange(props.page + 1);
-    return (_jsx("nav", { "aria-label": label, children: _jsxs(Stack, { direction: "horizontal", gap: "2xs", align: "center", children: [_jsx(Button, { variant: "secondary", disabled: atStart, onClick: goPrev, "aria-label": previousLabel, children: previousLabel }), _jsx("span", { "aria-current": "page", className: "font-sans text-x-slot-pagination-fg", children: status }), _jsx(Button, { variant: "secondary", disabled: atEnd, onClick: goNext, "aria-label": nextLabel, children: nextLabel })] }) }));
+    const prev = (_jsx(Button, { variant: "secondary", 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 order = statusPlacement === 'start'
+        ? [current, prev, next]
+        : statusPlacement === 'end'
+            ? [prev, next, current]
+            : [prev, current, next];
+    return (_jsx("nav", { "aria-label": label, className: className, children: _jsx(Stack, { direction: "horizontal", gap: "2xs", align: "center", 
+            // Every class carries the `max-sm:` prefix, so a wide viewport is untouched.
+            className: cx(stackOnMobile === true && 'max-sm:flex-col max-sm:items-stretch'), children: order }) }));
 }
 //# sourceMappingURL=Pagination.js.map

package/dist/data/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sourceRoot":"","sources":["../../src/data/Pagination.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAyC3C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE1D,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAC5E,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,SAAS,CAAC;IAExF,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IACjF,MAAM,MAAM,GAAG,GAAG,EAAE,CAClB,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;IAEjF,OAAO,CACL,4BAAiB,KAAK,YACpB,MAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,QAAQ,aACpD,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAc,aAAa,YACtF,aAAa,GACP,EACT,+BAAmB,MAAM,EAAC,SAAS,EAAC,qCAAqC,YACtE,MAAM,GACF,EACP,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAc,SAAS,YAChF,SAAS,GACH,IACH,GACJ,CACP,CAAC;AACJ,CAAC"}
+{"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"}

package/dist/feedback/Badge.d.ts

@@ -1,7 +1,17 @@
 import type { ReactNode } from 'react';
 export interface BadgeProps {
-    /** What the badge means, not what colour it is. */
-    tone?: 'neutral' | 'accent' | 'danger';
+    /**
+     * What the badge means, not what colour it is.
+     *
+     * 🔴 `success` / `warn` / `info` — not `ok` / `warning`. Five ships carry a success and a
+     * warning tone in their own badge and they do not agree on the words (clear and invoice
+     * say `ok`, origin says `warning`); the contract bans both synonyms, and `InlineAlert`
+     * already says `warn`. One vocabulary across the kit, so a tone means the same thing in a
+     * badge as it does in an alert (0.17.0, #422).
+     */
+    tone?: 'neutral' | 'accent' | 'danger' | 'success' | 'warn' | 'info';
+    /** Composed after the kit's own classes (design principle 2). */
+    className?: string;
     children: ReactNode;
 }
 /**
@@ -11,4 +21,4 @@ export interface BadgeProps {
  * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
  * find every such lie afterwards except by reading every screen.
  */
-export declare function Badge({ tone, children }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ tone, className, children }: BadgeProps): import("react").JSX.Element;

package/dist/feedback/Badge.js

@@ -4,6 +4,9 @@ const TONE_CLASS = {
     neutral: 'bg-x-slot-badge-neutral-bg text-x-slot-badge-neutral-fg border-x-slot-badge-neutral-border',
     accent: 'bg-x-slot-badge-accent-bg text-x-slot-badge-accent-fg border-x-slot-badge-accent-border',
     danger: 'bg-x-slot-badge-danger-bg text-x-slot-badge-danger-fg border-x-slot-badge-danger-border',
+    success: 'bg-x-slot-badge-success-bg text-x-slot-badge-success-fg border-x-slot-badge-success-border',
+    warn: 'bg-x-slot-badge-warn-bg text-x-slot-badge-warn-fg border-x-slot-badge-warn-border',
+    info: 'bg-x-slot-badge-info-bg text-x-slot-badge-info-fg border-x-slot-badge-info-border',
 };
 /**
  * A small status marker.
@@ -12,7 +15,7 @@ const TONE_CLASS = {
  * `<Badge color="red">` becomes a lie the moment the theme changes, and there is no way to
  * find every such lie afterwards except by reading every screen.
  */
-export function Badge({ tone = 'neutral', children }) {
-    return (_jsx("span", { className: cx('inline-flex items-center rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans', TONE_CLASS[tone]), children: children }));
+export function Badge({ tone = 'neutral', className, children }) {
+    return (_jsx("span", { className: cx('inline-flex items-center rounded-x-slot-badge border px-x-slot-badge-pad-x py-x-slot-badge-pad-y font-sans', TONE_CLASS[tone], className), children: 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;AAQlC,MAAM,UAAU,GAAoD;IAClE,OAAO,EACL,4FAA4F;IAC9F,MAAM,EAAE,yFAAyF;IACjG,MAAM,EAAE,yFAAyF;CAClG,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAc;IAC9D,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,UAAU,CAAC,IAAI,CAAC,CACjB,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;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,MAAM,UAAU,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAc;IACzE,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,UAAU,CAAC,IAAI,CAAC,EAChB,SAAS,CACV,YAEA,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC"}

package/dist/forms/FormField.d.ts

@@ -37,6 +37,8 @@ export interface FormFieldProps {
      * Folding the two together would mean the kit picking "*" for every locale.
      */
     requiredMarker?: ReactNode;
+    /** Composed after the kit's own classes (design principle 2). Lands on the outer `<div>`. */
+    className?: string;
     children: ReactNode;
 }
 /**
@@ -54,4 +56,4 @@ export interface FormFieldProps {
  * 🔴 The hint stays visible when there is an error. nene-profile hides it in that case, and
  * that is the moment the user most needs it; the error is read first instead.
  */
-export declare function FormField({ id, label, error, warning, hint, labelAdornment, required, requiredMarker, children, }: FormFieldProps): import("react").JSX.Element;
+export declare function FormField({ id, label, error, warning, hint, labelAdornment, required, requiredMarker, className, children, }: FormFieldProps): import("react").JSX.Element;

package/dist/forms/FormField.js

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

package/dist/forms/FormField.js.map

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

package/package.json

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

@@ -43,6 +43,22 @@
   --color-on-warn: oklch(21% 0.04 75);
   --color-danger-soft: oklch(95% 0.03 30);
 
+  /* 🔴 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 /
+   * vault) and four carry `info`, so a kit badge with three tones could not say what their
+   * screens already say. Hues follow the contract's reference theme; lightness is measured:
+   * white on this `success` is 5.35:1 and on this `info` 5.78:1 (both clear 4.5:1 for text),
+   * the fills are 5.51:1 / 5.95:1 against `surface-raised`, and `text-primary` on either
+   * soft is ≥ 13.8:1 — computed with the same OKLCH→sRGB pipeline that reproduces the
+   * `warn` figures above (3.48 / 3.58 / 4.97), so the calculator has a positive control.
+   * Fourteen contract colours are still undefined — see the README. */
+  --color-success: oklch(50% 0.14 155);
+  --color-success-soft: oklch(95% 0.03 155);
+  --color-on-success: oklch(99% 0 0);
+  --color-info: oklch(50% 0.12 245);
+  --color-info-soft: oklch(95% 0.03 245);
+  --color-on-info: oklch(99% 0 0);
+
   /* The shadow scale. Three steps, chosen the way the spacing and radius scales were —
    * measured from what the fleet already ships, not invented here (#386).
    *
@@ -303,6 +319,17 @@
   --color-x-slot-badge-danger-bg: var(--color-danger);
   --color-x-slot-badge-danger-fg: var(--color-on-accent);
   --color-x-slot-badge-danger-border: var(--color-danger);
+  /* 0.17.0 (#422). Filled, like `accent` and `danger`: a status badge is read at a glance
+   * and an outlined success next to a filled danger would weigh the two unequally. */
+  --color-x-slot-badge-success-bg: var(--color-success);
+  --color-x-slot-badge-success-fg: var(--color-on-success);
+  --color-x-slot-badge-success-border: var(--color-success);
+  --color-x-slot-badge-warn-bg: var(--color-warn);
+  --color-x-slot-badge-warn-fg: var(--color-on-warn);
+  --color-x-slot-badge-warn-border: var(--color-warn);
+  --color-x-slot-badge-info-bg: var(--color-info);
+  --color-x-slot-badge-info-fg: var(--color-on-info);
+  --color-x-slot-badge-info-border: var(--color-info);
 
   --color-x-slot-toast-bg: var(--color-surface-raised);
   --color-x-slot-toast-fg: var(--color-text-primary);