@nxgt/material 3.93.0 → 3.95.0

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

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