@nxgt/material-vue 0.28.0 → 0.29.1

package/dist/{pdf-outline-sidebar-BXGTDISI.js → pdf-outline-sidebar-Bll123U-.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-Db9OdMfQ.js";
+import { Ef as n } from "./components-kGJbzQYZ.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-BR4G03kN.js → pdf-page-DEi2b6dz.js}

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

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

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { On as t } from "./components-Db9OdMfQ.js";
+import { On as t } from "./components-kGJbzQYZ.js";
 import { t as n } from "./use-material-translation-Do6ztdtV.js";
-import { t as r } from "./Button-D1uzdbOJ.js";
-import { o as i } from "./HoverCardTrigger-DaM5d4hE.js";
-import { n as a } from "./pdf-page-BR4G03kN.js";
-import { t as o } from "./pdf-page-list-bjQm6_kf.js";
-import { t as s } from "./pdf-sidebar-CiM6dwAm.js";
-import { t as c } from "./pdf-toolbar-mWlGTWU1.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 { 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-CiM6dwAm.js → pdf-sidebar-Dv2PY_bB.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-BXGTDISI.js";
-import { t as i } from "./pdf-thumbnail-sidebar-fM3DGJzD.js";
+import { t as r } from "./pdf-outline-sidebar-Bll123U-.js";
+import { t as i } from "./pdf-thumbnail-sidebar-3RBdIUuk.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-fM3DGJzD.js → pdf-thumbnail-sidebar-3RBdIUuk.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-Db9OdMfQ.js";
+import { Ef as n } from "./components-kGJbzQYZ.js";
 import { t as r } from "./use-material-translation-Do6ztdtV.js";
-import { t as i } from "./pdf-page-BR4G03kN.js";
+import { t as i } from "./pdf-page-DEi2b6dz.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-mWlGTWU1.js → pdf-toolbar-Z5YML7a-.js}

@@ -1,10 +1,10 @@
 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 { d as r } from "./Button-D1uzdbOJ.js";
-import { t as i } from "./icon-button-D60G5B_Z.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-DaM5d4hE.js";
+import { o as d } from "./HoverCardTrigger-Ci1iT9-I.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/pdf.js

@@ -1,5 +1,5 @@
 import { n as e, t } from "./use-material-translation-Do6ztdtV.js";
-import { t as n } from "./Button-D1uzdbOJ.js";
+import { t as n } from "./Button-CNbJT5qV.js";
 import { computed as r, createBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, nextTick as c, onMounted as l, onScopeDispose as u, openBlock as d, ref as f, renderSlot as p, shallowRef as m, toDisplayString as ee, toValue as h, unref as g, watch as te, withCtx as ne } from "vue";
 import { contentDisposition as re, pdfBytesResponse as ie, toWebStream as ae } from "@nxgt/material-core/pdf/http";
 import { badge as oe, dataTable as se, defaultPdfTheme as ce, definePdfDocument as _, divider as v, header as y, heading as b, image as x, keyValue as S, keyValueOf as C, link as w, metric as T, page as E, pageBreak as D, pageNumber as O, pdfDocument as k, resolvePdfColor as A, resolvePdfTheme as j, row as M, section as N, spacer as P, stack as F, table as I, text as L, totals as R } from "@nxgt/material-core/pdf/model";

package/dist/{sortable-provider-Dml11nQY.js → sortable-provider-Cb3tm9Cy.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 "./icon-button-D60G5B_Z.js";
+import { t as n } from "./icon-button-DXXjxBgr.js";
 import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, normalizeStyle as f, onUnmounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S, watchEffect as C, withCtx as w, withModifiers as T } from "vue";
 import { GripVertical as E } from "@lucide/vue";
 import { Primitive as D } from "reka-ui";

package/dist/{stx-player-BS7-CXFx.js → stx-player-DVTFb2Oe.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-Db9OdMfQ.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 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/feedback-and-status.md

@@ -572,7 +572,7 @@ async function upload() {
 | --- | --- | --- | --- |
 | `title` / `description` | `string` | preset title for `success`, `error`, `loading` | toast text |
 | `icon` | a VNode (`toast`) · icon name (`toasts.*`) | preset icon | leading icon |
-| `action` | `{ label, onClick? }` or `(dismiss) => VNode` | a translated “Close” for `success`, `info`, `error`; a preset keeps the caller's own | trailing button: `onClick`, then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
+| `action` | `{ label, onClick? }` (`label`: a string or a component) or `(dismiss) => VNode` | a translated “Close” for `success`, `info`, `error`; every preset keeps the caller's own, in either call | trailing button: `onClick` (given the click event, optional when you call it yourself), then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
 | `dismissLabel` | `string` | the translated “Close” when an `action` is given | accessible name of the X icon button beside the action; `''` hides it |
 | `role` | `'status' \| 'alert'` | none (`toasts.error`: `'alert'`) | live-region role. Toasts are already announced politely by the `Toaster`'s region; `alert` interrupts, and may be read twice by some screen readers |
 | `options` | vue-sonner `ExternalToast` | `duration: 5000` for presets, `Infinity` for `loading` and for any toast with your own `action` (a preset's fallback "Close" still times out at 5000) unless a `duration` is passed | passed to Sonner (`id`, `duration`, `position`…) |
@@ -586,7 +586,7 @@ stylesheet comes with this package's (`styles.css`, or the compiled
 stylesheet). `Toast` is the component each toast renders, and `sonnerToast`
 is vue-sonner's own `toast`, for anything the presets do not cover.
 
-**Types:** `ToasterProps` (vue-sonner's), from `@nxgt/material-vue/components`.
+**Types:** `ToastAction`, `ToastProps`, `ToastMethodProps`, `ToastData`, `ToastArgs`, `PresetProps` (the props of `success`, `warning`, `info` and `error`: use it, not `Parameters<typeof toasts.success>[0]`, which is now a union with the `(message, data)` form), and `ToasterProps` (vue-sonner's), from `@nxgt/material-vue/components`.
 
 **On a phone** (under 600px wide, where vue-sonner lays toasts out across the
 screen), a `Toaster` with no `position` shows its toasts at the top
@@ -603,6 +603,27 @@ raise its `top` when a sticky header must stay visible:
 <Toaster position="bottom-center" /> <!-- bottom-center everywhere -->
 ```
 
+**vue-sonner's call works too.** Every preset (`custom`, `success`, `info`,
+`warning`, `error`, `loading`) also takes vue-sonner's own `(message, data)`: the
+message (a string or a component) is the title, `data.description` and `data.action` are shown, and the
+rest of `data` (`id`, `duration`, `onDismiss`…) is passed to vue-sonner as the
+options. `data` is typed `ToastData`, vue-sonner's `ExternalToast` without `icon`
+(a preset draws its own) and `cancel` (the X button stands for it): passing
+either is a type error rather than a silent no-op.
+
+```ts
+toasts.success('Staff member restored', {
+  description: 'They can sign in again.',
+  action: { label: 'Send an invitation', onClick: openInvite },
+});
+// the same as
+toasts.success({
+  title: 'Staff member restored',
+  description: 'They can sign in again.',
+  action: { label: 'Send an invitation', onClick: openInvite },
+});
+```
+
 **An action keeps the toast open.** `toast()` itself does it, so a preset and a
 direct call behave alike: any toast with an `action` is persistent by default
 (`options.duration: Infinity`, WCAG 2.2.1: a timed toast can vanish before a
@@ -620,10 +641,18 @@ elsewhere) is ignored, so a tapped toast still goes after its duration. On a
 touch screen a tap no longer fans out a stack of two or more toasts either: pass
 `expand` to keep the stack open. Sonner does not close a toast on Escape (it
 only collapses the stack); this `Toast` does when focus is inside it, with or
-without an action. The close button is reached with Tab. **Focus after a
-dismiss:** the dismissed toast leaves the page with the focused control in it,
-so focus falls back to `document.body`; move it yourself (`onClick`, or after
-`toasts.dismiss()`) when the flow needs it elsewhere.
+without an action. The close button is reached with Tab.
+
+**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
+same before it closes. So an action that opens a `Dialog` (or moves the focus
+anywhere else) keeps it there: the dialog holds the control it focused once
+the toast has gone, and gives the focus back to that earlier control when it
+closes (WCAG 2.4.3). An action that moves the focus nowhere leaves it on that
+earlier control. A toast closed by its X or by Escape takes its focused
+control with it, so the focus falls back to `document.body`; move it yourself
+(after `toasts.dismiss()`) when the flow needs it elsewhere.
 
 **Announced to screen readers:** `Toaster` renders a polite live region
 (`<section aria-live="polite">`) that is in the page before the first toast,

package/docs/roadmap.md

@@ -95,6 +95,11 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **Toast actions that work everywhere** — `toasts.success(message, { action })`
+  and every other preset take sonner's own call shape and keep their action,
+  and a dialog a toast's action opens keeps the focus, then gives it back to
+  where it was before the toast. 0.29.0.
+
 - **Tabs in two looks** — `underline`, the new default, whose bar slides to
   the active tab, and a neutral `segmented` pill; a list that scrolls
   sideways on a phone instead of widening the page, right-to-left, a visible

package/docs/troubleshooting.md

@@ -54,6 +54,8 @@ words in your error.
 - [A toast covers the form's button on a phone](#a-toast-covers-the-forms-button-on-a-phone)
 - [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)
+- [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)
 
@@ -914,8 +916,8 @@ In the dark theme, a filled `secondary` `Button` gave its near-white text
 `success`, `info` or `warning` one 3.5:1, 2.5:1 and 3.4:1. The dark
 `--secondary` is brighter (`oklch(0.66 ...)`, 6.5:1 as text on
 `--background`), and the filled `secondary`, `success`, `info` and `warning`
-`Button`s and `IconButton`s are tinted in the dark theme
-(`dark:bg-secondary/70`, `dark:bg-success/60`, …) so their text keeps 4.5:1.
+`Button`s and `IconButton`s are filled in the dark theme with an opaque mix
+toward `--background` (about 70 %), so their text keeps 4.5:1 over any backdrop.
 A filled button given a background of your own through `className` loses the
 tint in dark mode: add a matching `dark:` one.
 
@@ -1139,6 +1141,52 @@ counted a pointer down on a toast as outside the dialog.
 inside the `Toaster` as inside, so the action runs and the dialog stays open.
 Sonner's own `Toaster` keeps the old behaviour.
 
+### `toasts.success(message, { action })` shows no action button
+
+**When:** a preset is called the way vue-sonner's own `toast.success` is, with a
+message and a `data` object: `toasts.success('Staff member restored', {
+action: { label: 'Send an invitation', onClick } })`. The toast shows the
+preset's default title ("Success") and its "Close" button, not your message,
+description or action.
+**Why:** the presets took one props object only (`{ title, description,
+action, options }`): a string first argument was read as that object, and
+the second argument was ignored.
+**Fix:** update `@nxgt/material-vue`: every preset (`custom`, `success`, `info`,
+`warning`, `error`, `loading`) now takes `(message, data)` too, the message as
+the title and `data.description` and `data.action` shown, the rest of `data`
+as vue-sonner's options. The props object works as before:
+
+```ts
+toasts.success('Staff member restored', { action: { label: 'Send an invitation', onClick } });
+toasts.success({ title: 'Staff member restored', action: { label: 'Send an invitation', onClick } });
+```
+
+`data` takes no `icon` (a preset draws its own) and no `cancel` (the X button
+beside the action stands for it).
+
+### The focus leaves a dialog that a toast's action opened
+
+**When:** a toast's action opens a `Dialog` (or an `AlertDialog`, a `Sheet`,
+a `Drawer`). Closing the dialog leaves the focus on `document.body`, not on
+the control that had it before the toast, and a keyboard user starts again
+from the top of the page.
+**Why:** the toast's button had the focus when the action ran, so the
+dialog took it as the control to give the focus back to; that button left
+the page with its toast, and the focus fell to `document.body`. A keyboard
+user reaches a toast through the list item around it, and vue-sonner
+restores nothing when the focus leaves the list (its `blur` does not bubble
+from the toast's buttons), so nothing else gave the focus back. With several
+toasts, a toast reached from another one never had the focus from the page:
+the `Toaster` remembers where the focus entered it for that case.
+**Fix:** update `@nxgt/material-vue` and give the toast an `action` (a `{ label,
+onClick }`, or a function that calls the `dismiss` it is given): the action
+gives the focus back to where it was before the toast first, then runs. The
+dialog keeps its control, and gives the focus back to that earlier control
+when it closes. A workaround that blurs the button and opens the dialog on
+the next frame can go. A button you render in a function action and that
+opens a dialog without calling `dismiss` is not covered: call `dismiss()`
+before opening the dialog.
+
 ### A `ConfirmationDialog` reopened at once stays closed
 
 **When:** a `ConfirmationDialog` with `v-model:open` (or `:open` and

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.28.0",
+	"version": "0.29.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -119,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.6.0",
+		"@nxgt/material-core": "^0.7.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",