@nxgt/material-vue 0.28.0 → 0.29.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nxgt/material-vue
 
+## 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
+
+- [#475](https://github.com/softistx/nxgt-material/pull/475) [`2fcfa35`](https://github.com/softistx/nxgt-material/commit/2fcfa35d5bff9d46392247440a82f0bc3638f104) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Toasts: every preset takes sonner's own call, and an action that opens a dialog keeps the focus in it ([#472](https://github.com/softistx/nxgt-material/issues/472), [#473](https://github.com/softistx/nxgt-material/issues/473)).
+  
+  - **`toasts.*(message, data)`.** `toasts.custom`, `success`, `info`, `warning`, `error` and `loading` also take sonner's (vue-sonner's) `(message, data)`: the message is the title, `data.description` and `data.action` are shown, and the rest of `data` (`id`, `duration`, `onDismiss`…) is passed as the options. Before, `toasts.success('Staff member restored', { action })` showed the preset's "Success" title and "Close" button, and dropped the message, the description and the action. `data` is typed `ToastData` (exported with `ToastArgs`): sonner's `ExternalToast` without `icon` (a preset draws its own) and `cancel` (the X button stands for it). The props object (`toasts.success({ title, action })`) works as before.
+  - **An action that opens a dialog keeps the focus there.** A click on a toast's action first gives the focus back to the control that had it before the toast, then runs `onClick`, then closes the toast; a function action's `dismiss` does the same. In `@nxgt/material`, sonner used to focus that control again as soon as the focus left the `Toaster`, which pulled it out of the dialog the action had just opened (WCAG 2.4.3); in both packages, the dialog gave the focus back, once closed, to the toast's button, gone with its toast, so to `document.body`. Now the dialog keeps the control it focused, and returns the focus to the control that had it before the toast. `ToastAction`'s `onClick` now receives the click event, optional so code that calls it directly still compiles (`() => void` handlers still fit). A toast reached by Tab from another toast hands the focus back to the same control. In `@nxgt/material-vue`, the message of `(message, data)` and a `ToastAction`'s `label` may also be a component, as in vue-sonner.
+  - **Migration.** `Parameters<typeof toasts.success>[0]` (and `warning`, `info`, `error`) is now the union of both call forms: use the exported `PresetProps` (or `CustomToastProps` for `custom`) for the props. Search for a blur of `document.activeElement` followed by `requestAnimationFrame` (or a `setTimeout`) around a toast action that opens a dialog, and for `toasts.custom` calls standing in for `toasts.success` only to keep an `action`: both can go. A button rendered by a function action that opens a dialog should call the `dismiss` it is given first.
+
+### Patch Changes
+
+- [#476](https://github.com/softistx/nxgt-material/pull/476) [`464883e`](https://github.com/softistx/nxgt-material/commit/464883e825e4601f17395c9586d0ac01dd392162) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The roadmap names the release that ships the toast action and focus fixes.
+- Updated dependencies [[`2fcfa35`](https://github.com/softistx/nxgt-material/commit/2fcfa35d5bff9d46392247440a82f0bc3638f104), [`464883e`](https://github.com/softistx/nxgt-material/commit/464883e825e4601f17395c9586d0ac01dd392162)]:
+  - @nxgt/material-core@0.7.0
+
 ## 0.28.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-Ci1iT9-I.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";

package/dist/{camera-CxXijySa.js → camera-BFnqY3CN.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-Db9OdMfQ.js";
+import { gr as t, mr as n, pr as r } from "./components-kGJbzQYZ.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);