@nxgt/material 3.85.1 → 3.86.0

package/docs/troubleshooting.md

@@ -125,6 +125,10 @@ words in your error.
 
 **Navigation**
 
+- [`AppHeader is deprecated, use TopAppBar (ActivityLayout draws its own bar with it)`](#appheader-is-deprecated-use-topappbar-activitylayout-draws-its-own-bar-with-it)
+- [`ActivityLayout: header "center", "medium" or "large" is deprecated`](#activitylayout-header-center-medium-or-large-is-deprecated)
+- [`TopAppBar: variant="medium" is deprecated, use size="medium-flexible"`](#topappbar-variantmedium-is-deprecated-use-sizemedium-flexible)
+- [`TopAppBar: headline is deprecated, use title`](#topappbar-headline-is-deprecated-use-title)
 - [A `ListTile` link shows two chevrons](#a-listtile-link-shows-two-chevrons)
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
 - [A `Switcher` in link mode reloads the page](#a-switcher-in-link-mode-reloads-the-page)
@@ -2350,6 +2354,82 @@ workaround. A `DateField`'s tonal fill is deliberate and not a misalignment.
 
 ## Navigation
 
+### `AppHeader is deprecated, use TopAppBar (ActivityLayout draws its own bar with it)`
+
+**When:** in development, the first time an `AppHeader` renders. The console
+line reads `[@nxgt/material] AppHeader: is deprecated, use TopAppBar
+(ActivityLayout draws its own bar with it)`.
+
+**Why:** `ActivityLayout` now draws its app bar with `TopAppBar`, and `AppHeader`
+is a thin wrapper over it, kept so nothing breaks in a minor. It renders a
+`div`, not a `<header>`, and keeps its `app-header*` slot names.
+
+**Fix:** inside `ActivityLayout`, nothing to do (the layout does not use the
+wrapper). In a layout of your own, draw the bar with `TopAppBar` and put the
+menu button, back arrow and avatar in `leading` and `trailing`:
+
+```tsx
+import { TopAppBar } from '@nxgt/material/components';
+
+<TopAppBar as="header" title="Orders" leading={<MenuButton />} trailing={<Avatar />} />
+```
+
+### `ActivityLayout: header "center", "medium" or "large" is deprecated`
+
+**When:** in development, the first time a `header` value of `'center'`, `'medium'`
+or `'large'` is read: on `ActivityLayout`, in a route's `handle.header`, or as
+`variant` in the options. The console line reads `[@nxgt/material] ActivityLayout:
+header `medium` is deprecated; use 'medium-flexible'.`; for `center` it ends
+`use { size: 'small', align: 'center' }.` and for `large` `use 'large-flexible'.`.
+
+**Why:** the shell's bar is a `TopAppBar` now, with `size` and `align` instead of
+one `variant`. The old values still draw the same bars, so this is a warning,
+not an error, and it is silent in production.
+
+**Fix:** spell the new value:
+
+```tsx
+// before
+<ActivityLayout items={items} header="medium" />
+export const handle = { title: 'Orders', header: { variant: 'center' } };
+
+// after
+<ActivityLayout items={items} header="medium-flexible" />
+export const handle = { title: 'Orders', header: { size: 'small', align: 'center' } };
+```
+
+`'none'` stays valid. The full table is in [Moving to TopAppBar](./guides/migrating-to-top-app-bar.md).
+
+### `TopAppBar: variant="medium" is deprecated, use size="medium-flexible"`
+
+**When:** in development, the first time a `TopAppBar` renders with `variant="center"`,
+`"medium"` or `"large"` (`"small"` does not warn). The line names the replacement:
+`size="small" align="center"`, `size="medium-flexible"` or `size="large-flexible"`.
+
+**Why:** `variant` is split into `size` and `align`; `size` and `align` win over
+it when both are given.
+
+**Fix:** `<TopAppBar size="large-flexible" title="Projects" />`. See
+[Moving to TopAppBar](./guides/migrating-to-top-app-bar.md).
+
+### `TopAppBar: headline is deprecated, use title`
+
+**When:** in development, the first time a `TopAppBar` (or an `AppHeader`) renders
+a `headline` without a `title`. The line reads `[@nxgt/material] TopAppBar:
+headline is deprecated, use title (it renders the bar's own h1)`.
+
+**Why:** `title` is rendered by the bar as the page's one `<h1>`; `headline`
+renders in a non-heading element, so you had to bring your own heading.
+
+**Fix:** pass the text as `title` and drop your own `<h1>`:
+
+```tsx
+// before
+<TopAppBar variant="large" headline={<h1>Projects</h1>} />
+// after
+<TopAppBar size="large-flexible" title="Projects" />
+```
+
 ### A `ListTile` link shows two chevrons
 
 **When:** a `ListTile` with an `href` and a `trailing={<ChevronRight />}` of

package/lib/components/components.css

@@ -106,6 +106,8 @@
 @import "./rich-chat-composer-expressive.css";
 @import "./ui/actions/toolbar/toolbar-pair.css";
 @import "./ui/layout/app-bar/bottom-app-bar.css";
+@import "./ui/layout/app-bar/top-app-bar/top-app-bar.css";
+@import "./ui/layout/app-bar/top-app-bar/top-app-bar-collapse.css";
 @import "./ui/primitives/label/label.css";
 /* The field box every text field and picker trigger draws: its
  * --nxgt-field-* tokens, its states, its open shape and parts, then forced

package/lib/components/theme-tokens.css

@@ -10,6 +10,16 @@
 	   `body`, so a zone that sets --primary or --background gets its own. A page
 	   keeps the flat look with `--ground: var(--background)`. */
 	--ground: color-mix(in oklab, var(--primary) 7%, var(--background));
+	/* The scrolled top app bar (draw a 1px --border hairline with it): the primary at
+	   12 % over the ground. --surface-container-high is raised chrome such as a search
+	   field: the primary at 16 % over the page. The default seed solves to 12 and 16;
+	   palette.test and ground.test guard it. */
+	--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);
 	/* The card's edge (Card, Popover, Dialog): the border in light; dark draws it a
 	   hairline lighter than the card. */
@@ -114,6 +124,14 @@
 		var(--primary) 6%,
 		color-mix(in oklab, var(--background) 55%, black)
 	);
+	/* Dark: the primary at 26 % over the ground (the scrolled top app bar) and 34 % over
+	   the ground (raised chrome such as a search field). */
+	--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/components/ui/layout/app-bar/top-app-bar/top-app-bar-collapse.css

@@ -0,0 +1,60 @@
+/* Collapse (data-collapse, medium and large): use-header-scroll.ts sets
+ * --nxgt-header-progress (0 expanded, 1 collapsed) on the bar as the shell
+ * scrolls, and --nxgt-header-extra, the headline row's measured height. The
+ * headline gives that height back through a negative margin (the bar clips
+ * it), fades, and its title shrinks to 90% from its start edge. The rem values
+ * are the height before it is measured (the server, first paint). A bar
+ * outside the shell has no progress: 0, the expanded bar. */
+:is(
+	[data-slot="top-app-bar"],
+	[data-slot="app-header"]
+)[data-collapse][data-size="medium-flexible"] {
+	--nxgt-header-extra: 3rem;
+}
+:is(
+	[data-slot="top-app-bar"],
+	[data-slot="app-header"]
+)[data-collapse][data-size="large-flexible"] {
+	--nxgt-header-extra: 6.5rem;
+}
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-collapse]:is(
+	[data-size="medium-flexible"],
+	[data-size="large-flexible"]
+) {
+	overflow: hidden;
+}
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-collapse]
+	:is([data-slot="top-app-bar-headline"], [data-slot="app-header-headline"]) {
+	margin-bottom: calc(
+		var(--nxgt-header-extra) *
+		var(--nxgt-header-progress, 0) *
+		-1
+	);
+	opacity: clamp(0, calc(1 - var(--nxgt-header-progress, 0) * 1.6), 1);
+	transform-origin: left bottom;
+	transform: translateY(calc(var(--nxgt-header-progress, 0) * -0.75rem))
+		scale(calc(1 - var(--nxgt-header-progress, 0) * 0.1));
+}
+[dir="rtl"]
+	:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-collapse]
+	:is([data-slot="top-app-bar-headline"], [data-slot="app-header-headline"]) {
+	transform-origin: right bottom;
+}
+
+/* The title's copy in the small row (aria-hidden: the headline keeps the one
+ * h1, folded away but still in the accessibility tree). It fades in over the
+ * second half of the collapse; under reduced motion the progress snaps. */
+:is(
+	[data-slot="top-app-bar-collapsed-title"],
+	[data-slot="app-header-collapsed-title"]
+) {
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 1.125rem;
+	line-height: 1.5rem;
+	font-weight: 600;
+	opacity: clamp(0, calc((var(--nxgt-header-progress, 0) - 0.5) * 2), 1);
+}

package/lib/components/ui/layout/app-bar/top-app-bar/top-app-bar.css

@@ -0,0 +1,205 @@
+/* TopAppBar (issue #2510): flat on the page ground; the scroll tint and a
+ * hairline arrive with [data-scrolled]. --surface-container comes from the
+ * theme; the fallback keeps the bar right until a theme defines it.
+ *
+ * The at-rest look (ground, hairline slot, radius, transition) is in
+ * `@layer components`, so a `className` background, radius or shadow wins
+ * (Tailwind utilities are a later layer). The scrolled tint is not layered: it
+ * is the bar's state, and overrides a className background once scrolled. */
+:is([data-slot="top-app-bar"], [data-slot="app-header"]) {
+	--top-app-bar-tint: var(
+		--surface-container,
+		color-mix(in oklab, var(--primary) 12%, var(--ground, var(--background)))
+	);
+}
+:is(.dark, [data-theme="dark"])
+	:is([data-slot="top-app-bar"], [data-slot="app-header"]),
+:is([data-slot="top-app-bar"], [data-slot="app-header"]):is(
+	.dark,
+	[data-theme="dark"]
+) {
+	--top-app-bar-tint: var(
+		--surface-container,
+		color-mix(in oklab, var(--primary) 26%, var(--ground, var(--background)))
+	);
+}
+@layer components {
+	:is([data-slot="top-app-bar"], [data-slot="app-header"]) {
+		background: var(--ground, var(--background));
+		box-shadow: inset 0 -1px 0 transparent;
+		border-radius: 0;
+		transition:
+			background-color 200ms ease,
+			box-shadow 200ms ease;
+	}
+}
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-scrolled] {
+	background: var(--top-app-bar-tint);
+	box-shadow: inset 0 -1px 0 var(--border);
+}
+
+[data-slot="top-app-bar-row"] {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	padding-inline: 1rem;
+	min-height: 3rem;
+}
+[data-slot="top-app-bar-actions"] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.25rem;
+	margin-inline-start: auto;
+}
+:is([data-slot="top-app-bar-tabs"], [data-slot="app-header-tabs"]) {
+	padding-inline: 1rem;
+}
+
+/* Title block: the h1, and the subtitle after it, stacked. */
+:is(
+	[data-slot="top-app-bar-title-block"],
+	[data-slot="app-header-page-title-row"]
+) {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	min-width: 0;
+	flex: 1;
+	gap: 0.0625rem;
+}
+:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+	margin: 0;
+	font-size: 1.25rem;
+	line-height: 1.5rem;
+	font-weight: 700;
+	letter-spacing: -0.01em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+:is(
+	[data-slot="top-app-bar-title"],
+	[data-slot="app-header-page-title"]
+):focus-visible {
+	outline: none;
+	border-radius: 0.25rem;
+	box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 50%, transparent);
+}
+:is([data-slot="top-app-bar-subtitle"], [data-slot="app-header-context"]) {
+	margin: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	font-weight: 500;
+	color: var(--muted-foreground);
+}
+
+/* Medium and large: the title on its own row. */
+:is([data-slot="top-app-bar-headline"], [data-slot="app-header-headline"]) {
+	padding: 0.25rem 1rem 0.75rem;
+}
+:is([data-slot="top-app-bar-headline"], [data-slot="app-header-headline"])
+	:is(
+		[data-slot="top-app-bar-title-block"],
+		[data-slot="app-header-page-title-row"]
+	) {
+	flex: none;
+	align-items: flex-start;
+}
+:is([data-slot="top-app-bar-headline"], [data-slot="app-header-headline"])
+	:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+	white-space: normal;
+	text-wrap: balance;
+	letter-spacing: -0.02em;
+}
+:is(
+		[data-slot="top-app-bar"],
+		[data-slot="app-header"]
+	)[data-size="medium-flexible"]
+	:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+	font-size: 1.75rem;
+	line-height: 2rem;
+}
+:is(
+		[data-slot="top-app-bar"],
+		[data-slot="app-header"]
+	)[data-size="large-flexible"]
+	:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+	font-size: 2.5rem;
+	line-height: 1.08;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+	line-clamp: 2;
+}
+
+/* Centre: the row's content and the title block are centred. */
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-align="center"]
+[data-slot="top-app-bar-row"] {
+	justify-content: center;
+	text-align: center;
+}
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-align="center"]
+	:is(
+		[data-slot="top-app-bar-title-block"],
+		[data-slot="app-header-page-title-row"]
+	) {
+	align-items: center;
+	text-align: center;
+}
+
+/* Search: the field is the bar's centre; the h1 stays for assistive tech.
+ * The bar is positioned only here (its sr-only title is absolute), so a bar
+ * can be made `sticky` with a class. */
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-size="search"] {
+	position: relative;
+}
+:is([data-slot="top-app-bar"], [data-slot="app-header"])[data-size="search"]
+	:is(
+		[data-slot="top-app-bar-title-block"],
+		[data-slot="app-header-page-title-row"]
+	) {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+}
+[data-slot="top-app-bar-search"] {
+	flex: 1;
+	min-width: 0;
+	max-width: 40rem;
+}
+
+@media (max-width: 767px) {
+	[data-slot="top-app-bar-row"] {
+		gap: 0.25rem;
+		padding-inline: 0.5rem;
+	}
+	:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+		font-size: 1.125rem;
+	}
+	:is(
+			[data-slot="top-app-bar"],
+			[data-slot="app-header"]
+		)[data-size="medium-flexible"]
+		:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+		font-size: 1.75rem;
+	}
+	:is(
+			[data-slot="top-app-bar"],
+			[data-slot="app-header"]
+		)[data-size="large-flexible"]
+		:is([data-slot="top-app-bar-title"], [data-slot="app-header-page-title"]) {
+		font-size: 2.25rem;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	:is([data-slot="top-app-bar"], [data-slot="app-header"]) {
+		transition: none;
+	}
+}

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);