@nxgt/material-vue 0.27.0 → 0.29.0

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)
 
@@ -61,6 +63,8 @@ words in your error.
 
 - [A `ListTile` link reloads the whole page](#a-listtile-link-reloads-the-whole-page)
 - [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)
 
 **SSR & build**
 
@@ -1137,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
@@ -1242,6 +1292,39 @@ the tooltip's own layer takes the first Escape.
 tooltip, since it shows its label; a collapsed one keeps it, and an explicit
 `tooltip` is always shown. A `SidebarMenuItem` of your own needs no change.
 
+### `Tabs` look different after upgrading
+
+**When:** a `Tabs` with no `variant`, or with `variant="bar"`, renders a row of
+tabs over a border with a bar under the active one, where it rendered
+one muted pill with the active trigger raised;
+one with `variant="line"` renders a rounded pill.
+**Why:** `underline` is now the default look. `bar` and `line` are deprecated
+aliases: `bar` renders as `underline`, `line` as `segmented`.
+**Fix:** write the look you want. `underline` needs no `variant`; for a pill,
+set `segmented`:
+
+```vue
+<Tabs default-value="week" variant="segmented">
+```
+
+A test that queried the old classes should query the state instead:
+`getByRole('tab', { selected: true })`, and `data-variant` on
+`[data-slot="tabs"]` for the look.
+
+### A screen reader announces an icon-only tab as "tab", with no name
+
+**When:** a `TabsTrigger` holds only an icon; an accessibility audit reports a
+tab with no accessible name.
+**Why:** a tab is named by its text, and an icon has none.
+**Fix:** give the trigger `aria-label`, and `title` for a hover hint:
+
+```vue
+<TabsTrigger value="recent" :icon="Clock" aria-label="Recent" title="Recent" />
+```
+
+`EmojiList` and `EmojiPicker` name their group tabs themselves; update
+`@nxgt/material-vue` if yours read "tab" only.
+
 ## SSR & build
 
 ### `ReferenceError: window is not defined`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.27.0",
+	"version": "0.29.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -119,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.5.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",

package/dist/lib/components/ui/widgets/emoji/emoji.groups.d.ts

@@ -1,6 +0,0 @@
-import { EmojiItem } from './types';
-export declare function groupKey(group?: string | null): string;
-export declare function groupEmojis(emojis: EmojiItem[], recent: string[]): {
-    [k: string]: EmojiItem[];
-};
-export declare function searchEmojis(emojis: EmojiItem[], query: string): EmojiItem[] | null;