stimeo-ui 0.4.0 → 0.6.0

data/dist/controllers/network_status_controller.js

@@ -124,9 +124,7 @@ var NetworkStatusController = class extends Controller {
   #showOffline() {
     this.#timers.clearAll();
     if (this.hasOnlineTarget) this.onlineTarget.hidden = true;
-    if (this.hasOfflineTarget) {
-      this.offlineTarget.hidden = false;
-    }
+    if (this.hasOfflineTarget) this.offlineTarget.hidden = false;
   }
   /** Shows the recovery banner, optionally auto-hiding it after `onlineAutoHide`. */
   #showOnline() {

data/dist/controllers/number_input_controller.js

@@ -8,6 +8,123 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/attribute_lease.ts
+var AttributeLease = class {
+  #attribute;
+  #records = /* @__PURE__ */ new Map();
+  /** @param attribute - The attribute whose temporary values this lease owns. */
+  constructor(attribute) {
+    this.#attribute = attribute;
+  }
+  /** Writes or removes the leased attribute while preserving its authored value. */
+  write(element, value) {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.written = value;
+    } else {
+      this.#records.set(element, {
+        original: element.getAttribute(this.#attribute),
+        written: value
+      });
+    }
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
+  }
+  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    if (element.getAttribute(this.#attribute) !== record.written) return;
+    if (record.original === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, record.original);
+  }
+  /** Returns every outstanding lease using the same ownership check as {@link return}. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+};
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    this.#observedTargets.add(target);
+  }
+  /** Stops tracking one target and clears any active composition it owned. */
+  unobserve(target) {
+    if (!this.#observedTargets.delete(target)) return;
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    this.#activeTargets.delete(target);
+  }
+  /** Releases every listener and clears state so reconnect starts cleanly. */
+  disconnect() {
+    for (const target of this.#observedTargets) {
+      target.removeEventListener("compositionstart", this.#handleStart);
+      target.removeEventListener("compositionend", this.#handleEnd);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -75,7 +192,114 @@ var SafeInterval = class extends TimerRegistry {
   }
 };
 
+// src/utils/stepped_value.ts
+function effectiveStep(step) {
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+function snapSteppedValue(raw, range) {
+  if (!(range.min <= range.max)) return finiteFallback(range.min, range.max);
+  const input = Number.isNaN(raw) ? finiteFallback(range.min, range.max) : raw;
+  const clamped = Math.min(range.max, Math.max(range.min, input));
+  const step = effectiveStep(range.step);
+  const base = stepBase(range);
+  const candidates = [];
+  if (Number.isFinite(range.min)) candidates.push(range.min);
+  if (Number.isFinite(range.max)) candidates.push(range.max);
+  const gridPosition = (clamped - base) / step;
+  if (Number.isFinite(gridPosition)) {
+    addGridCandidate(candidates, Math.floor(gridPosition), range, base, step);
+    addGridCandidate(candidates, Math.ceil(gridPosition), range, base, step);
+  }
+  if (candidates.length === 0) return clamped;
+  let nearest = candidates[0];
+  let nearestDistance = Math.abs(clamped - nearest);
+  for (const candidate of candidates.slice(1)) {
+    const distance = Math.abs(clamped - candidate);
+    if (distance < nearestDistance || nearlyEqual(distance, nearestDistance) && candidate > nearest) {
+      nearest = candidate;
+      nearestDistance = distance;
+    }
+  }
+  return nearest;
+}
+function stepSteppedValue(current, count, range) {
+  const value = snapSteppedValue(current, range);
+  const distance = Math.abs(Math.trunc(count));
+  if (!Number.isFinite(distance) || distance === 0) return value;
+  const direction = Math.sign(count);
+  const adjacent = adjacentSteppedValue(value, direction, range);
+  const raw = adjacent + direction * (distance - 1) * effectiveStep(range.step);
+  return snapSteppedValue(raw, range);
+}
+function adjacentSteppedValue(current, direction, range) {
+  const step = effectiveStep(range.step);
+  const base = stepBase(range);
+  const candidates = [];
+  if (direction > 0) {
+    const position2 = (current - base) / step;
+    if (Number.isFinite(position2)) {
+      let gridIndex = Math.floor(position2) + 1;
+      let candidate = cleanGridValue(base + gridIndex * step, base, step);
+      if (candidate < current || nearlyEqual(candidate, current)) {
+        gridIndex += 1;
+        candidate = cleanGridValue(base + gridIndex * step, base, step);
+      }
+      if (candidate > current && !nearlyEqual(candidate, current) && within(candidate, range.min, range.max)) {
+        candidates.push(clamp(candidate, range));
+      }
+    }
+    return clamp(Math.min(...candidates), range);
+  }
+  const position = (current - base) / step;
+  if (Number.isFinite(position)) {
+    let gridIndex = Math.ceil(position) - 1;
+    let candidate = cleanGridValue(base + gridIndex * step, base, step);
+    if (candidate > current || nearlyEqual(candidate, current)) {
+      gridIndex -= 1;
+      candidate = cleanGridValue(base + gridIndex * step, base, step);
+    }
+    if (candidate < current && !nearlyEqual(candidate, current) && within(candidate, range.min, range.max)) {
+      candidates.push(clamp(candidate, range));
+    }
+  }
+  return clamp(Math.max(...candidates), range);
+}
+function addGridCandidate(candidates, index, range, base, step) {
+  const candidate = cleanGridValue(base + index * step, base, step);
+  if (within(candidate, range.min, range.max)) candidates.push(clamp(candidate, range));
+}
+function stepBase(range) {
+  if (range.base !== void 0 && Number.isFinite(range.base)) return range.base;
+  return Number.isFinite(range.min) ? range.min : 0;
+}
+function cleanGridValue(value, base, step) {
+  const precision = Math.max(decimalPlaces(base), decimalPlaces(step));
+  return precision <= 100 ? Number(value.toFixed(precision)) : value;
+}
+function decimalPlaces(value) {
+  const [coefficient = "", exponentText] = Math.abs(value).toString().toLowerCase().split("e");
+  const fractionLength = coefficient.split(".")[1]?.length ?? 0;
+  const exponent = exponentText === void 0 ? 0 : Number(exponentText);
+  return Math.max(0, fractionLength - exponent);
+}
+function within(value, min, max) {
+  return (value > min || nearlyEqual(value, min)) && (value < max || nearlyEqual(value, max));
+}
+function clamp(value, range) {
+  return Math.min(range.max, Math.max(range.min, value));
+}
+function nearlyEqual(left, right) {
+  const scale = Math.max(Math.abs(left), Math.abs(right));
+  return Number.isFinite(left) && Number.isFinite(right) && Math.abs(left - right) <= Number.EPSILON * scale;
+}
+function finiteFallback(min, max) {
+  if (Number.isFinite(min)) return min;
+  if (Number.isFinite(max)) return max;
+  return 0;
+}
+
 // src/controllers/number_input_controller.ts
+var OWNED_DISABLED = "data-number-input-disabled";
 var NumberInputController = class _NumberInputController extends Controller {
   static targets = ["input", "increment", "decrement"];
   static values = {
@@ -85,7 +309,7 @@ var NumberInputController = class _NumberInputController extends Controller {
     pageStep: { type: Number, default: 0 }
   };
   static actions = ["decrement", "increment", "onInput", "onKeydown"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
   /** Delay (ms) a button must be held before auto-repeat starts. */
   static #HOLD_DELAY_MS = 400;
   /** Interval (ms) between auto-repeat steps once a hold has started. */
@@ -97,8 +321,18 @@ var NumberInputController = class _NumberInputController extends Controller {
    * of poisoning the next legitimate click.
    */
   static #SUPPRESS_RESET_MS = 250;
-  /** Aborts the pointer listeners on disconnect so none outlive the element. */
-  #guards = null;
+  /** Aborts global pointer guards on disconnect so none outlive the element. */
+  #globalGuards = null;
+  /** Per-target guards allow an old button to be released without touching its replacement. */
+  #buttonGuards = /* @__PURE__ */ new Map();
+  /** Tracks IME lifecycle on the current input, including confirming keys without a signal. */
+  #composition = new CompositionTracker();
+  /** Restores authored custom-spinbutton ARIA when a target leaves or the controller stops. */
+  #ariaValueNow = new AttributeLease("aria-valuenow");
+  #ariaValueMin = new AttributeLease("aria-valuemin");
+  #ariaValueMax = new AttributeLease("aria-valuemax");
+  /** Last reconciled or user-committed numeric value. */
+  #lastValue = null;
   /** Timers for the hold delay and the suppress-reset safety net. */
   #holdTimeouts = new SafeTimeout();
   /** The running auto-repeat interval (one at a time). */
@@ -109,66 +343,134 @@ var NumberInputController = class _NumberInputController extends Controller {
   #repeatedDuringHold = false;
   /** True when the next `click` is the trailing one after a hold and must be ignored. */
   #suppressNextClick = false;
+  /** Button and pointer that own the current hold, so other instances/pointers cannot end it. */
+  #holdButton = null;
+  #holdPointerId = null;
+  /** Collapses runtime range/step changes into one input reconciliation. */
+  #repaint = new MicrotaskCoalescer(() => this.#reconcile());
   /** Normalizes any initial value and wires the focus/hold pointer guards. */
   connect() {
-    if (!this.hasInputTarget) return;
-    if (this.inputTarget.value.trim() !== "") {
-      this.#write(this.#normalize(this.#currentValue()));
-    } else {
-      this.#updateButtons(this.#currentValue());
-    }
-    this.#guards = new AbortController();
-    const { signal } = this.#guards;
-    if (this.hasIncrementTarget) this.#wireButton(this.incrementTarget, this.stepValue, signal);
-    if (this.hasDecrementTarget) this.#wireButton(this.decrementTarget, -this.stepValue, signal);
-    window.addEventListener("pointerup", this.#stopHold, { signal });
-    window.addEventListener("pointercancel", this.#stopHold, { signal });
-    window.addEventListener("blur", this.#stopHold, { signal });
-  }
-  /** Releases the pointer guards and tears down every pending timer and hold state. */
+    this.#repaint.activate();
+    this.#globalGuards = new AbortController();
+    const { signal } = this.#globalGuards;
+    for (const button of this.incrementTargets) this.#wireButton(button, 1);
+    for (const button of this.decrementTargets) this.#wireButton(button, -1);
+    window.addEventListener("pointerup", this.#onPointerEnd, { signal });
+    window.addEventListener("pointercancel", this.#onPointerEnd, { signal });
+    window.addEventListener("blur", this.#onWindowBlur, { signal });
+    this.#reconcile();
+  }
+  /** Releases listeners, derived attributes, timers, and transient value state. */
   disconnect() {
-    this.#guards?.abort();
-    this.#guards = null;
-    this.#holdActive = false;
+    this.#repaint.cancel();
+    this.#composition.disconnect();
+    this.#globalGuards?.abort();
+    this.#globalGuards = null;
+    const buttons = /* @__PURE__ */ new Set([
+      ...this.#buttonGuards.keys(),
+      ...this.incrementTargets,
+      ...this.decrementTargets
+    ]);
+    for (const guard of this.#buttonGuards.values()) guard.abort();
+    this.#buttonGuards.clear();
+    for (const button of buttons) this.#releaseButtonState(button);
+    this.#stopHold(false);
     this.#repeatedDuringHold = false;
     this.#suppressNextClick = false;
     this.#holdTimeouts.clearAll();
     this.#holdIntervals.clearAll();
+    this.#ariaValueNow.returnAll();
+    this.#ariaValueMin.returnAll();
+    this.#ariaValueMax.returnAll();
+    this.#lastValue = null;
+  }
+  /** Reconciles the value against a minimum changed by application code or a Turbo morph. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Reconciles the value against a maximum changed by application code or a Turbo morph. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Reconciles the value against a step changed by application code or a Turbo morph. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Tracks and reconciles an input inserted or replaced at runtime. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+    this.#repaint.schedule();
+  }
+  /** Releases ARIA and composition state owned by an input that left the controller. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+    this.#releaseInputAria(input);
+    this.#stopHold(false);
+    this.#lastValue = null;
+    this.#repaint.schedule();
+  }
+  /** Wires focus preservation and hold behavior on a runtime increment target. */
+  incrementTargetConnected(button) {
+    this.#wireButton(button, 1);
+    this.#repaint.schedule();
+  }
+  /** Releases only the increment target that actually disconnected. */
+  incrementTargetDisconnected(button) {
+    this.#unwireButton(button);
+    this.#repaint.schedule();
+  }
+  /** Wires focus preservation and hold behavior on a runtime decrement target. */
+  decrementTargetConnected(button) {
+    this.#wireButton(button, -1);
+    this.#repaint.schedule();
+  }
+  /** Releases only the decrement target that actually disconnected. */
+  decrementTargetDisconnected(button) {
+    this.#unwireButton(button);
+    this.#repaint.schedule();
   }
   /** Increases by one step. Bound via `data-action` (click). */
   increment() {
     if (this.#consumeSuppressedClick()) return;
-    this.#commit(this.#currentValue() + this.stepValue);
+    if (!this.hasInputTarget) return;
+    this.#commitStep(1);
     this.inputTarget.focus();
   }
   /** Decreases by one step. Bound via `data-action` (click). */
   decrement() {
     if (this.#consumeSuppressedClick()) return;
-    this.#commit(this.#currentValue() - this.stepValue);
+    if (!this.hasInputTarget) return;
+    this.#commitStep(-1);
     this.inputTarget.focus();
   }
   /** Clamps and snaps a typed value. Bound via `data-action` (change). */
   onInput() {
-    if (this.inputTarget.value.trim() === "") return;
+    if (!this.hasInputTarget) return;
+    if (this.inputTarget.value.trim() === "") {
+      this.#lastValue = null;
+      this.#reflectEmpty();
+      return;
+    }
     this.#commit(this.#currentValue());
   }
   /** Keyboard stepping per the APG spinbutton model. */
   onKeydown(event) {
+    if (!this.hasInputTarget) return;
+    if (this.#composition.isComposing(event)) return;
     if (isReservedArrowChord(event)) return;
-    const page = this.pageStepValue > 0 ? this.pageStepValue : this.stepValue * 10;
     let next = null;
     switch (event.key) {
       case "ArrowUp":
-        next = this.#currentValue() + this.stepValue;
+        next = stepSteppedValue(this.#currentValue(), 1, this.#steppedRange);
         break;
       case "ArrowDown":
-        next = this.#currentValue() - this.stepValue;
+        next = stepSteppedValue(this.#currentValue(), -1, this.#steppedRange);
         break;
       case "PageUp":
-        next = this.#currentValue() + page;
+        next = this.pageStepValue > 0 ? this.#currentValue() + this.pageStepValue : stepSteppedValue(this.#currentValue(), 10, this.#steppedRange);
         break;
       case "PageDown":
-        next = this.#currentValue() - page;
+        next = this.pageStepValue > 0 ? this.#currentValue() - this.pageStepValue : stepSteppedValue(this.#currentValue(), -10, this.#steppedRange);
         break;
       case "Home":
         if (!Number.isFinite(this.minValue)) return;
@@ -189,31 +491,49 @@ var NumberInputController = class _NumberInputController extends Controller {
    * hold; leaving the button while held stops it (the global listeners cover
    * release/cancel/blur).
    */
-  #wireButton(button, delta, signal) {
-    button.addEventListener("pointerdown", (event) => this.#armHold(event, button, delta), {
-      signal
+  #wireButton(button, direction) {
+    if (this.#buttonGuards.has(button)) return;
+    const guard = new AbortController();
+    this.#buttonGuards.set(button, guard);
+    button.addEventListener("pointerdown", (event) => this.#armHold(event, button, direction), {
+      signal: guard.signal
     });
-    button.addEventListener("pointerleave", this.#stopHold, { signal });
+    button.addEventListener(
+      "pointerleave",
+      (event) => {
+        if (this.#holdButton === button && this.#ownsPointer(event)) this.#stopHold();
+      },
+      { signal: guard.signal }
+    );
+  }
+  /** Aborts one target's listeners and returns any state derived onto that button. */
+  #unwireButton(button) {
+    this.#buttonGuards.get(button)?.abort();
+    this.#buttonGuards.delete(button);
+    if (this.#holdButton === button) this.#stopHold(false);
+    this.#releaseButtonState(button);
   }
   /** Starts a hold: focus the input, then schedule the first repeat after a delay. */
-  #armHold(event, button, delta) {
+  #armHold(event, button, direction) {
     const pointerButton = event.button;
     if (typeof pointerButton === "number" && pointerButton !== 0) return;
-    if (button.disabled) return;
+    if (button.disabled || !this.hasInputTarget) return;
     event.preventDefault();
     this.inputTarget.focus();
-    this.#stopHold();
+    this.#stopHold(false);
     this.#holdActive = true;
+    this.#holdButton = button;
+    this.#holdPointerId = this.#pointerId(event);
     this.#repeatedDuringHold = false;
     this.#suppressNextClick = false;
     this.#holdTimeouts.set(() => {
-      if (!this.#commit(this.#currentValue() + delta)) {
+      if (!this.#commitStep(direction)) {
         this.#stopHold();
         return;
       }
       this.#repeatedDuringHold = true;
       this.#holdIntervals.set(() => {
-        if (!this.#commit(this.#currentValue() + delta)) this.#stopHold();
+        if (!this.#commitStep(direction)) this.#stopHold();
       }, _NumberInputController.#HOLD_REPEAT_MS);
     }, _NumberInputController.#HOLD_DELAY_MS);
   }
@@ -222,18 +542,39 @@ var NumberInputController = class _NumberInputController extends Controller {
    * trailing synthetic `click` must be ignored, so it is suppressed until the
    * click consumes it or a short safety-net timeout clears it.
    */
-  #stopHold = () => {
+  #stopHold(suppressTrailingClick = true) {
     if (!this.#holdActive) return;
     this.#holdActive = false;
+    this.#holdButton = null;
+    this.#holdPointerId = null;
     this.#holdTimeouts.clearAll();
     this.#holdIntervals.clearAll();
-    if (this.#repeatedDuringHold) {
+    if (suppressTrailingClick && this.#repeatedDuringHold) {
       this.#suppressNextClick = true;
       this.#holdTimeouts.set(() => {
         this.#suppressNextClick = false;
       }, _NumberInputController.#SUPPRESS_RESET_MS);
+    } else if (!suppressTrailingClick) {
+      this.#suppressNextClick = false;
     }
+  }
+  /** Ends a hold only for its initiating pointer (legacy/synthetic events remain accepted). */
+  #onPointerEnd = (event) => {
+    if (this.#ownsPointer(event)) this.#stopHold();
   };
+  /** Window deactivation is global and always ends the active hold. */
+  #onWindowBlur = () => {
+    this.#stopHold();
+  };
+  /** Extracts pointer identity when the runtime event exposes it. */
+  #pointerId(event) {
+    return event.pointerId ?? null;
+  }
+  /** Whether `event` belongs to the active pointer, with a synthetic-event fallback. */
+  #ownsPointer(event) {
+    const pointerId = this.#pointerId(event);
+    return this.#holdActive && (this.#holdPointerId === null || pointerId === null || pointerId === this.#holdPointerId);
+  }
   /** Consumes a pending trailing-click suppression; returns true if the click was swallowed. */
   #consumeSuppressedClick() {
     if (!this.#suppressNextClick) return false;
@@ -242,36 +583,80 @@ var NumberInputController = class _NumberInputController extends Controller {
     return true;
   }
   /**
-   * Normalizes `raw`, reflects it, and dispatches `change` only when the
-   * displayed value actually changes.
+   * Normalizes `raw`, reflects it, and dispatches `{ value: number }` only when
+   * the committed numeric value differs from the last reconciled value.
    *
    * @returns Whether the value changed (drives the auto-repeat's bound stop).
    */
   #commit(raw) {
     const value = this.#normalize(raw);
-    const changed = this.inputTarget.value !== String(value);
+    const changed = this.#lastValue === null || value !== this.#lastValue;
     this.#write(value);
+    this.#lastValue = value;
     if (changed) this.dispatch("change", { detail: { value } });
     return changed;
   }
-  /** Reflects `value` on the input (and ARIA for non-native hosts) and the buttons. */
-  #write(value) {
-    this.inputTarget.value = String(value);
-    if (this.inputTarget.getAttribute("role") === "spinbutton") {
-      this.inputTarget.setAttribute("aria-valuenow", String(value));
-      if (Number.isFinite(this.minValue)) {
-        this.inputTarget.setAttribute("aria-valuemin", String(this.minValue));
-      }
-      if (Number.isFinite(this.maxValue)) {
-        this.inputTarget.setAttribute("aria-valuemax", String(this.maxValue));
+  /** Commits an adjacent endpoint/grid value and reports whether it moved. */
+  #commitStep(count) {
+    if (!this.hasInputTarget) return false;
+    return this.#commit(stepSteppedValue(this.#currentValue(), count, this.#steppedRange));
+  }
+  /**
+   * Reflects the current value after a range or step morph, reporting a moved
+   * value as `reconcile`.
+   *
+   * @stimeoRenderRoot
+   */
+  #reconcile() {
+    if (!this.hasInputTarget) {
+      this.#lastValue = null;
+      return;
+    }
+    if (this.inputTarget.value.trim() !== "") {
+      const previous = this.#lastValue;
+      const value = this.#normalize(this.#currentValue());
+      this.#write(value);
+      this.#lastValue = value;
+      if (previous !== null && value !== previous) {
+        this.dispatch("reconcile", { detail: { value } });
       }
+    } else {
+      this.#lastValue = null;
+      this.#reflectEmpty();
     }
+  }
+  /** Reflects `value` on the input (and ARIA for non-native hosts) and the buttons. */
+  #write(value) {
+    const input = this.inputTarget;
+    input.value = String(value);
+    this.#syncInputAria(input, value);
     this.#updateButtons(value);
   }
+  /** Reflects a blank value without inventing a numeric `aria-valuenow`. */
+  #reflectEmpty() {
+    this.#syncInputAria(this.inputTarget, null);
+    this.#updateButtons(this.#currentValue());
+  }
+  /** Synchronizes controller-derived ARIA while preserving authored teardown values. */
+  #syncInputAria(input, value) {
+    if (input.getAttribute("role") !== "spinbutton") {
+      this.#releaseInputAria(input);
+      return;
+    }
+    this.#ariaValueNow.write(input, value === null ? null : String(value));
+    this.#ariaValueMin.write(input, Number.isFinite(this.minValue) ? String(this.minValue) : null);
+    this.#ariaValueMax.write(input, Number.isFinite(this.maxValue) ? String(this.maxValue) : null);
+  }
+  /** Returns all custom-spinbutton ARIA leased on `input`. */
+  #releaseInputAria(input) {
+    this.#ariaValueNow.return(input);
+    this.#ariaValueMin.return(input);
+    this.#ariaValueMax.return(input);
+  }
   /** Disables a step button at its bound, returning focus to the input first. */
   #updateButtons(value) {
-    if (this.hasIncrementTarget) this.#toggleButton(this.incrementTarget, value < this.maxValue);
-    if (this.hasDecrementTarget) this.#toggleButton(this.decrementTarget, value > this.minValue);
+    for (const button of this.incrementTargets) this.#toggleButton(button, value < this.maxValue);
+    for (const button of this.decrementTargets) this.#toggleButton(button, value > this.minValue);
   }
   /**
    * Enables or disables a step button at its bound, never disabling one while it
@@ -281,16 +666,22 @@ var NumberInputController = class _NumberInputController extends Controller {
    */
   #toggleButton(button, enabled) {
     if (enabled) {
-      if (button.hasAttribute("data-number-input-disabled")) {
+      if (button.hasAttribute(OWNED_DISABLED)) {
         button.disabled = false;
-        button.removeAttribute("data-number-input-disabled");
+        button.removeAttribute(OWNED_DISABLED);
       }
       return;
     }
     if (button.disabled) return;
-    if (document.activeElement === button) this.inputTarget.focus();
+    if (document.activeElement === button && this.hasInputTarget) this.inputTarget.focus();
     button.disabled = true;
-    button.setAttribute("data-number-input-disabled", "");
+    button.setAttribute(OWNED_DISABLED, "");
+  }
+  /** Returns `disabled` only when its explicit marker still identifies controller ownership. */
+  #releaseButtonState(button) {
+    if (!button.hasAttribute(OWNED_DISABLED)) return;
+    button.disabled = false;
+    button.removeAttribute(OWNED_DISABLED);
   }
   /** The current numeric value, falling back to a finite min (else 0) when blank. */
   #currentValue() {
@@ -300,11 +691,11 @@ var NumberInputController = class _NumberInputController extends Controller {
   }
   /** Clamps to `[min, max]` and snaps to the step grid anchored at a finite min (else 0). */
   #normalize(raw) {
-    const clamped = Math.min(this.maxValue, Math.max(this.minValue, raw));
-    if (this.stepValue <= 0) return clamped;
-    const base = Number.isFinite(this.minValue) ? this.minValue : 0;
-    const stepped = Math.round((clamped - base) / this.stepValue) * this.stepValue + base;
-    return Math.min(this.maxValue, Math.max(this.minValue, stepped));
+    return snapSteppedValue(raw, this.#steppedRange);
+  }
+  /** Shared range configuration; finite endpoints remain allowed off the grid. */
+  get #steppedRange() {
+    return { min: this.minValue, max: this.maxValue, step: this.stepValue };
   }
 };