@nxgt/material 3.45.0 → 3.47.0

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @nxgt/material
 
+## 3.47.0
+
+### Minor Changes
+
+- [#1811](https://github.com/softistx/nxgt-material/pull/1811) [`c043c12`](https://github.com/softistx/nxgt-material/commit/c043c12144283298f7dfaa929a74f34e8c7fb1a5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Stepper` and `Timeline` have a new look by default (the Expressive direction). The props are unchanged, the new ones are additive, and no code has to change except the migration notes below.
+  
+  `Stepper`: a cookie for the current step, a filled circle with a check for a completed one, a muted outlined circle for an upcoming one and a cookie in the error container for a failed one, joined by thick pill tracks that fill with the spatial spring (none under reduced motion). The label reads "Step N · Optional" and titles clamp to two lines. Below `sm` a header card replaces the compact bar: "Step 3 of 5", the title, the description, a segmented progress bar and, with `onChange`, Back / Next buttons. The layout is chosen by CSS breakpoints instead of `useSsrMediaQuery`, so the server and the client render the same markup. `Step` gains `optional` and `content` (a tinted card under the current step). A step that has not been reached is a neutral ring, and the failed step's icon takes the error container's text colour. Back and Next stay focusable at the ends (`aria-disabled`), and the header announces a failed current step and the number of failed steps. New keys `material.stepper.step-of`, `back`, `next`, `optional`, `attention`, `failed`.
+  
+  Migration notes for `Stepper` (search, then replace):
+  
+  - the info tooltip on the current step is gone (its description shows below the steps): a selector or test that targeted it no longer matches; read the description under the steps;
+  - `data-orientation` now repeats the prop (`horizontal`, `vertical` or `responsive`); a `responsive` Stepper no longer reports `vertical` or `horizontal` by width. Search `data-orientation` in tests and stylesheets; select by the prop you passed, and by the viewport for the layout;
+  - below 640px the horizontal step list is hidden and the header card replaces it: a test at a phone width that clicks `[data-slot=stepper-step] button` of a `horizontal` Stepper finds nothing visible; use the header's Back / Next, or a `responsive` Stepper, which lists every step;
+  - `horizontal` and `vertical` switch at `sm` (640px), not `md` (768px): a stylesheet or test between 640 and 767px sees the row (or the column) where it saw the other layout;
+  - `Stepper` no longer renders `StepperIndicator` (still exported, for a progress bar of your own): search `stepper-indicator` or `role="progressbar"` in tests that expected it inside a Stepper.
+  
+  `Timeline`: an item with `children` renders as a rounded card with a subtle tone bar instead of children under the text; the marker is 44px with a shape per tone (circle, squircle, cookie, clover, diamond, burst) in the tone's container colour; and, once its own container is 48rem wide (a container query, not the viewport), the two sides alternate. Migration: `layout="rail"` gives back a single rail. New props: `grouped` (below); `headingLevel`; `layout` (`'auto'` default, or `'rail'`); `timeZone` and `now`, which set the zone the days are cut in and the reference instant. Without both, `grouped` renders the flat list on the server and on the first client render, and the groups once mounted, so hydration never mismatches; with both, the groups render on the server too. New key `material.timeline.events`.
+  
+  `Timeline` `grouped`: each day opens with a `DaySeparator` heading (a real heading with `<time dateTime>` and an "N events" count) in place of the date pill. New prop `headingLevel` (2 to 6, default 3). Items stay in one flat list and never remount when the headings appear after mount; the heading renders inside the first item of its day, and every item of the day points to it with `aria-describedby`. Removed keys `material.timeline.today` and `yesterday` (the words now come from `material.day-separator.today` and `yesterday`; move custom translations there); `material.timeline.events` stays. `layout="auto"` is a container query on the Timeline, so its parent needs a definite width: in a shrink-to-fit parent (`w-fit`, an inline flex item) it collapses; use `layout="rail"` there.
+  
+  Migration notes for `Timeline` (search, then replace):
+  
+  - `material.timeline.today` and `material.timeline.yesterday` in an app's resources, tests or translations: move them to `material.day-separator.today` and `yesterday`;
+  - a test that targeted the old date pill: query the heading instead (`getByRole('heading', { level: 3 })`, or the level you pass in `headingLevel`);
+  - a `<Timeline>` (with `layout` left on `auto`) inside a `w-fit` parent or an inline flex item: add a definite width to the parent, or pass `layout="rail"`.
+
+## 3.46.0
+
+### Minor Changes
+
+- [#1770](https://github.com/softistx/nxgt-material/pull/1770) [`169b365`](https://github.com/softistx/nxgt-material/commit/169b3653b9ad49a59857b56162d623daaf1959cf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Two-step verification, in the library. The pieces every app rebuilt for a one-time code are now components, driven by props: your server or session says what happened, the components keep the typed value, the focus and the submit guard, and nothing is fetched inside them. React only; the Vue twin is a `vue` issue. Closes [#1652](https://github.com/softistx/nxgt-material/issues/1652).
+  
+  **`VerificationCode`** (`fields/verification-code`) is the form that asks for a code, for sign-in, step-up, activation and turn-off: `via` (`'email'` or `'secondFactor'`), `attemptsLeft`, `error` (`'invalid'`, `'expired'`, `'failed'`, `'throttled'` or your own node), `retryAfter` (seconds, with `'throttled'`), `locked`, `pending`, `resent`, `onSubmit(code, { kind: 'code' | 'recovery' })` (`'code'` is the issued code, from an app or an e-mail) and `onResend()`; a rejected `onSubmit` is swallowed, so map a failure to `error="failed"`. It shows wrong (field emptied and focused, tries left), expired, failed, busy, resent and locked states, "Use a recovery code" and "Resend the code" alone on its own line. With no tries left an e-mailed code reads as expired and an app or recovery code locks; a submit with too few digits focuses the field and says "Enter all 6 digits." without calling `onSubmit`. `error="throttled"` with `retryAfter` (seconds) disables "Resend the code" until the wait elapsed and says how long, while the field stays usable and nothing locks; a resend answered throttled again restarts the wait, even with the same `retryAfter`. `actions="none"` leaves the buttons to the host, `destructive` and `status` style the form, and `useVerificationLabels` serves a layout of your own. The slots are tinted boxes inside a 3:1 hairline ring with a dot while empty, a dash between the halves, 20px tabular digits, a 2px primary ring and a soft caret on the active one (still under `prefers-reduced-motion`); a wrong code tints the slots, a locked form is muted with a "Locked" pill. On a coarse pointer the field is 44px tall.
+  
+  **`VerificationLockProvider` and `useVerificationLock()`** keep a locked authenticator or recovery code locked, page-wide, until the page is loaded again: a remount, a step change or a closed dialog does not lift it. One lock is one alert: only the first form to show it is a `role="alert"`, the others under it show the same words as plain text. Without a provider, every form whose own answer locked it is an alert, so the server and the hydrated page agree, and the lock covers the document; an e-mailed code is never held, unless a recovery code is typed in its form (switching the entry clears the held decision of the answer to the other kind, so a stale `attemptsLeft: 0` does not lock the page; a refused recovery code does; switching back shows that entry's answer again); on the server it is always unlocked, so hydration cannot mismatch.
+  
+  **`StepUpDialog`** (`feedback/step-up-dialog`) is "Confirm it's you": `via` (left out while the code is being requested, which shows a status line), `destination`, `requestError`, the answer props of `VerificationCode` (with `length` and `allowRecovery`; `EnrolmentCard` and `RecoveryCodesStatus` take `length` too), and `confirming` with `confirmedLabel`, which shows a status line and disables Cancel while your action re-runs. Escape, a click outside and Cancel call `onCancel`, except while confirming. The title takes the focus on open and whenever the field goes away, the field takes it after a refusal, and it returns to the button that opened the dialog. `DialogFooter` takes `stackOnPhone` (`true` by default, today's behaviour): `false` keeps one row on a phone, the first action on the left and the last on the right.
+  
+  **`EnrolmentCard`** (`display/enrolment-card`) turns an authenticator app on in one card: the title (it takes the focus on mount), `EnrolmentSecret` on a tinted surface (`secretProps`), a notice that the other devices are signed out (`sessionsNotice`: a default, your own node, or `false`), an optional `status` line, and the first code with "Activate" and a tonal Cancel when `onCancel` is given. **`RecoveryCodesStatus`** (`display/recovery-codes-status`) shows how many recovery codes are left (`remaining`, an ICU plural; red with a warning at `0`; `null` when not known) and the way to make a new set: with `requireCode` (the default) a `VerificationCode` whose "New codes" button passes the code and its kind to `onRegenerate`, without it a plain button. Show the new codes with `RecoveryCodes`. Both read the lock, so a lock set in one disables the other and the dialog (the plain button of `requireCode={false}` too). `StepUpDialog` starts its form again when `via` changes.
+  
+  **`Alert`** takes `actions`: buttons or links under the text, wrapping on a narrow screen (a "Continue" `LinkButton`, a "Retry" button).
+  
+  `StepUpDialog` and `EnrolmentCard` draw Cancel `tonal` like the other library dialogs and take `cancelVariant` (`'outlined'`, `'ghost'`) to restore another look. French and English labels live under `material.verification-code.*`, `material.step-up-dialog.*`, `material.enrolment-card.*` and `material.recovery-codes-status.*`; `labels` and `icons` are overridable. A new two-step verification guide (`docs/guides/two-factor.md`) maps the pieces to the moments of an account's life.
+  
+  **Migrating an app that wrote these itself**
+  
+  | Your own | Use |
+  | --- | --- |
+  | A step-up dialog with a reducer (asking, failed, code, expired, confirmed) | `StepUpDialog`: map the phase to `via` (omitted while asking), `requestError`, `error`, `attemptsLeft`, `pending` and `confirming`. Keep the replay of the blocked action |
+  | A code input with a "use a recovery code" switch, in a sign-in step, an activation or a turn-off | `VerificationCode` (`via="secondFactor"`; `destructive` for turning off). `kind` in `onSubmit` says the issued code or a recovery code; the recovery code is trimmed and cut at 40 |
+  | An enrolment card with the QR code, the key, a sessions note and a first code | `EnrolmentCard`; pass your after-the-fact wording as `sessionsNotice` if the other devices were already signed out |
+  | A recovery-codes card with a count and a "new codes" action | `RecoveryCodesStatus`, then `RecoveryCodes` for the new set |
+  | A "required" notice with a continue link | `Alert` with `actions` |
+  | "N tries left" and "locked" text kept in app state, and a lock that must survive a remount | `attemptsLeft`, `locked` and one `VerificationLockProvider` around the screens that ask for a code |
+  | A footer that must stay on one row on a phone | `DialogFooter stackOnPhone={false}` |
+  
+  Your requests, the mapping of a server error to these props, where a challenge is kept, the leave guard around new recovery codes and all wording stay in the app.
+
+### Patch Changes
+
+- Updated dependencies [[`7a12d98`](https://github.com/softistx/nxgt-material/commit/7a12d9857d2ea9c38541bdc0c96836ee0c4587e0)]:
+  - @nxgt/material-core@0.41.0
+
 ## 3.45.0
 
 ### Minor Changes

package/README.md

@@ -33,6 +33,9 @@ drag-and-drop, i18n, and `Icon`. Tailwind CSS v4 + Base UI.
   only on "Keep mine"), tells your app a refused paste or fill (`onRefuse`), on
   a phone too; its columns resize,
   hide and reorder, in a layout your app can persist.
+- **Two-step verification** ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/two-factor.md)): `VerificationCode`,
+  `StepUpDialog`, `EnrolmentCard` and `RecoveryCodesStatus`, with a page-wide
+  lock after too many wrong codes.
 - **Vue sister**: `@nxgt/material-vue` uses the same names, categories and
   pages. The catalogue's last column gives the Vue export for each entry.
 
@@ -538,6 +541,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-searchfield.webp" width="120" alt="SearchField"> | [`SearchField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#searchfield) · `SearchFormField` | 44px field box with the search icon in its lead well, a clear button and a spinner, with a debounced `onValueChange`. | `SearchField`, `SearchFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-colorfield.webp" width="120" alt="ColorField"> | [`ColorField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#colorfield) · `ColorFormField` | Hex input with a colour picker in a popover. | `ColorField`, `ColorFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-otpfield.webp" width="120" alt="OtpField"> | [`OtpField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#otpfield) · `OtpFormField`, `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | One-time code input of configurable length; the `InputOTP` parts compose your own. | `OtpField`, `OtpFormField`, `InputOTP` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-verificationcode.webp" width="120" alt="VerificationCode"> | [`VerificationCode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#verificationcode) · `VerificationLockProvider`, `useVerificationLock`, `useVerificationLabels` | The form that asks for a one-time code, driven by props (`via`, `attemptsLeft`, `error`, `pending`): wrong (with the tries left), expired, failed and busy states, "Resend the code", "Use a recovery code", and a page-wide lock that survives remounts. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-inputgroupfield.webp" width="120" alt="InputGroupField"> | [`InputGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#inputgroupfield) · `InputGroupFormField` | Labelled `InputGroup` with addons and helper text. | `InputGroupField`, `InputGroupFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-localizedtextfields.webp" width="120" alt="LocalizedTextFields"> | [`LocalizedTextFields`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#localizedtextfields) · `LocalizedTextFormField` | One text in several languages: a `<fieldset>` with an input per language, the default as the placeholder with a reset button, an error per language and for the group, long lists folded under "Other languages"; the value is a record. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-inlineedit.webp" width="120" alt="InlineEdit"> | [`InlineEdit`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#inlineedit) · `InlineEditFormField` | Click-to-edit text with save and cancel. | `InlineEdit`, `InlineEditFormField` |
@@ -610,7 +614,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-entityheader.webp" width="120" alt="EntityHeader"> | [`EntityHeader`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#entityheader) | Page header with icon, a `leading` control slot (a Switcher at the band's start), title (`headingLevel` 1 to 3), status, metadata, `stats` (figures as compact `size="sm"` StatCard tiles, 2×2 on a phone) and actions. | `EntityHeader` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-listtile.webp" width="120" alt="ListTile"> | [`ListTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#listtile) | Row with leading / trailing slots, title and subtitle; becomes a link (with a decorative chevron; `selected` sets `aria-current="page"`), a button, or with `toggle` a switch row where the whole row toggles. `size="sm"` is the dense row; `chips` and `variant="divided"` make it a compact record row, `as="li"` puts it in a list. | `ListTile` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-accordioncard.webp" width="120" alt="AccordionCard"> | [`AccordionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#accordioncard) | Renders `items` (title, content) as a styled accordion. | `AccordionCard` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with toned icons and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-timeline.webp" width="120" alt="Timeline"> | [`Timeline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#timeline), `TimelineItem`, `RelativeTime` | Vertical event timeline with shaped, toned markers, cards, alternating sides in a wide container, optional day groups and relative times. | `Timeline`, `TimelineItem`, `RelativeTime` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-changehistory.webp" width="120" alt="ChangeHistory"> | [`ChangeHistory`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#changehistory) | History of the changes made to anything (a document, a project's settings, a file): a rail of toned dots or tinted cards with a Before / After block, a heading per day (sticky on the rail), long entries collapsed behind "N fields changed", redacted values shown as "Hidden", the exact time on hover and focus, load more. | — (later, #1626) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-zonedtime.webp" width="120" alt="ZonedTime"> | [`ZonedTime`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#zonedtime) | A moment in a named IANA zone, with the zone as a computed offset (`Mar 12, 2026, 4:04 PM UTC+1`), identical on the server and the client (no hydration warning): the date and the time are formatted apart, `seconds` and `dateStyle` are optional, in a `<time dateTime>`. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-eventchip.webp" width="120" alt="EventChip"> | [`EventChip`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#eventchip) | Calendar event pill — soft, solid or outlined — with its times, all-day and continuation edges. | `EventChip` |
@@ -622,8 +626,10 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-paramtable.webp" width="120" alt="ParamTable"> | [`ParamTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/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@3/docs/previews/data-display-qrcode.webp" width="120" alt="QRCode"> | [`QRCode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/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@3/docs/previews/data-display-barecode.webp" width="120" alt="Barecode"> | [`Barecode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#barecode) | 1D barcode. | `Barecode` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-enrolmentcard.webp" width="120" alt="EnrolmentCard"> | [`EnrolmentCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#enrolmentcard) | Turning on an authenticator app in one card: the `EnrolmentSecret` on a tinted surface, a notice that other devices are signed out, and the first code to check with Activate and a tonal Cancel, driven by props (`attemptsLeft`, `locked`, `error`, `pending`). Reads the page-wide lock. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-enrolmentsecret.webp" width="120" alt="EnrolmentSecret"> | [`EnrolmentSecret`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/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@3/docs/previews/data-display-recoverycodes.webp" width="120" alt="RecoveryCodes"> | [`RecoveryCodes`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#recoverycodes), `recoveryCodesText`, `downloadText` | One-time recovery codes: a list, copy (its result shown and announced), download, print of the card alone, and an "I have saved these codes" confirmation before Done. | `RecoveryCodes` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-display-recoverycodesstatus.webp" width="120" alt="RecoveryCodesStatus"> | [`RecoveryCodesStatus`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-display.md#recoverycodesstatus) | How many recovery codes are left (a warning at none) and the way to make a new set, behind a code (`requireCode`) or a plain button. Reads the page-wide lock. | — |
 
 ### Data table, filter & lists
 
@@ -662,7 +668,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-pager.webp" width="120" alt="Pager"> | [`Pager`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#pager) | Previous / next cards for a sequence of pages. `DocPager` composes it. | `Pager` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-seealso.webp" width="120" alt="SeeAlso"> | [`SeeAlso`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#seealso) | Related-link list with outbound icons. `DocSeeAlso` composes it. | `SeeAlso` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-toc.webp" width="120" alt="Toc"> | [`Toc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#toc) | On-this-page outline with a per-item active bar. Rail from `xl`, collapsible panel below. `DocToc` composes it. | `Toc` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress; compact on mobile. | `Stepper` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress (expressive shapes, optional steps, a phone header with Back and Next). | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
@@ -688,11 +694,12 @@ Not components: what the stylesheet gives any element.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alert) | Callout with the tone's icon (or yours, or none with `icon={null}`), title and description in seven tones; it spans the row in a form grid. | `Alert` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alert) | Callout with the tone's icon (or yours, or none with `icon={null}`), title, description and `actions` (buttons or links under the text) in seven tones; it spans the row in a form grid. | `Alert` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action, in the look of `Alert` (light surface, start bar); it spans the row in a form grid. | `Banner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-confirmdialog.webp" width="120" alt="ConfirmDialog"> | [`ConfirmDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#confirmdialog), `ConfirmationDialog`, `CustomAlertDialog` | Confirm / cancel dialog with async loading. `ConfirmationDialog` adds a trigger and an optional Zod form. | `ConfirmDialog`, `ConfirmationDialog`, `CustomAlertDialog` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-customdialog.webp" width="120" alt="CustomDialog"> | [`CustomDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#customdialog) | Ready-made dialog with trigger, icon, title, body and footer. | `CustomDialog` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stepupdialog.webp" width="120" alt="StepUpDialog"> | [`StepUpDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stepupdialog) | "Confirm it's you": a dialog that asks for a one-time code, driven by props (`via`, `attemptsLeft`, `error`, `pending`, `confirming`). The title takes the focus, the field after a refusal; `DialogFooter` `stackOnPhone={false}` keeps its footer one row on a phone. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-emptystate.webp" width="120" alt="EmptyState"> | [`EmptyState`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#emptystate) | Illustration, title, description and action, by kind (empty, search, not-found, unauthorized); `compact` size, or `inline` as one row in a list. | `EmptyState` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-errorstate.webp" width="120" alt="ErrorState"> | [`ErrorState`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#errorstate) | Failure block (`role="alert"`) with illustration, outlined Retry and collapsed technical details; generic, offline and maintenance kinds. | `ErrorState` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-progress.webp" width="120" alt="Progress"> | [`Progress`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#progress), `CircularProgress`, `ProgressField` | Material 3 Expressive linear bar and circular ring (flat or wavy, eight tones, buffer and stop dot), and a labelled progress field. | `Progress`, `CircularProgress`, `ProgressField` |

package/dist/{async-slice-D9LAUgth.js → async-slice-DlvKCKAa.js}

@@ -1,5 +1,5 @@
-import { i as e, r as t, t as n } from "./stored-language-Blyb68vN.js";
-import { r } from "./translator-38JuN_VD.js";
+import { i as e, r as t, t as n } from "./stored-language-IaL1Ftn_.js";
+import { r } from "./translator-Dk4_qE6U.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

package/dist/{button-b_kruV_L.js → button-yaltbQmC.js}

@@ -2,7 +2,7 @@ import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
 import { o as r, t as i } from "./tooltip-CkttDIab.js";
 import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-Dd0os4cb.js";
+import { t as o } from "./spinner-C4CgDEYm.js";
 import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
-import { t as n } from "./use-material-translation-DLsfkMxp.js";
-import { t as r } from "./button-b_kruV_L.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
+import { t as r } from "./button-yaltbQmC.js";
 import { t as i } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as a, n as o, r as s, t as c } from "./util-4heV2LPI.js";
 import { t as l } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { t as u } from "./warn-once-C_e47JM8.js";
-import { t as d } from "./chip-6O3t9GXt.js";
+import { t as d } from "./chip-BqWbbr1b.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-6O3t9GXt.js → chip-BqWbbr1b.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./tooltip-CkttDIab.js";
-import { t as n } from "./use-material-translation-DLsfkMxp.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
 import { a as r } from "./button-tones-BwuVvAmd.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { Check as a, X as o } from "lucide-react";

package/dist/{code-editor-BtDOgUET.js → code-editor-C9qBNoYb.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { a as n } from "./dist-lmHmz_bu.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-DJEeT1XT.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-Df8785nt.js";
 import { a as c, i as l, n as u } from "./field-blur-context-Cft9s7Hg.js";
-import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-D3hw7XZE.js";
+import { a as d, d as f, r as p, t as m, u as h } from "./toolbar-items-CsLGJMEJ.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-DLsfkMxp.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-374m-OK8.js";
+import { t as _ } from "./use-material-translation-DOkTaWK_.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-DAHtfQ7W.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-C4W_sOAU.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,14 +1,14 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { a as t } from "./dist-lmHmz_bu.js";
-import { d as n, r, t as i, u as a } from "./toolbar-items-D3hw7XZE.js";
-import { t as o } from "./use-material-translation-DLsfkMxp.js";
-import { i as s, n as c, o as l } from "./code-language-items-374m-OK8.js";
+import { d as n, r, t as i, u as a } from "./toolbar-items-CsLGJMEJ.js";
+import { t as o } from "./use-material-translation-DOkTaWK_.js";
+import { i as s, n as c, o as l } from "./code-language-items-DAHtfQ7W.js";
 import { r as u, t as d } from "./field-blur-CJHzVSh9.js";
 import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { t as m } from "./use-mobile-BDro060N.js";
 import { t as h } from "./react-node-text-Crkpfpco.js";
-import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-BtDOgUET.js";
+import { a as g, c as _, d as v, f as y, i as b, l as x, m as S, o as C, p as w, r as T, s as E, t as D, u as O } from "./code-editor-C9qBNoYb.js";
 import { ChevronDown as k, ChevronUp as A, Columns2 as j } from "lucide-react";
 import { useEffect as M, useRef as N, useState as P } from "react";
 import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";

package/dist/{code-language-items-374m-OK8.js → code-language-items-DAHtfQ7W.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-DJEeT1XT.js";
-import { t as n } from "./use-material-translation-DLsfkMxp.js";
+import { d as e, f as t } from "./dropdown-menu-Df8785nt.js";
+import { t as n } from "./use-material-translation-DOkTaWK_.js";
 import { t as r } from "./live-status-BGPaN8r8.js";
 import { useEffect as i, useRef as a, useState as o } from "react";
 import { jsx as s } from "react/jsx-runtime";