@nxgt/material-vue 0.40.1 → 0.41.0

package/dist/{pdf-outline-sidebar-DINCjWKk.js → pdf-outline-sidebar-CgmJjhUz.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 { Lf as n } from "./components-C1JYYoQ4.js";
+import { t as r } from "./use-material-translation-Du3Wvsk1.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-BjQNWV72.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Kp as t } from "./components-XJ95qxB1.js";
+import { Kp as t } from "./components-C1JYYoQ4.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-nG0l4SjH.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 { Lf as t } from "./components-C1JYYoQ4.js";
+import { t as n } from "./pdf-page-BjQNWV72.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-Dekd4Ymw.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-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 { 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-gDj63dRH.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-Du3Wvsk1.js";
+import { t as r } from "./pdf-outline-sidebar-CgmJjhUz.js";
+import { t as i } from "./pdf-thumbnail-sidebar-C5ikii1Z.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-C5ikii1Z.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 { 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 { 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-DmmrSlCq.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-Du3Wvsk1.js";
+import { f as r } from "./Button-BG3oDkrl.js";
+import { t as i } from "./icon-button-DXrmfs6e.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-Dh1ar_W4.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-Du3Wvsk1.js";
+import { t as n } from "./Button-BG3oDkrl.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-CiUiQE-i.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-dM2e5qaS.js";
+import { r } from "./translator-DXL5RDRg.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-lK0srHJF.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-Du3Wvsk1.js";
+import { t as n } from "./icon-button-DXrmfs6e.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-dM2e5qaS.js}

@@ -1226,6 +1226,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 +1579,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",
@@ -2469,6 +2470,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-C2VQCXFc.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, 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 { 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 = {

package/dist/{translator-B62GlCBp.js → translator-DXL5RDRg.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-dM2e5qaS.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-Btwc0yad.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-BpNC9SxV.js";
+import { a as e } from "./i18n-provider-D5XyLQ3P.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-Du3Wvsk1.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-dM2e5qaS.js";
+import { a as e } from "./i18n-provider-D5XyLQ3P.js";
+import { i as t, r as n } from "./translator-DXL5RDRg.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/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

@@ -603,13 +603,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`
 
 ---

package/docs/guides/forms.md

@@ -315,10 +315,16 @@ shows them right under its fields.
   `form-actions` gets the same sticky footer.
 - A focused control or link is scrolled into view clear of the actions and
   a line of helper text below it (`scroll-margin-bottom` on the fields'
-  controls: 6rem, plus a dialog's bottom padding, 7.5rem above a
-  `ConfirmationDialog`'s stacked footer), so a field you tab to is never
-  hidden behind them (WCAG 2.4.11). It is set on the controls, so it holds
-  in a scroll box of your own too.
+  controls: 6rem, 8rem on a phone, plus a dialog's bottom padding, plus the
+  safe-area inset beyond 1rem, 7.5rem above a `ConfirmationDialog`'s stacked
+  footer), so a field you tab to is never hidden behind them (WCAG 2.4.11).
+  It is set on the controls, so it holds in a scroll box of your own too.
+- The actions pad their bottom for the safe area
+  (`max(1rem, env(safe-area-inset-bottom))`): in an installed app with
+  `viewport-fit=cover`, they clear the home indicator. The phone default
+  (below `sm`, where the buttons share the row) comes from
+  `--form-actions-clearance-default`, which is internal: override
+  `--form-actions-clearance` instead.
 - Taller actions (a third button, labels that wrap) or helper text on
   several lines need more room: raise `--form-actions-clearance` on the
   form. A dialog whose bottom padding is not the default 1.5rem (`p-0` and

package/docs/troubleshooting.md

@@ -28,6 +28,7 @@ words in your error.
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
 - [A form's fields no longer scroll in their own box after upgrading](#a-forms-fields-no-longer-scroll-in-their-own-box-after-upgrading)
+- [axe reports `target-size` on a control under a form's sticky actions](#axe-reports-target-size-on-a-control-under-a-forms-sticky-actions)
 - [`JsBarcode is not a function`](#jsbarcode-is-not-a-function)
 - [A `LinkButton` selected as a `button` stops matching](#a-linkbutton-selected-as-a-button-stops-matching)
 - [A `Toc`, `Pager`, `SeeAlso` or `ScrollProgress` inside `Doc` selected by `data-slot` stops matching](#a-toc-pager-seealso-or-scrollprogress-inside-doc-selected-by-data-slot-stops-matching)
@@ -190,6 +191,7 @@ words in your error.
 - [A test's `getByRole('region')` finds more than one region](#a-tests-getbyroleregion-finds-more-than-one-region)
 - [A `DataTable` toolbar is gone](#a-datatable-toolbar-is-gone)
 - [axe reports `target-size` on a `DataTable`'s "Select all"](#axe-reports-target-size-on-a-datatables-select-all)
+- [A French test no longer finds the sort menu's "Asc" or "Desc"](#a-french-test-no-longer-finds-the-sort-menus-asc-or-desc)
 
 **PDF reader**
 
@@ -1311,6 +1313,26 @@ actions where they are, make them static:
 An app's own fixed bottom bar or floating action button now sits under the
 sticky actions (`z-index: 10`): give it a z-index above 10 (`class="z-20"`).
 
+### axe reports `target-size` on a control under a form's sticky actions
+
+**When:** since the form's actions stick to the bottom (see above), axe's
+`target-size` (WCAG 2.5.8) flags a field's control, a link or a button
+that sits half under the sticky `[data-slot="form-actions"]` bar, wherever
+the page happens to stop scrolling when the scan runs. The same control passes once scrolled into view.
+**Why:** axe measures what is visible of a target: the sticky bar covers part
+of the control, so axe sees a target smaller than 24 by 24 px, or one whose
+circle meets Cancel or Save. A user scrolls the control out from under the
+bar; a scan does not.
+**Fix:** scan with the actions put back in the flow, so nothing covers the
+fields, and keep the bar's own buttons in the scan:
+
+```ts
+await page.addStyleTag({
+  content: '[data-slot="form-actions"] { position: static !important; }',
+});
+await expectAccessible(page);
+```
+
 ## Feedback
 
 ### A toast with an action never goes away
@@ -3580,6 +3602,15 @@ page.getByRole('region', { name: 'Invoices' });
 **Why:** axe measures the 16px box itself, not its 24px `::before`, so it asks for a 24px circle around the box clear of every other control. The sort button reaches 12px back into its cell's padding (`-ml-3`), and the `select` cell had no padding after its checkbox: the circle met the button.
 **Fix:** upgrade: the `select` column's checkboxes now keep a 12px margin after them. Drop any axe `exclude` of `thead [data-slot="checkbox-field"]` you kept for it. A `select` column of your own (not `predefinedColumns().select`) needs the same: `me-3` on its checkboxes.
 
+### A French test no longer finds the sort menu's "Asc" or "Desc"
+
+**When:** after upgrading, a test running in French clicks the
+`DataTableColumnHeader` menu item "Asc" or "Desc" and finds nothing.
+**Why:** `material.table.labels.asc` / `desc` are now translated in French,
+"Croissant" / "Décroissant" (#612); English keeps "Asc" / "Desc".
+**Fix:** look for `getByRole('menuitem', { name: 'Croissant' })` (or
+`'Décroissant'`) in French.
+
 ---
 
 ---

package/lib/components/base-content.css

@@ -139,13 +139,23 @@
 				[contenteditable]
 			) {
 			scroll-margin-bottom: calc(
-				var(--form-actions-clearance, 6rem) +
-				var(--form-actions-fill, 0px)
+				var(
+					--form-actions-clearance,
+					var(--form-actions-clearance-default, 6rem)
+				) +
+				var(--form-actions-fill, 0px) +
+				max(0px, calc(env(safe-area-inset-bottom, 0px) - 1rem))
 			);
 		}
-		/* Sticky at the bottom of whatever scrolls the form: in reach. */
+		/* A phone's actions wrap their labels over two lines and a field has an
+		   error line: 8rem covers both (`--form-actions-clearance` still wins). */
+		@variant max-sm {
+			--form-actions-clearance-default: 8rem;
+		}
+		/* Sticky at the bottom of whatever scrolls the form: in reach. Padded
+		   for the safe area (`viewport-fit=cover`: the home indicator). */
 		[data-slot="form-actions"] {
-			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 backdrop-blur-sm max-sm:*:flex-1;
+			@apply sticky bottom-0 z-10 flex w-full justify-end gap-2 bg-background/90 p-4 pb-[max(1rem,env(safe-area-inset-bottom))] backdrop-blur-sm max-sm:*:flex-1;
 		}
 	}
 

package/package.json

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