stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/pagination_controller.js

@@ -1,7 +1,53 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/pagination_controller.ts
-var PaginationController = class extends Controller {
+
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden]")) return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
+// src/controllers/pagination_controller.ts
+var PaginationController = class _PaginationController extends Controller {
   static targets = ["page", "prev", "next"];
   static values = {
     page: { type: Number, default: 1 },
@@ -9,79 +55,164 @@ var PaginationController = class extends Controller {
   };
   static actions = ["next", "prev", "select"];
   static events = ["change"];
+  /** Marks a `disabled` this controller applied at a boundary (ownership flag). */
+  static #BOUNDARY_ATTR = "data-stimeo--pagination-boundary-disabled";
+  #isConnected = false;
+  /** The `tabindex` this instance lends the root for the focus fallback. */
+  #tabindex = new TabindexLoan();
   /** Normalizes out-of-range initial values and renders the initial state. */
   connect() {
-    this.totalValue = Math.max(1, Math.trunc(this.totalValue));
-    this.pageValue = Math.min(this.totalValue, Math.max(1, Math.trunc(this.pageValue)));
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  /** Reverts the one attribute the controller adds outside its state hooks. */
+  disconnect() {
+    this.#isConnected = false;
+    this.#tabindex.returnAll();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `page` at runtime. */
+  pageValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `total` at runtime. */
+  totalValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
+  }
+  /** Syncs a page button appended/replaced at runtime (the consumer owns the list). */
+  pageTargetConnected() {
+    if (!this.#isConnected) return;
+    this.#render();
+  }
+  /** Syncs a `prev` button appended/replaced at runtime. */
+  prevTargetConnected() {
+    if (!this.#isConnected) return;
+    this.#render();
+  }
+  /** Syncs a `next` button appended/replaced at runtime. */
+  nextTargetConnected() {
+    if (!this.#isConnected) return;
     this.#render();
   }
   /** Makes the clicked page button (its `data-page`) current. */
   select(event) {
     const button = event.currentTarget;
-    const page = Number(button.dataset.page);
-    if (!Number.isFinite(page)) return;
+    const raw = button.dataset.page;
+    if (raw === void 0 || raw.trim() === "") return;
+    const page = Number(raw);
+    if (!Number.isInteger(page)) return;
     this.#goto(page);
   }
   /** Steps to the previous page. */
   prev() {
-    this.#goto(this.pageValue - 1);
+    this.#goto(this.#page - 1);
   }
   /** Steps to the next page. */
   next() {
-    this.#goto(this.pageValue + 1);
+    this.#goto(this.#page + 1);
   }
   /** Moves to `page` (clamped to `[1, total]`), re-renders, and dispatches `change`. */
   #goto(page) {
-    const total = Math.max(1, Math.trunc(this.totalValue));
-    const target = Math.min(total, Math.max(1, Math.trunc(page)));
-    if (target === this.pageValue) return;
-    const previous = this.pageValue;
+    if (!Number.isFinite(page)) return;
+    const previous = this.#page;
+    const target = this.#clamp(page);
+    if (target === previous) return;
     this.pageValue = target;
     this.#render();
     this.dispatch("change", {
-      detail: { page: target, total: this.totalValue, previous }
+      detail: { page: target, total: this.#total, previous }
     });
   }
+  /** Writes the normalized Values back (only when they differ) and renders. */
+  #normalizeAndRender() {
+    const total = this.#total;
+    if (!Object.is(total, this.totalValue)) this.totalValue = total;
+    const page = this.#page;
+    if (!Object.is(page, this.pageValue)) this.pageValue = page;
+    this.#render();
+  }
   /** Syncs `aria-current` on the page buttons and the prev/next `disabled` state. */
   #render() {
+    const page = this.#page;
     for (const button of this.pageTargets) {
-      if (Number(button.dataset.page) === this.pageValue) {
+      if (Number(button.dataset.page) === page) {
         button.setAttribute("aria-current", "page");
       } else {
         button.removeAttribute("aria-current");
       }
     }
-    this.#setDisabled(this.hasPrevTarget ? this.prevTarget : null, this.pageValue <= 1);
-    this.#setDisabled(
-      this.hasNextTarget ? this.nextTarget : null,
-      this.pageValue >= this.totalValue
-    );
+    const prev = this.hasPrevTarget ? this.prevTarget : null;
+    const next = this.hasNextTarget ? this.nextTarget : null;
+    const atStart = page <= 1;
+    const atEnd = page >= this.#total;
+    const prevStaysDisabled = this.#disabledAfter(prev, atStart);
+    const nextStaysDisabled = this.#disabledAfter(next, atEnd);
+    this.#release(prev, atStart);
+    this.#release(next, atEnd);
+    this.#disable(prev, atStart, nextStaysDisabled ? null : next);
+    this.#disable(next, atEnd, prevStaysDisabled ? null : prev);
+  }
+  /** Whether a boundary button will still be `disabled` once this render applies. */
+  #disabledAfter(button, atBoundary) {
+    if (!button) return true;
+    if (atBoundary) return true;
+    return button.disabled && !this.#owns(button);
+  }
+  /** Releases the boundary `disabled` this controller owns, once away from it. */
+  #release(button, atBoundary) {
+    if (!button || atBoundary || !this.#owns(button)) return;
+    button.disabled = false;
+    button.removeAttribute(_PaginationController.#BOUNDARY_ATTR);
   }
   /**
-   * Sets `disabled` on a boundary button, first moving focus off it if it is the
-   * active element so disabling never strands focus.
+   * Disables a boundary button, first moving focus off it when it is the active
+   * element so disabling never strands focus.
    */
-  #setDisabled(button, disabled) {
-    if (!button) return;
-    if (disabled && button === document.activeElement) {
-      this.#moveFocusAwayFrom(button);
-    }
-    button.disabled = disabled;
+  #disable(button, atBoundary, opposite) {
+    if (!button || !atBoundary) return;
+    if (button.disabled && !this.#owns(button)) return;
+    if (button === document.activeElement) this.#moveFocusAwayFrom(opposite);
+    button.disabled = true;
+    button.setAttribute(_PaginationController.#BOUNDARY_ATTR, "");
   }
-  /** Moves focus to the opposite enabled control, falling back to the current page. */
-  #moveFocusAwayFrom(button) {
-    const opposite = button === (this.hasPrevTarget ? this.prevTarget : null) ? this.hasNextTarget ? this.nextTarget : null : this.hasPrevTarget ? this.prevTarget : null;
+  /**
+   * Moves focus to `opposite` (already resolved to `null` when it will stay
+   * disabled), else to the current page button, else to the landmark itself.
+   */
+  #moveFocusAwayFrom(opposite) {
+    const page = this.#page;
     const currentPage = this.pageTargets.find(
-      (candidate) => Number(candidate.dataset.page) === this.pageValue
+      (candidate) => Number(candidate.dataset.page) === page
+    );
+    const destination = [opposite, currentPage].find(
+      (candidate) => candidate != null && canTakeFocus(candidate)
     );
-    const destination = opposite && !opposite.disabled ? opposite : currentPage;
     if (destination) {
       destination.focus();
       return;
     }
-    if (!this.element.hasAttribute("tabindex")) this.element.setAttribute("tabindex", "-1");
+    this.#tabindex.lend(this.element);
     this.element.focus();
   }
+  /** Total pages, normalized to a finite integer >= 1. */
+  get #total() {
+    const total = this.totalValue;
+    return Number.isFinite(total) ? Math.max(1, Math.trunc(total)) : 1;
+  }
+  /** The current page, normalized into `[1, total]`. */
+  get #page() {
+    return this.#clamp(this.pageValue);
+  }
+  /** Constrains `page` to `[1, total]`; a non-finite page falls back to page 1. */
+  #clamp(page) {
+    if (!Number.isFinite(page)) return 1;
+    return Math.min(this.#total, Math.max(1, Math.trunc(page)));
+  }
+  /** Whether the button's current `disabled` was applied by boundary control. */
+  #owns(button) {
+    return button.hasAttribute(_PaginationController.#BOUNDARY_ATTR);
+  }
 };
 
 export { PaginationController };

data/dist/controllers/password_reveal_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/password_reveal_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/password_reveal_controller.ts
+var PasswordRevealController = class extends Controller {
+  static targets = ["input", "toggle"];
+  static values = {
+    autoHide: { type: Number, default: 0 }
+  };
+  static actions = ["toggle"];
+  static events = ["toggle"];
+  /** Auto re-mask timer; torn down on disconnect. */
+  #timers = new SafeTimeout();
+  connect() {
+    this.#reflect(this.#isVisible);
+  }
+  disconnect() {
+    this.#timers.clearAll();
+  }
+  /** Toggles the input between masked and revealed. Bound via `data-action`. */
+  toggle() {
+    this.#setVisible(!this.#isVisible);
+  }
+  /** Whether the input is currently revealed (`type="text"`). */
+  get #isVisible() {
+    return this.hasInputTarget && this.inputTarget.type === "text";
+  }
+  /** Switches the masked/revealed state, preserving focus and caret. */
+  #setVisible(visible) {
+    if (!this.hasInputTarget) return;
+    const input = this.inputTarget;
+    const restoreInputFocus = document.activeElement === input;
+    const selectionStart = input.selectionStart;
+    const selectionEnd = input.selectionEnd;
+    input.type = visible ? "text" : "password";
+    if (restoreInputFocus) {
+      input.focus();
+      if (selectionStart !== null && selectionEnd !== null) {
+        try {
+          input.setSelectionRange(selectionStart, selectionEnd);
+        } catch {
+        }
+      }
+    }
+    this.#reflect(visible);
+    this.dispatch("toggle", { detail: { visible } });
+    this.#timers.clearAll();
+    if (visible && this.autoHideValue > 0) {
+      this.#timers.set(() => this.#setVisible(false), this.autoHideValue);
+    }
+  }
+  /** Reflects the visible state onto `aria-pressed` and `data-state`. */
+  #reflect(visible) {
+    if (this.hasToggleTarget) {
+      this.toggleTarget.setAttribute("aria-pressed", visible ? "true" : "false");
+    }
+    this.element.setAttribute("data-state", visible ? "visible" : "hidden");
+  }
+};
+
+export { PasswordRevealController };
+//# sourceMappingURL=password_reveal_controller.js.map
+//# sourceMappingURL=password_reveal_controller.js.map

data/dist/controllers/persist_controller.js

@@ -182,12 +182,12 @@ var PersistController = class extends Controller {
   }
   /**
    * Persistable fields paired with a stable storage key. Uniquely-named fields key
-   * by their name (unchanged, backward-compatible). Repeated same-name fields
-   * (e.g. a `tags[]` checkbox group or array text inputs) are disambiguated by
-   * DOM-order occurrence — the first keeps its plain `name` (backward-
-   * compatible), later ones get a NUL-separated index suffix — so each is stored and
-   * restored individually instead of the last one clobbering the rest. Radios are
-   * the exception: a group intentionally shares one key (one value per name).
+   * by their name. Repeated same-name fields (e.g. a `tags[]` checkbox group or
+   * array text inputs) are disambiguated by DOM-order occurrence — the first keeps
+   * its plain `name`, later ones get a NUL-separated index suffix — so each is
+   * stored and restored individually instead of the last one clobbering the rest.
+   * Radios are the exception: a group intentionally shares one key (one value per
+   * name).
    */
   #fieldEntries() {
     const entries = [];

data/dist/controllers/pointer_drag_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/pointer_drag_controller.ts
 
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
   /** Set while a probe is queued, waiting for a reconnect to cancel it. */
@@ -186,8 +192,10 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (this.disabledValue) return;
     const handle = this.#handleFor(event.target);
     if (!handle) return;
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (event.key === "Escape") {
-      if (event.defaultPrevented || event.isComposing) return;
+      if (event.isComposing) return;
       if (this.#pointer?.started) {
         const { pointerType } = this.#pointer;
         this.#teardownSessions();

data/dist/controllers/popover_controller.js

@@ -133,7 +133,7 @@ var PopoverController = class _PopoverController extends Controller {
   /** Starts closed and registers the standing dismissal listeners. */
   connect() {
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, true);
     this.element.addEventListener("focusout", this.#onFocusOut);
   }
   /**
@@ -144,7 +144,7 @@ var PopoverController = class _PopoverController extends Controller {
    */
   disconnect() {
     this.#escapeLayer.deactivate();
-    document.removeEventListener("click", this.#onOutsideClick);
+    document.removeEventListener("click", this.#onOutsideClick, true);
     this.element.removeEventListener("focusout", this.#onFocusOut);
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;

data/dist/controllers/radio_group_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/radio_group_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowStep(key, element) {
+  if (key === "ArrowDown") return 1;
+  if (key === "ArrowUp") return -1;
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return 0;
+  const forward = isRtl(element) ? "ArrowLeft" : "ArrowRight";
+  return key === forward ? 1 : -1;
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -59,17 +77,18 @@ var RadioGroupController = class extends Controller {
   }
   /** Arrow/Home/End/Space navigation with selection-follows-focus. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const current = this.radioTargets.indexOf(event.currentTarget);
     if (current === -1) return;
     let next = null;
+    const step = logicalArrowStep(event.key, this.element);
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        next = rovingMove(current, this.radioTargets.length, 1);
-        break;
       case "ArrowUp":
       case "ArrowLeft":
-        next = rovingMove(current, this.radioTargets.length, -1);
+        next = rovingMove(current, this.radioTargets.length, step);
         break;
       case "Home":
         next = 0;

data/dist/controllers/range_slider_controller.js

@@ -0,0 +1,192 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/range_slider_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
+// src/controllers/range_slider_controller.ts
+var START_PROPERTY = "--stimeo-range-start";
+var END_PROPERTY = "--stimeo-range-end";
+var RangeSliderController = class extends Controller {
+  static targets = ["track", "startThumb", "endThumb"];
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    start: { type: Number, default: 0 },
+    end: { type: Number, default: 100 },
+    logicalTrack: { type: Boolean, default: false }
+  };
+  static actions = ["onKeydown", "onPointerDown"];
+  static events = ["change"];
+  /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
+  #dragAbort = 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. */
+  connect() {
+    const lo = Math.min(this.startValue, this.endValue);
+    const hi = Math.max(this.startValue, this.endValue);
+    this.#commit(lo, hi, false);
+  }
+  /** Cancels any active pointer drag so document listeners never leak. */
+  disconnect() {
+    this.#dragAbort?.abort();
+    this.#dragAbort = null;
+  }
+  /** 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;
+    let next = null;
+    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        next = current + this.stepValue;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        next = current - this.stepValue;
+        break;
+      case "PageUp":
+        next = current + big;
+        break;
+      case "PageDown":
+        next = current - big;
+        break;
+      case "Home":
+        next = lower;
+        break;
+      case "End":
+        next = upper;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#moveThumb(isStart, next);
+  }
+  /** Begins a pointer drag on the track, moving the thumb nearest the press. */
+  onPointerDown(event) {
+    if (!this.hasTrackTarget) return;
+    const mirrored = this.#mirrored;
+    const value = this.#valueFromClientX(event.clientX, mirrored);
+    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 });
+  }
+  /** Maps a pointer X coordinate to a raw value using the track geometry. */
+  #valueFromClientX(clientX, mirrored) {
+    const rect = this.trackTarget.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);
+  }
+  /** Moves one thumb to a new raw value, keeping the pair ordered. */
+  #moveThumb(isStart, raw) {
+    if (isStart) {
+      this.#commit(raw, this.endValue, true);
+    } else {
+      this.#commit(this.startValue, raw, 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`).
+   */
+  #commit(start, end, notify) {
+    const prevStart = this.startValue;
+    const prevEnd = this.endValue;
+    let nextStart = this.#snap(start);
+    let nextEnd = this.#snap(end);
+    if (nextStart > nextEnd) {
+      if (isUserMovingStart(start, prevStart, end, prevEnd)) nextStart = nextEnd;
+      else nextEnd = nextStart;
+    }
+    this.startValue = nextStart;
+    this.endValue = nextEnd;
+    this.#render(nextStart, nextEnd);
+    if (notify && (nextStart !== prevStart || nextEnd !== prevEnd)) {
+      this.dispatch("change", { detail: { start: nextStart, end: nextEnd } });
+    }
+  }
+  /** Reflects the current pair onto thumb ARIA attributes and CSS properties. */
+  #render(start, end) {
+    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));
+    }
+    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));
+    }
+    const span = this.maxValue - this.minValue;
+    this.element.style.setProperty(
+      START_PROPERTY,
+      String(span > 0 ? (start - this.minValue) / span : 0)
+    );
+    this.element.style.setProperty(
+      END_PROPERTY,
+      String(span > 0 ? (end - this.minValue) / span : 0)
+    );
+  }
+  /** 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));
+  }
+};
+function isUserMovingStart(start, prevStart, end, prevEnd) {
+  return start !== prevStart && end === prevEnd;
+}
+
+export { RangeSliderController };
+//# sourceMappingURL=range_slider_controller.js.map
+//# sourceMappingURL=range_slider_controller.js.map