@nxgt/material 3.79.0 → 3.80.0

package/docs/guides/i18n.md

@@ -236,7 +236,8 @@ the camera's button, toggle and image (`material.camera.capture`, `captured`,
 barcode accessible names, the calendar's navigation tooltips
 (`material.calendar.*`), the data table's selection checkboxes, the filter's
 presets and `Min`/`Max` fields, the `variant="4"` spinner's label,
-`ScrollToTop`, the network upload field's `Retry` and `Remove {name}`, the map's
+`ScrollToTop`, the bottom bar's `material.navigation.more` and `.close` (not shown
+until the bar is drawn), the `ThreadLayout` stepper's `nav` name `material.navigation.steps` ("Progress"), the network upload field's `Retry` and `Remove {name}`, the map's
 `You are here` and zoom buttons, and the icon-only close button of
 `DialogClose`, `DrawerClose`, `SheetClose` and `SheetContent`'s
 `withCloseButton`. A range `Slider`'s readout inputs read
@@ -331,6 +332,17 @@ and its emoji buttons (`material['rich-text-editor'].placeholder` /
 (`material['circular-progress'].label`); `MediaPlayer`'s "Media player" for a
 track without a title (`material['media-player'].label`); `PaneLayoutPane`'s
 sheet title on a phone (`material['pane-layout']['sheet-title']`);
+`EditorLayout`'s region names, "Toolbar", "Canvas", "Outline" and "Properties"
+(`material['editor-layout'].toolbar` / `canvas` / `start` / `properties`; French
+"Barre d'outils", "Zone de travail", "Plan", "Propriétés");
+`ListDetailsLayout`'s way back, inspector close and back buttons and the list
+separator's name (`material['list-details'].back` / `inspector-back` /
+`inspector-close` / `resize`);
+`SettingsLayout`'s default title, search name and empty message
+(`material['settings-layout'].title` / `search` / `empty`);
+`LandingLayout`'s phone menu button, "Menu", and `SiteFooter`'s links landmark,
+"Footer" and new-tab hint, "opens in a new tab" (`material.landing.menu` / `footer` /
+`new-tab`; French "Menu", "Pied de page" and "s'ouvre dans un nouvel onglet");
 `JsonViewer`'s "Empty JSON" (`material['json-viewer'].empty`);
 `TimePicker`'s AM / PM (`material['time-picker'].am` / `pm`, "a.m." / "p.m." in
 French); and the names of `DurationField`'s inputs, "Hours" and "Minutes"

package/docs/guides/layouts.md

