@nxgt/material 3.94.0 → 3.95.1

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @nxgt/material
 
+## 3.95.1
+
+### Patch Changes
+
+- [#2762](https://github.com/softistx/nxgt-material/pull/2762) [`061477e`](https://github.com/softistx/nxgt-material/commit/061477e2c8f111b4debf726aa4cfb46a4d6666de) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix: the input of a `TextField` with a text `leading` or `trailing` unit is at least 44px wide on a touch screen (the unit still follows the value), so tap-target checks that measure the input itself pass.
+
+- [#2760](https://github.com/softistx/nxgt-material/pull/2760) [`eec0cad`](https://github.com/softistx/nxgt-material/commit/eec0cad48fd726208bd89a07aef6356afbb99f50) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix: a `TextField` with a text `leading` or `trailing` unit (3.95.0) hands the caller's `ref` to its input again (react-hook-form's `setFocus` and `ref.current.focus()` work), and a tap anywhere in the field box, not only on the content-sized input, focuses the input, so the tap target on a phone is the whole 44px box.
+
+## 3.95.0
+
+### Minor Changes
+
+- [#2754](https://github.com/softistx/nxgt-material/pull/2754) [`6012a70`](https://github.com/softistx/nxgt-material/commit/6012a70a19962c5d01022b2d4f709dfe2135dc06) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Theme: add `--success-text` and `--warning-text` (`text-success-text`, `text-warning-text`), the success and warning colours drawn as text. Like `--error-text`, the theme generator solves them for every theme and preset so they keep 4.5:1 or more on `--background` and `--card` in light and dark, and the shipped preset stylesheets carry them. Regenerate a custom theme's stylesheet (`nxgt-theme` or the Vite plugin) to get them. [#2645](https://github.com/softistx/nxgt-material/issues/2645)
+  
+  Fields: the field box (Input, Textarea, InputGroup, Select, Combobox, Autocomplete, TreeSelect, NativeSelect, PhoneField, the sheet and typed boxes) is drawn in the Refined look. The surface is the card, the rest border keeps 3:1 against it, hover firms the border, focus is a 1px primary border with a 4px ring (it replaces the 3px halo), an error is an error-text border with a 1px line inside, read-only is dashed and disabled is recessed. A filled field no longer takes the primary tint: `data-filled` stays, and the `--nxgt-field-bg-filled` tokens alias the rest ones (a read resolves; an override no longer paints, so style on `data-filled`). **A checked Switch row and a filled UploadField lose their primary tint too:** the row carries `data-checked` / `data-filled`, and the checked state is the track, the thumb and the primary label. Every `--nxgt-field-*` token keeps its name; `--nxgt-field-bg-disabled`, `--nxgt-field-border-readonly`, `--nxgt-field-border-disabled` and `--nxgt-field-error` are new. Forced colours are unchanged.
+  
+  TextField: the icon or action in `leading` / `trailing` is muted with no well fill, and a text unit ("/ 20", a currency code) sits inline at the end of the box in muted text instead of a filled well. CurrencyField's trailing code and action follow.
+  
+  Fields with their own box (the OTP slots, the verification code slots and recovery input, the inline edit display, the Switcher search, the ColorField swatch) take the field box tokens: `--nxgt-field-border` at rest, `--nxgt-field-border-hover` on hover, and the 1px `--nxgt-field-focus` border with the 4px `--nxgt-field-halo` ring on focus (an error takes `--nxgt-field-error` and `--nxgt-field-halo-invalid`). The verification code slots sit on the card fill instead of the tint. No API change. [#2650](https://github.com/softistx/nxgt-material/issues/2650)
+  
+  NumberField: the box is one InputGroup (`role="group"`). The value is end-aligned in tabular figures, the suffix hugs it, and the "Decrease" and "Increase" buttons are the tinted round pair DurationField uses, together at the end of the box with no dividers (32px circles, a 44px target on a coarse pointer, their names kept; the two fields share one stylesheet, `field-stepper.css`). The steppers are ghost buttons in the box, no longer outlined buttons around it, so **the tab order is now the input, Decrease, Increase** (it was Decrease, input, Increase) and the number box is a `group` for assistive technology (groups now nest: a test that queries an unnamed `getByRole('group')` also matches number boxes, so name the one it means). With a CalculatorField the order is input, Open calculator, Decrease, Increase. The value input no longer carries `text-center` (it is `text-end`) and keeps room for about 7 digits. PercentField, QuantityField's number (through NumberControl; its number cell is 10.5rem wide so the whole value shows at 320px), CalculatorField, the Slider's readout, the Filter's number editors, the Attributes default inputs, the calculator's financial parts and DurationField's `fields` variant follow, as they all render NumberField. [#2648](https://github.com/softistx/nxgt-material/issues/2648)
+  
+  DateField, DateRangeField, TimeField and DurationField: the typed box takes the field box's Refined focus instead of its own 2px inset boundary: the 1px primary border with the 4px ring while a segment (or, for DurationField, a button) has focus or the picker is open, the error border with the error ring when invalid, a dashed hairline when read-only and the recessed surface when disabled. The segment chips, the open button and the forced-colours and reduced-motion behaviour are unchanged. [#2649](https://github.com/softistx/nxgt-material/issues/2649)
+  
+  QuantityField: the value, the unit and the −/+ pair are drawn in ONE field box. The value sits at the start in tabular figures, the unit is a soft chip (the steppers' tint, a ⇅ icon, capped at 52% of the box, a long label truncates with its `title`) before the round pair, and the box shows one focus ring whether the value or the unit has focus. The unit menu opens end-aligned under the chip: a listbox of `units` with the chosen one checked, or with `allowCustomUnit` a "Search or type a unit" input and a "Use “x”" item (it replaces the typed unit input and its datalist). **The unit no longer carries `required` or `aria-invalid`: a required unit is now the schema's job, not the field's.** Props, the `{ value, unit }` value, `unitLabel`, `unitPlaceholder`, the `<name>.unit` form input and QuantityFormField are unchanged. **The unit part is no longer a `combobox` (nor a text input with `allowCustomUnit`): it is a button named "Unit: mg" that opens a menu** (`unitLabel` or "<label> unit" now names the listbox, and the chip when no unit is chosen); tests that queried the unit by `combobox` role query the button. The tab order is value, unit, Decrease, Increase. New keys `material.quantity-field.unit-chip`, `.search` and `.use-typed` (en, fr). AgeField follows (its unit chip reads "Age unit: months"). [#2689](https://github.com/softistx/nxgt-material/issues/2689)
+  
+  NumberField: new `variant?: 'default' | 'score'`, `tone?`, `locked?` and `lockedReason?`. A `score` is a big tabular value with its maximum (`suffix`, "/ 20") hugging it on the baseline: no box at rest (a quiet band, 6% of the tone), a 1px frame on hover, the field focus ring on focus, no steppers. The tone is the caller's and is text colour plus an `aria-hidden` shape marker, never colour alone (success a circle, warning a triangle, error a diamond, any other tone a square); an `error` draws the error tone with a border. `locked` is read-only with a muted value, a dashed frame and a lock, and `lockedReason` is shown under the value and added to `aria-describedby`. The default variant is unchanged. Styles ship in `number-field-score.css`. React only. [#2651](https://github.com/softistx/nxgt-material/issues/2651)
+
+- [#2750](https://github.com/softistx/nxgt-material/pull/2750) [`10fc8c5`](https://github.com/softistx/nxgt-material/commit/10fc8c50461e1bf578d2767f3e5b3a48a5b8d922) Thanks [@SteveGT96](https://github.com/SteveGT96)! - feat(app-shell): `MenuItem.defaultExpanded` makes an entry's `children` foldable in the expanded sidebar, from a chevron button after the entry: `true` opens them at first, `false` folds them. Unset, they stay always listed. The phone's menu sheet and the other presets ignore it ([#2746](https://github.com/softistx/nxgt-material/issues/2746)). New keys `material.navigation.group-collapse` and `group-expand`.
+
+### Patch Changes
+
+- [#2753](https://github.com/softistx/nxgt-material/pull/2753) [`d8b2e5b`](https://github.com/softistx/nxgt-material/commit/d8b2e5bc9970d3cf72b54ae50f475175fd928900) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(navigation): `NavigationBar` and `NavigationToolbar` mark the entry a child page belongs to as current, even when the child's url is not under the entry's url.
+
+- [#2754](https://github.com/softistx/nxgt-material/pull/2754) [`6012a70`](https://github.com/softistx/nxgt-material/commit/6012a70a19962c5d01022b2d4f709dfe2135dc06) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Docs: new `Guides/Recipes/Entry sheet` story — one row per person with a mark out of a total, a comment behind a toggle, locked rows, one sticky Save, per-row refusals and a stale-row notice — with its code in the plugin's `screen-recipes` skill.
+
+- [#2754](https://github.com/softistx/nxgt-material/pull/2754) [`6012a70`](https://github.com/softistx/nxgt-material/commit/6012a70a19962c5d01022b2d4f709dfe2135dc06) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Fix: `MarkdownTextareaFormField` marks the field touched when focus leaves the whole field, not when it moves from the textarea to the Write or Preview tab.
+
+- [#2748](https://github.com/softistx/nxgt-material/pull/2748) [`2b5e1ab`](https://github.com/softistx/nxgt-material/commit/2b5e1ab0fb06370d560202d59eb302882707eaa0) Thanks [@SteveGT96](https://github.com/SteveGT96)! - fix(app-shell): the collapsed `AppSidebar` marks the entry a child page belongs to as current, even when the child's url is not under the entry's url.
+- Updated dependencies [[`6012a70`](https://github.com/softistx/nxgt-material/commit/6012a70a19962c5d01022b2d4f709dfe2135dc06)]:
+  - @nxgt/material-core@0.55.0
+
 ## 3.94.0
 
 ### Minor Changes

package/README.md

@@ -122,6 +122,9 @@ missing and the UI renders unstyled.
 Every field shares one radius, `--nxgt-field-radius`; set it once to change
 them all, and give a field of your own the same corners with `rounded-field`
 ([Theming, the field box](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#the-field-box)).
+The fields are drawn in the Refined look: the card surface, a border that keeps 3:1
+against it, a 1px primary border with a 4px ring on focus, and no tint once filled
+([The Refined field look](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/field-look-refined.md)).
 
 `styles.css` also ships `.nxgt-touch-target`, which gives a small control of
 your own 44px of hit area on a coarse pointer ([Theming, touch targets](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/theming.md#touch-targets)).
@@ -568,6 +571,7 @@ Each area a consumer starts from has its own page under `docs/guides/`.
 | [SSR](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/ssr.md) | rendering on a server: what the barrels guarantee, and `import()` + `clientOnly` (React's `use(browser())`) for browser-only code |
 | [Content Security Policy](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/csp.md) | serving a strict CSP: the directives, `NonceProvider` and the per-request nonce, the components that still inject a `<style>`, the zod and KaTeX settings, a self-hosted font |
 | [The Vite plugin](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/vite-plugin.md) | adding `nxgtMaterial()` to `vite.config.ts`: the CSP by hash or nonce, self-hosted fonts, a build that checks the stylesheet, and each option's opt-out |
+| [The Refined field look](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/field-look-refined.md) | the fields' current look (card surface, 3:1 border, 4px focus ring, no filled tint), what moved for tests (`NumberField` tab order, `QuantityField` unit button) and the tokens to tune it or bring a detail back |
 | [The field look (2.x)](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/field-look-2-x.md) | what changed in the fields' look during 2.x (corners, surface, hover, focus halo, error, read-only; the `Select`, `Combobox`, `Autocomplete` and `TreeSelectField` triggers and their connected lists, the 44px `NativeSelect`, the country, time-zone and phone fields, `SearchField`, the date and time fields' boxes and triggers, and the lists' headers, descriptions and empty state) and how to get the earlier look back |
 | [Moving to TopAppBar](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/migrating-to-top-app-bar.md) | your app uses `AppHeader`, `TopAppBar`'s `variant` / `headline`, the shell's `'center'` / `'medium'` / `'large'` header values or the `app-header*` slots: each old spelling, its replacement, the visual changes (heights, flat bar) and the slot rename planned for the next major |
 | [Migrating to 3.0](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/migrating-to-3.md) | upgrading from 2.x: the React 19.3 and React Router 8.5 peers, `ActivityLayout`'s default route transition (`routeTransition`), and each API removed in 3.0 with what replaces it, as search → replace pairs |
@@ -670,9 +674,9 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-markdowntextareafield.webp" width="120" alt="MarkdownTextareaField"> | [`MarkdownTextareaField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#markdowntextareafield) · `MarkdownTextareaFormField` | Textarea for Markdown and math with a Write / Preview tab list. | not yet (#2719) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-emailfield.webp" width="120" alt="EmailField"> | [`EmailField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#emailfield) · `EmailFormField` | Validates on blur; shows a `mailto:` button once the address is valid. | `EmailField`, `EmailFormField` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/form-fields-passwordfield.webp" width="120" alt="PasswordField"> | [`PasswordField`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/form-fields.md#passwordfield) · `PasswordFormField` | Show / hide toggle and an optional strength meter (`scorePassword`). | `PasswordField`, `PasswordFormField` |
-| <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. | `NumberField`, `NumberFormField` |
+| <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: a `NumberField` and a unit picker (or a typed unit) in one group, with one error message. | not yet |
+| <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-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). | `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-BaqK-rmd.js → alert-dialog-D4r0Kn9h.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-S7g7q_Yn.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-BC4sGh1b.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-BfNpIJAH.js → async-slice-Bx438UlG.js}

@@ -1,4 +1,4 @@
-import { l as e, r as t, s as n, u as r } from "./translator-VtzVrnLm.js";
+import { l as e, r as t, s as n, u as r } from "./translator-gdpQeToI.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-CozGHXAv.js → button-Z_xcg10A.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-D7ol2n_-.js";
+import { n as r, t as i } from "./spinner-rk8J5y9O.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-BIx6cwgU.js → calculator-BfIBMiFX.js}

@@ -1,8 +1,8 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { d as t, n, r, t as i } from "./tabs-DyiFTy5g.js";
-import { t as a } from "./button-CozGHXAv.js";
-import { t as o } from "./use-material-translation-Cx5u36V5.js";
-import { t as s } from "./icon-button-B9WjQ3RO.js";
+import { d as t, n, r, t as i } from "./tabs-nuYLggwC.js";
+import { t as a } from "./button-Z_xcg10A.js";
+import { t as o } from "./use-material-translation-BW5HZMwt.js";
+import { t as s } from "./icon-button-BG438okX.js";
 import { t as c } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as l } from "./useEvent-2fKq-6w8.js";
 import { t as u } from "./useLatest-C2PnQEeD.js";
@@ -11,7 +11,7 @@ import { t as f } from "./skeleton-DSdtr2qc.js";
 import { t as p } from "./live-status-BGPaN8r8.js";
 import { n as m, t as h } from "./calculator-context-BugcKuVG.js";
 import { a as g, c as _, i as v, l as y, n as b, o as ee, r as te, s as ne } from "./calculator-announce-DRd2c6Dq.js";
-import { i as re, t as ie } from "./pos-types-BIeZGGAs.js";
+import { i as re, t as ie } from "./pos-types-BFVWeJki.js";
 import { a as ae, r as oe } from "./key-layout-cR79xfGE.js";
 import { n as x, r as se, t as ce } from "./programmer-word-CNCF7DJF.js";
 import { t as le } from "./standard-layout-BuSRr3TY.js";
@@ -279,11 +279,11 @@ function Le({ helpId: e }) {
 //#endregion
 //#region lib/components/ui/widgets/calculator/variants/variant-loader.ts
 var Re = {
-	scientific: () => import("./scientific-variant-CXL1ayb7.js"),
-	pos: () => import("./pos-variant-Cdn1AVoA.js"),
-	programmer: () => import("./programmer-variant-CMBybkqw.js"),
-	financial: () => import("./financial-variant-Bqo9-swy.js"),
-	conversion: () => import("./conversion-variant-aIBhul_U.js")
+	scientific: () => import("./scientific-variant-BP08Mo0g.js"),
+	pos: () => import("./pos-variant-DWB8Bc12.js"),
+	programmer: () => import("./programmer-variant-B-wPnDeX.js"),
+	financial: () => import("./financial-variant-CTXTLbE_.js"),
+	conversion: () => import("./conversion-variant-Ciii9Rbh.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-CozGHXAv.js";
-import { t as n } from "./use-material-translation-Cx5u36V5.js";
-import { t as r } from "./icon-button-B9WjQ3RO.js";
-import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-D2aYI4v7.js";
-import { r as l, t as u } from "./currency-field-IcEMAcAw.js";
+import { t } from "./button-Z_xcg10A.js";
+import { t as n } from "./use-material-translation-BW5HZMwt.js";
+import { t as r } from "./icon-button-BG438okX.js";
+import { a as i, i as a, n as o, r as s, t as c } from "./picker-surface-Cr2n42qv.js";
+import { r as l, t as u } from "./currency-field-DipsI0Bv.js";
 import { r as d, t as f } from "./field-blur-DkiZOVNV.js";
-import { t as p } from "./calculator-BIx6cwgU.js";
+import { t as p } from "./calculator-BfIBMiFX.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-BsaxUtzL.js → calculator-segment-DQE1EFdw.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./use-material-translation-Cx5u36V5.js";
+import { t as e } from "./use-material-translation-BW5HZMwt.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-BIx6cwgU.js";
+import { n as e, t } from "./calculator-BfIBMiFX.js";
 export { e as CALCULATOR_VARIANTS, t as Calculator };

package/dist/charts.js

@@ -1,12 +1,12 @@
 import { t as e } from "./ui.utils-CAnKTCw5.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./warn-once-C_e47JM8.js";
-import { t as r } from "./button-CozGHXAv.js";
-import { t as i } from "./use-material-translation-Cx5u36V5.js";
+import { t as r } from "./button-Z_xcg10A.js";
+import { t as i } from "./use-material-translation-BW5HZMwt.js";
 import { t as a } from "./use-ssr-media-query-C6M5m8sf.js";
 import { i as o, n as s, r as c, t as l } from "./util-4heV2LPI.js";
 import { t as u } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
-import { t as d } from "./chip-DMEUGYdC.js";
+import { t as d } from "./chip-Bb9SM3Ly.js";
 import { c as f, d as p, f as m, i as h, o as g, p as _, s as v, t as y } from "./line-path-C5pZGC49.js";
 import { t as b } from "./live-status-BGPaN8r8.js";
 import { t as x } from "./linear-G97mfnKF.js";

package/dist/{chip-DMEUGYdC.js → chip-Bb9SM3Ly.js}

@@ -1,7 +1,7 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t } from "./spinner-D7ol2n_-.js";
+import { n as t } from "./spinner-rk8J5y9O.js";
 import { s as n } from "./use-click-lock-Bwg_caHO.js";
-import { t as r } from "./use-material-translation-Cx5u36V5.js";
+import { t as r } from "./use-material-translation-BW5HZMwt.js";
 import { t as i } from "./react-node-text-Crkpfpco.js";
 import { cloneElement as a, isValidElement as o } from "react";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";

package/dist/{code-editor-BWfky-aN.js → code-editor-Cw-dOrn2.js}

@@ -1,12 +1,12 @@
 import { r as e } from "./rolldown-runtime-BFFgcFxR.js";
 import { t } from "./utils-BLfntITJ.js";
 import { t as n } from "./dist-DWZXlCZR.js";
-import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-CawkIlW8.js";
+import { c as r, d as i, f as a, n as o, t as s } from "./dropdown-menu-BvtBDoSD.js";
 import { a as c, i as l, n as u } from "./field-blur-context-BLGgf_3z.js";
-import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-BpOEBsSt.js";
+import { a as d, o as f, r as p, s as m, t as h } from "./toolbar-items-Bo-nMzKJ.js";
 import { t as g } from "./is-production-GLw59WU8.js";
-import { t as _ } from "./use-material-translation-Cx5u36V5.js";
-import { i as v, n as y, o as b, t as x } from "./code-language-items-BUaNYJuw.js";
+import { t as _ } from "./use-material-translation-BW5HZMwt.js";
+import { i as v, n as y, o as b, t as x } from "./code-language-items-BVfxGKiv.js";
 import { t as S } from "./useIsomorphicLayoutEffect-DfgAhWcH.js";
 import { n as C, t as w } from "./escape-owner-DpaP0lm1.js";
 import { t as T } from "./skeleton-DSdtr2qc.js";

package/dist/code-editor.js

@@ -1,13 +1,13 @@
 import { t as e } from "./utils-BLfntITJ.js";
 import { t } from "./dist-DWZXlCZR.js";
-import { o as n, r, s as i, t as a } from "./toolbar-items-BpOEBsSt.js";
-import { t as o } from "./use-material-translation-Cx5u36V5.js";
-import { i as s, n as c, o as l } from "./code-language-items-BUaNYJuw.js";
+import { o as n, r, s as i, t as a } from "./toolbar-items-Bo-nMzKJ.js";
+import { t as o } from "./use-material-translation-BW5HZMwt.js";
+import { i as s, n as c, o as l } from "./code-language-items-BVfxGKiv.js";
 import { t as u } from "./skeleton-DSdtr2qc.js";
 import { t as d } from "./live-status-BGPaN8r8.js";
 import { t as f } from "./use-mobile-BDro060N.js";
 import { t as p } from "./react-node-text-Crkpfpco.js";
-import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-BWfky-aN.js";
+import { a as m, c as h, d as g, f as _, i as v, l as y, m as b, o as x, p as S, r as C, s as w, t as T, u as E } from "./code-editor-Cw-dOrn2.js";
 import { r as D, t as O } from "./field-blur-DkiZOVNV.js";
 import { useEffect as k, useRef as A, useState as j } from "react";
 import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";

package/dist/{code-language-items-BUaNYJuw.js → code-language-items-BVfxGKiv.js}

@@ -1,5 +1,5 @@
-import { d as e, f as t } from "./dropdown-menu-CawkIlW8.js";
-import { t as n } from "./use-material-translation-Cx5u36V5.js";
+import { d as e, f as t } from "./dropdown-menu-BvtBDoSD.js";
+import { t as n } from "./use-material-translation-BW5HZMwt.js";
 import { t as r } from "./copy-to-clipboard-Be5Ffvs_.js";
 import { t as i } from "./live-status-BGPaN8r8.js";
 import { useEffect as a, useRef as o, useState as s } from "react";

package/dist/components/components.css

@@ -197,7 +197,13 @@
 @import "./ui/primitives/segmented-input/segmented-input-expressive.css";
 @import "./ui/dates/picker-trigger/typed-box-expressive.css";
 @import "./ui/dates/picker-popover/picker-surface-expressive.css";
-/* DurationField's one-line field: units and the −/+ pair. */
+/* The −/+ pair shared by DurationField and NumberField. */
+@import "./ui/primitives/field-box/field-stepper.css";
+/* QuantityField: the unit chip inside its one box. */
+@import "./ui/fields/quantity-field/quantity-field.css";
+/* NumberField `variant="score"`. */
+@import "./ui/fields/number-field/number-field-score.css";
+/* DurationField's one-line field: units. */
 @import "./ui/dates/duration-field/duration-field-expressive.css";
 @import "./ui/feedback/toast/toast.css";
 @import "./ui/feedback/toast/toast-expressive.css";

package/dist/components/theme-tokens.css

@@ -66,12 +66,16 @@
 	   text (4.5:1) on them, and for the same colours used as text on white. */
 	--success: oklch(0.46 0.118 184.704);
 	--success-foreground: oklch(0.984 0.003 247.858);
+	/* Success and warning drawn as text on --background and --card (a field's
+	   valid or caution message), like --error-text: 92 % of the colour toward black. */
+	--success-text: color-mix(in oklab, var(--success) 92%, black);
 	--info: oklch(0.48 0.165 254.624);
 	--info-foreground: oklch(0.984 0.003 247.858);
 	/* Amber, a hue apart from --error (27): a warning must not read as a
 	   failure. 5.7:1 as text on white, 5.0:1 on its 10% tint, 5.5:1 under near-white text. */
 	--warning: oklch(0.52 0.13 62);
 	--warning-foreground: oklch(0.984 0.003 247.858);
+	--warning-text: color-mix(in oklab, var(--warning) 92%, black);
 	--destructive: var(--error);
 	--border: oklch(0.912 0.016 293.7);
 	--input: oklch(0.912 0.016 293.7);
@@ -172,6 +176,8 @@
 	   7.1:1, info 5.6:1, error 9.1:1). */
 	--success: oklch(0.6 0.118 184.704);
 	--success-foreground: oklch(0.995 0.002 291.3);
+	/* Dark: lightened toward white like --error-text, 5.3:1 on --background and --card. */
+	--success-text: color-mix(in oklab, var(--success) 76%, white);
 	--info: oklch(0.707 0.165 254.624);
 	--info-foreground: oklch(0.995 0.002 291.3);
 	/* Amber too, as text: 7.2:1 on --background and 6.3:1 on --card, 6.4:1 and
@@ -179,6 +185,7 @@
 	   6.1:1 on a page and 5.6:1 on a Card. */
 	--warning: oklch(0.7 0.15 70);
 	--warning-foreground: oklch(0.995 0.002 291.3);
+	--warning-text: color-mix(in oklab, var(--warning) 76%, white);
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(0.289 0.025 291.4);
 	--input: oklch(0.328 0.027 291.4);

package/dist/components/ui/dates/duration-field/duration-field-expressive.css

@@ -2,7 +2,7 @@
  * the date fields' shared bordered box (typed-box-expressive.css) and its segments
  * (segmented-input-expressive.css): "1 h 29 min", each amount followed by
  * its muted unit, then one −/+ pair. Every focus ring is drawn inside the
- * field (an inset outline), never clipped. The box keeps its focus boundary
+ * field (an inset outline), never clipped. The box keeps its focus ring
  * while a button has focus; the segments' chip tint only shows while a
  * segment has it. A coarse pointer gets 44px buttons; the 52px box (4px
  * around them) is its utilities' (duration-segments.tsx). */
@@ -67,7 +67,7 @@
 		}
 	}
 
-	/* A button has focus: the box keeps its boundary, no segment its chip. */
+	/* A button has focus: the box keeps its ring, no segment its chip. */
 	@media not ((pointer: coarse) or (max-width: 767.98px)) {
 		.nxgt-duration-box.nxgt-field-box[data-tonal][data-focused]:not(
 				:has(.nxgt-segment:focus)
@@ -84,65 +84,4 @@
 			background: transparent;
 		}
 	}
-
-	/* The −/+ pair: round, 4px apart, a ring inside each button. */
-	.nxgt-duration-step {
-		display: grid;
-		flex: none;
-		place-items: center;
-		inline-size: var(--_dd-step);
-		block-size: var(--_dd-step);
-		border-radius: var(--nxgt-shape-corner-full);
-		background: var(--_dd-btn);
-		color: var(--primary-text);
-		cursor: pointer;
-		transition: background-color var(--nxgt-motion-effects-default-duration)
-			var(--nxgt-motion-effects-default);
-	}
-	.nxgt-duration-step + .nxgt-duration-step {
-		margin-inline-start: -0.25rem;
-	}
-	.nxgt-duration-step:hover:not(:disabled, [aria-disabled="true"]) {
-		background: var(--_dd-btn-hover);
-	}
-	.nxgt-duration-step:focus-visible {
-		outline: 2px solid var(--_fx-line, var(--nxgt-field-focus));
-		outline-offset: -2px;
-	}
-	.nxgt-duration-step:is(:disabled, [aria-disabled="true"]) {
-		cursor: not-allowed;
-	}
-	.nxgt-duration-step[aria-disabled="true"]:not(:disabled) {
-		opacity: 0.38;
-	}
-	.nxgt-duration-box[data-disabled] .nxgt-duration-step {
-		background: transparent;
-	}
-	.nxgt-duration-step svg {
-		inline-size: 1rem;
-		block-size: 1rem;
-	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.nxgt-duration-step {
-			transition: none;
-		}
-	}
-	@media (forced-colors: active) {
-		.nxgt-duration-step {
-			forced-color-adjust: none;
-			border: 1px solid ButtonBorder;
-			background: ButtonFace;
-			color: ButtonText;
-		}
-		.nxgt-duration-step[aria-disabled="true"],
-		.nxgt-duration-step:disabled {
-			border-color: GrayText;
-			color: GrayText;
-			opacity: 1;
-		}
-		.nxgt-duration-step:focus-visible {
-			outline-color: Highlight;
-		}
-	}
 }

package/dist/components/ui/dates/picker-trigger/typed-box-expressive.css

@@ -1,8 +1,9 @@
 /* The date, range and time fields' box, over the field box. The same box at
- * rest as a text field (surface, hairline border, radius, hover and filled
- * tint: the shared bordered box, #2406), with a 2px primary boundary
- * while a segment has focus or the picker is open and an error boundary when
- * invalid. The segments are in segmented-input-expressive.css.
+ * rest as a text field (surface, hairline border, radius, hover: the
+ * shared bordered box), with the shared focus ring (1px primary
+ * border, 4px ring) while a segment has focus or the picker is open, and the
+ * shared error border when invalid. The segments are in
+ * segmented-input-expressive.css.
  * `data-tonal` belongs to the date and time fields: the typed box and
  * the sheet entry box. No other field sets it. */
 @layer components {
@@ -11,35 +12,43 @@
 		--_fx-pill: var(--primary);
 		--_fx-pill-fg: var(--primary-foreground);
 		--_fx-line: var(--primary-text);
-		--_fx-err: var(--error);
 	}
 	:is(.dark, [data-theme="dark"]) .nxgt-field-box.nxgt-field-box[data-tonal] {
 		--_fx-tint: color-mix(in oklab, var(--primary) 34%, var(--background));
 		--_fx-pill: var(--primary-text);
 		--_fx-pill-fg: var(--background);
 	}
-	.nxgt-field-box.nxgt-field-box[data-tonal]:is(
-		[data-focused],
-		[data-open]:not([data-open="false"])
+	/* Focus, error, read-only and disabled are the shared field box's
+	 * (field-box.css): the 1px primary border with the 4px ring, the error
+	 * border, the dashed hairline, the recessed surface. Two cases the box
+	 * does not see itself get the same ring here: the picker open, and a
+	 * button around the box (a trigger) with keyboard focus. */
+	.nxgt-field-box.nxgt-field-box[data-tonal][data-open]:not(
+		[data-open="false"]
 	),
 	button:focus-visible > .nxgt-field-box.nxgt-field-box[data-tonal] {
-		border-color: var(--_fx-line);
-		box-shadow: inset 0 0 0 1px var(--_fx-line);
+		border-color: var(--nxgt-field-focus);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-focus),
+			0 0 0 4px var(--nxgt-field-halo);
 	}
 	.nxgt-field-box.nxgt-field-box.nxgt-field-box[data-tonal][data-invalid]:not(
 		[data-invalid="false"]
-	) {
-		border-color: var(--_fx-err);
+	):is([data-open]:not([data-open="false"])),
+	button:focus-visible
+		> .nxgt-field-box.nxgt-field-box.nxgt-field-box[data-tonal][data-invalid]:not(
+			[data-invalid="false"]
+		) {
+		border-color: var(--nxgt-field-error);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-error),
+			0 0 0 4px var(--nxgt-field-halo-invalid);
 	}
-	.nxgt-field-box.nxgt-field-box.nxgt-field-box[data-tonal][data-invalid]:not(
-		[data-invalid="false"]
-	):is([data-focused], [data-open]) {
-		box-shadow: inset 0 0 0 1px var(--_fx-err);
-	}
-	.nxgt-field-box.nxgt-field-box[data-tonal][data-disabled] {
-		border-color: var(--nxgt-field-border);
-		background-color: var(--nxgt-field-bg);
-		box-shadow: none;
+
+	@media (forced-colors: active) {
+		button:focus-visible > .nxgt-field-box.nxgt-field-box[data-tonal] {
+			outline: 2px solid Highlight;
+		}
 	}
 
 	/* The button that opens the picker: a tint circle, primary while open. */

package/dist/components/ui/fields/number-field/number-field-score.css

@@ -0,0 +1,151 @@
+/* NumberField `variant="score"`: a big tabular value with its maximum on the
+ * same baseline. No box at rest (a quiet band, 6% of the tone), a 1px frame on
+ * hover, the field focus ring on focus. A tone is text colour plus a shape
+ * marker (circle, triangle, diamond, square), never colour alone. Locked is a
+ * dashed frame with a lock; an error is the tone text with a border. The frame
+ * is one border on all sides (no start-side border on a rounded box). */
+@layer components {
+	.nxgt-score {
+		--_sc-tone: var(--nxgt-tone-text, var(--foreground));
+		--_sc-frame: transparent;
+		display: inline-flex;
+		align-items: baseline;
+		gap: 0.375rem;
+		inline-size: fit-content;
+		max-inline-size: 100%;
+		padding: 0.25rem 0.75rem;
+		border: 1px solid var(--_sc-frame);
+		border-radius: var(--nxgt-field-radius, 0.5rem);
+		background: color-mix(in oklab, var(--_sc-tone) 6%, transparent);
+		color: var(--_sc-tone);
+		transition:
+			border-color var(--nxgt-motion-effects-default-duration)
+			var(--nxgt-motion-effects-default),
+			box-shadow var(--nxgt-motion-effects-default-duration)
+			var(--nxgt-motion-effects-default);
+	}
+	.nxgt-score:not([data-tone]) {
+		--_sc-tone: var(--foreground);
+	}
+	.nxgt-score:hover:not([data-disabled], [data-locked]) {
+		--_sc-frame: var(--nxgt-field-border-hover, var(--border));
+	}
+	.nxgt-score:focus-within {
+		--_sc-frame: var(--nxgt-field-focus);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-focus),
+			0 0 0 4px var(--nxgt-field-halo);
+	}
+	.nxgt-score[data-invalid] {
+		--_sc-frame: var(--nxgt-field-error);
+		box-shadow: inset 0 0 0 1px var(--nxgt-field-error);
+	}
+	.nxgt-score[data-invalid]:focus-within {
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-error),
+			0 0 0 4px var(--nxgt-field-halo-invalid);
+	}
+
+	.nxgt-score-input {
+		field-sizing: content;
+		min-inline-size: 1ch;
+		max-inline-size: 100%;
+		padding: 0;
+		border: 0;
+		outline: 0;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		font-size: 1.75rem;
+		font-weight: 600;
+		line-height: 1.2;
+		font-variant-numeric: tabular-nums;
+		text-align: start;
+	}
+	.nxgt-score-input::placeholder {
+		color: var(--muted-foreground);
+		font-weight: 400;
+	}
+	.nxgt-score-max {
+		color: var(--muted-foreground);
+		font-size: 1rem;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+
+	/* The tone's shape, filled with the text colour and centred on the value. */
+	.nxgt-score-shape {
+		align-self: center;
+		flex: none;
+		inline-size: 0.625rem;
+		block-size: 0.625rem;
+		background: currentColor;
+	}
+	.nxgt-score-shape[data-shape="circle"] {
+		border-radius: 50%;
+	}
+	.nxgt-score-shape[data-shape="triangle"] {
+		clip-path: polygon(50% 0, 100% 100%, 0 100%);
+	}
+	.nxgt-score-shape[data-shape="diamond"] {
+		clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+	}
+
+	/* Locked: read-only, muted, a dashed frame and a lock. */
+	.nxgt-score[data-locked] {
+		--_sc-tone: var(--muted-foreground);
+		/* The dashed frame keeps 3:1 against the page (1.4.11). */
+		--_sc-frame: var(--nxgt-field-border, var(--border));
+		border-style: dashed;
+		background: transparent;
+		cursor: default;
+	}
+	/* Locked and invalid: the error colour, still dashed. */
+	.nxgt-score[data-locked][data-invalid] {
+		--_sc-frame: var(--nxgt-field-error);
+	}
+	.nxgt-score[data-locked] .nxgt-score-input {
+		cursor: default;
+	}
+	.nxgt-score-lock {
+		align-self: center;
+		flex: none;
+		inline-size: 0.875rem;
+		block-size: 0.875rem;
+	}
+	.nxgt-score[data-disabled] {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+	.nxgt-score[data-disabled] .nxgt-score-input {
+		cursor: not-allowed;
+	}
+
+	/* No field-sizing: the markup sets `size` to the text's length, so the
+	 * input stays as wide as its value and the max still hugs it. */
+	@supports not (field-sizing: content) {
+		.nxgt-score-input {
+			inline-size: auto;
+			min-inline-size: 1ch;
+		}
+	}
+
+	@media (forced-colors: active) {
+		.nxgt-score {
+			border-color: ButtonBorder;
+			background: transparent;
+			color: CanvasText;
+		}
+		.nxgt-score:focus-within {
+			border-color: Highlight;
+			outline: 2px solid Highlight;
+		}
+		.nxgt-score[data-invalid] {
+			border-color: Mark;
+		}
+		.nxgt-score-shape {
+			background: CanvasText;
+			forced-color-adjust: none;
+		}
+	}
+}