@nxgt/material 3.57.0 → 3.58.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nxgt/material
 
+## 3.58.0
+
+### Minor Changes
+
+- [#1969](https://github.com/softistx/nxgt-material/pull/1969) [`e96bfb2`](https://github.com/softistx/nxgt-material/commit/e96bfb23673015b4414c2de78c4fd8df11003633) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuestionCard`: `QuestionVerdict` gains `'unanswered'` for a review of a question the learner left blank. The banner reads "No answer" (`material.question-card.unanswered`, "Sans réponse" in French) with a minus icon on a neutral tone, never colour alone. No value is shown and the inputs stay read-only, the correct answer and the explanation are shown, and `points` read 0 out of the question's points. Additive ([#1966](https://github.com/softistx/nxgt-material/issues/1966)).
+
+- [#1975](https://github.com/softistx/nxgt-material/pull/1975) [`92250a8`](https://github.com/softistx/nxgt-material/commit/92250a8ac05d986d27e62232453ce9395385538b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `StickyActionBar`: the bar that holds a page's main decision. On a phone it sticks to the bottom of the scroll box, above the on-screen keyboard and clear of the safe areas; from `md` it is an inline row after the content. The last child is the one primary action. `sticky={false}` keeps it inline everywhere.
+
+### Patch Changes
+
+- [#1979](https://github.com/softistx/nxgt-material/pull/1979) [`c263975`](https://github.com/softistx/nxgt-material/commit/c263975549cdd49e869d091744e13c230a628dfc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CountdownTimer` keeps its icon and words through the critical tone (the last `criticalAt` seconds), where 3.57 dropped them and left colour alone. The critical tone has its own phrase, `material.countdown-timer.critical` (en "Almost out of time", fr "Le temps est presque écoulé"), and the announcement on entering it includes the phrase. A custom `warningText` replaces the phrase in both tones; `warningText={false}` still hides the icon and words in both. Additive.
+
+- [#1976](https://github.com/softistx/nxgt-material/pull/1976) [`ad9d8db`](https://github.com/softistx/nxgt-material/commit/ad9d8db51cc97ecd5d20f67cf65b264ae2015c85) Thanks [@SteveGT96](https://github.com/SteveGT96)! - DataGrid: a phone list item's accessible name now holds everything it shows (label, badges, summary and the reason of a locked row), label first, so axe `label-content-name-mismatch` passes. The summary and reason are no longer a description, and the default summary draws its "·" separators with CSS. Tests that matched the item's exact name (`{ name: 'Ada Lovelace' }`) match its start instead (`/^Ada Lovelace/`).
+
+- [#1926](https://github.com/softistx/nxgt-material/pull/1926) [`704ae75`](https://github.com/softistx/nxgt-material/commit/704ae75978defef993346fbf18e39d4c8dc8c60d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Split the library's components so no source file exceeds 200 lines and no function 80 ([#1865](https://github.com/softistx/nxgt-material/issues/1865)). No API or behaviour change.
+
 ## 3.57.0
 
 ### Minor Changes

package/README.md

@@ -665,6 +665,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding, an optional backdrop (the theme's by default) that keeps clear of the card. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stickyactionbar.webp" width="120" alt="StickyActionBar"> | [`StickyActionBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stickyactionbar) | The bar of a page's main decision: stuck to the bottom on a phone above the keyboard and clear of the safe areas, inline from `md`, one primary action. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Breadcrumb primitives. | `Breadcrumb` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-listdetailslayout.webp" width="120" alt="ListDetailsLayout"> | [`ListDetailsLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#listdetailslayout), `PaneLayout`, `ThreadLayout` | List / details that collapses to one view on mobile (a `back` bar and focus moves on the details, `breakpoint="container"` to follow its own width), a side pane that becomes a sheet, and a centred column. | `ListDetailsLayout`, `PaneLayout`, `ThreadLayout` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-responsivegrid.webp" width="120" alt="ResponsiveGrid"> | [`ResponsiveGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#responsivegrid) | Container-query grid that grows from 1 to 5 columns, or fills by a minimum tile width (`minItem`) with a `gap`. | `ResponsiveGrid` |
@@ -711,7 +712,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#progress), `CircularProgress`, `ProgressField` | Material 3 Expressive linear bar and circular ring (flat or wavy, eight tones, buffer and stop dot), and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-scrollprogress.webp" width="120" alt="ScrollProgress"> | [`ScrollProgress`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#scrollprogress) | Hairline that tracks window or a scrollable `target` (`react-use` `useWindowScroll` / `useScroll`). `DocProgress` composes it. | `ScrollProgress` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stepdots.webp" width="120" alt="StepDots"> | [`StepDots`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stepdots) | Segmented step progress, each step coloured by its state (done, correct, incorrect, flagged), optionally clickable. | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-countdowntimer.webp" width="120" alt="CountdownTimer"> | [`CountdownTimer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#countdowntimer) | Countdown clock with an emptying ring, amber then red as time runs out, with an icon and words in the warning; announced only at its thresholds. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-countdowntimer.webp" width="120" alt="CountdownTimer"> | [`CountdownTimer`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#countdowntimer) | Countdown clock with an emptying ring, amber then red as time runs out, with an icon and words when time is low; announced only at its thresholds. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-spinner.webp" width="120" alt="Spinner"> | [`Spinner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#spinner) | Loading spinner in several styles and colours. | `Spinner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-loadingindicator.webp" width="120" alt="LoadingIndicator"> | [`LoadingIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#loadingindicator) | Material 3 Expressive's loading indicator: a shape morphing while it turns, with no script. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-typingindicator.webp" width="120" alt="TypingIndicator"> | [`TypingIndicator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#typingindicator) | Three dots in a wave, plain or as a chat bubble; still under reduced motion. | — |

package/dist/{async-slice-B3RMgJUn.js → async-slice-C_Juki7i.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-C89mti-z.js";
-import { r } from "./translator-B5fId5Rw.js";
+import { i as e, r as t, t as n } from "./stored-language-BIxd7uiP.js";
+import { r } from "./translator-BrZv1U54.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{background-BtSZsTvY.js → background-qdnet2A5.js}

@@ -1,6 +1,6 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
-import { t } from "./is-production-GLw59WU8.js";
-import { a as n, i as r, n as i, r as a } from "./icon-sprites-CaYXzOL4.js";
+import { a as t, i as n, n as r, r as i } from "./icon-sprites-CaYXzOL4.js";
+import { t as a } from "./is-production-GLw59WU8.js";
 import { a as o, t as s } from "./theme-context-Cofk6vgs.js";
 import { t as c } from "./compose-refs-DZ0iIVF-.js";
 import { t as l } from "./use-background-activity-KxQgelFF.js";
@@ -9,9 +9,9 @@ import { n as d, r as f, t as p } from "./scene-options-2zNF3ZkQ.js";
 import { Suspense as m, lazy as h, memo as g, useId as _, useMemo as v, useRef as y } from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
 import { IconRefError as C, resolveIconStyles as w, resolveIcons as T } from "@nxgt/material-core/icons";
-import { SCENE_LAYER as E, buildBackgroundScene as D, presetLayers as O, resolveBackgroundPreset as k, svgIdPrefix as ee } from "@nxgt/material-core/backgrounds";
+import { SCENE_LAYER as E, buildBackgroundScene as D, presetLayers as O, resolveBackgroundPreset as k, svgIdPrefix as A } from "@nxgt/material-core/backgrounds";
 //#region lib/backgrounds/background/available.ts
-var A = [
+var j = [
 	"gradient",
 	"grain",
 	"mesh",
@@ -28,7 +28,7 @@ var A = [
 	"linen",
 	"concrete",
 	"marble"
-], j = [
+], M = [
 	"isometric",
 	"blueprint",
 	"dots",
@@ -42,7 +42,7 @@ var A = [
 	"checker",
 	"diagonal-checker",
 	"chevrons"
-], M = [
+], N = [
 	"shapes",
 	"confetti-grid",
 	"constellation",
@@ -60,38 +60,38 @@ var A = [
 	"sport",
 	"moon",
 	"icons"
-], N = [
+], P = [
 	"eclipse",
 	"meteor-shower",
 	"ringed-planet",
 	"northern-lights"
-], P = (e) => N.includes(e), F = [
-	...A,
+], F = (e) => P.includes(e), I = [
 	...j,
 	...M,
-	...N
-], I = h(() => import("./icons-scene-M4HBeN2c.js"));
-function L(e) {
+	...N,
+	...P
+], L = h(() => import("./icons-scene-M4HBeN2c.js"));
+function R(e) {
 	return /* @__PURE__ */ x("div", {
 		"data-scene": "",
 		"aria-hidden": "true",
 		children: /* @__PURE__ */ x(m, {
 			fallback: null,
-			children: /* @__PURE__ */ x(I, { ...e })
+			children: /* @__PURE__ */ x(L, { ...e })
 		})
 	});
 }
 //#endregion
 //#region lib/backgrounds/background/partials/background-layers.tsx
-var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
+var z = h(() => import("./celestial-scene-8Muu6f7O.js")), B = g(function({ preset: e, scene: t, grain: n, sky: r, icons: i, ...a }) {
 	return /* @__PURE__ */ S(b, { children: [
-		O(e).map((n) => n === E ? i ? /* @__PURE__ */ x(L, { ...i }, n) : P(e) ? /* @__PURE__ */ x("div", {
+		O(e).map((n) => n === E ? i ? /* @__PURE__ */ x(R, { ...i }, n) : F(e) ? /* @__PURE__ */ x("div", {
 			"data-scene": "",
 			"data-celestial": "",
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ x(m, {
 				fallback: null,
-				children: /* @__PURE__ */ x(R, {
+				children: /* @__PURE__ */ x(z, {
 					name: e,
 					as: "preset",
 					...a
@@ -112,7 +112,7 @@ var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ pres
 			"aria-hidden": "true",
 			children: /* @__PURE__ */ x(m, {
 				fallback: null,
-				children: /* @__PURE__ */ x(R, {
+				children: /* @__PURE__ */ x(z, {
 					name: r,
 					as: "sky",
 					base: e,
@@ -128,8 +128,42 @@ var R = h(() => import("./celestial-scene-8Muu6f7O.js")), te = g(function({ pres
 	] });
 });
 //#endregion
+//#region lib/backgrounds/background/partials/use-background-scenes.ts
+function V(e, t, n, r, i, a) {
+	return e === "grain" ? null : D(e, f(t, n, r, i, a));
+}
+function H(e, t) {
+	return D("grain", {
+		idPrefix: `${e}-grain`,
+		seed: t
+	});
+}
+function U({ preset: e, hasIcons: t, grain: n, idPrefix: r, seed: i, motif: a, moon: o }) {
+	let s = n || e === "grain", c = a?.shapes ? [...new Set(a.shapes)].sort().join(",") : void 0, l = JSON.stringify(d(a)), u = JSON.stringify(p(o));
+	return {
+		scene: v(() => t ? null : V(e, r, i, c, l, u), [
+			t,
+			e,
+			r,
+			i,
+			c,
+			l,
+			u
+		]),
+		grainScene: v(() => s ? H(r, i) : null, [
+			s,
+			r,
+			i
+		]),
+		withGrain: s,
+		shapesKey: c,
+		scalarsKey: l,
+		moonKey: u
+	};
+}
+//#endregion
 //#region lib/backgrounds/background/partials/icons-check.ts
-function z(e, t) {
+function W(e, t) {
 	try {
 		e !== void 0 && T(e);
 		let n = Array.isArray(t) ? t.map((e) => e && typeof e == "object" && "style" in e ? e.style : e) : t && typeof t == "object" && "style" in t ? t.style : t;
@@ -141,7 +175,7 @@ function z(e, t) {
 }
 //#endregion
 //#region lib/backgrounds/background/partials/icons-keys.ts
-var B = Object.keys({
+var G = Object.keys({
 	layout: 1,
 	colors: 1,
 	sizeRange: 1,
@@ -151,36 +185,36 @@ var B = Object.keys({
 	calm: 1,
 	quiet: 1
 });
-function V(e) {
-	return JSON.stringify(Object.fromEntries(B.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
+function K(e) {
+	return JSON.stringify(Object.fromEntries(G.flatMap((t) => e?.[t] === void 0 ? [] : [[t, e[t]]])));
 }
-var H = .2;
-function U(e, t, n) {
+var q = .2;
+function J(e, t, n) {
 	let { icons: r, iconStyle: i, iconMotif: a, motif: o } = t, s = o?.icons, c = a?.layout, l = e === "shapes" ? !!s : e === "icons" && (c === void 0 || c === "even");
 	return {
 		wants: e === "icons" || e === "shapes" && !!s,
 		iconsKey: JSON.stringify(s?.pack ?? r ?? null),
 		styleKey: JSON.stringify(s?.style ?? i ?? null),
-		motifKey: V(a),
+		motifKey: K(a),
 		mixKey: JSON.stringify(l ? {
 			...o,
-			icons: { ratio: s?.ratio ?? H }
+			icons: { ratio: s?.ratio ?? q }
 		} : null),
 		servedKey: JSON.stringify(n ?? null)
 	};
 }
 //#endregion
 //#region lib/backgrounds/background/partials/use-icons-scene.ts
-function W(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, seed: d, animated: f }) {
-	let p = n(), m = a(), h = r(), g = i(), { wants: _, iconsKey: y, styleKey: b, motifKey: x, mixKey: S, servedKey: C } = U(e, {
+function Y(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, seed: d, animated: f }) {
+	let p = t(), m = i(), h = n(), g = r(), { wants: _, iconsKey: y, styleKey: b, motifKey: x, mixKey: S, servedKey: C } = J(e, {
 		icons: o,
 		iconStyle: s,
 		iconMotif: c,
 		motif: l
 	}, h), w = v(() => {
 		if (!_) return null;
-		let n = z(JSON.parse(y) ?? void 0, JSON.parse(b) ?? void 0);
-		return n && !t() && console.warn(`Background: icons cannot be drawn (${n}); drawing "${e === "icons" ? "scatter-icons" : e}" instead.`), n;
+		let t = W(JSON.parse(y) ?? void 0, JSON.parse(b) ?? void 0);
+		return t && !a() && console.warn(`Background: icons cannot be drawn (${t}); drawing "${e === "icons" ? "scatter-icons" : e}" instead.`), t;
 	}, [
 		_,
 		e,
@@ -219,63 +253,70 @@ function W(e, { icons: o, iconStyle: s, iconMotif: c, motif: l, idPrefix: u, see
 	};
 }
 //#endregion
-//#region lib/backgrounds/background/background.tsx
-var G = /* @__PURE__ */ e({ Background: () => J }), K = (e) => console.warn(e);
-function q(e, t, n, r, i, a) {
-	return e === "grain" ? null : D(e, f(t, n, r, i, a));
+//#region lib/backgrounds/background/partials/use-themed-background.ts
+function X({ preset: e, tone: t, intensity: n, animated: r, grain: i, seed: a, motif: c, moon: l, sky: u, icons: d, iconStyle: f, iconMotif: p, ...m }) {
+	let h = o()?.background || s;
+	return {
+		requested: e ?? h.preset,
+		tone: t ?? h.tone ?? s.tone,
+		intensity: n ?? h.intensity ?? s.intensity,
+		animated: r ?? h.animated ?? !1,
+		grain: i ?? h.grain ?? !1,
+		seed: a ?? h.seed ?? 0,
+		motif: c ?? h.motif,
+		moon: l ?? h.moon,
+		sky: u ?? h.sky,
+		iconProps: {
+			icons: d ?? h.icons,
+			iconStyle: f ?? h.iconStyle,
+			iconMotif: p ?? h.iconMotif
+		},
+		props: m
+	};
 }
-function ne(e, t) {
-	return D("grain", {
-		idPrefix: `${e}-grain`,
-		seed: t
+//#endregion
+//#region lib/backgrounds/background/background.tsx
+var Z = /* @__PURE__ */ e({ Background: () => $ }), Q = (e) => console.warn(e);
+function $({ children: e, ref: t, fill: n = "viewport", ...r }) {
+	let { requested: i, tone: o, intensity: s, animated: u, grain: d, seed: f, motif: p, moon: m, sky: h, iconProps: g, props: b } = X(r), C = y(null), w = v(() => c(C, t), [t]), T = l(C, u), E = A(_()), { preset: D, iconsScene: O } = Y(k(i, I, a() ? void 0 : Q), {
+		...g,
+		motif: p,
+		idPrefix: E,
+		seed: f,
+		animated: u
+	}), { scene: j, grainScene: M, withGrain: N, shapesKey: P, scalarsKey: F, moonKey: L } = U({
+		preset: D,
+		hasIcons: O !== void 0,
+		grain: d,
+		idPrefix: E,
+		seed: f,
+		motif: p,
+		moon: m
 	});
-}
-function J({ children: e, ref: n, preset: r, tone: i, intensity: a, animated: u, grain: f, seed: m, motif: h, moon: g, sky: b, icons: C, iconStyle: w, iconMotif: T, fill: E = "viewport", ...D }) {
-	let O = o()?.background || s, A = r ?? O.preset, j = i ?? O.tone ?? s.tone, M = a ?? O.intensity ?? s.intensity, N = u ?? O.animated ?? !1, P = f ?? O.grain ?? !1, I = m ?? O.seed ?? 0, L = h ?? O.motif, R = g ?? O.moon, z = b ?? O.sky, B = y(null), V = v(() => c(B, n), [n]), H = l(B, N), U = ee(_()), { preset: G, iconsScene: J } = W(k(A, F, t() ? void 0 : K), {
-		icons: C ?? O.icons,
-		iconStyle: w ?? O.iconStyle,
-		iconMotif: T ?? O.iconMotif,
-		motif: L,
-		idPrefix: U,
-		seed: I,
-		animated: N
-	}), Y = P || G === "grain", X = L?.shapes ? [...new Set(L.shapes)].sort().join(",") : void 0, Z = JSON.stringify(d(L)), Q = JSON.stringify(p(R)), $ = J !== void 0, re = v(() => $ ? null : q(G, U, I, X, Z, Q), [
-		$,
-		G,
-		U,
-		I,
-		X,
-		Z,
-		Q
-	]), ie = v(() => Y ? ne(U, I) : null, [
-		Y,
-		U,
-		I
-	]);
 	return /* @__PURE__ */ S("div", {
 		"data-slot": "background",
-		...D,
-		ref: V,
-		"data-background": G === "grain" ? "gradient" : G,
-		"data-preset": G,
-		"data-tone": j,
-		"data-intensity": M,
-		"data-fill": E === "container" ? E : void 0,
-		"data-animated": N ? "" : void 0,
-		"data-grain": Y ? "" : void 0,
-		"data-sky": z,
-		"data-paused": N && H ? "" : void 0,
-		children: [/* @__PURE__ */ x(te, {
-			preset: G,
-			scene: re,
-			grain: ie,
-			sky: z,
-			idPrefix: U,
-			seed: I,
-			shapesKey: X,
-			scalarsKey: Z,
-			moonKey: Q,
-			icons: J
+		...b,
+		ref: w,
+		"data-background": D === "grain" ? "gradient" : D,
+		"data-preset": D,
+		"data-tone": o,
+		"data-intensity": s,
+		"data-fill": n === "container" ? n : void 0,
+		"data-animated": u ? "" : void 0,
+		"data-grain": N ? "" : void 0,
+		"data-sky": h,
+		"data-paused": u && T ? "" : void 0,
+		children: [/* @__PURE__ */ x(B, {
+			preset: D,
+			scene: j,
+			grain: M,
+			sky: h,
+			idPrefix: E,
+			seed: f,
+			shapesKey: P,
+			scalarsKey: F,
+			moonKey: L,
+			icons: O
 		}), /* @__PURE__ */ x("div", {
 			"data-slot": "background-content",
 			children: e
@@ -283,4 +324,4 @@ function J({ children: e, ref: n, preset: r, tone: i, intensity: a, animated: u,
 	});
 }
 //#endregion
-export { G as n, F as r, J as t };
+export { Z as n, I as r, $ as t };

package/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-BtSZsTvY.js";
+import { r as e, t } from "./background-qdnet2A5.js";
 import { BACKGROUND_INTENSITIES as n, BACKGROUND_PRESETS as r, BACKGROUND_TONES as i, MOTIF_SHAPES as a, MOTIF_SHAPES_ALL as o, SHIPPED_BACKGROUND_PRESETS as s } from "@nxgt/material-core/backgrounds";
 export { e as AVAILABLE_BACKGROUND_PRESETS, n as BACKGROUND_INTENSITIES, r as BACKGROUND_PRESETS, i as BACKGROUND_TONES, t as Background, a as MOTIF_SHAPES, o as MOTIF_SHAPES_ALL, s as SHIPPED_BACKGROUND_PRESETS };