@nxgt/material-vue 0.29.1 → 0.30.1

package/dist/{pdf-outline-sidebar-Bll123U-.js → pdf-outline-sidebar-DQ6BCQhR.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Ef as n } from "./components-kGJbzQYZ.js";
+import { Ef as n } from "./components-DSl6EpOS.js";
 import { t as r } from "./use-material-translation-Do6ztdtV.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

package/dist/{pdf-page-DEi2b6dz.js → pdf-page-cuvGDdM2.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kp as t } from "./components-kGJbzQYZ.js";
+import { kp as t } from "./components-DSl6EpOS.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-eQ0uLV6i.js → pdf-page-list-B94WdjV4.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Ef as t } from "./components-kGJbzQYZ.js";
-import { t as n } from "./pdf-page-DEi2b6dz.js";
+import { Ef as t } from "./components-DSl6EpOS.js";
+import { t as n } from "./pdf-page-cuvGDdM2.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-CWQbdM31.js → pdf-reader-CEkr3KzC.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { On as t } from "./components-kGJbzQYZ.js";
+import { On as t } from "./components-DSl6EpOS.js";
 import { t as n } from "./use-material-translation-Do6ztdtV.js";
 import { t as r } from "./Button-CNbJT5qV.js";
-import { o as i } from "./HoverCardTrigger-Ci1iT9-I.js";
-import { n as a } from "./pdf-page-DEi2b6dz.js";
-import { t as o } from "./pdf-page-list-eQ0uLV6i.js";
-import { t as s } from "./pdf-sidebar-Dv2PY_bB.js";
-import { t as c } from "./pdf-toolbar-Z5YML7a-.js";
+import { o as i } from "./HoverCardTrigger-BTAHE6wK.js";
+import { n as a } from "./pdf-page-cuvGDdM2.js";
+import { t as o } from "./pdf-page-list-B94WdjV4.js";
+import { t as s } from "./pdf-sidebar-DJf--6rP.js";
+import { t as c } from "./pdf-toolbar-B_MDicKL.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-Dv2PY_bB.js → pdf-sidebar-DJf--6rP.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-Do6ztdtV.js";
-import { t as r } from "./pdf-outline-sidebar-Bll123U-.js";
-import { t as i } from "./pdf-thumbnail-sidebar-3RBdIUuk.js";
+import { t as r } from "./pdf-outline-sidebar-DQ6BCQhR.js";
+import { t as i } from "./pdf-thumbnail-sidebar-JLWNyl-p.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-3RBdIUuk.js → pdf-thumbnail-sidebar-JLWNyl-p.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Ef as n } from "./components-kGJbzQYZ.js";
+import { Ef as n } from "./components-DSl6EpOS.js";
 import { t as r } from "./use-material-translation-Do6ztdtV.js";
-import { t as i } from "./pdf-page-DEi2b6dz.js";
+import { t as i } from "./pdf-page-cuvGDdM2.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-Z5YML7a-.js → pdf-toolbar-B_MDicKL.js}

@@ -4,7 +4,7 @@ import { t as n } from "./use-material-translation-Do6ztdtV.js";
 import { d as r } from "./Button-CNbJT5qV.js";
 import { t as i } from "./icon-button-DXXjxBgr.js";
 import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-BsuyNVzV.js";
-import { o as d } from "./HoverCardTrigger-Ci1iT9-I.js";
+import { o as d } from "./HoverCardTrigger-BTAHE6wK.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/{stx-player-DVTFb2Oe.js → stx-player-DWy055hI.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jt as n, Mp as r, Qt as i, Yt as a, Zt as o, en as s, qt as c } from "./components-kGJbzQYZ.js";
+import { $t as t, Jt as n, Mp as r, Qt as i, Yt as a, Zt as o, en as s, qt as c } from "./components-DSl6EpOS.js";
 import { t as l } from "./use-material-translation-Do6ztdtV.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

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

@@ -175,23 +175,32 @@ keys, and an edge fades on each side where columns are hidden
 server; once focused, it stays a tab stop until focus leaves, even if it
 stops overflowing. The empty state is centred in the part of the table you
 can see (the box's measured width, `--table-visible-width`), not across its
-whole scroll width. The table needs no width from its parent: inside a
+whole scroll width: a wide `#empty` slot stays inside the box on a 375px
+phone. The table needs no width from its parent: inside a
 content-sized one (`w-fit`, `inline-flex`, an `auto` grid track, a popover)
 it is as wide as its columns.
 
 The `select` column's checkboxes keep their 16px box, with a 24px target
-around it (WCAG 2.5.8). The toolbar renders only when it has content:
-the `actions` prop or the `#actions` slot that render nothing (`null`,
-`false`, whitespace, a `v-if` left out) leave no empty `<fieldset>` behind.
+around it (WCAG 2.5.8), and a 12px margin after it: axe's `target-size`
+measures the box itself, so a 24px circle around it stays clear of the next
+column's control — "Select all" beside a `DataTableColumnHeader` sort button
+included.
+
+The toolbar renders only when it has content: the `actions` prop or the
+`#actions` slot that render nothing (`null`, `false`, `''`, whitespace, a
+`v-if` left out, an empty fragment or array) leave no empty `<fieldset>`
+behind. A component of yours that renders nothing still counts as content:
+put the `v-if` on it instead.
 
 Selection actions do not move the rows. With `actions` or the `#actions`
 slot and the `select` column (`predefinedColumns().select`, id `select`),
-the toolbar's height is reserved — an empty, hidden placeholder
+the toolbar's height (68px) is reserved — an empty, hidden placeholder
 (`[data-slot="header-placeholder"]`) while they render nothing, the same
 minimum height once they do — so the "Delete selected" that appears on the
 first selection does not push the tapped row down. The reserved height is
 one row of default-size buttons (`h-9`); taller or wrapping actions still
-grow the toolbar.
+grow the toolbar. Without the `select` column, or without actions, no band
+is kept above the table.
 
 ```vue
 <template>

package/docs/components/date-and-time.md

@@ -83,7 +83,12 @@ await page.getByRole('gridcell', { name: 'Thursday, October 1, 2026', exact: tru
 first day (Monday in French). Each header is labelled by its full weekday
 ("lundi"), as in `@nxgt/material`; reka hides the row from assistive tech
 (`<thead aria-hidden>`), since every day's name already carries its weekday.
-It reads at 4.5:1 or more on the popover in the light and the dark theme.
+It reads at 4.5:1 or more on its tinted header (`th`, `bg-primary/15`), on the
+page and in a popover, in the light and the dark theme.
+
+**Contrast.** The days of the neighbouring months are muted but not faded:
+they can be picked, so they read at 4.5:1 or more, on a tinted week too
+(`Date & time/Calendar` → Contrast measures them all).
 
 No form wrapper — use `DateFormField`.
 **Storybook:** `Date & time/Calendar` · **React:** `Calendar`, `CalendarDayButton`

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

@@ -96,8 +96,17 @@ const open = ref(true);
 | `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
-`dismissible` and `@dismiss`. The banner has `role="status"`. It stays mounted
-until you stop rendering it.
+`dismissible` and `@dismiss`. It stays mounted until you stop rendering it.
+
+**Announced:** every tone, `error` included, is a polite live region:
+`role="status"` `aria-live="polite"` `aria-atomic="true"`. A change of its
+text is read out, and a modal layer keeps it reachable when it makes the page
+`inert`; a `Banner` mounted later inside a part of the page made inert stays
+inert until the layer closes. Behind the layer, a screen reader's browse mode
+still reaches its action and dismiss button. For an urgent banner, pass
+`role="alert"` (and `aria-live="assertive"`): the
+attributes you pass (`id`, `data-*`, `aria-*`, `role`) fall through to its
+root and win over these.
 
 **Emits:** `dismiss` — no payload.
 **Storybook:** `Feedback & status/Banner` · **React:** `Banner`
@@ -643,6 +652,12 @@ touch screen a tap no longer fans out a stack of two or more toasts either: pass
 only collapses the stack); this `Toast` does when focus is inside it, with or
 without an action. The close button is reached with Tab.
 
+**The action's colours.** The toast is the inverse of the page (dark in the
+light theme, light in the dark one), so its `{ label }` action takes the other
+theme's primary tone, on an opaque mix of primary toward the toast, and reads
+at 4.5:1 or more in both themes (WCAG 1.4.3). A function action's own buttons
+keep the page's tones: give them colours measured on the toast.
+
 **Focus after an action.** A click on a toast's action first gives the focus
 back to the control that had it before the focus entered the toast, then runs
 your `onClick`, then closes the toast; a function action's `dismiss` does the

