@nxgt/material 3.103.0 → 3.105.0

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @nxgt/material
 
+## 3.105.0
+
+### Minor Changes
+
+- [#2914](https://github.com/softistx/nxgt-material/pull/2914) [`c572dc6`](https://github.com/softistx/nxgt-material/commit/c572dc6159bbba04d3e00e59e89f4f901346b79c) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Sidebar groups can remember their fold state and hide their badge while open. On a `MenuItem` with `children` and `defaultExpanded`, `persistKey` (a string, or `true` to derive the key from `navigation.persistKey` and the `url`) keeps the expanded or folded choice in this browser, read after hydration like the sidebar's own collapse; `badgeWhen: 'collapsed'` draws the parent's `badge` only while the group is folded. Both are optional and default to the previous behaviour.
+
+## 3.104.0
+
+### Minor Changes
+
+- [#2897](https://github.com/softistx/nxgt-material/pull/2897) [`c33484c`](https://github.com/softistx/nxgt-material/commit/c33484c6f2bf1eed9db93b4537032ebc7d8ffeda) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `ChipGroupField` option takes a `tone` (`{ value: 'drinks', label: 'Drinks', tone: 'info' }`), the tones `Badge` takes, an app's own included. An unselected chip shows a soft tint of its tone with the tone's text colour; a selected chip shows the filled tone under its on-colour, both at AA contrast in light and dark. The check, `aria-checked` and the keyboard behaviour are unchanged. `ChipColor` now accepts every `Tone` (it gains `tertiary` and the app's own tones).
+  
+  A pressed toggle `Chip` with a `color` (`aria-pressed` or `aria-checked` true) gets the same filled look; a status chip (`active`) keeps its tint.
+
+- [#2873](https://github.com/softistx/nxgt-material/pull/2873) [`334f1f6`](https://github.com/softistx/nxgt-material/commit/334f1f6ab264a653fe35657bb6dea03aae61d54f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ChipGroupField` takes `overflow="scroll"`: the chips stay on one line that scrolls sideways (touch, trackpad, a focused chip scrolls into view) with a fade at each edge that hides more chips, and no page scroll. The default `overflow="wrap"` is unchanged.
+
+- [#2900](https://github.com/softistx/nxgt-material/pull/2900) [`c6a47e9`](https://github.com/softistx/nxgt-material/commit/c6a47e9eceb8abf7d4098cbd2bebf20bddf96f4d) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `CollapsibleTrigger`: a `flush` prop on `variant="text"` drops the inline padding and takes the parent's font, so a section disclosure inside a `Typography as="h3"` heading starts at the same left edge as its sibling headings, with the chevron, its rotation, hover and focus ring kept. Fixes [#2898](https://github.com/softistx/nxgt-material/issues/2898).
+
+- [#2890](https://github.com/softistx/nxgt-material/pull/2890) [`deb4cf4`](https://github.com/softistx/nxgt-material/commit/deb4cf44871082398d7e6e5bf515a212e66f3574) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `@nxgt/material/print` gains `toCsv(rows, columns, { separator?, bom? })`, a pure RFC 4180 CSV writer (CRLF line ends, fields holding the separator, a quote, CR or LF quoted with doubled quotes, `null` and `undefined` empty, `,` `;` or tab separator, optional UTF-8 BOM), and `csvResponse(text, fileName, options?)`, a Web `Response` with `Content-Type: text/csv; charset=utf-8`, an attachment `Content-Disposition` (ASCII `filename` and RFC 5987 `filename*`, the same helper as `pdfResponse`) and `Cache-Control: private, no-store`. Fixes [#2889](https://github.com/softistx/nxgt-material/issues/2889).
+
+- [#2886](https://github.com/softistx/nxgt-material/pull/2886) [`1b17b5f`](https://github.com/softistx/nxgt-material/commit/1b17b5faf2cfa6dc5c649450f8ffe27fd422672a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` `maxHeightClassName`: caps the scroll region with a Tailwind class (`max-h-[28rem]`), as `DataGrid` does, so the region carries no inline `style`, on the server too, and a strict `style-src-attr 'none'` has nothing to block. `virtual` now accepts either `maxHeight` or `maxHeightClassName`; the virtualizer measures the scroll region. `ServerTable` passes it through. `maxHeight` is unchanged. Fixes [#800](https://github.com/softistx/nxgt-material/issues/800).
+
+- [#2871](https://github.com/softistx/nxgt-material/pull/2871) [`4b7c4a7`](https://github.com/softistx/nxgt-material/commit/4b7c4a7c5d8c0fc83c00c1e692516fa1706d9977) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` `showSort`: `false` drops the sort control of the `cards` and `tiles` list bar ("Sort: Name ↑", on a phone too) without making any column unsortable, so a `{ phone: 'cards', wide: 'table' }` layout keeps its header sorting on desktop. Default: shown, as before. Fixes [#2867](https://github.com/softistx/nxgt-material/issues/2867).
+
+- [#2883](https://github.com/softistx/nxgt-material/pull/2883) [`8e7598c`](https://github.com/softistx/nxgt-material/commit/8e7598ca77c51807092b6d5968c50ad5457f51b5) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PaneLayout`: `defaultOpen` also takes `'desktop'` (open wide, shut on a phone) or `{ desktop, phone }`, resolved from the first client render with no sheet flash and no effect; a boolean keeps applying to every viewport. `paneSide="right"` no longer reverses the flex row: the pane takes its side with a CSS `order`, so the tab order follows the DOM you wrote (a `PaneLayout.Content` first, then the pane). A pane written after the content with `paneSide="right"` now sits on the right (before, that order put it on the left). Fixes [#2881](https://github.com/softistx/nxgt-material/issues/2881).
+
+- [#2882](https://github.com/softistx/nxgt-material/pull/2882) [`3c1c60e`](https://github.com/softistx/nxgt-material/commit/3c1c60e3048893b734399a225ac5bb7f6ef790bc) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Add `ProductTile` to `@nxgt/material/components`: a large, even tap tile for a point-of-sale or kiosk catalogue, with a photo (lazy loaded, with an icon fallback) in a tinted 4:3 well or a toned shape and icon, the name, a prominent tabular price, a `status` on its own line, `selected` and `disabled` states and an even height in a `ResponsiveGrid`.
+
+- [#2880](https://github.com/softistx/nxgt-material/pull/2880) [`e66bfa3`](https://github.com/softistx/nxgt-material/commit/e66bfa32223c256ef9e61a43c7f7e51d8c4bae2f) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuantityStepper`, an inline −/value/+ control for a cart or ticket line: a named `group` (`aria-label`, required, e.g. "Quantity of Orange juice") with a minus button, the value as a `spinbutton` (arrow keys, Page Up/Down, Home/End; typed with `editable`) and a plus button. `value` / `defaultValue`, `onValueChange`, `min`, `max`, `step`, `size` (`sm` or `md`), `disabled`, and `onRemove` to turn the minus into a remove (trash) button at `min`. Tabular figures, 44px buttons under a coarse pointer, fits a `ListTile`'s `trailing` or `content`. Import it from `@nxgt/material/components`; story `Form fields/QuantityStepper`. Fixes [#2870](https://github.com/softistx/nxgt-material/issues/2870).
+
+- [#2909](https://github.com/softistx/nxgt-material/pull/2909) [`362876e`](https://github.com/softistx/nxgt-material/commit/362876e90777f8b5615ec1c94b9cd053829303aa) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `TabsList` takes `fullWidth` for the `segmented` look: the track fills its container and its tabs share the width in equal parts, whatever their labels. The default and the `underline` look are unchanged.
+
+### Patch Changes
+
+- [#2885](https://github.com/softistx/nxgt-material/pull/2885) [`88e14ce`](https://github.com/softistx/nxgt-material/commit/88e14ce7acf5735bcb6b9af89a3188006f9c32af) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A `LineChart` (and `AreaChart`) threshold label that sits under its line stays inside the plot: near the plot floor it flips back above the line, or is clamped, instead of touching the x-axis tick labels ([#2058](https://github.com/softistx/nxgt-material/issues/2058)).
+
+- [#2884](https://github.com/softistx/nxgt-material/pull/2884) [`6affed1`](https://github.com/softistx/nxgt-material/commit/6affed18dacfdb93ce0860392b31f78ca53b6ed2) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DayGroupedList` keeps a date-only value such as `"2026-11-03"` on that local calendar day in its relative buckets, instead of reading it as UTC midnight (the previous day west of UTC).
+
+- [#2903](https://github.com/softistx/nxgt-material/pull/2903) [`f5d412f`](https://github.com/softistx/nxgt-material/commit/f5d412f85aa3589ead7a89de24eaafc3a855e050) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `Keypad` cash variant polish: the 0 key spans nine columns when there is no decimal key (it was one column wide), the double zero key's name is now "00, double zero" ("00, double zéro") so it contains its visible text (WCAG 2.5.3), the change row is toned success (warning while an amount is still due) with the figure emphasised, and the quick amounts are tonal chips so the pad follows one tint scheme. The quick-amount chips sit in a two-column grid (an odd last chip takes the full row), so no amount is clipped at 360 px. The POS calculator's double zero key takes the same name.
+
+- [#2912](https://github.com/softistx/nxgt-material/pull/2912) [`63c0489`](https://github.com/softistx/nxgt-material/commit/63c0489298c6161e46e4cbbf9101174eec6a3839) Thanks [@SteveGT96](https://github.com/SteveGT96)! - PaneLayout: on a phone the pane sheet is full width and keeps its close button in a row of its own above the pane's header (side sheet and bottom sheet).
+
+- [#2879](https://github.com/softistx/nxgt-material/pull/2879) [`430d6dc`](https://github.com/softistx/nxgt-material/commit/430d6dc92916c3f72d3d68c6fafe3a02006a904a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `PanelCard`: the title is set in the card-title step (`title-sm` emphasized) instead of the browser's heading size, so a panel in an `ActivityContent` aside no longer outranks the page title. The heading level and the region are unchanged. Fixes [#2877](https://github.com/softistx/nxgt-material/issues/2877).
+
+- [#2893](https://github.com/softistx/nxgt-material/pull/2893) [`4536794`](https://github.com/softistx/nxgt-material/commit/45367945405353ab64f7a5fff20be3976ddf9eeb) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ProductTile` with `asChild` and `disabled` is no longer reachable from the keyboard: the child link gets `tabIndex={-1}` and a click handler that cancels navigation, so Tab skips it and Enter does not follow it.
+
+- [#2911](https://github.com/softistx/nxgt-material/pull/2911) [`e9380fb`](https://github.com/softistx/nxgt-material/commit/e9380fbbae55214eb4fe66f7f9c3130351a89597) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `QuantityField` no longer draws its unit chip when there is no unit to pick (no `units` and no `allowCustomUnit`), so a plain count keeps the quantity semantics without a dead "Unit" control. Stepping, `min`/`max`, the `{ value, unit }` value, the `name.unit` form entry and the keypad binding are unchanged.
+
+- [#2902](https://github.com/softistx/nxgt-material/pull/2902) [`92a4b0d`](https://github.com/softistx/nxgt-material/commit/92a4b0d8b2f72ceecf351dff7b7164a3ff2761dd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - A virtual `DataTable` with `maxHeight` or `maxHeightClassName` no longer shows a blank band of about 8 px under its sticky header that cut off the first visible row; the header sits flush on the rows ([#2894](https://github.com/softistx/nxgt-material/issues/2894)).
+
 ## 3.103.0
 
 ### Minor Changes

package/README.md

@@ -199,7 +199,7 @@ reads `duotone.svg`, the file that exists (it used to ask for the missing
 | --- | --- |
 | `@nxgt/material` | Everything below in one barrel, plus the compiled `style` condition (`dist/material.css`, for apps without Tailwind) |
 | `@nxgt/material/components` | UI components, `*FormField` wrappers, `useCodeResolver`, `useFastForm`, `useFocusOnRefusal` and `useServerFieldErrors` ([Components](#components)) |
-| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
+| `@nxgt/material/print` | PDF documents over `@react-pdf/renderer`: the `PrintDocument` page shell, the print blocks, `PrintDrawing` and the `drawing(scene)` node (a vector drawing from `@nxgt/material-core/draw` printed as vectors), and `PrintDataTable`, `PrintKeyValue` and `PrintMetric` from column definitions and plain rows; documents as plain data (`pdfDocument` and its builders, with `outline` and `conformance`); `registerPdfFont` (with the `PdfFontFaces` type) to embed a font, and the `PdfConformance` type for the PDF/A marker; a `numeric` column and `tabularNums` for figures that line up; `downloadPdf`, `openPdf`, `usePdfFile` and `pdfResponse` to get the file in one call; `toCsv` and `csvResponse` for a CSV export (RFC 4180, optional BOM and `;` separator) — **its own entry, and not in the barrel above** ([printing guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/printing.md)) |
 | `@nxgt/material/pdf-reader` | `PdfReader`, the redesigned PDF reader (header, floating page pill, rail and panel; `embedded`, `dialog`, `page` and `fullscreen` modes; single page and two-page layouts; `look="expressive"` by default, `"classic"` to opt out, type `PdfReaderLook`) and `configurePdfReader` for pdf.js's worker and assets. **Its own entry, browser-only** (pdf.js loads on first render); also exported as `PdfReader` from `/components` since 3.0 ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md); needs Chrome 125, Safari 18 or a Firefox ESR: [browser support](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/pdf-reader.md#browser-support)) |
 | `@nxgt/material/charts` | Native SVG charts (d3-scale and d3-shape for the maths only) with keyboard point navigation, a screen-reader summary, a "View data" table and `patterns`: `LineChart` and `AreaChart` (`LineChartProps`, `AreaChartProps`, `ChartCurve`), `BarChart` (`BarChartProps`, `BarLayout`, `BarOrientation`), `PieChart` (`PieChartProps`), `DonutChart` (`DonutChartProps`), `Gauge` (`GaugeProps`, `GaugeSize`), `RadialBarChart` (`RadialBarChartProps`), `FunnelChart` (`FunnelChartProps`), `HeatmapChart` (`HeatmapChartProps`, `HeatColumn`), `RadarChart` (`RadarChartProps`), `ScatterChart` (`ScatterChartProps`, `ScatterSeries`, `ScatterPoint`), `ComboChart` (`ComboChartProps`, `ComboSeries`: bars, areas and lines, each on a left or a right axis), `zoom` (a mini overview with a window and two slider handles that picks the rows shown; `range`, `defaultRange`, `onRangeChange`) and `scroll` (a dense plot scrolls sideways on a phone, the value axis pinned) on the line, area, bar and combo charts (`ChartRangeProps`, `ChartZoomOptions`, `ChartScrollOptions`, `ChartRange`), `bands` (shaded ranges), `thresholds` (labelled lines) and `pointTone` (a ringed point with its word, `toneLabels`) on the line and area charts, read against the value axis and carried into the tooltip, the summary and the "View data" table (`ChartBand`, `ChartThreshold`), `onPointClick` on every chart but `Gauge`, `palette` (`'soft'`: the soft palette, or `data-chart-palette="soft"` on an ancestor; `ChartPalette`) on every chart, and the shared types (`ChartSlice`, `ChartRow`, `ChartValue`, `ChartColor`, `ChartShape`, `ChartSeries`, `ChartAxis`, `ChartXAxis`, `ChartPoint`, `ChartBaseProps`). `categoryLabel` names the "View data" table's category column: on Line, Area, Bar and Combo it defaults to the x axis label, on Radar and Heatmap it is always "Category" unless set. **Its own entry, client-only** (import it from a `'use client'` file), not in the barrel above; replaces the Nivo charts (removed in 3.0) of `/components` ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/charts.md)) |
 | `@nxgt/material/barcode` | `Barcode` (Code 128 and Data Matrix as accessible SVG that follows the theme and dark mode, black on white in print; no runtime dependency) and `LabelSheet` / `Label` (label size, columns, rows, gaps and a start offset for a printed sheet of labels), plus `barcodeGeometry` and `BarcodeError` — **its own entry** ([barcode guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/barcode.md)) |
@@ -639,7 +639,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-accordion.webp" width="120" alt="Accordion"> | [`Accordion`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#accordion), `AccordionItem`, `AccordionTrigger`, `AccordionContent` | Collapsible sections whose content springs open, in three looks (`flush`, `separated` cards, `contained` list) and three sizes. | `Accordion` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-collapsible.webp" width="120" alt="Collapsible"> | [`Collapsible`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#collapsible), `CollapsibleTrigger`, `CollapsibleContent` | A single show / hide region that springs open, and its trigger (optionally styled: `tonal` or `text`). | `Collapsible` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-collapsible.webp" width="120" alt="Collapsible"> | [`Collapsible`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#collapsible), `CollapsibleTrigger`, `CollapsibleContent` | A single show / hide region that springs open, and its trigger (optionally styled: `tonal` or `text`, and `flush` to line a `text` trigger up with a heading). | `Collapsible` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-card.webp" width="120" alt="Card"> | [`Card`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#card), `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | Card surface with header, action slot, content and footer. | `Card` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-typography.webp" width="120" alt="Typography"> | [`Typography`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#typography) | Text in the Material 3 type scale: display, headline, title, body and label in three sizes, `emphasized` for the heavier weight; the former names are deprecated aliases. | `Typography` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-anchorheading.webp" width="120" alt="AnchorHeading"> | [`AnchorHeading`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#anchorheading) | Heading with a hover copy-link (always visible on the phone). | `AnchorHeading` |
@@ -654,7 +654,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-separator.webp" width="120" alt="Separator"> | [`Separator`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#separator) | Horizontal or vertical divider. | `Separator` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-scrollarea.webp" width="120" alt="ScrollArea"> | [`ScrollArea`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#scrollarea), `ScrollBar` | Scroll container with a thin custom scrollbar that matches the theme. | `ScrollArea`, `ScrollBar` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-table.webp" width="120" alt="Table"> | [`Table`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#table), `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`, `TableEmpty` | Styled semantic table inside a scrollable wrapper; `TableEmpty` is the full-width "nothing here" row. | `Table` (same parts) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill. | `Tabs` (same parts) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabs.webp" width="120" alt="Tabs"> | [`Tabs`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabs), `TabsList`, `TabsTrigger`, `TabsContent` | Tabs whose triggers can take an icon, in two looks: `underline` (the default) and the `segmented` pill, which `<TabsList fullWidth>` stretches to its container in equal parts. | `Tabs` (same parts) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-tabsnav.webp" width="120" alt="TabsNav"> | [`TabsNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#tabsnav), `TabsNavLink`, `useTabParam`, `skipTabChange`, `tabIds` | Route tabs as links: a `nav` of links in the `Tabs` look, with `aria-current="page"` on the current one, the sliding indicator and the phone scroll cue; `useTabParam` keeps the tab in the URL. | no equivalent yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-segmentednav.webp" width="120" alt="SegmentedNav"> | [`SegmentedNav`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#segmentednav), `SegmentedNavItem` | Segmented links: the segmented `ToggleGroup` look as a `nav` of links, with `aria-current="page"` and the pill on the current one; it scrolls inside itself on a phone. | no equivalent yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/primitives-toggle.webp" width="120" alt="Toggle"> | [`Toggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/primitives.md#toggle) | Pressable on / off button: default or outlined, three sizes. | `Toggle` |
@@ -685,6 +685,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards; `titleLink` makes the title a link and `footer` adds a row of secondary links. | `ActionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-producttile.webp" width="120" alt="ProductTile"> | [`ProductTile`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#producttile) | Large tap tile for a till or kiosk catalogue: a picture or a toned shape with an icon, the name, a prominent tabular price and a stock `status` on its own line, on a hairline card with a tinted 4:3 well; `selected` (tint and start bar), `disabled`, an even height in a `ResponsiveGrid`. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-themetoggle.webp" width="120" alt="ThemeToggle"> | [`ThemeToggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#themetoggle) | Light / dark / system switch that stores and applies the choice. | `ThemeToggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-languageswitcher.webp" width="120" alt="LanguageSwitcher"> | [`LanguageSwitcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#languageswitcher) | Globe button with a menu of the `I18nProvider` languages. | `LanguageSwitcher` |
 
@@ -704,6 +705,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-numberfield.webp" width="120" alt="NumberField"> | [`NumberField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#numberfield) · `NumberFormField` | Emits `number \| null`, with min / max / step clamping, +/− buttons and a suffix; `variant="score"` (with `tone`, `locked`, `lockedReason`) is a big value out of its max. | `NumberField`, `NumberFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-percentfield.webp" width="120" alt="PercentField"> | [`PercentField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#percentfield) · `PercentFormField` | `NumberField` with a `%` suffix. | `PercentField`, `PercentFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-quantityfield.webp" width="120" alt="QuantityField"> | [`QuantityField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#quantityfield) · `QuantityFormField` | One labelled field holding an amount and its unit: one box with a unit chip that opens a menu (or a typed unit), with one error message. | not yet |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-quantitystepper.webp" width="120" alt="QuantityStepper"> | [`QuantityStepper`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#quantitystepper) | Inline −/value/+ control for a cart or ticket line, no label or box: a named group with a spinbutton (arrow keys, optional typed value), 44px buttons on touch, and a trash button at `min` with `onRemove`. | not yet |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-currencyfield.webp" width="120" alt="CurrencyField"> | [`CurrencyField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#currencyfield) · `CurrencyFormField` | Amount formatted to the locale on blur, with the currency's own decimals and a currency suffix (EUR by default); `minorUnits` reads and emits whole cents. | `CurrencyField`, `CurrencyFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-phonefield.webp" width="120" alt="PhoneField"> | [`PhoneField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#phonefield) · `PhoneFormField` | International number with a country picker (the code a 32px pill in a 44px field box, its list connected); emits E.164; `PhoneFormField` refuses a half-typed number (`onValidityChange`, `isIncompletePhone`). | `PhoneField`, `PhoneFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-urlfield.webp" width="120" alt="UrlField"> | [`UrlField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#urlfield) · `UrlFormField` | Validates on blur; open-in-new-tab and copy buttons. | `UrlField`, `UrlFormField` |

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

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

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

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-BVs4n0Fz.js";
+import { l as e, r as t, s as n, u as r } from "./translator-Cgql9srO.js";
 import { t as i } from "./_baseIsEqual-C6ksIHya.js";
 import { useMemo as a } from "react";
 import { asyncThunkCreator as o, buildCreateSlice as s } from "@reduxjs/toolkit";

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

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { n as r, t as i } from "./spinner-Cg0y_E_K.js";
+import { n as r, t as i } from "./spinner-CEVomQ5K.js";
 import { t as a } from "./dist-DkQbkF9T.js";
 import { a as o, i as s, n as c, o as l, s as u, t as d } from "./use-click-lock-Bwg_caHO.js";
 import { t as f } from "./is-production-GLw59WU8.js";

package/dist/{calculator-BGy1Q7rn.js → calculator-BmYZId4c.js}

@@ -1,16 +1,16 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { d as t, n, r, t as i } from "./tabs-DpessV5s.js";
-import { t as a } from "./button-Be7GZzF9.js";
-import { t as o } from "./use-material-translation-uNc1FyC8.js";
-import { t as s } from "./icon-button-BIAubLeJ.js";
+import { d as t, n, r, t as i } from "./tabs-B8MXBbPW.js";
+import { t as a } from "./button-YfEMZbRO.js";
+import { t as o } from "./use-material-translation-xNzbSVgS.js";
+import { t as s } from "./icon-button-CpKxV264.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { n as l } from "./use-slice-reducer-BGkeGtML.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { n as f, t as p } from "./calculator-context-BugcKuVG.js";
 import { a as m, c as h, i as g, l as _, n as v, o as y, r as b, s as ee } from "./calculator-announce-DRd2c6Dq.js";
-import { i as x, t as te } from "./pos-types-BEAY27Rm.js";
-import { n as ne, t as re } from "./use-calculator-keyboard-BZ1CA4Ut.js";
+import { i as x, t as te } from "./pos-types-Cpdc4E33.js";
+import { n as ne, t as re } from "./use-calculator-keyboard-DysnFK8m.js";
 import { i as ie, n as ae } from "./key-layout-D2goCDkD.js";
 import { t as oe } from "./standard-layout-DTr9yy8Z.js";
 import { n as S, r as se, t as C } from "./programmer-word-CNCF7DJF.js";
@@ -118,11 +118,11 @@ function Ee({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var De = {
-	scientific: () => import("./scientific-variant-BzF_aMQP.js"),
-	pos: () => import("./pos-variant-ClGI92Lt.js"),
-	programmer: () => import("./programmer-variant-Boq2O8hB.js"),
-	financial: () => import("./financial-variant-BY_VCUuk.js"),
-	conversion: () => import("./conversion-variant-clFZ6ZMJ.js")
+	scientific: () => import("./scientific-variant-31_93gcZ.js"),
+	pos: () => import("./pos-variant-ClMGu59I.js"),
+	programmer: () => import("./programmer-variant-ChzgyA7x.js"),
+	financial: () => import("./financial-variant-Ws0Jp01H.js"),
+	conversion: () => import("./conversion-variant-C-LPx5ek.js")
 }, B = "failed", V = /* @__PURE__ */ new Map(), H = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Set(), W = () => {
 	for (let e of U) e();
 };

package/dist/calculator-field.js

@@ -1,11 +1,11 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { t } from "./button-Be7GZzF9.js";
-import { t as n } from "./use-material-translation-uNc1FyC8.js";
-import { t as r } from "./icon-button-BIAubLeJ.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-XmA--JVI.js";
-import { r as l, t as u } from "./currency-field-CBFEVNM1.js";
+import { t } from "./button-YfEMZbRO.js";
+import { t as n } from "./use-material-translation-xNzbSVgS.js";
+import { t as r } from "./icon-button-CpKxV264.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface--6E-nvpU.js";
+import { r as l, t as u } from "./currency-field-DnsRIA80.js";
 import { r as d, t as f } from "./field-blur-DMJwPLsg.js";
-import { t as p } from "./calculator-BGy1Q7rn.js";
+import { t as p } from "./calculator-BmYZId4c.js";
 import { useId as m, useState as h } from "react";
 import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
 import { Calculator as y } from "lucide-react";

package/dist/{calculator-segment-uixk6lBg.js → calculator-segment-DJ08DJ-n.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-uNc1FyC8.js";
+import { t as e } from "./use-material-translation-xNzbSVgS.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region lib/components/ui/widgets/calculator/partials/calculator-segment.tsx
 function n({ label: n, choices: r, value: i, nameKey: a, onChange: o }) {

package/dist/calculator.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./calculator-BGy1Q7rn.js";
+import { n as e, t } from "./calculator-BmYZId4c.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };