@nxgt/material 3.93.0 → 3.95.0

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**
 
@@ -43,6 +45,7 @@ words in your error.
 - [`IconRefError` from `IconSpritesProvider`](#iconreferror-from-iconspritesprovider)
 - [An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry](#an-accessibility-audit-reports-low-contrast-on-a-badge-a-button-a-toast-or-a-menu-entry)
 - [`ARIA hidden element must not be focusable or contain focusable elements`](#aria-hidden-element-must-not-be-focusable-or-contain-focusable-elements)
+- [An `EntityHeader` metadata test that measured the label beside its value now fails](#an-entityheader-metadata-test-that-measured-the-label-beside-its-value-now-fails)
 - [A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`](#a-control-in-an-entityheaders-icon-is-hidden-from-assistive-tech-squashed-and-reports-aria-hidden-focus)
 - [A `Switcher` in link mode leaves focus on the trigger after a navigation, and the new page's title never gets it](#a-switcher-in-link-mode-leaves-focus-on-the-trigger-after-a-navigation-and-the-new-pages-title-never-gets-it)
 - [An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link](#an-accessibility-audit-reports-low-contrast-on-a-tonal-or-outlined-button-a-selected-list-tile-or-a-hovered-badge-link)
@@ -67,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)
@@ -789,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" ... />}`
@@ -1152,6 +1185,21 @@ Elements mounted after the layer opens are not made inert: mount them
 first, or pass them to `inertOthers` in `keep` when they must stay
 reachable.
 
+### An `EntityHeader` metadata test that measured the label beside its value now fails
+
+**When:** after the metadata became a grid, a test reads the label and the value
+of an `EntityHeader` on one line, or measures their positions or heights.
+**Why:** each fact is now a grid cell with the label (`dt`) above its value
+(`dd`), as many columns as the width allows; a link or a text button in a value
+keeps the text's height.
+**Fix:** update the numbers, or assert on the text and on
+`data-slot="entity-metadata"` instead of the geometry.
+
+```tsx
+const meta = container.querySelector('[data-slot="entity-metadata"]');
+expect(meta).toHaveTextContent('Owner');
+```
+
 ### A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`
 
 **When:** an `EntityHeader` gets a `Switcher`, a button or a link as its `icon`.
@@ -1746,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.
@@ -8086,14 +8146,14 @@ with `style-src-elem` for a `<style>` element and `style-src-attr` for a
 **Why:** a `<style>` element needs the page's nonce, an attribute cannot carry
 one. The usual sources are the components listed in
 [the guide](guides/csp.md#style-elements-the-components-inject).
-`ScrollArea`, `Select`, `RichTextEditor` and the scroll lock of dialogs and
+`ScrollArea`, `Select`, `RichTextEditor`, `Markdown` (math) and the scroll lock of dialogs and
 sheets take the nonce from `NonceProvider`, and report this when the app has
-none (or gives it another nonce than the header's). Mermaid and KaTeX
-need none of this on a client render
+none (or gives it another nonce than the header's). Math needs no
+`style-src-attr` on the server or the client, but needs `NonceProvider` (its
+`mk-` rules are one nonce'd `<style>`)
 ([Markdown under a strict CSP](guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp));
-the two left are a server-rendered page with math (KaTeX's `style` attributes
-need `style-src-attr 'unsafe-inline'`) and the `<style>` cytoscape adds to
-`<head>` for mermaid's mindmap and architecture diagrams.
+the one left is the `<style>` cytoscape adds to `<head>` for mermaid's mindmap
+and architecture diagrams.
 `Toaster`, `Drawer`,
 `InputOTP`, `ImageCropper`, `Spinner` and `PdfReader` create none: their CSS is in the stylesheet, so if one of them looks unstyled, the
 app imports neither `styles.css` nor `dist/material.css`.

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

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

package/lib/components/ui/fields/quantity-field/quantity-field.css

@@ -0,0 +1,117 @@
+/* QuantityField: the unit as a soft chip inside the field's one box, before the
+ * −/+ pair (field-stepper.css). The chip takes the steppers' tint; a focus on
+ * it draws the box's focus ring; a coarse pointer gets a 44px target. */
+@layer components {
+	.nxgt-quantity-unit-addon {
+		--_dd-btn: color-mix(in oklab, var(--primary) 14%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 22%, var(--background));
+		--_qty-chip: 1.75rem;
+		align-self: stretch;
+		margin-inline: 0.25rem;
+		cursor: default;
+	}
+	:is(.dark, [data-theme="dark"]) .nxgt-quantity-unit-addon {
+		--_dd-btn: color-mix(in oklab, var(--primary) 34%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 44%, var(--background));
+	}
+
+	.nxgt-quantity-unit {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.25rem;
+		min-inline-size: 0;
+		max-inline-size: 100%;
+		block-size: var(--_qty-chip);
+		padding-inline: 0.625rem 0.5rem;
+		border-radius: var(--nxgt-shape-corner-full);
+		background: var(--_dd-btn);
+		color: var(--primary-text);
+		font-size: 0.75rem;
+		font-weight: 600;
+		cursor: pointer;
+		outline: none;
+		transition: background-color var(--nxgt-motion-effects-default-duration)
+			var(--nxgt-motion-effects-default);
+	}
+	.nxgt-quantity-unit > span {
+		min-inline-size: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.nxgt-quantity-unit svg {
+		flex: none;
+		inline-size: 0.875rem;
+		block-size: 0.875rem;
+	}
+	.nxgt-quantity-unit:hover:not(:disabled),
+	.nxgt-quantity-unit[aria-expanded="true"] {
+		background: var(--_dd-btn-hover);
+	}
+	.nxgt-quantity-unit:focus-visible {
+		outline: 2px solid var(--_fx-line, var(--nxgt-field-focus));
+		outline-offset: -2px;
+	}
+	.nxgt-quantity-unit:disabled {
+		cursor: not-allowed;
+	}
+	.nxgt-quantity-unit-addon[data-disabled] .nxgt-quantity-unit {
+		background: transparent;
+		color: var(--muted-foreground);
+	}
+
+	@media (pointer: coarse) {
+		.nxgt-quantity-unit-addon {
+			--_qty-chip: 2.25rem;
+		}
+		/* A transparent 44px target around the 36px chip. */
+		.nxgt-quantity-unit::after {
+			content: "";
+			position: absolute;
+			inset: -0.25rem -0.125rem;
+		}
+	}
+
+	/* The box's focus ring while the chip (not the value) has focus. */
+	.nxgt-field-box:where(:has(.nxgt-quantity-unit:focus-visible)) {
+		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:where(
+		:has([data-slot][aria-invalid="true"]):has(
+			.nxgt-quantity-unit:focus-visible
+		)
+	) {
+		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);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.nxgt-quantity-unit {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		.nxgt-quantity-unit {
+			forced-color-adjust: none;
+			border: 1px solid ButtonBorder;
+			background: ButtonFace;
+			color: ButtonText;
+		}
+		.nxgt-quantity-unit:focus-visible {
+			outline-color: Highlight;
+		}
+		.nxgt-quantity-unit[aria-expanded="true"] {
+			border-color: Highlight;
+		}
+		.nxgt-quantity-unit:disabled {
+			border-color: GrayText;
+			color: GrayText;
+		}
+	}
+}

package/lib/components/ui/primitives/field-box/field-box-parts.css

@@ -28,7 +28,6 @@
 	.nxgt-field-box[data-size] {
 		min-height: var(--nxgt-field-h);
 	}
-
 	.nxgt-field-box[data-open]:not([data-open="false"]) {
 		border-color: var(--nxgt-field-focus);
 	}
@@ -198,7 +197,7 @@
 		font-variant-numeric: tabular-nums;
 	}
 	/* A soft chip in a box (a chips box) takes the page's surface, so it
-	 * reads apart from the box's tint. */
+	 * reads apart from the box's surface. */
 	.nxgt-field-box .nxgt-chip[data-look="soft"][data-tone="neutral"] {
 		--chip-bg: var(--background);
 		--chip-bg-hover: color-mix(