stimeo-ui 0.4.0 → 0.5.0

data/dist/controllers/range_slider_controller.js

@@ -51,6 +51,59 @@ var MicrotaskCoalescer = class {
   }
 };
 
+// src/utils/owned_pointer_session.ts
+var OwnedPointerSession = class {
+  pointerId;
+  #owner;
+  #handlers;
+  #abort = new AbortController();
+  #active = true;
+  constructor(start, owner, handlers) {
+    this.pointerId = start.pointerId;
+    this.#owner = owner;
+    this.#handlers = handlers;
+    const { signal } = this.#abort;
+    owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
+    owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
+    owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
+    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
+    try {
+      owner.setPointerCapture?.(this.pointerId);
+    } catch {
+    }
+  }
+  /** Whether this session still owns its pointer and listeners. */
+  get active() {
+    return this.#active;
+  }
+  /** Whether `event` belongs to the initiating pointer of the live session. */
+  owns(event) {
+    return this.#active && event.pointerId === this.pointerId;
+  }
+  /** Releases capture/listeners and invokes the end callback exactly once. */
+  end() {
+    if (!this.#active) return;
+    this.#active = false;
+    this.#abort.abort();
+    try {
+      this.#owner.releasePointerCapture?.(this.pointerId);
+    } catch {
+    }
+    this.#handlers.end?.();
+  }
+  #onMove = (event) => {
+    if (this.owns(event)) this.#handlers.move(event);
+  };
+  #onEndEvent = (event) => {
+    if (this.owns(event)) this.end();
+  };
+  #onLostCapture = (event) => {
+    const pointerId = event.pointerId;
+    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
+    this.end();
+  };
+};
+
 // src/utils/range.ts
 function rangeFraction(value, min, max) {
   const span = max - min;
@@ -67,14 +120,122 @@ function rangeFraction(value, min, max) {
   return Math.min(1, Math.max(0, fraction));
 }
 
+// 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/range_slider_controller.ts
-var START_PROPERTY = "--stimeo-range-start";
-var END_PROPERTY = "--stimeo-range-end";
+var START_PROPERTY = "--stimeo--range-slider-start";
+var END_PROPERTY = "--stimeo--range-slider-end";
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
 var RangeSliderController = class extends Controller {
   static targets = ["track", "startThumb", "endThumb"];
   static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
+    min: { type: Number, default: DEFAULT_MIN },
+    max: { type: Number, default: DEFAULT_MAX },
     step: { type: Number, default: 1 },
     start: { type: Number, default: 0 },
     end: { type: Number, default: 100 },
@@ -82,31 +243,27 @@ var RangeSliderController = class extends Controller {
   };
   static actions = ["onKeydown", "onPointerDown"];
   static events = ["change"];
-  /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
-  #dragAbort = null;
+  /** One initiating pointer owns each live drag and its stable target snapshot. */
+  #drag = null;
   /** Whether the consumer declared a mirroring track and the direction mirrors it. */
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
-  /** Normalizes the initial pair (clamped, snapped, ordered) and renders. */
   /**
    * Collapses a morph that swaps render inputs into one repaint, and refuses the
    * pass Stimulus delivers before `connect()`.
    */
-  #repaint = new MicrotaskCoalescer(() => {
-    this.#render(this.startValue, this.endValue);
-  });
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
     this.#repaint.activate();
-    const lo = Math.min(this.startValue, this.endValue);
-    const hi = Math.max(this.startValue, this.endValue);
-    this.#commit(lo, hi, false);
+    const range = this.#effectiveRange;
+    const pair = this.#currentPair(range);
+    this.#commit(pair.start, pair.end, null, false);
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
     this.#repaint.cancel();
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#endDrag();
   }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
