@nxgt/material 3.80.0 → 3.82.0

package/dist/{empty-state-D3Jggupu.js → empty-state-CSkghnD9.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-BJucC_xe.js";
+import { t } from "./use-material-translation-DYrfV_JJ.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-BdyfYhnp.js → financial-variant-igpGRbGw.js}

@@ -1,12 +1,12 @@
-import { n as e, r as t, t as n, u as r } from "./tabs-DSo4eCUn.js";
-import { t as i } from "./use-material-translation-BJucC_xe.js";
-import { r as a, t as o } from "./currency-field-CMFvctye.js";
-import { t as s } from "./percent-field-C2LNr8NA.js";
+import { n as e, r as t, t as n, u as r } from "./tabs-Um0SFyf1.js";
+import { t as i } from "./use-material-translation-DYrfV_JJ.js";
+import { r as a, t as o } from "./currency-field-DizBTAat.js";
+import { t as s } from "./percent-field-QwU1l2Q4.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-OI1BT3bA.js";
+import { t as p } from "./calculator-segment-CwnC2cV_.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";

package/dist/{hooks-Z7KKbv4G.js → hooks-k8_f3B0k.js}

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

package/dist/hooks.js

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

package/dist/{hover-card-CFGIX6kg.js → hover-card-DuaVVKMb.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-RITOxvpH.js";
+import { S as a, d as o, f as s, l as c, p as l, x as u } from "./spinner-DH1mm8hH.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-DTlOlIoq.js";
-import { i as u, n as d, r as f, t as p } from "./translate-material-CZTGqgen.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-CcEgQ-H7.js";
+import { i as u, n as d, r as f, t as p } from "./translate-material-D4rn5UaQ.js";
 import { o as m, t as h } from "./merge-BCZE6HGq.js";
-import { t as g } from "./use-material-translation-BJucC_xe.js";
+import { t as g } from "./use-material-translation-DYrfV_JJ.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-kxGWUvcO.js → icon-badge-3ThP6EOl.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./icon-button-BamxMwZs.js";
+import { t } from "./icon-button-4PKlaI1g.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-BamxMwZs.js → icon-button-4PKlaI1g.js}

@@ -1,9 +1,9 @@
 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-RITOxvpH.js";
+import { n as i, t as a } from "./spinner-DH1mm8hH.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-BZYtTmVt.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";
 import { t as h } from "./button-group-context-CaP0X5p_.js";
 import { shapeOutline as g, toSvgPath as _ } from "@nxgt/material-core/shapes";

package/dist/lib/components/ui/actions/button/button-tones.d.ts

@@ -1,37 +1,38 @@
 /**
  * The text colour of the `tonal`, `outlined` and `link` variants of `Button`
  * and `IconButton`, per `color`: the token itself where it reads at 4.5:1 on
- * the page, on `--card` and on its own 15 % tint, else mixed toward black in
- * the light theme and toward white in the dark one (WCAG 1.4.3). The class
+ * the page ground (`--ground`, a tinted page), on `--card` and on its own 15 %
+ * tint over either, else mixed toward black in the light theme and toward white
+ * in the dark one, on the card, popover, muted and accent surfaces too (WCAG 1.4.3, #2398). The class
  * names are written out whole so Tailwind finds them.
  */
 export declare const toneText: {
     readonly primary: "text-primary-text";
-    readonly secondary: "text-secondary";
-    readonly success: "text-success dark:text-[color-mix(in_oklab,var(--color-success)_85%,white)]";
-    readonly info: "text-info";
+    readonly secondary: "text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]";
+    readonly success: "text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-success)_70%,white)]";
+    readonly info: "text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:text-[color-mix(in_oklab,var(--color-info)_85%,white)]";
     readonly warning: "text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]";
-    readonly error: "text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]";
+    readonly error: "text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:text-[color-mix(in_oklab,var(--color-error)_70%,white)]";
     readonly default: "text-foreground";
 };
 /** The same tones for an icon marked `data-slot="icon"`. */
 export declare const toneIcon: {
     readonly primary: "[&_svg]:data-[slot=icon]:text-primary-text";
-    readonly secondary: "[&_svg]:data-[slot=icon]:text-secondary";
-    readonly success: "[&_svg]:data-[slot=icon]:text-success dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_85%,white)]";
-    readonly info: "[&_svg]:data-[slot=icon]:text-info";
+    readonly secondary: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-secondary)_80%,white)]";
+    readonly success: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-success)_70%,white)]";
+    readonly info: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-info)_85%,white)]";
     readonly warning: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-warning)_85%,white)]";
