@nxgt/material 3.85.1 → 3.86.1

package/lib/components/ui/layout/app-shell/app-header.css

@@ -1,93 +1,58 @@
-/* The app bar's variants (app-header.tsx). A medium or large bar is a first row
- * (the small bar) and a headline row under it. `--nxgt-header-progress` (0
- * expanded, 1 collapsed) is set on the bar by use-header-scroll.ts as the shell
- * scrolls; unset (the server, a bar outside the shell) it is 0, the expanded
- * bar. Scoped to the bar's `data-variant`: the default small bar is untouched. */
-[data-slot="app-header"][data-variant="medium"] {
-	--nxgt-header-extra: 5rem;
-}
-[data-slot="app-header"][data-variant="large"] {
-	--nxgt-header-extra: 8rem;
-}
-/* The bar's height now: the row, and the headline's share still showing. */
-[data-slot="app-header"][data-variant] {
-	--nxgt-header-h: var(--nxgt-header-height);
-}
-[data-slot="app-header"]:is([data-variant="medium"], [data-variant="large"]) {
-	--nxgt-header-h: calc(
-		var(--nxgt-header-height) +
-		var(--nxgt-header-extra) *
-		(1 - var(--nxgt-header-progress, 0))
-	);
-	height: var(--nxgt-header-h);
-}
-[data-slot="app-header-headline"] {
-	min-height: 0;
-	opacity: clamp(0, calc(1 - var(--nxgt-header-progress, 0) * 1.6), 1);
-	transform: translateY(calc(var(--nxgt-header-progress, 0) * -0.75rem));
-}
-/* Not collapsing: the headline stays. */
-[data-slot="app-header"]:not([data-collapsible])
-[data-slot="app-header-headline"] {
-	opacity: 1;
-	transform: none;
-}
-/* The copy of the title in the small row appears once the headline is going. */
-[data-slot="app-header-collapsed-title"] {
-	opacity: clamp(0, calc((var(--nxgt-header-progress, 0) - 0.5) * 2), 1);
+/* The shell's bar is a TopAppBar (shell-top-app-bar.tsx): its sizes, the
+ * collapse and the scroll tint live in top-app-bar.css. What follows is what
+ * only the shell adds: the bar hiding on scroll, its tab row, and the bar's
+ * whole height on the layout root. */
+
+/* The context line (the tenant) is a desktop line: a phone's menu sheet
+ * carries it. */
+@media (max-width: 767px) {
+	[data-slot="activity-layout"] [data-slot="app-header-context"] {
+		display: none;
+	}
 }
 
 /* Hide on scroll: the bar slides up under the gutter, and out of the tab order
  * (`inert`, set with data-hidden). A bar in a contained shell is in the flow,
  * so it also gives its room back. */
-[data-slot="app-header"][data-variant] {
-	transition: transform 200ms ease;
+[data-slot="activity-layout"] [data-slot="app-header"][data-hide-on-scroll] {
+	transition:
+		transform 200ms ease,
+		background-color 200ms ease,
+		box-shadow 200ms ease;
 }
 [data-slot="app-header"][data-hidden] {
 	transform: translateY(calc(-100% - 1rem - env(safe-area-inset-top, 0px)));
 }
 [data-slot="activity-layout"][data-scroll="container"]
 	[data-slot="app-header"][data-hidden] {
-	margin-bottom: calc(-1 * var(--nxgt-header-h) - 0.5rem);
+	margin-bottom: calc(-1 * var(--nxgt-header-total, 4rem) - 0.5rem);
 }
 @media (prefers-reduced-motion: reduce) {
-	[data-slot="app-header"][data-variant] {
+	[data-slot="activity-layout"] [data-slot="app-header"][data-hide-on-scroll] {
 		transition: none;
 	}
 }
 
-/* Tabs: a row of one size under the bar, stuck to it (app-header.tsx). The bar
- * is that much taller; while it hides on scroll it slides up by everything but
- * the tabs, which stay pinned at the top of the window. */
+/* Tabs: a row of one size under the bar, stuck to it (shell-top-app-bar.tsx).
+ * The bar is that much taller; while it hides on scroll it slides up by
+ * everything but the tabs, which stay pinned at the top of the window. */
 [data-slot="app-header"] {
 	--nxgt-header-tabs: 3rem;
 }
-[data-slot="app-header"][data-tabs]:is(
-	[data-variant="medium"],
-	[data-variant="large"]
-) {
-	height: calc(var(--nxgt-header-h) + var(--nxgt-header-tabs));
-}
 [data-slot="app-header"][data-tabs][data-hidden] {
 	transform: translateY(calc(var(--nxgt-header-tabs) - 100%));
 }
 [data-slot="activity-layout"][data-scroll="container"]
 	[data-slot="app-header"][data-tabs][data-hidden] {
-	margin-bottom: calc(-1 * var(--nxgt-header-h));
-}
-/* The headline's bottom padding goes with the collapse when tabs close the bar,
- * else it would keep 1rem the tabs have no room for. */
-[data-slot="app-header"][data-tabs] [data-slot="app-header-headline"] {
-	padding-bottom: calc(1rem * (1 - var(--nxgt-header-progress, 0)));
-}
-[data-slot="app-header"][data-tabs]:not([data-collapsible])
-	[data-slot="app-header-headline"] {
-	padding-bottom: 1rem;
+	margin-bottom: calc(
+		-1 *
+		(var(--nxgt-header-total, 4rem) - var(--nxgt-header-tabs))
+	);
 }
 
 /* The bar's whole height on the layout root (ActivityLayout sets data-header and
  * data-header-tabs on it: nothing restyles the page from a descendant), for the sticky panels
- * (sticky-offset.ts): worked out here from the bar's variant and tabs so the
+ * (sticky-offset.ts): worked out here from the bar's size and tabs so the
  * server's first paint is right; use-header-height.ts then replaces it with the
  * measured height (a custom row, a wrapped tab bar). */
 [data-slot="activity-layout"] {
@@ -98,11 +63,53 @@
 	);
 }
 [data-slot="activity-layout"][data-header="medium"] {
-	--nxgt-header-total-extra: 5rem;
+	--nxgt-header-total-extra: 3rem;
 }
 [data-slot="activity-layout"][data-header="large"] {
-	--nxgt-header-total-extra: 8rem;
+	--nxgt-header-total-extra: 6.5rem;
 }
 [data-slot="activity-layout"][data-header-tabs] {
 	--nxgt-header-total-tabs: 3rem;
 }
+
+/* A phone's small bar keeps a long title readable by touch (a record's number,
+ * #2324): two lines, then cut, in the row's 3rem. */
+@media (max-width: 767px) {
+	[data-slot="activity-layout"]
+		[data-slot="app-header"]:is([data-size="small"], [data-size="search"])
+		[data-slot="app-header-page-title"] {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		white-space: normal;
+		overflow-wrap: anywhere;
+	}
+}
+
+/* Tabs close the bar: the row's bottom padding goes to the tab row. */
+[data-slot="app-header"][data-tabs] {
+	padding-bottom: 0;
+}
+
+/* The bar's height is --nxgt-header-height (documented: theming guide), as the
+ * rail's header and the first-paint total below read it: the row is that
+ * height less the bar's own vertical padding (py-2, 1rem). */
+[data-slot="app-header"] [data-slot="top-app-bar-row"] {
+	min-height: calc(var(--nxgt-header-height, 4rem) - 1rem);
+}
+
+/* At rest the shell's bar is the page colour at 90%, frosted (its class), as it
+ * always was; once the page scrolls top-app-bar.css tints it. Layered like the
+ * bar's own ground, so a `className` background wins. Under a backdrop the
+ * chrome's fill is a utility class, which wins too; once scrolled the tint
+ * would cover it, so that state gets the fill back below. */
+@layer components {
+	[data-slot="app-header"]:not([data-scrolled]) {
+		background: color-mix(in oklab, var(--background) 90%, transparent);
+	}
+}
+[data-slot="activity-layout"][data-backdrop]
+	[data-slot="app-header"][data-scrolled] {
+	background: var(--nxgt-backdrop-fill-chrome);
+}

package/lib/styles.css

@@ -53,6 +53,8 @@
 	--color-strix: var(--strix);
 	--color-background: var(--background);
 	--color-ground: var(--ground);
+	--color-surface-container: var(--surface-container);
+	--color-surface-container-high: var(--surface-container-high);
 	--color-background-paper: --alpha(var(--primary) / 5%);
 	--color-background-light: --alpha(var(--background) / 30%);
 	--color-foreground: var(--foreground);

package/lib/themes/ambre.css

@@ -1,6 +1,6 @@
 /* Theme "ambre", generated.
  * Seeds: primary oklch(0.52 0.13 48), secondary oklch(0.5 0.09 95), tertiary oklch(0.5 0.14 350), neutral hue 65, tint 0.85.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * hue-near-status: The primary's hue 48 is 14° from warning (62): they may read alike. Keep an icon and a word with every status.
  */
 [data-nxgt-theme="ambre"] {
@@ -8,6 +8,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0145 65);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0145 65);
@@ -77,6 +79,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0102 65);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0161 65);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0102 65);

package/lib/themes/ardoise.css

@@ -1,12 +1,14 @@
 /* Theme "ardoise", generated.
  * Seeds: primary oklch(0.45 0.065 252), secondary oklch(0.48 0.05 215), tertiary oklch(0.48 0.1 290), neutral hue 250, tint 0.7.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="ardoise"] {
 	--radius: 0.375rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 250);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0119 250);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 250);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0133 250);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0084 250);

package/lib/themes/bleumono.css

@@ -1,6 +1,6 @@
 /* Theme "bleumono", generated.
  * Seeds: primary oklch(0.46 0.13 255), secondary oklch(0.55 0.06 255), tertiary oklch(0.38 0.17 255), neutral hue 255, tint 1.1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * chroma-lowered: tertiary: chroma 0.170 to 0.125 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 255 is 0° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0187 255);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0187 255);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0132 255);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0209 255);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0132 255);

package/lib/themes/bluemoon.css

@@ -1,6 +1,6 @@
 /* Theme "bluemoon", generated.
  * Seeds: primary oklch(0.45 0.12 265), secondary oklch(0.55 0.02 250), tertiary oklch(0.62 0.08 290), neutral hue 265, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * lightness-moved: secondary: lightness 0.550 to 0.520 for AA.
  * lightness-moved: tertiary: lightness 0.620 to 0.563 for AA.
  * hue-near-status: The primary's hue 265 is 10° from info (254.624): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 265);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 265);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 265);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 265);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 265);

package/lib/themes/corail.css

@@ -1,6 +1,6 @@
 /* Theme "corail", generated.
  * Seeds: primary oklch(0.58 0.17 35), secondary oklch(0.52 0.1 70), tertiary oklch(0.5 0.1 200), neutral hue 30, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * lightness-moved: primary: lightness 0.580 to 0.575 for AA.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 35 is 8° from error (27.325): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 30);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 30);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 30);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 30);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 30);

package/lib/themes/foret.css

@@ -1,12 +1,14 @@
 /* Theme "foret", generated.
  * Seeds: primary oklch(0.48 0.1 152), secondary oklch(0.5 0.08 118), tertiary oklch(0.5 0.1 55), neutral hue 140, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="foret"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 140);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 140);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 140);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 140);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 140);

package/lib/themes/lavande.css

@@ -1,12 +1,14 @@
 /* Theme "lavande", generated.
  * Seeds: primary oklch(46% 0.1135 276.35), secondary oklch(48% 0.1135 245.65), tertiary oklch(45.91% 0.1864 310.75), neutral hue 292, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="lavande"] {
 	--radius: 0.625rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 290);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 290);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 291.3);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 289.4);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 291.3);

package/lib/themes/menthe.css

@@ -1,6 +1,6 @@
 /* Theme "menthe", generated.
  * Seeds: primary oklch(0.5 0.105 168), secondary oklch(0.5 0.09 205), tertiary oklch(0.52 0.11 120), neutral hue 170, tint 0.8.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.105 to 0.101 (lowered to fit sRGB or AA).
  * chroma-lowered: secondary: chroma 0.090 to 0.085 (lowered to fit sRGB or AA).
  * hue-near-status: The primary's hue 168 is 17° from success (184.704): they may read alike. Keep an icon and a word with every status.
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0136 170);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 170);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0096 170);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0152 170);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0096 170);

package/lib/themes/ocean.css

@@ -1,6 +1,6 @@
 /* Theme "ocean", generated.
  * Seeds: primary oklch(0.5 0.12 228), secondary oklch(0.52 0.09 192), tertiary oklch(0.5 0.13 268), neutral hue 230, tint 0.9.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: primary: chroma 0.120 to 0.098 (lowered to fit sRGB or AA).
  * lightness-moved: secondary: lightness 0.520 to 0.505 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -10,6 +10,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0153 230);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0153 230);
@@ -79,6 +81,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0108 230);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0171 230);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0108 230);

package/lib/themes/pink.css

@@ -1,6 +1,6 @@
 /* Theme "pink", generated.
  * Seeds: primary oklch(0.55 0.2 345), secondary oklch(0.5 0.14 320), tertiary oklch(0.5 0.1 200), neutral hue 345, tint 0.7.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  * chroma-lowered: tertiary: chroma 0.100 to 0.085 (lowered to fit sRGB or AA).
  */
 [data-nxgt-theme="pink"] {
@@ -8,6 +8,8 @@
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0119 345);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0119 345);
@@ -77,6 +79,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0084 345);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0133 345);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0084 345);

