stimeo-ui 0.3.0 → 0.5.0

data/dist/controllers/meter_controller.js

@@ -2,6 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/meter_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 // src/utils/coerce.ts
 function toFiniteNumber(raw) {
   if (raw === null || raw === void 0 || raw === "") return null;
@@ -9,10 +26,61 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// 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/range.ts
+function rangeFraction(value, min, max) {
+  const span = max - min;
+  if (!(span > 0)) return 0;
+  const clamped = Math.min(max, Math.max(min, value));
+  let fraction;
+  if (Number.isFinite(span)) {
+    fraction = (clamped - min) / span;
+  } else {
+    const scale = Math.max(Math.abs(min), Math.abs(max));
+    fraction = (clamped / scale - min / scale) / (max / scale - min / scale);
+  }
+  if (!Number.isFinite(fraction)) return 0;
+  return Math.min(1, Math.max(0, fraction));
+}
+
 // src/controllers/meter_controller.ts
+var OWNED_VALUE_TEXT = "data-stimeo--meter-owns-valuetext";
 var MeterController = class extends Controller {
   static targets = ["bar"];
   static values = {
+    announceText: { type: String, default: "" },
     value: { type: Number, default: 0 },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
@@ -23,9 +91,24 @@ var MeterController = class extends Controller {
   };
   static actions = ["setValue"];
   static events = ["change"];
+  /**
+   * Collapses a morph that swaps several render inputs at once into one repaint.
+   * A single update usually rewrites the whole set, and each Value would otherwise
+   * repaint on its own.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
+  /** The segment last announced, so only a change is read out. */
+  #announcedState = null;
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
   /**
    * Updates the measured value from an action param (`amount`) or a
    * `detail.value` CustomEvent, syncs ARIA and `data-state`, and dispatches
@@ -35,59 +118,97 @@ var MeterController = class extends Controller {
     const next = toFiniteNumber(event.params?.amount ?? event.detail?.value);
     if (next === null) return;
     this.valueValue = this.#clamp(next);
-    this.#render();
-    this.dispatch("change", {
-      detail: { value: this.valueValue, ratio: this.#ratio, state: this.#state }
-    });
+    const reading = this.#render();
+    this.dispatch("change", { detail: reading });
+    if (reading.state !== this.#announcedState) {
+      this.#announcedState = reading.state;
+      announce(
+        fillTemplate(this.announceTextValue, { state: reading.state, value: reading.value })
+      );
+    }
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `low` at runtime. */
+  lowValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `high` at runtime. */
+  highValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */
+  valueTextValueChanged() {
+    this.#repaint.schedule();
   }
   /** Clamps `raw` into the configured `[min, max]` range. */
   #clamp(raw) {
     return Math.min(this.maxValue, Math.max(this.minValue, raw));
   }
-  /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */
-  get #ratio() {
-    const span = this.maxValue - this.minValue;
-    if (span <= 0) return 0;
-    return (this.#clamp(this.valueValue) - this.minValue) / span;
-  }
   /** Whether a threshold attribute is present (absent = no threshold). */
   #hasThreshold(name) {
     return this.element.hasAttribute(`data-stimeo--meter-${name}-value`);
   }
   /**
-   * Classifies the value into a `low`/`medium`/`high` segment. Values at or
-   * below `low` are `low`; at or above `high` are `high`; otherwise `medium`.
-   * With neither threshold present, everything is `medium`.
+   * Classifies `value` into a `low`/`medium`/`high` segment. Values at or below
+   * `low` are `low`; at or above `high` are `high`; otherwise `medium`. With
+   * neither threshold present, everything is `medium`.
    */
-  get #state() {
-    const value = this.#clamp(this.valueValue);
+  #stateOf(value) {
     if (this.#hasThreshold("low") && value <= this.lowValue) return "low";
     if (this.#hasThreshold("high") && value >= this.highValue) return "high";
     return "medium";
   }
-  /** Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio. */
+  /**
+   * Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio.
+   * The reading is derived once and returned, so the `change` detail reports the
+   * same numbers the DOM just received.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const value = this.#clamp(this.valueValue);
+    const reading = {
+      value,
+      ratio: rangeFraction(value, this.minValue, this.maxValue),
+      state: this.#stateOf(value)
+    };
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
-    this.element.setAttribute("aria-valuenow", String(value));
-    this.element.style.setProperty("--stimeo-meter-ratio", String(this.#ratio));
-    this.element.setAttribute("data-state", this.#state);
-    this.#applyValueText(value);
+    this.element.setAttribute("aria-valuenow", String(reading.value));
+    this.element.style.setProperty("--stimeo--meter-ratio", String(reading.ratio));
+    this.element.setAttribute("data-state", reading.state);
+    this.#applyValueText(reading);
+    return reading;
   }
   /**
    * Sets `aria-valuetext` from the consumer-provided template, substituting
-   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library;
-   * cleared when no template is given.
+   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library.
+   * With no template the attribute belongs to the consumer, so only a text this
+   * controller wrote is taken back ({@link OWNED_VALUE_TEXT}).
    */
-  #applyValueText(value) {
+  #applyValueText({ value, ratio, state }) {
     if (this.valueTextValue.length === 0) {
-      this.element.removeAttribute("aria-valuetext");
+      if (this.element.hasAttribute(OWNED_VALUE_TEXT)) {
+        this.element.removeAttribute("aria-valuetext");
+        this.element.removeAttribute(OWNED_VALUE_TEXT);
+      }
       return;
     }
-    const percent = Math.round(this.#ratio * 100);
-    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", this.#state);
+    const percent = Math.round(ratio * 100);
+    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", state);
     this.element.setAttribute("aria-valuetext", text);
+    this.element.setAttribute(OWNED_VALUE_TEXT, "");
   }
 };
 

data/dist/controllers/network_status_controller.js

@@ -2,6 +2,23 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/network_status_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -59,20 +76,17 @@ var SafeTimeout = class extends TimerRegistry {
 var NetworkStatusController = class extends Controller {
   static targets = ["offline", "online"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceOnlineText: { type: String, default: "" },
     onlineAutoHide: { type: Number, default: 0 }
   };
   static events = ["change"];
   #timers = new SafeTimeout();
   /** Last known connectivity; guards against duplicate-state re-announcements. */
   #online = true;
-  /** Banner text captured from the markup so transitions can re-write it. */
-  #offlineMessage = "";
-  #onlineMessage = "";
   #handleOnline = () => this.#update(true);
   #handleOffline = () => this.#update(false);
   connect() {
-    this.#offlineMessage = this.hasOfflineTarget ? (this.offlineTarget.textContent ?? "").trim() : "";
-    this.#onlineMessage = this.hasOnlineTarget ? (this.onlineTarget.textContent ?? "").trim() : "";
     if (this.hasOfflineTarget) this.offlineTarget.hidden = true;
     if (this.hasOnlineTarget) this.onlineTarget.hidden = true;
     this.#online = navigator.onLine;
@@ -86,7 +100,12 @@ var NetworkStatusController = class extends Controller {
     window.removeEventListener("offline", this.#handleOffline);
     this.#timers.clearAll();
   }
-  /** Applies a connectivity transition, guarded against duplicate states. */
+  /**
+   * Applies a connectivity transition, guarded against duplicate states.
+   *
+   * The event goes out last, so a listener reading `data-state` or a banner's
+   * visibility sees the state the transition landed on rather than the previous one.
+   */
   #update(online) {
     if (online === this.#online) return;
     this.#online = online;
@@ -96,22 +115,21 @@ var NetworkStatusController = class extends Controller {
     } else {
       this.#showOffline();
     }
+    announce(fillTemplate(online ? this.announceOnlineTextValue : this.announceTextValue, {}), {
+      assertive: !online
+    });
     this.dispatch("change", { detail: { online } });
   }
   /** Shows the offline banner and hides the recovery banner. */
   #showOffline() {
     this.#timers.clearAll();
     if (this.hasOnlineTarget) this.onlineTarget.hidden = true;
-    if (this.hasOfflineTarget) {
-      this.offlineTarget.textContent = this.#offlineMessage;
-      this.offlineTarget.hidden = false;
-    }
+    if (this.hasOfflineTarget) this.offlineTarget.hidden = false;
   }
   /** Shows the recovery banner, optionally auto-hiding it after `onlineAutoHide`. */
   #showOnline() {
     if (this.hasOfflineTarget) this.offlineTarget.hidden = true;
     if (!this.hasOnlineTarget) return;
-    this.onlineTarget.textContent = this.#onlineMessage;
     this.onlineTarget.hidden = false;
     if (this.onlineAutoHideValue > 0) {
       this.#timers.set(() => {

data/dist/controllers/number_input_controller.js

@@ -8,6 +8,39 @@ 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/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,6 +108,112 @@ 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 NumberInputController = class _NumberInputController extends Controller {
   static targets = ["input", "increment", "decrement"];
@@ -109,24 +248,24 @@ 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;
+  /** Collapses runtime range/step changes into one silent input reconciliation. */
+  #repaint = new MicrotaskCoalescer(() => this.#reconcile());
   /** Normalizes any initial value and wires the focus/hold pointer guards. */
   connect() {
+    this.#repaint.activate();
     if (!this.hasInputTarget) return;
-    if (this.inputTarget.value.trim() !== "") {
-      this.#write(this.#normalize(this.#currentValue()));
-    } else {
-      this.#updateButtons(this.#currentValue());
-    }
+    this.#reconcile();
     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);
+    if (this.hasIncrementTarget) this.#wireButton(this.incrementTarget, 1, signal);
+    if (this.hasDecrementTarget) this.#wireButton(this.decrementTarget, -1, 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. */
   disconnect() {
+    this.#repaint.cancel();
     this.#guards?.abort();
     this.#guards = null;
     this.#holdActive = false;
@@ -135,16 +274,28 @@ var NumberInputController = class _NumberInputController extends Controller {
     this.#holdTimeouts.clearAll();
     this.#holdIntervals.clearAll();
   }
+  /** Silently reconciles a minimum changed by application code or a Turbo morph. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently reconciles a maximum changed by application code or a Turbo morph. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently reconciles a step changed by application code or a Turbo morph. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Increases by one step. Bound via `data-action` (click). */
   increment() {
     if (this.#consumeSuppressedClick()) return;
-    this.#commit(this.#currentValue() + this.stepValue);
+    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);
+    this.#commitStep(-1);
     this.inputTarget.focus();
   }
   /** Clamps and snaps a typed value. Bound via `data-action` (change). */
@@ -155,20 +306,19 @@ var NumberInputController = class _NumberInputController extends Controller {
   /** Keyboard stepping per the APG spinbutton model. */
   onKeydown(event) {
     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,14 +339,14 @@ 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), {
+  #wireButton(button, direction, signal) {
+    button.addEventListener("pointerdown", (event) => this.#armHold(event, button, direction), {
       signal
     });
     button.addEventListener("pointerleave", this.#stopHold, { signal });
   }
   /** 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;
@@ -207,13 +357,13 @@ var NumberInputController = class _NumberInputController extends Controller {
     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);
   }
@@ -254,6 +404,23 @@ var NumberInputController = class _NumberInputController extends Controller {
     if (changed) this.dispatch("change", { detail: { value } });
     return changed;
   }
+  /** Commits an adjacent endpoint/grid value and reports whether it moved. */
+  #commitStep(count) {
+    return this.#commit(stepSteppedValue(this.#currentValue(), count, this.#steppedRange));
+  }
+  /**
+   * Silently reflects the current value after a range or step morph.
+   *
+   * @stimeoRenderRoot
+   */
+  #reconcile() {
+    if (!this.hasInputTarget) return;
+    if (this.inputTarget.value.trim() !== "") {
+      this.#write(this.#normalize(this.#currentValue()));
+    } else {
+      this.#updateButtons(this.#currentValue());
+    }
+  }
   /** Reflects `value` on the input (and ARIA for non-native hosts) and the buttons. */
   #write(value) {
     this.inputTarget.value = String(value);
@@ -300,11 +467,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 };
   }
 };