stimeo-ui 0.4.0 → 0.5.0

data/dist/index.js

@@ -857,7 +857,7 @@ var AspectRatioController = class extends Controller {
   };
   /** Applies the ratio on connect and whenever the value changes. */
   ratioValueChanged() {
-    this.element.style.setProperty("--stimeo-aspect-ratio", this.#normalizeRatio(this.ratioValue));
+    this.element.style.setProperty("--stimeo--aspect-ratio", this.#normalizeRatio(this.ratioValue));
   }
   /**
    * Normalizes a ratio string to a valid CSS `<ratio>`:
@@ -1346,7 +1346,11 @@ var BreadcrumbController = class extends Controller {
     this.ellipsisTarget.hidden = true;
     return this.listTarget.scrollWidth > this.listTarget.clientWidth + OVERFLOW_EPSILON;
   }
-  /** Applies the collapsed/expanded state to the items, ellipsis, and trigger. */
+  /**
+   * Applies the collapsed/expanded state to the items, ellipsis, and trigger.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const collapsed = this.#overflowing && !this.#expanded;
     const showEllipsis = this.#overflowing && this.collapsibleTargets.length > 0;
@@ -2078,7 +2082,11 @@ var CarouselController = class extends Controller {
     this.#syncTimer();
     if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
   }
-  /** Reflects `this.#index` onto slides and pickers (state hooks + roving). */
+  /**
+   * Reflects `this.#index` onto slides and pickers (state hooks + roving).
+   *
+   * @stimeoRenderRoot
+   */
   #render({ focus }) {
     this.slideTargets.forEach((slide, i) => {
       const active = i === this.#index;
@@ -2287,6 +2295,15 @@ var CheckboxController = class extends Controller {
     return "partial";
   }
 };
+
+// src/utils/default_attribute.ts
+function setDefaultAttribute(element, name, value) {
+  if (element.hasAttribute(name)) return false;
+  element.setAttribute(name, value);
+  return true;
+}
+
+// src/controllers/clipboard_controller.ts
 var ClipboardController = class extends Controller {
   static targets = ["source", "button", "feedback"];
   static values = {
@@ -2306,9 +2323,7 @@ var ClipboardController = class extends Controller {
    */
   #resetTimerId = null;
   connect() {
-    if (!this.element.hasAttribute("data-state")) {
-      this.element.setAttribute("data-state", "idle");
-    }
+    setDefaultAttribute(this.element, "data-state", "idle");
   }
   disconnect() {
     this.#timers.clearAll();
@@ -2615,7 +2630,10 @@ var CollapsibleController = class extends Controller {
   #applyContent(content, open, waitForCloseTransition) {
     if (open) {
       content.hidden = false;
-      content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
+      content.style.setProperty(
+        "--stimeo--collapsible-content-height",
+        `${content.scrollHeight}px`
+      );
       content.setAttribute("data-state", "open");
       return;
     }
@@ -2648,7 +2666,7 @@ function toFiniteNumber(raw) {
 }
 
 // src/controllers/color_picker_controller.ts
-var COLOR_PROPERTY = "--stimeo-color";
+var COLOR_PROPERTY = "--stimeo--color";
 var CHANNEL_RANGE = {
   hue: [0, 360],
   saturation: [0, 100],
@@ -2777,7 +2795,11 @@ var ColorPickerController = class extends Controller {
     this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
     this.#render();
   }
-  /** Reflects the model onto sliders, the hex input, preview, and form field. */
+  /**
+   * Reflects the model onto sliders, the hex input, preview, and form field.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     for (const slider of this.sliderTargets) {
       const channel = this.#channelOf(slider);
@@ -3904,8 +3926,8 @@ var ContextMenuController = class extends Controller {
       onDismiss: () => this.#closeAndRestore(),
       claims: claimsWhileFocusWithin(this.element)
     });
-    this.menuTarget.style.setProperty("--stimeo-context-menu-x", `${x}px`);
-    this.menuTarget.style.setProperty("--stimeo-context-menu-y", `${y}px`);
+    this.menuTarget.style.setProperty("--stimeo--context-menu-x", `${x}px`);
+    this.menuTarget.style.setProperty("--stimeo--context-menu-y", `${y}px`);
     this.menuTarget.hidden = false;
     if (this.hasRegionTarget) this.regionTarget.setAttribute("data-state", "open");
     this.#navigableItems[0]?.focus();
@@ -4248,7 +4270,11 @@ var CountdownController = class extends Controller {
     const raw = this.#isDown ? this.#reference - now : now - this.#reference;
     return Math.max(0, raw);
   }
-  /** Writes the amount into the day/hour/minute/second slots. */
+  /**
+   * Writes the amount into the day/hour/minute/second slots.
+   *
+   * @stimeoRenderRoot
+   */
   #render(amount) {
     const totalSeconds = Math.floor(amount / SECOND_MS);
     this.#renderedAmount = totalSeconds * SECOND_MS;
@@ -4853,7 +4879,11 @@ var DateRangePickerController = class extends Controller {
     this.#focusedDate = target;
     this.#render();
   }
-  /** Builds the six-week grid and binds range/roving/disabled state per cell. */
+  /**
+   * Builds the six-week grid and binds range/roving/disabled state per cell.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const info = parseISOMonthString(this.#viewMonth);
     if (!info) return;
@@ -5079,7 +5109,7 @@ var DirectUploadController = class extends Controller {
     const clamped = Math.max(0, Math.min(100, percent));
     row.setAttribute("aria-valuenow", String(clamped));
     row.setAttribute("aria-valuetext", `${clamped}%`);
-    row.style.setProperty("--stimeo-upload-progress", `${clamped}%`);
+    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
     this.#setField(row, "percent", `${clamped}%`);
     this.#syncAggregate();
     this.dispatch("progress", { detail: { id, percent: clamped } });
@@ -5117,7 +5147,7 @@ var DirectUploadController = class extends Controller {
     }
     clone.setAttribute("aria-valuenow", "0");
     clone.setAttribute("data-upload-state", "uploading");
-    clone.style.setProperty("--stimeo-upload-progress", "0%");
+    clone.style.setProperty("--stimeo--upload-progress", "0%");
     this.listTarget.appendChild(clone);
     this.#rows.set(key, clone);
     return clone;
@@ -5141,7 +5171,7 @@ var DirectUploadController = class extends Controller {
     }
     const overall = Math.round(total / this.#rows.size);
     this.element.setAttribute("data-upload-progress", String(overall));
-    this.element.style.setProperty("--stimeo-upload-progress", `${overall}%`);
+    this.element.style.setProperty("--stimeo--upload-progress", `${overall}%`);
   }
   /** Writes a consumer label (with `%{name}` substituted) to the status region. */
   #announce(label, row) {
@@ -5787,23 +5817,120 @@ var EmptyStateController = class extends Controller {
   };
   static events = ["change"];
   #observer = null;
+  /** Whether the controller is between `connect()` and `disconnect()`. */
+  #connected = false;
   /** Last applied empty state; `null` until the first sync so connect emits nothing. */
   #empty = null;
   connect() {
-    if (!this.hasListTarget) return;
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver(() => this.#apply());
-      this.#observer.observe(this.listTarget, { childList: true });
-    }
-    this.#apply();
+    this.#connected = true;
+    this.#syncObservation();
+    this.#update();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObserving();
+  }
+  /** Follows a `list` element swapped in at runtime (Turbo Stream `replace` / morph). */
+  listTargetConnected() {
+    this.#resync();
+  }
+  /** Releases the observation when the `list` element leaves the target set. */
+  listTargetDisconnected() {
+    this.#resync();
+  }
+  /** Syncs an `empty` element that arrives — or is replaced — at runtime. */
+  emptyTargetConnected() {
+    this.#resync();
+  }
+  /**
+   * Syncs the `empty` element that remains when one leaves the target set. A
+   * single-target getter resolves to the first `empty` element in document order,
+   * so a swap that inserts the replacement *before* removing the original (Turbo
+   * Stream `after` / `before` / `append` followed by `remove`) leaves the
+   * replacement untouched until the original goes — this callback is that moment.
+   */
+  emptyTargetDisconnected() {
+    this.#resync();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `itemSelector` at runtime. */
+  itemSelectorValueChanged() {
+    this.#resync();
+  }
+  /**
+   * Re-points the observation and re-renders after a target or selector change.
+   * The `#connected` guard is load-bearing: Stimulus runs value and target
+   * callbacks for the initial markup *before* `connect()` and runs target
+   * callbacks during teardown *after* `disconnect()`, and re-observing there
+   * would outlive the controller.
+   */
+  #resync() {
+    if (!this.#connected) return;
+    this.#syncObservation();
+    this.#update();
+  }
+  /**
+   * Points the mutation observation at the current `list` target — re-resolved on
+   * every sync rather than captured at connect, so an element swapped in at
+   * runtime is observed instead of the detached original.
+   *
+   * The observation covers exactly what the count predicate reads. With no
+   * `itemSelector` the count is the child element count, which only `childList`
+   * can change. With one, the predicate reads the children themselves, so
+   * attribute and descendant mutations are watched too — and the controller's own
+   * writes are filtered back out, or toggling `hidden` would re-enter the render.
+   */
+  #syncObservation() {
+    this.#stopObserving();
+    if (!this.hasListTarget || typeof MutationObserver === "undefined") return;
+    const watchesItems = this.itemSelectorValue.length > 0;
+    this.#observer = new MutationObserver((records) => {
+      if (records.some((record) => this.#affectsCount(record))) this.#update();
+    });
+    this.#observer.observe(this.listTarget, {
+      childList: true,
+      subtree: watchesItems,
+      attributes: watchesItems
+    });
+  }
+  #stopObserving() {
     this.#observer?.disconnect();
     this.#observer = null;
   }
-  /** Recomputes the count and syncs visibility, hooks, and the change event. */
-  #apply() {
-    if (!this.hasListTarget) return;
+  /**
+   * Whether a mutation can change the item count. An attribute written on a
+   * target this controller owns is its own echo — `hidden` on `list` / `empty`,
+   * and the hooks on the controller element when the list *is* that element.
+   */
+  #affectsCount(record) {
+    if (record.type !== "attributes") return true;
+    const own = record.target === this.listTarget || this.hasEmptyTarget && record.target === this.emptyTarget;
+    return !own;
+  }
+  /**
+   * Renders the count, then reports a crossed boundary. The announcement copy is
+   * read here rather than while rendering: it is the wording of the report, not
+   * an input to what is displayed.
+   */
+  #update() {
+    const count = this.#render();
+    if (count === null) return;
+    const empty = count === 0;
+    const crossed = this.#empty !== null && empty !== this.#empty;
+    this.#empty = empty;
+    if (!crossed) return;
+    this.dispatch("change", { detail: { count, empty } });
+    announce(
+      fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
+    );
+  }
+  /**
+   * Syncs visibility and the state hooks to the current item count, and returns
+   * it. `null` when there is no `list` target to count.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    if (!this.hasListTarget) return null;
     const count = this.#count();
     const empty = count === 0;
     this.element.setAttribute("data-count", String(count));
@@ -5814,13 +5941,7 @@ var EmptyStateController = class extends Controller {
     }
     this.listTarget.hidden = empty;
     if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
-    if (this.#empty !== null && empty !== this.#empty) {
-      this.dispatch("change", { detail: { count, empty } });
-      announce(
-        fillTemplate(empty ? this.announceTextValue : this.announceFilledTextValue, { count })
-      );
-    }
-    this.#empty = empty;
+    return count;
   }
   /** Item count: element children matching `itemSelector`, or all element children. */
   #count() {
@@ -6083,29 +6204,119 @@ var FlashController = class extends Controller {
   static events = ["show", "dismiss"];
   #timers = new SafeTimeout();
   #observer = null;
+  /** Whether the controller is between `connect()` and `disconnect()`. */
+  #connected = false;
   /** Auto-dismiss timer state keyed by message element. */
   #state = /* @__PURE__ */ new Map();
   /** Messages already processed, in insertion order, to enforce `max` and avoid double work. */
   #order = [];
-  #onEnter = (event) => this.#pause(event.currentTarget);
-  #onLeave = (event) => this.#resume(event.currentTarget);
+  /**
+   * Messages between `leaving` and their removal. {@link FlashController.#beginDismiss}
+   * releases the bookkeeping above *before* the transition wait, so for that window the
+   * element is in the DOM but in neither collection — without this set a re-scan would
+   * read it as a brand-new flash and show it a second time.
+   */
+  #leaving = /* @__PURE__ */ new Set();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #onEnter = (event) => this.#pause(event.currentTarget, event.type === "focusin" ? "focus" : "hover");
+  #onLeave = (event) => this.#resume(event.currentTarget, event.type === "focusout" ? "focus" : "hover");
   connect() {
-    if (!this.hasRegionTarget) return;
+    this.#connected = true;
     for (const message of this.messageTargets) {
-      this.#process(message, true);
-    }
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
-      this.#observer.observe(this.regionTarget, { childList: true, subtree: true });
+      if (this.#owns(message)) this.#process(message, true);
     }
+    this.#syncObservation();
+    this.#beforeCache.activate();
   }
   disconnect() {
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#connected = false;
+    this.#beforeCache.deactivate();
+    this.#stopObserving();
     this.#timers.clearAll();
     for (const message of this.#order) this.#unbindPause(message);
     this.#state.clear();
     this.#order.length = 0;
+    this.#leaving.clear();
+  }
+  /**
+   * Takes the managed flashes out of the page just before Turbo freezes it, so a
+   * restored snapshot carries no notification the visitor has already received: the
+   * fresh `connect()` there reads a leftover flash as a brand-new one and announces it
+   * a second time. A message that never auto-dismisses (`duration: 0`) is one of these
+   * too — that value governs the timer, not what belongs in a cached page. Removal
+   * only: `dismiss` reports a dismissal, and freezing the page is not one.
+   */
+  #rewindForCache() {
+    for (const message of [...this.#order]) {
+      message.remove();
+      this.#forget(message);
+    }
+    for (const message of this.#leaving) message.remove();
+    this.#leaving.clear();
+  }
+  /** Follows a `region` element swapped in — or arriving — at runtime (Turbo Stream). */
+  regionTargetConnected() {
+    this.#resync();
+  }
+  /** Releases the observation when the `region` element leaves the target set. */
+  regionTargetDisconnected() {
+    this.#resync();
+  }
+  /**
+   * Whether this controller owns `message`. Ownership is the current `region`'s
+   * subtree: a message target anywhere else in the controller's scope is the
+   * consumer's, and so is one in a region that has gone away. The initial scan, a
+   * re-scan after a `region` swap, and a departure from the target set all resolve
+   * ownership through this one test; the observation gets it structurally, by watching
+   * that subtree and nothing else.
+   */
+  #owns(message) {
+    return this.hasRegionTarget && this.regionTarget.contains(message);
+  }
+  /**
+   * Releases a message that left the target set (a Turbo Stream `remove`, the consumer
+   * detaching the node, or a morph that rewrote the target attribute in place): it
+   * stops occupying a `max` slot, and both its pending auto-dismiss and an already
+   * scheduled removal are cancelled. A move *within* the region keeps all of them —
+   * which is why the element must still be a message to be treated as one: ownership
+   * alone reads an in-place attribute rewrite as a move, and a node outside the target
+   * set belongs to the consumer, so nothing here may dismiss it.
+   */
+  messageTargetDisconnected(message) {
+    if (!this.#connected) return;
+    const moved = this.#owns(message) && message.matches(MESSAGE_SELECTOR);
+    if (moved) return;
+    this.#forget(message);
+    this.#leaving.delete(message);
+  }
+  /**
+   * Re-points the observation after a `region` swap and picks up the messages the
+   * new element brought with it (dynamic inserts, so their own `role` announces
+   * them). The `#connected` guard is load-bearing: Stimulus runs target callbacks
+   * for the initial markup *before* `connect()` and again during teardown *after*
+   * `disconnect()`, and re-observing there would outlive the controller.
+   */
+  #resync() {
+    if (!this.#connected) return;
+    this.#syncObservation();
+    for (const message of this.messageTargets) {
+      if (this.#owns(message)) this.#process(message, false);
+    }
+  }
+  /**
+   * Points the mutation observation at the current `region` target, re-resolved on
+   * every sync rather than captured at connect, so an element swapped in at runtime
+   * is observed instead of the detached original.
+   */
+  #syncObservation() {
+    this.#stopObserving();
+    if (!this.hasRegionTarget || typeof MutationObserver === "undefined") return;
+    this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
+    this.#observer.observe(this.regionTarget, { childList: true, subtree: true });
+  }
+  #stopObserving() {
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   /**
    * Pause-on-hover/focus listeners, bound and unbound as a pair so the two sides
@@ -6151,6 +6362,7 @@ var FlashController = class extends Controller {
    */
   #process(message, bridge) {
     if (this.#state.has(message) || this.#order.includes(message)) return;
+    if (this.#leaving.has(message)) return;
     const type = message.getAttribute("data-flash-type") ?? "";
     const assertive = ASSERTIVE_TYPES.has(type);
     if (!message.hasAttribute("role")) {
@@ -6183,33 +6395,53 @@ var FlashController = class extends Controller {
     const existing = this.#state.get(message);
     if (existing?.id) this.#timers.clear(existing.id);
     const id = this.#timers.set(() => this.#beginDismiss(message, "timeout"), duration);
-    this.#state.set(message, { id, startedAt: Date.now(), remaining: duration });
+    this.#state.set(message, {
+      id,
+      startedAt: Date.now(),
+      remaining: duration,
+      paused: existing?.paused ?? /* @__PURE__ */ new Set()
+    });
   }
-  /** Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1). */
-  #pause(message) {
+  /**
+   * Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1).
+   * Hover and focus are independent reasons: the remaining time is banked on the
+   * first of them, and {@link FlashController.#resume} waits for the last one.
+   */
+  #pause(message, reason) {
     const timer = this.#state.get(message);
-    if (!timer || timer.id === 0) return;
+    if (!timer) return;
+    timer.paused.add(reason);
+    if (timer.id === 0) return;
     this.#timers.clear(timer.id);
-    const remaining = Math.max(0, timer.remaining - (Date.now() - timer.startedAt));
-    this.#state.set(message, { id: 0, startedAt: 0, remaining });
+    const remaining = Math.max(1, timer.remaining - (Date.now() - timer.startedAt));
+    this.#state.set(message, { id: 0, startedAt: 0, remaining, paused: timer.paused });
   }
   /** Resumes a paused message's auto-dismiss with the banked time. */
-  #resume(message) {
+  #resume(message, reason) {
     const timer = this.#state.get(message);
     if (!timer) return;
-    if (timer.id !== 0 || timer.remaining <= 0) return;
+    timer.paused.delete(reason);
+    if (timer.paused.size > 0) return;
+    if (timer.id !== 0) return;
     this.#startTimer(message, timer.remaining);
   }
-  /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
-  #beginDismiss(message, reason) {
+  /** Releases every per-message resource: timer, stacking slot, pause listeners. */
+  #forget(message) {
     const timer = this.#state.get(message);
     if (timer?.id) this.#timers.clear(timer.id);
     this.#state.delete(message);
     const index = this.#order.indexOf(message);
     if (index !== -1) this.#order.splice(index, 1);
+    this.#unbindPause(message);
+  }
+  /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
+  #beginDismiss(message, reason) {
+    if (!this.#state.has(message) && !this.#order.includes(message)) return;
+    this.#forget(message);
+    this.#leaving.add(message);
     message.setAttribute("data-flash-state", "leaving");
     const finalize = () => {
-      this.#unbindPause(message);
+      if (!this.#leaving.delete(message)) return;
       message.remove();
       this.dispatch("dismiss", { detail: { element: message, reason } });
     };
@@ -6478,8 +6710,7 @@ var FormValidationController = class _FormValidationController extends Controlle
   };
   /** Suppresses native bubbles and binds the submit / blur / input listeners. */
   connect() {
-    if (!this.element.hasAttribute("novalidate")) {
-      this.element.setAttribute("novalidate", "");
+    if (setDefaultAttribute(this.element, "novalidate", "")) {
       this.element.setAttribute(_FormValidationController.#NOVALIDATE_MARKER, "");
     }
     document.addEventListener("submit", this.#onSubmit, true);
@@ -6661,6 +6892,16 @@ var FormValidationController = class _FormValidationController extends Controlle
 var DetachGate = class _DetachGate {
   /** Set while a probe is queued, waiting for a reconnect to cancel it. */
   #pending = false;
+  /**
+   * True while a probe is queued — the last disconnect was ambiguous and no
+   * reconnect has cancelled it yet. Read it from `connect()` to tell the
+   * reconnect half of an in-page move from a first connect: a controller whose
+   * initialisation restarts a measurement (a min-duration floor, an elapsed
+   * counter) must skip it for the move, where nothing actually restarted.
+   */
+  get pending() {
+    return this.#pending;
+  }
   /**
    * True when the disconnect is definitely a real detach — the element left
    * the document, or `data-controller` no longer lists the identifier. False
@@ -6765,7 +7006,17 @@ var FrameLoadingController = class extends Controller {
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #loading = false;
-  #inertApplied = false;
+  /**
+   * The optional targets this controller revealed, and the content it marked inert.
+   * Held as references rather than re-resolved on the way out: a detach that keeps
+   * the element takes the identifier off `data-controller` first, and a scope
+   * without its identifier stops resolving targets — the elements to tidy would be
+   * unreachable exactly when the tidying matters. They double as the ownership
+   * marker, so a `hidden` or an `inert` the consumer wrote is never taken over.
+   */
+  #revealedSkeleton = null;
+  #revealedOverlay = null;
+  #inertTarget = null;
   #previousFocus = null;
   /** The id of the retreated element, used to re-find it if the load replaced it. */
   #previousFocusId = "";
@@ -6792,31 +7043,88 @@ var FrameLoadingController = class extends Controller {
     this.#gate.disconnected(this, () => this.#teardown());
   }
   /**
-   * Drops the held finish and the loading bookkeeping on a real detach. The markup
-   * keeps whatever it last held: the page being cached is rewound at
-   * `turbo:before-cache` instead, where the frame is still whole.
+   * Drops the held finish and the loading bookkeeping on a real detach, returning
+   * the frame to its idle form. No reconnect is coming, so nothing is left that
+   * could finish the load and clear the hooks — a detach that keeps the element
+   * (a morph dropping the identifier, an exit from a scoped observed root) would
+   * otherwise strand it busy and inert. Focus is left where it is: the element is
+   * leaving this controller's care, and moving it now would be an unexplained jump.
    */
   #teardown() {
     this.#gate.cancel();
     this.#timeouts.clearAll();
     this.#floor.cancel();
+    if (this.#loading) this.#rewindHooks();
     this.#loading = false;
     this.#previousFocus = null;
   }
   /**
-   * Returns the frame to its resting hooks for the snapshot Turbo is about to
-   * take, so a page reached with the Back button does not restore a frame that is
-   * busy and inert with nothing left to finish it. State only — no `end` event and
-   * no focus move, because the load did not actually complete. The live page keeps
-   * its held finish, so a navigation that never completes still ends properly.
+   * Returns the frame to its idle form for the snapshot Turbo is about to take, so
+   * a page reached with the Back button does not restore a frame that is busy and
+   * inert with nothing left to finish it. State only — no `end` event and no focus
+   * move, because the load did not actually complete.
+   *
+   * The load is abandoned rather than paused, so the flag and any finish the floor
+   * still holds drop along with the hooks. A kept finish would surface after the
+   * rewind as exactly the three things this pass exists to avoid — an `end`, a
+   * completion announcement, and a focus move — and a kept flag would leave the
+   * next fetch on a page that survives a cancelled visit skipping the loading
+   * state, its idempotence guard already satisfied.
    */
   #rewindForCache() {
     if (!this.#loading) return;
+    this.#loading = false;
+    this.#floor.cancel();
+    this.#rewindHooks();
+  }
+  /**
+   * Clears every hook the loading state writes. Shared by the three ways a load can
+   * stop — completion, detach, snapshot — so none of them can drift into tidying
+   * only part of it.
+   */
+  #rewindHooks() {
     this.element.removeAttribute("aria-busy");
     this.element.removeAttribute("data-frame-loading");
-    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = true;
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
+    if (this.#revealedSkeleton) this.#revealedSkeleton.hidden = true;
+    if (this.#revealedOverlay) this.#revealedOverlay.hidden = true;
+    this.#revealedSkeleton = null;
+    this.#revealedOverlay = null;
+    this.#clearInert();
+  }
+  /**
+   * Re-shows a `skeleton` that arrived mid-load. Turbo's frame renderer empties the
+   * frame and re-inserts the response's children, so a response's authored (hidden)
+   * skeleton can land while a later fetch is still running, and only the controller
+   * knows the frame is still busy.
+   */
+  skeletonTargetConnected() {
+    if (this.#loading) this.#revealSkeleton();
+  }
+  /** Re-shows an `overlay` that arrived mid-load — the same swap as the skeleton. */
+  overlayTargetConnected() {
+    if (this.#loading) this.#revealOverlay();
+  }
+  /**
+   * Re-blocks a `content` that arrived mid-load, so the stale copy stays unusable.
+   * The element that left is released first and ownership is then decided afresh, so
+   * an `inert` the replacement authored stays the consumer's.
+   */
+  contentTargetConnected() {
+    if (!this.#loading) return;
     this.#clearInert();
+    this.#applyInert();
+  }
+  /** Reveals the optional `skeleton`, noting it as this controller's to hide again. */
+  #revealSkeleton() {
+    if (!this.hasSkeletonTarget) return;
+    this.#revealedSkeleton = this.skeletonTarget;
+    this.skeletonTarget.hidden = false;
+  }
+  /** Reveals the optional `overlay`, noting it as this controller's to hide again. */
+  #revealOverlay() {
+    if (!this.hasOverlayTarget) return;
+    this.#revealedOverlay = this.overlayTarget;
+    this.overlayTarget.hidden = false;
   }
   /** Enters the loading state: hooks, skeleton/overlay, inert content, focus retreat. */
   #begin() {
@@ -6824,8 +7132,8 @@ var FrameLoadingController = class extends Controller {
     this.#floor.begin();
     this.element.setAttribute("aria-busy", "true");
     this.element.setAttribute("data-frame-loading", "true");
-    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = false;
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = false;
+    this.#revealSkeleton();
+    this.#revealOverlay();
     this.#applyInert();
     this.#retreatFocus();
     this.dispatch("start", { detail: {} });
@@ -6834,11 +7142,7 @@ var FrameLoadingController = class extends Controller {
   /** Leaves the loading state: restore hooks, hide skeleton/overlay, restore focus. */
   #finish() {
     this.#loading = false;
-    this.element.removeAttribute("aria-busy");
-    this.element.removeAttribute("data-frame-loading");
-    if (this.hasSkeletonTarget) this.skeletonTarget.hidden = true;
-    if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
-    this.#clearInert();
+    this.#rewindHooks();
     this.#restoreFocus();
     this.dispatch("end", { detail: {} });
     announce(fillTemplate(this.announceReadyTextValue, {}));
@@ -6847,12 +7151,11 @@ var FrameLoadingController = class extends Controller {
   #applyInert() {
     if (!this.hasContentTarget || this.contentTarget.hasAttribute("inert")) return;
     this.contentTarget.setAttribute("inert", "");
-    this.#inertApplied = true;
+    this.#inertTarget = this.contentTarget;
   }
   #clearInert() {
-    if (!this.#inertApplied) return;
-    this.#inertApplied = false;
-    if (this.hasContentTarget) this.contentTarget.removeAttribute("inert");
+    this.#inertTarget?.removeAttribute("inert");
+    this.#inertTarget = null;
   }
   /** Saves and blurs focus if it sits inside the frame about to go stale. */
   #retreatFocus() {
@@ -6889,6 +7192,7 @@ var FrameLoadingController = class extends Controller {
     }
   }
 };
+var hookOwners = /* @__PURE__ */ new WeakMap();
 var HighlightController = class extends Controller {
   static values = {
     duration: { type: Number, default: 1500 },
@@ -6896,9 +7200,18 @@ var HighlightController = class extends Controller {
   };
   static events = ["start", "end"];
   #timeouts = new SafeTimeout();
+  /**
+   * The removal timer this connection has outstanding for an element. Held weakly so
+   * a row that leaves the DOM is not retained, and dropped wholesale on `disconnect()`
+   * so a cleared id can never be matched against a recycled one. Which connection owns
+   * an element's hook is answered by the shared owner registry above.
+   */
+  #pending = /* @__PURE__ */ new WeakMap();
   #observer = null;
   connect() {
+    this.#clearArrivedHook(this.element);
     if (this.observeValue) {
+      for (const child of this.element.children) this.#clearArrivedHook(child);
       if (typeof MutationObserver !== "undefined") {
         this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
         this.#observer.observe(this.element, { childList: true });
@@ -6911,6 +7224,12 @@ var HighlightController = class extends Controller {
     this.#observer?.disconnect();
     this.#observer = null;
     this.#timeouts.clearAll();
+    this.#pending = /* @__PURE__ */ new WeakMap();
+  }
+  /** Drops a hook that arrived with the DOM, along with this connection's claim on it. */
+  #clearArrivedHook(el) {
+    if (hookOwners.get(el) === this) hookOwners.delete(el);
+    el.removeAttribute("data-highlight");
   }
   /** Highlights every element child added by a childList mutation. */
   #onMutations(mutations) {
@@ -6923,12 +7242,33 @@ var HighlightController = class extends Controller {
   /** Flags `el` with `data-highlight` and schedules its removal (unless reduced-motion). */
   #highlight(el) {
     if (prefersReducedMotion()) return;
+    this.#releasePending(el);
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
-    this.#timeouts.set(() => {
+    const id = this.#timeouts.set(() => {
+      this.#pending.delete(el);
+      hookOwners.delete(el);
       el.removeAttribute("data-highlight");
       this.dispatch("end", { target: el, detail: { element: el } });
     }, this.durationValue);
+    this.#pending.set(el, id);
+    hookOwners.set(el, this);
+  }
+  /**
+   * Releases whichever removal timer holds `el`'s hook. The row may have been
+   * highlighted inside a different watched container before it moved here, and that
+   * container's timer is reachable only through the shared owner registry.
+   */
+  #releasePending(el) {
+    const owner = hookOwners.get(el);
+    if (owner !== void 0 && owner !== this) owner.#cancelPending(el);
+    this.#cancelPending(el);
+  }
+  /** Releases `el`'s pending removal timer, if it has one. */
+  #cancelPending(el) {
+    this.#timeouts.clear(this.#pending.get(el) ?? -1);
+    this.#pending.delete(el);
+    hookOwners.delete(el);
   }
 };
 
@@ -7078,6 +7418,12 @@ var IdleController = class extends Controller {
   #prompted = false;
   /** Timestamp of the last activity; the timers self-reschedule against it. */
   #lastActivity = 0;
+  /**
+   * Activity types actually registered on `document`, so `disconnect()` unbinds the
+   * same set even when `events` changed while connected (a Turbo morph can rewrite
+   * the Value in place, and the removal must match the registration, not the Value).
+   */
+  #boundEvents = [];
   #onActivity = () => {
     this.#lastActivity = Date.now();
     if (this.#idle || this.#prompted) {
@@ -7092,16 +7438,21 @@ var IdleController = class extends Controller {
     if (document.visibilityState === "visible") this.#onActivity();
   };
   connect() {
-    for (const type of this.eventsValue) {
+    this.#idle = false;
+    this.#prompted = false;
+    this.element.removeAttribute("data-idle");
+    this.#boundEvents = [...this.eventsValue];
+    for (const type of this.#boundEvents) {
       document.addEventListener(type, this.#onActivity, { passive: true, capture: true });
     }
     document.addEventListener("visibilitychange", this.#onVisibility);
     this.#arm();
   }
   disconnect() {
-    for (const type of this.eventsValue) {
+    for (const type of this.#boundEvents) {
       document.removeEventListener(type, this.#onActivity, { capture: true });
     }
+    this.#boundEvents = [];
     document.removeEventListener("visibilitychange", this.#onVisibility);
     this.#timeouts.clearAll();
   }
@@ -7992,6 +8343,8 @@ var LocalTimeController = class extends Controller {
    * its condition is that formatting was applied, and a repaint applies it with a
    * new result. A pass that cannot format writes nothing and emits nothing, so the
    * authored absolute text stays as the fallback.
+   *
+   * @stimeoRenderRoot
    */
   #render() {
     const date = this.#parse();
@@ -8067,7 +8420,7 @@ var LocalTimeController = class extends Controller {
     return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
-var COLUMNS_PROPERTY = "--stimeo-masonry-columns";
+var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
 var MasonryController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -9026,6 +9379,8 @@ var MeterController = class extends Controller {
    * 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);
@@ -9037,7 +9392,7 @@ var MeterController = class extends Controller {
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
     this.element.setAttribute("aria-valuenow", String(reading.value));
-    this.element.style.setProperty("--stimeo-meter-ratio", String(reading.ratio));
+    this.element.style.setProperty("--stimeo--meter-ratio", String(reading.ratio));
     this.element.setAttribute("data-state", reading.state);
     this.#applyValueText(reading);
     return reading;
@@ -10175,9 +10530,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() {
@@ -10191,6 +10544,114 @@ var NetworkStatusController = class extends Controller {
     }
   }
 };
+
+// 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"];
   static values = {
@@ -10224,24 +10685,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;
@@ -10250,16 +10711,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). */
@@ -10270,20 +10743,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;
@@ -10304,14 +10776,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;
@@ -10322,13 +10794,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);
   }
@@ -10369,6 +10841,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);
@@ -10415,11 +10904,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 };
   }
 };
 var TOGGLED_MARKER = "data-optimistic-toggled";
@@ -10929,7 +11418,7 @@ var INDEX = "data-stimeo--overflow-menu-index";
 var BOUNDARY = "data-stimeo--overflow-menu-boundary";
 var SAVED_ROLE = "data-stimeo--overflow-menu-role";
 var SAVED_TABINDEX = "data-stimeo--overflow-menu-tabindex";
-var SAVED_MENU_TARGET = "data-stimeo--overflow-menu-menu-target";
+var SAVED_MENU_TARGET = "data-stimeo--overflow-menu-saved-menu";
 var MENU_TARGET = "data-stimeo--menu-target";
 var BOOKKEEPING = [BANKED, INDEX, SAVED_ROLE, SAVED_TABINDEX, SAVED_MENU_TARGET];
 var OverflowMenuController = class extends Controller {
@@ -11443,7 +11932,11 @@ var PaginationController = class _PaginationController extends Controller {
     if (!Object.is(page, this.pageValue)) this.pageValue = page;
     this.#render();
   }
-  /** Syncs `aria-current` on the page buttons and the prev/next `disabled` state. */
+  /**
+   * Syncs `aria-current` on the page buttons and the prev/next `disabled` state.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const page = this.#page;
     for (const button of this.pageTargets) {
@@ -11650,7 +12143,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     this.#toggle("data-strength", band, band.length > 0);
     this.#toggle("data-below-min", "true", score > 0 && score < this.minScoreValue);
     const ratio = max > 0 ? score / max : 0;
-    this.element.style.setProperty("--stimeo-password-strength", String(ratio));
+    this.element.style.setProperty("--stimeo--password-strength", String(ratio));
   }
   #writeLabel(label) {
     if (this.hasLabelTarget) this.labelTarget.textContent = label;
@@ -12548,20 +13041,24 @@ var ProgressController = class extends Controller {
   get #ratio() {
     return rangeFraction(this.valueValue, this.minValue, this.maxValue);
   }
-  /** Reflects value/range/indeterminate onto ARIA, `data-state`, and the ratio. */
+  /**
+   * Reflects value/range/indeterminate onto ARIA, `data-state`, and the ratio.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
     if (this.indeterminateValue) {
       this.element.removeAttribute("aria-valuenow");
       this.#clearOwnValueText();
-      this.element.style.removeProperty("--stimeo-progress-ratio");
+      this.element.style.removeProperty("--stimeo--progress-ratio");
       this.element.setAttribute("data-state", "indeterminate");
       return;
     }
     const value = this.#clamp(this.valueValue);
     this.element.setAttribute("aria-valuenow", String(value));
-    this.element.style.setProperty("--stimeo-progress-ratio", String(this.#ratio));
+    this.element.style.setProperty("--stimeo--progress-ratio", String(this.#ratio));
     this.element.setAttribute("data-state", "determinate");
     this.#applyValueText(value);
   }
@@ -12671,13 +13168,70 @@ var RadioGroupController = class extends Controller {
     return radio.getAttribute("data-value") ?? "";
   }
 };
-var START_PROPERTY = "--stimeo-range-start";
-var END_PROPERTY = "--stimeo-range-end";
+
+// 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/controllers/range_slider_controller.ts
+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 },
@@ -12685,31 +13239,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() {
@@ -12719,141 +13269,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`).
-   */
-  #commit(start, end, notify) {
-    const prevStart = this.startValue;
-    const prevEnd = this.endValue;
-    let nextStart = this.#snap(start);
-    let nextEnd = this.#snap(end);
+   * 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, 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;
-    }
-    this.startValue = nextStart;
-    this.endValue = nextEnd;
-    this.#render(nextStart, nextEnd);
-    if (notify && (nextStart !== prevStart || nextEnd !== prevEnd)) {
+      if (moving === "start") nextStart = nextEnd;
+      else if (moving === "end") nextEnd = nextStart;
+      else [nextStart, nextEnd] = [nextEnd, nextStart];
+    }
+    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.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));
+      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);
+    }
+  }
+  /** 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;
-}
 var RatingController = class extends Controller {
   static targets = ["symbol", "field"];
   static values = {
@@ -12949,6 +13633,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 });
@@ -13264,6 +13950,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();
@@ -13678,7 +14366,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;
@@ -14372,19 +15060,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). */
@@ -14438,11 +15120,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);
-    }
-  }
 };
 
 // src/utils/safe_storage.ts
@@ -14761,14 +15438,16 @@ var SkeletonController = class extends Controller {
   static events = ["ready"];
   #timers = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timers);
+  #gate = new DetachGate();
   connect() {
-    if (this.#state !== "ready") {
+    const moved = this.#gate.pending;
+    this.#gate.cancel();
+    if (!moved && this.#state !== "ready") {
       this.#enterLoading();
     }
   }
   disconnect() {
-    this.#timers.clearAll();
-    this.#floor.cancel();
+    this.#gate.disconnected(this, () => this.#teardown());
   }
   /** Swaps to the real content. Honors `minDuration` to prevent a flash. */
   ready() {
@@ -14797,6 +15476,17 @@ var SkeletonController = class extends Controller {
     this.dispatch("ready", { detail: {} });
     announce(fillTemplate(this.announceReadyTextValue, {}));
   }
+  /**
+   * Drops the held reveal on a real detach. The markup keeps whatever it last
+   * held: an element on its way out of the document has no reader left, and one
+   * whose `data-controller` dropped the identifier no longer resolves its own
+   * targets, so the rollback could only ever be partial.
+   */
+  #teardown() {
+    this.#gate.cancel();
+    this.#timers.clearAll();
+    this.#floor.cancel();
+  }
   /** Current lifecycle phase as reflected on `data-state`. */
   get #state() {
     return this.element.getAttribute("data-state") ?? "loading";
@@ -14814,40 +15504,79 @@ var SliderController = 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;
+  /** Collapses a morph that swaps several render Values into one silent repaint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   /** Whether the consumer declared a mirroring track and the direction mirrors it. */
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
   /** Clamps the initial value and renders the starting position. */
   connect() {
-    this.#setValue(this.valueValue, { silent: true });
+    this.#repaint.activate();
+    this.#commit(this.valueValue, false);
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#repaint.cancel();
+    this.#endDrag();
+  }
+  /** Silently repaints a minimum changed by application code or a Turbo morph. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a maximum changed by application code or a Turbo morph. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a step changed by application code or a Turbo morph. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a value changed by application code or a Turbo morph. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Hydrates a thumb inserted or replaced at runtime with the current ARIA state. */
+  thumbTargetConnected(thumb) {
+    const value = this.#currentValue();
+    this.#renderThumb(thumb, value);
+    this.#renderFraction(value);
+    if (this.#drag && this.#drag.thumb === null) {
+      this.#drag.thumb = thumb;
+      thumb.focus();
+    }
+    this.#repaint.schedule();
+  }
+  /** Drops the stale focus owner while allowing a live track gesture to continue. */
+  thumbTargetDisconnected(thumb) {
+    if (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();
   }
   /** Handles keyboard stepping per the APG slider model. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
-    const big = this.stepValue * 10;
     let next = null;
+    const current = this.#currentValue();
+    const range = this.#steppedRange;
     switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = this.valueValue + this.stepValue;
+        next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = this.valueValue - this.stepValue;
+        next = stepSteppedValue(current, -1, range);
         break;
       case "PageUp":
-        next = this.valueValue + big;
+        next = stepSteppedValue(current, 10, range);
         break;
       case "PageDown":
-        next = this.valueValue - big;
+        next = stepSteppedValue(current, -10, range);
         break;
       case "Home":
         next = this.minValue;
@@ -14859,56 +15588,102 @@ var SliderController = class extends Controller {
         return;
     }
     event.preventDefault();
-    this.#setValue(next);
+    this.#commit(next, true);
   }
   /** Begins a pointer drag: sets the value and tracks subsequent movement. */
   onPointerDown(event) {
-    if (!this.hasTrackTarget) return;
-    event.preventDefault();
+    if (event.button !== 0 || this.#drag || !this.hasTrackTarget || !this.hasThumbTarget) return;
+    const track = this.trackTarget;
+    const thumb = this.thumbTarget;
     const mirrored = this.#mirrored;
-    this.#updateFromClientX(event.clientX, mirrored);
-    if (this.hasThumbTarget) this.thumbTarget.focus();
-    this.#dragAbort?.abort();
-    const abort = new AbortController();
-    this.#dragAbort = abort;
-    const onMove = (move) => this.#updateFromClientX(move.clientX, mirrored);
-    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 value = this.#valueFromClientX(event.clientX, mirrored, track);
+    if (value === null) return;
+    event.preventDefault();
+    this.#commit(value, true);
+    thumb.focus();
+    const drag = { pointer: null, track, thumb };
+    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.#commit(moved, true);
+      },
+      end: () => {
+        if (this.#drag === drag) this.#drag = null;
+      }
+    });
+    this.#drag = drag;
   }
-  /** Maps a pointer X coordinate to a value using the track's geometry. */
-  #updateFromClientX(clientX, mirrored) {
-    const rect = this.trackTarget.getBoundingClientRect();
-    if (rect.width === 0) return;
+  /** Maps a pointer X coordinate to a raw value using a stable track snapshot. */
+  #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;
-    this.#setValue(this.minValue + fraction * (this.maxValue - this.minValue));
+    return this.minValue + fraction * (this.maxValue - this.minValue);
   }
   /**
-   * Clamps `raw` to `[min, max]`, snaps it to the nearest step, stores it, and
-   * reflects the new state on the thumb's ARIA attributes and the fraction
-   * custom property. Dispatches `change` (detail `{ value }`) on a real value
-   * change — symmetric with `range-slider` — unless `silent` (the initial
-   * connect render, which is not a user edit).
+   * Stores a normalized value and renders synchronously for responsive input.
+   * Morph callbacks use {@link #render} instead, so they never write Values back
+   * or dispatch a user-facing change event.
    */
-  #setValue(raw, { silent = false } = {}) {
-    const clamped = Math.min(this.maxValue, Math.max(this.minValue, raw));
-    const stepped = this.stepValue > 0 ? Math.round((clamped - this.minValue) / this.stepValue) * this.stepValue + this.minValue : clamped;
-    const value = Math.min(this.maxValue, Math.max(this.minValue, stepped));
-    const changed = value !== this.valueValue;
-    this.valueValue = value;
+  #commit(raw, notify) {
+    const previous = this.#currentValue();
+    const value = snapSteppedValue(raw, this.#steppedRange);
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#renderValue(value);
+    if (notify && value !== previous) this.dispatch("change", { detail: { value } });
+  }
+  /**
+   * Reflects the normalized current Value without mutating or dispatching it.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    this.#renderValue(this.#currentValue());
+  }
+  /** Reflects one normalized value on the current target and CSS output. */
+  #renderValue(value) {
     if (this.hasThumbTarget) {
-      this.thumbTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.thumbTarget.setAttribute("aria-valuemax", String(this.maxValue));
-      this.thumbTarget.setAttribute("aria-valuenow", String(value));
+      this.#renderThumb(this.thumbTarget, value);
+    }
+    this.#renderFraction(value);
+  }
+  /** Writes only ARIA values that differ, including on a replacement target. */
+  #renderThumb(thumb, value) {
+    const attributes = {
+      "aria-valuemin": String(this.minValue),
+      "aria-valuemax": String(this.maxValue),
+      "aria-valuenow": String(value)
+    };
+    for (const [name, next] of Object.entries(attributes)) {
+      if (thumb.getAttribute(name) !== next) thumb.setAttribute(name, next);
     }
+  }
+  /** Writes the behavior-only positioning hook only when its value changed. */
+  #renderFraction(value) {
     const fraction = rangeFraction(value, this.minValue, this.maxValue);
-    this.element.style.setProperty(FRACTION_PROPERTY, String(fraction));
-    if (changed && !silent) this.dispatch("change", { detail: { value } });
+    const next = String(fraction);
+    if (this.element.style.getPropertyValue(FRACTION_PROPERTY) !== next) {
+      this.element.style.setProperty(FRACTION_PROPERTY, next);
+    }
+  }
+  /** Current normalized value derived from the live declarative inputs. */
+  #currentValue() {
+    return snapSteppedValue(this.valueValue, this.#steppedRange);
+  }
+  /** Shared range configuration; finite endpoints remain allowed off the grid. */
+  get #steppedRange() {
+    return { min: this.minValue, max: this.maxValue, step: this.stepValue };
+  }
+  /** Ends the current pointer session without dispatching another change. */
+  #endDrag() {
+    const drag = this.#drag;
+    this.#drag = null;
+    drag?.pointer?.end();
   }
 };
 var SmartStickyHeaderController = class extends Controller {
@@ -15191,9 +15966,7 @@ var SpinnerController = class extends Controller {
       this.element.setAttribute("data-state", "idle");
       return;
     }
-    if (!this.element.hasAttribute("data-state")) {
-      this.element.setAttribute("data-state", "idle");
-    }
+    setDefaultAttribute(this.element, "data-state", "idle");
   }
   /**
    * Re-applies the current phase to an indicator that arrived after `connect()`.
@@ -15391,6 +16164,8 @@ var StepIndicatorController = class extends Controller {
    * A pure function of the step set and `current`, so running it again writes the
    * same values — which is what lets the action path paint synchronously (the event
    * goes out after the DOM is updated) while a coalesced pass may still follow.
+   *
+   * @stimeoRenderRoot
    */
   #render() {
     const total = this.stepTargets.length;
@@ -15404,7 +16179,7 @@ var StepIndicatorController = class extends Controller {
       }
     });
     const ratio = total > 1 ? current / (total - 1) : 0;
