@nxgt/material 3.85.1 → 3.86.0

package/dist/pdf-reader.js

@@ -1,3 +1,3 @@
-import { t as e } from "./public-BNebh4z0.js";
+import { t as e } from "./public-ByAsqBOf.js";
 import { configurePdfReader as t } from "@nxgt/material-core/pdf-reader";
 export { e as PdfReader, t as configurePdfReader };

package/dist/{percent-field-8_pILs15.js → percent-field-D47IlaPF.js}

@@ -1,4 +1,4 @@
-import { r as e } from "./currency-field-CPbaM7ay.js";
+import { r as e } from "./currency-field-t41sFYg_.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/fields/percent-field/percent-field.tsx
 function n({ min: n = 0, max: r = 100, step: i = 1, ...a }) {

package/dist/{picker-surface-pyGv-Qh9.js → picker-surface-Cg4V4-E0.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { r as t, t as n } from "./in-dialog-D61Yeaol.js";
-import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-Hv8rn55-.js";
-import { i as p, o as m, r as h, t as g } from "./popover-3EF4q2CT.js";
-import { t as _ } from "./use-material-translation-1kCHtB0p.js";
-import { n as v, t as y } from "./icon-button-CG4aO8Gh.js";
+import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-BA8G1qVU.js";
+import { i as p, o as m, r as h, t as g } from "./popover-Dzk4-l9U.js";
+import { t as _ } from "./use-material-translation-CCy1Me0h.js";
+import { n as v, t as y } from "./icon-button-DrqNk1Ww.js";
 import { t as b } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as x } from "./escape-owner-DpaP0lm1.js";
 import * as S from "react";

package/dist/{popover-3EF4q2CT.js → popover-Dzk4-l9U.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t, r as n } from "./dist-DVRQkaTK.js";
 import { i as r, r as i, t as a } from "./dist-DWZXlCZR.js";
-import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-C6LP2Rw8.js";
+import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-CweqX5A9.js";
 import { a as p, i as m, r as h } from "./dist-DHdUUM1w.js";
 import { a as g, c as _, l as v, o as y, r as b, s as x, t as S } from "./in-dialog-D61Yeaol.js";
 import { i as C } from "./escape-owner-DpaP0lm1.js";

package/dist/{pos-types-Dv2UxKSN.js → pos-types-JOXMY4Y2.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-1kCHtB0p.js";
+import { t as e } from "./use-material-translation-CCy1Me0h.js";
 import { n as t } from "./calculator-context-BugcKuVG.js";
 import { t as n } from "./calculator-announce-DRd2c6Dq.js";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";

package/dist/{pos-variant-DJvtN9N8.js → pos-variant-B2mS8bMB.js}

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./use-material-translation-1kCHtB0p.js";
-import { t as n } from "./icon-button-CG4aO8Gh.js";
+import { t } from "./use-material-translation-CCy1Me0h.js";
+import { t as n } from "./icon-button-DrqNk1Ww.js";
 import { n as r } from "./calculator-context-BugcKuVG.js";
-import { a as i, n as a, r as o, t as s } from "./pos-types-Dv2UxKSN.js";
+import { a as i, n as a, r as o, t as s } from "./pos-types-JOXMY4Y2.js";
 import { i as c, n as l, s as u } from "./key-layout-cR79xfGE.js";
 import { n as d, t as f } from "./currency-B-r3ig11.js";
-import { t as p } from "./calculator-segment-C4WQAHcN.js";
+import { t as p } from "./calculator-segment-BigMpjhn.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { ChevronDown as y, X as b } from "lucide-react";

package/dist/print.js

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-DI3nmQ6I.js";
+import { i as e, t } from "./translate-material-DTIAPmlU.js";
 import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";

package/dist/{programmer-variant-Bmcq2KzC.js → programmer-variant-C_Tl0P4_.js}

@@ -1,9 +1,9 @@
-import { t as e } from "./use-material-translation-1kCHtB0p.js";
+import { t as e } from "./use-material-translation-CCy1Me0h.js";
 import { t } from "./toggle-FeCCJqbg.js";
 import { n } from "./calculator-context-BugcKuVG.js";
 import { i as r, n as i, s as a } from "./key-layout-cR79xfGE.js";
 import { t as o } from "./programmer-word-CNCF7DJF.js";
-import { t as s } from "./calculator-segment-C4WQAHcN.js";
+import { t as s } from "./calculator-segment-BigMpjhn.js";
 import { useId as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import { calculate as f, formatExpression as p, sessionOptions as m, toCanonical as h, tokenize as g } from "@nxgt/material-core/calculator";

package/dist/{public-BNebh4z0.js → public-ByAsqBOf.js}

@@ -3,25 +3,25 @@ import { n as t } from "./ui.utils-CAnKTCw5.js";
 import { t as n } from "./utils-BLfntITJ.js";
 import { o as r } from "./dist-DVRQkaTK.js";
 import { i, n as a, r as o } from "./dist-DWZXlCZR.js";
-import { o as s } from "./spinner-C6LP2Rw8.js";
+import { o as s } from "./spinner-CweqX5A9.js";
 import { a as c, i as l, n as u } from "./dist-DHdUUM1w.js";
 import { i as d } from "./dist-DOK3zo5C.js";
 import { r as f, t as p } from "./in-dialog-D61Yeaol.js";
-import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-Hv8rn55-.js";
-import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-CDKev8dk.js";
-import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-CEIuSxU_.js";
+import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-BA8G1qVU.js";
+import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-IRFp4CH9.js";
+import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-BsgzHSNf.js";
 import { t as fe } from "./dist-DkQbkF9T.js";
-import { t as pe } from "./button-DhiNGrdT.js";
-import { t as N } from "./use-material-translation-1kCHtB0p.js";
-import { n as me, t as he } from "./icon-button-CG4aO8Gh.js";
+import { t as pe } from "./button-MAL5an7L.js";
+import { t as N } from "./use-material-translation-CCy1Me0h.js";
+import { n as me, t as he } from "./icon-button-DrqNk1Ww.js";
 import { t as ge } from "./useEvent-2fKq-6w8.js";
 import { n as _e, t as ve } from "./toggle-group-CVMxEpWi.js";
 import { i as ye } from "./escape-owner-DpaP0lm1.js";
 import { n as be } from "./use-slice-reducer-BGkeGtML.js";
 import { t as xe } from "./input-CC2joTjB.js";
 import { r as Se } from "./use-csp-nonce-ZKs9k-ov.js";
-import { n as Ce, t as we } from "./empty-state-C56000TB.js";
-import { r as Te, t as Ee, u as De } from "./dialog-DmlG9opW.js";
+import { n as Ce, t as we } from "./empty-state-C70prDDr.js";
+import { r as Te, t as Ee, u as De } from "./dialog-BjKiRXJg.js";
 import { t as Oe } from "./client-only.utils-3nHNzCki.js";
 import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
 import * as P from "react";

package/dist/{rich-code-block-DmX7d58S.js → rich-code-block-CJAfqk6b.js}

@@ -1,7 +1,7 @@
-import { n as e } from "./spinner-C6LP2Rw8.js";
-import { c as t, n, t as r } from "./dropdown-menu-CDKev8dk.js";
-import { t as i } from "./use-material-translation-1kCHtB0p.js";
-import { a, i as o, n as s, o as c, t as l } from "./code-language-items-BWw17W9s.js";
+import { n as e } from "./spinner-CweqX5A9.js";
+import { c as t, n, t as r } from "./dropdown-menu-IRFp4CH9.js";
+import { t as i } from "./use-material-translation-CCy1Me0h.js";
+import { a, i as o, n as s, o as c, t as l } from "./code-language-items-CXEMiWoF.js";
 import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
 import { t as m } from "./code-block-spec-CGLKRhwD.js";
 import { Suspense as h, lazy as g, useEffect as _, useRef as v, useState as y } from "react";
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
 }
 //#endregion
 //#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
-var N = g(() => import("./code-editor-BgKFrcld.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
+var N = g(() => import("./code-editor-B6dFQSUJ.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
 function P() {
 	let { t: e } = i();
 	return /* @__PURE__ */ b("div", {

package/dist/{scientific-variant-DijUrpP8.js → scientific-variant-CskM4MLV.js}

@@ -1,9 +1,9 @@
-import { t as e } from "./use-material-translation-1kCHtB0p.js";
+import { t as e } from "./use-material-translation-CCy1Me0h.js";
 import { t } from "./toggle-FeCCJqbg.js";
 import { n } from "./calculator-context-BugcKuVG.js";
 import { i as r, o as i } from "./key-layout-cR79xfGE.js";
 import { t as a } from "./standard-layout-BuSRr3TY.js";
-import { t as o } from "./calculator-segment-C4WQAHcN.js";
+import { t as o } from "./calculator-segment-BigMpjhn.js";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { scientificOptions as l } from "@nxgt/material-core/calculator/scientific";
 //#region lib/components/ui/widgets/calculator/variants/scientific/scientific-layout.ts

package/dist/{sortable-provider-Cnmt_gWu.js → sortable-provider-ICS_vkLA.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DVRQkaTK.js";
-import { t as n } from "./use-material-translation-1kCHtB0p.js";
-import { t as r } from "./icon-button-CG4aO8Gh.js";
+import { t as n } from "./use-material-translation-CCy1Me0h.js";
+import { t as r } from "./icon-button-DrqNk1Ww.js";
 import { t as i } from "./compose-refs-G4J4kaUA.js";
 import a, { cloneElement as o, createContext as s, forwardRef as c, memo as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
 import { jsx as y } from "react/jsx-runtime";

package/dist/{spinner-C6LP2Rw8.js → spinner-CweqX5A9.js}

@@ -5,7 +5,7 @@ import { a as i, i as a, n as o, r as s, t as c } from "./dist-DWZXlCZR.js";
 import { a as l, i as u, n as d, r as f, t as p } from "./dist-DHdUUM1w.js";
 import { a as m, c as h, d as g, i as _, l as v, o as y, r as b, t as x, u as S } from "./floating-ui.dom-KkZSW8_E.js";
 import { t as C } from "./dist-DkQbkF9T.js";
-import { t as w } from "./use-material-translation-1kCHtB0p.js";
+import { t as w } from "./use-material-translation-CCy1Me0h.js";
 import * as T from "react";
 import { useLayoutEffect as E, useRef as D, useSyncExternalStore as O } from "react";
 import { jsx as k, jsxs as A } from "react/jsx-runtime";

package/dist/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/dist/{tabs-Bj1zOe7-.js → tabs-BOT9B4le.js}

@@ -3,7 +3,7 @@ import { n as t } from "./dist-DVRQkaTK.js";
 import { i as n, r, t as i } from "./dist-DWZXlCZR.js";
 import { a, i as o, r as s } from "./dist-DHdUUM1w.js";
 import { i as c, n as l, r as u, t as d } from "./dist-DOK3zo5C.js";
-import { t as f } from "./use-material-translation-1kCHtB0p.js";
+import { t as f } from "./use-material-translation-CCy1Me0h.js";
 import * as p from "react";
 import { createContext as m, useCallback as h, useContext as g, useEffect as ee, useLayoutEffect as _, useRef as v, useState as te } from "react";
 import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";

package/dist/theme-picker.js

@@ -1,10 +1,10 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-CQwVSoU3.js";
 import { a as s, r as c } from "./icon-sprites-CaYXzOL4.js";
-import { t as l } from "./use-material-translation-1kCHtB0p.js";
+import { t as l } from "./use-material-translation-CCy1Me0h.js";
 import { t as u } from "./use-theme-BCLireTd.js";
 import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
-import { t as p } from "./theme-toggle-Cxku5iBP.js";
+import { t as p } from "./theme-toggle-WAFkncYx.js";
 import { n as m, t as h } from "./nxgt-theme-DA1IQe0O.js";
 import { useContext as g } from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";

package/dist/{theme-toggle-Cxku5iBP.js → theme-toggle-WAFkncYx.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-1kCHtB0p.js";
+import { t as e } from "./use-material-translation-CCy1Me0h.js";
 import { i as t } from "./theme-store-BdPp43cV.js";
 import { n, t as r } from "./use-theme-BCLireTd.js";
 import { r as i } from "./theme-context-Cofk6vgs.js";

package/dist/{toolbar-items-CEIuSxU_.js → toolbar-items-BsgzHSNf.js}

@@ -1,15 +1,15 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { o as t, t as n } from "./dist-DVRQkaTK.js";
 import { i as r, r as i } from "./dist-DWZXlCZR.js";
-import { n as a } from "./spinner-C6LP2Rw8.js";
+import { n as a } from "./spinner-CweqX5A9.js";
 import { a as o } from "./dist-DHdUUM1w.js";
 import { i as s, n as c, r as l, t as u } from "./dist-DOK3zo5C.js";
 import { t as d } from "./in-dialog-D61Yeaol.js";
-import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-CDKev8dk.js";
-import { a as te, n as ne } from "./popover-3EF4q2CT.js";
+import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-IRFp4CH9.js";
+import { a as te, n as ne } from "./popover-Dzk4-l9U.js";
 import { i as re, n as ie, r as ae, t as oe } from "./dist-BZe2evxL.js";
 import { t as se } from "./warn-once-C_e47JM8.js";
-import { t as ce } from "./use-material-translation-1kCHtB0p.js";
+import { t as ce } from "./use-material-translation-CCy1Me0h.js";
 import * as E from "react";
 import { createContext as D, useCallback as le, useContext as O, useEffect as k, useId as ue, useLayoutEffect as A, useMemo as j, useReducer as de, useRef as M, useState as N } from "react";
 import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";

package/dist/{translate-material-DI3nmQ6I.js → translate-material-DTIAPmlU.js}

@@ -1,4 +1,4 @@
-import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-BstxG_hN.js";
+import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-BRZNhsy5.js";
 import { createContext as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
 import { jsx as p } from "react/jsx-runtime";
 //#region lib/i18n/material-resources-registry.ts

package/dist/{translator-BstxG_hN.js → translator-BRZNhsy5.js}

@@ -1481,6 +1481,10 @@ var r = {
 			badge: "{count} new",
 			"badge-dot": "new activity"
 		},
+		"top-app-bar": {
+			account: "Account menu",
+			more: "More"
+		},
 		"app-header": {
 			back: "Back",
 			"back-to": "Back to {label}",
@@ -4926,6 +4930,10 @@ var r = {
 			badge: "{count, plural, one {# nouveauté} other {# nouveautés}}",
 			"badge-dot": "nouveauté"
 		},
+		"top-app-bar": {
+			account: "Menu du compte",
+			more: "Plus"
+		},
 		"app-header": {
 			back: "Retour",
 			"back-to": "Retour à {label}",

package/dist/{use-chat-composer-BqLkk_iH.js → use-chat-composer-67MgWAHz.js}

@@ -4,28 +4,28 @@ import { t as n } from "./utils-BLfntITJ.js";
 import { n as r } from "./use-shape-morph-BKA_R5P5.js";
 import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
 import { i as s, n as c, r as l, t as u } from "./dist-DWZXlCZR.js";
-import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-C6LP2Rw8.js";
+import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-CweqX5A9.js";
 import { a as T, i as E, n as D, r as O, t as k } from "./dist-DHdUUM1w.js";
 import { a as A, i as ee } from "./dist-DOK3zo5C.js";
 import { i as j, n as M } from "./in-dialog-D61Yeaol.js";
-import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-1t6ULy5i.js";
+import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-DZnt8PYE.js";
 import { A as re, C as ie, D as ae, E as oe, O as se, S as I, T as ce, _ as le, a as ue, b as de, d as fe, f as pe, g as me, h as he, i as ge, k as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, t as Te, u as Ee, v as De, w as Oe, x as ke, y as Ae } from "./floating-ui.dom-KkZSW8_E.js";
-import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-CDKev8dk.js";
+import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-IRFp4CH9.js";
 import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
-import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-3EF4q2CT.js";
+import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-Dzk4-l9U.js";
 import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
-import { n as it, r as at, t as ot, u as st } from "./tabs-Bj1zOe7-.js";
-import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-CEIuSxU_.js";
+import { n as it, r as at, t as ot, u as st } from "./tabs-BOT9B4le.js";
+import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-BsgzHSNf.js";
 import { t as mt } from "./dist-DkQbkF9T.js";
 import { o as ht, s as gt, t as _t } from "./use-click-lock-Bwg_caHO.js";
 import { a as vt, r as yt } from "./icon-sprites-CaYXzOL4.js";
 import { t as bt } from "./warn-once-C_e47JM8.js";
-import { r as xt, t as St } from "./button-DhiNGrdT.js";
-import { a as Ct } from "./translator-BstxG_hN.js";
+import { r as xt, t as St } from "./button-MAL5an7L.js";
+import { a as Ct } from "./translator-BRZNhsy5.js";
 import { h as wt } from "./get-CTzJAwfc.js";
 import { t as Tt } from "./isEmpty-F_g3jLf8.js";
-import { t as L } from "./use-material-translation-1kCHtB0p.js";
-import { t as R } from "./icon-button-CG4aO8Gh.js";
+import { t as L } from "./use-material-translation-CCy1Me0h.js";
+import { t as R } from "./icon-button-DrqNk1Ww.js";
 import { t as Et } from "./use-ssr-media-query-C6M5m8sf.js";
 import { n as Dt, t as Ot } from "./typography-CYEquVeb.js";
 import { n as kt, t as At } from "./util-4heV2LPI.js";
@@ -36,14 +36,14 @@ import { a as Bt } from "./toggle-group-CVMxEpWi.js";
 import { n as Vt } from "./use-slice-reducer-BGkeGtML.js";
 import { t as Ht } from "./browser-only-DQ94lWF8.js";
 import { t as Ut } from "./compose-refs-G4J4kaUA.js";
-import { n as Wt, r as Gt, t as Kt } from "./chip-m0_usuzd.js";
+import { n as Wt, r as Gt, t as Kt } from "./chip-DKAKoNxq.js";
 import { a as qt, c as Jt, o as Yt, r as Xt, s as Zt, t as Qt } from "./input-CC2joTjB.js";
 import { t as $t } from "./text-field-BAdY-kpO.js";
 import { r as en } from "./use-csp-nonce-ZKs9k-ov.js";
-import { t as tn } from "./empty-state-C56000TB.js";
+import { t as tn } from "./empty-state-C70prDDr.js";
 import { t as nn } from "./skeleton-DSdtr2qc.js";
-import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-DmlG9opW.js";
-import { t as dn } from "./icon-badge-ec7MmUGA.js";
+import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-BjKiRXJg.js";
+import { t as dn } from "./icon-badge-D3KO6uEQ.js";
 import { H as fn, V as pn, X as mn, bt as hn, it as gn, lt as _n, n as vn, t as yn, xt as bn, yt as xn } from "./dist-moutbfbd.js";
 import { t as Sn } from "./markdown-Dw_uH7j7.js";
 import { r as Cn, t as wn } from "./create-store-Dqp-PLLn.js";
@@ -11229,7 +11229,7 @@ var aS = (e = {}) => Cn({
 		let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
 			import("./dist-CRMFGjng.js"),
 			import("./lowlight-OtcjU2Sa.js"),
-			import("./rich-code-block-DmX7d58S.js")
+			import("./rich-code-block-CJAfqk6b.js")
 		]);
 		return [r(t, {
 			lowlight: n,

package/dist/{use-heading-spy-nFyb9_KE.js → use-heading-spy-D8WbHJuK.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-1t6ULy5i.js";
-import { a as l } from "./button-DhiNGrdT.js";
-import { i as u } from "./translate-material-DI3nmQ6I.js";
-import { t as d } from "./use-material-translation-1kCHtB0p.js";
+import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-DZnt8PYE.js";
+import { a as l } from "./button-MAL5an7L.js";
+import { i as u } from "./translate-material-DTIAPmlU.js";
+import { t as d } from "./use-material-translation-CCy1Me0h.js";
 import { _ as f, g as p, h as m, t as h, v as g, y as _ } from "./date.utils-JTEIo3mM.js";
 import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
 import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";

package/dist/{use-material-translation-1kCHtB0p.js → use-material-translation-CCy1Me0h.js}

@@ -1,4 +1,4 @@
-import { i as e, t } from "./translate-material-DI3nmQ6I.js";
+import { i as e, t } from "./translate-material-DTIAPmlU.js";
 import { useCallback as n } from "react";
 //#region lib/i18n/use-material-translation.ts
 function r() {

package/dist/{use-return-focus-Hv8rn55-.js → use-return-focus-BA8G1qVU.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
-import { C as o, S as s, x as c } from "./spinner-C6LP2Rw8.js";
+import { C as o, S as s, x as c } from "./spinner-CweqX5A9.js";
 import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
 import { r as te } from "./escape-owner-DpaP0lm1.js";

package/docs/README.md

@@ -32,6 +32,7 @@ detail: every option, the second example, and the traps.
 | [SSR](guides/ssr.md) | Your app renders on a server and bundles this package |
 | [Content Security Policy](guides/csp.md) | Your app sends a strict CSP: the directives to use, the components that still inject a `<style>`, the zod and KaTeX settings, self-hosting a font, the per-request nonce |
 | [The Vite plugin](guides/vite-plugin.md) | You are adding `nxgtMaterial()` to `vite.config.ts`: the CSP by hash or nonce, fonts, the styles check, PDFs on a bundled server, and each option's opt-out |
+| [Moving to TopAppBar](guides/migrating-to-top-app-bar.md) | Your app uses `AppHeader`, `TopAppBar`'s `variant` / `headline`, the shell's `'center'` / `'medium'` / `'large'` header values or the `app-header*` slots: each old spelling and its replacement, the visual changes, the slot rename planned for the next major |
 | [Migrating to 3.0](guides/migrating-to-3.md) | You are upgrading from 2.x: the React 19.3 and React Router 8.5 peers, `ActivityLayout`'s default route transition, `use(browser())` in server HTML, and each API removed in 3.0 with what replaces it |
 | [Date and time fields: from 2.x](guides/date-time-fields-2-x.md) | Your app used `DateField`, `DateRangeField`, `TimeField` or `TimePicker` before their redesign: each change in look and behaviour, the 2.x ways back that 3.0 removed, and what to change in tests |
 | [The field look (2.x)](guides/field-look-2-x.md) | Your fields or pickers look different after an upgrade (8px corners, the focus halo, a dashed read-only, a 44px `NativeSelect`, a list connected to its trigger, a `CountryField` with no chip, new group headers, the date and time fields' boxes) and you want to know what changed or get the earlier look back |

package/docs/components/navigation-and-layout.md

@@ -7,11 +7,11 @@ documentation-site shell. Everything is imported from
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; `header` sets the app bar (small, center, medium or large collapsing on scroll, hide on scroll, a route's `handle.header`, tabs under it, a route's `handle.back` arrow); a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`, or `<Switcher size="compact">` for an icon-only one), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
+| <img src="../previews/navigation-layout-appshell.webp" width="96" alt=""> | [ActivityLayout](#activitylayout) | App shell: sidebar, header, breadcrumbs, titled page; `header` sets the app bar, a `TopAppBar` (small, medium-flexible, large-flexible or search, collapsing on scroll, hide on scroll, a route's `handle.header`, tabs under it, a route's `handle.back` arrow); a route's `handle.title` is the page's `h1` in the app bar (it labels `main`; `usePageTitleFocus()` focuses it after a navigation), `handle.titleAfter` / `titleAfter` a node right after it, outside the `h1` (a record's `Switcher`, or `<Switcher size="compact">` for an icon-only one), `headerContext` a small tenant line after it from md up, `breadcrumbRoot` a text root crumb or (`icon: true`) the home icon with its own target and name, `breadcrumb={false}` no trail, `context` the tenant line atop the phone's menu sheet; `menuOpen` / `onMenuOpenChange` control the phone's menu sheet, which closes itself on a followed link or any location change |
 | <img src="../previews/navigation-layout-accountmenu.webp" width="96" alt=""> | [AccountMenu](#accountmenu) | The app bar's avatar menu: the account, the app's links, Sign out |
 | <img src="../previews/navigation-layout-authcard.webp" width="96" alt=""> | [AuthCard](#authcard) | Signed-out page frame: one `main`, a centred card, its title the `h1` |
 | <img src="../previews/navigation-layout-sidebar.webp" width="96" alt=""> | [Sidebar](#sidebar) | Collapsible navigation sidebar |
-| <img src="../previews/navigation-layout-topappbar.webp" width="96" alt=""> | [TopAppBar, BottomAppBar](#topappbar) | Top (small, center, medium, large) and bottom bars |
+| <img src="../previews/navigation-layout-topappbar.webp" width="96" alt=""> | [TopAppBar, BottomAppBar](#topappbar) | The top app bar (small, medium-flexible, large-flexible, search; collapse, icon actions as data, account menu, primary action) and a bottom bar |
 | | [AppSearchBar, SearchView](#appsearchbar) | The app bar's search: a pill with a docked results panel from 768px, a full-screen search view on a phone |
 | <img src="../previews/navigation-layout-stickyactionbar.webp" width="96" alt=""> | [StickyActionBar](#stickyactionbar) | A page's main decision, stuck to the bottom on a phone, inline from `md` |
 | <img src="../previews/navigation-layout-breadcrumb.webp" width="96" alt=""> | [Breadcrumb](#breadcrumb) | Breadcrumb primitives |
@@ -68,7 +68,7 @@ const items: MenuItem[] = [
 ```
 
 Parts: `ActivityLayout` (the chrome), `ActivityContent` (one screen),
-`AppSidebar`, `AppHeader` and `AppBreadcrumb`, which the layout composes and
+`AppSidebar`, `AppHeader` (deprecated, use `TopAppBar`) and `AppBreadcrumb`, which the layout composes and
 which work alone. `AppHeader` also takes `tabs` (`ReactNode`, default none: a
 `TabsNav` as a row at the foot of the bar, pinned when the bar hides) and `back`
 (`ShellBack`, default none: the back arrow, named "Back" or "Back to <label>"
@@ -90,10 +90,11 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `headerTitle` | `ReactNode` | — | the header's leading title (the context: an organisation's name), after the phone's menu button, truncated when long; when it is cut off, its full text is the `title` tooltip (#629) |
 | `handle.title` | `ReactNode \| (match: UIMatch) => ReactNode` | — | on a route: the page's title in the app bar, its one `h1`, in the first server HTML; `ActivityContent` leaves its own title out while it is set (see the [app shell guide](../guides/app-shell.md#the-pages-title-in-the-app-bar)) |
 | `titleAfter` / `handle.titleAfter` | `ReactNode \| (match: UIMatch) => ReactNode` | — | a node right after the page's title in the app bar, outside its `h1` (a record's `Switcher`); stays on screen on a phone, the title truncates first; the prop wins over the handle (see the [app shell guide](../guides/app-shell.md#a-slot-after-the-title)) |
-| `headerContext` | `ReactNode` | — | a small muted context line (the tenant) after the page's title and its slot, from `md` up, outside the `h1`, truncated with its full text as the tooltip; hidden on a phone, where `context` fills the menu sheet (see the [app shell guide](../guides/app-shell.md#a-context-line-after-the-title)) |
+| `headerContext` | `ReactNode` | — | the bar's `subtitle`: a small muted context line (the tenant) under the page's title and its slot, from `md` up, outside the `h1`, truncated with its full text as the tooltip; hidden on a phone, where `context` fills the menu sheet (see the [app shell guide](../guides/app-shell.md#a-context-line-after-the-title)) |
 | `breadcrumb` | `boolean` | `true` | `false` hides the breadcrumb trail (an error page); it is also hidden when every matched `handle.breadcrumb` renders `null`; see the [app shell guide](../guides/app-shell.md#breadcrumbs) |
 | `breadcrumbRoot` | `{ label: ReactNode; to: string }` or `{ label: string; to: string; icon: true }` | — | the breadcrumb's first crumb: a text link in place of the home icon, or with `icon: true` the home icon alone linked to `to`, named and tooltipped `label` (`AppBreadcrumb`'s `root`); see the [app shell guide](../guides/app-shell.md#breadcrumbs) |
-| `headerActions` | `ReactNode` | — | header, before the avatar |
+| `headerActions` | `ReactNode \| TopAppBarAction[]` | — | header, before the avatar; data (`TopAppBarAction`: `label`, `icon`, `onClick` / `href`, `placement` `'bar'` or `'account'`, `group`, `selected`, `disabled`; see [TopAppBar](#topappbar)) draws free icon buttons and an account menu |
+| `headerPrimaryAction` | `TopAppBarPrimaryAction` (`{ label, icon, onClick?, disabled? }`) | — | the bar's `primaryAction`, the screen's main action: a `Button` from 768 px, a `Fab` on a phone |
 | `title`, `subtitle`, `actions` | `ReactNode` | — | `ActivityContent`'s header card; `title` is left out while a route's `handle.title` puts the page's title in the app bar |
 | `header` / `hideHeader` | `ReactNode` / `boolean` | — | `ActivityContent`: replace or drop the header card |
 | `contentAs` / `scroll` | `'main' \| 'div'` / `'document' \| 'container'` | `'main'` / `'document'` | the content region is the page's `<main>`; the document scrolls (see the [app shell guide](../guides/app-shell.md#landmarks-headings-and-scrolling)) |
@@ -107,7 +108,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | `navigation` | `ShellNavigation \| { phone?, tablet?, desktop?, hideOnScroll?, persistKey? }` | `{ phone: 'modal-drawer', tablet: 'rail', desktop: 'rail' }` | `ActivityLayout`: the navigation per window size (phone below 768px, tablet to 1279px, desktop from 1280px). Every `ShellNavigation` name is drawn: `'modal-drawer'`, `'rail'`, `'rail-expanded'`, `'drawer'`, `'sidebar'`, `'top'`, `'two-level'`, `'floating'`, `'bar'` and `'none'`. `hideOnScroll` (a field of this object, `false` by default) slides the `'floating'` toolbar away on scroll; no other preset reads it. `persistKey` (a field of this object) remembers the `'rail-expanded'` rail's, the `'sidebar'`'s and the `'two-level'` panel's state. A name alone (`navigation="sidebar"`, `"drawer"`, `"top"`, `"two-level"`) leaves a phone its default navigation; `{ phone: 'sidebar' }` draws it there. A phone never draws `'rail'` or `'rail-expanded'`: it keeps its menu sheet. `navigation="bar"` alone is phone-only (hidden from 768px, where the default rail shows; `{ tablet: 'bar' }` keeps it there). `'floating'` is drawn at every size, the phone included. See [`navigation` and `header`](../guides/app-shell.md#navigation-and-header) |
 | `navigationFab` | `ReactNode \| ({ expanded }) => ReactNode` | — | `ActivityLayout`: the screen's primary action, at the top of the `'rail-expanded'` rail (a `Fab`; the function form receives the rail's state). The other presets do not draw it |
 | `sidebarExpanded` / `defaultSidebarExpanded` / `onSidebarExpandedChange` | `boolean` / `boolean` / `(expanded: boolean) => void` | — / `false` / — | `ActivityLayout`: the `'sidebar'`'s expanded state (labels beside the icons; it starts collapsed), controlled or not; with `navigation.persistKey` the last choice is kept and read after hydration |
-| `header` | `'small' \| 'center' \| 'medium' \| 'large' \| 'none' \| { variant, collapse?, hideOnScroll?, tabs?, search? }` | `'small'` | `ActivityLayout`: the app bar's size. The five variants and `hideOnScroll` are drawn; `search` draws an `AppSearchBar` (see [AppSearchBar](#appsearchbar)); `tabs` (a `TabsNav`) draws a row stuck under the bar, which stays pinned when the bar hides (see [Tabs under the app bar](../guides/app-shell.md#tabs-under-the-app-bar)); a route's `handle.back` (`ShellBack`: `{ to, label? }` or `true`) draws a back arrow before the title, the phone's menu button following it while the phone has the menu sheet (see [The back arrow](../guides/app-shell.md#the-back-arrow)). A route's `handle.header` overrides it; a `'medium'` or `'large'` header needs a `handle.title`, else it stays small; `'none'` also drops the phone's menu button, so pair it with `navigation="bar"`. See [The app bar variants](../guides/app-shell.md#the-app-bar-variants), [Scroll direction](../guides/app-shell.md#scroll-direction) and [Room at the bottom](../guides/app-shell.md#room-at-the-bottom) |
+| `header` | `'small' \| 'medium-flexible' \| 'large-flexible' \| 'search' \| 'none' \| { size?, align?, collapse?, hideOnScroll?, tabs?, search? }` | `'small'` | `ActivityLayout`: the app bar, drawn with `TopAppBar`. `size` and `align` pick its look (the old `'center'`, `'medium'`, `'large'` and `variant` still work, deprecated); `collapse` (default on for medium and large) and `hideOnScroll` follow the scroll; `search` draws an `AppSearchBar` (see [AppSearchBar](#appsearchbar)); `tabs` (a `TabsNav`) draws a row stuck under the bar, which stays pinned when the bar hides (see [Tabs under the app bar](../guides/app-shell.md#tabs-under-the-app-bar)); a route's `handle.back` (`ShellBack`: `{ to, label? }` or `true`) draws a back arrow before the title, the phone's menu button following it while the phone has the menu sheet (see [The back arrow](../guides/app-shell.md#the-back-arrow)). A route's `handle.header` overrides it; a medium or large header needs a `handle.title`, else it stays small; `'none'` also drops the phone's menu button, so pair it with `navigation="bar"`. See [Top app bar sizes](../guides/app-shell.md#top-app-bar-sizes), [Scroll direction](../guides/app-shell.md#scroll-direction) and [Room at the bottom](../guides/app-shell.md#room-at-the-bottom) |
 | `align` | `'start' \| 'center'` | `'start'` | `ActivityLayout`, `AppSidebar`: the collapsed rail's entries sit right under the brand, or `'center'` for centred in the height below it |
 | `backdrop` | `ReactNode \| false` | — | `ActivityLayout`: an exception to the theme's background (drawn by default; Lavande's is the built-in gradient and blobs); `false` draws a plain page. A node is a decorative background behind the frame: a `Background` preset from `@nxgt/material/backgrounds`. Rendered in an `inert`, `aria-hidden` layer as wide as the content column and one viewport high, fixed in the viewport while the content scrolls; the chrome (app bar, breadcrumb, tabs strip) is lightly translucent and frosted over it (80%, 87% for the sidebar, breadcrumb and tabs strip, 92% and no blur under `prefers-reduced-transparency` or without `backdrop-filter`), and the lists, tables and cards stay opaque; `--nxgt-backdrop-chrome` sets the chrome's fill and `--nxgt-backdrop-surface` the lists'. See [Use a background preset behind the shell](../guides/app-shell.md#use-a-background-preset-behind-the-shell) |
 | `routeTransition` | `boolean \| Omit<ViewTransitionProps, 'children' \| 'ref'>` | `true` | `ActivityLayout`: React's `<ViewTransition>` around the content region, so a navigation cross-fades it (by default only when the pathname changes, not on a search change, a fetcher or a revalidation). `false` renders none (your app has its own boundary); an object passes `default` / `update` classes, `name`, callbacks through. `ROUTE_TRANSITION_CLASS` (`'nxgt-route'`) is exported for nested boundaries. See [Route transitions](../guides/app-shell.md#route-transitions) |
@@ -128,7 +129,7 @@ pads its bottom and shortens its sidebar by the bar's height
 footer stay above it. Another layout adds `pb-(--nxgt-media-dock)` to what
 scrolls.
 
-**Storybook:** `Navigation & layout/AppShell` · **Vue:** `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`
+**Storybook:** `Navigation & layout/AppShell` · **Vue:** `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader` (deprecated, use `TopAppBar`), `AppBreadcrumb`
 
 ---
 
@@ -360,19 +361,79 @@ recolour the rail. See [Theming](../guides/theming.md#the-active-entry-of-the-si
 
 ![TopAppBar](../previews/navigation-layout-topappbar.webp)
 
-Top bar surface, and a bottom bar of icon actions with an active state.
+The top app bar: the bar `ActivityLayout` draws, for a layout of your own. A
+`title` that is the page's one `<h1>`, a `subtitle` under it, four sizes, a
+collapse on scroll, free icon actions with an account menu, and a main action.
+Flat on the page ground; once the page scrolls it takes a soft tint and a hairline.
+
+```tsx
+import { Bell, Languages, Plus } from 'lucide-react';
+import { Avatar, TopAppBar } from '@nxgt/material/components';
+
+<TopAppBar
+  as="header"
+  size="large-flexible"
+  collapse
+  title="Orders"
+  subtitle="Acme workspace"
+  actions={[
+    { label: 'Notifications', icon: <Bell />, onClick: openInbox },
+    { label: 'English', icon: <Languages />, group: 'Language', selected: true, placement: 'account' },
+    { label: 'Français', group: 'Language', placement: 'account', onClick: () => setLocale('fr') },
+  ]}
+  trailing={<Avatar alt="Ada Lovelace" fallback="AL" />}
+  primaryAction={{ label: 'New order', icon: <Plus />, onClick: createOrder }}
+/>
+```
+
+`collapse` and `hideOnScroll` only mark the bar (`data-collapse`,
+`data-hide-on-scroll`): the scroll is followed by the shell, so in `ActivityLayout`
+use `header` instead (see [Top app bar sizes](../guides/app-shell.md#top-app-bar-sizes)).
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `size` | `'small' \| 'medium-flexible' \| 'large-flexible' \| 'search'` | `'small'` | `small`: one row. `medium-flexible` and `large-flexible`: the `title` on a second row (28 px, and 40 px or 36 px on a phone; up to two lines in large), collapsing into the small row. `search`: the `search` field is the bar's centre. Without a `title` a medium or large bar draws as small |
+| `align` | `'start' \| 'center'` | `'start'` | `center` centres a small bar's title |
+| `title` / `titleId` | `ReactNode` / `string` | — | the bar renders `title` as the page's one `<h1>`; `titleId` is its `id`, to name a region |
+| `subtitle` | `ReactNode` | — | a muted `<p>` right after the `<h1>`, one line, truncated |
+| `titleAfter` | `ReactNode` | — | beside the title: a badge, a status |
+| `leading` / `trailing` | `ReactNode` | — | start of the row (menu or back button) / its end (the avatar) |
+| `actions` | `ReactNode \| TopAppBarAction[]` | — | a node is drawn as given. An array of data (every item a plain object with a string `label`) draws free ghost icon buttons (one on a phone, two from 768 px) and gathers the rest, and every `'account'` action, in a menu opened by `trailing` (named "Account menu") or by a More button when there is no `trailing` |
+| `primaryAction` | `TopAppBarPrimaryAction` | — | `{ label, icon, onClick?, disabled? }`: a `Button` from 768 px; on a phone a `Fab` above `--nxgt-bottom-chrome`, portalled to `document.body` after mount |
+| `search` | `ReactNode` | — | the field of a `'search'` bar; the title stays in the page as an `sr-only` `<h1>` |
+| `tabs` | `ReactNode` | — | a row under the bar: a `Tabs` list |
+| `collapse` / `hideOnScroll` | `boolean` | `false` | mark the bar as collapsing its second row, or hiding on scroll down |
+| `linkComponent` | `LinkComponent` | nearest `LinkComponentProvider`'s, else `<a>` | draws an action with an `href` |
+| `as` | `'div' \| 'header'` | `'div'` | the element drawn; use `'header'` for the page's banner |
+| `variant` | `'small' \| 'center' \| 'medium' \| 'large'` | — | deprecated for `size` and `align`: warns once in development |
+| `headline` | `ReactNode` | — | deprecated for `title`: renders in a non-heading element; warns once in development |
+
+`TopAppBarAction` (the items of `actions`):
+
+| Field | Type | Effect |
+| --- | --- | --- |
+| `label` | `string` | required: the icon button's accessible name and the menu entry's text |
+| `icon` | `ReactNode` | decorative; the action is named by `label` |
+| `onClick` | `() => void` | the action was chosen |
+| `href` | `string` | makes the action a link, drawn with `linkComponent` |
+| `placement` | `'bar' \| 'account'` | `'bar'` (default): a bar icon while there is room. `'account'`: always in the account menu |
+| `group` | `string` | the menu section ("Language", "Theme"): entries sit under that label, inline (never a submenu, which overflows at 360 px); entries without one come first |
+| `selected` | `boolean` | the current choice of its group: a group of non-link entries where one sets `selected` is a radio group (`menuitemradio`, `aria-checked`); a link entry with `selected` is the current page (`aria-current="page"`) |
+| `disabled` | `boolean` | the action cannot be chosen |
+| `id` | `string` | the key; defaults to `label` |
+
+The `trailing` avatar becomes the menu's trigger (a `<button>`), so it must hold no
+link, button or input (a warning in development). New message keys:
+`material.top-app-bar.account` and `material.top-app-bar.more` (en, fr).
+
+`BottomAppBar` is a row of icon actions that spaces its children and styles the
+one with `data-state="active"`; it takes a `div`'s props.
 
 <img src="../previews/navigation-layout-bottomappbar.webp" height="56" alt="BottomAppBar">
 
 ```tsx
-import { Book, Camera, Menu, Search } from 'lucide-react';
-import { BottomAppBar, IconButton, TopAppBar, Typography } from '@nxgt/material/components';
-
-<TopAppBar>
-  <IconButton variant="ghost" aria-label="Open menu"><Menu /></IconButton>
-  <Typography variant="title-md" emphasized className="flex-1">Inbox</Typography>
-  <IconButton variant="ghost" aria-label="Search"><Search /></IconButton>
-</TopAppBar>
+import { Book, Camera } from 'lucide-react';
+import { BottomAppBar, IconButton } from '@nxgt/material/components';
 
 <BottomAppBar>
   <IconButton data-state="active" aria-label="Camera"><Camera /></IconButton>
@@ -380,22 +441,14 @@ import { BottomAppBar, IconButton, TopAppBar, Typography } from '@nxgt/material/
 </BottomAppBar>
 ```
 
-`BottomAppBar` spaces its children and styles the one with
-`data-state="active"`; both take a `div`'s props. `TopAppBar` is a bordered row
-with a `variant`: `'small'` (the default), `'center'` (the row's content
-centred), and `'medium'` or `'large'`, which draw the `headline` on a second
-row in display type (without a `headline` they are small). It does not scroll
-by itself: `ActivityLayout`'s `header` does that for the shell's own bar (see
-the [app shell guide](../guides/app-shell.md#the-app-bar-variants)).
+The root is a column (`flex-col`) whose children sit in a
+`[data-slot="top-app-bar-row"]`: a `justify-between`, `gap-*` or `items-*` in the
+root's `className` does not reach them (aim it at the row), and `title` is the
+bar's `<h1>`, no longer the HTML `title` attribute. A `className` background,
+radius or shadow wins at rest; once scrolled the tint replaces the background.
+The shell's bar takes its height from `--nxgt-header-height`.
 
-```tsx
-import { Menu } from 'lucide-react';
-import { IconButton, TopAppBar } from '@nxgt/material/components';
-
-<TopAppBar variant="large" headline={<h1>Projects</h1>}>
-  <IconButton variant="ghost" aria-label="Open menu"><Menu /></IconButton>
-</TopAppBar>
-```
+Moving from `AppHeader` or the old props: [Moving to TopAppBar](../guides/migrating-to-top-app-bar.md).
 
 **Storybook:** `Navigation & layout/TopAppBar`, `Navigation & layout/BottomAppBar` · **Vue:** `TopAppBar`, `BottomAppBar`
 
@@ -422,7 +475,7 @@ function Shell() {
     <ActivityLayout
       items={items}
       header={{
-        variant: 'small',
+        size: 'small',
         search: {
           value: query,
           onValueChange: setQuery,