@nxgt/material 3.75.1-hotfix-20261030064707 → 3.77.0

package/CHANGELOG.md

@@ -1,10 +1,80 @@
 # @nxgt/material
 
-## 3.75.1-hotfix-20261030064707
+## 3.77.0
+
+### Minor Changes
+
+- [#2336](https://github.com/softistx/nxgt-material/pull/2336) [`bdfa59d`](https://github.com/softistx/nxgt-material/commit/bdfa59d3566b2bc65c09214b735c2a1febb1c645) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Hero` gains `background` (the props of the `Background` of `@nxgt/material/backgrounds`: `preset`, `intensity`, `tone`, `fill`…, drawn `aria-hidden` behind the content, clipped by the band's radius, loaded on demand, replacing the built-in gradient and glows), `size="compact"` (a greeting band for a home page: `rounded-xl`, a Card's content padding, the title in `headline-lg` emphasized, a muted description, actions at the end from `lg` and wrapping below, buttons at least 44px tall) and `headingLevel` (1 to 6, default 1). `aria-label` now passes through to the section. The new type `HeroBackgroundProps` is exported from `@nxgt/material/components`. The default Hero renders as before. Fixes [#2335](https://github.com/softistx/nxgt-material/issues/2335).
+
+- [#2378](https://github.com/softistx/nxgt-material/pull/2378) [`034fe52`](https://github.com/softistx/nxgt-material/commit/034fe5294cebca878c3bcb53fe19753f29214ec3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `rowFocusProps(rowId)`, to spread on a plain row button (an edit pen opening a dialog) so `useRowMenuFocus().focusRowMenu(rowId)` hands the focus back to it like a `RowMenu` trigger, with no local map of button refs ([#2377](https://github.com/softistx/nxgt-material/issues/2377)).
+
+### Patch Changes
+
+- [#2351](https://github.com/softistx/nxgt-material/pull/2351) [`4eebac0`](https://github.com/softistx/nxgt-material/commit/4eebac0fe3574ce52acf9bdef722137c3df3c47b) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the app bar's page title on a phone: a long title (a record's number such as `Prescription P00000001`) now wraps to a second line before it is cut with an ellipsis, so the identifier stays readable by touch, where the `title` tooltip cannot be reached. From `md` up it is unchanged (one line, ellipsis); the full-text `title` is still set whenever the text is cut off. Fixes [#2324](https://github.com/softistx/nxgt-material/issues/2324).
+
+- [#2374](https://github.com/softistx/nxgt-material/pull/2374) [`fef1413`](https://github.com/softistx/nxgt-material/commit/fef14130acaf94aa69a65ed4343504fd3b64870c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `ChangeHistory` on a phone: a long unbroken value (a URL, a reference) is no longer clipped inside the rail's value pill or the old value, and a long unbroken field name now wraps in both the rail and the cards instead of widening the page at 360px. Spaced text already wrapped. Fixes [#2358](https://github.com/softistx/nxgt-material/issues/2358).
+
+- [#2370](https://github.com/softistx/nxgt-material/pull/2370) [`fcdeacc`](https://github.com/softistx/nxgt-material/commit/fcdeacc3332119aa0860d986e55edceb24095227) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the unselected chips of a `ChipGroupField` (and any neutral toggle `Chip`, `aria-checked` or `aria-pressed`) having no visible container in dark mode: the tonal fill alone was about 1.2:1 over the card. An unselected toggle chip now draws a boundary of 50 % of `--foreground` over the page (64 % on hover), at least 3:1 against the page and the card in light and dark on the 14 presets, teal included (WCAG 1.4.11). Selected chips, plain and coloured chips are unchanged. Fixes [#2357](https://github.com/softistx/nxgt-material/issues/2357).
+
+- [#2347](https://github.com/softistx/nxgt-material/pull/2347) [`875ce11`](https://github.com/softistx/nxgt-material/commit/875ce1161e95e41594cf27b50958cbed0d831494) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `CurrencyField` and `CurrencyFormField` drawing the currency code in an opaque 32 px box off the field's fill, with the code at its top: the code now sits on the field's own surface and is centred on the amount's line, in light and dark and on touch screens ([#2343](https://github.com/softistx/nxgt-material/issues/2343)).
+
+- [#2353](https://github.com/softistx/nxgt-material/pull/2353) [`5d876d4`](https://github.com/softistx/nxgt-material/commit/5d876d4e27218dd0281cee04f33572c3026bb6fe) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Paint the EntityHeader band with the Card surface (`bg-card`) instead of the page ground (`bg-background`). In dark an EntityHeader beside a Card was near-black while the Card was a lighter surface; both now sit on the same elevation, in every preset. Fixes [#2323](https://github.com/softistx/nxgt-material/issues/2323).
+
+- [#2367](https://github.com/softistx/nxgt-material/pull/2367) [`7615ecc`](https://github.com/softistx/nxgt-material/commit/7615ecc5c8c54c3188742d1a4108ed39852dfbd5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `EntityHeader`: a lone icon-only action (`expanded: false`) stays beside the title at narrow widths instead of taking its own row ([#2360](https://github.com/softistx/nxgt-material/issues/2360)).
+
+- [#2338](https://github.com/softistx/nxgt-material/pull/2338) [`ddcfa2c`](https://github.com/softistx/nxgt-material/commit/ddcfa2cf9e4166f9e86e9bb574ec02f5c5942bfb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(quantity-field): keep the number input a 44px tap target at 375px; the unit part shrinks before the number does ([#2327](https://github.com/softistx/nxgt-material/issues/2327)).
+
+- [#2364](https://github.com/softistx/nxgt-material/pull/2364) [`45bb1dd`](https://github.com/softistx/nxgt-material/commit/45bb1dd8fc939f3d57971054020de4622baeee96) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `ServerTable` on a phone without `actions` now puts the labelled "Select all" in the second row (with the sort and "Filters"), as it does with `actions`, instead of a blank full-width band holding a bare checkbox. Fixes [#2363](https://github.com/softistx/nxgt-material/issues/2363).
+
+- [#2373](https://github.com/softistx/nxgt-material/pull/2373) [`cc97b1a`](https://github.com/softistx/nxgt-material/commit/cc97b1a91e4137a109e641d73a93dd9012c09172) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs and a code comment only: the theming guides now describe `--primary-text` (light) and the dark `--error-text` as solved shares per theme (teal 94 %, corail 89 %, pink 94 %; dark error 71 % on teal), not the fixed 96 % and 76 %. No behaviour change.
+
+- [#2334](https://github.com/softistx/nxgt-material/pull/2334) [`599fab6`](https://github.com/softistx/nxgt-material/commit/599fab6f0b743b7b06e09fc420c5c52911bec201) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `TabsNav` (and `Tabs`) leaving the active tab half under a scroll chevron after the tabs or the list changed size (a web font, a count, a rotation): the active tab is now kept revealed, clear of the chevrons, until the person scrolls the list themselves ([#2328](https://github.com/softistx/nxgt-material/issues/2328)).
+
+- [#2362](https://github.com/softistx/nxgt-material/pull/2362) [`3bc6091`](https://github.com/softistx/nxgt-material/commit/3bc6091b15e0fa644907720b4b220ba43a09eaae) Thanks [@SteveGT96](https://github.com/SteveGT96)! - The dark `--error-text` is solved against the dark `--background` and `--card`: its share of the error colour drops below 76 % when a lighter card (the teal preset's) would leave it under 5.3:1, so a field's error message and an inline alert keep 4.5:1 in axe on that card. Other presets are unchanged. Fixes [#2332](https://github.com/softistx/nxgt-material/issues/2332).
+
+- [#2366](https://github.com/softistx/nxgt-material/pull/2366) [`2ae3bba`](https://github.com/softistx/nxgt-material/commit/2ae3bbacf31cce96639579468d4edd2d2f66c943) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(theme): `primary-text` (light) darkens when a tinted page would leave a tonal Button label under 4.5:1 on a striped table row; Teal's label is now AA there. `CONTRAST_PAIRS` gains `primary-text` on `primary@row15` ([#2322](https://github.com/softistx/nxgt-material/issues/2322)).
+- Updated dependencies [[`cc97b1a`](https://github.com/softistx/nxgt-material/commit/cc97b1a91e4137a109e641d73a93dd9012c09172), [`3bc6091`](https://github.com/softistx/nxgt-material/commit/3bc6091b15e0fa644907720b4b220ba43a09eaae), [`2ae3bba`](https://github.com/softistx/nxgt-material/commit/2ae3bbacf31cce96639579468d4edd2d2f66c943)]:
+  - @nxgt/material-core@0.49.1
+
+## 3.76.0
+
+### Minor Changes
+
+- [#2200](https://github.com/softistx/nxgt-material/pull/2200) [`c7e7530`](https://github.com/softistx/nxgt-material/commit/c7e7530a956c54c681d35f98936c6c4973a2cf02) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the Conversion variant to `Calculator` (`@nxgt/material/calculator`), the "Conversion" tab: a category (length, mass, temperature, volume, area, speed, time, data), a value typed in the locale's own separators, the unit it is in and the unit wanted, a swap button and the exact result in the locale (`1 in` is `2.54 cm`, `212 °F` is `100 °C`), on `@nxgt/material-core/calculator/units`. The result is read once the value stops changing, not at every digit. New prop `currencyRates` adds a Currency category: an object `{ base, rates, asOf? }`, or a function `(signal: AbortSignal) => Promise<{ base, rates, asOf? }>` with loading, error and Try again states and an "as of" date; a currency amount is rounded to the target currency's minor unit, and without `currencyRates` the category is not offered. The variant brings a `panel` (a body of its own in place of the keypad, display and tape) to the variant registry. New `material.calculator.conversion.*` strings, with the name of every unit, in English and French. The switcher now offers Conversion by default: pass `variants` for a fixed set. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2243](https://github.com/softistx/nxgt-material/pull/2243) [`4379476`](https://github.com/softistx/nxgt-material/commit/43794763d26f682269d1a66f63b38a017e35d894) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the `@nxgt/material/calculator-field` entry with `CalculatorField` and `CalculatorFormField`: a `NumberField` (a `CurrencyField` when `currency` is set) with an "Open calculator" button inside it. The button opens a `Calculator` seeded with the field's number, in a popover from 768px wide and a bottom sheet below (`surface` chooses). Apply writes the result (a currency amount rounded half-up to the currency's decimals, held to `min` and `max`; `onExactValueChange` gets the exact decimal first), Cancel and Escape keep the number, and focus goes back to the button. The calculator offers only Standard unless `calculatorVariants` lists more; `calculatorVariant` picks what opens. `CalculatorFormField` is the React Hook Form wrapper, with the same blur rule as the other pickers. The field is its own entry, so `/calculator` stays as small as before. `Calculator` gains `defaultValue` (a number it opens with, as a finished result) and `onValueChange` (the display's exact value as it changes); `CurrencyField` gains `trailingAction` (a button after the currency code). New `material.calculator.field.*` strings in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2189](https://github.com/softistx/nxgt-material/pull/2189) [`073c61a`](https://github.com/softistx/nxgt-material/commit/073c61acb08e1b271f47c29a3232e0afb93e3bdb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the Financial variant to `Calculator` (`@nxgt/material/calculator`), a panel of forms on `@nxgt/material-core/calculator/financial` instead of a keypad: VAT (add it, or take it out of a price), margin and markup (the rates of a cost and a price, or the price or cost a rate gives), percent change, and a loan with its monthly payment, totals and a captioned amortisation `<table>`. It uses `CurrencyField`, `PercentField` and `NumberField`, rounds to the currency's minor unit, writes amounts in `locale` and announces a result once the fields settle. It reads the shared `currency` prop (decimals and code, none by default). The switcher now offers Financial too. New `material.calculator.financial.*` strings in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2261](https://github.com/softistx/nxgt-material/pull/2261) [`04590ee`](https://github.com/softistx/nxgt-material/commit/04590ee42c104acd6e540eb0102cc075177e84d5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Calculator` (`@nxgt/material/calculator`) and `CalculatorField` (`@nxgt/material/calculator-field`) load every variant but Standard on demand. Scientific, Point of sale, Financial, Conversion and Programmer, with the `@nxgt/material-core/calculator/*` engine each one uses, are separate chunks fetched the first time the variant is shown (by `variant`, `defaultVariant` or the switcher, which also warms the chunk on hover and focus), so an app that only uses Standard no longer downloads them. While a variant loads, its body is a skeleton of Standard's size with a polite status (`material.calculator.loading`); a failed load says so and offers Try again (`material.calculator.load-failed`, `material.calculator.retry`). The server renders that loading body for a non-Standard variant, then the client hydrates and fetches the chunk. The props and exports are unchanged. The loading status is announced: `aria-busy` sits on the skeleton pad, not on the `role="status"` element. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2190](https://github.com/softistx/nxgt-material/pull/2190) [`cb28eaf`](https://github.com/softistx/nxgt-material/commit/cb28eaf455991af4648dbe3b96c7615887043cbf) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the point-of-sale variant to `Calculator` (`@nxgt/material/calculator`), the "Point of sale" tab: an amount typed like a till (`1`, `2`, `5` is `1.25`, a `00` key), a quantity (`×`), a discount in percent or amount (`%`), a ticket whose lines are removed one by one (it folds away on a phone), VAT by rate with prices including it or not, the bills to hand over from your `denominations`, the change due and a Charge button that calls `onCharge(total, ticket)` with the total and a plain, JSON-safe `PosTicket` (lines, discounts, totals and VAT by rate as text). New props `currency` (shared by the variants that show amounts), `vatRates`, `pricesIncludeVat`, `denominations` and `onCharge`; amounts are exact and rounded to the currency's minor unit, the ticket is never stored, and only the total, the change and the amount due are announced. The switcher now offers the point of sale by default: pass `variants` for a fixed set. New `material.calculator.pos.*` strings and `keys.*` names in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2216](https://github.com/softistx/nxgt-material/pull/2216) [`e38b616`](https://github.com/softistx/nxgt-material/commit/e38b6166e51d047024a010c171298a56afecbcc6) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the Programmer variant to `Calculator` (`@nxgt/material/calculator`), on `@nxgt/material-core/calculator/programmer`: integers in a word of 8, 16, 32 or 64 bits, signed or unsigned (`defaultWordSize`, `defaultSigned`), with `A` to `F`, the word operators, shifts and rotates on the keypad. HEX, DEC, OCT and BIN readouts are a single choice that sets the base the digits are typed in (digits the base lacks are disabled), the word size and sign change the word and announce when a value is cut, and a bit pad of `aria-pressed` buttons flips single bits. The switcher now offers Programmer too. New `material.calculator.programmer.*` strings, key names and word announcements in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2161](https://github.com/softistx/nxgt-material/pull/2161) [`9f0f309`](https://github.com/softistx/nxgt-material/commit/9f0f309a07e8ede0f67603e7da759938b112eb45) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add the Scientific variant to `Calculator` (`@nxgt/material/calculator`): `sin cos tan` and the hyperbolic functions (2nd for the inverses), `ln log log₂ 10ˣ eˣ`, powers and roots, `n!`, `1/x`, `|x|`, `π`, `e`, `EE` (a real exponent entry: `3 EE 5` is `3e5`) and `mod`, calculated exactly to 34 digits (`sin(30)` is `0.5`). A toolbar chooses the angle unit (degrees, radians, gradians) and the result notation (auto, scientific, engineering) and announces each change; the functions sit above the Standard keys on a phone and beside them on a tablet. The switcher now offers Standard and Scientific by default: pass `variants={['standard']}` for the single Standard calculator. New `material.calculator.keys.*`, `angle.*` and `notation.*` strings in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2138](https://github.com/softistx/nxgt-material/pull/2138) [`8040e76`](https://github.com/softistx/nxgt-material/commit/8040e768be8b72db5a9601deabea8989f0378d1f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `@nxgt/material/calculator`: `Calculator`, an exact-decimal calculator with the usual precedence (`2 + 3 × 4` is 14), a large display with the expression above the result, a shaped keypad (`=` a primary pill), a tape of past results to replay and reuse, a memory, the physical keyboard (`globalKeyboard` opt-in), copy and paste, and a screen-reader announcement of each result. The Standard variant is in; the others join the same switcher. The tape and memory are kept in `localStorage` after mount (`persist`, on by default, `persist={false}` to opt out); haptics and sound are off unless `feedback` asks. The maths is `@nxgt/material-core/calculator`, with no `eval`. Nothing to migrate. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2315](https://github.com/softistx/nxgt-material/pull/2315) [`13e710c`](https://github.com/softistx/nxgt-material/commit/13e710c8d37d6fbd349ad44bf62a4742bcfafc47) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Moment` gains `modal={false}`, a non-modal variant for an event the user did not trigger (a live update). Focus stays where it is (no move, no trap, no return), the page behind stays interactive and the backdrop lets taps through (only the text and the close button take them), and the text is announced politely through a `role="status"` live region instead of a dialog. Same visuals, `duration` and reduced-motion behaviour. The default stays a modal dialog. Fixes [#2313](https://github.com/softistx/nxgt-material/issues/2313).
 
 ### Patch Changes
 
-- [`80b31fb`](https://github.com/softistx/nxgt-material/commit/80b31fbc82b47196dadc7d894c0877d045fa4dbb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): on a phone the list header's "Select all" box keeps a 44x44 hit area that `@nxgt/playwright`'s `expectTapTargets` accepts, with rows selected. Since [#2295](https://github.com/softistx/nxgt-material/issues/2295) the list draws no panel on a phone, so the box moved 16px nearer the screen's edge: in an 8px page gutter its centre sat 20px from it. The check moves the 44px square centred on the box inside the viewport, and that square then reached 2px past the box's `::after` onto the list bar. The label now takes back 6px instead of 14px, so the box's centre is 22px or more from the edge in any gutter of 2px or more. The "Select all" label stays whole at 375 and 412px. Fixes [#2304](https://github.com/softistx/nxgt-material/issues/2304).
+- [#2250](https://github.com/softistx/nxgt-material/pull/2250) [`a574c60`](https://github.com/softistx/nxgt-material/commit/a574c6068e4818868073648aad31458a6ba9a92a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix two `Calculator` details: on a phone width (under 480px) the variant switcher draws each active tab's own surface instead of one sliding indicator that spanned a single row of the two-column grid, and in the Programmer variant a base change on an expression that ends in an operator rewrites its numbers in place (`10+` in decimal is `a+` in hex) instead of collapsing it to a value. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+  
+  The calculator's stylesheet is opt-in: `styles.css` no longer carries it, so import `@nxgt/material/calculator.css` after `styles.css` or the calculator renders unstyled. `CalculatorField` with `currency` is a `CurrencyField`: `suffix`, `step`, `hideSteppers` and the typing-time `min` / `max` apply only without `currency`. In core, point of sale and financial share one money module: a negative amount or rate and a `digits` / `fractionDigits` outside 0 to 12 are `invalid-amount`, and the point of sale's `toMinor` is `toMinorUnits`.
+
+- [#2181](https://github.com/softistx/nxgt-material/pull/2181) [`45a817b`](https://github.com/softistx/nxgt-material/commit/45a817b4c202e87c1a2f952496778b25382423b0) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Map the point-of-sale error codes of the calculator engine (`invalid-amount`, `duplicate-line`, `unknown-line`) to `material.calculator.error.*` messages in English and French. Refs [#2101](https://github.com/softistx/nxgt-material/issues/2101).
+
+- [#2329](https://github.com/softistx/nxgt-material/pull/2329) [`70c5189`](https://github.com/softistx/nxgt-material/commit/70c51896f8a3934c0a84eaa1d7488a26cfb0197c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `.form-grid-layout` on a page: a short form's `form-actions` no longer draws a second slab under the fields. The actions wear the fields' tint with no gap between them, so fields and actions read as one surface, and they stay sticky at the bottom of whatever scrolls a long form. Fixes [#2307](https://github.com/softistx/nxgt-material/issues/2307).
+
+- [#2310](https://github.com/softistx/nxgt-material/pull/2310) [`c55b426`](https://github.com/softistx/nxgt-material/commit/c55b42630810315aae2b16e53b395775563f9b15) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(server-table): on a phone the list header's "Select all" box keeps a 44x44 hit area that `@nxgt/playwright`'s `expectTapTargets` accepts, with rows selected. Since [#2295](https://github.com/softistx/nxgt-material/issues/2295) the list draws no panel on a phone, so the box moved 16px nearer the screen's edge: in an 8px page gutter its centre sat 20px from it. The check moves the 44px square centred on the box inside the viewport, and that square then reached 2px past the box's `::after` onto the list bar. The label now takes back 6px instead of 14px, so the box's centre is 22px or more from the edge in any gutter of 2px or more. The "Select all" label stays whole at 375 and 412px. Fixes [#2304](https://github.com/softistx/nxgt-material/issues/2304).
+
+- [#2318](https://github.com/softistx/nxgt-material/pull/2318) [`e2807c4`](https://github.com/softistx/nxgt-material/commit/e2807c446cdc39ccead6af83000360d0b24d3b78) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix the `ServerTable` band's title sitting 4px inside the list: the band carried `px-1` that the panel's padding used to need. On a phone the title now starts at the tile list (the layout gutter), and from 768px it lines up with the table's start and the page's other titles. A `ServerTable` sits inside a page gutter (the layout's, or the caller's own padding when used standalone, as 3.75.0 documents); the coarse-pointer select-all's 44px hit area overhangs 4px into that gutter. Fixes [#2305](https://github.com/softistx/nxgt-material/issues/2305).
+
+- [#2325](https://github.com/softistx/nxgt-material/pull/2325) [`44823dc`](https://github.com/softistx/nxgt-material/commit/44823dcf6e57b13799dee39a641f824998faa1bb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix `ActivityLayout`'s phone menu sheet: a full-width `context` (a `Switcher` with `w-full`) no longer runs under the sheet's close button. The context line reserves 3rem on its right; short text contexts look unchanged. Fixes [#2306](https://github.com/softistx/nxgt-material/issues/2306).
+- Updated dependencies [[`a574c60`](https://github.com/softistx/nxgt-material/commit/a574c6068e4818868073648aad31458a6ba9a92a), [`4d1a2fe`](https://github.com/softistx/nxgt-material/commit/4d1a2fe4c7393d23210adf809223f2ab16fccb1c), [`9f0f309`](https://github.com/softistx/nxgt-material/commit/9f0f309a07e8ede0f67603e7da759938b112eb45), [`073c61a`](https://github.com/softistx/nxgt-material/commit/073c61acb08e1b271f47c29a3232e0afb93e3bdb), [`76e498d`](https://github.com/softistx/nxgt-material/commit/76e498d37999d12f76b12245eb988178eafaeee4), [`45a817b`](https://github.com/softistx/nxgt-material/commit/45a817b4c202e87c1a2f952496778b25382423b0), [`8d5953a`](https://github.com/softistx/nxgt-material/commit/8d5953a9d554e0061fadd94d1441edf24336d01a), [`995f5a4`](https://github.com/softistx/nxgt-material/commit/995f5a4bbc3dbaa0e106f9239cb96c59738c2778), [`34fae43`](https://github.com/softistx/nxgt-material/commit/34fae4329d85a228ce9d1f12864294dc0deeb07d)]:
+  - @nxgt/material-core@0.49.0
 
 ## 3.75.0
 

package/README.md

@@ -200,6 +200,8 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | `@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)) |
 | `@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/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)) |
@@ -228,6 +230,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/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` |
@@ -421,6 +424,37 @@ from `@nxgt/material/print` puts it in a PDF as vectors. The
 [drawing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/drawing.md)
 covers colours, accessibility, events, sketch, animation, PNG, PDF and e-mail.
 
+### Calculator
+
+`@nxgt/material/calculator` is a calculator with exact decimal arithmetic and
+the usual precedence (`2 + 3 × 4` is `14`): a large display with the expression
+above the result, a shaped keypad, a tape of past results to replay and reuse,
+a memory, the physical keyboard, copy and paste and a screen-reader
+announcement of each result. Nothing is evaluated as code. Its own entry,
+server-safe; only Standard is in it, every other variant loads on demand when it
+is first shown (a skeleton and a status while it does).
+
+```tsx
+import { Calculator } from '@nxgt/material/calculator';
+
+<Calculator locale="fr" onResult={(value, expression) => save(value, expression)} />
+```
+
+The [calculator guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/calculator.md) covers the props, the keyboard,
+the tape and memory, what is stored in `localStorage` and the sizing. The
+Conversion variant takes `currencyRates` (`CalculatorRatesSource`: a
+`CalculatorCurrencyRates` object or a `(signal) => Promise` of one; the library
+fetches nothing). `@nxgt/material/calculator-field` (its own entry) holds `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.
+
+```tsx
+import { CalculatorField } from '@nxgt/material/calculator-field';
+
+<CalculatorField label="Price" currency="EUR" value={price} onChange={setPrice} />
+```
+
 ### Barcodes and label sheets
 
 `@nxgt/material/barcode` draws Code 128 and Data Matrix as accessible SVG, with
@@ -463,6 +497,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [Charts](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md) | drawing charts with `@nxgt/material/charts` (client-only): the twelve charts, shared props, legend, View data, `onPointClick`, reference bands, thresholds and point tones on the line chart, zoom and phone scroll, right-to-left pages, keyboard and accessibility, theming the `--chart-*` tokens, and migrating from the Nivo charts, removed in 3.0 |
 | [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 |
 | [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 |
@@ -680,7 +715,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), `surface="none"` to sit in a Card with no frame of its own, a bulk bar that reserves no row until a selection, bulk actions with `appliesTo` that count and run only the selected rows they apply to (hidden at zero), an accessible `name`, a `max` rows with a notice, and `focusTrigger()` to give the focus back after a dialog, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog. | — |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-rowmenu.webp" width="120" alt="RowMenu"> | [`RowMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#rowmenu), `RowMenuTrigger`, `rowMenuColumn` | A row's "..." button named after its row ("Actions for Ada"; 44px on touch, 36px with a mouse from `md`), its menu aligned to the end with the destructive item last and 44px items on touch, and a column helper for `DataTable` and `ServerTable` under a hidden but named "Actions" header; focus returns to the button, also from a dialog an item opened; `useRowMenuFocus()` / `focusRowMenu(rowId)` hands it back to one row's button after an async action, a toast or a later dialog, and `rowFocusProps(rowId)` marks a plain row button the same way. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-recordactionsmenu.webp" width="120" alt="RecordActionsMenu"> | [`RecordActionsMenu`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#recordactionsmenu), `useRecordActions` | A record's archive, restore and delete menu over `RowMenu`: Archive runs at once with an Undo toast that stays until dismissed, Restore runs at once, Delete permanently (archived records only) always asks and keeps a refusal in its locked dialog; `can` hides what is not allowed (and the whole menu when nothing is), `send` does the action, `onDone` follows it, `items` / `children` add your own entries, `messages` renames the words; `archivePolicy="confirm"` asks before archiving (no Undo), `consequence` notes what an action entails, `successAction` adds a toast action, and `ActionRefusal` / `isActionRefusal` carry a refusal's details and action. | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`; `totalCount` is optional: a feed with no total shows no range, only Previous / Next; `hideOnSinglePage` renders nothing when there is no previous and no next page), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |
@@ -716,7 +751,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-toc.webp" width="120" alt="Toc"> | [`Toc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#toc) | On-this-page outline with a per-item active bar. Rail from `xl`, collapsible panel below. `DocToc` composes it. | `Toc` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-stepper.webp" width="120" alt="Stepper"> | [`Stepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#stepper), `StepperIndicator` | Clickable horizontal or vertical steps with status and progress (expressive shapes, optional steps, a phone header with Back and Next). | `Stepper` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-steps.webp" width="120" alt="Steps"> | [`Steps`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#steps), `StepsItem` | Numbered editorial steps that stay visible on every breakpoint. | `Steps`, `StepsItem` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions. | `Hero` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-hero.webp" width="120" alt="Hero"> | [`Hero`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#hero) | Landing band with eyebrow, title, supporting copy and actions; `size="compact"` is a home-page greeting band, and `background` draws a `Background` behind it. | `Hero`, `HeroBackgroundProps` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-doc.webp" width="120" alt="Doc"> | [`Doc`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#doc), `DocPage`, `DocTopbar`, `DocSidebar`, `DocToc`, `DocPager`, `DocSearch`, `DocChildCards`, `DocSeeAlso`, `DocEmpty`, `DocProgress` | Documentation site shell: sidebar from `md`, TOC rail from `xl`. Reading bar, copy-page / markdown, child cards, see also, and a 404 slot. Storybook `UI/Doc/Api` composes an API page from `DocPage`, `AnchorHeading`, `ApiOperation`, `ParamTable` and `CodeGroup`. | `Doc` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/navigation-layout-background.webp" width="120" alt="Background"> | [`Background`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#background) | Full-viewport gradient with blurred colour blobs; centres its children; 52 presets on `/backgrounds`, and a `sky` overlay. | `Background` |
 | — | [`NavigationRail`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/navigation-and-layout.md#navigationrail) | Placeholder: renders an empty rail container and takes no props yet. | `NavigationRail` |
@@ -742,7 +777,7 @@ Not components: what the stylesheet gives any element.
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alert.webp" width="120" alt="Alert"> | [`Alert`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alert) | Callout with the tone's icon (or yours, or none with `icon={null}`), title, description and `actions` (buttons or links under the text) in seven tones; it spans the row in a form grid. | `Alert` |
 | | [`Celebration`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#celebration) | One-shot confetti burst for a win or a reveal: plays once on mount or when `trigger` changes, never loops, theme-token colours, `aria-hidden`, nothing under reduced motion. | — (later, #2272) |
-| | [`Moment`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#moment) | Full-screen one-off announcement (a player is eliminated, a role revealed): a modal dialog named by its title, focus moved in and restored, dismissed by Escape, a tap, its action or `duration`, tone-coloured, with a fade and pop-in that stop under reduced motion. | — (later) |
+| | [`Moment`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#moment) | Full-screen one-off announcement (a player is eliminated, a role revealed): a modal dialog named by its title, focus moved in and restored, dismissed by Escape, a tap, its action or `duration`, tone-coloured, with a fade and pop-in that stop under reduced motion; `modal={false}` for a live event keeps focus and lets taps through, announced as a polite status. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-stalenotice.webp" width="120" alt="StaleNotice"> | [`StaleNotice`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#stalenotice) | Warning that another write came first: keeps what was typed, takes the focus and scrolls into view on mount, and offers one "Reload the record" action (`onReload`, `busy`, `message`), never an overwrite. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-banner.webp" width="120" alt="Banner"> | [`Banner`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#banner) | Dismissible info / success / warning / error banner with an action, in the look of `Alert` (light surface, start bar); it spans the row in a form grid. | `Banner` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/feedback-status-alertdialog.webp" width="120" alt="AlertDialog"> | [`AlertDialog`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/feedback-and-status.md#alertdialog), `AlertDialogContent`, `AlertDialogAction`, `AlertDialogCancel`… | Parts for a blocking confirmation dialog. | `AlertDialog` (same parts) |
@@ -810,6 +845,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/rich-widgets-quiz.webp" width="120" alt="Quiz"> | [`Quiz`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#quiz), `QuestionCard` · [`QuestionNavigator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/rich-widgets.md#questionnavigator) | Exam or practice quizzes: step progress, instant feedback with explanations and hints, a time limit, keyboard shortcuts, and a results screen with a score ring, a breakdown and a retry of the misses. Container queries. | `Quiz`, `QuestionCard` (modes and results: React only for now); `QuestionNavigator` React only for now |
 | <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 |
 
 `RadioGroupField`, `SliderField` and `SwitchField` are aliases of the
 labelled `RadioGroup`, `Slider` and `Switch`, under the names

package/dist/{alert-dialog-BfO_ri-N.js → alert-dialog-653apk3f.js}

@@ -1,9 +1,10 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { o as n } from "./dist-DVRQkaTK.js";
-import { c as r, s as i } from "./dist-lmHmz_bu.js";
-import { t as a } from "./in-dialog-Vwkyp-M5.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-DNQtADAR.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-Cevw_6yq.js";
 import { i as _ } from "./escape-owner-DpaP0lm1.js";
 import * as v from "react";
 import { jsx as y, jsxs as b } from "react/jsx-runtime";
@@ -31,7 +32,7 @@ var x = /* @__PURE__ */ e({
 }), S = Object.defineProperty, C = (e, t) => S(e, "name", {
 	value: t,
 	configurable: !0
-}), [w, T] = r("AlertDialog", [c]), E = c(), D = /* @__PURE__ */ C((e) => {
+}), [w, T] = i("AlertDialog", [c]), E = c(), D = /* @__PURE__ */ C((e) => {
 	let { __scopeAlertDialog: t, ...n } = e;
 	return /* @__PURE__ */ y(p, {
 		...E(t),
@@ -59,16 +60,16 @@ var x = /* @__PURE__ */ e({
 		ref: t
 	});
 }, "AlertDialogOverlay")), [j, M] = w("AlertDialogContent"), N = v.forwardRef(/* @__PURE__ */ C(function(e, t) {
-	let { __scopeAlertDialog: r, children: a, ...s } = e, c = E(r), l = n(t, v.useRef(null)), u = v.useRef(null);
+	let { __scopeAlertDialog: i, children: a, ...s } = e, c = E(i), l = n(t, v.useRef(null)), u = v.useRef(null);
 	return /* @__PURE__ */ y(j, {
-		scope: r,
+		scope: i,
 		cancelRef: u,
 		children: /* @__PURE__ */ y(o, {
 			role: "alertdialog",
 			...c,
 			...s,
 			ref: l,
-			onOpenAutoFocus: i(s.onOpenAutoFocus, (e) => {
+			onOpenAutoFocus: r(s.onOpenAutoFocus, (e) => {
 				e.preventDefault(), u.current?.focus({ preventScroll: !0 });
 			}),
 			onPointerDownOutside: (e) => e.preventDefault(),

package/dist/{async-slice-roMAJVzG.js → async-slice-CXLbQuOc.js}

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

@@ -1,6 +1,7 @@
 import { o as e } from "./dist-DVRQkaTK.js";
-import { a as t, c as n, i as r, l as i, s as a, t as o } from "./dist-lmHmz_bu.js";
-import { i as s, n as c, r as l, t as u } from "./dist-C4wtXCjf.js";
+import { i as t, r as n, t as r } from "./dist-DWZXlCZR.js";
+import { a as i, i as a, t as o } from "./dist-DHdUUM1w.js";
+import { i as s, n as c, r as l, t as u } from "./dist-DOK3zo5C.js";
 import { t as d } from "./browser-only-DQ94lWF8.js";
 import * as f from "react";
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
@@ -8,7 +9,7 @@ import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 var g = Object.defineProperty, _ = (e, t) => g(e, "name", {
 	value: t,
 	configurable: !0
-}), v = "Radio", [y, b] = n(v), [x, S] = y(v);
+}), v = "Radio", [y, b] = i(v), [x, S] = y(v);
 function C(e) {
 	let { __scopeRadio: t, checked: n = !1, children: r, disabled: i, form: a, name: o, onCheck: s, required: c, value: l = "on", internal_do_not_use_render: u } = e, [d, p] = f.useState(null), [h, g] = f.useState(null), v = f.useRef(!1), [y, b] = f.useReducer((e) => e + 1, 0), S = {
 		checked: n,
@@ -34,9 +35,9 @@ function C(e) {
 	});
 }
 _(C, "RadioProvider");
-var w = "RadioTrigger", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function({ __scopeRadio: t, onClick: n, ...r }, o) {
-	let { checked: s, disabled: c, value: l, setControl: u, onCheck: d, hasConsumerStoppedPropagationRef: f, onUserInteraction: p, isFormControl: h, bubbleInput: g } = S(w, t), _ = e(o, u);
-	return /* @__PURE__ */ m(i.button, {
+var w = "RadioTrigger", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function({ __scopeRadio: r, onClick: i, ...a }, o) {
+	let { checked: s, disabled: c, value: l, setControl: u, onCheck: d, hasConsumerStoppedPropagationRef: f, onUserInteraction: p, isFormControl: h, bubbleInput: g } = S(w, r), _ = e(o, u);
+	return /* @__PURE__ */ m(t.button, {
 		type: "button",
 		role: "radio",
 		"aria-checked": s,
@@ -44,25 +45,25 @@ var w = "RadioTrigger", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(funct
 		"data-disabled": c ? "" : void 0,
 		disabled: c,
 		value: l,
-		...r,
+		...a,
 		ref: _,
-		onClick: a(n, (e) => {
+		onClick: n(i, (e) => {
 			s || (p(), d()), g && h && (f.current = e.isPropagationStopped(), f.current || e.stopPropagation());
 		})
 	});
-}, "RadioTrigger")), E = "RadioIndicator", D = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, t) {
-	let { __scopeRadio: n, forceMount: a, ...o } = e, s = S(E, n);
-	return /* @__PURE__ */ m(r, {
-		present: a || s.checked,
-		children: /* @__PURE__ */ m(i.span, {
+}, "RadioTrigger")), E = "RadioIndicator", D = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(e, n) {
+	let { __scopeRadio: r, forceMount: i, ...o } = e, s = S(E, r);
+	return /* @__PURE__ */ m(a, {
+		present: i || s.checked,
+		children: /* @__PURE__ */ m(t.span, {
 			"data-state": j(s.checked),
 			"data-disabled": s.disabled ? "" : void 0,
 			...o,
-			ref: t
+			ref: n
 		})
 	});
-}, "RadioIndicator")), O = "RadioBubbleInput", k = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function({ __scopeRadio: t, onClick: n, ...r }, s) {
-	let { control: c, checked: l, required: u, disabled: d, name: p, value: h, form: g, bubbleInput: _, setBubbleInput: v, hasConsumerStoppedPropagationRef: y, userInteractionCount: b } = S(O, t), x = e(s, v), C = o(c), w = f.useRef(!1), T = f.useRef(l), E = f.useRef(b);
+}, "RadioIndicator")), O = "RadioBubbleInput", k = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function({ __scopeRadio: r, onClick: i, ...a }, s) {
+	let { control: c, checked: l, required: u, disabled: d, name: p, value: h, form: g, bubbleInput: _, setBubbleInput: v, hasConsumerStoppedPropagationRef: y, userInteractionCount: b } = S(O, r), x = e(s, v), C = o(c), w = f.useRef(!1), T = f.useRef(l), E = f.useRef(b);
 	f.useEffect(() => {
 		let e = _;
 		if (!e) return;
@@ -83,7 +84,7 @@ var w = "RadioTrigger", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(funct
 		b
 	]);
 	let D = f.useRef(l);
-	return /* @__PURE__ */ m(i.input, {
+	return /* @__PURE__ */ m(t.input, {
 		type: "radio",
 		"aria-hidden": !0,
 		defaultChecked: D.current,
@@ -92,14 +93,14 @@ var w = "RadioTrigger", T = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(funct
 		name: p,
 		value: h,
 		form: g,
-		...r,
+		...a,
 		tabIndex: -1,
 		ref: x,
-		onClick: a(n, (e) => {
+		onClick: n(i, (e) => {
 			w.current && e.stopPropagation();
 		}),
 		style: {
-			...r.style,
+			...a.style,
 			...C,
 			position: "absolute",
 			pointerEvents: "none",
@@ -122,13 +123,13 @@ var M = [
 	"ArrowDown",
 	"ArrowLeft",
 	"ArrowRight"
-], N = "RadioGroup", [P, F] = n(N, [l, b]), I = l(), L = b(), [R, z] = P(N), B = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(n, r) {
-	let { __scopeRadioGroup: a, name: o, form: l, defaultValue: u, value: d, required: p = !1, disabled: h = !1, orientation: g, dir: v, loop: y = !0, onValueChange: b, ...x } = n, S = I(a), C = s(v), [w, T] = t({
+], N = "RadioGroup", [P, F] = i(N, [l, b]), I = l(), L = b(), [R, z] = P(N), B = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(n, i) {
+	let { __scopeRadioGroup: a, name: o, form: l, defaultValue: u, value: d, required: p = !1, disabled: h = !1, orientation: g, dir: v, loop: y = !0, onValueChange: b, ...x } = n, S = I(a), C = s(v), [w, T] = r({
 		prop: d,
 		defaultProp: u ?? null,
 		onChange: b,
 		caller: N
-	}), [E, D] = f.useState(null), O = e(r, D), k = f.useRef(w);
+	}), [E, D] = f.useState(null), O = e(i, D), k = f.useRef(w);
 	return f.useEffect(() => {
 		let e = l ? E?.ownerDocument.getElementById(l) : E?.closest("form");
 		if (e instanceof HTMLFormElement) {
@@ -153,7 +154,7 @@ var M = [
 			orientation: g,
 			dir: C,
 			loop: y,
-			children: /* @__PURE__ */ m(i.div, {
+			children: /* @__PURE__ */ m(t.div, {
 				role: "radiogroup",
 				"aria-required": p,
 				"aria-orientation": g,
@@ -181,8 +182,8 @@ function U(e) {
 	});
 }
 _(U, "RadioGroupItemProvider");
-var W = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(t, n) {
-	let { __scopeRadioGroup: r, ...i } = t, o = I(r), s = L(r), { checked: c, disabled: l } = S(H, s.__scopeRadio), d = f.useRef(null), p = e(n, d), h = f.useRef(!1);
+var W = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(t, r) {
+	let { __scopeRadioGroup: i, ...a } = t, o = I(i), s = L(i), { checked: c, disabled: l } = S(H, s.__scopeRadio), d = f.useRef(null), p = e(r, d), h = f.useRef(!1);
 	return f.useEffect(() => {
 		let e = /* @__PURE__ */ _((e) => {
 			M.includes(e.key) && (h.current = !0);
@@ -197,12 +198,12 @@ var W = /* @__PURE__ */ f.forwardRef(/* @__PURE__ */ _(function(t, n) {
 		active: c,
 		children: /* @__PURE__ */ m(T, {
 			...s,
-			...i,
+			...a,
 			ref: p,
-			onKeyDown: a(i.onKeyDown, (e) => {
+			onKeyDown: n(a.onKeyDown, (e) => {
 				e.key === "Enter" && e.preventDefault();
 			}),
-			onFocus: a(i.onFocus, () => {
+			onFocus: n(a.onFocus, () => {
 				h.current && d.current?.click();
 			})
 		})

package/dist/{button-DgenqmpS.js → button-3op3rtZh.js}

@@ -1,6 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, r as i, t as a } from "./spinner-B2MubVWb.js";
+import { n as r, t as i } from "./spinner-C1QIewWv.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-BZYtTmVt.js";
 import { t as f } from "./is-production-GLw59WU8.js";
 import { t as p } from "./button-group-context-CaP0X5p_.js";
@@ -184,7 +185,7 @@ var w = [
 		color: "default",
 		class: `${s.default} ${c.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], T = r("nxgt-btn nxgt-morph-fill 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 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))]", {
 	variants: {
 		variant: {
 			filled: "",
@@ -243,7 +244,7 @@ function A(e) {
 	}, [e]);
 }
 function j({ spinnerVariant: t, color: n }) {
-	return /* @__PURE__ */ S(a, {
+	return /* @__PURE__ */ S(i, {
 		variant: t,
 		color: n,
 		className: e("starting:scale-0 duration-500", t === "4" ? "size-7.5" : "size-4.5")
@@ -311,7 +312,7 @@ function F({ className: e, variant: r = "filled", asChild: i = !1, children: a,
 	});
 }
 function I({ tooltip: e, ...t }) {
-	return e ? /* @__PURE__ */ S(i, {
+	return e ? /* @__PURE__ */ S(r, {
 		content: e,
 		children: /* @__PURE__ */ S(F, { ...t })
 	}) : /* @__PURE__ */ S(F, { ...t });