@nxgt/material 3.85.1 → 3.86.0

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