@nxgt/material-vue 0.37.1 → 0.39.0

package/dist/{pdf-outline-sidebar-DJJ-ARco.js → pdf-outline-sidebar-aQ5Lhbss.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Bf as n } from "./components--v_k8diD.js";
-import { t as r } from "./use-material-translation-DRB6oPdF.js";
+import { Hf as n } from "./components-B2kSyBK0.js";
+import { t as r } from "./use-material-translation-C6xccbic.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-CRt6KXdJ.js → pdf-page-NCmScgMW.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Up as t } from "./components--v_k8diD.js";
+import { Gp as t } from "./components-B2kSyBK0.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-BgCp5Asx.js → pdf-page-list-BnvE130d.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Bf as t } from "./components--v_k8diD.js";
-import { t as n } from "./pdf-page-CRt6KXdJ.js";
+import { Hf as t } from "./components-B2kSyBK0.js";
+import { t as n } from "./pdf-page-NCmScgMW.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-BGxqEx8O.js → pdf-reader-CMt9dKZ-.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { kn as t } from "./components--v_k8diD.js";
-import { t as n } from "./use-material-translation-DRB6oPdF.js";
-import { t as r } from "./Button-CurFF4Zt.js";
-import { o as i } from "./HoverCardTrigger-jCXl6TrX.js";
-import { n as a } from "./pdf-page-CRt6KXdJ.js";
-import { t as o } from "./pdf-page-list-BgCp5Asx.js";
-import { t as s } from "./pdf-sidebar-Cvtuomgp.js";
-import { t as c } from "./pdf-toolbar-BtXcyEpd.js";
+import { kn as t } from "./components-B2kSyBK0.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { t as r } from "./Button-DVeAQorb.js";
+import { o as i } from "./HoverCardTrigger-VvXPswRz.js";
+import { n as a } from "./pdf-page-NCmScgMW.js";
+import { t as o } from "./pdf-page-list-BnvE130d.js";
+import { t as s } from "./pdf-sidebar-BWzX3e0f.js";
+import { t as c } from "./pdf-toolbar-DpQMG5rv.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-Cvtuomgp.js → pdf-sidebar-BWzX3e0f.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-DRB6oPdF.js";
-import { t as r } from "./pdf-outline-sidebar-DJJ-ARco.js";
-import { t as i } from "./pdf-thumbnail-sidebar-CeWPs7o7.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { t as r } from "./pdf-outline-sidebar-aQ5Lhbss.js";
+import { t as i } from "./pdf-thumbnail-sidebar-8nbYsI3d.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-CeWPs7o7.js → pdf-thumbnail-sidebar-8nbYsI3d.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Bf as n } from "./components--v_k8diD.js";
-import { t as r } from "./use-material-translation-DRB6oPdF.js";
-import { t as i } from "./pdf-page-CRt6KXdJ.js";
+import { Hf as n } from "./components-B2kSyBK0.js";
+import { t as r } from "./use-material-translation-C6xccbic.js";
+import { t as i } from "./pdf-page-NCmScgMW.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-BtXcyEpd.js → pdf-toolbar-DpQMG5rv.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-DRB6oPdF.js";
-import { d as r } from "./Button-CurFF4Zt.js";
-import { t as i } from "./icon-button-CIUc1bEp.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-jCXl6TrX.js";
+import { t as n } from "./use-material-translation-C6xccbic.js";
+import { d as r } from "./Button-DVeAQorb.js";
+import { t as i } from "./icon-button-CSPfP615.js";
+import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-C7uYPf_9.js";
+import { o as d } from "./HoverCardTrigger-VvXPswRz.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-DRB6oPdF.js";
-import { t as n } from "./Button-CurFF4Zt.js";
+import { n as e, t } from "./use-material-translation-C6xccbic.js";
+import { t as n } from "./Button-DVeAQorb.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/{print-format.utils-keJqahvw.js → print-format.utils-oj5kle2P.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-dtksFoGO.js";
-import { r } from "./translator-DqiGrSH_.js";
+import { i as e, r as t, t as n } from "./stored-language-CKZMMJcz.js";
+import { r } from "./translator-uh5FWiMq.js";
 import { t as i } from "./_baseIsEqual-BUD8VQJE.js";
 import { n as a } from "./number.utils-Bpo9tUaJ.js";
 import { defineComponent as o, getCurrentInstance as s, h as c, inject as l, provide as u, useId as d } from "vue";

