@nxgt/material-vue 0.35.0 → 0.37.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @nxgt/material-vue
 
+## 0.37.0
+
+### Minor Changes
+
+- [#553](https://github.com/softistx/nxgt-material/pull/553) [`d4c7848`](https://github.com/softistx/nxgt-material/commit/d4c7848768d97e458a77aa8d96c127c13430250f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Autocomplete: `searchError` is honoured with `onSearch` too (softistx/nxgt-material#551): when it is set, the app's own reason is shown and announced in place of the generic "The search failed. Try again." (a rejected `onSearch` still reaches `onSearchError` / `@search-error`, where the app can keep the reason and pass it back). And an option can be disabled on its own (softistx/nxgt-material#552): `options[].disabled`, in the local `options` and in what `onSearch` returns, is rendered greyed out with `aria-disabled` and never picked, by click or Enter, in `single` and `multiple` mode. In `@nxgt/material` the arrow keys still reach it so that it is announced (Base UI's combobox behaviour); in `@nxgt/material-vue` Tab skips it and Enter picks the first enabled option. Both packages export the option type with `disabled?`. Workarounds for [#551](https://github.com/softistx/nxgt-material/issues/551) and [#552](https://github.com/softistx/nxgt-material/issues/552) can be removed. Fixes [#551](https://github.com/softistx/nxgt-material/issues/551), fixes [#552](https://github.com/softistx/nxgt-material/issues/552).
+
+### Patch Changes
+
+- [#555](https://github.com/softistx/nxgt-material/pull/555) [`1fe6a5c`](https://github.com/softistx/nxgt-material/commit/1fe6a5c752610f8bc6ed9121c667887cebb92934) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DialogContent` and `AlertDialogContent` used to overflow the screen: a tall
+  dialog on a phone left its title off-screen. They are now capped at the dynamic
+  viewport (`max-h-[calc(100dvh-2rem)]`, `100vh` where `dvh` is unsupported) and
+  scroll inside themselves. On browsers with `dvh` support, an app's own
+  `max-h-*` class wins. `SheetContent` scrolls too, and a top or bottom sheet is
+  capped at the viewport.
+  
+  Content wider than the dialog now scrolls horizontally or is clipped. To keep
+  the old behaviour, pass `max-h-none overflow-visible` as the `className`
+  (React) or `class` (Vue). For a dialog that should grow taller than the screen
+  and scroll inside the overlay instead of capping, use `DialogScrollContent`.
+
+## 0.36.0
+
+### Minor Changes
+
+- [#535](https://github.com/softistx/nxgt-material/pull/535) [`a088c1c`](https://github.com/softistx/nxgt-material/commit/a088c1c8f08f8c4483fe0ba0e35eedfbe1b193f9) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Three form and focus helpers, the same names in both libraries (softistx/nxgt-material#500). Fixes [#500](https://github.com/softistx/nxgt-material/issues/500).
+  
+  - **`useFocusOnMount<T>(focus?)`** (`@nxgt/material/hooks`, `@nxgt/material-vue/composables`, auto-imported by the Nuxt module): the element takes focus once mounted, and again whenever `focus` turns true. Put it on the heading of what replaced the content the user acted on (a wizard's next step, "Message sent"), with `tabIndex={-1}` / `tabindex="-1"`. React returns a `RefObject`, Vue a `ShallowRef` to bind with `ref="…"`.
+  - **`useSubmitOnce(busy?)`** (same entries): one submit in flight. `const submitOnce = useSubmitOnce(); <form onSubmit={submitOnce(handleSubmit(save))}>` (Vue: `const onSubmit = submitOnce(handleSubmit(save))`) drops a double click or a second Enter until `save` ends; a dropped call's event has its default prevented. Return the request's promise, or pass its busy flag (Vue: a ref or getter): the guard then opens once the flag was true and is false again, for the submit that was on its way when it rose. Without `busy`, a handler that returns no promise (an early `return`) opens the guard at once. The framework-free `createSubmitGuard()` and `busySettler(guard)` are re-exported by both from `@nxgt/material-core/submit-guard`.
+  - **`useCodeResolver(schema, { translate, codeOf?, language? })`** (`@nxgt/material/components`, `@nxgt/material-vue/components`): a zod 4 schema's errors worded in the page's language. A refinement carrying `params.code` (`.refine(isFree, { params: { code: 'errors.taken' } })`) reads as your translator's words for that code, every other issue as `zodLocaleError`'s, with your `material.zod.*` overrides. `createCodeErrorMap`, `defaultCodeOf`, `isEmptyRequired` and the type `CodeIssue` are exported beside it. React returns a react-hook-form `Resolver` (`useForm({ resolver })`); Vue a computed vee-validate `TypedSchema` (`useForm({ validationSchema })`), so a language switch re-words the errors on screen.
+  - `@nxgt/material-core` adds `/submit-guard` (`createSubmitGuard` with `once(run, { settleSync })`, a run-scoped `settle(run)` and `pendingRun()`, and `busySettler`) and `/code-errors` (`createCodeErrorMap`, `defaultCodeOf`, `isEmptyRequired`): the error map is typed by shape, with no zod dependency.
+  
+  An app with a local copy marked `To extract to material (request [#500](https://github.com/softistx/nxgt-material/issues/500))` — `useFocusOnMount`, `createSubmitGuard` / `useSubmitOnce`, `useCodeResolver` and the code error map behind it — can delete it and import the same names from `@nxgt/material` / `@nxgt/material-vue` (`createSubmitGuard` and `createCodeErrorMap` from `@nxgt/material-core/submit-guard` and `/code-errors`). A local `useSubmitOnce(busy)` keeps its call; a local code error map becomes `useCodeResolver(schema, { translate, codeOf })`, with `codeOf: (issue) => (isEmptyRequired(issue) ? '<your required code>' : defaultCodeOf(issue))` where empty required fields had a code of their own.
+
+- [#531](https://github.com/softistx/nxgt-material/pull/531) [`031a67c`](https://github.com/softistx/nxgt-material/commit/031a67ca5d837e4f0a55745c1be96566a19f578c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `FormSection` (Storybook `Form fields/FormSection`), a titled section of a
+  long form: a heading (an `h2` by default, `titleAs` / `title-as` for `h3`–`h6`),
+  an optional description and actions beside the title, then its fields. Inside
+  the form grid (`.form-grid-layout` / `[data-slot="form-fields"]`) it spans the
+  whole row and lays its fields out in the grid's columns, one column on a
+  phone; switches, textareas, chips and file fields still take a row of their
+  own. A rule separates it from the section before (`separated`, default on).
+  It is a `role="group"` named by its heading and described by its
+  description, so `getByRole('group', { name: 'Profile' })` finds it.
+  
+  ```tsx
+  <form className="form-grid-layout">
+    <div data-slot="form-fields">
+      <FormSection title="Profile" description="Shown on your public page.">
+        <TextFormField control={control} name="name" label="Name" />
+      </FormSection>
+    </div>
+  </form>
+  ```
+  
+  ```vue
+  <FormSection title="Profile" description="Shown on your public page.">
+    <template #actions><Button size="sm">Add</Button></template>
+    <TextFormField name="name" label="Name" />
+  </FormSection>
+  ```
+  
+  Fixes [#499](https://github.com/softistx/nxgt-material/issues/499).
+  
+  Migration: an app with a local section shell marked `To extract to material
+  (request [#499](https://github.com/softistx/nxgt-material/issues/499))` — a `SectionTitle` heading (`text-sm font-semibold uppercase
+  tracking-wide text-muted-foreground`) followed by its fields, with a
+  `Separator` between sections inside `[data-slot="form-fields"]` — can delete
+  it and wrap each section's fields in `FormSection` from `@nxgt/material` /
+  `@nxgt/material-vue` instead: `title` replaces the `SectionTitle`, and the
+  `Separator` goes (the rule is drawn by the section).
+
+- [#544](https://github.com/softistx/nxgt-material/pull/544) [`e071e15`](https://github.com/softistx/nxgt-material/commit/e071e15a1d3b31c7e8fe7ad83d5a206687d18d9f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Signed-out pages and two-step verification: `AuthCard`, `EnrolmentSecret` and `RecoveryCodes`, the same names in both libraries (`@nxgt/material/components`, `@nxgt/material-vue/components`, registered by the Nuxt module). Fixes [#498](https://github.com/softistx/nxgt-material/issues/498).
+  
+  - **`AuthCard`** (Storybook `Navigation & layout/AuthCard`): the frame of a sign-in, sign-up or reset page. One `<main tabIndex={-1}>` (focusable by script, never by Tab), a centred card whose `title` is the page's `h1`, a `description`, a `notice` above the form (`noticeTone` `'info'` | `'success'` | `'warning'` are `role="status"`, `'error'` is `role="alert"`), `focusTitle` to move the focus to the `h1` on an end state ("Check your inbox"), a row above the card for `brand` and `toolbar` (rendered only when one is given), a `banner` above it and a `footer` under the card. Padded with `max(1rem, env(safe-area-inset-*))` by classes, no inline style. Vue: the same props, and slots `title`, `description`, `notice`, `brand`, `toolbar`, `banner`, `footer`.
+  - **`EnrolmentSecret`** (`Data display/EnrolmentSecret`): a TOTP enrolment — the `otpauth://` URI's QR code (the library's `QRCode`, level M, named "QR code to scan with your authenticator app"), the URI as a link ("Open in your authenticator app": a phone cannot scan its own screen) and the secret in groups of four in a group named "Setup key", with a `CopyButton` that copies it without spaces and announces "Key copied". `uri`, `secret`, `showQrCode` (default `true`), `qrSize` (default `192`) and a prop per label. Side by side once the component is 28rem wide, stacked on a phone, the key wrapping inside the card.
+  - **`RecoveryCodes`** (`Data display/RecoveryCodes`): one-time codes shown once, in a card. An ordered list named "Recovery codes"; "Copy codes" (one per line, announced "Codes copied" / "Copy failed" by the component's own polite status region, no `Toaster` needed); "Download" (a text file: `fileHeading`, `fileNote`, a blank line, the codes; `fileName` defaults to `recovery-codes.txt`); "Print" (the card alone, through the new print rules in `styles.css`); and "I have saved these codes", which "Done" requires: pressed before, it moves the focus to the box, marks it `aria-invalid` and says "Tick the box once your codes are safe". `title` / `titleAs` (`h2` by default), `description`, `warning` (`false` hides it), `focusTitle` (default `true`), `onDone` (the "Done" button shows only with it; Vue: `@done`), `saved` / `onSavedChange` (Vue: `v-model:saved`) and `labels`.
+  
+  ```tsx
+  <AuthCard title="Two-step verification" brand={<Logo />} toolbar={<LanguageSwitcher />}>
+    <EnrolmentSecret uri={enrolment.uri} secret={enrolment.secret} />
+  </AuthCard>
+  <RecoveryCodes codes={codes} fileHeading={`Recovery codes for ${email}`} saved={saved} onSavedChange={setSaved} onDone={done} />
+  ```
+  
+  ```vue
+  <RecoveryCodes v-model:saved="saved" :codes="codes" :file-heading="`Recovery codes for ${email}`" @done="done" />
+  ```
+  
+  `groupSecret`, `recoveryCodesText` and `downloadText` are re-exported beside them. `@nxgt/material-core` adds `/two-factor`: `groupSecret(secret, size = 4)`, `recoveryCodesText(codes, { heading?, note? })` and `downloadText(text, fileName, { type? })` (an object URL revoked a minute later, as `/pdf-download` does: both now share one helper). It also adds `/print-only`: `printOnly(element, name?)` prints one element of the page through `data-nxgt-print` on `<html>` and `data-nxgt-print-target` on the element, removed on `afterprint` or once a blocking `print()` returns; the rules are the new `print-only.css` in each library's `styles.css`, and both libraries re-export `printOnly`, `PRINT_ATTRIBUTE` and `PRINT_TARGET_ATTRIBUTE` from `/lib`. `CopyButton` and `RecoveryCodes` share the copy-and-announce state; `CopyButton` behaves as before. In `@nxgt/material-vue`, `Checkbox` now shows a `#helper-text` (or `#label`) slot that is added after the first render.
+  
+  Migration: local copies marked `To extract to material (request [#498](https://github.com/softistx/nxgt-material/issues/498))` can be deleted. A local sign-in frame becomes `AuthCard` (its subtitle is `description`; brand, language switcher and banner go in `brand`, `toolbar` and `banner`). A local enrolment block becomes `EnrolmentSecret uri secret`, and a local grouping helper `groupSecret`. A local recovery-codes display becomes `RecoveryCodes`, a local file builder `recoveryCodesText(codes, { heading, note })`, and a local print-only rule `printOnly`; the app keeps its wording (`title`, `description`, `fileHeading`, `fileNote`, `labels`), its data loading and its navigation guard while `saved` is false.
+
+### Patch Changes
+
+- Updated dependencies [[`a088c1c`](https://github.com/softistx/nxgt-material/commit/a088c1c8f08f8c4483fe0ba0e35eedfbe1b193f9), [`e071e15`](https://github.com/softistx/nxgt-material/commit/e071e15a1d3b31c7e8fe7ad83d5a206687d18d9f)]:
+  - @nxgt/material-core@0.10.0
+
 ## 0.35.0
 
 ### Minor Changes

package/README.md

@@ -19,11 +19,13 @@ lists the React equivalent for each entry.
 - **Form fields, standalone or vee-validate.** Each field works with `v-model`,
   and most have a `*FormField` wrapper that binds to a vee-validate form by
   `name`. The [forms guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md) covers Zod
-  validation, composite values, config-driven forms and server errors.
+  validation, errors worded by code in the page's language
+  (`useCodeResolver`), composite values, config-driven forms and server
+  errors.
 - **Helpers** ([helpers guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)): `cn`,
   `clientOnly`, date, number and string utilities, a Zod error map, Pinia store
-  factories in `/lib`, and composables (`useTheme`, `useIsMobile`, …) in
-  `/composables`.
+  factories in `/lib`, and composables (`useTheme`, `useIsMobile`,
+  `useFocusOnMount`, `useSubmitOnce`, …) in `/composables`.
 - **i18n** ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/i18n.md)): an `I18nProvider`
   with ICU messages and shipped `en` / `fr` strings. Your app merges in its own
   resources.
@@ -175,10 +177,10 @@ does not add the stylesheet. Options and the client-only widgets are in
 | Specifier | What is in it |
 | --- | --- |
 | `@nxgt/material-vue` | every barrel below, plus the compiled `style` condition (`dist/material-vue.css`, for apps without Tailwind) |
-| `@nxgt/material-vue/components` | UI components and `*FormField` wrappers ([Components](#components)) |
+| `@nxgt/material-vue/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
 | `@nxgt/material-vue/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/maps.md)) |
 | `@nxgt/material-vue/pdf` | PDF files from plain data: builders, `usePdf`, `PdfDownloadButton`, `pdfResponse` — **its own entry, not in the barrel** ([PDF guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/pdf.md)) |
-| `@nxgt/material-vue/composables` | `useTheme`, `useIsClient`, `useIsMobile`, `useSearchParam`, `useCspNonce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
+| `@nxgt/material-vue/composables` | `useTheme`, `useIsClient`, `useIsMobile`, `useSearchParam`, `useCspNonce`, `useFocusOnMount`, `useSubmitOnce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
 | `@nxgt/material-vue/dnd` | drag-and-drop primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
 | `@nxgt/material-vue/i18n` | `I18nProvider`, `mergeResources`, `createTranslator`, `translateMaterial`, … ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/i18n.md)) |
 | `@nxgt/material-vue/lib` | `cn`, `clientOnly`, date/number/string utils, Zod error map, `focusFirstInvalid` / `focusField` (focus an invalid field, see [forms](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/forms.md#focusing-the-first-invalid-field)), Pinia store factories, `getCspNonce` / `setCspNonce` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/helpers.md)) |
@@ -402,6 +404,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-field.webp" width="120" alt="Field"> | [`Field`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#field) | Renders the field matching a config `type` (text, select, date, upload, otp…). | `Field`, `FormField` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#formsection) | A titled section of a form (an `h2` by default) with an optional description and actions, its fields in the form grid's columns, one column on a phone. | `FormSection` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-textfield.webp" width="120" alt="TextField"> | [`TextField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#textfield) · `TextFormField` | Labelled input with leading / trailing adornments and helper text. | `TextField`, `TextFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-textareafield.webp" width="120" alt="TextareaField"> | [`TextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#textareafield) · `TextareaFormField` | Labelled textarea with row sizing and a `maxLength` counter. | `TextareaField`, `TextareaFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/form-fields-emailfield.webp" width="120" alt="EmailField"> | [`EmailField`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/form-fields.md#emailfield) · `EmailFormField` | Validates on blur; shows a `mailto:` button once the address is valid. | `EmailField`, `EmailFormField` |
@@ -485,6 +488,8 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-paramtable.webp" width="120" alt="ParamTable"> | [`ParamTable`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#paramtable) | Name / type / default / description table; stacked cards below `sm`. | `ParamTable` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#qrcode) | QR code on a padded tile, with an optional centred logo in its `#logo` slot. | `QRCode` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-barecode.webp" width="120" alt="Barecode"> | [`Barecode`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#barecode) | 1D barcode. | `Barecode` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-enrolmentsecret.webp" width="120" alt="EnrolmentSecret"> | [`EnrolmentSecret`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#enrolmentsecret), `groupSecret` | A TOTP enrolment: the `otpauth://` QR code, the URI as a link to the authenticator app, and the key grouped by four, copyable, wrapping on a phone. | `EnrolmentSecret` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/data-display-recoverycodes.webp" width="120" alt="RecoveryCodes"> | [`RecoveryCodes`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/data-display.md#recoverycodes), `recoveryCodesText`, `downloadText` | One-time recovery codes: a list, copy (announced), download, print of the card alone, and an "I have saved these codes" confirmation before Done. | `RecoveryCodes` |
 
 ### Data table, filter & lists
 
@@ -502,6 +507,7 @@ React-only for now: `StepperIndicator` ([roadmap](https://cdn.jsdelivr.net/npm/@
 | Preview | Component | What it does | @nxgt/material |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `link-component` swaps the link. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#authcard) | The frame of a signed-out page: one `main`, a centred card whose title is the `h1` (focusable on an end state), a status or alert notice, a brand and toolbar row, safe-area padding. | `AuthCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#sidebar), `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenuItem`, `SidebarMenuLabel` | Collapsible navigation sidebar with icons, tooltips and active items. | `Sidebar` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#topappbar), `BottomAppBar` | Top bar surface, and a bottom bar of icon actions with an active state. | `TopAppBar`, `BottomAppBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage` + parts | Breadcrumb primitives. | `Breadcrumb` (same parts) |

package/dist/{Button-C6GBoxwB.js → Button-CurFF4Zt.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-D30V5LyT.js";
+import { t } from "./use-material-translation-DRB6oPdF.js";
 import { Comment as n, Fragment as r, Text as i, computed as a, createBlock as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, guardReactiveProps as f, h as p, inject as ee, isVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, onBeforeUnmount as v, openBlock as y, provide as b, ref as x, renderSlot as S, shallowRef as C, unref as w, useAttrs as te, useSlots as ne, watch as T, withCtx as E } from "vue";
 import { Primitive as D, TooltipArrow as O, TooltipContent as k, TooltipPortal as A, TooltipProvider as re, TooltipRoot as j, TooltipTrigger as M, useForwardPropsEmits as N } from "reka-ui";
 import { cva as P } from "class-variance-authority";

package/dist/{HoverCardTrigger-BRajrP9V.js → HoverCardTrigger-jCXl6TrX.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-D30V5LyT.js";
-import { t as n } from "./Button-C6GBoxwB.js";
+import { t } from "./use-material-translation-DRB6oPdF.js";
+import { t as n } from "./Button-CurFF4Zt.js";
 import { t as r } from "./use-inert-others-CtGqZKR8.js";
 import { t as i } from "./field-name-attribute-Bl7LSVK0.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, guardReactiveProps as m, isRef as h, mergeProps as g, normalizeClass as _, normalizeProps as v, onMounted as ee, onUpdated as y, openBlock as b, renderSlot as x, toDisplayString as S, unref as C, useAttrs as w, useId as T, useTemplateRef as E, vModelText as D, withCtx as O, withDirectives as k } from "vue";
@@ -176,7 +176,7 @@ var pe = /* @__PURE__ */ f({
 				onPointerDownOutside: C(u).keepToaster,
 				onFocusOutside: C(u).keepToaster,
 				onInteractOutside: C(u).keepToaster,
-				class: C(e)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", i.class)
+				class: C(e)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg max-h-[calc(100dvh-2rem)] supports-[not(height:100dvh)]:max-h-[calc(100vh-2rem)] overflow-y-auto", i.class)
 			}), {
 				default: O(() => [x(t.$slots, "default"), n.showCloseButton ? (b(), o(C(j), {
 					key: 0,

package/dist/{camera-BIK3JMQq.js → camera-DDnR8aYK.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { _r as t, hr as n, mr as r } from "./components-B3e9Djen.js";
-import { t as i } from "./use-material-translation-D30V5LyT.js";
-import { t as a } from "./Button-C6GBoxwB.js";
-import { t as o } from "./icon-button-Cep-hCMB.js";
+import { _r as t, hr as n, mr as r } from "./components-CCzdGGAe.js";
+import { t as i } from "./use-material-translation-DRB6oPdF.js";
+import { t as a } from "./Button-CurFF4Zt.js";
+import { t as o } from "./icon-button-CIUc1bEp.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, normalizeClass as m, openBlock as h, ref as g, renderSlot as _, shallowRef as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 import { Pause as S, Play as C } from "@lucide/vue";
 //#region lib/components/ui/media/camera/camera-content.vue?vue&type=script&setup=true&lang.ts

package/dist/components/components.css

@@ -21,6 +21,7 @@
 @import "./ui/actions/button-group/button-group.css";
 @import "./ui/primitives/label/label.css";
 @import "./ui/feedback/toast/toast.css";
+@import "./print-only.css";
 @import "./ui/fields/contacts/contact-item.css";
 @import "./ui/fields/opening-hours/opening-hours-item.css";
 @import "./ui/fields/attributes/partials/attribute-form.css";

package/dist/components/print-only.css

@@ -0,0 +1,44 @@
+/* Printing one element of the page (`printOnly`, from `/lib` or
+ * @nxgt/material-core/print-only; RecoveryCodes' Print button): while
+ * <html data-nxgt-print> is set, print media shows the element marked
+ * data-nxgt-print-target and nothing else. No inline style: only these rules,
+ * the same in @nxgt/material and @nxgt/material-vue.
+ *
+ * Everything that neither is, holds nor sits inside the target is taken out
+ * of the flow, so the page prints no blank sheets after it; where :has() is
+ * not supported, that rule is dropped and `visibility` alone hides the rest.
+ * The target's ancestors stop positioning it, so it starts at the top left of
+ * the first page. Unlayered, these rules beat the components' Tailwind
+ * utilities (layered) with no `!important`. */
+@media print {
+	html[data-nxgt-print]
+		body
+		*:not(
+			[data-nxgt-print-target],
+			[data-nxgt-print-target] *,
+			:has([data-nxgt-print-target])
+		) {
+		display: none;
+	}
+
+	html[data-nxgt-print] body * {
+		visibility: hidden;
+	}
+
+	html[data-nxgt-print] :has([data-nxgt-print-target]) {
+		position: static;
+		transform: none;
+	}
+
+	html[data-nxgt-print] [data-nxgt-print-target],
+	html[data-nxgt-print] [data-nxgt-print-target] * {
+		visibility: visible;
+	}
+
+	html[data-nxgt-print] [data-nxgt-print-target] {
+		position: absolute;
+		inset: 0 0 auto 0;
+		margin: 0;
+		box-shadow: none;
+	}
+}