package/lib/themes/prune.css

@@ -1,12 +1,14 @@
 /* Theme "prune", generated.
  * Seeds: primary oklch(0.42 0.15 330), secondary oklch(0.5 0.1 355), tertiary oklch(0.55 0.1 85), neutral hue 330, tint 1.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="prune"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.017 330);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.017 330);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.012 330);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.019 330);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.012 330);

package/lib/themes/sable.css

@@ -1,12 +1,14 @@
 /* Theme "sable", generated.
  * Seeds: primary oklch(0.5 0.06 70), secondary oklch(0.5 0.05 45), tertiary oklch(0.5 0.07 150), neutral hue 75, tint 0.5.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="sable"] {
 	--radius: 0.5rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.0085 75);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0085 75);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.006 75);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0095 75);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.006 75);

package/lib/themes/slate.css

@@ -1,12 +1,14 @@
 /* Theme "slate", generated.
  * Seeds: primary oklch(0.4 0.025 258), secondary oklch(0.48 0.02 230), tertiary oklch(0.46 0.045 275), neutral hue 258, tint 0.35.
- * Contrast: 69 pairs, 0 failing.
+ * Contrast: 81 pairs, 0 failing.
  */
 [data-nxgt-theme="slate"] {
 	--radius: 0.25rem;
 	--background: oklch(1 0 0);
 	--foreground: oklch(0.227 0.006 258);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.006 258);
