@nxgt/material 3.94.0 → 3.95.1

package/docs/roadmap.md

@@ -6,16 +6,6 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Now
 
-- **Fields Refined** — every text-like field (text, select, combobox, search,
-  phone, date and time boxes) gets a crisper, more legible look by default: a
-  border of at least 3:1 contrast, the card surface, a clear focus ring, and no
-  filled tint. `NumberField` is right-aligned with its steppers inside the box,
-  and gains a compact `score` variant with a caller-set tone and a locked state
-  with its reason. New `--success-text` and `--warning-text` tokens join
-  `--error-text` in every theme preset. One minor release, no API removed;
-  every `--nxgt-field-*` token override still applies
-  ([#2644](https://github.com/softistx/nxgt-material/issues/2644)).
-
 - **Calculator** — `@nxgt/material/calculator` is an exact-decimal calculator
   (Standard, Scientific, point of sale, Financial, Conversion, Programmer;
   every variant but Standard loads on demand)
@@ -389,6 +379,19 @@ version they shipped in, and planned entries may name the major they target.
 
 ## Shipped
 
+- **Fields Refined** (3.95.0) — every text-like field (text, select, combobox,
+  search, phone, date and time boxes) gets a crisper, more legible look by
+  default: a border of at least 3:1 contrast, the card surface, a clear focus
+  ring, and no filled tint. `NumberField` is right-aligned with its steppers
+  inside the box, `QuantityField` is one box with a unit chip (its unit is a
+  button, so tests query it as a button, not a `combobox`), and `NumberField`
+  gains a compact `score` variant with a caller-set tone and a locked state
+  with its reason. New `--success-text` and `--warning-text` tokens join
+  `--error-text` in every theme preset. One minor release, no API removed;
+  every `--nxgt-field-*` token override still applies
+  ([guide](guides/field-look-refined.md),
+  [#2644](https://github.com/softistx/nxgt-material/issues/2644)).
+
 - **EventCalendar background spans, badges, tones and cancelled events** —
   `EventCalendar` shows what the days themselves are: `spans` draw closures,
   half days and other labelled, toned stretches behind the events in every

package/docs/troubleshooting.md

@@ -23,6 +23,8 @@ words in your error.
 - [`is missing the following properties from type 'Pick<any, "variant" | "color">'`](#is-missing-the-following-properties-from-type-pickany-variant--color)
 - [`Types have separate declarations of a private property` on a `RichTextEditor` `onUpdate` or `onCreate` handler](#types-have-separate-declarations-of-a-private-property-on-a-richtexteditor-onupdate-or-oncreate-handler)
 - [`error TS2305: Module '"@nxgt/material/components"' has no exported member 'Button'`](#error-ts2305-module-nxgtmaterialcomponents-has-no-exported-member-button)
+- [`Unable to find an accessible element with the role "combobox"`](#unable-to-find-an-accessible-element-with-the-role-combobox) (a `QuantityField` or `AgeField` unit in a test)
+- [A test finds an extra `group`, or tabs in the wrong order, in a `NumberField`](#a-test-finds-an-extra-group-or-tabs-in-the-wrong-order-in-a-numberfield)
 
 **Styles & assets**
 
@@ -68,6 +70,7 @@ words in your error.
 - [A Button's label overflows a card on a phone](#a-buttons-label-overflows-a-card-on-a-phone)
 - [A ResponsiveButton no longer shows its tooltip next to its visible label](#a-responsivebutton-no-longer-shows-its-tooltip-next-to-its-visible-label)
 - [An input now has `placeholder=" "` in the DOM](#an-input-now-has-placeholder--in-the-dom)
+- [A filled field has no primary tint after upgrading](#a-filled-field-has-no-primary-tint-after-upgrading)
 - ["Select all" runs under the sort, "Filters" or the actions in a cards or tiles list on a phone](#select-all-runs-under-the-sort-filters-or-the-actions-in-a-cards-or-tiles-list-on-a-phone)
 - [A dialog or sheet scrolls, or clips a child, after upgrading](#a-dialog-or-sheet-scrolls-or-clips-a-child-after-upgrading)
 - [A `DialogBody`'s header and footer do not stay pinned](#a-dialogbodys-header-and-footer-do-not-stay-pinned)
@@ -790,8 +793,37 @@ Vite and React Router apps use:
 { "compilerOptions": { "module": "esnext", "moduleResolution": "bundler" } }
 ```
 
+### `Unable to find an accessible element with the role "combobox"`
+
+**When:** a test of a `QuantityField` or `AgeField` unit fails after upgrading.
+**Why:** the unit is no longer a select or a text input: it is a chip, a
+`button` named "Unit: mg" ("Age unit: months"), that opens a menu of options.
+**Fix:** click the button, then pick the option:
+
+```ts
+await user.click(screen.getByRole('button', { name: /^Dose unit|^Unit:/ }));
+await user.click(await screen.findByRole('option', { name: 'mL' }));
+```
+
+With `allowCustomUnit`, type into the search box inside the menu
+(`screen.getByPlaceholderText('Search or type a unit')`), then pick
+`Use “sachet”`.
+
 ## Styles & assets
 
+### A test finds an extra `group`, or tabs in the wrong order, in a `NumberField`
+
+**When:** after the Refined field release, `getByRole('group')` matches more than one element, or a test that tabs through a `NumberField` lands on a different control.
+**Why:** the number box is now one `role="group"` with the input first and the Decrease and Increase buttons after it (it was Decrease, input, Increase). With a `CalculatorField` the order is input, Open calculator, Decrease, Increase.
+**Fix:** name the group you mean, and tab in the new order.
+
+```ts
+screen.getByRole('group', { name: 'Quantity' });
+await user.tab(); // the input, then Decrease, then Increase
+```
+
+[Tab order and roles](guides/field-look-refined.md#tab-order-and-roles-for-tests) has the list.
+
 ### The backdrop shapes disappeared between the cards (3.22+)
 
 **When:** an `ActivityLayout` with `backdrop={<Background preset="shapes" ... />}`
@@ -1762,6 +1794,18 @@ page.locator('[data-slot=chip]').getByRole('button', { name: 'Remove Design' });
 **Why:** the "filled" tint relies on `:placeholder-shown`, which only matches a field that has a placeholder. A text field without one (or with `placeholder=""`) now renders a blank `placeholder=" "`, so an empty field is not tinted as if it held a value. It draws nothing and is not announced.
 **Fix:** select by role and accessible name (`getByRole('textbox', { name: ... })`) rather than by the missing attribute, and update the snapshot.
 
+### A filled field has no primary tint after upgrading
+
+**When:** after the Refined field release, a field that holds a value looks the same as an empty one, a style or a screenshot that expected the primary tint no longer matches, or setting `--nxgt-field-bg-filled` changes nothing.
+**Why:** the field box dropped the filled tint on purpose: the surface is the card and a border that keeps 3:1 says where the field is. `data-filled` is still set on a box that holds a value, and the `--nxgt-field-bg-filled` tokens still exist but alias the rest surface, so nothing paints from them.
+**Fix:** to bring a tint back, style on `data-filled` after the import (an unlayered rule beats the field box's layer); the dark theme needs its own rule. [The Refined field look](guides/field-look-refined.md#getting-a-detail-of-the-earlier-look-back) has both.
+
+```css
+.nxgt-field-box[data-filled]:not([data-filled="false"]) {
+	background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+}
+```
+
 ### Shaped Gallery tiles are plain rounded squares
 
 **When:** `<Gallery preset="shaped" />` or `shape="cookie-9"` shows ordinary rounded tiles, and the tile does not morph on hover.

package/lib/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/lib/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/lib/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;
-		}
-	}
 }