-    this.element.style.setProperty("--stimeo-step-indicator-ratio", String(ratio));
+    this.element.style.setProperty("--stimeo--step-indicator-ratio", String(ratio));
   }
   /**
    * Constrains an index to `[0, total-1]` (or `0` when there are no steps). A
@@ -15485,6 +16260,8 @@ var StepperController = class extends Controller {
    * `aria-current="step"` is placed on the step's **first** `<button>`; the markup
    * contract assumes one operable button per step. If a step needs multiple
    * buttons, mark the navigational one first (or this would target the wrong one).
+   *
+   * @stimeoRenderRoot
    */
   #render(current) {
     this.stepTargets.forEach((step, index) => {
@@ -15889,39 +16666,163 @@ var SubmitOnceController = class extends Controller {
     }
   }
 };
+
+// src/utils/interactive_host.ts
+var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
+function isInteractiveHost(element) {
+  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+// src/controllers/switch_controller.ts
+var OBSERVED_ATTRIBUTES = [
+  "role",
+  "aria-checked",
+  "tabindex",
+  "type",
+  "href",
+  "contenteditable",
+  "controls"
+];
+var OBSERVED_ANCESTOR_ATTRIBUTES = ["contenteditable"];
 var SwitchController = class extends Controller {
   static actions = ["onKeydown", "toggle"];
   static events = ["changed"];
+  /** Defaults this instance introduced and may therefore remove safely. */
+  #ownedDefaults = /* @__PURE__ */ new Set();
+  /** Controller writes that must not be mistaken for authored morph changes. */
+  #internalAttributeValues = /* @__PURE__ */ new Map();
+  #attributeObserver = new MutationObserver((records) => {
+    this.#releaseAuthoredDefaults(records);
+    this.#attributeObserver.disconnect();
+    this.#reconcileDefaults();
+    this.#observeAttributes();
+  });
+  /** Blocks disabled pointer/native-key activation before consumer click handlers. */
+  #onClickCapture = (event) => {
+    if (!this.#isSupportedHost || !this.#isActivationDisabled) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
   /** Ensures the switch exposes a role and is keyboard-reachable. */
   connect() {
-    if (!this.element.hasAttribute("role")) {
-      this.element.setAttribute("role", "switch");
-    }
-    if (!this.element.hasAttribute("aria-checked")) {
-      this.element.setAttribute("aria-checked", "false");
-    }
-    if (!(this.element instanceof HTMLButtonElement) && !this.element.hasAttribute("tabindex")) {
-      this.element.setAttribute("tabindex", "0");
-    }
+    this.#reconcileDefaults();
+    this.element.addEventListener("click", this.#onClickCapture, true);
+    this.#observeAttributes();
+  }
+  /** Releases the explicit click guard and retained-element attribute observer. */
+  disconnect() {
+    this.element.removeEventListener("click", this.#onClickCapture, true);
+    this.#attributeObserver.disconnect();
+    this.#internalAttributeValues.clear();
   }
   /** Toggles the checked state. Bound via `data-action` (click). */
   toggle() {
+    if (!this.#isSupportedHost || this.#isActivationDisabled) return;
     this.#checked = !this.#checked;
   }
   /**
-   * Activates the switch on Space/Enter for non-native hosts and prevents the
-   * default Space scroll. Bound via `data-action` (keydown). Native `<button>`
-   * hosts are skipped because the browser already turns Space/Enter into a click,
-   * which would otherwise toggle the switch twice.
+   * Activates the switch on Space/Enter for non-native hosts and suppresses key
+   * repeat. Bound via `data-action` (keydown). A native `<button type="button">`
+   * owns the initial key-to-click synthesis; repeated keydowns are canceled before
+   * the browser can synthesize additional clicks.
    */
   onKeydown(event) {
     if (event.defaultPrevented) return;
-    if (this.element instanceof HTMLButtonElement) return;
-    if (event.repeat) return;
-    if (event.key === " " || event.key === "Enter") {
+    if (!this.#isSupportedHost) return;
+    if (event.key !== " " && event.key !== "Enter") return;
+    if (this.#isActivationDisabled) {
       event.preventDefault();
-      this.toggle();
+      event.stopImmediatePropagation();
+      return;
+    }
+    if (this.element instanceof HTMLButtonElement) {
+      if (event.repeat) event.preventDefault();
+      return;
+    }
+    event.preventDefault();
+    if (event.repeat) return;
+    this.toggle();
+  }
+  /** Re-adds only missing defaults, preserving every authored attribute value. */
+  #reconcileDefaults() {
+    if (!this.#isSupportedHost) {
+      this.#removeOwnedDefaults();
+      return;
+    }
+    this.#setOwnedDefault("role", "switch");
+    this.#setOwnedDefault("aria-checked", "false");
+    if (!(this.element instanceof HTMLButtonElement)) {
+      this.#setOwnedDefault("tabindex", "0");
+    }
+  }
+  /** Records a newly introduced default without claiming authored markup. */
+  #setOwnedDefault(name, value) {
+    if (setDefaultAttribute(this.element, name, value)) this.#ownedDefaults.add(name);
+  }
+  /**
+   * Gives ownership back when a retained-element morph authors a value. Missing
+   * owned attributes stay owned so reconciliation can restore them.
+   */
+  #releaseAuthoredDefaults(records) {
+    for (const record of records) {
+      if (record.target === this.element) {
+        const name = record.attributeName;
+        if (name && this.#ownedDefaults.has(name)) {
+          const value = this.element.getAttribute(name);
+          if (value !== null && this.#internalAttributeValues.get(name) !== value) {
+            this.#ownedDefaults.delete(name);
+          }
+        }
+      }
+    }
+    this.#internalAttributeValues.clear();
+  }
+  /** Removes only defaults introduced by this instance when a host becomes invalid. */
+  #removeOwnedDefaults() {
+    for (const name of this.#ownedDefaults) this.element.removeAttribute(name);
+    this.#ownedDefaults.clear();
+    this.#internalAttributeValues.clear();
+  }
+  /** Watches retained host attributes that Turbo can morph without reconnecting. */
+  #observeAttributes() {
+    this.#attributeObserver.observe(this.element, {
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+    let ancestor = this.element.parentElement;
+    while (ancestor) {
+      this.#attributeObserver.observe(ancestor, {
+        attributes: true,
+        attributeFilter: OBSERVED_ANCESTOR_ATTRIBUTES
+      });
+      ancestor = ancestor.parentElement;
+    }
+  }
+  /** Whether the host has one activation model that this controller can own. */
+  get #isSupportedHost() {
+    if (this.element instanceof HTMLButtonElement) return this.element.type === "button";
+    return !isInteractiveHost(this.element);
+  }
+  /** Whether ARIA or native HTML semantics make the supported switch inoperable. */
+  get #isActivationDisabled() {
+    let current = this.element;
+    while (current) {
+      if (current.getAttribute("aria-disabled") === "true") return true;
+      current = current.parentElement;
     }