package/docs/components/primitives.md

@@ -248,19 +248,20 @@ import { Input, Label } from '@nxgt/material-vue/components';
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `with-asterisk` | `boolean` | — | draws a red `*` with CSS after the label, so it is in neither the label's text nor its accessible name (`getByLabel('Email', { exact: true })` and `getByLabelText` match "Email"): mark the field itself `required` (or `aria-required`), which every field of this library does for you |
+| `with-asterisk` | `boolean` | — | draws a red `*` after the label, an `aria-hidden` SVG, so it is in neither the label's text nor its accessible name (`getByLabel('Email', { exact: true })` and `getByLabelText` match "Email"): mark the field itself `required` (or `aria-required`), which every field of this library does for you |
 | `for` | `string` | — | the control it labels; clicking the label focuses it |
 
 Fields on the [Form fields](form-fields.md) page render it for you through
 their `label` prop.
 
-To restyle the mark, target `[data-slot="label-text"][data-required]::after`:
-`background-color` sets its colour (default `var(--color-error)`), `width` and
-`height` its size. It stays visible in forced-colors mode and in print.
+To restyle the mark, target `[data-slot="label-required-mark"]`: `color` sets
+its colour (default `var(--color-error)`), `width` and `height` its size. It
+stays visible in forced-colors mode and in print, and it loads no image, so a
+Content-Security-Policy whose `img-src` refuses `data:` draws it too.
 
 ```css
-[data-slot="label-text"][data-required]::after {
-	background-color: #b45309;
+[data-slot="label-required-mark"] {
+	color: #b45309;
 	width: 0.75em;
 	height: 0.75em;
 }

package/docs/guides/app-shell.md

@@ -251,7 +251,8 @@ button ("Open menu") that opens the same entries in a sheet. Breadcrumbs are
 hidden there. The sheet is a dialog named "Navigation"
 (`material.app-shell.navigation`) with a visible "Close" button. Following an
 entry closes it — so does any route change, Back included — and focus goes to
-the page's `<main>`; closed with Escape, the close button or the overlay,
+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.
 

package/docs/roadmap.md

@@ -1,15 +1,65 @@
 # Roadmap
 
 What is being worked on, what is likely to follow, and what has been decided
-against. This is a direction, not a commitment: the only number on this page is
-the version something shipped in.
+against. This is a direction, not a commitment: shipped entries carry the
+version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
-Nothing in progress right now; see Next.
+- **Empty and error states that look designed** — `EmptyState` and a new
+  `ErrorState` in three sizes (`default`, `compact`, `inline`), with in-house
+  inline SVG illustrations or a slot for your own. `ErrorState` is a
+  `role="alert"` with a Retry action and collapsible technical details. Every
+  built-in empty or error state uses them — the `DataTable` default (your
+  `#empty` slot and `empty` prop still replace it), `PdfReader`, `CommandEmpty`,
+  the gallery, the kanban board, chat and the partials. Ships in
+  `@nxgt/material-vue` 1.0, with the rest of the redesign.
 
 ## Next
 
