@nxgt/material 3.3.0 → 3.4.0

package/lib/backgrounds/css-react/leaves.css

@@ -0,0 +1,41 @@
+/* The `leaves` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a leaf sways, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-leaves-sw {
+		to {
+			translate: 16px 8px;
+		}
+	}
+
+	@layer components {
+		[data-background="leaves"][data-animated] > [data-scene] .sw {
+			animation: nxgt-bg-leaves-sw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="leaves"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/lib/backgrounds/css-react/linen.css

@@ -0,0 +1,44 @@
+/* The `linen` preset: a plain weave. A cross-hatch of 1 px threads every 4 px
+ * (whole pixels, so crisp at 1x) with faint seeded slubs (a 960 px tile), on a tint of the
+ * tone (`wash`). The threads are black in light and white in dark, like the
+ * grain overlay. 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="linen"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="linen"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			180deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) calc(var(--nxgt-bg-a1) * 0.6),
+				transparent
+			)
+		);
+	}
+	[data-background="linen"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="linen"] > [data-scene] .lw-v,
+	[data-background="linen"] > [data-scene] .lw-h {
+		fill: black;
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.1);
+		shape-rendering: crispEdges;
+	}
+	[data-background="linen"] > [data-scene] .lw-b {
+		fill-opacity: calc(var(--nxgt-bg-op) * 0.05);
+	}
+	[data-background="linen"] > [data-scene] .tx1,
+	[data-background="linen"] > [data-scene] .tx2 {
+		opacity: calc(var(--nxgt-bg-op) * 0.07);
+	}
+}

package/lib/backgrounds/css-react/marble.css

@@ -0,0 +1,55 @@
+/* The `marble` preset: polished marble. A seeded cloudy body and soft veins
+ * (an SVG: a cloud of `feTurbulence` on a seamless 960 px tile, and curves
+ * blurred soft; black in light, white in dark), very low in contrast, over a pale tint of the tone
+ * (`wash`). 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="marble"][data-intensity="vivid"][data-intensity] {
+		--nxgt-bg-a1: 8%;
+		--nxgt-bg-op: 0.72;
+	}
+	[data-background="marble"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background-image: linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-bg-c1) var(--nxgt-bg-a1), transparent),
+			color-mix(
+				in oklab,
+				var(--nxgt-bg-c2) calc(var(--nxgt-bg-a1) * 0.5),
+				transparent
+			)
+		);
+	}
+	[data-background="marble"] > [data-scene] > svg {
+		filter: invert(var(--nxgt-bg-grain-invert));
+	}
+	[data-background="marble"] > [data-scene] .tx1 {
+		opacity: calc(var(--nxgt-bg-op) * 0.08);
+	}
+	[data-background="marble"] > [data-scene] .mv-p,
+	[data-background="marble"] > [data-scene] .mh-p {
+		fill: none;
+		stroke: black;
+		stroke-linecap: round;
+		stroke-linejoin: round;
+	}
+	[data-background="marble"] > [data-scene] .mv {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.2 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+	[data-background="marble"] > [data-scene] .mh {
+		opacity: calc(
+			var(--nxgt-bg-op) *
+			0.07 *
+			(1 - var(--nxgt-bg-grain-invert) * 0.5)
+		);
+	}
+}

package/lib/backgrounds/css-react/music.css

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

package/lib/backgrounds/css-react/night-sky.css

@@ -0,0 +1,41 @@
+/* The `night-sky` preset: line drawings of one theme (see illustrated.css).
+ * Motion (opt-in, `animated`): a star twinkles, 14 to 24 s a leg. The builder sets
+ * the pace (`p1..p3`) and the delay (`l1..l4`) as classes, so the markup holds
+ * no inline style. */
+@import "./illustrated.css";
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-night-sky-tw {
+		to {
+			opacity: 0.2;
+		}
+	}
+
+	@layer components {
+		[data-background="night-sky"][data-animated] > [data-scene] .tw {
+			animation: nxgt-bg-night-sky-tw 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p1 {
+			animation-duration: 14s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p2 {
+			animation-duration: 19s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .p3 {
+			animation-duration: 24s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l1 {
+			animation-delay: 0s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l2 {
+			animation-delay: -3s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l3 {
+			animation-delay: -7s;
+		}
+		[data-background="night-sky"][data-animated] > [data-scene] .l4 {
+			animation-delay: -11s;
+		}
+	}
+}

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -19,6 +19,7 @@
 		"lib/backgrounds/backgrounds.css",
 		"lib/galleries/galleries.css",
 		"lib/backgrounds/css/*.css",
+		"lib/backgrounds/css-react/*.css",
 		"lib/components/**/*.css",
 		"docs",
 		"README.md",
@@ -151,6 +152,106 @@
 		"./backgrounds/*.css": {
 			"style": "./lib/backgrounds/css/*.css",
 			"default": "./lib/backgrounds/css/*.css"
+		},
+		"./backgrounds/hexagons.css": {
+			"style": "./lib/backgrounds/css-react/hexagons.css",
+			"default": "./lib/backgrounds/css-react/hexagons.css"
+		},
+		"./backgrounds/circuit.css": {
+			"style": "./lib/backgrounds/css-react/circuit.css",
+			"default": "./lib/backgrounds/css-react/circuit.css"
+		},
+		"./backgrounds/graph-paper.css": {
+			"style": "./lib/backgrounds/css-react/graph-paper.css",
+			"default": "./lib/backgrounds/css-react/graph-paper.css"
+		},
+		"./backgrounds/checker.css": {
+			"style": "./lib/backgrounds/css-react/checker.css",
+			"default": "./lib/backgrounds/css-react/checker.css"
+		},
+		"./backgrounds/diagonal-checker.css": {
+			"style": "./lib/backgrounds/css-react/diagonal-checker.css",
+			"default": "./lib/backgrounds/css-react/diagonal-checker.css"
+		},
+		"./backgrounds/chevrons.css": {
+			"style": "./lib/backgrounds/css-react/chevrons.css",
+			"default": "./lib/backgrounds/css-react/chevrons.css"
+		},
+		"./backgrounds/rays.css": {
+			"style": "./lib/backgrounds/css-react/rays.css",
+			"default": "./lib/backgrounds/css-react/rays.css"
+		},
+		"./backgrounds/halo.css": {
+			"style": "./lib/backgrounds/css-react/halo.css",
+			"default": "./lib/backgrounds/css-react/halo.css"
+		},
+		"./backgrounds/plasma.css": {
+			"style": "./lib/backgrounds/css-react/plasma.css",
+			"default": "./lib/backgrounds/css-react/plasma.css"
+		},
+		"./backgrounds/glass.css": {
+			"style": "./lib/backgrounds/css-react/glass.css",
+			"default": "./lib/backgrounds/css-react/glass.css"
+		},
+		"./backgrounds/ripples.css": {
+			"style": "./lib/backgrounds/css-react/ripples.css",
+			"default": "./lib/backgrounds/css-react/ripples.css"
+		},
+		"./backgrounds/blobs.css": {
+			"style": "./lib/backgrounds/css-react/blobs.css",
+			"default": "./lib/backgrounds/css-react/blobs.css"
+		},
+		"./backgrounds/paper.css": {
+			"style": "./lib/backgrounds/css-react/paper.css",
+			"default": "./lib/backgrounds/css-react/paper.css"
+		},
+		"./backgrounds/linen.css": {
+			"style": "./lib/backgrounds/css-react/linen.css",
+			"default": "./lib/backgrounds/css-react/linen.css"
+		},
+		"./backgrounds/concrete.css": {
+			"style": "./lib/backgrounds/css-react/concrete.css",
+			"default": "./lib/backgrounds/css-react/concrete.css"
+		},
+		"./backgrounds/marble.css": {
+			"style": "./lib/backgrounds/css-react/marble.css",
+			"default": "./lib/backgrounds/css-react/marble.css"
+		},
+		"./backgrounds/school.css": {
+			"style": "./lib/backgrounds/css-react/school.css",
+			"default": "./lib/backgrounds/css-react/school.css"
+		},
+		"./backgrounds/night-sky.css": {
+			"style": "./lib/backgrounds/css-react/night-sky.css",
+			"default": "./lib/backgrounds/css-react/night-sky.css"
+		},
+		"./backgrounds/bubbles.css": {
+			"style": "./lib/backgrounds/css-react/bubbles.css",
+			"default": "./lib/backgrounds/css-react/bubbles.css"
+		},
+		"./backgrounds/leaves.css": {
+			"style": "./lib/backgrounds/css-react/leaves.css",
+			"default": "./lib/backgrounds/css-react/leaves.css"
+		},
+		"./backgrounds/science.css": {
+			"style": "./lib/backgrounds/css-react/science.css",
+			"default": "./lib/backgrounds/css-react/science.css"
+		},
+		"./backgrounds/music.css": {
+			"style": "./lib/backgrounds/css-react/music.css",
+			"default": "./lib/backgrounds/css-react/music.css"
+		},
+		"./backgrounds/travel.css": {
+			"style": "./lib/backgrounds/css-react/travel.css",
+			"default": "./lib/backgrounds/css-react/travel.css"
+		},
+		"./backgrounds/sport.css": {
+			"style": "./lib/backgrounds/css-react/sport.css",
+			"default": "./lib/backgrounds/css-react/sport.css"
+		},
+		"./backgrounds/illustrated.css": {
+			"style": "./lib/backgrounds/css-react/illustrated.css",
+			"default": "./lib/backgrounds/css-react/illustrated.css"
 		}
 	},
 	"sideEffects": [
@@ -181,7 +282,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.25.0",
+		"@nxgt/material-core": "^0.26.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",