@nxgt/material 3.2.0 → 3.4.0

package/dist/backgrounds/css-react/paper.css

@@ -0,0 +1,49 @@
+/* The `paper` preset: a sheet of paper. A seeded fibre grain (an SVG of
+ * `feTurbulence` specks on a seamless 400 px tile: black in light, white in
+ * dark, like the grain overlay) over a warm tint that the tone cools or warms
+ * (`wash`: cream in light, the tone's colour mixed in). Intensity never goes above the default (`vivid` draws as the default). Static: `animated`
+ * does nothing. React only: nothing in the shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	/* `vivid` is capped at the default strength: a texture under body text
+	 * never gets stronger (the tint and the specks read these two). */
+	[data-background="paper"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="paper"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c1) calc(var(--nxgt-bg-a1) * 1.6),
+				color-mix(
+					in oklab,
+					rgb(250 233 196) calc(70% * (1 - var(--nxgt-bg-grain-invert))),
+					transparent
+				)
+			),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) var(--nxgt-bg-a1),
+				color-mix(
+					in oklab,
+					rgb(250 233 196) calc(42% * (1 - var(--nxgt-bg-grain-invert))),
+					transparent
+				)
+			)
+		);
+	}
+	[data-background="paper"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="paper"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.12);
+	}
+	[data-background="paper"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.09);
+	}
+}

package/dist/backgrounds/css-react/plasma.css

