stimeo-ui 0.7.0 → 0.8.0

data/dist/index.js

@@ -1025,14 +1025,18 @@ var AutoSubmitController = class extends Controller {
     message: { type: String, default: "" }
   };
   static actions = ["submit"];
-  static events = ["submit", "done"];
+  static events = ["submit", "done", "reconcile"];
   /** Debounce timer registry; one `clearAll()` in disconnect tears it down. */
   #timers = new SafeTimeout();
   /** Id of the pending debounce timer, so a new keystroke can reset it. */
   #pendingId = 0;
+  /** The form the listeners are attached to; target callbacks rebind it. */
+  #boundForm = null;
+  /** Rewinds the transient state hooks just before Turbo snapshots the page. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   /** Clears `aria-busy` and emits completion once Turbo finishes the submit. */
   #onSubmitEnd = () => {
-    this.#form.removeAttribute("aria-busy");
+    this.#boundForm?.removeAttribute("aria-busy");
     const message = this.messageValue;
     this.dispatch("done", { detail: { message: message || void 0 } });
     if (this.announceValue && message) {
@@ -1046,15 +1050,23 @@ var AutoSubmitController = class extends Controller {
     }
   });
   connect() {
-    this.#form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
-    this.#composition.observe(this.#form);
+    this.#beforeCache.activate();
+    this.#bindForm(this.#resolveForm());
   }
   disconnect() {
+    this.#beforeCache.deactivate();
+    this.#bindForm(null);
+    this.#composition.disconnect();
     this.#timers.clearAll();
     this.#pendingId = 0;
-    this.#composition.disconnect();
-    this.#form.removeAttribute("data-auto-submit-pending");
-    this.#form.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+  }
+  /** Follows a `form` target added (or swapped in) at runtime. */
+  formTargetConnected() {
+    this.#bindForm(this.#resolveForm());
+  }
+  /** Follows a `form` target removed (or swapped out) at runtime. */
+  formTargetDisconnected() {
+    this.#bindForm(this.#resolveForm());
   }
   /**
    * Schedules a debounced submit. Wired to `input`/`change`; the `on` value is an
@@ -1068,21 +1080,58 @@ var AutoSubmitController = class extends Controller {
   }
   /** Schedules (and coalesces) the debounced submit for the given trigger. */
   #schedule(trigger) {
-    this.#form.setAttribute("data-auto-submit-pending", "true");
-    if (this.#pendingId) this.#timers.clear(this.#pendingId);
+    const form = this.#boundForm;
+    if (!form) return;
+    form.setAttribute("data-auto-submit-pending", "true");
+    this.#cancelPending();
     this.#pendingId = this.#timers.set(() => {
       this.#pendingId = 0;
-      this.#form.removeAttribute("data-auto-submit-pending");
+      form.removeAttribute("data-auto-submit-pending");
       this.dispatch("submit", { detail: { trigger } });
-      if (this.#form.checkValidity()) {
-        this.#form.setAttribute("aria-busy", "true");
+      if (form.checkValidity()) {
+        form.setAttribute("aria-busy", "true");
       }
-      this.#form.requestSubmit();
+      form.requestSubmit();
     }, this.debounceValue);
   }
-  /** Resolves the form element (explicit `form` target, else the controller root). */
-  get #form() {
-    return this.hasFormTarget ? this.formTarget : this.element;
+  /** Cancels the pending debounced submit, if any (`clear` no-ops on unknown ids). */
+  #cancelPending() {
+    this.#timers.clear(this.#pendingId);
+    this.#pendingId = 0;
+  }
+  /**
+   * Replaces the subscribed form symmetrically. The outgoing form loses the
+   * `turbo:submit-end`/composition listeners, its pending hook, and any pending
+   * debounced submit (which described the outgoing form). An in-flight `aria-busy`
+   * is left for `turbo:submit-end` or the pre-cache rewind — removing it here
+   * would wipe a legitimately in-progress submission.
+   */
+  #bindForm(form) {
+    if (form === this.#boundForm) return;
+    const previous = this.#boundForm;
+    if (previous) {
+      this.#cancelPending();
+      previous.removeAttribute("data-auto-submit-pending");
+      previous.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+      this.#composition.unobserve(previous);
+    }
+    this.#boundForm = form;
+    if (!form) return;
+    form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#composition.observe(form);
+  }
+  /** Resolves the form: the explicit `form` target, else a `<form>` root, else null. */
+  #resolveForm() {
+    if (this.hasFormTarget) return this.formTarget;
+    return this.element instanceof HTMLFormElement ? this.element : null;
+  }
+  /** Returns the transient state hooks to their initial (absent) state. */
+  #rewindForCache() {
+    const inProgress = this.#pendingId !== 0 || this.#boundForm?.hasAttribute("aria-busy") === true;
+    this.#cancelPending();
+    this.#boundForm?.removeAttribute("data-auto-submit-pending");
+    this.#boundForm?.removeAttribute("aria-busy");
+    if (inProgress) this.dispatch("reconcile", { detail: {} });
   }
   /** Whether `type` is one of the whitespace-separated event types in `on`. */
   #triggers(type) {
@@ -2098,6 +2147,11 @@ var CalendarController = class extends Controller {
   }
 };
 
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -2140,11 +2194,13 @@ function rovingMove(current, length, delta, wrap) {
 }
 
 // src/controllers/carousel_controller.ts
+var DEFAULT_INTERVAL = 5e3;
+var OBSERVED_ATTRIBUTES = ["aria-selected", "data-state", "hidden"];
 var CarouselController = class extends Controller {
   static targets = ["slide", "viewport", "prev", "next", "picker", "playToggle"];
   static values = {
     autoplay: { type: Boolean, default: false },
-    interval: { type: Number, default: 5e3 },
+    interval: { type: Number, default: DEFAULT_INTERVAL },
     loop: { type: Boolean, default: true }
   };
   static actions = [
@@ -2159,37 +2215,107 @@ var CarouselController = class extends Controller {
   static events = ["change", "pause", "play", "reconcile"];
   #roving = new RovingTabindex(() => this.pickerTargets);
   #reconcileTargets = new MicrotaskCoalescer(() => this.#reconcileTargetSet());
+  #intervals = new SafeInterval();
+  /** Unreachable step controls and the toggle of a carousel that cannot rotate. */
+  #ariaDisabled = new AttributeLease("aria-disabled");
+  /** The slide container's live-region politeness, which tracks the rotation. */
+  #ariaLive = new AttributeLease("aria-live");
+  /** Pairs with {@link CarouselController.#ariaLive}: only the changed slide is read. */
+  #ariaAtomic = new AttributeLease("aria-atomic");
+  #beforeCache = new BeforeCacheReset(() => this.#returnLeases());
+  /**
+   * Events an authored action binding already took. The delegated listener runs
+   * later — it sits on the controller element, above every control — so it can
+   * consume the mark and stand down, letting the two wirings coexist without
+   * handling one interaction twice.
+   */
+  #handledEvents = /* @__PURE__ */ new WeakSet();
   /**
    * Whether `connect()` has run. Scheduling is already inert outside that window
-   * ({@link MicrotaskCoalescer}), so this only gates the Tab stop a picker
-   * present at mount authored for itself.
+   * ({@link MicrotaskCoalescer}), so this gates the Value callbacks Stimulus
+   * delivers ahead of `connect()`.
    */
   #connected = false;
-  #intervals = new SafeInterval();
   /** Index of the visible slide. */
   #index = 0;
-  /** User intent to autoplay (toggled by the play button / focus hard-stop). */
-  #playing = false;
-  /** Pointer is hovering the carousel: a temporary, auto-resuming suspension. */
+  /** The visible slide element, which identifies it across a changing target set. */
+  #activeSlide = null;
+  /** Slide count at the last resolved state, so a changed total is reportable. */
+  #total = 0;
+  /** Pointer rests on the carousel: a suspension that lifts on `mouseleave`. */
   #pointerPaused = false;
+  /** Focus is inside the carousel: a suspension that lifts when it leaves. */
+  #focusPaused = false;
+  /** The tab is in the background: a suspension that lifts when it returns. */
+  #hiddenPaused = false;
   /** Id of the live autoplay interval, or null when stopped. */
   #timerId = null;
+  /** Delay the live interval was armed with, so an `interval` change re-arms it. */
+  #timerInterval = 0;
+  /** Follows state-attribute rewrites on retained slides and pickers. */
+  #observer = null;
+  /** Keeps a hidden tab from advancing behind the user's back. */
+  #onVisibilityChange = () => {
+    this.#hiddenPaused = document.visibilityState === "hidden";
+    this.#syncTimer();
+  };
   /**
-   * Renders the initial slide and starts autoplay when requested.
+   * Renders the initial slide, wires the delegated listeners, and starts autoplay
+   * when requested.
    *
-   * `findIndex` makes the authored pre-selection first-wins when several pickers
-   * are marked; `#render` then writes an explicit value onto every picker.
+   * Every suspension is re-derived from the environment rather than carried, so an
+   * in-page move — which Stimulus delivers to the *same* controller instance as
+   * `disconnect()` then `connect()` — cannot strand the carousel in a suspension
+   * whose lifting event will never arrive. The attribute observer starts after the
+   * first render so the controller's own opening writes are not fed back to it.
    */
   connect() {
-    const preselected = this.pickerTargets.findIndex(
-      (picker) => picker.getAttribute("aria-selected") === "true"
-    );
-    this.#index = preselected === -1 ? 0 : preselected;
-    this.#playing = this.#initialPlaying();
+    this.#pointerPaused = this.element.matches(":hover");
+    this.#focusPaused = this.element.contains(document.activeElement);
+    this.#hiddenPaused = document.visibilityState === "hidden";
+    if (this.autoplayValue && prefersReducedMotion()) this.autoplayValue = false;
+    this.#index = this.#resolveIndex();
     this.#render({ focus: false });
+    this.#total = this.slideTargets.length;
     this.#syncTimer();
     this.#connected = true;
     this.#reconcileTargets.activate();
+    this.#beforeCache.activate();
+    this.element.addEventListener("click", this.#onClick);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusin", this.#onFocusin);
+    this.element.addEventListener("focusout", this.#onFocusout);
+    this.element.addEventListener("mouseenter", this.#onMouseenter);
+    this.element.addEventListener("mouseleave", this.#onMouseleave);
+    document.addEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#observer = new MutationObserver(this.#onAttributeMutations);
+    this.#observer.observe(this.element, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: OBSERVED_ATTRIBUTES
+    });
+  }
+  /** Releases every listener and observer, returns the leased ARIA, drops the suspensions. */
+  disconnect() {
+    this.#connected = false;
+    this.element.removeEventListener("click", this.#onClick);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    this.element.removeEventListener("focusin", this.#onFocusin);
+    this.element.removeEventListener("focusout", this.#onFocusout);
+    this.element.removeEventListener("mouseenter", this.#onMouseenter);
+    this.element.removeEventListener("mouseleave", this.#onMouseleave);
+    document.removeEventListener("visibilitychange", this.#onVisibilityChange);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#reconcileTargets.cancel();
+    this.#intervals.clearAll();
+    this.#timerId = null;
+    this.#pointerPaused = false;
+    this.#focusPaused = false;
+    this.#hiddenPaused = false;
+    this.#activeSlide = null;
+    this.#returnLeases();
+    this.#beforeCache.deactivate();
   }
   /**
    * Re-establishes the single selected picker when one is added after connect.
@@ -2201,7 +2327,6 @@ var CarouselController = class extends Controller {
    * the selection.
    */
   pickerTargetConnected(picker) {
-    if (!this.#connected) return;
     picker.tabIndex = -1;
     this.#reconcileTargets.schedule();
   }
@@ -2217,74 +2342,173 @@ var CarouselController = class extends Controller {
   slideTargetDisconnected() {
     this.#reconcileTargets.schedule();
   }
-  /**
-   * Resolves the starting autoplay intent. The play toggle's `aria-pressed` is the
-   * source of truth **when present**, so a Turbo Drive cache restore / morph that
-   * re-runs `connect()` against existing DOM does not silently resume autoplay the
-   * user had stopped (e.g. by focusing into the carousel). Only when no toggle
-   * carries `aria-pressed` does it fall back to the declarative `autoplay` value.
-   */
-  #initialPlaying() {
-    if (this.hasPlayToggleTarget && this.playToggleTarget.hasAttribute("aria-pressed")) {
-      return this.playToggleTarget.getAttribute("aria-pressed") === "true";
-    }
-    return this.autoplayValue;
+  /** Follows a rotation intent the page changed at runtime. */
+  autoplayValueChanged() {
+    if (this.#connected) this.#syncTimer();
   }
-  /** Clears the autoplay interval so it never fires after teardown. */
-  disconnect() {
-    this.#connected = false;
-    this.#reconcileTargets.cancel();
-    this.#intervals.clearAll();
-    this.#timerId = null;
+  /** Re-arms the live interval at the new delay without reporting a state change. */
+  intervalValueChanged() {
+    if (this.#connected) this.#syncTimer();
   }
-  /** Advances to the next slide. Bound via `data-action`. */
-  next() {
+  /** Re-publishes the step controls and re-evaluates the non-looping end. */
+  loopValueChanged() {
+    if (!this.#connected) return;
+    this.#render({ focus: false });
+    this.#syncTimer();
+  }
+  /** Advances to the next slide. Delegated; `data-action` wiring is optional. */
+  next(event) {
+    if (event?.defaultPrevented) return;
+    this.#markHandled(event);
     this.#select(this.#step(1), { focus: false });
   }
-  /** Returns to the previous slide. Bound via `data-action`. */
-  prev() {
+  /** Returns to the previous slide. Delegated; `data-action` wiring is optional. */
+  prev(event) {
+    if (event?.defaultPrevented) return;
+    this.#markHandled(event);
     this.#select(this.#step(-1), { focus: false });
   }
   /** Jumps to the slide whose picker was activated (click / Enter / Space). */
   goto(event) {
-    const target = event.currentTarget;
-    const index = this.pickerTargets.indexOf(target);
+    if (event.defaultPrevented) return;
+    this.#markHandled(event);
+    const index = this.#pickerIndexFor(event.currentTarget);
     if (index !== -1) this.#select(index, { focus: false });
   }
-  /** Toggles autoplay on the user's explicit request and syncs the timer. */
-  togglePlay() {
-    this.#playing = !this.#playing;
-    this.#syncTimer();
+  /**
+   * Flips the rotation intent on the user's explicit request.
+   *
+   * The intent is written back to the `autoplay` Value, which is where every other
+   * path reads it from. A carousel with nothing to advance to has no intent to
+   * flip: the toggle is marked `aria-disabled` and does nothing.
+   */
+  togglePlay(event) {
+    if (event?.defaultPrevented) return;
+    this.#markHandled(event);
+    this.#togglePlay();
   }
   /**
-   * Suspends autoplay. Hover (`mouseenter`) is a temporary suspension that resumes
-   * on leave; keyboard focus (`focusin`) is a hard stop that turns autoplay off so
-   * it cannot resume without an explicit play (WCAG 2.2.2).
+   * Suspends rotation. A `focus`-family event records that focus is inside the
+   * carousel; anything else — hover, or a bare programmatic call — records the
+   * pointer suspension. Both lift through the matching {@link resume}, and
+   * neither touches the rotation intent.
    */
   pause(event) {
-    if (event?.type.startsWith("focus")) {
-      this.#playing = false;
-    } else {
-      this.#pointerPaused = true;
-    }
+    this.#markHandled(event);
+    if (isFocusEvent(event)) this.#focusPaused = true;
+    else this.#pointerPaused = true;
     this.#syncTimer();
   }
   /**
-   * Lifts a hover suspension (`mouseleave`) and resumes autoplay if it is still
-   * on. A `focusout` does nothing here: the focus pause was a hard stop, so the
-   * user must press play to restart.
+   * Lifts the matching suspension. A `focusout` whose `relatedTarget` is still
+   * inside the carousel is focus moving between its own controls, which leaves the
+   * focus suspension in place — releasing it there would stop and restart the
+   * interval on every Tab press.
    */
   resume(event) {
-    if (event?.type.startsWith("focus")) return;
-    this.#pointerPaused = false;
+    this.#markHandled(event);
+    if (isFocusEvent(event)) {
+      if (this.#focusStaysInside(event)) return;
+      this.#focusPaused = false;
+    } else {
+      this.#pointerPaused = false;
+    }
     this.#syncTimer();
   }
-  /** Picker roving: arrows move focus only; Home/End activate first/last slide. */
+  /** Picker roving for authored bindings; the delegated path is `#onKeydown`. */
   onPickerKeydown(event) {
+    const index = this.#pickerIndexFor(event.currentTarget);
+    if (index === -1) return;
+    this.#markHandled(event);
+    this.#handlePickerKeydown(event, index);
+  }
+  /** Delegated activation for pickers and step controls without authored actions. */
+  #onClick = (event) => this.#delegate(event, () => {
+    const index = this.#pickerIndexFor(event.target);
+    if (index !== -1) {
+      this.#select(index, { focus: false });
+    } else if (hits(this.nextTargets, event.target)) {
+      this.#select(this.#step(1), { focus: false });
+    } else if (hits(this.prevTargets, event.target)) {
+      this.#select(this.#step(-1), { focus: false });
+    } else if (hits(this.playToggleTargets, event.target)) {
+      this.#togglePlay();
+    }
+  });
+  /** Delegated picker roving for pickers without authored actions. */
+  #onKeydown = (event) => this.#delegate(event, () => {
+    const index = this.#pickerIndexFor(event.target);
+    if (index !== -1) this.#handlePickerKeydown(event, index);
+  });
+  /** Focus arriving anywhere inside suspends the rotation. */
+  #onFocusin = (event) => this.#delegate(event, () => {
+    this.#focusPaused = true;
+    this.#syncTimer();
+  });
+  /** Focus genuinely leaving lifts the suspension; moves between own controls do not. */
+  #onFocusout = (event) => this.#delegate(event, () => {
+    if (this.#focusStaysInside(event)) return;
+    this.#focusPaused = false;
+    this.#syncTimer();
+  });
+  /** Pointer entry suspends the rotation. */
+  #onMouseenter = (event) => this.#delegate(event, () => {
+    this.#pointerPaused = true;
+    this.#syncTimer();
+  });
+  /** Pointer exit lifts the suspension. */
+  #onMouseleave = (event) => this.#delegate(event, () => {
+    this.#pointerPaused = false;
+    this.#syncTimer();
+  });
+  /**
+   * Schedules one reconciliation when a state attribute is rewritten in place —
+   * the only shape of change no target callback reports.
+   *
+   * The filter is the `attributeFilter` alone: those three attributes belong to
+   * the slides and pickers, and a coalesced pass over an unrelated one costs a
+   * repaint that writes nothing. Narrowing further here would add a branch no
+   * test could distinguish.
+   */
+  #onAttributeMutations = () => {
+    this.#reconcileTargets.schedule();
+  };
+  /**
+   * Records that an action binding took this event.
+   *
+   * An authored binding sits on the control, so it runs while the event is still
+   * below the controller element and always precedes the delegated listener.
+   * Marking is the one signal that keeps the two wirings from both acting.
+   */
+  #markHandled(event) {
+    if (event) this.#handledEvents.add(event);
+  }
+  /** Runs a delegated handler unless an action binding, or a descendant, took the event. */
+  #delegate(event, run) {
+    if (this.#handledEvents.delete(event) || event.defaultPrevented) return;
+    run();
+  }
+  /** Position of the picker that is or contains `node`, or `-1` when none does. */
+  #pickerIndexFor(node) {
+    return this.pickerTargets.findIndex(
+      (picker) => node instanceof Node && (picker === node || picker.contains(node))
+    );
+  }
+  /** Whether a focus transition lands on another control of this same carousel. */
+  #focusStaysInside(event) {
+    const next = event.relatedTarget;
+    return next instanceof Node && this.element.contains(next);
+  }
+  /** Flips the rotation intent, unless there is nothing to rotate to. */
+  #togglePlay() {
+    if (!this.#canAutoplay()) return;
+    this.autoplayValue = !this.autoplayValue;
+    this.#syncTimer();
+  }
+  /** Applies the APG picker key map: arrows, Home, and End all move focus only. */
+  #handlePickerKeydown(event, current) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
-    const current = this.pickerTargets.indexOf(event.currentTarget);
-    if (current === -1) return;
     const length = this.pickerTargets.length;
     switch (event.key) {
       case "ArrowRight":
@@ -2296,24 +2520,44 @@ var CarouselController = class extends Controller {
         this.#roving.setActive(rovingMove(current, length, step, "wrap"), { focus: true });
         return;
       }
+      // A chorded Home/End is a document-level shortcut (`Control+Home` scrolls
+      // the page) that belongs to the browser, exactly as a chorded arrow does.
       case "Home":
+        if (hasModifier(event)) return;
         event.preventDefault();
-        this.#select(0, { focus: true });
+        this.#roving.setActive(0, { focus: true });
         return;
       case "End":
+        if (hasModifier(event)) return;
         event.preventDefault();
-        this.#select(length - 1, { focus: true });
+        this.#roving.setActive(length - 1, { focus: true });
         return;
     }
   }
-  /** Resolves the index one step away from the current one, honoring `loop`. */
+  /**
+   * Resolves the index one step away from the current one, honoring `loop`.
+   *
+   * Bounding is {@link CarouselController.#clampToSlides}'s job alone, so an
+   * empty set is allowed to fall out of the arithmetic here rather than being
+   * special-cased in two places that could disagree.
+   */
   #step(delta) {
     const total = this.slideTargets.length;
-    if (total === 0) return 0;
     const next = this.#index + delta;
     if (this.loopValue) return (next + total) % total;
     return Math.min(total - 1, Math.max(0, next));
   }
+  /**
+   * Confines an index to the slide range, so no index can hide every slide.
+   *
+   * The single place an index is bounded: an empty set collapses to the first
+   * position, which is also where a non-numeric step from that empty set lands.
+   */
+  #clampToSlides(index) {
+    const last = this.slideTargets.length - 1;
+    if (last < 0) return 0;
+    return Math.min(last, Math.max(0, index));
+  }
   /**
    * Changes the active slide, updates state hooks, and emits `change` — but only
    * when the index actually changes, so a `next`/`prev` clamped at the end (or an
@@ -2321,73 +2565,159 @@ var CarouselController = class extends Controller {
    * (matching the "emit on real change" policy of flash/masonry/bulk-select).
    */
   #select(index, { focus }) {
-    const changed = index !== this.#index;
-    this.#index = index;
+    const target = this.#clampToSlides(index);
+    const changed = target !== this.#index;
+    this.#index = target;
     this.#render({ focus });
     this.#syncTimer();
-    if (changed) this.dispatch("change", { detail: { index, total: this.slideTargets.length } });
+    if (changed) {
+      this.dispatch("change", { detail: { index: target, total: this.slideTargets.length } });
+    }
   }
   /**
-   * Reflects `this.#index` onto slides and pickers (state hooks + roving).
+   * Reflects `this.#index` onto the slides, the pickers, and the step controls.
+   *
+   * Every observed attribute is written only when its value actually changes: the
+   * same writes are watched by {@link CarouselController.#onAttributeMutations},
+   * and an unconditional rewrite would feed the controller its own output.
    *
    * @stimeoRenderRoot
    */
   #render({ focus }) {
