stimeo-ui 0.2.0 → 0.2.1

data/dist/index.js

@@ -1814,28 +1814,176 @@ var ClipboardController = class extends Controller {
     }
   }
 };
+
+// src/utils/transition_completion.ts
+function timeMs(value) {
+  const trimmed = value.trim();
+  const amount = Number.parseFloat(trimmed);
+  if (!Number.isFinite(amount)) return 0;
+  if (trimmed.endsWith("ms")) return amount;
+  if (trimmed.endsWith("s")) return amount * 1e3;
+  return 0;
+}
+function cssList(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function transitionTimings(style) {
+  const properties = cssList(style.transitionProperty);
+  const durations = cssList(style.transitionDuration).map(timeMs);
+  const delays = cssList(style.transitionDelay).map(timeMs);
+  const effectiveProperties = properties.length > 0 ? properties : Array.from({ length: Math.max(durations.length, delays.length, 1) }, () => "all");
+  const effectiveDurations = durations.length > 0 ? durations : [0];
+  const effectiveDelays = delays.length > 0 ? delays : [0];
+  return effectiveProperties.filter((property) => property !== "none").map((property, index) => ({
+    property,
+    totalMs: Math.max(
+      0,
+      (effectiveDurations[index % effectiveDurations.length] ?? 0) + (effectiveDelays[index % effectiveDelays.length] ?? 0)
+    )
+  }));
+}
+function maxTotalMs(timings) {
+  return timings.reduce((max, { totalMs }) => Math.max(max, totalMs), 0);
+}
+function maxTransitionTotalMs(style) {
+  return maxTotalMs(transitionTimings(style));
+}
+var TransitionCompletion = class {
+  #timers = new SafeTimeout();
+  #element = null;
+  #complete = null;
+  #pendingProperties = null;
+  #deadline = 0;
+  /**
+   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
+   * transition (including when `getComputedStyle` is unavailable).
+   *
+   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
+   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
+   */
+  wait(element, complete, options = {}) {
+    this.cancel();
+    const requested = options.timeoutMs ?? 0;
+    const override = Number.isFinite(requested) && requested > 0 ? requested : 0;
+    const timings = typeof window.getComputedStyle === "function" ? transitionTimings(window.getComputedStyle(element)) : [];
+    const maximum = maxTotalMs(timings);
+    if (maximum <= 0 && override <= 0) {
+      complete();
+      return;
+    }
+    this.#element = element;
+    this.#complete = complete;
+    this.#deadline = Date.now() + maximum;
+    const activeProperties = this.#activeTransitionProperties(element);
+    this.#pendingProperties = activeProperties.size > 0 ? activeProperties : this.#explicitPendingProperties(timings);
+    element.addEventListener("transitionend", this.#onTerminal);
+    element.addEventListener("transitioncancel", this.#onTerminal);
+    this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
+  }
+  /** Cancels the pending wait without invoking its completion callback. */
+  cancel() {
+    this.#complete = null;
+    this.#teardown();
+  }
+  /**
+   * Handles terminal events from the observed element only.
+   *
+   * For explicit property lists, every declared positive-time property must
+   * settle. For `all`, no reliable property set exists, so an event can finish
+   * only after the computed maximum time; the safety timeout owns the usual path.
+   */
+  #onTerminal = (event) => {
+    if (event.target !== this.#element) return;
+    const transitionEvent = event;
+    if (transitionEvent.pseudoElement) return;
+    if (this.#pendingProperties) {
+      const propertyName = transitionEvent.propertyName;
+      const active = this.#activeTransitionProperties(this.#element);
+      if (active.has(propertyName)) return;
+      if (!this.#pendingProperties.delete(propertyName)) return;
+      if (this.#pendingProperties.size > 0) return;
+      if (active.size > 0) {
+        this.#pendingProperties = active;
+        return;
+      }
+      this.#finish();
+      return;
+    }
+    if (Date.now() >= this.#deadline) this.#finish();
+  };
+  /**
+   * Returns active CSS transition properties expanded to the names reported by
+   * terminal events. CSS animations and pseudo-element effects are excluded.
+   */
+  #activeTransitionProperties(element) {
+    if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
+    try {
+      const properties = element.getAnimations().flatMap((animation) => {
+        if (animation.playState === "idle" || animation.playState === "finished") return [];
+        const effect = animation.effect;
+        if (effect?.pseudoElement) return [];
+        const target = effect?.target;
+        if (target && target !== element) return [];
+        const property = animation.transitionProperty;
+        return typeof property === "string" && property.length > 0 ? [property] : [];
+      });
+      return new Set(properties);
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  }
+  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
+  #explicitPendingProperties(timings) {
+    if (timings.some(({ property }) => property === "all")) return null;
+    const pending = new Set(
+      timings.filter(({ totalMs }) => totalMs > 0).map(({ property }) => property)
+    );
+    return pending.size > 0 ? pending : null;
+  }
+  /** Completes exactly once, releasing listeners and the fallback before the callback. */
+  #finish() {
+    const complete = this.#complete;
+    if (!complete) return;
+    this.#complete = null;
+    this.#teardown();
+    complete();
+  }
+  /** Releases the exact element listeners and timer owned by the current wait. */
+  #teardown() {
+    this.#timers.clearAll();
+    this.#element?.removeEventListener("transitionend", this.#onTerminal);
+    this.#element?.removeEventListener("transitioncancel", this.#onTerminal);
+    this.#element = null;
+    this.#pendingProperties = null;
+    this.#deadline = 0;
+  }
+};
+
+// src/controllers/collapsible_controller.ts
 var CollapsibleController = class extends Controller {
   static targets = ["trigger", "content"];
   static values = {
     open: { type: Boolean, default: false }
   };
   static actions = ["toggle"];
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from the callbacks that precede `connect()`. */
+  #connected = false;
   /**
-   * The pending `transitionend` handler that re-applies `hidden` after a close.
-   * Tracked so {@link disconnect} can detach it and a reopen can supersede it.
-   */
-  #pendingTransitionEnd = null;
-  /**
-   * Establishes the initial open/closed state without animating.
+   * Establishes the initial open/closed state without waiting for a close transition.
    *
    * The DOM is the source of truth on reconnect (Turbo cache restore / morph): an
    * **explicit** state attribute — `aria-expanded="true"`/`"false"` (or, with no
    * trigger, `data-state="open"`/`"closed"`) — is honored verbatim so a region the
    * user opened *or* closed survives a back-navigation, even when the declarative
-   * `open` Value disagrees. The Value only seeds a genuinely fresh render where no
-   * state attribute is present yet. Mirrors `sidebar`'s `#restoreCollapsed`.
+   * `open` Value disagrees. An already-open region remains open without a
+   * close/reopen cycle. The Value only seeds a genuinely fresh render where no
+   * state attribute is present yet; any opening animation in that case belongs to
+   * the consumer's CSS. Mirrors `sidebar`'s `#restoreCollapsed`.
    */
   connect() {
+    this.#connected = true;
     this.#apply(this.#initialOpen(), false);
   }
   /** Resolves the connect-time state: explicit DOM state wins, else the `open` Value. */
@@ -1852,7 +2000,27 @@ var CollapsibleController = class extends Controller {
     return this.openValue;
   }
   disconnect() {
-    this.#detachTransitionEnd();
+    this.#connected = false;
+    this.#transition.cancel();
+  }
+  /** Reconciles a replacement trigger target with the content's live state. */
+  triggerTargetConnected(trigger) {
+    if (!this.#connected || !this.hasContentTarget) return;
+    trigger.setAttribute(
+      "aria-expanded",
+      this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
+    );
+  }
+  /** Reconciles a replacement content target with the disclosure's live state. */
+  contentTargetConnected(content) {
+    if (!this.#connected) return;
+    this.#transition.cancel();
+    const open = this.hasTriggerTarget ? this.triggerTarget.getAttribute("aria-expanded") === "true" : content.getAttribute("data-state") === "open";
+    this.#applyContent(content, open, false);
+  }
+  /** Cancels a wait tied to a content target that was removed or replaced. */
+  contentTargetDisconnected() {
+    this.#transition.cancel();
   }
   /** Toggles the region open/closed. Bound via `data-action` (click). */
   toggle() {
@@ -1875,16 +2043,21 @@ var CollapsibleController = class extends Controller {
    * spec requires.
    *
    * @param open - Target state.
-   * @param animate - When `false` (initial `connect`) the close path applies
-   *   `hidden` immediately instead of waiting for a transition.
+   * @param waitForCloseTransition - When `false` (initial `connect`) the close
+   *   path applies `hidden` immediately. This flag does not suppress consumer CSS
+   *   on the open path.
    */
-  #apply(open, animate) {
+  #apply(open, waitForCloseTransition) {
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false");
     }
     if (!this.hasContentTarget) return;
     const content = this.contentTarget;
-    this.#detachTransitionEnd();
+    this.#transition.cancel();
+    this.#applyContent(content, open, waitForCloseTransition);
+  }
+  /** Reflects one content target without relying on a later target lookup. */
+  #applyContent(content, open, waitForCloseTransition) {
     if (open) {
       content.hidden = false;
       content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
@@ -1892,44 +2065,23 @@ var CollapsibleController = class extends Controller {
       return;
     }
     content.setAttribute("data-state", "closed");
-    if (animate && this.#transitionMs(content) > 0) {
+    if (waitForCloseTransition) {
       this.#applyHiddenAfterTransition(content);
     } else {
       content.hidden = true;
     }
   }
   /**
-   * Re-applies `hidden` once the close transition finishes. Guarded against a
-   * reopen mid-transition: if the region is open again by the time the
-   * transition ends, `hidden` is left off.
+   * Re-applies `hidden` once the close transition settles. Guarded against a
+   * reopen mid-transition; the shared waiter also guarantees a bounded fallback
+   * when the browser emits no terminal transition event.
    */
   #applyHiddenAfterTransition(content) {
-    const handler = (event) => {
-      if (event.target !== content) return;
-      this.#detachTransitionEnd();
+    this.#transition.wait(content, () => {
       if (content.getAttribute("data-state") === "closed") {
         content.hidden = true;
       }
-    };
-    this.#pendingTransitionEnd = handler;
-    content.addEventListener("transitionend", handler);
-  }
-  #detachTransitionEnd() {
-    if (this.#pendingTransitionEnd && this.hasContentTarget) {
-      this.contentTarget.removeEventListener("transitionend", this.#pendingTransitionEnd);
-    }
-    this.#pendingTransitionEnd = null;
-  }
-  /**
-   * First `transition-duration` of `element` in milliseconds. Browsers normalize
-   * computed `<time>` to seconds (`0.2s`), but `ms` is parsed defensively. A zero
-   * here — including the consumer's reduced-motion CSS — takes the immediate path.
-   */
-  #transitionMs(element) {
-    const first = window.getComputedStyle(element).transitionDuration.split(",")[0]?.trim() ?? "";
-    const amount = Number.parseFloat(first);
-    if (Number.isNaN(amount)) return 0;
-    return first.endsWith("ms") ? amount : amount * 1e3;
+    });
   }
 };
 var COLOR_PROPERTY = "--stimeo-color";
@@ -2988,6 +3140,13 @@ var ContextMenuController = class extends Controller {
     return this.hasMenuTarget && !this.menuTarget.hidden;
   }
 };
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
     duration: { type: Number, default: 1200 },
@@ -3019,7 +3178,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;
@@ -4255,15 +4414,6 @@ var DismissibleController = class extends Controller {
     return true;
   }
 };
