stimeo-ui 0.6.0 → 0.7.0

package/dist/index.js

@@ -229,8 +229,90 @@ var EscapeLayer = class _EscapeLayer {
   }
 };
 
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+var TAB_STOP_CANDIDATE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "iframe",
+  "audio[controls]",
+  "video[controls]",
+  "[tabindex]",
+  "[contenteditable]"
+].join(",");
+function isRenderedForFocus(element) {
+  const check = element.checkVisibility;
+  return typeof check === "function" ? check.call(element, { visibilityProperty: true }) : true;
+}
+function authoredTabindex(element) {
+  const value = element.getAttribute("tabindex");
+  if (value === null || !/^[+-]?\d+$/.test(value.trim())) return null;
+  return Number(value);
+}
+function hasNativeTabStop(element) {
+  if (element instanceof HTMLAnchorElement || element instanceof HTMLAreaElement) {
+    return element.hasAttribute("href");
+  }
+  if (element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (element instanceof HTMLInputElement) return element.type !== "hidden";
+  if (element instanceof HTMLIFrameElement) return true;
+  if (element.tagName === "AUDIO" || element.tagName === "VIDEO") {
+    return element.hasAttribute("controls");
+  }
+  if (element instanceof HTMLElement && element.tagName === "SUMMARY") {
+    const details = element.parentElement;
+    return details instanceof HTMLDetailsElement && Array.from(details.children).find((child) => child.tagName === "SUMMARY") === element;
+  }
+  return false;
+}
+function hasEditableTabStop(element) {
+  const value = element.getAttribute("contenteditable")?.toLowerCase();
+  return value === "" || value === "true" || value === "plaintext-only";
+}
+function isTabStop(element) {
+  if (!canTakeFocus(element) || !isRenderedForFocus(element)) return false;
+  const tabindex = authoredTabindex(element);
+  if (tabindex !== null) return tabindex >= 0;
+  return hasNativeTabStop(element) || hasEditableTabStop(element);
+}
+function tabStopsWithin(root) {
+  return Array.from(root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)).filter(
+    isTabStop
+  );
+}
+function firstTabStop(root) {
+  for (const candidate of root.querySelectorAll(TAB_STOP_CANDIDATE_SELECTOR)) {
+    if (isTabStop(candidate)) return candidate;
+  }
+  return null;
+}
+function hasTabStop(root) {
+  return firstTabStop(root) !== null;
+}
+
 // src/utils/focus_trap.ts
-var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
   /** The element focused before activation, restored on deactivation. */
   #previouslyFocused = null;
@@ -392,9 +474,7 @@ var FocusTrap = class {
   }
   /** Collects the container's currently focusable descendants in DOM order. */
   #focusableElements() {
-    return Array.from(this.#getContainer().querySelectorAll(FOCUSABLE)).filter(
-      (el) => !el.hidden
-    );
+    return tabStopsWithin(this.#getContainer());
   }
 };
 
@@ -1029,17 +1109,21 @@ var AttributeLease = class {
         written: value
       });
     }
-    if (value === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, value);
+    this.#reflect(element, value);
   }
   /** Returns one lease without overwriting a value subsequently authored by a consumer. */
   return(element) {
     const record = this.#records.get(element);
     if (!record) return;
     this.#records.delete(element);
-    if (element.getAttribute(this.#attribute) !== record.written) return;
-    if (record.original === null) element.removeAttribute(this.#attribute);
-    else element.setAttribute(this.#attribute, record.original);
+    const stillOwned = element.getAttribute(this.#attribute) === record.written;
+    if (stillOwned) this.#reflect(element, record.original);
+  }
+  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
+  #reflect(element, value) {
+    if (element.getAttribute(this.#attribute) === value) return;
+    if (value === null) element.removeAttribute(this.#attribute);
+    else element.setAttribute(this.#attribute, value);
   }
   /** Returns every outstanding lease using the same ownership check as {@link return}. */
   returnAll() {
@@ -1056,6 +1140,7 @@ var AvatarController = class extends Controller {
   /** Collapses one morph's Value, target, and direct-attribute signals into one pass. */
   #reconcile = new MicrotaskCoalescer(() => this.#render());
   /** Preserves directly-authored source and visibility while targets are controlled. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #src = new AttributeLease("src");
   #imageHidden = new AttributeLease("hidden");
   #fallbackHidden = new AttributeLease("hidden");
@@ -1071,6 +1156,7 @@ var AvatarController = class extends Controller {
   connect() {
     this.#connected = true;
     this.#reconcile.activate();
+    this.#beforeCache.activate();
     this.#srcObserver.observe(this.element, {
       attributes: true,
       attributeFilter: ["src"],
@@ -1082,6 +1168,7 @@ var AvatarController = class extends Controller {
   disconnect() {
     this.#connected = false;
     this.#reconcile.cancel();
+    this.#beforeCache.deactivate();
     this.#srcObserver.disconnect();
   }
   /** Repaints when application code or a Turbo morph changes the source Value. */
@@ -1189,6 +1276,12 @@ var AvatarController = class extends Controller {
     }
     this.element.setAttribute("data-state", state);
   }
+  /** Returns borrowed image and fallback semantics before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#src.returnAll();
+    this.#imageHidden.returnAll();
+    this.#fallbackHidden.returnAll();
+  }
 };
 
 // src/utils/blur_deferral.ts
@@ -2295,110 +2388,284 @@ var CarouselController = class extends Controller {
     }
   }
 };
-var ORIGINAL_INVALID = "data-character-counter-original-invalid";
+
+// 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/character_counter_controller.ts
 var CharacterCounterController = class _CharacterCounterController extends Controller {
   static targets = ["input", "output"];
   static values = {
     max: { type: Number, default: 0 },
     warnAt: { type: Number, default: 0 },
-    mode: { type: String, default: "remaining" }
+    mode: { type: String, default: "remaining" },
+    announceText: { type: String, default: "" }
   };
-  static events = ["change"];
-  /** Delay (ms) before the live-region count is written, to throttle SR flooding. */
+  static events = ["change", "reconcile"];
+  /** Delay (ms) before one settled count is sent to the shared announcer. */
   static #announceDelay = 200;
   #timeouts = new SafeTimeout();
+  #ariaInvalid = new AttributeLease("aria-invalid");
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #repaint = new MicrotaskCoalescer(() => this.#reconcile(true));
+  #composition = new CompositionTracker({
+    onEnd: (event) => this.#commitFrom(event.currentTarget)
+  });
   #announceId = null;
-  /** Owns IME lifecycle state and applies the confirmed count once. */
-  #composition = new CompositionTracker({ onEnd: () => this.#update() });
+  #boundField = null;
+  #lastLength = null;
+  #lastDetail = null;
+  #reflectedOver = null;
   #onInput = (event) => {
+    const field = this.#boundField;
+    if (!field || event.currentTarget !== field || this.#field !== field) return;
     if (this.#composition.isComposing(event)) return;
-    this.#update();
+    this.#commit(field);
   };
+  /** Reflects the current DOM state and opens the mutation-reconciliation window. */
   connect() {
-    const field = this.#field;
-    if (!field) return;
-    field.addEventListener("input", this.#onInput);
-    this.#composition.observe(field);
-    this.#update({ announce: false });
+    this.#repaint.activate();
+    this.#beforeCache.activate();
+    this.#reconcile(false);
   }
+  /** Releases listeners, timers, borrowed ARIA, and controller-owned state hooks. */
   disconnect() {
-    const field = this.#field;
-    field?.removeEventListener("input", this.#onInput);
+    this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#cancelAnnouncement();
+    this.#bindField(null);
     this.#composition.disconnect();
-    this.#timeouts.clearAll();
-    this.#announceId = null;
+    this.#clearStateHooks();
+    this.#lastLength = null;
+    this.#lastDetail = null;
+  }
+  /** Rebinds and repaints after an input target is added or replaced at runtime. */
+  inputTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Releases and repaints after an input target is removed or replaced at runtime. */
+  inputTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Initializes a display target inserted after the controller connected. */
+  outputTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Reconciles the optional display target set after a removal or replacement. */
+  outputTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `max`. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `warnAt`. */
+  warnAtValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `mode`. */
+  modeValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Cancels a pending old message when its consumer-authored template changes. */
+  announceTextValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Rebinds one mutation batch and reports a changed controller-derived state. */
+  #reconcile(report) {
+    const previous = this.#lastDetail;
+    const owedField = this.#announceId === null ? null : this.#boundField;
+    this.#cancelAnnouncement();
+    this.#bindField(this.#field);
+    if (this.#composition.isComposing()) return;
+    const field = this.#boundField;
+    if (!field) {
+      this.#renderEmpty();
+      this.#lastLength = null;
+      this.#lastDetail = null;
+      return;
+    }
+    const reading = this.#render(field);
+    const detail = this.#detail(reading);
+    this.#lastLength = reading.length;
+    this.#lastDetail = detail;
+    if (owedField === field) this.#scheduleAnnouncement(reading);
+    if (report && previous && this.#detailsDiffer(previous, detail)) {
+      this.dispatch("reconcile", { detail });
+    }
+  }
+  /** Commits a composition only when it came from the field still owned here. */
+  #commitFrom(target) {
+    const field = this.#boundField;
+    if (!field || target !== field || this.#field !== field) return;
+    this.#commit(field);
+  }
+  /** Reflects one confirmed user input and reports only a real length transition. */
+  #commit(field) {
+    const reading = this.#render(field);
+    const previousLength = this.#lastLength;
+    const previousDetail = this.#lastDetail;
+    const detail = this.#detail(reading);
+    this.#lastLength = reading.length;
+    this.#lastDetail = detail;
+    if (previousLength === reading.length) {
+      if (previousDetail && this.#detailsDiffer(previousDetail, detail)) {
+        this.dispatch("reconcile", { detail });
+      }
+      return;
+    }
+    this.dispatch("change", { detail });
+    this.#scheduleAnnouncement(reading);
+  }
+  /** Selects the public event state from the richer internal reading. */
+  #detail(reading) {
+    return {
+      length: reading.length,
+      remaining: reading.remaining,
+      over: reading.over
+    };
+  }
+  /** Compares exactly the state carried by `change` and `reconcile`. */
+  #detailsDiffer(left, right) {
+    return left.length !== right.length || left.remaining !== right.remaining || left.over !== right.over;
   }
   /**
-   * Recomputes length-derived state. Non-text state (data hooks, `aria-invalid`)
-   * and the `change` event apply immediately; the live-region count text is
-   * debounced unless `announce` is `false` (initial render).
+   * Synchronizes visible count, state hooks, and temporary validation ARIA.
+   *
+   * @stimeoRenderRoot
    */
-  #update(options = {}) {
-    const field = this.#field;
-    if (!field) return;
+  #render(field) {
     const length = field.value.length;
-    const hasLimit = this.maxValue > 0;
-    const remaining = hasLimit ? this.maxValue - length : null;
-    const over = hasLimit && length > this.maxValue;
-    const near = hasLimit && this.warnAtValue > 0 && !over && remaining !== null && remaining <= this.warnAtValue;
+    const max = this.#normalizeCount(this.maxValue);
+    const warnAt = this.#normalizeCount(this.warnAtValue);
+    const remaining = max > 0 ? max - length : null;
+    const over = remaining !== null && remaining < 0;
+    const near = remaining !== null && warnAt > 0 && !over && remaining <= warnAt;
     this.#toggle("data-over-limit", over);
     this.#toggle("data-near-limit", near);
-    if (hasLimit && over) {
-      if (!field.hasAttribute(ORIGINAL_INVALID)) {
-        field.setAttribute(ORIGINAL_INVALID, field.getAttribute("aria-invalid") ?? "");
-      }
-      field.setAttribute("aria-invalid", "true");
-    } else if (field.hasAttribute(ORIGINAL_INVALID)) {
-      const original = field.getAttribute(ORIGINAL_INVALID);
-      if (original) {
-        field.setAttribute("aria-invalid", original);
-      } else {
-        field.removeAttribute("aria-invalid");
-      }
-      field.removeAttribute(ORIGINAL_INVALID);
-    }
-    const text = this.#format(length, remaining);
-    if (options.announce === false) {
-      this.#writeOutput(text);
-      return;
-    }
-    this.dispatch("change", { detail: { length, remaining, over } });
-    if (this.#announceId !== null) this.#timeouts.clear(this.#announceId);
-    this.#announceId = this.#timeouts.set(() => {
-      this.#writeOutput(text);
-      this.#announceId = null;
-    }, _CharacterCounterController.#announceDelay);
+    this.#reflectInvalid(field, over);
+    const text = this.#format(length, remaining, max);
+    this.#writeOutput(text);
+    return { length, remaining, over, max, text };
+  }
+  /** Clears derived output when the declarative input set has no usable field. */
+  #renderEmpty() {
+    this.#ariaInvalid.returnAll();
+    this.#reflectedOver = null;
+    this.#clearStateHooks();
+    this.#writeOutput("");
+  }
+  /** Replaces the observed field symmetrically, returning state from the old one. */
+  #bindField(field) {
+    if (field === this.#boundField) return;
+    const previous = this.#boundField;
+    if (previous) {
+      previous.removeEventListener("input", this.#onInput);
+      this.#composition.unobserve(previous);
+      this.#ariaInvalid.return(previous);
+    }
+    this.#boundField = field;
+    this.#lastLength = null;
+    this.#reflectedOver = null;
+    if (!field) return;
+    field.addEventListener("input", this.#onInput);
+    this.#composition.observe(field);
+  }
+  /** Leases `aria-invalid` only on the edge into over-limit, then returns it. */
+  #reflectInvalid(field, over) {
+    if (this.#reflectedOver === over) return;
+    this.#reflectedOver = over;
+    if (over) this.#ariaInvalid.write(field, "true");
+    else this.#ariaInvalid.return(field);
   }
-  /** Builds the count text for the active `mode`. */
-  #format(length, remaining) {
+  /** Builds the visible count for the normalized display mode. */
+  #format(length, remaining, max) {
     if (remaining === null) return String(length);
-    switch (this.modeValue) {
+    switch (this.#mode) {
       case "used":
         return String(length);
       case "both":
-        return `${length}/${this.maxValue}`;
+        return `${length}/${max}`;
       default:
         return String(remaining);
     }
   }
+  /** Debounces one i18n-neutral message into the shared polite announcer. */
+  #scheduleAnnouncement(reading) {
+    this.#cancelAnnouncement();
+    const message = fillTemplate(this.announceTextValue, {
+      count: reading.text,
+      length: reading.length,
+      remaining: reading.remaining ?? "",
+      max: reading.max,
+      over: String(reading.over)
+    });
+    if (message.trim().length === 0) return;
+    this.#announceId = this.#timeouts.set(() => {
+      announce(message);
+      this.#announceId = null;
+    }, _CharacterCounterController.#announceDelay);
+  }
+  /** Cancels the one outstanding announcement without touching visible output. */
+  #cancelAnnouncement() {
+    if (this.#announceId !== null) this.#timeouts.clear(this.#announceId);
+    this.#announceId = null;
+  }
+  /** Writes the optional display only when its text actually changed. */
   #writeOutput(text) {
-    if (this.hasOutputTarget) this.outputTarget.textContent = text;
+    if (!this.hasOutputTarget || this.outputTarget.textContent === text) return;
+    this.outputTarget.textContent = text;
   }
-  /** Sets a presence-style boolean data hook (attribute present when `on`). */
+  /** Reflects a presence-style state hook without redundant attribute writes. */
   #toggle(name, on) {
     if (on) {
-      this.element.setAttribute(name, "true");
-    } else {
+      if (this.element.getAttribute(name) !== "true") this.element.setAttribute(name, "true");
+    } else if (this.element.hasAttribute(name)) {
       this.element.removeAttribute(name);
     }
   }
-  /** The watched field: the `input` target, or the element itself when it is one. */
+  /** Removes both state hooks owned by this controller. */
+  #clearStateHooks() {
+    this.#toggle("data-over-limit", false);
+    this.#toggle("data-near-limit", false);
+  }
+  /** Returns borrowed ARIA and transient hooks before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#cancelAnnouncement();
+    this.#ariaInvalid.returnAll();
+    this.#reflectedOver = null;
+    this.#clearStateHooks();
+  }
+  /** Converts a public count Value into a finite non-negative integer. */
+  #normalizeCount(raw) {
+    if (!Number.isFinite(raw)) return 0;
+    return Math.max(0, Math.trunc(raw));
+  }
+  /** Falls back to `remaining` when an authored display mode is unknown. */
+  get #mode() {
+    if (this.modeValue === "used" || this.modeValue === "both") return this.modeValue;
+    return "remaining";
+  }
+  /** The watched field: the first target, or a directly controlled form field. */
   get #field() {
     if (this.hasInputTarget) return this.inputTarget;
-    const el = this.element;
-    if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-      return el;
-    }
+    const element = this.element;
+    if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)
+      return element;
     return null;
   }
 };
@@ -3900,7 +4167,54 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     }
   }
 };
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /** Returns live loans before Turbo can copy them into its page snapshot. */
+  #beforeCache = new BeforeCacheReset(() => this.returnAll());
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+    this.#beforeCache.activate();
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+    this.#beforeCache.deactivate();
+  }
+};
+
+// src/controllers/conditional_fields_controller.ts
 var DISABLED_MARKER = "data-conditional-disabled";
+var OBSERVED_ATTRIBUTES = [
+  "hidden",
+  "aria-hidden",
+  "data-visible",
+  DISABLED_MARKER,
+  "disabled",
+  "data-when-checked",
+  "data-when-unchecked",
+  "data-when-value",
+  "checked",
+  "selected",
+  "value",
+  "type"
+];
 var ConditionalFieldsController = class extends Controller {
   static targets = ["trigger", "region"];
   static values = {
@@ -3908,56 +4222,171 @@ var ConditionalFieldsController = class extends Controller {
     match: { type: String, default: "any" }
   };
   static actions = ["evaluate"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
+  /** Logical state last committed for each current region; rebuilt on every connect. */
   #lastVisible = /* @__PURE__ */ new WeakMap();
-  #onChange = () => {
-    this.evaluate();
+  /** Controller writes awaiting an observer callback, separated from authored morphs. */
+  #internalWrites = /* @__PURE__ */ new WeakMap();
+  #observing = false;
+  /** Coalesces one target/morph/mutation batch into one full DOM reconciliation. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  /** 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. */
+  #observer = new MutationObserver((records) => this.#onMutations(records));
+  /** Evaluates only events whose source is one of this instance's live trigger targets. */
+  #onTriggerInput = (event) => {
+    const target = event.target;
+    const triggers = this.triggerTargets;
+    if (target instanceof Element && triggers.some((trigger) => trigger === target)) {
+      this.#commitChange(triggers);
+    }
+  };
+  /** Reconciles property-only retained-element changes after Turbo morphs. */
+  #onMorph = () => {
+    this.#reconcile.schedule();
+  };
+  /** Reconciles the settled defaults after a non-cancelled owning form reset. */
+  #onReset = (event) => {
+    const form = event.target;
+    if (form instanceof HTMLFormElement && this.#hasTriggerOwnedBy(form)) {
+      queueMicrotask(() => {
+        if (!event.defaultPrevented) this.#reconcile.schedule();
+      });
+    }
   };
