@nxgt/material-vue 0.27.0 → 0.28.0

package/dist/{pdf-outline-sidebar-ChjAXoUX.js → pdf-outline-sidebar-BXGTDISI.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-Db9OdMfQ.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-BR4G03kN.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-Db9OdMfQ.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-bjQm6_kf.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-Db9OdMfQ.js";
+import { t as n } from "./pdf-page-BR4G03kN.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-DGVEFNc0.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-Db9OdMfQ.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 { 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-CiM6dwAm.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-BXGTDISI.js";
+import { t as i } from "./pdf-thumbnail-sidebar-fM3DGJzD.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-fM3DGJzD.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-Db9OdMfQ.js";
+import { t as r } from "./use-material-translation-Do6ztdtV.js";
+import { t as i } from "./pdf-page-BR4G03kN.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-BS7-CXFx.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-Db9OdMfQ.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/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,13 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **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 +134,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`.

package/docs/troubleshooting.md

@@ -61,6 +61,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**
 
@@ -1242,6 +1244,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.28.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.6.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;