@nxgt/material 3.12.0 → 3.13.0

package/lib/backgrounds/css-react/icons-quiet.css

@@ -0,0 +1,43 @@
+/* `iconMotif.quiet` of the `icons` preset (React only). */
+@layer components {
+	/* `quiet`: the icons fade out over a band, so text can sit on the motif. The
+	 * band is `--background-quiet` wide (42%), then the icons fade back in over
+	 * 30%. `start` and `end` follow the reading direction. A mask, not a colour:
+	 * the text underneath keeps the wash's own contrast. */
+	[data-background="icons"] > [data-scene] > :is(.ic-q-start, .ic-q-end) {
+		--nxgt-quiet-to: to right;
+		-webkit-mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+		mask-image: linear-gradient(
+			var(--nxgt-quiet-to),
+			transparent var(--background-quiet, 42%),
+			#000 calc(var(--background-quiet, 42%) + 30%)
+		);
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-end,
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-start {
+		--nxgt-quiet-to: to left;
+	}
+	[data-background="icons"] > [data-scene]:dir(rtl) > .ic-q-end {
+		--nxgt-quiet-to: to right;
+	}
+	[data-background="icons"] > [data-scene] > .ic-q-center {
+		-webkit-mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+		mask-image: linear-gradient(
+			to right,
+			#000 calc(50% - var(--background-quiet, 42%) / 2 - 30%),
+			transparent calc(50% - var(--background-quiet, 42%) / 2),
+			transparent calc(50% + var(--background-quiet, 42%) / 2),
+			#000 calc(50% + var(--background-quiet, 42%) / 2 + 30%)
+		);
+	}
+}

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

@@ -16,6 +16,8 @@
  * its place. React only: nothing in the shared `css/` folder. */
 @import "../css/motifs.css";
 
+@import "./icons-quiet.css";
+
 @layer components {
 	[data-background="icons"] > [data-layer="wash"] {
 		position: absolute;

package/lib/components/components.css

@@ -135,6 +135,8 @@
 @import "./ui/display/period-cards/period-cards.css";
 @import "./ui/layout/sidebar/sidebar-tokens.css";
 @import "./ui/display/avatar/avatar.css";
+/* Alert and Banner span the row in the form grids (#1497). */
+@import "./ui/feedback/alert/alert.css";
 @import "./ui/display/stat-card/stat-card.css";
 /* The native charts (@nxgt/material/charts): held series colours, grid, marks;
  * then the frame, legend keys, tooltip (float and phone bottom card), table. */

package/lib/components/ui/display/avatar/avatar.css

@@ -10,3 +10,20 @@
 		--nxgt-tone-ring-share-own: var(--avatar-ring-share);
 	}
 }
+
+/* The initials scale with the avatar (#1492): the avatar is a size container,
+ * and its fallback text is 40 % of the diameter (`cqw`), never under 10 px, so
+ * two letters keep clear of the edge at 32 px and the text grows with a
+ * larger avatar. The share is `--avatar-text-share` (a unitless percentage,
+ * 40 by default). The rule reads the avatar's own size, so it only applies to
+ * a fallback inside an `avatar` (a bare `AvatarFallback` keeps inheriting).
+ * Colours are the tone's, unchanged: the text stays AA on its container. */
+@layer components {
+	[data-slot="avatar"] {
+		container-type: inline-size;
+	}
+	[data-slot="avatar"] [data-slot="avatar-fallback"] {
+		font-size: max(0.625rem, calc(var(--avatar-text-share, 40) * 1cqw));
+		line-height: 1;
+	}
+}

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

@@ -0,0 +1,16 @@
+/* An Alert or a Banner placed in a form's grid takes the whole row (#1497),
+ * like a FormSection: no `col-span-full w-full` from the app. Direct children
+ * of the form grid's `[data-slot="form-fields"]` (inside `.form-grid-layout`)
+ * or of a FormSection's `[data-slot="form-section-fields"]`, so an alert deeper
+ * in a field is untouched. In the components layer: a utility class of the
+ * app on the alert (`col-span-1`, `w-fit`) still wins. */
+@layer components {
+	:is(
+			.form-grid-layout [data-slot="form-fields"],
+			[data-slot="form-section-fields"]
+		)
+		> :is([data-slot="alert"], [data-slot="banner"]) {
+		grid-column: 1 / -1;
+		width: 100%;
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.12.0",
+	"version": "3.13.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -320,6 +320,10 @@
 			"style": "./lib/backgrounds/css-react/icons.css",
 			"default": "./lib/backgrounds/css-react/icons.css"
 		},
+		"./backgrounds/icons-quiet.css": {
+			"style": "./lib/backgrounds/css-react/icons-quiet.css",
+			"default": "./lib/backgrounds/css-react/icons-quiet.css"
+		},
 		"./backgrounds/illustrated.css": {
 			"style": "./lib/backgrounds/css-react/illustrated.css",
 			"default": "./lib/backgrounds/css-react/illustrated.css"
@@ -353,7 +357,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.29.1",
+		"@nxgt/material-core": "^0.30.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",