@nxgt/material 3.76.0 → 3.77.0

package/dist/{percent-field-lahyDJDG.js → percent-field--WIXV5dX.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./currency-field-BJ9rSrif.js";
+import { r as e } from "./currency-field-DWHB5oms.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/fields/percent-field/percent-field.tsx
 function n({ min: n = 0, max: r = 100, step: i = 1, ...a }) {

package/dist/{tabs-DzEqMb1W.js → tabs-BT9pSRwk.js}

@@ -6,20 +6,20 @@ import { i as c, n as l, r as u, t as d } from "./dist-DOK3zo5C.js";
 import { t as f } from "./use-material-translation-CD6QoVal.js";
 import * as p from "react";
 import { createContext as m, useCallback as h, useContext as g, useEffect as ee, useLayoutEffect as _, useRef as v, useState as te } from "react";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { ChevronLeft as ne, ChevronRight as re } from "lucide-react";
+import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { ChevronLeft as re, ChevronRight as ie } from "lucide-react";
 //#region ../../node_modules/@radix-ui/react-tabs/dist/index.mjs
-var S = Object.defineProperty, C = (e, t) => S(e, "name", {
+var ae = Object.defineProperty, x = (e, t) => ae(e, "name", {
 	value: t,
 	configurable: !0
-}), w = "Tabs", [ie, ae] = a(w, [u]), T = u(), [oe, E] = ie(w), D = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ C(function(e, t) {
+}), S = "Tabs", [oe, se] = a(S, [u]), C = u(), [ce, w] = oe(S), le = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ x(function(e, t) {
 	let { __scopeTabs: r, value: a, onValueChange: o, defaultValue: l, orientation: u = "horizontal", dir: d, activationMode: f = "automatic", ...p } = e, m = c(d), [h, g] = i({
 		prop: a,
 		onChange: o,
 		defaultProp: l ?? "",
-		caller: w
+		caller: S
 	});
-	return /* @__PURE__ */ b(oe, {
+	return /* @__PURE__ */ y(ce, {
 		scope: r,
 		baseId: s(),
 		value: h,
@@ -27,36 +27,36 @@ var S = Object.defineProperty, C = (e, t) => S(e, "name", {
 		orientation: u,
 		dir: m,
 		activationMode: f,
-		children: /* @__PURE__ */ b(n.div, {
+		children: /* @__PURE__ */ y(n.div, {
 			dir: m,
 			"data-orientation": u,
 			...p,
 			ref: t
 		})
 	});
-}, "Tabs")), O = "TabsList", k = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeTabs: r, loop: i = !0, ...a } = e, o = E(O, r);
-	return /* @__PURE__ */ b(l, {
+}, "Tabs")), ue = "TabsList", T = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ x(function(e, t) {
+	let { __scopeTabs: r, loop: i = !0, ...a } = e, o = w(ue, r);
+	return /* @__PURE__ */ y(l, {
 		asChild: !0,
-		...T(r),
+		...C(r),
 		orientation: o.orientation,
 		dir: o.dir,
 		loop: i,
-		children: /* @__PURE__ */ b(n.div, {
+		children: /* @__PURE__ */ y(n.div, {
 			role: "tablist",
 			"aria-orientation": o.orientation,
 			...a,
 			ref: t
 		})
 	});
-}, "TabsList")), se = "TabsTrigger", ce = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeTabs: i, value: a, disabled: o = !1, ...s } = e, c = E(se, i), l = T(i), u = A(c.baseId, a), f = j(c.baseId, a), p = a === c.value;
-	return /* @__PURE__ */ b(d, {
+}, "TabsList")), E = "TabsTrigger", D = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ x(function(e, t) {
+	let { __scopeTabs: i, value: a, disabled: o = !1, ...s } = e, c = w(E, i), l = C(i), u = k(c.baseId, a), f = A(c.baseId, a), p = a === c.value;
+	return /* @__PURE__ */ y(d, {
 		asChild: !0,
 		...l,
 		focusable: !o,
 		active: p,
-		children: /* @__PURE__ */ b(n.button, {
+		children: /* @__PURE__ */ y(n.button, {
 			type: "button",
 			role: "tab",
 			"aria-selected": p,
@@ -79,14 +79,14 @@ var S = Object.defineProperty, C = (e, t) => S(e, "name", {
 			})
 		})
 	});
-}, "TabsTrigger")), le = "TabsContent", ue = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeTabs: r, value: i, forceMount: a, children: s, ...c } = e, l = E(le, r), u = A(l.baseId, i), d = j(l.baseId, i), f = i === l.value, m = p.useRef(f);
+}, "TabsTrigger")), O = "TabsContent", de = /* @__PURE__ */ p.forwardRef(/* @__PURE__ */ x(function(e, t) {
+	let { __scopeTabs: r, value: i, forceMount: a, children: s, ...c } = e, l = w(O, r), u = k(l.baseId, i), d = A(l.baseId, i), f = i === l.value, m = p.useRef(f);
 	return p.useEffect(() => {
 		let e = requestAnimationFrame(() => m.current = !1);
 		return () => cancelAnimationFrame(e);
-	}, []), /* @__PURE__ */ b(o, {
+	}, []), /* @__PURE__ */ y(o, {
 		present: a || f,
-		children: ({ present: r }) => /* @__PURE__ */ b(n.div, {
+		children: ({ present: r }) => /* @__PURE__ */ y(n.div, {
 			"data-state": f ? "active" : "inactive",
 			"data-orientation": l.orientation,
 			role: "tabpanel",
@@ -104,37 +104,37 @@ var S = Object.defineProperty, C = (e, t) => S(e, "name", {
 		})
 	});
 }, "TabsContent"));
-function A(e, t) {
+function k(e, t) {
 	return `${e}-trigger-${t}`;
 }
-C(A, "makeTriggerId");
-function j(e, t) {
+x(k, "makeTriggerId");
+function A(e, t) {
 	return `${e}-content-${t}`;
 }
-C(j, "makeContentId");
-var de = D, fe = k, pe = ce, me = ue;
+x(A, "makeContentId");
+var fe = le, pe = T, me = D, he = de;
 //#endregion
 //#region lib/components/ui/primitives/tabs/tabs-classes.ts
-function M(e) {
+function j(e) {
 	return e === "segmented" || e === "line" ? "segmented" : "underline";
 }
-var N = "aria-[orientation=vertical]:flex-col", he = {
+var M = "aria-[orientation=vertical]:flex-col", ge = {
 	underline: "flex min-w-0 flex-col gap-2 items-stretch data-[orientation=vertical]:flex-row",
 	segmented: "flex min-w-0 flex-col gap-2 items-start data-[orientation=vertical]:flex-row"
-}, P = {
-	underline: `group/tabs-list relative flex gap-1 border-b border-border overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${N} aria-[orientation=vertical]:border-b-0 aria-[orientation=vertical]:border-l aria-[orientation=vertical]:overflow-x-visible aria-[orientation=vertical]:overflow-y-auto`,
-	segmented: `group/tabs-list relative inline-flex max-w-full rounded-full bg-muted p-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${N} aria-[orientation=vertical]:rounded-3xl aria-[orientation=vertical]:overflow-x-visible aria-[orientation=vertical]:overflow-y-auto`
-}, F = "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary dark:focus-visible:outline-track-fill", I = "group-data-[indicator=ready]/tabs-list:after:hidden", L = {
-	underline: `${F} h-10 px-4 rounded-t-md hover:bg-primary/5 data-[state=inactive]:hover:text-foreground data-[state=active]:text-primary-text data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-t-none data-[orientation=vertical]:rounded-r-md after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full data-[state=active]:after:bg-primary dark:data-[state=active]:after:bg-track-fill data-[orientation=vertical]:after:inset-x-auto data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:h-auto data-[orientation=vertical]:after:w-0.5 ${I}`,
-	segmented: `${F} z-10 h-8 px-4 rounded-full data-[state=inactive]:hover:text-foreground data-[state=active]:text-foreground data-[state=active]:font-semibold after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-full data-[state=active]:after:bg-background data-[state=active]:after:shadow-sm data-[state=active]:after:border data-[state=active]:after:border-muted-foreground dark:data-[state=active]:after:bg-card ${I}`
-}, R = "pointer-events-none absolute left-0 invisible group-data-[indicator=ready]/tabs-list:visible group-data-[indicator=ready]/tabs-list:motion-safe:transition-[translate,width,height] duration-300 ease-out", ge = {
-	underline: `${R} bottom-0 h-0.5 rounded-full bg-primary dark:bg-track-fill w-(--tabs-indicator-w) translate-x-(--tabs-indicator-x) group-aria-[orientation=vertical]/tabs-list:bottom-auto group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:w-0.5 group-aria-[orientation=vertical]/tabs-list:h-(--tabs-indicator-w) group-aria-[orientation=vertical]/tabs-list:translate-x-0 group-aria-[orientation=vertical]/tabs-list:translate-y-(--tabs-indicator-x)`,
-	segmented: `${R} inset-y-1 rounded-full bg-background shadow-sm border border-muted-foreground dark:bg-card w-(--tabs-indicator-w) translate-x-(--tabs-indicator-x) group-aria-[orientation=vertical]/tabs-list:inset-y-auto group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:w-auto group-aria-[orientation=vertical]/tabs-list:h-(--tabs-indicator-w) group-aria-[orientation=vertical]/tabs-list:translate-x-0 group-aria-[orientation=vertical]/tabs-list:translate-y-(--tabs-indicator-x)`
-}, _e = "inline-flex items-center gap-2", ve = "flex justify-center", ye = "w-full flex-1 outline-none";
+}, N = {
+	underline: `group/tabs-list relative flex gap-1 border-b border-border overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${M} aria-[orientation=vertical]:border-b-0 aria-[orientation=vertical]:border-l aria-[orientation=vertical]:overflow-x-visible aria-[orientation=vertical]:overflow-y-auto`,
+	segmented: `group/tabs-list relative inline-flex max-w-full rounded-full bg-muted p-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden ${M} aria-[orientation=vertical]:rounded-3xl aria-[orientation=vertical]:overflow-x-visible aria-[orientation=vertical]:overflow-y-auto`
+}, P = "relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-sm font-medium text-muted-foreground transition-colors disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary dark:focus-visible:outline-track-fill", F = "group-data-[indicator=ready]/tabs-list:after:hidden", I = {
+	underline: `${P} h-10 px-4 rounded-t-md hover:bg-primary/5 data-[state=inactive]:hover:text-foreground data-[state=active]:text-primary-text data-[orientation=vertical]:justify-start data-[orientation=vertical]:rounded-t-none data-[orientation=vertical]:rounded-r-md after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:rounded-full data-[state=active]:after:bg-primary dark:data-[state=active]:after:bg-track-fill data-[orientation=vertical]:after:inset-x-auto data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:h-auto data-[orientation=vertical]:after:w-0.5 ${F}`,
+	segmented: `${P} z-10 h-8 px-4 rounded-full data-[state=inactive]:hover:text-foreground data-[state=active]:text-foreground data-[state=active]:font-semibold after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:rounded-full data-[state=active]:after:bg-background data-[state=active]:after:shadow-sm data-[state=active]:after:border data-[state=active]:after:border-muted-foreground dark:data-[state=active]:after:bg-card ${F}`
+}, L = "pointer-events-none absolute left-0 invisible group-data-[indicator=ready]/tabs-list:visible group-data-[indicator=ready]/tabs-list:motion-safe:transition-[translate,width,height] duration-300 ease-out", _e = {
+	underline: `${L} bottom-0 h-0.5 rounded-full bg-primary dark:bg-track-fill w-(--tabs-indicator-w) translate-x-(--tabs-indicator-x) group-aria-[orientation=vertical]/tabs-list:bottom-auto group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:w-0.5 group-aria-[orientation=vertical]/tabs-list:h-(--tabs-indicator-w) group-aria-[orientation=vertical]/tabs-list:translate-x-0 group-aria-[orientation=vertical]/tabs-list:translate-y-(--tabs-indicator-x)`,
+	segmented: `${L} inset-y-1 rounded-full bg-background shadow-sm border border-muted-foreground dark:bg-card w-(--tabs-indicator-w) translate-x-(--tabs-indicator-x) group-aria-[orientation=vertical]/tabs-list:inset-y-auto group-aria-[orientation=vertical]/tabs-list:inset-x-1 group-aria-[orientation=vertical]/tabs-list:top-0 group-aria-[orientation=vertical]/tabs-list:w-auto group-aria-[orientation=vertical]/tabs-list:h-(--tabs-indicator-w) group-aria-[orientation=vertical]/tabs-list:translate-x-0 group-aria-[orientation=vertical]/tabs-list:translate-y-(--tabs-indicator-x)`
+}, ve = "inline-flex items-center gap-2", R = "flex justify-center", ye = "w-full flex-1 outline-none";
 //#endregion
 //#region lib/components/ui/primitives/tabs/partials/tabs-content.tsx
 function be({ className: t, ...n }) {
-	return /* @__PURE__ */ b(me, {
+	return /* @__PURE__ */ y(he, {
 		"data-slot": "tabs-content",
 		className: e(ye, t),
 		...n
@@ -147,8 +147,33 @@ function H() {
 	return g(V);
 }
 //#endregion
+//#region lib/components/ui/primitives/tabs/tabs-manual-scroll.ts
+var U = "tabs-manual-scroll";
+function we(e) {
+	e.dispatchEvent(new Event(U));
+}
+function Te(e, t) {
+	let n = 0, r = 0, i = "", a = () => `${e.clientWidth}/${e.scrollWidth}`, o = { follow: !0 }, s = () => {
+		o.follow = !1;
+	}, c = (e) => {
+		Math.abs(e.deltaX) > Math.abs(e.deltaY) && s();
+	}, l = () => {
+		a() === i && (e.scrollLeft < n - 1 || e.scrollLeft > r + 1) && s();
+	};
+	return i = a(), e.addEventListener("wheel", c, { passive: !0 }), e.addEventListener("scroll", l, { passive: !0 }), e.addEventListener(U, s), {
+		state: o,
+		reveal(o, s) {
+			let c = e.scrollLeft, l = t(e, o, s);
+			n = Math.min(c, c + l), r = Math.max(c, c + l), i = a();
+		},
+		dispose() {
+			e.removeEventListener("wheel", c), e.removeEventListener("scroll", l), e.removeEventListener(U, s);
+		}
+	};
+}
+//#endregion
 //#region lib/components/ui/primitives/tabs/tabs-selectors.ts
-var U = "[role=\"tab\"], [data-slot=\"tabs-trigger\"]", W = "[role=\"tab\"][data-state=\"active\"], [data-slot=\"tabs-trigger\"][data-state=\"active\"]", G = 64, K = {
+var W = "[role=\"tab\"], [data-slot=\"tabs-trigger\"]", G = "[role=\"tab\"][data-state=\"active\"], [data-slot=\"tabs-trigger\"][data-state=\"active\"]", K = 64, q = {
 	left: !1,
 	right: !1,
 	top: 0,
@@ -156,13 +181,13 @@ var U = "[role=\"tab\"], [data-slot=\"tabs-trigger\"]", W = "[role=\"tab\"][data
 	width: 0,
 	height: 0
 };
-function q() {
+function J() {
 	return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth";
 }
-function J(e) {
-	if (e.getAttribute("aria-orientation") === "vertical") return K;
+function Y(e) {
+	if (e.getAttribute("aria-orientation") === "vertical") return q;
 	let t = e.scrollWidth - e.clientWidth;
-	if (t <= 1) return K;
+	if (t <= 1) return q;
 	let n = Math.abs(e.scrollLeft), r = n > 1, i = t - n > 1, a = getComputedStyle(e).direction === "rtl";
 	return {
 		left: a ? i : r,
@@ -173,64 +198,69 @@ function J(e) {
 		height: e.offsetHeight
 	};
 }
-var Y = (e, t) => e.left === t.left && e.right === t.right && e.top === t.top && e.x === t.x && e.width === t.width && e.height === t.height;
-function X(e, t, n = q()) {
-	if (e.scrollWidth <= e.clientWidth) return;
+var X = (e, t) => e.left === t.left && e.right === t.right && e.top === t.top && e.x === t.x && e.width === t.width && e.height === t.height;
+function Ee(e, t, n = J()) {
+	if (e.scrollWidth <= e.clientWidth) return 0;
 	let r = e.getBoundingClientRect(), i = t.getBoundingClientRect(), a = 0;
-	i.left < r.left + G ? a = i.left - r.left - G : i.right > r.right - G && (a = i.right - r.right + G), a && e.scrollBy({
+	return i.left < r.left + K ? a = i.left - r.left - K : i.right > r.right - K && (a = i.right - r.right + K), a && e.scrollBy({
 		left: a,
 		behavior: n
-	});
+	}), a;
 }
 function Z(e, t = {
-	tab: U,
-	active: W
+	tab: W,
+	active: G
 }) {
-	let [n, r] = te(K);
+	let [n, r] = te(q);
 	return _(() => {
 		let n = e.current;
 		if (!n) return;
 		let i = 0, a = () => {
 			cancelAnimationFrame(i), i = requestAnimationFrame(() => {
-				let e = J(n);
-				r((t) => Y(t, e) ? t : e);
+				let e = Y(n);
+				r((t) => X(t, e) ? t : e);
 			});
-		}, o = () => n.querySelector(t.active), s = new ResizeObserver(a), c = () => {
-			s.disconnect(), s.observe(n);
-			for (let e of n.querySelectorAll(t.tab)) s.observe(e);
-		}, l = new MutationObserver((e) => {
-			if (c(), a(), e.some((e) => e.type === "attributes")) {
+		}, o = () => n.querySelector(t.active), s = Te(n, Ee), { state: c, reveal: l } = s, u = new ResizeObserver(() => {
+			a();
+			let e = c.follow ? o() : null;
+			e && l(e, "instant");
+		}), d = () => {
+			u.disconnect(), u.observe(n);
+			for (let e of n.querySelectorAll(t.tab)) u.observe(e);
+		}, f = new MutationObserver((e) => {
+			if (d(), a(), e.some((e) => e.type === "attributes")) {
+				c.follow = !0;
 				let e = o();
-				e && X(n, e);
+				e && l(e);
 			}
 		});
-		l.observe(n, {
+		f.observe(n, {
 			subtree: !0,
 			childList: !0,
 			attributeFilter: ["data-state"]
 		});
-		let u = (e) => {
-			e.target instanceof HTMLElement && e.target.matches(t.tab) && X(n, e.target);
+		let p = (e) => {
+			e.target instanceof HTMLElement && e.target.matches(t.tab) && (c.follow = e.target.matches(t.active), l(e.target));
 		};
-		n.addEventListener("focusin", u), c();
-		let d = o();
-		return d && X(n, d, "instant"), r(J(n)), () => {
-			cancelAnimationFrame(i), s.disconnect(), l.disconnect(), n.removeEventListener("focusin", u);
+		n.addEventListener("focusin", p), d();
+		let m = o();
+		return m && l(m, "instant"), r(Y(n)), () => {
+			cancelAnimationFrame(i), u.disconnect(), f.disconnect(), n.removeEventListener("focusin", p), s.dispose();
 		};
 	}, [
 		e,
 		t.tab,
 		t.active
-	]), we(e, n.left || n.right, r), n;
+	]), De(e, n.left || n.right, r), n;
 }
-function we(e, t, n) {
+function De(e, t, n) {
 	ee(() => {
 		let r = e.current;
 		if (!r || !t) return;
 		let i = 0, a = () => {
 			cancelAnimationFrame(i), i = requestAnimationFrame(() => {
-				let e = J(r);
-				n((t) => Y(t, e) ? t : e);
+				let e = Y(r);
+				n((t) => X(t, e) ? t : e);
 			});
 		};
 		return document.addEventListener("scroll", a, {
@@ -254,14 +284,14 @@ function Q({ look: t }) {
 		if (!e || !t) return;
 		let r = 0, i = () => {
 			cancelAnimationFrame(r), r = requestAnimationFrame(() => {
-				let n = t.querySelector(W);
+				let n = t.querySelector(G);
 				if (!n) return;
 				let r = t.getAttribute("aria-orientation") === "vertical", i = r ? n.offsetHeight : n.offsetWidth, a = r ? n.offsetTop : n.offsetLeft;
 				e.style.setProperty("--tabs-indicator-w", `${i}px`), e.style.setProperty("--tabs-indicator-x", `${a}px`), t.dataset.indicator !== "ready" && (e.offsetWidth, t.dataset.indicator = "ready");
 			});
 		}, a = new ResizeObserver(i), o = () => {
 			a.disconnect(), a.observe(t);
-			for (let e of t.querySelectorAll(U)) a.observe(e);
+			for (let e of t.querySelectorAll(W)) a.observe(e);
 		}, s = new MutationObserver(() => {
 			o(), i();
 		});
@@ -274,11 +304,11 @@ function Q({ look: t }) {
 		return c && s.observe(c, { attributeFilter: ["dir"] }), o(), i(), () => {
 			cancelAnimationFrame(r), a.disconnect(), s.disconnect();
 		};
-	}, []), /* @__PURE__ */ b("span", {
+	}, []), /* @__PURE__ */ y("span", {
 		ref: n,
 		"aria-hidden": !0,
 		"data-slot": "tabs-indicator",
-		className: e(ge[t])
+		className: e(_e[t])
 	});
 }
 //#endregion
@@ -289,17 +319,18 @@ function $({ list: e, overflow: t }) {
 	let r = (t) => {
 		let n = e.current;
 		if (!n) return;
+		we(n);
 		let r = Math.max(96, n.clientWidth * .75);
 		n.scrollBy({
 			left: t * r,
-			behavior: q()
+			behavior: J()
 		});
 	}, i = {
 		type: "button",
 		tabIndex: -1,
 		onMouseDown: (e) => e.preventDefault()
 	};
-	return /* @__PURE__ */ x("div", {
+	return /* @__PURE__ */ b("div", {
 		"data-slot": "tabs-scroll",
 		className: xe,
 		style: {
@@ -308,28 +339,28 @@ function $({ list: e, overflow: t }) {
 			width: t.width,
 			height: t.height
 		},
-		children: [t.left && /* @__PURE__ */ b("button", {
+		children: [t.left && /* @__PURE__ */ y("button", {
 			...i,
 			"data-slot": "tabs-scroll-left",
 			"aria-label": n("material.tabs.scroll-left", "Scroll tabs left"),
 			className: Se,
 			onClick: () => r(-1),
-			children: /* @__PURE__ */ b(ne, { "aria-hidden": !0 })
-		}), t.right && /* @__PURE__ */ b("button", {
+			children: /* @__PURE__ */ y(re, { "aria-hidden": !0 })
+		}), t.right && /* @__PURE__ */ y("button", {
 			...i,
 			"data-slot": "tabs-scroll-right",
 			"aria-label": n("material.tabs.scroll-right", "Scroll tabs right"),
 			className: Ce,
 			onClick: () => r(1),
-			children: /* @__PURE__ */ b(re, { "aria-hidden": !0 })
+			children: /* @__PURE__ */ y(ie, { "aria-hidden": !0 })
 		})]
 	});
 }
 //#endregion
 //#region lib/components/ui/primitives/tabs/partials/tabs-list.tsx
-function Te({ className: n, children: r, ref: i, ...a }) {
+function Oe({ className: n, children: r, ref: i, ...a }) {
 	let o = H(), s = v(null), c = Z(s);
-	return /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ x(fe, {
+	return /* @__PURE__ */ b(ne, { children: [/* @__PURE__ */ b(pe, {
 		ref: h((e) => {
 			s.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
 		}, [i]),
@@ -337,28 +368,28 @@ function Te({ className: n, children: r, ref: i, ...a }) {
 		"data-pw": "tabs-list",
 		"data-overflow-left": c.left ? "" : void 0,
 		"data-overflow-right": c.right ? "" : void 0,
-		className: e(P[o], z, n),
+		className: e(N[o], z, n),
 		...a,
-		children: [/* @__PURE__ */ b(t, { children: r }), /* @__PURE__ */ b(Q, { look: o })]
-	}), /* @__PURE__ */ b($, {
+		children: [/* @__PURE__ */ y(t, { children: r }), /* @__PURE__ */ y(Q, { look: o })]
+	}), /* @__PURE__ */ y($, {
 		list: s,
 		overflow: c
 	})] });
 }
 //#endregion
 //#region lib/components/ui/primitives/tabs/partials/tabs-trigger.tsx
-function Ee({ className: n, children: r, icon: i, ...a }) {
-	return /* @__PURE__ */ x(pe, {
+function ke({ className: n, children: r, icon: i, ...a }) {
+	return /* @__PURE__ */ b(me, {
 		"data-slot": "tabs-trigger",
-		className: e(L[H()], n),
+		className: e(I[H()], n),
 		...a,
-		children: [i && /* @__PURE__ */ b("span", {
+		children: [i && /* @__PURE__ */ y("span", {
 			"data-slot": "tabs-trigger-icon",
 			className: "flex justify-center",
 			children: i
-		}), /* @__PURE__ */ b(t, {
+		}), /* @__PURE__ */ y(t, {
 			child: r,
-			children: (e) => e && /* @__PURE__ */ b("span", {
+			children: (e) => e && /* @__PURE__ */ y("span", {
 				className: "inline-flex items-center gap-2",
 				children: e
 			})
@@ -367,17 +398,17 @@ function Ee({ className: n, children: r, icon: i, ...a }) {
 }
 //#endregion
 //#region lib/components/ui/primitives/tabs/tabs.tsx
-function De({ className: t, variant: n = "underline", ...r }) {
-	let i = M(n);
-	return /* @__PURE__ */ b(V.Provider, {
+function Ae({ className: t, variant: n = "underline", ...r }) {
+	let i = j(n);
+	return /* @__PURE__ */ y(V.Provider, {
 		value: i,
-		children: /* @__PURE__ */ b(de, {
+		children: /* @__PURE__ */ y(fe, {
 			"data-slot": "tabs",
 			"data-variant": n,
-			className: e(he[i], t),
+			className: e(ge[i], t),
 			...r
 		})
 	});
 }
 //#endregion
-export { Q as a, H as c, ve as d, _e as f, M as h, $ as i, z as l, L as m, Ee as n, Z as o, P as p, Te as r, V as s, De as t, be as u };
+export { Q as a, H as c, R as d, ve as f, j as h, $ as i, z as l, I as m, ke as n, Z as o, N as p, Oe as r, V as s, Ae as t, be as u };

package/dist/{use-chat-composer-DMXu9E1O.js → use-chat-composer-BOx4I6Ma.js}

@@ -14,7 +14,7 @@ import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re,
 import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
 import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-Cd7DkND4.js";
 import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
-import { n as it, r as at, t as ot, u as st } from "./tabs-DzEqMb1W.js";
+import { n as it, r as at, t as ot, u as st } from "./tabs-BT9pSRwk.js";
 import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-D310xDuM.js";
 import { t as mt } from "./dist-DkQbkF9T.js";
 import { o as ht, s as gt, t as _t } from "./use-click-lock-BZYtTmVt.js";

package/docs/components/data-display.md

@@ -554,7 +554,8 @@ and the `tag` dot still read `--chip-tone`, not the tone channel); `tag`
 a smaller tag led by a colour dot; `dashed` a muted "add" pill. 28px tall,
 24px with `size="sm"`, 44px with `size="lg"`. Selected (`active`, or `aria-pressed` on a toggle
 chip) takes a primary tint and a primary edge, and a pressed toggle with
-nothing leading draws a check. The label is truncated as one piece; the ✕
+nothing leading draws a check. An unselected neutral toggle chip keeps a
+boundary of at least 3:1 against the page and the card. The label is truncated as one piece; the ✕
 and `trailing` stay whole.
 
 A chip with `onClick` is a button; with `onDismiss` it gains a ✕ button;

package/docs/components/data-table-filter-and-lists.md

@@ -15,7 +15,7 @@ either can be used alone.
 | --- | --- | --- |
 | <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination, client-side or one server page at a time |
 | <img src="../previews/data-table-filter-lists-servertable.webp" width="96" alt=""> | [ServerTable](#servertable) | A server-mode `DataTable` driven by the URL, with the Filter in its top band (a title and a description, or neither): sort, cursor paging, the empty page with a scene, an action and removable chips, one count announced |
-| <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, a loading state while an action runs, `rowMenuColumn` to drop both in a table, and `useRowMenuFocus` to hand the focus back to a row's button after an action |
+| <img src="../previews/data-table-filter-lists-rowmenu.webp" width="96" alt=""> | [RowMenu](#rowmenu) | A row's "..." button named after its row ("Actions for Ada"), its menu aligned to the end with the destructive item last, a loading state while an action runs, `rowMenuColumn` to drop both in a table, and `useRowMenuFocus` (with `rowFocusProps` for a plain row button) to hand the focus back to a row's button after an action |
 | <img src="../previews/data-table-filter-lists-recordactionsmenu.webp" width="96" alt=""> | [RecordActionsMenu](#recordactionsmenu) | A record's archive, restore and delete menu over `RowMenu`: Archive runs at once with an Undo toast that stays until dismissed, Restore runs at once, Delete permanently asks first and keeps a refusal in its dialog; `archivePolicy="confirm"` asks before archiving, `consequence` notes what an action entails, `successAction` adds a toast action, and an `ActionRefusal` (`isActionRefusal`) carries a refusal's details and action |
 | <img src="../previews/data-table-filter-lists-listempty.webp" width="96" alt=""> | [ListEmpty](#listempty) | A list's empty page: nothing yet, with a scene and an action, or nothing matches and the way out |
 | <img src="../previews/data-table-filter-lists-pagefooter.webp" width="96" alt=""> | [PageFooter](#pagefooter) | The page footer of a feed that is not a table (cards, a news feed) under a FilterBar: the range and Previous / Next as links from the URL's cursor trail, `pageControls="icon"`; no `totalCount` for a feed with no total (no range, Previous / Next only); `hideOnSinglePage` hides it on a single page |
@@ -1312,6 +1312,18 @@ const columns = useMemo(
 searched. For a dialog, [`onCloseAutoFocus`](#focus-after-a-bulk-action) with
 `preventDefault()` is the precise hook if you want to take the focus yourself.
 
+A row whose action is a plain button (an edit pen that opens a dialog) has no
+`RowMenu`. Spread `rowFocusProps(rowId)` on it and `focusRowMenu(rowId)` finds
+it the same way; it writes the two attributes `RowMenu` writes on its trigger.
+
+```tsx
+import { IconButton, rowFocusProps } from '@nxgt/material/components';
+
+<IconButton aria-label={`Edit ${person.name}`} onClick={open} {...rowFocusProps(person.id)} />;
+// after the dialog closes
+focusRowMenu(person.id);
+```
+
 `findRowMenuTrigger(rowId, scope?)` is the lookup the hook uses: it returns the
 row's button (an `HTMLElement`) inside `scope` (default `document`), or `null`.
 Use it instead of the hook when you only need the element (to scroll it into

package/docs/components/form-fields.md

@@ -677,7 +677,8 @@ Without a form library, `QuantityField` takes `value` and `onChange` (or
 `defaultValue`). The number is the one `NumberField` has: the language's
 decimal separator, `min`, `max` and `step` (clamped on blur), and steppers
 named after the field ("Increase Dose"). Both parts stay on one line on a
-phone: the number shrinks, the unit is sized to its longest label (see Unit width below).
+phone: the unit is sized to its longest label and shrinks first, the
+number keeps 9rem (see Unit width below).
 
 | Prop | Type | Default | What it does |
 | --- | --- | --- | --- |
@@ -698,8 +699,10 @@ phone: the number shrinks, the unit is sized to its longest label (see Unit widt
   `allowCustomUnit`, a text input) named "Dose unit". The message describes
   the group, the number and the unit, and both are `aria-invalid` on an error.
 - **Unit width:** the unit part is sized to the longest label of `units`
-  (never under 7rem, never over 55% of the row, so the number keeps room at
-  360px). Beyond the cap the label is cut with an ellipsis and the full label
+  (never under 7rem, never over 55% of the row). It shrinks before the number
+  does: the number's cell keeps 9rem (two 44px steppers and a 44px input), so
+  the input stays a tap target at 375px, also in a padded side sheet. Beyond
+  the cap the label is cut with an ellipsis and the full label
   is the select's `title` (the `units` select only; a free unit typed past
   the cap scrolls in its input). No inline style is used for it.
 - **Translations:** `material.quantity-field.unit` and `.unit-named` (English

package/docs/components/navigation-and-layout.md

@@ -25,7 +25,7 @@ documentation-site shell. Everything is imported from
 | <img src="../previews/navigation-layout-toc.webp" width="96" alt=""> | [Toc](#toc) | On-this-page outline |
 | <img src="../previews/navigation-layout-stepper.webp" width="96" alt=""> | [Stepper](#stepper) | Clickable steps with progress: shaped indicators, optional steps, a phone header |
 | <img src="../previews/navigation-layout-steps.webp" width="96" alt=""> | [Steps](#steps) | Numbered editorial steps |
-| <img src="../previews/navigation-layout-hero.webp" width="96" alt=""> | [Hero](#hero) | Landing band |
+| <img src="../previews/navigation-layout-hero.webp" width="96" alt=""> | [Hero](#hero) | Landing band, or a compact greeting band, with an optional `Background` |
 | <img src="../previews/navigation-layout-doc.webp" width="96" alt=""> | [Doc](#doc) | Documentation site shell |
 | <img src="../previews/navigation-layout-background.webp" width="96" alt=""> | [Background](#background) | Gradient backdrop with colour blobs; the `/backgrounds` one takes its unset props from the nearest theme |
 | | [NavigationRail](#navigationrail) | Placeholder, no props yet |
@@ -898,6 +898,34 @@ import { Button, Hero } from '@nxgt/material/components';
 `eyebrow`, `title`, `description`, `actions` and `children` (below the
 actions) are all content slots.
 
+`background` draws a decorative `Background` (the props of the one in
+`@nxgt/material/backgrounds`: `preset`, `intensity`, `tone`, `fill`, `animated`…)
+`aria-hidden` behind the content, clipped by the band's radius.
+It replaces the built-in gradient and glows, loads on demand, and follows
+`Background` in dark mode and under reduced motion.
+Its type, `HeroBackgroundProps`, is exported from `@nxgt/material/components`.
+
+`headingLevel` (1 to 6, default 1) sets the title's heading.
+
+`aria-label` names the section.
+
+`size` is `'default'` (the landing band) or `'compact'`.
+`size="compact"` is a greeting band for a home page: `rounded-xl`, the padding
+of a Card's content, the title in `headline-lg` emphasized, a muted description,
+and the actions at the end from `lg` (wrapping below it).
+Each action is at least 44px tall, for its direct `a` and `button` children; a
+Tooltip or Link wrapping a Button is not covered.
+
+```tsx
+<Hero
+  size="compact"
+  background={{ preset: 'gradient', intensity: 'subtle', fill: 'container' }}
+  title={`Hello ${name}`}
+  description="2 items in progress"
+  actions={<><Button variant="tonal">History</Button><Button>Browse</Button></>}
+/>
+```
+
 **Storybook:** `Navigation & layout/Hero` · **Vue:** `Hero`
 
 ---

package/docs/components/selection-and-choice.md

@@ -807,7 +807,9 @@ One choice or several, shown as chips. `type="single"` (the default) is a
 radio group of `radio` chips; `type="multiple"` is a `group` of `checkbox`
 chips. A chosen chip has the chip's selected tint and its leading check, so
 colour is never the only cue (an option's `icon` gives way to the check while
-it is chosen).
+it is chosen). An unchosen chip keeps a boundary of at least 3:1 against the
+page and the card, in light and dark, so it reads as a control and not as
+plain text.
 
 The `ref` reaches the chip that holds the tab stop (the first chosen enabled
 chip, else the first), so a form library's `setFocus` works.

package/docs/guides/app-shell.md

@@ -376,8 +376,10 @@ export const invoiceRoute: RouteObject = {
   context the page fills while it renders cannot do this: the bar is written
   before the page is reached.)
 - **It is the page's `h1`**, in `--font-display` (the body face when you
-  define none), truncated with an ellipsis; when it is cut off, its full text
-  is the `title` tooltip, as for `headerTitle` (#629), and its accessible
+  define none). On a phone a long title wraps to a second line first, so a
+  record's number stays readable by touch (#2324); from `md` up, and on a
+  phone once two lines are not enough, it is cut with an ellipsis. When it is
+  cut off, its full text is the `title` tooltip, as for `headerTitle` (#629), and its accessible
   name stays the text itself. It sits after `headerTitle`, which gives it room.
 - **Typing it.** `AppShellHandle<Data>` (`{ breadcrumb?, title?, titleAfter? }`) and
   `PageTitle<Data>` are exported for a route's `handle`; `Data` types the
@@ -455,7 +457,7 @@ export const handle = {
   (`[data-slot=app-header-title-after]`), vertically centred with the title, so
   the heading's accessible name stays the plain title.
 - **On a phone it stays on screen** and shares the row with the title: the
-  title truncates first (ellipsis), the slot never shrinks.
+  title gives way first (two lines, then an ellipsis), the slot never shrinks.
 - **Nothing changes without it**: the markup of a bar with no slot is the same
   as before, and the slot is read from the matches like the title, so it is in
   the server HTML and does not flash on a route change.
@@ -484,7 +486,7 @@ A multi-tenant app keeps the current tenant visible on a desktop screen with
   adds nothing to the bar, and setting both never shows the name twice on one
   screen.
 - **The title truncates first**: with a long title, the slot and the line
-  together, the title gives way; the slot stays whole and the line keeps its cap.
+  together, the title gives way (two lines on a phone, then an ellipsis); the slot stays whole and the line keeps its cap.
 - **It needs a page title**: while the bar shows none (no `handle.title`),
   `headerTitle` is the context line and `headerContext` is ignored.