@nxgt/material 3.94.0 → 3.95.1

package/dist/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/dist/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(

package/dist/components/ui/primitives/field-box/field-box-tokens.css

@@ -3,39 +3,48 @@
  * only, so not in the shared theme-tokens.css. Declared again under .dark so
  * a dark wrapper computes them from its own colours. Unlayered, like the
  * theme tokens: an app's own `:root` / `.dark` rule after the import wins.
- * The filled tint is translucent, as `bg-primary/10` (the tint fields had
- * before, which light keeps exactly). Dark: the filled tint is stronger,
- * so a filled field still reads apart from an empty one on the near-black
- * page (≥ 1.10:1 between the two, ≥ 1.15:1 against the page;
- * Guides/Accessibility/Field contrast measures both). */
+ * The Refined look: the surface is the card, the rest border keeps 3:1
+ * against it (1.4.11; Guides/Accessibility/Field contrast measures both
+ * themes), the focus ring is 4px. There is no filled tint any more: the
+ * `-filled` tokens stay, as aliases of the rest values, so a read resolves;
+ * an override no longer paints: style on `data-filled` instead. */
 :root,
 [data-nxgt-theme] {
-	--nxgt-field-bg: color-mix(in oklab, var(--foreground) 2%, var(--background));
+	--nxgt-field-bg: var(--card);
 	--nxgt-field-bg-hover: color-mix(
 		in oklab,
-		var(--foreground) 6.5%,
-		var(--background)
+		var(--foreground) 2.5%,
+		var(--card)
 	);
-	--nxgt-field-bg-filled: color-mix(in oklab, var(--primary) 10%, transparent);
-	--nxgt-field-bg-filled-hover: color-mix(
+	/* Aliases: a filled field looks like an empty one. */
+	--nxgt-field-bg-filled: var(--nxgt-field-bg);
+	--nxgt-field-bg-filled-hover: var(--nxgt-field-bg-hover);
+	--nxgt-field-bg-invalid: var(--nxgt-field-bg);
+	--nxgt-field-bg-disabled: color-mix(
 		in oklab,
-		var(--primary) 14%,
-		transparent
+		var(--foreground) 5%,
+		var(--card)
 	);
-	--nxgt-field-bg-invalid: color-mix(
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 52%, var(--card));
+	--nxgt-field-border-hover: color-mix(
 		in oklab,
-		var(--error) 5%,
-		var(--background)
+		var(--foreground) 74%,
+		var(--card)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 14%, transparent);
-	--nxgt-field-border-hover: color-mix(
+	--nxgt-field-border-readonly: color-mix(
+		in oklab,
+		var(--foreground) 50%,
+		var(--card)
+	);
+	--nxgt-field-border-disabled: color-mix(
 		in oklab,
 		var(--foreground) 24%,
-		transparent
+		var(--card)
 	);
 	--nxgt-field-focus: var(--primary-text);
-	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 22%, transparent);
-	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 22%, transparent);
+	--nxgt-field-error: var(--error-text);
+	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 24%, transparent);
+	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 26%, transparent);
 	--nxgt-field-well: color-mix(in oklab, var(--foreground) 6%, transparent);
 	--nxgt-field-radius: 0.5rem;
 	--nxgt-field-inner-radius: 0.25rem;
@@ -70,32 +79,41 @@
 		var(--muted-foreground) 78%,
 		var(--foreground)
 	);
-	--nxgt-field-bg: color-mix(in oklab, var(--foreground) 5%, var(--background));
+	--nxgt-field-bg: var(--card);
 	--nxgt-field-bg-hover: color-mix(
 		in oklab,
-		var(--foreground) 9%,
-		var(--background)
+		var(--foreground) 2.5%,
+		var(--card)
 	);