+- **One media player, video and audio** — `MediaPlayer`, `MediaPlayerMini`,
+  `useMediaPlayer` and `AudioPlayer`, built on the native `<video>` / `<audio>`.
+  `StxPlayer` and `VideoPlayer` are removed in `@nxgt/material-vue` 1.0, with a
+  migration guide. It plays streams — native HLS, plus `hls.js` with a quality
+  menu when you install it (an optional peer, loaded only when a stream needs
+  it) — shows chapters and a transcript that follows the playback, a waveform
+  for audio, thumbnails on hover (VTT sprites), resumes where the viewer left
+  off, and adds gestures, shuffle, a shortcut-help panel and a screen that stays
+  awake. It runs embedded at an aspect ratio, fullscreen, floating (a corner
+  mini player, and an audio bar that persists across pages) or in a modal
+  lightbox. Built for WCAG 2.2 AA and selected AAA criteria: controls at 7:1,
+  captions plus a transcript, a full keyboard, screen-reader announcements,
+  `aria-valuetext` on sliders, reduced motion and forced colors.
+- **PDFs generated without React** — a framework-free engine on pdfkit replaces
+  `@react-pdf/renderer`, so the Vue library no longer needs react. One data API,
+  `definePdfDocument`, everywhere; the HTML `Print*` blocks stay for
+  `window.print()`. Output is tagged for accessibility (PDF/UA), archival
+  (PDF/A-3) and electronic invoicing (Factur-X, EN 16931). It also brings the
+  items below.
+- **Your brand on the page** — a print theme whose defaults follow the screen
+  theme, and your own font files registered in one call (the library bundles
+  no fonts).
+- **QR codes, barcodes and charts in a PDF** — pass the value or the chart
+  options and get vector output, no data URL to prepare.
+- **Rich text and Markdown in a PDF** — the rich-text editor's content and
+  Markdown rendered as PDF headings, paragraphs, lists, tables and links.
+- **A live preview inside `PdfReader`** — `PdfReader` takes a document and
+  renders it itself, refreshing a moment after its data stops changing.
+- **Test helpers for generated PDFs** — read a generated PDF's text, page count
+  and metadata in a unit test, without a browser.
+- **Archive-ready PDFs** — PDF/A-3 output through one option, for invoices and
+  records that must be kept.
+- **Electronic invoices (Factur-X)** — an invoice PDF that carries its
+  machine-readable data (EN 16931), built on archive-ready PDFs and the
+  invoice template, for e-invoicing mandates such as France's.
+- **A PDF reader that annotates and fills forms** — pdf.js used directly in
+  both libraries (React drops `react-pdf`), with one `PdfReader` whose `mode`
+  is `embedded`, `dialog` or `page` and whose toolbar adapts to the width of
+  its container. Viewers add their own annotations, held as JSON in
+  `value` / `onChange` and exportable into the PDF; fill AcroForms; read two
+  pages side by side; scroll continuously or page by page; hear the text read
+  aloud; or switch to a reflowed text mode. Annotation export loads `pdf-lib`
+  only when used.
 - **Print blocks that paginate on paper** — the HTML `Print*` blocks repeat
   their table header on every printed page, keep rows and totals whole, print
   their colours, and a `PrintPage` sets size and margins for `window.print()`.
@@ -19,6 +69,11 @@ Nothing in progress right now; see Next.
 
 ## Later
 
+- **Next major: an error `Banner` interrupts** — `tone="error"` becomes
+  `role="alert"` `aria-live="assertive"`, so a screen reader reads it out at
+  once. Every tone is `role="status"` `aria-live="polite"` today; pass
+  `role="alert"` for an urgent banner until then. Breaking for a test that
+  finds an error `Banner` with `getByRole('status')`.
 - **Next major: `ListTile`'s `data-slot` becomes `list-tile`** — it is
   `item-detail` today, so the name matches the component like every other
   slot. Breaking for a selector or a test that looks for `item-detail`.
@@ -38,23 +93,6 @@ Nothing in progress right now; see Next.
 - **Ready-made documents** — invoice, quote, receipt, report, certificate and
   label-sheet templates that take your data and return a document, their labels
   translated.
-- **Your brand on the page** — a print theme whose defaults follow the screen
-  theme, and your own font files registered in one call — the library bundles
-  no fonts.
-- **QR codes, barcodes and charts in a PDF** — pass the value or the chart
-  options and get vector output, no data URL to prepare.
-- **Rich text and Markdown in a PDF** — the rich-text editor's content and
-  Markdown rendered as PDF headings, paragraphs, lists, tables and links.
-- **A live preview inside `PdfReader`** — `PdfReader` renders a document
-  itself and refreshes it a moment after its data stops changing. Today
-  `usePdf` plus `<PdfReader :file="blob">` covers a manual preview.
-- **Test helpers for generated PDFs** — read a generated PDF's text, page count
-  and metadata in a unit test, without a browser.
-- **Archive-ready PDFs** — PDF/A output through one option, for invoices and
-  records that must be kept.
-- **Electronic invoices (Factur-X)** — an invoice PDF that carries its
-  machine-readable data, built on archive-ready PDFs and the invoice template,
-  for e-invoicing mandates such as France's.
 
 ## Not planned
 
@@ -85,13 +123,14 @@ Nothing in progress right now; see Next.
 - **An app shell that builds its own menu** — `items` stays a prop and labels
   stay already-translated, because each app filters its menu by its own
   permissions and translates in its own namespace.
