stimeo-ui 0.14.0 → 0.15.0

data/dist/controllers/highlight_controller.js

@@ -2,11 +2,6 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/highlight_controller.ts
 
-// src/utils/reduced_motion.ts
-function prefersReducedMotion() {
-  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -60,6 +55,54 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/keyed_timers.ts
+var KeyedTimers = class {
+  #timers = new SafeTimeout();
+  /** The pending timer of each key; an entry lives exactly as long as its timer. */
+  #pending = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, cancelling the timer `key` had
+   * pending. The entry is dropped before the callback runs, so the callback sees
+   * the key unarmed and may arm it again for the next round.
+   */
+  set(key, callback, delay) {
+    this.clear(key);
+    const id = this.#timers.set(() => {
+      this.#pending.delete(key);
+      callback();
+    }, delay);
+    this.#pending.set(key, id);
+  }
+  /**
+   * Cancels `key`'s pending timer, if it has one.
+   *
+   * A timer id is a positive integer, so `-1` stands for "nothing pending" and
+   * the registry ignores an id it does not own — the unarmed case needs no
+   * branch of its own, and no other key's timer can be reached from here.
+   */
+  clear(key) {
+    this.#timers.clear(this.#pending.get(key) ?? -1);
+    this.#pending.delete(key);
+  }
+  /**
+   * Cancels every pending timer and forgets every key. Call this from a
+   * controller's `disconnect()` so no timer, and no entry, outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#pending.clear();
+  }
+  /** Whether `key` has a timer pending. */
+  has(key) {
+    return this.#pending.has(key);
+  }
+};
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/highlight_controller.ts
 var hookOwners = /* @__PURE__ */ new WeakMap();
 var HighlightController = class extends Controller {
@@ -68,14 +111,11 @@ var HighlightController = class extends Controller {
     observe: { type: Boolean, default: false }
   };
   static events = ["start", "end"];
-  #timeouts = new SafeTimeout();
   /**
-   * The removal timer this connection has outstanding for an element. Held weakly so
-   * a row that leaves the DOM is not retained, and dropped wholesale on `disconnect()`
-   * so a cleared id can never be matched against a recycled one. Which connection owns
-   * an element's hook is answered by the shared owner registry above.
+   * The removal timer this connection has outstanding for each element. Which
+   * connection owns an element's hook is answered by the shared owner registry above.
    */
-  #pending = /* @__PURE__ */ new WeakMap();
+  #removal = new KeyedTimers();
   #observer = null;
   connect() {
     this.#clearArrivedHook(this.element);
@@ -92,8 +132,7 @@ var HighlightController = class extends Controller {
   disconnect() {
     this.#observer?.disconnect();
     this.#observer = null;
-    this.#timeouts.clearAll();
-    this.#pending = /* @__PURE__ */ new WeakMap();
+    this.#removal.clearAll();
   }
   /** Drops a hook that arrived with the DOM, along with this connection's claim on it. */
   #clearArrivedHook(el) {
@@ -114,13 +153,15 @@ var HighlightController = class extends Controller {
     this.#releasePending(el);
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
-    const id = this.#timeouts.set(() => {
-      this.#pending.delete(el);
-      hookOwners.delete(el);
-      el.removeAttribute("data-highlight");
-      this.dispatch("end", { target: el, detail: { element: el } });
-    }, this.durationValue);
-    this.#pending.set(el, id);
+    this.#removal.set(
+      el,
+      () => {
+        hookOwners.delete(el);
+        el.removeAttribute("data-highlight");
+        this.dispatch("end", { target: el, detail: { element: el } });
+      },
+      this.durationValue
+    );
     hookOwners.set(el, this);
   }
   /**
@@ -133,10 +174,9 @@ var HighlightController = class extends Controller {
     if (owner !== void 0 && owner !== this) owner.#cancelPending(el);
     this.#cancelPending(el);
   }
-  /** Releases `el`'s pending removal timer, if it has one. */
+  /** Releases `el`'s pending removal timer, if it has one, and this connection's claim. */
   #cancelPending(el) {
-    this.#timeouts.clear(this.#pending.get(el) ?? -1);
-    this.#pending.delete(el);
+    this.#removal.clear(el);
     hookOwners.delete(el);
   }
 };