-	--nxgt-field-bg-filled: color-mix(in oklab, var(--primary) 26%, transparent);
-	--nxgt-field-bg-filled-hover: color-mix(
+	/* Aliases: a filled field looks like an empty one. */
+	--nxgt-field-bg-filled: var(--nxgt-field-bg);
+	--nxgt-field-bg-filled-hover: var(--nxgt-field-bg-hover);
+	--nxgt-field-bg-invalid: var(--nxgt-field-bg);
+	--nxgt-field-bg-disabled: color-mix(
 		in oklab,
-		var(--primary) 32%,
-		transparent
+		var(--foreground) 5%,
+		var(--card)
 	);
-	--nxgt-field-bg-invalid: color-mix(
+	--nxgt-field-border: color-mix(in oklab, var(--foreground) 52%, var(--card));
+	--nxgt-field-border-hover: color-mix(
 		in oklab,
-		var(--error) 10%,
-		var(--background)
+		var(--foreground) 74%,
+		var(--card)
 	);
-	--nxgt-field-border: color-mix(in oklab, var(--foreground) 16%, transparent);
-	--nxgt-field-border-hover: color-mix(
+	--nxgt-field-border-readonly: color-mix(
+		in oklab,
+		var(--foreground) 50%,
+		var(--card)
+	);
+	--nxgt-field-border-disabled: color-mix(
 		in oklab,
-		var(--foreground) 32%,
-		transparent
+		var(--foreground) 24%,
+		var(--card)
 	);
 	--nxgt-field-focus: var(--primary-text);
-	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 35%, transparent);
-	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 40%, transparent);
+	--nxgt-field-error: var(--error-text);
+	--nxgt-field-halo: color-mix(in oklab, var(--primary-text) 24%, transparent);
+	--nxgt-field-halo-invalid: color-mix(in oklab, var(--error) 26%, transparent);
 	--nxgt-field-well: color-mix(in oklab, var(--foreground) 10%, transparent);
 	--nxgt-field-list-shadow:
 		0 0 0 1px color-mix(in oklab, var(--foreground) 12%, transparent),

package/dist/components/ui/primitives/field-box/field-box.css

@@ -1,18 +1,14 @@
 /* The field box: the look of every text field and picker trigger (Input,
- * Textarea, InputGroup, then Select, Combobox, the date fields). A soft
- * neutral surface, the primary tint once it holds a value, a hairline that
- * firms on hover, the border in primary with a 3px halo on focus.
+ * Textarea, InputGroup, then Select, Combobox, the date fields). The
+ * Refined look: the card as surface, a 1px border that keeps 3:1 and firms
+ * on hover, the primary border with a 4px ring on focus. A filled field
+ * looks like an empty one.
  * Look only: height and padding stay with each component, and a utility
  * class still wins (this is @layer components).
  *
- * Filled: `:placeholder-shown` for an <input> or <textarea> (CSS alone, no
- * state: the same markup on the server); `data-filled` on any other box,
- * which never matches the pseudo-class (#324), and on a file, date, time,
- * month, week, colour or range input, which never shows a placeholder; a
- * box holding an input-group control reads the control's; a <select> is
- * filled while its chosen option has a value, a Select trigger while
- * Radix does not mark it `data-placeholder`, and a chips box while it
- * holds a chip.
+ * Filled: `data-filled` stays on a box that holds a value (components set
+ * it, apps may style on it), but it paints nothing: the `-filled` tokens
+ * alias the rest ones.
  * Focus: the box itself, or an input or a combobox button directly in it
  * (TreeSelectField's box beside its chips), or the input among a chips
  * box's values.
@@ -23,7 +19,7 @@
  * field-box-modes.css. */
 @layer components {
 	.nxgt-field-box {
-		/* The surface at rest and under the pointer; filled swaps both. */
+		/* The surface at rest and under the pointer. */
 		--_field-rest: var(--nxgt-field-bg);
 		--_field-hover: var(--nxgt-field-bg-hover);
 		border: 1px solid var(--nxgt-field-border);
@@ -41,53 +37,8 @@
 			var(--nxgt-spring-fast, ease-out);
 	}
 
-	/* Filled. A file, date, time, month, week, colour or range input never
-	 * shows its placeholder, so `:placeholder-shown` cannot tell it is
-	 * empty: such an input tints only with `data-filled`. */
-	.nxgt-field-box:where(
-		:is(
-			input:not(
-				:is(
-					[type="file"],
-					[type="date"],
-					[type="time"],
-					[type="datetime-local"],
-					[type="month"],
-					[type="week"],
-					[type="color"],
-					[type="range"]
-				)
-			),
-			textarea
-		):not(:placeholder-shown),
-		[data-filled]:not([data-filled="false"]),
-		select:has(option:checked:not([value=""])),
-		[data-slot="select-trigger"]:not([data-placeholder]),
-		[data-slot="combobox-chips"]:has(
-			[data-slot="combobox-chip"],
-			[data-slot="chip"]
-		),
-		:has(
-			[data-slot="input-group-control"]:not(
-					:is(
-						[type="file"],
-						[type="date"],
-						[type="time"],
-						[type="datetime-local"],
-						[type="month"],
-						[type="week"],
-						[type="color"],
-						[type="range"]
-					)
-				):not(:placeholder-shown)
-		)
-	) {
-		--_field-rest: var(--nxgt-field-bg-filled);
-		--_field-hover: var(--nxgt-field-bg-filled-hover);
-	}
-
 	/* Every state below is wrapped in :where(), so they all weigh one class
-	 * and their order decides: hover, focus, error, read-only, disabled. */
+	 * and their order decides: hover, read-only, disabled, focus, error. */
 
 	/* Hover: never on a disabled or read-only box. */
 	.nxgt-field-box:where(:hover):where(
@@ -103,7 +54,31 @@
 		background-color: var(--_field-hover);
 	}
 
-	/* Focus: the border in primary and a soft halo outside. */
+	/* Read-only: no surface, a dashed hairline. Before the focus rule, so a
+	 * focused read-only box still shows its ring. */
+	.nxgt-field-box:where(
+		:is([readonly], [data-readonly]):not(:disabled),
+		:has([data-slot="input-group-control"][readonly])
+	) {
+		border-style: dashed;
+		border-color: var(--nxgt-field-border-readonly);
+		background-color: transparent;
+	}
+
+	/* Disabled: a recessed surface and a light border, the box at 62 %. */
+	.nxgt-field-box:where(
+		:disabled,
+		[data-disabled],
+		:has([data-slot="input-group-control"]:disabled)
+	) {
+		cursor: not-allowed;
+		border-color: var(--nxgt-field-border-disabled);
+		background-color: var(--nxgt-field-bg-disabled);
+		opacity: 0.62;
+	}
+
+	/* Focus: the 1px border and a 1px line in primary, and a 4px ring
+	 * outside (it replaces the 3px halo). */
 	.nxgt-field-box:where(
 		:is(input, textarea, select, button, [role="combobox"]):focus-visible,
 		[data-focused],
@@ -112,17 +87,19 @@
 		:has([data-slot="input-group-control"]:focus-visible)
 	) {
 		border-color: var(--nxgt-field-focus);
-		box-shadow: 0 0 0 3px var(--nxgt-field-halo);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-focus),
+			0 0 0 4px var(--nxgt-field-halo);
 	}
 
-	/* Error: the border in the error colour and a faint error wash. */
+	/* Error: the border in the error text colour and a 1px line inside it. */
 	.nxgt-field-box:where(
 		[aria-invalid="true"],
 		[data-invalid]:not([data-invalid="false"]),
 		:has([data-slot][aria-invalid="true"])
 	) {
-		border-color: var(--error);
-		background-color: var(--nxgt-field-bg-invalid);
+		border-color: var(--nxgt-field-error);
+		box-shadow: inset 0 0 0 1px var(--nxgt-field-error);
 	}
 	.nxgt-field-box:where(
 		[aria-invalid="true"],
@@ -135,7 +112,9 @@
 		:has(> [data-slot="combobox-chips-values"] > input:focus-visible),
 		:has([data-slot="input-group-control"]:focus-visible)
 	) {
-		box-shadow: 0 0 0 3px var(--nxgt-field-halo-invalid);
+		box-shadow:
+			0 0 0 1px var(--nxgt-field-error),
+			0 0 0 4px var(--nxgt-field-halo-invalid);
 	}
 	/* Open in error: the error border stays (it outranks the open border,
 	 * field-box-parts.css), the error being still there. */
@@ -144,28 +123,7 @@
 		[data-invalid]:not([data-invalid="false"]),
 		:has([data-slot][aria-invalid="true"])
 	) {
-		border-color: var(--error);
-	}
-
-	/* Read-only: no surface, a dashed hairline. */
-	.nxgt-field-box:where(
-		:is([readonly], [data-readonly]):not(:disabled),
-		:has([data-slot="input-group-control"][readonly])
-	) {
-		border-style: dashed;
-		background-color: transparent;
-	}
-
-	/* Disabled: the whole box at half strength, on the neutral surface
-	 * (never the filled tint). */
-	.nxgt-field-box:where(
-		:disabled,
-		[data-disabled],
-		:has([data-slot="input-group-control"]:disabled)
-	) {
-		cursor: not-allowed;
-		background-color: var(--nxgt-field-bg);
-		opacity: 0.5;
+		border-color: var(--nxgt-field-error);
 	}
 
 	/* A Select trigger shows the chosen item's children (Radix clones them

package/dist/components/ui/primitives/field-box/field-stepper.css

@@ -0,0 +1,129 @@
+/* The −/+ pair at the end of a field's box: two tinted round buttons side by
+ * side, no divider. DurationField (`.nxgt-duration-step`, its box defines
+ * `--_dd-*`) and NumberField (`.nxgt-field-step` inside `.nxgt-field-steps`,
+ * which defines them) share these rules. Focus rings are drawn inside the
+ * button (an inset outline), never clipped. A coarse pointer gets a 44px
+ * target. */
+@layer components {
+	.nxgt-field-steps {
+		--_dd-btn: color-mix(in oklab, var(--primary) 14%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 22%, var(--background));
+		--_dd-step: 2rem;
+		display: flex;
+		flex: none;
+		align-items: center;
+		align-self: stretch;
+		gap: 0.5rem;
+		padding-inline-end: 0.25rem;
+		cursor: default;
+	}
+	:is(.dark, [data-theme="dark"]) .nxgt-field-steps {
+		--_dd-btn: color-mix(in oklab, var(--primary) 34%, var(--background));
+		--_dd-btn-hover: color-mix(in oklab, var(--primary) 44%, var(--background));
+	}
+
+	/* The −/+ pair: round, 4px apart on a fine pointer (12px on a coarse one),
+	 * a ring inside each button. */
+	:is(.nxgt-duration-step, .nxgt-field-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);
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step)
+		+ :is(.nxgt-duration-step, .nxgt-field-step) {
+		margin-inline-start: -0.25rem;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):hover:not(
+		:disabled,
+		[aria-disabled="true"]
+	) {
+		background: var(--_dd-btn-hover);
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):focus-visible {
+		outline: 2px solid var(--_fx-line, var(--nxgt-field-focus));
+		outline-offset: -2px;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step):is(
+		:disabled,
+		[aria-disabled="true"]
+	) {
+		cursor: not-allowed;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step)[aria-disabled="true"]:not(
+		:disabled
+	),
+	.nxgt-field-step:disabled {
+		opacity: 0.38;
+	}
+	.nxgt-duration-box[data-disabled] .nxgt-duration-step,
+	.nxgt-field-steps[data-disabled] .nxgt-field-step {
+		background: transparent;
+	}
+	:is(.nxgt-duration-step, .nxgt-field-step) svg {
+		inline-size: 1rem;
+		block-size: 1rem;
+	}
+
+	/* NumberField: the box is 44px tall on a coarse pointer, so the circle
+	 * stays 32px and a transparent 6px ring makes the 44px target. */
+	@media (pointer: coarse) {
+		.nxgt-field-step {
+			inline-size: 2.75rem;
+			block-size: 2.75rem;
+			border: 0.375rem solid transparent;
+			background-clip: padding-box;
+		}
+		.nxgt-field-step + .nxgt-field-step {
+			margin-inline-start: -0.5rem;
+		}
+		.nxgt-field-step:focus-visible {
+			outline-offset: -0.375rem;
+		}
+	}
+
+	@media (forced-colors: active) and (pointer: coarse) {
+		/* Keep the 44px target: the transparent ring stays, the 1px outline of
+		 * the circle is an inset ring. */
+		.nxgt-field-step {
+			border: 0.375rem solid transparent;
+			background-clip: padding-box;
+			box-shadow: inset 0 0 0 1px ButtonBorder;
+		}
+		.nxgt-field-step[aria-disabled="true"],
+		.nxgt-field-step:disabled {
+			box-shadow: inset 0 0 0 1px GrayText;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:is(.nxgt-duration-step, .nxgt-field-step) {
+			transition: none;
+		}
+	}
+	@media (forced-colors: active) {
+		:is(.nxgt-duration-step, .nxgt-field-step) {
+			forced-color-adjust: none;
+			border: 1px solid ButtonBorder;
+			background: ButtonFace;
+			color: ButtonText;
+		}
+		:is(.nxgt-duration-step, .nxgt-field-step)[aria-disabled="true"],
+		.nxgt-field-step:disabled,
+		.nxgt-duration-step:disabled {
+			border-color: GrayText;
+			color: GrayText;
+			opacity: 1;
+		}
+		:is(.nxgt-duration-step, .nxgt-field-step):focus-visible {
+			outline-color: Highlight;
+		}
+	}
+}