-function maxTransitionMs(value) {
-  const durations = value.split(",").map((part) => {
-    const trimmed = part.trim();
-    if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
-    if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1e3;
-    return 0;
-  });
-  return durations.length === 0 ? 0 : Math.max(...durations);
-}
 var DrawerController = class extends Controller {
   static targets = ["trigger", "overlay", "panel"];
   static values = {
@@ -4271,13 +4421,17 @@ var DrawerController = class extends Controller {
     open: { type: Boolean, default: false }
   };
   static actions = ["close", "closeOnBackdrop", "open"];
+  /** Exact panel currently owned by the modal lifecycle (survives target churn safely). */
+  #activePanel = null;
   /** Owns the modal side effects; Escape closes, focus falls back to the trigger. */
-  #trap = new FocusTrap(() => this.panelTarget, {
+  #trap = new FocusTrap(() => this.#activePanel ?? this.panelTarget, {
     onEscape: () => this.close(),
     fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
   });
-  /** Pending `transitionend` hide listener, kept so it can be cancelled on reopen. */
-  #pendingHide = null;
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from callbacks around controller teardown. */
+  #connected = false;
   /**
    * Reflects placement and establishes the initial open/closed state.
    *
@@ -4290,6 +4444,8 @@ var DrawerController = class extends Controller {
    * after a reconnect and must be re-activated.
    */
   connect() {
+    this.#connected = true;
+    this.#activePanel = this.hasPanelTarget ? this.panelTarget : null;
     this.#reflectPlacement();
     const shouldOpen = this.#isOpen || this.openValue;
     this.#applyClosedState();
@@ -4297,8 +4453,31 @@ var DrawerController = class extends Controller {
   }
   /** Reverts the modal side effects and pending hide if torn down while open. */
   disconnect() {
-    this.#cancelPendingHide();
+    this.#connected = false;
+    this.#transition.cancel();
     this.#trap.deactivate({ restoreFocus: false });
+    this.#activePanel = null;
+  }
+  /** Adopts a panel target added by a Turbo morph after the controller connected. */
+  panelTargetConnected(panel) {
+    if (!this.#connected || this.#activePanel?.isConnected && this.#activePanel !== panel) return;
+    this.#adoptPanel(panel);
+  }
+  /** Closes and releases modal side effects when the actively trapped panel disappears. */
+  panelTargetDisconnected(panel) {
+    if (panel !== this.#activePanel) return;
+    this.#transition.cancel();
+    this.#activePanel = null;
+    if (!this.#connected) return;
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.setAttribute("data-state", "closed");
+      this.overlayTarget.hidden = true;
+    }
+    this.openValue = false;
+    this.#trap.deactivate();
+    if (this.hasPanelTarget) this.#adoptPanel(this.panelTarget);
   }
   /** Keeps `data-placement` in sync if the value changes at runtime. */
   placementValueChanged() {
@@ -4307,7 +4486,8 @@ var DrawerController = class extends Controller {
   /** Opens the drawer: reveals it, syncs `data-state`, traps focus. */
   open() {
     if (!this.hasPanelTarget || this.#isOpen) return;
-    this.#cancelPendingHide();
+    this.#transition.cancel();
+    this.#activePanel = this.panelTarget;
     this.panelTarget.hidden = false;
     if (this.hasOverlayTarget) this.overlayTarget.hidden = false;
     void this.panelTarget.offsetWidth;
@@ -4337,6 +4517,32 @@ var DrawerController = class extends Controller {
   #reflectPlacement() {
     if (this.hasPanelTarget) this.panelTarget.setAttribute("data-placement", this.#placement);
   }
+  /** Reconciles a replacement panel and companion overlay from its explicit DOM state. */
+  #adoptPanel(panel) {
+    this.#transition.cancel();
+    const trapWasActive = this.#trap.active;
+    this.#activePanel = panel;
+    panel.setAttribute("data-placement", this.#placement);
+    if (panel.getAttribute("data-state") === "open") {
+      panel.hidden = false;
+      if (this.hasOverlayTarget) {
+        this.overlayTarget.setAttribute("data-state", "open");
+        this.overlayTarget.hidden = false;
+      }
+      this.openValue = true;
+      if (trapWasActive) this.#trap.deactivate({ restoreFocus: false });
+      this.#trap.activate();
+      return;
+    }
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.setAttribute("data-state", "closed");
+      this.overlayTarget.hidden = true;
+    }
+    this.openValue = false;
+    this.#trap.deactivate();
+  }
   /** Validated placement (`left`/`right`/`top`/`bottom`), defaulting to `right`. */
   get #placement() {
     const value = this.placementValue;
@@ -4355,24 +4561,13 @@ var DrawerController = class extends Controller {
   }
   /**
    * Applies `hidden` once the panel's close transition ends, so the exit slide
-   * can play. When the panel has no transition (the duration is `0`, as in tests
-   * or unstyled usage), it hides synchronously rather than waiting for an event
-   * that would never fire.
+   * can play. The shared waiter hides synchronously for 0ms transitions and
+   * supplies a bounded fallback when the browser emits no terminal event.
    */
   #hideAfterTransition() {
     const panel = this.panelTarget;
-    const duration = maxTransitionMs(getComputedStyle(panel).transitionDuration);
-    if (duration === 0) {
-      this.#applyHidden();
-      return;
-    }
-    const onEnd = (event) => {
-      if (event.target !== panel) return;
-      this.#cancelPendingHide();
-      this.#applyHidden();
-    };
-    this.#pendingHide = () => panel.removeEventListener("transitionend", onEnd);
-    panel.addEventListener("transitionend", onEnd);
+    this.#activePanel = panel;
+    this.#transition.wait(panel, () => this.#applyHidden(panel));
   }
   /**
    * Runs once the close transition has finished: applies `hidden` to the panel
@@ -4381,16 +4576,11 @@ var DrawerController = class extends Controller {
    * {@link FocusTrap} teardown to here — rather than at {@link close} time — keeps
    * the background unreachable and focus trapped for the whole exit animation.
    */
-  #applyHidden() {
-    if (this.hasPanelTarget) this.panelTarget.hidden = true;
+  #applyHidden(panel) {
+    panel.hidden = true;
     if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
     this.#trap.deactivate();
   }
-  /** Removes any pending `transitionend` hide listener. */
-  #cancelPendingHide() {
-    this.#pendingHide?.();
-    this.#pendingHide = null;
-  }
   /** Whether the drawer is open (tracked via `data-state`, not `hidden`). */
   get #isOpen() {
     return this.hasPanelTarget && this.panelTarget.getAttribute("data-state") === "open";
@@ -5047,13 +5237,10 @@ var FlashController = class extends Controller {
       finalize();
     }
   }
-  /** First `transition-duration` of `el` in ms (0 when none / unsupported). */
+  /** Maximum transition total (duration + delay) of `el` in ms (0 when none / unsupported). */
   #transitionMs(el) {
     if (typeof window.getComputedStyle !== "function") return 0;
-    const first = window.getComputedStyle(el).transitionDuration.split(",")[0]?.trim() ?? "";
-    const amount = Number.parseFloat(first);
-    if (Number.isNaN(amount)) return 0;
-    return first.endsWith("ms") ? amount : amount * 1e3;
+    return maxTransitionTotalMs(window.getComputedStyle(el));
   }
 };
 var FocusController = class extends Controller {
@@ -5634,7 +5821,7 @@ var HighlightController = class extends Controller {
   }
   /** Flags `el` with `data-highlight` and schedules its removal (unless reduced-motion). */
   #highlight(el) {
-    if (this.#prefersReducedMotion()) return;
+    if (prefersReducedMotion()) return;
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
     this.#timeouts.set(() => {
@@ -5642,9 +5829,6 @@ var HighlightController = class extends Controller {
       this.dispatch("end", { target: el, detail: { element: el } });
     }, this.durationValue);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 // src/utils/scroll_dismiss.ts
@@ -6018,6 +6202,12 @@ var InputMaskController = class extends Controller {
 };
 
 // src/utils/intersection_watcher.ts
+function isBeforeRootStart(entry) {
+  const rect = entry.boundingClientRect;
+  if (rect.width === 0 && rect.height === 0) return false;
+  const rootTop = entry.rootBounds?.top ?? 0;
+  return rect.bottom <= rootTop;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -6033,6 +6223,11 @@ var IntersectionWatcher = class {
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   *
+   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
+   *   or a failing `observe()`. The exception is passed through unchanged, but
+   *   the watcher rolls back first: every target observed so far is released and
+   *   `active` stays `false`, so a caller that retries starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -6040,25 +6235,42 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (this.#active && this.#observer === observer) this.#onEntries(entries);
+        },
+        { root, rootMargin: options.rootMargin, threshold: options.threshold }
+      );
+      for (const target of list) observer.observe(target);
+      this.#observer = observer;
+      this.#active = true;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
@@ -6095,7 +6307,7 @@ var IntersectionController = class extends Controller {
       this.element.style.setProperty(RATIO_PROPERTY, String(ratio));
       this.dispatch("change", { detail: { intersecting, ratio } });
       this.#syncIntersecting(intersecting, ratio, entry);
-      this.#syncPassed(!intersecting && this.#isBefore(entry));
+      this.#syncPassed(!intersecting && isBeforeRootStart(entry));
     }
   }
   connect() {
@@ -6143,7 +6355,7 @@ var IntersectionController = class extends Controller {
       if (this.onceValue) this.#watcher.stop();
     } else if (!intersecting && previous === "true") {
       this.dispatch("exit", {
-        detail: { ratio, position: this.#isBefore(entry) ? "before" : "after" }
+        detail: { ratio, position: isBeforeRootStart(entry) ? "before" : "after" }
       });
     }
   }
@@ -6159,11 +6371,6 @@ var IntersectionController = class extends Controller {
     const changed = previous === null ? passed : previous === "true" !== passed;
     if (changed) this.dispatch("passed", { detail: { passed } });
   }
-  /** True when the element sits entirely before the root's start (top) edge. */
-  #isBefore(entry) {
-    const rootTop = entry.rootBounds?.top ?? 0;
-    return entry.boundingClientRect.bottom <= rootTop;
-  }
   /** The configured `threshold`, clamped to the 0..1 the observer accepts. */
   #clampedThreshold() {
     return Math.min(1, Math.max(0, this.thresholdValue));
@@ -8317,6 +8524,26 @@ var OtpController = class extends Controller {
     }
   }
 };
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+function physicalScrollDelta(element, horizontal, logicalDelta) {
+  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;
+}
+
+// src/controllers/overflow_indicator_controller.ts
+var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
 var OverflowIndicatorController = class extends Controller {
   static targets = ["viewport"];
   static values = {
@@ -8325,38 +8552,50 @@ var OverflowIndicatorController = class extends Controller {
   };
   static actions = ["scrollByPage", "update"];
   static events = ["change"];
-  #layout = new LayoutObserver(() => this.update());
+  #layout = new LayoutObserver(() => {
+    if (this.#connected) this.update();
+  });
+  #connected = false;
+  #observedViewport = null;
+  #observedContent = /* @__PURE__ */ new Set();
   #mutationObserver = null;
+  #pendingButtonDisables = /* @__PURE__ */ new Map();
   /** Last reported room, so `change` fires only on transitions. */
   #state = null;
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.#layout.observe(this.viewportTarget);
-    this.#layout.observeViewport();
-    if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.update());
-      this.#mutationObserver.observe(this.viewportTarget, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
-    this.update();
+    this.#connected = true;
+    this.#syncViewport();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingViewport();
     this.#layout.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
