@nxgt/material 2.10.1 → 2.12.0

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` prop still replaces it), `PdfReader`, `CommandEmpty`, the gallery, the
+  kanban board and chat. Ships in `@nxgt/material` 3.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` 3.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 a document renders the same in React, Vue, Node, Bun
+  and the browser. One data API, `definePdfDocument`, everywhere; the `Print*`
+  JSX components are removed in `@nxgt/material` 3.0. 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.
 - **Dark-mode previews** — each component preview also shown in the dark theme,
   so you can check contrast without running it.
 - **Previews that cannot go stale** — a CI check that fails when a story changes
@@ -18,6 +68,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`.
@@ -44,23 +99,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` takes a document and
-  renders it itself, refreshing a moment after its data stops changing. Today
-  `usePdfFile` and a `PdfReader` given its `url` make the preview by hand.
-- **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
 
@@ -73,13 +111,17 @@ Nothing in progress right now; see Next.
   could not upgrade. Browser-only and node-only dependencies are contained in
   this package, behind their own entry and optional peers or behind
   `clientOnly`.
-- **Print components back on the main entry** — `@react-pdf/renderer` reaches a
-  dependency that crashes any SSR server that bundles it, on every request.
-  Print stays on `@nxgt/material/print`, with its dependencies as optional
-  peers.
-- **Right-to-left and complex-script PDFs** — `@react-pdf/renderer` does not
-  shape Arabic or Hebrew text reliably. Render such a document as HTML and print
-  it to PDF with a browser on a server, such as Playwright or Gotenberg.
+- **Print components back on the main entry** — the PDF engine reaches
+  pdfkit, which needs Node-style dependencies a server bundle should not pull
+  in on every request. The PDF engine and `definePdfDocument` stay on
+  `@nxgt/material/print`, not the main entry, with their dependencies as
+  optional peers. The `Print*` JSX components go away in 3.0.
+- **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 a document as HTML and print it to PDF with
+  a browser on a server, such as Playwright or Gotenberg.
+- **Two PDF engines** — pdfkit replaces `@react-pdf/renderer`; they do not
+  coexist. One engine and one document model serve both libraries.
 - **Importing `@nxgt/material/map` without a DOM** — leaflet reads `window` as
   it is evaluated. An SSR app renders the map client-side, behind `clientOnly`.
 - **An app shell that builds its own menu** — `items` stays a prop and labels
@@ -159,8 +201,8 @@ Nothing in progress right now; see Next.
 - **PDFs from a Next.js route handler in one line of config** —
   `withNxgtPrint(nextConfig)` from `@nxgt/material/next` adds what `/print`
   needs to `next.config.ts` — the library in `serverExternalPackages`, and
