@nxgt/material 3.79.1 → 3.80.0

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

@@ -0,0 +1,108 @@
+/* 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);
+}
+
+/* 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="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);
+}
+@media (prefers-reduced-motion: reduce) {
+	[data-slot="app-header"][data-variant] {
+		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. */
+[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;
+}
+
+/* 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
+ * 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"] {
+	--nxgt-header-total: calc(
+		var(--nxgt-header-height, 4rem) +
+		var(--nxgt-header-total-extra, 0rem) +
+		var(--nxgt-header-total-tabs, 0rem)
+	);
+}
+[data-slot="activity-layout"][data-header="medium"] {
+	--nxgt-header-total-extra: 5rem;
+}
+[data-slot="activity-layout"][data-header="large"] {
+	--nxgt-header-total-extra: 8rem;
+}
+[data-slot="activity-layout"][data-header-tabs] {
+	--nxgt-header-total-tabs: 3rem;
+}

package/dist/components/ui/layout/navigation-toolbar/navigation-toolbar.css

@@ -0,0 +1,43 @@
+/* The navigation toolbar: the floating Toolbar's pill (its tokens, shadow and
+ * the slide away, toolbar.css and toolbar-variants.css, are used as they are)
+ * holding navigation links instead of actions. What differs: it is fixed at
+ * the bottom centre, an item is a 48px link at every pointer, and the current
+ * page (data-active, beside aria-current) takes the pressed look of toolbar-selected.css. Sizes
+ * are mirrored in navigation-toolbar.classes.ts. */
+@layer components {
+	.nxgt-toolbar.nxgt-nav-toolbar {
+		--nxgt-nav-toolbar-gap: 1rem;
+		--tb-item: 3rem;
+		--tb-icon: 1.5rem;
+		position: fixed;
+		inset-inline: 0;
+		/* A docked media bar sits above the pill (its bottom is --nxgt-nav-bar). */
+		bottom: calc(
+			env(safe-area-inset-bottom, 0px) +
+			var(--nxgt-nav-toolbar-gap)
+		);
+		z-index: 30;
+		margin-inline: auto;
+		max-width: calc(100% - 1rem);
+	}
+	.nxgt-nav-toolbar .nxgt-toolbar-item {
+		text-decoration: none;
+	}
+	.nxgt-nav-toolbar .nxgt-toolbar-item[data-active],
+	.nxgt-nav-toolbar .nxgt-toolbar-item[data-active]:is(:hover, :active) {
+		background: var(--tb-on);
+		color: var(--tb-on-fg);
+	}
+	/* Reduced motion: it snaps away instead of sliding. */
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-toolbar.nxgt-nav-toolbar {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		.nxgt-nav-toolbar .nxgt-toolbar-item[data-active] {
+			outline: 2px solid Highlight;
+			outline-offset: -2px;
+		}
+	}
+}