@nxgt/material 3.73.0 → 3.74.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/feedback/feedback.css

@@ -1,4 +1,6 @@
 @import "./spinner/spinner.css";
+/* Moment: the full-screen announcement. */
+@import "./moment/moment.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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.73.0",
+	"version": "3.74.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -459,7 +459,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",