stimeo-ui 0.3.0 → 0.5.0

package/dist/index.js

@@ -110,6 +110,35 @@ var AccordionController = class extends Controller {
   }
 };
 
+// src/utils/before_cache_reset.ts
+var BeforeCacheReset = class _BeforeCacheReset {
+  /** Every subscribed instance, iterated by the one shared document listener. */
+  static #subscribers = /* @__PURE__ */ new Set();
+  /** The shared listener; installed while at least one instance is subscribed. */
+  static #onBeforeCache = () => {
+    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
+  };
+  #rewind;
+  /** @param rewind - the pass that returns this controller's state to its initial form. */
+  constructor(rewind) {
+    this.#rewind = rewind;
+  }
+  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
+  activate() {
+    const first = _BeforeCacheReset.#subscribers.size === 0;
+    _BeforeCacheReset.#subscribers.add(this);
+    if (first) {
+      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+    }
+  }
+  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
+  deactivate() {
+    _BeforeCacheReset.#subscribers.delete(this);
+    if (_BeforeCacheReset.#subscribers.size > 0) return;
+    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
+  }
+};
+
 // src/utils/escape_layer.ts
 function claimsWhileFocusWithin(element) {
   return () => {
@@ -249,7 +278,7 @@ var FocusTrap = class {
     }
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     const onEscape = this.#options.onEscape;
     if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
@@ -266,7 +295,7 @@ var FocusTrap = class {
     this.#activeState = false;
     this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     if (this.#scrollLocked) {
       document.body.style.overflow = this.#previousBodyOverflow;
       this.#scrollLocked = false;
@@ -290,9 +319,7 @@ var FocusTrap = class {
    * untouched (restore-open designs reopen against a clean baseline), and focus
    * is left alone mid-navigation. The listener lives only while active.
    */
-  #onBeforeCache = () => {
-    this.deactivate({ restoreFocus: false });
-  };
+  #beforeCache = new BeforeCacheReset(() => this.deactivate({ restoreFocus: false }));
   /**
    * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
    * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
@@ -427,6 +454,39 @@ var AlertDialogController = class extends Controller {
   }
 };
 
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -495,6 +555,7 @@ var SafeInterval = class extends TimerRegistry {
 };
 
 // src/controllers/announcer_controller.ts
+var LEVELS = ["polite", "assertive"];
 var AnnouncerController = class extends Controller {
   static targets = ["polite", "assertive"];
   static values = {
@@ -506,6 +567,30 @@ var AnnouncerController = class extends Controller {
   #timers = new SafeTimeout();
   /** Live regions generated to stand in for absent targets, for teardown. */
   #generated = /* @__PURE__ */ new Map();
+  /** Messages waiting to be written, oldest first, one queue per politeness. */
+  #queues = /* @__PURE__ */ new Map();
+  /** Politeness levels whose next drain is already armed. */
+  #draining = /* @__PURE__ */ new Set();
+  /** Collapses a batch of target callbacks (and morph removals) into one pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileRegions());
+  /**
+   * Watches the host's own children for a generated region disappearing. A morph
+   * drops it — the server's HTML never had it — and no target callback reports
+   * that, because a generated region carries no target attribute. `subtree` stays
+   * off so writing a message inside a region does not re-enter this pass.
+   */
+  #hostWatch = new MutationObserver(() => {
+    this.#reconcile.schedule();
+  });
+  /** Rewinds to an announceable initial state for the snapshot; see the remarks. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /**
+   * The one timer a region may have outstanding — its dedupe re-set, then its
+   * auto-clear. Held weakly so a swapped-out target is not retained; a leftover
+   * id is harmless because {@link SafeTimeout.clear} no-ops on an id it does not
+   * own.
+   */
+  #pending = /* @__PURE__ */ new WeakMap();
   /**
    * Guards against handling the same CustomEvent twice. An event dispatched on
    * the controller element with `bubbles: true` reaches both the element and the
@@ -522,13 +607,86 @@ var AnnouncerController = class extends Controller {
     this.#announce(message, this.#assertiveFromDetail(detail));
   };
   connect() {
+    this.#reconcile.activate();
+    this.#beforeCache.activate();
+    this.#reconcileRegions();
+    this.#hostWatch.observe(this.element, { childList: true });
     this.element.addEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     window.addEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
   }
   disconnect() {
+    this.#reconcile.cancel();
+    this.#hostWatch.disconnect();
+    this.#beforeCache.deactivate();
     this.element.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     window.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     this.#timers.clearAll();
+    this.#queues.clear();
+    this.#draining.clear();
+    this.#removeGenerated();
+  }
+  /** Retires the stand-in once the consumer supplies a polite region. */
+  politeTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Materialises a stand-in once the consumer's polite region goes away. */
+  politeTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Retires the stand-in once the consumer supplies an assertive region. */
+  assertiveTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Materialises a stand-in once the consumer's assertive region goes away. */
+  assertiveTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Brings the region set back to exactly one region per politeness and reports
+   * whether anything had to be created.
+   *
+   * A region created here is not written to in the same task: assistive tech
+   * reports changes to regions it already knows about, so {@link drain} waits a
+   * task whenever this says a region is new.
+   */
+  #reconcileRegions() {
+    let created = false;
+    for (const level of LEVELS) {
+      if (this.#hasTargetFor(level)) {
+        const generated = this.#generated.get(level);
+        if (generated) {
+          generated.remove();
+          this.#generated.delete(level);
+        }
+        continue;
+      }
+      const existing = this.#generated.get(level);
+      if (existing?.isConnected) continue;
+      this.#generated.set(level, this.#createRegion(level));
+      created = true;
+    }
+    return created;
+  }
+  /** Whether the consumer supplied a target for `level`. */
+  #hasTargetFor(level) {
+    return level === "assertive" ? this.hasAssertiveTarget : this.hasPoliteTarget;
+  }
+  /** Builds a visually hidden live region for `level` and attaches it. */
+  #createRegion(level) {
+    const region = document.createElement("div");
+    region.setAttribute("aria-live", level);
+    region.setAttribute("aria-atomic", "true");
+    visuallyHide(region);
+    this.element.appendChild(region);
+    return region;
+  }
+  /**
+   * Removes and forgets every region this controller generated. Authored targets
+   * belong to the consumer and are left untouched. Forgetting them is what keeps
+   * the live page working after a snapshot rewind: the next announcement finds an
+   * empty map and materialises a fresh region.
+   */
+  #removeGenerated() {
     for (const region of this.#generated.values()) {
       region.remove();
     }
@@ -550,47 +708,122 @@ var AnnouncerController = class extends Controller {
     this.#announce(message, assertive);
   }
   /**
-   * Writes `message` into the matching live region and schedules its clear.
+   * Queues `message` for its politeness and arms the drain.
    *
-   * When the region already holds the same text, an aria-atomic region is not
-   * re-read by assistive tech (the node did not change). If `dedupeReannounce`
-   * is on, the text is cleared and re-set on a later task so the mutation is
-   * observed and announced again.
+   * Queuing is what makes a burst audible: assistive tech announces the changes it
+   * observes, so several messages written into one region within a single task are
+   * one change and only the last is read.
    */
   #announce(message, assertive) {
-    const region = this.#regionFor(assertive ? "assertive" : "polite");
+    const level = assertive ? "assertive" : "polite";
+    const queue = this.#queues.get(level);
+    if (queue) {
+      queue.push(message);
+    } else {
+      this.#queues.set(level, [message]);
+    }
+    this.#scheduleDrain(level);
+  }
+  /** Arms one drain pass for `level`; further messages ride the pass already armed. */
+  #scheduleDrain(level) {
+    if (this.#draining.has(level)) return;
+    this.#draining.add(level);
+    this.#timers.set(() => {
+      this.#draining.delete(level);
+      this.#drain(level);
+    }, 0);
+  }
+  /**
+   * Writes one queued message, then arms the next pass while the queue holds more.
+   *
+   * Two steps take a whole pass without consuming the message: materialising a
+   * region (it has to be in the accessibility tree before the text arrives) and
+   * emptying a region that already holds this exact text (an unchanged node is not
+   * re-read, so `dedupeReannounce` clears first and writes on the following pass).
+   */
+  #drain(level) {
+    const queue = this.#queues.get(level);
+    const message = queue?.[0];
+    if (queue === void 0 || message === void 0) return;
+    if (this.#reconcileRegions()) {
+      this.#scheduleDrain(level);
+      return;
+    }
+    const region = this.#regionFor(level);
     if (this.dedupeReannounceValue && region.textContent === message) {
+      this.#cancelPending(region);
       region.textContent = "";
-      this.#timers.set(() => {
-        region.textContent = message;
-        this.#scheduleClear(region, message);
-      }, 0);
+      this.#scheduleDrain(level);
       return;
     }
+    queue.shift();
+    this.#cancelPending(region);
     region.textContent = message;
     this.#scheduleClear(region, message);
+    if (queue.length > 0) this.#scheduleDrain(level);
   }
   /** Clears the region after `clearAfter` ms, unless a newer message replaced it. */
   #scheduleClear(region, message) {
     if (this.clearAfterValue <= 0) return;
-    this.#timers.set(() => {
-      if (region.textContent === message) region.textContent = "";
-    }, this.clearAfterValue);
+    this.#schedule(
+      region,
+      () => {
+        if (region.textContent === message) region.textContent = "";
+      },
+      this.clearAfterValue
+    );
+  }
+  /**
+   * Arms `region`'s single pending timer. Callers reach here with the slot
+   * already free — `#announce` releases it, and a fired timer clears its own
+   * entry below — so this does not cancel again.
+   */
+  #schedule(region, callback, delay) {
+    const id = this.#timers.set(() => {
+      this.#pending.delete(region);
+      callback();
+    }, delay);
+    this.#pending.set(region, id);
   }
-  /** Resolves the live region for a politeness level, generating it if absent. */
+  /** Releases `region`'s pending timer, if it has one. */
+  #cancelPending(region) {
+    this.#timers.clear(this.#pending.get(region) ?? -1);
+    this.#pending.delete(region);
+  }
+  /**
+   * Resolves the live region for a politeness level.
+   *
+   * The remembered stand-in is used only while it is still in the document: a morph
+   * can drop it, and writing into the detached node would announce nothing at all.
+   */
   #regionFor(level) {
     if (level === "assertive" && this.hasAssertiveTarget) return this.assertiveTarget;
     if (level === "polite" && this.hasPoliteTarget) return this.politeTarget;
     const existing = this.#generated.get(level);
-    if (existing) return existing;
-    const region = document.createElement("div");
-    region.setAttribute("aria-live", level);
-    region.setAttribute("aria-atomic", "true");
-    visuallyHide(region);
-    this.element.appendChild(region);
+    if (existing?.isConnected) return existing;
+    const region = this.#createRegion(level);
     this.#generated.set(level, region);
     return region;
   }