@@ -0,0 +1,215 @@
+# Layouts
+
+A map of the layouts `@nxgt/material` draws, to pick from by need: how the app
+navigates, what its header looks like, and which layout a page takes. Every
+choice is a prop or a component; nothing here is on unless you ask, and the
+shell's default is unchanged. Each section gives a working example and links
+the page that has the full props. Every component in the snippets is imported
+from `@nxgt/material/components`.
+
+Three sizes decide what is drawn, by CSS only (so the server and the client
+agree): a **phone** below 768px, a **tablet** from 768px to 1279px and a
+**desktop** from 1280px.
+
+## Pick a navigation
+
+`ActivityLayout` takes `navigation`: one name for every size, or one per size.
+
+| The app needs | Use | Notes |
+| --- | --- | --- |
+| three to five main destinations, one thumb away | `'bar'` | a bottom bar on a phone only (below 768px); from 768px the default rail shows, and `{ tablet: 'bar' }` keeps the bar there; the rest go under "More"; badges on the icons |
+| a compact column of icons | `'rail'` | a rail with an optional FAB (`navigationFab`); a phone never draws it: it keeps its menu sheet |
+| the same, with labels and a primary action | `'rail-expanded'` | a wider rail, extended FAB; a phone never draws it: it keeps its menu sheet |
+| many destinations in groups | `'drawer'` | a standard drawer; modal on a phone |
+| a dense tool with the sidebar the user collapses | `'sidebar'` | remembered with `persistKey` |
+| a website-like app with menus | `'top'` | a top navigation with dropdowns; nested in the phone menu |
+| two levels: sections, then pages | `'two-level'` | a rail beside a panel of the section's pages |
+| a content app that wants the whole screen | `'floating'` | a pill of links at the bottom, `hideOnScroll` |
+| the default: a menu sheet on a phone, a rail from 768px | `'modal-drawer'` (the phone preset) | what an unset `navigation` draws |
+| no navigation of its own | `'none'` | |
+
+```tsx
+import { ActivityLayout, type MenuItem } from '@nxgt/material/components';
+import { Outlet } from 'react-router';
+
+const items: MenuItem[] = [
+  { label: 'Home', url: '/', icon: 'house' },
+  { label: 'Inbox', url: '/inbox', icon: 'envelope', badge: 3 },
+  { label: 'Tasks', url: '/tasks', icon: 'check' },
+  { label: 'Settings', url: '/settings', icon: 'gear', priority: -1 },
+];
+
+// a bottom bar on a phone, a rail with a button on a tablet, a sidebar on a desktop
+export function Shell() {
+  return (
+    <ActivityLayout
+      items={items}
+      logo="/logo.svg"
+      name="Acme"
+      navigation={{ phone: 'bar', tablet: 'rail', desktop: 'sidebar', persistKey: 'acme-nav' }}
+    >
+      <Outlet />
+    </ActivityLayout>
+  );
+}
+```
+
+Each preset is also exported as a part (`NavigationBar`, `NavigationRail`,
+`NavigationDrawer`, `TopNav`, `NavigationRailPanel`, `NavigationToolbar`) for a
+layout of your own. Every preset, its entries (`bar`, `priority`, `group`,
+`children`, `badge`) and its accessibility are in the
+[app shell guide](app-shell.md#navigation-and-header).
+
+## Pick a header
+
+`header` takes a name or `{ variant, collapse, hideOnScroll, tabs, search }`.
+
+| Variant | What it is |
+| --- | --- |
+| `'small'` | the default bar: title at the start, actions at the end |
+| `'center'` | the title centred |
+| `'medium'`, `'large'` | a taller bar whose headline collapses to the small one on scroll |
+| `'none'` | no bar (a full-bleed page) |
+
+```tsx
+<ActivityLayout
+  items={items}
+  header={{
+    variant: 'large',
+    hideOnScroll: true,
+    search: { placeholder: 'Search projects', shortcut: '/' },
+    tabs: (
+      <TabsNav aria-label="Project sections" value="activity">
+        <TabsNavLink to="/projects/overview" value="overview">Overview</TabsNavLink>
+        <TabsNavLink to="/projects/activity" value="activity">Activity</TabsNavLink>
+      </TabsNav>
+    ),
+  }}
+>
+  <Outlet />
+</ActivityLayout>
+```
+
+A route changes its own bar with a handle, and draws a back arrow:
+
+```tsx
+export const handle = {
+  title: 'Atlas redesign',
+  header: { variant: 'medium' },
+  back: { to: '/projects', label: 'Projects' },
+} satisfies AppShellHandle;
+```
+
+The search is a pill with a docked results panel from 768px and a full-screen
+view on a phone. See [The app bar variants](app-shell.md#the-app-bar-variants),
+[the search](app-shell.md#the-app-bars-search),
+[the tabs](app-shell.md#tabs-under-the-app-bar) and
+[the back arrow](app-shell.md#the-back-arrow).
+
+## Pick a page layout
+
+Inside the shell, a page is one of these. All of them follow the width of their
+own container where noted, so they also work in a dialog or a split pane.
+
+| The page is | Use | Phone |
+| --- | --- | --- |
+| a list beside the selected record | `ListDetailsLayout` (`inspector` adds a third pane) | one view at a time, with a back bar |
+| content with a side panel (filters, folders) | `PaneLayout` | the pane is a sheet (`phone="sheet"`, `"bottom"` or `"stack"`) |
+| a form, a wizard or a conversation in a centred column | `ThreadLayout` | the same column, full width |
+| grouped settings | `SettingsLayout` | the list, then the section's page |
+| cards or tiles | `ResponsiveGrid` (spans, masonry) | one column |
+| tiles the user rearranges | `DashboardGrid` | one or two columns |
+| a board of columns | `Kanban` with `phoneLayout="tabs"` | one column per tab, swipe |
+| a tool with a canvas | `EditorLayout` | properties in a bottom sheet |
+| a public page outside the shell | `LandingLayout` | the links in a drawer |
+| sign-in and sign-up | `AuthCard` with `layout="split"` | the card alone |
+| documentation | `Doc` with `chrome="embedded"` inside the shell | the tree in a sheet |
+
+A settings screen, from sections:
+
+```tsx
+import { SettingsLayout } from '@nxgt/material/components';
+
+<SettingsLayout
+  search
+  sections={[
+    { id: 'profile', group: 'Account', title: 'Profile', description: 'Name and language', content: <ProfileForm /> },
+    { id: 'alerts', group: 'Preferences', title: 'Notifications', description: 'Email and push', content: <AlertsForm /> },
+  ]}
+/>
+```
+
+A list with its detail, selected in the URL. `history="push"` keeps the view in
+`?view=`, so the browser's Back goes from the details to the list on a phone, and
+`useListDetailsParam()` reads and sets the selected id:
+
+```tsx
+const [id, select] = useListDetailsParam();
+
+<ListDetailsLayout history="push">
+  <ListDetailsLayout.List>
+    {patients.map((p) => <Row key={p.id} onClick={() => select(p.id, { open: 'details' })} />)}
+  </ListDetailsLayout.List>
+  <ListDetailsLayout.Details back="Patients"><Sheet id={id} /></ListDetailsLayout.Details>
+</ListDetailsLayout>
+```
+
+An editor, with its properties in a sheet on a phone:
+
+```tsx
+<EditorLayout
+  className="h-dvh"
+  toolbar={<><UndoRedoButtons /><span className="flex-1" /><EditorLayout.PropertiesTrigger /></>}
+  properties={<SelectionForm />}
+>
+  <Artboard />
+</EditorLayout>
+```
+
+A dashboard the user rearranges (the order is yours to store):
+
+```tsx
+<DashboardGrid aria-label="Dashboard" order={order} onOrderChange={setOrder}>
+  <DashboardTile id="revenue" title="Revenue" span={{ base: 1, md: 2 }}><RevenueChart /></DashboardTile>
+  <DashboardTile id="orders" title="Orders"><OrdersCount /></DashboardTile>
+</DashboardGrid>
+```
+
+A landing page, outside the shell (it needs a router, like the shell):
+
+```tsx
+<LandingLayout
+  name="Acme"
+  items={[{ label: 'Pricing', url: '/pricing', icon: 'tag' }]}
+  actions={<LinkButton to="/start" variant="filled">Get started</LinkButton>}
+  hero={<LandingSection variant="hero" tone="ground" title="Plan the work" />}
+  footer={<SiteFooter brand="Acme" groups={[]} legal="© 2026 Acme" />}
+>
+  <LandingSection title="Everything in one place">…</LandingSection>
+</LandingLayout>
+```
+
+The props of each are in
+[Navigation & layout](../components/navigation-and-layout.md):
+[`ListDetailsLayout`](../components/navigation-and-layout.md#listdetailslayout)
+(with `PaneLayout` and `ThreadLayout`),
+[`SettingsLayout`](../components/navigation-and-layout.md#settingslayout),
+[`ResponsiveGrid`](../components/navigation-and-layout.md#responsivegrid),
+[`DashboardGrid`](../components/navigation-and-layout.md#dashboardgrid),
+[`EditorLayout`](../components/navigation-and-layout.md#editorlayout) and
+[`LandingLayout`](../components/navigation-and-layout.md#landinglayout).
+
+## Whole screens to start from
+
+The `Guides/Recipes` stories in Storybook are tested whole screens (the code
+ships with the `screen-recipes` skill of the `nxgt-material` plugin): a home
+dashboard, a list and detail, a form and dialog, a table and settings, a dense
+detail page, a status board and a landing page. Start from the closest one and
+replace the data.
+
+## See also
+
+- [App shell](app-shell.md): `items`, breadcrumbs, the page's title, the
+  background and the route transitions.
+- [Cards and tiles](cards-and-tiles.md): what goes inside a grid.
+- [Themes](themes.md): the surfaces the layouts sit on.

package/docs/guides/ssr.md

@@ -167,7 +167,7 @@ State the server cannot know must be resolved the same way on both sides:
 | Language | no `localStorage`: `defaultLanguage` | Resolve it from the request and pass `initialLanguage` to `I18nProvider`. See [i18n](i18n.md#server-rendering) |
 | Theme | no preference: light | An inline boot script in `<head>`, and `suppressHydrationWarning` on `<html>`. See [theming](theming.md#no-flash-on-load-a-boot-script) |
 | `formatAmount`, `formatDate` | the server's locale and time zone, unless you pass them | Use `useFormatters({ timeZone })`, which follows the `I18nProvider` language, or pass `locale` and `timeZone` (`createFormatters` binds them). A date-only `YYYY-MM-DD` is the same everywhere. See [printing](printing.md#formatamount-and-formatdate) |
-| Screen width, `prefers-color-scheme` (`useIsMobile`, `useTheme`, `AppHeader`, `DataTable`, `TimeField`, `PaneLayout`, `ListDetailsLayout`, the code blocks, …) | no screen: a desktop, light | Nothing: a hydrating client renders the same, then switches on a phone or a dark screen |
+| Screen width, `prefers-color-scheme` (`useIsMobile`, `useTheme`, `AppHeader`, `DataTable`, `TimeField`, `PaneLayout`, `ListDetailsLayout`, the code blocks, …) | no screen: a desktop, light | Nothing: a hydrating client renders the same, then switches on a phone or a dark screen (`ListDetailsLayout`'s `listWidth` is the default width until then; its inspector is switched by CSS) |
 | An attribute's `DATETIME` / `TIME` instant (`AttributesSummary`, `AttributesEditor`), the opening hours' first day of the week | the server's time zone and Intl data differ from the browser's | Nothing: the instant is written in UTC and the week starts on the language's first day until mount, then the viewer's zone and the locale's week info take over, so hydration matches |
 | `Stepper` layout, `Timeline` sides | CSS breakpoints and a container query, no screen width in JavaScript | Nothing: server and client markup are the same |
 | `Timeline` `grouped` | the server's time zone and clock differ from the browser's | Pass `timeZone` and `now` to group on the server too; without them the day headings appear after mount (the items do not remount) |

package/docs/roadmap.md

@@ -169,8 +169,10 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Next
 
-- **Layouts: adaptive navigation, headers and page layouts** — `ActivityLayout` takes `navigation` (a bottom bar, a rail with a FAB, standard and modal drawers, a collapsible sidebar, a top navigation with dropdowns, two-level navigation or a floating toolbar, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, a search bar with full-screen search on a phone, sticky tabs, hide on scroll); each piece is also exported. Page layouts grow with it: an inspector pane and URL state for `ListDetailsLayout`, phone modes for `PaneLayout`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, and new settings, dashboard (rearranging tiles), editor and landing layouts, each with a screen recipe. Everything is opt-in; the shell's default is unchanged. Tracked in [#2103](https://github.com/softistx/nxgt-material/issues/2103).
-
+- **Seven more layout recipes** — Feed, Gallery, Auth, Thread, settings,
+  dashboard and editor screens, each a tested Storybook recipe under
+  Guides/Recipes with its code beside it, on the layouts the shell now ships
+  ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
 - **FilterBar "Add a filter" stays on its row** — the button no longer wraps
   alone onto a second row on a desktop screen ([#1752](https://github.com/softistx/nxgt-material/issues/1752)).
 
@@ -259,6 +261,10 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Later
 
+- **A lighter first load for the app shell** — `ActivityLayout` pulls about
+  831 KB gzipped through the library's single shared chunk; splitting it so the
+  shell costs tens of KB at first load, the rest loaded where a page uses it
+  (#2417; measured by `scripts/shell-size.spec.ts`).
 - **One `onUpload` options object (next major)** — the upload fields'
   `onUpload(file, onProgress?, signal?)` becomes `onUpload(file, { onProgress,
   signal })`, like the editor's upload context.
@@ -377,6 +383,8 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Layouts: adaptive navigation, headers and page layouts (next minor)** — `ActivityLayout` takes `navigation` (a bottom bar with More and badges, a rail with a FAB or expanded, a standard or modal drawer, a collapsible sidebar, a top navigation with dropdowns, two-level navigation, a floating toolbar or none, chosen for phone, tablet and desktop) and `header` (small, center-aligned, medium and large collapsing on scroll, hide on scroll, a search bar that opens full screen on a phone, sticky tabs), and a route adds a back arrow with `handle.back`; each piece is also exported. Page layouts grow with it: an inspector pane and the selection in the URL for `ListDetailsLayout`, phone modes and a container breakpoint for `PaneLayout`, a centred form and wizard for `ThreadLayout`, a split `AuthCard`, spans and masonry for `ResponsiveGrid`, tabs for `Kanban` on a phone, `Doc` drawn inside the shell, and new `SettingsLayout`, `DashboardGrid` (tiles the user rearranges), `EditorLayout` and `LandingLayout` (with `LandingSection` and `SiteFooter`). Everything is opt-in; the shell's default is unchanged. [Layouts guide](guides/layouts.md) ([#2103](https://github.com/softistx/nxgt-material/issues/2103)). Follow-ups: a resize handle for `EditorLayout`'s properties panel and a separate open state for its phone sheet.
+
 - **Moment (3.74.0)** — a transient full-screen announcement for a one-off event (a player is eliminated, a role is revealed): a modal dialog named by its title, with an illustration, description, action and tone, dismissed by Escape, a tap, its action or a timer, and no motion under reduced motion ([#2220](https://github.com/softistx/nxgt-material/issues/2220), [#2247](https://github.com/softistx/nxgt-material/pull/2247)). A `modal={false}` variant for live events (focus stays, taps pass through, polite status) follows in the next minor ([#2313](https://github.com/softistx/nxgt-material/issues/2313)).
 - **RecordActionsMenu (next minor)** — one menu for a record's lifecycle: archive with an Undo toast (or confirm first with `archivePolicy="confirm"`), restore, and delete that always confirms and shows the backend's refusal, with `ConfirmDialog` gaining `details` and `refusal` slots.
 - **Assistant approval card (next minor)** — `ChatActionProposal` shows an action an assistant proposes, with its status, deadline and Confirm / Reject, and `ChatToolActivity` is a compact row for a tool step in a chat thread ([#2134](https://github.com/softistx/nxgt-material/issues/2134)).

package/lib/components/components.css

@@ -54,6 +54,7 @@
 @import "./ui/actions/button-group/button-group-standard.css";
 /* ActivityLayout: the route transition (cross-fade, none under reduced motion). */
 @import "./ui/layout/app-shell/route-transition.css";
+@import "./ui/layout/app-shell/app-header.css";
 @import "./ui/layout/app-shell/activity-backdrop.css";
 @import "./ui/layout/app-shell/activity-backdrop-shapes.css";
 @import "./ui/layout/auth-card/auth-card-backdrop.css";
@@ -97,6 +98,7 @@
 @import "./ui/actions/toolbar/toolbar-morph-slots.css";
 @import "./ui/actions/toolbar/toolbar-morph-widen.css";
 @import "./ui/actions/toolbar/toolbar-expressive-look.css";
+@import "./ui/layout/navigation-toolbar/navigation-toolbar.css";
 @import "./ui/actions/toolbar/toolbar-density.css";
 @import "./editor-toolbar-expressive.css";
 @import "./editor-floating-bar.css";
@@ -206,6 +208,7 @@
 @import "./ui/fields/attributes/attributes.css";
 /* Background: the gradient preset's CSS, shared (lib/backgrounds/css); the other presets are opt-in: backgrounds.css. */
 @import "./background-shared.css";
+@import "./ui/layout/app-search/app-search.css"; /* AppSearchBar, SearchView */
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
 @import "./ui/widgets/drawing/drawing-animate.css";
 @import "./ui/widgets/barcode/barcode.css"; /* @nxgt/material/barcode: symbol colours, label sheet */

package/lib/components/ui/actions/fab/fab-dock.css

@@ -1,6 +1,9 @@
 /* FabDock: the bottom-end corner, 16px in (24px from 840px wide, M3's
- * medium window), above the home indicator and above a docked bar that
- * sets --nxgt-media-dock. `contained` places it in its positioned parent.
+ * medium window), above the home indicator, above a docked bar that sets
+ * --nxgt-media-dock and above a bottom navigation bar (--nxgt-nav-bar);
+ * --nxgt-bottom-chrome is the two together. The bar's room holds the
+ * safe area, so the dock clears the taller of the two, not their sum. `contained` places it in its
+ * positioned parent.
  * While a FabMenu in it is open, a light scrim covers the page (contained:
  * the pane) behind the pills. The menu is modal, so the whole page is inert
  * either way. */
@@ -11,8 +14,13 @@
 		inset-inline-end: var(--fab-dock-gap);
 		inset-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 		z-index: 40;
 		display: flex;
@@ -33,8 +41,13 @@
 		padding: var(--fab-dock-gap);
 		padding-block-end: calc(
 			var(--fab-dock-gap) +
-			env(safe-area-inset-bottom, 0px) +
-			var(--nxgt-media-dock, 0px)
+			max(
+				env(safe-area-inset-bottom, 0px),
+				var(
+					--nxgt-bottom-chrome,
+					calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+				)
+			)
 		);
 	}
 	@media (min-width: 840px) {

package/lib/components/ui/layout/app-search/app-search.css

@@ -0,0 +1,62 @@
+/* The app bar's search (app-search-bar.tsx, search-view.tsx). One source for
+ * the sizes: --nxgt-search-h is the pill's height, 2.75rem in the bar and
+ * 3rem (a 48px target) in the phone's full-screen view; the back arrow, the
+ * phone's button and the field read it. The pill is a filled, fully rounded
+ * field box: no border at rest, the field box's focus ring when focused.
+ * Classes in the `components` layer: a utility passed as `className` wins. */
+@layer components {
+	.nxgt-search-bar {
+		--nxgt-search-h: 2.75rem;
+	}
+	.nxgt-search-button {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-view {
+		--nxgt-search-h: 3rem;
+	}
+	.nxgt-search-pill {
+		--nxgt-field-radius: calc(var(--nxgt-search-h) / 2);
+	}
+	.nxgt-search-pill [data-slot="input-group"] {
+		height: var(--nxgt-search-h);
+		border-color: transparent;
+		background-color: var(--muted);
+	}
+	.nxgt-search-pill [data-slot="input-group"]:focus-within {
+		background-color: var(--background);
+	}
+	/* The bar's pill: grows to a comfortable width and gives way to the title. */
+	.nxgt-search-bar {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 0 1 28rem;
+		min-width: 0;
+	}
+	.nxgt-search-form {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.nxgt-search-button {
+		flex: none;
+	}
+	.nxgt-search-view-row {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem;
+		padding-top: max(0.5rem, env(safe-area-inset-top));
+		padding-left: max(0.5rem, env(safe-area-inset-left));
+		padding-right: max(0.5rem, env(safe-area-inset-right));
+	}
+	.nxgt-search-view-back {
+		flex: none;
+	}
+	.nxgt-search-view-results {
+		min-height: 0;
+		overflow-y: auto;
+		overscroll-behavior: contain;
+		padding: 0.5rem 1rem;
+		padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+	}
+}

package/lib/components/ui/layout/app-shell/activity-backdrop.css

@@ -82,8 +82,16 @@
 		--nxgt-backdrop-height: calc(
 			100dvh -
 			var(--nxgt-backdrop-top) -
-			max(0.5rem, env(safe-area-inset-bottom)) -
-			var(--nxgt-media-dock, 0px)
+			max(
+				max(0.5rem, env(safe-area-inset-bottom)),
+				calc(
+					0.5rem +
+					var(
+						--nxgt-bottom-chrome,
+						calc(var(--nxgt-nav-bar, 0px) + var(--nxgt-media-dock, 0px))
+					)
+				)
+			)
 		);
 		position: sticky;
 		top: var(--nxgt-backdrop-top);

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.79.0",
+	"version": "3.80.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"