@nxgt/material 2.16.0 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @nxgt/material
 
+## 2.18.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`.
+
+## 2.17.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
+
 ## 2.16.0
 
 ### Minor Changes

package/README.md

@@ -13,11 +13,12 @@ drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + Base UI.
 - **Form fields ship in pairs.** Each one has a standalone component
   (`TextField`) and a React Hook Form wrapper (`TextFormField`). Both are in
   the same barrel. The [forms guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/forms.md) covers 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@2/docs/guides/helpers.md)): `cn`, `clientOnly`,
   date, number, storage and URL utilities, a Zod error map, and Redux Toolkit
-  slice factories in `/lib`. Theme, i18n-aware formatting and option hooks are
-  in `/hooks`.
+  slice factories in `/lib`. Theme, i18n-aware formatting, option, focus
+  (`useFocusOnMount`) and one-submit (`useSubmitOnce`) hooks are in `/hooks`.
 - **i18n** ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/i18n.md)): an `I18nProvider` with ICU
   messages and shipped `en` / `fr` strings. Your app merges in its own
   resources.
@@ -137,12 +138,12 @@ into a tarball. A missing sheet renders nothing, with no error and no fallback.
 | Specifier | What is in it |
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
-| `@nxgt/material/components` | UI components and `*FormField` wrappers ([Components](#components)) |
+| `@nxgt/material/components` | UI components, `*FormField` wrappers and `useCodeResolver` ([Components](#components)) |
 | `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders); `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md)) |
 | `@nxgt/material/map` | Leaflet maps, markers, a location field — **its own entry, not in the barrel, and browser-only** ([maps guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/maps.md)) |
 | `@nxgt/material/vite` | build-time helpers for consumers: `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/csp.md#katex-fonts)) |
 | `@nxgt/material/next` | `withNxgtPrint(nextConfig)`: the `next.config.ts` a Next.js route handler that imports `/print` needs, `output: 'standalone'` included. Node only, no dependency on `next` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
-| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialhooks)) |
+| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, `useFocusOnMount`, `useSubmitOnce`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialhooks)) |
 | `@nxgt/material/dnd` | `@dnd-kit` primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmaterialdnd)) |
 | `@nxgt/material/i18n` | `I18nProvider`, `mergeResources`, `createTranslator` ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/i18n.md)) |
 | `@nxgt/material/lib` | `cn`, `clientOnly`, date, number and storage utilities, `useSliceReducer`, `getCspNonce` / `setCspNonce` ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/helpers.md#nxgtmateriallib)) |
@@ -330,6 +331,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-field.webp" width="120" alt="Field"> | [`Field`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#field) · `FormField` | Renders the field matching a config `type` (text, select, date, upload, otp…). | `Field` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/form-fields-formsection.webp" width="120" alt="FormSection"> | [`FormSection`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-textfield.webp" width="120" alt="TextField"> | [`TextField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-textareafield.webp" width="120" alt="TextareaField"> | [`TextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/form-fields-emailfield.webp" width="120" alt="EmailField"> | [`EmailField`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/form-fields.md#emailfield) · `EmailFormField` | Validates on blur; shows a `mailto:` button once the address is valid. | `EmailField`, `EmailFormField` |
@@ -413,6 +415,8 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-paramtable.webp" width="120" alt="ParamTable"> | [`ParamTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#qrcode) | QR code on a padded tile, with an optional centred logo. | `QRCode` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-barecode.webp" width="120" alt="Barecode"> | [`Barecode`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-display.md#barecode) | 1D barcode. | `Barecode` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-display-enrolmentsecret.webp" width="120" alt="EnrolmentSecret"> | [`EnrolmentSecret`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/data-display-recoverycodes.webp" width="120" alt="RecoveryCodes"> | [`RecoveryCodes`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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
 
@@ -430,6 +434,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/navigation-layout-appshell.webp" width="120" alt="ActivityLayout"> | [`ActivityLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#activitylayout), `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb`, `AppBreadcrumbItem`, `AppBreadcrumbSeparator` | App shell: sidebar built from `items`, a header with a mobile sheet, route breadcrumbs and a titled page; entries are real links, and `linkComponent` swaps the link. See the [app shell guide](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/guides/app-shell.md). | `ActivityLayout`, `ActivityContent`, `AppSidebar`, `AppHeader`, `AppBreadcrumb` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/navigation-layout-authcard.webp" width="120" alt="AuthCard"> | [`AuthCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/navigation-layout-sidebar.webp" width="120" alt="Sidebar"> | [`Sidebar`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/navigation-layout-topappbar.webp" width="120" alt="TopAppBar"> | [`TopAppBar`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/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@2/docs/previews/navigation-layout-breadcrumb.webp" width="120" alt="Breadcrumb"> | [`Breadcrumb`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/navigation-and-layout.md#breadcrumb), `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | Breadcrumb primitives. | `Breadcrumb` (same parts) |

package/dist/{_Uint8Array-CjLUgWgf.js → _Uint8Array-C7apDrb7.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-DTl9h__E.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-DEde7BKz.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-HfSwfmH1.js → _overRest-CCAbV-eT.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-DTl9h__E.js";
+import { m as e, p as t } from "./translator-DEde7BKz.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/async-slice-Cuekts5f.js

@@ -0,0 +1,459 @@
+import { a as e, i as t, t as n } from "./stored-language-BKoohv2_.js";
+import { C as r, S as i, h as a, l as o, m as s, p as c, r as l, u, v as d, w as f, x as p } from "./translator-DEde7BKz.js";
+import { a as m, c as h, d as g, i as _, n as v, r as y, t as b, u as ee } from "./_Uint8Array-C7apDrb7.js";
+import { L as te } from "./number.utils-BiBN2hWJ.js";
+import { Suspense as ne, createContext as re, createElement as x, useContext as ie, useEffect as ae, useMemo as S, useReducer as oe, useState as se, useSyncExternalStore as ce } from "react";
+import { asyncThunkCreator as le, buildCreateSlice as ue } from "@reduxjs/toolkit";
+import { invalidFormatMessage as de, sizeMessage as fe } from "@nxgt/material-core/zod-issue-messages";
+import { useDispatch as pe } from "react-redux";
+//#region ../../node_modules/lodash-es/_WeakMap.js
+var C = s(f, "WeakMap"), me = y(Object.keys, Object), he = Object.prototype.hasOwnProperty;
+function w(e) {
+	if (!ee(e)) return me(e);
+	var t = [];
+	for (var n in Object(e)) he.call(e, n) && n != "constructor" && t.push(n);
+	return t;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/keys.js
+function T(e) {
+	return g(e) ? _(e) : w(e);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_arrayPush.js
+function ge(e, t) {
+	for (var n = -1, r = t.length, i = e.length; ++n < r;) e[i + n] = t[n];
+	return e;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_arrayFilter.js
+function _e(e, t) {
+	for (var n = -1, r = e == null ? 0 : e.length, i = 0, a = []; ++n < r;) {
+		var o = e[n];
+		t(o, n, e) && (a[i++] = o);
+	}
+	return a;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/stubArray.js
+function E() {
+	return [];
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_getSymbols.js
+var ve = Object.prototype.propertyIsEnumerable, D = Object.getOwnPropertySymbols, O = D ? function(e) {
+	return e == null ? [] : (e = Object(e), _e(D(e), function(t) {
+		return ve.call(e, t);
+	}));
+} : E;
+//#endregion
+//#region ../../node_modules/lodash-es/_baseGetAllKeys.js
+function k(e, t, n) {
+	var r = t(e);
+	return d(e) ? r : ge(r, n(e));
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_getAllKeys.js
+function A(e) {
+	return k(e, T, O);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_DataView.js
+var j = s(f, "DataView"), M = s(f, "Promise"), N = s(f, "Set"), ye = "[object Map]", be = "[object Object]", P = "[object Promise]", F = "[object Set]", I = "[object WeakMap]", L = "[object DataView]", xe = a(j), Se = a(u), Ce = a(M), we = a(N), Te = a(C), R = i;
+(j && R(new j(/* @__PURE__ */ new ArrayBuffer(1))) != L || u && R(new u()) != ye || M && R(M.resolve()) != P || N && R(new N()) != F || C && R(new C()) != I) && (R = function(e) {
+	var t = i(e), n = t == be ? e.constructor : void 0, r = n ? a(n) : "";
+	if (r) switch (r) {
+		case xe: return L;
+		case Se: return ye;
+		case Ce: return P;
+		case we: return F;
+		case Te: return I;
+	}
+	return t;
+});
+var z = R, Ee = "__lodash_hash_undefined__";
+function De(e) {
+	return this.__data__.set(e, Ee), this;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_setCacheHas.js
+function Oe(e) {
+	return this.__data__.has(e);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_SetCache.js
+function B(e) {
+	var t = -1, n = e == null ? 0 : e.length;
+	for (this.__data__ = new o(); ++t < n;) this.add(e[t]);
+}
+B.prototype.add = B.prototype.push = De, B.prototype.has = Oe;
+//#endregion
+//#region ../../node_modules/lodash-es/_arraySome.js
+function ke(e, t) {
+	for (var n = -1, r = e == null ? 0 : e.length; ++n < r;) if (t(e[n], n, e)) return !0;
+	return !1;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_cacheHas.js
+function V(e, t) {
+	return e.has(t);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_equalArrays.js
+var Ae = 1, je = 2;
+function H(e, t, n, r, i, a) {
+	var o = n & Ae, s = e.length, c = t.length;
+	if (s != c && !(o && c > s)) return !1;
+	var l = a.get(e), u = a.get(t);
+	if (l && u) return l == t && u == e;
+	var d = -1, f = !0, p = n & je ? new B() : void 0;
+	for (a.set(e, t), a.set(t, e); ++d < s;) {
+		var m = e[d], h = t[d];
+		if (r) var g = o ? r(h, m, d, t, e, a) : r(m, h, d, e, t, a);
+		if (g !== void 0) {
+			if (g) continue;
+			f = !1;
+			break;
+		}
+		if (p) {
+			if (!ke(t, function(e, t) {
+				if (!V(p, t) && (m === e || i(m, e, n, r, a))) return p.push(t);
+			})) {
+				f = !1;
+				break;
+			}
+		} else if (!(m === h || i(m, h, n, r, a))) {
+			f = !1;
+			break;
+		}
+	}
+	return a.delete(e), a.delete(t), f;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_mapToArray.js
+function Me(e) {
+	var t = -1, n = Array(e.size);
+	return e.forEach(function(e, r) {
+		n[++t] = [r, e];
+	}), n;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_setToArray.js
+function U(e) {
+	var t = -1, n = Array(e.size);
+	return e.forEach(function(e) {
+		n[++t] = e;
+	}), n;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_equalByTag.js
+var Ne = 1, Pe = 2, Fe = "[object Boolean]", Ie = "[object Date]", Le = "[object Error]", Re = "[object Map]", ze = "[object Number]", Be = "[object RegExp]", Ve = "[object Set]", He = "[object String]", Ue = "[object Symbol]", We = "[object ArrayBuffer]", Ge = "[object DataView]", W = r ? r.prototype : void 0, G = W ? W.valueOf : void 0;
+function Ke(e, t, n, r, i, a, o) {
+	switch (n) {
+		case Ge:
+			if (e.byteLength != t.byteLength || e.byteOffset != t.byteOffset) return !1;
+			e = e.buffer, t = t.buffer;
+		case We: return !(e.byteLength != t.byteLength || !a(new b(e), new b(t)));
+		case Fe:
+		case Ie:
+		case ze: return c(+e, +t);
+		case Le: return e.name == t.name && e.message == t.message;
+		case Be:
+		case He: return e == t + "";
+		case Re: var s = Me;
+		case Ve:
+			var l = r & Ne;
+			if (s ||= U, e.size != t.size && !l) return !1;
+			var u = o.get(e);
+			if (u) return u == t;
+			r |= Pe, o.set(e, t);
+			var d = H(s(e), s(t), r, i, a, o);
+			return o.delete(e), d;
+		case Ue: if (G) return G.call(e) == G.call(t);
+	}
+	return !1;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_equalObjects.js
+var qe = 1, Je = Object.prototype.hasOwnProperty;
+function Ye(e, t, n, r, i, a) {
+	var o = n & qe, s = A(e), c = s.length;
+	if (c != A(t).length && !o) return !1;
+	for (var l = c; l--;) {
+		var u = s[l];
+		if (!(o ? u in t : Je.call(t, u))) return !1;
+	}
+	var d = a.get(e), f = a.get(t);
+	if (d && f) return d == t && f == e;
+	var p = !0;
+	a.set(e, t), a.set(t, e);
+	for (var m = o; ++l < c;) {
+		u = s[l];
+		var h = e[u], g = t[u];
+		if (r) var _ = o ? r(g, h, u, t, e, a) : r(h, g, u, e, t, a);
+		if (!(_ === void 0 ? h === g || i(h, g, n, r, a) : _)) {
+			p = !1;
+			break;
+		}
+		m ||= u == "constructor";
+	}
+	if (p && !m) {
+		var v = e.constructor, y = t.constructor;
+		v != y && "constructor" in e && "constructor" in t && !(typeof v == "function" && v instanceof v && typeof y == "function" && y instanceof y) && (p = !1);
+	}
+	return a.delete(e), a.delete(t), p;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_baseIsEqualDeep.js
+var Xe = 1, K = "[object Arguments]", q = "[object Array]", J = "[object Object]", Y = Object.prototype.hasOwnProperty;
+function Ze(e, t, n, r, i, a) {
+	var o = d(e), s = d(t), c = o ? q : z(e), l = s ? q : z(t);
+	c = c == K ? J : c, l = l == K ? J : l;
+	var u = c == J, f = l == J, p = c == l;
+	if (p && h(e)) {
+		if (!h(t)) return !1;
+		o = !0, u = !1;
+	}
+	if (p && !u) return a ||= new v(), o || m(e) ? H(e, t, n, r, i, a) : Ke(e, t, c, n, r, i, a);
+	if (!(n & Xe)) {
+		var g = u && Y.call(e, "__wrapped__"), _ = f && Y.call(t, "__wrapped__");
+		if (g || _) {
+			var y = g ? e.value() : e, b = _ ? t.value() : t;
+			return a ||= new v(), i(y, b, n, r, a);
+		}
+	}
+	return p ? (a ||= new v(), Ye(e, t, n, r, i, a)) : !1;
+}
+//#endregion
+//#region ../../node_modules/lodash-es/_baseIsEqual.js
+function X(e, t, n, r, i) {
+	return e === t ? !0 : e == null || t == null || !p(e) && !p(t) ? e !== e && t !== t : Ze(e, t, n, r, X, i);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/isEqual.js
+function Qe(e, t) {
+	return X(e, t);
+}
+//#endregion
+//#region ../../node_modules/lodash-es/isNil.js
+function $e(e) {
+	return e == null;
+}
+//#endregion
+//#region lib/lib/string.utils.ts
+function Z(e) {
+	return e.normalize("NFKD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function et(e) {
+	return e ? e.toLowerCase().replace(/_/g, "-") : "";
+}
+function tt(e, t = ", ") {
+	return e.filter((e) => !!e).join(t);
+}
+function nt(e, t) {
+	let n = t.trim();
+	if (!n) return [{
+		text: e,
+		match: !1
+	}];
+	let r = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), i = new RegExp(r, "ig"), a = [], o = 0;
+	for (let t of e.matchAll(i)) {
+		let n = t.index ?? 0;
+		n > o && a.push({
+			text: e.slice(o, n),
+			match: !1
+		}), a.push({
+			text: t[0],
+			match: !0
+		}), o = n + t[0].length;
+	}
+	return o < e.length && a.push({
+		text: e.slice(o),
+		match: !1
+	}), a.length > 0 ? a : [{
+		text: e,
+		match: !1
+	}];
+}
+var rt = {
+	enumToKebabCase: et,
+	joinTruthyParts: tt,
+	slugify: Z,
+	splitMatch: nt
+}, it = /* @__PURE__ */ new WeakMap();
+function at(e, t) {
+	it.set(e, t);
+}
+function ot(e) {
+	return it.get(e);
+}
+//#endregion
+//#region lib/lib/redux/use-slice-reducer.ts
+function Q(e, t) {
+	return t ? {
+		...e,
+		...t
+	} : e;
+}
+var st = "nxgt/useSliceReducer/restore", ct = () => () => {}, lt = () => !1;
+function ut(e) {
+	return (t, n) => n.type === st ? n.payload : e(t, n);
+}
+function dt(e, t) {
+	let n = ot(e), r = ce(ct, lt, () => n !== void 0), [i] = se(r), [a, o] = oe(S(() => ut(e.reducer), [e.reducer]), t, (t) => Q(r && n ? n() : e.getInitialState(), t));
+	return ae(() => {
+		i && o({
+			type: st,
+			payload: Q(e.getInitialState(), t)
+		});
+	}, []), [a, S(() => {
+		let t = {};
+		for (let n in e.actions) t[n] = (...t) => {
+			o(e.actions[n](...t));
+		};
+		return t;
+	}, [o, e.actions])];
+}
+//#endregion
+//#region lib/lib/redux/use-slice-selector.ts
+function ft(e, t) {
+	return S(() => t(e), [e, t]);
+}
+//#endregion
+//#region lib/lib/url.utils.ts
+function $(e) {
+	return new URL(e.url).searchParams;
+}
+function pt(e, t) {
+	return $(e).get(t);
+}
+function mt(e) {
+	return /^(https?:)?\/\//.test(e) || e.startsWith("mailto:");
+}
+//#endregion
+//#region lib/lib/client-only.utils.ts
+var ht = re(!1);
+function gt(e) {
+	function t(t) {
+		let n = ie(ht), r = te();
+		return !n && !r ? null : x(ht.Provider, { value: !0 }, x(ne, { fallback: null }, x(e, t)));
+	}
+	return t.displayName = `ClientOnly(${e.displayName ?? e.name ?? "Component"})`, t;
+}
+//#endregion
+//#region lib/lib/zod-error-map.ts
+var _t = (e) => {
+	let t = typeof e;
+	switch (t) {
+		case "number": return Number.isNaN(e) ? "NaN" : "number";
+		case "object":
+			if (Array.isArray(e)) return "array";
+			if (e === null) return "null";
+			if (Object.getPrototypeOf(e) !== Object.prototype && e.constructor) return e.constructor.name;
+	}
+	return t;
+}, vt = ({ storageKey: r = t, language: i, translate: a = l } = {}) => {
+	let o = () => typeof i == "function" ? i() : i ?? n(r, "en", e);
+	return (e) => {
+		let t = o(), n = (e, n) => a(e, n, t), r = (e, t) => {
+			let r = n(e, t);
+			return r === e ? void 0 : r;
+		};
+		switch (e.code) {
+			case "invalid_type": {
+				let t = {
+					expected: e.expected,
+					received: _t(e.input)
+				};
+				return e.input ? r(`material.zod.invalid_type.${e.expected}`, t) ?? n("material.zod.invalid_type.default", t) : n("material.zod.required", t);
+			}
+			case "invalid_value": return e.values.length === 1 ? n("material.zod.invalid_value_single", { value: e.values[0] }) : n("material.zod.invalid_value_multiple", { values: e.values.join(" | ") });
+			case "too_big":
+			case "too_small": return fe(e, {
+				translate: n,
+				lookup: r
+			});
+			case "invalid_format": return de(e, {
+				translate: n,
+				lookup: r
+			});
+			case "not_multiple_of": return n("material.zod.not_multiple_of", { divisor: e.divisor });
+			case "unrecognized_keys": return n(`material.zod.unrecognized_keys_${e.keys.length > 1 ? "multiple" : "single"}`, { keys: e.keys.join(", ") });
+			case "invalid_key": return n("material.zod.invalid_key", { origin: e.origin });
+			case "invalid_union": return n("material.zod.invalid_union");
+			case "invalid_element": return n("material.zod.invalid_element", { origin: e.origin });
+			default: return n("material.zod.default");
+		}
+	};
+};
+//#endregion
+//#region ../../node_modules/redux/dist/redux.mjs
+function yt(e) {
+	return `Minified Redux error #${e}; visit https://redux.js.org/Errors?code=${e} for the full message or use the non-minified dev environment for full errors. `;
+}
+var bt = () => Math.random().toString(36).substring(7).split("").join(".");
+`${/* @__PURE__ */ bt()}`, `${/* @__PURE__ */ bt()}`;
+function xt(e) {
+	if (e === void 0) return "undefined";
+	if (e === null) return "null";
+	let t = typeof e;
+	switch (t) {
+		case "boolean":
+		case "string":
+		case "number":
+		case "symbol":
+		case "function": return t;
+	}
+	if (Array.isArray(e)) return "array";
+	if (wt(e)) return "date";
+	if (Ct(e)) return "error";
+	let n = St(e);
+	switch (n) {
+		case "Symbol":
+		case "Promise":
+		case "WeakMap":
+		case "WeakSet":
+		case "Map":
+		case "Set": return n;
+	}
+	return Object.prototype.toString.call(e).slice(8, -1).toLowerCase().replace(/\s/g, "");
+}
+function St(e) {
+	return typeof e.constructor == "function" ? e.constructor.name : null;
+}
+function Ct(e) {
+	return e instanceof Error || typeof e.message == "string" && e.constructor && typeof e.constructor.stackTraceLimit == "number";
+}
+function wt(e) {
+	return e instanceof Date || typeof e.toDateString == "function" && typeof e.getDate == "function" && typeof e.setDate == "function";
+}
+function Tt(e) {
+	let t = typeof e;
+	return process.env.NODE_ENV !== "production" && (t = xt(e)), t;
+}
+function Et(e, t) {
+	return function(...n) {
+		return t(e.apply(this, n));
+	};
+}
+function Dt(e, t) {
+	if (typeof e == "function") return Et(e, t);
+	if (typeof e != "object" || !e) throw Error(process.env.NODE_ENV === "production" ? yt(16) : `bindActionCreators expected an object or a function, but instead received: '${Tt(e)}'. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?`);
+	let n = {};
+	for (let r in e) {
+		let i = e[r];
+		typeof i == "function" && (n[r] = Et(i, t));
+	}
+	return n;
+}
+//#endregion
+//#region lib/lib/redux/use-actions.ts
+function Ot(e, t) {
+	let n = pe();
+	return S(() => Dt(e, n), t ? [n, ...t] : [n]);
+}
+//#endregion
+//#region lib/lib/redux/async-slice.ts
+var kt = ue({ creators: { asyncThunk: le } });
+//#endregion
+export { _e as A, B as C, k as D, A as E, T as M, w as N, O, V as S, N as T, nt as _, gt as a, X as b, $ as c, dt as d, at as f, Z as g, tt as h, vt as i, ge as j, E as k, ft as l, et as m, Ot as n, mt as o, rt as p, _t as r, pt as s, kt as t, Q as u, $e as v, z as w, U as x, Qe as y };