+  /** Reflects initial live state and opens every retained-DOM reconciliation path. */
   connect() {
-    this.evaluate();
-    this.element.addEventListener("change", this.#onChange);
-    this.element.addEventListener("input", this.#onChange);
+    this.#lastVisible = /* @__PURE__ */ new WeakMap();
+    this.#internalWrites = /* @__PURE__ */ new WeakMap();
+    this.#reconcile.activate();
+    this.#settle();
+    this.#observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES,
+      childList: true,
+      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);
+    document.addEventListener("reset", this.#onReset, true);
   }
+  /** Releases all external resources and returns the temporary focus landmark loan. */
   disconnect() {
-    this.element.removeEventListener("change", this.#onChange);
-    this.element.removeEventListener("input", this.#onChange);
+    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);
+    document.removeEventListener("reset", this.#onReset, true);
+    this.#rootTabindex.returnAll();
+  }
+  /** Reconciles after a trigger target is inserted or restored. */
+  triggerTargetConnected() {
+    this.#reconcile.schedule();
   }
-  /** Re-evaluates every region against the current trigger state. */
+  /** Reconciles after a trigger target is removed or replaced. */
+  triggerTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Initializes a region target inserted or restored at runtime. */
+  regionTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles the remaining region set after a target leaves. */
+  regionTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles when application code or a morph changes the match policy. */
+  matchValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles control ownership when hidden controls become enabled or excluded. */
+  disableHiddenValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Re-evaluates every region and repairs all reflected DOM state. */
   evaluate() {
-    const triggers = this.triggerTargets;
-    for (const region of this.regionTargets) {
-      this.#applyRegion(region, this.#isVisible(region, triggers));
+    this.#commitChange();
+  }
+  /**
+   * Computes one settled plan, shows destinations before hiding sources, and then
+   * returns logical transitions in DOM order after every region is internally coherent.
+   */
+  #settle(triggers = this.triggerTargets) {
+    const regions = this.regionTargets;
+    const plan = /* @__PURE__ */ new Map();
+    for (const region of regions) plan.set(region, this.#isVisible(region, triggers));
+    const changed = /* @__PURE__ */ new Set();
+    const applicationOrder = [
+      ...regions.filter((region) => plan.get(region) === true),
+      ...regions.filter((region) => plan.get(region) === false)
+    ];
+    for (const region of applicationOrder) {
+      const visible = plan.get(region);
+      if (visible !== void 0 && this.#applyRegion(region, visible, plan)) {
+        changed.add(region);
+      }
+    }
+    return regions.filter((region) => changed.has(region)).map((region) => ({ region, visible: plan.get(region) === true }));
+  }
+  /** Reports logical transitions caused by user input or the public action. */
+  #commitChange(triggers = this.triggerTargets) {
+    for (const detail of this.#settle(triggers)) {
+      this.dispatch("change", { detail });
+    }
+  }
+  /** Reports logical transitions derived from DOM, lifecycle, reset, or Value state. */
+  #reconcileDom() {
+    for (const detail of this.#settle()) {
+      this.dispatch("reconcile", { detail });
     }
   }
-  /** Applies a region's visibility, syncing hidden/aria/disabled and emitting change. */
-  #applyRegion(region, visible) {
+  /** Applies one planned state while keeping event history separate from DOM repair. */
+  #applyRegion(region, visible, plan) {
     const previous = this.#lastVisible.get(region) ?? !region.hidden;
-    if (visible === previous && this.#lastVisible.has(region)) return;
+    const changed = visible !== previous;
     this.#lastVisible.set(region, visible);
-    if (visible) {
-      region.hidden = false;
-      region.removeAttribute("aria-hidden");
-      region.setAttribute("data-visible", "true");
-      this.#setRegionDisabled(region, false);
-    } else {
-      this.#retreatFocus(region);
-      region.hidden = true;
-      region.setAttribute("aria-hidden", "true");
-      region.removeAttribute("data-visible");
-      this.#setRegionDisabled(region, true);
-    }
-    if (visible !== previous) {
-      this.dispatch("change", { detail: { region, visible } });
+    if (!visible) this.#retreatFocus(region, plan);
+    this.#syncRegionState(region, visible);
+    this.#syncRegionControls(region, visible);
+    return changed;
+  }
+  /** Reflects visibility idempotently, recording writes so the observer ignores its own work. */
+  #syncRegionState(region, visible) {
+    this.#writeAttribute(region, "hidden", visible ? null : "");
+    this.#writeAttribute(region, "aria-hidden", visible ? null : "true");
+    this.#writeAttribute(region, "data-visible", visible ? "true" : null);
+  }
+  /** Enables/disables descendant controls, touching only state carrying our marker. */
+  #syncRegionControls(region, visible) {
+    const shouldDisable = !visible && this.disableHiddenValue;
+    const controls = region.querySelectorAll("input, textarea, select, button");
+    for (const control of controls) {
+      const marked = control.hasAttribute(DISABLED_MARKER);
+      if (shouldDisable) {
+        if (!control.disabled) {
+          this.#writeAttribute(control, "disabled", "");
+          this.#writeAttribute(control, DISABLED_MARKER, "true");
+        } else if (marked && control.getAttribute(DISABLED_MARKER) !== "true") {
+          this.#writeAttribute(control, DISABLED_MARKER, "true");
+        }
+      } else if (marked) {
+        this.#writeAttribute(control, "disabled", null);
+        this.#writeAttribute(control, DISABLED_MARKER, null);
+      }
     }
   }
   /** Whether a region's declared condition holds across `triggers` per `match`. */
   #isVisible(region, triggers) {
     const predicate = this.#predicateFor(region);
     if (predicate === null) return !region.hidden;
-    if (triggers.length === 0) return false;
-    return this.matchValue === "all" ? triggers.every(predicate) : triggers.some(predicate);
+    return triggers.length > 0 && (this.matchValue === "all" ? triggers.every(predicate) : triggers.some(predicate));
   }
-  /** Builds the per-trigger predicate from the region's `data-when-*` attribute. */
+  /** Builds the deterministic per-trigger predicate from the region's condition. */
   #predicateFor(region) {
     if (region.hasAttribute("data-when-checked")) {
       return (trigger) => this.#isChecked(trigger);
@@ -3974,36 +4403,88 @@ var ConditionalFieldsController = class extends Controller {
   #isChecked(trigger) {
     return trigger instanceof HTMLInputElement && trigger.checked;
   }
-  /** A trigger "has" a value: selected radio/checkbox value, or the control value. */
+  /** A trigger has a value when a radio/checkbox is selected, or its control value matches. */
   #matchesValue(trigger, wanted) {
     if (trigger instanceof HTMLInputElement && (trigger.type === "checkbox" || trigger.type === "radio")) {
       return trigger.checked && trigger.value === wanted;
     }
     return trigger.value === wanted;
   }
-  /** Enables/disables a region's inputs, tracking only the ones we disabled. */
-  #setRegionDisabled(region, disabled) {
-    if (!this.disableHiddenValue) return;
-    const controls = region.querySelectorAll("input, textarea, select, button");
-    for (const control of Array.from(controls)) {
-      if (disabled) {
-        if (!control.disabled) {
-          control.disabled = true;
-          control.setAttribute(DISABLED_MARKER, "true");
+  /** Moves focus to the first safe trigger, or to the controller landmark as a fallback. */
+  #retreatFocus(region, plan) {
+    const active = document.activeElement;
+    if (active && region.contains(active)) this.#moveFocus(plan);
+  }
+  /** Moves focus after the caller establishes that the active node is being hidden. */
+  #moveFocus(plan) {
+    const destination = this.triggerTargets.find(
+      (trigger) => canTakeFocus(trigger) && this.#survivesPlan(trigger, plan)
+    );
+    if (destination) {
+      this.#rootTabindex.returnAll();
+      destination.focus();
+      return;
+    }
+    this.#rootTabindex.lend(this.element);
+    this.element.focus();
+  }
+  /** Whether a focus candidate sits outside every region this pass will hide. */
+  #survivesPlan(candidate, plan) {
+    return [...plan].every(([region, visible]) => visible || !region.contains(candidate));
+  }
+  /** Records one idempotent attribute write before MutationObserver sees it. */
+  #writeAttribute(element, name, value) {
+    if (element.getAttribute(name) !== value) {
+      if (this.#observing) {
+        let writes = this.#internalWrites.get(element);
+        if (!writes) {
+          writes = /* @__PURE__ */ new Map();
+          this.#internalWrites.set(element, writes);
         }
-      } else if (control.hasAttribute(DISABLED_MARKER)) {
-        control.disabled = false;
-        control.removeAttribute(DISABLED_MARKER);
+        writes.set(name, value);
       }
+      if (value === null) element.removeAttribute(name);
+      else element.setAttribute(name, value);
     }
   }
-  /** Moves focus out of a region about to be hidden, to a trigger when possible. */
-  #retreatFocus(region) {
-    const active = document.activeElement;
-    if (!(active instanceof HTMLElement) || !region.contains(active)) return;
-    active.blur();
-    if (this.hasTriggerTarget) this.triggerTargets[0]?.focus();
-  }
+  /** Separates authored records from controller writes and queues one relevant repair. */
+  #onMutations(records) {
+    const triggers = this.triggerTargets;
+    const regions = this.regionTargets;
+    const touchedWrites = /* @__PURE__ */ new Map();
+    let needsReconcile = false;
+    for (const record of records) {
+      if (record.type === "attributes" && record.target instanceof Element) {
+        const name = record.attributeName;
+        const writes = this.#internalWrites.get(record.target);
+        if (name && writes?.has(name)) {
+          let names = touchedWrites.get(record.target);
+          if (!names) {
+            names = /* @__PURE__ */ new Set();
+            touchedWrites.set(record.target, names);
+          }
+          names.add(name);
+          if (record.target.getAttribute(name) === writes.get(name)) continue;
+        }
+      }
+      if (record.target instanceof Element && this.#elementAffectsState(record.target, triggers, regions)) {
+        needsReconcile = true;
+      }
+    }
+    for (const [element, names] of touchedWrites) {
+      const writes = this.#internalWrites.get(element);
+      for (const name of names) writes?.delete(name);
+    }
+    if (needsReconcile) this.#reconcile.schedule();
+  }
+  /** Whether an authored mutation target belongs to a trigger, region, or managed control. */
+  #elementAffectsState(target, triggers, regions) {
+    return triggers.some((trigger) => trigger === target || trigger.contains(target)) || regions.some((region) => region === target || region.contains(target));
+  }
+  /** Whether a form owns at least one current trigger, including `form=` associations. */
+  #hasTriggerOwnedBy(form) {
+    return this.triggerTargets.some((trigger) => trigger.form === form);
+  }
 };
 var ConfirmController = class extends Controller {
   static targets = ["dialog", "title", "message", "confirm", "cancel"];
@@ -4356,25 +4837,6 @@ var CountUpController = class extends Controller {
     this.element.removeAttribute("data-count-up-label");
   }
 };
-
-// src/utils/announce.ts
-function announce(message, options = {}) {
-  const text = message.trim();
-  if (text.length === 0) return;
-  window.dispatchEvent(
-    new CustomEvent("stimeo--announcer:announce", {
-      detail: { message: text, assertive: options.assertive === true }
-    })
-  );
-}
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
-}
-
-// src/controllers/countdown_controller.ts
 var SECOND_MS = 1e3;
 var CountdownController = class extends Controller {
   static targets = ["days", "hours", "minutes", "seconds", "status"];
@@ -5432,101 +5894,165 @@ var DialogController = class extends Controller {
 };
 var REMOVE_DELAY = 4e3;
 var DirectUploadController = class extends Controller {
-  static targets = ["list", "row", "status"];
+  static targets = ["list", "row"];
   static values = {
-    announce: { type: Boolean, default: true },
     removeOnDone: { type: Boolean, default: false },
-    doneLabel: { type: String, default: "" },
-    errorLabel: { type: String, default: "" },
+    announceDoneText: { type: String, default: "" },
+    announceErrorText: { type: String, default: "" },
     scope: { type: String, default: "" }
   };
   static events = ["progress", "done", "error"];
   #timeouts = new SafeTimeout();
   #rows = /* @__PURE__ */ new Map();
+  #beforeCache = new BeforeCacheReset(() => this.#reset());
+  /** The validated `scope` selector; a broken declaration falls back to `""`. */
+  #scopeSelector = "";
   #onInitialize = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#rowFor(detail.id, detail.file?.name ?? "");
+    this.#rowFor(detail.id, this.#name(detail));
   };
   #onProgress = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#updateProgress(this.#key(detail.id), Math.round(detail.progress ?? 0));
+    this.#updateProgress(this.#key(detail.id), detail.progress ?? 0, this.#name(detail));
   };
   #onError = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#fail(this.#key(detail.id), detail.error ?? "");
+    const rendered = this.#fail(this.#key(detail.id), detail.error ?? "", this.#name(detail));
+    if (rendered) event.preventDefault();
   };
   #onEnd = (event) => {
     if (!this.#inScope(event)) return;
     const detail = this.#detail(event);
-    this.#complete(this.#key(detail.id), detail.file?.name ?? "");
+    this.#complete(this.#key(detail.id), this.#name(detail));
   };
   connect() {
     document.addEventListener("direct-upload:initialize", this.#onInitialize);
     document.addEventListener("direct-upload:progress", this.#onProgress);
     document.addEventListener("direct-upload:error", this.#onError);
     document.addEventListener("direct-upload:end", this.#onEnd);
+    this.#beforeCache.activate();
+    this.#rescheduleRemovals();
   }
   disconnect() {
     document.removeEventListener("direct-upload:initialize", this.#onInitialize);
     document.removeEventListener("direct-upload:progress", this.#onProgress);
     document.removeEventListener("direct-upload:error", this.#onError);
     document.removeEventListener("direct-upload:end", this.#onEnd);
+    this.#beforeCache.deactivate();
     this.#timeouts.clearAll();
-    this.#rows.clear();
+  }
+  /** Validates `scope` once so the per-event path never parses or throws. */
+  scopeValueChanged() {
+    const selector = this.scopeValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#scopeSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#scopeSelector = "";
   }
   /** Updates a row's progress and the aggregate, emitting `progress`. */
-  #updateProgress(id, percent) {
-    const row = this.#rowFor(id);
-    if (row === null) return;
-    const clamped = Math.max(0, Math.min(100, percent));
-    row.setAttribute("aria-valuenow", String(clamped));
-    row.setAttribute("aria-valuetext", `${clamped}%`);
-    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
-    this.#setField(row, "percent", `${clamped}%`);
+  #updateProgress(id, percent, name) {
+    const row = this.#rowFor(id, name);
+    if (row === null || this.#isSettled(row)) return;
+    const clamped = this.#applyProgress(row, percent);
     this.#syncAggregate();
     this.dispatch("progress", { detail: { id, percent: clamped } });
   }
-  /** Marks a row done, announces it, and emits `done`. */
-  #complete(id, name = "") {
+  /** Marks a not-yet-settled row done at 100%, announces it, and emits `done`. */
+  #complete(id, name) {
     const row = this.#rowFor(id, name);
-    if (row === null) return;
+    if (row === null || this.#isSettled(row)) return;
     row.setAttribute("data-upload-state", "done");
-    this.#announce(this.doneLabelValue, row);
+    this.#applyProgress(row, 100);
+    this.#syncAggregate();
+    this.#announce(this.announceDoneTextValue, name, row);
     this.dispatch("done", { detail: { id } });
     if (this.removeOnDoneValue) {
       this.#timeouts.set(() => this.#removeRow(id), REMOVE_DELAY);
     }
   }
-  /** Marks a row failed, announces it, and emits `error`. */
-  #fail(id, error) {
-    const row = this.#rowFor(id);
-    if (row === null) return;
+  /**
+   * Marks a not-yet-settled row failed, announces it, and emits `error`.
+   * Returns whether the failure is rendered by this widget (used to decide the
+   * `direct-upload:error` default), which also holds when the row already
+   * displays an earlier failure.
+   */
+  #fail(id, error, name) {
+    const row = this.#rowFor(id, name);
+    if (row === null) return false;
+    if (this.#isSettled(row)) return row.getAttribute("data-upload-state") === "error";
     row.setAttribute("data-upload-state", "error");
-    this.#announce(this.errorLabelValue, row);
+    this.#announce(this.announceErrorTextValue, name, row);
     this.dispatch("error", { detail: { id, error } });
+    return true;
+  }
+  /** Whether the row reached a terminal state; settled rows are never rewritten. */
+  #isSettled(row) {
+    const state = row.getAttribute("data-upload-state");
+    return state === "done" || state === "error";
+  }
+  /** Re-arms `removeOnDone` for completed rows after a reconnect. */
+  #rescheduleRemovals() {
+    if (!this.removeOnDoneValue) return;
+    this.#prune();
+    for (const [id, row] of this.#rows) {
+      if (row.getAttribute("data-upload-state") === "done") {
+        this.#timeouts.set(() => this.#removeRow(id), REMOVE_DELAY);
+      }
+    }
   }
-  /** Returns an existing row or clones one from the template. */
+  /** Returns the live row for `id`, creating (and labeling) one on first sight. */
   #rowFor(id, name) {
     const key = this.#key(id);
     const existing = this.#rows.get(key);
-    if (existing !== void 0) return existing;
+    if (existing !== void 0) {
+      if (this.#tracksRow(existing)) {
+        this.#applyName(existing, name);
+        return existing;
+      }
+      existing.remove();
+      this.#rows.delete(key);
+    }
     if (!this.hasRowTarget || !this.hasListTarget) return null;
     const clone = this.rowTarget.content.firstElementChild?.cloneNode(true);
     if (!(clone instanceof HTMLElement)) return null;
-    if (name !== void 0 && name.length > 0) {
-      this.#setField(clone, "name", name);
-      clone.setAttribute("aria-label", name);
-    }
-    clone.setAttribute("aria-valuenow", "0");
+    this.#applyName(clone, name);
     clone.setAttribute("data-upload-state", "uploading");
-    clone.style.setProperty("--stimeo--upload-progress", "0%");
+    this.#applyProgress(clone, 0);
     this.listTarget.appendChild(clone);
     this.#rows.set(key, clone);
+    this.#syncAggregate();
     return clone;
   }
+  /**
+   * Writes the event's file name into `[data-field="name"]` and, unless the row
+   * already carries a non-blank `aria-label` — authored on the template or
+   * applied by an earlier event — makes it the accessible name too. The visible
+   * name never depends on the label: an authored label keeps its wording while
+   * the field still shows which file this row tracks.
+   */
+  #applyName(row, name) {
+    if (name.length === 0) return;
+    this.#setField(row, "name", name);
+    if ((row.getAttribute("aria-label") ?? "").trim().length > 0) return;
+    row.setAttribute("aria-label", name);
+  }
+  /** Writes one progress value to every per-row hook; returns the clamped percent. */
+  #applyProgress(row, percent) {
+    const clamped = Math.max(0, Math.min(100, Math.round(percent)));
+    row.setAttribute("aria-valuenow", String(clamped));
+    row.setAttribute("aria-valuetext", `${clamped}%`);
+    row.style.setProperty("--stimeo--upload-progress", `${clamped}%`);
+    this.#setField(row, "percent", `${clamped}%`);
+    return clamped;
+  }
   #removeRow(id) {
     const row = this.#rows.get(id);
     if (row === void 0) return;
@@ -5534,10 +6060,15 @@ var DirectUploadController = class extends Controller {
     this.#rows.delete(id);
     this.#syncAggregate();
   }
-  /** Reflects the average progress across rows on the controller element. */
+  /**
+   * Reflects the average progress across live rows on the controller element,
+   * withdrawing both hooks once no rows remain.
+   */
   #syncAggregate() {
+    this.#prune();
     if (this.#rows.size === 0) {
       this.element.removeAttribute("data-upload-progress");
+      this.element.style.removeProperty("--stimeo--upload-progress");
       return;
     }
     let total = 0;
@@ -5548,11 +6079,48 @@ var DirectUploadController = class extends Controller {
     this.element.setAttribute("data-upload-progress", String(overall));
     this.element.style.setProperty("--stimeo--upload-progress", `${overall}%`);
   }
-  /** Writes a consumer label (with `%{name}` substituted) to the status region. */
-  #announce(label, row) {
-    if (!this.announceValue || !this.hasStatusTarget || label.length === 0) return;
-    const name = this.#field(row, "name")?.textContent ?? "";
-    this.statusTarget.textContent = label.replace("%{name}", name);
+  /**
+   * Whether a bookkept row is still this widget's live UI: connected, and — when
+   * a `list` target is present — inside the *current* one, so re-pointing the
+   * target attribute at a new element retires rows kept alive in the old list.
+   */
+  #tracksRow(row) {
+    if (!row.isConnected) return false;
+    return !this.hasListTarget || this.listTarget.contains(row);
+  }
+  /**
+   * Retires rows that left the live UI (list swap, external removal). A retired
+   * clone is removed outright — generated rows only ever live under the current
+   * `list`, so the before-cache rewind never has an untracked leftover to miss.
+   */
+  #prune() {
+    for (const [id, row] of this.#rows) {
+      if (this.#tracksRow(row)) continue;
+      row.remove();
+      this.#rows.delete(id);
+    }
+  }
+  /**
+   * Returns the widget to its pre-upload state just before Turbo caches the
+   * page, so the snapshot never replays rows for uploads that cannot resume.
+   */
+  #reset() {
+    for (const row of this.#rows.values()) row.remove();
+    this.#rows.clear();
+    this.#timeouts.clearAll();
+    this.#syncAggregate();
+  }
+  /**
+   * Sends one consumer-worded message to the page's shared announcer. `{name}`
+   * resolves to the row's displayed name first — the event that settles an
+   * upload may omit the file although an earlier event already named the row —
+   * then the event's own name, then the accessible name (which an authored
+   * label owns, so it is the last resort, not the primary source).
+   */
+  #announce(template, name, row) {
+    const stored = this.#field(row, "name")?.textContent ?? "";
+    const label = stored.length > 0 ? stored : name.length > 0 ? name : row.getAttribute("aria-label") ?? "";
+    announce(fillTemplate(template, { name: label }));
   }
   #field(row, name) {
     return row.querySelector(`[data-field="${name}"]`);
@@ -5564,76 +6132,185 @@ var DirectUploadController = class extends Controller {
   #detail(event) {
     return event.detail ?? {};
   }
+  /** The file name every ActiveStorage `direct-upload:*` event carries. */
+  #name(detail) {
+    return detail.file?.name ?? "";
+  }
   /**
    * Whether an event belongs to this controller. With `scope` set, only events
    * whose target (the file input) sits inside an element matching `scope` are
-   * handled, so several upload widgets on one page do not cross-populate. Resolved
-   * with `closest()` from the target itself, so the chatty `progress` stream never
-   * pays a document-wide query. Empty `scope` handles all.
+   * handled, so several upload widgets on one page do not cross-populate.
+   * Resolved with `closest()` from the target itself, so the chatty `progress`
+   * stream never pays a document-wide query. Empty `scope` handles all.
    */
   #inScope(event) {