@@ -116,141 +273,275 @@ var RangeSliderController = class extends Controller {
   maxValueChanged() {
     this.#repaint.schedule();
   }
+  /** Repaints when application code (or a Turbo morph) changes `step` at runtime. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `start` at runtime. */
+  startValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `end` at runtime. */
+  endValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Hydrates a replacement start thumb and restores live-drag focus ownership. */
+  startThumbTargetConnected(thumb) {
+    const range = this.#effectiveRange;
+    const pair = this.#currentPair(range);
+    this.#renderStartThumb(thumb, pair, range);
+    this.#renderFractions(pair, range);
+    if (this.#drag?.kind === "start" && this.#drag.thumb === null) {
+      this.#drag.thumb = thumb;
+      thumb.focus();
+    }
+    this.#repaint.schedule();
+  }
+  /** Drops a stale start-thumb reference without orphaning the track gesture. */
+  startThumbTargetDisconnected(thumb) {
+    if (this.#drag?.kind === "start" && this.#drag.thumb === thumb) this.#drag.thumb = null;
+  }
+  /** Hydrates a replacement end thumb and restores live-drag focus ownership. */
+  endThumbTargetConnected(thumb) {
+    const range = this.#effectiveRange;
+    const pair = this.#currentPair(range);
+    this.#renderEndThumb(thumb, pair, range);
+    this.#renderFractions(pair, range);
+    if (this.#drag?.kind === "end" && this.#drag.thumb === null) {
+      this.#drag.thumb = thumb;
+      thumb.focus();
+    }
+    this.#repaint.schedule();
+  }
+  /** Drops a stale end-thumb reference without orphaning the track gesture. */
+  endThumbTargetDisconnected(thumb) {
+    if (this.#drag?.kind === "end" && this.#drag.thumb === thumb) this.#drag.thumb = null;
+  }
+  /** Ends a gesture whose geometry target disappeared or ceased being a target. */
+  trackTargetDisconnected(track) {
+    if (this.#drag?.track === track) this.#endDrag();
+  }
   /** Keyboard stepping for whichever thumb is focused (the action's element). */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const thumb = event.currentTarget;
     const isStart = this.hasStartThumbTarget && thumb === this.startThumbTarget;
-    const current = isStart ? this.startValue : this.endValue;
-    const lower = isStart ? this.minValue : this.startValue;
-    const upper = isStart ? this.endValue : this.maxValue;
-    const big = this.stepValue * 10;
+    const isEnd = this.hasEndThumbTarget && thumb === this.endThumbTarget;
+    const effectiveRange = this.#effectiveRange;
+    const pair = this.#currentPair(effectiveRange);
+    let kind;
+    let current;
+    let range;
+    if (isStart) {
+      kind = "start";
+      current = pair.start;
+      range = {
+        min: effectiveRange.min,
+        max: pair.end,
+        step: effectiveRange.step,
+        base: effectiveRange.min
+      };
+    } else {
+      if (!isEnd) return;
+      kind = "end";
+      current = pair.end;
+      range = {
+        min: pair.start,
+        max: effectiveRange.max,
+        step: effectiveRange.step,
+        base: effectiveRange.min
+      };
+    }
     let next = null;
     switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = current + this.stepValue;
+        next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = current - this.stepValue;
+        next = stepSteppedValue(current, -1, range);
         break;
       case "PageUp":
-        next = current + big;
+        next = stepSteppedValue(current, 10, range);
         break;
       case "PageDown":
-        next = current - big;
+        next = stepSteppedValue(current, -10, range);
         break;
       case "Home":
-        next = lower;
+        next = range.min;
         break;
       case "End":
-        next = upper;
+        next = range.max;
         break;
       default:
         return;
     }
     event.preventDefault();
-    this.#moveThumb(isStart, next);
+    this.#moveThumb(kind, next);
   }
   /** Begins a pointer drag on the track, moving the thumb nearest the press. */
   onPointerDown(event) {
-    if (!this.hasTrackTarget) return;
+    if (event.button !== 0 || this.#drag || !this.hasTrackTarget || !this.hasStartThumbTarget || !this.hasEndThumbTarget) {
+      return;
+    }
+    const track = this.trackTarget;
     const mirrored = this.#mirrored;
-    const value = this.#valueFromClientX(event.clientX, mirrored);
+    const value = this.#valueFromClientX(event.clientX, mirrored, track);
     if (value === null) return;
     event.preventDefault();
-    const useStart = Math.abs(value - this.startValue) <= Math.abs(value - this.endValue);
-    if (useStart) {
-      if (this.hasStartThumbTarget) this.startThumbTarget.focus();
-    } else if (this.hasEndThumbTarget) {
-      this.endThumbTarget.focus();
-    }
-    this.#moveThumb(useStart, value);
-    this.#dragAbort?.abort();
-    const abort = new AbortController();
-    this.#dragAbort = abort;
-    const onMove = (move) => {
-      const moved = this.#valueFromClientX(move.clientX, mirrored);
-      if (moved !== null) this.#moveThumb(useStart, moved);
-    };
-    const onUp = () => {
-      abort.abort();
-      this.#dragAbort = null;
-    };
-    document.addEventListener("pointermove", onMove, { signal: abort.signal });
-    document.addEventListener("pointerup", onUp, { signal: abort.signal });
-    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+    const pair = this.#currentPair(this.#effectiveRange);
+    const kind = this.#nearestThumb(value, pair);
+    let thumb;
+    if (kind === "start") thumb = this.startThumbTarget;
+    else thumb = this.endThumbTarget;
+    this.#moveThumb(kind, value);
+    thumb.focus();
+    const drag = { pointer: null, track, thumb, kind };
+    drag.pointer = new OwnedPointerSession(event, track, {
+      move: (move) => {
+        if (!track.isConnected) {
+          this.#endDrag();
+          return;
+        }
+        const moved = this.#valueFromClientX(move.clientX, mirrored, track);
+        if (moved !== null) this.#moveThumb(kind, moved);
+      },
+      end: () => {
+        if (this.#drag === drag) this.#drag = null;
+      }
+    });
+    this.#drag = drag;
   }
   /** Maps a pointer X coordinate to a raw value using the track geometry. */
-  #valueFromClientX(clientX, mirrored) {
-    const rect = this.trackTarget.getBoundingClientRect();
+  #valueFromClientX(clientX, mirrored, track) {
+    const rect = track.getBoundingClientRect();
     if (rect.width === 0) return null;
     const offset = (clientX - rect.left) / rect.width;
     const fraction = mirrored ? 1 - offset : offset;
-    return this.minValue + fraction * (this.maxValue - this.minValue);
+    const range = this.#effectiveRange;
+    return range.min + fraction * (range.max - range.min);
+  }
+  /**
+   * Chooses the closest thumb while keeping an overlapped pair expandable.
+   * Ordinary midpoint ties stay deterministic on `start`; at an overlap, a
+   * press above the shared value selects `end` and a press below selects
+   * `start`.
+   */
+  #nearestThumb(value, pair) {
+    const startDistance = Math.abs(value - pair.start);
+    const endDistance = Math.abs(value - pair.end);
+    if (endDistance < startDistance) return "end";
+    if (pair.start === pair.end && value > pair.start) return "end";
+    return "start";
   }
   /** Moves one thumb to a new raw value, keeping the pair ordered. */
-  #moveThumb(isStart, raw) {
-    if (isStart) {
-      this.#commit(raw, this.endValue, true);
+  #moveThumb(kind, raw) {
+    const pair = this.#currentPair(this.#effectiveRange);
+    if (kind === "start") {
+      this.#commit(raw, pair.end, "start", true);
     } else {
-      this.#commit(this.startValue, raw, true);
+      this.#commit(pair.start, raw, "end", true);
     }
   }
   /**
    * Clamps and snaps `start`/`end`, enforces `start ≤ end`, stores the pair, and
    * reflects it onto the thumbs' ARIA attributes and the range custom
-   * properties. Dispatches `change` only on user-driven updates (`notify`).
+   * properties. Dispatches `stimeo--range-slider:change` only when a
+   * user-driven update changes the normalized pair, with
+   * `{ start: number, end: number }` in `detail`.
    */
-  #commit(start, end, notify) {
-    const prevStart = this.startValue;
-    const prevEnd = this.endValue;
-    let nextStart = this.#snap(start);
-    let nextEnd = this.#snap(end);
+  #commit(start, end, moving, notify) {
+    const range = this.#effectiveRange;
+    const previous = this.#currentPair(range);
+    let nextStart = snapSteppedValue(start, range);
+    let nextEnd = snapSteppedValue(end, range);
     if (nextStart > nextEnd) {
-      if (isUserMovingStart(start, prevStart, end, prevEnd)) nextStart = nextEnd;
-      else nextEnd = nextStart;
+      if (moving === "start") nextStart = nextEnd;
+      else if (moving === "end") nextEnd = nextStart;
+      else [nextStart, nextEnd] = [nextEnd, nextStart];
     }
-    this.startValue = nextStart;
-    this.endValue = nextEnd;
-    this.#render(nextStart, nextEnd);
-    if (notify && (nextStart !== prevStart || nextEnd !== prevEnd)) {
+    if (!Object.is(this.startValue, nextStart)) this.startValue = nextStart;
+    if (!Object.is(this.endValue, nextEnd)) this.endValue = nextEnd;
+    const pair = { start: nextStart, end: nextEnd };
+    this.#renderPair(pair, range);
+    if (notify && (nextStart !== previous.start || nextEnd !== previous.end)) {
       this.dispatch("change", { detail: { start: nextStart, end: nextEnd } });
     }
   }
-  /** Reflects the current pair onto thumb ARIA attributes and CSS properties. */
-  #render(start, end) {
+  /**
+   * Reflects morph-supplied Values without writing them back or dispatching.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const range = this.#effectiveRange;
+    this.#renderPair(this.#currentPair(range), range);
+  }
+  /** Reflects one normalized pair onto both thumbs and CSS properties. */
+  #renderPair(pair, range) {
     if (this.hasStartThumbTarget) {
-      this.startThumbTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.startThumbTarget.setAttribute("aria-valuemax", String(end));
-      this.startThumbTarget.setAttribute("aria-valuenow", String(start));
+      this.#renderStartThumb(this.startThumbTarget, pair, range);
     }
     if (this.hasEndThumbTarget) {
-      this.endThumbTarget.setAttribute("aria-valuemin", String(start));
-      this.endThumbTarget.setAttribute("aria-valuemax", String(this.maxValue));
-      this.endThumbTarget.setAttribute("aria-valuenow", String(end));
+      this.#renderEndThumb(this.endThumbTarget, pair, range);
+    }
+    this.#renderFractions(pair, range);
+  }
+  /** Writes only changed ARIA for the lower thumb. */
+  #renderStartThumb(thumb, pair, range) {
+    this.#setAria(thumb, "aria-valuemin", range.min);
+    this.#setAria(thumb, "aria-valuemax", pair.end);
+    this.#setAria(thumb, "aria-valuenow", pair.start);
+  }
+  /** Writes only changed ARIA for the upper thumb. */
+  #renderEndThumb(thumb, pair, range) {
+    this.#setAria(thumb, "aria-valuemin", pair.start);
+    this.#setAria(thumb, "aria-valuemax", range.max);
+    this.#setAria(thumb, "aria-valuenow", pair.end);
+  }
+  /** Writes one numeric ARIA attribute only when its serialized value changed. */
+  #setAria(thumb, name, value) {
+    const next = String(value);
+    if (thumb.getAttribute(name) !== next) thumb.setAttribute(name, next);
+  }
+  /** Writes the two behavior-only fraction hooks only when they changed. */
+  #renderFractions(pair, range) {
+    const start = String(rangeFraction(pair.start, range.min, range.max));
+    const end = String(rangeFraction(pair.end, range.min, range.max));
+    if (this.element.style.getPropertyValue(START_PROPERTY) !== start) {
+      this.element.style.setProperty(START_PROPERTY, start);
+    }
+    if (this.element.style.getPropertyValue(END_PROPERTY) !== end) {
+      this.element.style.setProperty(END_PROPERTY, end);
     }