-- **Right-to-left and complex-script PDFs** — the PDF engine
-  (`@react-pdf/renderer`) does not shape Arabic or Hebrew reliably. Render such
-  documents with the HTML `Print*` blocks and print them with a browser:
-  `window.print()`, or Playwright or Gotenberg on a server.
-- **A second PDF engine** — no Vue-native renderer and no pdfmake: `/pdf`
-  renders with the same engine as `@nxgt/material/print`, so one document model
-  and one set of templates serve both libraries.
+- **Right-to-left and complex-script PDFs** — pdfkit does not lay out
+  right-to-left text or shape Arabic and Hebrew reliably, so the new engine
+  does not promise it. Render such documents with the HTML `Print*` blocks and
+  print them with a browser: `window.print()`, or Playwright or Gotenberg on a
+  server.
+- **Two PDF engines** — pdfkit replaces `@react-pdf/renderer`; there is no
+  Vue-native renderer, no pdfmake and no second engine beside it. One engine
+  and one document model serve both libraries, and react is no longer needed.
 
 ## Shipped
 
@@ -217,24 +256,23 @@ Nothing in progress right now; see Next.
   keyboard and in fullscreen. 0.22.0.
   ([PdfReader](components/media-and-files.md#pdfreader))
 - **Amounts and dates in your locale** — `formatAmount` and `formatDate` take a
-  locale and time zone, use each currency's own decimals (`{ fractionDigits: 2 }`
-  keeps two) and keep a date-only value on its day; they are on
+  locale and time zone, use each currency's own decimals (`{ fractionDigits: 2
+  }` keeps two) and keep a date-only value on its day; they are on
   `@nxgt/material-vue/lib` as in `@nxgt/material`; `useFormatters()` binds them
   to the `I18nProvider` language and `createFormatters()` to a locale you pass,
   so a document rendered on a server reads like the screen. 0.22.0.
   ([printing](guides/printing.md#formatamount-and-formatdate))
-- **More built-in labels follow the language** — calendar navigation,
-  the data table's selection checkboxes, filter presets and
-  `Min`/`Max`, the spinner, scroll-to-top, upload `Retry`/`Remove`, the map's
-  `You are here`, zoom and `My position` buttons, close buttons (including
-  `DialogFooter`'s), and the editor's slash menu (searchable in either language), font names and table alignment;
-  then the pagination buttons, breadcrumb names, `CommandDialog`'s title, the
-  carousel's role description, the filter's empty state and chips,
+- **More built-in labels follow the language** — calendar navigation, the data
+  table's selection checkboxes, filter presets and `Min`/`Max`, the spinner,
+  scroll-to-top, upload `Retry`/`Remove`, the map's `You are here`, zoom and `My
+  position` buttons, close buttons (including `DialogFooter`'s), and the
+  editor's slash menu (searchable in either language), font names and table
+  alignment; then the pagination buttons, breadcrumb names, `CommandDialog`'s
+  title, the carousel's role description, the filter's empty state and chips,
   `MessageCard`'s "Unread", the upload field's replace button and errors, the
   attribute options' "Add option", the editor's placeholder and emoji buttons,
   `CircularProgress`, `StxPlayer`, `PaneLayoutPane`'s sheet title,
-  `JsonViewer`'s "Empty JSON" and `TimePicker`'s AM/PM.
-  0.22.0.
+  `JsonViewer`'s "Empty JSON" and `TimePicker`'s AM/PM. 0.22.0.
   ([i18n](guides/i18n.md#the-material-namespace))
 - **PdfReader fixes** — downloads finish in every browser and take the file name
   you give instead of `document.pdf`, a wrong password says so, Escape inside a

package/docs/troubleshooting.md

@@ -23,6 +23,7 @@ words in your error.
 - [An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link](#an-accessibility-audit-reports-low-contrast-on-a-tonal-or-outlined-button-a-selected-list-tile-or-a-hovered-badge-link)
 - [An accessibility audit reports low contrast on error text in the dark theme](#an-accessibility-audit-reports-low-contrast-on-error-text-in-the-dark-theme)
 - [Dialogs, toasts or buttons no longer animate](#dialogs-toasts-or-buttons-no-longer-animate)
+- [A Content-Security-Policy reports a `data:` image on every form with a required field](#a-content-security-policy-reports-a-data-image-on-every-form-with-a-required-field)
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [`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)
@@ -55,6 +56,8 @@ words in your error.
 - [A toast never goes away after a tap](#a-toast-never-goes-away-after-a-tap)
 - [A toast's action cannot be clicked while a dialog is open](#a-toasts-action-cannot-be-clicked-while-a-dialog-is-open)
 - [`toasts.success(message, { action })` shows no action button](#toastssuccessmessage--action--shows-no-action-button)
+- [An accessibility audit reports low contrast on a toast's action](#an-accessibility-audit-reports-low-contrast-on-a-toasts-action)
+- [A `Banner` is not announced while a dialog is open](#a-banner-is-not-announced-while-a-dialog-is-open)
 - [The focus leaves a dialog that a toast's action opened](#the-focus-leaves-a-dialog-that-a-toasts-action-opened)
 - [A `ConfirmationDialog` reopened at once stays closed](#a-confirmationdialog-reopened-at-once-stays-closed)
 - [The first Escape after closing a nested dialog does nothing](#the-first-escape-after-closing-a-nested-dialog-does-nothing)
@@ -62,6 +65,7 @@ words in your error.
 **Navigation**
 
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
+- [After a link in the phone menu, the focus goes to `<main>`, not to the page's heading](#after-a-link-in-the-phone-menu-the-focus-goes-to-main-not-to-the-pages-heading)
 - [The phone menu needs two Escapes to close, or a tooltip shows over it](#the-phone-menu-needs-two-escapes-to-close-or-a-tooltip-shows-over-it)
 - [`Tabs` look different after upgrading](#tabs-look-different-after-upgrading)
 - [A screen reader announces an icon-only tab as "tab", with no name](#a-screen-reader-announces-an-icon-only-tab-as-tab-with-no-name)
@@ -129,6 +133,7 @@ words in your error.
 - [Zod messages ignore the language, or your `material.zod.*` strings](#zod-messages-ignore-the-language-or-your-materialzod-strings)
 - [A test asserting the old Zod string length text fails](#a-test-asserting-the-old-zod-string-length-text-fails)
 - [A calendar's weekday row is in English on a French page](#a-calendars-weekday-row-is-in-english-on-a-french-page)
+- [An accessibility audit reports low contrast on a calendar's weekday row or its days](#an-accessibility-audit-reports-low-contrast-on-a-calendars-weekday-row-or-its-days)
 
 **Runtime**
 
@@ -166,6 +171,7 @@ words in your error.
 - [A `DataTable` shows its header row on a phone](#a-datatable-shows-its-header-row-on-a-phone)
 - [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)
 
 **PDF reader**
 
@@ -852,10 +858,9 @@ await expect(page.getByRole('combobox', { name: 'Delivery date' })).toHaveAttrib
 ```
 
 Custom CSS that targeted the old `<span class="text-error">` should target
-`[data-slot="label-text"][data-required]::after` instead; the recipe is in
-[Label](components/primitives.md#label). The mark is drawn by the package stylesheet, so a
-snapshot of the DOM no longer contains it, and it stays visible in
-forced-colors mode.
+`[data-slot="label-required-mark"]` instead; the recipe is in
+[Label](components/primitives.md#label). The mark is an `aria-hidden` SVG with
+no text, and it stays visible in forced-colors mode.
 
 ### An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry
 
@@ -934,8 +939,8 @@ is open and leaves it focusable; a control the tab order reaches inside an
 reports it predates the inert background.
 **Fix:** upgrade: the page behind a modal layer of this library is `inert`
 as well — out of the tab order and of the accessibility tree — and the rule
-passes. Live regions (the `Toaster`) stay reachable. Do not exclude
-`[aria-hidden]` or `[data-aria-hidden]` from the audit: it hides real
+passes. Live regions (the `Toaster`, every `Banner`) stay reachable. Do not
+exclude `[aria-hidden]` or `[data-aria-hidden]` from the audit: it hides real
 failures. A layer of yours built on reka directly (not on these
 components) still marks the page `aria-hidden` only; make the rest of the
 page inert with core's `inertOthers`, which keeps live regions and counts
@@ -1164,6 +1169,42 @@ toasts.success({ title: 'Staff member restored', action: { label: 'Send an invit
 `data` takes no `icon` (a preset draws its own) and no `cancel` (the X button
 beside the action stands for it).
 
+### An accessibility audit reports low contrast on a toast's action
+
+**When:** axe (or Lighthouse) reports `color-contrast` on a toast's action
+button (`[data-slot="toast-action"]`), the `{ label }` one: an
+"Undo", a "Send an invitation", or the "Close" a preset shows in its place.
+**Why:** the action is a `tonal` `Button`, whose tones are made for the page,
+and the toast is the inverse of the page (`bg-foreground`: dark in the light
+theme, light in the dark one). Its `primary` label on a 15 % primary tint over
+the toast read 2.5:1 in the light theme and 1.5:1 in the dark one.
+**Fix:** upgrade: the action takes the other theme's tone (the lightened
+primary on the dark toast, `primary` on the light one) on an opaque mix of
+primary toward the toast's surface, 9.4:1 and 5.5:1 at rest, and more hovered,
+focused or pressed. Drop an exclusion of `[data-slot="toast-action"]` from
+your contrast scan. A function action (`(dismiss) => h(Button, …)`) renders
+your own buttons, which keep the page's tones: give them colours measured on
+the toast, or use the `{ label, onClick }` form.
+
+### A `Banner` is not announced while a dialog is open
+
+**When:** a `Banner` (an update notice, a session notice) changes or shows
+while a `Dialog`, `Sheet` or another modal layer is open, and a screen reader
+says nothing.
+**Why:** a modal layer makes the page behind it `inert` and keeps only live
+regions (`[aria-live]`) reachable; a `Banner` was a `role="status"` without
+`aria-live`, so it went inert with the page.
+**Fix:** upgrade: every `Banner`, `error` included, is a polite live region
+(`role="status"` `aria-live="polite"` `aria-atomic="true"`), so the layer
+keeps it reachable. The attributes you pass (`id`, `data-*`, `aria-*`,
+`role`) fall through to its root and win: pass `role="alert"` for an urgent
+banner. Drop a `<div aria-live="polite">` wrapper kept for this. The page is
+made inert when the layer opens: a `Banner` mounted later inside a part of
+the page made inert stays inert until the layer closes, so render it before
+(and change its text), or keep it in a live container that is already there.
+A kept `Banner` stays interactive behind the layer: a screen reader's browse
+mode reaches its action and dismiss button (Tab stays in the layer).
+
 ### The focus leaves a dialog that a toast's action opened
 
 **When:** a toast's action opens a `Dialog` (or an `AlertDialog`, a `Sheet`,
@@ -1280,6 +1321,31 @@ export const AppLink = defineComponent({
 <ListTile title="Notifications" href="/settings/notifications" :link-component="AppLink" />
 ```
 
+### After a link in the phone menu, the focus goes to `<main>`, not to the page's heading
+
+**When:** on a phone, a link followed in the menu sheet of `ActivityLayout` or
+`AppHeader` (or a navigation while it is open) opens a screen that moves the
+focus to its own element as it mounts (an error page's `h1`, a step's title),
+and the focus ends on `<main>` instead.
+**Why:** as the sheet closed after a navigation, it always focused `<main>`,
+over what the new screen had focused.
+**Fix:** update `@nxgt/material-vue`. The sheet now leaves the focus where the screen put it
+inside `<main>`, and focuses `<main>` only when the focus is elsewhere (on the
+body, or still in the closing sheet). Code that gave the focus back
+to the screen's element after the sheet closed can go.
+
+### A Content-Security-Policy reports a `data:` image on every form with a required field
+
+**When:** a page with a required field (`Label` with the asterisk, or a field
+of this library with `required`) reports a CSP violation for a
+`data:image/svg+xml` image under a policy whose `img-src` refuses `data:`
+(`img-src 'self'`), and the red asterisk is missing.
+**Why:** the mark was a CSS mask whose image was a `data:` URI.
+**Fix:** update `@nxgt/material-vue`. The mark is now an `aria-hidden` SVG in the label's
+markup, which loads no image. An override of `--label-required-mark` (or a copy
+of the mark served by your app) can go; restyle the mark with
+`[data-slot="label-required-mark"]` (see [Label](components/primitives.md#label)).
+
 ### The phone menu needs two Escapes to close, or a tooltip shows over it
 
 **When:** on a phone, the menu sheet of `ActivityLayout` or `AppHeader` opens
@@ -2304,6 +2370,25 @@ z.config({ customError: zodLocaleError({ language: () => requestLanguage() }) })
 
 See [helpers](guides/helpers.md#zodlocaleerror-limits).
 
+### An accessibility audit reports low contrast on a calendar's weekday row or its days
+
+**When:** axe (or Lighthouse) reports `color-contrast` on the weekday row
+(`[data-slot="calendar-head-cell"]`, or the head cells of `DateRangeField`'s
+calendar) of a `Calendar`, `DateField`, `DateRangeField` or `EventCalendar`'s
+date picker, in the light theme, on the page or in its popover.
+**Why:** the base stylesheet tints every table header (`th`,
+`bg-primary/15`) and every other row (`bg-primary/5`), and a calendar is a
+table. Before this fix, the weekday row drew `--muted-foreground` on that
+header tint: 4.4:1.
+**Fix:** update. The weekday row is muted toward the foreground: 5.6:1 in
+the light theme, 6.2:1 in the dark one on the popover. The neighbouring
+months' days keep `--muted-foreground`, unfaded: 5.1:1 light and 5.6:1 dark
+at least, on a tinted week too. Drop an exclusion your accessibility test kept
+for the weekday row. If the audit still fails, your stylesheet overrides
+`--muted-foreground`, `--primary` or the table rules, or a `class` of your
+own sets the head cell back to `text-muted-foreground`; check it at 4.5:1 on
+`bg-primary/15` over `--popover`.
+
 ### A calendar's weekday row is in English on a French page
 
 **When:** under `<I18nProvider>` set to French, a `DateField`,
@@ -3106,6 +3191,12 @@ page.getByRole('region', { name: 'Invoices' });
 **Why:** the toolbar is rendered only when it has content (yours, or `show-view-options`): an empty `<fieldset>` is a nameless group to a screen reader.
 **Fix:** look for what the toolbar holds (a filter by its label, the view options by "View"), not for the `fieldset` itself. A component of yours that renders nothing still counts as content: render it conditionally instead.
 
+### axe reports `target-size` on a `DataTable`'s "Select all"
+
+**When:** axe (WCAG 2.5.8) flags the header row's "Select all" checkbox (`thead [data-slot="checkbox-field"]`) when the column after the `select` column is a sortable `DataTableColumnHeader`, mostly on a phone, where the columns are narrowest. The rows' checkboxes pass.
+**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.
+
 ---
 
 ---

package/lib/components/ui/primitives/label/label.css

@@ -1,33 +1,26 @@
-/* The required mark of `Label withAsterisk`. Drawn, not typed: a "*" in the
- * label's text joined its name ("Email *") for `getByLabel(…, { exact })`,
- * `getByLabelText` and screen readers, and generated text (`content: "*"`)
- * joins the accessible name too. An empty `content` painted by a mask adds
- * nothing to the name or the text. The field's own `required` /
- * `aria-required` is what is announced. Restyle it from your own CSS:
- * `background-color` for the colour, `width` / `height` for the size. */
-[data-slot="label-text"][data-required]::after {
-	content: "";
+/* The required mark of `Label withAsterisk`: an `aria-hidden` inline SVG in
+ * the label's markup, not a "*" in its text. A typed "*" joined the label's
+ * name ("Email *") for `getByLabel(…, { exact })`, `getByLabelText` and
+ * screen readers, and so does generated text (`content: "*"`). The field's
+ * own `required` / `aria-required` is what is announced. Drawn by the markup,
+ * it loads no image: a Content-Security-Policy whose `img-src` refuses
+ * `data:` draws it too. Restyle it from your own CSS: `color` for the colour,
+ * `width` / `height` for the size. */
+[data-slot="label-required-mark"] {
 	display: inline-block;
 	flex: none;
 	align-self: flex-start;
 	width: 0.5em;
 	height: 0.5em;
 	margin-block-start: 0.05em;
-	background-color: var(--color-error);
-	--label-required-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1v8M1.5 3l7 4M8.5 3l-7 4' stroke='black' stroke-width='1.75' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
-	mask-image: var(--label-required-mark);
-	mask-size: contain;
-	mask-repeat: no-repeat;
-	mask-position: center;
-	/* A browser's print stylesheet drops backgrounds; this one is the mark. */
-	print-color-adjust: exact;
-	-webkit-print-color-adjust: exact;
+	color: var(--color-error);
+	overflow: visible;
 }
 
-/* Forced colours replace background-color with the system palette's own;
+/* Forced colours keep an SVG's `currentColor` stroke as authored;
  * CanvasText keeps the mark visible on any theme. */
 @media (forced-colors: active) {
-	[data-slot="label-text"][data-required]::after {
-		background-color: CanvasText;
+	[data-slot="label-required-mark"] {
+		color: CanvasText;
 	}
 }