@dalcvil/steam-green-react 0.2.0 → 1.0.0

package/dist/components/SpinBox/SpinBox.css

@@ -0,0 +1,152 @@
+/*
+ * Green Steam spin box — a composition, not a corpus control
+ * (docs/components/SpinBox.md).
+ *
+ * The field is a `TextEntry` and must match TextInput's recipe exactly, or the
+ * two will not sit together in a form; the stepper column is the `ComboBox`
+ * arrow-button grammar stacked twice. The glyphs are drawn procedurally from
+ * the 7x4 staircase of Scrollbar.md, because `icon_up_default` does not exist
+ * in the corpus at all.
+ *
+ * The metric tokens this component needs are not in tokens.css yet, so each
+ * keeps its `var()` fallback — a theme that adds them can still override.
+ */
+
+.vgui-spin-box {
+  display: inline-flex;
+  align-items: stretch;
+  min-block-size: var(--vgui-spin-box-height, 25px);
+  min-inline-size: 0;
+  font: inherit;
+}
+
+/* The field: TextEntry, steam.styles:2395-2414. Recessed, DarkGreenBG. */
+.vgui-spin-box__input {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding: 0 var(--vgui-spin-box-inset, 4px);
+  font: inherit;
+  font-size: var(--vgui-font-size);
+  line-height: 1;
+  color: var(--vgui-text-strong);
+  background-color: var(--vgui-surface-dark);
+  appearance: none;
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-radius: 0;
+  /* A spin box is left-aligned numeric; right-align only for money. */
+  text-align: left;
+}
+
+/*
+ * `TextEntry:focus` restates the same colours — only the border treatment
+ * changes. The ring is the accessible default; `.vgui-crisp` gets Valve's.
+ */
+.vgui-spin-box__input:focus {
+  outline: none;
+}
+
+.vgui-spin-box__input:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: var(--vgui-focus-ring-offset);
+}
+
+.vgui-crisp .vgui-spin-box__input:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* `#232421` on the selection accent reaches 4.22:1; the body colour does not. */
+.vgui-spin-box__input::selection {
+  background-color: var(--vgui-selection-bg);
+  color: var(--vgui-selection-text);
+}
+
+.vgui-spin-box__input[aria-invalid='true'] {
+  border-top-color: var(--vgui-danger);
+  border-left-color: var(--vgui-danger);
+}
+
+.vgui-spin-box__input:disabled {
+  color: var(--vgui-text-disabled);
+  text-shadow: 1px 1px 0 var(--vgui-text-disabled-shadow);
+  cursor: not-allowed;
+}
+
+/* The stepper plate: one beveled column, ComboBox grammar. */
+.vgui-spin-box__steppers {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  flex: none;
+  inline-size: var(--vgui-spin-box-step-width, 17px);
+  background-color: var(--vgui-surface);
+  border-top: var(--vgui-bevel-width) solid var(--vgui-bevel-light);
+  border-left: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-bottom: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+  border-right: var(--vgui-bevel-width) solid var(--vgui-bevel-dark);
+}
+
+.vgui-spin-box__step {
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--vgui-text-muted);
+  cursor: pointer;
+}
+
+.vgui-spin-box__step:hover:not(:disabled) {
+  background-color: var(--vgui-surface-light);
+}
+
+/* `Button:active` inverts the bevel — reuse that, not a translate. */
+.vgui-spin-box__step:active:not(:disabled) {
+  box-shadow:
+    inset var(--vgui-bevel-width) var(--vgui-bevel-width) 0 var(--vgui-bevel-dark),
+    inset calc(-1 * var(--vgui-bevel-width)) calc(-1 * var(--vgui-bevel-width)) 0 var(--vgui-bevel-light);
+}
+
+.vgui-spin-box__step:disabled {
+  color: var(--vgui-text-dim);
+  cursor: default;
+}
+
+.vgui-spin-box__step:focus-visible {
+  outline: var(--vgui-focus-ring);
+  outline-offset: -2px;
+}
+
+.vgui-crisp .vgui-spin-box__step:focus-visible {
+  outline: var(--vgui-focus-ring-valve);
+  outline-offset: var(--vgui-focus-ring-valve-offset);
+}
+
+/* The glyph: the 7x4 staircase from Scrollbar.md, mirrored for "up". */
+.vgui-spin-box__glyph {
+  inline-size: 7px;
+  block-size: 4px;
+  background-color: currentColor;
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.vgui-spin-box__step--up .vgui-spin-box__glyph {
+  clip-path: polygon(50% 100%, 100% 0, 0 0);
+}
+
+.vgui-spin-box--small {
+  min-block-size: 18px;
+}
+
+.vgui-spin-box--small .vgui-spin-box__input {
+  font-size: var(--vgui-font-size-small);
+}
+
+.vgui-spin-box--horizontal .vgui-spin-box__steppers {
+  grid-template-rows: none;
+  grid-template-columns: 1fr 1fr;
+  inline-size: calc(2 * var(--vgui-spin-box-step-width, 17px));
+}

package/dist/components/SpinBox/SpinBox.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/SpinBox/SpinBox.d.ts

@@ -0,0 +1,28 @@
+import type { InputHTMLAttributes } from 'react';
+import './SpinBox.css';
+export interface SpinBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {
+    /** Current value. `undefined` renders the input empty. */
+    value?: number;
+    /** Called with the new value on every accepted change. */
+    onValueChange?: (value: number) => void;
+    /** Lower bound, inclusive. */
+    min?: number;
+    /** Upper bound, inclusive. */
+    max?: number;
+    /** Increment applied by the steppers and by ArrowUp/ArrowDown. */
+    step?: number;
+    /** Allow fractional values. Switches keyboard input to a decimal keyboard. */
+    decimal?: boolean;
+    /** Wrap past the bounds instead of disabling the stepper. Off by default. */
+    wrap?: boolean;
+    /** Hide the stepper column. Arrow keys still work. */
+    noSteppers?: boolean;
+    /** Lay the steppers out side by side. */
+    horizontal?: boolean;
+    /** Compact 18px variant, for dense rows. */
+    small?: boolean;
+    /** Text announced in place of the raw number, e.g. "16 players". */
+    valueText?: string;
+}
+export declare const SpinBox: import("react").ForwardRefExoticComponent<SpinBoxProps & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=SpinBox.d.ts.map

package/dist/components/SpinBox/SpinBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinBox.d.ts","sourceRoot":"","sources":["../../../src/components/SpinBox/SpinBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAGV,mBAAmB,EAGpB,MAAM,OAAO,CAAA;AAEd,OAAO,eAAe,CAAA;AAgBtB,MAAM,WAAW,YACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IAClF,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6EAA6E;IAC7E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yCAAyC;IACzC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oEAAoE;IACpE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,OAAO,2GAgQlB,CAAA"}

package/dist/components/SpinBox/SpinBox.js

@@ -0,0 +1,207 @@
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./SpinBox.css";
+//#region src/components/SpinBox/SpinBox.tsx
+/** Hold-to-repeat: the conventional wait before the first repeat, then the rate. */
+var REPEAT_DELAY = 500;
+var REPEAT_INTERVAL = 50;
+var decimalsOf = (n) => {
+	const text = String(n);
+	const dot = text.indexOf(".");
+	return dot === -1 ? 0 : text.length - dot - 1;
+};
+var round = (n, decimals) => Number(n.toFixed(decimals));
+var toDisplay = (n) => n === void 0 || !Number.isFinite(n) ? "" : String(n);
+var SpinBox = forwardRef(function SpinBox({ className, value, onValueChange, min, max, step = 1, decimal = false, wrap = false, noSteppers = false, horizontal = false, small = false, valueText, defaultValue, disabled = false, inputMode, onBlur, onFocus, onKeyDown, ...rest }, ref) {
+	const seed = value !== void 0 ? value : defaultValue !== void 0 ? Number(defaultValue) : void 0;
+	const [internalValue, setInternalValue] = useState(seed);
+	const current = value !== void 0 ? value : internalValue;
+	const stepDecimals = decimalsOf(step);
+	const shapeTyped = (n) => decimal ? round(n, Math.max(stepDecimals, decimalsOf(n))) : Math.round(n);
+	const [draft, setDraft] = useState(() => toDisplay(seed));
+	const [seen, setSeen] = useState(current);
+	const focusValue = useRef(current);
+	if (seen !== current) {
+		setSeen(current);
+		setDraft(toDisplay(current));
+	}
+	const bound = (n) => {
+		let next = n;
+		if (min !== void 0 && next < min) next = min;
+		if (max !== void 0 && next > max) next = max;
+		return next;
+	};
+	const commit = (next) => {
+		const bounded = bound(next);
+		setDraft(toDisplay(value !== void 0 && bounded !== current ? current : bounded));
+		if (bounded === current) return;
+		if (value === void 0) setInternalValue(bounded);
+		onValueChange?.(bounded);
+	};
+	/** Typed input is clamped and loses any trailing noise. */
+	const commitDraft = () => {
+		const trimmed = draft.trim();
+		if (trimmed === "") {
+			setDraft(toDisplay(current));
+			return;
+		}
+		const parsed = Number(decimal ? trimmed.replace(",", ".") : trimmed);
+		if (!Number.isFinite(parsed)) {
+			setDraft(toDisplay(current));
+			return;
+		}
+		commit(shapeTyped(parsed));
+	};
+	const stepTo = (delta) => {
+		const base = current ?? (delta > 0 ? min ?? 0 : max ?? 0);
+		let next = round(base + delta, Math.max(stepDecimals, decimalsOf(base)));
+		if (wrap) {
+			if (max !== void 0 && next > max) next = min ?? next;
+			else if (min !== void 0 && next < min) next = max ?? next;
+		}
+		return bound(next);
+	};
+	/** Returns whether anything moved, so hold-to-repeat can stop at a bound. */
+	const stepBy = (delta) => {
+		const next = stepTo(delta);
+		if (next === current) return false;
+		commit(next);
+		return true;
+	};
+	const stepRef = useRef(stepBy);
+	useEffect(() => {
+		stepRef.current = stepBy;
+	});
+	const timer = useRef(void 0);
+	const repeated = useRef(false);
+	const pointerHandled = useRef(false);
+	const stopRepeat = () => {
+		if (timer.current !== void 0) {
+			window.clearTimeout(timer.current);
+			timer.current = void 0;
+		}
+	};
+	useEffect(() => stopRepeat, []);
+	const startRepeat = (delta) => {
+		stopRepeat();
+		repeated.current = false;
+		const tick = () => {
+			if (!stepRef.current(delta)) {
+				stopRepeat();
+				return;
+			}
+			repeated.current = true;
+			timer.current = window.setTimeout(tick, REPEAT_INTERVAL);
+		};
+		timer.current = window.setTimeout(tick, REPEAT_DELAY);
+	};
+	const handleStepPointerDown = (delta) => (event) => {
+		if (event.button !== 0) return;
+		pointerHandled.current = true;
+		if (!stepRef.current(delta)) return;
+		startRepeat(delta);
+	};
+	const handleStepClick = (delta) => () => {
+		if (pointerHandled.current) {
+			pointerHandled.current = false;
+			return;
+		}
+		stepRef.current(delta);
+	};
+	const handleKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		switch (event.key) {
+			case "ArrowUp":
+			case "ArrowDown":
+				event.preventDefault();
+				stepBy(event.key === "ArrowUp" ? step : -step);
+				break;
+			case "PageUp":
+			case "PageDown":
+				event.preventDefault();
+				stepBy(event.key === "PageUp" ? step * 10 : step * -10);
+				break;
+			case "Home":
+				if (min === void 0) break;
+				event.preventDefault();
+				commit(min);
+				break;
+			case "End":
+				if (max === void 0) break;
+				event.preventDefault();
+				commit(max);
+				break;
+			case "Escape":
+				if (focusValue.current !== void 0) commit(focusValue.current);
+				else setDraft(toDisplay(current));
+				break;
+			case "Enter": commitDraft();
+		}
+	};
+	const handleChange = (event) => {
+		setDraft(event.currentTarget.value);
+	};
+	const handleFocus = (event) => {
+		focusValue.current = current;
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		onBlur?.(event);
+		commitDraft();
+	};
+	const atMin = min !== void 0 && current !== void 0 && current <= min;
+	const atMax = max !== void 0 && current !== void 0 && current >= max;
+	const classes = ["vgui-spin-box"];
+	if (horizontal) classes.push("vgui-spin-box--horizontal");
+	if (small) classes.push("vgui-spin-box--small");
+	if (noSteppers) classes.push("vgui-spin-box--no-steppers");
+	if (className) classes.push(className);
+	const steppers = (delta, label, blocked) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `vgui-spin-box__step vgui-spin-box__step--${delta === 1 ? "up" : "down"}`,
+		"aria-label": label,
+		tabIndex: -1,
+		disabled: disabled || !wrap && blocked,
+		onPointerDown: handleStepPointerDown(delta * step),
+		onPointerUp: stopRepeat,
+		onPointerLeave: stopRepeat,
+		onPointerCancel: stopRepeat,
+		onClick: handleStepClick(delta * step),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "vgui-spin-box__glyph",
+			"aria-hidden": "true"
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: classes.join(" "),
+		role: "group",
+		"aria-disabled": disabled || void 0,
+		children: [/* @__PURE__ */ jsx("input", {
+			ref,
+			className: "vgui-spin-box__input",
+			type: "text",
+			role: "spinbutton",
+			"aria-valuenow": current,
+			"aria-valuemin": min,
+			"aria-valuemax": max,
+			"aria-valuetext": valueText,
+			inputMode: inputMode ?? (decimal ? "decimal" : "numeric"),
+			disabled,
+			value: draft,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			onChange: handleChange,
+			onKeyDown: handleKeyDown,
+			...rest
+		}), noSteppers ? null : /* @__PURE__ */ jsxs("div", {
+			className: "vgui-spin-box__steppers",
+			children: [steppers(1, "Increase", atMax), steppers(-1, "Decrease", atMin)]
+		})]
+	});
+});
+SpinBox.displayName = "SpinBox";
+//#endregion
+export { SpinBox };
+
+//# sourceMappingURL=SpinBox.js.map

