@nxgt/material-vue 0.41.0 → 0.42.0

package/dist/{pdf-outline-sidebar-CgmJjhUz.js → pdf-outline-sidebar-BU4o_hBI.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Lf as n } from "./components-C1JYYoQ4.js";
-import { t as r } from "./use-material-translation-Du3Wvsk1.js";
+import { Rf as n } from "./components-DX4EycMi.js";
+import { t as r } from "./use-material-translation-COoBTGpB.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-outline-row.vue?vue&type=script&setup=true&lang.ts
 var y = {

package/dist/{pdf-page-BjQNWV72.js → pdf-page-anNe78Lc.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Kp as t } from "./components-C1JYYoQ4.js";
+import { qp as t } from "./components-DX4EycMi.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, openBlock as f, ref as p, shallowRef as m, unref as h, watch as g } from "vue";
 import { DEFAULT_PAGE_SIZE as _, escapeHtml as v, findTextMatches as y, highlightItemHtml as b, placeholderSize as x, rotatedSize as S } from "@nxgt/material-core/pdf-viewer";
 //#region lib/components/ui/media/pdf-viewer/pdf-note-icons.ts

package/dist/{pdf-page-list-nG0l4SjH.js → pdf-page-list-CSY76HH6.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Lf as t } from "./components-C1JYYoQ4.js";
-import { t as n } from "./pdf-page-BjQNWV72.js";
+import { Rf as t } from "./components-DX4EycMi.js";
+import { t as n } from "./pdf-page-anNe78Lc.js";
 import { Fragment as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, renderList as l, withCtx as u } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-page-list.vue?vue&type=script&setup=true&lang.ts
 var d = { class: "flex flex-col items-center gap-4 px-4 py-4" }, f = /*@__PURE__*/ s({

package/dist/{pdf-reader-Dekd4Ymw.js → pdf-reader-BhZNrW7R.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components-C1JYYoQ4.js";
-import { t as n } from "./use-material-translation-Du3Wvsk1.js";
-import { t as r } from "./Button-BG3oDkrl.js";
-import { o as i } from "./HoverCardTrigger-Dh1ar_W4.js";
-import { n as a } from "./pdf-page-BjQNWV72.js";
-import { t as o } from "./pdf-page-list-nG0l4SjH.js";
-import { t as s } from "./pdf-sidebar-gDj63dRH.js";
-import { t as c } from "./pdf-toolbar-DmmrSlCq.js";
+import { kn as t } from "./components-DX4EycMi.js";
+import { t as n } from "./use-material-translation-COoBTGpB.js";
+import { t as r } from "./Button-CWmzvv9p.js";
+import { o as i } from "./HoverCardTrigger-C5AbAyHE.js";
+import { n as a } from "./pdf-page-anNe78Lc.js";
+import { t as o } from "./pdf-page-list-CSY76HH6.js";
+import { t as s } from "./pdf-sidebar-DcIpG7eh.js";
+import { t as c } from "./pdf-toolbar-C373S-ul.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, onBeforeUnmount as y, onMounted as b, openBlock as x, reactive as S, ref as C, shallowRef as w, toDisplayString as T, toRef as E, unref as D, useId as O, watch as k, withCtx as A } from "vue";
 import { AlertCircle as j, FileX2 as M, KeyRound as N, Loader2 as P } from "@lucide/vue";
 import { pdfSourceKey as F, toPdfjsParams as I } from "@nxgt/material-core/pdf-source";

package/dist/{pdf-sidebar-gDj63dRH.js → pdf-sidebar-DcIpG7eh.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-Du3Wvsk1.js";
-import { t as r } from "./pdf-outline-sidebar-CgmJjhUz.js";
-import { t as i } from "./pdf-thumbnail-sidebar-C5ikii1Z.js";
+import { t as n } from "./use-material-translation-COoBTGpB.js";
+import { t as r } from "./pdf-outline-sidebar-BU4o_hBI.js";
+import { t as i } from "./pdf-thumbnail-sidebar-CUC0V4if.js";
 import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, toDisplayString as d, unref as f, useId as p, useTemplateRef as m } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-sidebar.vue?vue&type=script&setup=true&lang.ts
 var h = ["aria-label"], g = ["aria-label"], _ = [

package/dist/{pdf-thumbnail-sidebar-C5ikii1Z.js → pdf-thumbnail-sidebar-CUC0V4if.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Lf as n } from "./components-C1JYYoQ4.js";
-import { t as r } from "./use-material-translation-Du3Wvsk1.js";
-import { t as i } from "./pdf-page-BjQNWV72.js";
+import { Rf as n } from "./components-DX4EycMi.js";
+import { t as r } from "./use-material-translation-COoBTGpB.js";
+import { t as i } from "./pdf-page-anNe78Lc.js";
 import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-thumbnail-sidebar.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = {

package/dist/{pdf-toolbar-DmmrSlCq.js → pdf-toolbar-C373S-ul.js}

@@ -1,10 +1,10 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-Du3Wvsk1.js";
-import { f as r } from "./Button-BG3oDkrl.js";
-import { t as i } from "./icon-button-DXrmfs6e.js";
+import { t as n } from "./use-material-translation-COoBTGpB.js";
+import { f as r } from "./Button-CWmzvv9p.js";
+import { t as i } from "./icon-button-DErh1aJS.js";
 import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-C7uYPf_9.js";
-import { o as d } from "./HoverCardTrigger-Dh1ar_W4.js";
+import { o as d } from "./HoverCardTrigger-C5AbAyHE.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, nextTick as x, normalizeClass as S, openBlock as C, ref as w, renderList as T, toDisplayString as E, unref as D, useTemplateRef as O, watch as k, withCtx as A } from "vue";
 import { ChevronDown as j, ChevronLeft as M, ChevronRight as N, ChevronUp as P, Download as F, Maximize2 as I, Minimize2 as L, Moon as R, Printer as z, RotateCw as B, Search as V, Sidebar as H, ZoomIn as U, ZoomOut as W } from "@lucide/vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-toolbar-search.vue?vue&type=script&setup=true&lang.ts

package/dist/pdf.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./use-material-translation-Du3Wvsk1.js";
-import { t as n } from "./Button-BG3oDkrl.js";
+import { n as e, t } from "./use-material-translation-COoBTGpB.js";
+import { t as n } from "./Button-CWmzvv9p.js";
 import { computed as r, createBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, nextTick as c, onMounted as l, onScopeDispose as u, openBlock as d, ref as f, renderSlot as p, shallowRef as m, toDisplayString as ee, toValue as h, unref as g, watch as te, withCtx as ne } from "vue";
 import { contentDisposition as re, pdfBytesResponse as ie, toWebStream as ae } from "@nxgt/material-core/pdf/http";
 import { badge as oe, dataTable as se, defaultPdfTheme as ce, definePdfDocument as _, divider as v, header as y, heading as b, image as x, keyValue as S, keyValueOf as C, link as w, metric as T, page as E, pageBreak as D, pageNumber as O, pdfDocument as k, resolvePdfColor as A, resolvePdfTheme as j, row as M, section as N, spacer as P, stack as F, table as I, text as L, totals as R } from "@nxgt/material-core/pdf/model";

package/dist/{print-format.utils-CiUiQE-i.js → print-format.utils-C81c0weJ.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-dM2e5qaS.js";
-import { r } from "./translator-DXL5RDRg.js";
+import { i as e, r as t, t as n } from "./stored-language-Wtcj2HsU.js";
+import { r } from "./translator-D5Dp-dob.js";
 import { t as i } from "./_baseIsEqual-BUD8VQJE.js";
 import { E as a } from "./number.utils-C1eB3GDr.js";
 import { defineComponent as o, getCurrentInstance as s, h as c, inject as l, provide as u, useId as d } from "vue";

package/dist/{sortable-provider-lK0srHJF.js → sortable-provider-CL2UGGn8.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-Du3Wvsk1.js";
-import { t as n } from "./icon-button-DXrmfs6e.js";
+import { t } from "./use-material-translation-COoBTGpB.js";
+import { t as n } from "./icon-button-DErh1aJS.js";
 import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, normalizeStyle as f, onUnmounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S, watchEffect as C, withCtx as w, withModifiers as T } from "vue";
 import { GripVertical as E } from "@lucide/vue";
 import { Primitive as D } from "reka-ui";

package/dist/{stored-language-dM2e5qaS.js → stored-language-Wtcj2HsU.js}

@@ -789,6 +789,10 @@ var e = {
 			"open-menu": "Open menu",
 			navigation: "Navigation"
 		},
+		"account-menu": {
+			trigger: "Account menu, {name}",
+			"sign-out": "Sign out"
+		},
 		filter: {
 			title: "Filters",
 			trigger: "Filters",
@@ -2033,6 +2037,10 @@ var e = {
 			"open-menu": "Ouvrir le menu",
 			navigation: "Navigation"
 		},
+		"account-menu": {
+			trigger: "Menu du compte, {name}",
+			"sign-out": "Se déconnecter"
+		},
 		filter: {
 			title: "Filtres",
 			trigger: "Filtres",

package/dist/{stx-player-C2VQCXFc.js → stx-player-CMmM3F5Z.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jt as n, Qt as r, Xt as i, Yp as a, Yt as o, en as s, tn as c } from "./components-C1JYYoQ4.js";
-import { t as l } from "./use-material-translation-Du3Wvsk1.js";
+import { $t as t, Jt as n, Qt as r, Xp as i, Xt as a, Yt as o, en as s, tn as c } from "./components-DX4EycMi.js";
+import { t as l } from "./use-material-translation-COoBTGpB.js";
 import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, openBlock as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region lib/components/ui/media/stx-player/partials/stx-player-frame.vue?vue&type=script&setup=true&lang.ts
 var S = ["data-layout", "aria-label"], C = {
@@ -19,7 +19,7 @@ var S = ["data-layout", "aria-label"], C = {
 			Array
 		] }
 	},
-	setup(i) {
+	setup(a) {
 		let { containerRef: g, state: w } = c();
 		function T(e) {
 			g.value = e instanceof HTMLElement ? e : null;
@@ -28,17 +28,17 @@ var S = ["data-layout", "aria-label"], C = {
 		return (c, l) => (v(), f("section", {
 			ref: T,
 			"data-slot": "stx-player",
-			"data-layout": i.layout,
+			"data-layout": a.layout,
 			"aria-label": b(w).current?.title ?? b(E)("material.stx-player.label", "Media player"),
 			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", c.$props.class))
-		}, [i.layout === "mini" ? (v(), u(r, { key: 0 })) : (v(), f("div", {
+		}, [a.layout === "mini" ? (v(), u(r, { key: 0 })) : (v(), f("div", {
 			key: 1,
-			class: _(b(e)("grid gap-3", i.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
+			class: _(b(e)("grid gap-3", a.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
 		}, [p("div", { class: _(b(e)("bg-card overflow-hidden rounded border", b(w).current?.kind === "audio" && "flex flex-col gap-4 p-6")) }, [
-			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(a, { variant: "title-medium" }, {
+			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(i, { variant: "title-medium" }, {
 				default: x(() => [m(y(b(w).current.title), 1)]),
 				_: 1
-			}), b(w).current.artist ? (v(), u(a, {
+			}), b(w).current.artist ? (v(), u(i, {
 				key: 0,
 				class: "text-muted-foreground"
 			}, {
@@ -62,7 +62,7 @@ var S = ["data-layout", "aria-label"], C = {
 				trailing: x(() => [h(t, { tone: "surface" })]),
 				_: 1
 			})) : d("", !0)
-		], 2), i.showQueue ? (v(), u(o, {
+		], 2), a.showQueue ? (v(), u(o, {
 			key: 0,
 			class: "min-h-72"
 		})) : d("", !0)], 2))], 10, S));
@@ -99,16 +99,16 @@ var S = ["data-layout", "aria-label"], C = {
 	emits: ["trackChange"],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		function a(e, t) {
+		function i(e, t) {
 			n.onTrackChange?.(e, t), r("trackChange", e, t);
 		}
-		return (t, r) => (v(), u(i, {
+		return (t, r) => (v(), u(a, {
 			tracks: e.tracks,
 			"current-index": e.currentIndex,
 			"default-index": e.defaultIndex,
 			"auto-play": e.autoPlay,
 			loop: e.loop,
-			"on-track-change": a
+			"on-track-change": i
 		}, {
 			default: x(() => [h(w, {
 				layout: e.layout,

package/dist/{translator-DXL5RDRg.js → translator-D5Dp-dob.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-dM2e5qaS.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-Wtcj2HsU.js";
 import { t as i } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function a(e, t) {

package/dist/{use-heading-spy-Btwc0yad.js → use-heading-spy-BIBHtUXN.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-D5XyLQ3P.js";
+import { a as e } from "./i18n-provider-DmZSTBnp.js";
 import { c as t, d as n, l as r, n as i, s as a, u as o } from "./number.utils-C1eB3GDr.js";
 import { computed as s, getCurrentInstance as c, inject as l, onMounted as u, ref as d, shallowRef as f, toValue as p, watch as m } from "vue";
 import { injectConfigProviderContext as h } from "reka-ui";

package/dist/{use-material-translation-Du3Wvsk1.js → use-material-translation-COoBTGpB.js}

@@ -1,6 +1,6 @@
-import "./stored-language-dM2e5qaS.js";
-import { a as e } from "./i18n-provider-D5XyLQ3P.js";
-import { i as t, r as n } from "./translator-DXL5RDRg.js";
+import "./stored-language-Wtcj2HsU.js";
+import { a as e } from "./i18n-provider-DmZSTBnp.js";
+import { i as t, r as n } from "./translator-D5Dp-dob.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/docs/components/README.md

@@ -71,9 +71,10 @@ Collections you query: data table, filter, pagination, tree, drag and drop. 6 en
 
 ## [Navigation & layout](navigation-and-layout.md)
 
-Where a page sits and how you move: app shell, sidebar, app bars, breadcrumb, page layouts, grid, resizable, skip link, pager, TOC, steppers, hero, doc site shell, signed-out page frame. 18 entries.
+Where a page sits and how you move: app shell, account menu, sidebar, app bars, breadcrumb, page layouts, grid, resizable, skip link, pager, TOC, steppers, hero, doc site shell, signed-out page frame. 19 entries.
 
 [<img src="../previews/navigation-layout-appshell.webp" height="72" alt="ActivityLayout">](navigation-and-layout.md#activitylayout)
+[<img src="../previews/navigation-layout-accountmenu.webp" height="72" alt="AccountMenu">](navigation-and-layout.md#accountmenu)
 [<img src="../previews/navigation-layout-sidebar.webp" height="72" alt="Sidebar">](navigation-and-layout.md#sidebar)
 [<img src="../previews/navigation-layout-breadcrumb.webp" height="72" alt="Breadcrumb">](navigation-and-layout.md#breadcrumb)
 [<img src="../previews/navigation-layout-stepper.webp" height="72" alt="Stepper">](navigation-and-layout.md#stepper)

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

@@ -8,6 +8,7 @@ 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 |
+| <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 and bottom bars |
@@ -75,7 +76,9 @@ which work alone; `findActiveMenuItem`, `isMenuItemActive` and
 | `items` | `MenuItem[]` | — | `label` (already translated), `url`, `icon` (a Font Awesome name), `footer` |
 | `linkComponent` | `Component` | `RouterLink` | The link each menu entry renders, given `href`; pass it as `link-component` (see the [app shell guide](../guides/app-shell.md)) |
 | `avatarSrc` | `string` | — | avatar image in the header |
-| `#brand` | slot | — | sidebar header |
+| `logo` (or `#logo`), `name` | `AppLogo` (`string \| AppLogoImage`, `AppLogoImage` = `{ src, alt? }`), `string` | — | the app's logo alone in the collapsed rail, named by `name` (also its tooltip); logo and name side by side in the phone's menu sheet; `#logo` wins over `logo` |
+| `#brand` | slot | — | replaces the sidebar header, in the rail and the menu sheet; wins over `logo` and `name` |
+| `#header-title` | slot | — | the header's leading title (the context: an organisation's name), after the phone's menu button, truncated when long |
 | `#header-actions`, `#avatar` | slots | — | header, before the avatar; `#avatar` replaces it |
 | `title`, `subtitle`, `#actions` | `string`, `string`, slot | — | `ActivityContent`'s header card |
 | `#header` / `hideHeader` | slot / `boolean` | — / `false` | `ActivityContent`: replace or drop the header card |
@@ -100,6 +103,58 @@ entry, and an icon-only one (no label) falls back to its `aria-label`.
 
 ---
 
+## AccountMenu
+
+![AccountMenu](../previews/navigation-layout-accountmenu.webp)
+
+The account menu of an app bar, for `ActivityLayout`'s `#avatar`: an avatar
+button named "Account menu, Ada Lovelace" (the picture, else the initials on
+`bg-primary`) that opens a menu aligned to its end, headed by the avatar, the
+name and a second line, then the app's links and a destructive Sign out.
+
+```vue
+<script setup lang="ts">
+import { AccountMenu, ActivityLayout } from '@nxgt/material-vue/components';
+</script>
+
+<template>
+  <ActivityLayout :items="items">
+    <template #header-title>{{ school.name }}</template>
+    <template #avatar>
+      <AccountMenu
+        :name="user.name"
+        :secondary="user.email"
+        :src="user.picture"
+        :items="[{ label: t('menu.profile'), url: '/profile', icon: 'user' }]"
+        :signing-out="pending"
+        @sign-out="signOut"
+      />
+    </template>
+    <RouterView />
+  </ActivityLayout>
+</template>
+```
+
+| Prop / event | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `name` | `string` | — | the trigger's name ("Account menu, {name}", `material.account-menu.trigger`), the menu's header, the initials |
+| `secondary` | `string` | — | a second line under the name, the e-mail say |
+| `src` | `string` | — | the avatar's picture; the initials until it loads, or without one |
+| `items` | `AccountMenuItem[]` | `[]` | `{ label: string; url: string; icon?: IconName }`: links between the header and Sign out; `label` already translated, `icon` a [Font Awesome](https://fontawesome.com/icons) symbol id of the duotone sprite (see [Icon](primitives.md#icon)) |
+| `linkComponent` | `Component` | `RouterLink` | the link each item renders, as in the app shell |
+| `@sign-out` | event | — | Sign out was chosen; the menu stays open, so `signing-out` shows |
+| `signOutLabel` | `string` | "Sign out" | `material.account-menu.sign-out` |
+| `signingOut` | `boolean` | `false` | Sign out is busy (`aria-busy`, a spinner) and ignores a second selection |
+
+Enter, Space or ArrowDown on the avatar opens the menu on its first item; the
+arrows move, Escape closes it and gives the focus back to the avatar. The
+items are real links (`<a href>`), named by their label. Its links need
+`vue-router`, as the shell's do.
+
+**Storybook:** `Navigation & layout/AccountMenu` · **React:** `AccountMenu` (prop `onSignOut`)
+
+---
+
 ## AuthCard
 
 ![AuthCard](../previews/navigation-layout-authcard.webp)

package/docs/guides/app-shell.md

@@ -17,10 +17,7 @@ const items: MenuItem[] = [
 </script>
 
 <template>
-  <ActivityLayout :items="items" avatar-src="/me.png">
-    <template #brand>
-      <strong>Acme</strong>
-    </template>
+  <ActivityLayout :items="items" logo="/logo.svg" name="Acme" avatar-src="/me.png">
     <RouterView />
   </ActivityLayout>
 </template>
@@ -179,7 +176,11 @@ partitionMenu(items);                              // { content, footer }
 | `content-as` | `'main' \| 'div'` | `'main'` | The content region's element: the page's `<main>` landmark, or a `div` when your app renders its own `<main>` |
 | `scroll` | `'document' \| 'container'` | `'document'` | Who scrolls: the page (header and sidebar sticky), or the content region inside a shell one screen high |
 | `class` | `string` | — | Classes for the outer element (`[data-slot=activity-layout]`), which takes the other attributes too |
-| `#brand` | slot | an atom icon | Replaces the sidebar header: a logo, a product name. Always fill it; the default is a placeholder |
+| `logo` | `string \| { src, alt? }` | an atom badge | The app's logo, an image URL: alone in the collapsed rail, beside `name` in the phone's menu sheet (see [The brand](#the-brand-logo-and-name)) |
+| `#logo` | slot | — | The logo as a node (an inline SVG), in place of `logo`; it wins when both are given |
+| `name` | `string` | — | The app's name, already translated: the logo's accessible name and tooltip in the rail, shown beside it in the sheet |
+| `#brand` | slot | — | Replaces the sidebar header entirely, in the rail and in the menu sheet; wins over `logo` and `name` |
+| `#header-title` | slot | — | The header's leading title: the context the app is in (the active organisation's name), right after the phone's menu button, truncated when long |
 | `#header-actions` | slot | — | In the header, before the avatar: notifications, help, `LanguageSwitcher`, `ThemeToggle` |
 | `#avatar` | slot | the `avatar-src` image | Replaces the avatar entirely |
 | default | slot | — | The routed content, usually `<RouterView />` |
@@ -214,32 +215,26 @@ the slots.
 ```vue
 <script setup lang="ts">
 import {
+  AccountMenu,
   ActivityLayout,
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
   LanguageSwitcher,
   type MenuItem,
   ThemeToggle,
 } from '@nxgt/material-vue/components';
 
-defineProps<{ items: MenuItem[]; user: { name: string; picture?: string } }>();
+defineProps<{ items: MenuItem[]; user: { name: string; email: string; picture?: string } }>();
+const emit = defineEmits<{ 'sign-out': [] }>();
 </script>
 
 <template>
-  <ActivityLayout :items="items">
-    <template #brand>
-      <img src="/logo.svg" alt="Acme" class="h-8" />
-    </template>
+  <ActivityLayout :items="items" logo="/logo.svg" name="Acme">
+    <template #header-title>Northwind school</template>
     <template #header-actions>
       <LanguageSwitcher />
       <ThemeToggle />
     </template>
     <template #avatar>
-      <Avatar>
-        <AvatarImage :src="user.picture ?? ''" :alt="user.name" />
-        <AvatarFallback>{{ user.name.slice(0, 2) }}</AvatarFallback>
-      </Avatar>
+      <AccountMenu :name="user.name" :secondary="user.email" :src="user.picture" @sign-out="emit('sign-out')" />
     </template>
     <RouterView />
   </ActivityLayout>
@@ -254,7 +249,92 @@ entry closes it — so does any route change, Back included — and focus goes t
 the page's `<main>`, unless the new screen already focused an element inside it
 (an error page's `h1`), which keeps it; closed with Escape, the close button or the overlay,
 focus returns to the menu button. Its entries show their labels, so they have
-no tooltip: none opens over the first entry as focus moves in.
+no tooltip: none opens over the first entry as focus moves in. It shows the
+app's `logo` and `name` (or `#brand`) above the entries, as the expanded
+sidebar does.
+
+### The app bar: a title, the actions, the account
+
+The header reads, from the start: the phone's menu button, `#header-title`
+(the context the app is in, the active school or organisation), then
+`#header-actions` (language, notifications) and `#avatar` at the end. The
+title takes the room left and ends in an ellipsis when it does not fit, so
+the avatar always stays on screen. It is not a heading: the screen's `h1` is
+`ActivityContent`'s title.
+
+`AccountMenu` is the `#avatar` most apps want: an avatar button named
+"Account menu, Ada Lovelace" (`material.account-menu.trigger`) that opens a
+menu aligned to its end, headed by the avatar, the name and `secondary`, then
+the app's `items` and a destructive Sign out
+(`material.account-menu.sign-out`). Choosing Sign out emits `sign-out` and
+keeps the menu open: pass `signing-out` while the request runs, and the item
+shows a spinner and ignores a second selection. Without `src`, or until it
+loads, the avatar shows the initials on `bg-primary`.
+
+```vue
+<AccountMenu
+  :name="user.name"
+  :secondary="user.email"
+  :src="user.picture"
+  :items="[
+    { label: t('menu.profile'), url: '/profile', icon: 'user' },
+    { label: t('menu.settings'), url: '/settings', icon: 'gear' },
+  ]"
+  :signing-out="pending"
+  @sign-out="signOut"
+/>
+```
+
+Each entry is an `AccountMenuItem`, exported with it:
+
+```ts
+type AccountMenuItem = {
+  label: string; // already translated
+  url: string; // rendered as a real link through `link-component`
+  icon?: IconName; // optional, decorative: the label names the entry
+};
+```
+
+`icon` is an `IconName`, a symbol id of the Font Awesome duotone sprite you serve (`user`, `gear`, `arrow-right-from-bracket`; browse the names at <https://fontawesome.com/icons>, and see [getting started](../getting-started.md#icons) for serving the sprite).
+
+### The brand: logo and name
+
+`logo` (or the `#logo` slot) and `name` put the app's brand in the sidebar
+header, in the shape each place has room for. `logo` is typed `AppLogo`
+(`string | AppLogoImage`, where `AppLogoImage` is `{ src: string; alt?: string }`
+and a string is the image URL), both exported from
+`@nxgt/material-vue/components`:
+
+- **The collapsed rail** (desktop, about 70 px wide) shows the **logo alone**.
+  `name` is its accessible name (an `<img alt>`, or `role="img"` with an
+  `aria-label` around the `#logo` node) and shows as a tooltip on hover, to
+  its right.
+- **The expanded sidebar and the phone's menu sheet** show the **logo and the
+  name side by side**. The name is on screen there, so the logo is decorative
+  (`alt=""` or `aria-hidden`), and no tooltip repeats it.
+
+```vue
+<ActivityLayout :items="items" logo="/logo.svg" :name="t('app.name')">…</ActivityLayout>
+<!-- An image with its own alt, used when there is no name: -->
+<ActivityLayout :items="items" :logo="{ src: '/logo.svg', alt: 'Acme' }">…</ActivityLayout>
+<!-- A node, an inline SVG for instance: -->
+<ActivityLayout :items="items" name="Acme">
+  <template #logo><AcmeMark class="size-8" /></template>
+  …
+</ActivityLayout>
+```
+
+Without a logo the header keeps its placeholder atom badge (named by `name`
+in the rail when there is one); fill `logo` in a real app. `#brand` is the
+full override: one node rendered as given, collapsed or expanded alike, in the
+rail and in the menu sheet. `AppSidebar` takes the same props and slots, and
+`AppHeader` takes them for its menu sheet.
+
+`#brand` is rendered twice, once in the rail and once in the menu sheet (the
+rail stays in the page on a phone, hidden): an `id` inside it appears twice
+while the sheet is open, so leave ids out of it. A link in `#brand` (a home
+link around the logo) is the sheet's first focusable element, so it takes
+the focus when the sheet opens.
 
 ## Landmarks, headings and scrolling
 
@@ -375,7 +455,7 @@ home included, is a `RouterLink`, so it goes through the router's base: under
 `AppSidebar`, `AppHeader` and `AppBreadcrumb` are exported for a layout of your
 own. `AppSidebar` and `AppHeader` take the same `items`; `AppSidebar` also
 takes `expanded` (`v-model:expanded`) and `with-toggle-icon`, and has the
-`#brand` slot; `AppHeader` takes `avatar-src` and `show-menu-icon` (default
+`#brand` slot, `logo`, `name` and `#logo`; `AppHeader` takes `avatar-src`, `logo`, `name` and `show-menu-icon` (default
 `true`), with `#actions`, `#avatar` and a default slot for the middle of the
 bar. The lower-level `Sidebar`, `TopAppBar`, `NavigationRail` and `Breadcrumb`
 primitives are on the

package/docs/guides/i18n.md

@@ -292,7 +292,7 @@ the `LocationPreview` trigger (`material.map.preview` / `preview-named`),
 (`material['duration-field']['hours-label']` / `minutes-label`), and
 the delete button of the deprecated `ContactItem` / `OpeningHoursItem`
 (`material.contacts.buttons.remove`,
-`material['opening-hours'].buttons.remove`). `FacetGroup`'s toggle is named "Level, 2 selected" / "Level, 2 sélectionnés" (`material.facet-group.name`, an ICU plural over `{title}` and `{count}`) and its Clear button "Clear Level" / "Effacer Level" (`material.facet-group.clear-label`, with the visible `material.facet-group.clear`). When the form of a
+`material['opening-hours'].buttons.remove`). `FacetGroup`'s toggle is named "Level, 2 selected" / "Level, 2 sélectionnés" (`material.facet-group.name`, an ICU plural over `{title}` and `{count}`) and its Clear button "Clear Level" / "Effacer Level" (`material.facet-group.clear-label`, with the visible `material.facet-group.clear`). `AccountMenu`'s avatar button is named "Account menu, {name}" / "Menu du compte, {name}" (`material.account-menu.trigger`, over `{name}`) and its last item reads "Sign out" / "Se déconnecter" (`material.account-menu.sign-out`), unless you pass `sign-out-label`. When the form of a
 `ConfirmationDialog` with `form-options` cannot be loaded, it says so in the
 form's place: "The form could not be loaded." / "Le formulaire n’a pas pu être
 chargé." (`material.confirm-dialog.form-failed`). The keys and the French are the

package/docs/roadmap.md

@@ -167,6 +167,15 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **The app's brand, a header title and an account menu** — the app shell
+  takes the app's `logo` and `name`: the logo alone in the collapsed rail,
+  named by the app's name and shown as its tooltip, the logo and the name side
+  by side expanded and in the phone's menu sheet, which now shows `brand` too;
+  `#header-title`, the context the app is in, right after the phone's menu
+  button and truncated when long; and `AccountMenu`, the avatar button named
+  "Account menu, <name>" that opens the account's name and e-mail, the app's
+  links and a busy-aware Sign out (`sign-out`).
+
 - **Rows a user adds, removes and reorders** — `RepeatableGroup` and
   `RepeatableGroupFormField` over the form library's field array: rows from
   the `row` slot, a list for assistive tech, Remove and move buttons named after

package/lib/nuxt/component-names.ts

@@ -4,6 +4,7 @@ export const COMPONENT_NAMES = [
 	'AccordionContent',
 	'AccordionItem',
 	'AccordionTrigger',
+	'AccountMenu',
 	'ActionCard',
 	'Activity',
 	'ActivityContent',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.41.0",
+	"version": "0.42.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -124,7 +124,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.11.1",
+		"@nxgt/material-core": "^0.12.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",