@nxgt/material 3.101.0 → 3.104.0

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # @nxgt/material
 
+## 3.104.0
+
+### Minor Changes
+
+- [#2897](https://github.com/softistx/nxgt-material/pull/2897) [`c33484c`](https://github.com/softistx/nxgt-material/commit/c33484c6f2bf1eed9db93b4537032ebc7d8ffeda) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `ChipGroupField` option takes a `tone` (`{ value: 'drinks', label: 'Drinks', tone: 'info' }`), the tones `Badge` takes, an app's own included. An unselected chip shows a soft tint of its tone with the tone's text colour; a selected chip shows the filled tone under its on-colour, both at AA contrast in light and dark. The check, `aria-checked` and the keyboard behaviour are unchanged. `ChipColor` now accepts every `Tone` (it gains `tertiary` and the app's own tones).
+  
+  A pressed toggle `Chip` with a `color` (`aria-pressed` or `aria-checked` true) gets the same filled look; a status chip (`active`) keeps its tint.
+
+- [#2873](https://github.com/softistx/nxgt-material/pull/2873) [`334f1f6`](https://github.com/softistx/nxgt-material/commit/334f1f6ab264a653fe35657bb6dea03aae61d54f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChipGroupField` takes `overflow="scroll"`: the chips stay on one line that scrolls sideways (touch, trackpad, a focused chip scrolls into view) with a fade at each edge that hides more chips, and no page scroll. The default `overflow="wrap"` is unchanged.
+
+- [#2900](https://github.com/softistx/nxgt-material/pull/2900) [`c6a47e9`](https://github.com/softistx/nxgt-material/commit/c6a47e9eceb8abf7d4098cbd2bebf20bddf96f4d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CollapsibleTrigger`: a `flush` prop on `variant="text"` drops the inline padding and takes the parent's font, so a section disclosure inside a `Typography as="h3"` heading starts at the same left edge as its sibling headings, with the chevron, its rotation, hover and focus ring kept. Fixes [#2898](https://github.com/softistx/nxgt-material/issues/2898).
+
+- [#2890](https://github.com/softistx/nxgt-material/pull/2890) [`deb4cf4`](https://github.com/softistx/nxgt-material/commit/deb4cf44871082398d7e6e5bf515a212e66f3574) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/print` gains `toCsv(rows, columns, { separator?, bom? })`, a pure RFC 4180 CSV writer (CRLF line ends, fields holding the separator, a quote, CR or LF quoted with doubled quotes, `null` and `undefined` empty, `,` `;` or tab separator, optional UTF-8 BOM), and `csvResponse(text, fileName, options?)`, a Web `Response` with `Content-Type: text/csv; charset=utf-8`, an attachment `Content-Disposition` (ASCII `filename` and RFC 5987 `filename*`, the same helper as `pdfResponse`) and `Cache-Control: private, no-store`. Fixes [#2889](https://github.com/softistx/nxgt-material/issues/2889).
+
+- [#2886](https://github.com/softistx/nxgt-material/pull/2886) [`1b17b5f`](https://github.com/softistx/nxgt-material/commit/1b17b5faf2cfa6dc5c649450f8ffe27fd422672a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` `maxHeightClassName`: caps the scroll region with a Tailwind class (`max-h-[28rem]`), as `DataGrid` does, so the region carries no inline `style`, on the server too, and a strict `style-src-attr 'none'` has nothing to block. `virtual` now accepts either `maxHeight` or `maxHeightClassName`; the virtualizer measures the scroll region. `ServerTable` passes it through. `maxHeight` is unchanged. Fixes [#800](https://github.com/softistx/nxgt-material/issues/800).
+
+- [#2871](https://github.com/softistx/nxgt-material/pull/2871) [`4b7c4a7`](https://github.com/softistx/nxgt-material/commit/4b7c4a7c5d8c0fc83c00c1e692516fa1706d9977) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` `showSort`: `false` drops the sort control of the `cards` and `tiles` list bar ("Sort: Name ↑", on a phone too) without making any column unsortable, so a `{ phone: 'cards', wide: 'table' }` layout keeps its header sorting on desktop. Default: shown, as before. Fixes [#2867](https://github.com/softistx/nxgt-material/issues/2867).
+
+- [#2883](https://github.com/softistx/nxgt-material/pull/2883) [`8e7598c`](https://github.com/softistx/nxgt-material/commit/8e7598ca77c51807092b6d5968c50ad5457f51b5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PaneLayout`: `defaultOpen` also takes `'desktop'` (open wide, shut on a phone) or `{ desktop, phone }`, resolved from the first client render with no sheet flash and no effect; a boolean keeps applying to every viewport. `paneSide="right"` no longer reverses the flex row: the pane takes its side with a CSS `order`, so the tab order follows the DOM you wrote (a `PaneLayout.Content` first, then the pane). A pane written after the content with `paneSide="right"` now sits on the right (before, that order put it on the left). Fixes [#2881](https://github.com/softistx/nxgt-material/issues/2881).
+
+- [#2882](https://github.com/softistx/nxgt-material/pull/2882) [`3c1c60e`](https://github.com/softistx/nxgt-material/commit/3c1c60e3048893b734399a225ac5bb7f6ef790bc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `ProductTile` to `@nxgt/material/components`: a large, even tap tile for a point-of-sale or kiosk catalogue, with a photo (lazy loaded, with an icon fallback) in a tinted 4:3 well or a toned shape and icon, the name, a prominent tabular price, a `status` on its own line, `selected` and `disabled` states and an even height in a `ResponsiveGrid`.
+
+- [#2880](https://github.com/softistx/nxgt-material/pull/2880) [`e66bfa3`](https://github.com/softistx/nxgt-material/commit/e66bfa32223c256ef9e61a43c7f7e51d8c4bae2f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuantityStepper`, an inline −/value/+ control for a cart or ticket line: a named `group` (`aria-label`, required, e.g. "Quantity of Orange juice") with a minus button, the value as a `spinbutton` (arrow keys, Page Up/Down, Home/End; typed with `editable`) and a plus button. `value` / `defaultValue`, `onValueChange`, `min`, `max`, `step`, `size` (`sm` or `md`), `disabled`, and `onRemove` to turn the minus into a remove (trash) button at `min`. Tabular figures, 44px buttons under a coarse pointer, fits a `ListTile`'s `trailing` or `content`. Import it from `@nxgt/material/components`; story `Form fields/QuantityStepper`. Fixes [#2870](https://github.com/softistx/nxgt-material/issues/2870).
+
+- [#2909](https://github.com/softistx/nxgt-material/pull/2909) [`362876e`](https://github.com/softistx/nxgt-material/commit/362876e90777f8b5615ec1c94b9cd053829303aa) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `TabsList` takes `fullWidth` for the `segmented` look: the track fills its container and its tabs share the width in equal parts, whatever their labels. The default and the `underline` look are unchanged.
+
+### Patch Changes
+
+- [#2885](https://github.com/softistx/nxgt-material/pull/2885) [`88e14ce`](https://github.com/softistx/nxgt-material/commit/88e14ce7acf5735bcb6b9af89a3188006f9c32af) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `LineChart` (and `AreaChart`) threshold label that sits under its line stays inside the plot: near the plot floor it flips back above the line, or is clamped, instead of touching the x-axis tick labels ([#2058](https://github.com/softistx/nxgt-material/issues/2058)).
+
+- [#2884](https://github.com/softistx/nxgt-material/pull/2884) [`6affed1`](https://github.com/softistx/nxgt-material/commit/6affed18dacfdb93ce0860392b31f78ca53b6ed2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DayGroupedList` keeps a date-only value such as `"2026-11-03"` on that local calendar day in its relative buckets, instead of reading it as UTC midnight (the previous day west of UTC).
+
+- [#2903](https://github.com/softistx/nxgt-material/pull/2903) [`f5d412f`](https://github.com/softistx/nxgt-material/commit/f5d412f85aa3589ead7a89de24eaafc3a855e050) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Keypad` cash variant polish: the 0 key spans nine columns when there is no decimal key (it was one column wide), the double zero key's name is now "00, double zero" ("00, double zéro") so it contains its visible text (WCAG 2.5.3), the change row is toned success (warning while an amount is still due) with the figure emphasised, and the quick amounts are tonal chips so the pad follows one tint scheme. The quick-amount chips sit in a two-column grid (an odd last chip takes the full row), so no amount is clipped at 360 px. The POS calculator's double zero key takes the same name.
+
+- [#2912](https://github.com/softistx/nxgt-material/pull/2912) [`63c0489`](https://github.com/softistx/nxgt-material/commit/63c0489298c6161e46e4cbbf9101174eec6a3839) Thanks [@SteveGT96](https://github.com/SteveGT96)! - PaneLayout: on a phone the pane sheet is full width and keeps its close button in a row of its own above the pane's header (side sheet and bottom sheet).
+
+- [#2879](https://github.com/softistx/nxgt-material/pull/2879) [`430d6dc`](https://github.com/softistx/nxgt-material/commit/430d6dc92916c3f72d3d68c6fafe3a02006a904a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PanelCard`: the title is set in the card-title step (`title-sm` emphasized) instead of the browser's heading size, so a panel in an `ActivityContent` aside no longer outranks the page title. The heading level and the region are unchanged. Fixes [#2877](https://github.com/softistx/nxgt-material/issues/2877).
+
+- [#2893](https://github.com/softistx/nxgt-material/pull/2893) [`4536794`](https://github.com/softistx/nxgt-material/commit/45367945405353ab64f7a5fff20be3976ddf9eeb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ProductTile` with `asChild` and `disabled` is no longer reachable from the keyboard: the child link gets `tabIndex={-1}` and a click handler that cancels navigation, so Tab skips it and Enter does not follow it.
+
+- [#2911](https://github.com/softistx/nxgt-material/pull/2911) [`e9380fb`](https://github.com/softistx/nxgt-material/commit/e9380fbbae55214eb4fe66f7f9c3130351a89597) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuantityField` no longer draws its unit chip when there is no unit to pick (no `units` and no `allowCustomUnit`), so a plain count keeps the quantity semantics without a dead "Unit" control. Stepping, `min`/`max`, the `{ value, unit }` value, the `name.unit` form entry and the keypad binding are unchanged.
+
+- [#2902](https://github.com/softistx/nxgt-material/pull/2902) [`92a4b0d`](https://github.com/softistx/nxgt-material/commit/92a4b0d8b2f72ceecf351dff7b7164a3ff2761dd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A virtual `DataTable` with `maxHeight` or `maxHeightClassName` no longer shows a blank band of about 8 px under its sticky header that cut off the first visible row; the header sits flush on the rows ([#2894](https://github.com/softistx/nxgt-material/issues/2894)).
+
+## 3.103.0
+
+### Minor Changes
+
+- [#2847](https://github.com/softistx/nxgt-material/pull/2847) [`a21b781`](https://github.com/softistx/nxgt-material/commit/a21b781ee5e46764d073da10be235be1a461a369) Thanks [@SteveGT96](https://github.com/SteveGT96)! - CodeBlock: `language="text"` (also `plaintext`, `plain`, `txt`) shows the code as is, without highlighting, under a "Text" label, for a DNS record or a config line. A new `label` prop (`ReactNode | false`) replaces the language label or hides it. An unknown language still falls back to `typescript`, as before; the Vue `CodeBlock` is unchanged.
+
+- [#2853](https://github.com/softistx/nxgt-material/pull/2853) [`5e19436`](https://github.com/softistx/nxgt-material/commit/5e1943633feaf417380c0971d86d2413efe0f144) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ConfirmDialog` can require typing a phrase before Confirm enables: `confirmPhrase` shows a field labelled "Type {phrase} to confirm" (translated, the phrase in code style), focused on open and empty on each reopen. `confirmPhraseMatch` sets the comparison: `'exact'` (default), `'trim'` or `'trim-case-insensitive'`. Enter in the field confirms only on a match; paste is allowed. New key `material.confirm-dialog.type-phrase` in `en` and `fr`. `ConfirmPhraseMatch` is exported.
+
+- [#2865](https://github.com/softistx/nxgt-material/pull/2865) [`f6a1433`](https://github.com/softistx/nxgt-material/commit/f6a14337c03a98e971756f7c79357177eb82a1b6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PanelCard`, a titled card for a side panel (an `ActivityContent` aside) or a page's sections: `title`, `description`, `headingLevel` (`2` to `6`, default `2`), `actions` (a header slot) and children. The card is a `region` named by its heading. It replaces the `Card` + `CardHeader` + `CardTitle as="h2"` + `CardDescription` + `CardContent` wrapper apps wrote themselves. Import it from `@nxgt/material/components`; story `Navigation & layout/PanelCard`.
+
+- [#2845](https://github.com/softistx/nxgt-material/pull/2845) [`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StatusMenu` saves asynchronously and can ask first. An `onSelect` that returns a promise puts the chip in its pending state until it settles (the menu closes, focus is on the chip, a spinner replaces the chevron, `aria-busy`, the old status stays); a rejection is announced in a live region and sent to the new `onError`. A `StatusChoice` can carry `confirm` (`title`, `description`, `confirmLabel`, `destructive`): the library's `ConfirmDialog` runs `onSelect` on confirm and focus returns to the chip. A confirmed save shows its progress in the dialog (busy buttons, a failure kept in it), not on the chip. New text key `material.status-menu.confirms` ("Asks first") and `material.status-menu.confirm-default` (the dialog's default sentence), English and French.
+
+- [#2845](https://github.com/softistx/nxgt-material/pull/2845) [`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `StatusMenuFormField`, the React Hook Form wrapper of `StatusMenu`. The form holds the status (a `choices` value); a pick runs your `onSelect` first and the form takes the new status once it resolves (a slow save keeps the old status and its spinner; a rejection keeps the old value). The error message or `helperText` is written under the chip and linked to it (`aria-describedby`, `aria-invalid`), `field.onBlur` fires when focus leaves the chip and its menu or sheet, a refused submit focuses the chip, and `disabled` locks it.
+
+- [#2845](https://github.com/softistx/nxgt-material/pull/2845) [`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `StatusMenu` opens as a bottom sheet on a phone. The new `presentation` prop is `'auto'` (the default: a sheet under 768px, the menu above), `'menu'` or `'sheet'`. The sheet is a dialog named by the record's `label`, with a close button (`material.status-menu.close`) and a radiogroup of 44px rows; a status the transitions do not reach, or a disabled one, is greyed with its reason written in its row (touch has no tooltip), and a locked chip's reason is the sheet's description. Picking a row closes the sheet and focus returns to the chip; a pending save and a status that asks first behave as in the menu. The chip's `aria-haspopup` is `dialog` while it opens a sheet.
+
+- [#2845](https://github.com/softistx/nxgt-material/pull/2845) [`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New `StatusMenu` in `@nxgt/material/components`: a record's status as a soft chip (tone container, tone icon, words, chevron) that opens a menu of radio items. The held status is checked and inert, `transitions` grey the unreachable statuses with their reason (or `unavailable: 'hidden'` drops them), `locked` shows its reason as a tooltip and the menu's first line and picks nothing, `busy` keeps the old status with a spinner, and `readOnly` draws a plain label. The button is named "Status of {label}: {status}"; texts are in `material.status-menu.*` (English and French).
+
+- [#2863](https://github.com/softistx/nxgt-material/pull/2863) [`00976b4`](https://github.com/softistx/nxgt-material/commit/00976b486ed7c960cdfa69e689104acf80522f2a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `useBarcodeScanner` to `@nxgt/material/hooks`: hears a keyboard-wedge barcode reader anywhere on the page (fast keys closed by Enter, told from typing by timing), with `acceptIn` for the fields a scan is accepted in. The pure detector `createScanner` is the new `@nxgt/material-core/barcode-scanner` subpath.
+
+### Patch Changes
+
+- [#2859](https://github.com/softistx/nxgt-material/pull/2859) [`c332316`](https://github.com/softistx/nxgt-material/commit/c332316e71a5ca7471bd0ab955d01cdf9e4f4903) Thanks [@SteveGT96](https://github.com/SteveGT96)! - ActionCard `variant="tile"` with an `action`: an action that does not fit beside the title (a `StatusMenu` chip in a two-per-row grid at 360px, which made the page 3px wider than the screen) now wraps under the title instead of overflowing. The title may shrink to `--ac-title-min` (4.5rem) before the action wraps, so an icon button such as `RowMenu` stays beside it. Pure CSS (flex-wrap), no prop. The Status board recipe (story and `screen-recipes` plugin copy) now uses a `StatusMenu` as each tile's action instead of a `Badge` and a `RowMenu`; the tile button's name no longer includes the status, the chip is named "Status of {name}: {status}".
+
+- [#2851](https://github.com/softistx/nxgt-material/pull/2851) [`9d9af14`](https://github.com/softistx/nxgt-material/commit/9d9af140783b95c96568df47c45755231eaa7cde) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `Button` and `LinkButton` sizes taking their content height instead of the size's: the base `h-min` came after each size's `h-(--btn-h)` in the shipped CSS and won, so `size="xs"` measured 32px (the `sm` height) instead of 24px. The base `h-min` now has zero specificity, so every `size` measures its `--btn-h` (xs 24, sm 32, default 36, lg 40, xl 56, 2xl 96) and a button without `size` keeps its content height. A story play pins each size's computed height. Coarse pointers already get a 44px hit area on every size (`button.css`), `xs` included.
+
+- [#2843](https://github.com/softistx/nxgt-material/pull/2843) [`c516a48`](https://github.com/softistx/nxgt-material/commit/c516a4855a72513b663b1ff300d56b16af838a23) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `CodeBlock` (and `Markdown` fences) failing WCAG AA contrast in the light scheme: the language label no longer fades with `opacity-60`, and the light palette's text tokens (keyword, string, number, type, comment, attribute, and the rest) are darkened to at least 4.5:1 on the block and on a highlighted line. The dark palette's comment colour is lightened to meet the same bar on a highlighted line. `MOONLIGHT_DAY` and `MOONLIGHT_DARK` carry the new values, so `CodeEditor`, `CodeDiff` and `JsonViewer` follow. The filename is no longer faded and line numbers are raised to `opacity-60` (3:1 or better). A test pins every token's contrast and that `scheme="dark"` renders `data-scheme="dark"`.
+
+- [#2845](https://github.com/softistx/nxgt-material/pull/2845) [`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs: the `ActionCard` page shows a `StatusMenu` as a tile's `action` (and says the chip needs a tile wide enough for it), the cards-and-tiles guide points to it, and the status board recipe's detail sheet uses `StatusMenu`.
+- Updated dependencies [[`76f1ec5`](https://github.com/softistx/nxgt-material/commit/76f1ec588379172e608a534fdb5375cc5eab5efd), [`00976b4`](https://github.com/softistx/nxgt-material/commit/00976b486ed7c960cdfa69e689104acf80522f2a)]:
+  - @nxgt/material-core@0.58.0
+
+## 3.102.0
+
+### Minor Changes
+
+- [#2821](https://github.com/softistx/nxgt-material/pull/2821) [`0f195e4`](https://github.com/softistx/nxgt-material/commit/0f195e483746fb4ff77e5db4ec841b2fe4d9d11c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Keypad: a public numeric keypad at `@nxgt/material/keypad`, usable outside the Calculator widget for quantity, price, percentage and cash-tendered entry with change. It takes a decimal or minor-unit entry, an optional display, keyboard handling on focus (or globally on request), `useKeypadNumber` and `useKeypadQuantity` bindings for NumberField, PercentField and CurrencyField, and a `cash` variant (`total`, `denominations`, change or what is still due, amount buttons) that reports `onTender(tendered, settlement)`. `calculator.css` styles it; there is no separate stylesheet. The Calculator's keypad now shares its grid with it; its markup and behaviour are unchanged. The types are prefixed (`KeypadVariant`, `KeypadBinding`, `KeypadOperation`, `KeypadSettlement`, `UseKeypadNumberOptions`).
+
 ## 3.101.0
 
 ### Minor Changes

package/README.md

@@ -199,12 +199,13 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
 | `@nxgt/material/components` | UI components, `*FormField` wrappers, `useCodeResolver`, `useFastForm`, `useFocusOnRefusal` and `useServerFieldErrors` ([Components](#components)) |
-| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `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@3/docs/guides/printing.md)) |
+| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call; `toCsv` and `csvResponse` for a CSV export (RFC 4180, optional BOM and `;` separator) — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
 | `@nxgt/material/pdf-reader` | `PdfReader`, the redesigned PDF reader (header, floating page pill, rail and panel; `embedded`, `dialog`, `page` and `fullscreen` modes; single page and two-page layouts; `look="expressive"` by default, `"classic"` to opt out, type `PdfReaderLook`) and `configurePdfReader` for pdf.js's worker and assets. **Its own entry, browser-only** (pdf.js loads on first render); also exported as `PdfReader` from `/components` since 3.0 ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md); needs Chrome 125, Safari 18 or a Firefox ESR: [browser support](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md#browser-support)) |
 | `@nxgt/material/charts` | Native SVG charts (d3-scale and d3-shape for the maths only) with keyboard point navigation, a screen-reader summary, a "View data" table and `patterns`: `LineChart` and `AreaChart` (`LineChartProps`, `AreaChartProps`, `ChartCurve`), `BarChart` (`BarChartProps`, `BarLayout`, `BarOrientation`), `PieChart` (`PieChartProps`), `DonutChart` (`DonutChartProps`), `Gauge` (`GaugeProps`, `GaugeSize`), `RadialBarChart` (`RadialBarChartProps`), `FunnelChart` (`FunnelChartProps`), `HeatmapChart` (`HeatmapChartProps`, `HeatColumn`), `RadarChart` (`RadarChartProps`), `ScatterChart` (`ScatterChartProps`, `ScatterSeries`, `ScatterPoint`), `ComboChart` (`ComboChartProps`, `ComboSeries`: bars, areas and lines, each on a left or a right axis), `zoom` (a mini overview with a window and two slider handles that picks the rows shown; `range`, `defaultRange`, `onRangeChange`) and `scroll` (a dense plot scrolls sideways on a phone, the value axis pinned) on the line, area, bar and combo charts (`ChartRangeProps`, `ChartZoomOptions`, `ChartScrollOptions`, `ChartRange`), `bands` (shaded ranges), `thresholds` (labelled lines) and `pointTone` (a ringed point with its word, `toneLabels`) on the line and area charts, read against the value axis and carried into the tooltip, the summary and the "View data" table (`ChartBand`, `ChartThreshold`), `onPointClick` on every chart but `Gauge`, `palette` (`'soft'`: the soft palette, or `data-chart-palette="soft"` on an ancestor; `ChartPalette`) on every chart, and the shared types (`ChartSlice`, `ChartRow`, `ChartValue`, `ChartColor`, `ChartShape`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartPoint`, `ChartBaseProps`). `categoryLabel` names the "View data" table's category column: on Line, Area, Bar and Combo it defaults to the x axis label, on Radar and Heatmap it is always "Category" unless set. **Its own entry, client-only** (import it from a `'use client'` file), not in the barrel above; replaces the Nivo charts (removed in 3.0) of `/components` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)) |
 | `@nxgt/material/barcode` | `Barcode` (Code 128 and Data Matrix as accessible SVG that follows the theme and dark mode, black on white in print; no runtime dependency) and `LabelSheet` / `Label` (label size, columns, rows, gaps and a start offset for a printed sheet of labels), plus `barcodeGeometry` and `BarcodeError` — **its own entry** ([barcode guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md)) |
 | `@nxgt/material/calculator` | `Calculator`: exact decimal arithmetic with the usual precedence, a large display, a shaped keypad, a tape of past results, a memory, the physical keyboard, copy and paste, screen-reader announcements and a variant switcher (Standard, Scientific, Point of sale, Financial, Conversion and Programmer) — **its own entry** ([calculator guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/calculator.md)) |
 | `@nxgt/material/calculator-field` | `CalculatorField` and `CalculatorFormField`: a number field (a currency field with `currency`) whose button opens the calculator, seeded with its number, in a popover or a phone's bottom sheet; Apply writes the rounded result — **its own entry** ([calculator guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/calculator.md#in-a-form-calculatorfield)) |
+| `@nxgt/material/keypad` | `Keypad`: a touch and keyboard numeric keypad for a quantity, a price, a percentage or a cash tender, usable outside the Calculator (decimal or minor-unit entry, optional calculation keys, `useKeypadNumber` / `useKeypadQuantity` to bind it to a field, a `cash` variant with change and bill shortcuts) — **its own entry**, styled by `calculator.css` ([keypad guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/keypad.md)) |
 | `@nxgt/material/draw` | Vector drawing: a scene of plain data or JSX primitives drawn as accessible, themeable SVG that is safe under a strict CSP and identical on the server and in the browser. `Drawing` (`DrawingProps`, `NodeHandlers`; `scene` or `w`/`h` with children; a `title` (with an optional long `description`, written as a `<desc>`) or `decorative`, enforced by the type), the primitives `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path` (takes `node`), `Text`, `Group` and `Image`, and the builders of `@nxgt/material-core/draw` re-exported by name (`scene`, `rect`, `ellipse`, `circle`, `line`, `polygon`, `path`, `text`, `group`, `image`, `linear`, `radial`, `pattern`, `hatch`, `tone`, `toSVG`, `compileScene`, `ROLES`, `DRAW_PALETTE`, and the types `Scene`, `DrawNode`, `Paint`, `Role`, `ToneRef`), plus Material 3 Expressive's shapes (`shape`, `morph`, `SHAPE_NAMES`, `toCubics`) and the layout helpers (`bbox`, `stack`, `grid`, `align`, `distribute`) re-exported by name. Colours are theme roles (`primary-container`, `on-surface`...) mapped to classes in `styles.css`, so import it. Interactive nodes are focusable `button`s with a focus ring; wrapped text is re-measured by the browser once mounted. **Its own entry, client-only** (render `Drawing` from a `'use client'` file; the builders and `toSVG` run anywhere), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)) |
 | `@nxgt/material/draw/sketch` | The sketchy, hand-drawn style for a drawing: `Sketch` (`seed`, `roughness`, `bowing`, `fill`: `hachure`, `cross-hatch`, `solid` or `none`, `hachureAngle`, `hachureGap`, `strokeWidth`) wraps a `Drawing`, or primitives inside one, and draws shapes as double wobbling strokes with hatched fills; `sketch(sceneOrNode, options)` does it to plain data for `toSVG`. Seeded, so the server and the client draw the same lines; ids, labels, focus rings and events keep working. **Its own entry, client-only** (render `Sketch` from a `'use client'` file), not in the barrel above ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#sketch)) |
 | `@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@3/docs/guides/maps.md)) |
@@ -225,7 +226,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/draw/png` | `drawingToPng(sceneOrSvg, { scale?, background?, colorsFrom? })` and `downloadDrawingPng(source, fileName)` — a drawing (a scene, or a live `<svg>` such as `svgRef.current` of a `<Drawing ref={svgRef}>`) as a PNG `Blob` in the browser, with the page's theme colours resolved, `data:` images inlined and CORS errors named; its own entry, DOM only when called ([drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md#png), [reference](https://cdn.jsdelivr.net/npm/@nxgt/material-core@0/docs/draw.md#png-nxgtmaterial-coredrawpng)) |
 | `@nxgt/material/vite` | build-time helpers for consumers: `nxgtMaterial()` (a strict CSP by hash or nonce, self-hosted fonts, a styles check, serves the pdf.js worker on the Vite 5–7 dev server, generates your app themes' stylesheets with `nxgtMaterial({ themes })` and the `nxgt-theme` bin: [Themes guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/themes.md), a reduced backdrop icon sprite from your Font Awesome install with `nxgtMaterial({ backdropSprite })` and the `nxgt-backdrop-sprite` bin, PDFs on a bundled server with `nxgtMaterial({ pdf: { bundle: true } })`: [Vite plugin guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/vite-plugin.md)), `pdfkitStandardFonts()` ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)), `cspAssetsInlineLimit`, a `build.assetsInlineLimit` that never inlines a font ([CSP guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/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@3/docs/guides/printing.md#nextjs-serverexternalpackages-and-output-standalone)) |
-| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, `useFocusOnMount`, `useCountdown`, `useSubmitOnce`, `useDrafts`, `usePoll`, `useUnsavedGuard`, `useLatched`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialhooks)) |
+| `@nxgt/material/hooks` | `useTheme`, `useIsClient`, `useIsMobile`, `useLocalizedDate`, `useCspNonce`, `useFocusOnMount`, `useCountdown`, `useBarcodeScanner`, `useSubmitOnce`, `useDrafts`, `usePoll`, `useUnsavedGuard`, `useLatched`, … ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialhooks)) |
 | `@nxgt/material/dnd` | `@dnd-kit` primitives ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmaterialdnd)) |
 | `@nxgt/material/i18n` | `I18nProvider`, `mergeResources`, `createTranslator`, `translateMaterial`, `formatMessage` ([i18n guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/i18n.md)) |
 | `@nxgt/material/lib` | `cn`, `clientOnly`, date, number and storage utilities, `useSliceReducer`, `getCspNonce` / `setCspNonce`, the server-side CSP helpers (`createCspNonce`, `cspPolicy`, `cspHash`, `applyCspNonce`, `CSP_NONCE_PLACEHOLDER`, `ZOD_JITLESS_SCRIPT`, `zodJitlessTag`: [CSP, SSR](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/csp.md#ssr)) ([helpers](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/helpers.md#nxgtmateriallib)) |
@@ -233,7 +234,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@nxgt/material/types` | shared function types (`PromiseOr`, `FunctionOr`, …) |
 | `@nxgt/material/styles.css` | source Tailwind v4 tokens. **This** is the file the app imports |
 | `@nxgt/material/map.css` | leaflet's stylesheet, for the apps that use `./map`. Not part of `styles.css` |
-| `@nxgt/material/calculator.css` | the calculator's stylesheet (shaped keys, display, tape, width bands), for `/calculator` and `/calculator-field`. Opt-in, not part of `styles.css`: import it once after `styles.css`; without it the keypad is unstyled |
+| `@nxgt/material/calculator.css` | the calculator's stylesheet (shaped keys, display, tape, width bands), for `/calculator`, `/calculator-field` and `/keypad`. Opt-in, not part of `styles.css`: import it once after `styles.css`; without it the keypad is unstyled |
 | `@nxgt/material/galleries.css` | the Gallery's shaped tiles (`shape`, `preset="shaped"`): `clip-path: shape()` for twelve shapes, about 9 KB gzipped. Opt-in, not part of `styles.css`; without it a shaped tile keeps a rounded corner |
 | `@nxgt/material/backgrounds.css` | every background preset's CSS, for the apps that use `./backgrounds`; `@nxgt/material/backgrounds/<preset>.css` loads one (`icons.css` for `preset="icons"`, which pulls in `icons-quiet.css` for `iconMotif.quiet`, also importable alone; `celestial.css` for the sky) (the illustrated scenes share `backgrounds/illustrated.css`). Not part of `styles.css` |
 | `@nxgt/material/theme-picker.css` | the tiles of `ThemePicker` (the mini backgrounds included), for the apps that use `@nxgt/material/theme-picker`. Import it after `styles.css`. Not part of `styles.css` |
@@ -519,6 +520,31 @@ import { CalculatorField } from '@nxgt/material/calculator-field';
 <CalculatorField label="Price" currency="EUR" value={price} onChange={setPrice} />
 ```
 
+### Keypad
+
+`@nxgt/material/keypad` is a numeric keypad you can use outside the Calculator,
+for a quantity, a price, a percentage or a cash tender. The value is a decimal
+string, the arithmetic is exact, and the keys are native buttons. Its own
+entry, server-safe, styled by `calculator.css` (there is no keypad stylesheet).
+
+```tsx
+import { Keypad, useKeypadNumber } from '@nxgt/material/keypad';
+
+<Keypad value={qty} onValueChange={setQty} onCommit={(value) => addLine(value)} />
+
+// typed into a NumberField, PercentField or CurrencyField you already have
+const binding = useKeypadNumber({ value: price, onChange: setPrice, currency: 'EUR', minorUnits: true });
+<Keypad binding={binding} />
+
+// a cash tender with change and bill shortcuts; the app owns the charge
+<Keypad variant="cash" total="17.35" denominations={[5, 10, 20, 50]} currency="EUR"
+  onTender={(tendered, settlement) => settlement.status === 'paid' && charge(tendered)} />
+```
+
+The [keypad guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/keypad.md) covers decimal and minor-unit entry, `operations`, the
+limits, `keyboard` (`'focus'` by default, `'global'` for a till), the field
+bindings and the cash variant.
+
 ### Barcodes and label sheets
 
 `@nxgt/material/barcode` draws Code 128 and Data Matrix as accessible SVG, with
@@ -563,6 +589,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Drawing](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md) | drawing diagrams, badges and illustrations from code with `@nxgt/material/draw`: a scene or JSX, theme roles and tones, strict CSP, accessibility, events, sketch, animation, PNG, PDF and e-mail |
 | [Barcodes](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md) | Code 128 and Data Matrix with `@nxgt/material/barcode`: props, paper appearance, accessibility, `barcodeGeometry`, `LabelSheet` label sizes, offsets and `skip`, errors and printing |
 | [Calculator](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/calculator.md) | `@nxgt/material/calculator`: props, keyboard, tape and memory, copy and paste, what is stored, feedback, sizing and accessibility |
+| [Keypad](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/keypad.md) | `@nxgt/material/keypad`: decimal and minor-unit entry, calculation keys, binding to a field, the cash variant, keyboard and accessibility |
 | [Backgrounds](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/backgrounds.md) | tones, intensity, the opt-in `backgrounds.css` and per-preset files, custom tone tokens, motion and CSP |
 | [Illustrations](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/illustrations.md) | `@nxgt/material/illustrations`: the twelve scenes and the health, education and game sets, icons from your sprites, `EmptyState` / `ErrorState` / `DataTable` with `illustration`, `IllustrationDefaults` for an app, sizes, motion and CSP |
 | [Icon motifs](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/icon-motifs.md) | icon backgrounds, celestial skies, illustrations and themes together: serving your own Font Awesome sprites (the package ships none), `IconSpritesProvider`, `icons` / `iconStyle` / `iconMotif`, `sky`, the health and education sets, a theme naming its motif, Free fallbacks for Pro-only names |
@@ -612,7 +639,7 @@ 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/primitives-accordion.webp" width="120" alt="Accordion"> | [`Accordion`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#accordion), `AccordionItem`, `AccordionTrigger`, `AccordionContent` | Collapsible sections whose content springs open, in three looks (`flush`, `separated` cards, `contained` list) and three sizes. | `Accordion` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-collapsible.webp" width="120" alt="Collapsible"> | [`Collapsible`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#collapsible), `CollapsibleTrigger`, `CollapsibleContent` | A single show / hide region that springs open, and its trigger (optionally styled: `tonal` or `text`). | `Collapsible` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-collapsible.webp" width="120" alt="Collapsible"> | [`Collapsible`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#collapsible), `CollapsibleTrigger`, `CollapsibleContent` | A single show / hide region that springs open, and its trigger (optionally styled: `tonal` or `text`, and `flush` to line a `text` trigger up with a heading). | `Collapsible` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-card.webp" width="120" alt="Card"> | [`Card`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#card), `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | Card surface with header, action slot, content and footer. | `Card` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-typography.webp" width="120" alt="Typography"> | [`Typography`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#typography) | Text in the Material 3 type scale: display, headline, title, body and label in three sizes, `emphasized` for the heavier weight; the former names are deprecated aliases. | `Typography` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-anchorheading.webp" width="120" alt="AnchorHeading"> | [`AnchorHeading`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#anchorheading) | Heading with a hover copy-link (always visible on the phone). | `AnchorHeading` |
@@ -627,7 +654,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`, `TableEmpty` | Styled semantic table inside a scrollable wrapper; `TableEmpty` is the full-width "nothing here" row. | `Table` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill. | `Tabs` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill, which `<TabsList fullWidth>` stretches to its container in equal parts. | `Tabs` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabsnav.webp" width="120" alt="TabsNav"> | [`TabsNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabsnav), `TabsNavLink`, `useTabParam`, `skipTabChange`, `tabIds` | Route tabs as links: a `nav` of links in the `Tabs` look, with `aria-current="page"` on the current one, the sliding indicator and the phone scroll cue; `useTabParam` keeps the tab in the URL. | no equivalent yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-segmentednav.webp" width="120" alt="SegmentedNav"> | [`SegmentedNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#segmentednav), `SegmentedNavItem` | Segmented links: the segmented `ToggleGroup` look as a `nav` of links, with `aria-current="page"` and the pill on the current one; it scrolls inside itself on a phone. | no equivalent yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
@@ -658,6 +685,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards; `titleLink` makes the title a link and `footer` adds a row of secondary links. | `ActionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-producttile.webp" width="120" alt="ProductTile"> | [`ProductTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#producttile) | Large tap tile for a till or kiosk catalogue: a picture or a toned shape with an icon, the name, a prominent tabular price and a stock `status` on its own line, on a hairline card with a tinted 4:3 well; `selected` (tint and start bar), `disabled`, an even height in a `ResponsiveGrid`. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-themetoggle.webp" width="120" alt="ThemeToggle"> | [`ThemeToggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#themetoggle) | Light / dark / system switch that stores and applies the choice. | `ThemeToggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-languageswitcher.webp" width="120" alt="LanguageSwitcher"> | [`LanguageSwitcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#languageswitcher) | Globe button with a menu of the `I18nProvider` languages. | `LanguageSwitcher` |
 
@@ -677,6 +705,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-numberfield.webp" width="120" alt="NumberField"> | [`NumberField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#numberfield) · `NumberFormField` | Emits `number \| null`, with min / max / step clamping, +/− buttons and a suffix; `variant="score"` (with `tone`, `locked`, `lockedReason`) is a big value out of its max. | `NumberField`, `NumberFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-percentfield.webp" width="120" alt="PercentField"> | [`PercentField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#percentfield) · `PercentFormField` | `NumberField` with a `%` suffix. | `PercentField`, `PercentFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-quantityfield.webp" width="120" alt="QuantityField"> | [`QuantityField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#quantityfield) · `QuantityFormField` | One labelled field holding an amount and its unit: one box with a unit chip that opens a menu (or a typed unit), with one error message. | not yet |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-quantitystepper.webp" width="120" alt="QuantityStepper"> | [`QuantityStepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#quantitystepper) | Inline −/value/+ control for a cart or ticket line, no label or box: a named group with a spinbutton (arrow keys, optional typed value), 44px buttons on touch, and a trash button at `min` with `onRemove`. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-currencyfield.webp" width="120" alt="CurrencyField"> | [`CurrencyField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#currencyfield) · `CurrencyFormField` | Amount formatted to the locale on blur, with the currency's own decimals and a currency suffix (EUR by default); `minorUnits` reads and emits whole cents. | `CurrencyField`, `CurrencyFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-phonefield.webp" width="120" alt="PhoneField"> | [`PhoneField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#phonefield) · `PhoneFormField` | International number with a country picker (the code a 32px pill in a 44px field box, its list connected); emits E.164; `PhoneFormField` refuses a half-typed number (`onValidityChange`, `isIncompletePhone`). | `PhoneField`, `PhoneFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-urlfield.webp" width="120" alt="UrlField"> | [`UrlField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#urlfield) · `UrlFormField` | Validates on blur; open-in-new-tab and copy buttons. | `UrlField`, `UrlFormField` |
@@ -728,6 +757,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-checkcardfield.webp" width="120" alt="CheckCardField"> | [`CheckCardField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#checkcardfield) · `CheckCardFormField` | A yes / no choice shown as two selectable cards. | `CheckCardField`, `CheckCardFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-chipgroupfield.webp" width="120" alt="ChipGroupField"> | [`ChipGroupField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#chipgroupfield) · `ChipGroupFormField` | One or several chips: a radio group or a group of checkboxes. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-choicecardgroup.webp" width="120" alt="ChoiceCardGroup"> | [`ChoiceCardGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#choicecardgroup) · `ChoiceCardGroupFormField` | One or several cards with title, description and meta: a radio group or a group of checkboxes. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-statusmenu.webp" width="120" alt="StatusMenu"> | [`StatusMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#statusmenu) · `StatusMenuFormField` | A record's status as a soft chip (tone, icon, words, chevron) that opens a menu of radio items (a bottom sheet of 44px rows on a phone, `presentation`): `transitions` grey the unreachable statuses with their reason, `locked` (tooltip and first menu line), `busy` (spinner, old status kept; also while an async `onSelect` is pending, with `onError` on failure), per-choice `confirm` (asks first through a dialog) and `readOnly` (plain label). | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-optiontile.webp" width="120" alt="OptionTile"> | [`OptionTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#optiontile) | One answer as a radio or checkbox tile, with key badge, description, picture and revealed verdict. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-transferlist.webp" width="120" alt="TransferList"> | [`TransferList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#transferlist) · `TransferListFormField` | Two-pane picker with search, drag-and-drop, reordering and a `max`. | `TransferList`, `TransferListFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/selection-choice-sortablelist.webp" width="120" alt="SortableList"> | [`SortableList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/selection-and-choice.md#sortablelist) · `SortableListFormField` | Searchable list of strings you reorder by dragging or with the keyboard. | `SortableList`, `SortableListFormField` |
@@ -823,6 +853,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-dashboardgrid.webp" width="120" alt="DashboardGrid"> | [`DashboardGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#dashboardgrid) | Tiles with spans that the user rearranges in an edit mode, by drag or keyboard; the order is the app's. | React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-editorlayout.webp" width="120" alt="EditorLayout"> | [`EditorLayout`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#editorlayout) | The editor page: a toolbar, a canvas that scrolls on its own, properties at the end (a bottom sheet on a phone) and an optional outline at the start. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-sectioncolumns.webp" width="120" alt="SectionColumns"> | [`SectionColumns`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#sectioncolumns) | Short page sections side by side from a viewport breakpoint (`from`, `columns`), stacked in source order below it; not a landmark. | — (later, [#1614](https://github.com/softistx/nxgt-material/issues/1614)) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-panelcard.webp" width="120" alt="PanelCard"> | [`PanelCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#panelcard) | Titled card for a side panel: a heading (`headingLevel`, `h2` by default) that names the card, a `description`, header `actions` and the content. | — (later, [#2866](https://github.com/softistx/nxgt-material/issues/2866)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-recordpage.webp" width="120" alt="RecordPage"> | [`RecordPage`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#recordpage), `RecordDetails` | The page of one record: a header card, the content, and the record's facts as a side panel from `xl` that stacks after (or before) the content, with a muted "Added on … · Updated on …" line. | — (later, [#2127](https://github.com/softistx/nxgt-material/issues/2127)) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-resizable.webp" width="120" alt="ResizableGroup"> | [`ResizableGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#resizablegroup), `ResizablePanel`, `ResizableSeparator` | Resizable panels with an optional grip handle. | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-skiplink.webp" width="120" alt="SkipLink"> | [`SkipLink`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#skiplink) | Skip-to-content control, visible on focus. `DocSkipLink` composes it with `#doc-content`. | `SkipLink` |
@@ -931,6 +962,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-drawing.webp" width="120" alt="Drawing"> | [`Drawing`, `Rect`, `Ellipse`, `Circle`, `Line`, `Polygon`, `Path`, `Text`, `Group`, `Image`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#drawing) from `@nxgt/material/draw` | Vector drawings from a scene of plain data or from JSX: theme-role colours that follow light and dark, no inline style (strict CSP), a `title` or `decorative` enforced by the type, focusable nodes with `onClick` and a focus ring, text that wraps with Inter's metrics and is refined by the browser. Client-only entry. | React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-barcode.webp" width="120" alt="Barcode"> | [`Barcode`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#barcode), `LabelSheet`, `Label`, `barcodeGeometry` | Code 128 and Data Matrix as accessible SVG that follows the theme and prints black on white, and a printed sheet of labels. Its own entry, `@nxgt/material/barcode`, server-safe. | React only for now |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-calculator.webp" width="120" alt="Calculator"> | [`Calculator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#calculator) | Exact decimal calculator with the usual precedence, a shaped keypad, tape, memory, keyboard, copy and paste. Its own entry, `@nxgt/material/calculator`; `CalculatorField` and `CalculatorFormField` are in `@nxgt/material/calculator-field`. | React only for now |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-keypad.webp" width="120" alt="Keypad"> | [`Keypad`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#keypad), `useKeypadNumber`, `useKeypadQuantity` | A numeric keypad for a quantity, a price, a percentage or a cash tender with change and bill shortcuts, usable outside the Calculator: decimal or minor-unit entry, optional calculation keys, field bindings. Its own entry, `@nxgt/material/keypad`, server-safe, styled by `calculator.css`. | React only for now |
 
 `RadioGroupField`, `SliderField` and `SwitchField` are aliases of the
 labelled `RadioGroup`, `Slider` and `Switch`, under the names

package/dist/{alert-dialog-DYzxchiS.js → alert-dialog-CK_47jfm.js}

@@ -4,7 +4,7 @@ import { o as n } from "./dist-DVRQkaTK.js";
 import { r } from "./dist-DWZXlCZR.js";
 import { a as i } from "./dist-DHdUUM1w.js";
 import { t as a } from "./in-dialog-D61Yeaol.js";
-import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-DWhbTGVe.js";
+import { a as o, c as s, d as c, i as l, l as u, n as d, o as f, r as p, s as m, t as h, u as g } from "./use-return-focus-CW9KkDkp.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { Fragment as y, isValidElement as b } from "react";

package/dist/{async-slice-drJyPvuM.js → async-slice-1ZNMiwyJ.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-9zA-Um3W.js";
+import { l as e, r as t, s as n, u as r } from "./translator-Cgql9srO.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/{bubble-input-CQwVSoU3.js → bubble-input-BxI1WmNs.js}

@@ -209,13 +209,25 @@ var W = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(t, r) {
 		})
 	});
 }, "RadioGroupItemTrigger")), G = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, t) {
+	let { __scopeRadioGroup: n, value: r, disabled: i, ...a } = e;
+	return /* @__PURE__ */ m(U, {
+		__scopeRadioGroup: n,
+		value: r,
+		disabled: i,
+		internal_do_not_use_render: ({ isFormControl: e }) => /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m(W, {
+			...a,
+			ref: t,
+			__scopeRadioGroup: n
+		}), e && /* @__PURE__ */ m(K, { __scopeRadioGroup: n })] })
+	});
+}, "RadioGroupItem")), K = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, t) {
 	let { __scopeRadioGroup: n, ...r } = e;
 	return /* @__PURE__ */ m(k, {
 		...L(n),
 		...r,
 		ref: t
 	});
-}, "RadioGroupItemBubbleInput")), K = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, t) {
+}, "RadioGroupItemBubbleInput")), q = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, t) {
 	let { __scopeRadioGroup: n, ...r } = e;
 	return /* @__PURE__ */ m(D, {
 		...L(n),
@@ -225,14 +237,14 @@ var W = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(t, r) {
 }, "RadioGroupIndicator"));
 //#endregion
 //#region lib/components/ui/primitives/bubble-input/bubble-input.tsx
-function q({ children: e }) {
+function J({ children: e }) {
 	return /* @__PURE__ */ m(d, {
 		reason: "Radix's hidden form input carries an inline style",
 		children: e
 	});
 }
-function J(e, t) {
-	return { internal_do_not_use_render: ({ isFormControl: n }) => /* @__PURE__ */ h(p, { children: [e, n ? /* @__PURE__ */ m(q, { children: t }) : null] }) };
+function Y(e, t) {
+	return { internal_do_not_use_render: ({ isFormControl: n }) => /* @__PURE__ */ h(p, { children: [e, n ? /* @__PURE__ */ m(J, { children: t }) : null] }) };
 }
 //#endregion
-export { U as a, G as i, B as n, W as o, K as r, J as t };
+export { K as a, G as i, B as n, U as o, q as r, W as s, Y as t };

package/dist/{button-GeIsUekU.js → button-YfEMZbRO.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, t as i } from "./spinner-ffuwBXHl.js";
+import { n as r, t as i } from "./spinner-CEVomQ5K.js";
 import { t as a } from "./dist-DkQbkF9T.js";
 import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-Bwg_caHO.js";
 import { t as f } from "./is-production-GLw59WU8.js";
@@ -185,7 +185,7 @@ var w = [
 		color: "default",
 		class: `${s.default} ${c.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], T = a("nxgt-btn nxgt-morph-fill no-underline inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
+], T = a("nxgt-btn nxgt-morph-fill no-underline inline-flex center gap-[var(--btn-gap,0.5rem)] [:where(&)]:h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
 	variants: {
 		variant: {
 			filled: "",