package/dist/components/SpinBox/SpinBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinBox.js","names":[],"sources":["../../../src/components/SpinBox/SpinBox.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from 'react'\nimport type {\n  ChangeEvent as ReactChangeEvent,\n  FocusEvent as ReactFocusEvent,\n  InputHTMLAttributes,\n  KeyboardEvent as ReactKeyboardEvent,\n  PointerEvent as ReactPointerEvent,\n} from 'react'\n\nimport './SpinBox.css'\n\n/** Hold-to-repeat: the conventional wait before the first repeat, then the rate. */\nconst REPEAT_DELAY = 500\nconst REPEAT_INTERVAL = 50\n\nconst decimalsOf = (n: number) => {\n  const text = String(n)\n  const dot = text.indexOf('.')\n  return dot === -1 ? 0 : text.length - dot - 1\n}\n\nconst round = (n: number, decimals: number) => Number(n.toFixed(decimals))\n\nconst toDisplay = (n: number | undefined) => (n === undefined || !Number.isFinite(n) ? '' : String(n))\n\nexport interface SpinBoxProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'type'> {\n  /** Current value. `undefined` renders the input empty. */\n  value?: number\n  /** Called with the new value on every accepted change. */\n  onValueChange?: (value: number) => void\n  /** Lower bound, inclusive. */\n  min?: number\n  /** Upper bound, inclusive. */\n  max?: number\n  /** Increment applied by the steppers and by ArrowUp/ArrowDown. */\n  step?: number\n  /** Allow fractional values. Switches keyboard input to a decimal keyboard. */\n  decimal?: boolean\n  /** Wrap past the bounds instead of disabling the stepper. Off by default. */\n  wrap?: boolean\n  /** Hide the stepper column. Arrow keys still work. */\n  noSteppers?: boolean\n  /** Lay the steppers out side by side. */\n  horizontal?: boolean\n  /** Compact 18px variant, for dense rows. */\n  small?: boolean\n  /** Text announced in place of the raw number, e.g. \"16 players\". */\n  valueText?: string\n}\n\nexport const SpinBox = forwardRef<HTMLInputElement, SpinBoxProps>(function SpinBox(\n  {\n    className,\n    value,\n    onValueChange,\n    min,\n    max,\n    step = 1,\n    decimal = false,\n    wrap = false,\n    noSteppers = false,\n    horizontal = false,\n    small = false,\n    valueText,\n    defaultValue,\n    disabled = false,\n    inputMode,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    ...rest\n  },\n  ref,\n) {\n  const seed = value !== undefined ? value : defaultValue !== undefined ? Number(defaultValue) : undefined\n  const [internalValue, setInternalValue] = useState<number | undefined>(seed)\n  const current = value !== undefined ? value : internalValue\n\n  const stepDecimals = decimalsOf(step)\n  /* `--decimal` keeps whatever precision the user typed, never less than the step's. */\n  const shapeTyped = (n: number) => (decimal ? round(n, Math.max(stepDecimals, decimalsOf(n))) : Math.round(n))\n\n  const [draft, setDraft] = useState(() => toDisplay(seed))\n  const [seen, setSeen] = useState<number | undefined>(current)\n  const focusValue = useRef<number | undefined>(current)\n\n  /*\n   * Keep the draft in step with the value when it is changed from the outside.\n   * Committing sets the draft directly, so this only fires for prop changes.\n   */\n  if (seen !== current) {\n    setSeen(current)\n    setDraft(toDisplay(current))\n  }\n\n  const bound = (n: number) => {\n    let next = n\n    if (min !== undefined && next < min) next = min\n    if (max !== undefined && next > max) next = max\n    return next\n  }\n\n  const commit = (next: number) => {\n    const bounded = bound(next)\n    /* A controlled box shows the prop, not the draft, unless the value was accepted. */\n    setDraft(toDisplay(value !== undefined && bounded !== current ? current : bounded))\n    if (bounded === current) return\n    if (value === undefined) setInternalValue(bounded)\n    onValueChange?.(bounded)\n  }\n\n  /** Typed input is clamped and loses any trailing noise. */\n  const commitDraft = () => {\n    const trimmed = draft.trim()\n    if (trimmed === '') {\n      setDraft(toDisplay(current))\n      return\n    }\n    const parsed = Number(decimal ? trimmed.replace(',', '.') : trimmed)\n    if (!Number.isFinite(parsed)) {\n      setDraft(toDisplay(current))\n      return\n    }\n    commit(shapeTyped(parsed))\n  }\n\n  const stepTo = (delta: number) => {\n    const base = current ?? (delta > 0 ? (min ?? 0) : (max ?? 0))\n    let next = round(base + delta, Math.max(stepDecimals, decimalsOf(base)))\n    if (wrap) {\n      if (max !== undefined && next > max) next = min ?? next\n      else if (min !== undefined && next < min) next = max ?? next\n    }\n    return bound(next)\n  }\n\n  /** Returns whether anything moved, so hold-to-repeat can stop at a bound. */\n  const stepBy = (delta: number) => {\n    const next = stepTo(delta)\n    if (next === current) return false\n    commit(next)\n    return true\n  }\n\n  const stepRef = useRef(stepBy)\n  useEffect(() => {\n    stepRef.current = stepBy\n  })\n\n  const timer = useRef<number | undefined>(undefined)\n  const repeated = useRef(false)\n  const pointerHandled = useRef(false)\n\n  const stopRepeat = () => {\n    if (timer.current !== undefined) {\n      window.clearTimeout(timer.current)\n      timer.current = undefined\n    }\n  }\n\n  useEffect(() => stopRepeat, [])\n\n  const startRepeat = (delta: number) => {\n    stopRepeat()\n    repeated.current = false\n    const tick = () => {\n      if (!stepRef.current(delta)) {\n        stopRepeat()\n        return\n      }\n      repeated.current = true\n      timer.current = window.setTimeout(tick, REPEAT_INTERVAL)\n    }\n    timer.current = window.setTimeout(tick, REPEAT_DELAY)\n  }\n\n  const handleStepPointerDown = (delta: number) => (event: ReactPointerEvent<HTMLButtonElement>) => {\n    if (event.button !== 0) return\n    pointerHandled.current = true\n    if (!stepRef.current(delta)) return\n    startRepeat(delta)\n  }\n\n  /* A synthetic activation (a screen reader, say) never sends a pointer event. */\n  const handleStepClick = (delta: number) => () => {\n    if (pointerHandled.current) {\n      pointerHandled.current = false\n      return\n    }\n    stepRef.current(delta)\n  }\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event)\n    if (event.defaultPrevented) return\n\n    switch (event.key) {\n      case 'ArrowUp':\n      case 'ArrowDown': {\n        event.preventDefault()\n        stepBy(event.key === 'ArrowUp' ? step : -step)\n        break\n      }\n      case 'PageUp':\n      case 'PageDown': {\n        event.preventDefault()\n        stepBy(event.key === 'PageUp' ? step * 10 : step * -10)\n        break\n      }\n      case 'Home': {\n        if (min === undefined) break\n        event.preventDefault()\n        commit(min)\n        break\n      }\n      case 'End': {\n        if (max === undefined) break\n        event.preventDefault()\n        commit(max)\n        break\n      }\n      case 'Escape': {\n        /* Back to whatever the control held when it was focused. */\n        if (focusValue.current !== undefined) commit(focusValue.current)\n        else setDraft(toDisplay(current))\n        break\n      }\n      case 'Enter': {\n        commitDraft()\n        break\n      }\n      default:\n        break\n    }\n  }\n\n  /* The field is controlled by its own draft; nothing is emitted until commit. */\n  const handleChange = (event: ReactChangeEvent<HTMLInputElement>) => {\n    setDraft(event.currentTarget.value)\n  }\n\n  const handleFocus = (event: ReactFocusEvent<HTMLInputElement>) => {\n    focusValue.current = current\n    onFocus?.(event)\n  }\n\n  const handleBlur = (event: ReactFocusEvent<HTMLInputElement>) => {\n    onBlur?.(event)\n    commitDraft()\n  }\n\n  const atMin = min !== undefined && current !== undefined && current <= min\n  const atMax = max !== undefined && current !== undefined && current >= max\n\n  const classes = ['vgui-spin-box']\n  if (horizontal) classes.push('vgui-spin-box--horizontal')\n  if (small) classes.push('vgui-spin-box--small')\n  if (noSteppers) classes.push('vgui-spin-box--no-steppers')\n  if (className) classes.push(className)\n\n  const steppers = (delta: 1 | -1, label: string, blocked: boolean) => (\n    <button\n      type=\"button\"\n      className={`vgui-spin-box__step vgui-spin-box__step--${delta === 1 ? 'up' : 'down'}`}\n      aria-label={label}\n      /* Deliberately out of the tab order: the arrow keys replace them. */\n      tabIndex={-1}\n      disabled={disabled || (!wrap && blocked)}\n      onPointerDown={handleStepPointerDown(delta * step)}\n      onPointerUp={stopRepeat}\n      onPointerLeave={stopRepeat}\n      onPointerCancel={stopRepeat}\n      onClick={handleStepClick(delta * step)}\n    >\n      <span className=\"vgui-spin-box__glyph\" aria-hidden=\"true\" />\n    </button>\n  )\n\n  return (\n    <div className={classes.join(' ')} role=\"group\" aria-disabled={disabled || undefined}>\n      <input\n        ref={ref}\n        className=\"vgui-spin-box__input\"\n        type=\"text\"\n        role=\"spinbutton\"\n        aria-valuenow={current}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={valueText}\n        inputMode={inputMode ?? (decimal ? 'decimal' : 'numeric')}\n        disabled={disabled}\n        value={draft}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      />\n      {noSteppers ? null : (\n        <div className=\"vgui-spin-box__steppers\">\n          {steppers(1, 'Increase', atMax)}\n          {steppers(-1, 'Decrease', atMin)}\n        </div>\n      )}\n    </div>\n  )\n})\n\nSpinBox.displayName = 'SpinBox'\n"],"mappings":"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"}

