@nxgt/material-vue 0.27.0 → 0.29.0

package/dist/{pdf-outline-sidebar-ChjAXoUX.js → pdf-outline-sidebar-Bln9F9gF.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Ef as n } from "./components-BZ1XAK37.js";
-import { t as r } from "./use-material-translation-BHtgyMz3.js";
+import { Ef as n } from "./components-Cteo76NG.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
 var y = {

package/dist/{pdf-page-D4OTPcpF.js → pdf-page-BVtXjnHS.js}

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

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Ef as t } from "./components-BZ1XAK37.js";
-import { t as n } from "./pdf-page-D4OTPcpF.js";
+import { Ef as t } from "./components-Cteo76NG.js";
+import { t as n } from "./pdf-page-BVtXjnHS.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-B1hw81cG.js → pdf-reader-CPms5uyj.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { On as t } from "./components-BZ1XAK37.js";
-import { t as n } from "./use-material-translation-BHtgyMz3.js";
-import { t as r } from "./Button-DEUkxkrJ.js";
-import { o as i } from "./HoverCardTrigger-TDll55LP.js";
-import { n as a } from "./pdf-page-D4OTPcpF.js";
-import { t as o } from "./pdf-page-list-CFgKYLur.js";
-import { t as s } from "./pdf-sidebar-Do5HzrDq.js";
-import { t as c } from "./pdf-toolbar-BBio9baU.js";
+import { On as t } from "./components-Cteo76NG.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-BVtXjnHS.js";
+import { t as o } from "./pdf-page-list-D3eng5h4.js";
+import { t as s } from "./pdf-sidebar-lzBEntPH.js";
+import { t as c } from "./pdf-toolbar-mWlGTWU1.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-Do5HzrDq.js → pdf-sidebar-lzBEntPH.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-BHtgyMz3.js";
-import { t as r } from "./pdf-outline-sidebar-ChjAXoUX.js";
-import { t as i } from "./pdf-thumbnail-sidebar-CMge0C9-.js";
+import { t as n } from "./use-material-translation-Do6ztdtV.js";
+import { t as r } from "./pdf-outline-sidebar-Bln9F9gF.js";
+import { t as i } from "./pdf-thumbnail-sidebar-DB3PmiGW.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-CMge0C9-.js → pdf-thumbnail-sidebar-DB3PmiGW.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-BZ1XAK37.js";
-import { t as r } from "./use-material-translation-BHtgyMz3.js";
-import { t as i } from "./pdf-page-D4OTPcpF.js";
+import { Ef as n } from "./components-Cteo76NG.js";
+import { t as r } from "./use-material-translation-Do6ztdtV.js";
+import { t as i } from "./pdf-page-BVtXjnHS.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-BBio9baU.js → pdf-toolbar-mWlGTWU1.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-BHtgyMz3.js";
-import { d as r } from "./Button-DEUkxkrJ.js";
-import { t as i } from "./icon-button-jHB4MhQ5.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 { 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-TDll55LP.js";
+import { o as d } from "./HoverCardTrigger-DaM5d4hE.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-BHtgyMz3.js";
-import { t as n } from "./Button-DEUkxkrJ.js";
+import { n as e, t } from "./use-material-translation-Do6ztdtV.js";
+import { t as n } from "./Button-D1uzdbOJ.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-DMVbbmUU.js → sortable-provider-Dml11nQY.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-BHtgyMz3.js";
-import { t as n } from "./icon-button-jHB4MhQ5.js";
+import { t } from "./use-material-translation-Do6ztdtV.js";
+import { t as n } from "./icon-button-D60G5B_Z.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/{stored-language-AJpwOMsA.js → stored-language-UnInBB6T.js}

