@nxgt/material-vue 0.23.4 → 0.24.0

package/dist/{pdf-outline-sidebar-oz9wdBhB.js → pdf-outline-sidebar-0I-LGrgY.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { af as n } from "./components-AScwCcds.js";
-import { t as r } from "./use-material-translation-C5zPFhbk.js";
+import { gf as n } from "./components-YlYuHLEI.js";
+import { t as r } from "./use-material-translation-8hUB2M-S.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-0rlq1Lo6.js → pdf-page-C74-6lyZ.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Bc as t } from "./components-AScwCcds.js";
+import { vp as t } from "./components-YlYuHLEI.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-DfhjNHoI.js → pdf-page-list-DPsquYPY.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { af as t } from "./components-AScwCcds.js";
-import { t as n } from "./pdf-page-0rlq1Lo6.js";
+import { gf as t } from "./components-YlYuHLEI.js";
+import { t as n } from "./pdf-page-C74-6lyZ.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-Dr8RVcs4.js → pdf-reader-Bkpp7UZ7.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { wn as t } from "./components-AScwCcds.js";
-import { t as n } from "./use-material-translation-C5zPFhbk.js";
-import { t as r } from "./Button-CVIR6uLK.js";
-import { o as i } from "./HoverCardTrigger-iAL5ALrL.js";
-import { n as a } from "./pdf-page-0rlq1Lo6.js";
-import { t as o } from "./pdf-page-list-DfhjNHoI.js";
-import { t as s } from "./pdf-sidebar-VXPQbC_R.js";
-import { t as c } from "./pdf-toolbar-B6gRRcsv.js";
+import { En as t } from "./components-YlYuHLEI.js";
+import { t as n } from "./use-material-translation-8hUB2M-S.js";
+import { t as r } from "./Button-DOcT4Pej.js";
+import { o as i } from "./HoverCardTrigger-WQe85PCH.js";
+import { n as a } from "./pdf-page-C74-6lyZ.js";
+import { t as o } from "./pdf-page-list-DPsquYPY.js";
+import { t as s } from "./pdf-sidebar-BH-1jvy-.js";
+import { t as c } from "./pdf-toolbar-BRnmzddi.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-VXPQbC_R.js → pdf-sidebar-BH-1jvy-.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-C5zPFhbk.js";
-import { t as r } from "./pdf-outline-sidebar-oz9wdBhB.js";
-import { t as i } from "./pdf-thumbnail-sidebar-BpgXrVBj.js";
+import { t as n } from "./use-material-translation-8hUB2M-S.js";
+import { t as r } from "./pdf-outline-sidebar-0I-LGrgY.js";
+import { t as i } from "./pdf-thumbnail-sidebar-ByqNaYfz.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-BpgXrVBj.js → pdf-thumbnail-sidebar-ByqNaYfz.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { af as n } from "./components-AScwCcds.js";
-import { t as r } from "./use-material-translation-C5zPFhbk.js";
-import { t as i } from "./pdf-page-0rlq1Lo6.js";
+import { gf as n } from "./components-YlYuHLEI.js";
+import { t as r } from "./use-material-translation-8hUB2M-S.js";
+import { t as i } from "./pdf-page-C74-6lyZ.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-B6gRRcsv.js → pdf-toolbar-BRnmzddi.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-C5zPFhbk.js";
-import { o as r } from "./Button-CVIR6uLK.js";
-import { t as i } from "./icon-button-DbEME76t.js";
+import { t as n } from "./use-material-translation-8hUB2M-S.js";
+import { s as r } from "./Button-DOcT4Pej.js";
+import { t as i } from "./icon-button-DKLuZ2c-.js";
 import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-BHAhXGUO.js";
-import { o as d } from "./HoverCardTrigger-iAL5ALrL.js";
+import { o as d } from "./HoverCardTrigger-WQe85PCH.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-C5zPFhbk.js";
-import { t as n } from "./Button-CVIR6uLK.js";
+import { n as e, t } from "./use-material-translation-8hUB2M-S.js";
+import { t as n } from "./Button-DOcT4Pej.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-oEVjQiCl.js → sortable-provider-CC9eO1nm.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-C5zPFhbk.js";
-import { t as n } from "./icon-button-DbEME76t.js";
+import { t } from "./use-material-translation-8hUB2M-S.js";
+import { t as n } from "./icon-button-DKLuZ2c-.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-rjOMJkyX.js → stored-language-N_UoPJsY.js}

@@ -317,6 +317,7 @@ var e = {
 			}
 		},
 		table: {
+			loading: "Loading data…",
 			labels: {
 				asc: "Asc",
 				desc: "Desc",
@@ -709,7 +710,11 @@ var e = {
 			invalid: "Enter a valid URL",
 			open: "Open URL"
 		},
-		stepper: { step: "Step {step}" },
+		stepper: {
+			step: "Step {step}",
+			completed: "Completed",
+			error: "Error"
+		},
 		"combobox-field": {
 			placeholder: "Search…",
 			empty: "No results"
@@ -1101,6 +1106,10 @@ var e = {
 			"back-to-days": "Back to day view"
 		},
 		spinner: { loading: "Loading..." },
+		slider: {
+			minimum: "Minimum",
+			maximum: "Maximum"
+		},
 		"scroll-to-top": { label: "Scroll to top" },
 		map: {
 			"you-are-here": "You are here",
@@ -1446,6 +1455,7 @@ var e = {
 			}
 		},
 		table: {
+			loading: "Chargement des données…",
 			labels: {
 				asc: "Asc",
 				desc: "Desc",
@@ -1838,7 +1848,11 @@ var e = {
 			invalid: "Saisissez une URL valide",
 			open: "Ouvrir l’URL"
 		},
-		stepper: { step: "Étape {step}" },
+		stepper: {
+			step: "Étape {step}",
+			completed: "Terminée",
+			error: "Erreur"
+		},
 		"combobox-field": {
 			placeholder: "Rechercher…",
 			empty: "Aucun résultat"
@@ -2230,6 +2244,10 @@ var e = {
 			"back-to-days": "Retour à la vue des jours"
 		},
 		spinner: { loading: "Chargement..." },
+		slider: {
+			minimum: "Minimum",
+			maximum: "Maximum"
+		},
 		"scroll-to-top": { label: "Retour en haut" },
 		map: {
 			"you-are-here": "Vous êtes ici",

package/dist/{stx-player-DNADkQ31.js → stx-player-BGKIDqNX.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Gt as t, Jt as n, Ut as r, Wt as i, Xt as a, Yt as o, lp as s, qt as c } from "./components-AScwCcds.js";
-import { t as l } from "./use-material-translation-C5zPFhbk.js";
+import { Gt as t, Kt as n, Qt as r, Xt as i, Yt as a, Zt as o, qt as s, xp as c } from "./components-YlYuHLEI.js";
+import { t as l } from "./use-material-translation-8hUB2M-S.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 = {
@@ -19,38 +19,38 @@ var S = ["data-layout", "aria-label"], C = {
 			Array
 		] }
 	},
-	setup(t) {
-		let { containerRef: g, state: w } = a();
+	setup(s) {
+		let { containerRef: g, state: w } = r();
 		function T(e) {
 			g.value = e instanceof HTMLElement ? e : null;
 		}
 		let { t: E } = l();
-		return (a, l) => (v(), f("section", {
+		return (r, l) => (v(), f("section", {
 			ref: T,
 			"data-slot": "stx-player",
-			"data-layout": t.layout,
+			"data-layout": s.layout,
 			"aria-label": b(w).current?.title ?? b(E)("material.stx-player.label", "Media player"),
-			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", a.$props.class))
-		}, [t.layout === "mini" ? (v(), u(c, { key: 0 })) : (v(), f("div", {
+			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", r.$props.class))
+		}, [s.layout === "mini" ? (v(), u(a, { key: 0 })) : (v(), f("div", {
 			key: 1,
-			class: _(b(e)("grid gap-3", t.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
+			class: _(b(e)("grid gap-3", s.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
 		}, [p("div", { class: _(b(e)("bg-card overflow-hidden rounded border", b(w).current?.kind === "audio" && "flex flex-col gap-4 p-6")) }, [
-			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(s, { variant: "title-medium" }, {
+			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(c, { variant: "title-medium" }, {
 				default: x(() => [m(y(b(w).current.title), 1)]),
 				_: 1
-			}), b(w).current.artist ? (v(), u(s, {
+			}), b(w).current.artist ? (v(), u(c, {
 				key: 0,
 				class: "text-muted-foreground"
 			}, {
 				default: x(() => [m(y(b(w).current.artist) + " " + y(b(w).current.album ? ` · ${b(w).current.album}` : ""), 1)]),
 				_: 1
 			})) : d("", !0)])) : d("", !0),
-			h(r, null, {
+			h(t, null, {
 				default: x(() => [b(w).current?.kind === "audio" ? d("", !0) : (v(), u(o, {
 					key: 0,
 					tone: "overlay"
 				}, {
-					trailing: x(() => [h(n, { tone: "overlay" })]),
+					trailing: x(() => [h(i, { tone: "overlay" })]),
 					_: 1
 				}))]),
 				_: 1
@@ -59,10 +59,10 @@ var S = ["data-layout", "aria-label"], C = {
 				key: 1,
 				tone: "surface"
 			}, {
-				trailing: x(() => [h(n, { tone: "surface" })]),
+				trailing: x(() => [h(i, { tone: "surface" })]),
 				_: 1
 			})) : d("", !0)
-		], 2), t.showQueue ? (v(), u(i, {
+		], 2), s.showQueue ? (v(), u(n, {
 			key: 0,
 			class: "min-h-72"
 		})) : d("", !0)], 2))], 10, S));
@@ -97,23 +97,23 @@ var S = ["data-layout", "aria-label"], C = {
 		] }
 	},
 	emits: ["trackChange"],
-	setup(e, { emit: n }) {
-		let r = e, i = n;
-		function a(e, t) {
-			r.onTrackChange?.(e, t), i("trackChange", e, t);
+	setup(e, { emit: t }) {
+		let n = e, r = t;
+		function i(e, t) {
+			n.onTrackChange?.(e, t), r("trackChange", e, t);
 		}
-		return (n, i) => (v(), u(t, {
+		return (t, r) => (v(), u(s, {
 			tracks: e.tracks,
 			"current-index": e.currentIndex,
 			"default-index": e.defaultIndex,
 			"auto-play": e.autoPlay,
 			loop: e.loop,
-			"on-track-change": a
+			"on-track-change": i
 		}, {
 			default: x(() => [h(w, {
 				layout: e.layout,
 				"show-queue": e.showQueue,
-				class: _(r.class)
+				class: _(n.class)
 			}, null, 8, [
 				"layout",
 				"show-queue",

package/dist/{translator-BCSJSO1-.js → translator-CU0jKvzB.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-rjOMJkyX.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-N_UoPJsY.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-d50_nxgR.js → use-heading-spy-Bw1LIAkC.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-BqWxpaKu.js";
+import { a as e } from "./i18n-provider-DTuxugHO.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-C5zPFhbk.js → use-material-translation-8hUB2M-S.js}

@@ -1,6 +1,6 @@
-import "./stored-language-rjOMJkyX.js";
-import { a as e } from "./i18n-provider-BqWxpaKu.js";
-import { i as t, r as n } from "./translator-BCSJSO1-.js";
+import "./stored-language-N_UoPJsY.js";
+import { a as e } from "./i18n-provider-DTuxugHO.js";
+import { i as t, r as n } from "./translator-CU0jKvzB.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/buttons-and-actions.md

@@ -319,9 +319,25 @@ import { CopyButton } from '@nxgt/material-vue/components';
 | `#icon` slot | — | a copy icon | replaces the idle icon |
 | `variant`, `color` | as `IconButton` | `'ghost'`, `'default'` | the button style |
 
-The check mark stays for 1.5 s. Vue has no `CopyValue`: put the text next to a
-`CopyButton` as above. `copyToClipboard(text)` is the same copy without a
-button.
+The check mark stays for 1.5 s. `copyToClipboard(text)` is the same copy
+without a button.
+
+`CopyValue` shows the value in a monospace chip with the button beside it:
+
+```vue
+<script setup lang="ts">
+import { CopyValue } from '@nxgt/material-vue/components';
+</script>
+
+<template>
+  <CopyValue value="https://app.example.com/orders/SO-1842" display="SO-1842" />
+</template>
+```
+
+| `CopyValue` prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `value` | `string` | — (required) | what is copied, and shown when there is no `display` |
+| `display` / default slot | `string` | `value` | what is shown instead (React's `display` node) |
 
 **Storybook:** `Buttons & actions/CopyButton` · **React:** `CopyButton`, `CopyValue`
 

package/docs/components/data-display.md

@@ -656,7 +656,20 @@ left alone. Mermaid diagrams
 render in the browser only, after mount; on the server the fence is left
 empty.
 
-**Storybook:** `Data display/Markdown` · **React:** `Markdown`
+`MermaidDiagram` renders one chart outside markdown, the same way: client-only,
+with `mermaid` imported on mount.
+
+```vue
+<script setup lang="ts">
+import { MermaidDiagram } from '@nxgt/material-vue/components';
+</script>
+
+<template>
+  <MermaidDiagram chart="graph LR&#10;  Draft --> Review --> Published" />
+</template>
+```
+
+**Storybook:** `Data display/Markdown` · **React:** `Markdown`, `MermaidDiagram`
 
 ---
 

package/docs/components/data-table-filter-and-lists.md

@@ -23,7 +23,7 @@ each other, so either can be used alone.
 
 ![DataTable](../previews/data-table-filter-lists-datatable.webp)
 
-TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, and column visibility.
+TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state.
 
 ```vue
 <script setup lang="ts">
@@ -59,7 +59,8 @@ const columns = columnHelper.columns([
 
 Parts: `DataTable`; `DataTableColumnHeader` (a sortable header with a hide
 action); `DataTablePagination` and `DataTableViewOptions` (used by the table,
-exported for a table of your own); `useColumnHelpers<T>()` returns a
+exported for a table of your own; `DataTablePagination` takes `disabled`);
+`useColumnHelpers<T>()` returns a
 `columnHelper` bound to the table's features and `predefinedColumns()` —
 `select` (checkboxes) and `expand` (a toggle for the expanded row, named
 "Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`);
@@ -78,6 +79,58 @@ table enables, for typing your own column defs.
 | `onLoadMore` / `isLoadingMore` | `() => void` / `boolean` | — | adds a "load more" button under the rows |
 | `options` | `{ showPage?: boolean; showSelected?: boolean }` | both shown | parts of the footer |
 | `showHeader` | `boolean` | hidden on mobile | header row |
+| `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
+| `loadingRows` | `number` | the page size | how many skeleton rows |
+| `#empty="{ filtered }"` | slot | icon and "No data available" | content of the empty row, spanning every visible column |
+
+### Loading and empty states
+
+```vue
+<script setup lang="ts">
+import { DataTable, useColumnHelpers } from '@nxgt/material-vue/components';
+
+type Person = { id: string; name: string; email: string };
+
+defineProps<{ people: Person[]; isFetching: boolean }>();
+
+const { columnHelper } = useColumnHelpers<Person>();
+const columns = columnHelper.columns([
+  columnHelper.accessor('name', { header: 'Name' }),
+  columnHelper.accessor('email', { header: 'Email' }),
+]);
+</script>
+
+<template>
+  <DataTable
+    :data="people"
+    :columns="columns"
+    :loading="isFetching"
+    :loading-rows="5"
+  >
+    <template #empty="{ filtered }">
+      {{ filtered ? 'No person matches these filters.' : 'No people yet.' }}
+    </template>
+  </DataTable>
+</template>
+```
+
+While `loading` is `true`, the table is `aria-busy` and a visually
+hidden status says "Loading data…" (`material.table.loading`). With no row to
+show, the body is `loadingRows` skeleton rows (default: the page size), one
+cell per visible column. With rows already shown — a refresh — the rows stay
+where they are, dimmed and `inert`, rather than being swapped for
+skeletons: the table keeps its height, so nothing below it jumps when the data
+arrives. Sorting (`DataTableColumnHeader`), the `select` column's "Select
+all", the toolbar's native controls (it
+is a disabled `<fieldset>`, so every input or button you render there, a
+filter or an export, is disabled
+too) and pagination are disabled meanwhile.
+
+When no row is left after filtering, the empty state is one `TableEmpty`
+cell spanning every visible column: today's icon and "No data available" by
+default, or the `#empty` slot, told whether rows exist but none matches the
+filters (`filtered`); content that renders nothing gets the default.
+`DataTableEmptyState` types the slot props.
 
 For the TanStack API itself (column helpers, features, row models), see
 [TanStack Table v9](https://tanstack.com/table/latest).
@@ -132,7 +185,10 @@ A field's `type` is one of `text`, `number`, `select`, `multi-select`, `date`,
 `chips-multiple`, `chips-single`, `slider`, `slider-range`, `switch` or
 `custom` (`render` returns a VNode); `schema.groups` puts fields in
 collapsible sections. The filter state lives in a Pinia store, so the app
-needs `app.use(createPinia())`.
+needs `app.use(createPinia())`. A `number-range` or `slider-range` is a
+`role="group"` named by its `label`, with its inputs named by their part
+("Min" / "Max", or the slider's "<label> Minimum" / "<label> Maximum"):
+`getByRole('group', { name: 'Price' })`.
 
 Parts: `Filter` (one component, `variant` picks the layout);
 `FilterProvider` + `FilterContent` + `FilterActions` to lay the panel out
@@ -203,7 +259,34 @@ above shows `FilterPopover` open; every variant has its own story.
 
 ![Pagination](../previews/data-table-filter-lists-pagination.webp)
 
-Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses.
+Pagination primitives on Reka UI's `Pagination`, with first / last buttons and ellipses. `PaginationBar` adds a sibling window with ellipses.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PaginationBar } from '@nxgt/material-vue/components';
+
+const page = ref(1);
+</script>
+
+<template>
+  <PaginationBar v-model:page="page" :page-count="12" />
+</template>
+```
+
+| `PaginationBar` prop / event | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `page` / `v-model:page` | `number` | — (required) | current page, from 1; controlled |
+| `page-count` | `number` | — (required) | number of pages |
+| `sibling-count` | `number` | `1` | pages on each side of the current one before an ellipsis |
+| `disabled` | `boolean` | `false` | disables every button |
+| `@update:page`, `@page-change` | `(page: number) => void` | — | a page was chosen (React's `onPageChange`) |
+
+`paginationItems(page, pageCount, siblingCount?)` is the window it renders, as
+`(number | 'ellipsis')[]` (`PaginationItemToken`). `PaginationLink` is a page
+as an anchor (`href`, `is-active`), for server-rendered lists.
+
+The parts, composed by hand:
 
 ```vue
 <script setup lang="ts">
@@ -243,9 +326,8 @@ const page = ref(1);
 Parts: `Pagination` (the root), `PaginationContent` (its slot gives the
 `items` window), `PaginationItem` (`value`, `is-active`),
 `PaginationPrevious`, `PaginationNext`, `PaginationFirst`, `PaginationLast`,
-`PaginationEllipsis`. There is no `PaginationBar` / `paginationItems` in Vue:
-the root computes the window itself. For a table, `DataTablePagination` is
-already wired.
+`PaginationEllipsis`. Composed by hand, the root computes the window itself.
+For a table, `DataTablePagination` is already wired.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
@@ -258,7 +340,7 @@ already wired.
 | `aria-label` | `string` | `'pagination'` (translated) | the `nav`'s name; the buttons are named "First", "Previous", "Next", "Last" and "Page {n}" (`material.pagination.*`). An `aria-label` on a part wins |
 
 **Emits:** `update:page` with `number`.
-**Storybook:** `Data table, filter & lists/Pagination` · **React:** `Pagination` (parts), `PaginationBar`
+**Storybook:** `Data table, filter & lists/Pagination` · **React:** `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`
 
 ---
 

package/docs/components/feedback-and-status.md

@@ -523,7 +523,7 @@ compiled stylesheet). `Toast` is the component each toast
 renders, and `sonnerToast` is vue-sonner's own `toast`, for anything the
 presets do not cover.
 
-**Storybook:** `Feedback & status/Toast` · **React:** `Toaster`, `toast`, `toasts`, `Toast`
+**Storybook:** `Feedback & status/Toast` · **React:** `Toaster`, `toast`, `toasts`, `Toast` (`ToastAction` type)
 
 ---
 

package/docs/components/form-fields.md

@@ -529,7 +529,7 @@ const pin = ref('');
 **Emits:** `update:modelValue` with `string` (the digits typed so far).
 **Form wrapper:** `OtpFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/OtpField` · **React:** `OtpField`, `OtpFormField`
+**Storybook:** `Form fields/OtpField` · **React:** `OtpField`, `OtpFormField`, `InputOTP` (same parts)
 
 ---
 
@@ -605,8 +605,8 @@ const title = ref('Spring catalogue');
 
 **Emits:** `update:modelValue` and `save`, both `string`, trimmed, on save
 only.
-**Form wrapper:** none — bind `v-model` to a `useField` value, see
-[forms](../guides/forms.md#the-pair).
+**Form wrapper:** `InlineEditFormField` (`name` plus the same props; the form
+value changes on save, not while typing), see [forms](../guides/forms.md#the-pair).
 **Storybook:** `Form fields/InlineEdit` · **React:** `InlineEdit`, `InlineEditFormField`
 
 ---
@@ -750,6 +750,8 @@ in `SliderField`: its readout is text.
 
 Each thumb (`role="slider"`) is named by the label; a range's thumbs add
 "Minimum" and "Maximum": `getByRole('slider', { name: 'Price Minimum' })`.
+A labelled range is also a `role="group"` named by the label, so two range
+sliders are told apart.
 The bare `Slider` does the same with `label-id` (the id of your label) and
 `required`, or with an `aria-labelledby` or `aria-label` you pass (they win
 over `label-id`): a vertical `Slider`, which has no field label, needs one.
@@ -762,7 +764,7 @@ wins over `error` as on React's `Slider`) goes on every thumb, not on the root
 stores the same — the initial value decides.
 **Form wrapper:** `SliderFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/Slider` · **React:** `Slider`, `SliderFormField`
+**Storybook:** `Form fields/Slider` · **React:** `Slider`, `SliderField` (an alias of `Slider`), `SliderFormField`
 
 ---
 
@@ -835,7 +837,7 @@ const updates = ref(false);
 **Emits:** `update:modelValue` with `boolean`.
 **Form wrapper:** `SwitchFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/Switch`, `Form fields/SwitchField` · **React:** `Switch`, `SwitchFormField`
+**Storybook:** `Form fields/Switch`, `Form fields/SwitchField` · **React:** `Switch`, `SwitchField` (an alias of `Switch`), `SwitchFormField`
 
 ---
 

package/docs/components/media-and-files.md

@@ -677,7 +677,7 @@ and emits nothing: the capture stays inside the component. The helpers
 `isCameraSupported`, `getCameraDevices`, `requestCameraPermissions` and
 `capturePhotoFromVideo` are exported for building your own.
 
-**Storybook:** `Media & files/Camera` · **React:** — (a story only, not exported)
+**Storybook:** `Media & files/Camera` · **React:** `Camera`, `useCamera`, `capturePhotoFromVideo` (`createCameraStore` for the store)
 
 ---