+    this.#activeSlide = this.slideTargets[this.#index] ?? null;
     this.slideTargets.forEach((slide, i) => {
       const active = i === this.#index;
-      slide.setAttribute("data-state", active ? "active" : "inactive");
-      slide.hidden = !active;
+      setAttributeIfChanged(slide, "data-state", active ? "active" : "inactive");
+      if (slide.hidden !== !active) slide.hidden = !active;
+      slide.toggleAttribute("inert", !active);
     });
     const pickerIndex = Math.min(this.#index, this.pickerTargets.length - 1);
     this.pickerTargets.forEach((picker, i) => {
-      picker.setAttribute("aria-selected", i === pickerIndex ? "true" : "false");
+      setAttributeIfChanged(picker, "aria-selected", i === pickerIndex ? "true" : "false");
     });
     this.#roving.setActive(pickerIndex, { focus });
+    this.#syncStepControls();
   }
-  /** Keeps the live active slide when possible and otherwise selects the nearest survivor. */
-  #reconcileTargetSet() {
-    const activeSlide = this.slideTargets.findIndex(
-      (slide) => slide.getAttribute("data-state") === "active"
-    );
-    const selectedPicker = this.pickerTargets.findIndex(
+  /** Marks the step control a non-looping carousel has no slide left to reach. */
+  #syncStepControls() {
+    const last = this.slideTargets.length - 1;
+    const atStart = !this.loopValue && this.#index <= 0;
+    const atEnd = !this.loopValue && this.#index >= last;
+    for (const button of this.prevTargets) {
+      this.#ariaDisabled.write(button, atStart ? "true" : null);
+    }
+    for (const button of this.nextTargets) {
+      this.#ariaDisabled.write(button, atEnd ? "true" : null);
+    }
+  }
+  /**
+   * Resolves which slide is current from the strongest evidence available.
+   *
+   * A single `data-state="active"` is unambiguous and wins, which is what restores
+   * the visible slide after a Turbo cache restore even with no pickers present.
+   * Competing claims — a slide inserted already marked active — are settled by the
+   * element the last render actually showed, so a newcomer never displaces what the
+   * reader is looking at. With no claim at all the authored picker selection
+   * decides, first in DOM order; failing that the previous position is kept.
+   */
+  #resolveIndex() {
+    const slides = this.slideTargets;
+    const claims = [];
+    slides.forEach((slide, index) => {
+      if (slide.getAttribute("data-state") === "active") claims.push(index);
+    });
+    if (claims.length > 1 && this.#activeSlide !== null) {
+      const live = slides.indexOf(this.#activeSlide);
+      if (claims.includes(live)) return live;
+    }
+    const claimed = claims[0];
+    if (claimed !== void 0) return claimed;
+    const selected = this.pickerTargets.findIndex(
       (picker) => picker.getAttribute("aria-selected") === "true"
     );
-    const lastSlide = this.slideTargets.length - 1;
-    const candidate = activeSlide !== -1 ? activeSlide : selectedPicker !== -1 ? selectedPicker : this.#index;
-    const previous = this.#index;
-    this.#index = lastSlide < 0 ? 0 : Math.min(lastSlide, Math.max(0, candidate));
+    return this.#clampToSlides(selected === -1 ? this.#index : selected);
+  }
+  /** Re-resolves the active slide after the target set changed and reports the move. */
+  #reconcileTargetSet() {
+    const previousIndex = this.#index;
+    const previousTotal = this.#total;
+    this.#index = this.#resolveIndex();
     this.#render({ focus: false });
+    this.#total = this.slideTargets.length;
     this.#syncTimer();