@@ -76,6 +78,8 @@
 	--background: oklch(0.15 0.026 273);
 	--foreground: oklch(0.943 0.0042 258);
 	--ground: color-mix(in oklab, var(--primary) 6%, color-mix(in oklab, var(--background) 55%, black));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--card: oklch(0.22 0.0067 258);
 	--card-edge: color-mix(in oklab, white 8%, var(--card));
 	--card-foreground: oklch(0.943 0.0042 258);

package/lib/themes/teal.css

@@ -1,6 +1,6 @@
 /* Theme "teal", generated.
  * 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: 69 pairs, 0 failing.
+ * Contrast: 81 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.490 for AA.
  * chroma-lowered: secondary: chroma 0.090 to 0.087 (lowered to fit sRGB or AA).
@@ -12,6 +12,8 @@
 	--background: oklch(0.973 0.0064 190);
 	--foreground: oklch(0.227 0.0136 190);
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	--surface-container: color-mix(in oklab, var(--primary) 12%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 16%, var(--background));
 	--card: oklch(1 0 0);
 	--card-edge: var(--border);
 	--card-foreground: oklch(0.227 0.0136 190);
@@ -81,6 +83,8 @@
 	--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));
+	--surface-container: color-mix(in oklab, var(--primary) 26%, var(--ground));
+	--surface-container-high: color-mix(in oklab, var(--primary) 34%, var(--ground));
 	--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);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.85.1",
+	"version": "3.86.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,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.50.1",
+		"@nxgt/material-core": "^0.51.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",

package/dist/lib/components/ui/layout/app-bar/top-app-bar.d.ts

@@ -1,18 +0,0 @@
-import { ComponentProps, ReactNode } from 'react';
-export type TopAppBarProps = {
-    /**
-     * The bar's look. `'small'` (the default): one row of `children`.
-     * `'center'`: the row's content centred. `'medium'` and `'large'`: the
-     * `headline` on a second row, in display type (`'large'` a taller row and a
-     * bigger step); without a `headline` they draw as `'small'`.
-     */
-    variant?: 'small' | 'center' | 'medium' | 'large';
-    /** The title of a `medium` or `large` bar: its second row. Make it the page's heading with an element of your own, `<h1>`. */
-    headline?: ReactNode;
-} & ComponentProps<'div'>;
-/**
- * A top app bar: a row of actions and a title, in the Material 3 sizes. It
- * does not scroll itself; `ActivityLayout`'s `header` collapses and hides the
- * shell's own bar.
- */
-export declare function TopAppBar({ variant, headline, className, children, ...props }: TopAppBarProps): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/app-header-row.d.ts

