@nxgt/material 3.75.0 → 3.76.0

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # @nxgt/material
 
+## 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
+
+- [#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
 
 ### Minor Changes

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 |
@@ -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 });