@nxgt/material 2.10.1 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @nxgt/material
 
+## 2.12.0
+
+### Minor Changes
+
+- [#507](https://github.com/softistx/nxgt-material/pull/507) [`d4383ff`](https://github.com/softistx/nxgt-material/commit/d4383ff3c0915deafe1bd664c4c6d2eb7b247455) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `SelectChipField` can be focused (softistx/nxgt-material#502). Its `ref` was the `role="group"` element, which a browser cannot focus, so `ref.current.focus()` and React Hook Form's `setFocus(name)` did nothing, or landed on the first chip even when one was chosen. In `@nxgt/material`, the `ref` now reaches the chosen chip, else the first, as a radio group puts focus on its checked radio (its type is `Ref<HTMLButtonElement>`, no longer the group's `HTMLDivElement`); `SelectChipFormField` hands React Hook Form's `field.ref` to that chip, so `shouldFocusError` and `setFocus` focus it. In `@nxgt/material-vue`, `SelectChipField` and `SelectChipFormField` expose `focus()` on a template ref. Apps can remove a lookup of the first chip made to focus the field (`Temporary, until material [#502](https://github.com/softistx/nxgt-material/issues/502)`). Fixes [#502](https://github.com/softistx/nxgt-material/issues/502).
+  
+  **Migration (`@nxgt/material`).** The `ref` type changed. An app that passes React Hook Form's `field.ref`, or that does not type the ref, has nothing to change. An app that typed its own ref for the group, `useRef<HTMLDivElement>(null)`, gets a TypeScript error: change it to `useRef<HTMLButtonElement>(null)`. The ref now holds the chosen chip (else the first one), not the group.
+
+## 2.11.1
+
+### Patch Changes
+
+- [#504](https://github.com/softistx/nxgt-material/pull/504) [`c6f76a1`](https://github.com/softistx/nxgt-material/commit/c6f76a179087bd6c8b9a3698040dd001f08d8bda) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The roadmaps describe the coming redesign.
+- Updated dependencies [[`c6f76a1`](https://github.com/softistx/nxgt-material/commit/c6f76a179087bd6c8b9a3698040dd001f08d8bda)]:
+  - @nxgt/material-core@0.7.1
+
+## 2.11.0
+
+### Minor Changes
+
+- [#494](https://github.com/softistx/nxgt-material/pull/494) [`0431e63`](https://github.com/softistx/nxgt-material/commit/0431e636780da1711ea294d3a4c05a918ceb974f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A toast's `{ label }` action reads at 4.5:1 on the toast in both themes (Fixes [#489](https://github.com/softistx/nxgt-material/issues/489)). The action was a `tonal` `Button` in the page's tones on a 15 % primary tint, over a toast that is the inverse of the page: 2.5:1 in the light theme, 1.5:1 in the dark one. It now takes the other theme's primary tone on an opaque mix of primary toward the toast (9.4:1 light, 5.5:1 dark at rest, more hovered, focused or pressed). Apps can drop the "Temporary, until material [#489](https://github.com/softistx/nxgt-material/issues/489)" exclusion of `[data-slot="toast-action"]` from their `color-contrast` scans. A function action's own buttons are unchanged: give them colours measured on the toast.
+  
+  `Banner` is a live region (Fixes [#491](https://github.com/softistx/nxgt-material/issues/491)): every tone, `error` included, is `role="status"` `aria-live="polite"` `aria-atomic="true"`. A modal layer that makes the page `inert` now keeps a mounted `Banner` reachable, so a change of its text is announced. React: `Banner` forwards the rest of its props (`id`, `data-*`, `aria-*`, `role`, handlers) to its root `<div>`, where they win over the defaults (`BannerProps` extends the `div`'s props but `title` and `children`), so an urgent banner can pass `role="alert"` (with `aria-live="assertive"`). Vue: its attributes already fell through to the root and win over the defaults, so `role="alert"` works there too. Apps can drop the "Temporary, until material [#491](https://github.com/softistx/nxgt-material/issues/491)" `<div aria-live="polite">` wrapped around a `Banner`, unless that `Banner` mounts while a modal layer is open (keep a live container that is in the page before the layer opens for that case). Nothing changes for tests: every `Banner` is still found with `getByRole('status')`. At the next major, an error `Banner` becomes `role="alert"` (see the roadmap).
+
+### Patch Changes
+
+- [#493](https://github.com/softistx/nxgt-material/pull/493) [`a4f7962`](https://github.com/softistx/nxgt-material/commit/a4f79626002c5b2719175b0f2e7f25fec38d398c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A calendar's weekday row and its days reach 4.5:1 (WCAG 1.4.3) on the page and in a popover, in both themes. Fixes [#487](https://github.com/softistx/nxgt-material/issues/487), fixes [#488](https://github.com/softistx/nxgt-material/issues/488).
+  
+  The base stylesheet tints every table header (`bg-primary/15`) and every other row (`bg-primary/5`), and the weekday row drew `--muted-foreground` on that header tint: 4.4:1 in the light theme, in `Calendar`, `DateField`, `DateRangeField` and `EventCalendar`'s date picker. It is now muted toward the foreground (`color-mix` of `--muted-foreground` and `--foreground`): 5.6:1 light, 6.2:1 dark on `--popover`, 7.0:1 dark on `--background`.
+  
+  `@nxgt/material` only: every day's label was drawn at 70 % opacity, so the days of the neighbouring months (`.rdp-outside`, which can be picked) fell to 2.9:1 light and 3.4:1 dark, a range's middle days to 2.6:1 and the chosen day's label to 4.4:1. The labels are no longer faded: the neighbouring months' days keep `--muted-foreground` (5.1:1 light, 5.6:1 dark at least), a range's middle days use the weekday row's colour (5.6:1), and the other days are drawn at full strength, as in `@nxgt/material-vue`. A test or screenshot that relied on the faded labels will see them darker.
+  
+  Apps can drop the workarounds marked `Temporary, until material [#487](https://github.com/softistx/nxgt-material/issues/487)` and `Temporary, until material [#488](https://github.com/softistx/nxgt-material/issues/488)`: an accessibility scan that skips `color-contrast` on `.rdp-weekday` (React) or `[data-slot="calendar-head-cell"]` (Vue), and on `.rdp-outside`.
+
+- [#495](https://github.com/softistx/nxgt-material/pull/495) [`321ef19`](https://github.com/softistx/nxgt-material/commit/321ef1967e784a798cabbccca9ddf368f1d210bf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` spacing fixes. Fixes [#486](https://github.com/softistx/nxgt-material/issues/486).
+  
+  - **"Select all" passes axe's `target-size` (WCAG 2.5.8).** The header row's checkbox failed when the next column was a sortable `DataTableColumnHeader`, whose button reaches 12px back into its cell (`-ml-3`): axe measures the 16px box itself, not its 24px `::before`, and the 24px circle around it met the button. The `select` column's checkboxes (header and rows) now keep a 12px margin after them (`me-3`; `ml-2` became `ms-2`), which widens that column by 12px. Apps can drop the workaround marked `Temporary, until material [#486](https://github.com/softistx/nxgt-material/issues/486)`: the axe `exclude` of `thead [data-slot="checkbox-field"]`. A `select` column of your own needs `me-3` on its checkboxes.
+  - **A wide empty state no longer sticks out of the table on a phone.** The empty state was sized to the scroll box's visible width (`--table-visible-width`) but drawn inside the `Table` container's 4px padding, so a custom `empty` as wide as its cell overflowed the box by 4px at 375px. It now takes the padding off its width and sticks 4px in. Nothing to change in your `empty`.
+  - **No band on tables without selection actions.** The toolbar's 68px band (`[data-slot="header-placeholder"]`, then the toolbar's `min-h-17`) is reserved only when the table has the `select` column and `actions`, so the first selection still does not move the rows. A table without the `select` column, or without `actions`, keeps no band above it, and a toolbar with real content (`showViewOptions`, a filter) renders as before. Stories now guard both. Nothing to change in your code.
+
+- [#496](https://github.com/softistx/nxgt-material/pull/496) [`5c97ddd`](https://github.com/softistx/nxgt-material/commit/5c97ddd282eeda721b34f32d9c8ee87e83de067c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fixes [#490](https://github.com/softistx/nxgt-material/issues/490), fixes [#492](https://github.com/softistx/nxgt-material/issues/492).
+  
+  A required `Label`'s mark is an `aria-hidden` inline SVG in the label's markup, no longer a CSS mask whose image was a `data:` URI ([#490](https://github.com/softistx/nxgt-material/issues/490)): a Content-Security-Policy whose `img-src` refuses `data:` (`img-src 'self'`) reported a violation on every form with a required field, and the mark did not render. It looks the same, the label's text and accessible name stay "Email" (the field's own `required` / `aria-required` says it is required), and it stays visible in forced-colors mode and in print. The `--label-required-mark` property and the `[data-slot="label-text"][data-required]::after` rule are gone; an app that still sets the property breaks nothing, the mark keeps its default look.
+  
+  Migration, for an app that restyled the mark or worked around [#490](https://github.com/softistx/nxgt-material/issues/490) ("Temporary, until material [#490](https://github.com/softistx/nxgt-material/issues/490)"):
+  
+  1. Search the app's CSS, inline styles and theme files for `--label-required-mark` (and for `[data-slot="label-text"][data-required]::after`).
+  2. Replace each override with CSS on `[data-slot="label-required-mark"]`, the SVG itself: `color` for its colour, `width` and `height` for its size. For example `[data-slot="label-required-mark"] { color: var(--color-error); width: 0.5em; height: 0.5em; }` (the defaults).
+  3. Delete any copy of the mark image the app serves (the SVG file or route that `--label-required-mark` pointed to), and its `img-src` exception if one was added for it.
+  
+  After a link followed in the phone menu's sheet (`AppHeader` / `ActivityLayout`), or a navigation while it is open, the focus stays where the new screen put it inside `<main>` (an error page's `h1`, a step's title) instead of moving to `<main>` ([#492](https://github.com/softistx/nxgt-material/issues/492)). Apps can drop the "Temporary, until material [#492](https://github.com/softistx/nxgt-material/issues/492)" workaround that gives the focus back to the page's element after the sheet closes.
+
 ## 2.10.1
 
 ### Patch Changes

package/dist/{blockDiagram-BEXU5L5S-CJLOORWK.js → blockDiagram-BEXU5L5S-CnFXw-7E.js}

@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-CwcuZpJa.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-vmLFt9Cr.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-ClO5Q7A1.js → chunk-3FUC2YCW-3vMiTgTl.js}

@@ -5,7 +5,7 @@ import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-CwcuZpJa.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-vmLFt9Cr.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-DsMPzivr.js → chunk-7M6MHVWA-NPaJJ6Gy.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-CFItyjGy.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-DCFqYc_z.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-CFItyjGy.js → chunk-GNY47TPC-DCFqYc_z.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-CwcuZpJa.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-vmLFt9Cr.js";
 import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-D2kPrlDF.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DL4pxCSP.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-C70bzAEw.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-LmEtEC93.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-C6I2boWI.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-D10pSc8m.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-Bll4gy0a.js → chunk-NETBCI7D-BB4rjLSQ.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-CwcuZpJa.js";
+import { o as t } from "./chunk-Z7XXMR3K-vmLFt9Cr.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-CwcuZpJa.js → chunk-Z7XXMR3K-vmLFt9Cr.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-N_PpCQjB.js";
+import { st as e } from "./components-BYxsGbyO.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{classDiagram-v2-NBCMYWYE-BAvo2puZ.js → classDiagram-v2-NBCMYWYE-eUVWeh_6.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-CwcuZpJa.js";
+import "./chunk-Z7XXMR3K-vmLFt9Cr.js";
 import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-CFItyjGy.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-DCFqYc_z.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {

package/dist/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;
 	}
 }