@nxgt/material 3.74.0 → 3.75.0

package/lib/backgrounds/css-react/celestial-day.css

@@ -0,0 +1,85 @@
+/* The daytime skies, `day-sky` and `dawn-sky`: the dawn's wash, the sun's rays,
+ * the horizon glow and the clouds. Imported by celestial.css, which holds the
+ * rest of the celestial presets and the shared scene; see its header.
+ *
+ * Motion (opt-in, `animated`): rays turn, the glow swells, clouds drift;
+ * never under `prefers-reduced-motion`. React only. */
+@layer components {
+	/* The dawn's wash: a pool low on the left where the sun rises, a lighter one above. */
+	[data-background="dawn-sky"] > [data-layer="wash"] {
+		position: absolute;
+		inset: 0;
+		background:
+			radial-gradient(
+				ellipse 80% 45% at 22% 74%,
+				color-mix(in oklab, var(--nxgt-bg-c2) var(--nxgt-bg-a2), transparent),
+				transparent 72%
+			),
+			radial-gradient(
+				ellipse 70% 40% at 80% 4%,
+				color-mix(in oklab, var(--nxgt-bg-c3) var(--nxgt-bg-a1), transparent),
+				transparent 70%
+			);
+	}
+
+	/* The sun's rays turn about the sun, the dawn's glow swells from the horizon. */
+	[data-background] > [data-scene][data-celestial] .sn > path,
+	[data-background] > [data-scene][data-celestial] .hz {
+		transform-box: fill-box;
+		transform-origin: 50% 100%;
+	}
+	[data-background] > [data-scene][data-celestial] .sn > path {
+		transform-origin: center;
+	}
+
+	/* The clouds drift sideways from their own box. */
+	[data-background]
+		> [data-scene][data-celestial]
+		:is(.cl-day-sky, .cl-dawn-sky)
+		.cd
+		> .mo {
+		transform-box: fill-box;
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	@keyframes nxgt-bg-sky-turn {
+		to {
+			transform: rotate(30deg);
+		}
+	}
+	@keyframes nxgt-bg-sky-glow {
+		to {
+			transform: scaleY(1.12);
+		}
+	}
+	@keyframes nxgt-bg-sky-cloud {
+		to {
+			transform: translateX(14px);
+		}
+	}
+
+	@layer components {
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-day-sky
+			.cd
+			> .mo,
+		[data-background][data-animated]
+			> [data-scene][data-celestial]
+			.cl-dawn-sky
+			.cd
+			> .mo {
+			animation: nxgt-bg-sky-cloud 18s ease-in-out var(--nxgt-sky-delay, 0s)
+				infinite alternate var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated] > [data-scene][data-celestial] .sn > path {
+			animation: nxgt-bg-sky-turn 60s linear infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+		[data-background][data-animated] > [data-scene][data-celestial] .hz {
+			animation: nxgt-bg-sky-glow 14s ease-in-out infinite alternate
+				var(--nxgt-bg-play, running);
+		}
+	}
+}

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

@@ -1,15 +1,14 @@
 /* The celestial presets (`eclipse`, `meteor-shower`, `ringed-planet`,
- * `northern-lights`) and the `sky` overlay, which draws the moon or one of
- * them over any preset. Core's `/backgrounds/celestial` builds the scenes: the
- * root is `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes
- * of scene.css, and a scene holds no inline style. Both kinds of scene sit in
- * a `[data-scene][data-celestial]` div, which is what this file styles, so the
- * look is the same alone and as a sky. Discreet like `moon.css`: a faint
- * watermark in light (multiplied into the page), silver light in dark.
- *
- * Motion (opt-in, `animated`): stars twinkle, meteors glide, ribbons drift;
- * never under `prefers-reduced-motion`. React only. */
+ * `northern-lights`; `day-sky` and `dawn-sky` are in celestial-day.css) and
+ * the `sky` overlay, which draws the moon or one of them over any preset.
+ * Core's `/backgrounds/celestial` builds the scenes: the root is
+ * `mn cl-<preset>`, the colours are the `k1..k3` and `s1..s3` classes of
+ * scene.css, and a scene holds no inline style. Both kinds sit in a
+ * `[data-scene][data-celestial]` div, which this file styles. Discreet like
+ * `moon.css`: a faint watermark in light, silver light in dark. Motion
+ * (opt-in, `animated`): never under `prefers-reduced-motion`. React only. */
 @import "../css/scene.css";
+@import "./celestial-day.css";
 
 @layer components {
 	/* The wash behind a celestial preset, as the moon's: two faint pools of
@@ -17,7 +16,8 @@
 	:is(
 		[data-background="eclipse"],
 		[data-background="meteor-shower"],
-		[data-background="ringed-planet"]
+		[data-background="ringed-planet"],
+		[data-background="day-sky"]
 	) > [data-layer="wash"] {
 		position: absolute;
 		inset: 0;

package/lib/components/ui/collections/data-table/data-table-items-actions.css

@@ -0,0 +1,37 @@
+/* DataTable cards and tiles: the trailing action slot (`item.Actions`,
+ * partials/layouts/data-table-item-actions.tsx). A sibling of the title, never
+ * inside its link, raised above the link's stretched `::after` (z-index 1, as
+ * the corner checkbox is) so a click on it never follows the card. At least a
+ * 44px target, at the item's end; the item keeps room for it. */
+@layer components {
+	[data-slot="data-table-item-actions"] {
+		position: absolute;
+		z-index: 1;
+		inset-inline-end: 0.25rem;
+		inset-block-start: 0.625rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.25rem;
+		min-width: 2.75rem;
+		min-height: 2.75rem;
+	}
+	/* A tile: the slot is centred on the tile, as its checkbox is. */
+	[data-slot="data-table-tiles"] [data-slot="data-table-item-actions"] {
+		inset-block-start: 50%;
+		translate: 0 -50%;
+	}
+	[data-slot="data-table-cards"][data-density="compact"]
+		> [data-slot="data-table-item"]
+		> [data-slot="data-table-item-actions"],
+	[data-slot="data-table-cards"][data-card-density="compact"]
+		> [data-slot="data-table-item"]
+		> [data-slot="data-table-item-actions"] {
+		inset-block-start: 0.375rem;
+	}
+	/* Specific enough to win over the density and tile paddings above it. */
+	[data-slot="data-table-items"]
+	[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"]) {
+		padding-inline-end: 3.25rem;
+	}
+}

package/lib/components/ui/collections/data-table/data-table-items-chevron.css

@@ -0,0 +1,28 @@
+/* DataTable cards and tiles: the trailing chevron of a linked `item.Title`
+ * (partials/layouts/data-table-item-title.tsx), the affordance `item.Row`
+ * draws in its own row. Decorative: centred on the item at its end, under the
+ * pointer (the link's `::after` takes the click), and the item keeps room for
+ * it. An item with an `item.Actions` slot leaves it out: that slot owns the
+ * item's end. */
+@layer components {
+	[data-slot="item-chevron"][data-placement="item"] {
+		position: absolute;
+		inset-inline-end: 0.75rem;
+		inset-block-start: 50%;
+		translate: 0 -50%;
+		pointer-events: none;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has([data-placement="item"]) {
+		padding-inline-end: 2.25rem;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"])
+		[data-placement="item"] {
+		display: none;
+	}
+	[data-slot="data-table-items"]
+		[data-slot="data-table-item"]:has(> [data-slot="data-table-item-actions"]) {
+		padding-inline-end: 3.25rem;
+	}
+}

package/lib/components/ui/collections/data-table/data-table-items-tiles.css

@@ -13,6 +13,13 @@
 		border: 1px solid var(--item-border);
 		border-radius: var(--item-radius);
 	}
+	/* A ServerTable on a phone has no panel of its own: the tile list sits at
+	 * the page gutter, in line with the heading (#2292). */
+	@media (max-width: 767.98px) {
+		[data-slot="server-table"] [data-slot="data-table-tiles"] {
+			margin-inline: 0;
+		}
+	}
 	[data-slot="data-table-tiles"] > [data-slot="data-table-item"] {
 		padding: 0.75rem 1rem;
 		min-height: 4.5rem;

package/lib/components/ui/collections/data-table/index.css

@@ -5,10 +5,14 @@
  *   data-table-items-bar.css      the list bar
  *   data-table-items-forced.css   forced colours
  *   data-table-items-tiles.css    tiles: one column, one surface
- *   data-table-items-record.css   the compact record row of a tile (item.Row) */
+ *   data-table-items-record.css   the compact record row of a tile (item.Row)
+ *   data-table-items-actions.css  the trailing action slot (item.Actions)
+ *   data-table-items-chevron.css  the chevron of a linked item.Title */
 @import "./data-table-items.css";
 @import "./data-table-items-compact.css";
 @import "./data-table-items-bar.css";
 @import "./data-table-items-forced.css";
 @import "./data-table-items-tiles.css";
 @import "./data-table-items-record.css";
+@import "./data-table-items-actions.css";
+@import "./data-table-items-chevron.css";

package/lib/components/ui/display/secret-card/secret-card.css

@@ -1,4 +1,4 @@
-/* SecretCard: a card whose secret face is not rendered until it is revealed.
+/* SecretCard (`data-size="sm"` is the compact card): a card whose secret face is not rendered until it is revealed.
  * It carries `data-tone`, so the tone's tokens resolve on it. The hidden face
  * is a quiet diagonal pattern in the tone's ring colour. The card's border is
  * that colour too (set by a utility class on the Card, which wins over the
@@ -40,6 +40,10 @@
 		font-weight: 600;
 		user-select: text;
 	}
+	.nxgt-secret-card[data-size="sm"] [data-slot="secret-card-pattern"],
+	.nxgt-secret-card[data-size="sm"] [data-slot="secret-card-back"] {
+		min-height: 0;
+	}
 	.nxgt-secret-card [data-slot="secret-card-actions"] {
 		flex-wrap: wrap;
 		gap: 0.5rem;

package/lib/components/ui/feedback/celebration/celebration.css

@@ -0,0 +1,49 @@
+/* Celebration: a one-shot burst of confetti. Each piece is a span that flies
+ * out, falls and fades once (`animation-iteration-count: 1`, `forwards`: it
+ * never loops). Colours are theme tokens; the layer ignores the pointer.
+ * Under prefers-reduced-motion the component renders nothing, and
+ * reduced-motion.css ends any animation of a `data-slot` element anyway. */
+@layer components {
+	.nxgt-celebration {
+		position: fixed;
+		inset: 0;
+		z-index: 60;
+		overflow: hidden;
+		pointer-events: none;
+	}
+	.nxgt-celebration-piece {
+		position: absolute;
+		left: 50%;
+		top: 45%;
+		width: 0.5rem;
+		height: 0.9rem;
+		border-radius: 1px;
+		background-color: var(--nxgt-celebration-color);
+		animation: nxgt-celebration-burst var(--nxgt-celebration-duration, 2400ms)
+			var(--nxgt-ease-effects, ease-out) var(--nxgt-celebration-delay, 0ms) 1
+			both;
+	}
+}
+
+@keyframes nxgt-celebration-burst {
+	0% {
+		opacity: 1;
+		transform: translate(0, 0) rotate(0deg);
+	}
+	35% {
+		opacity: 1;
+		transform: translate(
+				calc(var(--nxgt-celebration-x) * 0.7),
+				var(--nxgt-celebration-up)
+			)
+			rotate(calc(var(--nxgt-celebration-spin) * 0.4));
+	}
+	100% {
+		opacity: 0;
+		transform: translate(
+				var(--nxgt-celebration-x),
+				var(--nxgt-celebration-down)
+			)
+			rotate(var(--nxgt-celebration-spin));
+	}
+}

package/lib/components/ui/feedback/feedback.css

@@ -1,6 +1,8 @@
 @import "./spinner/spinner.css";
 /* Moment: the full-screen announcement. */
 @import "./moment/moment.css";
+/* Celebration: the one-shot confetti burst. */
+@import "./celebration/celebration.css";
 /* Illustration: the classes of the state scenes (EmptyState, ErrorState, @nxgt/material/illustrations). */
 @import "./state-frame/illustration.css";
 @import "./progress/progress.css";

package/lib/theme-picker/theme-picker.css

@@ -14,6 +14,7 @@
 @import "./theme-tile-background.css";
 @import "./theme-tile-textures.css";
 @import "./theme-tile-textures-night.css";
+@import "./theme-tile-textures-day.css";
 @import "./theme-tile-icons.css";
 @import "./theme-picker-list.css";
 @layer components {

package/lib/theme-picker/theme-tile-textures-day.css

@@ -0,0 +1,43 @@
+/* ThemePicker's mini background, the two daytime skies: a sun and the clouds
+ * of `day-sky`, a low sun over its glow for `dawn-sky` (see theme-tile-textures.css). */
+@layer components {
+	[data-slot="theme-tile-background"][data-preset="day-sky"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 80% 30%,
+				color-mix(in oklab, var(--mini-c) 60%, transparent) 0.4rem,
+				transparent 0.42rem
+			),
+			radial-gradient(
+				ellipse 1.1rem 0.3rem at 26% 24%,
+				color-mix(in oklab, var(--mini-a) 40%, transparent) 90%,
+				transparent
+			),
+			radial-gradient(
+				ellipse 0.8rem 0.25rem at 52% 62%,
+				color-mix(in oklab, var(--mini-a) 30%, transparent) 90%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+	[data-slot="theme-tile-background"][data-preset="dawn-sky"] {
+		--mini-pattern:
+			radial-gradient(
+				circle at 24% 72%,
+				color-mix(in oklab, var(--mini-c) 60%, transparent) 0.4rem,
+				transparent 0.42rem
+			),
+			linear-gradient(
+				180deg,
+				transparent 40%,
+				color-mix(in oklab, var(--mini-b) 40%, transparent) 72%,
+				transparent 100%
+			),
+			radial-gradient(
+				ellipse 1.3rem 0.18rem at 70% 22%,
+				color-mix(in oklab, var(--mini-a) 36%, transparent) 90%,
+				transparent
+			);
+		--mini-size: 100% 100%;
+	}
+}

package/lib/themes/teal.css

@@ -2,12 +2,14 @@
  * Seeds: primary oklch(0.5 0.105 185), secondary oklch(0.52 0.09 215), tertiary oklch(0.52 0.12 60), neutral hue 190, tint 0.8.
  * Contrast: 65 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.088 (lowered to fit sRGB or AA).
- * lightness-moved: secondary: lightness 0.520 to 0.507 for AA.
- * chroma-lowered: secondary: chroma 0.090 to 0.090 (lowered to fit sRGB or AA).
+ * lightness-moved: secondary: lightness 0.520 to 0.490 for AA.
+ * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
+ * lightness-moved: ring (dark): lightness moved 0.015 for AA under this tint.
+ * lightness-moved: track (dark): lightness moved 0.005 for AA under this tint.
  */
 [data-nxgt-theme="teal"] {
 	--radius: 0.5rem;
-	--background: oklch(1 0 0);
+	--background: oklch(0.973 0.0064 190);
 	--foreground: oklch(0.227 0.0136 190);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
 	--card: oklch(1 0 0);
@@ -19,7 +21,7 @@
 	--primary-foreground: oklch(0.984 0.003 190);
 	--primary-text: color-mix(in oklab, var(--primary) 96%, black);
 	--primary-indicator: var(--primary);
-	--secondary: oklch(0.5075 0.0897 215);
+	--secondary: oklch(0.49 0.0866 215);
 	--secondary-foreground: oklch(0.984 0.003 190);
 	--tertiary: var(--strix);
 	--tertiary-foreground: oklch(0.984 0.003 190);
@@ -76,13 +78,13 @@
 [data-nxgt-theme="teal"]:is(.dark, [data-theme="dark"]),
 :is(.dark, [data-theme="dark"]) [data-nxgt-theme="teal"],
 [data-nxgt-theme="teal"] :is(.dark, [data-theme="dark"]):not([data-nxgt-theme="teal"] [data-nxgt-theme]:not([data-nxgt-theme="teal"]), [data-nxgt-theme="teal"] [data-nxgt-theme]:not([data-nxgt-theme="teal"]) *) {
-	--background: oklch(0.15 0.026 273);
+	--background: oklch(0.192 0.0128 190);
 	--foreground: oklch(0.943 0.0096 190);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
-	--card: oklch(0.22 0.0152 190);
+	--card: oklch(0.262 0.0152 190);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 190);
-	--popover: oklch(0.22 0.0152 190);
+	--popover: oklch(0.262 0.0152 190);
 	--popover-foreground: oklch(0.943 0.0096 190);
 	--primary: oklch(0.5 0.0881 185);
 	--primary-foreground: oklch(0.995 0.002 190);
@@ -91,15 +93,15 @@
 	--secondary: oklch(0.675 0.09 215);
 	--secondary-foreground: oklch(0.995 0.002 190);
 	--tertiary: oklch(0.7 0.12 60);
-	--tertiary-foreground: oklch(0.15 0.026 273);
+	--tertiary-foreground: oklch(0.192 0.0128 190);
 	--strix: oklch(0.52 0.12 60);
-	--muted: oklch(0.258 0.0176 190);
+	--muted: oklch(0.3 0.0176 190);
 	--muted-foreground: oklch(0.725 0.024 190);
-	--track: oklch(0.53 0.024 190);
+	--track: oklch(0.535 0.024 190);
 	--track-fill: oklch(0.85 0.09 185);
 	--tooltip: oklch(0.925 0.0096 190);
 	--tooltip-foreground: oklch(0.446 0.0344 190);
-	--accent: oklch(0.28 0.0176 190);
+	--accent: oklch(0.3 0.0176 190);
 	--accent-foreground: oklch(0.943 0.0096 190);
 	--error: oklch(0.577 0.245 27.33);
 	--error-foreground: oklch(0.995 0.002 190);
@@ -111,17 +113,17 @@
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 190);
 	--destructive: oklch(0.704 0.191 22.216);
-	--border: oklch(0.289 0.02 190);
-	--input: oklch(0.328 0.0216 190);
-	--ring: oklch(0.551 0.024 190);
-	--sidebar: oklch(0.19 0.0152 190);
+	--border: oklch(0.331 0.02 190);
+	--input: oklch(0.37 0.0216 190);
+	--ring: oklch(0.566 0.024 190);
+	--sidebar: oklch(0.232 0.0152 190);
 	--sidebar-foreground: oklch(0.943 0.0096 190);
 	--sidebar-primary: var(--primary);
 	--sidebar-primary-foreground: oklch(0.995 0.002 190);
-	--sidebar-accent: oklch(0.228 0.0176 190);
+	--sidebar-accent: oklch(0.27 0.0176 190);
 	--sidebar-accent-foreground: oklch(0.943 0.0096 190);
-	--sidebar-border: oklch(0.259 0.02 190);
-	--sidebar-ring: oklch(0.551 0.024 190);
+	--sidebar-border: oklch(0.301 0.02 190);
+	--sidebar-ring: oklch(0.566 0.024 190);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
 	--chart-3: oklch(0.769 0.188 70.08);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.74.0",
+	"version": "3.75.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -323,6 +323,10 @@
 			"style": "./lib/backgrounds/css-react/celestial.css",
 			"default": "./lib/backgrounds/css-react/celestial.css"
 		},
+		"./backgrounds/celestial-day.css": {
+			"style": "./lib/backgrounds/css-react/celestial-day.css",
+			"default": "./lib/backgrounds/css-react/celestial-day.css"
+		},
 		"./backgrounds/moon.css": {
 			"style": "./lib/backgrounds/css-react/moon.css",
 			"default": "./lib/backgrounds/css-react/moon.css"
@@ -372,7 +376,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.47.1",
+		"@nxgt/material-core": "^0.48.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",