-    if (this.scopeValue.length === 0) return true;
+    if (this.#scopeSelector.length === 0) return true;
     const target = event.target;
-    return target instanceof Element && target.closest(this.scopeValue) !== null;
+    return target instanceof Element && target.closest(this.#scopeSelector) !== null;
   }
   #key(id) {
     return String(id ?? "");
   }
 };
+var visitCoordinators = /* @__PURE__ */ new WeakMap();
+var TurboVisitCoordinator = class {
+  #document;
+  #participants = /* @__PURE__ */ new Set();
+  #onBeforeVisit = (event) => {
+    let blocked = event.defaultPrevented;
+    let message;
+    for (const participant of this.#participantsInDomOrder()) {
+      if (!participant.form.isConnected) continue;
+      const decision = participant.evaluate(event);
+      blocked ||= event.defaultPrevented;
+      if (decision === null) continue;
+      if (decision.kind === "block") {
+        blocked = true;
+      } else {
+        message ??= decision.message;
+      }
+    }
+    if (blocked) {
+      event.preventDefault();
+      return;
+    }
+    if (message === void 0) return;
+    if (!this.#document.defaultView?.confirm(message)) event.preventDefault();
+  };
+  constructor(document2) {
+    this.#document = document2;
+  }
+  add(participant) {
+    if (this.#participants.size === 0) {
+      this.#document.addEventListener("turbo:before-visit", this.#onBeforeVisit);
+    }
+    this.#participants.add(participant);
+  }
+  /** Removes a participant and reports whether the coordinator became empty. */
+  remove(participant) {
+    this.#participants.delete(participant);
+    if (this.#participants.size > 0) return false;
+    this.#document.removeEventListener("turbo:before-visit", this.#onBeforeVisit);
+    return true;
+  }
+  #participantsInDomOrder() {
+    return Array.from(this.#participants).filter(
+      (participant) => participant.form.isConnected && participant.form.ownerDocument === this.#document
+    ).sort((left, right) => {
+      const position = left.form.compareDocumentPosition(right.form);
+      return Number(Boolean(position & Node.DOCUMENT_POSITION_PRECEDING)) - Number(Boolean(position & Node.DOCUMENT_POSITION_FOLLOWING));
+    });
+  }
+};
+function registerVisitParticipant(document2, participant) {
+  const coordinator = visitCoordinators.get(document2) ?? new TurboVisitCoordinator(document2);
+  visitCoordinators.set(document2, coordinator);
+  coordinator.add(participant);
+  return () => {
+    if (coordinator.remove(participant)) visitCoordinators.delete(document2);
+  };
+}
 var DirtyFormController = class extends Controller {
   static values = {
     message: { type: String, default: "You have unsaved changes that will be lost." },
     confirmBridge: { type: Boolean, default: false }
   };
-  static actions = ["markClean"];
+  static actions = ["markClean", "acceptRestore"];
   static events = ["dirty", "guard"];
   #baseline = "";
   #dirty = false;
   #beforeunloadBound = false;
-  /** True between a form `submit` and its `turbo:submit-end`, suppressing the guard. */
+  #timeouts = new SafeTimeout();
+  /** Whether the active submission still represents the form's current values. */
   #submitting = false;
+  #submitAttempt = null;
+  #submittedBaseline = null;
+  #activeSubmission = null;
+  #unregisterVisit = null;
   #onFieldChange = () => {
     this.#submitting = false;
     this.#evaluate();
   };
-  #onSubmit = () => {
+  #onSubmit = (event) => {
+    const attempt = { event, snapshot: this.#serialize() };
+    this.#submitAttempt = attempt;
     this.#submitting = true;
+    this.#timeouts.set(() => {
+      if (this.#submitAttempt !== attempt) return;
+      this.#submitting = false;
+    }, 0);
   };
-  #onBeforeVisit = (event) => {
-    this.#guardVisit(event);
+  #onFormData = () => {
+    if (this.#submitAttempt === null) return;
+    this.#submitAttempt.snapshot = this.#serialize();
+  };
+  #onSubmitStart = (event) => {
+    const detail = event.detail;
+    this.#activeSubmission = detail?.formSubmission ?? event;
+    this.#submittedBaseline = this.#submitAttempt?.snapshot ?? this.#serialize();
+    this.#submitAttempt = null;
+    this.#submitting = this.#serialize() === this.#submittedBaseline;
   };
   #onSubmitEnd = (event) => {
+    const detail = event.detail;
+    if (detail?.formSubmission !== void 0 && (this.#activeSubmission === null || detail.formSubmission !== this.#activeSubmission)) {
+      return;
+    }
+    const submittedBaseline = this.#submittedBaseline;
     this.#submitting = false;
-    const success = event.detail?.success;
-    if (success !== false) this.markClean();
+    this.#submittedBaseline = null;
+    this.#activeSubmission = null;
+    if (detail?.success === false) return;
+    if (submittedBaseline === null) {
+      this.markClean();
+      return;
+    }
+    this.#baseline = submittedBaseline;
+    this.#evaluate();
   };
   #onBeforeUnload = (event) => {
-    if (!this.#dirty || this.#submitting) return;
+    if (!this.#dirty || this.#guardSuppressed()) return;
     event.preventDefault();
     event.returnValue = this.messageValue;
   };
   connect() {
+    this.#resetSubmission();
     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);
-    document.addEventListener("turbo:before-visit", this.#onBeforeVisit);
+    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);
-    document.removeEventListener("turbo:before-visit", this.#onBeforeVisit);
+    this.#unregisterVisit?.();
+    this.#unregisterVisit = null;
     this.#unbindBeforeUnload();
+    this.#resetSubmission();
   }
   /** Re-baselines to the current values and clears the dirty state (e.g. after a save). */
   markClean() {
     this.#baseline = this.#serialize();
     this.#setDirty(false);
   }
+  /** Adopts restored values without erasing an already-dirty user revision. */
+  acceptRestore() {
+    if (this.#dirty) return;
+    this.markClean();
+  }
   /** Recomputes dirty against the baseline and flips state when it changes. */
   #evaluate() {
     this.#setDirty(this.#serialize() !== this.#baseline);
@@ -5650,21 +6327,14 @@ var DirtyFormController = class extends Controller {
     }
     this.dispatch("dirty", { detail: { dirty } });
   }
-  /** Guards a Turbo visit while dirty: consumer cancel → confirmBridge → confirm. */
-  #guardVisit(event) {
-    if (!this.#dirty || this.#submitting) return;
+  /** Evaluates this form for the document-level Turbo visit coordinator. */
+  #evaluateVisit(event) {
+    if (!this.#dirty || this.#guardSuppressed()) return null;
     const guard = this.dispatch("guard", { detail: { event }, cancelable: true });
-    if (guard.defaultPrevented) {
-      event.preventDefault();
-      return;
-    }
-    if (this.confirmBridgeValue) {
-      event.preventDefault();
-      return;
-    }
-    if (!window.confirm(this.messageValue)) {
-      event.preventDefault();
-    }
+    if (guard.defaultPrevented) return { kind: "block" };
+    if (!this.element.isConnected || !this.#dirty || this.#guardSuppressed()) return null;
+    if (this.confirmBridgeValue) return { kind: "block" };
+    return { kind: "confirm", message: this.messageValue };
   }
   #bindBeforeUnload() {
     if (this.#beforeunloadBound) return;
@@ -5676,6 +6346,16 @@ var DirtyFormController = class extends Controller {
     window.removeEventListener("beforeunload", this.#onBeforeUnload);
     this.#beforeunloadBound = false;
   }
+  #guardSuppressed() {
+    return this.#submitting && (this.#submitAttempt === null || !this.#submitAttempt.event.defaultPrevented);
+  }
+  #resetSubmission() {
+    this.#timeouts.clearAll();
+    this.#submitting = false;
+    this.#submitAttempt = null;
+    this.#submittedBaseline = null;
+    this.#activeSubmission = null;
+  }
   /** Stable serialization of the form's controls for change detection. */
   #serialize() {
     const parts = [];
@@ -5683,15 +6363,15 @@ var DirtyFormController = class extends Controller {
       const name = this.#nameOf(el);
       if (name === null) continue;
       if (el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio")) {
-        parts.push(`${name}:${el.checked ? 1 : 0}`);
+        parts.push([el.type, name, el.value, el.checked ? 1 : 0]);
       } else if (el instanceof HTMLSelectElement) {
-        const value = el.multiple ? Array.from(el.selectedOptions).map((o) => o.value).join(",") : el.value;
-        parts.push(`${name}:${value}`);
+        const value = el.multiple ? Array.from(el.selectedOptions).map((option) => option.value) : el.value;
+        parts.push([el.type, name, value]);
       } else if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
-        parts.push(`${name}:${el.value}`);
+        parts.push([el.type, name, el.value]);
       }
     }
-    return parts.join("|");
+    return JSON.stringify(parts);
   }
   /** A stable key for a control, or null for elements without value semantics. */
   #nameOf(el) {
@@ -5775,35 +6455,29 @@ var DismissibleController = class extends Controller {
   /** Yields available focus fallbacks in precedence order, stopping after focus succeeds. */
   *#focusFallbacks(root) {
     const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
-    if (explicitFallback && !root.contains(explicitFallback) && this.#isFocusAvailable(explicitFallback)) {
+    if (explicitFallback && !root.contains(explicitFallback) && this.#isExplicitFocusAvailable(explicitFallback)) {
       yield explicitFallback;
     }
-    const candidates = document.querySelectorAll(FOCUSABLE);
+    const candidates = tabStopsWithin(document);
     for (const element of candidates) {
       if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)) {
         continue;
       }
-      if (this.#isFocusAvailable(element)) yield element;
+      yield element;
     }
     for (let index = candidates.length - 1; index >= 0; index -= 1) {
-      const element = candidates.item(index);
+      const element = candidates[index];
+      if (!element) continue;
       if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING)) {
         continue;
       }
-      if (this.#isFocusAvailable(element)) yield element;
+      yield element;
     }
   }
-  /** Whether focus is allowed by the element and its semantic ancestors. */
-  #isFocusAvailable(element) {
-    if (!element.matches(FOCUSABLE) && !element.hasAttribute("tabindex") && !element.isContentEditable) {
-      return false;
-    }
-    if (element.matches(":disabled")) return false;
-    if (element instanceof HTMLInputElement && element.type === "hidden") return false;
-    for (let current = element; current; current = current.parentElement) {
-      if (current.hidden || current.inert) return false;
-    }
-    return true;
+  /** Whether an explicit fallback can receive programmatic focus right now. */
+  #isExplicitFocusAvailable(element) {
+    const programmaticallyFocusable = element.hasAttribute("tabindex") || isTabStop(element);
+    return programmaticallyFocusable && canTakeFocus(element) && isRenderedForFocus(element);
   }
 };
 var DrawerController = class extends Controller {
@@ -6907,6 +7581,7 @@ var FocusController = class extends Controller {
     this.dispatch("deactivate", { detail: {} });
   }
 };