package/dist/components/SpinBox/index.d.ts

@@ -0,0 +1,3 @@
+export { SpinBox } from './SpinBox';
+export type { SpinBoxProps } from './SpinBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/SpinBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SpinBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/Spinner/Spinner.css

@@ -0,0 +1,137 @@
+/*
+ * Green Steam throbber (`minithrobber01..12`).
+ *
+ * Valve's twelve 20×20 `.tga` frames are copyrighted artwork and this package is
+ * redistributable, so the default is a procedural stand-in that reproduces the
+ * two things that make the original read as a turn-of-the-millennium throbber:
+ * twelve HARD steps (`steps(12, end)`), and a flat trailing fade rather than a
+ * gradient (docs/components/Spinner.md). A consumer who owns the artwork can
+ * point at their own sheet with the `frames` prop.
+ *
+ * The animation is CSS-only — no `requestAnimationFrame`, no `setInterval` — so
+ * it cannot leak a timer, and it is switched off wholesale under
+ * `prefers-reduced-motion`.
+ *
+ * `--vgui-spinner-size`, `--vgui-spinner-duration` and `--vgui-spinner-easing`
+ * are component-local and declared here, per foundations.md §4.
+ */
+
+.vgui-spinner {
+  --vgui-spinner-size: 20px;
+  --vgui-spinner-duration: 1.2s;
+  --vgui-spinner-easing: steps(12, end);
+
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--vgui-spinner-size);
+  block-size: var(--vgui-spinner-size);
+  color: var(--vgui-text-strong);
+}
+
+/* Twelve bars, each rotated 30° further than the last. */
+.vgui-spinner__frame {
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  animation: vgui-spinner-step var(--vgui-spinner-duration) var(--vgui-spinner-easing)
+    infinite;
+}
+
+.vgui-spinner__frame::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  /* Twelve hard steps of a fading wedge: two discrete opacity plateaus, no ramp. */
+  background: conic-gradient(
+    from 0deg,
+    currentColor 0deg 30deg,
+    color-mix(in srgb, currentColor 55%, transparent) 30deg 60deg,
+    transparent 60deg 360deg
+  );
+  /* Only the annulus is painted, so the sweep reads as a ring of bars.
+   * `currentColor` is opaque, which is all a mask's alpha channel needs, so the
+   * mask needs no colour literal. */
+  mask: radial-gradient(circle, transparent 0 30%, currentColor 30% 45%, transparent 45%);
+}
+
+@keyframes vgui-spinner-step {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The at-rest frame (`minithrobberinactive.tga`): a still ring. */
+.vgui-spinner--paused .vgui-spinner__frame {
+  animation: none;
+}
+
+.vgui-spinner--paused .vgui-spinner__frame::before {
+  background: currentColor;
+}
+
+/* A 12-bar sweep is illegible below 16px, so the plate is generous instead. */
+.vgui-spinner--block {
+  --vgui-spinner-size: 32px;
+
+  inline-size: 100%;
+  block-size: 100%;
+  min-inline-size: 100px;
+  min-block-size: 75px;
+  background-color: var(--vgui-surface-dark);
+}
+
+/* `--inline-label`: the 20×20 throbber with its label beside it. */
+.vgui-spinner--inline-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  inline-size: auto;
+  block-size: auto;
+}
+
+.vgui-spinner--inline-label .vgui-spinner__frame {
+  flex: none;
+  inline-size: var(--vgui-spinner-size);
+  block-size: var(--vgui-spinner-size);
+}
+
+.vgui-spinner__label {
+  color: var(--vgui-text-muted);
+  font-size: var(--vgui-font-size-small);
+  white-space: nowrap;
+}
+
+/* A consumer's own frame set, stepped the same way. */
+.vgui-spinner--sprite .vgui-spinner__frame {
+  background-image: var(--vgui-spinner-sheet);
+  background-repeat: no-repeat;
+  background-size: calc(12 * var(--vgui-spinner-size)) 100%;
+  animation-name: vgui-spinner-sheet;
+}
+
+.vgui-spinner--sprite .vgui-spinner__frame::before {
+  background: none;
+  mask: none;
+}
+
+@keyframes vgui-spinner-sheet {
+  to {
+    background-position-x: calc(-12 * var(--vgui-spinner-size));
+  }
+}
+
+/*
+ * Reduced motion is mandatory, not a nicety (WCAG 2.3.3 / 2.2.2). The spinner
+ * becomes a static ring; because a still spinner is ambiguous, a consumer must
+ * pair it with a text label — `showLabel` is how.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .vgui-spinner__frame {
+    animation: none;
+  }
+
+  .vgui-spinner__frame::before {
+    background: currentColor;
+  }
+}

package/dist/components/Spinner/Spinner.css.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/components/Spinner/Spinner.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from 'react';
+import './Spinner.css';
+export interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Native size in pixels. 20 is the corpus value. */
+    size?: number;
+    /** Fill the container and paint a black plate. The screenshot-loading case. */
+    block?: boolean;
+    /** Draw the at-rest frame instead of animating. */
+    paused?: boolean;
+    /** Accessible name announced to assistive tech. Defaults to "Loading". */
+    label?: string;
+    /** Repeat the label as visible text beside the spinner. */
+    showLabel?: boolean;
+    /** Sprite-sheet URL. When omitted the spinner is drawn procedurally. */
+    frames?: string;
+    /** Rotation duration in milliseconds. Defaults to 1200. */
+    durationMs?: number;
+}
+export declare const Spinner: import("react").ForwardRefExoticComponent<SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

