@nxgt/material 3.20.0 → 3.22.0

package/dist/backgrounds/css-react/icons.css

@@ -4,7 +4,10 @@
  * its constellation threads and its motion. A scene holds no `style`: an icon
  * carries a tone class (`k1..k3`, colours in scene.css) and the root carries
  * `ic-so0..ic-so10` and `ic-so85` (a duotone icon's second layer, in tenths, or 0.85) and, for
- * `duotone: 'tones'`, `ic-tones`.
+ * `duotone: 'tones'`, `ic-tones`. The rules are keyed on `icons` and `shapes`
+ * (the `shapes` preset with `motif.icons` draws the same icons). The
+ * tint (`ic-c-one`, `ic-c-palette`) is icons-tint.css; `ic-c-classic` is the
+ * tones below at full strength.
  *
  * The sprites read `--fa-primary-color`, `--fa-secondary-color` and
  * `--fa-secondary-opacity`; custom properties inherit into the `<use>` copy.
@@ -17,6 +20,7 @@
 @import "../css/motifs.css";
 
 @import "./icons-quiet.css";
+@import "./icons-tint.css";
 
 @layer components {
 	[data-background="icons"] > [data-layer="wash"] {
@@ -35,95 +39,158 @@
 			);
 	}
 
-	[data-background="icons"] > [data-scene] {
+	:is([data-background="icons"], [data-background="shapes"]) > [data-scene] {
 		overflow: hidden;
 	}
 
 	/* Primary layer: the icon's tone. Second layer: the same tone, faded. */
-	[data-background="icons"] > [data-scene] .ic.k1 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k1 {
 		--fa-primary-color: var(--nxgt-bg-c1);
 		--fa-secondary-color: var(--nxgt-bg-c1);
 	}
-	[data-background="icons"] > [data-scene] .ic.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k2 {
 		--fa-primary-color: var(--nxgt-bg-c2);
 		--fa-secondary-color: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic.k3 {
 		--fa-primary-color: var(--nxgt-bg-c3);
 		--fa-secondary-color: var(--nxgt-bg-c3);
 	}
 
 	/* Two tones: the second layer takes the next tone. */
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k1 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k1 {
 		--fa-secondary-color: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k2 {
 		--fa-secondary-color: var(--nxgt-bg-c3);
 	}
-	[data-background="icons"] > [data-scene] > .ic-tones .ic.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-tones
+		.ic.k3 {
 		--fa-secondary-color: var(--nxgt-bg-c1);
 	}
 
 	/* The second layer's opacity, in tenths (`secondaryOpacity`). */
-	[data-background="icons"] > [data-scene] > .ic-so0 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so0
+		.ic {
 		--fa-secondary-opacity: 0;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so1 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so1
+		.ic {
 		--fa-secondary-opacity: 0.1;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so2 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so2
+		.ic {
 		--fa-secondary-opacity: 0.2;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so3 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so3
+		.ic {
 		--fa-secondary-opacity: 0.3;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so4 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so4
+		.ic {
 		--fa-secondary-opacity: 0.4;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so5 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so5
+		.ic {
 		--fa-secondary-opacity: 0.5;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so6 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so6
+		.ic {
 		--fa-secondary-opacity: 0.6;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so7 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so7
+		.ic {
 		--fa-secondary-opacity: 0.7;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so8 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so8
+		.ic {
 		--fa-secondary-opacity: 0.8;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so9 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so9
+		.ic {
 		--fa-secondary-opacity: 0.9;
 	}
-	[data-background="icons"] > [data-scene] > .ic-so10 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so10
+		.ic {
 		--fa-secondary-opacity: 1;
 	}
 	/* 0.85: the default of two tones, or a `secondaryOpacity` of 0.85. */
-	[data-background="icons"] > [data-scene] > .ic-so85 .ic {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		> .ic-so85
+		.ic {
 		--fa-secondary-opacity: 0.85;
 	}
 
 	/* The constellation's threads and dots. */
-	[data-background="icons"] > [data-scene] .ic-ln {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln {
 		stroke: var(--nxgt-bg-c1);
 		stroke-width: 0.7;
 		stroke-linecap: round;
 		opacity: 0.4;
 	}
-	[data-background="icons"] > [data-scene] .ic-dt {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt {
 		fill: var(--nxgt-bg-c1);
 		opacity: 0.5;
 	}
-	[data-background="icons"] > [data-scene] .ic-ln.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln.k2 {
 		stroke: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic-ln.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-ln.k3 {
 		stroke: var(--nxgt-bg-c3);
 	}
-	[data-background="icons"] > [data-scene] .ic-dt.k2 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt.k2 {
 		fill: var(--nxgt-bg-c2);
 	}
-	[data-background="icons"] > [data-scene] .ic-dt.k3 {
+	:is([data-background="icons"], [data-background="shapes"])
+		> [data-scene]
+		.ic-dt.k3 {
 		fill: var(--nxgt-bg-c3);
 	}
 }
@@ -151,26 +218,26 @@
 	}
 
 	@layer components {
-		[data-background="icons"][data-animated] > [data-scene] .ia {
+		[data-background][data-animated] > [data-scene] .ia {
 			animation: nxgt-bg-ic-1 18s ease-in-out infinite alternate
 				var(--nxgt-bg-play, running);
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv2 {
+		[data-background][data-animated] > [data-scene] .iv2 {
 			animation-name: nxgt-bg-ic-2;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv3 {
+		[data-background][data-animated] > [data-scene] .iv3 {
 			animation-name: nxgt-bg-ic-3;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .iv4 {
+		[data-background][data-animated] > [data-scene] .iv4 {
 			animation-name: nxgt-bg-ic-4;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id2 {
+		[data-background][data-animated] > [data-scene] .id2 {
 			animation-delay: -4s;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id3 {
+		[data-background][data-animated] > [data-scene] .id3 {
 			animation-delay: -9s;
 		}
-		[data-background="icons"][data-animated] > [data-scene] .id4 {
+		[data-background][data-animated] > [data-scene] .id4 {
 			animation-delay: -13s;
 		}
 	}

package/dist/backgrounds.js

@@ -1,3 +1,3 @@
-import { r as e, t } from "./background-Ce7M5V42.js";
+import { r as e, t } from "./background-BtSZsTvY.js";
 import { BACKGROUND_INTENSITIES as n, BACKGROUND_PRESETS as r, BACKGROUND_TONES as i, MOTIF_SHAPES as a, MOTIF_SHAPES_ALL as o, SHIPPED_BACKGROUND_PRESETS as s } from "@nxgt/material-core/backgrounds";
 export { e as AVAILABLE_BACKGROUND_PRESETS, n as BACKGROUND_INTENSITIES, r as BACKGROUND_PRESETS, i as BACKGROUND_TONES, t as Background, a as MOTIF_SHAPES, o as MOTIF_SHAPES_ALL, s as SHIPPED_BACKGROUND_PRESETS };

package/dist/{celestial-scene-DaOsRFF3.js → celestial-scene-8Muu6f7O.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./scene-svg-DJKa5vsg.js";
-import { i as t, r as n } from "./scene-options-CCy3V7XS.js";
+import { i as t, r as n } from "./scene-options-2zNF3ZkQ.js";
 import { useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { buildCelestialScene as a, buildSkyScene as o } from "@nxgt/material-core/backgrounds/celestial";

package/dist/components/background-shared.css

@@ -0,0 +1,5 @@
+/* What the Background in `/components` always needs: the base, the gradient
+ * preset and the motion rules. Imported once by components/components.css. */
+@import "../backgrounds/css/base.css";
+@import "../backgrounds/css/gradient.css";
+@import "../backgrounds/css/motion.css";

package/dist/components/components.css

@@ -56,6 +56,7 @@
 @import "./ui/layout/app-shell/route-transition.css";
 @import "./ui/layout/app-shell/activity-backdrop.css";
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
+@import "./ui/layout/auth-card/auth-card-backdrop.css";
 /* DataTable cards and tiles: the item shell (hairline, tint, start bar, columns by the list's width). */
 @import "./ui/collections/data-table/data-table-items.css";
 @import "./ui/collections/data-table/data-table-items-compact.css";
@@ -192,12 +193,8 @@
 /* Gallery: the View Transition from a tile to its lightbox. */
 @import "./ui/media/galleries/gallery-transitions.css";
 @import "./print-only.css";
-@import "./ui/fields/attributes/attribute-form/attribute-form.css";
-@import "./ui/fields/attributes/attribute-values-form/attribute-values-form.css";
-/* Background (from /components): the gradient preset's CSS, plain and shared
- * (lib/backgrounds/css). The other presets are opt-in: backgrounds.css. */
-@import "../backgrounds/css/base.css";
-@import "../backgrounds/css/gradient.css";
-@import "../backgrounds/css/motion.css";
+@import "./ui/fields/attributes/attributes.css";
+/* Background: the gradient preset's CSS, shared (lib/backgrounds/css); the other presets are opt-in: backgrounds.css. */
+@import "./background-shared.css";
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
 @import "./ui/widgets/drawing/drawing-animate.css";

package/dist/components/ui/display/chip/chip-parts.css

@@ -1,5 +1,5 @@
 /* Chip: focus, the dismiss button (drawn
- * small, a 24x24 target through ::after, its own ring), disabled, the dashed
+ * small in a 24x24 box, 44x44 on a coarse pointer, its own ring), disabled, the dashed
  * "add" chip and the tones. */
 @layer components {
 	/* Focus: the chip's ring (2px primary-text, 2px away); the ✕ its own. */
@@ -8,54 +8,41 @@
 		outline-color: var(--primary-text);
 		outline-width: 2px;
 	}
+	/* The ✕ is drawn small (--chip-x), but its own box is the target (#1584):
+	 * axe's `target-size` reads the bounding box, never a pseudo-element. The
+	 * box is 24x24 (44x44 on a coarse pointer, #1067, #1102); the padding with
+	 * `background-clip: content-box` keeps the hover disc and the focus ring at
+	 * the drawn size, and the negative margin takes the extra back, so the chip
+	 * and the glyph are unchanged. */
 	.nxgt-chip > [data-slot="chip-dismiss"] {
+		--chip-hit: 24px;
+		--chip-pad: calc((var(--chip-hit) - var(--chip-x)) / 2);
 		position: relative;
 		display: inline-grid;
 		place-items: center;
 		flex: none;
-		width: var(--chip-x);
-		height: var(--chip-x);
-		padding: 0;
+		box-sizing: border-box;
+		width: var(--chip-hit);
+		height: var(--chip-hit);
+		margin: calc(-1 * var(--chip-pad));
+		padding: var(--chip-pad);
 		border: 0;
 		border-radius: 9999px;
 		background: transparent;
+		background-clip: content-box;
 		color: color-mix(in oklab, var(--foreground) 62%, transparent);
 		cursor: pointer;
 		/* Width 0 at rest: forced colours would paint a transparent outline. */
 		outline: 0 solid transparent;
-		outline-offset: 1px;
+		outline-offset: calc(1px - var(--chip-pad));
 		transition:
 			background-color 120ms ease-out,
 			color 120ms ease-out,
 			outline-color 120ms ease-out;
 	}
-	.nxgt-chip > [data-slot="chip-dismiss"]::after {
-		content: "";
-		position: absolute;
-		inset: calc((var(--chip-x) - 24px) / 2);
-		border-radius: 9999px;
-	}
-	/* Touch (#1067, #1102): on a coarse pointer the ✕ is a real 44x44 box,
-	 * not a pseudo-element, which a tap-target check and axe do not measure.
-	 * The negative margin takes the extra back, so the chip is unchanged, and
-	 * the padding with `background-clip: content-box` keeps the hover disc
-	 * and the focus ring at the drawn size (the outline is pulled in by the
-	 * padding). */
 	@media (pointer: coarse) {
 		.nxgt-chip > [data-slot="chip-dismiss"] {
-			--chip-pad: calc((44px - var(--chip-x)) / 2);
-			box-sizing: border-box;
-			width: 44px;
-			height: 44px;
-			margin: calc(-1 * var(--chip-pad));
-			padding: var(--chip-pad);
-			background-clip: content-box;
-			outline-offset: calc(1px - var(--chip-pad));
-		}
-		/* The box is the target now: the 24px pseudo-element would reach
-		 * past it. */
-		.nxgt-chip > [data-slot="chip-dismiss"]::after {
-			inset: 0;
+			--chip-hit: 44px;
 		}
 	}
 	.nxgt-chip > [data-slot="chip-dismiss"] > svg {

package/dist/components/ui/fields/attributes/attributes.css

@@ -0,0 +1,3 @@
+/* The attribute forms' styles, imported once by components/components.css. */
+@import "./attribute-form/attribute-form.css";
+@import "./attribute-values-form/attribute-values-form.css";

package/dist/components/ui/layout/app-shell/activity-backdrop-shapes.css

@@ -18,7 +18,7 @@
 		visibility: hidden;
 	}
 
-	/* A shape over the page's text or controls fades out and comes back once
+	/* A shape over the page's text, controls or surfaces (cards, tables, lists) fades out and comes back once
 	 * clear (watch-content.ts): it is hidden, never moved. A compound body (the
 	 * moon, the planet, the eclipse: `.pt.mg`) is hidden whole, with its halo
 	 * (`.pt.mh`). The scene stays invisible until the first check, so nothing

package/dist/components/ui/layout/auth-card/auth-card-backdrop.css

@@ -0,0 +1,30 @@
+/* An AuthCard's backdrop (auth-card-backdrop.tsx) keeps its shapes the way
+ * ActivityLayout's does (activity-backdrop-shapes.css): whole inside its layer
+ * and clear of the card and the brand row. Plain CSS in `@layer components`. */
+@layer components {
+	[data-slot="auth-card-backdrop"] > [data-background] {
+		width: 100%;
+		height: 100%;
+	}
+	/* The scene stays hidden until the first pass; a shape that crosses the
+	 * layer's edge is hidden, never cut. */
+	[data-slot="auth-card-backdrop"] [data-background]:not([data-checked]) .mo,
+	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-outside] {
+		visibility: hidden;
+	}
+	/* A shape over the card or the brand row fades out (watch-content.ts). */
+	[data-slot="auth-card-backdrop"] [data-background] .mo > *,
+	[data-slot="auth-card-backdrop"] [data-background] .pt {
+		transition: opacity 150ms ease;
+	}
+	[data-slot="auth-card-backdrop"] [data-background] .mo > [data-hidden],
+	[data-slot="auth-card-backdrop"] [data-background] .pt[data-hidden] {
+		opacity: 0 !important;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		[data-slot="auth-card-backdrop"] [data-background] .mo > *,
+		[data-slot="auth-card-backdrop"] [data-background] .pt {
+			transition: none;
+		}
+	}
+}