+  /**
+   * Restores the announceable initial state for the snapshot Turbo is about to
+   * take: queued and displayed messages go, generated regions go, and the live
+   * page — which keeps running when a visit is aborted — gets its regions back on
+   * the next task, after the clone.
+   */
+  #rewindForCache() {
+    this.#queues.clear();
+    this.#draining.clear();
+    this.#timers.clearAll();
+    for (const level of LEVELS) {
+      if (this.#hasTargetFor(level)) {
+        const target = level === "assertive" ? this.assertiveTarget : this.politeTarget;
+        target.textContent = "";
+      }
+    }
+    this.#removeGenerated();
+    this.#timers.set(() => this.#reconcileRegions(), 0);
+  }
   /** Extracts a non-empty string `message` from a CustomEvent detail, else null. */
   #messageFromDetail(detail) {
     if (detail && typeof detail === "object" && "message" in detail) {
@@ -624,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>`:
@@ -1113,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;
@@ -1845,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;
@@ -2054,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 = {
@@ -2073,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();
@@ -2382,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;
     }
@@ -2415,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],
@@ -2440,16 +2691,29 @@ var ColorPickerController = class extends Controller {
   /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
   #dragAbort = null;
   /** Seeds the model from the initial hex value and renders every surface. */
+  /**
+   * Collapses a morph that swaps render inputs into one repaint, and refuses the
+   * pass Stimulus delivers before `connect()`.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
   connect() {
+    this.#repaint.activate();
     const parsed = hexToHsla(this.valueValue);
     if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
     this.#render();
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
+    this.#repaint.cancel();
     this.#dragAbort?.abort();
     this.#dragAbort = null;
   }
+  /** Repaints when application code (or a Turbo morph) changes `alpha` at runtime. */
+  alphaValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Keyboard stepping on the focused channel slider (APG Slider model). */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
@@ -2531,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);
@@ -2648,39 +2916,6 @@ function syncActiveOption(options, active) {
   return written;
 }
 
-// src/utils/microtask_coalescer.ts
-var MicrotaskCoalescer = class {
-  #run;
-  #queued = false;
-  #active = false;
-  #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
-  constructor(run) {
-    this.#run = run;
-  }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
-  activate() {
-    this.#active = true;
-  }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
-  cancel() {
-    this.#active = false;
-    this.#queued = false;
-    this.#generation += 1;
-  }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
-  schedule() {
-    if (!this.#active || this.#queued) return;
-    this.#queued = true;
-    const generation = this.#generation;
-    queueMicrotask(() => {
-      if (generation !== this.#generation || !this.#queued || !this.#active) return;
-      this.#queued = false;
-      this.#run();
-    });
-  }
-};
-
 // src/utils/option_scroll.ts
 function scrollOptionIntoView(list, option) {
   if (list.scrollHeight <= list.clientHeight) return;
@@ -3691,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();
@@ -3846,6 +4081,26 @@ var CountUpController = class extends Controller {
     this.element.removeAttribute("data-count-up-label");
   }
 };
+
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/controllers/countdown_controller.ts
+var SECOND_MS = 1e3;
 var CountdownController = class extends Controller {
   static targets = ["days", "hours", "minutes", "seconds", "status"];
   static values = {
@@ -3853,34 +4108,79 @@ var CountdownController = class extends Controller {
     interval: { type: Number, default: 1e3 },
     direction: { type: String, default: "down" },
     autostart: { type: Boolean, default: true },
-    completeLabel: { type: String, default: "" }
+    completeLabel: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
   static actions = ["pause", "reset", "resume", "start"];
   static events = ["complete", "tick"];
   #intervals = new SafeInterval();
   #intervalId = null;
+  /** Collapses a morph that swaps several render inputs at once into one re-derive. */
+  #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
   /** Epoch-ms anchor: the deadline (down) or the count-up origin (up). */
   #reference = 0;
   /** Amount (ms) captured at pause, so resume can restore the same display. */
   #pausedAmount = 0;
+  /**
+   * The amount the slots are currently showing, floored to the second they render.
+   * It lags {@link currentAmount} by up to one tick, and it — not the live reading —
+   * is what a pause has to preserve: storing the fraction behind the display instead
+   * makes the first tick after a resume step by two units.
+   */
+  #renderedAmount = 0;
   connect() {
+    this.#resync.activate();
     this.#initReference();
-    this.#render(this.#currentAmount());
-    if (this.autostartValue && this.#isValidDeadline) {
-      this.start();
-    } else {
+    const amount = this.#currentAmount();
+    this.#render(amount);
+    this.#pausedAmount = this.#renderedAmount;
+    const authored = this.element.getAttribute("data-state");
+    if (authored === null) {
+      if (this.autostartValue && this.#isValidDeadline) {
+        this.start();
+        return;
+      }
       this.element.setAttribute("data-state", "paused");
+      return;
     }
+    if (authored === "complete" && this.#isDown && amount <= 0) {
+      return;
+    }
+    const wasRunning = authored === "running";
+    this.element.setAttribute("data-state", "paused");
+    if (wasRunning) this.start();
   }
   disconnect() {
+    this.#resync.cancel();
     this.#intervals.clearAll();
     this.#intervalId = null;
   }
+  /** Re-derives the display when a morph swaps the deadline in place. */
+  deadlineValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Re-derives the display when a morph flips the counting direction in place. */
+  directionValueChanged() {
+    this.#resync.schedule();
+  }
+  /**
+   * Points the anchor at the current `deadline` / `direction` and repaints.
+   *
+   * Render only: it starts no interval and emits no event, so a morph cannot make a
+   * paused timer run or replay a milestone. A running one needs no restart either —
+   * every tick reads the anchor, so moving it is enough. While paused the stored
+   * amount follows the new reading, or resume would continue from the old deadline.
+   */
+  #resyncToValues() {
+    this.#initReference();
+    this.#render(this.#currentAmount());
+    if (this.#state !== "running") this.#pausedAmount = this.#renderedAmount;
+  }
   /** Starts (or restarts after pause) ticking toward the deadline. */
   start() {
     if (this.#state === "running" || !this.#isValidDeadline) return;
     if (this.#isDown && this.#currentAmount() <= 0) {
-      this.#complete();
+      if (this.#state !== "complete") this.#complete();
       return;
     }
     this.#runInterval();
@@ -3888,7 +4188,7 @@ var CountdownController = class extends Controller {
   /** Pauses ticking, preserving the currently displayed amount. */
   pause() {
     if (this.#state !== "running") return;
-    this.#pausedAmount = this.#currentAmount();
+    this.#pausedAmount = this.#renderedAmount;
     this.#teardownInterval();
     this.element.setAttribute("data-state", "paused");
   }
@@ -3904,8 +4204,8 @@ var CountdownController = class extends Controller {
    * run state**: a running timer keeps counting down from the reset amount, while a
    * paused (or completed) one resets the displayed amount but stays paused until the
    * user resumes — it never silently restarts. The run state is read from the DOM,
-   * not re-derived from the declarative `autostart` Value (which only governs the
-   * initial state on connect); re-deriving it would override a user's pause —
+   * not re-derived from the declarative `autostart` Value (which governs only markup
+   * that states no run state at all); re-deriving it would override a user's pause —
    * the DOM, not a re-run of declarative config, is the source of truth.
    */
   reset() {
@@ -3914,13 +4214,15 @@ var CountdownController = class extends Controller {
     this.#initReference();
     const amount = this.#currentAmount();
     this.#render(amount);
-    if (this.hasStatusTarget) this.statusTarget.textContent = "";
+    if (this.hasStatusTarget && this.statusTarget.textContent === this.completeLabelValue) {
+      this.statusTarget.textContent = "";
+    }
     this.element.setAttribute("data-state", "paused");
     if (wasRunning && this.#isValidDeadline) {
       this.#pausedAmount = 0;
       this.start();
     } else {
-      this.#pausedAmount = amount;
+      this.#pausedAmount = this.#renderedAmount;
     }
   }
   /** Schedules the repeating tick and marks the timer running. */
@@ -3955,6 +4257,7 @@ var CountdownController = class extends Controller {
       this.statusTarget.textContent = this.completeLabelValue;
     }
     this.dispatch("complete", { detail: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Sets the time anchor from the `deadline` value. */
   #initReference() {
@@ -3967,9 +4270,14 @@ 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 / 1e3);
+    const totalSeconds = Math.floor(amount / SECOND_MS);
+    this.#renderedAmount = totalSeconds * SECOND_MS;
     const days = Math.floor(totalSeconds / 86400);
     const hours = Math.floor(totalSeconds % 86400 / 3600);
     const minutes = Math.floor(totalSeconds % 3600 / 60);
@@ -4378,7 +4686,15 @@ var DateRangePickerController = class extends Controller {
   /** Deferred focus after an async month transition (cancelled on teardown). */
   #focusTimer = new SafeTimeout();
   /** Seeds the range from any pre-filled hidden fields and renders the grid. */
+  /**
+   * Collapses a morph that swaps render inputs into one repaint, and refuses the
+   * pass Stimulus delivers before `connect()`.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
   connect() {
+    this.#repaint.activate();
     this.#startDate = this.hasStartFieldTarget ? normalizeISO(this.startFieldTarget.value) : "";
     this.#endDate = this.hasEndFieldTarget ? normalizeISO(this.endFieldTarget.value) : "";
     const anchor = parseISODateString(this.#startDate) ?? this.#clampToBounds(/* @__PURE__ */ new Date()) ?? /* @__PURE__ */ new Date();
@@ -4389,8 +4705,17 @@ var DateRangePickerController = class extends Controller {
   }
   /** Cancels any pending deferred focus so it never fires on a detached element. */
   disconnect() {
+    this.#repaint.cancel();
     this.#focusTimer.clearAll();
   }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Navigates to the previous month. */
   prev(event) {
     event?.preventDefault();
@@ -4554,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;
@@ -4780,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 } });
@@ -4818,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;
@@ -4842,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) {
@@ -5483,71 +5812,157 @@ var EmptyStateController = class extends Controller {
   static targets = ["list", "empty"];
   static values = {
     itemSelector: { type: String, default: "" },
-    announce: { type: Boolean, default: false }
+    announceText: { type: String, default: "" },
+    announceFilledText: { type: String, default: "" }
   };
   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 (this.announceValue && this.hasEmptyTarget && !this.#isLiveRegion(this.emptyTarget)) {
-      this.emptyTarget.setAttribute("role", "status");
-      this.emptyTarget.setAttribute("aria-live", "polite");
-    }
-    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.#observer?.disconnect();
-    this.#observer = null;
+    this.#connected = false;
+    this.#stopObserving();
   }
-  /** Recomputes the count and syncs visibility, hooks, and the change event. */
-  #apply() {
-    if (!this.hasListTarget) return;
-    const count = this.#count();
-    const empty = count === 0;
-    this.element.setAttribute("data-count", String(count));
-    if (empty) {
-      this.element.setAttribute("data-empty", "true");
-    } else {
-      this.element.removeAttribute("data-empty");
-    }
-    this.listTarget.hidden = empty;
-    if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
-    if (this.#empty !== null && empty !== this.#empty) {
-      this.dispatch("change", { detail: { count, empty } });
-    }
-    this.#empty = empty;
+  /** Follows a `list` element swapped in at runtime (Turbo Stream `replace` / morph). */
+  listTargetConnected() {
+    this.#resync();
   }
-  /** Item count: element children matching `itemSelector`, or all element children. */
-  #count() {
-    const selector = this.itemSelectorValue;
-    if (selector.length === 0) return this.listTarget.childElementCount;
-    try {
-      return Array.from(this.listTarget.children).filter((child) => child.matches(selector)).length;
-    } catch {
-      return this.listTarget.childElementCount;
-    }
+  /** Releases the observation when the `list` element leaves the target set. */
+  listTargetDisconnected() {
+    this.#resync();
   }
-  #isLiveRegion(el) {
-    if (el.hasAttribute("aria-live")) return true;
-    const role = el.getAttribute("role");
-    return role === "status" || role === "alert";
+  /** Syncs an `empty` element that arrives — or is replaced — at runtime. */
+  emptyTargetConnected() {
+    this.#resync();
   }
-};
-var FileDropzoneController = class extends Controller {
-  static targets = ["zone", "trigger", "input", "list", "item", "itemTemplate", "status"];
-  static values = {
-    maxSize: { type: Number, default: 0 },
-    maxFiles: { type: Number, default: 0 },
-    dragLabel: { type: String, default: "Drop files to add them" }
-  };
-  static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
-  static events = ["change", "reject"];
+  /**
+   * 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;
+  }
+  /**
+   * 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));
+    if (empty) {
+      this.element.setAttribute("data-empty", "true");
+    } else {
+      this.element.removeAttribute("data-empty");
+    }
+    this.listTarget.hidden = empty;
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = !empty;
+    return count;
+  }
+  /** Item count: element children matching `itemSelector`, or all element children. */
+  #count() {
+    const selector = this.itemSelectorValue;
+    if (selector.length === 0) return this.listTarget.childElementCount;
+    try {
+      return Array.from(this.listTarget.children).filter((child) => child.matches(selector)).length;
+    } catch {
+      return this.listTarget.childElementCount;
+    }
+  }
+};
+var FileDropzoneController = class extends Controller {
+  static targets = ["zone", "trigger", "input", "list", "item", "itemTemplate", "status"];
+  static values = {
+    maxSize: { type: Number, default: 0 },
+    maxFiles: { type: Number, default: 0 },
+    dragLabel: { type: String, default: "Drop files to add them" }
+  };
+  static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
+  static events = ["change", "reject"];
   /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
   /** Wires file removal as a delegated listener on the list container. */
@@ -5789,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
@@ -5857,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")) {
@@ -5889,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 } });
     };
@@ -6184,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);
@@ -6362,35 +6887,150 @@ var FormValidationController = class _FormValidationController extends Controlle
     element.willValidate;
   }
 };
+
+// src/utils/detach_gate.ts
+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
+   * means ambiguous (in-page move or observed-root exit), NOT "alive".
+   */
+  static isDetached(host) {
+    if (!host.element.isConnected) return true;
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return !tokens.includes(host.identifier);
+  }
+  /**
+   * Call from `disconnect()`: runs `teardown` synchronously on a definite
+   * detach (fast path), otherwise defers it one microtask — a reconnect
+   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
+   * One microtask is the whole probe window: Stimulus reconnects a moved
+   * element within the same mutation batch, before the checkpoint drains.
+   */
+  disconnected(host, teardown) {
+    if (_DetachGate.isDetached(host)) {
+      this.#pending = false;
+      teardown();
+      return;
+    }
+    this.#pending = true;
+    queueMicrotask(() => {
+      if (!this.#pending) return;
+      this.#pending = false;
+      teardown();
+    });
+  }
+  /**
+   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
+   * an in-page move) and from the head of any teardown path not routed through
+   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
+   * never run the teardown a second time.
+   */
+  cancel() {
+    this.#pending = false;
+  }
+};
+
+// src/utils/min_duration_floor.ts
+var MinDurationFloor = class {
+  #timers;
+  /** Pending finish timer id, or `null` when nothing is held back. */
+  #timerId = null;
+  /** Epoch ms the floor is measured from. */
+  #since = 0;
+  /** @param timers - the controller's registry; the floor schedules into it. */
+  constructor(timers) {
+    this.#timers = timers;
+  }
+  /** Starts the floor: call when the state being held becomes visible. */
+  begin() {
+    this.#since = Date.now();
+  }
+  /** True while a finish is held back waiting for the floor to elapse. */
+  get pending() {
+    return this.#timerId !== null;
+  }
+  /**
+   * Runs `finish` once the floor has elapsed, immediately when it already has.
+   *
+   * A held-back finish is **replaced**, never stacked: only the most recently
+   * queued id is cancellable, so a second timer would outlive every cancel and
+   * end a state that has since restarted. Controllers that want the first signal
+   * to win guard on {@link pending} before calling.
+   */
+  schedule(minDuration, finish) {
+    this.cancel();
+    const remaining = minDuration - (Date.now() - this.#since);
+    if (remaining > 0) {
+      this.#timerId = this.#timers.set(() => {
+        this.#timerId = null;
+        finish();
+      }, remaining);
+    } else {
+      finish();
+    }
+  }
+  /** Drops a held-back finish. Safe when none is queued, or after a bulk clear. */
+  cancel() {
+    if (this.#timerId !== null) {
+      this.#timers.clear(this.#timerId);
+      this.#timerId = null;
+    }
+  }
+};
+
+// src/controllers/frame_loading_controller.ts
 var FrameLoadingController = class extends Controller {
   static targets = ["content", "skeleton", "overlay"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceReadyText: { type: String, default: "" },
     minDuration: { type: Number, default: 0 },
     restoreFocus: { type: Boolean, default: true }
   };
   static events = ["start", "end"];
   #timeouts = new SafeTimeout();
+  #floor = new MinDurationFloor(this.#timeouts);
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #loading = false;
-  #startedAt = 0;
-  #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 = "";
   #onStart = () => {
-    this.#timeouts.clearAll();
+    this.#floor.cancel();
     if (!this.#loading) this.#begin();
   };
   #onEnd = () => {
     if (!this.#loading) return;
-    const remaining = this.minDurationValue - (Date.now() - this.#startedAt);
-    if (remaining > 0) {
-      this.#timeouts.clearAll();
-      this.#timeouts.set(() => this.#finish(), remaining);
-    } else {
-      this.#finish();
-    }
+    this.#floor.schedule(this.minDurationValue, () => this.#finish());
   };
   connect() {
+    this.#gate.cancel();
+    this.#beforeCache.activate();
     this.element.addEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.addEventListener("turbo:frame-load", this.#onEnd);
     this.element.addEventListener("turbo:fetch-request-error", this.#onEnd);
@@ -6399,48 +7039,123 @@ var FrameLoadingController = class extends Controller {
     this.element.removeEventListener("turbo:before-fetch-request", this.#onStart);
     this.element.removeEventListener("turbo:frame-load", this.#onEnd);
     this.element.removeEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
+  }
+  /**
+   * 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();
-    if (this.#loading) {
-      this.element.removeAttribute("aria-busy");
-      this.element.removeAttribute("data-frame-loading");
-      this.#clearInert();
-    }
+    this.#floor.cancel();
+    if (this.#loading) this.#rewindHooks();
     this.#loading = false;
     this.#previousFocus = null;
   }
+  /**
+   * 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.#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() {
     this.#loading = true;
-    this.#startedAt = Date.now();
+    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: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** 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, {}));
   }
   /** Marks the content inert to block double-submits while stale (if we own it). */
   #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() {
@@ -6477,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 },
@@ -6484,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 });
@@ -6499,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) {
@@ -6511,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);
   }
 };
 
@@ -6666,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) {
@@ -6680,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();
   }
@@ -7535,7 +8298,55 @@ var LocalTimeController = class extends Controller {
     titleFormat: { type: String, default: "" }
   };
   static events = ["format"];
+  /** Collapses a morph that swaps several render inputs at once into one repaint. */
+  #resync = new MicrotaskCoalescer(() => this.#render());
+  /**
+   * Watches the one render input that is not a Value. Only `datetime` is filtered
+   * in, so the text and `title` this controller writes cannot re-enter the pass.
+   */
+  #datetimeWatch = new MutationObserver(() => {
+    this.#resync.schedule();
+  });
   connect() {
+    this.#resync.activate();
+    this.#datetimeWatch.observe(this.element, { attributeFilter: ["datetime"] });
+    this.#render();
+  }
+  disconnect() {
+    this.#resync.cancel();
+    this.#datetimeWatch.disconnect();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeZone` at runtime. */
+  timeZoneValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `dateStyle` at runtime. */
+  dateStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `timeStyle` at runtime. */
+  timeStyleValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `titleFormat` at runtime. */
+  titleFormatValueChanged() {
+    this.#resync.schedule();
+  }
+  /**
+   * Formats the instant in `datetime` against the current Values and writes it out.
+   *
+   * The `format` event rides with every pass, including a repaint a morph triggers:
+   * 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();
     if (date === null) return;
     const formatted = this.#applyFormat(date, this.dateStyleValue, this.timeStyleValue);
@@ -7545,7 +8356,10 @@ var LocalTimeController = class extends Controller {
     if (title !== null) this.element.setAttribute("title", title);
     this.dispatch("format", { detail: { formatted } });
   }
-  /** Parses the UTC `datetime` attribute into a {@link Date}, or `null`. */
+  /**
+   * Parses the UTC `datetime` attribute into a {@link Date}, or `null`. Whitespace
+   * around the attribute value is tolerated.
+   */
   #parse() {
     const raw = this.element.getAttribute("datetime");
     if (!raw) return null;
@@ -7558,11 +8372,21 @@ var LocalTimeController = class extends Controller {
    * the *runtime's* local zone, contradicting "the server emits UTC". Values that
    * already carry `Z` or a `±hh:mm` offset (and bare `YYYY-MM-DD` dates, already
    * parsed as UTC) are returned unchanged.
+   *
+   * HTML accepts a space where ISO 8601 wants `T`, and `Date.parse` of that form is
+   * left to each engine, so a whole value shaped that way is normalized to the `T`
+   * separator first. The pattern is anchored: a value trailing anything else — a
+   * zone word such as `"2026-06-08 12:30:00 UTC"` — is handed to `Date.parse` as
+   * authored instead of being turned into a string nothing can parse.
    */
   #asUtc(value) {
-    const hasTime = /T\d{2}:\d{2}/.test(value);
-    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(value);
-    return hasTime && !hasZone ? `${value}Z` : value;
+    const isoLike = value.replace(
+      /^(\d{4}-\d{2}-\d{2}) (\d{2}:\d{2}(?::\d{2}(?:\.\d+)?)?(?:Z|[+-]\d{2}:?\d{2})?)$/,
+      "$1T$2"
+    );
+    const hasTime = /T\d{2}:\d{2}/.test(isoLike);
+    const hasZone = /(Z|[+-]\d{2}:?\d{2})$/.test(isoLike);
+    return hasTime && !hasZone ? `${isoLike}Z` : isoLike;
   }
   /**
    * Builds the optional detailed `title`. `titleFormat` is an `Intl` style
@@ -7591,12 +8415,12 @@ var LocalTimeController = class extends Controller {
       return null;
     }
   }
-  /** Locale precedence: the value, then the element's `lang`, then the document's. */
+  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
   get #locale() {
-    return this.localeValue || this.element.lang || document.documentElement.lang || void 0;
+    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 = {
@@ -8440,9 +9264,29 @@ var MenubarController = class extends Controller {
     if (index !== -1) items[index]?.focus();
   }
 };
+
+// src/utils/range.ts
+function rangeFraction(value, min, max) {
+  const span = max - min;
+  if (!(span > 0)) return 0;
+  const clamped = Math.min(max, Math.max(min, value));
+  let fraction;
+  if (Number.isFinite(span)) {
+    fraction = (clamped - min) / span;
+  } else {
+    const scale = Math.max(Math.abs(min), Math.abs(max));
+    fraction = (clamped / scale - min / scale) / (max / scale - min / scale);
+  }
+  if (!Number.isFinite(fraction)) return 0;
+  return Math.min(1, Math.max(0, fraction));
+}
+
+// src/controllers/meter_controller.ts
+var OWNED_VALUE_TEXT = "data-stimeo--meter-owns-valuetext";
 var MeterController = class extends Controller {
   static targets = ["bar"];
   static values = {
+    announceText: { type: String, default: "" },
     value: { type: Number, default: 0 },
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
@@ -8453,9 +9297,24 @@ var MeterController = class extends Controller {
   };
   static actions = ["setValue"];
   static events = ["change"];
+  /**
+   * Collapses a morph that swaps several render inputs at once into one repaint.
+   * A single update usually rewrites the whole set, and each Value would otherwise
+   * repaint on its own.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
+  /** The segment last announced, so only a change is read out. */
+  #announcedState = null;
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
   /**
    * Updates the measured value from an action param (`amount`) or a
    * `detail.value` CustomEvent, syncs ARIA and `data-state`, and dispatches
@@ -8465,59 +9324,97 @@ var MeterController = class extends Controller {
     const next = toFiniteNumber(event.params?.amount ?? event.detail?.value);
     if (next === null) return;
     this.valueValue = this.#clamp(next);
-    this.#render();
-    this.dispatch("change", {
-      detail: { value: this.valueValue, ratio: this.#ratio, state: this.#state }
-    });
+    const reading = this.#render();
+    this.dispatch("change", { detail: reading });
+    if (reading.state !== this.#announcedState) {
+      this.#announcedState = reading.state;
+      announce(
+        fillTemplate(this.announceTextValue, { state: reading.state, value: reading.value })
+      );
+    }
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `low` at runtime. */
+  lowValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `high` at runtime. */
+  highValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */
+  valueTextValueChanged() {
+    this.#repaint.schedule();
   }
   /** Clamps `raw` into the configured `[min, max]` range. */
   #clamp(raw) {
     return Math.min(this.maxValue, Math.max(this.minValue, raw));
   }
-  /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */
-  get #ratio() {
-    const span = this.maxValue - this.minValue;
-    if (span <= 0) return 0;
-    return (this.#clamp(this.valueValue) - this.minValue) / span;
-  }
   /** Whether a threshold attribute is present (absent = no threshold). */
   #hasThreshold(name) {
     return this.element.hasAttribute(`data-stimeo--meter-${name}-value`);
   }
   /**
-   * Classifies the value into a `low`/`medium`/`high` segment. Values at or
-   * below `low` are `low`; at or above `high` are `high`; otherwise `medium`.
-   * With neither threshold present, everything is `medium`.
+   * Classifies `value` into a `low`/`medium`/`high` segment. Values at or below
+   * `low` are `low`; at or above `high` are `high`; otherwise `medium`. With
+   * neither threshold present, everything is `medium`.
    */
-  get #state() {
-    const value = this.#clamp(this.valueValue);
+  #stateOf(value) {
     if (this.#hasThreshold("low") && value <= this.lowValue) return "low";
     if (this.#hasThreshold("high") && value >= this.highValue) return "high";
     return "medium";
   }
-  /** Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio. */
+  /**
+   * Reflects value/range onto ARIA, the segment onto `data-state`, and the ratio.
+   * The reading is derived once and returned, so the `change` detail reports the
+   * same numbers the DOM just received.
+   *
+   * @stimeoRenderRoot
+   */
   #render() {
     const value = this.#clamp(this.valueValue);
+    const reading = {
+      value,
+      ratio: rangeFraction(value, this.minValue, this.maxValue),
+      state: this.#stateOf(value)
+    };
     this.element.setAttribute("aria-valuemin", String(this.minValue));
     this.element.setAttribute("aria-valuemax", String(this.maxValue));
-    this.element.setAttribute("aria-valuenow", String(value));
-    this.element.style.setProperty("--stimeo-meter-ratio", String(this.#ratio));
-    this.element.setAttribute("data-state", this.#state);
-    this.#applyValueText(value);
+    this.element.setAttribute("aria-valuenow", String(reading.value));
+    this.element.style.setProperty("--stimeo--meter-ratio", String(reading.ratio));
+    this.element.setAttribute("data-state", reading.state);
+    this.#applyValueText(reading);
+    return reading;
   }
   /**
    * Sets `aria-valuetext` from the consumer-provided template, substituting
-   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library;
-   * cleared when no template is given.
+   * `{value}`, `{percent}`, and `{state}`. Kept i18n-neutral in the library.
+   * With no template the attribute belongs to the consumer, so only a text this
+   * controller wrote is taken back ({@link OWNED_VALUE_TEXT}).
    */
-  #applyValueText(value) {
+  #applyValueText({ value, ratio, state }) {
     if (this.valueTextValue.length === 0) {
-      this.element.removeAttribute("aria-valuetext");
+      if (this.element.hasAttribute(OWNED_VALUE_TEXT)) {
+        this.element.removeAttribute("aria-valuetext");
+        this.element.removeAttribute(OWNED_VALUE_TEXT);
+      }
       return;
     }
-    const percent = Math.round(this.#ratio * 100);
-    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", this.#state);
+    const percent = Math.round(ratio * 100);
+    const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent)).replaceAll("{state}", state);
     this.element.setAttribute("aria-valuetext", text);
+    this.element.setAttribute(OWNED_VALUE_TEXT, "");
   }
 };
 
@@ -9585,20 +10482,17 @@ var NestedFormController = class extends Controller {
 var NetworkStatusController = class extends Controller {
   static targets = ["offline", "online"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceOnlineText: { type: String, default: "" },
     onlineAutoHide: { type: Number, default: 0 }
   };
   static events = ["change"];
   #timers = new SafeTimeout();
   /** Last known connectivity; guards against duplicate-state re-announcements. */
   #online = true;
-  /** Banner text captured from the markup so transitions can re-write it. */
-  #offlineMessage = "";
-  #onlineMessage = "";
   #handleOnline = () => this.#update(true);
   #handleOffline = () => this.#update(false);
   connect() {
-    this.#offlineMessage = this.hasOfflineTarget ? (this.offlineTarget.textContent ?? "").trim() : "";
-    this.#onlineMessage = this.hasOnlineTarget ? (this.onlineTarget.textContent ?? "").trim() : "";
     if (this.hasOfflineTarget) this.offlineTarget.hidden = true;
     if (this.hasOnlineTarget) this.onlineTarget.hidden = true;
     this.#online = navigator.onLine;
@@ -9612,7 +10506,12 @@ var NetworkStatusController = class extends Controller {
     window.removeEventListener("offline", this.#handleOffline);
     this.#timers.clearAll();
   }
-  /** Applies a connectivity transition, guarded against duplicate states. */
+  /**
+   * Applies a connectivity transition, guarded against duplicate states.
+   *
+   * The event goes out last, so a listener reading `data-state` or a banner's
+   * visibility sees the state the transition landed on rather than the previous one.
+   */
   #update(online) {
     if (online === this.#online) return;
     this.#online = online;
@@ -9622,22 +10521,21 @@ var NetworkStatusController = class extends Controller {
     } else {
       this.#showOffline();
     }
+    announce(fillTemplate(online ? this.announceOnlineTextValue : this.announceTextValue, {}), {
+      assertive: !online
+    });
     this.dispatch("change", { detail: { online } });
   }
   /** Shows the offline banner and hides the recovery banner. */
   #showOffline() {
     this.#timers.clearAll();
     if (this.hasOnlineTarget) this.onlineTarget.hidden = true;
-    if (this.hasOfflineTarget) {
-      this.offlineTarget.textContent = this.#offlineMessage;
-      this.offlineTarget.hidden = false;
-    }
+    if (this.hasOfflineTarget) this.offlineTarget.hidden = false;
   }
   /** Shows the recovery banner, optionally auto-hiding it after `onlineAutoHide`. */
   #showOnline() {
     if (this.hasOfflineTarget) this.offlineTarget.hidden = true;
     if (!this.hasOnlineTarget) return;
-    this.onlineTarget.textContent = this.#onlineMessage;
     this.onlineTarget.hidden = false;
     if (this.onlineAutoHideValue > 0) {
       this.#timers.set(() => {
@@ -9646,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 = {
@@ -9679,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;
@@ -9705,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). */
@@ -9725,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;
@@ -9759,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;
@@ -9777,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);
   }
@@ -9824,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);
@@ -9870,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";
@@ -10384,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 {
@@ -10406,17 +11440,15 @@ var OverflowMenuController = class extends Controller {
   #lastHidden = null;
   /** The `tabindex` this instance lends the root for the focus fallback. */
   #tabindex = new TabindexLoan();
-  /** Hands Turbo a pristine snapshot: the cache is written after this event. */
-  #onBeforeCache = () => {
-    this.#restoreAll();
-  };
+  /** Hands Turbo a pristine snapshot of the bar, with every item back in place. */
+  #beforeCache = new BeforeCacheReset(() => this.#restoreAll());
   connect() {
     if (!this.hasItemsTarget || !this.hasMoreTarget) return;
     const trigger = this.#trigger();
     if (trigger !== null && this.#isBareTrigger(trigger)) {
       trigger.textContent = this.moreLabelValue;
     }
-    document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.activate();
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     this.update();
@@ -10424,7 +11456,7 @@ var OverflowMenuController = class extends Controller {
   disconnect() {
     this.#layout.disconnect();
     this.#timers.clearAll();
-    document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
+    this.#beforeCache.deactivate();
     this.#restoreAll();
     this.#lastHidden = null;
   }
@@ -10900,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) {
@@ -11107,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;
@@ -11347,53 +12383,6 @@ var PersistController = class extends Controller {
     }
   }
 };
-
-// src/utils/detach_gate.ts
-var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
-  #pending = false;
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
-  static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
-  disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
-      this.#pending = false;
-      teardown();
-      return;
-    }
-    this.#pending = true;
-    queueMicrotask(() => {
-      if (!this.#pending) return;
-      this.#pending = false;
-      teardown();
-    });
-  }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
-  cancel() {
-    this.#pending = false;
-  }
-};
-
-// src/controllers/pointer_drag_controller.ts
 var PointerDragController = class _PointerDragController extends Controller {
   static targets = ["handle"];
   static values = {
@@ -11975,6 +12964,7 @@ var PreviewGuardController = class extends Controller {
     this.element.removeAttribute("data-preview-hidden");
   }
 };
+var OWNED_VALUE_TEXT2 = "data-stimeo--progress-owns-valuetext";
 var ProgressController = class extends Controller {
   static targets = ["bar"];
   static values = {
@@ -11982,13 +12972,27 @@ var ProgressController = class extends Controller {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
     indeterminate: { type: Boolean, default: false },
-    valueText: { type: String, default: "" }
+    valueText: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
   static actions = ["setValue"];
   static events = ["change", "complete"];
+  /**
+   * Collapses a morph that swaps several render inputs at once into one repaint.
+   * A single update usually rewrites the whole set, and each Value would otherwise
+   * repaint on its own.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    this.#render();
+  });
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
   /**
    * Updates the progress value from an action param (`amount`) or a
    * `detail.value` CustomEvent, normalizes it into range, syncs ARIA, and
@@ -12004,11 +13008,30 @@ var ProgressController = class extends Controller {
     this.dispatch("change", { detail: { value, ratio: this.#ratio } });
     if (value >= this.maxValue) {
       this.dispatch("complete", { detail: { value } });
+      announce(
+        fillTemplate(this.announceTextValue, { value, percent: Math.round(this.#ratio * 100) })
+      );
     }
   }
-  /** Re-render when the indeterminate flag is toggled via its data attribute. */
+  /** Repaints when application code (or a Turbo morph) changes `indeterminate` at runtime. */
   indeterminateValueChanged() {
-    this.#render();
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `valueText` at runtime. */
+  valueTextValueChanged() {
+    this.#repaint.schedule();
   }
   /** Clamps `raw` into the configured `[min, max]` range. */
   #clamp(raw) {
@@ -12016,40 +13039,51 @@ var ProgressController = class extends Controller {
   }
   /** Current fraction of the range in `[0, 1]`; `0` when the range is empty. */
   get #ratio() {
-    const span = this.maxValue - this.minValue;
-    if (span <= 0) return 0;
-    return (this.#clamp(this.valueValue) - this.minValue) / span;
+    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.element.removeAttribute("aria-valuetext");
-      this.element.style.removeProperty("--stimeo-progress-ratio");
+      this.#clearOwnValueText();
+      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);
   }
   /**
    * Sets `aria-valuetext` from the consumer-provided template, substituting
    * `{value}` and `{percent}`. Left to the consumer so the human-readable text
-   * stays i18n-neutral in the library; cleared when no template is given.
+   * stays i18n-neutral in the library. With no template the attribute belongs to
+   * the consumer, so only a text this controller wrote is taken back
+   * ({@link OWNED_VALUE_TEXT}).
    */
   #applyValueText(value) {
     if (this.valueTextValue.length === 0) {
-      this.element.removeAttribute("aria-valuetext");
+      this.#clearOwnValueText();
       return;
     }
     const percent = Math.round(this.#ratio * 100);
     const text = this.valueTextValue.replaceAll("{value}", String(value)).replaceAll("{percent}", String(percent));
     this.element.setAttribute("aria-valuetext", text);
+    this.element.setAttribute(OWNED_VALUE_TEXT2, "");
+  }
+  /** Removes `aria-valuetext` only when this controller is the one that wrote it. */
+  #clearOwnValueText() {
+    if (!this.element.hasAttribute(OWNED_VALUE_TEXT2)) return;
+    this.element.removeAttribute("aria-valuetext");
+    this.element.removeAttribute(OWNED_VALUE_TEXT2);
   }
 };
 var RadioGroupController = class extends Controller {
@@ -12134,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 },
@@ -12148,159 +13239,305 @@ 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());
   connect() {
-    const lo = Math.min(this.startValue, this.endValue);
-    const hi = Math.max(this.startValue, this.endValue);
-    this.#commit(lo, hi, false);
+    this.#repaint.activate();
+    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.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#repaint.cancel();
+    this.#endDrag();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `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));
-    }
-    const span = this.maxValue - this.minValue;
-    this.element.style.setProperty(
-      START_PROPERTY,
-      String(span > 0 ? (start - this.minValue) / span : 0)
-    );
-    this.element.style.setProperty(
-      END_PROPERTY,
-      String(span > 0 ? (end - this.minValue) / span : 0)
-    );
-  }
-  /** Clamps `raw` to `[min, max]` and snaps it to the nearest step from `min`. */
-  #snap(raw) {
-    const clamped = Math.min(this.maxValue, Math.max(this.minValue, raw));
-    if (this.stepValue <= 0) return clamped;
-    const stepped = Math.round((clamped - this.minValue) / this.stepValue) * this.stepValue + this.minValue;
-    return Math.min(this.maxValue, Math.max(this.minValue, stepped));
+      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 = {
@@ -12313,13 +13550,33 @@ var RatingController = class extends Controller {
   static events = ["change"];
   #roving = new RovingTabindex(() => this.symbolTargets);
   /** Reflects the initial value, or switches to the non-interactive readonly view. */
+  /**
+   * Collapses a morph that swaps render inputs into one repaint, and refuses the
+   * pass Stimulus delivers before `connect()`.
+   */
+  #repaint = new MicrotaskCoalescer(() => {
+    if (this.readonlyValue) {
+      this.#applyReadonly();
+      return;
+    }
+    this.#apply(this.#clamp(this.valueValue), { focus: false });
+  });
   connect() {
+    this.#repaint.activate();
     if (this.readonlyValue) {
       this.#applyReadonly();
       return;
     }
     this.#apply(this.#clamp(this.valueValue), { focus: false });
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `value` at runtime. */
+  valueValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Selects (or clears) the clicked symbol. Bound via `data-action` (click). */
   select(event) {
     if (this.readonlyValue) return;
@@ -12376,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 });
@@ -12618,11 +13877,16 @@ var RelativeTimeController = class extends Controller {
     tickInterval: { type: Number, default: 6e4 }
   };
   #timers = new SafeTimeout();
+  /** Collapses a morph that swaps several render inputs at once into one repaint. */
+  #resync = new MicrotaskCoalescer(() => this.#resyncToValues());
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   /** Epoch ms parsed from `datetime`; `NaN` when absent or invalid. */
   #targetMs = Number.NaN;
   /** The authored absolute text, restored when the threshold fallback kicks in. */
   #absoluteText = "";
   connect() {
+    this.#resync.activate();
+    this.#beforeCache.activate();
     if (this.element.getAttribute("data-state") !== "relative") {
       this.#absoluteText = (this.element.textContent ?? "").trim();
     }
@@ -12631,9 +13895,50 @@ var RelativeTimeController = class extends Controller {
     this.#schedule();
   }
   disconnect() {
+    this.#resync.cancel();
+    this.#beforeCache.deactivate();
+    this.#timers.clearAll();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `threshold` at runtime. */
+  thresholdValueChanged() {
+    this.#resync.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `tickInterval` at runtime. */
+  tickIntervalValueChanged() {
+    this.#resync.schedule();
+  }
+  /**
+   * Renders against the current Values and re-arms the poll from now.
+   *
+   * Render only: it emits no event, and clearing first keeps the single self-arming
+   * timer single — scheduling on top of a pending one would double the poll rate for
+   * the rest of the session. A stamp whose `datetime` never parsed has nothing to
+   * render, and one that already reached its terminal fallback simply renders it
+   * again and stops.
+   */
+  #resyncToValues() {
+    if (Number.isNaN(this.#targetMs)) return;
     this.#timers.clearAll();
+    this.#schedule();
+  }
+  /**
+   * Restores the authored absolute text and the pre-render state for the snapshot
+   * Turbo is about to take, leaving the live page's poll timer alone.
+   *
+   * With no authored text held there is nothing to restore, and `data-state` has to
+   * stay as it is: that marker is what tells the next `connect()` the visible text is
+   * a rendered relative form rather than an absolute fallback to hold on to.
+   */
+  #rewindForCache() {
+    if (!this.#absoluteText) return;
+    this.element.textContent = this.#absoluteText;
+    this.element.removeAttribute("data-state");
   }
-  /** Renders the current representation and reschedules unless it is now absolute. */
+  /** Renders the current representation and reschedules unless polling can stop. */
   #schedule() {
     const nextDelay = this.#applyAndComputeDelay();
     if (nextDelay !== null) {
@@ -12641,31 +13946,46 @@ var RelativeTimeController = class extends Controller {
     }
   }
   /**
-   * Updates the visible text and returns the next poll delay (ms), or `null`
-   * once the absolute fallback is shown (which never changes, so stop polling).
+   * Updates the visible text and returns the next poll delay (ms), or `null` when
+   * 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();
     const absSeconds = Math.abs(deltaMs) / 1e3;
+    const scale = UNITS.find((u) => absSeconds < u.limit) ?? YEAR_SCALE;
+    const unitFloor = scale.unit === "second" || scale.unit === "minute" ? 6e4 : scale.ms;
+    const nextDelay = Math.max(this.tickIntervalValue, Math.min(unitFloor, 864e5));
     if (this.thresholdValue > 0 && absSeconds >= this.thresholdValue && this.#absoluteText) {
       this.element.textContent = this.#absoluteText;
       this.element.setAttribute("data-state", "absolute");
-      return null;
+      if (deltaMs <= 0) return null;
+      return Math.min(nextDelay, deltaMs - this.thresholdValue * 1e3 + 1);
     }
-    const scale = UNITS.find((u) => absSeconds < u.limit) ?? YEAR_SCALE;
+    const formatter = this.#formatter;
+    if (formatter === null) return null;
     const value = Math.round(deltaMs / scale.ms);
-    this.element.textContent = this.#formatter.format(value, scale.unit);
+    this.element.textContent = formatter.format(value, scale.unit);
     this.element.setAttribute("data-state", "relative");
-    const unitFloor = scale.unit === "second" || scale.unit === "minute" ? 6e4 : scale.ms;
-    return Math.max(this.tickIntervalValue, Math.min(unitFloor, 864e5));
+    return nextDelay;
   }
-  /** A `RelativeTimeFormat` for the resolved locale (`numeric: "auto"`). */
+  /**
+   * A `RelativeTimeFormat` for the resolved locale (`numeric: "auto"`), or `null`
+   * when the runtime rejects that locale.
+   */
   get #formatter() {
-    return new Intl.RelativeTimeFormat(this.#locale, { numeric: "auto" });
+    try {
+      return new Intl.RelativeTimeFormat(this.#locale, { numeric: "auto" });
+    } catch {
+      return null;
+    }
   }
-  /** Locale precedence: the value, then the element's `lang`, then the document's. */
+  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
   get #locale() {
-    return this.localeValue || this.element.lang || document.documentElement.lang || void 0;
+    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
 var ResetBeforeCacheController = class extends Controller {
@@ -13046,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;
@@ -13677,7 +14997,7 @@ var ScrollspyController = class extends Controller {
    *
    * @param announce Whether this sync represents a change of current section.
    */
-  #syncActiveStates(announce) {
+  #syncActiveStates(announce2) {
     const activeLinks = this.linkTargets.filter(
       (link) => this.#getAnchorId(link) === this.#activeSectionId
     );
@@ -13688,7 +15008,7 @@ var ScrollspyController = class extends Controller {
         link.removeAttribute("aria-current");
       }
     }
-    if (!announce) return;
+    if (!announce2) return;
     const primaryLink = activeLinks[0];
     if (primaryLink) {
       this.dispatch("change", { detail: { id: this.#activeSectionId, link: primaryLink } });
@@ -13740,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). */
@@ -13806,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
@@ -13836,7 +15145,7 @@ var SidebarController = class extends Controller {
     key: { type: String, default: "" },
     collapsed: { type: Boolean, default: false }
   };
-  static actions = ["beforeCache", "close", "open", "toggle"];
+  static actions = ["close", "open", "toggle"];
   /** Exact panel currently owned by the modal lifecycle (survives target churn safely). */
   #activePanel = null;
   /** Owns the overlay modal side effects; Escape closes, focus falls to trigger. */
@@ -13858,6 +15167,7 @@ var SidebarController = class extends Controller {
   #connected = false;
   connect() {
     this.#connected = true;
+    this.#beforeCache.activate();
     this.#activePanel = this.hasPanelTarget ? this.panelTarget : null;
     this.#collapsed = this.#restoreCollapsed();
     this.#mqlQuery = this.#breakpointQuery;
@@ -13867,6 +15177,7 @@ var SidebarController = class extends Controller {
   }
   disconnect() {
     this.#connected = false;
+    this.#beforeCache.deactivate();
     this.#mql?.removeEventListener("change", this.#onMediaChange);
     this.#mql = null;
     this.#mqlQuery = null;
@@ -13918,12 +15229,12 @@ var SidebarController = class extends Controller {
    * closed immediately, and modal side effects are released without moving
    * focus during navigation.
    */
-  beforeCache() {
+  #beforeCache = new BeforeCacheReset(() => {
     if (!this.#connected || !this.#isOverlay) return;
     this.#transition.cancel();
     this.#trap.deactivate({ restoreFocus: false });
     this.#setOverlayClosedImmediate();
-  }
+  });
   /** Toggles the panel: inline flips collapsed/expanded, overlay flips open/closed. */
   toggle() {
     if (this.#isOverlay) {
@@ -14120,48 +15431,37 @@ var SidebarController = class extends Controller {
 var SkeletonController = class extends Controller {
   static targets = ["placeholder", "content"];
   static values = {
+    announceReadyText: { type: String, default: "" },
     minDuration: { type: Number, default: 0 }
   };
   static actions = ["ready", "reset"];
   static events = ["ready"];
   #timers = new SafeTimeout();
-  /** Pending min-duration reveal timer id, or `null` when none is scheduled. */
-  #revealTimerId = null;
-  /** Epoch ms when the loading state began; `minDuration` is measured from it. */
-  #loadingSince = 0;
+  #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.#revealTimerId = null;
+    this.#gate.disconnected(this, () => this.#teardown());
   }
   /** Swaps to the real content. Honors `minDuration` to prevent a flash. */
   ready() {
-    if (this.#state === "ready" || this.#revealTimerId !== null) return;
-    const remaining = this.minDurationValue - (Date.now() - this.#loadingSince);
-    if (remaining > 0) {
-      this.#revealTimerId = this.#timers.set(() => {
-        this.#revealTimerId = null;
-        this.#reveal();
-      }, remaining);
-    } else {
-      this.#reveal();
-    }
+    if (this.#state === "ready" || this.#floor.pending) return;
+    this.#floor.schedule(this.minDurationValue, () => this.#reveal());
   }
   /** Returns to the loading state (e.g. a Turbo Stream re-fetch). */
   reset() {
-    if (this.#revealTimerId !== null) {
-      this.#timers.clear(this.#revealTimerId);
-      this.#revealTimerId = null;
-    }
+    this.#floor.cancel();
     this.#enterLoading();
   }
   /** Shows the placeholder, hides content, and marks the region busy. */
   #enterLoading() {
-    this.#loadingSince = Date.now();
+    this.#floor.begin();
     if (this.hasPlaceholderTarget) this.placeholderTarget.hidden = false;
     if (this.hasContentTarget) this.contentTarget.hidden = true;
     this.element.setAttribute("aria-busy", "true");
@@ -14174,6 +15474,18 @@ var SkeletonController = class extends Controller {
     this.element.setAttribute("aria-busy", "false");
     this.element.setAttribute("data-state", "ready");
     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() {
@@ -14192,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;
@@ -14237,57 +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);
+    const next = String(fraction);
+    if (this.element.style.getPropertyValue(FRACTION_PROPERTY) !== next) {
+      this.element.style.setProperty(FRACTION_PROPERTY, next);
     }
-    const span = this.maxValue - this.minValue;
-    const fraction = span > 0 ? (value - this.minValue) / span : 0;
-    this.element.style.setProperty(FRACTION_PROPERTY, String(fraction));
-    if (changed && !silent) this.dispatch("change", { detail: { value } });
+  }
+  /** 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 {
@@ -14546,38 +15942,59 @@ var SortableController = class extends Controller {
 var SpinnerController = class extends Controller {
   static targets = ["indicator", "region", "message"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceReadyText: { type: String, default: "" },
     delay: { type: Number, default: 0 },
-    minDuration: { type: Number, default: 0 }
+    minDuration: { type: Number, default: 0 },
+    timeout: { type: Number, default: 0 }
   };
   static actions = ["start", "stop"];
-  static events = ["hide", "show"];
+  static events = ["hide", "show", "timeout"];
   #timers = new SafeTimeout();
+  #floor = new MinDurationFloor(this.#timers);
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   /** Pending show-delay timer id, or `null` when no start is awaiting its delay. */
   #delayTimerId = null;
-  /** Pending min-duration hide timer id, or `null` when none is scheduled. */
-  #hideTimerId = null;
-  /** Epoch ms when the spinner became visible; `minDuration` is measured from it. */
-  #shownAt = 0;
+  /** Pending safety-net timer id, or `null` when `timeout` is off or not armed. */
+  #timeoutTimerId = null;
   connect() {
-    if (!this.element.hasAttribute("data-state")) {
+    this.#gate.cancel();
+    this.#beforeCache.activate();
+    if (this.#state === "pending" && this.#delayTimerId === null) {
+      this.#setBusy(false);
       this.element.setAttribute("data-state", "idle");
+      return;
     }
+    setDefaultAttribute(this.element, "data-state", "idle");
+  }
+  /**
+   * Re-applies the current phase to an indicator that arrived after `connect()`.
+   *
+   * A Turbo Stream can swap the indicator for a fresh node mid-load, and that node
+   * carries the markup contract's `hidden`. Without this the spinner would vanish
+   * while `data-state` still says `loading`, and nothing but the next cycle would
+   * bring it back.
+   */
+  indicatorTargetConnected(target) {
+    target.hidden = this.#state !== "loading";
   }
   disconnect() {
-    this.#timers.clearAll();
-    this.#delayTimerId = null;
-    this.#hideTimerId = null;
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
   }
   /** Begins loading. Honors `delay` before the spinner actually appears. */
   start() {
     if (this.#state === "loading") {
       this.#setBusy(true);
-      this.#cancelHide();
+      this.#floor.cancel();
+      this.#armTimeout();
       return;
     }
     if (this.#state !== "idle") return;
     this.#setBusy(true);
-    this.#cancelHide();
+    this.#floor.cancel();
+    this.#armTimeout();
     if (this.delayValue > 0) {
       this.element.setAttribute("data-state", "pending");
       this.#delayTimerId = this.#timers.set(() => {
@@ -14591,6 +16008,7 @@ var SpinnerController = class extends Controller {
   /** Ends loading. Honors `minDuration` so a shown spinner does not flicker. */
   stop() {
     const state = this.#state;
+    this.#cancelTimeout();
     if (state === "pending") {
       this.#cancelDelay();
       this.#setBusy(false);
@@ -14599,28 +16017,52 @@ var SpinnerController = class extends Controller {
     }
     if (state !== "loading") return;
     this.#setBusy(false);
-    const remaining = this.minDurationValue - (Date.now() - this.#shownAt);
-    if (remaining > 0) {
-      this.#hideTimerId = this.#timers.set(() => {
-        this.#hideTimerId = null;
-        this.#hide();
-      }, remaining);
-    } else {
-      this.#hide();
-    }
+    this.#floor.schedule(this.minDurationValue, () => this.#hide());
   }
   /** Reveals the indicator, marks the moment shown, and announces via the live region. */
   #show() {
-    this.#shownAt = Date.now();
+    this.#floor.begin();
+    this.#setBusy(true);
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = false;
     this.element.setAttribute("data-state", "loading");
     this.dispatch("show", { detail: {} });
+    announce(fillTemplate(this.announceTextValue, {}));
   }
   /** Hides the indicator and returns to the idle state. */
   #hide() {
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
     this.element.setAttribute("data-state", "idle");
     this.dispatch("hide", { detail: {} });
+    announce(fillTemplate(this.announceReadyTextValue, {}));
+  }
+  /**
+   * Drops both timers 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. The snapshot is rewound where it is
+   * still whole, on `turbo:before-cache`.
+   */
+  #teardown() {
+    this.#gate.cancel();
+    this.#timers.clearAll();
+    this.#delayTimerId = null;
+    this.#timeoutTimerId = null;
+    this.#floor.cancel();
+  }
+  /**
+   * Returns the loading state to idle for the snapshot Turbo is about to take,
+   * so a page reached with the Back button is not restored mid-load with a
+   * spinner nothing can stop. State only: `data-state`, the indicator's `hidden`,
+   * and `aria-busy`. No `hide` is dispatched — the load was never observed to
+   * finish, and a snapshot rewind is not a lifecycle event the consumer can act
+   * on. The live page keeps its timers, so a navigation that never completes
+   * leaves the running cycle intact.
+   */
+  #rewindForCache() {
+    this.#cancelTimeout();
+    this.#setBusy(false);
+    if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
+    this.element.setAttribute("data-state", "idle");
   }
   /** Reflects busy state onto the controlled region (if present). */
   #setBusy(busy) {
@@ -14628,18 +16070,32 @@ var SpinnerController = class extends Controller {
       this.regionTarget.setAttribute("aria-busy", String(busy));
     }
   }
+  /**
+   * Arms the safety net so a `stop` that never arrives cannot strand the spinner.
+   * Off by default: the consumer owns the async work, so only it knows whether a
+   * ceiling makes sense. Re-arming on a restart measures from the newest start.
+   */
+  #armTimeout() {
+    this.#cancelTimeout();
+    if (this.timeoutValue <= 0) return;
+    this.#timeoutTimerId = this.#timers.set(() => {
+      this.#timeoutTimerId = null;
+      this.dispatch("timeout", { detail: {} });
+      this.stop();
+    }, this.timeoutValue);
+  }
+  #cancelTimeout() {
+    if (this.#timeoutTimerId !== null) {
+      this.#timers.clear(this.#timeoutTimerId);
+      this.#timeoutTimerId = null;
+    }
+  }
   #cancelDelay() {
     if (this.#delayTimerId !== null) {
       this.#timers.clear(this.#delayTimerId);
       this.#delayTimerId = null;
     }
   }
-  #cancelHide() {
-    if (this.#hideTimerId !== null) {
-      this.#timers.clear(this.#hideTimerId);
-      this.#hideTimerId = null;
-    }
-  }
   /** Current lifecycle phase as reflected on `data-state`. */
   get #state() {
     return this.element.getAttribute("data-state") ?? "idle";
@@ -14652,26 +16108,65 @@ var StepIndicatorController = class extends Controller {
   };
   static actions = ["setCurrent"];
   static events = ["change"];
+  /**
+   * Whether the target callbacks may render. Stimulus reports the authored steps
+   * as connected before `connect()` and the remaining ones as disconnected after
+   * `disconnect()`, so this keeps a connect at one render pass, not one per step.
+   */
+  /**
+   * Collapses a batch of step callbacks — and a morph that swaps `current` with
+   * them — into one repaint. Replacing a list of N steps delivers N callbacks, and
+   * each one would otherwise rewrite every step's state.
+   */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   /** Renders the initial state from the `current` value. */
   connect() {
+    this.#repaint.activate();
     this.#render();
   }
+  /** Closes the window in which a queued repaint may still run. */
+  disconnect() {
+    this.#repaint.cancel();
+  }
+  /** Syncs a step appended or replaced at runtime (the consumer owns the list). */
+  stepTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Re-derives the remaining steps when one is removed at runtime. */
+  stepTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code (or a Turbo morph) changes `current` at runtime. */
+  currentValueChanged() {
+    this.#repaint.schedule();
+  }
   /**
    * Updates the current step from an external event (`detail.current`, 0-based)
-   * and dispatches `change`. Out-of-range indices are clamped to the step set.
+   * and dispatches `change`. Out-of-range indices are clamped to the step set,
+   * and both sides of the no-op test are clamped, so moving onto the step an
+   * out-of-range `current` already renders is not reported as a change.
    */
   setCurrent(event) {
     const next = event.detail?.current;
     if (typeof next !== "number" || !Number.isFinite(next)) return;
     const clamped = this.#clamp(next);
-    if (clamped === this.currentValue) return;
+    const moved = clamped !== this.#clamp(this.currentValue);
     this.currentValue = clamped;
+    if (!moved) return;
     this.#render();
     this.dispatch("change", {
       detail: { current: clamped, total: this.stepTargets.length }
     });
   }
-  /** Applies `data-state`, `aria-current`, and the progress ratio custom property. */
+  /**
+   * Applies `data-state`, `aria-current`, and the progress ratio custom property.
+   *
+   * 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;
     const current = this.#clamp(this.currentValue);
@@ -14684,12 +16179,17 @@ 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). */
+  /**
+   * Constrains an index to `[0, total-1]` (or `0` when there are no steps). A
+   * non-finite index falls back to the first step: `current` is read from markup,
+   * so an unparsable attribute arrives as `NaN` and would otherwise propagate
+   * into every state hook.
+   */
   #clamp(index) {
     const last = this.stepTargets.length - 1;
-    if (last < 0) return 0;
+    if (last < 0 || !Number.isFinite(index)) return 0;
     return Math.min(last, Math.max(0, Math.trunc(index)));
   }
 };
@@ -14760,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) => {
@@ -14789,14 +16291,18 @@ var StickToBottomController = class extends Controller {
   static targets = ["content"];
   static values = {
     threshold: { type: Number, default: 80 },
-    behavior: { type: String, default: "auto" }
+    behavior: { type: String, default: "auto" },
+    pinOnConnect: { type: Boolean, default: false }
   };
   static actions = ["scrollToBottom"];
   static events = ["pin", "new"];
   #observer = null;
+  /** Watches for the box a deferred `pinOnConnect` jump is still waiting on. */
+  #layout = null;
   #pinned = false;
   #onScroll = () => this.#updatePinned();
   connect() {
+    if (this.pinOnConnectValue && this.#measurable()) this.#scrollToBottom("instant");
     this.#pinned = this.#isPinned();
     this.#reflectPinned();
     this.element.addEventListener("scroll", this.#onScroll, { passive: true });
@@ -14804,21 +16310,29 @@ var StickToBottomController = class extends Controller {
       this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
       this.#observer.observe(this.#watched(), { childList: true });
     }
+    if (this.pinOnConnectValue && !this.#measurable()) this.#pinWhenLaidOut();
   }
   disconnect() {
     this.element.removeEventListener("scroll", this.#onScroll);
     this.#observer?.disconnect();
     this.#observer = null;
+    this.#stopWaitingForLayout();
   }
-  /** Jumps to the bottom and re-pins (wired to a "new messages" button). */
+  /**
+   * Jumps to the bottom and re-pins (wired to a "new messages" button).
+   *
+   * The has-new flag clears on request — the user has acknowledged the arrival — while
+   * pinned is read back from where the scroll landed: a jump that arrives by the time
+   * this returns pins immediately, an animated one settles from its own scroll events,
+   * and a jump the engine cannot honor leaves the container unpinned, so the next append
+   * flags it again instead of being swallowed by a pinned state that does not hold.
+   *
+   * Which of those happens is not this method's to decide — see {@link behaviorValue}.
+   */
   scrollToBottom() {
     this.#scrollToBottom();
     this.element.removeAttribute("data-has-new");
-    if (!this.#pinned) {
-      this.#pinned = true;
-      this.element.setAttribute("data-pinned", "true");
-      this.dispatch("pin", { detail: { pinned: true } });
-    }
+    this.#updatePinned();
   }
   /** Follows appended children while pinned; otherwise flags new content. */
   #onMutations(mutations) {
@@ -14853,10 +16367,43 @@ var StickToBottomController = class extends Controller {
     const el = this.element;
     return el.scrollHeight - el.clientHeight - el.scrollTop <= this.thresholdValue;
   }
-  #scrollToBottom() {
+  /**
+   * Whether the container has a box to scroll and to measure. One that is not rendered
+   * (inside a closed panel) reports every metric as 0, which reads as "already at the
+   * bottom" — a position describing no layout the user will ever see.
+   */
+  #measurable() {
+    return this.element.clientHeight > 0;
+  }
+  /**
+   * Holds the `pinOnConnect` jump until the container is laid out, then runs it and
+   * re-reads the state — otherwise the panel opens at the top still claiming the bottom.
+   */
+  #pinWhenLaidOut() {
+    if (typeof ResizeObserver === "undefined") return;
+    this.#layout = new ResizeObserver(() => {
+      if (!this.#measurable()) return;
+      this.#stopWaitingForLayout();
+      this.#scrollToBottom("instant");
+      this.#updatePinned();
+    });
+    this.#layout.observe(this.element);
+  }
+  /** Releases the layout watch, whether or not the deferred jump ever ran. */
+  #stopWaitingForLayout() {
+    this.#layout?.disconnect();
+    this.#layout = null;
+  }
+  /**
+   * Scrolls to the bottom, clamped by the engine to the maximum scroll offset — which is
+   * 0 for a container tall enough to hold its whole content, so the jump moves nothing
+   * there. `behavior` defaults to the configured follow behavior; pass `"instant"` for a
+   * jump that must not animate.
+   */
+  #scrollToBottom(behavior = this.#behavior()) {
     const top = this.element.scrollHeight;
     if (typeof this.element.scrollTo === "function") {
-      this.element.scrollTo({ top, behavior: this.#behavior() });
+      this.element.scrollTo({ top, behavior });
     } else {
       this.element.scrollTop = top;
     }
@@ -14865,7 +16412,12 @@ var StickToBottomController = class extends Controller {
   #watched() {
     return this.hasContentTarget ? this.contentTarget : this.element;
   }
-  /** Forces reduced-motion jumps while preserving the configured normal behavior. */
+  /**
+   * The behavior a follow-scroll runs with. `"auto"` is **not** a request to arrive at
+   * once: it hands the decision to the element's computed `scroll-behavior`, so a
+   * consumer stylesheet saying `smooth` animates these scrolls too. Only `"instant"`
+   * overrides that CSS, which is why reduced motion and the `pinOnConnect` jump name it.
+   */
   #behavior() {
     if (prefersReducedMotion()) return "instant";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
@@ -15114,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() {
@@ -15154,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 } });
   }
 };
@@ -15465,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 } });
@@ -15722,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);
   }
@@ -15784,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;
   }
@@ -16686,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"];
@@ -16947,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;
   }
   /**