@nxgt/material 2.8.0 → 2.10.0

package/docs/guides/i18n.md

@@ -327,10 +327,27 @@ and description and against the English ones, ignoring accents: in French,
 
 Some strings are still English in every language, among them the filter's
 validation messages, the camera's error messages, the editor's callout type
-names and default block content, and the names of the emoji picker's category
-tabs. File sizes (`2.0 KB`) and the filter chips' dates are not formatted for
+names and default block content. File sizes (`2.0 KB`) and the filter chips' dates are not formatted for
 the provider's language.
 
+The emoji picker's category tabs are icon-only; their name, read by screen
+readers and shown as a tooltip, comes from `material.emoji.groups.<group>`.
+Both languages ship `all`, `recent`, `general`, `people_body`, `components`,
+`animals_nature`, `food_drink`, `travel_places`, `activities`, `objects`,
+`symbols` and `flags`:
+
+```ts
+// English / French values of the shipped keys
+material.emoji.groups.people_body; // "People & body" / "Personnes et corps"
+material.emoji.groups.food_drink;  // "Food & drink" / "Nourriture et boissons"
+material.emoji.groups.flags;       // "Flags" / "Drapeaux"
+```
+
+A group your `EmojiItem`s name that is not in this list (`hand_signs`) reads
+as its words in English (`Hand signs`). As for every `material.*` key above,
+the components read their own bundle: your own translator sees a key you add,
+the tab does not.
+
 ```tsx
 // Under <I18nProvider defaultLanguage="fr">
 <CarouselNext />            // screen reader: "Diapositive suivante"

package/docs/guides/theming.md

@@ -190,9 +190,23 @@ Storybook's `Guides/Theming/Contrast` measures all of this in both themes:
 the surfaces' text, the error text (`HelperText` and a field's message on
 `--background` and `--card`), the `Alert`s and the `Timeline`, `Button` and
 `IconButton` in every variant and colour, and a `Badge` link in every colour,
-at rest, hovered, focused and pressed, and the tracks; `Data display/ListTile`
-measures the selected tile. Run them against your own tokens after an
-override.
+at rest, hovered, focused and pressed, the tracks and the tabs;
+`Data display/ListTile` measures the selected tile. Run them against your own
+tokens after an override.
+
+**Tabs.** An `underline` tab's active label is `--primary` in the light
+theme (7.3:1 on `--background` and `--card`, 6.7:1 on `--muted`) and
+`--primary` mixed with 60 % white in the dark one (10.0:1, 9.0:1 and 7.4:1);
+its bar and every tab's focus outline are `--primary` in the light theme and
+`--track-fill` in the dark one (at least 6.7:1 and 9.0:1 on those surfaces).
+An inactive label is `--muted-foreground`, and turns to `--foreground` when
+hovered. A `segmented` tab's active label is `--foreground` on the raised
+surface (19.9:1 light, 17.0:1 dark); that surface is only 1.1:1 to 1.2:1 on
+the track, so it has a `--muted-foreground` border (5.0:1 light, 4.7:1 dark
+on the track), and the label also changes colour and weight. Storybook's
+`Guides/Theming/Contrast` story `Tabs` measures each label at rest, hovered
+and focused, the outline, the bar and the border, on the three surfaces, in
+both themes.
 
 `--muted-foreground` is 5.5:1 on `--background` and `--card`, 5.1:1 on the
 "paper" tint (`bg-background-paper`, 5 % primary) and 5.0:1 on `--muted` in

package/docs/roadmap.md

@@ -88,6 +88,18 @@ 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. 2.10.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
+  focus ring, labels that read 4.5:1 in both themes, and an indicator that
+  stops sliding under `prefers-reduced-motion`. `bar` and `line` still work,
+  as deprecated aliases of `underline` and `segmented`. 2.9.0.
+
 - **Accessible by default** — error text in its own `--error-text` colour that
   reads 4.5:1 in both themes, the empty part of sliders and meters in a
   `--track` colour that reads 3:1, buttons, badges and status colours that

package/docs/troubleshooting.md

@@ -32,6 +32,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 with new content blocks clicks](#a-confirmationdialog-reopened-with-new-content-blocks-clicks)
 - [The first Escape after closing a nested dialog does nothing](#the-first-escape-after-closing-a-nested-dialog-does-nothing)
 
@@ -39,6 +41,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**
 
@@ -640,6 +644,51 @@ 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 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`: 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 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`, or moves the focus anywhere else). Once the toast has gone, the
+focus is no longer on the dialog's control (it is on the dialog itself, on
+the page behind it, or on `document.body`), and closing the dialog leaves the
+focus on `document.body` instead of where it was before the toast.
+**Why:** sonner remembers the control focused before the focus entered the
+`Toaster`, and focuses it again as soon as the focus leaves the `Toaster`.
+The dialog taking the focus counted as leaving, so sonner pulled it back out
+of the dialog (WCAG 2.4.3). The dialog, opened while the toast's button had
+the focus, also gave the focus back to that button once closed: it had gone
+with its toast, so the focus fell to `document.body`.
+**Fix:** update `@nxgt/material` 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 with new content blocks clicks
 
 **When:** a `ConfirmationDialog` or a `ConfirmDialog` (or a `Dialog`,
@@ -754,6 +803,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
+boxed tabs, a primary ring around the active one;
+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`:
+
+```tsx
+<Tabs defaultValue="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:
+
+```tsx
+<TabsTrigger value="recent" icon={<Clock />} aria-label="Recent" title="Recent" />
+```
+
+`EmojiList` and `EmojiPicker` name their group tabs themselves; update
+`@nxgt/material` if yours read "tab" only.
+
 ## SSR & build
 
 ### `ReferenceError: window is not defined`

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.8.0",
+	"version": "2.10.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -114,7 +114,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.5.0",
+		"@nxgt/material-core": "^0.7.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.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;