@nxgt/material-vue 0.24.0 → 0.25.0

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

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.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 { $t as t, Jt as n, Qt as r, Yt as i, Zt as a, en as o, jp as s, qt as c } from "./components-DRBKkOqk.js";
+import { t as l } from "./use-material-translation-B6sIk0mF.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,50 +19,50 @@ var S = ["data-layout", "aria-label"], C = {
 			Array
 		] }
 	},
-	setup(s) {
-		let { containerRef: g, state: w } = r();
+	setup(i) {
+		let { containerRef: g, state: w } = o();
 		function T(e) {
 			g.value = e instanceof HTMLElement ? e : null;
 		}
 		let { t: E } = l();
-		return (r, l) => (v(), f("section", {
+		return (o, l) => (v(), f("section", {
 			ref: T,
 			"data-slot": "stx-player",
-			"data-layout": s.layout,
+			"data-layout": i.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", r.$props.class))
-		}, [s.layout === "mini" ? (v(), u(a, { key: 0 })) : (v(), f("div", {
+			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", o.$props.class))
+		}, [i.layout === "mini" ? (v(), u(a, { key: 0 })) : (v(), f("div", {
 			key: 1,
-			class: _(b(e)("grid gap-3", s.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
+			class: _(b(e)("grid gap-3", i.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(c, { variant: "title-medium" }, {
+			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(s, { variant: "title-medium" }, {
 				default: x(() => [m(y(b(w).current.title), 1)]),
 				_: 1
-			}), b(w).current.artist ? (v(), u(c, {
+			}), b(w).current.artist ? (v(), u(s, {
 				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(t, null, {
-				default: x(() => [b(w).current?.kind === "audio" ? d("", !0) : (v(), u(o, {
+			h(c, null, {
+				default: x(() => [b(w).current?.kind === "audio" ? d("", !0) : (v(), u(t, {
 					key: 0,
 					tone: "overlay"
 				}, {
-					trailing: x(() => [h(i, { tone: "overlay" })]),
+					trailing: x(() => [h(r, { tone: "overlay" })]),
 					_: 1
 				}))]),
 				_: 1
 			}),
-			b(w).current?.kind === "audio" ? (v(), u(o, {
+			b(w).current?.kind === "audio" ? (v(), u(t, {
 				key: 1,
 				tone: "surface"
 			}, {
-				trailing: x(() => [h(i, { tone: "surface" })]),
+				trailing: x(() => [h(r, { tone: "surface" })]),
 				_: 1
 			})) : d("", !0)
-		], 2), s.showQueue ? (v(), u(n, {
+		], 2), i.showQueue ? (v(), u(n, {
 			key: 0,
 			class: "min-h-72"
 		})) : d("", !0)], 2))], 10, S));
@@ -99,16 +99,16 @@ var S = ["data-layout", "aria-label"], C = {
 	emits: ["trackChange"],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		function i(e, t) {
+		function a(e, t) {
 			n.onTrackChange?.(e, t), r("trackChange", e, t);
 		}
-		return (t, r) => (v(), u(s, {
+		return (t, r) => (v(), u(i, {
 			tracks: e.tracks,
 			"current-index": e.currentIndex,
 			"default-index": e.defaultIndex,
 			"auto-play": e.autoPlay,
 			loop: e.loop,
-			"on-track-change": i
+			"on-track-change": a
 		}, {
 			default: x(() => [h(w, {
 				layout: e.layout,

package/dist/{translator-CU0jKvzB.js → translator-B-X_1taI.js}

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

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

@@ -1,6 +1,6 @@
-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";
+import "./stored-language-CC_vdcCN.js";
+import { a as e } from "./i18n-provider-D0oYv0XS.js";
+import { i as t, r as n } from "./translator-B-X_1taI.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

@@ -98,10 +98,11 @@ Telling the user what happened: alert, banner, confirm dialogs, empty state, pro
 
 ## [Media & files](media-and-files.md)
 
-Uploads, file lists, images and cropping, galleries, carousel, PDF, audio/video player, camera, maps, print documents. 14 entries.
+Uploads, file lists, file previews, images and cropping, galleries, carousel, PDF, audio/video player, camera, maps, print documents. 15 entries.
 
 [<img src="../previews/media-files-uploadfield.webp" height="72" alt="UploadField">](media-and-files.md#uploadfield)
 [<img src="../previews/media-files-filelist.webp" height="72" alt="FileList">](media-and-files.md#filelist)
+[<img src="../previews/media-files-filepreview.webp" height="72" alt="FilePreview">](media-and-files.md#filepreview)
 [<img src="../previews/media-files-imagecropper.webp" height="72" alt="ImageCropper">](media-and-files.md#imagecropper)
 [<img src="../previews/media-files-pdfreader.webp" height="72" alt="PdfReader">](media-and-files.md#pdfreader)
 

package/docs/components/data-display.md

@@ -35,7 +35,7 @@ from `@nxgt/material-vue/components`.
 
 ![Avatar](../previews/data-display-avatar.webp)
 
-Round image with a fallback that shows while it loads or when it fails.
+Round image with a fallback that shows while it loads or when it fails, and an optional presence dot.
 
 ```vue
 <script setup lang="ts">
@@ -53,10 +53,23 @@ import { Avatar, AvatarFallback, AvatarImage } from '@nxgt/material-vue/componen
 Parts: `Avatar` (the round frame), `AvatarImage` (`src`, `alt`),
 `AvatarFallback` (initials or an icon in its slot). Size and shape come from
 `class` (`size-12 rounded-md`). Unlike the React `Avatar`, there is no
-`src` / `fallback` / `status` shorthand: compose the parts, and put a
-[`StatusIndicator`](#statusindicator) beside it for an online dot.
+`src` / `fallback` shorthand: compose the parts.
 
-**Storybook:** `Data display/Avatar` · **React:** `Avatar`, `AvatarImage`, `AvatarFallback`
+`status` adds a presence dot at the bottom right, named for a screen reader
+(`role="img"`): `success` "Online", `neutral` "Offline", `warning` "Away",
+`error` "Busy", any other tone "Active" (`material.avatar.*`, translated).
+`status-pulse` animates it. Attributes still land on the avatar itself.
+
+```vue
+<template>
+  <Avatar status="success" class="size-10">
+    <AvatarImage src="/people/ada.png" alt="Ada Lovelace" />
+    <AvatarFallback>AL</AvatarFallback>
+  </Avatar>
+</template>
+```
+
+**Storybook:** `Data display/Avatar` (story `Status`) · **React:** `Avatar`, `AvatarImage`, `AvatarFallback`
 
 ---
 
@@ -463,7 +476,7 @@ import { Icon, ListTile } from '@nxgt/material-vue/components';
 
 ![AccordionCard](../previews/data-display-accordioncard.webp)
 
-Renders `items` (title, content) as a styled accordion.
+Renders `items` (title, content) as a styled accordion, with `#header`, `#title` and `#content` slots.
 
 ```vue
 <script setup lang="ts">
@@ -492,11 +505,37 @@ const open = ref('shipping');
 | `showIcon` | `boolean` | `true` | decorative chevron on each header, inside the trigger `<button>` |
 | `v-model` | `string \| string[]` | — | open item(s); omit for an uncontrolled accordion |
 
-Titles and content are strings; React's `renderHeader` has no Vue
-equivalent — build a custom one from the `Accordion` primitives.
+Titles and content are strings; the slots take markup instead (React's
+`title` / `content` nodes and `renderHeader`). Each receives `{ item, index }`:
+
+| Slot | Replaces |
+| --- | --- |
+| `#title` | the header's text, beside the chevron |
+| `#content` | the panel's content |
+| `#header` (also `title`) | the whole header: one element, which becomes the trigger — a `<button>`, as React's `renderHeader` returns |
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { AccordionCard } from '@nxgt/material-vue/components';
+
+const open = ref('shipping');
+const items = [
+  { key: 'shipping', title: 'Shipping', content: 'Ships within two working days.' },
+  { key: 'returns', title: 'Returns', content: 'Free returns for 30 days.' },
+];
+</script>
+
+<template>
+  <AccordionCard v-model="open" :items="items">
+    <template #title="{ item, index }">{{ index + 1 }}. {{ item.title }}</template>
+    <template #content="{ item }"><p><strong>{{ item.title }}:</strong> {{ item.content }}</p></template>
+  </AccordionCard>
+</template>
+```
 
 **Emits:** `update:modelValue` with `string | string[]`.
-**Storybook:** `Data display/AccordionCard` · **React:** `AccordionCard`
+**Storybook:** `Data display/AccordionCard` (story `Slots`) · **React:** `AccordionCard`
 
 ---
 
@@ -816,7 +855,9 @@ import { QRCode } from '@nxgt/material-vue/components';
 
 <template>
   <QRCode value="https://example.com/tickets/DS-184" :size="160" level="H">
-    <img src="/logo.svg" alt="" width="32" />
+    <template #logo>
+      <img src="/logo.svg" alt="" width="32" />
+    </template>
   </QRCode>
 </template>
 ```
@@ -829,7 +870,7 @@ import { QRCode } from '@nxgt/material-vue/components';
 | `fgColor`, `bgColor` | `string` | `'#000000'`, `'#FFFFFF'` | colours |
 | `title` | `string` | — | accessible label of the SVG |
 | `aria-label` | `string` | — | the SVG's name too, and wins over `title` |
-| default slot | — | — | the logo, centred over the code on a white pad |
+| `#logo` | slot | — | the logo, centred over the code on a white pad (React's `logo`); the default slot still works |
 
 The code is an `<svg role="img">` named by `aria-label`, else `title`, else
 "QR code" (`material.qrcode.label`, translated):

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

@@ -392,6 +392,10 @@ own) and `TreeItem` (one row); `findTreeNode` and `flattenVisibleTree`.
 Arrow keys move and expand / collapse, Home / End jump, Enter and Space
 select.
 
+Tab lands on the focused row, or on the first visible row when that one is
+filtered or folded away. `useTree` returns that row as `tabbableId`: give it
+`tabindex="0"` in a tree you build yourself.
+
 **Emits:** `update:selectedIds` and `update:expandedIds` with `string[]`, `select`.
 **Storybook:** `Data table, filter & lists/Tree` · **React:** `Tree`, `TreeItem`, `useTree`
 

package/docs/components/date-and-time.md

@@ -70,7 +70,7 @@ No form wrapper — use `DateFormField`.
 
 ![DateField](../previews/date-time-datefield.webp)
 
-Labelled trigger that opens a calendar popover, with an optional time picker.
+Labelled trigger that opens a calendar popover, with an optional time picker and `disabled-days`.
 
 ```vue
 <script setup lang="ts">
@@ -81,7 +81,12 @@ const delivery = ref<Date | undefined>();
 </script>
 
 <template>
-  <DateField v-model="delivery" label="Delivery date" placeholder="Pick a day" />
+  <DateField
+    v-model="delivery"
+    label="Delivery date"
+    placeholder="Pick a day"
+    :disabled-days="[{ dayOfWeek: [0] }, { before: new Date() }]"
+  />
 </template>
 ```
 
@@ -89,10 +94,12 @@ const delivery = ref<Date | undefined>();
 | --- | --- | --- | --- |
 | `v-model` | `Date \| undefined` | — | the selected day, shown in the short `P` format |
 | `show-time-picker` | `boolean` | — | adds a `TimePicker` and an OK button; the popover stays open |
+| `disabled-days` | `DisabledDays` | — | days that cannot be picked: a `Date`, a `Date[]`, `{ from, to }` (ends included), `{ before }`, `{ after }`, `{ before, after }`, `{ dayOfWeek }` (`0` is Sunday), a `(date) => boolean`, or a list of those (any that matches) — React's `disabledDays` |
 | `placeholder`, `label`, `helper-text`, `error`, `required`, `disabled` | | — | `placeholder` is the trigger's text; `label` and `helper-text` sit beside it; `error`, `required` and `disabled` its state |
 
-Unlike React, the calendar's own props (bounds, disabled days) are not passed
-through; the popover closes on the first pick unless `show-time-picker` is
+Unlike React, the calendar's other props (bounds, the first month) are not
+passed through: use `disabled-days` for both bounds and days. A disabled day
+is greyed out and cannot be picked. The popover closes on the first pick unless `show-time-picker` is
 set, and picking a day keeps the time of the current value.
 
 Attributes you put on the field (`id`, `aria-describedby`, `data-*`,
@@ -113,7 +120,7 @@ before your `aria-describedby` ids.
 **Emits:** `update:modelValue` with `Date | undefined`.
 **Form wrapper:** `DateFormField` — `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:** `Date & time/DateField` · **React:** `DateField`, `DateFormField`
+**Storybook:** `Date & time/DateField` (story `DisabledDays`) · **React:** `DateField`, `DateFormField`
 
 ---
 
@@ -121,7 +128,7 @@ before your `aria-describedby` ids.
 
 ![DateRangeField](../previews/date-time-daterangefield.webp)
 
-From / to range picked in a popover calendar.
+From / to range picked in a popover calendar, with `disabled-days`, presets and times.
 
 ```vue
 <script setup lang="ts">
@@ -132,17 +139,26 @@ const stay = ref<DateRange | undefined>();
 </script>
 
 <template>
-  <DateRangeField v-model="stay" label="Stay" placeholder="Check-in – check-out" />
+  <DateRangeField
+    v-model="stay"
+    label="Stay"
+    placeholder="Check-in – check-out"
+    :disabled-days="{ dayOfWeek: [0] }"
+  />
 </template>
 ```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `v-model` | `DateRange \| undefined` | — | `{ from?: Date; to?: Date }` |
+| `disabled-days` | `DisabledDays` | — | days that cannot be picked: a `Date`, a `Date[]`, `{ from, to }` (ends included), `{ before }`, `{ after }`, `{ before, after }`, `{ dayOfWeek }` (`0` is Sunday), a `(date) => boolean`, or a list of those (any that matches) — as on `DateField` |
 | `placeholder`, `label`, `helper-text`, `error`, `required`, `disabled` | | — | `placeholder` is the trigger's text; `label` and `helper-text` sit beside it; `error`, `required` and `disabled` its state |
+| `presets` | `readonly DateRangePresetOption[]` | — (no list) | one-click ranges beside the calendar: built-in ids (`DATE_RANGE_PRESET_IDS`) and `{ label, range }` of your own |
+| `with-time` | `boolean` | `false` | a time of day on each end, under the calendar, and on the trigger; the popover stays open until OK |
+| `min-date`, `max-date` | `Date` | — | the first and last day that can be picked (Reka's `minValue` / `maxValue`) |
 
 It emits on each click (`to` is unset after the first) and closes the popover
-once both ends are picked.
+once both ends are picked (with `with-time`, OK closes it).
 
 Attributes you put on the field (`id`, `aria-describedby`, `data-*`,
 listeners) go on the trigger, the element that has focus, not on the field's
@@ -159,11 +175,97 @@ the helper text sit beside the trigger in the field's root `div`
 (`data-slot="date-range-field"`), not in it; the helper text describes the trigger
 before your `aria-describedby` ids.
 
+### Presets
+
+`presets` lists one-click ranges beside the calendar (above it on a narrow
+screen), in the order you give them. A built-in id is translated
+(`material.date-range-field.preset.<id>`); a preset of your own is
+`{ label, range }`, where `range` is `{ from, to }` or `(now) => ({ from, to })`.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import {
+  type DateRange,
+  DateRangeField,
+  type DateRangePreset,
+} from '@nxgt/material-vue/components';
+
+const lastQuarter: DateRangePreset = {
+  label: 'Last quarter',
+  range: (now) => {
+    const start = new Date(now.getFullYear(), Math.floor(now.getMonth() / 3) * 3 - 3, 1);
+    return { from: start, to: new Date(start.getFullYear(), start.getMonth() + 3, 0) };
+  },
+};
+const period = ref<DateRange | undefined>();
+const today = new Date();
+</script>
+
+<template>
+  <DateRangeField
+    v-model="period"
+    label="Period"
+    :max-date="today"
+    :presets="['today', 'last-7-days', 'this-month', 'last-month', lastQuarter]"
+  />
+</template>
+```
+
+| Built-in id | Range |
+| --- | --- |
+| `today`, `yesterday` | that day |
+| `last-7-days`, `last-30-days` | ends today and counts it |
+| `this-month`, `this-year` | from the first day to today |
+| `last-month` | the whole previous month |
+
+A built-in range starts at 00:00 (and with `with-time` ends at 23:59); your
+own ranges keep the times you gave them. Picking a preset sets the value and
+closes the popover (with `with-time` it stays open); open again, the calendar
+is on that range's month. The list is a group named "Presets"
+(`material.date-range-field.presets`) of buttons in the tab order, and the
+one whose days are the value's has `aria-pressed="true"`. A preset is
+disabled when its range starts before `min-date`, ends after `max-date`, or
+either end is one of `disabled-days`; the days between are not checked, as the
+calendar lets a range span a disabled day.
+The built-in presets use the current date when the popover opens; there is
+no `now` prop, and none is planned. A preset of your own whose end comes
+before its start is disabled.
+
+### Times
+
+`with-time` adds two `TimePicker`s under the calendar, in groups named
+"Start time" and "End time" (`material.date-range-field.start-time`,
+`.end-time`), each disabled until its end has a day, and an OK button
+(`material.buttons.ok`) that closes the popover. The trigger shows each end
+with its time (date-fns `Pp`).
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { type DateRange, DateRangeField } from '@nxgt/material-vue/components';
+
+const slot = ref<DateRange | undefined>();
+</script>
+
+<template>
+  <DateRangeField v-model="slot" label="Booking" with-time :presets="['today']" />
+</template>
+```
+
+A day picked on the calendar keeps the time that end had; a new start is
+00:00 and a new end 23:59, as a built-in preset ends, so a filter on
+`<= to` keeps the last day. On the same day, an end time set before the
+start time becomes the start time.
+
+Without `with-time`, a picked day carries the current time of day.
+(`@nxgt/material` gives it 00:00.)
+
 **Emits:** `update:modelValue` with `DateRange | undefined` — `{ from, to }`,
 where `to` stays `undefined` until the second day is picked.
 **Form wrapper:** `DateRangeFormField` — `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:** `Date & time/DateRangeField` · **React:** `DateRangeField`, `DateRangeFormField`
+**Storybook:** `Date & time/DateRangeField` (stories `DisabledDays`, `MinMaxDates`, `Presets`, `DisabledPresets`, `WithTime`) · **React:** `DateRangeField`, `DateRangeFormField` (`withTime`, `minDate` / `maxDate`; without time, a picked day is at 00:00 there, the current time of day here)
 
 ---
 
@@ -245,6 +347,11 @@ const time = ref<Date | undefined>(new Date());
 | `label` | `string` | — | header text |
 | `#footer` | slot | — | under the inputs (the OK button in `TimeField`) |
 
+The hours and minutes inputs are named "Hours" and "Minutes"
+(`material.time-picker.hours`, `.minutes`). AM / PM shows the half of the day
+`date` is in, so a date changed from outside shows its own; switching it moves
+the time 12 hours, and a click on the pressed half changes nothing.
+
 **Emits:** `change` with `Date | undefined` (no `v-model`). No form wrapper —
 use `TimeFormField`.
 **Storybook:** `Date & time/TimePicker` · **React:** `TimePicker`

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

@@ -240,14 +240,66 @@ function archive() {}
 | --- | --- | --- | --- |
 | `#trigger` slot | — | — | becomes the dialog trigger (`as-child`, no extra button): pass one element, such as a `Button` |
 | `v-model:open` | `boolean` | uncontrolled | open state; without it the dialog keeps its own |
-| `@confirm` | `() => void` | — | emitted on confirm; the dialog then closes |
+| `@confirm` | `(values?) => void` | — | emitted on confirm, with the form's parsed values when there is one; the dialog then closes |
+| `form-options` | `ConfirmationDialogFormOptions` (`{ schema, defaultValues? }`) | — | a form in the dialog, below the default slot — see below |
 | `color` | `IconButton` colour | `'warning'` | icon and both buttons |
 | `variant` | `IconButton` variant | `'tonal'` | the icon's button style |
 | `#icon` slot | — | info icon, in a decorative `aria-hidden` badge | replaces the badge: keep yours decorative (`<IconButton as="span" aria-hidden="true">`), not a button that does nothing |
 | `confirm-text` / `cancel-text` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
 
-Vue's `ConfirmationDialog` has no `formOptions`: to collect values before
-confirming, put a form in its default slot or use `CustomDialog`.
+`form-options` puts a form in the confirmation, as React's `formOptions`:
+`schema` is a Zod 4 schema (any Standard Schema, or a vee-validate typed
+schema), `defaultValues` its initial values, and the `#form` slot renders the
+fields — `*-form-field` wrappers in it join the form. The confirm button stays
+disabled until the form is valid, and `@confirm` receives the schema's output
+(transforms applied). The component is generic, so that payload is typed from
+the schema; to type the options apart from the template, import
+`ConfirmationDialogFormOptions<TInput, TOutput>` from
+`@nxgt/material-vue/components`. Being generic, its ref is typed with
+`ComponentExposed`, not `InstanceType`
+([troubleshooting](../troubleshooting.md#does-not-satisfy-the-constraint-abstract-new-args-any--any)).
+
+```vue
+<script setup lang="ts">
+import { z } from 'zod';
+import { Button, ConfirmationDialog, TextFormField } from '@nxgt/material-vue/components';
+
+const formOptions = {
+  schema: z.object({ project: z.string().trim().pipe(z.literal('my-project')) }),
+  defaultValues: { project: '' },
+};
+
+function remove(values?: { project: 'my-project' }) {
+  console.log('deleting', values?.project);
+}
+</script>
+
+<template>
+  <ConfirmationDialog
+    title="Delete project"
+    description='Type "my-project" to confirm.'
+    color="error"
+    confirm-text="Delete"
+    :form-options="formOptions"
+    @confirm="remove"
+  >
+    <template #trigger>
+      <Button color="error">Delete project</Button>
+    </template>
+    <template #form>
+      <TextFormField name="project" label="Project name" />
+    </template>
+  </ConfirmationDialog>
+</template>
+```
+
+`#form` also receives `{ values, errors, meta, setFieldValue }` for fields
+that are not form wrappers. The form lives with the dialog's content, so it
+starts again from `defaultValues` each time the dialog opens. The form's code
+(and vee-validate) loads only when a dialog has `form-options`; confirm stays
+disabled until it has loaded and first validated. If it cannot load, after one
+retry, a translated message takes its place
+(`material.confirm-dialog.form-failed`).
 
 ![CustomAlertDialog](../previews/feedback-status-customalertdialog.webp)
 
@@ -257,7 +309,7 @@ but built on `AlertDialog`, so it does not close on an outside click. Put
 `AlertDialogCancel` / `AlertDialogAction` in its `#footer`. Its trigger is
 `as-child`, so a `Button` goes straight in.
 
-**Storybook:** `Feedback & status/ConfirmDialog`, `Feedback & status/ConfirmationDialog`,
+**Storybook:** `Feedback & status/ConfirmDialog`, `Feedback & status/ConfirmationDialog` (story `WithForm`),
 `Feedback & status/CustomAlertDialog` · **React:** `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog`
 
 ---

package/docs/components/form-fields.md

@@ -267,6 +267,7 @@ const quantity = ref<number | null>(2);
 | `hide-steppers` | `boolean` | `false` | hides the +/− buttons |
 | `#suffix` | slot | — | unit after the input |
 | `aria-label` | `string` | — | names the input when it has no `label` (a part of a larger field) |
+| `aria-labelledby` | `string` | — | names the input by another element's id (a part of a larger field) |
 
 **Emits:** `update:modelValue` with `number | null`.
 **Form wrapper:** `NumberFormField` — `name` inside a vee-validate form, see
@@ -600,9 +601,14 @@ const title = ref('Spring catalogue');
 | --- | --- | --- | --- |
 | `v-model` | `string` | `''` | the committed text; updated on save only |
 | `@save` | `(value: string) => void` | — | on save (Enter or the check button), not on each key |
+| `label` | `string` | — | shown above the text; names the input while editing |
+| `name` | `string` | — | the input's `name` while editing, and the field's `data-pw` |
 | `placeholder` | `string` | "Click to edit" | shown while empty |
 | `disabled` | `boolean` | `false` | read-only text |
 
+Enter, Escape, Save and Cancel return focus to the field, while a click
+elsewhere saves and leaves focus where it went.
+
 **Emits:** `update:modelValue` and `save`, both `string`, trimmed, on save
 only.
 **Form wrapper:** `InlineEditFormField` (`name` plus the same props; the form
@@ -720,7 +726,7 @@ name: 'Satisfaction' })`.
 
 ![Slider](../previews/form-fields-slider.webp)
 
-Labelled single or range slider with a value readout.
+Labelled single or range slider with a value readout, ticks and leading / trailing content.
 
 ```vue
 <script setup lang="ts">
@@ -731,20 +737,24 @@ const price = ref<number[]>([20, 70]);
 </script>
 
 <template>
-  <SliderField v-model="price" label="Price" :min="0" :max="100" />
+  <SliderField v-model="price" label="Price" :min="0" :max="100" :ticks="5" leading="0" trailing="100" />
 </template>
 ```
 
 In Vue the labelled field is `SliderField`; `Slider` is the bare Reka UI
 slider (track, range and thumbs, `v-model` always `number[]`) it is built on.
-React's `ticks`, `leading` / `trailing` and editable readout inputs are not
-in `SliderField`: its readout is text.
+React's editable readout inputs are not in `SliderField`: its readout is
+text. `ticks`, `leading` and `trailing` are; for markup on either side of the
+track, use the `#leading` / `#trailing` slots (`SliderFormField` passes them
+through).
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `v-model` | `number \| number[]` | `[min]` shown when unset | a number for one thumb, an array for one thumb per entry: `[20, 70]` |
 | `min`, `max`, `step` | `number` | `0`, `100`, `1` | range and increment |
 | `show-readout` | `boolean` | `true` | the value(s) next to the label |
+| `ticks` | `boolean \| number` | — | marks under the track: `true` one per `step` (at most 21), a number that many, ends included |
+| `leading`, `trailing` | `string \| number` | — | small muted text before / after the track; the `#leading` / `#trailing` slots take markup |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on every thumb |
 | `aria-invalid` | `boolean \| 'true' \| 'false'` | follows `error` | on every thumb; wins over `error` |
 
@@ -764,7 +774,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`, `SliderField` (an alias of `Slider`), `SliderFormField`
+**Storybook:** `Form fields/Slider` (story `TicksAndEnds`) · **React:** `Slider`, `SliderField` (an alias of `Slider`), `SliderFormField`
 
 ---