-  pdfkit's fonts in the `output: 'standalone'` trace wherever your package manager
-  installed them — merged with your own config. 2.4.0.
+  pdfkit's fonts in the `output: 'standalone'` trace wherever your package
+  manager installed them — merged with your own config. 2.4.0.
   ([printing](guides/printing.md#nextjs-serverexternalpackages-and-output-standalone))
 - **One copy of the framework-free code, shared with `@nxgt/material-vue`** —
   the PDF document model and renderer, the print formatters, the PDF file
@@ -178,14 +220,15 @@ Nothing in progress right now; see Next.
   2.2.0. ([forms](guides/forms.md#touched-on-blur))
 - **Accessible names, ids and focus across the catalogue** — every field is
   named by its label and says it is required on the element a screen reader
-  lands on (the input, the picker's `combobox`, the slider thumbs, the
-  group), with the asterisk drawn by CSS, so in no name or label text; groups are named by their question
-  and describe their error instead of carrying `aria-invalid` where ARIA does
-  not allow it; ids are generated rather than taken from a field's `name` or
-  an option's `value`, so two forms on one page no longer collide; icon
-  buttons, crumbs, carousel arrows, codes and the camera have names; and a
-  dialog, sheet or drawer takes focus when it opens and gives it back when it
-  closes. 2.2.0. ([upgrading](getting-started.md#220-ids-names-and-aria-invalid-moved))
+  lands on (the input, the picker's `combobox`, the slider thumbs, the group),
+  with the asterisk drawn by CSS, so in no name or label text; groups are named
+  by their question and describe their error instead of carrying `aria-invalid`
+  where ARIA does not allow it; ids are generated rather than taken from a
+  field's `name` or an option's `value`, so two forms on one page no longer
+  collide; icon buttons, crumbs, carousel arrows, codes and the camera have
+  names; and a dialog, sheet or drawer takes focus when it opens and gives it
+  back when it closes. 2.2.0.
+  ([upgrading](getting-started.md#220-ids-names-and-aria-invalid-moved))
 - **PdfReader, turned pages and a steady zoom** — a page the PDF turns
   (`/Rotate`) shows the right way up, the fit zoom settles once when the
   document opens instead of moving while you read, `onPageChange` also reports
@@ -197,8 +240,8 @@ Nothing in progress right now; see Next.
   documents written as plain data (`pdfDocument` and its builders,
   `definePdfDocument` templates, `dataTable` from column definitions) alongside
   the JSX components, and `@nxgt/material-vue/pdf` (0.22.0) renders the same
-  model, so a template renders the same pages in both libraries (experimental: the model
-  may still change in a minor release). 2.2.0.
+  model, so a template renders the same pages in both libraries (experimental:
+  the model may still change in a minor release). 2.2.0.
   ([printing](guides/printing.md#documents-as-data))
 - **One call to a PDF file** — `downloadPdf` and `openPdf` in the browser (a
   blocked tab falls back to a download), `usePdfFile` for a preview that keeps
@@ -231,10 +274,10 @@ Nothing in progress right now; see Next.
   its zoom menu works from the keyboard and in fullscreen. 2.2.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; `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. 2.2.0.
+  locale and time zone, use each currency's own decimals (`{ fractionDigits: 2
+  }` keeps two) and keep a date-only value on its day; `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. 2.2.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
@@ -269,10 +312,10 @@ Nothing in progress right now; see Next.
   server's guess while hydrating. 2.2.0.
 - **Declaration files that always resolve** — a packed or linked build types
   `react` like the npm one, instead of as `any`. 2.2.0.
-- **Component documentation with previews** — every component has an entry
-  with a picture of how it renders, an example that compiles and the options
-  that matter, under the same twelve categories in the README and `docs/`. A forms guide covers React Hook Form, Zod, composite values and
-  server errors. 2.2.0.
+- **Component documentation with previews** — every component has an entry with
+  a picture of how it renders, an example that compiles and the options that
+  matter, under the same twelve categories in the README and `docs/`. A forms
+  guide covers React Hook Form, Zod, composite values and server errors. 2.2.0.
 - **`@nxgt/material/map`** — the leaflet map, markers, location field and
   `useGeolocation` as an entry of this package, with leaflet as optional peers.
   2.1.0.

package/docs/troubleshooting.md

@@ -24,6 +24,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)
 
 **Feedback**
@@ -33,6 +34,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 with new content blocks clicks](#a-confirmationdialog-reopened-with-new-content-blocks-clicks)
 - [The first Escape after closing a nested dialog does nothing](#the-first-escape-after-closing-a-nested-dialog-does-nothing)
@@ -40,6 +43,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)
@@ -99,6 +103,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**
 
@@ -115,6 +120,7 @@ words in your error.
 - [A `TimeFormField` shows its error on a desktop but not on a phone](#a-timeformfield-shows-its-error-on-a-desktop-but-not-on-a-phone)
 - [`setError(…, { shouldFocus: true })` or a failed submit does not focus the field](#seterror--shouldfocus-true--or-a-failed-submit-does-not-focus-the-field)
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
+- [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
 - [`touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates](#touchedfields-stays-empty-after-leaving-a-field-or-mode-onblur-never-validates)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
 - [An end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`](#an-end-to-end-test-no-longer-finds-aria-expanded-on-a-responsivebutton)
@@ -164,6 +170,8 @@ 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)
+- [A `DataTable`'s empty state is cut off at its right edge](#a-datatables-empty-state-is-cut-off-at-its-right-edge)
 
 **PDF reader**
 
@@ -453,8 +461,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 Radix 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
@@ -667,6 +675,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) => <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; or an `aria-live` you set on it is dropped.
+**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, and it did not forward its props.
+**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, and the props you pass (`id`, `data-*`, `aria-*`, `role`)
+go 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`,
@@ -791,6 +835,33 @@ const RouterLink: AppShellLinkComponent = ({ href, ...props }) => (
 <ListTile title="Notifications" href="/settings/notifications" linkComponent={RouterLink} />
 ```
 
+### 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`. 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). A controlled modal layer (the menu
+sheet is one) releases the page from `inert` in the same commit that closes
+it, so the focus your screen moves as it mounts is not refused. 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`. 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
@@ -1688,6 +1759,31 @@ z.config({ customError: zodLocaleError({ storageKey: 'lang', translate }) });
 z.config({ customError: zodLocaleError({ language: () => requestLanguage() }) });
 ```
 
+### 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
+(`th.rdp-weekday`) of a `Calendar`, `DateField`, `DateRangeField` or
+`EventCalendar`'s date picker, in the light theme, on the page or in its
+popover; or on the days of the neighbouring months (`.rdp-outside`, such as
+31 August on September's grid), the middle days of a range, or the chosen
+day.
+**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), a range's middle days drew it on their `bg-primary/15`,
+and every day's label was drawn at 70% opacity: 2.9:1 for a neighbouring
+month's day (they can be picked, so they need 4.5:1), 2.6:1 for a range's
+middle day and 4.4:1 for the chosen day's near-white label.
+**Fix:** update. The weekday row and a range's middle days are muted toward
+the foreground (5.6:1 light, 6.2:1 dark on the popover), the neighbouring
+months' days keep `--muted-foreground` without the fade (5.1:1 light, 5.6:1
+dark at least) and the other days are drawn at full strength. Drop an
+exclusion your accessibility test kept for `.rdp-weekday` or `.rdp-outside`.
+If the audit still fails, your stylesheet overrides `--muted-foreground`,
+`--primary` or the table rules, or a `classNames` of your own sets the
+weekday or outside colour 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`,
@@ -2057,6 +2153,22 @@ const design = within(topics).getByRole('button', { name: 'Design' });
 expect(design).toHaveAttribute('aria-pressed', 'true');
 ```
 
+### The `ref` of a `SelectChipField` focuses nothing
+
+**When:** `ref.current?.focus()` on a `SelectChipField`, or React Hook Form's
+`setFocus(name)` on a `SelectChipFormField`, leaves focus where it was, or
+lands on the first chip when one is chosen. Before the release that lists
+this fix only.
+**Why:** the `ref` is the `role="group"` element, which a browser cannot
+focus; the chips are the focusable controls.
+**Fix:** upgrade: the `ref` now reaches the chosen chip, else the first, as a
+radio group does (type `Ref<HTMLButtonElement>`). Temporary, until
+material #502: on an older release, focus the chip yourself.
+
+```tsx
+group.current?.querySelector<HTMLElement>('[aria-pressed="true"], button')?.focus();
+```
+
 ### `touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates
 
 **When:** a `*FormField` keeps `formState.touchedFields` (and
@@ -2238,10 +2350,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 end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`
 
@@ -3172,6 +3283,18 @@ page.getByRole('region', { name: 'Invoices' });
 **Why:** the toolbar is rendered only when it has content (yours, or `showViewOptions`): 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.
+
+### A `DataTable`'s empty state is cut off at its right edge
+
+**When:** a custom `empty` as wide as its cell (a paragraph, a `w-full` box) on a phone: its last 4px sit under the edge of the table's scroll box, and look cut off.
+**Why:** the empty state was sized to the box's visible width (`--table-visible-width`) but drawn inside the table container's 4px padding, so it stuck out by that padding.
+**Fix:** upgrade: the empty state now takes the padding off its width and sticks 4px in from the box's edge. Nothing to change in your `empty`.
+
 ---
 
 ---

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;
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.10.1",
+	"version": "2.12.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -114,7 +114,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.7.0",
+		"@nxgt/material-core": "^0.7.1",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",