@@ -1,3 +0,0 @@
-import { AppHeaderProps } from './app-header.js';
-/** The bar's one row: the menu, the top navigation, the titles, the actions and the account. */
-export declare function AppHeaderRow({ items, linkComponent, children, topNav, actions, avatar, search, back, brand, logo, name, context, menuOpen, onMenuOpenChange, showMenuIcon, }: Omit<AppHeaderProps, 'className' | 'variant' | 'collapse' | 'hideOnScroll' | 'headline' | 'tabs'>): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/header-context.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-/**
- * The app bar's small muted context line (the tenant), after the page's
- * title: from `md` up only, truncated with an ellipsis, and only then
- * carrying a `title` with the full text (#629). The title truncates before
- * it does (this line never shrinks below its own cap).
- */
-export declare function HeaderContext({ children }: {
-    children?: ReactNode;
-}): import("react").JSX.Element;

package/dist/lib/components/ui/layout/app-shell/page-title.d.ts

@@ -1,27 +0,0 @@
-import { ReactNode } from 'react';
-/** The type step and the fit of each size. */
-declare const SIZES: {
-    readonly bar: readonly ["title-medium", "min-w-0 max-md:line-clamp-2 max-md:break-words md:truncate"];
-    readonly headline: readonly ["headline-lg", "min-w-0 truncate"];
-    readonly display: readonly ["display-md", "min-w-0 line-clamp-2 break-words"];
-};
-/**
- * The page's one `h1`, in the app bar: from `md` up truncated with an
- * ellipsis when long, on a phone wrapped to two lines first (a record's number
- * stays readable by touch, #2324), and only when cut off carrying a `title`
- * with the full text (as the header's leading title does, #629); the accessible name is the content itself.
- * The display face is `--font-display`, the body face without it.
- */
-export declare function PageHeading({ children, id, after, context, size, center, }: {
-    children?: ReactNode;
-    id?: string;
-    /** The slot right after the title, outside the `h1`: it never truncates, the title does. */
-    after?: ReactNode;
-    /** The small muted context line (the tenant), last in the row, from `md` up. */
-    context?: ReactNode;
-    /** `'bar'`: the title in the app bar. `'headline'` and `'display'`: the second row of a medium and a large header, which wraps (display up to two lines). */
-    size?: keyof typeof SIZES;
-    /** Centre it, for the `'center'` header. */
-    center?: boolean;
-}): import("react").JSX.Element | null;
-export {};