@@ -55,7 +55,21 @@ var e = {
 			picker: "Emoji",
 			pick: "Choose an emoji",
 			search: "Search emoji",
-			empty: "No emoji match"
+			empty: "No emoji match",
+			groups: {
+				all: "All",
+				recent: "Recent",
+				general: "General",
+				people_body: "People & body",
+				components: "Components",
+				animals_nature: "Animals & nature",
+				food_drink: "Food & drink",
+				travel_places: "Travel & places",
+				activities: "Activities",
+				objects: "Objects",
+				symbols: "Symbols",
+				flags: "Flags"
+			}
 		},
 		mentions: { empty: "No matches" },
 		cards: {
@@ -1240,7 +1254,21 @@ var e = {
 			picker: "Emoji",
 			pick: "Choisir un emoji",
 			search: "Chercher un emoji",
-			empty: "Aucun emoji"
+			empty: "Aucun emoji",
+			groups: {
+				all: "Tous",
+				recent: "Récents",
+				general: "Général",
+				people_body: "Personnes et corps",
+				components: "Composants",
+				animals_nature: "Animaux et nature",
+				food_drink: "Nourriture et boissons",
+				travel_places: "Voyages et lieux",
+				activities: "Activités",
+				objects: "Objets",
+				symbols: "Symboles",
+				flags: "Drapeaux"
+			}
 		},
 		mentions: { empty: "Aucun résultat" },
 		cards: {

package/dist/{stx-player-gtyStl7e.js → stx-player-BpQHnHaa.js}

@@ -1,6 +1,6 @@
 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-BZ1XAK37.js";
-import { t as l } from "./use-material-translation-BHtgyMz3.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-Cteo76NG.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
 var S = ["data-layout", "aria-label"], C = {

package/dist/{translator-D2_swsMz.js → translator-J3_vaV_A.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-AJpwOMsA.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-UnInBB6T.js";
 import { t as i } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function a(e, t) {

package/dist/{use-heading-spy-BbEbAfPK.js → use-heading-spy-_dk8kGwL.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-DBusa725.js";
+import { a as e } from "./i18n-provider-BPK68eqM.js";
 import { c as t, d as n, f as r, l as i, n as a, u as o } from "./number.utils-Cy1z6qI7.js";
 import { computed as s, getCurrentInstance as c, onMounted as l, ref as u, toValue as d } from "vue";
 import { useIntersectionObserver as f, useMediaQuery as p, useSSRWidth as m, useStorage as h } from "@vueuse/core";

package/dist/{use-material-translation-BHtgyMz3.js → use-material-translation-Do6ztdtV.js}

@@ -1,6 +1,6 @@
-import "./stored-language-AJpwOMsA.js";
-import { a as e } from "./i18n-provider-DBusa725.js";
-import { i as t, r as n } from "./translator-D2_swsMz.js";
+import "./stored-language-UnInBB6T.js";
+import { a as e } from "./i18n-provider-BPK68eqM.js";
+import { i as t, r as n } from "./translator-J3_vaV_A.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/docs/components/data-display.md

@@ -631,7 +631,7 @@ function openEvent() {
 
 ![CodeBlock](../previews/data-display-codeblock.webp)
 
-Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`).
+Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined).
 
 <img src="../previews/data-display-codegroup.webp" height="96" alt="CodeGroup">
 <img src="../previews/data-display-jsonviewer.webp" height="96" alt="JsonViewer">

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/components/primitives.md

@@ -584,12 +584,12 @@ use `DataTable` on the [Data table, filter & lists](data-table-filter-and-lists.
 
 ![Tabs](../previews/primitives-tabs.webp)
 
-Tabs whose triggers can take an icon. `variant="line"` is the quieter pill style.
+Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill.
 
 ```vue
 <script setup lang="ts">
+import { Calendar, User } from '@lucide/vue';
 import {
-  Icon,
   Tabs,
   TabsContent,
   TabsList,
@@ -600,8 +600,11 @@ import {
 <template>
   <Tabs default-value="account" class="w-md">
     <TabsList>
-      <TabsTrigger value="account"><Icon name="user" />Account</TabsTrigger>
-      <TabsTrigger value="calendar"><Icon name="calendar" />Calendar</TabsTrigger>
+      <TabsTrigger value="account" :icon="User">Account</TabsTrigger>
+      <TabsTrigger value="calendar">
+        <template #icon><Calendar /></template>
+        Calendar
+      </TabsTrigger>
     </TabsList>
     <TabsContent value="account">Your profile.</TabsContent>
     <TabsContent value="calendar">Your events.</TabsContent>
@@ -609,36 +612,96 @@ import {
 </template>
 ```
 
-Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. An icon goes in the
-trigger's slot, before the label; there is no `icon` prop in Vue. By default
-(`variant="bar"`) the list is one muted pill with the active trigger raised.
-`variant="line"` is React's quieter style: a full-width, scrolling strip of
-light tabs, the active one on the background — `TabsList` and `TabsTrigger`
-read it from `Tabs`.
+Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. `TabsList` and
+`TabsTrigger` read the look from `Tabs`. A trigger's icon goes before its
+label, as `@nxgt/material`'s `icon`: pass a component to the `icon` prop, or
+fill the `#icon` slot. An icon written in the default slot still renders
+beside the label.
+
+**`underline`** (the default) lays the tabs over a border; the active one
+takes the primary colour, and a bar under it slides to the tab clicked or
+reached with the arrow keys. The list scrolls sideways when the tabs do not
+fit (its scrollbar hidden), which suits a phone or a narrow popover.
+
+**`segmented`** is a neutral pill track: the active tab sits on a raised
+surface that slides between tabs, and its label turns to the foreground
+colour and semibold — the state never rests on the surface alone. It suits a
+few short choices, such as a view switch.
 
 ```vue
 <template>
-  <Tabs default-value="ts" variant="line">
+  <Tabs default-value="week" variant="segmented">
     <TabsList>
-      <TabsTrigger value="ts">TypeScript</TabsTrigger>
-      <TabsTrigger value="bash">Bash</TabsTrigger>
+      <TabsTrigger value="day">Day</TabsTrigger>
+      <TabsTrigger value="week">Week</TabsTrigger>
+      <TabsTrigger value="month">Month</TabsTrigger>
     </TabsList>
-    <TabsContent value="ts">const n = 1;</TabsContent>
-    <TabsContent value="bash">bun install</TabsContent>
+    <TabsContent value="day">Today.</TabsContent>
+    <TabsContent value="week">This week.</TabsContent>
+    <TabsContent value="month">This month.</TabsContent>
   </Tabs>
 </template>
 ```
 
+`orientation="vertical"` lays the tabs in a column, the indicator on their
+left side; the arrow keys become Up and Down.
+
+```vue
+<template>
+  <Tabs default-value="profile" orientation="vertical">
+    <TabsList>
+      <TabsTrigger value="profile">Profile</TabsTrigger>
+      <TabsTrigger value="security">Security</TabsTrigger>
+    </TabsList>
+    <TabsContent value="profile">Your profile.</TabsContent>
+    <TabsContent value="security">Your sessions.</TabsContent>
+  </Tabs>
+</template>
+```
+
+The sliding indicator is reka's `TabsIndicator`, which renders once mounted:
+server HTML, and a page without JavaScript, show a static indicator under (or
+behind) the active tab instead, and hydrating swaps one for the other without
+a mismatch. The list then carries `data-indicator="ready"`. The focus ring is
+an outline in the primary colour inside the tab, so a scrolling list never
+clips it.
+
+With `TabsList asChild`, only the static indicator is drawn.
+
+`dir="rtl"` on `Tabs` (or reka's `ConfigProvider`) runs the tabs from the
+right: the indicator follows them, and the Left arrow key moves to the next
+tab. Under `prefers-reduced-motion: reduce` the indicator jumps to the active
+tab instead of sliding.
+
+**A tab with only an icon needs a name.** A screen reader announces a
+`TabsTrigger` by its text; with an icon and no label it is only "tab". Give it
+`aria-label`, and `title` for sighted users who hover it:
+
+```vue
+<TabsTrigger value="recent" :icon="Clock" aria-label="Recent" title="Recent" />
+```
+
+The emoji picker's group tabs are named this way, from
+`material.emoji.groups.*`.
+
+**The default look changed.** A `Tabs` with no `variant` used to render the
+`bar` look (one muted pill with the active trigger raised); it now renders
+`underline`. `variant="bar"` and `variant="line"` are deprecated aliases:
+`bar` renders as `underline`, `line` as `segmented`. Both still type-check and
+render; write `underline` or `segmented` instead.
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `variant` (`Tabs`) | `'bar' \| 'line'` | `'bar'` | the look of the list and its triggers |
+| `variant` (`Tabs`) | `'underline' \| 'segmented' \| 'bar' \| 'line'` | `'underline'` | the look; `bar` and `line` are deprecated aliases of `underline` and `segmented` |
 | `default-value` / `v-model` (`Tabs`) | `string \| number` | — | the selected tab, uncontrolled / controlled |
-| `orientation` (`Tabs`) | `'horizontal' \| 'vertical'` | `'horizontal'` | arrow-key direction |
+| `orientation` (`Tabs`) | `'horizontal' \| 'vertical'` | `'horizontal'` | a row or a column, and the arrow keys' direction |
+| `dir` (`Tabs`) | `'ltr' \| 'rtl'` | `'ltr'` | the reading direction: which way the tabs run and the arrow keys move |
 | `activation-mode` (`Tabs`) | `'automatic' \| 'manual'` | `'automatic'` | select on focus, or only on Enter / click |
 | `value` (`TabsTrigger`, `TabsContent`) | `string \| number` | — (required) | pairs a trigger with its panel |
+| `icon` (`TabsTrigger`) | `Component` | — | shown before the label; or the `#icon` slot |
 
 **Emits:** `update:modelValue` on `Tabs` — `string | number`.
-**Storybook:** `Primitives/Tabs` (story `Line`) · **React:** `Tabs` (same parts)
+**Storybook:** `Primitives/Tabs` (stories `Underline`, `Segmented`, `WithIcons`, `Scrolling`, `RightToLeft`, `Vertical`, `DeprecatedAliases`, `Hydrated`) · **React:** `Tabs` (same parts, the same variants)
 
 ---
 

package/docs/components/rich-widgets.md

@@ -272,6 +272,16 @@ const emojis: EmojiItem[] = [
 Parts: `EmojiPicker` (a button opening a popover), `EmojiList` (the searchable
 grid on its own, same `emojis` / `@select`), `expandEmojiShortcodes`.
 
+The category tabs are icon-only. Each is named from
+`material.emoji.groups.<group>` (for example `people_body`, `flags`): that name
+is its `aria-label` and `title`, in the provider's language (see
+[i18n](../guides/i18n.md)). An `EmojiItem` with no `group` falls under
+`general`; a `group` is lowercased, with ` & ` and spaces turned into `_`
+("Food & Drink" becomes `food_drink`). A group the bundles do not name gets
+its words, capitalised, as an English name (`hand_signs` becomes "Hand
+signs"), and an icon of its own is not provided: it shows the generic grid
+icon.
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `emojis` | `EmojiItem[]` | — (required) | the set offered; `group` drives the category tabs, `shortcodes` the search |

package/docs/guides/i18n.md

@@ -405,10 +405,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.
+
 That override is visible only through **your** translator. The components
 translate through the package's own bundle, so defining
 `material.command.title` in your resources changes what

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

@@ -95,6 +95,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. 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
+  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`. 0.28.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
@@ -127,7 +139,8 @@ Nothing in progress right now; see Next.
   form, date fields that disable chosen days, `SliderField` ticks and
   leading/trailing content, a presence status on `Avatar`, a logo slot on the
   QR code, slots on `AccordionCard`, an option slot on `SelectField`, Monaco's
-  own options on `CodeEditor` and a line variant for `Tabs`. 0.25.0.
+  own options on `CodeEditor` and a line variant for `Tabs` (`line` is now a
+  deprecated alias of `segmented`). 0.25.0.
 - **DateRangeField presets and time** — one-click ranges such as Today, Last 7
   days and This month, or your own, beside the calendar (`presets`), and a time
   of day on each end of the range (`with-time`), and `min-date` / `max-date`.