@nxgt/material-vue 0.23.4 → 0.25.0

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

package/docs/components/form-fields.md

@@ -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
@@ -529,7 +530,7 @@ const pin = ref('');
 **Emits:** `update:modelValue` with `string` (the digits typed so far).
 **Form wrapper:** `OtpFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/OtpField` · **React:** `OtpField`, `OtpFormField`
+**Storybook:** `Form fields/OtpField` · **React:** `OtpField`, `OtpFormField`, `InputOTP` (same parts)
 
 ---
 
@@ -600,13 +601,18 @@ 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:** none — bind `v-model` to a `useField` value, see
-[forms](../guides/forms.md#the-pair).
+**Form wrapper:** `InlineEditFormField` (`name` plus the same props; the form
+value changes on save, not while typing), see [forms](../guides/forms.md#the-pair).
 **Storybook:** `Form fields/InlineEdit` · **React:** `InlineEdit`, `InlineEditFormField`
 
 ---
@@ -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,25 +737,31 @@ 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` |
 
 Each thumb (`role="slider"`) is named by the label; a range's thumbs add
 "Minimum" and "Maximum": `getByRole('slider', { name: 'Price Minimum' })`.
+A labelled range is also a `role="group"` named by the label, so two range
+sliders are told apart.
 The bare `Slider` does the same with `label-id` (the id of your label) and
 `required`, or with an `aria-labelledby` or `aria-label` you pass (they win
 over `label-id`): a vertical `Slider`, which has no field label, needs one.
@@ -762,7 +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`, `SliderFormField`
+**Storybook:** `Form fields/Slider` (story `TicksAndEnds`) · **React:** `Slider`, `SliderField` (an alias of `Slider`), `SliderFormField`
 
 ---
 
@@ -835,7 +847,7 @@ const updates = ref(false);
 **Emits:** `update:modelValue` with `boolean`.
 **Form wrapper:** `SwitchFormField` — `name` inside a vee-validate form, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/Switch`, `Form fields/SwitchField` · **React:** `Switch`, `SwitchFormField`
+**Storybook:** `Form fields/Switch`, `Form fields/SwitchField` · **React:** `Switch`, `SwitchField` (an alias of `Switch`), `SwitchFormField`
 
 ---
 

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

@@ -10,7 +10,8 @@ printable documents — plus Leaflet maps, which live outside the barrel in
 | <img src="../previews/media-files-s3uploadfield.webp" width="96" alt=""> | [S3UploadField, NetworkUploadField](#s3uploadfield-networkuploadfield) | Drag-and-drop uploader with progress, retry, previews and size / count limits |
 | <img src="../previews/media-files-uploadfield.webp" width="96" alt=""> | [UploadField](#uploadfield) | Labelled file input holding the chosen `File` |
 | <img src="../previews/media-files-filelist.webp" width="96" alt=""> | [FileList](#filelist) | File list with type icons, size, download and remove |
-| | [FilesFormField](#filesformfield) | Not in `@nxgt/material-vue` |
+| <img src="../previews/media-files-filepreview.webp" width="96" alt=""> | [FilePreview](#filepreview) | One file previewed by its type: image, PDF, video, audio, text, or a download card |
+| | [FilesFormField](#filesformfield) | Free-solo autocomplete of file URLs, with image thumbnails |
 | <img src="../previews/media-files-imagefield.webp" width="96" alt=""> | [ImageField](#imagefield) | Single image upload with preview and progress |
 | <img src="../previews/media-files-imagecropper.webp" width="96" alt=""> | [ImageCropper](#imagecropper) | Crop with zoom, rotation, aspect presets and a round shape |
 | <img src="../previews/media-files-gallery.webp" width="96" alt=""> | [Gallery, LightboxGallery, MiniGallery](#gallery-lightboxgallery-minigallery) | Image / video gallery with a lightbox and selection |
@@ -231,13 +232,126 @@ dropzone as well read the error twice, and the group still says it once
 
 ---
 
+## FilePreview
+
+![FilePreview](../previews/media-files-filepreview.webp)
+
+Previews one file, picked by its MIME type (else its extension): an image, a PDF, a video or audio file, the text of a text, JSON, CSV or Markdown file, and a download card for anything else.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FilePreview } from '@nxgt/material-vue/components';
+
+const file = ref<File | null>(null);
+
+function pick(event: Event) {
+  file.value = (event.target as HTMLInputElement).files?.[0] ?? null;
+}
+</script>
+
+<template>
+  <input type="file" @change="pick" />
+  <!-- A File or Blob: shown through an object URL, revoked on change and unmount. -->
+  <FilePreview :file="file" @error="(error) => console.warn(error)" />
+  <!-- A URL: the kind comes from `type`, else the extension; `name` is the alt text. -->
+  <FilePreview file="/api/files/42" type="application/pdf" name="contract.pdf" />
+</template>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `file` | `File \| Blob \| string \| null` | — | the file, or its URL; nothing renders without one. A URL must be `http(s):`, relative, `blob:`, or a `data:` URL of an image, video, audio, plain text, CSV, Markdown, JSON or PDF; any other (`javascript:`, `data:text/html`, and also a `data:` URL of XML, TSV or YAML) shows the error state, with no link and nothing loaded |
+| `type` | `string` | the `Blob`'s, or a `data:` URL's | MIME type; picks the kind before the extension does |
+| `name` | `string` | the `File`'s, else the URL's last segment | shown on the card, the image's alt text and the download's file name; "Untitled file" when there is none |
+| `max-text-bytes` | `number` | `262144` (`TEXT_PREVIEW_MAX_BYTES`, 256 KB) | how much of a text kind is read; past it, the preview shows the beginning and says so |
+| `class`, other attributes | | | on the root `<figure>` |
+
+| Kind | Picked by | Renders |
+| --- | --- | --- |
+| `image` | `image/*`; `.png` `.jpg` `.jpeg` `.gif` `.webp` `.avif` `.svg` `.bmp` `.ico` | `<img>`, its alt text the file name |
+| `pdf` | `application/pdf`; `.pdf` | [`PdfReader`](#pdfreader), imported the first time a PDF is previewed; the card when the viewer cannot be loaded. A PDF the reader fails to open leaves the preview `ready`: `PdfReader` shows its own error, and the `error` event is not emitted |
+| `video` | `video/*`; `.mp4` `.m4v` `.webm` `.ogv` `.mov` | `<video controls>` |
+| `audio` | `audio/*`; `.mp3` `.wav` `.ogg` `.oga` `.m4a` `.aac` `.flac` `.opus` | `<audio controls>` |
+| `json` | `application/json`, `text/json`, `*+json`; `.json` | [`JsonViewer`](data-display.md#codeblock) |
+| `markdown` | `text/markdown`, `text/x-markdown`; `.md` `.markdown` | [`Markdown`](data-display.md#markdown), rendered; its links are sanitized like any `Markdown`, but a remote image in it still loads, so an untrusted `.md` can make the browser request a URL of its choosing |
+| `csv` | `text/csv`, `application/csv`, `text/tab-separated-values`; `.csv` `.tsv` | the text, in a `<pre>` |
+| `text` | any other `text/*`, `application/xml`, `application/yaml`, `application/javascript`…; `.txt` `.log` `.xml` `.yaml` `.yml` `.ini` `.toml` | the text, in a `<pre>` |
+| `other` | anything else, `application/octet-stream` without a known extension | a [`FileCard`](data-display.md#card-presets): icon, name, size and type, and a Download link |
+
+A text kind is fetched (a URL) or read (a `Blob`) up to `max-text-bytes` and
+decoded with the `charset` of the response's `Content-Type` (or of the
+`Blob`'s `type`) when the browser's `TextDecoder` supports it, else as UTF-8;
+a JSON or Markdown file cut by the cap is shown as plain text, with "Showing
+the first 256.0 KB of this file." below it. The `<pre>` and the Markdown box
+are regions named "Contents of {name}"; they scroll and take focus, so a
+keyboard can scroll them.
+
+The root is a `<figure>` named "Preview of {name}", with `data-kind` and
+`data-state`: `pending` on the server and before mount — an empty
+placeholder, with no object URL made and nothing fetched, so it hydrates
+without a mismatch — then `loading` ("Loading preview…", put into a `status` live region that
+stays mounted, so it is announced), `ready`
+or `error` ("This file could not be previewed.", an `alert`, with a Download
+link when there is something to download). The kind comes from
+`fileKind({ type, name, url })`, exported too, from
+[`@nxgt/material-core/file-preview`](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/README.md#a-files-preview-file-preview).
+Every string is translated (`material.file-preview.*`, see the
+[i18n guide](../guides/i18n.md)).
+
+**Emits:** `error` — `unknown`: the file could not be read (an HTTP error: `FilePreviewHttpError`, with its `status`; a refused URL: `FilePreviewUnsafeUrlError`) or shown (a broken image, video or audio file).
+**Storybook:** `Media & files/FilePreview` · **React:** `FilePreview`
+
+---
+
 ## FilesFormField
 
-Not in `@nxgt/material-vue`. For a list of file URLs use
-[`FileListFormField`](#filelist); for typed URLs with suggestions, an
-`AutocompleteFormField` with `free-solo` (see [Selection & choice](selection-and-choice.md#autocomplete)).
+No preview: it has no story title of its own. It is an
+[`AutocompleteFormField`](selection-and-choice.md#autocomplete) bound to
+vee-validate, free-solo by default.
+
+Free-solo autocomplete of file URLs, with image thumbnails.
+
+```vue
+<script setup lang="ts">
+import { useForm } from 'vee-validate';
+import { FilesFormField } from '@nxgt/material-vue/components';
+
+useForm({ initialValues: { photos: [] as string[] } });
+</script>
+
+<template>
+  <FilesFormField
+    name="photos"
+    mode="multiple"
+    label="Photos"
+    placeholder="Paste an image URL"
+    image
+    :image-link-builder="(key) => `https://cdn.example.com/${key}`"
+  />
+</template>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `name` | `string` | — | required; the vee-validate field |
+| `mode` | `'single' \| 'multiple'` | `'single'` | one URL or a list |
+| `image` | `boolean` | — | selected values show a thumbnail instead of a file icon |
+| `image-link-builder` | `(value) => string` | — | maps a stored key to the thumbnail `src` |
+| `options` | `T[]`, `T extends { value: string; label: string }` | `[]` | suggestions, typed by your own option type; any typed value is accepted too |
+| `get-option-value` / `get-option-label` | `(option: T) => string` | `option.value` / `option.label` | read another field of your option as its value or label, as on `Autocomplete` |
+| `free-solo` | `boolean` | `true` | accept values that are not in `options` |
+
+Like `Autocomplete`, it is generic over `T`, inferred from `options`; it has
+no slots of its own (the chip's leading thumbnail or file icon is its
+`#selected-leading`). Its ref is typed with
+`ComponentExposed`, not `InstanceType`
+([troubleshooting](../troubleshooting.md#does-not-satisfy-the-constraint-abstract-new-args-any--any)).
+
+For uploads rather than typed URLs, use [`FileListFormField`](#filelist).
 
-**Storybook:** — · **React:** `FilesFormField`
+**Form wrapper:** it is one — `name` inside a vee-validate form, see [forms](../guides/forms.md#the-pair).
+**Storybook:** `Selection & choice/Autocomplete` (story `FilesFormField`) · **React:** `FilesFormField`
 
 ---
 
@@ -677,7 +791,7 @@ and emits nothing: the capture stays inside the component. The helpers
 `isCameraSupported`, `getCameraDevices`, `requestCameraPermissions` and
 `capturePhotoFromVideo` are exported for building your own.
 
-**Storybook:** `Media & files/Camera` · **React:** — (a story only, not exported)
+**Storybook:** `Media & files/Camera` · **React:** `Camera`, `useCamera`, `capturePhotoFromVideo` (`createCameraStore` for the store)
 
 ---
 

package/docs/components/navigation-and-layout.md

@@ -521,6 +521,11 @@ step has no `icon`, and there is no separate `StepperIndicator`.
 | `active` | `number` | `0` | current step; its `description` is shown as helper text below, and in a hover tooltip on a decorative info icon |
 | `@change` | `(index: number) => void` | — | a step was clicked |
 | `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | vertical from `md` only; phones get the compact bar |
+| `name` | `string` | — | the stepper's `data-pw` (`stepper` without it), and the prefix of each step's: `<name>-step-N` instead of `step-N` |
+
+Each step is an `<li>` with `data-pw="step-N"` (`<name>-step-N` with `name`),
+N counted from 0, for tests to select; the current step's button carries
+`aria-current="step"`, and a completed or failed step is announced as such.
 
 **Storybook:** `Navigation & layout/Stepper` · **React:** `Stepper`
 
@@ -629,11 +634,67 @@ const toc: DocTocItem[] = [{ id: 'what', title: 'What it is', level: 2 }];
 ```
 
 Parts: `Doc` (the shell), `DocPage` (header, content, see also and pager);
-the pieces it composes — `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`,
-`DocSearch`, `DocSeeAlso`, `DocChildCards`, `DocProgress`, `DocSkipLink`,
-`DocHeader`, `DocCopyMarkdown` — and `DocEmpty` for a 404.
+the pieces it composes — `DocTopbar`, `DocSidebar`, `DocNav`, `DocArticle`,
+`DocToc`, `DocPager`, `DocSearch`, `DocSeeAlso`, `DocChildCards`,
+`DocProgress`, `DocSkipLink`, `DocHeader`, `DocCopyPage`, `DocCopyMarkdown`,
+`DocLink` — and `DocEmpty` for a 404.
 `useDoc` / `provideDoc` / `useDocContext` expose the state for a shell of
-your own. Search, the phone sheet and the active heading live in a Pinia
+your own, built from those parts:
+
+```vue
+<script setup lang="ts">
+import { useRoute, useRouter } from 'vue-router';
+import {
+  DocArticle,
+  type DocNavItem,
+  DocLink,
+  DocNav,
+  provideDoc,
+  useDoc,
+} from '@nxgt/material-vue/components';
+
+const route = useRoute();
+const router = useRouter();
+
+const items: DocNavItem[] = [
+  {
+    id: 'start',
+    title: 'Start',
+    items: [
+      { id: 'intro', title: 'Introduction', href: '/docs' },
+      { id: 'install', title: 'Install', href: '/docs/install' },
+    ],
+  },
+];
+
+provideDoc(
+  useDoc({
+    items,
+    get pathname() {
+      return route.path;
+    },
+    onNavigate: (href) => router.push(href),
+  }),
+);
+</script>
+
+<template>
+  <div class="flex">
+    <DocNav class="w-64" />
+    <DocArticle>
+      <slot />
+      <DocLink href="/docs/install">Next: Install</DocLink>
+    </DocArticle>
+  </div>
+</template>
+```
+
+`DocLink` is an anchor that navigates through `onNavigate` for an internal
+`href` (an external one opens in a new tab); without `@navigate`, it and the
+sidebar are plain anchors that load the page. `DefaultDocLink` is the same
+anchor without the navigation. `DocCopyPage` (`title`) copies the title and
+the page URL; `DocArticle` is the `#doc-content` landmark the skip link and
+copy-as-markdown target. Search, the phone sheet and the active heading live in a Pinia
 store, so the app needs `app.use(createPinia())`.
 
 | Prop | Type | Default | Effect |
@@ -649,10 +710,10 @@ store, so the app needs `app.use(createPinia())`.
 On `DocPage`: `title`, `description`, `crumbs`, `editHref`, `updatedAt`,
 `copyPage` / `copyMarkdown` (default: shown) with `markdown` for the copy
 buttons, and a
-`#badge` slot. There is no `linkComponent` on `Doc` and no `DocCopyPage`
-export in Vue.
+`#badge` slot. There is no `linkComponent` on `Doc` in Vue: wire your
+router with `@navigate`.
 
-**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **React:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`
+**Storybook:** `Navigation & layout/Doc`, `Navigation & layout/Doc/Api`, `Navigation & layout/Doc/Blocks` · **React:** `Doc`, `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress`, `DocNav`, `DocArticle`, `DocLink`, `DefaultDocLink`, `DocCopyPage`
 
 ---
 

package/docs/components/primitives.md

@@ -557,10 +557,12 @@ const invoices = [{ id: 'INV001', amount: '$250.00' }];
 Parts: `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`,
 `TableHead`, `TableCell`, `TableCaption` — each takes its HTML element's
 attributes — plus `TableEmpty`, a full-width row for "nothing here" (`colspan`
-defaults to `1`: set it to the column count). For sorting, paging and selection
+defaults to `1`: set it to the column count). The attributes you put on
+`Table` (`id`, `aria-*`, `style`, listeners) go on the `<table>`, not on its
+scrolling container; `class` too. For sorting, paging and selection
 use `DataTable` on the [Data table, filter & lists](data-table-filter-and-lists.md) page.
 
-**Storybook:** `Primitives/Table` · **React:** `Table` (same parts; no `TableEmpty`)
+**Storybook:** `Primitives/Table` · **React:** `Table` (same parts)
 
 ---
 
@@ -568,7 +570,7 @@ use `DataTable` on the [Data table, filter & lists](data-table-filter-and-lists.
 
 ![Tabs](../previews/primitives-tabs.webp)
 
-Tabs whose triggers can take an icon.
+Tabs whose triggers can take an icon. `variant="line"` is the quieter pill style.
 
 ```vue
 <script setup lang="ts">
@@ -594,18 +596,35 @@ import {
 ```
 
 Parts: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`. An icon goes in the
-trigger's slot, before the label. There is no `variant` and no `icon` prop in
-Vue: the list is one muted pill with the active trigger raised.
+trigger's slot, before the label; there is no `icon` prop in Vue. By default
+(`variant="bar"`) the list is one muted pill with the active trigger raised.
+`variant="line"` is React's quieter style: a full-width, scrolling strip of
+light tabs, the active one on the background — `TabsList` and `TabsTrigger`
+read it from `Tabs`.
+
+```vue
+<template>
+  <Tabs default-value="ts" variant="line">
+    <TabsList>
+      <TabsTrigger value="ts">TypeScript</TabsTrigger>
+      <TabsTrigger value="bash">Bash</TabsTrigger>
+    </TabsList>
+    <TabsContent value="ts">const n = 1;</TabsContent>
+    <TabsContent value="bash">bun install</TabsContent>
+  </Tabs>
+</template>
+```
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
+| `variant` (`Tabs`) | `'bar' \| 'line'` | `'bar'` | the look of the list and its triggers |
 | `default-value` / `v-model` (`Tabs`) | `string \| number` | — | the selected tab, uncontrolled / controlled |
 | `orientation` (`Tabs`) | `'horizontal' \| 'vertical'` | `'horizontal'` | arrow-key direction |
 | `activation-mode` (`Tabs`) | `'automatic' \| 'manual'` | `'automatic'` | select on focus, or only on Enter / click |
 | `value` (`TabsTrigger`, `TabsContent`) | `string \| number` | — (required) | pairs a trigger with its panel |
 
 **Emits:** `update:modelValue` on `Tabs` — `string | number`.
-**Storybook:** `Primitives/Tabs` · **React:** `Tabs` (same parts)
+**Storybook:** `Primitives/Tabs` (story `Line`) · **React:** `Tabs` (same parts)
 
 ---
 

package/docs/components/rich-widgets.md

@@ -442,11 +442,29 @@ Monaco mounts on the client only.
 | `filename` | `string` | — | shown in the header |
 | `required` | `boolean` | — | the asterisk, and `aria-required` on Monaco's textarea (its `ariaRequired` option) |
 | `label` | `string` | — | shown above the editor, and the name of Monaco's textarea (its `ariaLabel` option) |
+| `options` | `CodeEditorOptions` | — | Monaco's own construction options (`IStandaloneEditorConstructionOptions`), passed as they are; they win over the editor's defaults, and a change reaches the mounted editor |
 
-There is no `options` pass-through and no form wrapper in Vue (React has
-`CodeEditorFormField`).
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { CodeEditor, type CodeEditorOptions } from '@nxgt/material-vue/components';
 
-**Emits:** `update:modelValue` — `string`.
+const source = ref('const greeting = "hello";\n');
+const options: CodeEditorOptions = { lineNumbers: 'off', fontSize: 16, minimap: { enabled: false } };
+</script>
+
+<template>
+  <CodeEditor v-model="source" label="Snippet" :options="options" />
+</template>
+```
+
+`CodeEditorOptions` is a type-only import: Monaco still loads on the client
+only.
+
+**Emits:** `update:modelValue` — `string`; `languageChange` — `string`.
+**Form wrapper:** `CodeEditorFormField` (`name` plus the same props, `options`
+included; the error message replaces `helper-text`), see
+[forms](../guides/forms.md#the-pair).
 **Storybook:** `Rich widgets/CodeEditor` · **React:** `CodeEditor`, `CodeEditorFormField`
 
 ---