+var OBSERVED_ATTRIBUTES2 = ["hidden", "id"];
 var FormFieldController = class _FormFieldController extends Controller {
   static targets = ["control", "description", "error"];
   static values = {
@@ -6916,31 +7591,85 @@ var FormFieldController = class _FormFieldController extends Controller {
   static events = ["validate"];
   /** Root attribute (CSS hook) reflecting the invalid state. */
   static #INVALID_ATTR = "data-stimeo--form-field-invalid";
-  /**
-   * `aria-describedby` tokens the consumer set on the control that the
-   * controller does not own. Captured once so composition never clobbers them.
-   */
+  /** Collapses one target/morph batch into one silent ARIA reconciliation. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  /** ARIA ownership is scoped to the current singular control target. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #ariaDescribedBy = new AttributeLease("aria-describedby");
+  #ariaErrorMessage = new AttributeLease("aria-errormessage");
+  #ariaInvalid = new AttributeLease("aria-invalid");
+  /** Watches retained target ids, error visibility, and error content. */
+  #observer = new MutationObserver((records) => {
+    if (records.some((record) => this.#isRelevantMutation(record))) {
+      this.#reconcile.schedule();
+    }
+  });
+  #activeControl = null;
   #baseDescribedBy = [];
-  /** Wires ids, captures consumer tokens, and reflects any initial error state. */
+  #explicitInvalid = false;
+  #initialized = false;
+  /** Wires the initial graph and starts retained-target reconciliation. */
   connect() {
-    for (const description of this.descriptionTargets) {
-      ensureId(description, "stimeo--form-field-desc");
-    }
-    for (const error of this.errorTargets) {
-      ensureId(error, "stimeo--form-field-error");
+    this.#reconcile.activate();
+    this.#ensureAssociationIds();
+    this.#beforeCache.activate();
+    if (!this.#initialized) {
+      this.#explicitInvalid = this.element.hasAttribute(_FormFieldController.#INVALID_ATTR) && this.#shownErrors().length === 0;
+      this.#initialized = true;
     }
-    this.#baseDescribedBy = this.#externalDescribedByTokens();
-    this.#reflect();
+    this.#reconcileDom();
+    this.#observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES2,
+      characterData: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  /** Releases observers, queued work, and ARIA borrowed on the current control. */
+  disconnect() {
+    this.#reconcile.cancel();
+    this.#observer.disconnect();
+    this.#beforeCache.deactivate();
+    this.#activeControl && this.#releaseControl(this.#activeControl);
+  }
+  /** Reconciles a control inserted or replaced at runtime. */
+  controlTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Schedules restoration of authored ARIA when a control leaves this field. */
+  controlTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles a description inserted or replaced at runtime. */
+  descriptionTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Removes a departed description from the control's association graph. */
+  descriptionTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reconciles an error region inserted or replaced at runtime. */
+  errorTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Removes a departed error from invalid state and the association graph. */
+  errorTargetDisconnected() {
+    this.#reconcile.schedule();
   }
   /**
    * Marks the field invalid and shows the error message. Bound via `data-action`
    * (`#setError`) or callable directly.
    *
+   * A non-empty shown message is announced exactly once through the shared
+   * assertive announcer. Initial/server reconciliation is deliberately silent.
+   *
    * @param arg - Either the message string, or the action event whose
    *   `data-stimeo--form-field-message-param` supplies it. When no message is
    *   resolvable, any already-populated error targets are simply (re)shown.
+   * @param options - Programmatic overrides. Stimulus actions use the Values.
    */
-  setError(arg) {
+  setError(arg, options = {}) {
     const message = this.#resolveMessage(arg);
     if (message !== null && this.hasErrorTarget) {
       this.errorTargets[0]?.replaceChildren(document.createTextNode(message));
@@ -6948,70 +7677,86 @@ var FormFieldController = class _FormFieldController extends Controller {
     for (const error of this.errorTargets) {
       error.hidden = (error.textContent ?? "").trim() === "";
     }
-    this.#reflect(true);
-    this.dispatch("validate", { detail: { valid: false, message: this.#shownMessage() } });
-    if (this.focusOnErrorValue && this.hasControlTarget) {
-      this.controlTarget.focus();
-    }
+    this.#explicitInvalid = true;
+    this.#reconcileDom();
+    const shownMessage = this.#shownMessage();
+    const detail = { valid: false, message: shownMessage };
+    this.dispatch("validate", { detail });
+    announce(shownMessage, { assertive: true });
+    if (options.focus ?? this.focusOnErrorValue) this.#activeControl?.focus();
   }
   /**
    * Clears the error: empties and hides every error target and marks the field
    * valid. Bound via `data-action` (`#clearError`) or callable directly.
+   *
+   * Clearing is silent: the visual/ARIA state and validation event are sufficient,
+   * while success wording remains an explicit consumer announcement.
    */
   clearError() {
     for (const error of this.errorTargets) {
       error.replaceChildren();
       error.hidden = true;
     }
-    this.#reflect();
-    this.dispatch("validate", { detail: { valid: true, message: "" } });
+    this.#explicitInvalid = false;
+    this.#reconcileDom();
+    const detail = { valid: true, message: "" };
+    this.dispatch("validate", { detail });
   }
   /**
-   * Synchronizes the control's ARIA wiring and the root CSS hook from the current
-   * error targets. Idempotent, so it is safe to call on connect and after any
-   * change (and survives Turbo morphing).
-   *
-   * @param force - When `true`, the field is marked invalid regardless of whether
-   *   a (visible, non-empty) error region exists. {@link setError} passes this so
-   *   the invalid state holds even with no error target; derivation from the DOM
-   *   (connect / {@link clearError}) leaves it `false`.
+   * Rebuilds ids and derived ARIA from the settled target graph without reporting
+   * a user validation action.
    */
-  #reflect(force = false) {
+  #reconcileDom() {
+    this.#ensureAssociationIds();
+    this.#adoptCurrentControl();
     const shown = this.#shownErrors();
-    const invalid = force || shown.length > 0;
-    if (invalid) {
-      this.element.setAttribute(_FormFieldController.#INVALID_ATTR, "");
-    } else {
-      this.element.removeAttribute(_FormFieldController.#INVALID_ATTR);
-    }
-    if (!this.hasControlTarget) return;
-    const control = this.controlTarget;
-    control.setAttribute("aria-invalid", invalid ? "true" : "false");
-    const errorIds = shown.map((error) => error.id);
-    const primaryErrorId = errorIds[0];
-    if (primaryErrorId) {
-      control.setAttribute("aria-errormessage", primaryErrorId);
-    } else {
-      control.removeAttribute("aria-errormessage");
+    const invalid = this.#explicitInvalid || shown.length > 0;
+    this.element.toggleAttribute(_FormFieldController.#INVALID_ATTR, invalid);
+    const control = this.#activeControl;
+    if (!control) return;
+    this.#ariaInvalid.write(control, invalid ? "true" : "false");
+    const primaryErrorId = shown[0]?.id ?? null;
+    this.#ariaErrorMessage.write(control, primaryErrorId);
+    const associationIds = this.#orderedElements([...this.descriptionTargets, ...shown]).map(
+      (element) => element.id
+    );
+    const describedBy = this.#uniqueTokens([...this.#baseDescribedBy, ...associationIds]);
+    this.#ariaDescribedBy.write(control, describedBy.length > 0 ? describedBy.join(" ") : null);
+  }
+  /** Assigns stable ids before either capture or reflection uses them. */
+  #ensureAssociationIds() {
+    for (const description of this.descriptionTargets) {
+      ensureId(description, "stimeo--form-field-desc");
     }
-    const describedBy = [
-      ...this.#baseDescribedBy,
-      ...this.descriptionTargets.map((description) => description.id),
-      ...errorIds
-    ];
-    if (describedBy.length > 0) {
-      control.setAttribute("aria-describedby", describedBy.join(" "));
-    } else {
-      control.removeAttribute("aria-describedby");
+    for (const error of this.errorTargets) {
+      ensureId(error, "stimeo--form-field-error");
+    }
+  }
+  /** Switches ARIA ownership when the singular current control target changes. */
+  #adoptCurrentControl() {
+    const next = this.hasControlTarget ? this.controlTarget : null;
+    if (next === this.#activeControl) return;
+    this.#activeControl && this.#releaseControl(this.#activeControl);
+    this.#activeControl = next;
+    this.#baseDescribedBy = next ? this.#externalDescribedByTokens(next) : [];
+  }
+  /** Restores one departed control without overwriting later consumer edits. */
+  #releaseControl(control) {
+    this.#ariaDescribedBy.return(control);
+    this.#ariaErrorMessage.return(control);
+    this.#ariaInvalid.return(control);
+    if (control === this.#activeControl) {
+      this.#activeControl = null;
+      this.#baseDescribedBy = [];
     }
   }
-  /** Error targets currently visible and non-empty. */
+  /** Error targets currently visible and non-empty, in document order. */
   #shownErrors() {
-    return this.errorTargets.filter(
-      (error) => !error.hidden && (error.textContent ?? "").trim() !== ""
+    return this.#orderedElements(
+      this.errorTargets.filter((error) => !error.hidden && (error.textContent ?? "").trim() !== "")
     );
   }
-  /** Text of the first shown error, for the `validate` event detail. */
+  /** Text of the first shown error, for validation detail and announcement. */
   #shownMessage() {
     return (this.#shownErrors()[0]?.textContent ?? "").trim();
   }
@@ -7022,17 +7767,50 @@ var FormFieldController = class _FormFieldController extends Controller {
     return typeof message === "string" ? message : null;
   }
   /**
-   * Tokens already in the control's `aria-describedby` that are not ids of this
-   * controller's own description/error targets.
+   * Tokens authored on a newly adopted control, excluding ids this controller
+   * owns through its current description/error targets.
    */
-  #externalDescribedByTokens() {
-    if (!this.hasControlTarget) return [];
+  #externalDescribedByTokens(control) {
     const owned = /* @__PURE__ */ new Set([
       ...this.descriptionTargets.map((description) => description.id),
       ...this.errorTargets.map((error) => error.id)
     ]);
-    const existing = this.controlTarget.getAttribute("aria-describedby") ?? "";
-    return existing.split(/\s+/).filter((token) => token.length > 0 && !owned.has(token));
+    const existing = control.getAttribute("aria-describedby") ?? "";
+    return this.#uniqueTokens(
+      existing.split(/\s+/).filter((token) => token.length > 0 && !owned.has(token))
+    );
+  }
+  /** Deduplicates ARIA tokens without disturbing their first occurrence. */
+  #uniqueTokens(tokens) {
+    const seen = /* @__PURE__ */ new Set();
+    return tokens.filter((token) => {
+      if (token.length === 0 || seen.has(token)) return false;
+      seen.add(token);
+      return true;
+    });
+  }
+  /** Returns unique current targets in DOM order before serializing IDREF lists. */
+  #orderedElements(elements) {
+    const candidates = new Set(elements);
+    return [this.element, ...this.element.querySelectorAll("*")].filter(
+      (element) => candidates.has(element)
+    );
+  }
+  /** Whether one retained-node mutation can alter this controller's derived state. */
+  #isRelevantMutation(record) {
+    const target = record.target;
+    if (record.type === "attributes") {
+      if (record.attributeName === "hidden")
+        return this.errorTargets.includes(target);
+      return record.attributeName === "id" && [...this.descriptionTargets, ...this.errorTargets].includes(target);
+    }
+    return this.errorTargets.some((error) => error === target || error.contains(target));
+  }
+  /** Returns borrowed control ARIA before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#ariaDescribedBy.returnAll();
+    this.#ariaErrorMessage.returnAll();
+    this.#ariaInvalid.returnAll();
   }
 };
 var CONSTRAINT_MESSAGE_KEYS = [
@@ -7046,10 +7824,12 @@ var CONSTRAINT_MESSAGE_KEYS = [
   ["stepMismatch", "step-mismatch"],
   ["badInput", "bad-input"]
 ];
-var MESSAGE_ATTR_PREFIX = "data-stimeo--form-field-message-";
-var MESSAGE_ATTR_GENERIC = "data-stimeo--form-field-message";
-var DISALLOW_ATTR = "data-stimeo--form-field-disallow";
+var MESSAGE_ATTR_PREFIX = "data-stimeo--form-validation-message-";
+var MESSAGE_ATTR_GENERIC = "data-stimeo--form-validation-message";
+var DISALLOW_ATTR = "data-stimeo--form-validation-disallow";
+var DISALLOW_WHITESPACE_MESSAGE = `${MESSAGE_ATTR_PREFIX}whitespace`;
 var DISALLOW_WHITESPACE_DEFAULT = "Please enter a value that is not only whitespace.";
+var FORM_FIELD_INVALID_ATTR = "data-stimeo--form-field-invalid";
 var FormValidationController = class _FormValidationController extends Controller {
   static outlets = ["stimeo--form-field"];
   static values = {
@@ -7062,14 +7842,21 @@ var FormValidationController = class _FormValidationController extends Controlle
   static events = ["valid", "invalid"];
   /** Marker recording that we added `novalidate`, so we only remove our own. */
   static #NOVALIDATE_MARKER = "data-stimeo--form-validation-novalidate";
-  /** Controls already interacted with — the gate for blur / input (re)validation. */
-  #touched = /* @__PURE__ */ new WeakSet();
-  /**
-   * Controls whose `customError` *we* set via the `disallow` rule. Tracked so we
-   * only ever clear our own custom validity — a consumer's `setCustomValidity` on
-   * the same control survives once our rule passes (don't-clobber-authored-state).
-   */
-  #ownedCustomError = /* @__PURE__ */ new WeakSet();
+  /** Object-backed groups already interacted with — the input revalidation gate. */
+  #touchedGroups = /* @__PURE__ */ new WeakSet();
+  /** String-backed fallback radio groups already interacted with. */
+  #touchedRadioGroups = /* @__PURE__ */ new Set();
+  /**
+   * Last message this controller wrote through `setCustomValidity`, kept as a
+   * two-layer ownership ledger: a value is cleared only while the live message
+   * still equals the recorded write. Iterable so disconnect can release every
+   * surviving loan without touching a consumer's later custom error.
+   */
+  #ownedCustomErrors = /* @__PURE__ */ new Map();
+  /** Last invalid message routed to each field, suppressing duplicate reports. */
+  #reportedErrors = /* @__PURE__ */ new WeakMap();
+  /** Exact document that owns the delegated listeners for this connection. */
+  #listenerDocument = null;
   #onSubmit = (event) => {
     if (event.target !== this.element) return;
     const invalid = this.#validateAll();
@@ -7085,43 +7872,51 @@ var FormValidationController = class _FormValidationController extends Controlle
   };
   #onFocusOut = (event) => {
     if (!this.validateOnBlurValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control) return;
-    const field = this.#fieldFor(control);
+    const snapshot = this.#snapshot();
+    const group = snapshot.groupByControl.get(this.#controlFrom(event.target));
+    if (!group) return;
     const related = event.relatedTarget;
-    if (field && related instanceof Node && field.element.contains(related)) return;
-    this.#touched.add(control);
-    this.#validateControl(control);
+    if (group.field && related instanceof Node && group.field.element.contains(related)) return;
+    if (snapshot.groupByControl.get(this.#controlFrom(related))?.key === group.key) return;
+    this.#markTouched(group.key);
+    this.#applyGroup(group);
   };
   #onInput = (event) => {
     if (!this.revalidateOnInputValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control || !this.#touched.has(control)) return;
-    this.#validateControl(control);
+    const group = this.#snapshot().groupByControl.get(this.#controlFrom(event.target));
+    if (!group || !this.#isTouched(group.key)) return;
+    this.#applyGroup(group);
   };
   #onChange = (event) => {
     if (!this.validateOnChangeValue) return;
-    const control = this.#controlFrom(event.target);
-    if (!control) return;
-    this.#touched.add(control);
-    this.#validateControl(control);
+    const group = this.#snapshot().groupByControl.get(this.#controlFrom(event.target));
+    if (!group) return;
+    this.#markTouched(group.key);
+    this.#applyGroup(group);
   };
   /** Suppresses native bubbles and binds the submit / blur / input listeners. */
   connect() {
     if (setDefaultAttribute(this.element, "novalidate", "")) {
       this.element.setAttribute(_FormValidationController.#NOVALIDATE_MARKER, "");
     }
-    document.addEventListener("submit", this.#onSubmit, true);
-    this.element.addEventListener("focusout", this.#onFocusOut);
-    this.element.addEventListener("input", this.#onInput);
-    this.element.addEventListener("change", this.#onChange);
+    this.#listenerDocument = this.element.ownerDocument;
+    this.#listenerDocument.addEventListener("submit", this.#onSubmit, true);
+    this.#listenerDocument.addEventListener("focusout", this.#onFocusOut);
+    this.#listenerDocument.addEventListener("input", this.#onInput);
+    this.#listenerDocument.addEventListener("change", this.#onChange);
   }
   /** Tears down listeners and restores `novalidate` if we added it. */
   disconnect() {
-    document.removeEventListener("submit", this.#onSubmit, true);
-    this.element.removeEventListener("focusout", this.#onFocusOut);
-    this.element.removeEventListener("input", this.#onInput);
-    this.element.removeEventListener("change", this.#onChange);
+    this.#listenerDocument?.removeEventListener("submit", this.#onSubmit, true);
+    this.#listenerDocument?.removeEventListener("focusout", this.#onFocusOut);
+    this.#listenerDocument?.removeEventListener("input", this.#onInput);
+    this.#listenerDocument?.removeEventListener("change", this.#onChange);
+    this.#listenerDocument = null;
+    for (const [control, message] of this.#ownedCustomErrors) {
+      if (control.validationMessage === message) control.setCustomValidity("");
+    }
+    this.#ownedCustomErrors.clear();
+    this.#touchedRadioGroups.clear();
     if (this.element.hasAttribute(_FormValidationController.#NOVALIDATE_MARKER)) {
       this.element.removeAttribute("novalidate");
       this.element.removeAttribute(_FormValidationController.#NOVALIDATE_MARKER);
@@ -7129,8 +7924,8 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /**
    * Validates every control now, rendering or clearing each field's message, and
-   * returns whether the whole form is valid. Marks every control touched so a
-   * later input re-validates it. Bound via `data-action`
+   * returns whether the whole form is valid. Marks every field/group touched so
+   * a later input from any sibling re-validates it. Bound via `data-action`
    * (`#validate`) or callable directly (e.g. before a programmatic submit).
    */
   validate() {
@@ -7144,33 +7939,42 @@ var FormValidationController = class _FormValidationController extends Controlle
    * Each group's first invalid control supplies the message and the focus target.
    */
   #validateAll() {
+    const invalid = [];
+    for (const group of this.#snapshot().groups.values()) {
+      this.#markTouched(group.key);
+      const firstInvalid = this.#applyGroup(group);
+      if (firstInvalid) invalid.push(firstInvalid);
+    }
+    return invalid;
+  }
+  /** Builds the current field table in one pass over form controls and DOM depth. */
+  #snapshot() {
+    const fields = this.#fieldOutlets();
     const groups = /* @__PURE__ */ new Map();
+    const groupByControl = /* @__PURE__ */ new Map();
     for (const control of this.#controls) {
-      this.#touched.add(control);
-      const field = this.#fieldFor(control);
+      const field = this.#fieldFor(control, fields);
       const key = this.#keyFor(control, field);
-      const group = groups.get(key);
-      if (group) {
-        group.controls.push(control);
-      } else {
-        groups.set(key, { field, controls: [control] });
+      let group = groups.get(key);
+      if (!group) {
+        group = { key, field, controls: [] };
+        groups.set(key, group);
       }
+      group.controls.push(control);
+      groupByControl.set(control, group);
     }
-    const invalid = [];
-    for (const group of groups.values()) {
-      const firstInvalid = this.#applyGroup(group);
-      if (firstInvalid) invalid.push(firstInvalid);
+    return { groups, groupByControl };
+  }
+  /** Records that a whole field/group, rather than one sibling control, was visited. */
+  #markTouched(key) {
+    if (typeof key === "string") {
+      this.#touchedRadioGroups.add(key);
+    } else {
+      this.#touchedGroups.add(key);
     }
-    return invalid;
   }
-  /** Re-validates the whole field a single control belongs to (or that control). */
-  #validateControl(control) {
-    const field = this.#fieldFor(control);
-    const key = this.#keyFor(control, field);
-    const controls = this.#controls.filter(
-      (other) => this.#keyFor(other, this.#fieldFor(other)) === key
-    );
-    this.#applyGroup({ field, controls });
+  #isTouched(key) {
+    return typeof key === "string" ? this.#touchedRadioGroups.has(key) : this.#touchedGroups.has(key);
   }
   /**
    * Runs native constraint validation across a field's controls and routes the
@@ -7184,51 +7988,63 @@ var FormValidationController = class _FormValidationController extends Controlle
     const firstInvalid = group.controls.find((control) => !control.checkValidity()) ?? null;
     if (group.field) {
       if (firstInvalid) {
-        group.field.setError(this.#messageFor(firstInvalid));
-      } else {
+        const message = this.#messageFor(firstInvalid);
+        const alreadyReported = group.field.element.hasAttribute(FORM_FIELD_INVALID_ATTR) && this.#reportedErrors.get(group.field) === message;
+        if (!alreadyReported) group.field.setError(message, { focus: false });
+        this.#reportedErrors.set(group.field, message);
+      } else if (group.field.element.hasAttribute(FORM_FIELD_INVALID_ATTR) || this.#reportedErrors.has(group.field)) {
         group.field.clearError();
+        this.#reportedErrors.delete(group.field);
       }
     }
     return firstInvalid;
   }
   /**
    * Resolves the message to show for an invalid control: a per-constraint
-   * override (`data-stimeo--form-field-message-<constraint>`) for the first failing
-   * `ValidityState` flag, then a generic `data-stimeo--form-field-message`
+   * override (`data-stimeo--form-validation-message-<constraint>`) for the first failing
+   * `ValidityState` flag, then a generic `data-stimeo--form-validation-message`
    * override, then the browser's native `validationMessage`. Authoring an override
    * gives controlled, localizable, theme-able wording with **no consumer JS** —
    * and sidesteps headless browsers that return an empty native message.
    */
   #messageFor(control) {
+    if (control.validity.customError) return control.validationMessage;
     for (const [flag, key] of CONSTRAINT_MESSAGE_KEYS) {
       if (control.validity[flag]) {
-        return control.getAttribute(`${MESSAGE_ATTR_PREFIX}${key}`) ?? control.getAttribute(MESSAGE_ATTR_GENERIC) ?? control.validationMessage;
+        return this.#authoredMessage(control, `${MESSAGE_ATTR_PREFIX}${key}`) ?? this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) ?? control.validationMessage;
       }
     }
-    return control.validationMessage || control.getAttribute(MESSAGE_ATTR_GENERIC) || "";
+    return control.validationMessage || this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) || "";
   }
   /**
    * Applies (or clears) a declarative custom constraint via `setCustomValidity`,
-   * for controls that opt in with `data-stimeo--form-field-disallow`. The supported
+   * for controls that opt in with `data-stimeo--form-validation-disallow`. The supported
    * rule is `"whitespace"` — a value that is non-empty but blank
    * after trimming (which slips past `required` / `minlength`); its message follows
-   * the per-constraint (`value-missing`) → generic → default chain.
+   * the whitespace-specific → generic → default chain.
    *
-   * Don't-clobber-authored-state: an unknown/absent rule is never touched, and a
-   * custom error is only cleared when *we* set it (tracked in {@link #ownedCustomError}),
-   * so a consumer's own `setCustomValidity` on the same control survives.
+   * Don't-clobber-authored-state: an unknown/absent rule is never written, an
+   * existing consumer custom error wins, and a controller error is only cleared
+   * while the live message still equals the recorded controller write.
    */
   #syncCustomValidity(control) {
+    const recorded = this.#ownedCustomErrors.get(control);
+    const ownsCurrent = recorded !== void 0 && control.validationMessage === recorded;
     const violates = control.getAttribute(DISALLOW_ATTR) === "whitespace" && control.value.length > 0 && control.value.trim() === "";
-    if (violates) {
-      control.setCustomValidity(
-        control.getAttribute(`${MESSAGE_ATTR_PREFIX}value-missing`) ?? control.getAttribute(MESSAGE_ATTR_GENERIC) ?? DISALLOW_WHITESPACE_DEFAULT
-      );
-      this.#ownedCustomError.add(control);
-    } else if (this.#ownedCustomError.has(control)) {
-      this.#ownedCustomError.delete(control);
-      control.setCustomValidity("");
+    if (!violates) {
+      if (ownsCurrent) control.setCustomValidity("");
+      this.#ownedCustomErrors.delete(control);
+      return;
     }
+    if (control.validity.customError && !ownsCurrent) return;
+    const message = this.#authoredMessage(control, DISALLOW_WHITESPACE_MESSAGE) ?? this.#authoredMessage(control, MESSAGE_ATTR_GENERIC) ?? DISALLOW_WHITESPACE_DEFAULT;
+    if (!ownsCurrent || recorded !== message) control.setCustomValidity(message);
+    this.#ownedCustomErrors.set(control, message);
+  }
+  /** Returns a non-blank authored message, otherwise falls through to a fallback. */
+  #authoredMessage(control, attribute) {
+    const message = control.getAttribute(attribute);
+    return message && message.trim().length > 0 ? message : null;
   }
   /**
    * A grouping key that collects controls belonging to the same field: the owning
@@ -7252,18 +8068,32 @@ var FormValidationController = class _FormValidationController extends Controlle
    * is deterministic and CSS-independent.
    */
   #focusTargetFor(control) {
-    if (!control.hidden) return control;
-    const field = this.#fieldFor(control);
+    if (canTakeFocus(control)) return control;
+    const field = this.#fieldFor(control, this.#fieldOutlets());
     if (!field?.hasControlTarget) return null;
     const root = field.controlTarget;
-    if (root.matches(FOCUSABLE)) return root;
-    return root.querySelector(FOCUSABLE);
+    if (isTabStop(root)) return root;
+    return firstTabStop(root);
   }
-  /** The `stimeo--form-field` outlet whose element contains `control`, if any. */
-  #fieldFor(control) {
+  /** Pairs each live outlet element with its controller once per operation. */
+  #fieldOutlets() {
+    const fields = /* @__PURE__ */ new Map();
     const elements = this.stimeoFormFieldOutletElements;
+    const outlets = this.stimeoFormFieldOutlets;
     for (let index = 0; index < elements.length; index++) {
-      if (elements[index]?.contains(control)) return this.stimeoFormFieldOutlets[index];
+      const element = elements[index];
+      const outlet = outlets[index];
+      if (element && outlet) fields.set(element, outlet);
+    }
+    return fields;
+  }
+  /** The nearest configured field ancestor of `control`, if any. */
+  #fieldFor(control, fields) {
+    let ancestor = control;
+    while (ancestor) {
+      const field = fields.get(ancestor);
+      if (field) return field;
+      ancestor = ancestor.parentElement;
     }
     return void 0;
   }
@@ -7277,11 +8107,12 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /** Narrows an event target to a validatable control. */
   #controlFrom(target) {
-    return target instanceof Element && this.#isValidatable(target) ? target : null;
+    return target instanceof Element && this.#isValidatable(target) && target.form === this.element ? target : null;
   }
   #isValidatable(element) {
-    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && // `willValidate` already excludes disabled, read-only, hidden, and button
-    // controls — the exact set barred from constraint validation.
+    return (element instanceof HTMLInputElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement) && // `willValidate` already excludes disabled, read-only, input[type=hidden],
+    // and button-type controls. The `hidden` attribute intentionally does not
+    // bar a text mirror from constraint validation.
     element.willValidate;
   }
 };
@@ -9960,37 +10791,6 @@ var ChipRow = class {
   };
 };
 
-// src/utils/tabindex_loan.ts
-var TabindexLoan = class {
-  #value;
-  #lent = /* @__PURE__ */ new Set();
-  /** Returns live loans before Turbo can copy them into its page snapshot. */
-  #beforeCache = new BeforeCacheReset(() => this.returnAll());
-  /**
-   * @param value - the `tabindex` to lend. `"-1"` (the default) is
-   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
-   *   which a scroll region with no focusable content of its own needs.
-   */
-  constructor(value = "-1") {
-    this.#value = value;
-  }
-  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
-  lend(element) {
-    if (element.hasAttribute("tabindex")) return;
-    element.setAttribute("tabindex", this.#value);
-    this.#lent.add(element);
-    this.#beforeCache.activate();
-  }
-  /** Takes back every loan whose value is still the one that was lent. */
-  returnAll() {
-    for (const element of this.#lent) {
-      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
-    }
-    this.#lent.clear();
-    this.#beforeCache.deactivate();
-  }
-};
-
 // src/controllers/multi_select_controller.ts
 var MultiSelectController = class extends Controller {
   static targets = [
@@ -11348,6 +12148,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   /** Tracks IME lifecycle on the current input, including confirming keys without a signal. */
   #composition = new CompositionTracker();
   /** Restores authored custom-spinbutton ARIA when a target leaves or the controller stops. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #ariaValueNow = new AttributeLease("aria-valuenow");
   #ariaValueMin = new AttributeLease("aria-valuemin");
   #ariaValueMax = new AttributeLease("aria-valuemax");
@@ -11371,6 +12172,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   /** Normalizes any initial value and wires the focus/hold pointer guards. */
   connect() {
     this.#repaint.activate();
+    this.#beforeCache.activate();
     this.#globalGuards = new AbortController();
     const { signal } = this.#globalGuards;
     for (const button of this.incrementTargets) this.#wireButton(button, 1);
@@ -11384,6 +12186,7 @@ var NumberInputController = class _NumberInputController extends Controller {
   disconnect() {
     this.#repaint.cancel();
     this.#composition.disconnect();
+    this.#beforeCache.deactivate();
     this.#globalGuards?.abort();
     this.#globalGuards = null;
     const buttons = /* @__PURE__ */ new Set([
@@ -11717,6 +12520,12 @@ var NumberInputController = class _NumberInputController extends Controller {
   get #steppedRange() {
     return { min: this.minValue, max: this.maxValue, step: this.stepValue };
   }
+  /** Returns borrowed range ARIA before Turbo snapshots the page. */
+  #rewindForCache() {
+    this.#ariaValueNow.returnAll();
+    this.#ariaValueMin.returnAll();
+    this.#ariaValueMax.returnAll();
+  }
 };
 var TOGGLED_MARKER = "data-optimistic-toggled";
 var OptimisticController = class extends Controller {
@@ -12201,25 +13010,6 @@ var OverflowIndicatorController = class extends Controller {
     return direction === "start" || direction === "end" ? direction : null;
   }
 };
-
-// src/utils/focus_candidate.ts
-function inheritsFieldsetDisabled(control) {
-  let fieldset = control.closest("fieldset[disabled]");
-  while (fieldset) {
-    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
-    if (!legend?.contains(control)) return true;
-    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
-  }
-  return false;
-}
-function canTakeFocus(element) {
-  if (element.closest("[hidden]")) return false;
-  if (!("disabled" in element)) return true;
-  if (element.disabled) return false;
-  return !inheritsFieldsetDisabled(element);
-}
-
-// src/controllers/overflow_menu_controller.ts
 var BANKED = "data-stimeo--overflow-menu-banked";
 var INDEX = "data-stimeo--overflow-menu-index";
 var BOUNDARY = "data-stimeo--overflow-menu-boundary";
@@ -12997,171 +13787,377 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     return Math.min(max, Math.max(1, bucketed));
   }
 };
+
+// src/utils/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return { ok: true, value: window.localStorage.getItem(key) };
+  } catch (error) {
+    return { ok: false, error };
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+    return { ok: true, value: void 0 };
+  } catch (error) {
+    return { ok: false, error };
+  }
+}
+function removeLocalStorage(key) {
+  try {
+    window.localStorage.removeItem(key);
+    return { ok: true, value: void 0 };
+  } catch (error) {
+    return { ok: false, error };
+  }
+}
+
+// src/controllers/persist_controller.ts
 var NON_VALUE_TYPES = /* @__PURE__ */ new Set(["file", "submit", "reset", "button", "image"]);
-var DEFAULT_EXCLUDE = ["password"];
+var SENSITIVE_TYPES = /* @__PURE__ */ new Set(["password"]);
+var DEFAULT_EXCLUDE = ["authenticity_token", "_method", "utf8"];
 var STORAGE_PREFIX = "stimeo--persist:";
 var OCCURRENCE_SEP = "\0";
+var OWNERSHIP_ATTRIBUTE = "data-controller";
+var DEFAULT_DEBOUNCE = 400;
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var isPersistValue = (value) => typeof value === "string" || typeof value === "boolean" || Array.isArray(value) && value.every((item) => typeof item === "string");
+var parsePayload = (raw) => {
+  let parsed;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return null;
+  }
+  if (!isRecord(parsed) || parsed.version !== 1 || !Array.isArray(parsed.fields)) return null;
+  const fields = [];
+  const keys = /* @__PURE__ */ new Set();
+  for (const candidate of parsed.fields) {
+    if (!isRecord(candidate)) return null;
+    const { key, value } = candidate;
+    if (typeof key !== "string" || key.length === 0 || keys.has(key)) return null;
+    if (!isPersistValue(value)) return null;
+    keys.add(key);
+    fields.push({ key, value });
+  }
+  return { version: 1, fields };
+};
+var isPersistField = (node) => node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement || node instanceof HTMLSelectElement;
 var PersistController = class extends Controller {
   static targets = ["field"];
   static values = {
     key: { type: String, default: "" },
-    debounce: { type: Number, default: 400 },
-    // 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 controller connecting.
+    debounce: { type: Number, default: DEFAULT_DEBOUNCE },
+    // A malformed JSON list must fall back without aborting Stimulus connection.
     exclude: { type: String, default: "" },
     clearOn: { type: String, default: "" }
   };
   static actions = ["clear"];
-  static events = ["restore", "save", "clear"];
+  static events = ["restore", "save", "clear", "error"];
   #timeouts = new SafeTimeout();
-  #saveId = null;
-  #onInput = () => {
+  #restoreDynamic = new MicrotaskCoalescer(() => this.#restoreDynamicFields());
+  #observer = new MutationObserver((records) => this.#onMutations(records));
+  #pendingSave = null;
+  #connected = false;
+  #logicalKey = null;
+  #payload = null;
+  #registeredClearOn = null;
+  #excluded = DEFAULT_EXCLUDE;
+  #knownFields = /* @__PURE__ */ new WeakSet();
+  #forcedRestore = /* @__PURE__ */ new Set();
+  #onInput = (event) => {
+    const field = event.target;
+    if (!isPersistField(field) || !this.#ownsField(field)) return;
+    if (this.hasFieldTarget && !this.fieldTargets.includes(field)) return;
+    if (this.#keyOf(field) === null || !this.#persistable(field, this.#excluded)) return;
     this.#scheduleSave();
   };
   #onClearEvent = () => {
     this.clear();
   };
   connect() {
-    if (this.#storageKey === null) return;
-    this.#restore();
+    if (this.#connected) return;
+    this.#connected = true;
+    this.#logicalKey = this.#resolveLogicalKey();
+    this.#excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
+    this.#knownFields = /* @__PURE__ */ new WeakSet();
+    this.#forcedRestore.clear();
+    this.element.removeAttribute("data-persist-restored");
     this.element.addEventListener("input", this.#onInput);
     this.element.addEventListener("change", this.#onInput);
-    if (this.clearOnValue.length > 0) {
-      this.element.addEventListener(this.clearOnValue, this.#onClearEvent);
-    }
+    this.#syncClearOn();
+    this.#restoreDynamic.activate();
+    this.#observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: [
+        "checked",
+        "data-controller",
+        "data-stimeo--persist-target",
+        "id",
+        "multiple",
+        "name",
+        "selected",
+        "type",
+        "value"
+      ],
+      childList: true,
+      subtree: true
+    });
+    this.#loadActiveDraft();
   }
   disconnect() {
+    this.#flushPendingSave();
+    this.#connected = false;
     this.element.removeEventListener("input", this.#onInput);
     this.element.removeEventListener("change", this.#onInput);
-    if (this.clearOnValue.length > 0) {
-      this.element.removeEventListener(this.clearOnValue, this.#onClearEvent);
-    }
-    if (this.#saveId !== null) {
-      this.#timeouts.clear(this.#saveId);
-      this.#saveId = null;
-      this.#write();
-    }
+    this.#unbindClearOn();
+    this.#observer.disconnect();
+    this.#restoreDynamic.cancel();
+    this.#forcedRestore.clear();
     this.#timeouts.clearAll();
+    this.element.removeAttribute("data-persist-restored");
+    this.#payload = null;
   }
-  /** Drops the saved draft and clears the restored marker. */
+  /** Drops the active draft after storage confirms the removal. */
   clear() {
-    const key = this.#storageKey;
-    if (key === null) return;
-    if (this.#saveId !== null) {
-      this.#timeouts.clear(this.#saveId);
-      this.#saveId = null;
+    const logicalKey = this.#logicalKey ?? this.#resolveLogicalKey();
+    if (logicalKey === null) return;
+    this.#cancelPendingSave();
+    const result = removeLocalStorage(this.#storageKey(logicalKey));
+    if (!result.ok) {
+      this.#dispatchError(logicalKey, "remove", "unavailable");
+      return;
     }
-    this.#removeItem(key);
+    this.#payload = null;
     this.element.removeAttribute("data-persist-restored");
-    this.dispatch("clear", { detail: { key: this.#logicalKey } });
+    this.dispatch("clear", { detail: { key: logicalKey } });
+  }
+  /** Rebinds the external clear event when its Value changes. */
+  clearOnValueChanged() {
+    if (this.#connected) this.#syncClearOn();
+  }
+  /** Switches storage namespaces without writing old edits under the new key. */
+  keyValueChanged() {
+    if (this.#connected) this.#switchLogicalKey();
+  }
+  /** Reschedules a pending write against the current debounce delay. */
+  debounceValueChanged() {
+    if (this.#connected && this.#pendingSave !== null) this.#scheduleSave();
+  }
+  /** Restores every field the new exclusion list makes eligible. */
+  excludeValueChanged() {
+    const previous = this.#excluded;
+    this.#excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
+    if (!this.#connected) return;
+    for (const field of this.#candidateFields()) {
+      if (this.#persistable(field, this.#excluded) && !this.#persistable(field, previous)) {
+        this.#forcedRestore.add(field);
+      }
+    }
+    this.#restoreDynamic.schedule();
   }
   /** Schedules a debounced save. */
   #scheduleSave() {
-    if (this.#saveId !== null) this.#timeouts.clear(this.#saveId);
-    this.#saveId = this.#timeouts.set(() => {
-      this.#saveId = null;
-      this.#save();
-    }, this.debounceValue);
-  }
-  /** Writes the current values and emits `save`. */
-  #save() {
-    this.#write();
-    this.dispatch("save", { detail: { key: this.#logicalKey } });
+    const logicalKey = this.#logicalKey;
+    if (logicalKey === null) return;
+    this.#cancelPendingSave();
+    const id = this.#timeouts.set(() => {
+      this.#pendingSave = null;
+      this.#save(logicalKey);
+    }, this.#debounceDelay);
+    this.#pendingSave = { id, logicalKey };
+  }
+  /** Cancels the currently pending save, if any. */
+  #cancelPendingSave() {
+    const pending = this.#pendingSave;
+    if (pending === null) return;
+    this.#timeouts.clear(pending.id);
+    this.#pendingSave = null;
+  }
+  /** Flushes a pending edit through the same success/error event path as a timer. */
+  #flushPendingSave() {
+    const pending = this.#pendingSave;
+    if (pending === null) return;
+    this.#cancelPendingSave();
+    this.#save(pending.logicalKey);
+  }
+  /** Writes the active payload and emits `save` only after storage succeeds. */
+  #save(logicalKey) {
+    const payload = this.#serialize();
+    const result = writeLocalStorage(this.#storageKey(logicalKey), JSON.stringify(payload));
+    if (!result.ok) {
+      this.#dispatchError(logicalKey, "write", "unavailable");
+      return false;
+    }
+    this.#payload = payload;
+    this.dispatch("save", { detail: { key: logicalKey } });
+    return true;
   }
-  /** Serializes persistable fields and stores them under the storage key. */
-  #write() {
-    const key = this.#storageKey;
-    if (key === null) return;
-    const data = {};
-    for (const { field, key: fieldKey } of this.#fieldEntries()) {
+  /** Serializes every persistable field into a versioned, typed payload. */
+  #serialize() {
+    const fields = [];
+    for (const { field, key } of this.#fieldEntries()) {
       if (field instanceof HTMLInputElement && field.type === "checkbox") {
-        data[fieldKey] = field.checked;
+        fields.push({ key, value: field.checked });
       } else if (field instanceof HTMLInputElement && field.type === "radio") {
-        if (field.checked) data[fieldKey] = field.value;
+        if (field.checked) fields.push({ key, value: field.value });
       } else if (field instanceof HTMLSelectElement && field.multiple) {
-        data[fieldKey] = Array.from(field.selectedOptions).map((o) => o.value);
+        fields.push({
+          key,
+          value: Array.from(field.selectedOptions).map((option) => option.value)
+        });
       } else {
-        data[fieldKey] = field.value;
+        fields.push({ key, value: field.value });
       }
     }
-    this.#setItem(key, JSON.stringify(data));
+    return { version: 1, fields };
   }
-  /** Applies any saved values to the fields, without moving focus. */
-  #restore() {
-    const key = this.#storageKey;
-    if (key === null) return;
-    const raw = this.#getItem(key);
-    if (raw === null) return;
-    let data;
-    try {
-      data = JSON.parse(raw);
-    } catch {
+  /** Reads, validates, and restores the active namespace. */
+  #loadActiveDraft() {
+    this.element.removeAttribute("data-persist-restored");
+    this.#payload = null;
+    this.#knownFields = /* @__PURE__ */ new WeakSet();
+    this.#forcedRestore.clear();
+    const logicalKey = this.#logicalKey;
+    if (logicalKey === null) {
+      this.#markCurrentFieldsKnown();
       return;
     }
-    let restoredAny = false;
-    for (const { field, key: fieldKey } of this.#fieldEntries()) {
-      if (!Object.hasOwn(data, fieldKey)) continue;
-      this.#applyValue(field, data[fieldKey]);
-      restoredAny = true;
+    const result = readLocalStorage(this.#storageKey(logicalKey));
+    if (!result.ok) {
+      this.#dispatchError(logicalKey, "read", "unavailable");
+      this.#markCurrentFieldsKnown();
+      return;
     }
-    if (restoredAny) {
+    if (result.value === null) {
+      this.#markCurrentFieldsKnown();
+      return;
+    }
+    const payload = parsePayload(result.value);
+    if (payload === null) {
+      const removal = removeLocalStorage(this.#storageKey(logicalKey));
+      this.#dispatchError(logicalKey, "read", "invalid-payload");
+      if (!removal.ok) this.#dispatchError(logicalKey, "remove", "unavailable");
+      this.#markCurrentFieldsKnown();
+      return;
+    }
+    this.#payload = payload;
+    this.#restoreEntries(null);
+  }
+  /** Restores fields inserted or made eligible after the initial connection. */
+  #restoreDynamicFields() {
+    const selected = new Set(this.#forcedRestore);
+    this.#forcedRestore.clear();
+    for (const { field } of this.#fieldEntries()) {
+      if (!this.#knownFields.has(field)) selected.add(field);
+    }
+    this.#restoreEntries(selected);
+  }
+  /** Applies the active payload to all fields, or only the supplied candidates. */
+  #restoreEntries(selected) {
+    const entries = this.#fieldEntries();
+    for (const { field } of entries) this.#knownFields.add(field);
+    const payload = this.#payload;
+    if (payload === null) return;
+    const savedFields = new Map(payload.fields.map((field) => [field.key, field]));
+    const restoredKeys = /* @__PURE__ */ new Set();
+    const processedRadios = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      if (selected !== null && !selected.has(entry.field)) continue;
+      const saved = savedFields.get(entry.key);
+      if (saved === void 0) continue;
+      const { value } = saved;
+      if (entry.field instanceof HTMLInputElement && entry.field.type === "radio") {
+        if (processedRadios.has(entry.key)) continue;
+        processedRadios.add(entry.key);
+        const radios = entries.filter(
+          ({ key, field }) => key === entry.key && field instanceof HTMLInputElement && field.type === "radio"
+        ).map(({ field }) => field);
+        if (typeof value !== "string" || !radios.some((radio) => radio.value === value)) continue;
+        for (const radio of radios) radio.checked = radio.value === value;
+        restoredKeys.add(entry.key);
+        continue;
+      }
+      if (this.#applyValue(entry.field, value)) restoredKeys.add(entry.key);
+    }
+    if (restoredKeys.size > 0) {
+      this.#observer.takeRecords();
       this.element.setAttribute("data-persist-restored", "true");
       this.dispatch("restore", { detail: { key: this.#logicalKey } });
     }
   }
-  /** Sets a single field's value from a stored entry. */
+  /** Applies a type-compatible stored value without coercion. */
   #applyValue(field, value) {
     if (field instanceof HTMLInputElement && field.type === "checkbox") {
-      field.checked = Boolean(value);
-    } else if (field instanceof HTMLInputElement && field.type === "radio") {
-      field.checked = field.value === value;
-    } else if (field instanceof HTMLSelectElement && field.multiple) {
-      const selected = new Set(Array.isArray(value) ? value.map(String) : []);
+      if (typeof value !== "boolean") return false;
+      field.checked = value;
+      return true;
+    }
+    if (field instanceof HTMLSelectElement && field.multiple) {
+      if (!Array.isArray(value)) return false;
+      const available = new Set(Array.from(field.options).map((option) => option.value));
+      const selected = value.filter((candidate) => available.has(candidate));
+      if (value.length > 0 && selected.length === 0) return false;
+      const selectedValues = new Set(selected);
       for (const option of Array.from(field.options)) {
-        option.selected = selected.has(option.value);
+        option.selected = selectedValues.has(option.value);
       }
-    } else {
-      field.value = String(value);
+      return true;
+    }
+    if (typeof value !== "string") return false;
+    if (field instanceof HTMLSelectElement) {
+      const exists = Array.from(field.options).some((option) => option.value === value);
+      if (!exists) return false;
     }
+    field.value = value;
+    return true;
+  }
+  /** Every control this instance owns, before the exclusion list narrows them. */
+  #candidateFields() {
+    return this.hasFieldTarget ? this.fieldTargets.filter(isPersistField) : Array.from(this.element.querySelectorAll("input, textarea, select")).filter(
+      (field) => this.#ownsField(field)
+    );
   }
   /**
-   * Persistable fields paired with a stable storage key. Uniquely-named fields key
-   * by their name. Repeated same-name fields (e.g. a `tags[]` checkbox group or
-   * array text inputs) are disambiguated by DOM-order occurrence — the first keeps
-   * its plain `name`, later ones get a NUL-separated index suffix — so each is
-   * stored and restored individually instead of the last one clobbering the rest.
-   * Radios are the exception: a group intentionally shares one key (one value per
-   * name).
+   * Pairs persistable fields with DOM-order occurrence keys. Every HTML radio
+   * group (same name and form owner) occupies one shared occurrence slot.
    */
   #fieldEntries() {
     const entries = [];
-    const occurrence = /* @__PURE__ */ new Map();
-    for (const field of this.#fields()) {
+    const eligible = [];
+    for (const field of this.#candidateFields()) {
       const name = this.#keyOf(field);
-      if (name === null) continue;
+      if (name === null || !this.#persistable(field, this.#excluded)) continue;
+      eligible.push({ field, name });
+    }
+    const nextOccurrence = /* @__PURE__ */ new Map();
+    const radioSlots = /* @__PURE__ */ new Map();
+    const allocate = (name) => {
+      const occurrence = nextOccurrence.get(name) ?? 0;
+      nextOccurrence.set(name, occurrence + 1);
+      return occurrence === 0 ? name : `${name}${OCCURRENCE_SEP}${occurrence}`;
+    };
+    for (const { field, name } of eligible) {
       if (field instanceof HTMLInputElement && field.type === "radio") {
-        entries.push({ field, key: name });
+        const groups = radioSlots.get(name) ?? /* @__PURE__ */ new Map();
+        radioSlots.set(name, groups);
+        let key = groups.get(field.form);
+        if (key === void 0) {
+          key = allocate(name);
+          groups.set(field.form, key);
+        }
+        entries.push({ field, key });
         continue;
       }
-      const seen = occurrence.get(name) ?? 0;
-      occurrence.set(name, seen + 1);
-      entries.push({ field, key: seen === 0 ? name : `${name}${OCCURRENCE_SEP}${seen}` });
+      entries.push({ field, key: allocate(name) });
     }
     return entries;
   }
-  /** The fields to persist: `field` targets, or the element's named controls. */
-  #fields() {
-    const candidates = this.hasFieldTarget ? this.fieldTargets : Array.from(this.element.querySelectorAll("input, textarea, select"));
-    const excluded = parseStringList(this.excludeValue, DEFAULT_EXCLUDE);
-    return candidates.filter((field) => this.#persistable(field, excluded));
-  }
   /** Whether a field carries a restorable, non-excluded value. */
   #persistable(field, excluded) {
-    if (this.#keyOf(field) === null) return false;
-    const type = field instanceof HTMLInputElement ? field.type : "";
-    if (NON_VALUE_TYPES.has(type)) return false;
-    if (excluded.includes(type)) return false;
+    if (NON_VALUE_TYPES.has(field.type) || SENSITIVE_TYPES.has(field.type)) return false;
+    if (excluded.includes(field.type)) return false;
     if (field.name.length > 0 && excluded.includes(field.name)) return false;
     return true;
   }
@@ -13169,35 +14165,108 @@ var PersistController = class extends Controller {
   #keyOf(field) {
     return field.name || field.id || null;
   }
-  /** The logical key (key Value or element id), or null when neither is set. */
-  get #logicalKey() {
-    const key = this.keyValue || this.element.id;
-    return key.length > 0 ? key : null;
-  }
-  /** The prefixed localStorage key, or null when persistence is disabled. */
-  get #storageKey() {
-    const logical = this.#logicalKey;
-    return logical === null ? null : `${STORAGE_PREFIX}${logical}`;
+  /** Whether this instance, rather than a nested Persist host, owns a field. */
+  #ownsField(field) {
+    return field.closest('[data-controller~="stimeo--persist"]') === this.element;
+  }
+  /** Marks all currently eligible fields without applying a payload. */
+  #markCurrentFieldsKnown() {
+    for (const { field } of this.#fieldEntries()) this.#knownFields.add(field);
+  }
+  /** Switches namespace after flushing the old namespace's pending edit. */
+  #switchLogicalKey() {
+    const next = this.#resolveLogicalKey();
+    if (next === this.#logicalKey) return;
+    this.#flushPendingSave();
+    this.#logicalKey = next;
+    this.#loadActiveDraft();
+  }
+  /** Synchronizes the exact event name owned by the `clearOn` Value. */
+  #syncClearOn() {
+    const next = this.#validEventName(this.clearOnValue);
+    if (next === this.#registeredClearOn) return;
+    this.#unbindClearOn();
+    if (next === null) return;
+    this.element.addEventListener(next, this.#onClearEvent);
+    this.#registeredClearOn = next;
+  }
+  /** Removes the event listener using the name that was actually registered. */
+  #unbindClearOn() {
+    if (this.#registeredClearOn === null) return;
+    this.element.removeEventListener(this.#registeredClearOn, this.#onClearEvent);
+    this.#registeredClearOn = null;
+  }
+  /** Returns a non-whitespace event type, or null when the hook is disabled. */
+  #validEventName(value) {
+    const name = value.trim();
+    return name.length > 0 && !/\s/.test(name) ? name : null;
+  }
+  /** Collects dynamic controls and select-option changes into one restore pass. */
+  #onMutations(records) {
+    let rootIdChanged = false;
+    for (const record of records) {
+      if (record.type === "attributes") {
+        if (record.target === this.element && record.attributeName === "id") {
+          rootIdChanged = true;
+        }
+        this.#collectAttributeCandidate(record.target, record.attributeName);
+        continue;
+      }
+      for (const node of record.addedNodes) this.#collectRestoreCandidate(node);
+    }
+    if (rootIdChanged && this.keyValue.length === 0) this.#switchLogicalKey();
+    this.#restoreDynamic.schedule();
   }
-  #getItem(key) {
-    try {
-      return window.localStorage.getItem(key);
-    } catch {
-      return null;
+  /**
+   * Adds the controls one mutated attribute can affect. Only an ownership change on a
+   * descendant moves fields between Persist hosts, so that is the single case worth a
+   * subtree sweep; every other observed attribute describes one control, and sweeping
+   * from its container would re-apply the stored draft over edits still being debounced.
+   */
+  #collectAttributeCandidate(target, attributeName) {
+    if (attributeName === OWNERSHIP_ATTRIBUTE && target !== this.element) {
+      this.#collectRestoreCandidate(target);
+      return;
     }
+    this.#collectControlCandidate(target);
   }
-  #setItem(key, value) {
-    try {
-      window.localStorage.setItem(key, value);
-    } catch {
+  /** Adds a native control, or the select that owns a mutated option. */
+  #collectControlCandidate(node) {
+    if (isPersistField(node)) {
+      this.#forcedRestore.add(node);
+      return;
+    }
+    if (node instanceof HTMLOptionElement) {
+      const select = node.closest("select");
+      if (select) this.#forcedRestore.add(select);
     }
   }
-  #removeItem(key) {
-    try {
-      window.localStorage.removeItem(key);
-    } catch {
+  /** Adds every control inside an inserted or newly owned subtree. */
+  #collectRestoreCandidate(node) {
+    this.#collectControlCandidate(node);
+    if (!(node instanceof Element)) return;
+    for (const field of node.querySelectorAll("input, textarea, select")) {
+      this.#forcedRestore.add(field);
     }
   }
+  /** Resolves the logical key from the Value, falling back to the host id. */
+  #resolveLogicalKey() {
+    const key = this.keyValue || this.element.id;
+    return key.length > 0 ? key : null;
+  }
+  /** Namespaces one logical key within localStorage. */
+  #storageKey(logicalKey) {
+    return `${STORAGE_PREFIX}${logicalKey}`;
+  }
+  /** Normalizes invalid debounce Values to the documented default. */
+  get #debounceDelay() {
+    const value = this.debounceValue;
+    return Number.isFinite(value) && value >= 0 ? value : DEFAULT_DEBOUNCE;
+  }
+  /** Dispatches one observable storage failure without exposing browser errors. */
+  #dispatchError(key, operation, reason) {
+    this.dispatch("error", { detail: { key, operation, reason } });
+  }
 };
 var PointerDragController = class _PointerDragController extends Controller {
   static targets = ["handle"];
@@ -13553,7 +14622,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     }
   }
 };
-var PopoverController = class _PopoverController extends Controller {
+var PopoverController = class extends Controller {
   static targets = ["trigger", "panel"];
   static values = {
     closeOnScroll: { type: Boolean, default: false }
@@ -13563,8 +14632,6 @@ var PopoverController = class _PopoverController extends Controller {
   #stopScrollDismiss = null;
   /** Escape-stack membership while open; the shared resolver dismisses via it. */
   #escapeLayer = new EscapeLayer();
-  /** Selector for natively focusable elements used to find the first one. */
-  static #FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
   /** Starts closed and registers the standing dismissal listeners. */
   connect() {
     this.close();
@@ -13616,7 +14683,7 @@ var PopoverController = class _PopoverController extends Controller {
   }
   /** Moves focus to the first focusable element in the panel, or the panel itself. */
   #focusFirst() {
-    const first = this.panelTarget.querySelector(_PopoverController.#FOCUSABLE);
+    const first = firstTabStop(this.panelTarget);
     if (first) {
       first.focus();
       return;
@@ -13921,7 +14988,7 @@ function isInteractiveHost(element) {
 }
 
 // src/controllers/radio_group_controller.ts
-var OBSERVED_ATTRIBUTES = [
+var OBSERVED_ATTRIBUTES3 = [
   "aria-checked",
   "aria-disabled",
   "contenteditable",
@@ -14371,7 +15438,7 @@ var RadioGroupController = class extends Controller {
       subtree: true,
       childList: true,
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributeFilter: OBSERVED_ATTRIBUTES3
     });
     let ancestor = this.element.parentElement;
     while (ancestor) {
@@ -15661,15 +16728,60 @@ var RovingController = class extends Controller {
     this.#roving.setActive(active === -1 ? 0 : active);
   }
 };
-var FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-  "[contenteditable='true']"
-].join(",");
+
+// src/utils/style_property_lease.ts
+var StylePropertyLease = class {
+  #property;
+  #records = /* @__PURE__ */ new Map();
+  /** @param property - The CSS property whose temporary values this lease owns. */
+  constructor(property) {
+    this.#property = property;
+  }
+  /** Writes or removes the leased declaration while preserving its authored value. */
+  write(element, value, priority = "") {
+    const existing = this.#records.get(element);
+    if (existing) {
+      existing.writtenValue = value;
+      existing.writtenPriority = value === null ? "" : priority;
+    } else {
+      this.#records.set(element, {
+        originalValue: element.style.getPropertyValue(this.#property),
+        originalPriority: element.style.getPropertyPriority(this.#property),
+        writtenValue: value,
+        writtenPriority: value === null ? "" : priority
+      });
+    }
+    this.#reflect(element, value, priority);
+  }
+  /** Returns one lease without overwriting a later consumer declaration. */
+  return(element) {
+    const record = this.#records.get(element);
+    if (!record) return;
+    this.#records.delete(element);
+    const style = element.style;
+    const stillOwned = style.getPropertyValue(this.#property) === (record.writtenValue ?? "") && style.getPropertyPriority(this.#property) === record.writtenPriority;
+    if (stillOwned) {
+      this.#reflect(element, record.originalValue, record.originalPriority);
+    }
+  }
+  /** Returns every outstanding declaration lease. */
+  returnAll() {
+    for (const element of Array.from(this.#records.keys())) this.return(element);
+  }
+  /** Reflects only a real declaration transition. */
+  #reflect(element, value, priority) {
+    const style = element.style;
+    const nextValue = value ?? "";
+    const nextPriority = value === null ? "" : priority;
+    if (style.getPropertyValue(this.#property) === nextValue && style.getPropertyPriority(this.#property) === nextPriority) {
+      return;
+    }
+    if (value === null) style.removeProperty(this.#property);
+    else style.setProperty(this.#property, value, priority);
+  }
+};
+
+// src/controllers/scroll_area_controller.ts
 var EDGE_EPSILON = 1;
 var ScrollAreaController = class extends Controller {
   static targets = ["viewport"];
@@ -15677,31 +16789,60 @@ var ScrollAreaController = class extends Controller {
     orientation: { type: String, default: "vertical" }
   };
   static events = ["reach"];
-  #layout = new LayoutObserver(() => this.#update());
-  /** Current element receiving scroll, resize, mutation, and keyboard-reach behavior. */
-  #viewport = null;
-  /** Guards target callbacks before connect and after disconnect. */
-  #connected = false;
-  /** Collapses target replacement callbacks into one final-DOM rebind. */
+  #layout = new LayoutObserver(() => this.#refresh());
   #rebind = new MicrotaskCoalescer(() => this.#syncViewport());
-  /** Re-checks the tab stop when the viewport's focusable content comes or goes. */
-  #content = null;
-  /** Last edge reported via `reach`, so the event fires once per arrival. */
-  #lastEdge = null;
-  /** Whether this controller added `tabindex`, so teardown only removes its own. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #tabindex = new TabindexLoan("0");
-  /** Temporarily owns a derived `role="region"` without losing an authored replacement. */
   #role = new AttributeLease("role");
+  #overflowState = new AttributeLease("data-overflow");
+  #scrollState = new AttributeLease("data-scroll");
+  #progress = new StylePropertyLease("--stimeo--scroll-progress");
+  #viewport = null;
+  #content = null;
+  #nameSources = null;
+  #nameGraph = null;
+  #observedNameIds = /* @__PURE__ */ new Set();
+  #observedNameSources = [];
+  #fonts = null;
+  #scrollFrame = null;
+  #overflowing = false;
+  #lastEdge = null;
+  #ownedHostMutations = /* @__PURE__ */ new Map();
   #onScroll = () => {
-    this.#update();
+    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();
+  };
+  #onFontsSettled = () => {
+    this.#refresh();
   };
   connect() {
-    this.#connected = true;
+    this.#beforeCache.activate();
     this.#rebind.activate();
     this.#layout.observeViewport();
+    this.#bindFonts();
     this.#syncViewport();
   }
-  /** Schedules a complete observer/listener rebind for a runtime viewport target. */
+  disconnect() {
+    this.#beforeCache.deactivate();
+    this.#rebind.cancel();
+    this.#cancelScrollFrame();
+    if (this.#viewport) this.#unbindViewport(this.#viewport);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+    this.#clearHostState();
+  }
+  /** Re-measures when a retained viewport's orientation Value is morphed. */
+  orientationValueChanged() {
+    this.#refresh();
+  }
+  /** Schedules a complete resource rebind for a runtime viewport target. */
   viewportTargetConnected() {
     this.#rebind.schedule();
   }
@@ -15709,149 +16850,295 @@ var ScrollAreaController = class extends Controller {
   viewportTargetDisconnected() {
     this.#rebind.schedule();
   }
-  /** Rebinds every viewport-owned resource against the final target in this mutation batch. */
+  /** Rebinds every viewport-owned resource against the final target in the mutation batch. */
   #syncViewport() {
-    if (!this.#connected) return;
     const next = this.hasViewportTarget ? this.viewportTarget : null;
     if (next === this.#viewport) {
-      this.#update();
+      if (next) this.#refresh();
+      else this.#clearHostState();
       return;
     }
     if (this.#viewport) this.#unbindViewport(this.#viewport);
     this.#viewport = next;
-    if (!next) return;
+    if (!next) {
+      this.#clearHostState();
+      return;
+    }
     next.addEventListener("scroll", this.#onScroll, { passive: true });
+    next.addEventListener("load", this.#onLoad, true);
     this.#layout.observe(next);
-    if (typeof MutationObserver !== "undefined") {
-      this.#content = new MutationObserver(() => {
-        if (this.#viewport !== next) return;
-        this.#syncKeyboardReach(next, this.#syncOverflow(next));
-      });
-      this.#content.observe(next, {
-        subtree: true,
-        childList: true,
-        attributes: true
-      });
-    }
-    this.#update();
+    this.#bindContentObserver(next);
+    this.#refresh();
   }
-  disconnect() {
-    this.#connected = false;
-    this.#rebind.cancel();
-    if (this.#viewport) this.#unbindViewport(this.#viewport);
-    this.#layout.disconnect();
-    this.#lastEdge = null;
+  /** Observes structural and attribute changes that can alter overflow or Tab stops. */
+  #bindContentObserver(viewport) {
+    this.#content = new MutationObserver((records) => {
+      if (this.#viewport !== viewport || !this.#hasRelevantContentMutation(records)) return;
+      this.#refresh();
+    });
+    this.#content.observe(viewport, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      characterData: true
+    });
+  }
+  /** Ignores only state-hook mutations whose exact value this controller just wrote. */
+  #hasRelevantContentMutation(records) {
+    let relevant = false;
+    const consumed = /* @__PURE__ */ new Set();
+    for (const record of records) {
+      const attribute = record.attributeName;
+      if (record.type === "attributes" && record.target === this.element && attribute !== null && this.#ownedHostMutations.has(attribute) && this.element.getAttribute(attribute) === this.#ownedHostMutations.get(attribute)) {
+        consumed.add(attribute);
+      } else {
+        relevant = true;
+      }
+    }
+    for (const attribute of consumed) this.#ownedHostMutations.delete(attribute);
+    return relevant;
   }
-  /** Releases every resource and derived attribute owned by one former viewport. */
+  /** Releases every resource and borrowed attribute owned by one former viewport. */
   #unbindViewport(viewport) {
+    this.#cancelScrollFrame();
     viewport.removeEventListener("scroll", this.#onScroll);
+    viewport.removeEventListener("load", this.#onLoad, true);
     this.#layout.unobserve(viewport);
     this.#content?.disconnect();
     this.#content = null;
-    this.#clearAddedAttributes(viewport);
-    if (this.#viewport === viewport) this.#viewport = null;
+    this.#disconnectNameSources();
+    this.#clearViewportAttributes(viewport);
+    this.#ownedHostMutations.clear();
+    this.#viewport = null;
+    this.#overflowing = false;
     this.#lastEdge = null;
   }
-  /** Re-measures overflow and scroll position and reflects the state hooks. */
-  #update() {
-    const vp = this.#viewport;
-    if (!vp) return;
-    const overflowing = this.#syncOverflow(vp);
-    this.#syncKeyboardReach(vp, overflowing);
-    const { position, progress } = this.#measurePosition(vp);
-    this.element.setAttribute("data-scroll", position);
-    this.element.style.setProperty("--stimeo--scroll-progress", String(progress));
-    const edge = position === "start" ? "start" : position === "end" ? "end" : null;
-    if (overflowing && edge && edge !== this.#lastEdge) {
-      this.#lastEdge = edge;
-      this.dispatch("reach", { detail: { edge } });
-    } else if (!edge) {
-      this.#lastEdge = null;
-    }
-  }
-  /**
-   * Measures overflow and reflects the `data-overflow` hook.
-   *
-   * The write is skipped when the value is unchanged. An identical `setAttribute` still
-   * queues a MutationRecord, and markup that puts the viewport target on the controller
-   * element itself would then have the content observer trigger its own next callback.
-   */
-  #syncOverflow(vp) {
-    const overflowing = this.#measureOverflow(vp);
-    const next = overflowing ? "true" : "false";
-    if (this.element.getAttribute("data-overflow") !== next) {
-      this.element.setAttribute("data-overflow", next);
-    }
+  /** Runs the full structural and positional measurement pass. */
+  #refresh() {
+    const viewport = this.#viewport;
+    if (!viewport) return;
+    this.#cancelScrollFrame();
+    this.#syncNameSources(viewport);
+    this.#overflowing = this.#syncOverflow(viewport);
+    this.#syncKeyboardReach(viewport, this.#overflowing);
+    this.#syncPosition(viewport, this.#overflowing);
+  }
+  /** Measures overflow and reflects the state hook without identical DOM writes. */
+  #syncOverflow(viewport) {
+    const overflowing = this.#measureOverflow(viewport);
+    this.#writeHostAttribute(this.#overflowState, "data-overflow", overflowing ? "true" : "false");
     return overflowing;
   }
-  #measureOverflow(vp) {
-    const o = this.orientationValue;
-    const vertical = o !== "horizontal" && vp.scrollHeight > vp.clientHeight + EDGE_EPSILON;
-    const horizontal = o !== "vertical" && vp.scrollWidth > vp.clientWidth + EDGE_EPSILON;
+  /** Measures the primary-axis position and dispatches a newly established edge. */
+  #syncPosition(viewport, overflowing) {
+    const { position, progress } = this.#measurePosition(viewport);
+    this.#writeHostAttribute(this.#scrollState, "data-scroll", position);
+    this.#writeHostProgress(String(progress));
+    const edge = overflowing && (position === "start" || position === "end") ? position : null;
+    if (edge === this.#lastEdge) return;
+    this.#lastEdge = edge;
+    if (edge) this.dispatch("reach", { detail: { edge } });
+  }
+  /** Writes one leased host attribute and records self-generated observer input. */
+  #writeHostAttribute(lease, attribute, value) {
+    const before = this.element.getAttribute(attribute);
+    lease.write(this.element, value);
+    this.#recordOwnedHostMutation(attribute, before);
+  }
+  /** Writes the leased progress property and records its serialized style mutation. */
+  #writeHostProgress(value) {
+    const before = this.element.getAttribute("style");
+    this.#progress.write(this.element, value);
+    this.#recordOwnedHostMutation("style", before);
+  }
+  /** Records an exact host mutation only when the host is also the observed viewport. */
+  #recordOwnedHostMutation(attribute, before) {
+    if (this.#viewport !== this.element) return;
+    const after = this.element.getAttribute(attribute);
+    if (after !== before) this.#ownedHostMutations.set(attribute, after);
+  }
+  /** Returns host hooks to authored values and clears edge bookkeeping. */
+  #clearHostState() {
+    this.#overflowState.returnAll();
+    this.#scrollState.returnAll();
+    this.#progress.returnAll();
+    this.#ownedHostMutations.clear();
+    this.#overflowing = false;
+    this.#lastEdge = null;
+  }
+  /** Whether the configured axis currently has a scroll range. */
+  #measureOverflow(viewport) {
+    const orientation = this.orientationValue;
+    const vertical = orientation !== "horizontal" && viewport.scrollHeight > viewport.clientHeight + EDGE_EPSILON;
+    const horizontal = orientation !== "vertical" && viewport.scrollWidth > viewport.clientWidth + EDGE_EPSILON;
     return vertical || horizontal;
   }
-  /**
-   * Reports the scroll position bucket and 0–1 progress on the primary axis. For
-   * `both`, the vertical axis is used when it overflows, otherwise the horizontal.
-   */
-  #measurePosition(vp) {
-    const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && vp.scrollHeight <= vp.clientHeight + EDGE_EPSILON;
-    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontalPrimary);
+  /** Reports the primary-axis position bucket and normalized 0–1 progress. */
+  #measurePosition(viewport) {
+    const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && viewport.scrollHeight <= viewport.clientHeight + EDGE_EPSILON;
+    const { position: scrollPosition, max: maxScroll } = logicalScrollMetrics(
+      viewport,
+      horizontalPrimary
+    );
     if (maxScroll <= EDGE_EPSILON) return { position: "start", progress: 0 };
-    const progress = Math.min(1, Math.max(0, scrollPos / maxScroll));
-    if (scrollPos <= EDGE_EPSILON) return { position: "start", progress };
-    if (scrollPos >= maxScroll - EDGE_EPSILON) return { position: "end", progress };
+    const progress = Math.min(1, Math.max(0, scrollPosition / maxScroll));
+    if (scrollPosition <= EDGE_EPSILON) return { position: "start", progress };
+    if (scrollPosition >= maxScroll - EDGE_EPSILON) return { position: "end", progress };
     return { position: "middle", progress };
   }
-  /**
-   * Makes the viewport keyboard-scrollable when it overflows and contains no
-   * focusable elements of its own (avoiding a double tab stop). Adds `role="region"`
-   * only when the viewport already carries an accessible name.
-   */
-  #syncKeyboardReach(vp, overflowing) {
-    const wantsTabindex = overflowing && !this.#hasFocusableContent(vp);
-    if (wantsTabindex) {
-      this.#tabindex.lend(vp);
-      if (!vp.hasAttribute("role") && this.#hasAccessibleName(vp)) {
-        this.#role.write(vp, "region");
-      }
+  /** Borrows keyboard reach only when no usable descendant already owns a Tab stop. */
+  #syncKeyboardReach(viewport, overflowing) {
+    const wantsTabindex = overflowing && !hasTabStop(viewport);
+    if (!wantsTabindex) {
+      this.#clearViewportAttributes(viewport);
+      return;
+    }
+    this.#tabindex.lend(viewport);
+    if (this.#hasAccessibleName(viewport)) {
+      if (!viewport.hasAttribute("role")) this.#role.write(viewport, "region");
     } else {
-      this.#clearAddedAttributes(vp);
+      this.#role.return(viewport);
     }
   }
-  /** Removes (and resets the flags for) only the attributes this controller added. */
-  #clearAddedAttributes(vp) {
+  /** Returns only the viewport attributes borrowed by this controller. */
+  #clearViewportAttributes(viewport) {
     this.#tabindex.returnAll();
-    this.#role.return(vp);
+    this.#role.return(viewport);
+  }
+  /** Whether the viewport already has a non-empty accessible name. */
+  #hasAccessibleName(viewport) {
+    const sources = this.#resolveNameSources(viewport);
+    if (sources.length > 0) {
+      return sources.some((source) => {
+        const label = source.getAttribute("aria-label")?.trim();
+        return Boolean(label || source.textContent?.trim());
+      });
+    }
+    return Boolean(viewport.getAttribute("aria-label")?.trim());
+  }
+  /** Resolves unique, live `aria-labelledby` references in authored order. */
+  #resolveNameSources(viewport) {
+    const ids = this.#nameReferenceIds(viewport);
+    const sources = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const id of ids) {
+      const source = viewport.ownerDocument.getElementById(id);
+      if (source && !seen.has(source)) {
+        seen.add(source);
+        sources.push(source);
+      }
+    }
+    return sources;
   }
-  /**
-   * Whether the viewport owns something the user can Tab to *right now*.
-   *
-   * The selector alone is not enough: a `display: none` button still matches it,
-   * so a viewport whose only control is revealed on demand would never get a tab
-   * stop — leaving it unreachable by keyboard exactly while it has nothing else to
-   * offer. Only rendered candidates count.
-   */
-  #hasFocusableContent(vp) {
-    return Array.from(vp.querySelectorAll(FOCUSABLE_SELECTOR)).some(
-      (el) => this.#isRendered(el)
+  /** Observes external name sources so a retained region never becomes unnamed. */
+  #syncNameSources(viewport) {
+    const ids = this.#nameReferenceIds(viewport);
+    const sources = this.#resolveNameSources(viewport).filter(
+      (source) => !viewport.contains(source)
     );
+    if (ids.length === this.#observedNameIds.size && ids.every((id) => this.#observedNameIds.has(id)) && sources.length === this.#observedNameSources.length && sources.every((source, index) => source === this.#observedNameSources[index])) {
+      return;
+    }
+    this.#disconnectNameSources();
+    this.#observedNameIds = new Set(ids);
+    this.#observedNameSources = sources;
+    if (ids.length > 0) {
+      this.#nameGraph = new MutationObserver((records) => {
+        if (this.#viewport === viewport && this.#hasRelevantNameGraphMutation(records)) {
+          this.#refresh();
+        }
+      });
+      const documentElement = viewport.ownerDocument.documentElement;
+      if (documentElement) {
+        this.#nameGraph.observe(documentElement, {
+          subtree: true,
+          childList: true,
+          attributes: true,
+          attributeFilter: ["id"],
+          attributeOldValue: true
+        });
+      }
+    }
+    if (sources.length === 0) return;
+    this.#nameSources = new MutationObserver(() => {
+      this.#refresh();
+    });
+    for (const source of sources) {
+      this.#nameSources.observe(source, {
+        subtree: true,
+        childList: true,
+        characterData: true,
+        attributes: true
+      });
+    }
   }
-  /**
-   * Whether `el` is actually rendered, and so can hold focus.
-   *
-   * `checkVisibility()` answers this for every way CSS can remove a box, including
-   * a class-driven `display: none` that no attribute reveals. The `hidden` walk in
-   * front of it is not redundant: it is the one case a DOM-only environment with no
-   * layout engine has to be told about explicitly.
-   */
-  #isRendered(el) {
-    if (el.closest("[hidden]") !== null) return false;
-    const check = el.checkVisibility;
-    return typeof check === "function" ? check.call(el, { visibilityProperty: true }) : true;
+  /** Returns normalized unique label-reference ids in authored order. */
+  #nameReferenceIds(viewport) {
+    const tokens = viewport.getAttribute("aria-labelledby")?.trim().split(/\s+/).filter(Boolean);
+    return Array.from(new Set(tokens));
   }
-  #hasAccessibleName(vp) {
-    return vp.hasAttribute("aria-label") || vp.hasAttribute("aria-labelledby");
+  /** Whether document-graph changes can resolve or invalidate a referenced id. */
+  #hasRelevantNameGraphMutation(records) {
+    for (const record of records) {
+      if (record.type === "attributes") {
+        const current = record.target.id;
+        if (this.#observedNameIds.has(current) || this.#observedNameIds.has(record.oldValue ?? "")) {
+          return true;
+        }
+        continue;
+      }
+      for (const node of [...record.addedNodes, ...record.removedNodes]) {
+        if (this.#nodeContainsObservedNameId(node)) return true;
+      }
+    }
+    return false;
+  }
+  /** Whether a changed subtree contains one of the current label-reference ids. */
+  #nodeContainsObservedNameId(node) {
+    if (!(node instanceof Element)) return false;
+    if (this.#observedNameIds.has(node.id)) return true;
+    return Array.from(node.querySelectorAll("[id]")).some(
+      (element) => this.#observedNameIds.has(element.id)
+    );
+  }
+  /** Stops observing accessible-name sources. */
+  #disconnectNameSources() {
+    this.#nameSources?.disconnect();
+    this.#nameSources = null;
+    this.#nameGraph?.disconnect();
+    this.#nameGraph = null;
+    this.#observedNameIds.clear();
+    this.#observedNameSources = [];
+  }
+  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
+  #bindFonts() {
+    const fonts = this.element.ownerDocument.fonts;
+    if (!fonts || this.#fonts === fonts) return;
+    this.#unbindFonts();
+    this.#fonts = fonts;
+    fonts.addEventListener("loadingdone", this.#onFontsSettled);
+    fonts.addEventListener("loadingerror", this.#onFontsSettled);
+  }
+  /** Removes the font completion subscriptions. */
+  #unbindFonts() {
+    this.#fonts?.removeEventListener("loadingdone", this.#onFontsSettled);
+    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();
+    if (this.#viewport) this.#unbindViewport(this.#viewport);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+    this.#clearHostState();
   }
 };
 var ScrollRestoreController = class extends Controller {
@@ -16440,93 +17727,190 @@ var ScrollspyController = class extends Controller {
     return value.substring(1) || null;
   }
 };
+var DEFAULT_MIN2 = 0;
+var DEFAULT_MAX2 = 100;
 var SeparatorController = class extends Controller {
   static values = {
     orientation: { type: String, default: "horizontal" },
     focusable: { type: Boolean, default: false },
-    step: { type: Number, default: 1 }
+    min: { type: Number, default: DEFAULT_MIN2 },
+    max: { type: Number, default: DEFAULT_MAX2 },
+    step: { type: Number, default: 1 },
+    value: { type: Number, default: DEFAULT_MIN2 }
   };
   static actions = ["onKeydown"];
   static events = ["change"];
+  #role = new AttributeLease("role");
+  #tabindex = new AttributeLease("tabindex");
+  #orientation = new AttributeLease("aria-orientation");
+  #minimum = new AttributeLease("aria-valuemin");
+  #maximum = new AttributeLease("aria-valuemax");
+  #current = new AttributeLease("aria-valuenow");
+  /** Collapses a morph that changes several render Values into one silent repaint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
+  /** Restores authored semantics before Turbo snapshots the element. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Hydrates legacy ARIA input once, normalizes the current Value, and renders. */
   connect() {
-    setDefaultAttribute(this.element, "role", "separator");
-    setDefaultAttribute(this.element, "aria-orientation", this.orientationValue);
-    if (this.focusableValue) {
-      setDefaultAttribute(this.element, "tabindex", "0");
-      setDefaultAttribute(this.element, "aria-valuemin", "0");
-      setDefaultAttribute(this.element, "aria-valuemax", "100");
-      setDefaultAttribute(this.element, "aria-valuenow", String(this.#clamp(this.#value)));
-    }
+    this.#hydrateValues();
+    this.#repaint.activate();
+    this.#beforeCache.activate();
+    const value = this.#currentValue();
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#render();
+  }
+  /** Cancels repaint work and returns every semantic attribute this instance controlled. */
+  disconnect() {
+    this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#returnAttributes();
+  }
+  /** Silently repaints an orientation changed by application code or a Turbo morph. */
+  orientationValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently adds or removes the focusable range semantics at runtime. */
+  focusableValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a minimum changed by application code or a Turbo morph. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a maximum changed by application code or a Turbo morph. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a step changed by application code or a Turbo morph. */
+  stepValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Silently repaints a current value changed by application code or a Turbo morph. */
+  valueValueChanged() {
+    this.#repaint.schedule();
   }
   /** Adjusts the value on arrow / Home / End keys (focusable variant only). */
   onKeydown(event) {
-    if (isReservedArrowChord(event)) return;
-    if (!this.focusableValue) return;
-    const horizontal = this.element.getAttribute("aria-orientation") !== "vertical";
+    if (isReservedArrowChord(event) || !this.focusableValue) return;
+    const horizontal = this.#effectiveOrientation === "horizontal";
+    const range = this.#effectiveRange;
+    const current = snapSteppedValue(this.valueValue, range);
     let next = null;
     switch (event.key) {
       case "ArrowUp":
-        if (horizontal) next = this.#value + this.stepValue;
+        if (horizontal) next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowDown":
-        if (horizontal) next = this.#value - this.stepValue;
+        if (horizontal) next = stepSteppedValue(current, -1, range);
         break;
       case "ArrowRight":
-        if (!horizontal) next = this.#value + this.stepValue;
+        if (!horizontal) next = stepSteppedValue(current, 1, range);
         break;
       case "ArrowLeft":
-        if (!horizontal) next = this.#value - this.stepValue;
+        if (!horizontal) next = stepSteppedValue(current, -1, range);
         break;
       case "Home":
-        next = this.#min;
+        next = range.min;
         break;
       case "End":
-        next = this.#max;
+        next = range.max;
         break;
       default:
         return;
     }
     if (next === null) return;
     event.preventDefault();
-    const clamped = this.#clamp(next);
-    if (clamped === this.#value) return;
-    this.element.setAttribute("aria-valuenow", String(clamped));
-    this.dispatch("change", { detail: { value: clamped } });
+    this.#commit(next, current);
   }
-  get #value() {
-    return this.#numericAttr("aria-valuenow", 0);
+  /** Stores a normalized user value, renders immediately, and reports real changes. */
+  #commit(raw, previous) {
+    const value = snapSteppedValue(raw, this.#effectiveRange);
+    if (!Object.is(this.valueValue, value)) this.valueValue = value;
+    this.#render();
+    if (value !== previous) this.dispatch("change", { detail: { value } });
   }
-  get #min() {
-    return this.#numericAttr("aria-valuemin", 0);
+  /**
+   * Reflects live Values into the connected element without dispatching.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const range = this.#effectiveRange;
+    const value = snapSteppedValue(this.valueValue, range);
+    this.#role.write(this.element, "separator");
+    this.#orientation.write(this.element, this.#effectiveOrientation);
+    if (!this.focusableValue) {
+      this.#tabindex.write(this.element, null);
+      this.#minimum.write(this.element, null);
+      this.#maximum.write(this.element, null);
+      this.#current.write(this.element, null);
+      return;
+    }
+    this.#tabindex.write(this.element, "0");
+    this.#minimum.write(this.element, String(range.min));
+    this.#maximum.write(this.element, String(range.max));
+    this.#current.write(this.element, String(value));
   }
-  get #max() {
-    return this.#numericAttr("aria-valuemax", 100);
+  /** Effective orientation; unknown strings fall back to the horizontal contract. */
+  get #effectiveOrientation() {
+    return this.orientationValue === "vertical" ? "vertical" : "horizontal";
   }
-  #clamp(value) {
-    return Math.min(this.#max, Math.max(this.#min, value));
+  /** Finite, ordered range shared by rendering and keyboard stepping. */
+  get #effectiveRange() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN2;
+    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX2;
+    return {
+      min,
+      max: Math.max(min, candidateMax),
+      step: this.stepValue,
+      base: min
+    };
   }
-  #numericAttr(name, fallback) {
-    const parsed = Number.parseFloat(this.element.getAttribute(name) ?? "");
-    return Number.isNaN(parsed) ? fallback : parsed;
+  /** Current normalized value derived from the live declarative inputs. */
+  #currentValue() {
+    return snapSteppedValue(this.valueValue, this.#effectiveRange);
+  }
+  /** Copies valid authored ARIA into Values only when no explicit Value exists. */
+  #hydrateValues() {
+    if (!this.#hasInput("orientation")) {
+      const orientation = this.element.getAttribute("aria-orientation");
+      if (orientation === "horizontal" || orientation === "vertical") {
+        this.orientationValue = orientation;
+      }
+    }
+    const min = this.#finiteAttribute("aria-valuemin");
+    if (!this.#hasInput("min") && min !== null) this.minValue = min;
+    const max = this.#finiteAttribute("aria-valuemax");
+    if (!this.#hasInput("max") && max !== null) this.maxValue = max;
+    const value = this.#finiteAttribute("aria-valuenow");
+    if (!this.#hasInput("value") && value !== null) this.valueValue = value;
+  }
+  /** Whether the author supplied the namespaced Value instead of using its default. */
+  #hasInput(name) {
+    return this.element.hasAttribute(`data-${this.identifier}-${name}-value`);
+  }
+  /** Strict finite-number parser for the one-time progressive-enhancement bridge. */
+  #finiteAttribute(name) {
+    const raw = this.element.getAttribute(name);
+    if (raw === null || raw.trim() === "") return null;
+    const value = Number(raw);
+    return Number.isFinite(value) ? value : null;
   }
-};
-
-// src/utils/safe_storage.ts
-function readLocalStorage(key) {
-  try {
-    return window.localStorage.getItem(key);
-  } catch {
-    return null;
+  /** Returns attributes without overwriting values a consumer changed after render. */
+  #returnAttributes() {
+    this.#role.return(this.element);
+    this.#tabindex.return(this.element);
+    this.#orientation.return(this.element);
+    this.#minimum.return(this.element);
+    this.#maximum.return(this.element);
+    this.#current.return(this.element);
   }
-}
-function writeLocalStorage(key, value) {
-  try {
-    window.localStorage.setItem(key, value);
-  } catch {
+  /** Prevents a queued Value repaint from racing Turbo's restored snapshot. */
+  #rewindForCache() {
+    this.#repaint.cancel();
+    this.#returnAttributes();
   }
-}
-
-// src/controllers/sidebar_controller.ts
+};
 var SidebarController = class extends Controller {
   static targets = ["trigger", "panel", "backdrop"];
   static values = {
@@ -16787,8 +18171,8 @@ var SidebarController = class extends Controller {
   #restoreCollapsed() {
     const key = this.#storageKey;
     if (key) {
-      const stored = readLocalStorage(key);
-      if (stored !== null) return stored === "1";
+      const result = readLocalStorage(key);
+      if (result.ok && result.value !== null) return result.value === "1";
     }
     const domState = this.hasPanelTarget ? this.panelTarget.getAttribute("data-state") : null;
     if (domState === "collapsed") return true;
@@ -17890,172 +19274,314 @@ var StickyObserverController = class extends Controller {
     this.dispatch("change", { detail: { stuck: next } });
   }
 };
-var ORIGINAL_LABEL = "data-submit-once-original-label";
-var DISABLED_MARKER2 = "data-submit-once-disabled";
 var BUTTON_BUSY_LABEL = "data-submit-once-busy-label";
 var SubmitOnceController = class extends Controller {
-  static targets = ["submit"];
+  static targets = ["submit", "idle", "busy"];
   static values = {
+    announceText: { type: String, default: "" },
+    announceReadyText: { type: String, default: "" },
     busyLabel: { type: String, default: "" },
     timeout: { type: Number, default: 0 },
     restoreFocus: { type: Boolean, default: false }
   };
-  static actions = ["start"];
+  static actions = ["cancel", "finish", "start"];
   static events = ["start", "end"];
-  #timeouts = new SafeTimeout();
-  #timeoutId = null;
-  #busy = false;
-  #submitter = null;
+  #timers = new SafeTimeout();
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #sessions = /* @__PURE__ */ new Map();
+  #disabled = new AttributeLease("disabled");
+  #controlBusy = new AttributeLease("aria-busy");
+  #formBusy = new AttributeLease("aria-busy");
+  #submitting = new AttributeLease("data-submitting");
+  #ariaLabel = new AttributeLease("aria-label");
+  #hidden = new AttributeLease("hidden");
   #onSubmitStart = (event) => {
     this.start(event);
   };
   #onSubmitEnd = (event) => {
-    const success = event.detail?.success;
-    this.#restore(success);
+    this.#complete(this.#eventForm(event), "turbo", this.#eventSuccess(event));
+  };
+  /** Blocks a later native submit while one for the same form is still active. */
+  #onNativeSubmit = (event) => {
+    const session = this.#sessionFor(event.target);
+    if (!session) return;
+    this.#syncControls(session);
+    event.preventDefault();
   };
   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.#clearStaleBusy();
   }
   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.#clearTimeout();
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
   }
   /**
-   * Enters the busy state for the submission started by `event`. Accepts both a
-   * native `SubmitEvent` (manual `submit->#start` on non-Turbo forms) and Turbo's
-   * `turbo:submit-start` CustomEvent (auto-subscribed in `connect`).
+   * Begins the submission represented by `event`.
+   *
+   * Native `submit` events are intended for non-Turbo async forms. Turbo calls
+   * this path through its auto-subscribed `turbo:submit-start` event. An event
+   * whose default an earlier listener already cancelled carries no submission,
+   * so it starts nothing.
    */
   start(event) {
-    if (this.#busy) return;
-    this.#busy = true;
-    const buttons = this.#buttons;
-    const submitter = this.#resolveSubmitter(event, buttons);
-    this.#submitter = submitter;
-    for (const button of buttons) {
-      this.#enterBusy(button, button === submitter);
-    }
-    this.element.setAttribute("data-submitting", "true");
-    this.element.setAttribute("aria-busy", "true");
-    this.dispatch("start", { detail: {} });
+    if (event.defaultPrevented) return;
+    const form = this.#eventForm(event);
+    if (!form || this.#sessions.has(form)) return;
+    const controls = this.#submitControls(form);
+    const submitter = this.#resolveSubmitter(event, controls);
+    const session = {
+      form,
+      submitter,
+      submitterHadFocus: submitter !== null && document.activeElement === submitter,
+      controls: /* @__PURE__ */ new Set(),
+      timeoutId: null,
+      labelWrite: null,
+      idlePart: null,
+      busyPart: null
+    };
+    this.#sessions.set(form, session);
+    this.#formBusy.write(form, "true");
+    this.#submitting.write(form, "true");
+    this.#syncControls(session, controls);
+    this.#enterLabel(session);
+    this.dispatch("start", { detail: { form, submitter } });
     if (this.timeoutValue > 0) {
-      this.#timeoutId = this.#timeouts.set(() => this.#restore(false), this.timeoutValue);
+      session.timeoutId = this.#timers.set(
+        () => this.#complete(form, "timeout", false),
+        this.timeoutValue
+      );
     }
+    announce(this.announceTextValue);
+  }
+  /**
+   * Completes a non-Turbo async submission for the form associated with
+   * `event`. When called directly with no event, it completes the controller's
+   * sole active form (or the controller element itself when it is a form).
+   */
+  finish(event) {
+    const form = event ? this.#eventForm(event) : this.#defaultForm();
+    this.#complete(form, "manual", event ? this.#eventSuccess(event) : void 0);
   }
-  /** Restores the non-busy state, re-enabling buttons and putting labels back. */
-  #restore(success) {
-    if (!this.#busy) return;
-    this.#busy = false;
-    this.#clearTimeout();
-    for (const button of this.#buttons) {
-      this.#exitBusy(button);
+  /**
+   * Abandons the submission for the form associated with `event` because it
+   * never reached the network — a veto from validation, or a request the
+   * consumer gave up before sending. With no event it targets the controller's
+   * sole active form, exactly like {@link finish}.
+   *
+   * The distinction from `finish` is observable: a request that ran and failed
+   * is `finish` with `success: false` and still announces completion, while a
+   * submission that never happened announces nothing.
+   */
+  cancel(event) {
+    const form = event ? this.#eventForm(event) : this.#defaultForm();
+    this.#complete(form, "canceled", false);
+  }
+  /** Disables a newly connected explicit submit target during its form's session. */
+  submitTargetConnected(target) {
+    const session = this.#sessionFor(target.form);
+    if (!session || !this.#isNativeSubmitControl(target)) return;
+    this.#enterControl(session, target);
+  }
+  /** Ends one session, restores owned state, and reports the observable completion. */
+  #complete(form, reason, success) {
+    const session = this.#sessionFor(form);
+    if (!session) return;
+    this.#sessions.delete(session.form);
+    this.#returnSessionState(session);
+    const detail = success === void 0 ? { form: session.form, submitter: session.submitter, reason } : { form: session.form, submitter: session.submitter, reason, success };
+    this.dispatch("end", { detail });
+    this.#restoreFocus(session);
+    if (reason !== "canceled") announce(this.announceReadyTextValue);
+  }
+  /** Applies the busy state to every current native/explicit control exactly once. */
+  #syncControls(session, controls = this.#submitControls(session.form)) {
+    for (const control of controls) this.#enterControl(session, control);
+  }
+  /** Temporarily disables one enabled submit control while retaining authored state. */
+  #enterControl(session, control) {
+    if (session.controls.has(control) || control.matches(":disabled")) return;
+    session.controls.add(control);
+    this.#disabled.write(control, "");
+    this.#controlBusy.write(control, "true");
+  }
+  /** Swaps only the triggering control's safe label channel. */
+  #enterLabel(session) {
+    const control = session.submitter;
+    if (!control) return;
+    const idlePart = this.#partInside(control, this.idleTargets);
+    const busyPart = this.#partInside(control, this.busyTargets);
+    if (idlePart && busyPart) {
+      session.idlePart = idlePart;
+      session.busyPart = busyPart;
+      this.#hidden.write(idlePart, "");
+      this.#hidden.write(busyPart, null);
+    }
+    const label = control.getAttribute(BUTTON_BUSY_LABEL) ?? this.busyLabelValue;
+    if (label.length === 0) return;
+    if (control instanceof HTMLInputElement) {
+      if (control.type !== "submit") return;
+      session.labelWrite = {
+        channel: "value",
+        control,
+        original: control.value,
+        written: label
+      };
+      control.value = label;
+      return;
     }
-    this.element.removeAttribute("data-submitting");
-    this.element.removeAttribute("aria-busy");
-    this.dispatch("end", { detail: { success } });
-    if (this.restoreFocusValue && this.#submitter) {
-      this.#submitter.focus();
+    if (control.hasAttribute("aria-label")) {
+      this.#ariaLabel.write(control, label);
+      return;
     }
-    this.#submitter = null;
-  }
-  /** Disables a button, marks it busy, and swaps the trigger's label. */
-  #enterBusy(button, isTrigger) {
-    if (!button.disabled) {
-      button.disabled = true;
-      button.setAttribute(DISABLED_MARKER2, "true");
-      button.setAttribute("aria-busy", "true");
+    if (control.childElementCount > 0) return;
+    session.labelWrite = {
+      channel: "text",
+      control,
+      original: control.textContent ?? "",
+      written: label
+    };
+    control.textContent = label;
+  }
+  /** Returns labels, controls, and form hooks, respecting intervening consumer writes. */
+  #returnSessionState(session) {
+    if (session.timeoutId !== null) {
+      this.#timers.clear(session.timeoutId);
+      session.timeoutId = null;
+    }
+    if (session.labelWrite?.channel === "value") {
+      const { control, original, written } = session.labelWrite;
+      if (control.value === written) control.value = original;
+    } else if (session.labelWrite?.channel === "text") {
+      const { control, original, written } = session.labelWrite;
+      if (control.childElementCount === 0 && control.textContent === written) {
+        control.textContent = original;
+      }
     }
-    if (!isTrigger) return;
-    const label = button.getAttribute(BUTTON_BUSY_LABEL) ?? this.busyLabelValue;
-    if (label.length === 0) return;
-    if (!button.hasAttribute(ORIGINAL_LABEL)) {
-      button.setAttribute(ORIGINAL_LABEL, this.#getLabel(button));
+    session.labelWrite = null;
+    if (session.submitter instanceof HTMLButtonElement) {
+      this.#ariaLabel.return(session.submitter);
+    }
+    if (session.idlePart) this.#hidden.return(session.idlePart);
+    if (session.busyPart) this.#hidden.return(session.busyPart);
+    session.idlePart = null;
+    session.busyPart = null;
+    for (const control of session.controls) {
+      this.#controlBusy.return(control);
+      this.#disabled.return(control);
+    }
+    session.controls.clear();
+    this.#submitting.return(session.form);
+    this.#formBusy.return(session.form);
+  }
+  /** Restores focus only when disabling the focused submitter actually stranded it. */
+  #restoreFocus(session) {
+    const submitter = session.submitter;
+    if (!this.restoreFocusValue || !session.submitterHadFocus || !submitter?.isConnected) return;
+    const active = document.activeElement;
+    if (active === null || active === document.body || active === document.documentElement) {
+      submitter.focus();
     }
-    this.#setLabel(button, label);
   }
-  /** Re-enables a button we disabled and restores its parked label, if any. */
-  #exitBusy(button) {
-    if (button.hasAttribute(DISABLED_MARKER2)) {
-      button.disabled = false;
-      button.removeAttribute(DISABLED_MARKER2);
-      button.removeAttribute("aria-busy");
-    }
-    const original = button.getAttribute(ORIGINAL_LABEL);
-    if (original !== null) {
-      this.#setLabel(button, original);
-      button.removeAttribute(ORIGINAL_LABEL);
+  /** Silently abandons every session before caching or on a real detach. */
+  #abandonSessions() {
+    this.#timers.clearAll();
+    for (const session of this.#sessions.values()) {
+      session.timeoutId = null;
+      this.#returnSessionState(session);
     }
+    this.#sessions.clear();
+  }
+  /** Keeps Turbo's cached snapshot idle, without events, announcements, or focus moves. */
+  #rewindForCache() {
+    this.#abandonSessions();
+  }
+  /** Tears down a true detach; an in-page move is canceled by the next `connect()`. */
+  #teardown() {
+    this.#gate.cancel();
+    this.#abandonSessions();
   }
-  /** Resets busy state left in a restored cache snapshot without firing events. */
-  #clearStaleBusy() {
-    this.#busy = false;
-    if (this.element.hasAttribute("data-submitting")) {
-      this.element.removeAttribute("data-submitting");
-      this.element.removeAttribute("aria-busy");
+  /** All native controls associated with `form`, plus valid explicit targets. */
+  #submitControls(form) {
+    const controls = /* @__PURE__ */ new Set();
+    for (const element of Array.from(form.elements)) {
+      if (this.#isNativeSubmitControl(element)) controls.add(element);
     }
-    for (const button of this.#buttons) {
-      this.#exitBusy(button);
+    const root = form.getRootNode();
+    for (const image of root.querySelectorAll('input[type="image"]')) {
+      if (image.form === form) controls.add(image);
     }
+    return Array.from(controls);
   }
-  /** The triggering button: the event's submitter when ours, else the first button. */
-  #resolveSubmitter(event, buttons) {
+  /** Resolves the real submitter, falling back to the first enabled submit control. */
+  #resolveSubmitter(event, controls) {
     const submitter = this.#eventSubmitter(event);
-    if (submitter && this.#isSubmitButton(submitter) && buttons.includes(submitter)) {
-      return submitter;
-    }
-    return buttons[0] ?? null;
+    if (submitter && controls.includes(submitter)) return submitter;
+    return controls.find((control) => !control.matches(":disabled")) ?? controls[0] ?? null;
   }
-  /**
-   * Reads the submitter from a native `SubmitEvent` (`event.submitter`) or from
-   * Turbo's `turbo:submit-start` detail (`detail.formSubmission.submitter`), so
-   * the busy label swaps onto the right button under either path.
-   */
+  /** Reads a native or Turbo submitter without assuming `SubmitEvent` exists. */
   #eventSubmitter(event) {
     if (typeof SubmitEvent !== "undefined" && event instanceof SubmitEvent) {
-      return event.submitter;
+      return this.#isNativeSubmitControl(event.submitter) ? event.submitter : null;
     }
     const detail = event.detail;
-    return detail?.formSubmission?.submitter ?? null;
+    const submitter = detail?.formSubmission?.submitter;
+    return this.#isNativeSubmitControl(submitter) ? submitter : null;
   }
-  /** The controlled buttons: `submit` targets, or the form's native submit controls. */
-  get #buttons() {
-    if (this.hasSubmitTarget) return this.submitTargets;
-    return Array.from(
-      this.element.querySelectorAll('button[type="submit"], input[type="submit"]')
-    );
+  /** Finds the form represented by an action/Turbo event and verifies this scope owns it. */
+  #eventForm(event) {
+    const detail = event.detail;
+    const target = event.target;
+    const candidate = (target instanceof HTMLFormElement ? target : null) ?? (target instanceof Element ? target.closest("form") : null) ?? detail?.formSubmission?.formElement ?? detail?.form ?? this.#eventSubmitter(event)?.form ?? (this.element instanceof HTMLFormElement ? this.element : null);
+    return candidate && this.#ownsForm(candidate) ? candidate : null;
+  }
+  /** The only unambiguous form for a direct `finish()` call. */
+  #defaultForm() {
+    if (this.element instanceof HTMLFormElement && this.#ownsForm(this.element))
+      return this.element;
+    if (this.#sessions.size === 1) return this.#sessions.keys().next().value ?? null;
+    return null;
   }
-  #isSubmitButton(el) {
-    return el instanceof HTMLButtonElement || el instanceof HTMLInputElement;
+  /** Prevents an ancestor controller from also taking over a nested instance's form. */
+  #ownsForm(form) {
+    let candidate = form;
+    while (candidate) {
+      const identifiers = (candidate.getAttribute("data-controller") ?? "").split(/\s+/);
+      if (identifiers.includes(this.identifier)) return candidate === this.element;
+      candidate = candidate.parentElement;
+    }
+    return false;
   }
-  /** Reads a button's visible label (input value, aria-label, or text). */
-  #getLabel(button) {
-    if (button instanceof HTMLInputElement) return button.value;
-    const aria = button.getAttribute("aria-label");
-    if (aria !== null) return aria;
-    return button.textContent ?? "";
+  /** Returns the active session for a form-shaped external event value. */
+  #sessionFor(candidate) {
+    if (!(candidate instanceof HTMLFormElement)) return void 0;
+    return this.#sessions.get(candidate);
   }
-  /** Writes a button's visible label through the same channel it was read from. */
-  #setLabel(button, text) {
-    if (button instanceof HTMLInputElement) {
-      button.value = text;
-      return;
-    }
-    if (button.hasAttribute("aria-label")) {
-      button.setAttribute("aria-label", text);
-      return;
-    }
-    button.textContent = text;
+  /** Effective native submit controls, including implicit buttons and image inputs. */
+  #isNativeSubmitControl(element) {
+    if (element instanceof HTMLButtonElement) return element.type === "submit";
+    return element instanceof HTMLInputElement && (element.type === "submit" || element.type === "image");
   }
-  #clearTimeout() {
-    if (this.#timeoutId !== null) {
-      this.#timeouts.clear(this.#timeoutId);
-      this.#timeoutId = null;
-    }
+  /** Finds a structured label part belonging to this button, not a nested control. */
+  #partInside(control, parts) {
+    return parts.find(
+      (part) => control.contains(part) && part.closest("button, input[type=submit], input[type=image]") === control
+    ) ?? null;
+  }
+  /** Reads an optional boolean `success` from Turbo or a manual completion event. */
+  #eventSuccess(event) {
+    const success = event.detail?.success;
+    return typeof success === "boolean" ? success : void 0;
   }
 };
-var OBSERVED_ATTRIBUTES2 = [
+var OBSERVED_ATTRIBUTES4 = [
   "role",
   "aria-checked",
   "tabindex",
@@ -18168,7 +19694,7 @@ var SwitchController = class extends Controller {
   #observeAttributes() {
     this.#attributeObserver.observe(this.element, {
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES2
+      attributeFilter: OBSERVED_ATTRIBUTES4
     });
     let ancestor = this.element.parentElement;
     while (ancestor) {
@@ -18708,8 +20234,8 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    const value = readLocalStorage(this.storageKeyValue);
-    return isMode(value) ? value : null;
+    const result = readLocalStorage(this.storageKeyValue);
+    return result.ok && isMode(result.value) ? result.value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {