@nxgt/material-vue 0.42.0 → 0.43.1

package/dist/{HoverCardTrigger-C5AbAyHE.js → HoverCardTrigger-B7m5Zvj1.js}

@@ -1,18 +1,18 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-COoBTGpB.js";
-import { t as n } from "./Button-CWmzvv9p.js";
+import { t } from "./use-material-translation-CHacJbhU.js";
+import { t as n } from "./Button-CEvi_i4g.js";
 import { r, t as i } from "./in-dialog-Blhwwbyb.js";
 import { t as a } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, guardReactiveProps as h, isRef as g, mergeProps as _, normalizeClass as v, normalizeProps as y, onMounted as ee, onUpdated as b, openBlock as x, renderSlot as S, toDisplayString as C, unref as w, useAttrs as T, useId as E, useTemplateRef as D, vModelText as O, withCtx as k, withDirectives as A } from "vue";
 import { X as j } from "@lucide/vue";
-import { DialogClose as M, DialogContent as te, DialogDescription as ne, DialogOverlay as re, DialogPortal as ie, DialogRoot as ae, DialogTitle as oe, DialogTrigger as se, HoverCardContent as N, HoverCardPortal as P, HoverCardRoot as F, HoverCardTrigger as I, Label as L, injectDialogRootContext as R, useForwardProps as z, useForwardPropsEmits as B } from "reka-ui";
-import { defaultDocument as V, reactiveOmit as H, tryOnScopeDispose as U, unrefElement as W, useEventListener as G, useVModel as K } from "@vueuse/core";
-import { forwardEscape as ce } from "@nxgt/material-core/escape-forward";
-import { describedBy as le } from "@nxgt/material-core/described-by";
-import { layerOf as q, openerOf as ue } from "@nxgt/material-core/field-blur-layers";
+import { DialogClose as M, DialogContent as te, DialogDescription as ne, DialogOverlay as re, DialogPortal as ie, DialogRoot as ae, DialogTitle as oe, DialogTrigger as se, HoverCardContent as ce, HoverCardPortal as N, HoverCardRoot as P, HoverCardTrigger as F, Label as I, injectDialogRootContext as L, useForwardProps as R, useForwardPropsEmits as z } from "reka-ui";
+import { defaultDocument as B, reactiveOmit as V, tryOnScopeDispose as H, unrefElement as U, useEventListener as W, useVModel as G } from "@vueuse/core";
+import { forwardEscape as le, keepListEscape as ue } from "@nxgt/material-core/escape-forward";
+import { describedBy as de } from "@nxgt/material-core/described-by";
+import { layerOf as K, openerOf as fe } from "@nxgt/material-core/field-blur-layers";
 //#endregion
 //#region lib/components/ui/primitives/helper-text/helper-text.vue
