@nxgt/material 3.88.1 → 3.90.0

package/dist/{empty-state-D7ofGDU_.js → empty-state-DQnICuun.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-BdrItuwY.js";
+import { t } from "./use-material-translation-DoymV6IP.js";
 import { t as n } from "./typography-CYEquVeb.js";
 import { a as r, c as i, i as a, n as o, o as s, r as c, t as l, u } from "./state-scenes-BX03WmSu.js";
 import { Suspense as d } from "react";

package/dist/{financial-variant-CYgRZzKT.js → financial-variant-D80C1hVD.js}

@@ -1,12 +1,12 @@
-import { n as e, r as t, t as n, u as r } from "./tabs-CdoBFtWx.js";
-import { t as i } from "./use-material-translation-BdrItuwY.js";
-import { r as a, t as o } from "./currency-field-cwC7cqUE.js";
-import { t as s } from "./percent-field-BFwxazf1.js";
+import { d as e, n as t, r as n, t as r } from "./tabs-dXCZGShv.js";
+import { t as i } from "./use-material-translation-DoymV6IP.js";
+import { r as a, t as o } from "./currency-field-CIqe7Wg4.js";
+import { t as s } from "./percent-field-DyJ2yOH4.js";
 import { n as c } from "./calculator-context-BugcKuVG.js";
 import { t as l } from "./calculator-announce-DRd2c6Dq.js";
 import { n as u, t as d } from "./calculator-panel-announce-AZSnZUSr.js";
 import { t as f } from "./currency-B-r3ig11.js";
-import { t as p } from "./calculator-segment-DMFptsDf.js";
+import { t as p } from "./calculator-segment-CvAaDqKf.js";
 import { useId as m, useMemo as h, useState as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
 import { currencyFractionDigits as y } from "@nxgt/material-core/currency-digits";
@@ -433,23 +433,23 @@ function de() {
 			se
 		]
 	];
-	return /* @__PURE__ */ _(d, { children: /* @__PURE__ */ v(n, {
+	return /* @__PURE__ */ _(d, { children: /* @__PURE__ */ v(r, {
 		value: o,
 		onValueChange: (e) => ue(e) && s(e),
 		className: "nxgt-fin-tabs",
-		children: [/* @__PURE__ */ _(t, {
+		children: [/* @__PURE__ */ _(n, {
 			"aria-label": a(`${$}.tabs.label`, "Calculation"),
 			className: "nxgt-fin-tablist",
-			children: c.map(([t, n]) => /* @__PURE__ */ _(e, {
-				value: t,
+			children: c.map(([e, n]) => /* @__PURE__ */ _(t, {
+				value: e,
 				children: n
-			}, t))
-		}), c.map(([e, , t]) => /* @__PURE__ */ _(r, {
-			value: e,
+			}, e))
+		}), c.map(([t, , n]) => /* @__PURE__ */ _(e, {
+			value: t,
 			forceMount: !0,
 			className: "nxgt-fin-body",
-			children: /* @__PURE__ */ _(t, { active: o === e })
-		}, e))]
+			children: /* @__PURE__ */ _(n, { active: o === t })
+		}, t))]
 	}) });
 }
 //#endregion

package/dist/{hooks-CpvvZCs7.js → hooks-C-yLDF39.js}

@@ -1,5 +1,5 @@
-import { i as e } from "./translate-material-BrYBBZ66.js";
-import { n as t } from "./use-heading-spy-kyOSe9rb.js";
+import { i as e } from "./translate-material-BmpcP1p1.js";
+import { n as t } from "./use-heading-spy-BcNK1qvq.js";
 import { t as n } from "./number.utils-CSueQZcv.js";
 import { useCallback as r, useEffect as i, useLayoutEffect as a, useMemo as o, useRef as s, useState as c } from "react";
 import { jsx as l } from "react/jsx-runtime";

package/dist/hooks.js

@@ -1,9 +1,9 @@
 import { t as e } from "./use-ssr-media-query-C6M5m8sf.js";
 import { a as t, i as n, o as r, r as i, s as a } from "./theme-store-BdPp43cV.js";
 import { n as o, t as s } from "./use-theme-BCLireTd.js";
-import { a as c, i as l, m as u, o as d, r as f, s as p, t as m } from "./use-heading-spy-kyOSe9rb.js";
+import { a as c, i as l, m as u, o as d, r as f, s as p, t as m } from "./use-heading-spy-BcNK1qvq.js";
 import { r as h } from "./use-csp-nonce-ZKs9k-ov.js";
 import { t as g } from "./use-mobile-BDro060N.js";
 import { t as _ } from "./use-scroll-away-PQRFZkT2.js";
-import { _ as v, a as y, c as b, d as x, f as S, g as C, h as w, i as T, l as E, m as D, n as O, o as k, p as A, r as j, s as M, t as N, u as P, v as F } from "./hooks-CpvvZCs7.js";
+import { _ as v, a as y, c as b, d as x, f as S, g as C, h as w, i as T, l as E, m as D, n as O, o as k, p as A, r as j, s as M, t as N, u as P, v as F } from "./hooks-C-yLDF39.js";
 export { i as DEFAULT_THEME, n as applyResolvedTheme, t as applyThemeName, M as buildOptions, l as busySettler, D as clearDrafts, c as createSubmitGuard, b as extractNode, v as isLeaving, r as resolveTheme, a as resolveThemeName, F as shouldBlockNavigation, k as startPoll, C as useAllowedTransitions, f as useCountdown, h as useCspNonce, O as useDiscardGuard, w as useDrafts, p as useFocusOnMount, A as useFormatters, m as useHeadingSpy, o as useIsClient, g as useIsMobile, u as useLocalizedDate, x as useNavigationHandler, S as useNavigationHandlers, P as useNumberFormatter, E as useOptions, y as usePoll, T as useReactRouterBlock, _ as useScrollAway, j as useSearchParam, e as useSsrMediaQuery, d as useSubmitOnce, s as useTheme, N as useUnsavedGuard };

package/dist/{hover-card-CZLFQwZv.js → hover-card-DU3TAME4.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t } from "./dist-DVRQkaTK.js";
 import { i as n, r, t as i } from "./dist-DWZXlCZR.js";
-import { S as a, d as o, f as s, l as c, p as l, x as u } from "./spinner-DcW21pN1.js";
+import { S as a, d as o, f as s, l as c, p as l, x as u } from "./spinner-JnLLiLIO.js";
 import { a as d, i as f } from "./dist-DHdUUM1w.js";
 import { t as p } from "./in-dialog-D61Yeaol.js";
 import { i as m } from "./escape-owner-DpaP0lm1.js";

package/dist/i18n.js

@@ -1,8 +1,8 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { c as t, d as n, i as r, l as i, n as a, o, r as s, t as c, u as l } from "./translator-DoVsjUff.js";
-import { i as u, n as d, r as f, t as p } from "./translate-material-BrYBBZ66.js";
+import { c as t, d as n, i as r, l as i, n as a, o, r as s, t as c, u as l } from "./translator-CfoXTrZd.js";
+import { i as u, n as d, r as f, t as p } from "./translate-material-BmpcP1p1.js";
 import { o as m, t as h } from "./merge-BCZE6HGq.js";
-import { t as g } from "./use-material-translation-BdrItuwY.js";
+import { t as g } from "./use-material-translation-DoymV6IP.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-0Xo9q7Ey.js → icon-badge-BGczZ4Hc.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./icon-button-DE1EcO2-.js";
+import { t } from "./icon-button-D0xjBCst.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region lib/components/ui/actions/icon-button/icon-badge.tsx
 function r({ children: r, className: i, ...a }) {

package/dist/{icon-button-DE1EcO2-.js → icon-button-D0xjBCst.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t } from "./use-shape-morph-BKA_R5P5.js";
 import { n, t as r } from "./dist-DVRQkaTK.js";
-import { n as i, t as a } from "./spinner-DcW21pN1.js";
+import { n as i, t as a } from "./spinner-JnLLiLIO.js";
 import { t as o } from "./dist-DkQbkF9T.js";
 import { a as s, i as c, n as l, o as u, r as d, s as f, t as p } from "./use-click-lock-Bwg_caHO.js";
 import { t as m } from "./is-production-GLw59WU8.js";

package/dist/input-group-CSlXMFxu.js

@@ -0,0 +1,70 @@
+import { t as e } from "./utils-BLfntITJ.js";
+import { t } from "./dist-DkQbkF9T.js";
+import { t as n } from "./icon-button-D0xjBCst.js";
+import { a as r, o as i } from "./input-CC2joTjB.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region lib/components/ui/primitives/input-group/input-group.tsx
+function o({ className: t, ...n }) {
+	return /* @__PURE__ */ a("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: e(i, "group/input-group relative flex w-full items-center outline-none", "h-11 max-h-full min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:ps-2", "has-[>[data-align=inline-end]]:[&>input]:pe-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", t),
+		...n
+	});
+}
+var s = t("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none [&>kbd]:rounded-field-inner [&>svg:not([class*='size-'])]:size-4", {
+	variants: { align: {
+		"inline-start": "order-first ps-3 has-[>button]:ps-[0.3rem] has-[>kbd]:ps-[0.4rem]",
+		"inline-end": "order-last pe-3 has-[>button]:pe-[0.3rem] has-[>kbd]:pe-[0.4rem]",
+		"block-start": "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+		"block-end": "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function c({ className: t, align: n = "inline-start", ...r }) {
+	return /* @__PURE__ */ a("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": n,
+		className: e(s({ align: n }), t),
+		onClick: (e) => {
+			e.target.closest("button") || e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...r
+	});
+}
+function l({ className: t, type: r = "button", variant: i = "ghost", ...o }) {
+	return /* @__PURE__ */ a(n, {
+		type: r,
+		variant: i,
+		className: e("size-8", t),
+		...o
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ a("span", {
+		className: e("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", t),
+		...n
+	});
+}
+function d({ className: t, type: n = "text", ...i }) {
+	return /* @__PURE__ */ a("input", {
+		type: n,
+		"data-slot": "input-group-control",
+		"data-pw": i.name ?? "input",
+		className: e("h-full w-full min-w-0 flex-1 bg-transparent px-2 py-1 text-base outline-none md:text-sm", "pointer-coarse:-my-px pointer-coarse:h-[calc(100%+2px)]", "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground disabled:pointer-events-none", t),
+		...i,
+		placeholder: r(i.placeholder, n)
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ a("textarea", {
+		"data-slot": "input-group-control",
+		"data-pw": n.name ?? "textarea",
+		className: e("field-sizing-content min-h-16 w-full min-w-[min(280px,100%)] flex-1 resize-none bg-transparent px-3 py-3 text-base outline-none md:text-sm", "placeholder:text-muted-foreground disabled:pointer-events-none", t),
+		...n,
+		placeholder: r(n.placeholder, "text")
+	});
+}
+//#endregion
+export { u as a, d as i, c as n, f as o, l as r, o as t };

package/dist/lib/components/ui/actions/back-link/back-link.d.ts

@@ -8,12 +8,20 @@ export type BackLinkProps = ComponentProps<typeof LinkButton> & {
      * the label always shows.
      */
     collapse?: 'phone';
+    /**
+     * Drops the start padding so the arrow sits on the page's start edge, in
+     * line with the title and content under it (LTR and RTL). It suits the
+     * `link` and `ghost` looks, which draw no box; the hit area stays the
+     * button's own height. Default `false`.
+     */
+    flush?: boolean;
 };
 /**
  * A link to the parent page: a ghost `LinkButton` with a leading arrow. The
  * label names the destination and is the link's accessible name (the arrow is
  * hidden from assistive tech); the arrow mirrors in right-to-left. It takes
  * every `LinkButton` prop, `variant`, `color`, `size` and `linkComponent`
- * included; `collapse="phone"` keeps only the arrow on a phone.
+ * included; `collapse="phone"` keeps only the arrow on a phone; `flush` removes the
+ * start padding so the arrow lines up with the content below.
  */
-export declare function BackLink({ variant, className, children, collapse, ...props }: BackLinkProps): import("react").JSX.Element;
+export declare function BackLink({ variant, className, children, collapse, flush, ...props }: BackLinkProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/data-grid/grid-cell-tone.d.ts

@@ -0,0 +1,12 @@
+import { RowData } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import { Tone } from '../../tones.js';
+import { GridCellData } from './grid-cell-data.js';
+/**
+ * The tone `meta.tone` gives the value a cell shows now (an edit, a pending
+ * save, a revert, an undo), not the row's; `undefined` for none, and for a
+ * control column, which has no cell data.
+ */
+export declare function gridCellTone<TData extends RowData>(data: GridCellData<TData> | null): Tone | undefined;
+/** `content` in a `ToneValue` when `tone` is set (with `meta.toneLabel`'s words, when given). */
+export declare function toneContent<TData extends RowData>(data: GridCellData<TData>, tone: Tone | undefined, content: ReactNode): ReactNode;

package/dist/lib/components/ui/collections/data-grid/partials/grid-cell-access.d.ts

@@ -2,6 +2,7 @@ import { GridPos } from '@nxgt/material-core/data-grid';
 import { Cell, RowData } from '@tanstack/react-table';
 import { DataTableFeatures } from '../../data-table/features.js';
 import { DataGridContextValue } from '../data-grid-context.js';
+import { GridCellData } from '../grid-cell-data.js';
 /**
  * What the cell at `pos` allows, and whether it says so (`said`, with the
  * shared description's id). A row header with no editor is the row's name,
@@ -18,9 +19,9 @@ export declare function describedBy<TData extends RowData>(grid: DataGridContext
 };
 /** Whether Escape on the active cell is the grid's: a range to collapse, the paste problems to close. */
 export declare function keepsEscape<TData extends RowData>(grid: DataGridContextValue<TData>, pos: GridPos): boolean;
-/** The classes of a body cell: the grid's, the virtual one, the row header's, the control and selected ones, the column's own. */
-export declare function cellClassName<TData extends RowData>(grid: DataGridContextValue<TData>, cell: Cell<DataTableFeatures, TData, unknown>, flags: {
+/** The classes of a body cell: the grid's, the virtual one, the row header's, the control and selected ones, the column's own, then the ones its `meta.cellClassName` gives for the value shown. */
+export declare function bodyCellClasses<TData extends RowData>(grid: DataGridContextValue<TData>, cell: Cell<DataTableFeatures, TData, unknown>, flags: {
     header: boolean;
     control: boolean;
     selected?: boolean;
-}): string;
+}, data: GridCellData<TData> | null): string;

package/dist/lib/components/ui/collections/data-grid/partials/grid-cell-flags.d.ts

@@ -0,0 +1,12 @@
+import { GridPos } from '@nxgt/material-core/data-grid';
+import { RowData } from '@tanstack/react-table';
+import { DataGridContextValue } from '../data-grid-context.js';
+/** The `data-*` flags of a body cell: its range, selection, lock and read-only state, and its Escape. */
+export declare function cellFlags<TData extends RowData>(grid: DataGridContextValue<TData>, pos: GridPos, access: string, inRange: boolean, selected: boolean | undefined): {
+    'data-in-range': true | undefined;
+    'data-selected': true | undefined;
+    'data-locked': true | undefined;
+    'data-row-locked': true | undefined;
+    'data-keeps-escape': true | undefined;
+    'data-readonly': true | undefined;
+};

package/dist/lib/components/ui/collections/data-grid/partials/grid-cell-value.d.ts

@@ -1,5 +1,6 @@
 import { RowData } from '@tanstack/react-table';
 import { ReactNode } from 'react';
+import { Tone } from '../../../tones.js';
 import { GridCellData } from '../grid-cell-data.js';
 import { GridTableCell } from './column-cell.js';
 /**
@@ -7,7 +8,9 @@ import { GridTableCell } from './column-cell.js';
  * over it (the value stays, unseen, so the cell keeps its size). An error's
  * message is in `GridErrorMessages`.
  */
-export declare function GridCellValue<TData extends RowData>({ cell, data, }: {
+export declare function GridCellValue<TData extends RowData>({ cell, data, tone, }: {
     cell: GridTableCell<TData>;
     data: GridCellData<TData> | null;
+    /** The tone of the value shown (`gridCellTone`), computed once by the cell. */
+    tone?: Tone;
 }): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/lib/components/ui/collections/data-table/partials/data-table-cell-content.d.ts

@@ -0,0 +1,11 @@
+import { Cell, RowData } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import { Tone } from '../../../tones.js';
+import { DataTableFeatures } from '../features.js';
+/** The tone `meta.tone` gives the value a cell shows (`undefined` for none). */
+export declare function cellTone<TData extends RowData>(cell: Cell<DataTableFeatures, TData>): Tone | undefined;
+/** `content` in a `ToneValue` when `tone` is set, with `label`'s words when given. */
+export declare function toneWrapped(tone: Tone | undefined, content: ReactNode, label: string | undefined): ReactNode;
+/** A cell's rendered content, in a `ToneValue` when `tone` (its `cellTone`)
+ * is set (with `meta.toneLabel`'s words, when given). */
+export declare function cellContent<TData extends RowData>(cell: Cell<DataTableFeatures, TData>, tone: Tone | undefined): ReactNode;

package/dist/lib/components/ui/collections/data-table/table-meta.d.ts

@@ -1,7 +1,8 @@
 import { CellData, RowData, TableFeatures } from '@tanstack/react-table';
+import { Tone } from '../../tones.js';
 /**
- * `columnDef.meta.className` and `columnDef.meta.numeric`, read by `DataTable`
- * on each header and cell of the column, and `columnDef.meta.label`, the
+ * `columnDef.meta.className`, `columnDef.meta.cellClassName`, `columnDef.meta.tone` and `columnDef.meta.numeric`, read by `DataTable`,
+ * `ServerTable` and `DataGrid` on each header and cell of the column, and `columnDef.meta.label`, the
  * column's plain name. Declared on TanStack's `ColumnMeta`, so it types a consumer's
  * column definitions too: `index.ts` re-exports this module so that the
  * published declarations carry the augmentation wherever `DataTable` is
@@ -10,6 +11,53 @@ import { CellData, RowData, TableFeatures } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData = CellData> {
         className?: string;
+        /**
+         * Classes for a body cell, from the value it shows and its row: the
+         * class follows the data, so a cell is styled by what it holds without
+         * a custom `cell` renderer (the text is unchanged). `DataTable` and
+         * `ServerTable` pass the cell's value (`cell.getValue()`) and the row's
+         * original; `DataGrid` passes the value the cell shows now, so the
+         * class follows an edit, a save and an undo. Returns `undefined` for
+         * none. Merged after `className`; the header is not concerned.
+         *
+         * @example
+         * helper.accessor('balance', {
+         *   header: 'Balance',
+         *   meta: {
+         *     numeric: true,
+         *     cellClassName: (value) =>
+         *       typeof value === 'number' && value < 0 ? 'text-error-text' : undefined,
+         *   },
+         * });
+         */
+        cellClassName?: (value: TValue, row: TData) => string | undefined;
+        /**
+         * The tone of a body cell, from the value it shows and its row: the cell
+         * gets `data-tone`, and its content a `ToneValue` (the value in the tone's
+         * text colour, after a small shape: a diamond for `error`, a triangle for
+         * `warning`, a circle for `success`, a square for another tone, none for
+         * `neutral`). Returns `undefined` for none. `DataGrid` passes the value the
+         * cell shows now (an edit, a pending save, an undo). The default card of the
+         * `cards` and `tiles` layouts shows it too; a `renderCard` imports
+         * `ToneValue`. For a tone read from bands on a number, use `toneBands`
+         * from `@nxgt/material/components`.
+         *
+         * @example
+         * import { toneBands } from '@nxgt/material/components';
+         *
+         * const level = toneBands([
+         *   { below: 8, tone: 'error' },
+         *   { below: 10, tone: 'warning' },
+         *   { from: 14, tone: 'success' },
+         * ]);
+         * helper.accessor('score', { meta: { numeric: true, tone: level } });
+         */
+        tone?: (value: TValue, row: TData) => Tone | undefined;
+        /**
+         * Words a screen reader hears after a toned value (`'Low'`), visually
+         * hidden; off unless given. `toneBands(...).label` fits.
+         */
+        toneLabel?: (value: TValue, row: TData) => string | undefined;
         /**
          * A column of figures: its header and cells are flush to the end and set
          * in tabular digits (`tabular-nums`), so decimals line up down the column.

package/dist/lib/components/ui/collections/filter/use-filter-field-config.d.ts

@@ -3797,6 +3797,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         name?: string | undefined | undefined;
         value?: string | number | readonly string[] | undefined;
         error?: boolean | undefined;
+        variant?: "box" | "plain" | undefined;
         asChild?: boolean | undefined;
         checked?: boolean | undefined;
         required?: boolean | undefined;

package/dist/lib/components/ui/collections/list-pane/list-pane-item.d.ts

@@ -3,6 +3,8 @@ export type ListPaneItemDensity = 'comfortable' | 'compact';
 export type ListPaneItemAppearance = 'plain' | 'card';
 export type ListPaneItemProps = Omit<ComponentProps<'div'>, 'title'> & {
     title?: ReactNode;
+    /** Lines the title may take before it is cut with an ellipsis. Default `1`. */
+    titleLines?: 1 | 2;
     description?: ReactNode;
     /** Before the text: an avatar, an icon (framed in a tinted tile), a rank. */
     media?: ReactNode;
@@ -28,4 +30,4 @@ export declare function listPaneItemClasses({ selected, focused, disabled, densi
  * description, a badge and trailing buttons. Purely visual: the list it sits
  * in gives it a role and its events.
  */
-export declare function ListPaneItem({ title, description, media, leading, badge, trailing, selected, focused, disabled, density, appearance, lifted, className, children, ...props }: ListPaneItemProps): import("react").JSX.Element;
+export declare function ListPaneItem({ title, titleLines, description, media, leading, badge, trailing, selected, focused, disabled, density, appearance, lifted, className, children, ...props }: ListPaneItemProps): import("react").JSX.Element;

package/dist/lib/components/ui/collections/list-pane/partials/list-pane-item-content.d.ts

@@ -4,8 +4,9 @@ import { ReactNode } from 'react';
  * control, the media tile, the title with its description (not when
  * `compact`), the badge (from a 20rem pane) and the trailing buttons.
  */
-export declare function ListPaneItemContent({ title, description, media, leading, badge, trailing, compact, }: {
+export declare function ListPaneItemContent({ title, titleLines, description, media, leading, badge, trailing, compact, }: {
     title?: ReactNode;
+    titleLines?: 1 | 2;
     description?: ReactNode;
     media?: ReactNode;
     leading?: ReactNode;

package/dist/lib/components/ui/dates/age-field/age-field.d.ts

@@ -0,0 +1,8 @@
+import { AgeFieldProps } from './types.js';
+/**
+ * One labelled field holding an age: a number and a unit (days, weeks,
+ * months, years; the allowed units are `units`). The value is
+ * `{ value: 2, unit: 'month' }`, `min` and `max` apply to the unit chosen,
+ * and the age is read aloud in the language ("2 months", « 2 mois »).
+ */
+export declare function AgeField({ units, value, defaultValue, onChange, min, max, ...props }: AgeFieldProps): import("react").JSX.Element;

package/dist/lib/components/ui/dates/age-field/age-form-field.d.ts

@@ -0,0 +1,8 @@
+import { UseControllerProps } from 'react-hook-form';
+import { AgeFieldProps } from './types.js';
+/**
+ * An AgeField wired to React Hook Form. The field's value is
+ * `{ value, unit }`; an error on the whole field, on `<name>.value` or on
+ * `<name>.unit` shows as the one message under the pair.
+ */
+export declare function AgeFormField<T extends Record<string, any>>({ control, name, ...props }: Pick<UseControllerProps<T>, 'control' | 'name'> & Omit<AgeFieldProps, 'name' | 'value' | 'onChange'>): import("react").JSX.Element;

package/dist/lib/components/ui/dates/age-field/age-reading.d.ts

@@ -0,0 +1,11 @@
+import { useMaterialTranslation } from '../../../../i18n/use-material-translation.js';
+import { AgeUnit } from './types.js';
+type Translate = ReturnType<typeof useMaterialTranslation>['t'];
+/** A unit's name for `count`, in the language: "month" for 1, "mois" for 2. */
+export declare function ageUnitName(t: Translate, unit: AgeUnit, count: number): string;
+/**
+ * An age read aloud, in the language: "2 months", « 2 mois ». `null` while
+ * the number is empty.
+ */
+export declare function ageReading(t: Translate, value: number | null, unit: AgeUnit): string | null;
+export {};

package/dist/lib/components/ui/dates/age-field/age-value.d.ts

@@ -0,0 +1,9 @@
+import { AgeLimit, AgeUnit, AgeValue } from './types.js';
+/** Every unit an age can be given in, shortest first. */
+export declare const AGE_UNITS: readonly AgeUnit[];
+/** What an AgeField holds before anyone fills it in. */
+export declare const emptyAge: (unit: AgeUnit) => AgeValue;
+/** The bound that applies to `unit`, or `undefined` when there is none. */
+export declare function limitFor(limit: AgeLimit | undefined, unit: AgeUnit): number | undefined;
+/** Keeps the allowed units that exist, in the order given, with no repeats. */
+export declare function allowedUnits(units: readonly AgeUnit[]): AgeUnit[];

package/dist/lib/components/ui/dates/age-field/index.d.ts

@@ -0,0 +1,4 @@
+export { AgeField } from './age-field.js';
+export * from './age-form-field.js';
+export { ageReading } from './age-reading.js';
+export type { AgeFieldProps, AgeLimit, AgeUnit, AgeValue } from './types.js';

package/dist/lib/components/ui/dates/age-field/types.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, Ref } from 'react';
+/** A unit of age. */
+export type AgeUnit = 'day' | 'week' | 'month' | 'year';
+/** What an AgeField holds: the number (`null` while empty) and its unit. */
+export type AgeValue = {
+    value: number | null;
+    unit: AgeUnit;
+};
+/** A `min` or `max`: one bound for every unit, or one per unit. */
+export type AgeLimit = number | Partial<Record<AgeUnit, number>>;
+export type AgeFieldProps = {
+    /** The one label of the pair; it names the group. */
+    label?: ReactNode;
+    /** The one message under the pair. */
+    helperText?: ReactNode;
+    error?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Names the parts `<name>.value` and `<name>.unit` for a native form. */
+    name?: string;
+    id?: string;
+    value?: AgeValue;
+    defaultValue?: AgeValue;
+    onChange?: (value: AgeValue) => void;
+    /**
+     * The units offered, in this order. The first is the unit of an empty
+     * field. Default: day, week, month, year.
+     */
+    units?: readonly AgeUnit[];
+    /** The smallest number: one for every unit, or one per unit. Default: 0. */
+    min?: AgeLimit;
+    /** The largest number: one for every unit, or one per unit. */
+    max?: AgeLimit;
+    hideSteppers?: boolean;
+    /** Names the group when `label` is not plain text. */
+    'aria-label'?: string;
+    /** Reaches the number input (React Hook Form's `field.ref`, `setFocus`). */
+    ref?: Ref<HTMLInputElement>;
+};

package/dist/lib/components/ui/dates/index.d.ts

@@ -1,3 +1,4 @@
+export * from './age-field/index.js';
 export * from './calendar/index.js';
 export * from './date-field/index.js';
 export * from './date-range-field/index.js';

package/dist/lib/components/ui/display/badge/badge.d.ts

@@ -4,11 +4,14 @@ import { IconName } from '../../primitives/icon/icon.js';
 import { Tone } from '../../tones.js';
 declare const badgeVariants: (props?: ({
     variant?: "secondary" | "success" | "info" | "warning" | "error" | "default" | "soft" | "outlined" | null | undefined;
+    size?: "md" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /** The tone of a `soft` or `outlined` badge: a named tone or one the app declared in `AppTones`. */
 export type BadgeTone = Tone;
-declare function Badge({ className, variant, tone, icon, asChild, children, ...props }: ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+declare function Badge({ className, variant, size, tone, icon, asChild, children, ...props }: ComponentProps<'span'> & Omit<VariantProps<typeof badgeVariants>, 'size'> & {
     asChild?: boolean;
+    /** `sm` (default, 20 px) or `md` (24 px, larger text and icon). */
+    size?: 'sm' | 'md';
     /** The colour of a `soft` or `outlined` badge (neutral without one). */
     tone?: BadgeTone;
     /**

package/dist/lib/components/ui/display/entity-header/entity-header.d.ts

@@ -39,5 +39,12 @@ export type EntityHeaderProps = {
      */
     stats?: EntityStat[];
     actions?: ResponsiveButtonProps[] | React.ReactNode;
+    /**
+     * `'card'` (default) draws the header on its own card. `'none'` draws it
+     * flat, with no background, padding or shadow, for a header that sits
+     * directly on a page band or inside a surface of its own, so surfaces do
+     * not nest. The layout is unchanged.
+     */
+    surface?: 'card' | 'none';
 } & Pick<IconButtonProps, 'variant' | 'color'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
-export declare function EntityHeader({ color, variant, icon, leading, title, headingLevel, status, metadata, stats, actions, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;
+export declare function EntityHeader({ color, variant, icon, leading, title, headingLevel, status, metadata, stats, actions, surface, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/index.d.ts

@@ -24,6 +24,7 @@ export * from './markdown/index.js';
 export * from './metrics/index.js';
 export * from './param-table/index.js';
 export * from './period-cards/index.js';
+export * from './person-cell/index.js';
 export * from './qrcode/index.js';
 export * from './recovery-codes/index.js';
 export * from './recovery-codes-status/index.js';
@@ -35,6 +36,7 @@ export * from './status-indicator/index.js';
 export * from './summary-data/index.js';
 export * from './terminal/index.js';
 export * from './timeline/index.js';
+export * from './tone-value/index.js';
 export * from './totals-list/index.js';
 export * from './tube-cap/index.js';
 export * from './vote-tally/index.js';

package/dist/lib/components/ui/display/person-cell/index.d.ts

@@ -0,0 +1 @@
+export * from './person-cell.js';

package/dist/lib/components/ui/display/person-cell/person-cell.d.ts

@@ -0,0 +1,23 @@
+import { Tone } from '../../tones.js';
+export type PersonCellProps = {
+    /** The person's name, truncated with an ellipsis when it does not fit; the full text stays in the DOM. */
+    name: string;
+    /** A picture; the initials show in its place until it loads or when it fails. */
+    src?: string;
+    /** The letters shown without a picture. Unset: derived from `name` (`'Ada Lovelace'` → `'AL'`). */
+    initials?: string;
+    /** The tone of the initials. Unset: neutral. */
+    tone?: Tone;
+    /** A muted line under the name (a role, an email, a team), truncated too. */
+    description?: string;
+    /** `'sm'` (24 px avatar) fits a table row; `'md'` (32 px) a card or a list. */
+    size?: 'sm' | 'md';
+    className?: string;
+};
+/**
+ * An avatar before a name, for the first column of a table of people or the
+ * title of a card. The avatar is decorative (`aria-hidden`): the name is the
+ * text a screen reader and a row link read. Takes the width it is given and
+ * truncates (`min-w-0`), so it holds on a phone.
+ */
+export declare function PersonCell({ name, src, initials, tone, description, size, className, }: PersonCellProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/tone-value/index.d.ts

@@ -0,0 +1,2 @@
+export { type ToneBand, type ToneBands, toneBands, } from '@nxgt/material-core/cell-tone';
+export * from './tone-value.js';

package/dist/lib/components/ui/display/tone-value/tone-value.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Tone } from '../../tones.js';
+export type ToneValueProps = Omit<ComponentProps<'span'>, 'children'> & {
+    /** The tone: a named tone or one the app declared in `AppTones`. `undefined` renders the value as is. */
+    tone?: Tone;
+    /** The value shown. */
+    children?: ReactNode;
+    /**
+     * Words for a screen reader after the value (`'Low'`), visually hidden. The
+     * mark is `aria-hidden`: without a label the tone is for sighted users only.
+     */
+    label?: string;
+};
+/**
+ * A value in the text colour of its tone, with a small shape before it (a
+ * diamond for `error`, a triangle for `warning`, a circle for `success`, a
+ * square for any other tone; none for `neutral`), so the tone survives when
+ * the colour does not (forced colours, colour blindness, a black and white
+ * print). The cells of `DataTable`, `ServerTable` and `DataGrid` wear it for a
+ * column with `meta.tone`; import it for a `renderCard` or any figure of your
+ * own. With no `tone` it renders the value in a plain span, without a mark.
+ */
+export declare function ToneValue({ tone, label, className, children, ...props }: ToneValueProps): import("react").JSX.Element;

package/dist/lib/components/ui/feedback/error-state/partials/error-state-actions.d.ts

@@ -1,10 +1,15 @@
 import { ReactNode } from 'react';
+import { ButtonVariant } from '../../../actions/button/button.js';
 type Props = {
     onRetry?: () => unknown;
     retrying?: boolean;
     retryLabel?: ReactNode;
     action?: ReactNode;
+    /** The Retry button's variant (outlined by default). */
+    retryVariant?: ButtonVariant;
+    /** The Retry button's `data-slot`. */
+    retrySlot?: string;
 };
 /** Retry (loading while a returned promise is pending), then the extra actions. */
-export declare function ErrorStateActions({ onRetry, retrying, retryLabel, action, }: Props): import("react").JSX.Element;
+export declare function ErrorStateActions({ onRetry, retrying, retryLabel, action, retryVariant, retrySlot, }: Props): import("react").JSX.Element;
 export {};