data/dist/controllers/local_time_controller.js

@@ -31,6 +31,11 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -190,13 +195,13 @@ var LocalTimeController = class extends Controller {
     };
     if (options.dateStyle === void 0 && options.timeStyle === void 0) return null;
     if (this.timeZoneValue.length > 0) options.timeZone = this.timeZoneValue;
-    const formatter = intlFormatter(Intl.DateTimeFormat, this.#locale, options);
+    const formatter = intlFormatter(
+      Intl.DateTimeFormat,
+      resolveLocale(this.element, this.localeValue),
+      options
+    );
     return formatter === null ? null : formatter.format(date);
   }
-  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
-  get #locale() {
-    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
-  }
 };
 
 export { LocalTimeController };

data/dist/controllers/masonry_controller.js

@@ -8,10 +8,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -47,14 +52,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 
@@ -127,13 +153,6 @@ var MasonryController = class extends Controller {
   #mutationObserver = null;
   /** Last published column count, so `layout` fires only on real changes. */
   #lastColumns = 0;
-  /**
-   * Re-pack when a descendant resource finishes loading. Images/iframes report a
-   * height of 0 until loaded, which would skew the shortest-column packing if the
-   * first pass ran before they settled; `load` does not bubble, so this is bound in
-   * the capture phase to catch every descendant.
-   */
-  #onLoad = () => this.#reconcile.schedule();
   /** Resolves the declared column width once, falling back when it is unreadable. */
   minColumnWidthValueChanged() {
     this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);
@@ -168,18 +187,17 @@ var MasonryController = class extends Controller {
       this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());
       this.#mutationObserver.observe(this.element, { childList: true, subtree: true });
     }
-    this.element.addEventListener("load", this.#onLoad, true);
+    this.#layout.observeDescendantLoads(this.element);
     this.#relayout();
     this.#reconcile.activate();
   }
