@nxgt/material 3.93.0 → 3.95.0

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