+    if (!(this.element instanceof HTMLButtonElement)) return false;
+    return this.element.disabled || inheritsFieldsetDisabled(this.element);
   }
   /** Whether the switch is currently on. */
   get #checked() {
@@ -15929,7 +16830,9 @@ var SwitchController = class extends Controller {
   }
   /** Reflects the new state on `aria-checked` and notifies listeners. */
   set #checked(value) {
-    this.element.setAttribute("aria-checked", value ? "true" : "false");
+    const reflected = value ? "true" : "false";
+    this.#internalAttributeValues.set("aria-checked", reflected);
+    this.element.setAttribute("aria-checked", reflected);
     this.dispatch("changed", { detail: { checked: value } });
   }
 };
@@ -16240,7 +17143,7 @@ var TextareaAutosizeController = class extends Controller {
     } else {
       el.removeAttribute("data-at-max-rows");
     }
-    el.style.setProperty("--stimeo-textarea-rows", String(rows));
+    el.style.setProperty("--stimeo--textarea-rows", String(rows));
     if (height !== this.#lastHeight) {
       this.#lastHeight = height;
       this.dispatch("resize", { detail: { height, rows } });
@@ -16497,7 +17400,6 @@ var TimePickerController = class extends Controller {
   }
   /** Propagates a wrap carry from `kind` into the next larger segment. */
   #carry(kind, amount) {
-    if (amount === 0) return;
     if (kind === "second") this.#step("minute", amount);
     else if (kind === "minute") this.#step("hour", amount);
   }