-    this.element.style.setProperty(
-      START_PROPERTY,
-      String(rangeFraction(start, this.minValue, this.maxValue))
-    );
-    this.element.style.setProperty(
-      END_PROPERTY,
-      String(rangeFraction(end, this.minValue, this.maxValue))
-    );
-  }
-  /** Clamps `raw` to `[min, max]` and snaps it to the nearest step from `min`. */
-  #snap(raw) {
-    const clamped = Math.min(this.maxValue, Math.max(this.minValue, raw));
-    if (this.stepValue <= 0) return clamped;
-    const stepped = Math.round((clamped - this.minValue) / this.stepValue) * this.stepValue + this.minValue;
-    return Math.min(this.maxValue, Math.max(this.minValue, stepped));
+  }
+  /** Current normalized and ordered pair derived from live declarative Values. */
+  #currentPair(range) {
+    const rawStart = Number.isFinite(this.startValue) ? this.startValue : range.min;
+    const rawEnd = Number.isFinite(this.endValue) ? this.endValue : range.max;
+    const start = snapSteppedValue(rawStart, range);
+    const end = snapSteppedValue(rawEnd, range);
+    if (start <= end) return { start, end };
+    return { start: end, end: start };
+  }
+  /**
+   * Finite ordered range used by ARIA, keyboard, pointer, and CSS reflection.
+   * Invalid endpoints fall back to the public defaults; an authored `max`
+   * below `min` collapses to the finite minimum.
+   */
+  get #effectiveRange() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN;
+    const authoredMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX;
+    return { min, max: Math.max(min, authoredMax), step: this.stepValue, base: min };
+  }
+  /** Ends the current pointer session without dispatching another change. */
+  #endDrag() {
+    const drag = this.#drag;
+    this.#drag = null;
+    drag?.pointer?.end();
   }
 };
