stimeo-ui 0.10.0 → 0.12.0

data/dist/index.js

@@ -5332,23 +5332,54 @@ var ContextMenuController = class extends Controller {
     return this.hasMenuTarget && !this.menuTarget.hidden;
   }
 };
+
+// src/utils/authored_integer.ts
+var TOKEN_BODY = /\d[\d.,'’’    _]*\d|\d/;
+var SIGN_OPENER = /[\s([]/;
+function authoredInteger(text) {
+  const firstDigit = /\d/.exec(text);
+  if (firstDigit === null) return null;
+  const at = firstDigit.index;
+  const signed = at > 0 && text[at - 1] === "-" && (at === 1 || SIGN_OPENER.test(text[at - 2]));
+  const body = TOKEN_BODY.exec(text.slice(at));
+  const runs = body[0].split(/\D+/);
+  const separators = body[0].match(/\D+/g) ?? [];
+  const lead = runs[0];
+  const heads = lead.length <= 3 && !lead.startsWith("0");
+  let digits = lead;
+  for (let i = 1; heads && i < runs.length; i += 1) {
+    if (separators[i - 1]?.length !== 1 || runs[i]?.length !== 3) break;
+    digits += runs[i];
+  }
+  const magnitude = Number.parseInt(digits, 10);
+  return signed ? -magnitude || 0 : magnitude;
+}
+
+// src/controllers/count_up_controller.ts
+var DEFAULT_DURATION = 1200;
 var CountUpController = class extends Controller {
   static values = {
-    duration: { type: Number, default: 1200 },
+    duration: { type: Number, default: DEFAULT_DURATION },
     from: { type: Number, default: 0 },
     once: { type: Boolean, default: true }
   };
   static actions = ["start"];
   static events = ["end"];
   #frame = null;
-  /** The authored final text, restored verbatim when the run settles. */
-  #finalText = "";
+  /** The animation length, with a declaration outside its domain read as the default. */
+  get #duration() {
+    return Number.isFinite(this.durationValue) && this.durationValue > 0 ? this.durationValue : DEFAULT_DURATION;
+  }
+  /** The starting value, with a declaration that is not a finite number read as zero. */
+  get #from() {
+    return Number.isFinite(this.fromValue) ? this.fromValue : 0;
+  }
   connect() {
-    if (this.element.hasAttribute("data-count-up-label")) {
-      this.element.textContent = this.element.getAttribute("aria-label") ?? this.element.textContent;
-      this.#restoreLabel();
-      this.element.setAttribute("data-count-up-done", "true");
-    }
+    const ticker = this.#ownedTicker();
+    if (ticker === null) return;
+    const authored = ticker.getAttribute("aria-label");
+    this.#unwrap(ticker, authored);
+    if (authored !== null) this.element.setAttribute("data-count-up-done", "true");
   }
   disconnect() {
     if (this.#frame !== null) this.#settle();
@@ -5360,27 +5391,22 @@ var CountUpController = class extends Controller {
   start() {
     if (this.#frame !== null) return;
     if (this.onceValue && this.element.hasAttribute("data-count-up-done")) return;
-    this.#finalText = this.element.textContent ?? "";
-    const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
-    if (Number.isNaN(target)) return;
+    const node = this.#numericNode();
+    if (node === null) return;
+    const authored = node.data;
+    const target = authoredInteger(authored);
     if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;
     }
-    const authored = this.element.getAttribute("aria-label");
-    if (authored !== null) {
-      this.element.setAttribute("data-count-up-original-label", authored);
-    }
-    this.element.setAttribute("data-count-up-label", "true");
-    this.element.setAttribute("aria-label", this.#finalText);
+    const ticker = this.#wrap(node, authored);
+    const from = this.#from;
     const started = performance.now();
     const step = (now) => {
-      const t = Math.min((now - started) / this.durationValue, 1);
+      const t = Math.min((now - started) / this.#duration, 1);
       const eased = 1 - (1 - t) ** 3;
-      this.element.textContent = String(
-        Math.round(this.fromValue + (target - this.fromValue) * eased)
-      );
+      ticker.textContent = String(Math.round(from + (target - from) * eased));
       if (t < 1) {
         this.#frame = requestAnimationFrame(step);
       } else {
@@ -5390,26 +5416,41 @@ var CountUpController = class extends Controller {
     };
     this.#frame = requestAnimationFrame(step);
   }
+  /** The first text node that displays a number, or null when the host has none. */
+  #numericNode() {
+    const walker = document.createTreeWalker(this.element, NodeFilter.SHOW_TEXT);
+    let node = walker.nextNode();
+    while (node !== null && authoredInteger(node.data) === null) {
+      node = walker.nextNode();
+    }
+    return node;
+  }
+  /** The wrapper this controller published, if one outlived its run. */
+  #ownedTicker() {
+    return this.element.querySelector("[data-count-up-label]");
+  }
+  /** Publishes the ticking number inside a named wrapper, replacing `node`. */
+  #wrap(node, authored) {
+    const ticker = document.createElement("span");
+    ticker.setAttribute("data-count-up-label", "true");
+    ticker.setAttribute("role", "img");
+    ticker.setAttribute("aria-label", authored);
+    node.replaceWith(ticker);
+    ticker.append(node);
+    return ticker;
+  }
+  /** Puts `text` back where the wrapper stood, leaving the rest of the host alone. */
+  #unwrap(ticker, text) {
+    ticker.replaceWith(document.createTextNode(text ?? ticker.textContent ?? ""));
+  }
   /** Ends the run: cancels the frame and restores the authored presentation. */
   #settle() {
     if (this.#frame !== null) cancelAnimationFrame(this.#frame);
     this.#frame = null;
-    this.element.textContent = this.#finalText;
-    this.#restoreLabel();
+    const ticker = this.#ownedTicker();
+    if (ticker !== null) this.#unwrap(ticker, ticker.getAttribute("aria-label"));
     this.element.setAttribute("data-count-up-done", "true");
   }
-  /** Releases the marker-owned aria-label, restoring any parked authored value. */
-  #restoreLabel() {
-    if (!this.element.hasAttribute("data-count-up-label")) return;
-    const original = this.element.getAttribute("data-count-up-original-label");
-    if (original !== null) {
-      this.element.setAttribute("aria-label", original);
-      this.element.removeAttribute("data-count-up-original-label");
-    } else {
-      this.element.removeAttribute("aria-label");
-    }
-    this.element.removeAttribute("data-count-up-label");
-  }
 };
 var SECOND_MS = 1e3;
 var CountdownController = class extends Controller {
@@ -10193,6 +10234,14 @@ function isBeforeRootStart(entry) {
   const rootTop = entry.rootBounds?.top ?? 0;
   return rect.bottom <= rootTop;
 }
+function queryRoot(selector) {
+  if (!selector) return null;
+  try {
+    return document.querySelector(selector);
+  } catch {
+  }
+  return null;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -10214,7 +10263,10 @@ var IntersectionWatcher = class {
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
    * If initial construction with the configured options fails, the watcher
-   * warns and retries once with the same root and platform defaults.
+   * warns and retries once with the same root and platform defaults. A
+   * `rootSelector` that does not parse resolves to the viewport (see
+   * {@link IntersectionWatchOptions.rootSelector}), so a typo never fails the
+   * call.
    *
    * @throws The fallback constructor error if both construction attempts fail,
    *   or whatever the platform throws from `observe()`. The exception is passed
@@ -10227,7 +10279,7 @@ var IntersectionWatcher = class {
     if (typeof IntersectionObserver === "undefined") return false;
     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;
+    const root = "root" in options ? options.root ?? null : queryRoot(options.rootSelector);
     let observer = null;
     try {
       const onEntries = (entries) => {
@@ -10320,6 +10372,25 @@ var IntersectionController = class extends Controller {
   }
   connect() {
     if (this.onceValue && this.element.getAttribute("data-intersecting") === "true") return;
+    this.#observe();
+  }
+  disconnect() {
+    this.#watcher.stop();
+  }
+  /**
+   * Re-reads the visibility line and rebuilds the observer. Turbo 8 morphing
+   * rewrites the attribute in place without a reconnect, and the line is what
+   * the intersection callback compares every ratio against, so a value frozen at
+   * connect time would decide `data-intersecting` wrongly for the rest of the
+   * page's life. Nothing to rebuild before the first `connect()`; after a spent
+   * one-shot the watcher is deliberately stopped, and re-observing would deliver
+   * the current state and fire `enter` a second time.
+   */
+  thresholdValueChanged() {
+    if (this.#watcher.active) this.#observe();
+  }
+  /** (Re)installs the observer from the current Values. */
+  #observe() {
     this.#effectiveThreshold = this.#clampedThreshold();
     this.#watcher.start(this.element, {
       rootSelector: this.rootSelectorValue,
@@ -10328,9 +10399,6 @@ var IntersectionController = class extends Controller {
     });
     if (this.#watcher.usingPlatformDefaults) this.#effectiveThreshold = 0;
   }
-  disconnect() {
-    this.#watcher.stop();
-  }
   /**
    * Re-delivers the current intersection state as a fresh transition. Bound via
    * `data-action` (e.g. `my-feed:appended@window->stimeo--intersection#refresh`).
@@ -10361,14 +10429,29 @@ var IntersectionController = class extends Controller {
     const previous = this.element.getAttribute("data-intersecting");
     this.element.setAttribute("data-intersecting", intersecting ? "true" : "false");
     if (intersecting && previous !== "true") {
-      this.dispatch("enter", { detail: { ratio } });
       if (this.onceValue) this.#watcher.stop();
+      this.dispatch("enter", { detail: { ratio } });
     } else if (!intersecting && previous === "true") {
       this.dispatch("exit", {
-        detail: { ratio, position: isBeforeRootStart(entry) ? "before" : "after" }
+        detail: { ratio, position: this.#leftViaStartEdge(entry) ? "before" : "after" }
       });
     }
   }
+  /**
+   * Which edge the element left across, for the `exit` detail. A non-zero
+   * `threshold` withdraws visibility while the element still overlaps the root,
+   * so the leaving rect can straddle the start edge — the direction is the
+   * element's own top against that edge, not whether it has cleared the root
+   * entirely (that is what `passed` reports). An element with no layout box
+   * (`display: none`, a collapsed `<details>`) is reported with an empty rect
+   * that carries no position at all, so it is deliberately neither direction
+   * and takes the "still ahead" reading.
+   */
+  #leftViaStartEdge(entry) {
+    const rect = entry.boundingClientRect;
+    if (rect.width === 0 && rect.height === 0) return false;
+    return rect.top < (entry.rootBounds?.top ?? 0);
+  }
   /**
    * Reflects the "scrolled past" state onto `data-passed` and fires `passed` on
    * transitions — the line sticky headers and reading progress key off. Like
@@ -10388,9 +10471,14 @@ var IntersectionController = class extends Controller {
   /**
    * Observer thresholds: the `threshold` line itself, plus `ratioSteps` evenly
    * spaced steps when fine-grained `change` ratios are wanted (progress bars).
+   *
+   * 0 is always observed. An observer notifies only at the lines it was given,
+   * so a non-zero `threshold` on its own delivers its last callback while the
+   * element is still partly visible: the element leaving for good would never be
+   * reported, freezing the ratio and `data-passed` mid-departure.
    */
   #thresholds() {
-    const thresholds = /* @__PURE__ */ new Set([this.#clampedThreshold()]);
+    const thresholds = /* @__PURE__ */ new Set([0, this.#clampedThreshold()]);
     if (this.ratioStepsValue > 0) {
       for (let i = 0; i <= this.ratioStepsValue; i += 1) {
         thresholds.add(i / this.ratioStepsValue);
@@ -10408,47 +10496,98 @@ var LazyFrameController = class extends Controller {
   static events = ["load"];
   /** Shared IO plumbing (support guard, active guard, teardown). */
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
+  #connected = false;
   #loaded = false;
-  /** Focus reaching the frame triggers the load before it intersects (keyboard / AT). */
-  #onFocus = () => this.#trigger();
+  /**
+   * Whether the observer last saw the frame inside the observed area — `null`
+   * until it has reported. A re-entry needs a frame that was seen inside and
+   * then left, so an unknown position is never a departure.
+   */
+  #inside = null;
+  /**
+   * Focus reaching the frame starts the FIRST load before it intersects (keyboard / AT).
+   * `#load` releases this listener, so focus never reaches an already-loaded frame.
+   */
+  #onFocus = () => this.#load();
+  /**
+   * Follows the held URL at runtime: one that arrives arms the frame, one that is
+   * taken away disarms it, so an empty `url` holds no triggers either way.
+   *
+   * Stimulus runs value callbacks before `connect()`, so the connected guard keeps
+   * arming in one place. A frame that already loaded keeps its held URL for the next
+   * re-entry instead of fetching on the spot.
+   */
+  urlValueChanged() {
+    if (!this.#connected || this.#loaded) return;
+    if (this.urlValue) this.#arm();
+    else this.#stopObserving();
+  }
+  /** Rebuilds the observer when the early-load margin changes at runtime. */
+  rootMarginValueChanged() {
+    if (this.#connected && this.#watcher.active) this.#observe();
+  }
   connect() {
-    if (this.element.hasAttribute("data-lazy-loaded")) {
-      this.#loaded = true;
-      return;
-    }
-    if (!this.urlValue) return;
-    this.element.addEventListener("focusin", this.#onFocus);
-    this.#watcher.start(this.element, { rootMargin: this.rootMarginValue });
+    this.#loaded = this.element.hasAttribute("data-lazy-loaded");
+    this.#inside = null;
+    this.#connected = true;
+    if (this.#loaded && this.onceValue) return;
+    this.#arm();
   }
   disconnect() {
+    this.#connected = false;
     this.#stopObserving();
   }
+  /** Attaches the triggers that still have a job to do. */
+  #arm() {
+    if (!this.urlValue) return;
+    if (!this.#loaded) this.element.addEventListener("focusin", this.#onFocus);
+    this.#observe();
+  }
+  #observe() {
+    this.#watcher.start(this.element, { rootMargin: this.rootMarginValue });
+  }
   #onIntersect(entries) {
     for (const entry of entries) {
       if (entry.isIntersecting) {
-        this.#trigger();
-        return;
+        const returning = this.#inside === false;
+        this.#inside = true;
+        this.#enter(returning);
+      } else if (this.#inside) {
+        this.#inside = false;
       }
     }
   }
-  #trigger() {
-    if (!this.#loaded) this.#load();
-    else if (!this.onceValue) this.#reload();
+  /** Applies an intersecting entry: the first one loads, a return re-fetches. */
+  #enter(returning) {
+    if (!this.#loaded) {
+      this.#load();
+      return;
+    }
+    if (this.onceValue || !returning) return;
+    this.#reload();
   }
   /** Starts the load by writing the held URL to `src`. */
   #load() {
+    if (!this.urlValue) return;
     this.#loaded = true;
     this.element.setAttribute("src", this.urlValue);
     this.element.setAttribute("data-lazy-loaded", "true");
     this.dispatch("load", { detail: { url: this.urlValue } });
-    if (this.onceValue) this.#stopObserving();
+    this.element.removeEventListener("focusin", this.#onFocus);
+    if (this.onceValue) this.#watcher.stop();
   }
-  /** Re-entry while `once` is off: ask Turbo to reload the frame's current `src`. */
+  /** Re-entry while `once` is off: fetch the held URL again. */
   #reload() {
+    const src = this.element.getAttribute("src");
+    if (this.urlValue && this.urlValue !== src) {
+      this.element.setAttribute("src", this.urlValue);
+      this.dispatch("load", { detail: { url: this.urlValue } });
+      return;
+    }
     const frame = this.element;
     if (typeof frame.reload !== "function") return;
     frame.reload();
-    this.dispatch("load", { detail: { url: this.urlValue } });
+    this.dispatch("load", { detail: { url: src ?? "" } });
   }
   #stopObserving() {
     this.#watcher.stop();
@@ -16289,6 +16428,7 @@ var PersistController = class extends Controller {
     this.dispatch("error", { detail: { key, operation, reason } });
   }
 };
+var NATIVE_KEY_OWNERS = "input, textarea, select, button, a[href], summary, [contenteditable]";
 var PointerDragController = class _PointerDragController extends Controller {
   static targets = ["handle"];
   static values = {
@@ -16298,6 +16438,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     disabled: { type: Boolean, default: false },
     follow: { type: Boolean, default: false }
   };
+  static actions = ["reset"];
   static events = ["start", "move", "end", "cancel"];
   /** Marker attribute recording that this controller set the touch-action. */
   static #TOUCH_ACTION_MARKER = "data-pointer-drag-touch-action";
@@ -16331,23 +16472,49 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
     this.#teardown();
   }
-  /** Prepares handles added at runtime (touch-action + focusability). */
+  /**
+   * Returns the element to its origin: drops the committed follow offset and the
+   * inline `translate` that carries it.
+   *
+   * In follow mode the inline `translate` belongs to this controller, and the
+   * committed offset lives in a field the DOM cannot reach — so a consumer that
+   * wants the element back at the start, or that has written a position of its
+   * own, needs this to make the two agree again. An in-flight drag is cancelled
+   * first, or its deltas would land on top of the offset just cleared.
+   */
+  reset() {
+    const live = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
+    if (this.#pointer || this.#keyboard) this.#teardownSessions();
+    if (live) this.#dispatchCancel(live);
+    this.#followBase = { x: 0, y: 0 };
+    this.#applyFollow(0, 0);
+  }
   handleTargetConnected(handle) {
+    if (handle !== this.element) this.#restoreHandle(this.element);
     this.#prepareHandle(handle);
   }
   handleTargetDisconnected(handle) {
-    if (!this.element.contains(handle)) {
-      if (this.#pointer?.handle === handle) this.#endPointerSession();
-      if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
-    }
     this.#restoreHandle(handle);
+    if (this.element.contains(handle)) return;
+    const interrupted = this.#pointer?.handle === handle && this.#pointer.started ? this.#pointer.pointerType : this.#keyboard?.handle === handle ? "keyboard" : null;
+    if (this.#pointer?.handle === handle) this.#endPointerSession();
+    if (this.#keyboard?.handle === handle) this.#clearKeyboardSession();
+    if (!this.hasHandleTarget) this.#prepareHandle(this.element);
+    if (interrupted) this.#dispatchCancel(interrupted);
   }
-  /** Re-derives the handles' touch-action when the axis changes. */
-  axisValueChanged() {
+  /**
+   * Re-derives the handles' touch-action when the axis changes.
+   *
+   * Two layers, like the `tabindex` loan: the marker says the value was once
+   * ours, and the current inline value says it still is. A consumer that wrote
+   * its own `touch-action` after connect keeps it.
+   */
+  axisValueChanged(_value, previousValue) {
+    const lent = this.#touchActionFor(previousValue ?? this.axisValue);
     for (const handle of this.#handles()) {
-      if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-        handle.style.touchAction = this.#touchActionForAxis();
-      }
+      if (!handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) continue;
+      if (handle.style.touchAction !== lent) continue;
+      handle.style.touchAction = this.#touchActionForAxis();
     }
   }
   /** Cancels any in-flight session when the controller is disabled mid-drag. */
@@ -16428,9 +16595,10 @@ var PointerDragController = class _PointerDragController extends Controller {
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     if (event.defaultPrevented) return;
+    if (event.isComposing) return;
+    if (this.#ownsNativeKeys(event.target, handle)) return;
     if (isReservedArrowChord(event)) return;
     if (event.key === "Escape") {
-      if (event.isComposing) return;
       if (this.#pointer?.started) {
         const { pointerType } = this.#pointer;
         this.#teardownSessions();
@@ -16451,6 +16619,10 @@ var PointerDragController = class _PointerDragController extends Controller {
       return;
     }
     if (!this.#keyboard) return;
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      return;
+    }
     const step = this.#keyboardDelta(event.key);
     if (!step) return;
     event.preventDefault();
@@ -16539,6 +16711,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     const interrupted = this.#pointer?.started ? this.#pointer.pointerType : this.#keyboard ? "keyboard" : null;
     this.#teardownSessions();
     for (const handle of this.#handles()) this.#restoreHandle(handle);
+    this.#followReset();
     if (interrupted && this.element.isConnected) this.#dispatchCancel(interrupted);
   }
   /**
@@ -16608,8 +16781,12 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   /** `touch-action` that lets the page keep panning on the locked axis only. */
   #touchActionForAxis() {
-    if (this.axisValue === "x") return "pan-y";
-    if (this.axisValue === "y") return "pan-x";
+    return this.#touchActionFor(this.axisValue);
+  }
+  /** The `touch-action` an `axis` declaration lends, for any axis value. */
+  #touchActionFor(axis) {
+    if (axis === "x") return "pan-y";
+    if (axis === "y") return "pan-x";
     return "none";
   }
   /**
@@ -16620,8 +16797,10 @@ var PointerDragController = class _PointerDragController extends Controller {
    * are marker-owned so `#restoreHandle` reverts them symmetrically on teardown.
    */
   #prepareHandle(handle) {
-    if (handle.style.touchAction === "" || handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-      handle.style.touchAction = this.#touchActionForAxis();
+    const lent = this.#touchActionForAxis();
+    const marked = handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
+    if (handle.style.touchAction === "" || marked && handle.style.touchAction === lent) {
+      handle.style.touchAction = lent;
       handle.setAttribute(_PointerDragController.#TOUCH_ACTION_MARKER, "true");
     }
     if (handle.tabIndex < 0 && !handle.hasAttribute("tabindex")) {
@@ -16629,17 +16808,27 @@ var PointerDragController = class _PointerDragController extends Controller {
       handle.setAttribute(_PointerDragController.#TABINDEX_MARKER, "true");
     }
   }
+  /** Whether the key belongs to a native control or editing surface in the handle. */
+  #ownsNativeKeys(target, handle) {
+    const owner = target?.closest(NATIVE_KEY_OWNERS) ?? null;
+    return owner !== null && owner !== handle && handle.contains(owner);
+  }
   /** Reverts the marker-owned touch-action + tabindex (authored values untouched). */
   #restoreHandle(handle) {
     if (handle.hasAttribute(_PointerDragController.#TOUCH_ACTION_MARKER)) {
-      handle.style.touchAction = "";
+      if (handle.style.touchAction === this.#touchActionForAxis()) {
+        handle.style.touchAction = "";
+      }
       handle.removeAttribute(_PointerDragController.#TOUCH_ACTION_MARKER);
     }
     if (handle.hasAttribute(_PointerDragController.#TABINDEX_MARKER)) {
-      handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
-      if (handle.getAttribute("tabindex") === "0" && document.activeElement !== handle) {
+      const ours = handle.getAttribute("tabindex") === "0";
+      if (ours && document.activeElement !== handle) {
         handle.removeAttribute("tabindex");
+        handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
+        return;
       }
+      if (!ours) handle.removeAttribute(_PointerDragController.#TABINDEX_MARKER);
     }
   }
 };
@@ -16752,15 +16941,42 @@ var PortalController = class extends Controller {
   static events = ["mount", "unmount"];
   /** Decides whether a `disconnect()` is an in-page move or a real detach. */
   #gate = new DetachGate();
+  /** The `to` declaration after validation; the default when it cannot be parsed. */
+  #toSelector = "body";
+  /**
+   * Validates the destination declaration once, keeping only a selector the engine can
+   * read.
+   *
+   * A selector reads back as an ordinary string, so a malformed one survives until it is
+   * handed to the DOM — where it would take the whole teleport down and leave the part
+   * silently doing nothing. Falling back to the default puts the node somewhere visible
+   * instead, which reads as a mistake and can be traced back to the declaration.
+   */
+  toValueChanged() {
+    const selector = this.toValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#toSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#toSelector = "body";
+  }
   connect() {
     this.#gate.cancel();
-    if (portalState.has(this.element)) return;
+    const existing = portalState.get(this.element);
+    if (existing) {
+      existing.owner = this;
+      return;
+    }
     const node = this.hasContentTarget ? this.contentTarget : this.element;
     const destination = this.#destination();
     if (!destination || destination === node || node.contains(destination)) return;
     const placeholder = document.createComment("stimeo--portal");
     node.parentNode?.insertBefore(placeholder, node);
-    portalState.set(this.element, { node, placeholder });
+    portalState.set(this.element, { node, placeholder, owner: this });
     if (this.positionValue === "prepend") {
       destination.prepend(node);
     } else {
@@ -16779,7 +16995,7 @@ var PortalController = class extends Controller {
     }
     this.#gate.disconnected(this, () => {
       const current = portalState.get(this.element);
-      if (current) this.#restore(current);
+      if (current?.owner === this) this.#restore(current);
     });
   }
   /** Returns the node to its placeholder (or removes it) and clears the bookkeeping. */
@@ -16795,30 +17011,84 @@ var PortalController = class extends Controller {
     placeholder.remove();
     this.dispatch("unmount", { detail: {} });
   }
-  /** Resolves the destination for `to`, tolerating an invalid selector. */
+  /** Resolves the destination from the validated `to` selector. */
   #destination() {
-    const selector = this.toValue.trim();
-    if (!selector) return null;
-    try {
-      return document.querySelector(selector);
-    } catch {
-      return null;
+    return document.querySelector(this.#toSelector);
+  }
+};
+
+// src/utils/style_property_lease.ts
+var StylePropertyLease = class {
+  #property;
+  #records = /* @__PURE__ */ new Map();
+  /** @param property - The CSS property whose temporary values this lease owns. */
+  constructor(property) {
+    this.#property = property;
+  }
+  /** Writes or removes the leased declaration while preserving its authored value. */
+  write(element, value, priority = "") {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.writtenValue = value;
+      existing.writtenPriority = value === null ? "" : priority;
+    } else {
+      this.#records.set(element, {
+        originalValue: element.style.getPropertyValue(this.#property),
+        originalPriority: element.style.getPropertyPriority(this.#property),
+        writtenValue: value,
+        writtenPriority: value === null ? "" : priority
+      });
     }
+    this.#reflect(element, value, priority);
+  }
+  /** Returns one lease without overwriting a later consumer declaration. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    const style = element.style;
+    const stillOwned = style.getPropertyValue(this.#property) === (record.writtenValue ?? "") && style.getPropertyPriority(this.#property) === record.writtenPriority;
+    if (stillOwned) {
+      this.#reflect(element, record.originalValue, record.originalPriority);
+    }
+  }
+  /** Returns every outstanding declaration lease. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+  /** Reflects only a real declaration transition. */
+  #reflect(element, value, priority) {
+    const style = element.style;
+    const nextValue = value ?? "";
+    const nextPriority = value === null ? "" : priority;
+    if (style.getPropertyValue(this.#property) === nextValue && style.getPropertyPriority(this.#property) === nextPriority) {
+      return;
+    }
+    if (value === null) style.removeProperty(this.#property);
+    else style.setProperty(this.#property, value, priority);
   }
 };
+
+// src/controllers/preview_guard_controller.ts
 var PreviewGuardController = class extends Controller {
   static values = {
-    placeholder: { type: String, default: "" },
-    mode: { type: String, default: "hide" }
+    placeholder: { type: String, default: "" }
   };
   static events = ["hide", "show"];
+  #visibility = new StylePropertyLease("visibility");
+  #beforeCache = new BeforeCacheReset(() => this.#restore());
   #observer = null;
+  #connected = false;
   #hidden = false;
-  /** Saved inline visibility (hide mode), restored on show. */
-  #savedVisibility = "";
-  /** Saved text (placeholder mode); non-null marks that text — not visibility — was swapped. */
-  #savedText = null;
+  /** Child nodes a placeholder displaced; non-null marks that content — not visibility — was swapped. */
+  #savedNodes = null;
+  /** The descendant that held focus when the guard went up, so show can hand it back. */
+  #focused = null;
   connect() {
+    this.#connected = true;
+    if (this.#hidden) this.#reguard();
+    else this.element.removeAttribute("data-preview-hidden");
+    this.#beforeCache.activate();
     if (typeof MutationObserver !== "undefined") {
       this.#observer = new MutationObserver(() => this.#sync());
       this.#observer.observe(document.documentElement, {
@@ -16829,44 +17099,115 @@ var PreviewGuardController = class extends Controller {
     this.#sync();
   }
   disconnect() {
+    this.#connected = false;
+    this.#beforeCache.deactivate();
     this.#observer?.disconnect();
     this.#observer = null;
-    this.#restore();
   }
-  /** Reflects the current `data-turbo-preview` state onto the element. */
+  /**
+   * Re-guards to match a `placeholder` changed at runtime — the value is the content on
+   * display while the guard is up, so a morph that swaps it must not leave the old one.
+   */
+  placeholderValueChanged() {
+    if (!this.#connected || !this.#hidden) return;
+    this.#reguard();
+  }
+  /**
+   * Reflects the current `data-turbo-preview` state onto the element.
+   *
+   * @stimeoRenderRoot
+   */
   #sync() {
     const previewing = document.documentElement.hasAttribute("data-turbo-preview");
     if (previewing && !this.#hidden) this.#hide();
     else if (!previewing && this.#hidden) this.#show();
   }
   #hide() {
+    this.#focused = this.#focusedInside();
+    this.#applyGuard();
+    this.dispatch("hide", { detail: {} });
+  }
+  /** Puts the guard up in the form the current `placeholder` calls for. */
+  #applyGuard() {
     this.#hidden = true;
-    if (this.modeValue === "placeholder") {
-      this.#savedText = this.element.textContent;
-      this.element.textContent = this.placeholderValue;
+    if (this.placeholderValue === "") {
+      this.#visibility.write(this.element, "hidden");
     } else {
-      this.#savedVisibility = this.element.style.visibility;
-      this.element.style.visibility = "hidden";
+      this.#savedNodes = document.createDocumentFragment();
+      this.#savedNodes.append(...this.element.childNodes);
+      this.element.textContent = this.placeholderValue;
     }
     this.element.setAttribute("data-preview-hidden", "true");
-    this.dispatch("hide", { detail: {} });
+  }
+  /**
+   * Re-forms a guard that is already up so it matches the current `placeholder`.
+   *
+   * No event: `hide` reports that the guard went up, and it has not come down. Swapping
+   * one stand-in text for another writes only that text — putting the held content back
+   * first would reconnect the whole subtree for an instant. Only a change of *form* —
+   * to or from the empty placeholder — has to revert, and the focus the guard is holding
+   * carries across it rather than being handed back and taken again.
+   */
+  #reguard() {
+    if (this.#savedNodes && this.placeholderValue !== "") {
+      this.element.textContent = this.placeholderValue;
+      return;
+    }
+    const held = this.#focused;
+    this.#revert();
+    this.#applyGuard();
+    this.#focused = held;
   }
   #show() {
     this.#restore();
     this.dispatch("show", { detail: {} });
   }
-  /** Reverts the guard. Safe to call when not hidden (no-op) — used by show and teardown. */
+  /** Reverts the guard and hands focus back. Used by show and by the snapshot rewind. */
   #restore() {
-    if (!this.#hidden) return;
+    this.#revert();
+    this.#refocus();
+  }
+  /**
+   * Puts the element back the way the guard found it.
+   *
+   * Every step is a no-op on an element this controller never guarded: the lease returns
+   * only declarations it recorded, and the hook is removed whether or not it is there.
+   */
+  #revert() {
     this.#hidden = false;
-    if (this.#savedText !== null) {
-      this.element.textContent = this.#savedText;
-      this.#savedText = null;
+    if (this.#savedNodes) {
+      this.element.textContent = "";
+      this.element.append(this.#savedNodes);
+      this.#savedNodes = null;
     } else {
-      this.element.style.visibility = this.#savedVisibility;
+      this.#visibility.return(this.element);
     }
     this.element.removeAttribute("data-preview-hidden");
   }
+  /**
+   * The focused element the guard is about to make unfocusable, if any.
+   *
+   * The element itself counts as well as its descendants: guarding takes focus either way
+   * — a `visibility: hidden` subtree cannot hold it, and a placeholder displaces the nodes
+   * outright — so the browser drops focus to `<body>` the moment the guard goes up.
+   */
+  #focusedInside() {
+    const active = document.activeElement;
+    return active instanceof HTMLElement && this.element.contains(active) ? active : null;
+  }
+  /**
+   * Hands focus back to the element the guard took it from.
+   *
+   * Only when that element is still in the document and focus has not moved on since —
+   * anything else is the user's or another controller's, and putting it back would be
+   * taking it.
+   */
+  #refocus() {
+    const target = this.#focused;
+    this.#focused = null;
+    if (!target?.isConnected || document.activeElement !== document.body) return;
+    target.focus();
+  }
 };
 var OWNED_VALUE_TEXT2 = "data-stimeo--progress-owns-valuetext";
 var ProgressController = class extends Controller {
@@ -18175,9 +18516,16 @@ var ReadMoreController = class extends Controller {
 var PROGRESS_PROPERTY = "--stimeo--reading-progress";
 var ReadingProgressController = class extends Controller {
   static events = ["change", "complete"];
+  /** Owns both faces of the published property so teardown can hand them back. */
+  #lease = new StylePropertyLease(PROGRESS_PROPERTY);
+  /** The article's own box and the viewport: either changes the span. */
+  #layout = new LayoutObserver(() => this.#onScroll());
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #frame = null;
   /** Last published progress, so `change`/`complete` fire only on movement. */
   #progress = -1;
+  /** False until the connect frame has run: `complete` needs real reading. */
+  #baselined = false;
   #onScroll = () => {
     if (this.#frame !== null) return;
     this.#frame = requestAnimationFrame(() => {
@@ -18187,20 +18535,45 @@ var ReadingProgressController = class extends Controller {
   };
   connect() {
     this.#progress = -1;
+    this.#baselined = false;
     window.addEventListener("scroll", this.#onScroll, { passive: true, capture: true });
-    window.addEventListener("resize", this.#onScroll, { passive: true });
+    this.#layout.observe(this.element);
+    this.#layout.observeViewport();
+    this.#beforeCache.activate();
     this.#measure();
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      this.#measure();
+      this.#baselined = true;
+    });
   }
   disconnect() {
     window.removeEventListener("scroll", this.#onScroll, { capture: true });
-    window.removeEventListener("resize", this.#onScroll);
+    this.#layout.disconnect();
+    this.#beforeCache.deactivate();
+    this.#cancelFrame();
+    this.#lease.returnAll();
+  }
+  /**
+   * Hands both declarations back before the page is snapshotted, so a restored
+   * page starts from the authored DOM rather than from someone else's progress.
+   * The baseline goes back with them: a cancelled visit leaves this page on
+   * screen, and the next measurement has to publish afresh rather than match a
+   * value that has already been handed back.
+   */
+  #rewindForCache() {
+    this.#cancelFrame();
+    this.#lease.returnAll();
+    this.#progress = -1;
+  }
+  #cancelFrame() {
     if (this.#frame !== null) cancelAnimationFrame(this.#frame);
     this.#frame = null;
-    document.documentElement.style.removeProperty(PROGRESS_PROPERTY);
   }
   /** Computes and publishes the progress; emits on movement only. */
   #measure() {
     const rect = this.element.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0) return;
     const span = rect.height - window.innerHeight;
     const raw = span > 0 ? -rect.top / span : rect.top <= 0 ? 1 : 0;
     const progress = Math.min(1, Math.max(0, raw));
@@ -18208,10 +18581,10 @@ var ReadingProgressController = class extends Controller {
     const previous = this.#progress;
     this.#progress = progress;
     const value = String(progress);
-    this.element.style.setProperty(PROGRESS_PROPERTY, value);
-    document.documentElement.style.setProperty(PROGRESS_PROPERTY, value);
+    this.#lease.write(this.element, value);
+    this.#lease.write(document.documentElement, value);
     this.dispatch("change", { detail: { progress } });
-    if (progress === 1 && previous !== -1) this.dispatch("complete");
+    if (progress === 1 && previous !== -1 && this.#baselined) this.dispatch("complete");
   }
 };
 var YEAR_SCALE = { limit: Number.POSITIVE_INFINITY, unit: "year", ms: 315576e5 };
@@ -18668,6 +19041,7 @@ var ResizableController = class extends Controller {
     return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
   }
 };
+var STATE_ATTRIBUTES2 = ["disabled", "hidden"];
 var RovingController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -18677,12 +19051,14 @@ var RovingController = class extends Controller {
   };
   static events = ["change"];
   #roving = new RovingTabindex(() => this.itemTargets);
-  #reconcile = new MicrotaskCoalescer(() => this.#ensureTabStop());
+  #reconcile = new MicrotaskCoalescer(() => this.#ensureTabStop(true));
   #connected = false;
+  #observer = null;
   connect() {
-    this.#ensureTabStop();
+    this.#ensureTabStop(false);
     this.element.addEventListener("keydown", this.#onKeydown);
     this.element.addEventListener("focusin", this.#onFocusin);
+    this.#watchState();
     this.#connected = true;
     this.#reconcile.activate();
   }
@@ -18691,6 +19067,8 @@ var RovingController = class extends Controller {
     this.#reconcile.cancel();
     this.element.removeEventListener("keydown", this.#onKeydown);
     this.element.removeEventListener("focusin", this.#onFocusin);
+    this.#observer?.disconnect();
+    this.#observer = null;
   }
   /** Drops a runtime-added item from the Tab sequence before batch reconciliation. */
   itemTargetConnected(item) {
@@ -18706,10 +19084,9 @@ var RovingController = class extends Controller {
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
-    const items = this.itemTargets;
+    if (event.isComposing) return;
     const current = this.#indexOf(event.target);
     if (current === -1) return;
-    const length = items.length;
     const wrap = this.wrapValue ? "wrap" : "clamp";
     const orientation = this.orientationValue;
     const horizontal = orientation === "horizontal" || orientation === "both";
@@ -18719,16 +19096,16 @@ var RovingController = class extends Controller {
     const backwardKey = rtl ? "ArrowRight" : "ArrowLeft";
     let next;
     if (horizontal && event.key === forwardKey || vertical && event.key === "ArrowDown") {
-      next = rovingMove(current, length, 1, wrap);
+      next = this.#step(current, 1, wrap);
     } else if (horizontal && event.key === backwardKey || vertical && event.key === "ArrowUp") {
-      next = rovingMove(current, length, -1, wrap);
-    } else if (this.homeEndValue && event.key === "Home") {
-      next = 0;
-    } else if (this.homeEndValue && event.key === "End") {
-      next = length - 1;
+      next = this.#step(current, -1, wrap);
+    } else if (this.homeEndValue && (event.key === "Home" || event.key === "End")) {
+      if (hasModifierChord(event)) return;
+      next = event.key === "Home" ? this.#firstReachable() : this.#lastReachable();
     } else {
       return;
     }
+    if (next === -1) return;
     event.preventDefault();
     this.#activate(next, true);
   };
@@ -18739,7 +19116,8 @@ var RovingController = class extends Controller {
    */
   #onFocusin = (event) => {
     const index = this.#indexOf(event.target);
-    if (index !== -1) this.#activate(index, false);
+    if (index === -1 || !this.#reachable(index)) return;
+    this.#activate(index, false);
   };
   /** Resolves the item index owning an event target (the item or a descendant). */
   #indexOf(target) {
@@ -18755,66 +19133,106 @@ var RovingController = class extends Controller {
       this.dispatch("change", { detail: { index, item: this.itemTargets[index] } });
     }
   }
-  /** Keeps the first existing Tab stop, falling back to the first live item. */
-  #ensureTabStop() {
+  /**
+   * Keeps the Tab stop on a reachable item.
+   *
+   * `followFocus` is on for re-establishment only: an item added and focused in
+   * the same task has already claimed the stop through `focusin`, and the batch
+   * that follows must not hand it back to the first item. `connect()` passes it
+   * off so the authored DOM decides the initial stop. With nothing reachable the
+   * DOM is left as it is — a group inside a collapsed region gets its stop back
+   * when the region opens, instead of losing it for good.
+   */
+  #ensureTabStop(followFocus) {
+    const items = this.itemTargets;
+    const focused = followFocus ? items.findIndex((item, i) => item === document.activeElement && this.#reachable(i)) : -1;
     const active = this.#roving.activeIndex;
-    this.#roving.setActive(active === -1 ? 0 : active);
-  }
-};
-
-// src/utils/style_property_lease.ts
-var StylePropertyLease = class {
-  #property;
-  #records = /* @__PURE__ */ new Map();
-  /** @param property - The CSS property whose temporary values this lease owns. */
-  constructor(property) {
-    this.#property = property;
+    const kept = active !== -1 && this.#reachable(active) ? active : -1;
+    const index = focused !== -1 ? focused : kept !== -1 ? kept : this.#firstReachable();
+    if (index === -1) return;
+    this.#roving.setActive(index);
   }
-  /** Writes or removes the leased declaration while preserving its authored value. */
-  write(element, value, priority = "") {
-    const existing = this.#records.get(element);
-    if (existing) {
-      existing.writtenValue = value;
-      existing.writtenPriority = value === null ? "" : priority;
-    } else {
-      this.#records.set(element, {
-        originalValue: element.style.getPropertyValue(this.#property),
-        originalPriority: element.style.getPropertyPriority(this.#property),
-        writtenValue: value,
-        writtenPriority: value === null ? "" : priority
-      });
+  /**
+   * Resolves the next reachable index in `delta`'s direction, honouring `wrap`.
+   *
+   * An arrow on the widget's own axis is the widget's to consume even when the
+   * position does not change, so a clamped end resolves to the current item
+   * rather than to nothing. An unreachable origin escapes to the first reachable
+   * item instead of sitting in a dead end, and `-1` is left for the one case that
+   * really is not ours: no reachable item anywhere.
+   */
+  #step(current, delta, wrap) {
+    const length = this.itemTargets.length;
+    let index = current;
+    for (let taken = 0; taken < length; taken += 1) {
+      const candidate = rovingMove(index, length, delta, wrap);
+      if (candidate === index) break;
+      index = candidate;
+      if (this.#reachable(index)) return index;
+    }
+    return this.#reachable(current) ? current : this.#firstReachable();
+  }
+  /** Index of the first reachable item, or `-1`. */
+  #firstReachable() {
+    return this.itemTargets.findIndex((_item, i) => this.#reachable(i));
+  }
+  /** Index of the last reachable item, or `-1`. */
+  #lastReachable() {
+    for (let i = this.itemTargets.length - 1; i >= 0; i -= 1) {
+      if (this.#reachable(i)) return i;
     }
-    this.#reflect(element, value, priority);
+    return -1;
   }
-  /** Returns one lease without overwriting a later consumer declaration. */
-  return(element) {
-    const record = this.#records.get(element);
-    if (!record) return;
-    this.#records.delete(element);
-    const style = element.style;
-    const stillOwned = style.getPropertyValue(this.#property) === (record.writtenValue ?? "") && style.getPropertyPriority(this.#property) === record.writtenPriority;
-    if (stillOwned) {
-      this.#reflect(element, record.originalValue, record.originalPriority);
-    }
+  /**
+   * Whether the item at `index` can hold the Tab stop and take focus.
+   *
+   * `aria-disabled` is deliberately not consulted: it keeps an item reachable and
+   * only suppresses activation, which this part does not own.
+   */
+  #reachable(index) {
+    const item = this.itemTargets[index];
+    if (!item) return false;
+    if (this.#hidden(item)) return false;
+    if (!("disabled" in item)) return true;
+    if (item.disabled) return false;
+    return !inheritsFieldsetDisabled(item);
   }
-  /** Returns every outstanding declaration lease. */
-  returnAll() {
-    for (const element of Array.from(this.#records.keys())) this.return(element);
+  /**
+   * Whether `item`, or anything between it and the container, is `hidden`.
+   *
+   * The walk stops at the container on purpose: a group inside a hidden region is
+   * already out of the page's Tab order, and calling every item unreachable there
+   * would drop the stop with nothing left to restore it — the ancestor lies
+   * outside the subtree whose state attributes are watched.
+   */
+  #hidden(item) {
+    let node = item;
+    while (node && node !== this.element) {
+      if (node.hasAttribute("hidden")) return true;
+      node = node.parentElement;
+    }
+    return false;
   }
-  /** Reflects only a real declaration transition. */
-  #reflect(element, value, priority) {
-    const style = element.style;
-    const nextValue = value ?? "";
-    const nextPriority = value === null ? "" : priority;
-    if (style.getPropertyValue(this.#property) === nextValue && style.getPropertyPriority(this.#property) === nextPriority) {
-      return;
+  /**
+   * Watches the attributes that decide reachability, so disabling the item that
+   * holds the Tab stop hands it to another one instead of taking the whole set
+   * out of the Tab sequence. An enclosing `fieldset` disables items from outside
+   * the observed subtree, so each one's own `disabled` is watched too.
+   */
+  #watchState() {
+    if (typeof MutationObserver === "undefined") return;
+    const observer = new MutationObserver(() => this.#reconcile.schedule());
+    observer.observe(this.element, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: STATE_ATTRIBUTES2
+    });
+    for (let fieldset = this.element.parentElement?.closest("fieldset") ?? null; fieldset; fieldset = fieldset.parentElement?.closest("fieldset") ?? null) {
+      observer.observe(fieldset, { attributes: true, attributeFilter: ["disabled"] });
     }
-    if (value === null) style.removeProperty(this.#property);
-    else style.setProperty(this.#property, value, priority);
+    this.#observer = observer;
   }
 };
-
-// src/controllers/scroll_area_controller.ts
 var EDGE_EPSILON = 1;
 var ScrollAreaController = class extends Controller {
   static targets = ["viewport"];
@@ -20690,19 +21108,32 @@ var SliderController = class extends Controller {
     drag?.pointer?.end();
   }
 };
+var DEFAULT_OFFSET2 = 80;
 var SmartStickyHeaderController = class extends Controller {
   static values = {
     containerSelector: { type: String, default: "" },
-    offset: { type: Number, default: 80 },
+    offset: { type: Number, default: DEFAULT_OFFSET2 },
     tolerance: { type: Number, default: 4 }
   };
   static events = ["change"];
+  #connected = false;
   #frame = null;
   /** The scroll source resolved at connect — disconnect must unbind the SAME node. */
   #scrollerEl = window;
+  /** The validated `containerSelector`, or `""` when the declaration cannot be parsed. */
+  #containerSelector = "";
   #lastY = 0;
   /** Last published state, so `change` fires only on transitions. */
   #hidden = null;
+  /**
+   * The depth that never hides. A declaration that is not a finite number reads
+   * as the default, so the comparison path never sees `NaN` — which would
+   * answer `false` to every comparison and hide the header inside the very
+   * zone the value exists to protect.
+   */
+  get #offset() {
+    return Number.isFinite(this.offsetValue) ? this.offsetValue : DEFAULT_OFFSET2;
+  }
   #onScroll = () => {
     if (this.#frame !== null) return;
     this.#frame = requestAnimationFrame(() => {
@@ -20715,15 +21146,25 @@ var SmartStickyHeaderController = class extends Controller {
    * hold while focus *stays* inside is the `#apply` hide invariant.
    */
   #onFocusin = () => this.#apply(false);
+  /** Validates `containerSelector` once so connect never parses a selector that throws. */
+  containerSelectorValueChanged() {
+    this.#containerSelector = this.#validSelector(this.containerSelectorValue);
+  }
+  /** Re-decides when application code (or a Turbo morph) changes `offset` at runtime. */
+  offsetValueChanged() {
+    if (this.#connected) this.#measure();
+  }
   connect() {
     this.#hidden = null;
     this.#scrollerEl = this.#resolveScroller();
     this.#lastY = this.#scrollY;
     this.#scrollerEl.addEventListener("scroll", this.#onScroll, { passive: true });
     this.element.addEventListener("focusin", this.#onFocusin);
-    this.#apply(false);
+    this.#apply(false, false);
+    this.#connected = true;
   }
   disconnect() {
+    this.#connected = false;
     this.#scrollerEl.removeEventListener("scroll", this.#onScroll);
     this.element.removeEventListener("focusin", this.#onFocusin);
     if (this.#frame !== null) cancelAnimationFrame(this.#frame);
@@ -20731,43 +21172,69 @@ var SmartStickyHeaderController = class extends Controller {
   }
   /** Resolves the scroll source: the `containerSelector` match, else the window. */
   #resolveScroller() {
-    if (this.containerSelectorValue) {
-      const container = document.querySelector(this.containerSelectorValue);
+    if (this.#containerSelector) {
+      const container = document.querySelector(this.#containerSelector);
       if (container) return container;
     }
     return window;
   }
+  /** Returns `declared` when it parses as a selector, and `""` when it does not. */
+  #validSelector(declared) {
+    if (declared.length > 0) {
+      try {
+        this.element.matches(declared);
+        return declared;
+      } catch {
+      }
+    }
+    return "";
+  }
   get #scrollY() {
     const scroller = this.#scrollerEl;
     return scroller === window ? window.scrollY : scroller.scrollTop;
   }
   #measure() {
     const y = this.#scrollY;
+    if (y <= this.#offset) {
+      this.#lastY = y;
+      this.#apply(false);
+      return;
+    }
     const delta = y - this.#lastY;
     if (Math.abs(delta) < this.toleranceValue) return;
     this.#lastY = y;
-    if (y <= this.offsetValue) this.#apply(false);
-    else if (delta > 0) this.#apply(true);
-    else this.#apply(false);
+    this.#apply(delta > 0);
   }
-  /** Reflects the state onto the hook and emits `change` on transitions. */
-  #apply(hidden) {
+  /**
+   * Reflects the state onto the hook and emits `change` on transitions.
+   *
+   * @param notify - whether a transition announces itself. The reflection
+   *   `connect()` performs is the current state, not a change.
+   */
+  #apply(hidden, notify = true) {
     if (hidden && this.element.contains(document.activeElement)) return;
     if (hidden === this.#hidden) return;
     this.#hidden = hidden;
     this.element.setAttribute("data-header-hidden", hidden ? "true" : "false");
-    this.dispatch("change", { detail: { hidden } });
+    if (notify) this.dispatch("change", { detail: { hidden } });
   }
 };
 var SortableController = class extends Controller {
-  static targets = ["list", "item", "status"];
+  static targets = ["list", "item"];
   static values = {
-    orientation: { type: String, default: "vertical" }
+    orientation: { type: String, default: "vertical" },
+    announceGrabbedText: { type: String, default: "" },
+    announceMovedText: { type: String, default: "" },
+    announceDroppedText: { type: String, default: "" },
+    announceCanceledText: { type: String, default: "" }
   };
   static events = ["reorder"];
   #session = null;
+  /** Defers the lost-item check to after the mutation batch (see below). */
+  #settle = new MicrotaskCoalescer(() => this.#dropLostSession());
   connect() {
     this.element.removeAttribute("data-sortable-dragging");
+    this.#settle.activate();
     this.element.addEventListener("stimeo--pointer-drag:start", this.#onDragStart);
     this.element.addEventListener("stimeo--pointer-drag:move", this.#onDragMove);
     this.element.addEventListener("stimeo--pointer-drag:end", this.#onDragEnd);
@@ -20778,49 +21245,121 @@ var SortableController = class extends Controller {
     this.element.removeEventListener("stimeo--pointer-drag:move", this.#onDragMove);
     this.element.removeEventListener("stimeo--pointer-drag:end", this.#onDragEnd);
     this.element.removeEventListener("stimeo--pointer-drag:cancel", this.#onDragCancel);
+    this.#settle.cancel();
+    this.#session = null;
+    this.element.removeAttribute("data-sortable-dragging");
+  }
+  /**
+   * Ends a session whose item left the item set.
+   *
+   * The controller's own reorder detaches and reattaches the item inside one
+   * mutation batch, so the loss is only real once the batch has settled — the
+   * check therefore runs a microtask later and asks whether the item is a target
+   * again. Without it a deleted row (a broadcast that drops it from the board)
+   * or a morph that strips the item's target attribute would hold the
+   * one-at-a-time session for the rest of the page's life, with the root hook
+   * stuck on and every later grab refused with no way out.
+   */
+  itemTargetDisconnected(item) {
+    if (this.#session?.item !== item) return;
+    this.#settle.schedule();
+  }
+  #dropLostSession() {
+    const session = this.#session;
+    if (!session) return;
+    const items = this.#items();
+    if (items.includes(session.item)) return;
     this.#session = null;
     this.element.removeAttribute("data-sortable-dragging");
+    if (session.item.isConnected) this.#restore(session, items);
   }
-  /** Picks the item up: remembers its origin and announces the grab. */
+  /** Picks the item up: remembers its neighbours and announces the grab. */
   #onDragStart = (event) => {
     if (this.#session) return;
-    const item = this.#itemFor(event.target);
+    const items = this.#items();
+    const item = this.#itemFor(event.target, items);
     if (!item) return;
-    this.#session = { item, from: this.#items().indexOf(item), lastPrimary: 0 };
+    const index = items.indexOf(item);
+    this.#session = {
+      item,
+      anchor: items[index + 1] ?? null,
+      predecessor: items[index - 1] ?? null,
+      lastPrimary: 0
+    };
     this.element.setAttribute("data-sortable-dragging", "true");
     this.#announce("grabbed", item);
   };
   #onDragMove = (event) => {
     const session = this.#session;
+    if (!session) return;
+    const items = this.#items();
+    if (this.#itemFor(event.target, items) !== session.item) return;
     const detail = event.detail;
-    if (!session || this.#itemFor(event.target) !== session.item) return;
     if (detail.pointerType === "keyboard") {
-      this.#stepFromKeyboard(session, detail);
+      this.#stepFromKeyboard(session, detail, items);
     } else {
-      this.#followPointer(session, detail);
+      this.#followPointer(session, detail, items);
     }
   };
   /** Drops the item: announces, then reports `reorder` if the position changed. */
   #onDragEnd = (event) => {
     const session = this.#session;
-    if (!session || this.#itemFor(event.target) !== session.item) return;
+    if (!session) return;
+    const items = this.#items();
+    if (this.#itemFor(event.target, items) !== session.item) return;
     this.#session = null;
     this.element.removeAttribute("data-sortable-dragging");
     this.#announce("dropped", session.item);
-    const to = this.#items().indexOf(session.item);
-    if (to !== session.from) {
-      this.dispatch("reorder", { detail: { item: session.item, from: session.from, to } });
+    const to = items.indexOf(session.item);
+    const from = this.#pickupSlot(session, items) ?? to;
+    if (to !== from) {
+      this.dispatch("reorder", { detail: { item: session.item, from, to } });
     }
   };
   /** Restores the pickup position (Escape / OS `pointercancel`). */
   #onDragCancel = (event) => {
     const session = this.#session;
-    if (!session || this.#itemFor(event.target) !== session.item) return;
+    if (!session) return;
+    const items = this.#items();
+    if (this.#itemFor(event.target, items) !== session.item) return;
     this.#session = null;
     this.element.removeAttribute("data-sortable-dragging");
-    this.#moveTo(session.item, session.from);
+    this.#restore(session, items);
     this.#announce("canceled", session.item);
   };
+  /**
+   * The slot the item was picked up from, read back through the neighbours it
+   * had then — `null` when neither survives and the item itself is gone.
+   *
+   * The anchor is the item that followed it, so restoring means "before that one
+   * again". When the anchor was deleted mid-drag the predecessor answers the
+   * same question from the other side. With both gone the item's current slot is
+   * the honest answer: nothing is known to have moved, so no reorder is reported
+   * and a cancel leaves the item where it is.
+   */
+  #pickupSlot(session, items) {
+    const others = items.filter((candidate) => candidate !== session.item);
+    if (session.anchor) {
+      const at = others.indexOf(session.anchor);
+      if (at !== -1) return at;
+    }
+    if (session.predecessor) {
+      const at = others.indexOf(session.predecessor);
+      if (at !== -1) return at + 1;
+    }
+    const here = items.indexOf(session.item);
+    return here === -1 ? null : here;
+  }
+  /** Puts the item back where it was picked up from. */
+  #restore(session, items) {
+    const slot = this.#pickupSlot(session, items);
+    if (slot === null) return;
+    this.#insertAt(
+      session.item,
+      items.filter((candidate) => candidate !== session.item),
+      slot
+    );
+  }
   /**
    * Keyboard stepping: `pointer-drag` reports *cumulative* synthetic deltas, so
    * the difference from the last consumed value is one arrow press — its sign is
@@ -20832,77 +21371,116 @@ var SortableController = class extends Controller {
    * `roving` already moves focus logically, so the same arrow would send the
    * focus and the grabbed item opposite ways.
    */
-  #stepFromKeyboard(session, detail) {
+  #stepFromKeyboard(session, detail, items) {
     const primary = Number(this.#isVertical ? detail.dy : detail.dx) || 0;
     const delta = primary - session.lastPrimary;
     session.lastPrimary = primary;
     if (delta === 0) return;
-    const items = this.#items();
     const index = items.indexOf(session.item);
     const step = (delta > 0 ? 1 : -1) * (this.#isReversed ? -1 : 1);
     const next = Math.max(0, Math.min(index + step, items.length - 1));
     if (next === index) return;
-    this.#moveTo(session.item, next);
+    this.#insertAt(
+      session.item,
+      items.filter((candidate) => candidate !== session.item),
+      next
+    );
     this.#announce("moved", session.item);
   }
   /**
    * Pointer following: the item moves to the slot whose siblings' midpoints the
-   * pointer has passed (per `orientation`). Skipped when the list has no layout
-   * geometry (every rect is zero — nothing meaningful to compare against).
-   */
-  #followPointer(session, detail) {
+   * pointer has passed (per `orientation`).
+   *
+   * Only siblings that occupy space take part. A row with no layout box — a
+   * filtered-out item, a `display: none` ancestor, a collapsed `<details>` — is
+   * reported with an empty rect at the document origin, and its midpoint of `0`
+   * sits below every pointer position: counted, it would read as passed on the
+   * very first move and send the item across a slot the pointer never crossed.
+   * With no laid-out sibling at all there is nothing to compare against and the
+   * move is skipped entirely.
+   */
+  #followPointer(session, detail, items) {
     const pointer = Number(this.#isVertical ? detail.y : detail.x) || 0;
-    const others = this.#items().filter((item) => item !== session.item);
-    if (others.length === 0) return;
-    let laidOut = false;
-    let target = 0;
+    const vertical = this.#isVertical;
     const reversed = this.#isReversed;
-    for (const other of others) {
-      const rect = other.getBoundingClientRect();
-      if (rect.width > 0 || rect.height > 0) laidOut = true;
-      const midpoint = this.#isVertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
-      const precedes = reversed ? pointer < midpoint : pointer > midpoint;
-      if (precedes) target += 1;
-    }
-    if (!laidOut) return;
-    const current = this.#items().indexOf(session.item);
-    if (target !== current) {
-      this.#moveTo(session.item, target);
-      this.#announce("moved", session.item);
-    }
-  }
-  /** Reinserts `item` so it lands at `index` among the list's items. */
-  #moveTo(item, index) {
-    const others = this.#items().filter((candidate) => candidate !== item);
-    const clamped = Math.max(0, Math.min(index, others.length));
-    const reference = others[clamped] ?? null;
+    const here = items.indexOf(session.item);
+    const laidOut = [];
+    let target = 0;
+    let current = 0;
+    items.forEach((item, index) => {
+      if (item === session.item) return;
+      const rect = item.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) return;
+      if (index < here) current += 1;
+      laidOut.push(item);
+      const midpoint = vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2;
+      if (reversed ? pointer < midpoint : pointer > midpoint) target += 1;
+    });
+    if (laidOut.length === 0 || target === current) return;
+    this.#insertAt(session.item, laidOut, target);
+    this.#announce("moved", session.item);
+  }
+  /**
+   * Reinserts `item` at `index` among `scope`, relative to the sibling already
+   * standing there.
+   *
+   * The reorder is defined against the items, not against a container: the
+   * neighbour's own parent is where the item belongs. A `list` target that is
+   * not the items' parent — or none at all, which the markup contract allows —
+   * therefore still lands the move in the right place instead of throwing, and
+   * the last slot is *after the last item* rather than after whatever else the
+   * container holds (a live region, a footer), which would put the row outside
+   * the reading order the list publishes.
+   */
+  #insertAt(item, scope, index) {
+    const clamped = Math.max(0, Math.min(index, scope.length));
+    const ahead = scope[clamped] ?? null;
+    const behind = ahead ? null : scope[scope.length - 1] ?? null;
+    const neighbour = ahead ?? behind;
+    if (!neighbour) return;
+    const parent = neighbour.parentNode;
+    if (!parent) return;
     const active = document.activeElement;
     const hadFocus = active instanceof HTMLElement && item.contains(active);
-    this.#list.insertBefore(item, reference);
+    parent.insertBefore(item, ahead ?? neighbour.nextSibling);
     if (hadFocus) active.focus();
   }
   /**
-   * Mirrors a step into the `status` live region. Copy is localizable through
-   * `data-grabbed` / `data-moved` / `data-dropped` / `data-canceled` templates on
-   * the status element (`%{name}` / `%{position}` / `%{total}` placeholders);
-   * terse English is the fallback.
+   * Hands one step to the page's shared announcer.
+   *
+   * The library carries no live region and no English copy: the wording is the
+   * consumer's, written into `announceGrabbedText` / `announceMovedText` /
+   * `announceDroppedText` / `announceCanceledText` with `{name}` / `{position}` /
+   * `{total}` placeholders, and an unset one announces nothing.
+   *
+   * Only transitions reach here — the pickup, a step that actually changed the
+   * landing slot, and the single end of the session — so a pointer crossing the
+   * same slot twice or an arrow clamped at an end stays silent.
    */
   #announce(key, item) {
-    if (!this.hasStatusTarget) return;
-    const position = String(this.#items().indexOf(item) + 1);
-    const total = String(this.#items().length);
-    const name = this.#nameOf(item);
-    const fallback = {
-      grabbed: `Grabbed ${name}, position ${position} of ${total}`,
-      moved: `${name}, position ${position} of ${total}`,
-      dropped: `Dropped ${name} at position ${position} of ${total}`,
-      canceled: `Reorder canceled, ${name} returned to position ${position} of ${total}`
-    };
-    const values = { name, position, total };
-    const template = this.statusTarget.dataset[key];
-    this.statusTarget.textContent = template ? template.replace(/%\{(name|position|total)\}/g, (match, token) => {
-      return values[token] ?? match;
-    }) : fallback[key];
+    const template = this.#announceTemplate(key);
+    if (template.length === 0) return;
+    const items = this.#items();
+    announce(
+      fillTemplate(template, {
+        name: this.#nameOf(item),
+        position: items.indexOf(item) + 1,
+        total: items.length
+      })
+    );
+  }
+  /** The consumer's wording for one step, or `""` when they authored none. */
+  #announceTemplate(key) {
+    switch (key) {
+      case "grabbed":
+        return this.announceGrabbedTextValue;
+      case "moved":
+        return this.announceMovedTextValue;
+      case "dropped":
+        return this.announceDroppedTextValue;
+      case "canceled":
+        return this.announceCanceledTextValue;
+    }
   }
   /** The announced item name: the authored override, else its collapsed text. */
   #nameOf(item) {
@@ -20910,11 +21488,17 @@ var SortableController = class extends Controller {
     if (authored) return authored;
     return (item.textContent ?? "").replace(/\s+/g, " ").trim();
   }
-  /** Resolves the sortable item owning a bubbled `pointer-drag` event. */
-  #itemFor(target) {
-    const node = target;
-    if (!node) return null;
-    return this.#items().find((item) => item === node || item.contains(node)) ?? null;
+  /**
+   * Resolves the sortable item owning a bubbled `pointer-drag` event.
+   *
+   * `pointer-drag` dispatches on its own element, and the markup contract puts
+   * one on each item, so the owner is the item that **is** the target. Matching
+   * an ancestor instead would make a card's own inner draggable — a knob, a
+   * split pane, anything the primitive is composed into — drive the card.
+   */
+  #itemFor(target, items) {
+    if (!target) return null;
+    return items.find((item) => item === target) ?? null;
   }
   /** The items in live DOM order (targets re-query the DOM on every access). */
   #items() {
@@ -21283,6 +21867,7 @@ var StepperController = class extends Controller {
     return Math.min(last, Math.max(0, Math.trunc(index)));
   }
 };
+var DEFAULT_THRESHOLD = 80;
 var countElements = (nodes) => {
   let n = 0;
   for (const node of nodes) if (node.nodeType === Node.ELEMENT_NODE) n += 1;
@@ -21291,34 +21876,53 @@ var countElements = (nodes) => {
 var StickToBottomController = class extends Controller {
   static targets = ["content"];
   static values = {
-    threshold: { type: Number, default: 80 },
+    threshold: { type: Number, default: DEFAULT_THRESHOLD },
     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;
+  /** The element the append observer currently holds, so a swap can be detected. */
+  #watched = null;
+  /** Watches for the box a container connected without one is still waiting on. */
+  #layout = new LayoutObserver(() => this.#onLaidOut());
+  #awaitingLayout = false;
+  #connected = false;
   #pinned = false;
   #onScroll = () => this.#updatePinned();
   connect() {
+    this.#connected = true;
     if (this.pinOnConnectValue && this.#measurable()) this.#scrollToBottom("instant");
+    this.element.removeAttribute("data-has-new");
     this.#pinned = this.#isPinned();
     this.#reflectPinned();
     this.element.addEventListener("scroll", this.#onScroll, { passive: true });
-    if (typeof MutationObserver !== "undefined") {
-      this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
-      this.#observer.observe(this.#watched(), { childList: true });
-    }
-    if (this.pinOnConnectValue && !this.#measurable()) this.#pinWhenLaidOut();
+    this.#syncWatched();
+    if (!this.#measurable()) this.#waitForLayout();
   }
   disconnect() {
+    this.#connected = false;
     this.element.removeEventListener("scroll", this.#onScroll);
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#stopWatching();
     this.#stopWaitingForLayout();
   }
+  /** Moves the append watch onto a `content` target that arrived at runtime. */
+  contentTargetConnected() {
+    this.#syncWatched();
+  }
+  /** Moves the append watch off a `content` target that left, back onto the container. */
+  contentTargetDisconnected() {
+    this.#syncWatched();
+  }
+  /**
+   * Re-derives pinned when the distance that counts as the bottom is changed at runtime
+   * (a morph that swaps the attribute on a retained element).
+   */
+  thresholdValueChanged() {
+    if (!this.#connected) return;
+    this.#updatePinned();
+  }
   /**
    * Jumps to the bottom and re-pins (wired to a "new messages" button).
    *
@@ -21347,7 +21951,11 @@ var StickToBottomController = class extends Controller {
       this.dispatch("new", { detail: { count: added } });
     }
   }
-  /** Recomputes pinned from the scroll position and reflects it on a transition. */
+  /**
+   * Recomputes pinned from the scroll position and reflects it on a transition.
+   *
+   * @stimeoRenderRoot
+   */
   #updatePinned() {
     const pinned = this.#isPinned();
     if (pinned === this.#pinned) return;
@@ -21364,9 +21972,25 @@ var StickToBottomController = class extends Controller {
       this.element.removeAttribute("data-pinned");
     }
   }
+  /** Whether the container currently sits within `threshold` of its bottom. */
   #isPinned() {
+    if (!this.#measurable()) return false;
     const el = this.element;
-    return el.scrollHeight - el.clientHeight - el.scrollTop <= this.thresholdValue;
+    return el.scrollHeight - el.clientHeight - el.scrollTop <= this.#threshold;
+  }
+  /**
+   * The distance from the bottom that counts as pinned: a finite, non-negative number of
+   * pixels. Anything else names no distance the container can be at, and settles the
+   * comparison the same way at every scroll position, so it falls back to the default.
+   * `Number` reads `"abc"` as `NaN` and every comparison against it is false; a negative
+   * distance sits below the closest the container ever gets; `Infinity` is never
+   * exceeded. The first two stop following and flag every append as new, and the last
+   * never stops following — it takes the reading position the flag exists to protect.
+   * Zero is a real declaration: it pins at the exact bottom only.
+   */
+  get #threshold() {
+    const declared = this.thresholdValue;
+    return Number.isFinite(declared) && declared >= 0 ? declared : DEFAULT_THRESHOLD;
   }
   /**
    * Whether the container has a box to scroll and to measure. One that is not rendered
@@ -21377,23 +22001,25 @@ var StickToBottomController = class extends Controller {
     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.
+   * Holds the pinned decision until the container is laid out — otherwise the panel opens
+   * at the top while the state claims the bottom, and the appends that arrived meanwhile
+   * were followed into a box that could not move rather than flagged.
    */
-  #pinWhenLaidOut() {
-    if (typeof ResizeObserver === "undefined") return;
-    this.#layout = new ResizeObserver(() => {
-      if (!this.#measurable()) return;
-      this.#stopWaitingForLayout();
-      this.#scrollToBottom("instant");
-      this.#updatePinned();
-    });
+  #waitForLayout() {
+    this.#awaitingLayout = true;
     this.#layout.observe(this.element);
   }
-  /** Releases the layout watch, whether or not the deferred jump ever ran. */
+  /** Runs the held decision once the container has the box it was waiting for. */
+  #onLaidOut() {
+    if (!this.#awaitingLayout || !this.#measurable()) return;
+    this.#stopWaitingForLayout();
+    if (this.pinOnConnectValue) this.#scrollToBottom("instant");
+    this.#updatePinned();
+  }
+  /** Releases the layout watch, whether or not the held decision ever ran. */
   #stopWaitingForLayout() {
-    this.#layout?.disconnect();
-    this.#layout = null;
+    this.#awaitingLayout = false;
+    this.#layout.disconnect();
   }
   /**
    * Scrolls to the bottom, clamped by the engine to the maximum scroll offset — which is
@@ -21409,9 +22035,32 @@ var StickToBottomController = class extends Controller {
       this.element.scrollTop = top;
     }
   }
-  /** The append-watched element: the `content` target, or the container itself. */
-  #watched() {
-    return this.hasContentTarget ? this.contentTarget : this.element;
+  /**
+   * Points the append watch at the current `content` target, or at the container when
+   * there is none. Re-resolved whenever that target changes, so a swap does not leave the
+   * observer holding a detached node whose appends nobody sees.
+   *
+   * Stimulus runs the target callbacks outside the connected window too — before
+   * `connect()` for a target already in the DOM, and after `disconnect()` while the
+   * element is torn down — where this would arm an observer nothing releases. Re-syncing
+   * to the target already held is left alone, so an arrival still in flight is not
+   * dropped with the observer that was about to deliver it.
+   */
+  #syncWatched() {
+    if (!this.#connected) return;
+    const next = this.hasContentTarget ? this.contentTarget : this.element;
+    if (next === this.#watched) return;
+    this.#stopWatching();
+    this.#watched = next;
+    if (typeof MutationObserver === "undefined") return;
+    this.#observer = new MutationObserver((mutations) => this.#onMutations(mutations));
+    this.#observer.observe(next, { childList: true });
+  }
+  /** Releases the append watch and the element it held. */
+  #stopWatching() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#watched = null;
   }
   /**
    * The behavior a follow-scroll runs with. `"auto"` is **not** a request to arrive at
@@ -23673,7 +24322,7 @@ var ToggleGroupController = class extends Controller {
     return item.getAttribute("data-value") ?? "";
   }
 };
-var STATE_ATTRIBUTES2 = ["disabled", "hidden"];
+var STATE_ATTRIBUTES3 = ["disabled", "hidden"];
 var ToolbarController = class extends Controller {
   static targets = ["control"];
   static values = {
@@ -23702,7 +24351,7 @@ var ToolbarController = class extends Controller {
         subtree: true,
         childList: true,
         attributes: true,
-        attributeFilter: STATE_ATTRIBUTES2
+        attributeFilter: STATE_ATTRIBUTES3
       });
       for (let fieldset = this.element.parentElement?.closest("fieldset") ?? null; fieldset; fieldset = fieldset.parentElement?.closest("fieldset") ?? null) {
         observer.observe(fieldset, { attributes: true, attributeFilter: ["disabled"] });