@nxgt/material-vue 0.37.1 → 0.38.0

package/dist/{pdf-outline-sidebar-DJJ-ARco.js → pdf-outline-sidebar-BsePJlTi.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-B_s5oxUp.js";
+import { t as r } from "./use-material-translation-1FdRx9I7.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-Ct313mNF.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-B_s5oxUp.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-JrRo2BeU.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-B_s5oxUp.js";
+import { t as n } from "./pdf-page-Ct313mNF.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-tABBZMbZ.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-B_s5oxUp.js";
+import { t as n } from "./use-material-translation-1FdRx9I7.js";
+import { t as r } from "./Button-5UyKA-x_.js";
+import { o as i } from "./HoverCardTrigger-CmCDiTn8.js";
+import { n as a } from "./pdf-page-Ct313mNF.js";
+import { t as o } from "./pdf-page-list-JrRo2BeU.js";
+import { t as s } from "./pdf-sidebar-Caw9rzU-.js";
+import { t as c } from "./pdf-toolbar-BM8Sz_JN.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-Caw9rzU-.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-1FdRx9I7.js";
+import { t as r } from "./pdf-outline-sidebar-BsePJlTi.js";
+import { t as i } from "./pdf-thumbnail-sidebar-ZybLeUG7.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-ZybLeUG7.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-B_s5oxUp.js";
+import { t as r } from "./use-material-translation-1FdRx9I7.js";
+import { t as i } from "./pdf-page-Ct313mNF.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-BM8Sz_JN.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 { t as n } from "./use-material-translation-1FdRx9I7.js";
+import { d as r } from "./Button-5UyKA-x_.js";
+import { t as i } from "./icon-button-DhqJE6Ej.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 { o as d } from "./HoverCardTrigger-CmCDiTn8.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-1FdRx9I7.js";
+import { t as n } from "./Button-5UyKA-x_.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-CQFIVeUA.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-CvOHC8AD.js";
+import { r } from "./translator-k1rKIgC7.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-CKkWYijj.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-1FdRx9I7.js";
+import { t as n } from "./icon-button-DhqJE6Ej.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-CvOHC8AD.js}

@@ -752,6 +752,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 +1224,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: {
@@ -1976,6 +1988,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 +2460,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-CsVKbwFk.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-B_s5oxUp.js";
+import { t as l } from "./use-material-translation-1FdRx9I7.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-k1rKIgC7.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-CvOHC8AD.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-D-ipoQwl.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-B2q6vp6H.js";
+import { a as e } from "./i18n-provider-BEvjls8b.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-1FdRx9I7.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-CvOHC8AD.js";
+import { a as e } from "./i18n-provider-BEvjls8b.js";
+import { i as t, r as n } from "./translator-k1rKIgC7.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/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

package/docs/guides/forms.md

@@ -619,6 +619,40 @@ const onSubmit = handleSubmit((values) => emit('save', values));
   `{ [attribute.name]: value }` to its `name`. Its starting values come from
   its `default-values` prop, not from the form.
 
+### Rows a user adds and removes
+
+When the rows are fields of their own — a school year's periods, each with a
+name, a start date and an end date — use
+[`RepeatableGroupFormField`](../components/form-fields.md#repeatablegroup)
+over vee-validate's `useFieldArray`, and render each row's fields with the
+form's own wrappers in its `row` slot:
+
+```vue
+<RepeatableGroupFormField
+  name="periods"
+  label="Periods"
+  row-label="period"
+  :max="6"
+  reorderable
+  :new-row="() => ({ name: '' })"
+>
+  <template #row="{ path }">
+    <TextFormField :name="`${path}.name`" label="Name" />
+    <DateFormField :name="`${path}.start`" label="Start date" />
+  </template>
+</RepeatableGroupFormField>
+```
+
+- A row's field shows its own error (`periods[1].name`); the array's own
+  error (`.min(2)` on the array) shows under the rows and describes the group.
+- The slot's `path` is `periods[1]`, not `name`: a slot's `name` attribute is
+  the slot's own.
+- The group moves the focus as rows come and go (an added row's first field,
+  a removed row's neighbour or Add, a moved row's move button) and announces each change politely
+  ("Added period 3"), after its own buttons only: a row your
+  own code pushes leaves the focus where it is
+  ([what to do](../troubleshooting.md#the-focus-does-not-move-to-a-new-row-of-a-repeatablegroupformfield)).
+
 ## Config-driven forms
 
 `Field` renders the field that matches a config `type`, which is useful when

package/docs/roadmap.md

@@ -162,6 +162,13 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Rows a user adds, removes and reorders** — `RepeatableGroup` and
+  `RepeatableGroupFormField` over the form library's field array: rows from
+  the `row` slot, a list for assistive tech, Remove and move buttons named after
+  the row ("Remove period 2"), `max` and `min`, an empty state, focus that
+  follows each change, polite announcements, and the array's own error under
+  the rows. One column on a phone. 0.38.0.
+
 - **Signed-out pages and two-step verification** — `AuthCard`, the frame of a
   sign-in page (one `main`, the card's title its `h1`, a status or alert
   notice, safe-area padding); `EnrolmentSecret`, a TOTP enrolment's QR code,