-function isUserMovingStart(start, prevStart, end, prevEnd) {
-  return start !== prevStart && end === prevEnd;
-}
 
 export { RangeSliderController };
 //# sourceMappingURL=range_slider_controller.js.map

data/dist/controllers/rating_controller.js

@@ -175,6 +175,8 @@ var RatingController = class extends Controller {
    * Applies `value` (already clamped) everywhere, then dispatches `change`.
    * Use for user-driven changes; on connect call `#apply` directly so
    * initialization mirrors state without emitting an event.
+   *
+   * @stimeoRenderRoot
    */
   #render(value, { focus }) {
     this.#apply(value, { focus });

data/dist/controllers/relative_time_controller.js

@@ -208,6 +208,8 @@ var RelativeTimeController = class extends Controller {
    * polling can stop: a *past* timestamp that fell back to the absolute text can
    * never leave it again, and a locale the runtime rejects has nothing to render
    * until that value is corrected.
+   *
+   * @stimeoRenderRoot
    */
   #applyAndComputeDelay() {
     const deltaMs = this.#targetMs - Date.now();

data/dist/controllers/scroll_area_controller.js

@@ -165,7 +165,7 @@ var ScrollAreaController = class extends Controller {
     this.#syncKeyboardReach(vp, overflowing);
     const { position, progress } = this.#measurePosition(vp);
     this.element.setAttribute("data-scroll", position);
-    this.element.style.setProperty("--stimeo-scroll-progress", String(progress));
+    this.element.style.setProperty("--stimeo--scroll-progress", String(progress));
     const edge = position === "start" ? "start" : position === "end" ? "end" : null;
     if (overflowing && edge && edge !== this.#lastEdge) {
       this.#lastEdge = edge;

data/dist/controllers/separator_controller.js

@@ -8,6 +8,13 @@ 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/default_attribute.ts
+function setDefaultAttribute(element, name, value) {
+  if (element.hasAttribute(name)) return false;
+  element.setAttribute(name, value);
+  return true;
+}
+
 // src/controllers/separator_controller.ts
 var SeparatorController = class extends Controller {
   static values = {
@@ -18,19 +25,13 @@ var SeparatorController = class extends Controller {
   static actions = ["onKeydown"];
   static events = ["change"];
   connect() {
-    if (!this.element.hasAttribute("role")) {
-      this.element.setAttribute("role", "separator");
-    }
-    if (!this.element.hasAttribute("aria-orientation")) {
-      this.element.setAttribute("aria-orientation", this.orientationValue);
-    }
+    setDefaultAttribute(this.element, "role", "separator");
+    setDefaultAttribute(this.element, "aria-orientation", this.orientationValue);
     if (this.focusableValue) {
-      if (!this.element.hasAttribute("tabindex")) {
-        this.element.setAttribute("tabindex", "0");
-      }
-      this.#setDefault("aria-valuemin", "0");
-      this.#setDefault("aria-valuemax", "100");
-      this.#setDefault("aria-valuenow", String(this.#clamp(this.#value)));
+      setDefaultAttribute(this.element, "tabindex", "0");
+      setDefaultAttribute(this.element, "aria-valuemin", "0");
+      setDefaultAttribute(this.element, "aria-valuemax", "100");
+      setDefaultAttribute(this.element, "aria-valuenow", String(this.#clamp(this.#value)));
     }
   }
   /** Adjusts the value on arrow / Home / End keys (focusable variant only). */
@@ -84,11 +85,6 @@ var SeparatorController = class extends Controller {
     const parsed = Number.parseFloat(this.element.getAttribute(name) ?? "");
     return Number.isNaN(parsed) ? fallback : parsed;
   }
-  #setDefault(name, value) {
-    if (!this.element.hasAttribute(name)) {
-      this.element.setAttribute(name, value);
-    }
-  }
 };
 
 export { SeparatorController };