-  /** Releases both observers and the load listener so nothing fires after detach. */
+  /** Releases every observation so nothing fires after detach. */
   disconnect() {
     this.#reconcile.cancel();
     this.#released.clear();
     this.#layout.disconnect();
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
-    this.element.removeEventListener("load", this.#onLoad, true);
     this.#lastColumns = 0;
   }
   /**

data/dist/controllers/optimistic_controller.js

@@ -57,6 +57,30 @@ var DetachGate = class _DetachGate {
   }
 };
 
+// src/utils/listener_set.ts
+var ListenerSet = class {
+  /** The generation every `add` joins until the next `dispose()`. */
+  #abort = new AbortController();
+  /**
+   * Attaches `handler` to the open generation, exactly as the caller spelled it.
+   *
+   * The set supplies the signal, so `options` carries everything else the DOM
+   * accepts — `capture` included, which has to match at release time and no
+   * longer has a second place to drift from.
+   */
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  /**
+   * Releases every listener of the open generation, synchronously, and opens the
+   * next one. Idempotent, and safe before anything has been added.
+   */
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 // src/controllers/optimistic_controller.ts
 var HIDDEN_MARKER = "data-optimistic-toggled";
 var BUSY_MARKER = "data-optimistic-busy";
@@ -73,6 +97,7 @@ var OptimisticController = class extends Controller {
   /** The submission that owns the applied optimistic state, if any. */
   #pending = null;
   #gate = new DetachGate();
+  #listeners = new ListenerSet();
   /** True between `connect()` and `disconnect()`, so a repeat connect rewinds nothing. */
   #connected = false;
   connect() {
@@ -80,13 +105,12 @@ var OptimisticController = class extends Controller {
     this.#gate.cancel();
     this.#connected = true;
     if (restored && this.element.hasAttribute("data-optimistic")) this.#revert();
-    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.add(this.element, "turbo:submit-start", this.#onSubmitStart);
+    this.#listeners.add(this.element, "turbo:submit-end", this.#onSubmitEnd);
   }
   disconnect() {
     this.#connected = false;
-    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.dispose();
     this.#gate.disconnected(this, () => {
       this.#pending = null;
     });

data/dist/controllers/overflow_indicator_controller.js

@@ -63,10 +63,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -102,14 +107,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 
@@ -324,7 +350,7 @@ var OverflowIndicatorController = class extends Controller {
     this.#observedViewport = next;
     this.#layout.observe(next);
     this.#layout.observeViewport();
-    next.addEventListener("load", this.#onContentLoad, true);
+    this.#layout.observeDescendantLoads(next);
     this.#syncContentObservation();
     if (typeof MutationObserver !== "undefined") {
       this.#mutationObserver = new MutationObserver(() => {
@@ -362,16 +388,13 @@ var OverflowIndicatorController = class extends Controller {
   #stopObservingViewport() {
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
-    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    this.#layout.unobserveDescendantLoads();
     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;

data/dist/controllers/overflow_menu_controller.js

@@ -64,10 +64,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -103,14 +108,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 

data/dist/controllers/read_more_controller.js

@@ -63,10 +63,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -102,14 +107,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 
@@ -192,7 +218,7 @@ var ReadMoreController = class extends Controller {
     this.#observedContent = next;
     this.#layout.observe(next);
     this.#layout.observeViewport();
-    next.addEventListener("load", this.#update, true);
+    this.#layout.observeDescendantLoads(next);
     if (typeof MutationObserver !== "undefined") {
       this.#contentMutationObserver = new MutationObserver(this.#update);
       this.#contentMutationObserver.observe(next, {
@@ -206,7 +232,7 @@ var ReadMoreController = class extends Controller {
     this.#deferredHide.releaseAll();
     if (this.#observedContent) {
       this.#layout.unobserve(this.#observedContent);
-      this.#observedContent.removeEventListener("load", this.#update, true);
+      this.#layout.unobserveDescendantLoads();
     }
     this.#observedContent = null;
     this.#contentMutationObserver?.disconnect();

data/dist/controllers/reading_progress_controller.js

@@ -31,16 +31,51 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/frame_coalescer.ts
+var FrameCoalescer = class {
+  #frame = null;
+  /**
+   * Runs `run` on the next frame, unless a frame is already pending — the first
+   * request of a burst wins and the rest are dropped. The pending frame is
+   * released before `run`, so `run` may request the next one.
+   */
+  schedule(run) {
+    if (this.#frame !== null) return;
+    this.#frame = requestAnimationFrame(() => {
+      this.#frame = null;
+      run();
+    });
+  }
+  /**
+   * Drops the pending frame, and reaches the platform only when there is one.
+   *
+   * There is no handle value that stands for "nothing pending":
+   * `cancelAnimationFrame` takes an `unsigned long`, so a negative placeholder
+   * arrives as a large positive number that the same allocator can hand out, and
+   * an idle cancel would then drop a frame belonging to someone else.
+   */
+  cancel() {
+    if (this.#frame === null) return;
+    cancelAnimationFrame(this.#frame);
+    this.#frame = null;
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -76,14 +111,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 
@@ -148,18 +204,13 @@ var ReadingProgressController = class extends Controller {
   /** The article's own box and the viewport: either changes the span. */
   #layout = new LayoutObserver(() => this.#onScroll());
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  #frame = null;
+  /** Coalesces scroll bursts, and the connect baseline, into one frame. */
+  #frames = new FrameCoalescer();
   /** 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(() => {
-      this.#frame = null;
-      this.#measure();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#measure());
   connect() {
     this.#progress = -1;
     this.#baselined = false;
@@ -168,8 +219,7 @@ var ReadingProgressController = class extends Controller {
     this.#layout.observeViewport();
     this.#beforeCache.activate();
     this.#measure();
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
+    this.#frames.schedule(() => {
       this.#measure();
       this.#baselined = true;
     });
@@ -178,7 +228,7 @@ var ReadingProgressController = class extends Controller {
     window.removeEventListener("scroll", this.#onScroll, { capture: true });
     this.#layout.disconnect();
     this.#beforeCache.deactivate();
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
   }
   /**
@@ -189,14 +239,10 @@ var ReadingProgressController = class extends Controller {
    * value that has already been handed back.
    */
   #rewindForCache() {
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#lease.returnAll();
     this.#progress = -1;
   }
-  #cancelFrame() {
-    if (this.#frame !== null) cancelAnimationFrame(this.#frame);
-    this.#frame = null;
-  }
   /** Computes and publishes the progress; emits on movement only. */
   #measure() {
     const rect = this.element.getBoundingClientRect();