@nxgt/material 3.10.2 → 3.12.0

package/dist/icon-button-ifTpXt0A.js

@@ -0,0 +1,355 @@
+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 { o as i, t as a } from "./tooltip-CkttDIab.js";
+import { t as o } from "./is-production-GLw59WU8.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";
+//#region lib/components/ui/actions/icon-button/icon-button.compound-variants.ts
+var b = [
+	{
+		variant: "filled",
+		color: "primary",
+		class: "bg-primary text-primary-foreground [&_svg]:data-[slot=icon]:text-primary-foreground [&_svg]:stroke-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]"
+	},
+	{
+		variant: "filled",
+		color: "secondary",
+		class: "bg-secondary text-secondary-foreground [&_svg]:data-[slot=icon]:text-secondary-foreground [&_svg]:stroke-secondary-foreground hover:bg-[color-mix(in_oklab,var(--color-secondary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-secondary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-secondary)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-secondary)_50%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "success",
+		class: "bg-success text-success-foreground [&_svg]:data-[slot=icon]:text-success-foreground [&_svg]:stroke-success-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-success)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-success)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-success)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "info",
+		class: "bg-info text-info-foreground [&_svg]:data-[slot=icon]:text-info-foreground [&_svg]:stroke-info-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-info)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-info)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-info)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "warning",
+		class: "bg-warning text-warning-foreground [&_svg]:data-[slot=icon]:text-warning-foreground [&_svg]:stroke-warning-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-warning)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))]"
+	},
+	{
+		variant: "filled",
+		color: "error",
+		class: "bg-error text-error-foreground [&_svg]:data-[slot=icon]:text-error-foreground [&_svg]:stroke-error-foreground hover:bg-[color-mix(in_oklab,var(--color-error)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-error)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-error)_85%,black)]"
+	},
+	{
+		variant: "filled",
+		color: "default",
+		class: "bg-foreground text-background [&_svg]:data-[slot=icon]:text-background [&_svg]:stroke-background hover:bg-[color-mix(in_oklab,var(--color-foreground)_90%,var(--color-background))] active:bg-[color-mix(in_oklab,var(--color-foreground)_70%,var(--color-background))] focus:bg-[color-mix(in_oklab,var(--color-foreground)_80%,var(--color-background))]"
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		variant: "tonal",
+		color: "default",
+		class: `${u.default} ${d.default} ${l.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+	},
+	{
+		variant: "ghost",
+		color: "primary",
+		class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+	},
+	{
+		variant: "ghost",
+		color: "default",
+		class: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50"
+	},
+	{
+		variant: "ghost",
+		color: "secondary",
+		class: `${u.secondary} ${d.secondary} ${l.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`
+	},
+	{
+		variant: "ghost",
+		color: "info",
+		class: `${u.info} ${d.info} ${l.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`
+	},
+	{
+		variant: "ghost",
+		color: "error",
+		class: `${u.error} ${d.error} ${l.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`
+	},
+	{
+		variant: "outlined",
+		color: "secondary",
+		class: `${u.secondary} ${d.secondary} ${l.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`
+	},
+	{
+		variant: "outlined",
+		color: "info",
+		class: `${u.info} ${d.info} ${l.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`
+	},
+	{
+		variant: "outlined",
+		color: "error",
+		class: `${u.error} ${d.error} ${l.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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	},
+	{
+		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`
+	}
+], x = i("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)]",
+			shaped: "transition-all disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error aspect-square rounded-full"
+		},
+		size: {
+			legacy: "h-9 w-[calc(2.25rem*var(--ib-k,1))] [--btn-h:2.25rem] [--btn-sq:10px] [--btn-ic:1rem] has-[[data-slot=icon]]:p-1.5",
+			xs: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:24px] [--btn-sq:6px] [--btn-ic:14px]",
+			sm: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:32px] [--btn-sq:8px] [--btn-ic:16px]",
+			default: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:36px] [--btn-sq:10px] [--btn-ic:18px]",
+			lg: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:40px] [--btn-sq:12px] [--btn-ic:20px]",
+			xl: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:56px] [--btn-sq:16px] [--btn-ic:28px]"
+		},
+		width: {
+			narrow: "[--ib-k:0.78]",
+			default: "",
+			wide: "[--ib-k:1.45]"
+		},
+		variant: {
+			filled: "bg-primary text-primary-foreground [&_svg]:data-[slot=icon]:text-primary-foreground [&_svg]:stroke-primary-foreground hover:bg-[color-mix(in_oklab,var(--color-primary)_90%,black)] active:bg-[color-mix(in_oklab,var(--color-primary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-primary)_85%,black)]",
+			tonal: "bg-primary/15 [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text text-primary-text hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10",
+			ghost: "nxgt-btn-bare",
+			outlined: "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--btn-line,currentColor)_55%,transparent)] text-primary-text [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text focus:bg-primary/10 hover:bg-primary/10",
+			link: "nxgt-btn-bare text-primary-text [&_svg]:data-[slot=icon]:text-primary-text [&_svg]:stroke-primary-text underline-offset-4 hover:underline hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10 focus:underline"
+		},
+		color: c
+	},
+	defaultVariants: {
+		variant: "filled",
+		color: "primary",
+		look: "btn",
+		size: "legacy",
+		width: "default"
+	},
+	compoundVariants: [...b, {
+		look: "btn",
+		size: "legacy",
+		width: "default",
+		class: "[--btn-round:50%]"
+	}]
+});
+function S(e) {
+	return (t) => x({
+		...t,
+		look: e,
+		size: t?.size ?? "legacy",
+		color: t?.variant === "ghost" && t.color == null ? "default" : t?.color
+	});
+}
+var C = S("btn"), w = S("shaped"), T = {
+	filled: {
+		primary: "fill-primary",
+		secondary: "fill-secondary dark:fill-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))]",
+		success: "fill-success dark:fill-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))]",
+		info: "fill-info dark:fill-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))]",
+		warning: "fill-warning dark:fill-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))]",
+		error: "fill-error",
+		default: "fill-foreground"
+	},
+	tonal: {
+		primary: "fill-primary/15 group-hover/icon-button:fill-primary/10 group-active/icon-button:fill-primary/5",
+		secondary: "fill-secondary/15 group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
+		success: "fill-success/15 group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
+		info: "fill-info/15 group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
+		warning: "fill-warning/15 group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
+		error: "fill-error/15 group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
+		default: "fill-foreground/15 group-hover/icon-button:fill-foreground/10 group-active/icon-button:fill-foreground/5"
+	},
+	outlined: {
+		primary: "fill-transparent stroke-primary/50 group-hover/icon-button:fill-primary/10 group-active/icon-button:fill-primary/5",
+		secondary: "fill-transparent stroke-secondary/50 group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
+		success: "fill-transparent stroke-success/50 group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
+		info: "fill-transparent stroke-info/50 group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
+		warning: "fill-transparent stroke-warning/50 group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
+		error: "fill-transparent stroke-error/50 group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
+		default: "fill-transparent stroke-foreground/50 group-hover/icon-button:fill-foreground/10 group-active/icon-button:fill-foreground/5"
+	},
+	ghost: {
+		primary: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50",
+		secondary: "fill-transparent group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
+		success: "fill-transparent group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
+		info: "fill-transparent group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
+		warning: "fill-transparent group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
+		error: "fill-transparent group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
+		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
+	},
+	link: {
+		primary: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50",
+		secondary: "fill-transparent group-hover/icon-button:fill-secondary/10 group-active/icon-button:fill-secondary/5",
+		success: "fill-transparent group-hover/icon-button:fill-success/10 group-active/icon-button:fill-success/5",
+		info: "fill-transparent group-hover/icon-button:fill-info/10 group-active/icon-button:fill-info/5",
+		warning: "fill-transparent group-hover/icon-button:fill-warning/10 group-active/icon-button:fill-warning/5",
+		error: "fill-transparent group-hover/icon-button:fill-error/10 group-active/icon-button:fill-error/5",
+		default: "fill-transparent group-hover/icon-button:fill-accent dark:group-hover/icon-button:fill-accent/50"
+	}
+};
+function E({ shape: n, variant: r, color: i }) {
+	let a = p(n), o = _(null);
+	return t(o, a, !0), /* @__PURE__ */ v("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", {
+			ref: o,
+			d: m(a),
+			vectorEffect: "non-scaling-stroke",
+			paintOrder: "stroke",
+			className: e("stroke-transparent stroke-1 transition-[fill]", T[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]")
+		})
+	});
+}
+//#endregion
+//#region lib/components/ui/actions/icon-button/icon-button.tsx
+function D({ variant: t, color: i, size: a, width: c, className: l, asChild: u, type: d = "button", shape: p, morph: m = "pill", children: _, ...b }) {
+	let x = u ? r : "button", S = h(f), T = a ?? S, D = !!(b["aria-label"] || b["aria-labelledby"]), O = !!p && c != null && c !== "default";
+	g(() => {
+		O && !o() && console.warn("IconButton: `width` is ignored with `shape`; a shaped button is as wide as it is high.");
+	}, [O]);
+	let k = !p && m !== "none" && b["aria-pressed"] !== void 0, A = b["aria-pressed"] === !0 || b["aria-pressed"] === "true";
+	return /* @__PURE__ */ v(s, {
+		value: D,
+		children: /* @__PURE__ */ y(x, {
+			"data-slot": "icon-button",
+			"data-icon-button": "",
+			"data-variant": t ?? "filled",
+			"data-color": i,
+			type: u ? void 0 : d,
+			"data-size": T,
+			"data-shape": p,
+			"data-morph": k ? m : void 0,
+			"data-selected": k && A ? "true" : void 0,
+			className: e(p ? w({
+				variant: t,
+				color: i,
+				size: T
+			}) : C({
+				variant: t,
+				color: i,
+				size: T,
+				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),
+			...b,
+			children: [p ? /* @__PURE__ */ v(E, {
+				shape: p,
+				variant: t ?? "filled",
+				color: i ?? (t === "ghost" ? "default" : "primary")
+			}) : null, /* @__PURE__ */ v(n, { children: _ })]
+		})
+	});
+}
+function O({ tooltip: e, "aria-label": t, ...n }) {
+	let r = t ?? (typeof e == "string" ? e : void 0);
+	return e ? /* @__PURE__ */ v(a, {
+		content: e,
+		children: /* @__PURE__ */ v(D, {
+			"aria-label": r,
+			...n
+		})
+	}) : /* @__PURE__ */ v(D, {
+		"aria-label": r,
+		...n
+	});
+}
+//#endregion
+export { C as n, O as t };

package/dist/{illustration-BfHRpVzM.js → illustration-BmQmvW_4.js}

@@ -1,7 +1,7 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./is-production-GLw59WU8.js";
 import { n, r } from "./icon-sprites-FxHyqyhg.js";
-import { a as i, c as a, i as o, l as s, t as c, u as l } from "./state-scenes-SGNyZjTz.js";
+import { a as i, c as a, i as o, l as s, t as c, u as l } from "./state-scenes-BX03WmSu.js";
 import { t as u } from "./scene-svg-DJKa5vsg.js";
 import { Suspense as d, useId as f, useMemo as p } from "react";
 import { jsx as m } from "react/jsx-runtime";

package/dist/illustrations.js

@@ -1,4 +1,4 @@
-import { s as e } from "./state-scenes-SGNyZjTz.js";
-import { t } from "./illustration-BfHRpVzM.js";
+import { s as e } from "./state-scenes-BX03WmSu.js";
+import { t } from "./illustration-BmQmvW_4.js";
 import { ILLUSTRATION_SCENES as n, SUGGESTED_ICONS as r } from "@nxgt/material-core/illustrations";
 export { n as ILLUSTRATION_SCENES, t as Illustration, e as IllustrationDefaults, r as SUGGESTED_ICONS };

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

@@ -34,3 +34,19 @@ export declare const toneStroke: {
     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 default: "[&_svg]:stroke-foreground";
 };
+/**
+ * The per-`color` variables the expressive look of `Button` reads (and
+ * `IconButton` will, in the same names): `--morph-on` / `--morph-on-fg` the
+ * solid fill of a selected button and its text, `--btn-focus` the focus
+ * outline, `--btn-line` the outlined variant's line. They follow the filled
+ * variant's fills and the tone text above, dark theme included.
+ */
+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 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 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/actions/button/button.d.ts

@@ -24,6 +24,19 @@ export type ButtonProps = ComponentProps<'button'> & ButtonVariants & {
      * shorter than its `size`. Without it a long label is truncated.
      */
     wrap?: boolean;
+    /**
+     * `round` (default) rests as a pill and squares when pressed; `square`
+     * rests with the size's corner radius and rounds when pressed. Every
+     * corner springs, and stays at least 4px. Reduced motion: no squeeze.
+     */
+    shape?: 'round' | 'square';
+    /**
+     * A toggle: sets `aria-pressed` and `data-selected`, takes the other
+     * shape and a solid fill of its colour. Leave it out for a plain
+     * button. Ignored with `asChild` (the child owns its attributes; a
+     * warning in development).
+     */
+    selected?: boolean;
 } & {
     tooltip?: string;
 };

package/dist/lib/components/ui/actions/button/button.variants.d.ts

@@ -2,11 +2,12 @@ import { VariantProps } from 'class-variance-authority';
 declare const buttonVariantsByColor: (props?: ({
     variant?: "tonal" | "filled" | "link" | "ghost" | "outlined" | null | undefined;
     color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
-    size?: "default" | "sm" | "icon" | "xs" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "lg" | "sm" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "xs" | "xl" | "2xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
- * On a ghost one, `color: null` reads as the default colour, so it keeps
- * its neutral hover (cva matches no compound variant on `null`).
+ * On a ghost one, no `color` (or `null`) is the neutral look: the default
+ * colour's, a hover tint of the page. A ghost button tinted by a colour is one
+ * given its `color` (cva matches no compound variant on `null`).
  */
 export declare const buttonVariants: typeof buttonVariantsByColor;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;

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

@@ -0,0 +1,16 @@
+import { ButtonVariants } from '../button/button.variants.js';
+import { IconButtonSize } from '../icon-button/icon-button.variants.js';
+/**
+ * The sizes a group can share: the ladder `Button` and `IconButton` have in
+ * common (`xs`, `sm`, `default`, `lg`, `xl`), taken from both types so a size
+ * added to one and not the other drops out of it instead of drifting.
+ */
+export type ButtonGroupSize = Extract<NonNullable<ButtonVariants['size']>, IconButtonSize>;
+/**
+ * The `size` of the enclosing `ButtonGroup`, read by `Button` and
+ * `IconButton` when they get no `size` of their own (an explicit one wins).
+ * `undefined` outside a group, or in one without a `size`.
+ *
+ * Internal: not exported from the barrel.
+ */
+export declare const ButtonGroupContext: import('react').Context<ButtonGroupSize | undefined>;

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

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+/**
+ * Puts the shared `ButtonGroup` size back to "none" for what it wraps. React
+ * context crosses a portal, so an overlay opened from a button inside a
+ * `ButtonGroup size="xs"` would give its own buttons that size; the overlay
+ * contents (Dialog, Sheet, Drawer, Popover, AlertDialog) wrap themselves in
+ * this.
+ *
+ * Internal: not exported from the barrel.
+ */
+export declare function ButtonGroupReset({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

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

@@ -1,3 +1,20 @@
 import { ComponentProps } from 'react';
-export type ButtonGroupProps = {} & ComponentProps<'div'>;
-export declare function ButtonGroup({ children, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+import { ButtonGroupSize } from './button-group-context.js';
+export type { ButtonGroupSize } from './button-group-context.js';
+export type ButtonGroupProps = {
+    /**
+     * `standard`: the Material 3 Expressive action group. The buttons keep
+     * their own look, 8px apart, and a pressed one widens by 14px on each side
+     * (less at `xs`, `sm` and `default`) while its neighbours give the width back, so the
+     * group never changes width. Reduced motion: no exchange. Unset: the
+     * original group (a bare `<div>` that tints and rounds its buttons). `standard` becomes
+     * the default in the next major, with `look="legacy"` to keep the original.
+     */
+    look?: 'standard';
+    /**
+     * The `size` every `Button` and `IconButton` in the group takes; one with
+     * a `size` of its own keeps it. Works with either look.
+     */
+    size?: ButtonGroupSize;
+} & ComponentProps<'div'>;
+export declare function ButtonGroup({ children, className, look, size, ...props }: ButtonGroupProps): import("react").JSX.Element;

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

@@ -5,11 +5,12 @@ export type IconButtonColor = keyof (typeof SURFACE)['filled'];
 /**
  * What a shaped `IconButton` adds to its classes: its own background,
  * border and box-shadow (the focus ring) give way to the surface below,
- * so nothing is clipped and the ring follows the shape. In forced colours
+ * so nothing is clipped and the ring follows the shape; `nxgt-touch-target`
+ * gives it the 44px hit area of a coarse pointer. In forced colours
  * the icon takes `ButtonText`: a filled variant's light stroke would
  * vanish on the forced background.
  */
-export declare const SHAPED_BUTTON = "group/icon-button 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]";
+export declare const SHAPED_BUTTON = "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]";
 /**
  * The surface of a shaped `IconButton`: one SVG path behind the icon,
  * filled in the variant's colour, lighter or darker on hover and press,

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

@@ -1,17 +1,31 @@
 import { ShapeName } from '@nxgt/material-core/shapes';
-import { VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
-import { variants } from './icon-button.variants.js';
+import { IconButtonVariants, variants } from './icon-button.variants.js';
 export { variants } from './icon-button.variants.js';
 export type IconButtonProps = {
     asChild?: boolean;
-} & ComponentProps<'button'> & VariantProps<typeof variants> & {
+} & ComponentProps<'button'> & Omit<IconButtonVariants, 'size' | 'width'> & {
+    /**
+     * `xs` 24px, `sm` 32px, `default` 36px, `lg` 40px or `xl` 56px, with an
+     * icon of 14, 16, 18, 20 or 28px (a glyph without its own `size-*` class;
+     * an `Icon` is 16px unless sized). Unset: the 36px button with a 16px
+     * icon it always was, so an explicit `default` has an 18px icon and unset
+     * a 16px one (a `size-*` class still resizes it).
+     */
+    size?: IconButtonVariants['size'];
+    /**
+     * The width as a factor of the height: `narrow` 0.78, `default` 1,
+     * `wide` 1.45; always a pill. Ignored with `shape` (a warning in
+     * development).
+     */
+    width?: IconButtonVariants['width'];
     tooltip?: ReactNode;
     /**
      * Draws the button as one of the expressive shapes (`cookie-9`,
      * `sunny`, `squircle`…) instead of a circle. The shape carries the
      * variant's colours and the focus ring, and morphs when it changes
-     * (a selected state). Unset: the round button, unchanged.
+     * (a selected state). Unset: the round button, unchanged. A shaped
+     * button ignores `width` (a warning in development).
      */
     shape?: ShapeName;
     /**

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

@@ -1,11 +1,41 @@
+import { VariantProps } from 'class-variance-authority';
+/**
+ * The classes of each `size`, written out whole so Tailwind finds them. A
+ * ladder of variables, read by `button.css` (the shared look) and
+ * `icon-button.css`: `--btn-h` the height (and so the round radius,
+ * `--btn-h / 2`), `--ib-k` the width as a factor of it (`width`), `--btn-ic`
+ * the icon, `--btn-sq` the square radius. `legacy` is a button without a
+ * `size`: the 36px, 16px-icon button it always was, in rem like `size-9`.
+ * `scripts/button-radius.spec.ts` reads the heights and radii back from here.
+ */
+export declare const iconButtonSizeClasses: {
+    readonly legacy: "h-9 w-[calc(2.25rem*var(--ib-k,1))] [--btn-h:2.25rem] [--btn-sq:10px] [--btn-ic:1rem] has-[[data-slot=icon]]:p-1.5";
+    readonly xs: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:24px] [--btn-sq:6px] [--btn-ic:14px]";
+    readonly sm: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:32px] [--btn-sq:8px] [--btn-ic:16px]";
+    readonly default: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:36px] [--btn-sq:10px] [--btn-ic:18px]";
+    readonly lg: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:40px] [--btn-sq:12px] [--btn-ic:20px]";
+    readonly xl: "h-(--btn-h) w-[calc(var(--btn-h)*var(--ib-k,1))] [--btn-h:56px] [--btn-sq:16px] [--btn-ic:28px]";
+};
+export type IconButtonSize = Exclude<keyof typeof iconButtonSizeClasses, 'legacy'>;
+export type IconButtonWidth = 'narrow' | 'default' | 'wide';
 declare const variantsByColor: (props?: ({
+    look?: "btn" | "shaped" | null | undefined;
+    size?: "lg" | "sm" | "default" | "xs" | "xl" | "legacy" | null | undefined;
+    width?: "default" | "narrow" | "wide" | null | undefined;
     variant?: "tonal" | "filled" | "link" | "ghost" | "outlined" | null | undefined;
     color?: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = Parameters<typeof variantsByColor>[0];
+/** What `iconButtonVariants` takes: `size` is optional and has no `legacy`. */
+export type IconButtonVariantProps = Omit<NonNullable<Props>, 'look' | 'size'> & {
+    size?: IconButtonSize | null;
+};
 /**
- * `IconButton`'s variant × color classes. On a ghost one, `color: null`
- * reads as the default colour, so it keeps its neutral hover (cva matches
- * no compound variant on `null`).
+ * `IconButton`'s variant x color x size x width classes. On a ghost one,
+ * `color: null` reads as the default colour, so it keeps its neutral hover.
  */
-export declare const variants: typeof variantsByColor;
+export declare const variants: (props?: IconButtonVariantProps) => string;
+/** The same classes for a button drawn as a shape (`shape`): it keeps its own ring and surface. */
+export declare const shapedVariants: (props?: IconButtonVariantProps) => string;
+export type IconButtonVariants = VariantProps<typeof variants>;
 export {};

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

@@ -1,9 +1,14 @@
 import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
+import { Tone } from '../../tones.js';
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "success" | "info" | "warning" | "error" | "default" | "outlined" | null | undefined;
+    variant?: "secondary" | "success" | "info" | "warning" | "error" | "default" | "outlined" | "soft" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-declare function Badge({ className, variant, asChild, ...props }: ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+/** 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, asChild, ...props }: ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
+    /** The colour of a `soft` or `outlined` badge (neutral without one). */
+    tone?: BadgeTone;
 }): import("react").JSX.Element;
 export { Badge, badgeVariants };

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

@@ -1,5 +1,7 @@
 import { IconButtonProps } from '../../actions/icon-button/icon-button.js';
 import { ResponsiveButtonProps } from '../../actions/responsive-button/responsive-button.js';
+import { EntityStat } from './entity-stats.js';
+export type { EntityStat } from './entity-stats.js';
 export type EntityHeaderProps = {
     icon?: React.ReactNode;
     /**
@@ -13,6 +15,12 @@ export type EntityHeaderProps = {
         label: string;
         value: React.ReactNode;
     }[];
+    /**
+     * Figures (counts, a mean) shown as compact tiles in a wrapping row under
+     * the metadata; facts (dates, names) stay in `metadata`. A `tone` paints
+     * the tile; `0` is a figure, an empty value drops the tile.
+     */
+    stats?: EntityStat[];
     actions?: ResponsiveButtonProps[] | React.ReactNode;
 } & Pick<IconButtonProps, 'variant' | 'color'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>;
-export declare function EntityHeader({ color, variant, icon, title, status, metadata, actions, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;
+export declare function EntityHeader({ color, variant, icon, title, status, metadata, stats, actions, className, children, ...props }: EntityHeaderProps): import("react").JSX.Element;