@nxgt/material 3.101.0 → 3.104.0

package/dist/{use-return-focus-DWhbTGVe.js → use-return-focus-CW9KkDkp.js}

@@ -1,6 +1,6 @@
 import { o as e, r as t } from "./dist-DVRQkaTK.js";
 import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
-import { C as o, S as s, x as c } from "./spinner-ffuwBXHl.js";
+import { C as o, S as s, x as c } from "./spinner-CEVomQ5K.js";
 import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
 import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
 import { r as te } from "./escape-owner-DpaP0lm1.js";

package/docs/README.md

@@ -11,6 +11,7 @@ detail: every option, the second example, and the traps.
 | [Themes for your app](guides/themes.md) | You define your own themes: `defineTheme` modules, the Vite plugin's `themes` option, the `nxgt-theme` command and its CI check, the tone warnings |
 | [Barcodes and label sheets](guides/barcode.md) | You draw a Code 128 or Data Matrix code and print a sheet of labels with `@nxgt/material/barcode`: `Barcode`, `LabelSheet` and `Label`, label size, columns, rows, gaps and a start offset, dark mode, print and accessibility |
 | [Calculator](guides/calculator.md) | You add an exact-decimal calculator with `@nxgt/material/calculator` (and `CalculatorField` with `@nxgt/material/calculator-field`): `Calculator`, the keyboard, the tape and memory, copy and paste, what is stored, feedback, sizing and accessibility |
+| [Keypad](guides/keypad.md) | You add a numeric keypad outside the calculator with `@nxgt/material/keypad`: quantity, price, percentage and cash-tendered entry, decimal or minor-unit digits, calculation keys, field bindings (`useKeypadNumber`, `useKeypadQuantity`), the cash variant with change and bill shortcuts, the keyboard and accessibility |
 | [Charts](guides/charts.md) | You draw charts with `@nxgt/material/charts`: each chart, the shared props, reference bands, thresholds and point tones, zoom and phone scroll, the keyboard, accessibility, theming the `--chart-1..5` tokens, and moving off the Nivo charts, removed in 3.0 |
 | [Cards and tiles](guides/cards-and-tiles.md) | You want a `DataTable` as a list of cards or tiles: `layout`, `renderCard`, `renderTile`, the card's one link, selection, the sort control, columns by the list's width |
 | [EventCalendar](guides/event-calendar.md) | You mark periods with `spans`, label days and weeks with `dayBadges` and `weekBadges`, colour events with `tone`, cancel them with `status`, or make them read-only with `readOnlyEvents` |
@@ -21,7 +22,7 @@ detail: every option, the second example, and the traps.
 | [Layouts](guides/layouts.md) | You are choosing a navigation preset, an app bar variant or a page layout, and want one working example of each |
 | [Animations](guides/animations.md) | You animate with `animate-*` classes: setup next to `tw-animate-css`, every animation with its defaults, the modifiers, stagger, text splitting, scroll-driven animation, appear/disappear, reduced motion, recipes and browser support |
 | [Theming](guides/theming.md) | You want to change colours or radius, use a shipped theme (`@nxgt/material/themes/<name>.css`) or a themed zone, add dark mode without a flash, use tones (the `data-tone` channel and app tones), or use the compiled CSS without Tailwind |
-| [Printing](guides/printing.md) | You render PDF documents with `@nxgt/material/print`, turn them into a download, a new tab or a server response, write them as plain data, or bundle them into an SSR server |
+| [Printing](guides/printing.md) | You render PDF documents with `@nxgt/material/print`, turn them into a download, a new tab or a server response, write them as plain data, bundle them into an SSR server, or export a list as CSV with `toCsv` and `csvResponse` |
 | [PDF reader](guides/pdf-reader.md) | You render PDFs with `@nxgt/material/pdf-reader`: the pdf.js assets and worker, `configurePdfReader`, server rendering, the Content-Security-Policy and moving from the classic reader (removed in 3.0) |
 | [Media players](guides/media.md) | You play video or audio: embedded, audio cards, playlists, chapters and transcript, sound across pages with `MediaPlayerHost`, the lightbox, CSP and keyboard |
 | [Streaming (HLS)](guides/media-streaming.md) | You play `.m3u8` streams in `MediaPlayer` with `@nxgt/material/media-hls` |

package/docs/components/README.md

