@nxgt/material-vue 0.29.0 → 0.30.1

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @nxgt/material-vue
 
+## 0.30.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
+
+## 0.30.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.
+  - **The empty state's fit on a phone is now checked.** A `#empty` slot as wide as its cell stays inside the scroll box at 375px (this package's `Table` container has no padding, so it already did); a story play now guards it.
+  - **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 selection actions (the `actions` prop or the `#actions` slot), 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 (`show-view-options`, a filter) renders as before. Stories now guard both. Nothing to change in your code.
+  - **The `actions` prop may return an array.** `actions: () => [h('button', 'Delete')]` rendered an empty toolbar: the array was wrapped as a component. It is now rendered as the toolbar's children, and `[]`, `[null]` or an array of `v-if` comments render no toolbar, as `null` does.
+
+- [#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.
+
+## 0.29.1
+
+### Patch Changes
+
+- [#484](https://github.com/softistx/nxgt-material/pull/484) [`a97ec69`](https://github.com/softistx/nxgt-material/commit/a97ec695491dc0660ef62d88f326f4c36de234b3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A filled `Button` and `IconButton` keep an opaque fill in every state, focus included (softistx/nxgt-material#483). The `default` colour faded to 80 % of the foreground on focus (and 90 % on hover, 70 % on press), and the `secondary`, `success`, `info` and `warning` colours were translucent in the dark theme; the label's contrast then depended on what sat behind the button and could fall under 4.5:1 (WCAG 1.4.3). Those states are now opaque mixes toward the page background, and focus is shown by the ring. Apps can remove an axe exclusion for `[data-slot="button"][data-variant="filled"]:focus`.
+
 ## 0.29.0
 
 ### Minor Changes

package/dist/{Button-D1uzdbOJ.js → Button-CNbJT5qV.js}

@@ -419,22 +419,22 @@ var H = F(() => {
 		{
 			variant: "filled",
 			color: "secondary",
-			class: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--color-secondary)_90%,black)] [&_svg]:data-[slot=icon]:text-secondary-foreground active:bg-[color-mix(in_oklab,var(--color-secondary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-secondary)_85%,black)] dark:bg-secondary/70 dark:hover:bg-secondary/60 dark:active:bg-secondary/50 dark:focus:bg-secondary/60"
+			class: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklab,var(--color-secondary)_90%,black)] [&_svg]:data-[slot=icon]:text-secondary-foreground active:bg-[color-mix(in_oklab,var(--color-secondary)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-secondary)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-secondary)_70%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-secondary)_50%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-secondary)_60%,var(--color-background))]"
 		},
 		{
 			variant: "filled",
 			color: "success",
-			class: "bg-success text-success-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_90%,black)] [&_svg]:data-[slot=icon]:text-success-foreground active:bg-[color-mix(in_oklab,var(--color-success)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-success)_85%,black)] dark:bg-success/60 dark:hover:bg-success/50 dark:active:bg-success/40 dark:focus:bg-success/50"
+			class: "bg-success text-success-foreground hover:bg-[color-mix(in_oklab,var(--color-success)_90%,black)] [&_svg]:data-[slot=icon]:text-success-foreground active:bg-[color-mix(in_oklab,var(--color-success)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-success)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-success)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-success)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-success)_50%,var(--color-background))]"
 		},
 		{
 			variant: "filled",
 			color: "info",
-			class: "bg-info text-info-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_90%,black)] [&_svg]:data-[slot=icon]:text-info-foreground active:bg-[color-mix(in_oklab,var(--color-info)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-info)_85%,black)] dark:bg-info/60 dark:hover:bg-info/50 dark:active:bg-info/40 dark:focus:bg-info/50"
+			class: "bg-info text-info-foreground hover:bg-[color-mix(in_oklab,var(--color-info)_90%,black)] [&_svg]:data-[slot=icon]:text-info-foreground active:bg-[color-mix(in_oklab,var(--color-info)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-info)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-info)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-info)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-info)_50%,var(--color-background))]"
 		},
 		{
 			variant: "filled",
 			color: "warning",
-			class: "bg-warning text-warning-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_90%,black)] [&_svg]:data-[slot=icon]:text-warning-foreground active:bg-[color-mix(in_oklab,var(--color-warning)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:bg-warning/60 dark:hover:bg-warning/50 dark:active:bg-warning/40 dark:focus:bg-warning/50"
+			class: "bg-warning text-warning-foreground hover:bg-[color-mix(in_oklab,var(--color-warning)_90%,black)] [&_svg]:data-[slot=icon]:text-warning-foreground active:bg-[color-mix(in_oklab,var(--color-warning)_80%,black)] focus:bg-[color-mix(in_oklab,var(--color-warning)_85%,black)] dark:bg-[color-mix(in_oklab,var(--color-warning)_60%,var(--color-background))] dark:hover:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))] dark:active:bg-[color-mix(in_oklab,var(--color-warning)_40%,var(--color-background))] dark:focus:bg-[color-mix(in_oklab,var(--color-warning)_50%,var(--color-background))]"
 		},
 		{
 			variant: "filled",
@@ -444,7 +444,7 @@ var H = F(() => {
 		{
 			variant: "filled",
 			color: "default",
-			class: "bg-foreground text-background hover:bg-foreground/90 [&_svg]:data-[slot=icon]:text-foreground active:bg-foreground/70 focus:bg-foreground/80"
+			class: "bg-foreground text-background hover:bg-[color-mix(in_oklab,var(--color-foreground)_90%,var(--color-background))] [&_svg]:data-[slot=icon]:text-foreground active:bg-[color-mix(in_oklab,var(--color-foreground)_70%,var(--color-background))] focus:bg-[color-mix(in_oklab,var(--color-foreground)_80%,var(--color-background))]"
 		},
 		{
 			variant: "tonal",

package/dist/{HoverCardTrigger-DaM5d4hE.js → HoverCardTrigger-BTAHE6wK.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
 import { t } from "./use-material-translation-Do6ztdtV.js";
-import { t as n } from "./Button-D1uzdbOJ.js";
+import { t as n } from "./Button-CNbJT5qV.js";
 import { t as r } from "./use-inert-others-CtGqZKR8.js";
 import { t as i } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, guardReactiveProps as m, isRef as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as ee, onUpdated as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useTemplateRef as E, vModelText as D, withCtx as O, withDirectives as k } from "vue";
@@ -55,7 +55,16 @@ var J = /* @__PURE__ */ f({
 	setup(t) {
 		let n = t, r = V(n, "class", "withAsterisk");
 		return (i, a) => (b(), o(C(I), g({ "data-slot": "label" }, C(r), { class: C(e)("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", n.class) }), {
-			default: O(() => [t.withAsterisk ? (b(), c("span", ue, [x(i.$slots, "default")])) : x(i.$slots, "default", {}, void 0, void 0, 1)]),
+			default: O(() => [t.withAsterisk ? (b(), c("span", ue, [x(i.$slots, "default"), a[0] ||= l("svg", {
+				"data-slot": "label-required-mark",
+				"aria-hidden": "true",
+				focusable: "false",
+				viewBox: "0 0 10 10",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.75",
+				"stroke-linecap": "round"
+			}, [l("path", { d: "M5 1v8M1.5 3l7 4M8.5 3l-7 4" })], -1)])) : x(i.$slots, "default", {}, void 0, void 0, 1)]),
 			_: 3
 		}, 16, ["class"]));
 	}

package/dist/{camera-DZ5nYW-v.js → camera-l87FB3uW.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { gr as t, mr as n, pr as r } from "./components-Cteo76NG.js";
+import { gr as t, mr as n, pr as r } from "./components-DSl6EpOS.js";
 import { t as i } from "./use-material-translation-Do6ztdtV.js";
-import { t as a } from "./Button-D1uzdbOJ.js";
-import { t as o } from "./icon-button-D60G5B_Z.js";
+import { t as a } from "./Button-CNbJT5qV.js";
+import { t as o } from "./icon-button-DXXjxBgr.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts

package/dist/components/theme-tokens.css

@@ -70,8 +70,8 @@
 	--primary: oklch(46% 0.1135 276.35);
 	--primary-foreground: oklch(0.984 0.003 247.858);
 	/* Brighter than the light one: it is read as text on the dark surfaces (6.5:1
-	   on --background, 5.8:1 on --card); a filled secondary surface tints it
-	   (dark:bg-secondary/70) to keep 5.2:1 under its near-white text. */
+	   on --background, 5.8:1 on --card); a filled secondary surface mixes it toward --background
+	   (the opaque 70 % mix) to keep 5.2:1 under its near-white text. */
 	--secondary: oklch(0.66 0.1135 245.65);
 	--secondary-foreground: oklch(0.984 0.003 247.858);
 	--muted: oklch(0.279 0.041 260.031);

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