@nxgt/material 3.85.1 → 3.86.1

package/docs/guides/migrating-to-top-app-bar.md

@@ -0,0 +1,156 @@
+# Moving to TopAppBar
+
+`ActivityLayout` draws its app bar with `TopAppBar`, and `TopAppBar` has new
+sizes, a title that is the page's `h1`, free icon actions and a main action. This
+is a minor release: every old spelling keeps working, logs a one-time development
+warning, and is removed no earlier than the next major. This page lists each one
+with what replaces it, what looks different, and which slots the next major renames.
+
+## Contents
+
+- [`AppHeader` becomes `TopAppBar`](#appheader-becomes-topappbar)
+- [`header` values and `handle.header`](#header-values-and-handleheader)
+- [`TopAppBar` `variant` and `headline`](#topappbar-variant-and-headline)
+- [Actions, the account menu and a main action](#actions-the-account-menu-and-a-main-action)
+- [What looks different](#what-looks-different)
+- [The `data-slot` rename in the next major](#the-data-slot-rename-in-the-next-major)
+
+## `AppHeader` becomes `TopAppBar`
+
+**Search**: `AppHeader`.
+
+`AppHeader` is a thin wrapper over `TopAppBar` with the props it always had; it
+logs `AppHeader: is deprecated, use TopAppBar` once in development. Inside
+`ActivityLayout` there is nothing to do: the layout does not use the wrapper.
+In a layout of your own, draw the bar with `TopAppBar`; the menu button and back
+arrow go in `leading`, the avatar in `trailing`.
+
+**Replace**:
+
+```tsx
+// before
+<AppHeader items={items} variant="large" headline={<h1>Orders</h1>} avatar={<Avatar />} />
+
+// after
+<TopAppBar
+  as="header"
+  size="large-flexible"
+  title="Orders"
+  leading={<MenuButton />}
+  trailing={<Avatar />}
+/>
+```
+
+`TopAppBar` does not draw the phone's menu sheet or read the router: the shell
+does. A bar of your own passes its own `leading` and `actions`. `AppHeader` also
+renders a `div`, where `as="header"` makes the bar the page's banner.
+
+## `header` values and `handle.header`
+
+**Search**: `header="center"`, `header="medium"`, `header="large"`,
+`header: 'center'` (and `'medium'`, `'large'`), `variant:` inside a `header` object
+or a route's `handle.header`.
+
+| Before | After |
+| --- | --- |
+| `'small'` | `'small'` (unchanged) |
+| `'center'` | `{ size: 'small', align: 'center' }` |
+| `'medium'` | `'medium-flexible'` |
+| `'large'` | `'large-flexible'` |
+| `'none'` | `'none'` (unchanged) |
+| `{ variant: 'large', hideOnScroll: true }` | `{ size: 'large-flexible', hideOnScroll: true }` |
+| (none) | `'search'`: the search field is the bar's centre |
+
+A string in the new spelling sets the size only, so the layout's `align` stays.
+A route's header in one spelling overrides the layout's in the other. The warning
+is `ActivityLayout: header `medium` is deprecated; use 'medium-flexible'.`
+([troubleshooting](../troubleshooting.md#activitylayout-header-center-medium-or-large-is-deprecated)).
+
+`resolveHeader` and `ResolvedHeader` gain `size` and `align`; `variant` stays
+filled with the old equivalent. `ShellHeaderVariant` is widened with the new
+values: an exhaustive `switch` over it needs them.
+
+## `TopAppBar` `variant` and `headline`
+
+**Search**: `<TopAppBar variant=`, `headline=`.
+
+| Before | After |
+| --- | --- |
+| `variant="center"` | `size="small" align="center"` |
+| `variant="medium"` | `size="medium-flexible"` |
+| `variant="large"` | `size="large-flexible"` |
+| `headline={<h1>Projects</h1>}` | `title="Projects"` (the bar renders the `<h1>`) |
+
+`headline` rendered in a non-heading element with display type; it still does, now
+with the bar's title styling. `data-variant` is still set (`"search"` is new), and
+`data-size` and `data-align` are added.
+
+## Actions, the account menu and a main action
+
+All additive. `headerActions` (and `TopAppBar`'s `actions`) takes a
+`TopAppBarAction[]` as well as a node: free ghost icon buttons, with the rest in
+the account menu on the avatar. `headerPrimaryAction` (`primaryAction`) is a
+`Button` from 768 px and a floating button on a phone. `headerContext` is now the
+bar's subtitle, under the title. An `actions` that is a node, an array of elements
+included, and `trailing` draw as before. See
+[Top app bar sizes](./app-shell.md#top-app-bar-sizes) and
+[the `TopAppBar` props](../components/navigation-and-layout.md#topappbar).
+
+An avatar used as `trailing` next to an `actions` array of data becomes the menu's
+trigger (a `<button>`): it must hold no link or button.
+
+## What looks different
+
+No code change, but snapshots of an app that renders the bar change:
+
+- **Heights.** The headline row of a medium bar is 3 rem and a large bar's 6.5 rem
+  before it is measured (it was 5 rem and 8 rem), then follows the title's real
+  height. Medium titles are 28 px, large ones 40 px (36 px on a phone).
+- **A flat bar.** It sits on the page ground with no shadow, border or surface
+  background (it was a translucent card). Once scrolled it takes the
+  `--surface-container` tint and a 1 px `--border` hairline (the `data-scrolled`
+  attribute). A `className` background, radius or shadow wins at rest (the
+  bar's own look is in `@layer components`); once scrolled the tint replaces a
+  `className` background, as the scrolled state's look.
+- **A ghost menu button on a phone**, leading the bar, with no logo or brand.
+  Desktop is unchanged.
+- **Vertical padding** sits on the bar itself, so `className="py-1"` still works.
+- **`position`.** A `TopAppBar` is no longer `position: relative` except
+  `size="search"`, so a `sticky` class works.
+- **The root is a column.** A standalone `TopAppBar` used to be one flex row on
+  the root; the root is now `flex-col` and its children sit in a
+  `[data-slot="top-app-bar-row"]` (a headline row and the tabs follow it). A
+  layout utility in the root's `className` (`justify-between`, `gap-*`,
+  `items-*`, a horizontal `px-*`) no longer reaches the children; aim it at the
+  row, for example `className="[&_[data-slot=top-app-bar-row]]:justify-between"`.
+  A vertical `py-*` on the root still works.
+- **`title` is the page's heading.** On the old `TopAppBar`, `title` was the HTML
+  `title` attribute (a native tooltip). It is now the bar's own title and renders
+  an `<h1>`. To keep a tooltip, put `title` on an element you pass as a child.
+- **The shell's bar** is the page's `<header>` (a banner landmark) instead of a
+  `<div>`. It keeps its `data-slot` names; `app-header-page-title-row` is now the
+  title block, always present around the title and the context line. A small
+  bar with `hideOnScroll` or tabs still carries `data-variant="small"`. The
+  internal `--nxgt-header-h` custom property (never documented) is gone;
+  `--nxgt-header-height` still sets the bar's height, and the first-paint total
+  `--nxgt-header-total` follows it.
+
+## The `data-slot` rename in the next major
+
+The shell keeps its `app-header*` `data-slot` names in this minor, so selectors
+and tests written against them keep working; `TopAppBar`'s CSS styles both
+families. The next major renames the slots in the table below. Update selectors then, or now with the new
+names on a `TopAppBar` of your own:
+
+| Today (shell) | Next major |
+| --- | --- |
+| `app-header` | `top-app-bar` |
+| `app-header-page-title` | `top-app-bar-title` |
+| `app-header-headline` | `top-app-bar-headline` |
+| `app-header-collapsed-title` | `top-app-bar-collapsed-title` |
+| `app-header-context` | `top-app-bar-subtitle` |
+| `app-header-tabs` | `top-app-bar-tabs` |
+
+The other `app-header*` slots (`app-header-title`, `-title-after`, `-back`, `-menu`) are not in this table: their next-major names are not decided yet, so do not rely on a `top-app-bar-*` equivalent.
+
+**Search**: `app-header` in tests, CSS and `data-slot=` selectors.

package/docs/guides/theming.md

@@ -73,6 +73,7 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--error-text` | `text-error-text` | error drawn as text: field messages, `HelperText` in its error state, form and dialog errors, `variant="error"` menu items |
 | `--destructive` | `bg-destructive`, `text-destructive` | deprecated alias of `--error`: the light theme sets it to `var(--error)`, the dark theme keeps its own value; use `--error` |
 | `--ground` | `bg-ground` | the page's ground under `ActivityLayout`: the tinted colour the cards stand on (see [Page ground](#page-ground)) |
+| `--surface-container`, `--surface-container-high` | `bg-surface-container`, `bg-surface-container-high` | tinted chrome: `--surface-container` is the scrolled top app bar (draw it with a 1px `--border` hairline), the primary at 12 % over `--ground` in light (less for a very dark primary, solved per seed) and 26 % in dark; `--surface-container-high` is raised chrome such as a search field, the primary at 16 % over `--background` in light (+4 points over the solved share) and 34 % over `--ground` in dark. Foreground, muted foreground and primary text keep 4.5:1 or more on both, in every preset |
 | `--card`, `--popover`, `--tooltip` (+ `-foreground`) | `bg-card`, `bg-popover`, `bg-tooltip` | surfaces |
 | `--card-edge` | `border-card-edge` | the edge of a `Card`, a `Popover` and a `Dialog`: `var(--border)` in light, `color-mix(in oklab, white 8%, var(--card))` in dark, a hairline lighter than the surface so it lifts off `--ground` |
 | `--border`, `--input`, `--ring` | `border-border`, `border-input`, `ring-ring` | outlines |
@@ -83,6 +84,10 @@ at the top are needed is in [getting started](../getting-started.md#styles).
 | `--nxgt-cards-min`, `--nxgt-cards-gap` | set on the list or an ancestor | the narrowest a `DataTable`/`ServerTable` card is (default `15rem`) with `cardDensity="compact"`, and the gap between cards (`0.75rem`, `0.5rem` when compact): see [Cards and tiles](./cards-and-tiles.md#columns) |
 | `--nxgt-field-radius`, `--nxgt-field-inner-radius` | `rounded-field` (and its sides, `rounded-s-field`…), `rounded-field-inner` | every field's corners, and the corner a field meets its open list with: see [The field box](#the-field-box) |
 
+```tsx
+<header className="bg-surface-container border-b border-border" />
+```
+
 Some colours are derived rather than tokens of their own:
 `bg-background-paper` (5 % primary), `bg-paper` (0.5 % primary),
 `bg-primary-container`, `bg-secondary-container`, `bg-tertiary-container`,

package/docs/roadmap.md

@@ -6,12 +6,6 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
-- **App shell header refresh** — `AppHeader` and the look `TopAppBar`
-  shares sit flat on the page ground and tint when content scrolls under
-  them; the actions are grouped in a pill, the search is a pill field (an
-  icon on a phone), and the menu button is a ghost icon button. The new look
-  is the default in a minor, with no API change; an A/B preview comes first
-  ([#2503](https://github.com/softistx/nxgt-material/issues/2503)).
 - **Calculator** — `@nxgt/material/calculator` is an exact-decimal calculator
   (Standard, Scientific, point of sale, Financial, Conversion, Programmer;
   every variant but Standard loads on demand)
@@ -386,6 +380,23 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **App shell header refresh: the TopAppBar family (next minor)** — `TopAppBar`
+  takes four sizes (`small`, `medium-flexible`, `large-flexible`, `search`), an
+  `align`, a `title` that is the page's `h1` with a `subtitle`, and a collapse
+  from large to small on scroll with a morph (snapped under reduced motion).
+  It sits flat on the page ground and tints when content scrolls under it,
+  with new surface-container tokens. Actions are data (`TopAppBarAction`):
+  free icon buttons plus an account menu on the avatar, and a `primaryAction`
+  that is a floating button on a phone. `ActivityLayout` draws its bar with it
+  (`header` / `handle.header` take the new sizes, `headerActions` takes data,
+  `headerPrimaryAction` is new, `headerContext` is the subtitle) and the
+  phone's menu button is a ghost icon leading the bar. `AppHeader` and the old
+  `variant`, `headline` and `'center'` / `'medium'` / `'large'` values are
+  deprecated, and some `app-header*` slots are renamed in the next major (see the guide)
+  ([#2503](https://github.com/softistx/nxgt-material/issues/2503),
+  [guide](guides/app-shell.md#top-app-bar-sizes),
+  [moving to `TopAppBar`](guides/migrating-to-top-app-bar.md)).
+
 - **Seven more layout recipes (next minor)** — whole screens to start from under Guides/Recipes, each a tested Storybook story with its code in the plugin's `screen-recipes` skill: a team feed, a gallery of pictures by day, sign-in, sign-up and forgotten-password screens, a messages thread, settings with sections, an overview of rearrangeable widgets and a document editor, on the layouts the shell ships ([#2413](https://github.com/softistx/nxgt-material/issues/2413)).
 
 - **Search dialog and results page recipe (next patch)** — a command dialog (Ctrl/Cmd+K and a header button), debounced grouped suggestions, type chips, a conditional filter and highlighted result cards, with its code in the plugin's `screen-recipes` skill ([#2333](https://github.com/softistx/nxgt-material/issues/2333)).

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;
+	}
+}