package/dist/components/Spinner/Spinner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,OAAO,CAAA;AAE1D,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,YAAa,SAAQ,cAAc,CAAC,eAAe,CAAC;IACnE,qDAAqD;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,mDAAmD;IACnD,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,wEAAwE;IACxE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,OAAO,0GA8ClB,CAAA"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,36 @@
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "./Spinner.css";
+//#region src/components/Spinner/Spinner.tsx
+var Spinner = forwardRef(function Spinner({ className, size, block = false, paused = false, label = "Loading", showLabel = false, frames, durationMs, style, children, ...rest }, ref) {
+	const classes = ["vgui-spinner"];
+	if (block) classes.push("vgui-spinner--block");
+	if (paused) classes.push("vgui-spinner--paused");
+	if (frames !== void 0) classes.push("vgui-spinner--sprite");
+	if (showLabel) classes.push("vgui-spinner--inline-label");
+	if (className) classes.push(className);
+	const inlineStyle = { ...style };
+	if (size !== void 0) inlineStyle["--vgui-spinner-size"] = `${size}px`;
+	if (durationMs !== void 0) inlineStyle["--vgui-spinner-duration"] = `${durationMs}ms`;
+	if (frames !== void 0) inlineStyle["--vgui-spinner-sheet"] = `url("${frames}")`;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		role: "progressbar",
+		"aria-label": label,
+		className: classes.join(" "),
+		style: inlineStyle,
+		...rest,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "vgui-spinner__frame",
+			"aria-hidden": "true"
+		}), showLabel && /* @__PURE__ */ jsx("span", {
+			className: "vgui-spinner__label",
+			children: children ?? label
+		})]
+	});
+});
+Spinner.displayName = "Spinner";
+//#endregion
+export { Spinner };
+
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","names":[],"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport type { CSSProperties, HTMLAttributes } from 'react'\n\nimport './Spinner.css'\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Native size in pixels. 20 is the corpus value. */\n  size?: number\n  /** Fill the container and paint a black plate. The screenshot-loading case. */\n  block?: boolean\n  /** Draw the at-rest frame instead of animating. */\n  paused?: boolean\n  /** Accessible name announced to assistive tech. Defaults to \"Loading\". */\n  label?: string\n  /** Repeat the label as visible text beside the spinner. */\n  showLabel?: boolean\n  /** Sprite-sheet URL. When omitted the spinner is drawn procedurally. */\n  frames?: string\n  /** Rotation duration in milliseconds. Defaults to 1200. */\n  durationMs?: number\n}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(function Spinner(\n  {\n    className,\n    size,\n    block = false,\n    paused = false,\n    label = 'Loading',\n    showLabel = false,\n    frames,\n    durationMs,\n    style,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const classes = ['vgui-spinner']\n  if (block) classes.push('vgui-spinner--block')\n  if (paused) classes.push('vgui-spinner--paused')\n  if (frames !== undefined) classes.push('vgui-spinner--sprite')\n  if (showLabel) classes.push('vgui-spinner--inline-label')\n  if (className) classes.push(className)\n\n  /*\n   * `size` and `durationMs` are written as inline custom properties rather than\n   * dimensions so that the component-local tokens stay overridable from CSS —\n   * `--block` raises the size to 32px and would otherwise be clobbered.\n   */\n  const inlineStyle = { ...style } as CSSProperties & Record<string, string>\n  if (size !== undefined) inlineStyle['--vgui-spinner-size'] = `${size}px`\n  if (durationMs !== undefined) inlineStyle['--vgui-spinner-duration'] = `${durationMs}ms`\n  if (frames !== undefined) inlineStyle['--vgui-spinner-sheet'] = `url(\"${frames}\")`\n\n  return (\n    <span\n      ref={ref}\n      role=\"progressbar\"\n      aria-label={label}\n      className={classes.join(' ')}\n      style={inlineStyle}\n      {...rest}\n    >\n      <span className=\"vgui-spinner__frame\" aria-hidden=\"true\" />\n      {showLabel && <span className=\"vgui-spinner__label\">{children ?? label}</span>}\n    </span>\n  )\n})\n\nSpinner.displayName = 'Spinner'\n"],"mappings":";;;;AAsBA,IAAa,UAAU,WAA0C,SAAS,QACxE,EACE,WACA,MACA,QAAQ,OACR,SAAS,OACT,QAAQ,WACR,YAAY,OACZ,QACA,YACA,OACA,UACA,GAAG,QAEL,KACA;CACA,MAAM,UAAU,CAAC,cAAc;CAC/B,IAAI,OAAO,QAAQ,KAAK,qBAAqB;CAC7C,IAAI,QAAQ,QAAQ,KAAK,sBAAsB;CAC/C,IAAI,WAAW,KAAA,GAAW,QAAQ,KAAK,sBAAsB;CAC7D,IAAI,WAAW,QAAQ,KAAK,4BAA4B;CACxD,IAAI,WAAW,QAAQ,KAAK,SAAS;CAOrC,MAAM,cAAc,EAAE,GAAG,MAAM;CAC/B,IAAI,SAAS,KAAA,GAAW,YAAY,yBAAyB,GAAG,KAAK;CACrE,IAAI,eAAe,KAAA,GAAW,YAAY,6BAA6B,GAAG,WAAW;CACrF,IAAI,WAAW,KAAA,GAAW,YAAY,0BAA0B,QAAQ,OAAO;CAE/E,OACE,qBAAC,QAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,WAAW,QAAQ,KAAK,GAAG;EAC3B,OAAO;EACP,GAAI;EANN,UAAA,CAQE,oBAAC,QAAD;GAAM,WAAU;GAAsB,eAAY;EAAQ,CAAA,GACzD,aAAa,oBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA,YAAY;EAAY,CAAA,CACzE;;AAEV,CAAC;AAED,QAAQ,cAAc"}

package/dist/components/Spinner/index.d.ts

@@ -0,0 +1,3 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA"}