@@ -0,0 +1,53 @@
+/* The `plasma` preset: a soft colour field. A seeded SVG of soft discs in
+ * radial gradients in the tone's three colours, three strengths each (`pm-l1..3`),
+ * over a tint (`wash`). Blended with the page: it adds light in dark. Motion
+ * (opt-in, `animated`): the field drifts. React only: nothing in the shared
+ * `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="plasma"] {
+		isolation: isolate;
+	}
+	[data-background="plasma"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			160deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent)
+		);
+	}
+	[data-background="plasma"] > [data-scene] > svg {
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l1 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.16);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l2 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.26);
+	}
+	[data-background="plasma"] > [data-scene] .pm-l3 {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.38);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-plasma-drift {
+		from {
+			transform: translate(-3%, -2%) scale(1);
+		}
+		to {
+			transform: translate(3%, 2%) scale(1.06);
+		}
+	}
+
+	@layer components {
+		[data-background="plasma"][data-animated] > [data-scene] .pm-field {
+			animation: nxgt-bg-plasma-drift 28s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			transform-box: view-box;
+			transform-origin: 50% 50%;
+		}
+	}
+}

package/dist/backgrounds/css-react/rays.css

@@ -0,0 +1,67 @@
+/* The `rays` preset: a sunburst. A conic gradient of alternating rays from
+ * the top centre of the frame (`rays`, a layer twice the frame's size and
+ * centred on that point, faded with distance) over a tint (`wash`). CSS only.
+ * Blended with the page: it adds light in dark. Motion (opt-in, `animated`):
+ * the burst turns slowly. React only: nothing in the shared `css/` folder. */
+@layer components {
+	[data-background="rays"] {
+		overflow: clip;
+		isolation: isolate;
+	}
+	[data-background="rays"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: radial-gradient(
+			ellipse 70% 60% at 50% 0%,
+			color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a2), transparent),
+			transparent 75%
+		);
+	}
+	[data-background="rays"] > [data-layer="rays"] {
+		position: absolute;
+		top: -100%;
+		right: -50%;
+		bottom: 0;
+		left: -50%;
+		opacity: var(--nxgt-bg-op);
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+		background-image: repeating-conic-gradient(
+			from 0deg at 50% 50%,
+			color-mix(in oklab, var(--nxgt-bg-c1) 34%, transparent) 0deg 6deg,
+			transparent 6deg 9deg,
+			color-mix(in oklab, var(--nxgt-bg-c2) 24%, transparent) 9deg 12deg,
+			transparent 12deg 18deg,
+			color-mix(in oklab, var(--nxgt-bg-c3) 28%, transparent) 18deg 21deg,
+			transparent 21deg 30deg
+		);
+		-webkit-mask-image: radial-gradient(
+			closest-side,
+			rgb(0 0 0 / 0.5) 0,
+			black 14%,
+			rgb(0 0 0 / 0.35) 55%,
+			transparent
+		);
+		mask-image: radial-gradient(
+			closest-side,
+			rgb(0 0 0 / 0.5) 0,
+			black 14%,
+			rgb(0 0 0 / 0.35) 55%,
+			transparent
+		);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-rays-turn {
+		to {
+			transform: rotate(30deg);
+		}
+	}
+
+	@layer components {
+		[data-background="rays"][data-animated] > [data-layer="rays"] {
+			animation: nxgt-bg-rays-turn 90s linear infinite
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

package/dist/backgrounds/css-react/ripples.css

@@ -0,0 +1,68 @@
+/* The `ripples` preset: rings spreading from three seeded centres, one tone
+ * colour each (`rp-c1..3`), fading outward, over a tint (`wash`). Blended
+ * with the page: it adds light in dark. Motion (opt-in, `animated`): each set
+ * of rings breathes at its own pace (`rp-d1..3`). React only: nothing in the
+ * shared `css/` folder. */
+@import "../css/scene.css";
+
+@layer components {
+	[data-background="ripples"] {
+		isolation: isolate;
+	}
+	[data-background="ripples"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: radial-gradient(
+			ellipse 90% 80% at 50% 50%,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			transparent 80%
+		);
+	}
+	[data-background="ripples"] > [data-scene] > svg {
+		mix-blend-mode: var(--nxgt-bg-glow-blend);
+	}
+	[data-background="ripples"] > [data-scene] circle {
+		fill: none;
+		stroke-width: 2;
+		opacity: var(--nxgt-bg-op);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c1 {
+		stroke: var(--nxgt-bg-c1);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c2 {
+		stroke: var(--nxgt-bg-c2);
+	}
+	[data-background="ripples"] > [data-scene] .rp-c3 {
+		stroke: var(--nxgt-bg-c3);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-ripples-breathe {
+		from {
+			transform: scale(0.94);
+		}
+		to {
+			transform: scale(1.06);
+		}
+	}
+
+	@layer components {
+		[data-background="ripples"][data-animated] > [data-scene] [class^="rp-c"] {
+			animation: nxgt-bg-ripples-breathe 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+			transform-box: fill-box;
+			transform-origin: 50% 50%;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d1 {
+			animation-direction: alternate;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d2 {
+			animation-duration: 19s;
+			animation-direction: alternate-reverse;
+		}
+		[data-background="ripples"][data-animated] > [data-scene] .rp-d3 {
+			animation-duration: 24s;
+		}
+	}
+}

package/dist/backgrounds/css-react/school.css

@@ -0,0 +1,2 @@
+/* The `school` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/dist/backgrounds/css-react/science.css

@@ -0,0 +1,2 @@
+/* The `science` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/dist/backgrounds/css-react/sport.css

@@ -0,0 +1,2 @@
+/* The `sport` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/dist/backgrounds/css-react/travel.css

@@ -0,0 +1,2 @@
+/* The `travel` preset: line drawings of one theme (see illustrated.css). Still. */
+@import "./illustrated.css";

package/dist/backgrounds.js

@@ -3,52 +3,76 @@ import { t } from "./compose-refs-DZ0iIVF-.js";
 import { t as n } from "./use-background-activity-B8jLHNop.js";
 import { createElement as r, memo as i, useId as a, useMemo as o, useRef as s } from "react";
 import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
-import { BACKGROUND_INTENSITIES as d, BACKGROUND_PRESETS as f, BACKGROUND_TONES as p, MOTIF_SHAPES as m, SCENE_LAYER as h, SHIPPED_BACKGROUND_PRESETS as g, buildBackgroundScene as _, presetLayers as v, resolveBackgroundPreset as y, svgIdPrefix as b } from "@nxgt/material-core/backgrounds";
+import { BACKGROUND_INTENSITIES as d, BACKGROUND_PRESETS as f, BACKGROUND_TONES as p, MOTIF_SHAPES as m, MOTIF_SHAPES_ALL as h, SCENE_LAYER as g, SHIPPED_BACKGROUND_PRESETS as _, buildBackgroundScene as v, presetLayers as y, resolveBackgroundPreset as b, svgIdPrefix as x } from "@nxgt/material-core/backgrounds";
 //#region lib/backgrounds/background/available.ts
-var x = [
+var S = [
 	"gradient",
 	"grain",
 	"mesh",
 	"aurora",
 	"spotlight",
-	"bokeh"
-], S = [
+	"bokeh",
+	"rays",
+	"halo",
+	"plasma",
+	"glass",
+	"ripples",
+	"blobs",
+	"paper",
+	"linen",
+	"concrete",
+	"marble"
+], C = [
 	"isometric",
 	"blueprint",
 	"dots",
 	"stripes",
 	"low-poly",
 	"topography",
-	"waves"
-], C = [
+	"waves",
+	"hexagons",
+	"circuit",
+	"graph-paper",
+	"checker",
+	"diagonal-checker",
+	"chevrons"
+], w = [
 	"shapes",
 	"confetti-grid",
 	"constellation",
 	"halftone",
 	"truchet",
 	"floating",
-	"scatter-icons"
-], w = [
-	...x,
+	"scatter-icons",
+	"school",
+	"night-sky",
+	"bubbles",
+	"leaves",
+	"science",
+	"music",
+	"travel",
+	"sport"
+], T = [
 	...S,
-	...C
-], T = /^(aria|data)-/, E = (e) => e === "class" ? "className" : T.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), D = i(function e({ node: t }) {
-	let n = Object.fromEntries(Object.entries(t.attrs).map(([e, t]) => [E(e), t]));
+	...C,
+	...w
+], E = /^(aria|data)-/, D = (e) => e === "class" ? "className" : E.test(e) ? e : e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), O = i(function e({ node: t }) {
+	let n = Object.fromEntries(Object.entries(t.attrs).map(([e, t]) => [D(e), t]));
 	return r(t.tag, n, ...(t.children ?? []).map((t, n) => /* @__PURE__ */ l(e, { node: t }, n)));
-}), O = i(function({ preset: e, scene: t, grain: n }) {
-	return /* @__PURE__ */ u(c, { children: [v(e).map((e) => e === h ? t && /* @__PURE__ */ l("div", {
+}), k = i(function({ preset: e, scene: t, grain: n }) {
+	return /* @__PURE__ */ u(c, { children: [y(e).map((e) => e === g ? t && /* @__PURE__ */ l("div", {
 		"data-scene": "",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ l(D, { node: t })
+		children: /* @__PURE__ */ l(O, { node: t })
 	}, e) : /* @__PURE__ */ l("div", {
 		"data-layer": e,
 		"aria-hidden": "true"
 	}, e)), n && /* @__PURE__ */ l("div", {
 		"data-overlay": "grain",
 		"aria-hidden": "true",
-		children: /* @__PURE__ */ l(D, { node: n })
+		children: /* @__PURE__ */ l(O, { node: n })
 	})] });
-}), k = (e) => console.warn(e), A = Object.keys({
+}), A = (e) => console.warn(e), j = Object.keys({
 	shapes: 1,
 	density: 1,
 	size: 1,
@@ -56,37 +80,37 @@ var x = [
 	shapeFill: 1,
 	opacitySpread: 1
 }).filter((e) => e !== "shapes");
-function j(e) {
-	return A.map((t) => e?.[t]);
+function M(e) {
+	return j.map((t) => e?.[t]);
 }
-function M(e, t, n, r, i) {
+function N(e, t, n, r, i) {
 	if (e === "grain") return null;
 	let a = JSON.parse(i);
-	return _(e, {
+	return v(e, {
 		idPrefix: t,
 		seed: n,
 		motif: {
-			...Object.fromEntries(A.map((e, t) => [e, a[t] ?? void 0])),
+			...Object.fromEntries(j.map((e, t) => [e, a[t] ?? void 0])),
 			shapes: r === void 0 ? void 0 : r.split(",").filter(Boolean)
 		}
 	});
 }
-function N(e, t) {
-	return _("grain", {
+function P(e, t) {
+	return v("grain", {
 		idPrefix: `${e}-grain`,
 		seed: t
 	});
 }
-function P({ children: r, ref: i, preset: c = "gradient", tone: d = "primary", intensity: f = "default", animated: p = !1, grain: m = !1, seed: h = 0, motif: g, fill: _ = "viewport", ...v }) {
-	let x = s(null), S = o(() => t(x, i), [i]), C = n(x, p), T = b(a()), E = y(c, w, e() ? void 0 : k), D = m || E === "grain", A = g?.shapes ? [...new Set(g.shapes)].sort().join(",") : void 0, P = JSON.stringify(j(g)), F = o(() => M(E, T, h, A, P), [
+function F({ children: r, ref: i, preset: c = "gradient", tone: d = "primary", intensity: f = "default", animated: p = !1, grain: m = !1, seed: h = 0, motif: g, fill: _ = "viewport", ...v }) {
+	let y = s(null), S = o(() => t(y, i), [i]), C = n(y, p), w = x(a()), E = b(c, T, e() ? void 0 : A), D = m || E === "grain", O = g?.shapes ? [...new Set(g.shapes)].sort().join(",") : void 0, j = JSON.stringify(M(g)), F = o(() => N(E, w, h, O, j), [
 		E,
-		T,
+		w,
 		h,
-		A,
-		P
-	]), I = o(() => D ? N(T, h) : null, [
+		O,
+		j
+	]), I = o(() => D ? P(w, h) : null, [
 		D,
-		T,
+		w,
 		h
 	]);
 	return /* @__PURE__ */ u("div", {
@@ -101,7 +125,7 @@ function P({ children: r, ref: i, preset: c = "gradient", tone: d = "primary", i
 		"data-animated": p ? "" : void 0,
 		"data-grain": D ? "" : void 0,
 		"data-paused": p && C ? "" : void 0,
-		children: [/* @__PURE__ */ l(O, {
+		children: [/* @__PURE__ */ l(k, {
 			preset: E,
 			scene: F,
 			grain: I
@@ -112,4 +136,4 @@ function P({ children: r, ref: i, preset: c = "gradient", tone: d = "primary", i
 	});
 }
 //#endregion
-export { w as AVAILABLE_BACKGROUND_PRESETS, d as BACKGROUND_INTENSITIES, f as BACKGROUND_PRESETS, p as BACKGROUND_TONES, P as Background, m as MOTIF_SHAPES, g as SHIPPED_BACKGROUND_PRESETS };
+export { T as AVAILABLE_BACKGROUND_PRESETS, d as BACKGROUND_INTENSITIES, f as BACKGROUND_PRESETS, p as BACKGROUND_TONES, F as Background, m as MOTIF_SHAPES, h as MOTIF_SHAPES_ALL, _ as SHIPPED_BACKGROUND_PRESETS };

package/dist/lib/backgrounds/background/available.d.ts

@@ -1,9 +1,9 @@
 /**
  * The presets this library draws: the ids `BackgroundProps.preset` accepts.
- * Core's `BACKGROUND_PRESETS` is the table of all twenty presets, and its
+ * Core's `BACKGROUND_PRESETS` is the table of all 44 presets, and its
  * `SHIPPED_BACKGROUND_PRESETS` the common floor (`gradient`, `grain`) every
- * library draws; this list is `@nxgt/material`'s own and holds all twenty.
+ * library draws; this list is `@nxgt/material`'s own and holds all 44.
  * Any other id draws the gradient, with a warning outside production.
  */
-export declare const AVAILABLE_BACKGROUND_PRESETS: readonly ["gradient", "grain", "mesh", "aurora", "spotlight", "bokeh", "isometric", "blueprint", "dots", "stripes", "low-poly", "topography", "waves", "shapes", "confetti-grid", "constellation", "halftone", "truchet", "floating", "scatter-icons"];
+export declare const AVAILABLE_BACKGROUND_PRESETS: readonly ["gradient", "grain", "mesh", "aurora", "spotlight", "bokeh", "rays", "halo", "plasma", "glass", "ripples", "blobs", "paper", "linen", "concrete", "marble", "isometric", "blueprint", "dots", "stripes", "low-poly", "topography", "waves", "hexagons", "circuit", "graph-paper", "checker", "diagonal-checker", "chevrons", "shapes", "confetti-grid", "constellation", "halftone", "truchet", "floating", "scatter-icons", "school", "night-sky", "bubbles", "leaves", "science", "music", "travel", "sport"];
 export type AvailableBackgroundPreset = (typeof AVAILABLE_BACKGROUND_PRESETS)[number];

package/dist/lib/backgrounds/background/background.d.ts

@@ -1,10 +1,10 @@
 import { BackgroundProps } from './types.js';
 export type { BackgroundProps } from './types.js';
 /**
- * A backdrop that centres its children, with a choice of twenty presets: the
+ * A backdrop that centres its children, with a choice of 44 presets: the
  * superset of the `Background` of `/components` (which has `tone`, `intensity`,
  * `preset` and `animated`). The extra props here are `grain`, `seed`, `fill` and
- * `motif` (`shapes`, `density`, `size`, `rotate` (default `false`),
+ * `motif` (`shapes` (any of `MOTIF_SHAPES_ALL`), `density`, `size`, `rotate` (default `false`),
  * `shapeFill`, `opacitySpread`). Its look is plain CSS keyed on
  * `data-background` and `data-*` (`@nxgt/material/backgrounds.css` for the
  * grain), its SVG comes from core as data, and it emits no `style` attribute.

package/dist/lib/backgrounds/index.d.ts

@@ -9,6 +9,6 @@
  * name (same props, plus every preset's), with the types and the engine's
  * tables re-exported from `@nxgt/material-core/backgrounds` by name.
  */
-export { BACKGROUND_INTENSITIES, BACKGROUND_PRESETS, BACKGROUND_TONES, type BackgroundIntensity, type BackgroundPreset, type BackgroundTone, MOTIF_SHAPES, type MotifDensity, type MotifOptions, type MotifShape, type MotifSize, type OpacitySpread, type PresetInfo, SHIPPED_BACKGROUND_PRESETS, type ShapeFill, type ShippedBackgroundPreset, } from '@nxgt/material-core/backgrounds';
+export { BACKGROUND_INTENSITIES, BACKGROUND_PRESETS, BACKGROUND_TONES, type BackgroundIntensity, type BackgroundPreset, type BackgroundTone, MOTIF_SHAPES, MOTIF_SHAPES_ALL, type MotifDensity, type MotifOptions, type MotifShape, type MotifSize, type OpacitySpread, type PresetInfo, SHIPPED_BACKGROUND_PRESETS, type ShapeFill, type ShippedBackgroundPreset, } from '@nxgt/material-core/backgrounds';
 export { Background, type BackgroundProps } from './background/index.js';
 export { AVAILABLE_BACKGROUND_PRESETS, type AvailableBackgroundPreset, } from './background/available.js';