@nxgt/material 3.73.0 → 3.75.0

package/lib/components/ui/display/seat-ring/seat-ring.css

@@ -101,6 +101,32 @@
 		border-style: dashed;
 		background: transparent;
 	}
+	/* Out: dimmed, the name struck through, the avatar greyed, and the word
+	 * "Out" written under the name, so colour and opacity are never the only cue. */
+	.nxgt-seat-ring [data-out] {
+		background: color-mix(in oklab, var(--muted) 60%, transparent);
+		border-color: var(--border);
+	}
+	.nxgt-seat-ring [data-out] [data-slot="seat-ring-avatar"] {
+		opacity: 0.55;
+		filter: grayscale(1);
+	}
+	.nxgt-seat-ring [data-out] [data-slot="seat-ring-label"] {
+		color: var(--muted-foreground);
+		text-decoration: line-through;
+		text-decoration-thickness: 2px;
+	}
+	.nxgt-seat-ring [data-slot="seat-ring-out"] {
+		padding-inline: 0.375rem;
+		border: 1px solid currentColor;
+		border-radius: 9999px;
+		color: var(--muted-foreground);
+		font-size: 0.6875rem;
+		font-weight: 600;
+		line-height: 1.25rem;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
 	.nxgt-seat-ring [data-highlighted] {
 		border-color: var(--primary-indicator, var(--primary));
 		box-shadow: 0 0 0 2px var(--primary-indicator, var(--primary));

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,4 +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/components/ui/feedback/moment/moment.css

@@ -0,0 +1,22 @@
+/* Moment: a full-screen one-off announcement. The surface is the tone's
+ * container (the `data-tone` channel), the text the foreground colour, so it
+ * reads at AA in light and dark. It fades in and its picture pops in (the
+ * keyframes are dialog.css's `nxgt-fade-in` and the `nxgt-pop` of styles.css);
+ * under prefers-reduced-motion reduced-motion.css ends both at once (the
+ * content carries `data-slot`). */
+@layer components {
+	.nxgt-moment {
+		background-color: var(--nxgt-tone-container, var(--background));
+		color: var(--foreground);
+	}
+	.nxgt-moment[data-state="open"] {
+		animation: nxgt-fade-in 240ms var(--nxgt-ease-effects) backwards;
+	}
+	.nxgt-moment[data-state="closed"] {
+		animation: nxgt-fade-out 160ms var(--nxgt-ease-emphasized-accelerate) both;
+	}
+	.nxgt-moment[data-state="open"] [data-slot="moment-illustration"] {
+		animation: nxgt-pop 520ms var(--nxgt-ease-emphasized-decelerate) 80ms
+			backwards;
+	}
+}

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.73.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",
@@ -459,7 +463,7 @@
 		"@fontsource-variable/inter": "^5",
 		"@fortawesome/fontawesome-free": "7.3.1",
 		"@nxgt/material-testing": "0.0.0",
-		"@nxgt/playwright": "^0.9.7",
+		"@nxgt/playwright": "^0.11.0",
 		"@react-leaflet/core": "^3.0.0",
 		"@react-pdf/renderer": "^4.9.0",
 		"@storybook/addon-a11y": "10.6.0",