@nxgt/material 3.73.0 → 3.75.0

package/dist/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/dist/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/dist/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/dist/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;
+	}
+}