@nxgt/material 2.8.0 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @nxgt/material
 
+## 2.9.0
+
+### Minor Changes
+
+- [#468](https://github.com/softistx/nxgt-material/pull/468) [`5d57954`](https://github.com/softistx/nxgt-material/commit/5d57954d477f81d02872382b8ba54a97168dd191) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Tabs` has two looks: `underline`, the new default (tabs over a border, the active one in the primary colour with a bar under it that slides to the tab clicked or reached with the arrow keys), and `segmented` (a neutral pill track whose raised surface slides to the active tab, whose label also turns foreground and semibold). `TabsVariant` is `'underline' | 'segmented' | 'bar' | 'line'`; `bar` is a deprecated alias of `underline` and `line` of `segmented`, so no call site or type breaks. The list scrolls sideways when the tabs overflow (its scrollbar hidden), `orientation="vertical"` puts the indicator on the side, and the focus ring is a primary outline inside the tab. Server HTML and pages without JavaScript show a static indicator under the active tab; once measured, the list carries `data-indicator="ready"` and the sliding one takes over, with no hydration mismatch. In the dark theme the active label is the primary colour mixed with white (it was the bare primary, 2.7:1 on the page). `TabsTrigger`'s `icon` now renders in a `<span data-slot="tabs-trigger-icon">` (it was a `<div>` inside the `<button>`). `CodeGroup` and the emoji lists use `underline`.
+  
+  The indicator jumps instead of sliding under `prefers-reduced-motion: reduce`, and `dir="rtl"` runs the tabs and the indicator from the right. The `segmented` track scrolls sideways on a phone too, rather than widening the page. The emoji list's icon-only group tabs are named (`aria-label` and `title`, from the new `material.emoji.groups.*` keys, in English and French); an icon-only `TabsTrigger` of your own needs an `aria-label` the same way.
+  
+  `TabsList` accepts `asChild` (it threw in React with two children; the sliding indicator now sits inside the child, and in Vue a list with `asChild` keeps the static indicator), and the indicator follows a tab inserted or removed before the active one.
+  
+  **Deprecated:** `variant="bar"` and `variant="line"`. They still type-check and render, as `underline` and `segmented`; write those instead.
+  
+  **Visible change:** a `Tabs` with no `variant`, or with `variant="bar"`, no longer renders the boxed look (equal-width triggers, a primary ring and tint around the active one, a 10px label under its icon on the phone); it renders `underline`. `variant="line"` renders `segmented` (a rounded pill, not the muted strip).
+  
+  ### Migration
+  
+  - Search for `variant="bar"` and replace it with `variant="underline"` (or remove it: `underline` is the default). Search for `variant="line"` and replace it with `variant="segmented"`. Search for `variant: 'bar'` / `variant: 'line'` in objects and typed props the same way.
+  - The old `bar` look is gone. The closest is `underline`; to keep its equal-width triggers, add `className="w-full"` to `TabsList` and `className="flex-1"` to each `TabsTrigger`. To keep a boxed active tab, `segmented` is the closest.
+  - Tests that queried the old classes must change: `ring-primary`, `ring-1`, `bg-primary/10`, `text-primary` on the active trigger, `text-[10px]` / `md:text-xs` on its label, `bg-muted/60` on the `line` list. Query the state instead: `getByRole('tab', { selected: true })`, or `toHaveAttribute('data-state', 'active')`, and `data-variant` on `[data-slot="tabs"]` for the look (it holds the variant as written: `bar` stays `bar`).
+  - A test that looked for the icon as a `div` inside the trigger must look for `[data-slot="tabs-trigger-icon"]`.
+
+### Patch Changes
+
+- [#470](https://github.com/softistx/nxgt-material/pull/470) [`853d093`](https://github.com/softistx/nxgt-material/commit/853d093f0620dc6940ea1ce69e025b61e3b0094d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The roadmap names the release that ships the two Tabs looks and the emoji groups.
+- Updated dependencies [[`5f984fa`](https://github.com/softistx/nxgt-material/commit/5f984fa95a2944e6c71acd81d0272730d87c2c0a), [`853d093`](https://github.com/softistx/nxgt-material/commit/853d093f0620dc6940ea1ce69e025b61e3b0094d)]:
+  - @nxgt/material-core@0.6.0
+
 ## 2.8.0
 
 ### Minor Changes

package/README.md

@@ -290,7 +290,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`, `TableEmpty` | Styled semantic table inside a scrollable wrapper; `TableEmpty` is the full-width "nothing here" row. | `Table` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon. `variant="line"` is the quieter pill style. | `Tabs` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill. | `Tabs` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/primitives-togglegroup.webp" width="120" alt="ToggleGroup"> | [`ToggleGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#togglegroup), `ToggleGroupItem`, `ToggleGroupSeparator` | Single or multiple toggle group sharing variant and size. | `ToggleGroup`, `ToggleGroupItem` |
 | — | [`Activity`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/primitives.md#activity) | React `<Activity>` switched by a boolean `visible`. | `Activity` |
@@ -393,7 +393,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#eventchip) | Calendar event pill with time, all-day and continuation edges. | `EventChip` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#codeblock), `CodeDiff`, `JsonViewer`, `CodeGroup` | Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs variant="line"`). | `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-codeblock.webp" width="120" alt="CodeBlock"> | [`CodeBlock`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#codeblock), `CodeDiff`, `JsonViewer`, `CodeGroup` | Highlighted code with line numbers and copy, a Monaco diff, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined). | `CodeBlock`, `CodeDiff`, `JsonViewer`, `CodeGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-markdown.webp" width="120" alt="Markdown"> | [`Markdown`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#markdown), `MermaidDiagram` | GFM markdown with KaTeX math and mermaid diagrams (`clientOnly`). Fences reuse `CodeBlock`. `ChatMarkdown` renders through it. | `Markdown`, `MermaidDiagram` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-terminal.webp" width="120" alt="Terminal"> | [`Terminal`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#terminal) | Display-only log with prompt, copy, and error/input tones. Container queries. | `Terminal` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-figure.webp" width="120" alt="Figure"> | [`Figure`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#figure) | Framed media with an optional caption. | `Figure` |

package/dist/{_Uint8Array-CALbCR7W.js → _Uint8Array-azThpjEP.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-B85Q_O55.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-BfqVlNGW.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-BQ8agsDH.js → _overRest-DMn4Dt71.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-B85Q_O55.js";
+import { m as e, p as t } from "./translator-BfqVlNGW.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-BHMdvnqm.js → async-slice-DhZDjEtw.js}

@@ -1,5 +1,5 @@
-import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-B85Q_O55.js";
-import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-CALbCR7W.js";
+import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-BfqVlNGW.js";
+import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-azThpjEP.js";
 import { L as v } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as y, createContext as b, createElement as x, useContext as ee, useEffect as te, useMemo as S, useReducer as ne, useState as re, useSyncExternalStore as ie } from "react";
 import { asyncThunkCreator as ae, buildCreateSlice as oe } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-D4gI6nqs.js → blockDiagram-BEXU5L5S-BOsyK4E_.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-DHgEBs83.js";
+import { t as e } from "./graphlib-DLjE3QPd.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-C9P-XjM2.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-BLMCnCFE.js → chunk-3FUC2YCW-BCsKm3ZT.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-DHgEBs83.js";
+import { t as e } from "./graphlib-DLjE3QPd.js";
 import { n as t } from "./src-CsLQInsN.js";
 import { g as n } from "./chunk-ZIGJFQKS-9VXArDKF.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-C9P-XjM2.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-CUtKEeuL.js → chunk-7M6MHVWA-C3qpW8zM.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { t as x } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as S } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as C } from "./chunk-WEXAMYUT-CbFOhEve.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-CB_83G7J.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-CzPNLW5k.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-CB_83G7J.js → chunk-GNY47TPC-CzPNLW5k.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-BChweQ_V.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-k-I67NSP.js";
 import { r as s } from "./chunk-5DYCD2WN-Cd1zazNp.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-C9P-XjM2.js";
 import { r as f } from "./chunk-UA2S7LBM-ChuksCDg.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BoWoJr6K.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-BK-NMLiI.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-c8yG3_vh.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-D_F3_LlW.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-DXZt0zyd.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-D0yLvfot.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-Cywmx0rz.js → chunk-NETBCI7D-tNinefdn.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
+import { o as t } from "./chunk-Z7XXMR3K-C9P-XjM2.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-Ccb3Rfjl.js → chunk-Z7XXMR3K-C9P-XjM2.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-Bg1bqGbc.js";
+import { st as e } from "./components-km60bAdr.js";
 import { n as t, t as n } from "./src-CsLQInsN.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-9VXArDKF.js";

package/dist/{classDiagram-v2-NBCMYWYE-CRgxPgLD.js → classDiagram-v2-NBCMYWYE-D00ZobEC.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-0C6_H8Li.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-k-I67NSP.js";
 import "./chunk-5DYCD2WN-Cd1zazNp.js";
-import "./chunk-Z7XXMR3K-Ccb3Rfjl.js";
+import "./chunk-Z7XXMR3K-C9P-XjM2.js";
 import { t as S } from "./chunk-GWA4HPMP-B8jXI0Tl.js";
 import { t as C } from "./chunk-XXDRQBXY-dKXxu_aj.js";
 import { t as w } from "./chunk-WEXAMYUT-CbFOhEve.js";
 import "./chunk-UA2S7LBM-ChuksCDg.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-CB_83G7J.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-CzPNLW5k.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {