stimeo-ui 0.14.0 → 0.15.0

data/dist/index.js

@@ -547,39 +547,6 @@ var AlertDialogController = class extends Controller {
   }
 };
 
-// src/utils/microtask_coalescer.ts
-var MicrotaskCoalescer = class {
-  #run;
-  #queued = false;
-  #active = false;
-  #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
-  constructor(run) {
-    this.#run = run;
-  }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
-  activate() {
-    this.#active = true;
-  }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
-  cancel() {
-    this.#active = false;
-    this.#queued = false;
-    this.#generation += 1;
-  }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
-  schedule() {
-    if (!this.#active || this.#queued) return;
-    this.#queued = true;
-    const generation = this.#generation;
-    queueMicrotask(() => {
-      if (generation !== this.#generation || !this.#queued || !this.#active) return;
-      this.#queued = false;
-      this.#run();
-    });
-  }
-};
-
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -647,6 +614,82 @@ var SafeInterval = 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/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/controllers/announcer_controller.ts
 var LEVELS = ["polite", "assertive"];
 var AnnouncerController = class extends Controller {
@@ -656,8 +699,14 @@ var AnnouncerController = class extends Controller {
     dedupeReannounce: { type: Boolean, default: true }
   };
   static actions = ["announce"];
-  /** Clear/re-announce timers; one `clearAll()` in disconnect tears them all down. */
+  /** Drain timers, which belong to a politeness level rather than to a region. */
   #timers = new SafeTimeout();
+  /**
+   * The one timer a region may have outstanding — its dedupe re-set, then its
+   * auto-clear. A region carries at most one, and the registry releases the
+   * previous one whenever a newer message takes the region over.
+   */
+  #regionTimers = new KeyedTimers();
   /** Live regions generated to stand in for absent targets, for teardown. */
   #generated = /* @__PURE__ */ new Map();
   /** Messages waiting to be written, oldest first, one queue per politeness. */
@@ -677,13 +726,6 @@ var AnnouncerController = class extends Controller {
   });
   /** Rewinds to an announceable initial state for the snapshot; see the remarks. */
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
-  /**
-   * The one timer a region may have outstanding — its dedupe re-set, then its
-   * auto-clear. Held weakly so a swapped-out target is not retained; a leftover
-   * id is harmless because {@link SafeTimeout.clear} no-ops on an id it does not
-   * own.
-   */
-  #pending = /* @__PURE__ */ new WeakMap();
   /**
    * Guards against handling the same CustomEvent twice. An event dispatched on
    * the controller element with `bubbles: true` reaches both the element and the
@@ -714,6 +756,7 @@ var AnnouncerController = class extends Controller {
     this.element.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     window.removeEventListener("stimeo--announcer:announce", this.#onAnnounceEvent);
     this.#timers.clearAll();
+    this.#regionTimers.clearAll();
     this.#queues.clear();
     this.#draining.clear();
     this.#removeGenerated();
@@ -844,13 +887,13 @@ var AnnouncerController = class extends Controller {
     }
     const region = this.#regionFor(level);
     if (this.dedupeReannounceValue && region.textContent === message) {
-      this.#cancelPending(region);
+      this.#regionTimers.clear(region);
       region.textContent = "";
       this.#scheduleDrain(level);
       return;
     }
     queue.shift();
-    this.#cancelPending(region);
+    this.#regionTimers.clear(region);
     region.textContent = message;
     this.#scheduleClear(region, message);
     if (queue.length > 0) this.#scheduleDrain(level);
@@ -858,7 +901,7 @@ var AnnouncerController = class extends Controller {
   /** Clears the region after `clearAfter` ms, unless a newer message replaced it. */
   #scheduleClear(region, message) {
     if (this.clearAfterValue <= 0) return;
-    this.#schedule(
+    this.#regionTimers.set(
       region,
       () => {
         if (region.textContent === message) region.textContent = "";
@@ -866,23 +909,6 @@ var AnnouncerController = class extends Controller {
       this.clearAfterValue
     );
   }
-  /**
-   * Arms `region`'s single pending timer. Callers reach here with the slot
-   * already free — `#drain` releases it before writing, and a fired timer clears its own
-   * entry below — so this does not cancel again.
-   */
-  #schedule(region, callback, delay) {
-    const id = this.#timers.set(() => {
-      this.#pending.delete(region);
-      callback();
-    }, delay);
-    this.#pending.set(region, id);
-  }
-  /** Releases `region`'s pending timer, if it has one. */
-  #cancelPending(region) {
-    this.#timers.clear(this.#pending.get(region) ?? -1);
-    this.#pending.delete(region);
-  }
   /**
    * Resolves the live region for a politeness level.
    *
@@ -908,6 +934,7 @@ var AnnouncerController = class extends Controller {
     this.#queues.clear();
     this.#draining.clear();
     this.#timers.clearAll();
+    this.#regionTimers.clearAll();
     for (const level of LEVELS) {
       if (this.#hasTargetFor(level)) {
         const target = level === "assertive" ? this.assertiveTarget : this.politeTarget;
@@ -981,6 +1008,23 @@ var AspectRatioController = class extends Controller {
   }
 };
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
 // src/utils/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -1028,6 +1072,30 @@ var CompositionTracker = class {
   };
 };
 
+// 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/auto_submit_controller.ts
 var AutoSubmitController = class extends Controller {
   static targets = ["form"];
@@ -1043,6 +1111,8 @@ var AutoSubmitController = class extends Controller {
   #timers = new SafeTimeout();
   /** Id of the pending debounce timer, so a new keystroke can reset it. */
   #pendingId = 0;
+  /** Listeners that live with the bound form rather than with the connection. */
+  #formListeners = new ListenerSet();
   /** The form the listeners are attached to; target callbacks rebind it. */
   #boundForm = null;
   /** Rewinds the transient state hooks just before Turbo snapshots the page. */
@@ -1052,9 +1122,7 @@ var AutoSubmitController = class extends Controller {
     this.#boundForm?.removeAttribute("aria-busy");
     const message = this.messageValue;
     this.dispatch("done", { detail: { message: message || void 0 } });
-    if (this.announceValue && message) {
-      window.dispatchEvent(new CustomEvent("stimeo--announcer:announce", { detail: { message } }));
-    }
+    if (this.announceValue) announce(message);
   };
   /** Owns delegated IME lifecycle state and submits confirmed input text. */
   #composition = new CompositionTracker({
@@ -1125,12 +1193,12 @@ var AutoSubmitController = class extends Controller {
     if (previous) {
       this.#cancelPending();
       previous.removeAttribute("data-auto-submit-pending");
-      previous.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+      this.#formListeners.dispose();
       this.#composition.unobserve(previous);
     }
     this.#boundForm = form;
     if (!form) return;
-    form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#formListeners.add(form, "turbo:submit-end", this.#onSubmitEnd);
     this.#composition.observe(form);
   }
   /** Resolves the form: the explicit `form` target, else a `<form>` root, else null. */
@@ -1407,10 +1475,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));
@@ -1446,14 +1519,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();
   }
 };
 
@@ -1677,25 +1771,6 @@ var BreadcrumbController = class extends Controller {
     return active instanceof HTMLElement && element.contains(active);
   }
 };
-
-// src/utils/announce.ts
-function announce(message, options = {}) {
-  const text = message.trim();
-  if (text.length === 0) return;
-  window.dispatchEvent(
-    new CustomEvent("stimeo--announcer:announce", {
-      detail: { message: text, assertive: options.assertive === true }
-    })
-  );
-}
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
-}
-
-// src/controllers/bulk_select_controller.ts
 var BulkSelectController = class extends Controller {
   static targets = ["all", "item", "bar", "count", "selectAllPages"];
   static values = {
@@ -1921,6 +1996,11 @@ function monthLabelFormatter(locale) {
   return intlFormatter(Intl.DateTimeFormat, locale, MONTH_LABEL_OPTIONS, "en");
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/controllers/calendar_controller.ts
 var OWNED_DISABLED = "data-stimeo--calendar-owns-disabled";
 var CalendarController = class extends Controller {
@@ -1930,8 +2010,9 @@ var CalendarController = class extends Controller {
     selected: { type: String, default: "" },
     min: { type: String, default: "" },
     max: { type: String, default: "" },
-    weekStart: { type: Number, default: 0 }
+    weekStart: { type: Number, default: 0 },
     // 0 = Sunday, 1 = Monday, etc.
+    locale: { type: String, default: "" }
   };
   static actions = ["next", "onKeydown", "prev", "selectByClick"];
   static events = ["monthchange", "select"];
@@ -1973,6 +2054,17 @@ var CalendarController = class extends Controller {
     this.#syncFocusedDateWithMonth();
     this.render();
   }
+  /**
+   * Repaints the label when application code changes `locale` at runtime.
+   *
+   * Stimulus runs this for the initial Value too, before `connect()`. The paint
+   * it triggers is idempotent — the month comes from `month` (or, while that is
+   * still empty, from `focusedDate`), and `monthchange` only reports a move away
+   * from a month already announced, so the first paint never reports one.
+   */
+  localeValueChanged() {
+    this.render();
+  }
   /**
    * Stimulus lifecycle callback triggered automatically when the selectedValue changes.
    * Re-renders grid cells to update `aria-selected` indicators.
@@ -2103,8 +2195,8 @@ var CalendarController = class extends Controller {
     const year = monthStart.getFullYear();
     const month = monthStart.getMonth() + 1;
     if (this.hasLabelTarget) {
-      const lang = document.documentElement.lang || "en";
-      this.labelTarget.textContent = monthLabelFormatter(lang).format(monthStart);
+      const locale = resolveLocale(this.element, this.localeValue);
+      this.labelTarget.textContent = monthLabelFormatter(locale).format(monthStart);
     }
     const days = this.#calculateGridDays(year, month);
     const dayElements = this.dayTargets;
@@ -3115,6 +3207,7 @@ var CheckboxController = class extends Controller {
   static events = ["change", "reconcile"];
   /** Collapses every lifecycle signal from one DOM update into one derived pass. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileFromChildren());
+  #listeners = new ListenerSet();
   /** Aggregate this root last settled on, so a derived repair is reported once. */
   #committedState = null;
   /** Watches authored checked-attribute changes on retained target elements. */
@@ -3132,14 +3225,14 @@ var CheckboxController = class extends Controller {
       attributeFilter: ["checked"],
       subtree: true
     });
-    this.element.addEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
     document.addEventListener("reset", this.#onReset, true);
   }
   /** Releases the observer, global reset listener, and every pending reconciliation. */
   disconnect() {
     this.#reconcile.cancel();
     this.#checkedObserver.disconnect();
-    this.element.removeEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.dispose();
     document.removeEventListener("reset", this.#onReset, true);
   }
   /** Reconciles the aggregate for a parent added or replaced at runtime. */
@@ -4849,6 +4942,7 @@ var ConditionalFieldsController = class extends Controller {
   #observing = false;
   /** Coalesces one target/morph/mutation batch into one full DOM reconciliation. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #listeners = new ListenerSet();
   /** Provides the last-resort focus landmark without claiming an authored tabindex. */
   #rootTabindex = new TabindexLoan();
   /** Watches retained targets and controls whose declarative or reflected state changed. */
@@ -4887,9 +4981,9 @@ var ConditionalFieldsController = class extends Controller {
       subtree: true
     });
     this.#observing = true;
-    this.element.addEventListener("change", this.#onTriggerInput);
-    this.element.addEventListener("input", this.#onTriggerInput);
-    this.element.addEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.add(this.element, "change", this.#onTriggerInput);
+    this.#listeners.add(this.element, "input", this.#onTriggerInput);
+    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
     document.addEventListener("reset", this.#onReset, true);
   }
   /** Releases all external resources and returns the temporary focus landmark loan. */
@@ -4897,9 +4991,7 @@ var ConditionalFieldsController = class extends Controller {
     this.#reconcile.cancel();
     this.#observing = false;
     this.#observer.disconnect();
-    this.element.removeEventListener("change", this.#onTriggerInput);
-    this.element.removeEventListener("input", this.#onTriggerInput);
-    this.element.removeEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.dispose();
     document.removeEventListener("reset", this.#onReset, true);
     this.#rootTabindex.returnAll();
   }
@@ -5708,10 +5800,11 @@ function toHalfWidth(text) {
 }
 
 // src/controllers/currency_input_controller.ts
+var FALLBACK_LOCALE = "en-US";
 var CurrencyInputController = class extends Controller {
   static targets = ["display", "field", "srValue"];
   static values = {
-    locale: { type: String, default: "en-US" },
+    locale: { type: String, default: "" },
     currency: { type: String, default: "" },
     precision: { type: Number, default: 2 }
   };
@@ -5721,7 +5814,7 @@ var CurrencyInputController = class extends Controller {
   #lastValue = null;
   #started = false;
   /** Validated mirrors of the Values; the hot path never reads a raw Value. */
-  #locale = "en-US";
+  #locale;
   #currency = "";
   #precision = 2;
   /** Formatters rebuilt only when a Value changes, never per keystroke. */
@@ -5958,8 +6051,9 @@ var CurrencyInputController = class extends Controller {
    * formatters from the validated set.
    */
   #revalidate() {
-    const declaredLocale = intlFormatter(Intl.NumberFormat, this.localeValue, {});
-    this.#locale = declaredLocale === null ? "en-US" : this.localeValue;
+    const resolved = resolveLocale(this.element, this.localeValue);
+    const usable = intlFormatter(Intl.NumberFormat, resolved, {});
+    this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
     const precision = this.precisionValue;
     this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
     this.#currency = "";
@@ -5974,7 +6068,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: true, maximumFractionDigits: 0 },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#fixed = intlFormatter(
       Intl.NumberFormat,
@@ -5984,15 +6078,15 @@ var CurrencyInputController = class extends Controller {
         minimumFractionDigits: this.#precision,
         maximumFractionDigits: this.#precision
       },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#accessible = this.#currency ? intlFormatter(
       Intl.NumberFormat,
       this.#locale,
       { style: "currency", currency: this.#currency },
-      this.#locale
+      FALLBACK_LOCALE
     ) : this.#fixed;
-    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, this.#locale).formatToParts(
+    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, FALLBACK_LOCALE).formatToParts(
       11111.1
     );
     this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
@@ -6002,7 +6096,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: false },
-      this.#locale
+      FALLBACK_LOCALE
     );
     for (let i = 0; i <= 9; i++) {
       const digit = digitFormatter.format(i);
@@ -6377,7 +6471,8 @@ var DateRangePickerController = class extends Controller {
     // A JSON list read through `parseStringList` rather than Stimulus's `Array`
     // type: that reader throws out of the value observer before any callback
     // runs, so one malformed attribute would stop the picker from connecting.
-    disabledDates: { type: String, default: "" }
+    disabledDates: { type: String, default: "" },
+    locale: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
   static events = ["change", "monthchange"];
@@ -6430,6 +6525,10 @@ var DateRangePickerController = class extends Controller {
     this.#beforeCache.deactivate();
     this.#focusTimer.clearAll();
   }
+  /** Repaints the label when application code changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
     this.#repaint.schedule();
@@ -6618,8 +6717,7 @@ var DateRangePickerController = class extends Controller {
     const { year, month } = info;
     if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
-      const lang = document.documentElement.lang || "en";
-      const formatter = monthLabelFormatter(lang);
+      const formatter = monthLabelFormatter(resolveLocale(this.element, this.localeValue));
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();
@@ -7198,6 +7296,7 @@ var DirtyFormController = class extends Controller {
   #dirty = false;
   #beforeunloadBound = false;
   #timeouts = new SafeTimeout();
+  #listeners = new ListenerSet();
   /** Whether the active submission still represents the form's current values. */
   #submitting = false;
   #submitAttempt = null;
@@ -7255,24 +7354,19 @@ var DirtyFormController = class extends Controller {
     this.#baseline = this.#serialize();
     this.#setDirty(false);
     this.element.removeAttribute("data-dirty");
-    this.element.addEventListener("input", this.#onFieldChange);
-    this.element.addEventListener("change", this.#onFieldChange);
-    this.element.addEventListener("submit", this.#onSubmit);
-    this.element.addEventListener("formdata", this.#onFormData);
-    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.add(this.element, "input", this.#onFieldChange);
+    this.#listeners.add(this.element, "change", this.#onFieldChange);
+    this.#listeners.add(this.element, "submit", this.#onSubmit);
+    this.#listeners.add(this.element, "formdata", this.#onFormData);
+    this.#listeners.add(this.element, "turbo:submit-start", this.#onSubmitStart);
+    this.#listeners.add(this.element, "turbo:submit-end", this.#onSubmitEnd);
     this.#unregisterVisit = registerVisitParticipant(this.element.ownerDocument, {
       form: this.element,
       evaluate: (event) => this.#evaluateVisit(event)
     });
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onFieldChange);
-    this.element.removeEventListener("change", this.#onFieldChange);
-    this.element.removeEventListener("submit", this.#onSubmit);
-    this.element.removeEventListener("formdata", this.#onFormData);
-    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.dispose();
     this.#unregisterVisit?.();
     this.#unregisterVisit = null;
     this.#unbindBeforeUnload();
@@ -8590,6 +8684,80 @@ var FilterController = class extends Controller {
     return this.itemTargets.some((item) => !item.hidden && group.contains(item));
   }
 };
+
+// src/utils/pausable_timers.ts
+var PausableTimers = class {
+  #timers = new KeyedTimers();
+  /** Every key armed or held; an entry goes as its timer fires, or with the key. */
+  #entries = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, replacing whatever `key` had.
+   * A held key stays held and banks `delay` for its resume.
+   */
+  set(key, callback, delay) {
+    const reasons = this.#entries.get(key)?.reasons ?? /* @__PURE__ */ new Set();
+    const entry = { callback, startedAt: 0, remaining: delay, reasons };
+    this.#entries.set(key, entry);
+    if (reasons.size === 0) this.#arm(key, entry);
+  }
+  /**
+   * Holds `key` for `reason` and banks the time left, with a floor of one
+   * millisecond. Reports whether this call is the one that stopped a running
+   * timer, so the caller can write its held-state hook exactly once.
+   */
+  pause(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.add(reason);
+    if (!this.#timers.has(key)) return false;
+    this.#timers.clear(key);
+    entry.remaining = Math.max(1, entry.remaining - (Date.now() - entry.startedAt));
+    return true;
+  }
+  /**
+   * Releases `reason` on `key`, arming the banked time again once no reason is
+   * left. Reports whether this call is the one that started the timer again.
+   */
+  resume(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.delete(reason);
+    if (entry.reasons.size > 0 || this.#timers.has(key)) return false;
+    this.#arm(key, entry);
+    return true;
+  }
+  /** Whether `key` is armed or held — that is, whether this registry drives it at all. */
+  tracks(key) {
+    return this.#entries.has(key);
+  }
+  /** Cancels `key`'s timer and drops its hold. */
+  clear(key) {
+    this.#timers.clear(key);
+    this.#entries.delete(key);
+  }
+  /**
+   * Cancels every timer and forgets every key. Call this from a controller's
+   * `disconnect()` so neither a timer nor a hold outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#entries.clear();
+  }
+  /** Starts `entry`'s banked time running for `key`, and drops it as it fires. */
+  #arm(key, entry) {
+    entry.startedAt = Date.now();
+    this.#timers.set(
+      key,
+      () => {
+        this.#entries.delete(key);
+        entry.callback();
+      },
+      entry.remaining
+    );
+  }
+};
+
+// src/controllers/flash_controller.ts
 var ASSERTIVE_TYPES = /* @__PURE__ */ new Set(["alert", "error"]);
 var MESSAGE_SELECTOR = '[data-stimeo--flash-target="message"]';
 var FlashController = class extends Controller {
@@ -8601,12 +8769,13 @@ var FlashController = class extends Controller {
   };
   static actions = ["dismiss"];
   static events = ["show", "dismiss", "reconcile"];
+  /** Removal timers for the leaving transition; the auto-dismiss ones live below. */
   #timers = new SafeTimeout();
+  /** Per-message auto-dismiss, held open while the message is hovered or focused. */
+  #dismiss = new PausableTimers();
   #observer = null;
   /** Whether the controller is between `connect()` and `disconnect()`. */
   #connected = false;
-  /** Auto-dismiss timer state keyed by message element. */
-  #state = /* @__PURE__ */ new Map();
   /** Messages already processed, in insertion order, to enforce `max` and avoid double work. */
   #order = [];
   /**
@@ -8632,8 +8801,8 @@ var FlashController = class extends Controller {
     this.#beforeCache.deactivate();
     this.#stopObserving();
     this.#timers.clearAll();
+    this.#dismiss.clearAll();
     for (const message of this.#order) this.#unbindPause(message);
-    this.#state.clear();
     this.#order.length = 0;
     this.#leaving.clear();
   }
@@ -8762,8 +8931,7 @@ var FlashController = class extends Controller {
    * own role to do the announcing (dynamic inserts). Idempotent per message.
    */
   #process(message, bridge) {
-    if (this.#state.has(message) || this.#order.includes(message)) return;
-    if (this.#leaving.has(message)) return;
+    if (this.#order.includes(message) || this.#leaving.has(message)) return;
     const type = message.getAttribute("data-flash-type") ?? "";
     const assertive = ASSERTIVE_TYPES.has(type);
     if (!message.hasAttribute("role")) {
@@ -8774,11 +8942,7 @@ var FlashController = class extends Controller {
     this.#bindPause(message);
     const text = message.textContent?.trim() ?? "";
     this.dispatch("show", { target: message, detail: { type, message: text } });
-    if (bridge && text) {
-      window.dispatchEvent(
-        new CustomEvent("stimeo--announcer:announce", { detail: { message: text, assertive } })
-      );
-    }
+    if (bridge) announce(text, { assertive });
     this.#startTimer(message);
     this.#enforceMax();
   }
@@ -8791,53 +8955,33 @@ var FlashController = class extends Controller {
       this.#beginDismiss(oldest, "limit");
     }
   }
-  #startTimer(message, duration = this.durationValue) {
-    if (duration <= 0) return;
-    const existing = this.#state.get(message);
-    if (existing?.id) this.#timers.clear(existing.id);
-    const id = this.#timers.set(() => this.#beginDismiss(message, "timeout"), duration);
-    this.#state.set(message, {
-      id,
-      startedAt: Date.now(),
-      remaining: duration,
-      paused: existing?.paused ?? /* @__PURE__ */ new Set()
-    });
+  /** Arms a message's auto-dismiss; a non-positive `duration` means it never expires. */
+  #startTimer(message) {
+    if (this.durationValue <= 0) return;
+    this.#dismiss.set(message, () => this.#beginDismiss(message, "timeout"), this.durationValue);
   }
   /**
-   * Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1).
-   * Hover and focus are independent reasons: the remaining time is banked on the
-   * first of them, and {@link FlashController.#resume} waits for the last one.
+   * Holds a message's auto-dismiss open while it is hovered or focused
+   * (WCAG 2.2 2.2.1). Hover and focus are independent reasons, and the registry
+   * banks the time left on the first of them and waits for the last.
    */
   #pause(message, reason) {
-    const timer = this.#state.get(message);
-    if (!timer) return;
-    timer.paused.add(reason);
-    if (timer.id === 0) return;
-    this.#timers.clear(timer.id);
-    const remaining = Math.max(1, timer.remaining - (Date.now() - timer.startedAt));
-    this.#state.set(message, { id: 0, startedAt: 0, remaining, paused: timer.paused });
-  }
-  /** Resumes a paused message's auto-dismiss with the banked time. */
+    this.#dismiss.pause(message, reason);
+  }
+  /** Releases one reason, resuming the banked time once no reason is left. */
   #resume(message, reason) {
-    const timer = this.#state.get(message);
-    if (!timer) return;
-    timer.paused.delete(reason);
-    if (timer.paused.size > 0) return;
-    if (timer.id !== 0) return;
-    this.#startTimer(message, timer.remaining);
+    this.#dismiss.resume(message, reason);
   }
   /** Releases every per-message resource: timer, stacking slot, pause listeners. */
   #forget(message) {
-    const timer = this.#state.get(message);
-    if (timer?.id) this.#timers.clear(timer.id);
-    this.#state.delete(message);
+    this.#dismiss.clear(message);
     const index = this.#order.indexOf(message);
     if (index !== -1) this.#order.splice(index, 1);
     this.#unbindPause(message);
   }
   /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
   #beginDismiss(message, reason) {
-    if (!this.#state.has(message) && !this.#order.includes(message)) return;
+    if (!this.#order.includes(message)) return;
     this.#forget(message);
     this.#leaving.add(message);
     message.setAttribute("data-flash-state", "leaving");
@@ -9536,6 +9680,7 @@ var FrameLoadingController = class extends Controller {
   #floor = new MinDurationFloor(this.#timeouts);
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #listeners = new ListenerSet();
   #loading = false;
   /**
    * The optional targets this controller revealed, and the content it marked inert.
@@ -9562,14 +9707,12 @@ var FrameLoadingController = class extends Controller {
   connect() {
     this.#gate.cancel();
     this.#beforeCache.activate();
-    this.element.addEventListener("turbo:before-fetch-request", this.#onStart);
-    this.element.addEventListener("turbo:frame-load", this.#onEnd);
-    this.element.addEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#listeners.add(this.element, "turbo:before-fetch-request", this.#onStart);
+    this.#listeners.add(this.element, "turbo:frame-load", this.#onEnd);
+    this.#listeners.add(this.element, "turbo:fetch-request-error", this.#onEnd);
   }
   disconnect() {
-    this.element.removeEventListener("turbo:before-fetch-request", this.#onStart);
-    this.element.removeEventListener("turbo:frame-load", this.#onEnd);
-    this.element.removeEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#listeners.dispose();
     this.#beforeCache.deactivate();
     this.#gate.disconnected(this, () => this.#teardown());
   }
@@ -9731,14 +9874,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);
@@ -9755,8 +9895,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) {
@@ -9777,13 +9916,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);
   }
   /**
@@ -9796,10 +9937,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);
   }
 };
@@ -11147,13 +11287,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;
-  }
 };
 var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
 var DEFAULT_MIN_COLUMN_WIDTH = 240;
@@ -11190,13 +11330,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);
@@ -11231,18 +11364,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;
   }
   /**
@@ -14297,6 +14429,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() {
@@ -14304,13 +14437,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;
     });
@@ -15002,7 +15134,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(() => {
@@ -15040,16 +15172,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;
@@ -18580,7 +18709,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, {
@@ -18594,7 +18723,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();
@@ -18620,6 +18749,38 @@ var ReadMoreController = class extends Controller {
     trigger.hidden = true;
   }
 };
+
+// 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/controllers/reading_progress_controller.ts
 var PROGRESS_PROPERTY = "--stimeo--reading-progress";
 var ReadingProgressController = class extends Controller {
   static events = ["change", "complete"];
@@ -18628,18 +18789,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;
@@ -18648,8 +18804,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;
     });
@@ -18658,7 +18813,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();
   }
   /**
@@ -18669,14 +18824,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();
@@ -18812,11 +18963,11 @@ var RelativeTimeController = class extends Controller {
    * when the runtime rejects that locale.
    */
   get #formatter() {
-    return intlFormatter(Intl.RelativeTimeFormat, this.#locale, RELATIVE_OPTIONS);
-  }
-  /** 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;
+    return intlFormatter(
+      Intl.RelativeTimeFormat,
+      resolveLocale(this.element, this.localeValue),
+      RELATIVE_OPTIONS
+    );
   }
 };
 var STATELESS_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "submit", "reset", "button", "image"]);
@@ -19347,20 +19498,14 @@ var ScrollAreaController = class extends Controller {
   #observedNameIds = /* @__PURE__ */ new Set();
   #observedNameSources = [];
   #fonts = null;
-  #scrollFrame = null;
+  /** Coalesces scroll bursts into one position sync per frame. */
+  #frames = new FrameCoalescer();
   #overflowing = false;
   #lastEdge = null;
   #ownedHostMutations = /* @__PURE__ */ new Map();
-  #onScroll = () => {
-    if (this.#scrollFrame !== null) return;
-    this.#scrollFrame = requestAnimationFrame(() => {
-      this.#scrollFrame = null;
-      const viewport = this.#viewport;
-      if (viewport) this.#syncPosition(viewport, this.#overflowing);
-    });
-  };
-  #onLoad = () => {
-    this.#refresh();
+  #onScroll = (event) => {
+    const viewport = event.currentTarget;
+    this.#frames.schedule(() => this.#syncPosition(viewport, this.#overflowing));
   };
   #onFontsSettled = () => {
     this.#refresh();
@@ -19375,7 +19520,7 @@ var ScrollAreaController = class extends Controller {
   disconnect() {
     this.#beforeCache.deactivate();
     this.#rebind.cancel();
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
     this.#unbindFonts();
@@ -19408,7 +19553,7 @@ var ScrollAreaController = class extends Controller {
       return;
     }
     next.addEventListener("scroll", this.#onScroll, { passive: true });
-    next.addEventListener("load", this.#onLoad, true);
+    this.#layout.observeDescendantLoads(next);
     this.#layout.observe(next);
     this.#bindContentObserver(next);
     this.#refresh();
@@ -19443,9 +19588,9 @@ var ScrollAreaController = class extends Controller {
   }
   /** Releases every resource and borrowed attribute owned by one former viewport. */
   #unbindViewport(viewport) {
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     viewport.removeEventListener("scroll", this.#onScroll);
-    viewport.removeEventListener("load", this.#onLoad, true);
+    this.#layout.unobserveDescendantLoads();
     this.#layout.unobserve(viewport);
     this.#content?.disconnect();
     this.#content = null;
@@ -19460,7 +19605,7 @@ var ScrollAreaController = class extends Controller {
   #refresh() {
     const viewport = this.#viewport;
     if (!viewport) return;
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     this.#syncNameSources(viewport);
     this.#overflowing = this.#syncOverflow(viewport);
     this.#syncKeyboardReach(viewport, this.#overflowing);
@@ -19668,16 +19813,10 @@ var ScrollAreaController = class extends Controller {
     this.#fonts?.removeEventListener("loadingerror", this.#onFontsSettled);
     this.#fonts = null;
   }
-  /** Cancels a pending scroll frame. */
-  #cancelScrollFrame() {
-    if (this.#scrollFrame === null) return;
-    cancelAnimationFrame(this.#scrollFrame);
-    this.#scrollFrame = null;
-  }
   /** Suspends live resources and returns all derived state before snapshotting. */
   #rewindForCache() {
     this.#rebind.cancel();
-    this.#cancelScrollFrame();
+    this.#frames.cancel();
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#layout.disconnect();
     this.#unbindFonts();
@@ -19700,8 +19839,8 @@ var ScrollRestoreController = class extends Controller {
     key: { type: String, default: "" },
     axis: { type: String, default: "vertical" }
   };
-  /** Pending rAF id that coalesces scroll bursts into one save. */
-  #rafId = null;
+  /** Coalesces scroll bursts into one save per frame. */
+  #frames = new FrameCoalescer();
   /** Resolved storage key; empty disables persistence (no key and no id). */
   #storageKey = "";
   /** Last offset captured while the element was live; persisted as-is on teardown. */
@@ -19729,11 +19868,7 @@ var ScrollRestoreController = class extends Controller {
   #connected = false;
   #onScroll = () => {
     this.#capture();
-    if (this.#rafId !== null) return;
-    this.#rafId = requestAnimationFrame(() => {
-      this.#rafId = null;
-      this.#persist();
-    });
+    this.#frames.schedule(() => this.#persist());
   };
   connect() {
     this.#connected = true;
@@ -19744,7 +19879,7 @@ var ScrollRestoreController = class extends Controller {
   disconnect() {
     this.#connected = false;
     this.element.removeEventListener("scroll", this.#onScroll);
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#persist();
   }
   /** Re-derives the namespace when application code or a Turbo morph moves `key`. */
@@ -19758,7 +19893,7 @@ var ScrollRestoreController = class extends Controller {
   /** Rebuilds the persistence state around the Values as they now read. */
   #resync() {
     if (!this.#connected) return;
-    this.#cancelFrame();
+    this.#frames.cancel();
     this.#storageKey = this.#resolveKey();
     this.#echoTop = null;
     this.#echoLeft = null;
@@ -19767,13 +19902,6 @@ var ScrollRestoreController = class extends Controller {
     this.#capturedLeft = false;
     if (this.#storageKey) this.#restore();
   }
-  /** Drops the pending coalesced save, if one is queued. */
-  #cancelFrame() {
-    if (this.#rafId !== null) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = null;
-    }
-  }
   /**
    * Records the live scroll offset for the configured axis.
    *
@@ -19870,6 +19998,20 @@ var ScrollRestoreController = class extends Controller {
     return this.axisValue === "horizontal" || this.axisValue === "both";
   }
 };
+
+// src/utils/scroll_source.ts
+function resolveScrollContainer(selector) {
+  const match = selector ? document.querySelector(selector) : null;
+  return match instanceof HTMLElement ? match : null;
+}
+function resolveScrollSource(selector) {
+  return resolveScrollContainer(selector) ?? window;
+}
+function scrollOffset(source) {
+  return source === window ? window.scrollY ?? window.pageYOffset ?? 0 : source.scrollTop;
+}
+
+// src/controllers/scroll_visibility_controller.ts
 var DEFAULT_OFFSET = 400;
 var ScrollVisibilityController = class extends Controller {
   static targets = ["element"];
@@ -19881,8 +20023,8 @@ var ScrollVisibilityController = class extends Controller {
   };
   static actions = ["toTop"];
   static events = ["change"];
-  /** Pending rAF id that coalesces scroll bursts into one measurement. */
-  #rafId = null;
+  /** Coalesces scroll bursts into one measurement per frame. */
+  #frames = new FrameCoalescer();
   /** Previous scroll position, for `direction` mode delta detection. */
   #lastScrollY = 0;
   /** Current visibility, tracked to dispatch `change` only on real transitions. */
@@ -19918,16 +20060,10 @@ var ScrollVisibilityController = class extends Controller {
   #pendingHide = new BlurDeferral(() => {
     if (this.#connected) this.#evaluate();
   });
-  #onScroll = () => {
-    if (this.#rafId !== null) return;
-    this.#rafId = requestAnimationFrame(() => {
-      this.#rafId = null;
-      this.#evaluate();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#evaluate());
   connect() {
-    this.#scrollSource = this.#resolveScrollSource();
-    this.#lastScrollY = this.#scrollY();
+    this.#scrollSource = resolveScrollSource(this.#rootSelector);
+    this.#lastScrollY = scrollOffset(this.#scrollSource);
     this.#scrollSource.addEventListener("scroll", this.#onScroll, { passive: true });
     this.#evaluate(false);
     this.#connected = true;
@@ -19935,10 +20071,7 @@ var ScrollVisibilityController = class extends Controller {
   disconnect() {
     this.#connected = false;
     this.#scrollSource.removeEventListener("scroll", this.#onScroll);
-    if (this.#rafId !== null) {
-      cancelAnimationFrame(this.#rafId);
-      this.#rafId = null;
-    }
+    this.#frames.cancel();
     this.#pendingHide.releaseAll();
     this.#tabindex.returnAll();
     this.#visible = null;
@@ -19997,7 +20130,7 @@ var ScrollVisibilityController = class extends Controller {
    * @stimeoRenderRoot
    */
   #evaluate(notify = true) {
-    const y = this.#scrollY();
+    const y = scrollOffset(this.#scrollSource);
     let nextVisible;
     if (this.modeValue === "direction") {
       if (y <= this.#offset) {
@@ -20027,13 +20160,6 @@ var ScrollVisibilityController = class extends Controller {
     if (notify) this.dispatch("change", { detail: { visible: next } });
   }
   /** Resolves the scroll source from `root` (falling back to the window). */
-  #resolveScrollSource() {
-    if (this.#rootSelector) {
-      const root = document.querySelector(this.#rootSelector);
-      if (root) return root;
-    }
-    return window;
-  }
   /**
    * The focus owner inside the target, or `null` when focus is elsewhere.
    *
@@ -20046,12 +20172,6 @@ var ScrollVisibilityController = class extends Controller {
     if (focused instanceof HTMLElement && this.elementTarget.contains(focused)) return focused;
     return null;
   }
-  #scrollY() {
-    if (this.#scrollSource === window) {
-      return window.scrollY ?? window.pageYOffset ?? 0;
-    }
-    return this.#scrollSource.scrollTop;
-  }
 };
 var ANCHOR_ATTRIBUTES = ["href", "data-href"];
 var ScrollspyController = class extends Controller {
@@ -20098,8 +20218,10 @@ var ScrollspyController = class extends Controller {
    * rather than from whatever the selector resolves to now.
    */
   #scrollSource = null;
-  /** Pending re-evaluation frame; coalesces a scroll burst into one measurement. */
-  #frame = null;
+  /** Coalesces a scroll burst into one measurement per frame. */
+  #frames = new FrameCoalescer();
+  /** The validated `rootSelector`, or `""` when the declaration cannot be parsed. */
+  #rootSelector = "";
   /** Watches the link targets' anchor attributes for an in-place morph rewrite. */
   #anchorObserver = null;
   /** True while a coalesced observation rebuild is queued; see {@link #scheduleResync}. */
@@ -20116,10 +20238,7 @@ var ScrollspyController = class extends Controller {
     this.#anchorObserver?.disconnect();
     this.#anchorObserver = null;
     this.#detachScrollListener();
-    if (this.#frame !== null) {
-      cancelAnimationFrame(this.#frame);
-      this.#frame = null;
-    }
+    this.#frames.cancel();
     this.#intersectionStates.clear();
     this.#activeSectionId = "";
     this.#rootElement = null;
@@ -20136,6 +20255,7 @@ var ScrollspyController = class extends Controller {
     this.#initializeObserver();
   }
   rootSelectorValueChanged() {
+    this.#rootSelector = validSelector(this.element, this.rootSelectorValue, "");
     if (!this.#isConnected) return;
     this.#initializeObserver();
   }
@@ -20229,10 +20349,10 @@ var ScrollspyController = class extends Controller {
     const offset = this.#offset;
     if (rootElement) {
       const containerRect = rootElement.getBoundingClientRect();
-      const scrollPosition = rootElement.scrollTop + (targetRect.top - containerRect.top) - offset;
+      const scrollPosition = scrollOffset(rootElement) + (targetRect.top - containerRect.top) - offset;
       rootElement.scrollTo({ top: scrollPosition, behavior });
     } else {
-      const scrollPosition = window.scrollY + targetRect.top - offset;
+      const scrollPosition = scrollOffset(window) + targetRect.top - offset;
       window.scrollTo({ top: scrollPosition, behavior });
     }
     if (this.focusSectionValue) this.#focusSection(targetElement);
@@ -20267,19 +20387,14 @@ var ScrollspyController = class extends Controller {
   /**
    * Resolves `rootSelector` to a scrollable element.
    *
-   * @returns The container, or `null` meaning "spy the viewport" when the value
-   * is empty, matches nothing, matches a non-HTML element (an SVG node is not a
-   * scroll container), or is not a valid selector — a typo in a data attribute
-   * must degrade to viewport spying, not leave the controller inert.
+   * @returns The container, or `null` meaning "spy the viewport" when the
+   * declaration is empty, matches nothing, or matches a non-HTML element. A typo
+   * reads as empty: the declaration is validated once when it changes, so a
+   * selector that cannot be parsed degrades to viewport spying rather than
+   * leaving the controller inert.
    */
   #queryRootElement() {
-    if (!this.rootSelectorValue) return null;
-    try {
-      const root = document.querySelector(this.rootSelectorValue);
-      return root instanceof HTMLElement ? root : null;
-    } catch {
-      return null;
-    }
+    return resolveScrollContainer(this.#rootSelector);
   }
   /**
    * Re-evaluates once per frame while the reader scrolls.
@@ -20294,13 +20409,7 @@ var ScrollspyController = class extends Controller {
    * end in {@link #evaluateActiveSection} — which measures section rects and the
    * root's top edge at that instant — they converge on the same answer.
    */
-  #onScroll = () => {
-    if (this.#frame !== null) return;
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
-      this.#evaluateActiveSection();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#evaluateActiveSection());
   /**
    * Points the `scroll` listener at whatever the reader actually scrolls: the
    * resolved root, or the window when the viewport is spied.
@@ -21198,7 +21307,8 @@ var SmartStickyHeaderController = class extends Controller {
   };
   static events = ["change"];
   #connected = false;
-  #frame = null;
+  /** Coalesces scroll bursts into one measurement per frame. */
+  #frames = new FrameCoalescer();
   /** The scroll source resolved at connect — disconnect must unbind the SAME node. */
   #scrollerEl = window;
   /** The validated `containerSelector`, or `""` when the declaration cannot be parsed. */
@@ -21215,13 +21325,7 @@ var SmartStickyHeaderController = class extends Controller {
   get #offset() {
     return Number.isFinite(this.offsetValue) ? this.offsetValue : DEFAULT_OFFSET2;
   }
-  #onScroll = () => {
-    if (this.#frame !== null) return;
-    this.#frame = requestAnimationFrame(() => {
-      this.#frame = null;
-      this.#measure();
-    });
-  };
+  #onScroll = () => this.#frames.schedule(() => this.#measure());
   /**
    * Focus inside a hidden header must reveal it (WCAG 2.4.7 / 2.4.11); the
    * hold while focus *stays* inside is the `#apply` hide invariant.
@@ -21237,8 +21341,8 @@ var SmartStickyHeaderController = class extends Controller {
   }
   connect() {
     this.#hidden = null;
-    this.#scrollerEl = this.#resolveScroller();
-    this.#lastY = this.#scrollY;
+    this.#scrollerEl = resolveScrollSource(this.#containerSelector);
+    this.#lastY = scrollOffset(this.#scrollerEl);
     this.#scrollerEl.addEventListener("scroll", this.#onScroll, { passive: true });
     this.element.addEventListener("focusin", this.#onFocusin);
     this.#apply(false, false);
@@ -21248,23 +21352,10 @@ var SmartStickyHeaderController = class extends Controller {
     this.#connected = false;
     this.#scrollerEl.removeEventListener("scroll", this.#onScroll);
     this.element.removeEventListener("focusin", this.#onFocusin);
-    if (this.#frame !== null) cancelAnimationFrame(this.#frame);
-    this.#frame = null;
-  }
-  /** Resolves the scroll source: the `containerSelector` match, else the window. */
-  #resolveScroller() {
-    if (this.#containerSelector) {
-      const container = document.querySelector(this.#containerSelector);
-      if (container) return container;
-    }
-    return window;
-  }
-  get #scrollY() {
-    const scroller = this.#scrollerEl;
-    return scroller === window ? window.scrollY : scroller.scrollTop;
+    this.#frames.cancel();
   }
   #measure() {
-    const y = this.#scrollY;
+    const y = scrollOffset(this.#scrollerEl);
     if (y <= this.#offset) {
       this.#lastY = y;
       this.#apply(false);
@@ -22235,6 +22326,7 @@ var SubmitOnceController = class extends Controller {
   static events = ["start", "end", "reconcile"];
   #timers = new SafeTimeout();
   #gate = new DetachGate();
+  #listeners = new ListenerSet();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #sessions = /* @__PURE__ */ new Map();
   #disabled = new AttributeLease("disabled");
@@ -22259,14 +22351,12 @@ var SubmitOnceController = class extends Controller {
   connect() {
     this.#gate.cancel();
     this.#beforeCache.activate();
-    this.element.addEventListener("submit", this.#onNativeSubmit, true);
-    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.add(this.element, "submit", this.#onNativeSubmit, { capture: true });
+    this.#listeners.add(this.element, "turbo:submit-start", this.#onSubmitStart);
+    this.#listeners.add(this.element, "turbo:submit-end", this.#onSubmitEnd);
   }
   disconnect() {
-    this.element.removeEventListener("submit", this.#onNativeSubmit, true);
-    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.dispose();
     this.#beforeCache.deactivate();
     this.#gate.disconnected(this, () => this.#teardown());
   }
@@ -23693,30 +23783,23 @@ var ToastController = class extends Controller {
   };
   static actions = ["dismiss", "onKeydown", "pause", "resume", "show"];
   static events = ["dismiss", "show"];
-  /**
-   * Registry for every auto-dismiss and transition-finalize timer the controller
-   * schedules. `SafeTimeout` owns *registration and teardown only*; the
-   * pause/resume remaining-time accounting stays in `#activeTimeouts` so the
-   * per-widget WCAG 2.2.1 semantics are not flattened into the helper.
-   */
+  /** Removal timers for the leaving transition; the auto-dismiss ones live below. */
   #timers = new SafeTimeout();
+  /** Per-toast auto-dismiss, held open while the toast is hovered or focused. */
+  #dismiss = new PausableTimers();
   /**
    * Pending one-shot `requestAnimationFrame` handles (the entering→visible flip).
    * Tracked so {@link disconnect} can cancel any that have not fired, preventing a
    * detached element from being mutated after it leaves the DOM (Turbo).
    */
   #rafHandles = /* @__PURE__ */ new Map();
-  /** Track active timeouts mapped by each toast element for safe cancellation. */
-  #activeTimeouts = /* @__PURE__ */ new Map();
-  /** Track active pause reasons (hover/focus) per toast for WCAG 2.2.1 pause/resume. */
-  #pauseReasons = /* @__PURE__ */ new Map();
   /** The stable list that owns delegated listeners for dynamically added items. */
   #delegatedList = null;
   connect() {
     this.#connectDelegatedEvents();
     this.enforceMaxLimit();
     for (const item of this.itemTargets) {
-      if (!this.#activeTimeouts.has(item) && item.dataset.state !== "leaving") {
+      if (!this.#dismiss.tracks(item) && item.dataset.state !== "leaving") {
         this.#startTimer(item);
       }
     }
@@ -23724,12 +23807,11 @@ var ToastController = class extends Controller {
   disconnect() {
     this.#disconnectDelegatedEvents();
     this.#timers.clearAll();
+    this.#dismiss.clearAll();
     for (const handle of this.#rafHandles.values()) {
       window.cancelAnimationFrame(handle);
     }
     this.#rafHandles.clear();
-    this.#activeTimeouts.clear();
-    this.#pauseReasons.clear();
   }
   /** Rebinds delegated interaction when Turbo replaces the list target in place. */
   listTargetConnected(element) {
@@ -23742,18 +23824,9 @@ var ToastController = class extends Controller {
   durationValueChanged() {
     for (const item of this.itemTargets) {
       if (item.dataset.state === "leaving") continue;
-      const pauseReasons = this.#pauseReasons.get(item);
-      this.#clearTimer(item);
       if (this.durationValue <= 0) {
+        this.#dismiss.clear(item);
         item.removeAttribute("data-paused");
-      } else if (pauseReasons && pauseReasons.size > 0) {
-        this.#pauseReasons.set(item, pauseReasons);
-        this.#activeTimeouts.set(item, {
-          id: 0,
-          startedAt: 0,
-          remaining: this.durationValue
-        });
-        item.setAttribute("data-paused", "true");
       } else {
         this.#startTimer(item);
       }
@@ -23782,7 +23855,7 @@ var ToastController = class extends Controller {
   }
   /** Clears any active timer when a toast is removed from the DOM. */
   itemTargetDisconnected(element) {
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
   }
   /**
@@ -23854,35 +23927,16 @@ var ToastController = class extends Controller {
    */
   pause(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    const reasons = this.#pauseReasonsFor(item);
-    const wasActive = reasons.size > 0;
-    reasons.add(this.#pauseReason(event));
-    if (wasActive || timeout.id === 0) return;
-    this.#timers.clear(timeout.id);
-    const elapsed = Date.now() - timeout.startedAt;
-    const remaining = Math.max(0, timeout.remaining - elapsed);
-    if (remaining <= 0) {
-      this.#removeWithTransition(item, "timeout");
-      return;
+    if (item && this.#dismiss.pause(item, this.#pauseReason(event))) {
+      item.setAttribute("data-paused", "true");
     }
-    this.#activeTimeouts.set(item, { id: 0, startedAt: 0, remaining });
-    item.setAttribute("data-paused", "true");
   }
   /** Resumes the auto-dismiss timer once both hover and focus have been released. */
   resume(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const reasons = this.#pauseReasonsFor(item);
-    reasons.delete(this.#pauseReason(event));
-    if (reasons.size > 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    if (timeout.id !== 0 || timeout.remaining <= 0) return;
-    item.removeAttribute("data-paused");
-    this.#startTimer(item, timeout.remaining);
+    if (item && this.#dismiss.resume(item, this.#pauseReason(event))) {
+      item.removeAttribute("data-paused");
+    }
   }
   /** Resolves the toast item element a pause/resume event targets. */
   #itemFromEvent(event) {
@@ -23895,36 +23949,20 @@ var ToastController = class extends Controller {
   #pauseReason(event) {
     return event.type === "focusin" || event.type === "focusout" ? "focus" : "hover";
   }
-  /** Lazily creates and returns the active pause-reason set for an item. */
-  #pauseReasonsFor(item) {
-    let reasons = this.#pauseReasons.get(item);
-    if (!reasons) {
-      reasons = /* @__PURE__ */ new Set();
-      this.#pauseReasons.set(item, reasons);
-    }
-    return reasons;
-  }
-  #startTimer(element, duration = this.durationValue) {
-    if (duration <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
+  /** Arms a toast's auto-dismiss; a non-positive `duration` means it never expires. */
+  #startTimer(element) {
+    if (this.durationValue <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
       return;
     }
-    this.#clearTimer(element);
-    const id = this.#timers.set(() => {
-      this.#removeWithTransition(element, "timeout");
-    }, duration);
-    this.#activeTimeouts.set(element, { id, startedAt: Date.now(), remaining: duration });
-  }
-  #clearTimer(element) {
-    const timeout = this.#activeTimeouts.get(element);
-    if (timeout) {
-      if (timeout.id) this.#timers.clear(timeout.id);
-      this.#activeTimeouts.delete(element);
-    }
-    this.#pauseReasons.delete(element);
+    this.#dismiss.set(
+      element,
+      () => this.#removeWithTransition(element, "timeout"),
+      this.durationValue
+    );
   }
   #removeWithTransition(element, reason) {
     if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
     element.setAttribute("data-state", "leaving");
     const finalize = () => {