-var J = /* @__PURE__ */ p({
+var q = /* @__PURE__ */ p({
 	__name: "helper-text",
 	props: {
 		error: { type: Boolean },
@@ -32,12 +32,12 @@ var J = /* @__PURE__ */ p({
 			class: v(w(e)("overflow-auto text-[10px] text-muted-foreground flex pl-0.5 truncate text-wrap", { "text-error-text": t.error }, n.class))
 		}, [S(r.$slots, "default")], 2));
 	}
-}), de = {
+}), pe = {
 	key: 0,
 	"data-slot": "label-text",
 	"data-required": "",
 	class: "inline-flex"
-}, Y = /* @__PURE__ */ p({
+}, J = /* @__PURE__ */ p({
 	__name: "Label",
 	props: {
 		for: {},
@@ -53,9 +53,9 @@ var J = /* @__PURE__ */ p({
 		withAsterisk: { type: Boolean }
 	},
 	setup(t) {
-		let n = t, r = H(n, "class", "withAsterisk");
-		return (i, a) => (x(), s(w(L), _({ "data-slot": "label" }, w(r), { class: w(e)("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", n.class) }), {
-			default: k(() => [t.withAsterisk ? (x(), l("span", de, [S(i.$slots, "default"), a[0] ||= u("svg", {
+		let n = t, r = V(n, "class", "withAsterisk");
+		return (i, a) => (x(), s(w(I), _({ "data-slot": "label" }, w(r), { class: w(e)("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", n.class) }), {
+			default: k(() => [t.withAsterisk ? (x(), l("span", pe, [S(i.$slots, "default"), a[0] ||= u("svg", {
 				"data-slot": "label-required-mark",
 				"aria-hidden": "true",
 				focusable: "false",
@@ -71,10 +71,16 @@ var J = /* @__PURE__ */ p({
 });
 //#endregion
 //#region lib/components/ui/overlays/dialog/use-escape-forward.ts
-function fe(e = D("content")) {
+function me(e) {
+	ue(e);
+}
+function Y(e) {
+	return _({ onEscapeKeyDown: me }, e);
+}
+function he(e = D("content")) {
 	return (t) => {
-		let n = W(e);
-		ce(n instanceof HTMLElement ? n : null, t);
+		let n = U(e);
+		le(n instanceof HTMLElement ? n : null, t);
 	};
 }
 //#endregion
@@ -82,22 +88,23 @@ function fe(e = D("content")) {
 function X(e) {
 	let t = e;
 	if (!t) {
-		let e = R();
+		let e = L();
 		t = () => e.modal.value && e.open.value;
 	}
 	let n = D("content");
 	return r(n, t), {
-		onEscapeKeyDown: fe(n),
-		keepToaster: pe
+		withListEscape: Y,
+		onEscapeKeyDown: he(n),
+		keepToaster: ge
 	};
 }
-function pe(e) {
+function ge(e) {
 	let t = e.target;
 	t instanceof Element && t.closest("[data-sonner-toaster]") && e.preventDefault();
 }
 //#endregion
 //#region lib/components/ui/overlays/dialog/Dialog.vue
-var me = /* @__PURE__ */ p({
+var _e = /* @__PURE__ */ p({
 	__name: "Dialog",
 	props: {
 		open: { type: Boolean },
@@ -107,7 +114,7 @@ var me = /* @__PURE__ */ p({
 	},
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
-		let n = B(e, t);
+		let n = z(e, t);
 		return (e, t) => (x(), s(w(ae), _({ "data-slot": "dialog" }, w(n)), {
 			default: k((t) => [S(e.$slots, "default", y(h(t)))]),
 			_: 3
@@ -128,13 +135,13 @@ var me = /* @__PURE__ */ p({
 		] }
 	},
 	setup(t) {
-		let n = t, r = H(n, "class");
+		let n = t, r = V(n, "class");
 		return (t, i) => (x(), s(w(re), _({ "data-slot": "dialog-overlay" }, w(r), { class: w(e)("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", n.class) }), {
 			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), he = { class: "sr-only" }, ge = /* @__PURE__ */ p({
+}), ve = { class: "sr-only" }, ye = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "DialogContent",
 	props: {
@@ -163,17 +170,17 @@ var me = /* @__PURE__ */ p({
 		"closeAutoFocus"
 	],
 	setup(n, { emit: r }) {
-		let a = n, o = r, l = B(H(a, "class"), o), d = X();
+		let a = n, o = r, l = z(V(a, "class"), o), d = X();
 		i(!0);
 		let { t: p } = t();
 		return (t, r) => (x(), s(w(ie), null, {
 			default: k(() => [f(Z), f(w(te), _({
 				ref: "content",
 				"data-slot": "dialog-content"
-			}, {
+			}, w(d).withListEscape({
 				...t.$attrs,
 				...w(l)
-			}, {
+			}), {
 				onEscapeKeyDown: w(d).onEscapeKeyDown,
 				onPointerDownOutside: w(d).keepToaster,
 				onFocusOutside: w(d).keepToaster,
@@ -185,7 +192,7 @@ var me = /* @__PURE__ */ p({
 					"data-slot": "dialog-close",
 					class: "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
 				}, {
-					default: k(() => [f(w(j)), u("span", he, C(w(p)("material.buttons.close", "Close")), 1)]),
+					default: k(() => [f(w(j)), u("span", ve, C(w(p)("material.buttons.close", "Close")), 1)]),
 					_: 1
 				})) : c("", !0)]),
 				_: 3
@@ -199,7 +206,7 @@ var me = /* @__PURE__ */ p({
 			_: 3
 		}));
 	}
-}), _e = /* @__PURE__ */ p({
+}), be = /* @__PURE__ */ p({
 	__name: "DialogDescription",
 	props: {
 		asChild: { type: Boolean },
@@ -213,13 +220,13 @@ var me = /* @__PURE__ */ p({
 		] }
 	},
 	setup(t) {
-		let n = t, r = z(H(n, "class"));
+		let n = t, r = R(V(n, "class"));
 		return (t, i) => (x(), s(w(ne), _({ "data-slot": "dialog-description" }, w(r), { class: w(e)("text-muted-foreground text-sm", n.class) }), {
 			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), ve = /* @__PURE__ */ p({
+}), xe = /* @__PURE__ */ p({
 	__name: "DialogFooter",
 	props: {
 		class: { type: [
@@ -250,7 +257,7 @@ var me = /* @__PURE__ */ p({
 			_: 1
 		})) : c("", !0)], 2));
 	}
-}), ye = /* @__PURE__ */ p({
+}), Q = /* @__PURE__ */ p({
 	__name: "DialogTitle",
 	props: {
 		asChild: { type: Boolean },
@@ -264,13 +271,13 @@ var me = /* @__PURE__ */ p({
 		] }
 	},
 	setup(t) {
-		let n = t, r = z(H(n, "class"));
+		let n = t, r = R(V(n, "class"));
 		return (t, i) => (x(), s(w(oe), _({ "data-slot": "dialog-title" }, w(r), { class: w(e)("text-lg leading-none font-semibold", n.class) }), {
 			default: k(() => [S(t.$slots, "default")]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), be = /* @__PURE__ */ p({
+}), Se = /* @__PURE__ */ p({
 	__name: "DialogTrigger",
 	props: {
 		asChild: { type: Boolean },
@@ -283,7 +290,7 @@ var me = /* @__PURE__ */ p({
 			_: 3
 		}, 16));
 	}
-}), xe = ["data-slot"], Q = /* @__PURE__ */ p({
+}), Ce = ["data-slot"], $ = /* @__PURE__ */ p({
 	__name: "Input",
 	props: {
 		defaultValue: {},
@@ -298,7 +305,7 @@ var me = /* @__PURE__ */ p({
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = t, i = K(r, "modelValue", n, {
+		let r = t, i = G(r, "modelValue", n, {
 			passive: !0,
 			defaultValue: r.defaultValue
 		});
@@ -306,9 +313,9 @@ var me = /* @__PURE__ */ p({
 			"onUpdate:modelValue": n[0] ||= (e) => g(i) ? i.value = e : null,
 			"data-slot": t.$attrs["data-slot"] ?? "input",
 			class: v(w(e)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", r.class))
-		}, null, 10, xe)), [[O, w(i)]]);
+		}, null, 10, Ce)), [[O, w(i)]]);
 	}
-}), Se = /* @__PURE__ */ p({
+}), we = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "text-field",
 	props: {
@@ -332,12 +339,12 @@ var me = /* @__PURE__ */ p({
 	},
 	emits: ["update:modelValue"],
 	setup(t, { emit: n }) {
-		let r = t, i = n, a = E(), p = () => r.id ?? a, m = T(), h = E(), g = o(() => le(m["aria-describedby"], !!r.helperText && h));
+		let r = t, i = n, a = E(), p = () => r.id ?? a, m = T(), h = E(), g = o(() => de(m["aria-describedby"], !!r.helperText && h));
 		return (n, a) => (x(), l("div", {
 			"data-slot": "text-field",
 			class: v(w(e)("grid w-full gap-1.5", r.class))
 		}, [
-			t.label ? (x(), s(Y, {
+			t.label ? (x(), s(J, {
 				key: 0,
 				"with-asterisk": t.required,
 				for: p()
@@ -350,7 +357,7 @@ var me = /* @__PURE__ */ p({
 				"*:last:size-8 *:last:absolute *:last:top-[calc(50%-16px)] *:last:right-1.5 [&_input]:pr-10 *:last:bg-muted/80 *:last:text-muted-foreground": !!n.$slots.trailing
 			})) }, [
 				S(n.$slots, "leading"),
-				f(Q, _({ id: p() }, n.$attrs, {
+				f($, _({ id: p() }, n.$attrs, {
 					name: t.name,
 					type: t.type,
 					placeholder: t.placeholder,
@@ -374,7 +381,7 @@ var me = /* @__PURE__ */ p({
 				]),
 				S(n.$slots, "trailing")
 			], 2),
-			t.helperText ? (x(), s(J, {
+			t.helperText ? (x(), s(q, {
 				key: 1,
 				id: w(h),
 				error: t.error
@@ -387,13 +394,13 @@ var me = /* @__PURE__ */ p({
 });
 //#endregion
 //#region lib/components/ui/forms/use-field-blur.ts
-function Ce(e) {
+function Te(e) {
 	return e ? e instanceof Element ? e : e instanceof CharacterData ? e.nextElementSibling : null : null;
 }
-function $(e, t = "root") {
+function Ee(e, t = "root") {
 	let n = D(t), r = !1, i = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), s, c = () => {
 		let e = n.value;
-		return Ce(e instanceof Node ? e : e?.$el);
+		return Te(e instanceof Node ? e : e?.$el);
 	};
 	function l(t) {
 		r = !1, e(t, !0);
@@ -405,23 +412,23 @@ function $(e, t = "root") {
 				r || (i = new Set(t.ownerDocument.body.childNodes), o = /* @__PURE__ */ new Set()), r = !0;
 				return;
 			}
-			r && d(t, q(n)) && l(e);
+			r && d(t, K(n)) && l(e);
 		}
 	}
 	function d(e, t) {
-		if (t === q(e)) return !0;
+		if (t === K(e)) return !0;
 		if (!t || o.has(t)) return !1;
-		let n = ue([e], {
+		let n = fe([e], {
 			before: i,
-			home: /* @__PURE__ */ new Set([q(e)]),
+			home: /* @__PURE__ */ new Set([K(e)]),
 			opened: o
 		}, t);
 		return n === "theirs" || !n && i.has(t) ? !0 : (o.add(t), !1);
 	}
 	function f(e) {
 		!r || e.relatedTarget || (clearTimeout(s), s = setTimeout(() => {
-			let t = V?.activeElement;
-			r && (!t || t === V?.body) && l(e);
+			let t = B?.activeElement;
+			r && (!t || t === B?.body) && l(e);
 		}));
 	}
 	let p = m(), h = () => {
@@ -433,11 +440,11 @@ function $(e, t = "root") {
 		capture: !0,
 		passive: !0
 	};
-	G(V, "focusin", u, g), G(V, "focusout", f, g), U(() => clearTimeout(s));
+	W(B, "focusin", u, g), W(B, "focusout", f, g), H(() => clearTimeout(s));
 }
 //#endregion
 //#region lib/components/ui/overlays/hover-card/HoverCard.vue
-var we = /* @__PURE__ */ p({
+var De = /* @__PURE__ */ p({
 	__name: "HoverCard",
 	props: {
 		defaultOpen: { type: Boolean },
@@ -448,13 +455,13 @@ var we = /* @__PURE__ */ p({
 	},
 	emits: ["update:open"],
 	setup(e, { emit: t }) {
-		let n = B(e, t);
-		return (e, t) => (x(), s(w(F), _({ "data-slot": "hover-card" }, w(n)), {
+		let n = z(e, t);
+		return (e, t) => (x(), s(w(P), _({ "data-slot": "hover-card" }, w(n)), {
 			default: k((t) => [S(e.$slots, "default", y(h(t)))]),
 			_: 3
 		}, 16));
 	}
-}), Te = /* @__PURE__ */ p({
+}), Oe = /* @__PURE__ */ p({
 	inheritAttrs: !1,
 	__name: "HoverCardContent",
 	props: {
@@ -490,9 +497,9 @@ var we = /* @__PURE__ */ p({
 		] }
 	},
 	setup(t) {
-		let n = t, r = z(H(n, "class"));
-		return i(!1), (t, i) => (x(), s(w(P), null, {
-			default: k(() => [f(w(N), _({ "data-slot": "hover-card-content" }, {
+		let n = t, r = R(V(n, "class"));
+		return i(!1), (t, i) => (x(), s(w(N), null, {
+			default: k(() => [f(w(ce), _({ "data-slot": "hover-card-content" }, {
 				...t.$attrs,
 				...w(r)
 			}, { class: w(e)("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden", n.class) }), {
@@ -502,7 +509,7 @@ var we = /* @__PURE__ */ p({
 			_: 3
 		}));
 	}
-}), Ee = /* @__PURE__ */ p({
+}), ke = /* @__PURE__ */ p({
 	__name: "HoverCardTrigger",
 	props: {
 		reference: {},
@@ -511,11 +518,11 @@ var we = /* @__PURE__ */ p({
 	},
 	setup(e) {
 		let t = e;
-		return (e, n) => (x(), s(w(I), _({ "data-slot": "hover-card-trigger" }, t), {
+		return (e, n) => (x(), s(w(F), _({ "data-slot": "hover-card-trigger" }, t), {
 			default: k(() => [S(e.$slots, "default")]),
 			_: 3
 		}, 16));
 	}
 });
 //#endregion
-export { Se as a, ye as c, ge as d, Z as f, J as g, Y as h, $ as i, ve as l, X as m, Te as n, Q as o, me as p, we as r, be as s, Ee as t, _e as u };
+export { q as _, we as a, Q as c, ye as d, Z as f, J as g, Y as h, Ee as i, xe as l, X as m, Oe as n, $ as o, _e as p, De as r, Se as s, ke as t, be as u };

package/dist/backgrounds/backgrounds.css

@@ -0,0 +1,8 @@
+/* Every background preset's CSS, opt-in: `import "@nxgt/material/backgrounds.css"`
+ * (the same file in @nxgt/material-vue). Not part of styles.css, which carries
+ * only the base, the gradient and the motion `Background` (from /components)
+ * needs. One preset alone: `@nxgt/material/backgrounds/<preset>.css`. */
+@import "./css/base.css";
+@import "./css/gradient.css";
+@import "./css/grain.css";
+@import "./css/motion.css";

package/dist/backgrounds/css/base.css

@@ -0,0 +1,169 @@
+/* Background presets, the base: the frame, the tone and intensity variables,
+ * the dark lift, the paused state and forced colours. Plain CSS keyed on
+ * `data-background`, which `Background` sets itself, after the caller's
+ * props, so a wrapper's own `data-slot` (ThreadLayout, ActivityLayout) cannot
+ * unhook it. No Tailwind classes and no inline `style`, so a strict CSP
+ * blocks nothing. Shared byte for byte by @nxgt/material and
+ * @nxgt/material-vue (scripts/shared-paths.ts).
+ *
+ * Everything sits in `@layer components`: a utility the app puts on the
+ * element (`h-96 w-full`, `overflow-hidden`) is in a later layer and wins.
+ *
+ * Tones become `--nxgt-bg-t1..t3` (the tokens a tone draws from) and the
+ * drawn colours `--nxgt-bg-c1..c3`; an app may override the latter on the
+ * element. In dark the drawn colours are lifted to a lightness floor: the dark
+ * `--primary` is as dim as the light one, which made the gradient dull. An app
+ * sets `--nxgt-bg-custom-1..3` in its own CSS for `tone="custom"`. */
+@layer components {
+	[data-background] {
+		--nxgt-bg-floor: 0.64;
+		--nxgt-bg-k: 1;
+		--nxgt-bg-blob: 1;
+		--nxgt-bg-t1: var(--primary);
+		--nxgt-bg-t2: var(--secondary);
+		--nxgt-bg-t3: var(--primary);
+		--nxgt-bg-c1: var(--nxgt-bg-t1);
+		--nxgt-bg-c2: var(--nxgt-bg-t2);
+		--nxgt-bg-c3: var(--nxgt-bg-t3);
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		width: 100lvw;
+		height: 100lvh;
+	}
+
+	/* `fill="container"`: the size of the parent, not of the viewport. */
+	[data-background][data-fill="container"] {
+		width: 100%;
+		height: 100%;
+	}
+
+	[data-background][data-tone="secondary"] {
+		--nxgt-bg-t1: var(--secondary);
+		--nxgt-bg-t2: var(--primary);
+		--nxgt-bg-t3: var(--secondary);
+	}
+	[data-background][data-tone="tertiary"] {
+		--nxgt-bg-t1: var(--tertiary);
+		--nxgt-bg-t2: var(--primary);
+		--nxgt-bg-t3: var(--tertiary);
+	}
+	[data-background][data-tone="neutral"] {
+		--nxgt-bg-t1: var(--muted-foreground);
+		--nxgt-bg-t2: var(--foreground);
+		--nxgt-bg-t3: var(--muted-foreground);
+	}
+	[data-background][data-tone="success"] {
+		--nxgt-bg-t1: var(--success);
+		--nxgt-bg-t2: var(--info);
+		--nxgt-bg-t3: var(--success);
+	}
+	[data-background][data-tone="warning"] {
+		--nxgt-bg-t1: var(--warning);
+		--nxgt-bg-t2: var(--error);
+		--nxgt-bg-t3: var(--warning);
+	}
+	[data-background][data-tone="error"] {
+		--nxgt-bg-t1: var(--error);
+		--nxgt-bg-t2: var(--warning);
+		--nxgt-bg-t3: var(--error);
+	}
+	[data-background][data-tone="info"] {
+		--nxgt-bg-t1: var(--info);
+		--nxgt-bg-t2: var(--primary);
+		--nxgt-bg-t3: var(--info);
+	}
+	[data-background][data-tone="mixed"] {
+		--nxgt-bg-t1: var(--primary);
+		--nxgt-bg-t2: var(--secondary);
+		--nxgt-bg-t3: var(--tertiary);
+	}
+	[data-background][data-tone="custom"] {
+		--nxgt-bg-t1: var(--nxgt-bg-custom-1, var(--primary));
+		--nxgt-bg-t2: var(--nxgt-bg-custom-2, var(--secondary));
+		--nxgt-bg-t3: var(--nxgt-bg-custom-3, var(--primary));
+	}
+
+	/* Intensity: `--nxgt-bg-k` scales the frame's tint, `--nxgt-bg-blob` the blobs'
+	 * opacity. The default is 1 and 1, today's look. */
+	[data-background][data-intensity="subtle"] {
+		--nxgt-bg-k: 0.5;
+		--nxgt-bg-blob: 0.6;
+	}
+	[data-background][data-intensity="vivid"] {
+		--nxgt-bg-k: 1.6;
+	}
+
+	/* Dark: lift the drawn colours. The fallback mixes with white; the
+	 * relative colour syntax (Chrome 119, Safari 18, Firefox 128) replaces it
+	 * where it is supported. */
+	:is(.dark, [data-theme="dark"]) [data-background],
+	[data-background]:is(.dark, [data-theme="dark"]) {
+		--nxgt-bg-c1: color-mix(in oklab, var(--nxgt-bg-t1) 70%, white);
+		--nxgt-bg-c2: color-mix(in oklab, var(--nxgt-bg-t2) 70%, white);
+		--nxgt-bg-c3: color-mix(in oklab, var(--nxgt-bg-t3) 70%, white);
+	}
+	@supports (color: oklch(from red max(l, 0.5) c h)) {
+		:is(.dark, [data-theme="dark"]) [data-background],
+		[data-background]:is(.dark, [data-theme="dark"]) {
+			--nxgt-bg-c1: oklch(
+				from var(--nxgt-bg-t1) max(l, var(--nxgt-bg-floor)) c h
+			);
+			--nxgt-bg-c2: oklch(
+				from var(--nxgt-bg-t2) max(l, var(--nxgt-bg-floor)) c h
+			);
+			--nxgt-bg-c3: oklch(
+				from var(--nxgt-bg-t3) max(l, var(--nxgt-bg-floor)) c h
+			);
+		}
+	}
+
+	/* The decorative layers never take a pointer; the content keeps its own. */
+	[data-background] > [aria-hidden="true"] {
+		pointer-events: none;
+	}
+
+	/* An SVG scene (`data-scene`) and an overlay (`data-overlay`, the grain)
+	 * fill the frame, under the content. The SVG slices to cover it. An
+	 * overlay stays hidden until its own stylesheet shows it (grain.css), so
+	 * without that file it paints nothing. */
+	[data-background] > [data-overlay] {
+		display: none;
+	}
+	[data-background] > :is([data-scene], [data-overlay]) {
+		position: absolute;
+		inset: 0;
+	}
+	[data-background] > :is([data-scene], [data-overlay]) > svg {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
+	[data-background] > [data-slot="background-content"] {
+		display: flex;
+		flex: 1 1 0%;
+		width: 100%;
+		height: 100%;
+		z-index: 5;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* Paused (hidden page or off screen): the motion rules' `animation`
+	 * shorthands read `--nxgt-bg-play`, so this one declaration stops the
+	 * decoration whatever the specificity. The content does not read it: an
+	 * app's own animations under `background-content` keep running. */
+	[data-background][data-paused] {
+		--nxgt-bg-play: paused;
+	}
+
+	@media (forced-colors: active) {
+		[data-background] {
+			background-image: none;
+		}
+		[data-background] > [aria-hidden="true"] {
+			display: none;
+		}
+	}
+}

package/dist/backgrounds/css/gradient.css

@@ -0,0 +1,53 @@
+/* The `gradient` preset: the frame's tint and three blurred blobs, what
+ * `Background` always looked like (a primary tint from 5% to 20%, blobs
+ * going primary to secondary), now drawn from the tone's colours so it lifts
+ * in dark. The layers are `aria-hidden` divs, see base.css. */
+@layer components {
+	[data-background="gradient"] {
+		background-image: linear-gradient(
+			to right in oklab,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(5% * var(--nxgt-bg-k)),
+				transparent
+			),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(20% * var(--nxgt-bg-k)),
+				transparent
+			)
+		);
+	}
+
+	[data-background="gradient"] > [data-layer] {
+		position: absolute;
+		aspect-ratio: 1 / 1;
+		border-radius: 9999px;
+		filter: blur(64px);
+		opacity: var(--nxgt-bg-blob);
+		background-image: linear-gradient(
+			to right in oklab,
+			var(--nxgt-bg-c1),
+			var(--nxgt-bg-c2)
+		);
+	}
+	[data-background="gradient"] > [data-layer="blob-1"] {
+		bottom: 33.333333%;
+		width: 8rem;
+	}
+	[data-background="gradient"] > [data-layer="blob-2"] {
+		right: 0;
+		bottom: 0;
+		width: 8rem;
+		max-width: 28rem;
+	}
+	[data-background="gradient"] > [data-layer="blob-3"] {
+		right: 50%;
+		width: 10rem;
+		background-image: linear-gradient(
+			to right in oklab,
+			color-mix(in oklab, var(--nxgt-bg-c1) 60%, transparent),
+			color-mix(in oklab, var(--nxgt-bg-c2) 60%, transparent)
+		);
+	}
+}

package/dist/backgrounds/css/grain.css

@@ -0,0 +1,19 @@
+/* The grain: film noise over any preset. `Background` draws it as an
+ * `aria-hidden` SVG (an `feTurbulence` filter) with `data-overlay="grain"`
+ * when `grain` is set, or for `preset="grain"`, which is the gradient plus
+ * this overlay. It sits above the preset's layers and under the content; the
+ * intensity scales its opacity. Plain CSS, no inline `style`. The look may
+ * still change. */
+@layer components {
+	[data-background][data-grain] > [data-overlay="grain"] {
+		display: block;
+		opacity: calc(0.16 * var(--nxgt-bg-k));
+		mix-blend-mode: soft-light;
+	}
+
+	@media (forced-colors: active) {
+		[data-background][data-grain] > [data-overlay="grain"] {
+			display: none;
+		}
+	}
+}

package/dist/backgrounds/css/motion.css

@@ -0,0 +1,30 @@
+/* Motion, off by default: a background moves only when the app sets
+ * `animated` (`data-animated`) and the user has not asked for less motion.
+ * The animation is declared nowhere else, so a rule test can check that every
+ * `animation` sits inside this gate. `data-paused` (base.css) stops it while
+ * the page is hidden or the background is off screen. */
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-background-drift {
+		from {
+			transform: translate3d(0, 0, 0) scale(1);
+		}
+		to {
+			transform: translate3d(6%, -8%, 0) scale(1.1);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated] > [data-layer] {
+			animation: nxgt-background-drift 18s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			will-change: transform;
+		}
+		[data-background][data-animated] > [data-layer="blob-2"] {
+			animation-duration: 24s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background][data-animated] > [data-layer="blob-3"] {
+			animation-duration: 30s;
+		}
+	}
+}