@nxgt/material 3.101.0 → 3.103.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @nxgt/material
 
+## 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

@@ -205,6 +205,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@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 |
@@ -728,6 +755,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 +851,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 +960,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-NFyAiSqc.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-AfLRrUm-.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-D35bX79S.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-BVs4n0Fz.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-Be7GZzF9.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-Cg0y_E_K.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: "",