+    this.#clearPendingButtonDisables();
     this.#state = null;
   }
-  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+  viewportTargetConnected() {
+    this.#syncViewport();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (this.#observedViewport === viewport) this.#stopObservingViewport();
+    this.#syncViewport();
+  }
+  orientationValueChanged() {
+    if (this.#connected) this.update();
+  }
+  thresholdValueChanged() {
+    if (this.#connected) this.update();
+  }
+  /**
+   * Re-measures remaining scroll room and reflects the state hooks.
+   * Public so it can be wired to the viewport's `scroll`.
+   */
   update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
-    const t = this.thresholdValue;
-    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontal ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const t = this.#threshold;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);
     const start = scrollPos > t;
     const end = scrollPos < maxScroll - t;
     vp.setAttribute("data-overflow-start", start ? "true" : "false");
@@ -8372,11 +8611,13 @@ var OverflowIndicatorController = class extends Controller {
     if (!this.hasViewportTarget) return;
     const direction = this.#directionFromEvent(event);
     if (!direction) return;
+    if (this.#state && !this.#state[direction]) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
     const page = horizontal ? vp.clientWidth : vp.clientHeight;
-    const delta = direction === "start" ? -page : page;
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const logicalDelta = direction === "start" ? -page : page;
+    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     if (horizontal) {
       vp.scrollBy({ left: delta, behavior });
     } else {
@@ -8385,10 +8626,16 @@ var OverflowIndicatorController = class extends Controller {
   }
   /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */
   #syncButtons(start, end) {
-    const buttons = this.element.querySelectorAll(
-      "[data-stimeo--overflow-indicator-direction-param]"
-    );
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      if (!button.isConnected || button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        this.#cancelPendingButtonDisable(button);
+      }
+    }
+    const buttons = this.element.querySelectorAll(DIRECTION_BUTTON_SELECTOR);
     for (const button of buttons) {
+      if (button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        continue;
+      }
       const direction = button.getAttribute("data-stimeo--overflow-indicator-direction-param");
       if (direction === "start") this.#toggleButton(button, start);
       else if (direction === "end") this.#toggleButton(button, end);
@@ -8401,7 +8648,11 @@ var OverflowIndicatorController = class extends Controller {
    * whole control disabled) is therefore never blindly re-enabled.
    */
   #toggleButton(button, hasRoom) {
+    if (!this.#pendingButtonDisables.has(button) && button.hasAttribute("data-overflow-indicator-pending-disabled")) {
+      this.#cancelPendingButtonDisable(button);
+    }
     if (hasRoom) {
+      this.#cancelPendingButtonDisable(button);
       if (button.hasAttribute("data-overflow-indicator-disabled")) {
         button.disabled = false;
         button.removeAttribute("data-overflow-indicator-disabled");
@@ -8409,17 +8660,121 @@ var OverflowIndicatorController = class extends Controller {
       return;
     }
     if (button.disabled) return;
+    if (document.activeElement === button) {
+      this.#deferButtonDisable(button);
+    } else {
+      this.#disableButton(button);
+    }
+  }
+  /**
+   * Keeps a boundary button focusable until native blur, exposing its temporary
+   * inoperability with `aria-disabled` and making its action a no-op meanwhile.
+   */
+  #deferButtonDisable(button) {
+    if (this.#pendingButtonDisables.has(button)) return;
+    button.setAttribute("data-overflow-indicator-pending-disabled", "");
+    button.setAttribute(
+      "data-overflow-indicator-aria-disabled",
+      button.getAttribute("aria-disabled") ?? ""
+    );
+    button.setAttribute("aria-disabled", "true");
+    const onBlur = () => {
+      this.#cancelPendingButtonDisable(button);
+      if (!button.disabled) this.#disableButton(button);
+    };
+    this.#pendingButtonDisables.set(button, { onBlur });
+    button.addEventListener("blur", onBlur);
+  }
+  #disableButton(button) {
     button.disabled = true;
     button.setAttribute("data-overflow-indicator-disabled", "");
   }
+  #cancelPendingButtonDisable(button) {
+    const pending = this.#pendingButtonDisables.get(button);
+    if (pending) button.removeEventListener("blur", pending.onBlur);
+    this.#pendingButtonDisables.delete(button);
+    button.removeAttribute("data-overflow-indicator-pending-disabled");
+    const displaced = button.getAttribute("data-overflow-indicator-aria-disabled");
+    if (displaced !== null) {
+      button.removeAttribute("data-overflow-indicator-aria-disabled");
+      if (button.getAttribute("aria-disabled") === "true") {
+        if (displaced === "") button.removeAttribute("aria-disabled");
+        else button.setAttribute("aria-disabled", displaced);
+      }
+    }
+  }
+  #clearPendingButtonDisables() {
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      this.#cancelPendingButtonDisable(button);
+    }
+  }
+  /** Moves resize/mutation/load observation to the current viewport target. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#observedViewport) return;
+    this.#stopObservingViewport();
+    if (!next) return;
+    this.#observedViewport = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#onContentLoad, true);
+    this.#syncContentObservation();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => {
+        if (!this.#connected || this.#observedViewport !== next) return;
+        this.#syncContentObservation();
+        this.update();
+      });
+      this.#mutationObserver.observe(this.element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "hidden"]
+      });
+    }
+    this.#state = null;
+    this.update();
+  }
+  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */
+  #syncContentObservation() {
+    const next = new Set(this.#observedViewport?.children ?? []);
+    for (const content of this.#observedContent) {
+      if (!next.has(content)) {
+        this.#layout.unobserve(content);
+        this.#observedContent.delete(content);
+      }
+    }
+    for (const content of next) {
+      if (!this.#observedContent.has(content)) {
+        this.#observedContent.add(content);
+        this.#layout.observe(content);
+      }
+    }
+  }
+  #stopObservingViewport() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);
+    for (const content of this.#observedContent) this.#layout.unobserve(content);
+    this.#observedContent.clear();
+    this.#observedViewport = null;
+    this.#layout.unobserveViewport();
+  }
+  #onContentLoad = () => {
+    if (this.#connected) this.update();
+  };
+  get #threshold() {
+    const value = this.thresholdValue;
+    return Number.isFinite(value) ? Math.max(0, value) : 1;
+  }
   #directionFromEvent(event) {
     const params = event.params;
     const direction = params?.direction;
     return direction === "start" || direction === "end" ? direction : null;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var OverflowMenuController = class extends Controller {
   static targets = ["items", "more"];
@@ -10110,29 +10465,49 @@ var ReadMoreController = class extends Controller {
     collapsed: { type: Boolean, default: true }
   };
   static actions = ["toggle"];
-  /** Re-checks overflow when the content box or the viewport resizes. */
-  #layout = new LayoutObserver(() => this.#evaluateOverflow());
+  #connected = false;
+  #collapsed = true;
+  #observedContent = null;
+  #contentMutationObserver = null;
+  #deferredHideTrigger = null;
+  #update = () => {
+    if (this.#connected) this.#evaluateOverflow();
+  };
+  #layout = new LayoutObserver(this.#update);
+  #onDeferredHideBlur = () => {
+    this.#clearDeferredHide();
+    this.#update();
+  };
   connect() {
-    this.#reflect(this.#initialCollapsed());
-    this.#evaluateOverflow();
-    if (this.hasContentTarget) {
-      this.#layout.observe(this.contentTarget);
-      this.#layout.observeViewport();
-    }
+    this.#connected = true;
+    this.#collapsed = this.#initialCollapsed();
+    this.#syncTargets();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingContent();
     this.#layout.disconnect();
   }
+  contentTargetConnected() {
+    this.#syncTargets();
+  }
+  contentTargetDisconnected() {
+    this.#syncTargets();
+  }
+  triggerTargetConnected() {
+    this.#syncTargets();
+  }
+  triggerTargetDisconnected(trigger) {
+    if (this.#deferredHideTrigger === trigger) this.#clearDeferredHide();
+    this.#syncTargets();
+  }
   /** Toggles between the collapsed (clamped) and expanded states. */
   toggle() {
-    this.#reflect(!this.#isCollapsed);
+    if (!this.#connected) return;
+    this.#collapsed = !this.#collapsed;
+    this.#reflect();
     this.#evaluateOverflow();
   }
-  /** Whether the content is currently collapsed (clamped). */
-  get #isCollapsed() {
-    return this.hasContentTarget ? this.contentTarget.getAttribute("data-state") !== "expanded" : this.collapsedValue;
-  }
-  /** Connect-time state: an explicit `data-state` wins, else the `collapsed` Value. */
   #initialCollapsed() {
     if (this.hasContentTarget) {
       const state = this.contentTarget.getAttribute("data-state");
@@ -10141,29 +10516,76 @@ var ReadMoreController = class extends Controller {
     }
     return this.collapsedValue;
   }
-  /** Writes the collapsed/expanded state onto the content and trigger. */
-  #reflect(collapsed) {
+  #reflect() {
     if (this.hasContentTarget) {
-      this.contentTarget.setAttribute("data-state", collapsed ? "collapsed" : "expanded");
+      this.contentTarget.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
     }
     if (this.hasTriggerTarget) {
-      this.triggerTarget.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
     }
   }
-  /**
-   * Shows the toggle only when it is useful: while expanded it is always shown
-   * (the user needs a way back), and while collapsed it is shown only if the
-   * text actually overflows its clamp (`scrollHeight > clientHeight`).
-   */
+  #syncTargets() {
+    if (!this.#connected) return;
+    this.#syncContentObservation();
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #syncContentObservation() {
+    const next = this.hasContentTarget ? this.contentTarget : null;
+    if (next === this.#observedContent) return;
+    this.#stopObservingContent();
+    if (!next) return;
+    this.#observedContent = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#update, true);
+    if (typeof MutationObserver !== "undefined") {
+      this.#contentMutationObserver = new MutationObserver(this.#update);
+      this.#contentMutationObserver.observe(next, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }
+  #stopObservingContent() {
+    this.#clearDeferredHide();
+    if (this.#observedContent) {
+      this.#layout.unobserve(this.#observedContent);
+      this.#observedContent.removeEventListener("load", this.#update, true);
+    }
+    this.#observedContent = null;
+    this.#contentMutationObserver?.disconnect();
+    this.#contentMutationObserver = null;
+    this.#layout.unobserveViewport();
+  }
+  #deferHide(trigger) {
+    if (this.#deferredHideTrigger === trigger) return;
+    this.#clearDeferredHide();
+    this.#deferredHideTrigger = trigger;
+    trigger.addEventListener("blur", this.#onDeferredHideBlur);
+  }
+  #clearDeferredHide() {
+    this.#deferredHideTrigger?.removeEventListener("blur", this.#onDeferredHideBlur);
+    this.#deferredHideTrigger = null;
+  }
   #evaluateOverflow() {
     if (!this.hasTriggerTarget || !this.hasContentTarget) return;
-    if (!this.#isCollapsed) {
-      this.triggerTarget.hidden = false;
+    const trigger = this.triggerTarget;
+    const content = this.contentTarget;
+    const useful = !this.#collapsed || content.scrollHeight > content.clientHeight;
+    if (useful) {
+      this.#clearDeferredHide();
+      trigger.hidden = false;
       return;
     }
-    const content = this.contentTarget;
-    const overflowing = content.scrollHeight > content.clientHeight;
-    this.triggerTarget.hidden = !overflowing;
+    if (document.activeElement === trigger) {
+      trigger.hidden = false;
+      this.#deferHide(trigger);
+      return;
+    }
+    this.#clearDeferredHide();
+    trigger.hidden = true;
   }
 };
 var PROGRESS_PROPERTY = "--stimeo--reading-progress";
@@ -10627,8 +11049,7 @@ var ScrollAreaController = class extends Controller {
    */
   #measurePosition(vp) {
     const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && vp.scrollHeight <= vp.clientHeight + EDGE_EPSILON;
-    const scrollPos = horizontalPrimary ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontalPrimary ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontalPrimary);
     if (maxScroll <= EDGE_EPSILON) return { position: "start", progress: 0 };
     const progress = Math.min(1, Math.max(0, scrollPos / maxScroll));
     if (scrollPos <= EDGE_EPSILON) return { position: "start", progress };
@@ -10803,7 +11224,7 @@ var ScrollVisibilityController = class extends Controller {
   }
   /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
   toTop() {
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     this.#scrollSource.scrollTo({ top: 0, behavior });
     if (this.focusSelectorValue) {
       const target = document.querySelector(this.focusSelectorValue);
@@ -10851,9 +11272,6 @@ var ScrollVisibilityController = class extends Controller {
     }
     return this.#scrollSource.scrollTop;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var ScrollspyController = class extends Controller {
   static targets = ["link"];
@@ -11092,15 +11510,23 @@ var SeparatorController = class extends Controller {
     }
   }
 };
-function maxTransitionMs2(value) {
-  const durations = value.split(",").map((part) => {
-    const trimmed = part.trim();
-    if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
-    if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1e3;
-    return 0;
-  });
-  return durations.length === 0 ? 0 : Math.max(...durations);
+
+// src/utils/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
 }
+
+// src/controllers/sidebar_controller.ts
 var SidebarController = class extends Controller {
   static targets = ["trigger", "panel", "backdrop"];
   static values = {
@@ -11108,9 +11534,11 @@ var SidebarController = class extends Controller {
     key: { type: String, default: "" },
     collapsed: { type: Boolean, default: false }
   };
-  static actions = ["close", "open", "toggle"];
+  static actions = ["beforeCache", "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. */
-  #trap = new FocusTrap(() => this.panelTarget, {
+  #trap = new FocusTrap(() => this.#activePanel ?? this.panelTarget, {
     onEscape: () => this.close(),
     fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
   });
@@ -11120,18 +11548,79 @@ var SidebarController = class extends Controller {
   #collapsed = false;
   /** The matched media query (`min-width: breakpoint`), watched for mode changes. */
   #mql = null;
-  /** Pending `transitionend` hide listener, cancelled on reopen/teardown. */
-  #pendingHide = null;
+  /** Exact normalized query currently represented by the active media-query listener. */
+  #mqlQuery = null;
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from callbacks around controller teardown. */
+  #connected = false;
   connect() {
+    this.#connected = true;
+    this.#activePanel = this.hasPanelTarget ? this.panelTarget : null;
     this.#collapsed = this.#restoreCollapsed();
-    this.#mql = this.#matchBreakpoint();
+    this.#mqlQuery = this.#breakpointQuery;
+    this.#mql = this.#matchBreakpoint(this.#mqlQuery);
     this.#mql?.addEventListener("change", this.#onMediaChange);
     this.#applyMode(this.#computeMode());
   }
   disconnect() {
+    this.#connected = false;
     this.#mql?.removeEventListener("change", this.#onMediaChange);
-    this.#cancelPendingHide();
+    this.#mql = null;
+    this.#mqlQuery = null;
+    this.#transition.cancel();
     this.#trap.deactivate({ restoreFocus: false });
+    this.#activePanel = null;
+  }
+  /** Adopts a panel target added by a Turbo morph after the controller connected. */
+  panelTargetConnected(panel) {
+    if (!this.#connected || this.#activePanel?.isConnected && this.#activePanel !== panel) return;
+    this.#adoptPanel(panel);
+  }
+  /** Closes and releases overlay side effects when the actively trapped panel disappears. */
+  panelTargetDisconnected(panel) {
+    if (panel !== this.#activePanel) return;
+    this.#transition.cancel();
+    this.#activePanel = null;
+    if (!this.#connected) return;
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    this.#hideBackdrop();
+    this.#setExpandedAttr(false);
+    this.#trap.deactivate();
+    if (this.hasPanelTarget) this.#adoptPanel(this.panelTarget);
+  }
+  /**
+   * Rebinds responsive observation when `breakpoint` changes at runtime.
+   *
+   * Stimulus calls value callbacks before `connect()`, so the connected guard
+   * prevents an eager subscription. Equivalent normalized queries retain the
+   * existing listener instead of allocating duplicate `MediaQueryList` objects.
+   */
+  breakpointValueChanged() {
+    if (!this.#connected) return;
+    const query = this.#breakpointQuery;
+    if (this.#mqlQuery === query) return;
+    this.#mql?.removeEventListener("change", this.#onMediaChange);
+    this.#mqlQuery = query;
+    this.#mql = this.#matchBreakpoint(query);
+    this.#mql?.addEventListener("change", this.#onMediaChange);
+    const next = this.#computeMode();
+    if (next !== this.#mode) this.#applyMode(next);
+  }
+  /**
+   * Sanitizes overlay markup before Turbo snapshots the page.
+   *
+   * Inline state is durable and remains untouched. Overlay state is transient:
+   * pending transitions are cancelled, controller-owned open attributes are
+   * closed immediately, and modal side effects are released without moving
+   * focus during navigation.
+   */
+  beforeCache() {
+    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() {
@@ -11157,17 +11646,48 @@ var SidebarController = class extends Controller {
     this.#mode = mode;
     if (this.hasPanelTarget) this.panelTarget.setAttribute("data-mode", mode);
     if (mode === "inline") {
-      this.#cancelPendingHide();
+      this.#transition.cancel();
       this.#trap.deactivate({ restoreFocus: false });
       if (this.hasPanelTarget) this.panelTarget.hidden = false;
       this.#hideBackdrop();
       this.#applyInlineState(this.#collapsed);
     } else {
-      this.#cancelPendingHide();
+      this.#transition.cancel();
       this.#trap.deactivate({ restoreFocus: false });
       this.#setOverlayClosedImmediate();
     }
   }
+  /** Reconciles a replacement panel with the current responsive mode and DOM state. */
+  #adoptPanel(panel) {
+    this.#transition.cancel();
+    const trapWasActive = this.#trap.active;
+    this.#activePanel = panel;
+    panel.setAttribute("data-mode", this.#mode);
+    if (this.#mode === "inline") {
+      panel.hidden = false;
+      panel.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
+      this.#hideBackdrop();
+      this.#setExpandedAttr(!this.#collapsed);
+      this.#trap.deactivate({ restoreFocus: false });
+      return;
+    }
+    if (panel.getAttribute("data-state") === "open") {
+      panel.hidden = false;
+      if (this.hasBackdropTarget) {
+        this.backdropTarget.setAttribute("data-state", "open");
+        this.backdropTarget.hidden = false;
+      }
+      this.#setExpandedAttr(true);
+      if (trapWasActive) this.#trap.deactivate({ restoreFocus: false });
+      this.#trap.activate();
+      return;
+    }
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    this.#hideBackdrop();
+    this.#setExpandedAttr(false);
+    this.#trap.deactivate();
+  }
   #onMediaChange = (event) => {
     const next = event.matches ? "inline" : "overlay";
     if (next !== this.#mode) this.#applyMode(next);
@@ -11175,13 +11695,14 @@ var SidebarController = class extends Controller {
   #computeMode() {
     return this.#mql?.matches ?? true ? "inline" : "overlay";
   }
-  #matchBreakpoint() {
+  #matchBreakpoint(query = this.#breakpointQuery) {
     if (typeof window.matchMedia !== "function") return null;
-    return window.matchMedia(`(min-width: ${this.breakpointValue}px)`);
+    return window.matchMedia(query);
   }
   // --- Inline (rail) ---------------------------------------------------------
   /** Sets, reflects, and persists the inline collapsed preference. */
   #setCollapsed(collapsed) {
+    if (collapsed === this.#collapsed) return;
     this.#collapsed = collapsed;
     this.#applyInlineState(collapsed);
     this.#persistCollapsed(collapsed);
@@ -11197,7 +11718,8 @@ var SidebarController = class extends Controller {
   /** Opens the overlay: reveal it, commit a starting frame, then trap focus. */
   #openOverlay() {
     if (!this.hasPanelTarget || this.#isOverlayOpen) return;
-    this.#cancelPendingHide();
+    this.#transition.cancel();
+    this.#activePanel = this.panelTarget;
     this.panelTarget.hidden = false;
     if (this.hasBackdropTarget) this.backdropTarget.hidden = false;
     void this.panelTarget.offsetWidth;
@@ -11226,28 +11748,18 @@ var SidebarController = class extends Controller {
   }
   /**
    * Applies `hidden` once the close transition ends so the exit slide can play,
-   * then reverts the modal side effects. With no transition (0ms / reduced
-   * motion / unstyled) it runs synchronously rather than awaiting an event that
-   * would never fire.
+   * then reverts the modal side effects. The shared waiter completes
+   * synchronously for 0ms transitions and supplies a bounded fallback when the
+   * browser emits no terminal event.
    */
   #hideAfterTransition() {
     const panel = this.panelTarget;
-    const duration = maxTransitionMs2(getComputedStyle(panel).transitionDuration);
-    if (duration === 0) {
-      this.#applyOverlayHidden();
-      return;
-    }
-    const onEnd = (event) => {
-      if (event.target !== panel) return;
-      this.#cancelPendingHide();
-      this.#applyOverlayHidden();
-    };
-    this.#pendingHide = () => panel.removeEventListener("transitionend", onEnd);
-    panel.addEventListener("transitionend", onEnd);
+    this.#activePanel = panel;
+    this.#transition.wait(panel, () => this.#applyOverlayHidden(panel));
   }
   /** Hides the panel/backdrop and tears down the trap after the exit transition. */
-  #applyOverlayHidden() {
-    if (this.hasPanelTarget) this.panelTarget.hidden = true;
+  #applyOverlayHidden(panel) {
+    panel.hidden = true;
     this.#hideBackdrop();
     this.#trap.deactivate();
   }
@@ -11256,10 +11768,6 @@ var SidebarController = class extends Controller {
     this.backdropTarget.setAttribute("data-state", "closed");
     this.backdropTarget.hidden = true;
   }
-  #cancelPendingHide() {
-    this.#pendingHide?.();
-    this.#pendingHide = null;
-  }
   // --- Shared helpers --------------------------------------------------------
   #setExpandedAttr(expanded) {
     if (this.hasTriggerTarget) {
@@ -11277,11 +11785,8 @@ var SidebarController = class extends Controller {
   #restoreCollapsed() {
     const key = this.#storageKey;
     if (key) {
-      try {
-        const stored = localStorage.getItem(key);
-        if (stored !== null) return stored === "1";
-      } catch {
-      }
+      const stored = readLocalStorage(key);
+      if (stored !== null) return stored === "1";
     }
     const domState = this.hasPanelTarget ? this.panelTarget.getAttribute("data-state") : null;
     if (domState === "collapsed") return true;
@@ -11292,14 +11797,17 @@ var SidebarController = class extends Controller {
   #persistCollapsed(collapsed) {
     const key = this.#storageKey;
     if (!key) return;
-    try {
-      localStorage.setItem(key, collapsed ? "1" : "0");
-    } catch {
-    }
+    writeLocalStorage(key, collapsed ? "1" : "0");
   }
   get #storageKey() {
     return this.keyValue ? `stimeo--sidebar:${this.keyValue}` : "";
   }
+  /** Valid breakpoint CSS query, defaulting malformed or negative values to 768px. */
+  get #breakpointQuery() {
+    const value = this.breakpointValue;
+    const breakpoint = Number.isFinite(value) && value >= 0 ? value : 768;
+    return `(min-width: ${breakpoint}px)`;
+  }
   get #isOverlay() {
     return this.#mode === "overlay";
   }
@@ -11859,23 +12367,32 @@ var StepperController = class extends Controller {
   };
   static actions = ["goto", "next", "prev"];
   static events = ["change"];
+  #isConnected = false;
   /** Normalizes an out-of-range initial `index` and renders the initial state. */
   connect() {
-    this.indexValue = this.#clampIndex(this.indexValue);
-    this.#render();
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  disconnect() {
+    this.#isConnected = false;
+  }
+  /** Re-renders when Turbo Morph or application code changes `index` at runtime. */
+  indexValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
   }
   /** Advances to the next step (ignored at the last step). */
   next() {
-    this.#moveTo(this.indexValue + 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) + 1);
   }
   /** Returns to the previous step (ignored at the first step). */
   prev() {
-    this.#moveTo(this.indexValue - 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) - 1);
   }
   /** Jumps to the step carried in the action's `index` param. */
   goto(event) {
     const target = Number(event.params.index);
-    if (!Number.isFinite(target)) return;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     this.#moveTo(target);
   }
   /**
@@ -11885,16 +12402,24 @@ var StepperController = class extends Controller {
    */
   #moveTo(target) {
     const total = this.stepTargets.length;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     if (target < 0 || target >= total) return;
-    if (target === this.indexValue) return;
-    if (this.linearValue && target > this.indexValue + 1) return;
-    const previous = this.indexValue;
+    const current = this.#clampIndex(this.indexValue);
+    if (target === current) return;
+    if (this.linearValue && target > current + 1) return;
+    const previous = current;
     this.indexValue = target;
-    this.#render();
+    this.#render(target);
     this.dispatch("change", {
       detail: { index: target, previous, step: this.stepTargets[target] }
     });
   }
+  /** Normalizes the public Value and reflects it without dispatching an action event. */
+  #normalizeAndRender() {
+    const normalized = this.#clampIndex(this.indexValue);
+    if (!Object.is(normalized, this.indexValue)) this.indexValue = normalized;
+    this.#render(normalized);
+  }
   /**
    * Derives each step's `data-state` and the current button's `aria-current`.
    *
@@ -11902,8 +12427,7 @@ var StepperController = class extends Controller {
    * 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).
    */
-  #render() {
-    const current = this.indexValue;
+  #render(current) {
     this.stepTargets.forEach((step, index) => {
       step.dataset.state = index < current ? "complete" : index === current ? "current" : "upcoming";
       const button = step.querySelector("button");
@@ -11918,7 +12442,7 @@ var StepperController = class extends Controller {
   /** Constrains an index to `[0, total-1]` (or `0` when there are no steps). */
   #clampIndex(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)));
   }
 };
@@ -12008,12 +12532,9 @@ var StickToBottomController = class extends Controller {
     return this.hasContentTarget ? this.contentTarget : this.element;
   }
   #behavior() {
-    if (this.#prefersReducedMotion()) return "auto";
+    if (prefersReducedMotion()) return "auto";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var StickyObserverController = class extends Controller {
   static targets = ["sentinel", "element"];
@@ -12026,23 +12547,63 @@ var StickyObserverController = class extends Controller {
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
   /** Last reported stuck state, so `change` fires only on transitions. */
   #stuck = null;
+  /** Target currently owned by the watcher, used to avoid duplicate restarts. */
+  #observedSentinel = null;
+  #connected = false;
   #onIntersect(entries) {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    this.#setStuck(!entry.isIntersecting);
+    for (const entry of entries) {
+      if (!this.#connected || !this.#watcher.active) return;
+      this.#setStuck(!entry.isIntersecting && isBeforeRootStart(entry));
+    }
   }
   connect() {
-    if (!this.hasSentinelTarget) return;
-    this.#watcher.start(this.sentinelTarget, {
-      rootSelector: this.rootSelectorValue,
-      rootMargin: `-${this.offsetValue}px 0px 0px 0px`,
-      threshold: [0]
-    });
+    this.#connected = true;
+    this.#stuck = null;
+    this.#syncObserver();
   }
   disconnect() {
+    this.#connected = false;
     this.#watcher.stop();
+    this.#observedSentinel = null;
     this.#stuck = null;
   }
+  /** Starts observation when a sentinel is inserted after connection. */
+  sentinelTargetConnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Stops or transfers observation when the current sentinel is removed. */
+  sentinelTargetDisconnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Reflects the last snapshot onto an element inserted after that snapshot. */
+  elementTargetConnected(element) {
+    if (this.#stuck !== null) {
+      element.setAttribute("data-stuck", this.#stuck ? "true" : "false");
+    }
+  }
+  /** Rebuilds the observer when Turbo morphs the configured root. */
+  rootSelectorValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  /** Rebuilds the observer when Turbo morphs the configured top offset. */
+  offsetValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  #syncObserver(force = false) {
+    const sentinel = this.hasSentinelTarget ? this.sentinelTarget : null;
+    if (!force && sentinel === this.#observedSentinel && this.#watcher.active) return;
+    this.#watcher.stop();
+    this.#observedSentinel = null;
+    if (!sentinel) return;
+    const configuredOffset = this.offsetValue;
+    const offset = Number.isFinite(configuredOffset) ? configuredOffset : 0;
+    const started = this.#watcher.start(sentinel, {
+      rootSelector: this.rootSelectorValue,
+      rootMargin: `${-offset}px 0px 0px 0px`,
+      threshold: [0]
+    });
+    if (started) this.#observedSentinel = sentinel;
+  }
   /** Reflects the stuck state onto the sticky element and emits `change`. */
   #setStuck(next) {
     if (next === this.#stuck) return;
@@ -12700,19 +13261,12 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    try {
-      const value = window.localStorage.getItem(this.storageKeyValue);
-      return isMode(value) ? value : null;
-    } catch {
-      return null;
-    }
+    const value = readLocalStorage(this.storageKeyValue);
+    return isMode(value) ? value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {
-    try {
-      window.localStorage.setItem(this.storageKeyValue, mode);
-    } catch {
-    }
+    writeLocalStorage(this.storageKeyValue, mode);
   }
 };
 var AM = 0;
@@ -13168,8 +13722,7 @@ var ToastController = class extends Controller {
       this.listTarget.removeChild(element);
       this.dispatch("dismiss", { detail: { item: element, reason } });
     };
-    const transitions = window.getComputedStyle(element).transitionDuration;
-    const duration = cssTimeToMs(transitions);
+    const duration = maxTransitionTotalMs(window.getComputedStyle(element));
     if (duration > 0) {
       this.#timers.set(finalize, duration);
     } else {
@@ -13241,12 +13794,6 @@ var ToastController = class extends Controller {
     this.#rafHandles.delete(element);
   }
 };
-function cssTimeToMs(value) {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-}
 var ToggleGroupController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -13535,12 +14082,6 @@ var TooltipController = class extends Controller {
   }
 };
 var tokensOf = (value) => value.split(/\s+/).filter(Boolean);
-var firstTimeMs = (value) => {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-};
 var TransitionController = class extends Controller {
   static values = {
     enter: { type: String, default: "" },
@@ -13553,9 +14094,9 @@ var TransitionController = class extends Controller {
   };
   static actions = ["enter", "leave", "toggle"];
   static events = ["entered", "left"];
-  #timers = new SafeTimeout();
+  /** Owns the cancellable completion wait (terminal events + bounded fallback). */
+  #transition = new TransitionCompletion();
   #rafId = null;
-  #endListener = null;
   connect() {
     this.#strip();
     this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
@@ -13582,7 +14123,7 @@ var TransitionController = class extends Controller {
     const isEnter = kind === "enter";
     if (isEnter) this.element.hidden = false;
     this.element.setAttribute("data-transition-state", isEnter ? "entering" : "leaving");
-    if (this.#prefersReducedMotion()) {
+    if (prefersReducedMotion()) {
       this.#finish(kind);
       return;
     }
@@ -13594,12 +14135,13 @@ var TransitionController = class extends Controller {
       this.#rafId = null;
       this.#remove(from);
       this.#add(to);
-      this.#awaitEnd(() => this.#finish(kind));
+      this.#transition.wait(this.element, () => this.#finish(kind), {
+        timeoutMs: this.timeoutValue
+      });
     });
   }
   /** Settles the element into the completed state, clearing the stage classes. */
   #finish(kind) {
-    this.#cleanupEnd();
     this.#strip();
     if (kind === "enter") {
       this.element.setAttribute("data-transition-state", "entered");
@@ -13610,29 +14152,13 @@ var TransitionController = class extends Controller {
       this.dispatch("left", { detail: {} });
     }
   }
-  /** Resolves on the element's own `transitionend`, with a safety timeout fallback. */
-  #awaitEnd(done) {
-    this.#endListener = (event) => {
-      if (event.target === this.element) done();
-    };
-    this.element.addEventListener("transitionend", this.#endListener);
-    const ms = this.timeoutValue > 0 ? this.timeoutValue : this.#duration();
-    this.#timers.set(done, ms);
-  }
-  #cleanupEnd() {
-    if (this.#endListener) {
-      this.element.removeEventListener("transitionend", this.#endListener);
-      this.#endListener = null;
-    }
-    this.#timers.clearAll();
-  }
   /** Cancels any in-flight transition (interruption / teardown). */
   #cancel() {
     if (this.#rafId !== null) {
       this.#cancelRaf(this.#rafId);
       this.#rafId = null;
     }
-    this.#cleanupEnd();
+    this.#transition.cancel();
     this.#strip();
   }
   #add(...lists) {
@@ -13654,13 +14180,6 @@ var TransitionController = class extends Controller {
       this.leaveToValue
     );
   }
-  /** Auto-computed safety duration (transition time + delay, with a small buffer). */
-  #duration() {
-    if (typeof window.getComputedStyle !== "function") return 0;
-    const style = window.getComputedStyle(this.element);
-    const total = firstTimeMs(style.transitionDuration) + firstTimeMs(style.transitionDelay);
-    return total > 0 ? total + 50 : 0;
-  }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {
       return window.requestAnimationFrame(() => callback());
@@ -13671,9 +14190,6 @@ var TransitionController = class extends Controller {
     if (typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(id);
     else window.clearTimeout(id);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var TYPEAHEAD_TIMEOUT2 = 500;
 var TreeViewController = class extends Controller {