-    if (this.#index !== previous) {
-      this.dispatch("reconcile", {
-        detail: { index: this.#index, total: this.slideTargets.length }
-      });
+    if (this.#index !== previousIndex || this.#total !== previousTotal) {
+      this.dispatch("reconcile", { detail: { index: this.#index, total: this.#total } });
     }
   }
+  /** Whether autoplay has anywhere left to advance to. */
+  #canAutoplay() {
+    const total = this.slideTargets.length;
+    if (total <= 1) return false;
+    return this.loopValue || this.#index < total - 1;
+  }
+  /** The advance delay; a non-finite or non-positive declaration falls back. */
+  get #interval() {
+    const declared = this.intervalValue;
+    return Number.isFinite(declared) && declared > 0 ? declared : DEFAULT_INTERVAL;
+  }
   /**
-   * Drives the autoplay interval toward the desired state. Autoplay should run
-   * only when the user wants it (`playing`), the pointer is not hovering, and more
-   * than one slide exists. Transitions emit `play`/`pause` and keep the toggle's
-   * `aria-pressed` in sync.
+   * Drives the autoplay interval toward the desired state and publishes it.
+   *
+   * Rotation runs when the intent is on, nothing suspends it, and a slide is left
+   * to advance to. A carousel that has run out normalizes the intent to `false`, so
+   * `aria-pressed` never claims a rotation that cannot happen. Crossing the
+   * run/stop boundary emits `play`/`pause`; re-arming at a new `interval` is the
+   * same state and stays silent.
    */
   #syncTimer() {
-    if (!this.loopValue && this.#index >= this.slideTargets.length - 1) {
-      this.#playing = false;
-    }
-    const shouldRun = this.#playing && !this.#pointerPaused && this.slideTargets.length > 1;
-    if (shouldRun && this.#timerId === null) {
-      this.#timerId = this.#intervals.set(() => this.next(), this.intervalValue);
-      this.dispatch("play");
-    } else if (!shouldRun && this.#timerId !== null) {
+    const canAutoplay = this.#canAutoplay();
+    if (this.autoplayValue && !canAutoplay) this.autoplayValue = false;
+    const shouldRun = this.autoplayValue && canAutoplay && !this.#pointerPaused && !this.#focusPaused && !this.#hiddenPaused;
+    const wasRunning = this.#timerId !== null;
+    const interval = this.#interval;
+    if (this.#timerId !== null && (!shouldRun || interval !== this.#timerInterval)) {
       this.#intervals.clear(this.#timerId);
       this.#timerId = null;
-      this.dispatch("pause");
     }
-    if (this.hasPlayToggleTarget) {
-      this.playToggleTarget.setAttribute("aria-pressed", this.#playing ? "true" : "false");
+    if (shouldRun && this.#timerId === null) {
+      this.#timerInterval = interval;
+      this.#timerId = this.#intervals.set(() => this.next(), interval);
+    }
+    setAttributeIfChanged(this.element, "data-state", shouldRun ? "playing" : "paused");
+    if (shouldRun !== wasRunning) {
+      if (shouldRun) this.dispatch("play");
+      else this.dispatch("pause");
+    }
+    for (const toggle of this.playToggleTargets) {
+      toggle.setAttribute("aria-pressed", this.autoplayValue ? "true" : "false");
+      this.#ariaDisabled.write(toggle, canAutoplay ? null : "true");
     }
+    if (this.hasViewportTarget) {
+      this.#ariaLive.write(this.viewportTarget, shouldRun ? "off" : "polite");
+      this.#ariaAtomic.write(this.viewportTarget, "false");
+    }
+  }
+  /** Hands every leased attribute back to the value the consumer authored. */
+  #returnLeases() {
+    this.#ariaDisabled.returnAll();
+    this.#ariaLive.returnAll();
+    this.#ariaAtomic.returnAll();
   }
 };
+function isFocusEvent(event) {
+  return event?.type.startsWith("focus") === true;
+}
+function hasModifier(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+function hits(elements, node) {
+  return elements.some(
+    (element) => node instanceof Node && (element === node || element.contains(node))
+  );
+}
+function setAttributeIfChanged(element, name, value) {
+  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
 
 // src/utils/announce.ts
 function announce(message, options = {}) {
@@ -4201,7 +4531,7 @@ var TabindexLoan = class {
 
 // src/controllers/conditional_fields_controller.ts
 var DISABLED_MARKER = "data-conditional-disabled";
-var OBSERVED_ATTRIBUTES = [
+var OBSERVED_ATTRIBUTES2 = [
   "hidden",
   "aria-hidden",
   "data-visible",
@@ -4263,7 +4593,7 @@ var ConditionalFieldsController = class extends Controller {
     this.#settle();
     this.#observer.observe(this.element, {
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES,
+      attributeFilter: OBSERVED_ATTRIBUTES2,
       childList: true,
       subtree: true
     });
@@ -4751,13 +5081,6 @@ var ContextMenuController = class extends Controller {
     return this.hasMenuTarget && !this.menuTarget.hidden;
   }
 };
-
-// src/utils/reduced_motion.ts
-function prefersReducedMotion() {
-  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
-// src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
     duration: { type: Number, default: 1200 },
@@ -5039,6 +5362,22 @@ var CountdownController = class extends Controller {
     return this.element.getAttribute("data-state") ?? "paused";
   }
 };
+
+// src/utils/half_width.ts
+var FULL_WIDTH_SHIFT = 65248;
+function halfWidthChar(char) {
+  if (char >= "\uFF01" && char <= "\uFF5E") {
+    return String.fromCharCode(char.charCodeAt(0) - FULL_WIDTH_SHIFT);
+  }
+  return char === "\u3000" ? " " : char;
+}
+function toHalfWidth(text) {
+  let out = "";
+  for (const char of text) out += halfWidthChar(char);
+  return out;
+}
+
+// src/controllers/currency_input_controller.ts
 var CurrencyInputController = class extends Controller {
   static targets = ["display", "field", "srValue"];
   static values = {
@@ -5050,19 +5389,92 @@ var CurrencyInputController = class extends Controller {
   static events = ["change"];
   /** Last committed numeric value, to suppress duplicate `change` dispatches. */
   #lastValue = null;
+  #started = false;
+  /** Validated mirrors of the Values; the hot path never reads a raw Value. */
+  #locale = "en-US";
+  #currency = "";
+  #precision = 2;
+  /** Formatters rebuilt only when a Value changes, never per keystroke. */
+  #grouping;
+  #fixed;
+  #accessible;
+  #group = ",";
+  #decimal = ".";
+  /** The locale's non-Latin digits mapped back to ASCII (empty for Latin locales). */
+  #digits = /* @__PURE__ */ new Map();
+  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  #composition = new CompositionTracker({
+    onEnd: () => this.#reformat(false)
+  });
+  /** Re-validates on declaration changes and re-renders the committed display. */
+  localeValueChanged() {
+    this.#applyValueChange();
+  }
+  currencyValueChanged() {
+    this.#applyValueChange();
+  }
+  precisionValueChanged() {
+    this.#applyValueChange();
+  }
+  /**
+   * Scans the display under the *outgoing* configuration (its separators wrote
+   * that text), then revalidates and re-renders under the new one — so a locale
+   * switch re-interprets the value, never the old text with new separators.
+   */
+  #applyValueChange() {
+    const scan = this.#started && this.hasDisplayTarget ? this.#scan(this.displayTarget.value) : null;
+    this.#revalidate();
+    if (!scan || !this.hasDisplayTarget) return;
+    if (document.activeElement === this.displayTarget) {
+      const formatted = this.#render(scan.parts);
+      this.displayTarget.value = formatted;
+      this.#reflect(scan.value, formatted);
+    } else if (scan.value === null) {
+      this.displayTarget.value = "";
+      this.#reflect(null, "");
+    } else {
+      const rounded = round(scan.value, this.#precision);
+      const formatted = this.#fixed.format(rounded);
+      this.displayTarget.value = formatted;
+      this.#reflect(rounded, formatted);
+    }
+  }
   /** Normalizes any pre-filled display value to its fixed-precision form. */
   connect() {
+    this.#started = true;
     if (!this.hasDisplayTarget) return;
-    const parsed = this.#parse(this.displayTarget.value);
-    this.#lastValue = parsed === null ? null : round(parsed, this.precisionValue);
-    if (this.displayTarget.value.trim() !== "") {
-      this.#reformat(true);
-    } else {
+    const { value } = this.#scan(this.displayTarget.value);
+    this.#lastValue = value === null ? null : round(value, this.#precision);
+    if (value === null) {
+      this.displayTarget.value = "";
       this.#reflect(null, "");
+    } else {
+      this.#reformat(true);
     }
   }
+  disconnect() {
+    this.#started = false;
+    this.#composition.disconnect();
+  }
+  /** Tracks composition on an arriving (or swapped-in) display and normalizes it. */
+  displayTargetConnected(target) {
+    this.#composition.observe(target);
+    if (this.#started) this.#reformat(true);
+  }
+  displayTargetDisconnected(target) {
+    this.#composition.unobserve(target);
+  }
+  /** Syncs a late-arriving hidden field without touching the display or events. */
+  fieldTargetConnected() {
+    if (this.#started) this.#resync();
+  }
+  /** Syncs a late-arriving screen-reader span the same way. */
+  srValueTargetConnected() {
+    if (this.#started) this.#resync();
+  }
   /** Re-groups digits as the user types, preserving the caret position. */
-  onInput() {
+  onInput(event) {
+    if (this.#composition.isComposing(event)) return;
     this.#reformat(false);
   }
   /** Applies the fixed-precision rounding on blur. */
@@ -5071,112 +5483,212 @@ var CurrencyInputController = class extends Controller {
   }
   /**
    * Parses the display value, rewrites it grouped (optionally at fixed
-   * precision), keeps the caret stable by digit count, and syncs the field,
-   * the screen-reader span, and the `change` event.
+   * precision), keeps the caret stable by significant characters, and syncs the
+   * field, the screen-reader span, and the `change` event.
+   *
+   * @stimeoRenderRoot
    */
   #reformat(fixedPrecision) {
     if (!this.hasDisplayTarget) return;
     const raw = this.displayTarget.value;
-    const number = this.#parse(raw);
-    if (number === null) {
-      this.displayTarget.value = "";
-      this.#reflect(null, "");
+    const { parts, value } = this.#scan(raw);
+    if (fixedPrecision) {
+      if (value === null) {
+        this.displayTarget.value = "";
+        this.#reflect(null, "");
+        return;
+      }
+      const rounded = round(value, this.#precision);
+      const formatted2 = this.#fixed.format(rounded);
+      this.displayTarget.value = formatted2;
+      this.#reflect(rounded, formatted2);
       return;
     }
-    const value = fixedPrecision ? round(number, this.precisionValue) : number;
-    const caret = this.displayTarget.selectionStart;
-    const digitsBeforeCaret = typeof caret === "number" ? countDigits(raw.slice(0, caret)) : null;
-    const formatted = this.#formatNumber(value, fixedPrecision);
-    this.displayTarget.value = formatted;
-    if (digitsBeforeCaret !== null) this.#restoreCaret(formatted, digitsBeforeCaret);
-    this.#reflect(value, formatted);
+    const formatted = this.#render(parts);
+    if (formatted !== raw) {
+      const caret = this.displayTarget.selectionStart;
+      const anchor = caret === null ? null : this.#significantBefore(raw, caret);
+      this.displayTarget.value = formatted;
+      if (anchor !== null) this.#restoreCaret(formatted, anchor);
+    }
+    this.#reflect(value, value === null ? "" : formatted);
+  }
+  /**
+   * The in-progress rendering: grouped integer, sign and fraction as typed.
+   *
+   * @stimeoRenderRoot
+   */
+  #render(parts) {
+    const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
+    const frac = parts.hasDot ? this.#decimal + parts.frac : "";
+    return parts.sign + int + frac;
   }
-  /** Restores the caret to sit just after the n-th digit of the new string. */
-  #restoreCaret(formatted, digitsBefore) {
+  /** Restores the caret to sit just after the n-th significant character. */
+  #restoreCaret(formatted, significantBefore) {
     let seen = 0;
     let position = formatted.length;
     for (let i = 0; i < formatted.length; i++) {
-      if (seen >= digitsBefore) {
+      if (seen >= significantBefore) {
         position = i;
         break;
       }
-      if (/\d/.test(formatted[i])) seen += 1;
+      if (this.#isSignificant(formatted[i])) seen += 1;
     }
     try {
       this.displayTarget.setSelectionRange(position, position);
     } catch {
     }
   }
-  /** Writes the normalized value to the field, the SR span, and `change`. */
-  #reflect(value, formatted) {
+  /**
+   * Counts the characters before `caret` that survive into the rendering,
+   * applying the same acceptance rules as {@link #scan} — a rejected keystroke
+   * (a mid-string sign, a second decimal mark) must not shift the anchor.
+   */
+  #significantBefore(text, caret) {
+    let count = 0;
+    let sawSign = false;
+    let sawDigit = false;
+    let sawDot = false;
+    for (const ch of this.#normalize(text.slice(0, caret))) {
+      if (ch >= "0" && ch <= "9") {
+        count += 1;
+        sawDigit = true;
+      } else if ((ch === "-" || ch === "+") && !sawSign && !sawDigit && !sawDot) {
+        count += 1;
+        sawSign = true;
+      } else if (this.#isDecimalMark(ch) && !sawDot) {
+        count += 1;
+        sawDot = true;
+      }
+    }
+    return count;
+  }
+  /** Digits, signs, and the decimal mark anchor the caret; grouping does not. */
+  #isSignificant(ch) {
+    if (ch >= "0" && ch <= "9") return true;
+    if (ch === "-" || ch === "+") return true;
+    return ch === this.#decimal || ch === "." && this.#group !== ".";
+  }
+  /** Writes the normalized value to the field, the SR span, and the empty hook. */
+  #write(value) {
     const isEmpty = value === null;
     if (this.hasFieldTarget) this.fieldTarget.value = isEmpty ? "" : String(value);
     if (this.hasSrValueTarget) {
-      this.srValueTarget.textContent = isEmpty ? "" : this.#accessibleText(value);
+      this.srValueTarget.textContent = isEmpty ? "" : this.#accessible.format(value);
     }
     this.element.toggleAttribute("data-stimeo--currency-input-empty", isEmpty);
+  }
+  /** {@link #write}, then reports a moved value as `change` (`""` rides with `null`). */
+  #reflect(value, formatted) {
+    this.#write(value);
     if (value !== this.#lastValue) {
       this.#lastValue = value;
-      if (!isEmpty) this.dispatch("change", { detail: { value, formatted } });
+      this.dispatch("change", { detail: { value, formatted } });
+    }
+  }
+  /**
+   * Scans arbitrary input text into its number-shaped parts and value. Keeps
+   * digits, one leading sign, one decimal mark, and the fraction verbatim;
+   * everything else (grouping, symbols, words) is dropped. An ASCII "." is only
+   * a decimal mark where it is not the locale's grouping separator. Precision
+   * plays no part here — rounding belongs to the blur-time format.
+   */
+  #scan(text) {
+    let sign = "";
+    let int = "";
+    let hasDot = false;
+    let frac = "";
+    for (const ch of this.#normalize(text)) {
+      if (ch >= "0" && ch <= "9") {
+        if (hasDot) frac += ch;
+        else int += ch;
+      } else if ((ch === "-" || ch === "+") && sign === "" && int === "" && !hasDot) {
+        sign = ch;
+      } else if (this.#isDecimalMark(ch) && !hasDot) {
+        hasDot = true;
+      }
     }
+    const parts = { sign, int, hasDot, frac };
+    const value = Number(`${sign}${int}.${frac}`);
+    return { parts, value: Number.isFinite(value) ? value : null };
   }
-  /** Parses arbitrary input text into a finite number, or `null` when blank. */
-  #parse(text) {
-    if (text.trim() === "") return null;
-    const { decimal } = this.#separators();
-    let cleaned = "";
-    let sawDot = false;
-    for (let i = 0; i < text.length; i++) {
-      const ch = text[i];
-      if (ch >= "0" && ch <= "9") cleaned += ch;
-      else if ((ch === "-" || ch === "+") && cleaned === "") cleaned += ch;
-      else if ((ch === decimal || ch === ".") && !sawDot) {
-        cleaned += ".";
-        sawDot = true;
+  /** Whether `ch` reads as this locale's decimal mark. */
+  #isDecimalMark(ch) {
+    return ch === this.#decimal || ch === "." && this.#group !== ".";
+  }
+  /** Re-syncs field / srValue / hook from the current display without dispatching. */
+  #resync() {
+    if (!this.hasDisplayTarget) return;
+    this.#write(this.#scan(this.displayTarget.value).value);
+  }
+  /**
+   * Validates the declared Values, falling back to each Value's default when a
+   * declaration cannot be interpreted (a malformed locale or currency tag, a
+   * precision outside `Intl`'s 0–100 integer range), and rebuilds the cached
+   * formatters from the validated set.
+   */
+  #revalidate() {
+    this.#locale = "en-US";
+    try {
+      new Intl.NumberFormat(this.localeValue);
+      this.#locale = this.localeValue;
+    } catch {
+    }
+    const precision = this.precisionValue;
+    this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
+    this.#currency = "";
+    if (this.currencyValue !== "") {
+      try {
+        new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.currencyValue });
+        this.#currency = this.currencyValue;
+      } catch {
       }
     }
-    if (cleaned === "" || cleaned === "-" || cleaned === "+" || cleaned === ".") return null;
-    const value = Number(cleaned);
-    return Number.isFinite(value) ? value : null;
-  }
-  /** Formats a number with grouping for the display field. */
-  #formatNumber(value, fixedPrecision) {
-    const formatter = new Intl.NumberFormat(this.localeValue, {
+    this.#grouping = new Intl.NumberFormat(this.#locale, {
+      useGrouping: true,
+      maximumFractionDigits: 0
+    });
+    this.#fixed = new Intl.NumberFormat(this.#locale, {
       useGrouping: true,
-      minimumFractionDigits: fixedPrecision ? this.precisionValue : 0,
-      maximumFractionDigits: this.precisionValue
+      minimumFractionDigits: this.#precision,
+      maximumFractionDigits: this.#precision
     });
-    return formatter.format(value);
-  }
-  /** The text announced to assistive tech (currency-aware when configured). */
-  #accessibleText(value) {
-    if (this.currencyValue) {
-      return new Intl.NumberFormat(this.localeValue, {
-        style: "currency",
-        currency: this.currencyValue
-      }).format(value);
-    }
-    return new Intl.NumberFormat(this.localeValue, {
-      minimumFractionDigits: this.precisionValue,
-      maximumFractionDigits: this.precisionValue
-    }).format(value);
-  }
-  /** Resolves the locale's grouping and decimal separator characters. */
-  #separators() {
-    const parts = new Intl.NumberFormat(this.localeValue).formatToParts(11111.1);
-    const group = parts.find((p) => p.type === "group")?.value ?? ",";
-    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
-    return { group, decimal };
+    this.#accessible = this.#currency ? new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.#currency }) : this.#fixed;
+    const parts = new Intl.NumberFormat(this.#locale).formatToParts(11111.1);
+    this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
+    this.#decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    this.#digits.clear();
+    const digitFormatter = new Intl.NumberFormat(this.#locale, { useGrouping: false });
+    for (let i = 0; i <= 9; i++) {
+      const digit = digitFormatter.format(i);
+      if (digit !== String(i)) this.#digits.set(digit, String(i));
+    }
+  }
+  /**
+   * Maps the locale's own digits to ASCII, folds full-width forms (the digits,
+   * signs, and marks an IME confirms as ０-９＋－．，) through the shared
+   * half-width mapping, and reads U+2212 MINUS SIGN as "-", which some locales'
+   * formatted output uses for negatives.
+   */
+  #normalize(text) {
+    let out = "";
+    for (const ch of text) {
+      const mapped = this.#digits.get(ch);
+      if (mapped !== void 0) {
+        out += mapped;
+      } else if (ch === "\u2212") {
+        out += "-";
+      } else {
+        out += halfWidthChar(ch);
+      }
+    }
+    return out;
   }
 };
-function countDigits(text) {
-  let count = 0;
-  for (const ch of text) if (ch >= "0" && ch <= "9") count += 1;
-  return count;
-}
 function round(value, precision) {
   const factor = 10 ** Math.max(0, precision);
   const rounded = Math.round(value * factor) / factor;
+  if (!Number.isFinite(rounded)) return value;
   return rounded === 0 ? 0 : rounded;
 }
 var SORT_CYCLE = ["none", "ascending", "descending"];
@@ -5901,10 +6413,10 @@ var DirectUploadController = class extends Controller {
     announceErrorText: { type: String, default: "" },
     scope: { type: String, default: "" }
   };
-  static events = ["progress", "done", "error"];
+  static events = ["progress", "done", "error", "reconcile"];
   #timeouts = new SafeTimeout();
   #rows = /* @__PURE__ */ new Map();
-  #beforeCache = new BeforeCacheReset(() => this.#reset());
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   /** The validated `scope` selector; a broken declaration falls back to `""`. */
   #scopeSelector = "";
   #onInitialize = (event) => {
@@ -6104,6 +6616,16 @@ var DirectUploadController = class extends Controller {
    * 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.
    */
+  /**
+   * Rewinds for the snapshot and reports what that discarded. An upload in flight
+   * cannot survive the navigation, so a consumer mirroring the rows would keep a
+   * progress bar that never resolves.
+   */
+  #rewindForCache() {
+    const ids = [...this.#rows.keys()];
+    this.#reset();
+    if (ids.length > 0) this.dispatch("reconcile", { detail: { ids } });
+  }
   #reset() {
     for (const row of this.#rows.values()) row.remove();
     this.#rows.clear();
@@ -7003,36 +7525,122 @@ var EmptyStateController = class extends Controller {
     }
   }
 };
-var FileDropzoneController = class extends Controller {
-  static targets = ["zone", "trigger", "input", "list", "item", "itemTemplate", "status"];
-  static values = {
-    maxSize: { type: Number, default: 0 },
-    maxFiles: { type: Number, default: 0 },
-    dragLabel: { type: String, default: "Drop files to add them" }
-  };
-  static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
-  static events = ["change", "reject"];
-  /** Selected files paired with their rendered item and any preview objectURL. */
+
+// src/utils/detach_gate.ts
+var DetachGate = class _DetachGate {
+  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
+  #pending = false;
+  /**
+   * True while a probe is queued — the last disconnect was ambiguous and no
+   * reconnect has cancelled it yet. Read it from `connect()` to tell the
+   * reconnect half of an in-page move from a first connect: a controller whose
+   * initialisation restarts a measurement (a min-duration floor, an elapsed
+   * counter) must skip it for the move, where nothing actually restarted.
+   */
+  get pending() {
+    return this.#pending;
+  }
+  /**
+   * True when the disconnect is definitely a real detach — the element left
+   * the document, or `data-controller` no longer lists the identifier. False
+   * means ambiguous (in-page move or observed-root exit), NOT "alive".
+   */
+  static isDetached(host) {
+    if (!host.element.isConnected) return true;
+    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
+    return !tokens.includes(host.identifier);
+  }
+  /**
+   * Call from `disconnect()`: runs `teardown` synchronously on a definite
+   * detach (fast path), otherwise defers it one microtask — a reconnect
+   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
+   * One microtask is the whole probe window: Stimulus reconnects a moved
+   * element within the same mutation batch, before the checkpoint drains.
+   */
+  disconnected(host, teardown) {
+    if (_DetachGate.isDetached(host)) {
+      this.#pending = false;
+      teardown();
+      return;
+    }
+    this.#pending = true;
+    queueMicrotask(() => {
+      if (!this.#pending) return;
+      this.#pending = false;
+      teardown();
+    });
+  }
+  /**
+   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
+   * an in-page move) and from the head of any teardown path not routed through
+   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
+   * never run the teardown a second time.
+   */
+  cancel() {
+    this.#pending = false;
+  }
+};
+
+// src/controllers/file_dropzone_controller.ts
+var DRAGOVER_ATTRIBUTE = "data-dragover";
+var INVALID_ATTRIBUTE = "data-stimeo--file-dropzone-invalid";
+var FileDropzoneController = class extends Controller {
+  static targets = [
+    "zone",
+    "trigger",
+    "input",
+    "list",
+    "item",
+    "itemTemplate",
+    "name",
+    "thumb",
+    "remove"
+  ];
+  static values = {
+    maxSize: { type: Number, default: 0 },
+    maxFiles: { type: Number, default: 0 },
+    allowDuplicates: { type: Boolean, default: false },
+    announceDragText: { type: String, default: "" },
+    announceAddedText: { type: String, default: "" },
+    announceRemovedText: { type: String, default: "" },
+    announceRejectedTypeText: { type: String, default: "" },
+    announceRejectedSizeText: { type: String, default: "" },
+    announceRejectedDuplicateText: { type: String, default: "" },
+    announceRejectedCountText: { type: String, default: "" }
+  };
+  static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
+  static events = ["change", "reject", "reconcile"];
+  /** Selected files paired with their rendered item and any preview objectURL. */
   #entries = [];
-  /** Prevents initial and teardown target callbacks from binding outside controller lifetime. */
-  #connected = false;
-  /** Wires file removal as a delegated listener on the list container. */
+  /** Whether a drag is currently over the zone; the source for `data-dragover`. */
+  #dragging = false;
+  /** Whether this connection already reported its unusable item template. */
+  #warnedTemplate = false;
+  #gate = new DetachGate();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Subscribes to the Turbo cache rewind and re-arms the template diagnostic. */
   connect() {
-    this.#connected = true;
-    if (this.hasListTarget) this.#bindList(this.listTarget);
+    this.#gate.cancel();
+    this.#warnedTemplate = false;
+    this.#beforeCache.activate();
   }
-  /** Revokes any outstanding preview URLs so none leaks across navigations. */
+  /**
+   * Releases the delegated listeners. The selection itself survives an in-page
+   * move and is released only once the gate proves a real detach — revoking a
+   * preview URL on a move would leave a live item pointing at a dead `blob:`.
+   */
   disconnect() {
-    this.#connected = false;
     for (const list of this.listTargets) list.removeEventListener("click", this.#onItemClick);
-    for (const entry of this.#entries) {
-      if (entry.url) URL.revokeObjectURL(entry.url);
-    }
-    this.#entries.length = 0;
+    this.#beforeCache.deactivate();
+    this.#gate.disconnected(this, () => this.#teardown());
   }
-  /** Rebinds removal and restores client-only previews when Turbo replaces the list target. */
+  /**
+   * Binds removal and restores client-only previews for every list this controller
+   * renders into — the one present at connect and any Turbo puts in its place.
+   * This is the only place the listener is attached, so the pair with
+   * {@link listTargetDisconnected} keeps it from outliving the element it is on.
+   */
   listTargetConnected(list) {
-    if (!this.#connected) return;
     this.#bindList(list);
   }
   /** Releases only the list target that actually disconnected. */
@@ -7048,82 +7656,147 @@ var FileDropzoneController = class extends Controller {
   }
   /** Opens the native file dialog. Bound via `data-action` (trigger click). */
   openDialog() {
+    if (this.#isDisabled) return;
     this.inputTarget.click();
   }
-  /** Adds the files chosen through the native dialog. */
+  /**
+   * Adds the files chosen through the native dialog. The input holds only what
+   * the dialog just returned, so the accepted set is written back over it once
+   * the batch is validated.
+   */
   onChange() {
-    if (this.inputTarget.files) this.#addFiles(this.inputTarget.files);
-    this.inputTarget.value = "";
+    const files = this.inputTarget.files;
+    if (files) this.#addFiles(files);
+    else this.#syncInput();
   }
-  /** Marks the zone as a drop target and announces the affordance in words. */
+  /**
+   * Marks the zone as a drop target and announces the affordance once per drag.
+   * Bound via `data-action` (dragover). Leaving the default alone is what refuses
+   * the drop, so a disabled field and a drag an inner dropzone already claimed
+   * both fall through untouched.
+   */
   onDragOver(event) {
+    if (event.defaultPrevented || this.#isDisabled) return;
     event.preventDefault();
-    if (this.hasZoneTarget) this.zoneTarget.setAttribute("data-dragover", "");
-    this.#setStatus(this.dragLabelValue);
+    if (this.#dragging) return;
+    this.#dragging = true;
+    if (this.hasZoneTarget) this.zoneTarget.setAttribute(DRAGOVER_ATTRIBUTE, "");
+    announce(fillTemplate(this.announceDragTextValue, { total: this.#entries.length }));
   }
-  /** Clears the drag-over flag when the pointer leaves the zone. */
-  onDragLeave() {
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-dragover");
+  /**
+   * Clears the drag-over flag when the pointer leaves the zone. Bound via
+   * `data-action` (dragleave). `dragleave` bubbles from every descendant the
+   * pointer crosses, so the flag only drops when the element being entered is
+   * outside the zone (or there is none, the pointer having left the window).
+   */
+  onDragLeave(event) {
+    const next = event.relatedTarget;
+    if (this.hasZoneTarget && next instanceof Node && this.zoneTarget.contains(next)) return;
+    this.#endDrag();
   }
-  /** Accepts dropped files, clearing the drag-over state. */
+  /** Accepts dropped files, clearing the drag-over state. Bound via `data-action` (drop). */
   onDrop(event) {
+    if (event.defaultPrevented) return;
+    this.#endDrag();
+    if (this.#isDisabled) return;
     event.preventDefault();
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-dragover");
     if (event.dataTransfer?.files) this.#addFiles(event.dataTransfer.files);
   }
   /**
    * Removes the file whose remove button was clicked. Delegated on the list
    * container rather than bound per item via `data-action`, so it works the instant
    * an item is appended without waiting on Stimulus to wire a freshly created element.
+   * Only the item's declared `remove` target counts, so an authored second control
+   * inside an item does what it says instead of silently discarding the file. The
+   * button has to belong to a tracked item, which is what makes a list this
+   * controller no longer renders into inert — its items moved out with it.
    */
   #onItemClick = (event) => {
-    const list = event.currentTarget;
-    const button = event.target.closest("button");
-    if (!this.#connected || !list || !button || !this.hasListTarget || list !== this.listTarget || !list.contains(button)) {
-      return;
-    }
+    const button = event.target.closest(
+      'button[data-stimeo--file-dropzone-target~="remove"]'
+    );
     const index = this.#entries.findIndex((entry) => entry.item.contains(button));
     if (index !== -1) this.#removeAt(index);
   };
-  /** Validates each incoming file and renders the accepted ones. */
+  /** Validates each incoming file, renders the accepted ones, and reports the batch. */
   #addFiles(files) {
-    let changed = false;
-    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-stimeo--file-dropzone-invalid");
+    this.#rehome();
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(INVALID_ATTRIBUTE);
+    const rejected = /* @__PURE__ */ new Map();
+    const turnedAway = [];
+    let addedName = "";
+    let added = 0;
     for (const file of Array.from(files)) {
       const reason = this.#validate(file);
-      if (reason) {
-        if (this.hasZoneTarget) {
-          this.zoneTarget.setAttribute("data-stimeo--file-dropzone-invalid", "");
-        }
-        this.#setStatus(file.name);
-        this.dispatch("reject", { detail: { file, reason } });
+      if (reason !== null) {
+        if (this.hasZoneTarget) this.zoneTarget.setAttribute(INVALID_ATTRIBUTE, "");
+        const batch = rejected.get(reason);
+        if (batch) batch.count += 1;
+        else rejected.set(reason, { name: file.name, count: 1 });
+        turnedAway.push({ file, reason });
         continue;
       }
-      this.#appendFile(file);
-      this.#setStatus(file.name);
-      changed = true;
+      if (!this.#appendFile(file)) continue;
+      if (added === 0) addedName = file.name;
+      added += 1;
+    }
+    this.#syncInput();
+    if (added > 0) {
+      this.#announce(this.announceAddedTextValue, addedName, added);
+      this.dispatch("change", { detail: { files: this.#files } });
+    }
+    for (const { file, reason } of turnedAway) {
+      this.dispatch("reject", { detail: { file, reason } });
+    }
+    for (const [reason, batch] of rejected) {
+      this.#announce(this.#rejectText(reason), batch.name, batch.count);
     }
-    if (changed) this.dispatch("change", { detail: { files: this.#files } });
   }
-  /** Returns the rejection reason for `file`, or `null` when it is acceptable. */
+  /**
+   * Returns the rejection reason for `file`, or `null` when it is acceptable.
+   * The file's own defects are decided first, so a full list still tells the user
+   * which files it would never have taken.
+   */
   #validate(file) {
-    const limit = this.#effectiveMaxFiles;
-    if (limit > 0 && this.#entries.length >= limit) return "count";
     if (!this.#matchesAccept(file)) return "type";
     if (this.maxSizeValue > 0 && file.size > this.maxSizeValue) return "size";
+    if (!this.allowDuplicatesValue && this.#entries.some((entry) => this.#isSame(entry.file, file))) {
+      return "duplicate";
+    }
+    const limit = this.#effectiveMaxFiles;
+    if (limit > 0 && this.#entries.length >= limit) return "count";
     return null;
   }
-  /** Builds one preview item (name, optional thumbnail, remove button). */
+  /**
+   * Whether two files are the same selection. `File` objects from separate picks
+   * are never the same reference, so identity is the triple the platform exposes.
+   */
+  #isSame(a, b) {
+    return a.name === b.name && a.size === b.size && a.lastModified === b.lastModified;
+  }
+  /**
+   * Builds one preview item (name, optional thumbnail, remove button) and reports
+   * whether it was rendered.
+   */
   #appendFile(file) {
-    if (!this.hasItemTemplateTarget || !this.hasListTarget) return;
+    if (!this.hasListTarget) return this.#warnTemplate('a "list" target to render into');
+    if (!this.hasItemTemplateTarget) return this.#warnTemplate('an "itemTemplate" target');
     const fragment = this.itemTemplateTarget.content.cloneNode(true);
-    const item = fragment.querySelector('[data-stimeo--file-dropzone-target="item"]');
-    const name = fragment.querySelector('[data-file-dropzone-slot="name"]');
-    const thumb = fragment.querySelector('[data-file-dropzone-slot="thumb"]');
-    const button = fragment.querySelector("button");
-    if (!item) return;
-    if (name) name.textContent = file.name;
-    if (button) button.setAttribute("aria-label", `Remove ${file.name}`);
+    const item = this.#slot(fragment, "item");
+    const name = this.#slot(fragment, "name");
+    const thumb = this.#slot(fragment, "thumb");
+    const button = fragment.querySelector(
+      'button[data-stimeo--file-dropzone-target~="remove"]'
+    );
+    const removeName = button?.getAttribute("aria-label")?.trim() ?? "";
+    if (!item) return this.#warnTemplate('an "item" root');
+    if (!name) return this.#warnTemplate('a "name" element');
+    if (!button) return this.#warnTemplate('a "remove" target <button>');
+    if (removeName === "") {
+      return this.#warnTemplate('a non-empty aria-label on its "remove" target');
+    }
+    name.textContent = file.name;
+    button.setAttribute("aria-label", fillTemplate(removeName, { name: file.name }));
     let url;
     if (thumb && file.type.startsWith("image/")) {
       url = URL.createObjectURL(file);
@@ -7135,6 +7808,29 @@ var FileDropzoneController = class extends Controller {
     }
     this.listTarget.appendChild(fragment);
     this.#entries.push({ file, item, url });
+    return true;
+  }
+  /** Resolves one declared part inside a cloned item template. */
+  #slot(fragment, name) {
+    return fragment.querySelector(`[data-stimeo--file-dropzone-target~="${name}"]`);
+  }
+  /**
+   * Reports an unusable item template to the author, once per connection.
+   *
+   * The addition itself stays a no-op — nothing about the selection, the native
+   * input, the announcements, or the events changes. Without this line the only
+   * symptom is a picker that accepts no file at all, and the causes the Inspector
+   * cannot see statically (a server-rendered template, a name that renders empty
+   * from a missing translation) would have no diagnostic anywhere.
+   */
+  #warnTemplate(missing) {
+    if (!this.#warnedTemplate) {
+      this.#warnedTemplate = true;
+      console.warn(
+        `Stimeo UI: "${this.identifier}" added no file because its item template lacks ${missing}.`
+      );
+    }
+    return false;
   }
   /** Removes entry `index`, revokes its preview, and re-homes focus. */
   #removeAt(index) {
@@ -7143,7 +7839,8 @@ var FileDropzoneController = class extends Controller {
     if (entry.url) URL.revokeObjectURL(entry.url);
     entry.item.remove();
     this.#entries.splice(index, 1);
-    this.#setStatus(entry.file.name);
+    this.#syncInput();
+    this.#announce(this.announceRemovedTextValue, entry.file.name, 1);
     this.dispatch("change", { detail: { files: this.#files } });
     const buttons = this.#removeButtons;
     if (buttons.length === 0) {
@@ -7166,18 +7863,109 @@ var FileDropzoneController = class extends Controller {
       return type === token;
     });
   }
-  /** Updates the live region so assistive tech announces the change. */
-  #setStatus(text) {
-    if (this.hasStatusTarget) this.statusTarget.textContent = text;
+  /**
+   * Sends one consumer-worded message to the page's shared announcer. `{name}` is
+   * the file the message is about, `{count}` how many files it covers, and
+   * `{total}` how many are selected once the batch has settled.
+   */
+  #announce(template, name, count) {
+    announce(fillTemplate(template, { name, count, total: this.#entries.length }));
+  }
+  /** The consumer's wording for one rejection reason. */
+  #rejectText(reason) {
+    switch (reason) {
+      case "type":
+        return this.announceRejectedTypeTextValue;
+      case "size":
+        return this.announceRejectedSizeTextValue;
+      case "duplicate":
+        return this.announceRejectedDuplicateTextValue;
+      case "count":
+        return this.announceRejectedCountTextValue;
+    }
+  }
+  /**
+   * Mirrors the accepted set onto the native input, so a plain form submit carries
+   * the dropped files. Skipped where `DataTransfer` cannot be constructed: the
+   * widget keeps working and the consumer still receives every `File` on `change`.
+   */
+  #syncInput() {
+    if (!this.hasInputTarget) return;
+    const transfer = this.#newTransfer();
+    if (!transfer) return;
+    for (const entry of this.#entries) transfer.items.add(entry.file);
+    this.inputTarget.files = transfer.files;
+  }
+  /** A usable empty `DataTransfer`, or `null` where the platform has none. */
+  #newTransfer() {
+    try {
+      return new DataTransfer();
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Moves surviving preview items back under the current list. A morph that
+   * empties the list in place leaves the selection with no rendering, and the
+   * files it holds cannot be rebuilt from the DOM, so the items are re-homed
+   * rather than forgotten.
+   */
+  #rehome() {
+    if (!this.hasListTarget) return;
+    for (const entry of this.#entries) {
+      if (!this.listTarget.contains(entry.item)) this.listTarget.appendChild(entry.item);
+    }
+  }
+  /** Drops the drag-over state, whether the drag ended in a drop or left the zone. */
+  #endDrag() {
+    this.#dragging = false;
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(DRAGOVER_ATTRIBUTE);
+  }
+  /**
+   * Discards the selection and every state attribute this controller wrote, so
+   * neither a cached snapshot nor a stranded subtree keeps items whose files are
+   * gone. Silent: `change` means a selection the user changed, and the cache
+   * rewind reports itself as `reconcile` instead.
+   */
+  #rewindForCache() {
+    const had = this.#entries.length > 0;
+    this.#reset();
+    if (had) this.dispatch("reconcile", { detail: { files: this.#files } });
+  }
+  #reset() {
+    for (const entry of this.#entries) {
+      if (entry.url) URL.revokeObjectURL(entry.url);
+      entry.item.remove();
+    }
+    this.#entries.length = 0;
+    this.#syncInput();
+    this.#endDrag();
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute(INVALID_ATTRIBUTE);
+  }
+  /** Releases the selection once the disconnect is known to be a real detach. */
+  #teardown() {
+    this.#gate.cancel();
+    this.#reset();
+  }
+  /** Whether the field refuses input, natively or through an ancestor `fieldset`. */
+  get #isDisabled() {
+    return this.inputTarget.disabled || inheritsFieldsetDisabled(this.inputTarget);
   }
   /** Effective file cap: `maxFiles`, or 1 when the input is single-select. */
   get #effectiveMaxFiles() {
     if (this.maxFilesValue > 0) return this.maxFilesValue;
     return this.inputTarget.multiple ? 0 : 1;
   }
-  /** The remove buttons currently in the list, in order. */
+  /** The declared remove button of each rendered item, in selection order. */
   get #removeButtons() {
-    return Array.from(this.listTarget.querySelectorAll("button"));
+    const buttons = [];
+    for (const entry of this.#entries) {
+      const button = entry.item.querySelector(
+        'button[data-stimeo--file-dropzone-target~="remove"]'
+      );
+      if (button) buttons.push(button);
+    }
+    return buttons;
   }
   /** The accepted files in selection order. */
   get #files() {
@@ -7273,7 +8061,7 @@ var FlashController = class extends Controller {
     max: { type: Number, default: 0 }
   };
   static actions = ["dismiss"];
-  static events = ["show", "dismiss"];
+  static events = ["show", "dismiss", "reconcile"];
   #timers = new SafeTimeout();
   #observer = null;
   /** Whether the controller is between `connect()` and `disconnect()`. */
@@ -7319,12 +8107,14 @@ var FlashController = class extends Controller {
    * only: `dismiss` reports a dismissal, and freezing the page is not one.
    */
   #rewindForCache() {
+    const removed = this.#order.length;
     for (const message of [...this.#order]) {
       message.remove();
       this.#forget(message);
     }
     for (const message of this.#leaving) message.remove();
     this.#leaving.clear();
+    if (removed > 0) this.dispatch("reconcile", { detail: { removed } });
   }
   /** Follows a `region` element swapped in — or arriving — at runtime (Turbo Stream). */
   regionTargetConnected() {
@@ -7581,7 +8371,7 @@ var FocusController = class extends Controller {
     this.dispatch("deactivate", { detail: {} });
   }
 };
-var OBSERVED_ATTRIBUTES2 = ["hidden", "id"];
+var OBSERVED_ATTRIBUTES3 = ["hidden", "id"];
 var FormFieldController = class _FormFieldController extends Controller {
   static targets = ["control", "description", "error"];
   static values = {
@@ -7620,7 +8410,7 @@ var FormFieldController = class _FormFieldController extends Controller {
     this.#reconcileDom();
     this.#observer.observe(this.element, {
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES2,
+      attributeFilter: OBSERVED_ATTRIBUTES3,
       characterData: true,
       childList: true,
       subtree: true
@@ -8117,61 +8907,6 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
 };
 
-// src/utils/detach_gate.ts
-var DetachGate = class _DetachGate {
-  /** Set while a probe is queued, waiting for a reconnect to cancel it. */
-  #pending = false;
-  /**
-   * True while a probe is queued — the last disconnect was ambiguous and no
-   * reconnect has cancelled it yet. Read it from `connect()` to tell the
-   * reconnect half of an in-page move from a first connect: a controller whose
-   * initialisation restarts a measurement (a min-duration floor, an elapsed
-   * counter) must skip it for the move, where nothing actually restarted.
-   */
-  get pending() {
-    return this.#pending;
-  }
-  /**
-   * True when the disconnect is definitely a real detach — the element left
-   * the document, or `data-controller` no longer lists the identifier. False
-   * means ambiguous (in-page move or observed-root exit), NOT "alive".
-   */
-  static isDetached(host) {
-    if (!host.element.isConnected) return true;
-    const tokens = (host.element.getAttribute("data-controller") ?? "").split(/\s+/);
-    return !tokens.includes(host.identifier);
-  }
-  /**
-   * Call from `disconnect()`: runs `teardown` synchronously on a definite
-   * detach (fast path), otherwise defers it one microtask — a reconnect
-   * ({@link cancel} from `connect()`) keeps the state, no reconnect runs it.
-   * One microtask is the whole probe window: Stimulus reconnects a moved
-   * element within the same mutation batch, before the checkpoint drains.
-   */
-  disconnected(host, teardown) {
-    if (_DetachGate.isDetached(host)) {
-      this.#pending = false;
-      teardown();
-      return;
-    }
-    this.#pending = true;
-    queueMicrotask(() => {
-      if (!this.#pending) return;
-      this.#pending = false;
-      teardown();
-    });
-  }
-  /**
-   * Disarms a pending probe. Call from `connect()` (the reconnect that proves
-   * an in-page move) and from the head of any teardown path not routed through
-   * {@link disconnected} (disabled-toggle, Escape), so an orphaned probe can
-   * never run the teardown a second time.
-   */
-  cancel() {
-    this.#pending = false;
-  }
-};
-
 // src/utils/min_duration_floor.ts
 var MinDurationFloor = class {
   #timers;
@@ -8229,7 +8964,7 @@ var FrameLoadingController = class extends Controller {
     minDuration: { type: Number, default: 0 },
     restoreFocus: { type: Boolean, default: true }
   };
-  static events = ["start", "end"];
+  static events = ["start", "end", "reconcile"];
   #timeouts = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timeouts);
   #gate = new DetachGate();
@@ -8305,6 +9040,7 @@ var FrameLoadingController = class extends Controller {
     this.#loading = false;
     this.#floor.cancel();
     this.#rewindHooks();
+    this.dispatch("reconcile", { detail: {} });
   }
   /**
    * Clears every hook the loading state writes. Shared by the three ways a load can
@@ -8736,6 +9472,11 @@ var DEFAULT_TOKENS = {
   "*": "[A-Za-z0-9]"
 };
 var UNMASK_ATTR = "data-stimeo--input-mask-unmask";
+function acceptedForm(regex, char) {
+  if (regex.test(char)) return char;
+  const half = halfWidthChar(char);
+  return half !== char && regex.test(half) ? half : null;
+}
 function applyMask(value, pattern, tokens) {
   let masked = "";
   let unmasked = "";
@@ -8747,17 +9488,21 @@ function applyMask(value, pattern, tokens) {
     if (regex) totalTokens += 1;
     if (valueIndex >= value.length) continue;
     if (regex) {
-      while (valueIndex < value.length && !regex.test(value[valueIndex] ?? "")) valueIndex += 1;
-      const char = value[valueIndex];
-      if (char === void 0) continue;
-      masked += char;
-      unmasked += char;
+      let taken = null;
+      while (valueIndex < value.length) {
+        taken = acceptedForm(regex, value[valueIndex] ?? "");
+        if (taken !== null) break;
+        valueIndex += 1;
+      }
+      if (taken === null) continue;
+      masked += taken;
+      unmasked += taken;
       tokenFlags.push(true);
       valueIndex += 1;
     } else {
       masked += patternChar;
       tokenFlags.push(false);
-      if (value[valueIndex] === patternChar) valueIndex += 1;
+      if (halfWidthChar(value[valueIndex] ?? "") === halfWidthChar(patternChar)) valueIndex += 1;
     }
   }
   return {
@@ -8767,67 +9512,169 @@ function applyMask(value, pattern, tokens) {
     tokenFlags
   };
 }
+function compileTokens(declaration) {
+  const map = /* @__PURE__ */ new Map();
+  for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...parseTokens(declaration) })) {
+    try {
+      map.set(key, new RegExp(`^(?:${source})$`));
+    } catch {
+    }
+  }
+  return map;
+}
+function parseTokens(declaration) {
+  let parsed;
+  try {
+    parsed = JSON.parse(declaration);
+  } catch {
+    return {};
+  }
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  const tokens = {};
+  for (const [key, source] of Object.entries(parsed)) {
+    if (typeof source === "string") tokens[key] = source;
+  }
+  return tokens;
+}
+function deletionOf(event) {
+  const inputType = event instanceof InputEvent ? event.inputType : "";
+  if (!inputType.startsWith("delete")) return null;
+  return inputType.endsWith("Forward") ? "forward" : "backward";
+}
+function tokenCharOffset(tokenFlags, n) {
+  let seen = 0;
+  for (let i = 0; i < tokenFlags.length; i += 1) {
+    if (!tokenFlags[i]) continue;
+    seen += 1;
+    if (seen === n) return i;
+  }
+  return -1;
+}
 var InputMaskController = class extends Controller {
   static values = {
     pattern: { type: String, default: "" },
-    tokens: { type: Object, default: {} },
+    tokens: { type: String, default: "" },
     unmaskToHidden: { type: Boolean, default: true }
   };
   static actions = ["format"];
-  static events = ["change"];
+  static events = ["change", "reconcile"];
+  /** The value this controller last committed, and the baseline both events compare. */
+  #lastValue = null;
+  #started = false;
+  /** Validated token map; the hot path never parses the `tokens` declaration. */
+  #tokens = compileTokens("");
+  /** Holds mid-composition input so the IME's uncommitted text is never rewritten. */
+  #composition = new CompositionTracker({ onEnd: () => this.#reformat("edit") });
+  /** Re-parses the declaration and re-formats under the tokens it now selects. */
+  tokensValueChanged() {
+    this.#tokens = compileTokens(this.tokensValue);
+    if (this.#started) this.#reformat("reconcile");
+  }
+  patternValueChanged() {
+    if (this.#started) this.#reformat("reconcile");
+  }
+  /** Clears a sink it stops maintaining so a submit cannot carry a stale raw value. */
+  unmaskToHiddenValueChanged() {
+    if (!this.#started) return;
+    if (!this.unmaskToHiddenValue) {
+      const sink = this.#resolveSink();
+      if (sink) sink.value = "";
+    }
+    this.#reformat("reconcile");
+  }
   connect() {
-    this.#apply();
+    this.#started = true;
+    this.#composition.observe(this.element);
+    this.#lastValue = this.element.value;
+    this.#reformat("reconcile");
+  }
+  disconnect() {
+    this.#started = false;
+    this.#composition.disconnect();
   }
   /** Formats the field on input, preserving the caret. Bound via `data-action`. */
-  format() {
-    this.#apply();
+  format(event) {
+    if (this.#composition.isComposing(event)) return;
+    this.#reformat("edit", deletionOf(event));
   }
-  /** Core reformat: mask the current value, restore the caret, sync, and announce. */
-  #apply() {
-    if (!this.patternValue) return;
+  /**
+   * Core reformat: mask the current value, restore the caret, sync the sink and
+   * the state hooks, and report a moved value under the event `cause` selects.
+   */
+  #reformat(cause, deletion = null) {
     const input = this.element;
-    const previous = input.value;
-    const caret = input.selectionStart ?? previous.length;
-    const tokens = this.#tokenRegexes();
-    const significant = this.#countSignificant(previous.slice(0, caret), tokens);
-    const result = applyMask(previous, this.patternValue, tokens);
+    const raw = input.value;
+    if (this.patternValue === "") {
+      this.#flag("data-mask-complete", false);
+      this.#flag("data-mask-empty", raw.length === 0);
+      this.#lastValue = raw;
+      return;
+    }
+    const caret = input.selectionStart ?? raw.length;
+    let anchor = this.#significantBefore(raw.slice(0, caret));
+    let result = applyMask(raw, this.patternValue, this.#tokens);
+    if (deletion !== null && result.masked === this.#lastValue) {
+      const target = deletion === "backward" ? anchor : anchor + 1;
+      const offset = tokenCharOffset(result.tokenFlags, target);
+      if (offset >= 0) {
+        anchor = target - 1;
+        result = applyMask(
+          result.masked.slice(0, offset) + result.masked.slice(offset + 1),
+          this.patternValue,
+          this.#tokens
+        );
+      }
+    }
+    if (input.readOnly || input.disabled || inheritsFieldsetDisabled(input)) {
+      this.#publish(result, raw);
+      this.#lastValue = raw;
+      return;
+    }
     input.value = result.masked;
-    this.#restoreCaret(input, result.tokenFlags, significant);
+    this.#restoreCaret(result.tokenFlags, anchor);
+    this.#publish(result, result.masked);
+    if (result.masked === this.#lastValue) return;
+    this.#lastValue = result.masked;
+    const detail = { masked: result.masked, unmasked: result.unmasked, complete: result.complete };
+    if (cause === "edit") this.dispatch("change", { detail });
+    else this.dispatch("reconcile", { detail });
+  }
+  /** Syncs the raw-value sink and the state hooks for the `shown` field text. */
+  #publish(result, shown) {
     if (this.unmaskToHiddenValue) {
-      const unmask = this.#unmaskField();
-      if (unmask) unmask.value = result.unmasked;
+      const sink = this.#resolveSink();
+      if (sink) sink.value = result.unmasked;
     }
     this.#flag("data-mask-complete", result.complete);
-    this.#flag("data-mask-empty", result.masked.length === 0);
-    if (result.masked !== previous) {
-      this.dispatch("change", {
-        detail: { masked: result.masked, unmasked: result.unmasked, complete: result.complete }
-      });
-    }
+    this.#flag("data-mask-empty", shown.length === 0);
+  }
+  /**
+   * How many token slots the text before the caret fills. Masking that prefix is
+   * what makes a rejected character — or a literal that also matches a token —
+   * count exactly as the rendering counts it, so the caret cannot drift.
+   */
+  #significantBefore(prefix) {
+    return applyMask(prefix, this.patternValue, this.#tokens).unmasked.length;
   }
   /** Places the caret after the `n`-th token char (skipping following literals). */
-  #restoreCaret(input, tokenFlags, n) {
+  #restoreCaret(tokenFlags, n) {
     let position;
     if (n <= 0) {
       let i = 0;
       while (i < tokenFlags.length && !tokenFlags[i]) i += 1;
       position = i;
     } else {
-      let seen = 0;
-      position = tokenFlags.length;
-      for (let i = 0; i < tokenFlags.length; i += 1) {
-        if (!tokenFlags[i]) continue;
-        seen += 1;
-        if (seen === n) {
-          let j = i + 1;
-          while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
-          position = j;
-          break;
-        }
+      const offset = tokenCharOffset(tokenFlags, n);
+      if (offset < 0) {
+        position = tokenFlags.length;
+      } else {
+        let j = offset + 1;
+        while (j < tokenFlags.length && !tokenFlags[j]) j += 1;
+        position = j;
       }
     }
     try {
-      input.setSelectionRange(position, position);
+      this.element.setSelectionRange(position, position);
     } catch {
     }
   }
@@ -8836,52 +9683,47 @@ var InputMaskController = class extends Controller {
    * can coexist in one form:
    *
    * 1. **Explicit pairing** — a sink whose attribute value names this input's
-   *    `id` (`data-stimeo--input-mask-unmask="zip"`), looked up across the form
-   *    (or the document when the input is form-less).
-   * 2. **Nearest container** — otherwise, walking up from the input (stopping at
-   *    the form boundary), the first *value-less* sink in the closest ancestor.
-   *    Wrapped input+sink pairs each find their own sink, and the single
-   *    form-level sink keeps working unchanged. A sink claimed by another
-   *    input's id is never matched here.
-   */
-  #unmaskField() {
+   *    `id` (`data-stimeo--input-mask-unmask="zip"`).
+   * 2. **Nearest container** — otherwise, walking up from the input, the first
+   *    *value-less* sink in the closest ancestor. Wrapped input+sink pairs each
+   *    find their own sink, and the single form-level sink keeps working
+   *    unchanged. A sink claimed by another input's id is never matched here.
+   *
+   * Both steps only ever consider the associated form's own controls, so a sink
+   * belonging to a different form (or to none) is never written, while one the
+   * `form` attribute associates from elsewhere in the document still resolves —
+   * for either the input or the sink, neither of which needs to contain or be
+   * contained by the form. A form-less input reads the document instead.
+   */
+  #resolveSink() {
+    const candidates = this.#sinkCandidates();
     const id = this.element.id;
     if (id.length > 0) {
-      const scope = this.element.form ?? document;
-      const quoted = id.replace(/["\\]/g, "\\$&");
-      const paired = scope.querySelector(`input[${UNMASK_ATTR}="${quoted}"]`);
+      const paired = candidates.find((sink) => sink.getAttribute(UNMASK_ATTR) === id);
       if (paired) return paired;
     }
+    const free = candidates.filter((sink) => sink.getAttribute(UNMASK_ATTR) === "");
     for (let node = this.element.parentElement; node !== null; node = node.parentElement) {
-      const sink = node.querySelector(`input[${UNMASK_ATTR}=""]`);
+      const ancestor = node;
+      const sink = free.find((candidate) => ancestor.contains(candidate));
       if (sink) return sink;
-      if (node === this.element.form) break;
     }
     return null;
   }
-  /** Counts characters in `text` that fill any token (the caret-significant chars). */
-  #countSignificant(text, tokens) {
-    let count = 0;
-    for (const char of text) {
-      for (const regex of tokens.values()) {
-        if (regex.test(char)) {
-          count += 1;
-          break;
-        }
-      }
-    }
-    return count;
-  }
-  /** Compiles the effective token map (defaults with the user `tokens` merged over). */
-  #tokenRegexes() {
-    const map = /* @__PURE__ */ new Map();
-    for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...this.tokensValue })) {
-      try {
-        map.set(key, new RegExp(`^(?:${source})$`));
-      } catch {
-      }
+  /**
+   * Every sink the input's form owns, in document order — one collection read per
+   * resolution, so the cost tracks the form's own controls and not the depth of
+   * the markup around it. `form.elements` lists controls the `form` attribute
+   * associates from anywhere in the document, and lists nothing another form owns.
+   */
+  #sinkCandidates() {
+    const form = this.element.form;
+    if (form === null) {
+      return Array.from(document.querySelectorAll(`input[${UNMASK_ATTR}]`));
     }
-    return map;
+    return Array.from(form.elements).filter(
+      (element) => element instanceof HTMLInputElement && element.hasAttribute(UNMASK_ATTR)
+    );
   }
   /** Sets a boolean `data-*` flag to `"true"` when `on`, else removes it. */
   #flag(name, on) {
@@ -11821,103 +12663,266 @@ var NavigationMenuController = class extends Controller {
   get #isAnyOpen() {
     return this.#openTrigger !== null;
   }
-};
-var NestedFormController = class extends Controller {
-  static targets = ["list", "template", "add", "remove", "destroyFlag"];
-  static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 0 },
-    indexPlaceholder: { type: String, default: "__INDEX__" },
-    announce: { type: Boolean, default: true },
-    countMessage: { type: String, default: "" }
-  };
-  static actions = ["add"];
-  static events = ["add", "remove"];
-  /** Monotonic source for unique row indices; never a row-state counter. */
-  #lastIndex = 0;
-  /** Delegated click handler for the per-row remove buttons (dynamic-safe). */
-  #onClick = (event) => {
-    const target = event.target;
-    const button = target?.closest('[data-stimeo--nested-form-target="remove"]');
-    if (!button || !this.element.contains(button)) return;
-    const row = this.#rowContaining(button);
-    if (row) this.#removeRow(row);
-  };
-  connect() {
-    this.element.addEventListener("click", this.#onClick);
-    this.#refresh();
+};
+var ROOT_SELECTOR = '[data-controller~="stimeo--nested-form"]';
+var REMOVE_SELECTOR = '[data-stimeo--nested-form-target="remove"]';
+var DESTROY_FLAG_SELECTOR = '[data-stimeo--nested-form-target="destroyFlag"]';
+var DESTROYED_VALUES = /* @__PURE__ */ new Set(["1", "true"]);
+var NestedFormController = class extends Controller {
+  static targets = ["list", "template", "add", "remove", "destroyFlag"];
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 0 },
+    indexPlaceholder: { type: String, default: "__INDEX__" },
+    announce: { type: Boolean, default: true },
+    countMessage: { type: String, default: "" }
+  };
+  static actions = ["add"];
+  static events = ["add", "remove", "reconcile"];
+  /** Monotonic source for unique row indices; never a row-state counter. */
+  #lastIndex = 0;
+  #warnedMissing = false;
+  #warnedTemplate = false;
+  /** The state last written to the hooks; reconciliation reports only real moves. */
+  #published = null;
+  /** Watches the list for row changes the controller did not perform itself. */
+  #observer = null;
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());
+  /** Restores the authored add-button `disabled` when a lease ends. */
+  #addDisabled = new AttributeLease("disabled");
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  /** Makes the root a programmatic focus destination when no other candidate survives. */
+  #tabindex = new TabindexLoan();
+  /**
+   * Delegated click handler for the per-row remove buttons (dynamic-safe). Only
+   * buttons whose nearest nested-form root is this instance are acted on, so a
+   * nested inner form's buttons never remove an outer row.
+   */
+  #onClick = (event) => {
+    const target = event.target;
+    const button = target?.closest(REMOVE_SELECTOR);
+    if (!button || this.#ownerOf(button) !== this.element) return;
+    const row = this.#rowContaining(button);
+    if (row) this.#removeRow(row);
+  };
+  connect() {
+    this.#warnedMissing = false;
+    this.#warnedTemplate = false;
+    this.element.addEventListener("click", this.#onClick);
+    this.#reconcile.activate();
+    this.#beforeCache.activate();
+    if (!this.hasListTarget || !this.hasTemplateTarget) this.#warnMissing();
+    this.#refresh();
+  }
+  disconnect() {
+    this.element.removeEventListener("click", this.#onClick);
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#reconcile.cancel();
+    this.#beforeCache.deactivate();
+    this.#rewindForCache();
+    this.#tabindex.returnAll();
+    this.#published = null;
+  }
+  /** Follows an arriving or swapped-in list: rebind to the primary, then reconcile. */
+  listTargetConnected() {
+    this.#rebindObserver();
+    this.#reconcile.schedule();
+  }
+  /** Follows a departing list the same way — the primary may have changed. */
+  listTargetDisconnected() {
+    this.#rebindObserver();
+    this.#reconcile.schedule();
+  }
+  /**
+   * Points the observer at the current primary list. Re-deriving on every list
+   * arrival and departure makes the binding independent of the order Stimulus
+   * reports an overlapping swap in — a staggered swap (successor appended before
+   * the old list leaves) ends observed and reconciled either way.
+   */
+  #rebindObserver() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    if (!this.hasListTarget) return;
+    this.#observer = new MutationObserver(() => this.#reconcile.schedule());
+    this.#observer.observe(this.listTarget, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["value"]
+    });
+  }
+  /** Returns the lease with a departing add button; a new one re-arms on refresh. */
+  addTargetDisconnected(target) {
+    this.#addDisabled.return(target);
+    this.#reconcile.schedule();
+  }
+  addTargetConnected() {
+    this.#reconcile.schedule();
   }
-  disconnect() {
-    this.element.removeEventListener("click", this.#onClick);
+  /** Re-clamps when application code or a Turbo morph changes `min`. */
+  minValueChanged() {
+    this.#reconcile.schedule();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `max`. */
+  maxValueChanged() {
+    this.#reconcile.schedule();
   }
   /**
    * Clones the template row, replaces the index placeholder with a unique value,
-   * appends it, focuses its first control, and announces the new count. No-ops at
-   * `max`.
+   * appends it, focuses its first tab stop, and announces the new count. No-ops at
+   * `max`, when the required targets are missing (named on the console once per
+   * connection), or when the template does not produce exactly one root element
+   * (also named once; the insertion is rolled back so nothing accumulates).
    */
   add() {
-    if (!this.hasTemplateTarget || !this.hasListTarget || this.#atMax) return;
+    if (!this.hasListTarget || !this.hasTemplateTarget) {
+      this.#warnMissing();
+      return;
+    }
+    if (this.#atMax) return;
     const index = this.#nextIndex();
     const markup = this.templateTarget.innerHTML.replaceAll(
       this.indexPlaceholderValue,
       String(index)
     );
-    this.listTarget.insertAdjacentHTML("beforeend", markup);
-    const row = this.listTarget.lastElementChild;
-    if (!row) return;
+    const list = this.listTarget;
+    const beforeNodes = list.childNodes.length;
+    const beforeElements = list.childElementCount;
+    list.insertAdjacentHTML("beforeend", markup);
+    const added = Array.from(list.children).slice(beforeElements);
+    if (added.length !== 1) {
+      while (list.childNodes.length > beforeNodes) list.lastChild?.remove();
+      this.#warnBadTemplate(added.length);
+      return;
+    }
+    const row = added[0];
     this.#refresh();
-    this.#firstControl(row)?.focus();
+    firstTabStop(row)?.focus();
     this.dispatch("add", { detail: { index, element: row } });
     this.#announce();
   }
   /**
-   * Removes a row: a persisted row (one carrying a `destroyFlag`) has its flag set
-   * to `1` and is hidden so Rails destroys it on submit; an unsaved row is dropped
-   * from the DOM. Returns focus to a neighboring row. No-ops at `min`.
+   * Removes a row: a persisted row (one carrying its own `destroyFlag`) has the
+   * flag set to `1` and is hidden so Rails destroys it on submit; an unsaved row
+   * is dropped from the DOM. Returns focus to a surviving row. No-ops at `min`.
    */
   #removeRow(row) {
-    if (this.#effectiveRows.length <= this.minValue) return;
-    const neighbors = this.#effectiveRows;
-    const position = neighbors.indexOf(row);
-    const neighbor = neighbors[position + 1] ?? neighbors[position - 1] ?? null;
-    const flag = row.querySelector(
-      '[data-stimeo--nested-form-target="destroyFlag"]'
-    );
+    const rows = this.#effectiveRows;
+    if (this.#destroyed(row)) {
+      row.hidden = true;
+      this.#focusAfterRemove(this.#positionAmong(rows, row));
+      return;
+    }
+    if (rows.length <= this.minValue) return;
+    const position = rows.indexOf(row);
+    const flag = this.#destroyFlagOf(row);
     const persisted = flag !== null;
-    if (persisted) {
+    if (flag) {
       flag.value = "1";
       row.hidden = true;
     } else {
       row.remove();
     }
     this.#refresh();
-    const focusTarget = neighbor ? this.#firstControl(neighbor) : this.hasAddTarget ? this.addTarget : null;
-    focusTarget?.focus();
+    this.#focusAfterRemove(Math.max(0, position));
     this.dispatch("remove", { detail: { element: row, persisted } });
     this.#announce();
   }
-  /** Recomputes the live count and the min/max state hooks from the DOM. */
+  /**
+   * The index of the first effective row following `row` in document order.
+   * -1 (no following row) feeds the focus slices as a negative index, which
+   * yields the same fully-reversed nearest-first order as `rows.length` would.
+   */
+  #positionAmong(rows, row) {
+    return rows.findIndex(
+      (candidate) => (row.compareDocumentPosition(candidate) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0
+    );
+  }
+  /**
+   * Moves focus to the first tab stop of the nearest surviving row — following
+   * rows first, then preceding ones — falling back to the add button and finally
+   * to the root via a temporary `tabindex`.
+   */
+  #focusAfterRemove(position) {
+    const rows = this.#effectiveRows;
+    const ordered = [...rows.slice(position), ...rows.slice(0, position).reverse()];
+    for (const row of ordered) {
+      const stop = firstTabStop(row);
+      if (stop) {
+        stop.focus();
+        return;
+      }
+    }
+    if (this.hasAddTarget && isTabStop(this.addTarget)) {
+      this.addTarget.focus();
+      return;
+    }
+    this.#tabindex.lend(this.element);
+    this.element.focus();
+  }
+  /** Recomputes the count and min/max hooks from the DOM and records them as published. */
   #refresh() {
+    if (!this.hasListTarget) return;
     const count = this.#effectiveRows.length;
+    const atMin = count <= this.minValue;
+    const atMax = this.maxValue > 0 && count >= this.maxValue;
     this.element.setAttribute("data-nested-count", String(count));
-    this.#reflect("data-nested-at-max", this.maxValue > 0 && count >= this.maxValue);
-    this.#reflect("data-nested-at-min", count <= this.minValue);
-    if (this.hasAddTarget) this.addTarget.disabled = this.#atMax;
+    this.#reflect("data-nested-at-max", atMax);
+    this.#reflect("data-nested-at-min", atMin);
+    if (this.hasAddTarget) {
+      if (this.maxValue > 0) this.#addDisabled.write(this.addTarget, atMax ? "" : null);
+      else this.#addDisabled.return(this.addTarget);
+    }
+    this.#published = { count, atMin, atMax };
+  }
+  /**
+   * Applies row changes the controller did not perform itself (Turbo Streams,
+   * morphs, runtime Value changes): refreshes the hooks and reports a moved
+   * public state as `reconcile`. The controller's own operations refresh
+   * synchronously first, so their observer echo arrives here as a no-move.
+   */
+  #reconcileNow() {
+    const previous = this.#published;
+    this.#refresh();
+    const current = this.#published;
+    if (!previous || !current) return;
+    const moved = previous.count !== current.count || previous.atMin !== current.atMin || previous.atMax !== current.atMax;
+    if (moved) this.dispatch("reconcile", { detail: { ...current } });
   }
   /** Bridges the count change to the shared announcer when configured. */
   #announce() {
-    if (!this.announceValue || !this.countMessageValue) return;
-    const message = this.countMessageValue.replaceAll(
-      "{count}",
-      String(this.#effectiveRows.length)
-    );
-    window.dispatchEvent(new CustomEvent("stimeo--announcer:announce", { detail: { message } }));
+    if (!this.announceValue || this.countMessageValue === "") return;
+    announce(fillTemplate(this.countMessageValue, { count: this.#effectiveRows.length }));
   }
   /** Sets `attribute` to `"true"` when `on`, else removes it. */
   #reflect(attribute, on) {
     if (on) this.element.setAttribute(attribute, "true");
     else this.element.removeAttribute(attribute);
   }
+  /** Returns the disabled lease so an authored value never leaks into a snapshot. */
+  #rewindForCache() {
+    if (this.hasAddTarget) this.#addDisabled.return(this.addTarget);
+  }
+  /** Names the missing required target(s) once per connection. */
+  #warnMissing() {
+    if (this.#warnedMissing) return;
+    this.#warnedMissing = true;
+    const missing = [
+      this.hasListTarget ? null : 'a "list" target',
+      this.hasTemplateTarget ? null : 'a "template" target'
+    ].filter((part) => part !== null).join(" and ");
+    console.warn(
+      `Stimeo UI: "${this.identifier}" cannot manage rows because its markup lacks ${missing}.`
+    );
+  }
+  /** Names a template that does not produce exactly one element, once per connection. */
+  #warnBadTemplate(produced) {
+    if (this.#warnedTemplate) return;
+    this.#warnedTemplate = true;
+    const reason = produced === 0 ? "produces no element" : "must produce exactly one root element";
+    console.warn(`Stimeo UI: "${this.identifier}" added no row because its template ${reason}.`);
+  }
   /** A strictly-increasing unique index (collision-free even on rapid adds). */
   #nextIndex() {
     const index = Math.max(Date.now(), this.#lastIndex + 1);
@@ -11927,24 +12932,41 @@ var NestedFormController = class extends Controller {
   get #atMax() {
     return this.maxValue > 0 && this.#effectiveRows.length >= this.maxValue;
   }
-  /** Direct child rows of the list that are not flagged for destruction. */
+  /**
+   * Direct child rows of the list whose own destroy flag is not set. Callers
+   * reach this only behind a list-presence gate (`add`, `#refresh`, and the
+   * click path through `#rowContaining`).
+   */
   get #effectiveRows() {
-    return Array.from(this.listTarget.children).filter((row) => !row.hidden);
+    return Array.from(this.listTarget.children).filter(
+      (row) => !this.#destroyed(row)
+    );
+  }
+  /** Whether `row` is flagged for destruction; the flag value is the truth source. */
+  #destroyed(row) {
+    const flag = this.#destroyFlagOf(row);
+    return flag !== null && DESTROYED_VALUES.has(flag.value);
+  }
+  /** The row's own destroy flag, skipping flags owned by a nested inner form. */
+  #destroyFlagOf(row) {
+    for (const flag of row.querySelectorAll(DESTROY_FLAG_SELECTOR)) {
+      if (this.#ownerOf(flag) === this.element) return flag;
+    }
+    return null;
+  }
+  /** The nearest nested-form root that owns `el`. */
+  #ownerOf(el) {
+    return el.closest(ROOT_SELECTOR);
   }
   /** The nearest ancestor of `el` that is a direct child of the list, else null. */
   #rowContaining(el) {
+    if (!this.hasListTarget) return null;
     let node = el;
     while (node && node.parentElement !== this.listTarget) {
       node = node.parentElement;
     }
     return node;
   }
-  /** First visible focusable control inside `row` (skips hidden inputs). */
-  #firstControl(row) {
-    return row.querySelector(
-      'input:not([type="hidden"]), select, textarea, button, [tabindex]'
-    );
-  }
 };
 var NetworkStatusController = class extends Controller {
   static targets = ["offline", "online"];
@@ -12578,134 +13600,213 @@ var OptimisticController = class extends Controller {
     }
   }
 };
+var DEFAULT_PATTERN = "[0-9]";
+function compilePattern(source) {
+  try {
+    return new RegExp(`^${source}$`);
+  } catch {
+    return null;
+  }
+}
+function hasModifier2(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
 var OtpController = class extends Controller {
   static targets = ["field", "value", "error"];
   static values = {
-    length: { type: Number, default: 6 },
-    pattern: { type: String, default: "[0-9]" }
+    pattern: { type: String, default: DEFAULT_PATTERN }
   };
-  static actions = ["onInput", "onKeydown", "onPaste"];
-  static events = ["change", "complete", "invalid"];
+  static actions = ["onInput", "onKeydown", "onPaste", "onPointerDown", "clear"];
+  static events = ["change", "complete", "invalid", "reconcile"];
+  /** Validated matcher; the hot path never compiles a raw declaration. */
+  #pattern = new RegExp(`^${DEFAULT_PATTERN}$`);
+  /** Source of {@link #pattern}, reported in `invalid` so consumers can word it. */
+  #patternSource = DEFAULT_PATTERN;
+  /** Combined value carried by the last dispatch; keeps a no-op sync silent. */
+  #lastValue = null;
+  /** Field whose confirming `input` after `compositionend` is already handled. */
+  #confirmedField = null;
+  /** True between connect and disconnect, so pre-connect Value changes stay silent. */
+  #connected = false;
+  /** Digit each field last committed, restored when rejected input replaced it. */
+  #committed = /* @__PURE__ */ new WeakMap();
+  /** Collapses one batch of field target callbacks into a single reconciliation. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileFields());
+  #ariaInvalid = new AttributeLease("aria-invalid");
+  #ariaErrorMessage = new AttributeLease("aria-errormessage");
+  #ariaDescribedBy = new AttributeLease("aria-describedby");
+  #errorHidden = new AttributeLease("hidden");
+  #state = new AttributeLease("data-state");
+  /** Rewinds the transient error surface before Turbo freezes the page. */
+  #beforeCache = new BeforeCacheReset(() => this.#clearError());
   /** Owns IME lifecycle state across every digit field. */
   #composition = new CompositionTracker({
+    onStart: () => {
+      this.#confirmedField = null;
+    },
     onEnd: (event) => {
-      const input = event.currentTarget;
-      if (input) this.#handleInputValidation(input);
+      const input = this.#fieldFrom(event);
+      if (!input) return;
+      this.#confirmedField = input;
+      const committed = event.data ?? "";
+      this.#accept(input, committed.length > input.value.length ? committed : input.value);
     }
   });
   connect() {
-    for (const field of this.fieldTargets) {
-      field.addEventListener("focus", this.#onFieldFocus);
-      this.#composition.observe(field);
-    }
+    this.#connected = true;
+    for (const field of this.fieldTargets) this.#bind(field);
+    document.addEventListener("reset", this.#onReset, true);
+    this.#beforeCache.activate();
+    this.#reconcile.activate();
+    this.#adopt();
+    this.#lastValue = this.#sync();
   }
   disconnect() {
-    for (const field of this.fieldTargets) {
-      field.removeEventListener("focus", this.#onFieldFocus);
-    }
+    this.#connected = false;
+    for (const field of this.fieldTargets) this.#unbind(field);
     this.#composition.disconnect();
+    document.removeEventListener("reset", this.#onReset, true);
+    this.#beforeCache.deactivate();
+    this.#reconcile.cancel();
+    this.#clearError();
+    this.#state.return(this.element);
   }
   /**
    * Stimulus lifecycle callback when a new field target enters the DOM.
-   * Ensures new additions are also wired with overwriting support.
+   * Wires the new field and folds the wider digit count into one reconciliation,
+   * which stays inert until `connect()` opens the window.
    */
   fieldTargetConnected(element) {
-    element.addEventListener("focus", this.#onFieldFocus);
-    this.#composition.observe(element);
+    this.#bind(element);
+    this.#adoptField(element);
+    this.#reconcile.schedule();
   }
-  /** Removes focus listeners when fields are dropped. */
+  /** Releases a dropped field's listeners and leases, then reconciles the rest. */
   fieldTargetDisconnected(element) {
-    element.removeEventListener("focus", this.#onFieldFocus);
-    this.#composition.unobserve(element);
+    this.#unbind(element);
+    this.#returnFieldLeases(element);
+    this.#reconcile.schedule();
+  }
+  /**
+   * Re-validates a changed `pattern` declaration once and drops any entered digit
+   * the new pattern no longer accepts, so the combined value stays interpretable.
+   */
+  patternValueChanged() {
+    const compiled = compilePattern(this.patternValue);
+    this.#patternSource = compiled ? this.patternValue : DEFAULT_PATTERN;
+    this.#pattern = compiled ?? new RegExp(`^${DEFAULT_PATTERN}$`);
+    if (!this.#connected) return;
+    let dropped = false;
+    for (const field of this.fieldTargets) {
+      if (field.value === "" || !this.#isWritable(field)) continue;
+      if (this.#pattern.test(field.value)) continue;
+      this.#writeField(field, "");
+      dropped = true;
+    }
+    if (dropped) this.#syncAndDispatch();
   }
-  /** Handles keystroke inputs and advances focus to the next field. */
+  /** Handles keystroke inputs, distributes autofilled text, and advances focus. */
   onInput(event) {
-    const input = event.currentTarget;
+    const input = this.#fieldFrom(event);
     if (!input) return;
+    const confirmed = this.#confirmedField;
+    this.#confirmedField = null;
+    if (confirmed === input) return;
     if (this.#composition.isComposing(event)) return;
-    this.#handleInputValidation(input);
+    this.#accept(input);
   }
-  /** Handles Backspace retreating, arrows, and home/end navigation. */
+  /** Handles Backspace clearing, arrows, and home/end navigation. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
-    const input = event.currentTarget;
+    const input = this.#fieldFrom(event);
     if (!input) return;
-    const index = this.fieldTargets.indexOf(input);
-    if (index === -1) return;
+    this.#confirmedField = null;
     if (this.#composition.isComposing(event)) return;
+    const index = this.fieldTargets.indexOf(input);
+    const fields = this.fieldTargets;
     switch (logicalArrowKey(event.key, this.element)) {
       case "Backspace":
-        if (!input.value) {
-          if (index > 0) {
-            event.preventDefault();
-            const prevField = this.fieldTargets[index - 1];
-            if (prevField) {
-              prevField.value = "";
-              prevField.removeAttribute("data-filled");
-              prevField.focus();
-              this.#clearError();
-              this.#syncAndDispatch();
-            }
-          }
-        } else {
-          input.value = "";
-          input.removeAttribute("data-filled");
+        if (hasModifier2(event)) break;
+        if (input.value && this.#isWritable(input)) {
+          event.preventDefault();
+          this.#writeField(input, "");
           this.#clearError();
           this.#syncAndDispatch();
+        } else {
+          const previous = this.#writableBefore(index);
+          if (previous) {
+            event.preventDefault();
+            this.#writeField(previous, "");
+            previous.focus();
+            this.#clearError();
+            this.#syncAndDispatch();
+          }
         }
         break;
-      case "ArrowLeft":
-        if (index > 0) {
+      case "ArrowLeft": {
+        const previous = this.#focusableBefore(index);
+        if (previous) {
           event.preventDefault();
-          this.fieldTargets[index - 1]?.focus();
+          previous.focus();
         }
         break;
-      case "ArrowRight":
-        if (index < this.lengthValue - 1) {
+      }
+      case "ArrowRight": {
+        const next = this.#focusableAfter(index);
+        if (next) {
           event.preventDefault();
-          this.fieldTargets[index + 1]?.focus();
+          next.focus();
         }
         break;
-      case "Home":
-        event.preventDefault();
-        this.fieldTargets[0]?.focus();
+      }
+      case "Home": {
+        if (hasModifier2(event)) break;
+        const first = fields.find((field) => this.#isFocusable(field));
+        if (first) {
+          event.preventDefault();
+          first.focus();
+        }
         break;
-      case "End":
-        event.preventDefault();
-        this.fieldTargets[this.lengthValue - 1]?.focus();
+      }
+      case "End": {
+        if (hasModifier2(event)) break;
+        const last = fields.slice().reverse().find((field) => this.#isFocusable(field));
+        if (last) {
+          event.preventDefault();
+          last.focus();
+        }
         break;
+      }
     }
   }
-  /** Divides pasted string characters across available input fields. */
+  /** Divides pasted string characters across the available input fields. */
   onPaste(event) {
-    const input = event.currentTarget;
+    const input = this.#fieldFrom(event);
     if (!input) return;
-    const startIndex = this.fieldTargets.indexOf(input);
-    if (startIndex === -1) return;
     event.preventDefault();
-    const rawText = event.clipboardData?.getData("text") || "";
-    const text = this.#normalizeValue(rawText);
-    const regex = new RegExp(`^${this.patternValue}$`);
-    const validChars = Array.from(text).filter((char) => regex.test(char));
-    if (validChars.length === 0) {
-      this.#showError();
-      return;
-    }
-    const limit = Math.min(validChars.length, this.lengthValue - startIndex);
-    let lastFocusedIndex = startIndex;
-    for (let i = 0; i < limit; i++) {
-      const fieldIndex = startIndex + i;
-      const field = this.fieldTargets[fieldIndex];
-      const char = validChars[i];
-      if (field && char) {
-        field.value = char;
-        field.setAttribute("data-filled", "true");
-        lastFocusedIndex = fieldIndex;
-      }
+    this.#confirmedField = null;
+    this.#distribute(input, toHalfWidth(event.clipboardData?.getData("text") ?? ""));
+  }
+  /**
+   * Redirects a pointer landing on an empty field to the earliest empty one, so
+   * a passcode is entered in order. Filled fields stay directly reachable for
+   * correction, and keyboard focus is left alone.
+   */
+  onPointerDown(event) {
+    const input = this.#fieldFrom(event);
+    if (input?.value !== "") return;
+    const first = this.fieldTargets.find((field) => this.#isWritable(field) && field.value === "");
+    if (!first || first === input) return;
+    event.preventDefault();
+    first.focus();
+  }
+  /** Empties every writable field and restarts entry at the first of them. */
+  clear() {
+    for (const field of this.fieldTargets) {
+      if (this.#isWritable(field)) this.#writeField(field, "");
     }
     this.#clearError();
-    const focusTargetIndex = lastFocusedIndex < this.lengthValue - 1 ? lastFocusedIndex + 1 : lastFocusedIndex;
-    this.fieldTargets[focusTargetIndex]?.focus();
+    this.fieldTargets.find((field) => this.#isWritable(field))?.focus();
     this.#syncAndDispatch();
   }
   #onFieldFocus = (event) => {
@@ -12714,54 +13815,199 @@ var OtpController = class extends Controller {
       input.select();
     }
   };
-  #handleInputValidation(input) {
-    const index = this.fieldTargets.indexOf(input);
-    if (index === -1) return;
-    const rawValue = input.value;
-    const normalized = this.#normalizeValue(rawValue);
-    const regex = new RegExp(`^${this.patternValue}$`);
-    if (normalized && regex.test(normalized)) {
-      input.value = normalized;
-      input.setAttribute("data-filled", "true");
+  /** Reconciles derived state after a non-cancelled reset restores the fields. */
+  #onReset = (event) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || !this.#ownedBy(form)) return;
+    queueMicrotask(() => {
+      if (event.defaultPrevented) return;
+      this.#adopt();
+      this.#syncAndDispatch();
+    });
+  };
+  /** Whether a form owns at least one field or the hidden combined value. */
+  #ownedBy(form) {
+    if (this.fieldTargets.some((field) => field.form === form)) return true;
+    return this.hasValueTarget && this.valueTarget.form === form;
+  }
+  #bind(field) {
+    field.addEventListener("focus", this.#onFieldFocus);
+    this.#composition.observe(field);
+  }
+  #unbind(field) {
+    field.removeEventListener("focus", this.#onFieldFocus);
+    this.#composition.unobserve(field);
+    if (this.#confirmedField === field) this.#confirmedField = null;
+  }
+  /** Reads every field back so a restored or reset group starts consistent. */
+  #adopt() {
+    for (const field of this.fieldTargets) this.#adoptField(field);
+    this.#clearError();
+    if (this.hasErrorTarget) this.errorTarget.setAttribute("hidden", "");
+  }
+  /** Takes one field's current value as the truth behind its derived state. */
+  #adoptField(field) {
+    this.#committed.set(field, field.value);
+    this.#markFilled(field, field.value);
+  }
+  /**
+   * Absorbs a batch of field additions or removals as one value transition.
+   *
+   * The page, not the user, moved the value here, so it is reported as
+   * `reconcile`: automation listening for `change` must not read a re-render as
+   * an edit, and a passcode that happens to end up full must not fire the
+   * `complete` that submits it.
+   */
+  #reconcileFields() {
+    const previous = this.#lastValue;
+    const combined = this.#sync();
+    if (combined === previous) return;
+    this.#lastValue = combined;
+    this.dispatch("reconcile", { detail: { value: combined } });
+  }
+  /**
+   * Validates the text an entry point received and distributes what it accepts.
+   * `text` defaults to the field's own value; a confirmation passes the string it
+   * committed, which `maxlength` would otherwise have truncated.
+   */
+  #accept(input, text = input.value) {
+    const raw = toHalfWidth(text);
+    if (raw === "") {
+      this.#writeField(input, "");
       this.#clearError();
-      if (index < this.lengthValue - 1) {
-        const nextField = this.fieldTargets[index + 1];
-        nextField?.focus();
-      }
-    } else if (normalized) {
-      input.value = "";
-      input.removeAttribute("data-filled");
+      this.#syncAndDispatch();
+      return;
+    }
+    this.#distribute(input, raw);
+  }
+  /**
+   * Fills `text`'s accepted characters into the writable fields at and after the
+   * entry point, then leaves focus on the field after the last one filled.
+   */
+  #distribute(from, text) {
+    const accepted = Array.from(text).filter((char) => this.#pattern.test(char));
+    let reached = false;
+    const slots = this.fieldTargets.filter((field) => {
+      reached ||= field === from;
+      return reached && this.#isWritable(field);
+    });
+    const filled = Math.min(accepted.length, slots.length);
+    if (filled === 0) {
+      this.#restore(from);
       this.#showError();
-    } else {
-      input.removeAttribute("data-filled");
+      this.#sync();
+      return;
     }
+    for (let i = 0; i < filled; i++) {
+      const field = slots[i];
+      const char = accepted[i];
+      if (field && char) this.#writeField(field, char);
+    }
+    const last = slots[filled - 1];
+    if (last) (this.#writableAfter(last) ?? last).focus();
+    this.#clearError();
     this.#syncAndDispatch();
   }
-  #normalizeValue(val) {
-    return val.replace(/[０-９]/g, (s) => String.fromCharCode(s.charCodeAt(0) - 65248));
+  /** Restores the digit a field committed before rejected input replaced it. */
+  #restore(field) {
+    this.#writeField(field, this.#committed.get(field) ?? "");
   }
-  #showError() {
-    if (this.hasErrorTarget) {
-      this.errorTarget.removeAttribute("hidden");
-    }
-    this.dispatch("invalid", { detail: { pattern: this.patternValue } });
+  /** Commits one field's value and the derived hook that reports it as entered. */
+  #writeField(field, value) {
+    field.value = value;
+    this.#committed.set(field, value);
+    this.#markFilled(field, value);
   }
-  #clearError() {
-    if (this.hasErrorTarget) {
-      this.errorTarget.setAttribute("hidden", "true");
-    }
+  #markFilled(field, value) {
+    if (value) field.setAttribute("data-filled", "true");
+    else field.removeAttribute("data-filled");
   }
-  #syncAndDispatch() {
+  #isWritable(field) {
+    return !field.disabled && !field.readOnly;
+  }
+  #isFocusable(field) {
+    return !field.disabled;
+  }
+  #writableAfter(field) {
     const fields = this.fieldTargets;
-    const combinedValue = fields.map((f) => f.value).join("");
+    return fields.slice(fields.indexOf(field) + 1).find((next) => this.#isWritable(next)) ?? null;
+  }
+  #writableBefore(index) {
+    return this.#before(index).find((field) => this.#isWritable(field)) ?? null;
+  }
+  #focusableAfter(index) {
+    return this.fieldTargets.slice(index + 1).find((field) => this.#isFocusable(field)) ?? null;
+  }
+  #focusableBefore(index) {
+    return this.#before(index).find((field) => this.#isFocusable(field)) ?? null;
+  }
+  /** Fields before `index`, nearest first; empty at the first field. */
+  #before(index) {
+    return this.fieldTargets.slice(0, Math.max(index, 0)).reverse();
+  }
+  /** The event's field target, or `null` when the wiring points somewhere else. */
+  #fieldFrom(event) {
+    const input = event.currentTarget;
+    return this.fieldTargets.find((field) => field === input) ?? null;
+  }
+  #combinedValue() {
+    return this.fieldTargets.map((field) => field.value).join("");
+  }
+  /** Every field carries a character, and there is at least one field. */
+  #isComplete() {
+    const fields = this.fieldTargets;
+    return fields.length > 0 && fields.every((field) => field.value.length > 0);
+  }
+  /** Mirrors the combined value into the form and the root's readable state. */
+  #sync() {
+    const combined = this.#combinedValue();
     if (this.hasValueTarget) {
-      this.valueTarget.value = combinedValue;
+      this.valueTarget.value = combined;
+    }
+    this.#state.write(this.element, this.#stateName(combined));
+    return combined;
+  }
+  #stateName(combined) {
+    if (combined.length === 0) return "empty";
+    return this.#isComplete() ? "complete" : "partial";
+  }
+  #syncAndDispatch() {
+    const combined = this.#sync();
+    if (combined === this.#lastValue) return;
+    this.#lastValue = combined;
+    this.dispatch("change", { detail: { value: combined } });
+    if (this.#isComplete()) {
+      this.dispatch("complete", { detail: { value: combined } });
     }
-    this.dispatch("change", { detail: { value: combinedValue } });
-    const isCompleted = fields.every((f) => f.value.length > 0) && combinedValue.length === this.lengthValue;
-    if (isCompleted) {
-      this.dispatch("complete", { detail: { value: combinedValue } });
+  }
+  /** Surfaces rejected input on every field and on the optional error target. */
+  #showError() {
+    const errorId = this.hasErrorTarget ? ensureId(this.errorTarget, "stimeo--otp-error") : null;
+    for (const field of this.fieldTargets) {
+      this.#ariaInvalid.write(field, "true");
+      if (!errorId) continue;
+      this.#ariaErrorMessage.write(field, errorId);
+      this.#ariaDescribedBy.write(field, this.#describedByWith(field, errorId));
     }
+    if (this.hasErrorTarget) this.#errorHidden.write(this.errorTarget, null);
+    this.dispatch("invalid", { detail: { pattern: this.#patternSource } });
+  }
+  /** Returns every error lease, restoring the authored error surface. */
+  #clearError() {
+    this.#ariaInvalid.returnAll();
+    this.#ariaErrorMessage.returnAll();
+    this.#ariaDescribedBy.returnAll();
+    this.#errorHidden.returnAll();
+  }
+  #returnFieldLeases(field) {
+    this.#ariaInvalid.return(field);
+    this.#ariaErrorMessage.return(field);
+    this.#ariaDescribedBy.return(field);
+  }
+  /** The field's own description tokens with the error id appended once. */
+  #describedByWith(field, errorId) {
+    const tokens = (field.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== errorId);
+    return [...tokens, errorId].join(" ");
   }
 };
 var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
@@ -14988,7 +16234,7 @@ function isInteractiveHost(element) {
 }
 
 // src/controllers/radio_group_controller.ts
-var OBSERVED_ATTRIBUTES3 = [
+var OBSERVED_ATTRIBUTES4 = [
   "aria-checked",
   "aria-disabled",
   "contenteditable",
@@ -15001,7 +16247,7 @@ var OBSERVED_ATTRIBUTES3 = [
   "type",
   "value"
 ];
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+var hasModifier3 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var RadioGroupController = class extends Controller {
   static targets = ["radio", "field"];
   static actions = ["onKeydown", "select"];
@@ -15157,7 +16403,7 @@ var RadioGroupController = class extends Controller {
   #handleKeydown(event, radio) {
     if (event.defaultPrevented || !this.#isSupportedHost(radio)) return;
     if (event.isComposing || isReservedArrowChord(event)) return;
-    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifier3(event)) return;
     if (event.key === " ") {
       if (this.#isActivationDisabled(radio)) {
         event.preventDefault();
@@ -15438,7 +16684,7 @@ var RadioGroupController = class extends Controller {
       subtree: true,
       childList: true,
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES3
+      attributeFilter: OBSERVED_ATTRIBUTES4
     });
     let ancestor = this.element.parentElement;
     while (ancestor) {
@@ -18722,7 +19968,7 @@ var SpinnerController = class extends Controller {
     timeout: { type: Number, default: 0 }
   };
   static actions = ["start", "stop"];
-  static events = ["hide", "show", "timeout"];
+  static events = ["hide", "show", "timeout", "reconcile"];
   #timers = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timers);
   #gate = new DetachGate();
@@ -18826,16 +20072,18 @@ var SpinnerController = class extends Controller {
    * Returns the loading state to idle for the snapshot Turbo is about to take,
    * so a page reached with the Back button is not restored mid-load with a
    * spinner nothing can stop. State only: `data-state`, the indicator's `hidden`,
-   * and `aria-busy`. No `hide` is dispatched — the load was never observed to
-   * finish, and a snapshot rewind is not a lifecycle event the consumer can act
-   * on. The live page keeps its timers, so a navigation that never completes
-   * leaves the running cycle intact.
+   * and `aria-busy`. No `hide` is dispatched — that would claim the load finished.
+   * The rewind reports itself as `reconcile` instead, so a consumer painting from
+   * `show` can drop it before the snapshot is taken. The live page keeps its
+   * timers, so a navigation that never completes leaves the running cycle intact.
    */
   #rewindForCache() {
+    const running = this.element.getAttribute("data-state") !== "idle";
     this.#cancelTimeout();
     this.#setBusy(false);
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
     this.element.setAttribute("data-state", "idle");
+    if (running) this.dispatch("reconcile", { detail: {} });
   }
   /** Reflects busy state onto the controlled region (if present). */
   #setBusy(busy) {
@@ -19285,7 +20533,7 @@ var SubmitOnceController = class extends Controller {
     restoreFocus: { type: Boolean, default: false }
   };
   static actions = ["cancel", "finish", "start"];
-  static events = ["start", "end"];
+  static events = ["start", "end", "reconcile"];
   #timers = new SafeTimeout();
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
@@ -19501,7 +20749,9 @@ var SubmitOnceController = class extends Controller {
   }
   /** Keeps Turbo's cached snapshot idle, without events, announcements, or focus moves. */
   #rewindForCache() {
+    const forms = [...this.#sessions.keys()];
     this.#abandonSessions();
+    if (forms.length > 0) this.dispatch("reconcile", { detail: { forms } });
   }
   /** Tears down a true detach; an in-page move is canceled by the next `connect()`. */
   #teardown() {
@@ -19581,7 +20831,7 @@ var SubmitOnceController = class extends Controller {
     return typeof success === "boolean" ? success : void 0;
   }
 };
-var OBSERVED_ATTRIBUTES4 = [
+var OBSERVED_ATTRIBUTES5 = [
   "role",
   "aria-checked",
   "tabindex",
@@ -19694,7 +20944,7 @@ var SwitchController = class extends Controller {
   #observeAttributes() {
     this.#attributeObserver.observe(this.element, {
       attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES4
+      attributeFilter: OBSERVED_ATTRIBUTES5
     });
     let ancestor = this.element.parentElement;
     while (ancestor) {
@@ -20048,18 +21298,69 @@ var TextareaAutosizeController = class extends Controller {
   static actions = ["resize"];
   static events = ["resize"];
   #lastHeight = -1;
-  #onInput = () => {
+  #lastWidth = -1;
+  #started = false;
+  #pending = false;
+  #fonts = null;
+  /**
+   * Content triggers arriving while the box is collapsed (`display: none`
+   * ancestors) are deferred: `scrollHeight` is 0 there, so measuring would
+   * clamp the kept height to the `minRows` floor and dispatch a bogus
+   * `resize`. The next report from a rendered box flushes the deferral.
+   */
+  #remeasure = () => {
+    if (this.element.clientWidth === 0) {
+      this.#pending = true;
+      return;
+    }
     this.resize();
   };
+  /**
+   * Re-measures when the content width changed (re-wrapping, including a
+   * horizontal padding change under `border-box`), the applied inline height
+   * was stripped (a Turbo morph syncing attributes from server HTML that has no
+   * `style`), or a content trigger was deferred while the box was collapsed.
+   * This instance's own height writes match none of these signals, so they
+   * cannot re-enter; an authored inline height (e.g. a user dragging the native
+   * resize handle) is left alone until the next content trigger. Reports from a
+   * still-collapsed box are skipped (nothing is measurable there).
+   */
+  #layout = new LayoutObserver(() => {
+    if (this.element.clientWidth === 0) return;
+    const width = this.#contentWidth();
+    const stripped = this.element.style.height === "";
+    if (width === this.#lastWidth && !stripped && !this.#pending) return;
+    this.#lastWidth = width;
+    this.resize();
+  });
   connect() {
-    this.element.addEventListener("input", this.#onInput);
+    this.#lastHeight = Math.round(px(this.element.style.height));
+    this.#lastWidth = this.#contentWidth();
+    this.element.addEventListener("input", this.#remeasure);
+    this.element.addEventListener("change", this.#remeasure);
+    this.#layout.observe(this.element);
+    this.#bindFonts();
+    this.#started = true;
     this.resize();
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onInput);
+    this.#started = false;
+    this.element.removeEventListener("input", this.#remeasure);
+    this.element.removeEventListener("change", this.#remeasure);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `minRows`. */
+  minRowsValueChanged() {
+    if (this.#started) this.#remeasure();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `maxRows`. */
+  maxRowsValueChanged() {
+    if (this.#started) this.#remeasure();
   }
   /** Re-measures the content and applies the clamped height. */
   resize() {
+    this.#pending = false;
     const el = this.element;
     const style = window.getComputedStyle(el);
     const lineHeight = this.#lineHeight(style);
@@ -20093,6 +21394,11 @@ var TextareaAutosizeController = class extends Controller {
       this.dispatch("resize", { detail: { height, rows } });
     }
   }
+  /** Content-box width — the wrapping input, unaffected by this instance's height writes. */
+  #contentWidth() {
+    const style = window.getComputedStyle(this.element);
+    return Math.max(0, this.element.clientWidth - px(style.paddingLeft) - px(style.paddingRight));
+  }
   /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
   #lineHeight(style) {
     const lh = px(style.lineHeight);
@@ -20100,6 +21406,20 @@ var TextareaAutosizeController = class extends Controller {
     const fontSize = px(style.fontSize);
     return fontSize > 0 ? fontSize * 1.2 : 16;
   }
+  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
+  #bindFonts() {
+    const fonts = this.element.ownerDocument.fonts;
+    if (!fonts) return;
+    this.#fonts = fonts;
+    fonts.addEventListener("loadingdone", this.#remeasure);
+    fonts.addEventListener("loadingerror", this.#remeasure);
+  }
+  /** Removes the font completion subscriptions. */
+  #unbindFonts() {
+    this.#fonts?.removeEventListener("loadingdone", this.#remeasure);
+    this.#fonts?.removeEventListener("loadingerror", this.#remeasure);
+    this.#fonts = null;
+  }
 };
 var MODES = ["light", "dark", "system"];
 var isMode = (value) => typeof value === "string" && MODES.includes(value);
@@ -20247,7 +21567,7 @@ var PM = 1;
 var SECONDS_PER_MINUTE = 60;
 var SECONDS_PER_HOUR = 60 * SECONDS_PER_MINUTE;
 var SECONDS_PER_DAY = 24 * SECONDS_PER_HOUR;
-var hasModifier2 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+var hasModifier4 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var TimePickerController = class extends Controller {
   static targets = ["segment", "field"];
   static values = {
@@ -20329,7 +21649,7 @@ var TimePickerController = class extends Controller {
     const kind = this.#kindOf(segment);
     if (!kind) return;
     const key = logicalArrowKey(event.key, this.element);
-    if ((key === "Home" || key === "End") && hasModifier2(event)) return;
+    if ((key === "Home" || key === "End") && hasModifier4(event)) return;
     switch (key) {
       case "ArrowUp":
         event.preventDefault();
@@ -20358,7 +21678,7 @@ var TimePickerController = class extends Controller {
         this.#commitRender();
         break;
       default:
-        if (kind !== "meridiem" && /^[0-9]$/.test(event.key) && !hasModifier2(event)) {
+        if (kind !== "meridiem" && /^[0-9]$/.test(event.key) && !hasModifier4(event)) {
           event.preventDefault();
           this.#typeDigit(segment, kind, event.key);
           return;
@@ -20935,7 +22255,7 @@ var ITEM_ATTRIBUTES = [
   "contenteditable",
   "controls"
 ];
-var hasModifier3 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+var hasModifier5 = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var ToggleGroupController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -21066,7 +22386,7 @@ var ToggleGroupController = class extends Controller {
     if (event.defaultPrevented || !this.#isSupportedHost(item)) return;
     if (event.isComposing) return;
     if (isReservedArrowChord(event)) return;
-    if ((event.key === "Home" || event.key === "End") && hasModifier3(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifier5(event)) return;
     if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     this.#ensureTabStop();
     const items = this.#managedTargets;