@nxgt/material 3.10.1 → 3.11.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-Hj-Q9se9.js → illustration-BmQmvW_4.js}

@@ -1,25 +1,25 @@
 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 { c as i, i as a, l as o, s, t as c } from "./state-scenes-Be9w_3an.js";
-import { t as l } from "./scene-svg-DJKa5vsg.js";
-import { Suspense as u, lazy as d, useId as f, useMemo as p } from "react";
+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";
 import { IconRefError as h } from "@nxgt/material-core/icons";
 import { freeIcon as g } from "@nxgt/material-core/icons/free";
 import { ILLUSTRATION_SCENES as _, buildIllustration as v, illustrationScene as y } from "@nxgt/material-core/illustrations";
 //#region lib/illustrations/use-illustration.ts
-function b(e, t, a) {
-	let c = o(), l = a ?? (C(e) ? void 0 : i(c, e)), u = r(), d = n(), m = `ill${f().replace(/[^\w-]/g, "-")}`;
+function b(e, t, i) {
+	let o = l(), c = i ?? (C(e) ? void 0 : s(o, e)), u = r(), d = n(), m = `ill${f().replace(/[^\w-]/g, "-")}`;
 	return {
 		built: p(() => {
 			let n = Object.fromEntries(Object.entries(t).filter(([, e]) => e !== void 0));
 			try {
 				let t = y(e, {
-					...c?.iconStyle === void 0 ? {} : { iconStyle: c.iconStyle },
-					...s(c, e),
+					...o?.iconStyle === void 0 ? {} : { iconStyle: o.iconStyle },
+					...a(o, e),
 					...n
-				}, l);
+				}, c);
 				return {
 					spec: t,
 					flat: v(t, {
@@ -34,11 +34,11 @@ function b(e, t, a) {
 			}
 		}, [
 			e,
-			l,
+			c,
 			JSON.stringify([
 				t,
-				s(c, e),
-				c?.iconStyle
+				a(o, e),
+				o?.iconStyle
 			]),
 			m,
 			u,
@@ -53,18 +53,26 @@ var x = /* @__PURE__ */ new Set();
 function S(e) {
 	t() || x.has(e) || (x.add(e), console.warn(e));
 }
-var C = (e) => _.includes(e), w = /* @__PURE__ */ e({ Illustration: () => E }), T = d(() => import("./plated-illustration-B7fcgOED.js"));
-function E({ scene: e, scenes: t, size: n = "md", title: r, animated: i, hero: o, satellites: s, iconStyle: d, tone: f, duotone: p, className: h, ...g }) {
-	let { built: _, idPrefix: v, base: y, edition: x } = b(e, {
-		hero: o,
-		satellites: s,
-		iconStyle: d,
-		tone: f,
-		duotone: p
+var C = (e) => _.includes(e), w = /* @__PURE__ */ e({ Illustration: () => D });
+function T({ kind: e }) {
+	return /* @__PURE__ */ m(i, {
+		kind: e,
+		"data-fallback": "",
+		className: "h-full w-full"
+	});
+}
+var E = o("plated-illustration", async () => (await import("./plated-illustration-iNO6KYTL.js")).default, T);
+function D({ scene: e, scenes: t, size: n = "md", title: r, animated: i, hero: a, satellites: o, iconStyle: s, tone: l, duotone: f, className: p, ...h }) {
+	let g = c[e] ?? "empty", { built: _, idPrefix: v, base: y, edition: x } = b(e, {
+		hero: a,
+		satellites: o,
+		iconStyle: s,
+		tone: l,
+		duotone: f
 	}, t);
 	return /* @__PURE__ */ m("div", {
 		"data-slot": "illustration",
-		...g,
+		...h,
 		...r ? {
 			role: "img",
 			"aria-label": r
@@ -72,20 +80,18 @@ function E({ scene: e, scenes: t, size: n = "md", title: r, animated: i, hero: o
 		"data-scene": e,
 		"data-size": n,
 		"data-animated": i ? "" : void 0,
-		className: h,
-		children: _ ? /* @__PURE__ */ m(u, {
-			fallback: /* @__PURE__ */ m(l, { node: _.flat }),
-			children: /* @__PURE__ */ m(T, {
+		className: p,
+		children: _ ? /* @__PURE__ */ m(d, {
+			fallback: /* @__PURE__ */ m(u, { node: _.flat }),
+			children: /* @__PURE__ */ m(E, {
 				spec: _.spec,
 				idPrefix: v,
 				base: y,
-				edition: x
+				edition: x,
+				kind: g
 			})
-		}) : /* @__PURE__ */ m(a, {
-			kind: c[e] ?? "empty",
-			className: "h-full w-full"
-		})
+		}) : /* @__PURE__ */ m(T, { kind: g })
 	});
 }
 //#endregion
-export { w as n, E as t };
+export { w as n, D as t };

package/dist/illustrations.js

@@ -1,4 +1,4 @@
-import { o as e } from "./state-scenes-Be9w_3an.js";
-import { t } from "./illustration-Hj-Q9se9.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;
     /**