@@ -34,6 +34,7 @@ Anything you press that is not a field: buttons, split buttons, floating action
 [<img src="../previews/buttons-actions-toolbar.webp" height="72" alt="Toolbar">](buttons-and-actions.md#toolbar)
 [<img src="../previews/buttons-actions-iconbutton.webp" height="72" alt="IconButton">](buttons-and-actions.md#iconbutton)
 [<img src="../previews/buttons-actions-actioncard.webp" height="72" alt="ActionCard">](buttons-and-actions.md#actioncard)
+[<img src="../previews/buttons-actions-producttile.webp" height="72" alt="ProductTile">](buttons-and-actions.md#producttile)
 
 ## [Form fields](form-fields.md)
 
@@ -65,6 +66,7 @@ Picking among options: select, combobox, autocomplete, checkbox, radio, card and
 [<img src="../previews/selection-choice-autocomplete.webp" height="72" alt="Autocomplete">](selection-and-choice.md#autocomplete)
 [<img src="../previews/selection-choice-choicecardgroup.webp" height="72" alt="ChoiceCardGroup">](selection-and-choice.md#choicecardgroup)
 [<img src="../previews/selection-choice-transferlist.webp" height="72" alt="TransferList">](selection-and-choice.md#transferlist)
+[<img src="../previews/selection-choice-statusmenu.webp" height="72" alt="StatusMenu">](selection-and-choice.md#statusmenu)
 
 ## [Data display](data-display.md)
 

package/docs/components/buttons-and-actions.md

@@ -24,6 +24,7 @@ and language switches. Everything is imported from `@nxgt/material/components`.
 | <img src="../previews/buttons-actions-scrolltotop.webp" width="96" alt=""> | [ScrollToTop](#scrolltotop) | Appears past a scroll threshold |
 | <img src="../previews/buttons-actions-scrolltolatestbutton.webp" width="96" alt=""> | [ScrollToLatestButton](#scrolltolatestbutton) | "Jump to latest" over a scroll box, counting what arrived |
 | <img src="../previews/buttons-actions-actioncard.webp" width="96" alt=""> | [ActionCard](#actioncard) | Clickable card, a button (`aria-pressed`) when it chooses or reacts, with an active indicator; `status`, `meta`, a trailing `action` and a `tile` variant |
+| <img src="../previews/buttons-actions-producttile.webp" width="96" alt=""> | [ProductTile](#producttile) | Large tap tile for a till or kiosk catalogue: picture or icon, name, price, stock state |
 | <img src="../previews/buttons-actions-themetoggle.webp" width="96" alt=""> | [ThemeToggle](#themetoggle) | Light / dark / system switch |
 | <img src="../previews/buttons-actions-languageswitcher.webp" width="96" alt=""> | [LanguageSwitcher](#languageswitcher) | Menu of the `I18nProvider` languages |
 
@@ -1199,7 +1200,7 @@ import { Banknote, CreditCard } from 'lucide-react';
 | `title`, `description`, `icon` | `ReactNode` | — | the content |
 | `status` | `ReactNode` | — | a line under the title; a string or number becomes a soft `Badge`, a node is shown as given |
 | `meta` | `ReactNode` | — | a secondary line, one line with an ellipsis |
-| `action` | `ReactNode` | — | a trailing control outside the press surface, see [tile](#actioncard-tile); `title` is then required, a `role` moves to the title button; the card's `disabled` does not reach it, disable its control too |
+| `action` | `ReactNode` | — | a trailing control outside the press surface, see [tile](#actioncard-tile); `title` is then required, a `role` moves to the title button; the card's `disabled` does not reach it, disable its control too; in a `tile` it wraps under a narrow title |
 
 A card with `active`, `onClick`, `disabled` or your own `role` is `role="button"` (unless you set another): it takes the Tab stop, and
 Enter and Space press it. `active` sets `aria-pressed`; pass your own `role`
@@ -1218,7 +1219,39 @@ For a card choice bound to a form value, see `ChoiceCardGroup` on
 `variant="tile"` is a compact grid cell for boards: no minimum width (it fills
 its grid track), the title and the `action` on the first row, then `status`,
 `description` and `meta`, and no indicator unless `withIndicator`. `status` and
-`meta` work on every variant.
+`meta` work on every variant. The `action` wraps under a narrow title instead of
+overflowing the tile.
+
+A status that changes in place is a [`StatusMenu`](selection-and-choice.md#statusmenu)
+in `action`: the chip shows the status (so the card needs no `status` badge) and
+opens the choices, in a bottom sheet on a phone. Its button is named "Status of
+Unit 21: Free". The chip is 6 to 10rem wide (a long status word is wider). A tile
+with an `action` is a wrapping line: the title may shrink to 4.5rem
+(`--ac-title-min`), and an action that does not fit beside it drops under the
+title, so a chip fits in a two-per-row `xs` grid on a 360px phone and an icon
+button such as `RowMenu` stays beside the title. A wrapped action starts at the tile's line start (under the icon when the tile
+has one), not under the title text.
+
+```tsx
+import { ActionCard, StatusMenu } from '@nxgt/material/components';
+
+<ActionCard
+	variant="tile"
+	title="Unit 21"
+	meta="Zone B, second floor"
+	onClick={() => openDetail(unit.id)}
+	action={
+		<StatusMenu
+			label="Unit 21"
+			value={unit.status}
+			choices={statuses}
+			onSelect={(next) => saveStatus(unit.id, next)} // a promise keeps the old status with a spinner
+		/>
+	}
+/>;
+```
+
+A compact icon-button action, with a `status` badge, uses `RowMenu`:
 
 ```tsx
 import {
@@ -1303,6 +1336,52 @@ A whole board built on it, with sections (each its own h2 and free count) and, w
 
 ---
 
+## ProductTile
+
+![ProductTile](../previews/buttons-actions-producttile.webp)
+
+A large, even tap tile for a point-of-sale or kiosk catalogue: a picture (or a toned shape with an icon), the item's name, a prominent price and a stock state on its own line. `ActionCard` has no media or price slot; this is the tile for a catalogue.
+
+```tsx
+import { Badge, ProductTile, ResponsiveGrid } from '@nxgt/material/components';
+
+<ResponsiveGrid minItem="9rem" gap="md">
+	<ProductTile
+		title="Orange juice 1 L"
+		price="1,500"
+		icon="bottle-water"
+		selected={basket.has(id)}
+		onClick={() => add(id)}
+	/>
+	<ProductTile
+		title="Free-range eggs, tray of thirty"
+		price="4,800"
+		image="/eggs.jpg"
+		disabled
+		status={<Badge variant="soft" tone="error">Out of stock</Badge>}
+	/>
+</ResponsiveGrid>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `title` | `ReactNode` | required | The name, up to two lines |
+| `price` | `ReactNode` | none | Large and tabular (`tabular-nums`), at the foot of the tile; format it with the app's locale |
+| `status` | `ReactNode` | none | The stock state, on its own line under the price (a `Badge`) |
+| `image` | `string` | none | The photo's URL (a square one fits best), in a tinted 4:3 well, lazy loaded, with an empty `alt` (the title names the tile). If it fails to load, the toned `icon` shape takes its place |
+| `imageFit` | `'contain' \| 'cover'` | `contain` | `contain` for a cut-out PNG or a packshot on white, `cover` for a full-bleed photo |
+| `icon`, `tone`, `shape` | `IconName`, `Tone`, `ShapeName` | `primary`, `squircle` | Without an `image` (or when it fails), a toned shape with this icon, in the same 4:3 well, so tiles with and without a photo share one height |
+| `media` | `ReactNode` | none | Your own media in place of the box; replaces `image` and `icon` |
+| `selected` | `boolean` | `false` | `aria-pressed`, a tint and a bar at the start (the item is in the basket) |
+| `disabled` | `boolean` | `false` | Dimmed and not tappable; its text, status included, is still read |
+| `asChild` | `boolean` | `false` | Render inside the one child (a router `Link`): `<ProductTile asChild title="…"><Link to="…" /></ProductTile>`. `selected` is then `aria-current`, `disabled` is `aria-disabled`, `tabIndex={-1}` and a cancelled click, so a link leaves the Tab order and Enter does not follow it; `onClick` is not called |
+
+The tile is one `button` named by its text: `getByRole('button', { name: /Orange juice.*1,500/ })`. It is a hairline card, at least 44 px high under a coarse pointer, and fills its grid cell (`h-full`): the name takes two lines and the status line is always reserved, so tiles of a row share one height. `minItem="9rem"` gives two columns at 360 px. It has a pressed state, a focus ring and a dark mode. It takes the `button`'s props, so `className` adds to it.
+
+**Storybook:** `Buttons & actions/ProductTile` · **Vue:** later
+
+---
+
 ## ThemeToggle
 
 ![ThemeToggle](../previews/buttons-actions-themetoggle.webp)

package/docs/components/data-display.md

@@ -601,7 +601,7 @@ text colour, 4.5:1 or more on the page and in a card; the `outlined` hairline
 and the `tag` dot still read `--chip-tone`, not the tone channel); `tag`
 a smaller tag led by a colour dot; `dashed` a muted "add" pill. 28px tall,
 24px with `size="sm"`, 44px with `size="lg"`. Selected (`active`, or `aria-pressed` on a toggle
-chip) takes a primary tint and a primary edge, and a pressed toggle with
+chip) takes a primary tint and a primary edge (a pressed toggle chip with a `color` shows the filled tone under its on-colour instead), and a pressed toggle with
 nothing leading draws a check. An unselected neutral toggle chip keeps a
 boundary of at least 3:1 against the page and the card. The label is truncated as one piece; the ✕
 and `trailing` stay whole.
@@ -631,7 +631,7 @@ import { Avatar, Chip } from '@nxgt/material/components';
 | `active` | `boolean` | — | selected: primary tint and edge |
 | `aria-pressed` | `boolean` | — | a toggle chip: selected while pressed, with a check when nothing leads |
 | `size` | `'default' \| 'sm' \| 'lg'` | `'default'` | 28px, 24px, or `lg`, a 44px box at every pointer (the touch target); every target stays at least 24px |
-| `color` | `'default' \| 'primary' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'error'` | neutral | tone: the edge (outlined), the fill and label (tonal, `filled`: a status look) or the dot and tint (tag). A `tag` without `color` (or with `default`) draws no dot |
+| `color` | `'default'` or any `Tone` (the eight named tones, or one declared in `AppTones`) | neutral | tone: the edge (outlined), the fill and label (tonal, `filled`: a status look) or the dot and tint (tag). A `tag` without `color` (or with `default`) draws no dot |
 | `onDismiss` | `() => void` | — | adds the ✕ button, named "Remove {label}" (`material.chip.dismiss-label`), `{label}` being the text `label` shows, a node's included; "Remove" when it shows none; the ✕ is drawn 18px (16px small) in its own 24x24 box (44x44 on a coarse pointer) |
 | `dismissLabel` | `string \| ((label: string) => string)` | — | names the ✕ instead of "Remove {label}": a string as is, or a function of the text the chip shows |
 | `onClick` | `MouseEventHandler` | — | makes the chip (or its body, when dismissible) a button; without it the chip is a `<span>` |
@@ -1652,7 +1652,7 @@ The colour shows as a thin accent bar inset from the chip's edges (never a borde
 
 ![CodeBlock](../previews/data-display-codeblock.webp)
 
-Highlighted code with line numbers and copy, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined).
+Highlighted code (or plain text) with line numbers and copy, a collapsible JSON tree, and tabbed samples (`Tabs`, underlined).
 
 <img src="../previews/data-display-codegroup.webp" height="96" alt="CodeGroup">
 <img src="../previews/data-display-jsonviewer.webp" height="96" alt="JsonViewer">
@@ -1661,6 +1661,7 @@ Highlighted code with line numbers and copy, a collapsible JSON tree, and tabbed
 import { CodeBlock, CodeGroup, JsonViewer } from '@nxgt/material/components';
 
 <CodeBlock code={source} language="typescript" filename="greet.ts" highlightLines={[2]} />
+<CodeBlock code={dnsRecord} language="text" label={false} />
 <CodeGroup tabs={[
   { label: 'bun', language: 'bash', code: 'bun add @nxgt/material' },
   { label: 'npm', language: 'bash', code: 'npm i @nxgt/material' },
@@ -1671,6 +1672,8 @@ import { CodeBlock, CodeGroup, JsonViewer } from '@nxgt/material/components';
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `scheme` | `'dark' \| 'light'` | follows the theme | forces the palette (all three) |
+| `language` | `string` | `typescript` | `CodeBlock`: one of 16 ids or aliases, or `text` (also `plaintext`, `plain`, `txt`) to show the code as is, labelled "Text". An unknown id still falls back to `typescript` |
+| `label` | `ReactNode \| false` | the language's name | `CodeBlock`: replaces the language label; `false` hides it |
 | `showLineNumbers` | `boolean` | `true` | `CodeBlock`, `CodeGroup` |
 | `highlightLines` | `number[]` | — | `CodeBlock`: marked lines |
 | `maxHeight` | `number \| string` | — | `CodeBlock`, `JsonViewer`: scrolls past it |

package/docs/components/data-table-filter-and-lists.md

@@ -107,9 +107,11 @@ table enables, for typing your own column defs.
 | `onLoadMore` / `isLoadingMore` | `() => void` / `boolean` | — | adds a "load more" button under the rows |
 | `options` | `{ showPage?: boolean; showSelected?: boolean }` | both `true` | parts of the footer |
 | `showHeader` | `boolean` | shown | header row (column names, sorting, "Select all") at every width; `false` hides it |
+| `showSort` | `boolean` | shown | `false` drops the sort control of the `cards` and `tiles` list bar (on a phone too); columns stay sortable and a `table` keeps its header sorting ([Cards and tiles](../guides/cards-and-tiles.md#sorting)) |
 | `maxHeight` | `number \| string` | none | caps the table's height (`400`, `'60vh'`); the rows scroll inside it |
+| `maxHeightClassName` | class | none | the same cap as a Tailwind class (`'max-h-[28rem]'`), with no inline `style` on the scroll region, server included; wins over `maxHeight` |
 | `scrollLabel` | `string` | "Scrollable table" | the name of the scroll region the table becomes while it overflows |
-| `virtual` | `boolean \| { estimateSize?, overscan?, ssrRows? }` | off | renders only the rows in view, for long lists; needs `maxHeight`. Client mode shows every filtered and sorted row with no paging and no pagination footer; `manual` virtualizes the rows given. Defaults: `estimateSize` 36 (px, a comfortable row without the gap between rows), `overscan` 8, `ssrRows` 50. `renderExpandedRow` is ignored while it is on ([long lists](#long-lists)) |
+| `virtual` | `boolean \| { estimateSize?, overscan?, ssrRows? }` | off | renders only the rows in view, for long lists; needs `maxHeight` or `maxHeightClassName`. Client mode shows every filtered and sorted row with no paging and no pagination footer; `manual` virtualizes the rows given. Defaults: `estimateSize` 36 (px, a comfortable row without the gap between rows), `overscan` 8, `ssrRows` 50. `renderExpandedRow` is ignored while it is on ([long lists](#long-lists)) |
 | `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
 | `loadingRows` | `number` | the page size | how many skeleton rows |
 | `density` | `'comfortable' \| 'compact'` | `'comfortable'` | `compact` tightens the cell padding, the row and header heights and the gap between rows, the selection column included; it is the table's `data-density` attribute, styled with classes (no inline style). The toolbar band and the empty state keep their size; the print variant is unchanged |
@@ -527,12 +529,22 @@ Rows stay rows on a phone unless you ask for `layout="cards"`, `layout="tiles"`
   virtual
   maxHeight="70vh"
 />
+
+// Under a strict CSP (`style-src-attr 'none'`): a class, no inline style.
+<DataTable
+  data={people}
+  columns={columns}
+  getRowId={(person) => person.id}
+  virtual
+  maxHeightClassName="max-h-[28rem]"
+/>
 ```
 
 `virtual` renders only the rows in view and a few around them (`overscan`),
 between two `aria-hidden` spacer rows that stand for the rest. It needs
-`maxHeight`, since the rows scroll inside the table: without it, `virtual`
-is off and a development warning says so. In client mode every filtered and
+`maxHeight` or `maxHeightClassName`, since the rows scroll inside the table
+(the virtualizer measures the scroll region, so the class needs no number):
+without either, `virtual` is off and a development warning says so. In client mode every filtered and
 sorted row is in one scrolling list: no paging and no pagination footer
 (`onLoadMore` still shows its button). In `manual` mode the rows given are
 virtualized as they are, with the server footer.
@@ -556,8 +568,9 @@ virtualized as they are, with the server footer.
   takes over after mount. The spacers' heights are custom properties
   (`--vr-before`, `--vr-after`) written on the `<tbody>` through CSSOM, which
   `style-src-attr` does not govern: the rows add no `style` attribute to the
-  server markup. The scroll region's own `maxHeight` is still an inline
-  `style` there ([csp.md](../guides/csp.md)).
+  server markup. The scroll region's `maxHeight` is an inline
+  `style` there; pass `maxHeightClassName` instead and it has none
+  ([csp.md](../guides/csp.md)).
 
 `@nxgt/material-vue`'s `DataTable` has no `virtual` yet.
 
@@ -1070,7 +1083,7 @@ export default function Students() {
   and its "Clear search and filters" button
   (`onParamsChange(withoutFilters(params))`, then `onClearFilters`, or the
   table, or the list of cards or tiles, takes the focus). Your search box and switches stay outside.
-- **Passed through** to `DataTable`: `columns`, `maxHeight`, `scrollLabel`,
+- **Passed through** to `DataTable`: `columns`, `maxHeight`, `maxHeightClassName`, `scrollLabel`,
   `showViewOptions`, `renderExpandedRow`, `options`, `loading`,
   `loadingRows`, `getRowHref`, `onRowClick`, `linkComponent`, `density`,
   `layout`, `enableRowSelection`, `rowSelectionDisabledReason`,

package/docs/components/feedback-and-status.md

@@ -250,6 +250,8 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 | `details` | `ReactNode` | — | a note under the description, read with it by assistive technology, for what else is affected or cannot be undone |
 | `refusal` | `(refusal: ConfirmRefusalContext) => ReactNode` | the message; an `ActionRefusal`'s details and action too | renders the refusal inside the error alert (still `role="alert"`, a `div`) instead of the default, so it can carry a link. Receives `{ message, cause, close }`: `message` is the thrown error's message or the translated `material.confirm-dialog.failed` text, `cause` is what `onConfirm` threw, `close()` closes the dialog |
 | `confirmLabel` / `cancelLabel` | `string` | "Confirm" / "Cancel", translated (`material.confirm-dialog.confirm` / `.cancel`) | button text |
+| `confirmPhrase` | `string` | — | asks the user to type this text before Confirm enables, for a deletion worth a second thought. A field labelled by the translated `material.confirm-dialog.type-phrase` ("Type {phrase} to confirm", the phrase in code style) takes the focus on open instead of Cancel and starts empty each time the dialog opens. Paste is allowed; Enter in the field confirms only once it matches. It combines with `confirmDisabled` (both must allow). Empty or unset: no field |
+| `confirmPhraseMatch` | `'exact' \| 'trim' \| 'trim-case-insensitive'` | `'exact'` | how the typed text is compared: character for character, ignoring spaces around it, or ignoring those and the letter case |
 | `cancelVariant` | `ButtonVariant` | `'tonal'` | the Cancel button's variant; `'outlined'` restores the earlier look |
 | `onCloseAutoFocus` | `(event: Event) => void` | — | called as the dialog closes, before the focus goes back; `event.preventDefault()` places it yourself, e.g. `ctx.focusTrigger()` of a `ServerTable` bulk action whose button a redraw replaced |
 
@@ -269,6 +271,24 @@ function DeleteProject({ onDelete }: { onDelete: () => Promise<void> }) {
 />
 ```
 
+**Type the value to confirm.** For a deletion that should not happen by habit (a domain, a mailbox), ask for the name:
+
+```tsx
+<ConfirmDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="destructive"
+  title="Delete example.com?"
+  description="Its mailboxes are deleted with it."
+  confirmLabel="Delete"
+  confirmPhrase="example.com"
+  confirmPhraseMatch="trim-case-insensitive"
+  onConfirm={remove}
+/>
+```
+
+`ConfirmDialog` has no form; `ConfirmationDialog` (with `formOptions`) does not take `confirmPhrase`. The Vue twin does not have it yet.
+
 **The text stays while the dialog fades out.** A confirm is usually driven by a nullable subject, and closing clears it: `open={item !== null}`. `ConfirmDialog` keeps the `title`, `description`, `details`, button labels and `variant` of its last open render until it has closed, so the title does not read "Delete ?" during the exit animation. Nothing to add in the app:
 
 ```tsx

package/docs/components/form-fields.md

@@ -27,6 +27,7 @@ order and roles) and the tokens that tune it.
 | <img src="../previews/form-fields-numberfield.webp" width="96" alt=""> | [NumberField](#numberfield) | `number \| null` with clamping and +/− buttons |
 | <img src="../previews/form-fields-percentfield.webp" width="96" alt=""> | [PercentField](#percentfield) | `NumberField` with a `%` suffix |
 | <img src="../previews/form-fields-quantityfield.webp" width="96" alt=""> | [QuantityField](#quantityfield) | One labelled field holding an amount and its unit |
+| <img src="../previews/form-fields-quantitystepper.webp" width="96" alt=""> | [QuantityStepper](#quantitystepper) | Inline −/value/+ control for a cart or ticket line |
 | <img src="../previews/form-fields-currencyfield.webp" width="96" alt=""> | [CurrencyField](#currencyfield) | Locale-formatted amount with a currency suffix |
 | <img src="../previews/form-fields-phonefield.webp" width="96" alt=""> | [PhoneField](#phonefield) | International number, emits E.164 |
 | <img src="../previews/form-fields-urlfield.webp" width="96" alt=""> | [UrlField](#urlfield) | Validates on blur, open and copy buttons |
@@ -802,7 +803,7 @@ phone: the chip truncates before the value does (see The unit chip below).
 | `control`, `name` | `Control<T>`, `Path<T>` | — | the form and its `{ value, unit }` (`QuantityFormField`) |
 | `value`, `defaultValue`, `onChange` | `QuantityValue`, `(value) => void` | empty | the amount and its unit; `onChange` gets both on each change |
 | `label` | `ReactNode` | none | the one label; it names the group |
-| `units` | `{ value, label }[]` | none | the units offered |
+| `units` | `{ value, label }[]` | none | the units offered; without `units` and `allowCustomUnit` there is no unit to pick, so no chip is drawn (a plain count) |
 | `allowCustomUnit` | `boolean` | `false` | the unit menu gets a "Search or type a unit" input and a "Use “x”" item, so a unit outside `units` can be typed; otherwise it is a plain listbox of `units` |
 | `min`, `max`, `step`, `hideSteppers` | | `step` 1 | as `NumberField` |
 | `unitLabel`, `unitPlaceholder` | `string` | "<label> unit" | `unitLabel` names the unit part (the menu's name; the chip reads "<unitLabel>: mg"); `unitPlaceholder` shows while no unit is chosen |
@@ -812,15 +813,16 @@ phone: the chip truncates before the value does (see The unit chip below).
 | `required`, `disabled`, `placeholder`, `id`, `ref` | | | `required` applies to the number only; to require a unit, validate `unit` in the form schema. `placeholder`, `id` and `ref` reach the number input (React Hook Form's `field.ref` focuses it on an error) |
 
 - **Semantics:** a `<fieldset>` (role `group`) named by the label; the number
-  is a textbox named after the label, the unit chip a button named "Unit: mg"
-  (`aria-expanded`; it opens a popover), the menu a listbox named
-  "Dose unit". The message describes the group, the number and the chip, and
-  the number is `aria-invalid` on an error.
-- **Keyboard:** Tab goes value, unit chip, Decrease, Increase. Enter, Space or
+  is a textbox named after the label, the unit chip (when drawn) a button
+  named "Unit: mg" (`aria-expanded`; it opens a popover), the menu a listbox
+  named "Dose unit". The message describes the group, the number and the chip,
+  and the number is `aria-invalid` on an error. Without a chip there is no
+  unit button or listbox.
+- **Keyboard:** Tab goes value, unit chip (when drawn), Decrease, Increase. Enter, Space or
   ArrowDown on the chip opens the menu (focus lands on the list, or on the
   search with `allowCustomUnit`); the arrows move, Enter picks, Esc closes and
   returns focus to the chip.
-- **The unit chip:** one focus ring for the whole box, whichever part has
+- **The unit chip** (drawn only with `units` or `allowCustomUnit`; a plain `<QuantityField label="Count" />` has none, and Tab goes value, Decrease, Increase): one focus ring for the whole box, whichever part has
   focus. The chip is capped at 52% of the box and truncates a long label with
   an ellipsis (the full label is its `title`); the value keeps room for about
   4 digits at 360px. A coarse pointer gets 44px targets. Disabled, the chip
@@ -836,6 +838,57 @@ phone: the chip truncates before the value does (see The unit chip below).
 
 ---
 
+## QuantityStepper
+
+![QuantityStepper](../previews/form-fields-quantitystepper.webp)
+
+A compact inline −/value/+ control for a cart or ticket line, where a
+[`NumberField`](#numberfield) or [`QuantityField`](#quantityfield) (a labelled
+box) is too heavy. It has no label and no border: a `group` named by your
+`aria-label` ("Quantity of Orange juice") holding a minus button, the value and
+a plus button. It is an uncontrolled or controlled number, not a form field.
+
+```tsx
+import { QuantityStepper } from '@nxgt/material/components';
+import { useState } from 'react';
+
+export function Line() {
+  const [qty, setQty] = useState(2);
+  return (
+    <QuantityStepper
+      aria-label="Quantity of Orange juice"
+      value={qty}
+      onValueChange={setQty}
+      min={1}
+      max={20}
+      onRemove={() => removeLine()}
+    />
+  );
+}
+```
+
+| Prop | Type | Default | What it does |
+| --- | --- | --- | --- |
+| `aria-label` | `string` | required | Names the group and the value; the buttons are "Decrease …", "Increase …" and "Remove …" followed by it |
+| `value` / `defaultValue` | `number` | `min` | Controlled / uncontrolled value |
+| `onValueChange` | `(value: number) => void` | none | Called with the new value, always within `min` and `max` |
+| `min`, `max` | `number` | `0`, none | The limits; the minus (or plus) button is `aria-disabled` at its limit |
+| `step` | `number` | `1` | What a button or an arrow key adds; Page Up/Down use ten steps, Home/End jump to `min`/`max` |
+| `size` | `'sm' \| 'md'` | `'md'` | 32px or 36px buttons; both are 44px under a coarse pointer |
+| `editable` | `boolean` | `false` | The value is a text input: committed on Enter or blur (clamped; text that is not a number is dropped), Escape cancels; only Up/Down and Page Up/Down step it, Left/Right/Home/End move the caret |
+| `onRemove` | `() => void` | none | At `min`, the minus button becomes a trash button named "Remove …" that calls this instead of stepping |
+| `disabled` | `boolean` | `false` | Disables every control |
+
+The value is a `spinbutton` (`aria-valuenow`, `aria-valuemin`, `aria-valuemax`)
+in tabular figures, so the row does not shift as digits change. The stepper is
+inline (`inline-flex`): put it in a `ListTile`'s `trailing` or `content`. The
+text is translated through `material.number-field.*` and
+`material.quantity-stepper.remove`.
+
+**Storybook:** `Form fields/QuantityStepper` · **Vue:** later
+
+---
+
 ## CurrencyField
 
 ![CurrencyField](../previews/form-fields-currencyfield.webp)

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

@@ -22,6 +22,7 @@ documentation-site shell. Everything is imported from
 | <img src="../previews/navigation-layout-dashboardgrid.webp" width="96" alt=""> | [DashboardGrid, DashboardTile](#dashboardgrid) | Tiles with spans that the user rearranges in an edit mode, by drag or keyboard; the order is the app's |
 | <img src="../previews/navigation-layout-editorlayout.webp" width="96" alt=""> | [EditorLayout](#editorlayout) | The editor page: toolbar, canvas that scrolls alone, properties at the end (a bottom sheet on a phone), optional outline at the start |
 | <img src="../previews/navigation-layout-sectioncolumns.webp" width="96" alt=""> | [SectionColumns](#sectioncolumns) | Short page sections side by side from a viewport breakpoint, stacked below it |
+| <img src="../previews/navigation-layout-panelcard.webp" width="96" alt=""> | [PanelCard](#panelcard) | Titled card for a side panel: heading, description, header actions |
 | <img src="../previews/navigation-layout-recordpage.webp" width="96" alt=""> | [RecordPage, RecordDetails](#recordpage) | The page of one record: header card, content, facts as a side panel from `xl` |
 | <img src="../previews/navigation-layout-resizable.webp" width="96" alt=""> | [ResizableGroup](#resizablegroup) | Resizable panels |
 | <img src="../previews/navigation-layout-skiplink.webp" width="96" alt=""> | [SkipLink](#skiplink) | Skip-to-content link |
@@ -669,7 +670,7 @@ import { ListDetailsLayout, PaneLayout, ThreadLayout } from '@nxgt/material/comp
   </ListDetailsLayout.Details>
 </ListDetailsLayout>
 
-<PaneLayout defaultOpen paneSide="right">
+<PaneLayout defaultOpen="desktop" paneSide="right">
   <PaneLayout.Content>
     <PaneLayout.Trigger>Folders</PaneLayout.Trigger>
     {messages}
@@ -715,10 +716,25 @@ takes over. A page rendered only in the browser starts on the real layout.
   container and the flex row moves to an inner `data-slot="pane-layout-body"`.
 - `paneWidth`: `'sm'` (16rem), `'md'` (20rem, default) or `'lg'` (24rem) for
   the inline pane; no style attribute, so it holds under a strict CSP.
+- `defaultOpen`: `true` / `false` for every viewport, `'desktop'` (open wide,
+  shut on a phone) or `{ desktop, phone }` (a missing key is shut). The state
+  follows the viewport until the user opens or closes the pane, so a cart that
+  starts open on desktop never opens its sheet over a phone, with no effect
+  and no flash: the server renders the desktop value and the inline pane is
+  hidden by CSS on a phone. With `phone="stack"` the pane has no overlay to
+  hide, so a stacked pane that is open on desktop only shows for one frame
+  before closing on a phone.
+- `paneSide`: `'left'` (default) or `'right'`. The pane takes its side with a
+  CSS `order`, never by reversing the row, so the DOM and tab order are the
+  ones you write: put `PaneLayout.Content` first and the pane after it and
+  Tab reaches the content first, whichever side the pane is on.
+  Before this change a right pane written after the content sat on the left; check
+  screens that relied on it.
 - With `phone` or `breakpoint` set, the inline pane is an `<aside>` named by
   `sheetTitle` (default `Side Panel`), a landmark; the historical markup is a
   `div`. `usePaneLayout()` and the function children also get `phone`,
   `breakpoint` and `paneWidth`.
+
 `ThreadLayout` is a centred column over the app
 [background](#background) on the page ground (`bg-ground`, so a `bg-card` card stands apart) for focused flows (sign-in, onboarding), with no
 app bar. `width`, `stepperPlacement` and a sticky `footer` make it a centred form or a wizard with a side rail (see "A centred form or a wizard" below).
@@ -735,7 +751,8 @@ app bar. `width`, `stepperPlacement` and a sticky `footer` make it a centred for
 | `history` / `historyParam` | `'push' \| 'replace'` / `string` | — / `'view'` | `ListDetailsLayout`: keep the view in the URL (`?view=details`), through React Router |
 | `listWidth` / `resizable` / `onListWidthChange` | `number` / `boolean` / `(width) => void` | `320` / `false` | `ListDetailsLayout`: the list pane's width in px; `resizable` adds a keyboard and pointer separator, 240 to 480 px |
 | `back` | `boolean \| ReactNode` | — | `ListDetailsLayout.Details`: a bar with the way back to the list, on a phone only; `true` is the translated "Back to the list" (`material['list-details'].back`), a node is its label |
-| `open` / `defaultOpen` / `onOpenChange` | `boolean` | `false` | `PaneLayout`: pane shown |
+| `open` / `onOpenChange` | `boolean` | `false` | `PaneLayout`: pane shown |
+| `defaultOpen` | `boolean \| 'desktop' \| { desktop?, phone? }` | `false` | `PaneLayout`: initial pane state per viewport |
 | `paneSide` | `'left' \| 'right'` | `'left'` | `PaneLayout` |
 | `sheetTitle` | `string` | "Side Panel" (translated, `material['pane-layout']['sheet-title']`) | `PaneLayout.Pane`: screen-reader title of the sheet on phones |
 | `header` | `ReactNode` | — | `ThreadLayout`: above the column |
@@ -1197,6 +1214,35 @@ props, so `className` adds to it.
 
 **Storybook:** `Navigation & layout/SectionColumns` · **Vue:** later ([#1614](https://github.com/softistx/nxgt-material/issues/1614))
 
+## PanelCard
+
+A titled card for the side of a page (an `ActivityContent` aside) or its sections: a heading, an optional one-line description and header actions over the content. It replaces the `Card` + `CardHeader` + `CardTitle as="h2"` + `CardDescription` + `CardContent` wrapper apps wrote themselves.
+
+```tsx
+import { PanelCard } from '@nxgt/material/components';
+
+<PanelCard
+  title="Recent activity"
+  description="The last five changes to this record."
+  actions={<Button size="sm" variant="outlined">Refresh</Button>}
+>
+  …
+</PanelCard>
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `title` | `ReactNode` | required | The heading, and the accessible name of the card |
+| `description` | `ReactNode` | none | One line under the title |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `2` | The title's heading level; use `3` inside a section that already has an `h2` |
+| `actions` | `ReactNode` | none | A slot at the end of the title row (a button, a `RowMenu`) |
+
+The card is a `role="region"` labelled by its title, so `getByRole('region', { name })` finds it. Children are the card's content (`CardContent`); with none, the card is its header only. It takes the `div`'s props, so `className` adds to it.
+
+The title is set in the card-title step (`title-sm` emphasized) whatever its heading level, one step below an `ActivityContent` page title (`title-md` emphasized), so an aside never outranks the page. The level only sets the document outline, not the size.
+
+**Storybook:** `Navigation & layout/PanelCard` · **Vue:** later, [#2866](https://github.com/softistx/nxgt-material/issues/2866)
+
 ---
 
 ## RecordPage

package/docs/components/primitives.md

@@ -83,7 +83,7 @@ opens at once.
 
 ![Collapsible](../previews/primitives-collapsible.webp)
 
-A single show / hide region and its trigger. The content springs open to its height and folds away (clipped only while it moves, so a focus ring inside is never cut). Give `CollapsibleTrigger` a `variant` for a styled trigger with a turning chevron: `tonal`, a pill that squares its corners while open, or `text`.
+A single show / hide region and its trigger. The content springs open to its height and folds away (clipped only while it moves, so a focus ring inside is never cut). Give `CollapsibleTrigger` a `variant` for a styled trigger with a turning chevron: `tonal`, a pill that squares its corners while open, or `text`. Add `flush` to a `text` trigger to drop its inline padding and take the parent's font, so a section disclosure inside `<Typography as="h3">` lines up with the headings around it.
 
 ```tsx
 import {
@@ -110,6 +110,33 @@ import {
 </Collapsible>;
 ```
 
+A flush trigger inside a heading, aligned with the headings around it:
+
+```tsx
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+	Typography,
+} from '@nxgt/material/components';
+
+<div className="flex w-80 flex-col gap-3">
+	<Typography as="h3" variant="title-sm" emphasized>
+		Question
+	</Typography>
+	<Collapsible>
+		<Typography as="h3" variant="title-sm" emphasized>
+			<CollapsibleTrigger variant="text" flush>
+				Details
+			</CollapsibleTrigger>
+		</Typography>
+		<CollapsibleContent className="text-muted-foreground text-sm">
+			Hidden text that opens under the heading.
+		</CollapsibleContent>
+	</Collapsible>
+</div>;
+```
+
 Parts: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`.
 
 | Prop | Type | Default | Effect |
@@ -117,6 +144,7 @@ Parts: `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`.
 | `defaultOpen` / `open` | `boolean` | `false` | whether the content shows, uncontrolled / controlled |
 | `onOpenChange` | `(open: boolean) => void` | — | called when the trigger toggles it |
 | `disabled` | `boolean` | `false` | the trigger does nothing |
+| `flush` (`CollapsibleTrigger`) | `boolean` | `false` | with `variant="text"`, no inline padding and the parent's font: the label starts at the left edge and can sit in a heading; ignored on other variants |
 | `variant` (`CollapsibleTrigger`) | `'tonal' \| 'text'` | — | a styled trigger with a chevron; unset, it is unstyled as before (with `asChild`, the child takes the look and brings its own icon) |
 
 To keep the former instant toggle, pass `className="animate-none"` to
@@ -705,7 +733,7 @@ For sorting, paging and selection use `DataTable` on the
 
 ![Tabs](../previews/primitives-tabs.webp)
 
-Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill.
+Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill. `<TabsList fullWidth>` on a `segmented` list fills its container and shares the width between the tabs in equal parts (a payment-method switch); `underline` ignores it.
 
 ```tsx
 import {
@@ -767,6 +795,19 @@ few short choices, such as a view switch.
 </Tabs>
 ```
 
+**`fullWidth`** on a `segmented` `TabsList` makes the track fill its container,
+the tabs sharing the width in equal parts, whatever their labels. It suits a
+two-way switch such as a payment method.
+
+```tsx
+<Tabs defaultValue="cash" variant="segmented">
+	<TabsList fullWidth aria-label="Payment method">
+		<TabsTrigger value="cash">Cash</TabsTrigger>
+		<TabsTrigger value="card">Card</TabsTrigger>
+	</TabsList>
+</Tabs>
+```
+
 `orientation="vertical"` lays the tabs in a column, the indicator on their
 left side; the arrow keys become Up and Down.
 
@@ -825,6 +866,7 @@ as `segmented`. Both still type-check and render; write `underline` or
 | `variant` (`Tabs`) | `'underline' \| 'segmented' \| 'bar' \| 'line'` | `'underline'` | the look; `bar` and `line` are deprecated aliases of `underline` and `segmented` |
 | `defaultValue` / `value` (`Tabs`) | `string` | — | the selected tab, uncontrolled / controlled |
 | `onValueChange` (`Tabs`) | `(value: string) => void` | — | called when a trigger is selected |
+| `fullWidth` (`TabsList`) | `boolean` | `false` | `segmented` only: the track fills its container and the tabs share the width in equal parts; `underline` ignores it |
 | `orientation` (`Tabs`) | `'horizontal' \| 'vertical'` | `'horizontal'` | a row or a column, and the arrow keys' direction |
 | `dir` (`Tabs`) | `'ltr' \| 'rtl'` | `'ltr'` | the reading direction: which way the tabs run and the arrow keys move |
 | `icon` (`TabsTrigger`) | `ReactNode` | — | shown before the label |

package/docs/components/rich-widgets.md

@@ -13,6 +13,7 @@ the app owns the data.
 | <img src="../previews/rich-widgets-drawing.webp" width="96" alt=""> | [Drawing](#drawing) | Vector drawing from a scene of plain data or JSX primitives: theme colours, accessible, focusable nodes, strict-CSP safe |
 | <img src="../previews/rich-widgets-barcode.webp" width="96" alt=""> | [Barcode](#barcode) | Code 128 and Data Matrix as accessible SVG, themed and dark-aware, black on white in print, with `LabelSheet` for a printed sheet of labels |
 | <img src="../previews/rich-widgets-calculator.webp" width="96" alt=""> | [Calculator](#calculator) | Exact decimal calculator (Standard, Scientific, a point of sale, Financial, Conversion and Programmer) with the usual precedence, a shaped keypad, tape, memory, keyboard, copy and paste, and a number field whose button opens it (`CalculatorField`, in `@nxgt/material/calculator-field`), in its own entry; variants other than Standard load on demand |
+| <img src="../previews/rich-widgets-keypad.webp" width="96" alt=""> | [Keypad](#keypad) | A touch and keyboard numeric keypad for a quantity, a price, a percentage or a cash tender with change (`@nxgt/material/keypad`), decimal or minor-unit entry, field bindings, in its own entry, styled by `calculator.css` |
 | <img src="../previews/rich-widgets-emojipicker.webp" width="96" alt=""> | [EmojiPicker](#emojipicker) | Shared emoji picker and list |
 | <img src="../previews/rich-widgets-mentionlist.webp" width="96" alt=""> | [MentionList](#mentionlist) | `@` mention list with local search |
 | <img src="../previews/rich-widgets-documenteditor.webp" width="96" alt=""> | [DocumentEditor](#documenteditor) | Rich text editor for long-form writing, built on a headless core |
@@ -1012,6 +1013,33 @@ import { CalculatorField, CalculatorFormField } from '@nxgt/material/calculator-
 
 See the [calculator guide](../guides/calculator.md).
 
+## Keypad
+
+A numeric keypad from `@nxgt/material/keypad`, usable outside the Calculator:
+quantity, price, percentage and cash-tendered entry. The value is a canonical
+decimal string and the arithmetic is the calculator's exact engine. Digits go in
+as typed (`entry="decimal"`) or like a till (`entry="minor"`, `1 2 5` is `1.25`);
+`operations` adds calculation keys; `min` and `max` hold the value; the keyboard
+works when focus is in the keypad (`keyboard="global"` for a till). Its own entry,
+server-safe, styled by `@nxgt/material/calculator.css` (import it after
+`styles.css`; there is no keypad stylesheet).
+
+```tsx
+import { Keypad, useKeypadNumber } from '@nxgt/material/keypad';
+
+<Keypad value={qty} onValueChange={setQty} onCommit={(value) => addLine(value)} />
+const binding = useKeypadNumber({ value: qty, onChange: setQty, min: 1 });
+<Keypad binding={binding} />
+<Keypad variant="cash" total="17.35" denominations={[5, 10, 20, 50]} currency="EUR" onTender={pay} />
+```
+
+`useKeypadNumber` binds it to a `NumberField`, `PercentField` or `CurrencyField`
+(also with `minorUnits`), `useKeypadQuantity` to a `QuantityField`; the bound
+keypad hides its own display unless `operations` are offered. The `cash` variant shows the total, the change or
+the amount still due, bill shortcuts from `denominations`, and reports
+`onTender(tendered, settlement)`; your app owns the charge. See the
+[keypad guide](../guides/keypad.md).
+
 ## EmojiPicker
 
 ![EmojiPicker](../previews/rich-widgets-emojipicker.webp)