@nxgt/material-vue 0.40.1 → 0.42.0

package/dist/{pdf-outline-sidebar-DINCjWKk.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-XJ95qxB1.js";
-import { t as r } from "./use-material-translation-DxU51--g.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-BLJ0xkS3.js → pdf-page-anNe78Lc.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Kp as t } from "./components-XJ95qxB1.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-BNUPVA9x.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-XJ95qxB1.js";
-import { t as n } from "./pdf-page-BLJ0xkS3.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-BcB_Kd_F.js → pdf-reader-BhZNrW7R.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components-XJ95qxB1.js";
-import { t as n } from "./use-material-translation-DxU51--g.js";
-import { t as r } from "./Button-teS2p_af.js";
-import { o as i } from "./HoverCardTrigger-BEzEsgBo.js";
-import { n as a } from "./pdf-page-BLJ0xkS3.js";
-import { t as o } from "./pdf-page-list-BNUPVA9x.js";
-import { t as s } from "./pdf-sidebar-B7WgcY77.js";
-import { t as c } from "./pdf-toolbar-_CBHSMnH.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-B7WgcY77.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-DxU51--g.js";
-import { t as r } from "./pdf-outline-sidebar-DINCjWKk.js";
-import { t as i } from "./pdf-thumbnail-sidebar-BRtyyBPt.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-BRtyyBPt.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-XJ95qxB1.js";
-import { t as r } from "./use-material-translation-DxU51--g.js";
-import { t as i } from "./pdf-page-BLJ0xkS3.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-_CBHSMnH.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-DxU51--g.js";
-import { f as r } from "./Button-teS2p_af.js";
-import { t as i } from "./icon-button-Vz4NECf1.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-BEzEsgBo.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-DxU51--g.js";
-import { t as n } from "./Button-teS2p_af.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-k5W0GBRF.js → print-format.utils-C81c0weJ.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-DEyPmUzl.js";
-import { r } from "./translator-B62GlCBp.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-Dw9TBAlq.js → sortable-provider-CL2UGGn8.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-DxU51--g.js";
-import { t as n } from "./icon-button-Vz4NECf1.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-DEyPmUzl.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",
@@ -1226,6 +1230,7 @@ var e = {
 			copy: "Copy codes",
 			copied: "Codes copied",
 			"copy-failed": "Copy failed",
+			"copy-failed-hint": "Download or print the codes instead.",
 			download: "Download",
 			print: "Print",
 			saved: "I have saved these codes",
@@ -1578,8 +1583,8 @@ var e = {
 		table: {
 			loading: "Chargement des données…",
 			labels: {
-				asc: "Asc",
-				desc: "Desc",
+				asc: "Croissant",
+				desc: "Décroissant",
 				hide: "Cacher",
 				view: "Voir",
 				actions: "Actions",
@@ -2032,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",
@@ -2469,6 +2478,7 @@ var e = {
 			copy: "Copier les codes",
 			copied: "Codes copiés",
 			"copy-failed": "Échec de la copie",
+			"copy-failed-hint": "Téléchargez ou imprimez plutôt les codes.",
 			download: "Télécharger",
 			print: "Imprimer",
 			saved: "J'ai enregistré ces codes",

package/dist/{stx-player-CgwzX7_k.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-XJ95qxB1.js";
-import { t as l } from "./use-material-translation-DxU51--g.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-B62GlCBp.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-DEyPmUzl.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-T94lNeNA.js → use-heading-spy-BIBHtUXN.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-BpNC9SxV.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-DxU51--g.js → use-material-translation-COoBTGpB.js}

@@ -1,6 +1,6 @@
-import "./stored-language-DEyPmUzl.js";
-import { a as e } from "./i18n-provider-BpNC9SxV.js";
-import { i as t, r as n } from "./translator-B62GlCBp.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/buttons-and-actions.md

@@ -52,7 +52,7 @@ function save() {
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'filled' \| 'tonal' \| 'outlined' \| 'ghost' \| 'link'` | `'filled'` | the style |
-| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'default'` | `'primary'` | the colour; `default` is the foreground colour |
+| `color` | `'primary' \| 'secondary' \| 'success' \| 'info' \| 'warning' \| 'error' \| 'default'` | `'primary'` | the colour; `default` is the foreground colour. A `ghost` button in `secondary`, `success`, `info`, `warning` or `error` takes that colour's text and a tint of it on hover, at 4.5:1 on the page and on a card in both themes; in `primary` or `default` it keeps the foreground text |
 | `size` | `'default' \| 'xs' \| 'sm' \| 'lg' \| 'icon' \| 'icon-xs' \| 'icon-sm' \| 'icon-lg'` | — (36 px) | height; the `icon*` sizes are square |
 | `loading` | `boolean` | — | busy: a spinner, `aria-busy="true"` and `aria-disabled="true"`, and every click cancelled before your `@click` — a submit button submits neither on a click nor on Enter in a field. It stays focusable (no native `disabled`), so focus is not lost |
 | `lock-on-click` | `boolean` | — | a click makes the button busy at once, until `loading` has turned true and back (or for one second when it never does): for a `loading` that turns true only after an `await` |
@@ -148,7 +148,7 @@ import { Pencil, Trash2 } from '@lucide/vue';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'filled' \| 'tonal' \| 'outlined' \| 'ghost' \| 'link'` | `'filled'` | the style; a round 36 px button |
-| `color` | as `Button` | `'primary'` | the colour |
+| `color` | as `Button` | `'primary'` | the colour; a `ghost` one in a colour other than `primary` or `default` draws its icon in it, as `Button` does |
 | `tooltip` | `string` | — | wraps it in a `Tooltip`; names the button when there is no `aria-label` |
 | `aria-label` | `string` | the tooltip | the button's accessible name, set on the `<button>`; wins over the tooltip |
 | `name` | `IconName` | — | renders that [`Icon`](primitives.md#icon) before the slot |

package/docs/components/data-display.md

@@ -203,7 +203,7 @@ function remove(id: string) {
 | `active` | `boolean` | — | filled appearance |
 | `variant` | Button `variant`, or `'dashed'` | `'outlined'` | appearance when not active; `dashed` is a muted dashed pill (a "+ Field" pill) that turns solid and normal once `active` |
 | `size` | `'default' \| 'sm'` | `'default'` | `sm` is a compact chip; the ✕ and every target stay at least 24px |
-| `color` | Button `color` | — | tone |
+| `color` | Button `color` | — | tone; a `ghost` chip shows it too, as a ghost `Button` does |
 | `disabled` | `boolean` | — | disables the chip and its ✕ |
 | `@dismiss` | `() => void` | — | a listener adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text the chip shows: the default slot's when given, else `label`; "Remove" when it shows none; the ✕ is a 24px target |
 | `dismissLabel` | `string \| ((label: string) => string)` | — | names the ✕ instead of "Remove {label}": a string as is, or a function of the text the chip shows |
@@ -898,6 +898,7 @@ import { QRCode } from '@nxgt/material-vue/components';
 | `size` | `number` | `128` | pixels (React defaults to `256`) |
 | `level` | `'L' \| 'M' \| 'Q' \| 'H'` | `'L'` | error correction; use `H` with a logo |
 | `fgColor`, `bgColor` | `string` | `'#000000'`, `'#FFFFFF'` | colours |
+| `quietZone` | `number` | — (a fixed `p-4` tile) | the blank margin around the code, in modules (the QR spec asks for 4): drawn inside the svg (its viewBox widens by `quietZone` modules per side, the tile's `p-4` goes), so it follows the size and the density, and there is no inline `style`; `size` stays the code's own width, the tile grows by the margin |
 | `title` | `string` | — | accessible label of the SVG |
 | `aria-label` | `string` | — | the SVG's name too, and wins over `title` |
 | `#logo` | slot | — | the logo, centred over the code on a white pad (React's `logo`); the default slot still works |
@@ -965,7 +966,9 @@ import { EnrolmentSecret } from '@nxgt/material-vue/components';
 | `secret` | `string` | — | shown as `JBSW Y3DP EHPK 3PXP`; the copy button copies it without spaces |
 | `showQrCode` | `boolean` | `true` | `false`: the link and the key alone |
 | `qrSize` | `number` | `192` | the QR code's size in pixels (it shrinks to fit a narrower box) |
+| `qrQuietZone` | `number` | `4` | the blank margin around the QR code, in modules; the spec asks scanners for 4, which a fixed `p-4` fell short of at larger sizes. The tile's size can differ from before (a 4-module margin instead of 16px) |
 | `qrLabel`, `openAppLabel`, `manualLabel`, `secretLabel`, `copyLabel`, `copiedLabel` | `string` | translated | the QR code's name, the link, the line before the key, the key's group name, the copy button's name, what it announces |
+| `#copy-icon` | slot | Lucide's copy | replaces the copy button's icon with your app's own, so one icon set shows; a check or a cross still follows a copy |
 
 The QR code sits beside the rest once the component is 28rem wide (a
 container query), above it on a phone. The key is a `<code>` in a
@@ -975,7 +978,7 @@ region; it wraps at the group boundaries, never past the card's edge.
 `groupSecret(secret, size?)` (from `@nxgt/material-core/two-factor`) is
 re-exported for a layout of your own.
 
-**Storybook:** `Data display/EnrolmentSecret` · **React:** `EnrolmentSecret`
+**Storybook:** `Data display/EnrolmentSecret` · **React:** `EnrolmentSecret` (`copyIcon`)
 
 ---
 
@@ -1016,12 +1019,16 @@ const saved = ref(false);
 | `focusTitle` | `boolean` | `true` | the heading takes the focus once shown: the codes replaced what the user acted on |
 | `fileName`, `fileHeading`, `fileNote` | `string` | `"recovery-codes.txt"`, the title, the warning | the downloaded file and its first two lines |
 | `onDone` (`@done`) | `() => void` | — | shows "Done", which calls it once the confirmation is ticked |
+| `@copy` | `(result: 'copied' \| 'failed') => void` | — | fires once "Copy codes" has an outcome, so the app can toast it |
+| `#copy-icon`, `#download-icon`, `#print-icon` | slots | Lucide's | replace the buttons' icons with your app's own (a Font Awesome `Icon`, say); the copy one still turns into a check or a cross after a copy |
 | `v-model:saved` | `boolean` | uncontrolled | the confirmation |
-| `labels` | `Partial<RecoveryCodesLabels>` | translated | `list`, `copy`, `copied`, `copyFailed`, `download`, `print`, `saved`, `savedRequired`, `done` |
+| `labels` | `Partial<RecoveryCodesLabels>` | translated | `list`, `copy`, `copied`, `copyFailed`, `copyFailedHint`, `download`, `print`, `saved`, `savedRequired`, `done` |
 
-- **Copy** puts the codes on the clipboard one per line; "Codes copied" (or
-  "Copy failed") is announced by the component's own polite status region,
-  so it needs no `Toaster`.
+- **Copy** puts the codes on the clipboard one per line. The outcome is
+  written beside the buttons ("Codes copied", or "Copy failed. Download or
+  print the codes instead.") and the button's icon turns into a check or a
+  cross for a moment (a refusal stays, with its way out, until the next copy, download or print); the same text is the component's polite status region,
+  so it needs no `Toaster`. `@copy` hears `'copied'` or `'failed'` too, to toast it.
 - **Download** saves `recoveryCodesText(codes, { heading, note })` with
   `downloadText` (both re-exported from `@nxgt/material-core/two-factor`).
 - **Print** prints the card and nothing else, with no inline style and no new
@@ -1046,4 +1053,4 @@ useEventListener(window, 'beforeunload', (event) => {
 });
 ```
 
-**Storybook:** `Data display/RecoveryCodes` · **React:** `RecoveryCodes` (`saved` / `onSavedChange`, `onDone`; props for the slots)
+**Storybook:** `Data display/RecoveryCodes` · **React:** `RecoveryCodes` (`saved` / `onSavedChange`, `onDone`, `onCopy`, `icons`; props for the slots)

package/docs/components/data-table-filter-and-lists.md

@@ -59,7 +59,9 @@ const columns = columnHelper.columns([
 ```
 
 Parts: `DataTable`; `DataTableColumnHeader` (a sortable header with a hide
-action); `DataTablePagination`, `DataTableServerFooter` and
+action; the sorted column's header cell carries `aria-sort`, and the
+button keeps the column's title as its name); `DataTablePagination`,
+`DataTableServerFooter` and
 `DataTableViewOptions` (used by the table, exported for a table or a footer
 of your own; both footers take `disabled`);
 `useColumnHelpers<T>()` returns a

package/docs/components/feedback-and-status.md

@@ -92,7 +92,7 @@ const open = ref(true);
 | --- | --- | --- | --- |
 | `tone` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | colours and the default icon |
 | `#icon` slot | — | the tone's icon | replaces the default icon |
-| `#action` slot | — | — | rendered at the end of the banner; under `sm` it drops below the text, in line with it |
+| `#action` slot | — | — | rendered at the end of the banner; under `sm` it drops below the text, in line with it; there a `ghost` or `link` button (a `LinkButton` too, any size) that is the action itself, not wrapped in another element, is pulled back by its own padding, so its label (or leading icon) starts at the text's edge |
 | `dismissible` | `boolean` | `false` | shows a close button that emits `dismiss`; the banner does not hide itself |
 
 Where React shows the close button when `onDismiss` is passed, Vue asks for
@@ -223,7 +223,8 @@ async function remove() {
 
 `on-confirm` is a function prop, so `@confirm="fn"` binds it as before and its
 promise is awaited; a plain `@confirm="open = false"` keeps working. The error
-clears when the dialog opens again.
+clears when the dialog opens again. On closing, the focus goes back to what
+opened it — to the menu's trigger when that was a `DropdownMenuItem`.
 
 ![ConfirmationDialog](../previews/feedback-status-confirmationdialog.webp)
 
@@ -590,6 +591,10 @@ async function upload() {
 | `role` | `'status' \| 'alert'` | none (`toasts.error`: `'alert'`) | live-region role. Toasts are already announced politely by the `Toaster`'s region; `alert` interrupts, and may be read twice by some screen readers |
 | `options` | vue-sonner `ExternalToast` | `duration: 5000` for presets, `Infinity` for `loading` and for any toast with your own `action` (a preset's fallback "Close" still times out at 5000) unless a `duration` is passed | passed to Sonner (`id`, `duration`, `position`…) |
 
+A toast's text wraps between words, beside an action and its X too; a word
+longer than the toast (a URL) breaks at its edge instead of pushing the
+action out.
+
 The toast id defaults to the title, so two toasts with the same title
 replace each other; pass `options: { id }` to show both. `Toaster` wraps
 vue-sonner's and takes its props (`position`, `expand`, `rich-colors`…), all

package/docs/components/form-fields.md

@@ -716,13 +716,14 @@ const code = ref('');
 </script>
 
 <template>
-  <OtpField v-model="code" label="Enter OTP" :length="6" @complete="(value) => console.log(value)" />
+  <OtpField v-model="code" label="Enter OTP" :length="6" placeholder="123456" @complete="(value) => console.log(value)" />
 </template>
 ```
 
 | Prop / event | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `length` | `number` | `6` | number of slots, split in two groups |
+| `placeholder` | `string` | — | a format hint, one character per slot (`"123456"`), drawn muted in the empty slots until the first character is typed; also on `InputOTP`, shown by `InputOTPSlot` |
 | `v-model` | `string` | — | the digits typed so far |
 | `@complete` | `(value: string) => void` | — | once every slot is filled (from `vue-input-otp`) |
 | `error` | `boolean` | — | error colour on the slots (`data-invalid` on each); `aria-invalid` goes on the input only, the one element a screen reader reads |

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)
@@ -603,13 +658,18 @@ step has no `icon`, and there is no separate `StepperIndicator`.
 | `steps` | `{ title; description?; status? }[]` | — | `status`: `'completed' \| 'error' \| 'upcoming'`, else derived from `active` |
 | `active` | `number` | `0` | current step; its `description` is shown as helper text below, and in a hover tooltip on a decorative info icon |
 | `@change` | `(index: number) => void` | — | a step was clicked |
-| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | vertical from `md` only; phones get the compact bar |
+| `orientation` | `'horizontal' \| 'vertical' \| 'responsive'` | `'horizontal'` | `'vertical'`: a column from `md`, phones get the compact bar. `'responsive'`: every step in a column below `sm` (640px), a row from `sm` |
 | `name` | `string` | — | the stepper's `data-pw` (`stepper` without it), and the prefix of each step's: `<name>-step-N` instead of `step-N` |
 
 Each step is an `<li>` with `data-pw="step-N"` (`<name>-step-N` with `name`),
 N counted from 0, for tests to select; the current step's button carries
 `aria-current="step"`, and a completed or failed step is announced as such.
 
+A server renders the desktop layout (every step, at `provideSSRWidth()` or
+1024px), as does a hydrating client; a phone switches to the compact bar
+right after hydrating (with `orientation="responsive"`, to the column of every
+step).
+
 **Storybook:** `Navigation & layout/Stepper` · **React:** `Stepper`
 
 ---