-    readonly error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]";
+    readonly error: "[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:data-[slot=icon]:text-[color-mix(in_oklab,var(--color-error)_70%,white)]";
     readonly default: "[&_svg]:data-[slot=icon]:text-foreground";
 };
 /** The same tones for `IconButton`'s icon line (`stroke`). */
 export declare const toneStroke: {
     readonly primary: "[&_svg]:stroke-primary-text";
-    readonly secondary: "[&_svg]:stroke-secondary";
-    readonly success: "[&_svg]:stroke-success dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_85%,white)]";
-    readonly info: "[&_svg]:stroke-info";
+    readonly secondary: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-secondary)_80%,white)]";
+    readonly success: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-success)_70%,white)]";
+    readonly info: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_90%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-info)_85%,white)]";
     readonly warning: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-warning)_85%,white)]";
-    readonly error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_85%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]";
+    readonly error: "[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_80%,black)] dark:[&_svg]:stroke-[color-mix(in_oklab,var(--color-error)_70%,white)]";
     readonly default: "[&_svg]:stroke-foreground";
 };
 /**
@@ -44,9 +45,9 @@ export declare const toneStroke: {
 export declare const toneVars: {
     readonly primary: "[--morph-on:var(--color-primary)] [--morph-on-fg:var(--color-primary-foreground)] [--btn-focus:var(--color-primary-text)] [--btn-line:var(--color-primary)]";
     readonly secondary: "[--morph-on:var(--color-secondary)] dark:[--morph-on:color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] [--morph-on-fg:var(--color-secondary-foreground)] [--btn-focus:var(--color-secondary)] [--btn-line:var(--color-secondary)]";
-    readonly success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_85%,white)] [--btn-line:var(--color-success)]";
+    readonly success: "[--morph-on:var(--color-success)] dark:[--morph-on:color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] [--morph-on-fg:var(--color-success-foreground)] [--btn-focus:var(--color-success)] dark:[--btn-focus:color-mix(in_oklab,var(--color-success)_70%,white)] [--btn-line:var(--color-success)]";
     readonly info: "[--morph-on:var(--color-info)] dark:[--morph-on:color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] [--morph-on-fg:var(--color-info-foreground)] [--btn-focus:var(--color-info)] [--btn-line:var(--color-info)]";
     readonly warning: "[--morph-on:var(--color-warning)] dark:[--morph-on:color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] [--morph-on-fg:var(--color-warning-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-warning)_85%,white)] [--btn-line:var(--color-warning)]";
-    readonly error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_85%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]";
+    readonly error: "[--morph-on:var(--color-error)] [--morph-on-fg:var(--color-error-foreground)] [--btn-focus:color-mix(in_oklab,var(--color-error)_80%,black)] dark:[--btn-focus:color-mix(in_oklab,var(--color-error)_70%,white)] [--btn-line:var(--color-error)]";
     readonly default: "[--morph-on:var(--color-foreground)] [--morph-on-fg:var(--color-background)] [--btn-focus:var(--color-foreground)] [--btn-line:var(--color-foreground)]";
 };

package/dist/lib/components/ui/collections/day-grouped-list/day-grouped-list.d.ts

@@ -17,6 +17,11 @@ export type DayGroupedListProps<T> = Omit<ComponentProps<'div'>, 'children'> & {
     sticky?: boolean;
     /** Shows how many items a bucket holds beside its heading. */
     showCount?: boolean;
+    /**
+     * The heading level of each bucket's title (`<h2>` to `<h6>`). Default `3`;
+     * pick the level that follows the heading above the list.
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
     /** Extra classes for each heading (its background, say, on a tinted parent). */
     headerClassName?: string;
     /** Extra classes for each `<ul>` (`divide-y`, a gap…). */
@@ -27,4 +32,4 @@ export type DayGroupedListProps<T> = Omit<ComponentProps<'div'>, 'children'> & {
  * labelled section whose heading sticks while its items scroll under it.
  * The parent scrolls; the list only lays the buckets out.
  */
-export declare function DayGroupedList<T>({ items, getDate, getKey, renderItem, now, labels, sticky, showCount, headerClassName, listClassName, className, ...props }: DayGroupedListProps<T>): import("react").JSX.Element;
+export declare function DayGroupedList<T>({ items, getDate, getKey, renderItem, now, labels, sticky, showCount, headingLevel, headerClassName, listClassName, className, ...props }: DayGroupedListProps<T>): import("react").JSX.Element;

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

@@ -7188,6 +7188,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         min?: number | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         required?: boolean | undefined;
+        balance?: boolean | undefined;
         density?: "comfortable" | "compact" | undefined;
     } | {
         className: string;
@@ -7480,6 +7481,7 @@ export declare function useFilterFieldConfig({ field, value, onChange, error, di
         min?: number | undefined;
         orientation?: "horizontal" | "vertical" | undefined;
         required?: boolean | undefined;
+        balance?: boolean | undefined;
         options: import('../../selection/index.js').ChoiceCardOption[];
         density?: "comfortable" | "compact" | undefined;
         helperText?: import('react').ReactNode;

package/dist/lib/components/ui/collections/server-table/types-states.d.ts

@@ -1,7 +1,7 @@
 import { IconStyleInput } from '@nxgt/material-core/icons';
 import { ErrorStateKind } from '@nxgt/material-core/states';
 import { ReactNode } from 'react';
-import { StateHeadingLevel } from '../../feedback/state-frame/state-frame.js';
+import { StateHeadingLevel, StateIllustrationProp } from '../../feedback/state-frame/state-frame.js';
 import { ListEmptyContent } from '../list-empty/list-empty.js';
 /** What an empty page says: nothing at all yet, or nothing matching. */
 export type ServerTableEmpty = {
@@ -39,4 +39,8 @@ export type ServerTableError = {
     /** Which failure it is: the illustration and icon follow it. Default
      * `generic`. */
     kind?: ErrorStateKind;
+    /** Replaces the scene `kind` picks, as `ListEmptyPage`'s `illustration`
+     * does for the empty states: a scene id, a node, `true` for an icon
+     * illustration, `false` for none. */
+    illustration?: StateIllustrationProp;
 };

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

@@ -35,5 +35,6 @@ export * from './status-indicator/index.js';
 export * from './summary-data/index.js';
 export * from './terminal/index.js';
 export * from './timeline/index.js';
+export * from './tube-cap/index.js';
 export * from './vote-tally/index.js';
 export * from './zoned-time/index.js';

package/dist/lib/components/ui/display/tube-cap/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tube-cap.js';
+export { TUBE_CAP_KINDS, type TubeCapKind } from './tube-cap.kinds.js';

package/dist/lib/components/ui/display/tube-cap/tube-cap.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps, ReactNode } from 'react';
+import { TubeCapKind } from './tube-cap.kinds.js';
+export type TubeCapProps = Omit<ComponentProps<'span'>, 'children' | 'role' | 'aria-label'> & {
+    /** The kind of tube; its cap colour is fixed by the international convention. */
+    kind: TubeCapKind;
+    /**
+     * The container's name, written beside the cap ("EDTA", "Serum"): the
+     * colour never carries the meaning alone. It also names the chip.
+     */
+    label: ReactNode;
+    /** The volume drawn or required, as text ("4 mL"). */
+    volume?: ReactNode;
+    /** The accession label of the tube ("L00000042-1"). */
+    accession?: ReactNode;
+    /** Trailing slot for an action, such as an `IconButton`. */
+    action?: ReactNode;
+    /** `default` 28px cap, `sm` 20px, `lg` 40px. */
+    size?: 'sm' | 'default' | 'lg';
+};
+/**
+ * A chip for a specimen tube: a cap in its fixed convention colour (the same
+ * in light and dark, in every theme) and the container's name beside it, with
+ * an optional volume, accession label and action. The colour is a data
+ * attribute resolved in CSS, so the server writes the markup the client does,
+ * with no inline style.
+ */
+export declare function TubeCap({ kind, label, volume, accession, action, size, className, ...props }: TubeCapProps): import("react").JSX.Element;

package/dist/lib/components/ui/display/tube-cap/tube-cap.kinds.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The cap colours of the international tube convention (ISO 6710 / CLSI
+ * GP41), as the kind of tube they stand for. The colour of a kind is fixed:
+ * it does not follow the theme or the colour scheme (see `tube-cap.css`).
+ */
+export declare const TUBE_CAP_KINDS: readonly ["edta", "heparin", "citrate", "esr", "serum", "gel", "fluoride", "trace", "other"];
+export type TubeCapKind = (typeof TUBE_CAP_KINDS)[number];