@nxgt/material-vue 0.23.4 → 0.25.0

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

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

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

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

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

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

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

package/docs/components/data-display.md

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

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