@@ -16559,15 +17461,19 @@ var TimePickerController = class extends Controller {
     segment.setAttribute("aria-valuemax", String(max));
     segment.textContent = text;
   }
-  /** Composes `HH:MM[:SS]` (24-hour) into the hidden field; dispatches `change`. */
+  /** Composes `HH:MM[:SS]` and notifies both native-form and widget consumers. */
   #syncField(notify) {
     const h24 = this.#hours24();
     const parts = [pad(h24), pad(this.#state.minute)];
     if (this.secondsValue) parts.push(pad(this.#state.second));
     const value = parts.join(":");
-    if (this.hasFieldTarget && this.fieldTarget.value !== value) {
+    const fieldChanged = this.hasFieldTarget && this.fieldTarget.value !== value;
+    if (fieldChanged) {
       this.fieldTarget.value = value;
     }
+    if (notify && fieldChanged) {
+      this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
+    }
     if (notify && value !== this.#lastValue) this.dispatch("change", { detail: { value } });
     this.#lastValue = value;
   }
@@ -17461,7 +18367,7 @@ var TransitionController = class extends Controller {
     else window.clearTimeout(id);
   }
 };
-var NESTED_INTERACTIVE = 'input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"])';
+var NESTED_INTERACTIVE = INTERACTIVE_HOST_SELECTOR;
 var TreeViewController = class extends Controller {
   static targets = ["item", "group"];
   static actions = ["onClick", "onKeydown", "toggle"];
@@ -17722,6 +18628,7 @@ var TreeViewController = class extends Controller {
     if (target.closest('[role="treeitem"]') !== item) return null;
     const control = target.closest(NESTED_INTERACTIVE);
     if (control && item.contains(control)) return null;
+    if (isInteractiveHost(target)) return null;
     return item;
   }
   /**