package/dist/{sortable-provider-DMu8DL2z.js → sortable-provider-2czx1jSW.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-DRB6oPdF.js";
-import { t as n } from "./icon-button-CIUc1bEp.js";
+import { t } from "./use-material-translation-C6xccbic.js";
+import { t as n } from "./icon-button-CSPfP615.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-dtksFoGO.js → stored-language-CKZMMJcz.js}

@@ -345,6 +345,7 @@ var e = {
 				"select-all": "Select all",
 				"select-row": "Select row",
 				"toggle-row": "Toggle row details",
+				expand: "Expand",
 				"scroll-region": "Scrollable table"
 			},
 			pagination: {
@@ -752,6 +753,7 @@ var e = {
 			placeholder: "Search…",
 			empty: "No results"
 		},
+		"option-count": { label: "{count, plural, one {result} other {results}}" },
 		autocomplete: {
 			empty: "No option found.",
 			add: "Add \"{query}\"",
@@ -1223,6 +1225,17 @@ var e = {
 			saved: "I have saved these codes",
 			"saved-required": "Tick the box once your codes are safe",
 			done: "Done"
+		},
+		"repeatable-group": {
+			row: "row",
+			add: "Add {label}",
+			remove: "Remove {label} {index}",
+			"move-up": "Move {label} {index} up",
+			"move-down": "Move {label} {index} down",
+			added: "Added {label} {index}",
+			removed: "Removed {label} {index}",
+			moved: "Moved {label} {from} to position {to}",
+			"max-reached": "Maximum reached ({max})"
 		}
 	} },
 	fr: { material: {
@@ -1569,6 +1582,7 @@ var e = {
 				"select-all": "Tout sélectionner",
 				"select-row": "Sélectionner la ligne",
 				"toggle-row": "Afficher ou masquer les détails de la ligne",
+				expand: "Déplier",
 				"scroll-region": "Tableau défilant"
 			},
 			pagination: {
@@ -1976,6 +1990,7 @@ var e = {
 			placeholder: "Rechercher…",
 			empty: "Aucun résultat"
 		},
+		"option-count": { label: "{count, plural, one {résultat} other {résultats}}" },
 		autocomplete: {
 			empty: "Aucune option.",
 			add: "Ajouter « {query} »",
@@ -2447,6 +2462,17 @@ var e = {
 			saved: "J'ai enregistré ces codes",
 			"saved-required": "Cochez la case une fois vos codes en lieu sûr",
 			done: "Terminé"
+		},
+		"repeatable-group": {
+			row: "ligne",
+			add: "Ajouter une {label}",
+			remove: "Retirer la {label} {index}",
+			"move-up": "Monter la {label} {index}",
+			"move-down": "Descendre la {label} {index}",
+			added: "Ajout : {label} {index}",
+			removed: "Suppression : {label} {index}",
+			moved: "Déplacement : {label} {from} en position {to}",
+			"max-reached": "Maximum atteint ({max})"
 		}
 	} }
 }, t = "language", n = "en", r = Object.keys(e);

package/dist/{stx-player-nDsDyvc-.js → stx-player-CS1FYHVS.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jt as n, Kp as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components--v_k8diD.js";
-import { t as l } from "./use-material-translation-DRB6oPdF.js";
+import { $t as t, Jp as n, Jt as r, Qt as i, Xt as a, Yt as o, en as s, tn as c } from "./components-B2kSyBK0.js";
+import { t as l } from "./use-material-translation-C6xccbic.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 = {
@@ -35,17 +35,17 @@ var S = ["data-layout", "aria-label"], C = {
 			key: 1,
 			class: _(b(e)("grid gap-3", a.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(r, { variant: "title-medium" }, {
+			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(n, { variant: "title-medium" }, {
 				default: x(() => [m(y(b(w).current.title), 1)]),
 				_: 1
-			}), b(w).current.artist ? (v(), u(r, {
+			}), b(w).current.artist ? (v(), u(n, {
 				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(n, null, {
+			h(r, null, {
 				default: x(() => [b(w).current?.kind === "audio" ? d("", !0) : (v(), u(s, {
 					key: 0,
 					tone: "overlay"

package/dist/{translator-DqiGrSH_.js → translator-uh5FWiMq.js}

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

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-B2q6vp6H.js";
+import { a as e } from "./i18n-provider-BBnUUGqM.js";
 import { c as t, d as n, f as r, l as i, r as a, u as o } from "./number.utils-Bpo9tUaJ.js";
 import { computed as s, getCurrentInstance as c, inject as l, onMounted as u, ref as d, shallowRef as f, toValue as p, watch as m } from "vue";
 import { injectConfigProviderContext as h } from "reka-ui";

package/dist/{use-material-translation-DRB6oPdF.js → use-material-translation-C6xccbic.js}

@@ -1,6 +1,6 @@
-import "./stored-language-dtksFoGO.js";
-import { a as e } from "./i18n-provider-B2q6vp6H.js";
-import { i as t, r as n } from "./translator-DqiGrSH_.js";
+import "./stored-language-CKZMMJcz.js";
+import { a as e } from "./i18n-provider-BBnUUGqM.js";
+import { i as t, r as n } from "./translator-uh5FWiMq.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/README.md

@@ -26,7 +26,7 @@ Anything you press that is not a field: buttons, link buttons, copy, load more,
 
 ## [Form fields](form-fields.md)
 
-Labelled inputs with a value, each with its form-library wrapper, and the composite values (attributes, contacts, address, opening hours), and the titled sections a long form is laid out in. 25 entries.
+Labelled inputs with a value, each with its form-library wrapper, and the composite values (attributes, contacts, address, opening hours), the titled sections a long form is laid out in, and the rows a user adds and removes. 26 entries.
 
 [<img src="../previews/form-fields-textfield.webp" height="72" alt="TextField">](form-fields.md#textfield)
 [<img src="../previews/form-fields-phonefield.webp" height="72" alt="PhoneField">](form-fields.md#phonefield)

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

@@ -64,7 +64,8 @@ of your own; both footers take `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`);
+"Toggle row details" (`material.table.labels.toggle-row`) with `aria-expanded`, under a
+visually hidden header "Expand", `material.table.labels.expand`);
 `useDeleteRowsHandler(onDelete)` for a delete-selected action behind a
 confirm dialog.
 `dataTableFeatures` / `DataTableFeatures` are the TanStack v9 features the
@@ -84,6 +85,7 @@ table enables, for typing your own column defs.
 | `scrollLabel` | `string` | "Scrollable table" | the name of the scroll region the table becomes while it overflows |
 | `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
 | `loadingRows` | `number` | the page size | how many skeleton rows |
+| `density` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` tightens the cell padding, the row and header heights and the gap between rows, the selection column included; it is the table's `data-density` attribute, styled with classes (no inline style). The toolbar band and the empty state keep their size; the print variant is unchanged |
 | `#empty="{ filtered }"` | slot | icon and "No data available" | content of the empty row, spanning every visible column |
 | `manual` | `boolean` | `false` | `data` is one server page: no client filtering, sorting or paging; the footer is the server footer ([server-side data](#server-side-data)) |
 | `v-model:sorting` | `SortingState` | held inside | controlled sorting; `update:sorting` gets the new state |

package/docs/components/form-fields.md

@@ -12,6 +12,7 @@ value type each one writes. Everything is imported from
 | --- | --- | --- |
 | <img src="../previews/form-fields-field.webp" width="96" alt=""> | [Field](#field) | Renders the field matching a config `type` |
 | <img src="../previews/form-fields-formsection.webp" width="96" alt=""> | [FormSection](#formsection) | Titled section of a form, one column on a phone |
+| <img src="../previews/form-fields-repeatablegroup.webp" width="96" alt=""> | [RepeatableGroup](#repeatablegroup) | Rows a user adds, removes and reorders |
 | <img src="../previews/form-fields-textfield.webp" width="96" alt=""> | [TextField](#textfield) | Labelled input with adornments and helper text |
 | <img src="../previews/form-fields-textareafield.webp" width="96" alt=""> | [TextareaField](#textareafield) | Labelled textarea with row sizing and a counter |
 | <img src="../previews/form-fields-emailfield.webp" width="96" alt=""> | [EmailField](#emailfield) | Validates on blur, `mailto:` button |
@@ -171,6 +172,125 @@ semibold, uppercase and muted, set apart from the fields' labels, and reads
 
 ---
 
+## RepeatableGroup
+
+![RepeatableGroup](../previews/form-fields-repeatablegroup.webp)
+
+Rows of fields a user adds, removes and, optionally, reorders — a school
+year's periods, a list of contacts. `RepeatableGroupFormField` wires it to
+vee-validate's `useFieldArray`; each row's fields are your own form wrappers,
+rendered by its `row` slot.
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate';
+import {
+  Button,
+  DateFormField,
+  RepeatableGroupFormField,
+  TextFormField,
+} from '@nxgt/material-vue/components';
+
+type Period = { name: string; start?: Date; end?: Date };
+
+const { handleSubmit } = useForm<{ periods: Period[] }>({
+  initialValues: { periods: [{ name: 'Term 1' }] },
+});
+const onSubmit = handleSubmit((values) => console.log(values));
+const newRow = (): Period => ({ name: '' });
+</script>
+
+<template>
+  <form class="form-grid-layout" @submit="onSubmit">
+    <div data-slot="form-fields">
+      <RepeatableGroupFormField
+        name="periods"
+        label="Periods"
+        row-label="period"
+        add-label="Add period"
+        :max="6"
+        reorderable
+        empty-title="No periods yet"
+        :new-row="newRow"
+      >
+        <template #row="{ path }">
+          <TextFormField :name="`${path}.name`" label="Name" />
+          <DateFormField :name="`${path}.start`" label="Start date" />
+          <DateFormField :name="`${path}.end`" label="End date" />
+        </template>
+      </RepeatableGroupFormField>
+    </div>
+    <div data-slot="form-actions">
+      <Button type="submit">Save</Button>
+    </div>
+  </form>
+</template>
+```
+
+| Prop / slot | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `name` | `string` | — | the array's path in the form (`RepeatableGroupFormField`) |
+| `new-row` | `() => TRow` | — | the value Add pushes |
+| `#row` | slot | — | one row's fields; its props are `{ field, index, position, path }` (`index` 0-based, `position` 1-based, `path` `${name}[${index}]`) |
+| `label` / `#label` | `string` / slot | — | names the group (the list inside it is not named again) |
+| `row-label` | `string` | `'row'` (translated) | names each row's buttons ("Remove period 2") and the announcements |
+| `add-label` | `string` | `'Add {rowLabel}'` | the Add button's text |
+| `reorderable` | `boolean` | `false` | move up / move down buttons on each row |
+| `max` | `number` | — | at this many rows, Add is disabled and says why |
+| `min` | `number` | — | at this many rows, Remove is disabled |
+| `empty-title`, `empty-description` / `#empty` | `string` / slot | — | an `EmptyState` when there is no row; the slot replaces it |
+| `disabled` | `boolean` | `false` | disables every button |
+
+Without a form library, `RepeatableGroup` takes the rows and listens to the
+actions; the move buttons show only with a `@move` listener:
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { RepeatableGroup, TextField } from '@nxgt/material-vue/components';
+
+type Guest = { id: string; name: string };
+const guests = ref<Guest[]>([]);
+const add = () => guests.value.push({ id: crypto.randomUUID(), name: '' });
+const remove = (index: number) => guests.value.splice(index, 1);
+</script>
+
+<template>
+  <RepeatableGroup label="Guests" row-label="guest" :items="guests" @add="add" @remove="remove">
+    <template #row="{ item }">
+      <TextField v-model="item.name" label="Name" />
+    </template>
+  </RepeatableGroup>
+</template>
+```
+
+`get-key` defaults to the item's `key`, then its `id`, then the index.
+vee-validate's `useFieldArray` gives each entry a `key`, so
+`RepeatableGroupFormField` needs none; a plain list keyed by `id` needs none
+either. `error` shows an error under the rows.
+
+`row-label` is a lower-case noun. The French templates carry the feminine
+article ("Ajouter une ligne", "Retirer la ligne 2"), so a French app passes a
+feminine noun (`row-label="période"`), or overrides `add-label` and the
+`material.repeatable-group.*` keys in its own bundle (`mergeResources`) for a
+masculine one.
+
+- **Semantics:** a `role="group"` named by `label`, its rows a list
+  (`getAllByRole('listitem')`), each row's icon buttons named after it
+  ("Remove period 2", "Move period 2 up").
+- **Focus and announcements:** see
+  [Rows a user adds and removes](../guides/forms.md#rows-a-user-adds-and-removes);
+  at `max`, Add stays focusable (`aria-disabled`) and is described by
+  "Maximum reached (6)".
+- **Errors:** the array's own error (the error at `name`) describes the group;
+  each row's fields show their own.
+- **Layout:** one column on a phone, columns of at least 11rem from a container
+  width of `@xl`; no inline style.
+
+**Storybook:** `Form fields/RepeatableGroup` · **React:** `RepeatableGroup`, `RepeatableGroupFormField`
+
+---
+
 ## TextField
 
 ![TextField](../previews/form-fields-textfield.webp)
@@ -513,8 +633,34 @@ const query = ref('');
 | `@value-change` | `(value: string) => void` | — | the text, debounced when `debounce-ms` is set |
 | `debounce-ms` | `number` | `0` | delay before `value-change`; `0` emits it on every key |
 | `loading` | `boolean` | `false` | spinner in the input |
+| `shortcut` | `string` | — | a hint for the key that focuses the field, e.g. `"/"`: a `Kbd` at the end while the field is empty, not loading and not disabled (`aria-hidden`) and `aria-keyshortcuts` on the input. It binds no key; your page listens and calls `focus()` on the component ref (exposed) |
 | `v-model` | `string` | — | still updated on every key, undebounced |
 
+The `shortcut` hint binds no key; the page does, and calls the exposed
+`focus()`:
+
+```vue
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import { SearchField } from '@nxgt/material-vue/components';
+
+const searchRef = ref<InstanceType<typeof SearchField> | null>(null);
+const onKey = (event: KeyboardEvent) => {
+  const target = event.target as HTMLElement;
+  if (event.key === '/' && !target.closest('input, textarea, [contenteditable]')) {
+    event.preventDefault();
+    searchRef.value?.focus();
+  }
+};
+onMounted(() => document.addEventListener('keydown', onKey));
+onUnmounted(() => document.removeEventListener('keydown', onKey));
+</script>
+
+<template>
+  <SearchField ref="searchRef" shortcut="/" />
+</template>
+```
+
 **Emits:** `update:modelValue` and `value-change`, both `string`;
 `SearchFormField` stores `string`.
 **Form wrapper:** `SearchFormField` — `name` inside a vee-validate form, see

package/docs/components/overlays-and-menus.md

@@ -637,6 +637,8 @@ Parts: `Command`, `CommandDialog`, `CommandInput`, `CommandList`,
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `value` (`CommandItem`) | `string` | — (required) | the item's value, emitted by `@select` and by `Command`'s `v-model` |
+| `checked` (`CommandItem`) | `boolean` | — | sets `aria-checked` and shows a checkbox indicator, for a multi-choice list; reka's `aria-selected` keeps meaning "selected value" (`multiple` is not used) |
+| `multiselectable` (`CommandList`) | `boolean` | — | sets `aria-multiselectable` on the list |
 | `@select` (`CommandItem`) | `(event) => void` | — | Enter or click on the item; `event.detail.value` is its `value` |
 | `heading` (`CommandGroup`) | `string` | — | the group's label |
 | `title` / `description` (`CommandDialog`) | `string` | `"Command Palette"` / `"Search for a command to run..."` (translated) | the dialog's title and description, visually hidden |

package/docs/components/primitives.md

@@ -193,14 +193,16 @@ import { Typography } from '@nxgt/material-vue/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `variant` | `'huge-larger' \| 'huge-large' \| 'huge-medium' \| 'huge-small' \| 'headline-larger' \| 'headline-large' \| 'headline-medium' \| 'headline-small' \| 'title-large' \| 'title-medium' \| 'title-small' \| 'body-medium' \| 'body-small' \| 'caption' \| 'normal'` | `'normal'` | size and weight; `caption` is also muted |
+| `tone` | `'default' \| 'muted' \| 'primary' \| 'error'` | `'default'` | text colour: `muted` is `text-muted-foreground`, `primary` is `text-primary`, `error` is `text-error-text`; `default` inherits (a `class` colour still wins) |
 | `as` | a tag name or a component | `'div'` | the element to render, keeping the variant, e.g. `as="h2"` or `as="span"` |
 | `asChild` | `boolean` | `false` | merge the classes onto the single child instead of rendering an element |
 
-It renders a `<div>` unless `as` or `asChild` says otherwise:
+It renders a `<div>` unless `as` or `asChild` says otherwise. Use `as="span"` inside a `<button>` or a link, where a `<div>` is invalid HTML. It sets no `overflow`, so it is never a scroll region: text with break points wraps, while an unbreakable string can overflow its box (add `wrap-anywhere` or `min-w-0`; put your own wrapper with `overflow-auto` and `tabindex="0"` around it to scroll):
 
 ```vue
 <Typography as="span" variant="title-small">Inline</Typography>
 <Typography as-child variant="body-medium"><a href="/docs">Docs</a></Typography>
+<Typography tone="muted" variant="body-medium">Jan 3 to Jan 9</Typography>
 ```
 
 The variants are also exported as `typographyVariants` for use on your own elements. Vue has one more step than React, `huge-larger`.

package/docs/components/selection-and-choice.md

@@ -463,7 +463,7 @@ const picked = ref<string[]>(['astro']);
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: string }[]` | — | required; the boxes |
+| `options` | `{ value: string; label: string; count?: number }[]` | — | required; the boxes; `count`: see [option counts](#option-counts). |
 | `v-model` | `string[]` | `[]` | the checked values; the new list on each toggle |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
 | `label`, `helper-text` | `string` | — | the question and its help or error text, above the boxes |
@@ -487,6 +487,10 @@ stops matching.
 The `#helper-text` slot replaces the helper text's content (shown only while
 `helper-text` is set) and stays part of the group's description.
 
+#### Option counts
+
+`count` on an option of `CheckboxGroup`, `RadioGroupField` or `SelectChipField` shows a number after the label, in muted `tabular-nums` text, and joins the accessible name: the number as plain text plus a visually hidden unit word, so the option is named "CE1 24 results" (it starts with the visible label). The unit is the ICU plural `material.option-count.label` (`result` / `results`; `résultat` / `résultats` in French), so override it in your resources for another noun. `0` is a valid count.
+
 **Emits:** `update:modelValue` with `string[]`.
 **Form wrapper:** `CheckboxGroupFormField` — `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).
@@ -524,7 +528,7 @@ React the labelled one is called `RadioGroup`.
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `options` | `{ value: string; label: string; disabled?: boolean }[]` | — | required; the radios; `disabled` on an option disables only it |
+| `options` | `{ value: string; label: string; disabled?: boolean; count?: number }[]` | — | required; the radios; `disabled` on an option disables only it; `count`: see [option counts](#option-counts). |
 | `v-model` | `string` | — | the selected `value` |
 | `orientation` | `'vertical' \| 'horizontal'` | `'horizontal'` | layout |
 | `label`, `helper-text`, `error`, `disabled` | | — | the field's text and state |
@@ -652,11 +656,31 @@ const picked = ref<string[]>([]);
 </template>
 ```
 
+With icons, counts, and a single choice that stays chosen when pressed again:
+
+```vue
+<script setup lang="ts">
+import { AtomIcon } from '@lucide/vue';
+import { markRaw, ref } from 'vue';
+
+const level = ref<string[]>([]);
+const levels = [
+	{ value: 'ce1', label: 'CE1', count: 24, icon: markRaw(AtomIcon) },
+	{ value: 'ce2', label: 'CE2', count: 1 },
+];
+</script>
+
+<template>
+  <SelectChipField v-model="level" label="Level" :options="levels" :deselectable="false" />
+</template>
+```
+
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
-| `mode` | `'single' \| 'multiple'` | `'single'` | clicking the selected chip in `single` mode clears it |
+| `mode` | `'single' \| 'multiple'` | `'single'` | clicking the selected chip in `single` mode clears it, unless `deselectable` is `false` |
+| `deselectable` | `boolean` | `true` | `false`: in `single` mode a second press keeps the chosen chip chosen, as a radio group does; another chip still replaces it |
 | `v-model` | `string[]` | `[]` | the selected values, even in `single` mode |
-| `options` | `{ value: string; label: string }[]` | — | required; the chips |
+| `options` | `{ value: string; label: string; icon?: Component; count?: number }[]` | — | required; the chips (`icon`: a component, such as a `@lucide/vue` icon, shown before the label); `count`: see [option counts](#option-counts). |
 | `label`, `helper-text`, `error`, `disabled` | | — | the field's text and state |
 
 **Accessibility:** the chips are toggle buttons in a `role="group"` named by