@nxgt/material 3.49.0 → 3.51.0

package/dist/i18n.js

@@ -1,10 +1,10 @@
 import { t as e } from "./is-production-GLw59WU8.js";
-import { a as t, i as n, n as r, r as i } from "./stored-language-IaL1Ftn_.js";
-import { n as a, r as o, t as s } from "./i18n-provider-C0fB0sEL.js";
-import { i as c, n as l, o as u, r as d, t as f } from "./translator-Dk4_qE6U.js";
+import { a as t, i as n, n as r, r as i } from "./stored-language-Cb9FMEwk.js";
+import { n as a, r as o, t as s } from "./i18n-provider-Ang2f31m.js";
+import { i as c, n as l, o as u, r as d, t as f } from "./translator-BnQXtpSZ.js";
 import { o as p, t as m } from "./merge-BCZE6HGq.js";
-import { t as h } from "./translate-material-v9u-e7Kd.js";
-import { t as g } from "./use-material-translation-DOkTaWK_.js";
+import { t as h } from "./translate-material-D6KCK21i.js";
+import { t as g } from "./use-material-translation-pLgSqqLw.js";
 import { useCallback as _ } from "react";
 //#region lib/i18n/merge-resources.ts
 function v(e, t, n = "") {

package/dist/{icon-badge-BQYj_LE6.js → icon-badge-CRFGIQPX.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { f as t } from "./dialog-ODql4vH7.js";
-import { a as n, i as r, n as i } from "./field-blur-context-B-fSpl1H.js";
-import { t as a } from "./icon-button-B481L2TP.js";
+import { f as t } from "./dialog-TdT_5iUc.js";
+import { a as n, i as r, n as i } from "./field-blur-context-6McYOnM8.js";
+import { t as a } from "./icon-button-CtG3Snfm.js";
 import { isValidElement as o, useId as s } from "react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 import { describedBy as u } from "@nxgt/material-core/described-by";

package/dist/{icon-button-B481L2TP.js → icon-button-CtG3Snfm.js}

@@ -2,20 +2,20 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./is-production-GLw59WU8.js";
 import { n } from "./use-shape-morph-BKA_R5P5.js";
 import { n as r, t as i } from "./dist-DVRQkaTK.js";
-import { n as a, t as o } from "./dist-B61_o9Mg.js";
-import { a as s, i as c, n as l, r as u, t as d } from "./button-tones-BwuVvAmd.js";
-import { t as f } from "./button-group-context-CaP0X5p_.js";
-import { shapeOutline as p, toSvgPath as m } from "@nxgt/material-core/shapes";
-import { useContext as h, useEffect as g, useRef as _ } from "react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { n as a, r as o, t as s } from "./spinner-UvqlDsV8.js";
+import { a as c, i as l, n as u, o as d, r as f, s as p, t as m } from "./use-click-lock-BZYtTmVt.js";
+import { t as h } from "./button-group-context-CaP0X5p_.js";
+import { shapeOutline as g, toSvgPath as _ } from "@nxgt/material-core/shapes";
+import { useContext as v, useEffect as y, useRef as b } from "react";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
 //#region lib/components/ui/display/count-badge/format-count.ts
-function b(e, t = 99) {
+function C(e, t = 99) {
 	let n = Math.max(0, Math.round(e));
 	return n > t ? `${t}+` : String(n);
 }
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.compound-variants.ts
-var x = [
+var w = [
 	{
 		variant: "filled",
 		color: "primary",
@@ -54,37 +54,37 @@ var x = [
 	{
 		variant: "tonal",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "tonal",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "tonal",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "tonal",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "tonal",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "tonal",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "tonal",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+		class: `${l.default} ${u.default} ${f.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
 	},
 	{
 		variant: "ghost",
@@ -99,99 +99,99 @@ var x = [
 	{
 		variant: "ghost",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "ghost",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "ghost",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "ghost",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "ghost",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} focus:bg-primary/10 hover:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} focus:bg-primary/10 hover:bg-primary/10`
 	},
 	{
 		variant: "outlined",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
 	},
 	{
 		variant: "outlined",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} focus:bg-success/10 hover:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} focus:bg-success/10 hover:bg-success/10`
 	},
 	{
 		variant: "outlined",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} focus:bg-info/10 hover:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} focus:bg-info/10 hover:bg-info/10`
 	},
 	{
 		variant: "outlined",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} focus:bg-warning/10 hover:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} focus:bg-warning/10 hover:bg-warning/10`
 	},
 	{
 		variant: "outlined",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} focus:bg-error/10 hover:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} focus:bg-error/10 hover:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} focus:bg-foreground/10 hover:bg-foreground/10`
+		class: `${l.default} ${u.default} ${f.default} focus:bg-foreground/10 hover:bg-foreground/10`
 	},
 	{
 		variant: "link",
 		color: "primary",
-		class: `${u.primary} ${d.primary} ${l.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${l.primary} ${u.primary} ${f.primary} underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "link",
 		color: "secondary",
-		class: `${u.secondary} ${d.secondary} ${l.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${l.secondary} ${u.secondary} ${f.secondary} underline-offset-4 hover:underline hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "link",
 		color: "success",
-		class: `${u.success} ${d.success} ${l.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${l.success} ${u.success} ${f.success} underline-offset-4 hover:underline hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "link",
 		color: "info",
-		class: `${u.info} ${d.info} ${l.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${l.info} ${u.info} ${f.info} underline-offset-4 hover:underline hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "link",
 		color: "warning",
-		class: `${u.warning} ${d.warning} ${l.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${l.warning} ${u.warning} ${f.warning} underline-offset-4 hover:underline hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "link",
 		color: "error",
-		class: `${u.error} ${d.error} ${l.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${l.error} ${u.error} ${f.error} underline-offset-4 hover:underline hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "link",
 		color: "default",
-		class: `${u.default} ${d.default} ${l.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+		class: `${l.default} ${u.default} ${f.default} underline-offset-4 hover:underline hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], S = o("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
+], T = a("inline-flex center gap-2 cursor-pointer whitespace-nowrap text-sm font-medium disabled:pointer-events-none [&_svg]:bg-transparent [&_svg]:text-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--btn-ic,1rem) shrink-0 [&_svg]:shrink-0", {
 	variants: {
 		look: {
 			btn: "nxgt-btn nxgt-morph-fill aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)]",
@@ -226,22 +226,45 @@ var x = [
 		size: "legacy",
 		width: "default"
 	},
-	compoundVariants: [...x, {
+	compoundVariants: [...w, {
 		look: "btn",
 		size: "legacy",
 		width: "default",
 		class: "[--btn-round:50%]"
 	}]
 });
-function C(e) {
-	return (t) => S({
+function E(e) {
+	return (t) => T({
 		...t,
 		look: e,
 		size: t?.size ?? "legacy",
 		color: t?.variant === "ghost" && t.color == null ? "default" : t?.color
 	});
 }
-var w = C("btn"), T = C("shaped"), E = {
+var D = E("btn"), O = E("shaped");
+//#endregion
+//#region lib/components/ui/actions/icon-button/icon-button-busy.tsx
+function k(e, t) {
+	let n = m(!1, e);
+	return {
+		busyClassName: e ? "relative [&_[data-slot=icon]]:invisible" : void 0,
+		hostProps: {
+			"aria-disabled": e || t["aria-disabled"],
+			"aria-busy": e || t["aria-busy"],
+			onClickCapture: d(e, n, t.onClickCapture)
+		}
+	};
+}
+function A({ variant: e, color: t }) {
+	return /* @__PURE__ */ x(s, {
+		variant: "2",
+		color: e === "filled" ? "light" : t ?? (e === "ghost" ? "default" : "primary"),
+		className: "absolute inset-0 m-auto size-(--btn-ic,1rem)"
+	});
+}
+//#endregion
+//#region lib/components/ui/actions/icon-button/icon-button-surface.ts
+var j = {
 	filled: {
 		primary: "fill-primary",
 		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
@@ -288,87 +311,96 @@ var w = C("btn"), T = C("shaped"), E = {
 		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
 	}
 };
-function D({ shape: t, variant: r, color: i }) {
-	let a = p(t), o = _(null);
-	return n(o, a, !0), /* @__PURE__ */ v("svg", {
+function M({ shape: t, variant: r, color: i }) {
+	let a = g(t), o = b(null);
+	return n(o, a, !0), /* @__PURE__ */ x("svg", {
 		"data-slot": "icon-button-shape",
 		viewBox: "0 0 100 100",
 		"aria-hidden": "true",
 		focusable: "false",
 		className: e("-z-10 pointer-events-none absolute inset-0 size-full overflow-visible transition-[filter]", r === "filled" && "group-hover/icon-button:brightness-90 group-active/icon-button:brightness-80"),
-		children: /* @__PURE__ */ v("path", {
+		children: /* @__PURE__ */ x("path", {
 			ref: o,
-			d: m(a),
+			d: _(a),
 			vectorEffect: "non-scaling-stroke",
 			paintOrder: "stroke",
-			className: e("stroke-transparent stroke-1 transition-[fill]", E[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
+			className: e("stroke-transparent stroke-1 transition-[fill]", j[r][i], "group-focus-visible/icon-button:stroke-ring/50 group-focus-visible/icon-button:stroke-[6px]", "forced-colors:fill-none forced-colors:stroke-[ButtonText] forced-colors:group-focus-visible/icon-button:stroke-[Highlight]")
 		})
 	});
 }
+function N(e, n) {
+	let r = !!e && n != null && n !== "default";
+	y(() => {
+		r && !t() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
+	}, [r]);
+}
 //#endregion
 //#region lib/components/ui/actions/icon-button/icon-button.tsx
-function O(e) {
-	return e === void 0 || !Number.isFinite(e) || e < .5 ? null : b(e);
+function P(e) {
+	return e === void 0 || !Number.isFinite(e) || e < .5 ? null : C(e);
 }
-function k({ variant: n, color: a, size: o, width: c, className: l, asChild: u, type: d = "button", shape: p, morph: m = "pill", badge: _, badgeTone: b = "primary", children: x, ...S }) {
-	let C = u ? i : "button", E = h(f), k = o ?? E, A = !!(S["aria-label"] || S["aria-labelledby"]), j = !!p && c != null && c !== "default";
-	g(() => {
-		j && !t() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
-	}, [j]);
-	let M = !p && m !== "none" && S["aria-pressed"] !== void 0, N = O(_), P = S["aria-pressed"] === !0 || S["aria-pressed"] === "true";
-	return /* @__PURE__ */ v(s, {
-		value: A,
-		children: /* @__PURE__ */ y(C, {
+function F({ variant: t, color: n, size: a, width: o, className: s, asChild: c, type: l = "button", shape: u, morph: d = "pill", badge: f, badgeTone: m = "primary", loading: g = !1, children: _, ...y }) {
+	let b = c ? i : "button", C = v(h), w = a ?? C, T = !!(y["aria-label"] || y["aria-labelledby"]);
+	N(u, o);
+	let E = !u && d !== "none" && y["aria-pressed"] != null, j = P(f), F = String(y["aria-pressed"]) === "true", I = k(g, y);
+	return /* @__PURE__ */ x(p, {
+		value: T,
+		children: /* @__PURE__ */ S(b, {
 			"data-slot": "icon-button",
 			"data-icon-button": "",
-			"data-variant": n ?? "filled",
-			"data-color": a,
-			type: u ? void 0 : d,
-			"data-size": k,
-			"data-shape": p,
-			"data-morph": M ? m : void 0,
-			"data-selected": M && P ? "true" : void 0,
-			className: e(p ? T({
-				variant: n,
-				color: a,
-				size: k
-			}) : w({
-				variant: n,
-				color: a,
-				size: k,
-				width: c
-			}), p && "group/icon-button nxgt-touch-target relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", l),
-			...S,
+			"data-variant": t ?? "filled",
+			"data-color": n,
+			type: c ? void 0 : l,
+			"data-size": w,
+			"data-shape": u,
+			"data-morph": E ? d : void 0,
+			"data-selected": E && F ? "true" : void 0,
+			className: e(u ? O({
+				variant: t,
+				color: n,
+				size: w
+			}) : D({
+				variant: t,
+				color: n,
+				size: w,
+				width: o
+			}), u && "group/icon-button nxgt-touch-target relative isolate bg-transparent! border-0! shadow-none! ring-0! focus-visible:ring-0! aria-invalid:ring-0! forced-colors:[&_svg]:stroke-[ButtonText] forced-colors:[&_svg]:text-[ButtonText]", I.busyClassName, s),
+			...y,
+			...I.hostProps,
 			children: [
-				p ? /* @__PURE__ */ v(D, {
-					shape: p,
-					variant: n ?? "filled",
-					color: a ?? (n === "ghost" ? "default" : "primary")
+				u ? /* @__PURE__ */ x(M, {
+					shape: u,
+					variant: t ?? "filled",
+					color: n ?? (t === "ghost" ? "default" : "primary")
 				}) : null,
-				/* @__PURE__ */ v(r, { children: x }),
-				N === null ? null : /* @__PURE__ */ v("span", {
+				/* @__PURE__ */ x(r, { children: _ }),
+				g && /* @__PURE__ */ x(A, {
+					variant: t ?? "filled",
+					color: n
+				}),
+				j === null ? null : /* @__PURE__ */ x("span", {
 					"data-slot": "icon-button-badge",
 					"aria-hidden": "true",
-					"data-tone": b,
+					"data-tone": m,
 					className: "nxgt-icon-button-badge",
-					children: N
+					children: j
 				})
 			]
 		})
 	});
 }
-function A({ tooltip: e, "aria-label": t, ...n }) {
+function I({ tooltip: e, "aria-label": t, ...n }) {
 	let r = t ?? (typeof e == "string" ? e : void 0);
-	return e ? /* @__PURE__ */ v(a, {
+	return e ? /* @__PURE__ */ x(o, {
 		content: e,
-		children: /* @__PURE__ */ v(k, {
+		children: /* @__PURE__ */ x(F, {
 			"aria-label": r,
 			...n
 		})
-	}) : /* @__PURE__ */ v(k, {
+	}) : /* @__PURE__ */ x(F, {
 		"aria-label": r,
 		...n
 	});
 }
 //#endregion
-export { w as n, b as r, A as t };
+export { D as n, C as r, I as t };

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

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+type Props = ComponentProps<'button'>;
+/**
+ * What `loading` adds to an `IconButton`'s host, as `Button`'s: `aria-busy`
+ * and `aria-disabled` (which win over the caller's while busy, and stand when
+ * idle), every click blocked, and the classes that hide the icon and anchor the
+ * spinner. Spread it after the caller's props.
+ */
+export declare function useBusyProps(loading: boolean, props: Props): {
+    busyClassName: string | undefined;
+    hostProps: {
+        'aria-disabled': (boolean | "false" | "true") | undefined;
+        'aria-busy': (boolean | "false" | "true") | undefined;
+        onClickCapture: (event: import('react').MouseEvent<HTMLButtonElement>) => void;
+    };
+};
+/** The busy spinner, over the icon's place; the icon keeps its room, hidden. */
+export declare function IconButtonSpinner({ variant, color, }: {
+    variant: string;
+    color: string | null | undefined;
+}): import("react").JSX.Element;
+export {};

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

@@ -22,3 +22,5 @@ export declare function IconButtonShape({ shape, variant, color, }: {
     variant: IconButtonVariant;
     color: IconButtonColor;
 }): import("react").JSX.Element;
+/** A `width` other than the default is ignored with a `shape`: a warning in development. */
+export declare function useIgnoredWidthWarning(shape: ShapeName | undefined, width: string | null | undefined): void;

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

@@ -51,6 +51,13 @@ export type IconButtonProps = {
      * alert), `error` (a notification) or `neutral` (the page's text colour).
      */
     badgeTone?: 'primary' | 'error' | 'neutral';
+    /**
+     * Busy, as `Button`'s `loading`: `aria-busy` and `aria-disabled`, a
+     * spinner in place of the icon (the button keeps its size) and every
+     * click blocked. It stays focusable (no native `disabled`), so the
+     * focus is not lost while the work runs.
+     */
+    loading?: boolean;
 };
 export declare function IconButton({ tooltip, 'aria-label': ariaLabel, ...props }: IconButtonProps): import("react").JSX.Element;
 export { variants as iconButtonVariants };

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

@@ -0,0 +1,7 @@
+/**
+ * Set by a host that shows the selection itself, in a bar of its own
+ * (`ServerTable`'s selection band, #1718): the count and "Clear selection"
+ * of the cards' and tiles' list bar are then left out, so the selection is
+ * told once. Not exported from the package.
+ */
+export declare const DataTableSelectionHostContext: import('react').Context<boolean>;

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

@@ -1,3 +1,4 @@
 export { type DataTableListSlots, DataTableListSlotsContext, } from './data-table-list-slots.js';
+export { DataTableSelectionHostContext } from './data-table-selection-host.js';
 export { DataTableLink } from './partials/data-table-link.js';
 export { DataTablePager } from './partials/data-table-pager.js';

package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-list-bar.d.ts

@@ -8,7 +8,8 @@ export declare const hasListBar: <TData extends RowData>(table: DataTableTable<T
 /**
  * The list's header row, where a table's header row would be (the cards'
  * `showHeader`): "Select all on this page" and, beside it, "N rows selected"
- * while rows are selected. With nothing selected there is no count: "20 rows"
+ * while rows are selected (a host with its own selection bar, `ServerTable`'s
+ * band, leaves the count and "Clear selection" to it). With nothing selected there is no count: "20 rows"
  * beside the checkbox would read as its label, and the range is the footer's
  * (#1706). The selection is told politely by the footer's status. At the end, "Clear
  * selection" (only while rows are selected; an icon on a narrow list, still

package/dist/lib/components/ui/collections/filter/bar/partials/filter-quick-toggle.d.ts

@@ -1,8 +1,9 @@
 import { FilterModelField } from '@nxgt/material-core/filter';
 /**
  * A switch or checkbox as a quick filter: a toggle button (`aria-pressed`),
- * dashed while off, selected (the Chip's own check) once on ("Yes");
- * pressed again, its condition goes.
+ * the Chip's toggle look: its label alone while off (no plus, not dashed, so
+ * it never reads as the "+ Field" pill that opens an editor), selected with
+ * the Chip's own check mark once on ("Yes"); pressed again, its condition goes.
  * A "No" condition leaves it off, shown as a chip; pressing it then sets
  * "Yes". The focus stays on it.
  * A field on by default shows pressed with no condition, marked "Default"

package/dist/lib/components/ui/collections/filter/sections/filter-sections-classes.d.ts

@@ -18,7 +18,13 @@ export declare const FILTER_SHEET_COUNT_CLASS = "rounded-full bg-primary/10 px-1
 /** The sheet: its header (the title, then Close), the scrolling sections, the footer. */
 export declare const FILTER_SHEET_CLASS = "motion-reduce:transition-none";
 export declare const FILTER_SHEET_HEADER_CLASS = "flex-row items-center justify-between gap-2 border-b py-2 pr-2 text-left";
-export declare const FILTER_SHEET_CLOSE_CLASS = "static size-11";
+/**
+ * In the header's flow, not at the corner. `relative`, never `static`: the
+ * button's invisible 44px hit area (`::after`, absolute) is placed against
+ * the nearest positioned ancestor, which for a static button is the whole
+ * sheet, so it covered the sections and swallowed a tap on their headers (#1733).
+ */
+export declare const FILTER_SHEET_CLOSE_CLASS = "relative top-auto right-auto size-11";
 export declare const FILTER_SHEET_LOCKED_CLASS = "flex flex-wrap items-center gap-2 border-b px-4 py-3";
 /**
  * The sections, each a FacetGroup. Every row is a 44px target (WCAG 2.5.5):

package/dist/lib/components/ui/collections/page-footer/page-footer.d.ts

@@ -27,6 +27,11 @@ export type PageFooterProps = {
     live?: boolean;
     /** Makes Previous and Next inert (a feed that is loading). */
     disabled?: boolean;
+    /** Renders nothing when there is a single page: no previous page and no
+     * next page. Default `false` (the footer shows its range, "1–5 of 5").
+     * The range is then not on screen: say the count elsewhere (a status
+     * line, a heading) or keep the footer. */
+    hideOnSinglePage?: boolean;
     /** Your router's link; it must forward `className` and `ref`. */
     linkComponent?: DataTableLinkComponent;
 } & Omit<ComponentProps<'div'>, 'children'>;
@@ -37,4 +42,4 @@ export type PageFooterProps = {
  * `ServerTable` draws. Renders nothing for an empty result. Without a
  * `totalCount` (a cursor feed with no total) it is the Previous / Next alone.
  */
-export declare function PageFooter({ pageInfo, totalCount, params, pageSize, count, pageHref, pagingNames, pageControls, live, disabled, linkComponent, className, ...props }: PageFooterProps): import("react").JSX.Element | null;
+export declare function PageFooter({ pageInfo, totalCount, params, pageSize, count, pageHref, pagingNames, pageControls, live, disabled, hideOnSinglePage, linkComponent, className, ...props }: PageFooterProps): import("react").JSX.Element | null;

package/dist/lib/components/ui/collections/row-menu/row-menu-trigger.d.ts

@@ -11,6 +11,9 @@ export type RowMenuTriggerProps = Omit<IconButtonProps, 'children' | 'tooltip' |
  * The "..." button of a row: a ghost `IconButton` with an ellipsis, named
  * after its row. It is 44px on a coarse pointer (and below `md`), 36px with a
  * fine pointer from `md` up. It forwards its props and its `ref`, so it works
- * as the child of a `DropdownMenuTrigger asChild`.
+ * as the child of a `DropdownMenuTrigger asChild`. `loading` (as `Button`'s)
+ * marks it busy while an action chosen from its menu runs: `aria-busy`, a
+ * spinner in place of the dots, the same size, the focus kept, and the menu
+ * does not reopen until it is over.
  */
-export declare function RowMenuTrigger({ label, className, 'aria-label': ariaLabel, ...props }: RowMenuTriggerProps): import("react").JSX.Element;
+export declare function RowMenuTrigger({ label, loading, onPointerDown, onKeyDown, className, 'aria-label': ariaLabel, ...props }: RowMenuTriggerProps): import("react").JSX.Element;

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

@@ -1,3 +1,3 @@
-export { defineFilterModel, type FilterCodecOptions, type FilterCondition, type FilterLockedCondition, type FilterModel, type FilterQuery, parseFilterQuery, serializeFilterQuery, } from '@nxgt/material-core/filter';
+export { defineFilterModel, effectiveConditions, type FilterCodecOptions, type FilterCondition, type FilterFieldError, type FilterFieldErrors, type FilterLockedCondition, type FilterModel, type FilterQuery, type FilterSplitErrors, parseFilterQuery, serializeFilterQuery, splitFilterErrors, } from '@nxgt/material-core/filter';
 export { type CursorConnection, createSorting, FIRST_PAGE, firstPage, isFiltered, isNewQuery, nextPage, type PageCursor, type PagingNames, pagingNames, paramsFromQuery, previousPage, queryFromParams, queryKey, type RouterQuery, readCursor, type ServerPagination, type ServerPaginationOptions, type SortingOptions, serverPagination, type TableFilterBinding, type TableFilterOptions, type TableSort, type TableSorting, tableFilters, withoutFilters, } from '@nxgt/material-core/table-url';
 export * from './server-table.js';

package/dist/lib/components/ui/collections/server-table/partials/filtered-server-table.d.ts

@@ -0,0 +1,8 @@
+import { RowData } from '@tanstack/react-table';
+import { ServerTableFilter, ServerTableProps } from '../types.js';
+import { TableAnswer } from '../use-table-answer.js';
+export declare function FilteredServerTable<T extends RowData>({ props, filter, answer, }: {
+    props: ServerTableProps<T>;
+    filter: ServerTableFilter;
+    answer: TableAnswer;
+}): import("react").JSX.Element;

package/dist/lib/components/ui/collections/server-table/partials/server-table-band.d.ts

@@ -9,6 +9,15 @@ type BandProps = {
     search?: ReactNode;
     /** `'compact'`: half the room under the band (the surface's top is in the root). */
     density?: 'comfortable' | 'compact';
+    /** `bulkActions` with the Filter's bar: the band's controls (the search and
+     * the page's actions) give their place to `bar` while rows are selected
+     * (#1718). They stay mounted and keep their size, hidden, so nothing
+     * moves; `bar` is `null` while nothing is selected. */
+    selection?: {
+        bar: ReactNode;
+        /** `bandActions: 'inline'`: the search keeps a phone's row with a lone icon action. */
+        inline: boolean;
+    };
     /** Below 768px with a list in cards or tiles: the band's second row (the
      * `actions` go into it, after the list's sort and "Filters (N)"). */
     phoneRow?: {
@@ -20,7 +29,7 @@ type BandProps = {
     };
 };
 /** The top band: the title, then the search landmark, then the page's actions. A string title is an `<h2>`. */
-export declare function ServerTableBand({ title, description, actions, search, density, phoneRow, }: BandProps): import("react").JSX.Element | null;
+export declare function ServerTableBand({ title, description, actions, search, density, phoneRow, selection, }: BandProps): import("react").JSX.Element | null;
 /**
  * One `search` landmark: the bar (the search, the quick filters, "Add
  * filter", and "Filters (N)" on a phone), then from 768px the active filters

package/dist/lib/components/ui/collections/server-table/partials/server-table-bulk-buttons.d.ts

@@ -25,6 +25,7 @@ export declare function ServerTableBulkButtons<T extends RowData>({ actions, ids
     root?: () => ParentNode | null;
     /** The phone's selection bar: the first three actions keep their icon,
      * label and count (and wrap onto a second line when they do not fit); the
-     * others go into a "More" menu, each with its count. */
-    phone?: boolean;
+     * others go into a "More" menu, each with its count. A number is how
+     * many keep their button (the selection band's one row on a phone). */
+    phone?: boolean | number;
 }): import("react").JSX.Element;

package/dist/lib/components/ui/collections/server-table/partials/server-table-bulk-more.d.ts

@@ -13,12 +13,14 @@ export type BulkMoreEntry<T> = {
     /** Set past the action's `max`: the item is disabled and shows it. */
     notice: ReactNode | null;
 };
-/** The phone bar's "More" menu: one item per action past the third, each
+/** The phone bar's "More" menu: one item per action past the limit, each
  * with its count. Past its `max` an item is disabled and its notice is its
  * description (`aria-describedby`), under the label. */
-export declare function BulkMoreMenu<T>({ entries, selection, focus, moreLabel, }: {
+export declare function BulkMoreMenu<T>({ entries, selection, focus, moreLabel, compact, }: {
     entries: BulkMoreEntry<T>[];
     selection: ServerTableSelection;
     focus: ReturnType<typeof useBulkFocus>;
     moreLabel: string;
+    /** The selection band's one phone row: the trigger is an ellipsis icon, still named. */
+    compact?: boolean;
 }): import("react").JSX.Element;