stimeo-ui 0.8.0 → 0.10.0

data/dist/index.js

@@ -36,6 +36,9 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
 
 // src/controllers/accordion_controller.ts
 var AccordionController = class extends Controller {
@@ -438,15 +441,25 @@ var FocusTrap = class {
    * content cannot be focused or reached by assistive technology, honoring the
    * `aria-modal="true"` contract. An element that was *already* `inert` is left
    * untracked so `#releaseBackground` does not wrongly clear it.
+   *
+   * The walk climbs from the container to `body` and inerts each ancestor's other
+   * children. Scanning only `body`'s children would skip the branch the container
+   * sits in — everything beside it inside that branch is background too, and a
+   * nested container is the ordinary case.
    */
   #isolateBackground() {
     const container = this.#getContainer();
     this.#inertedSiblings = [];
-    for (const sibling of Array.from(document.body.children)) {
-      if (!(sibling instanceof HTMLElement)) continue;
-      if (sibling.contains(container) || sibling.inert) continue;
-      sibling.inert = true;
-      this.#inertedSiblings.push(sibling);
+    for (let node = container; node !== document.body; ) {
+      const parent = node.parentElement;
+      if (!parent) break;
+      for (const sibling of Array.from(parent.children)) {
+        if (!(sibling instanceof HTMLElement)) continue;
+        if (sibling === node || sibling.inert) continue;
+        sibling.inert = true;
+        this.#inertedSiblings.push(sibling);
+      }
+      node = parent;
     }
   }
   /** Reverts the `inert` flags applied by `#isolateBackground`. */
@@ -484,8 +497,8 @@ var AlertDialogController = class extends Controller {
   static actions = ["cancel", "confirm", "open"];
   static events = ["cancel", "confirm"];
   /**
-   * Owns the modal side effects. Escape is routed through {@link cancel} so it
-   * emits the same event as the cancel button (tagged `"escape"`); focus falls
+   * Owns the modal side effects. Escape takes the same cancel path as
+   * {@link cancel} and emits the same event, tagged `"escape"` instead of `"user"`; focus falls
    * back to the trigger when nothing was focused before opening.
    */
   #trap = new FocusTrap(() => this.dialogTarget, {
@@ -855,7 +868,7 @@ var AnnouncerController = class extends Controller {
   }
   /**
    * Arms `region`'s single pending timer. Callers reach here with the slot
-   * already free — `#announce` releases it, and a fired timer clears its own
+   * already free — `#drain` releases it before writing, and a fired timer clears its own
    * entry below — so this does not cancel again.
    */
   #schedule(region, callback, delay) {
@@ -1664,72 +1677,156 @@ var BreadcrumbController = class extends Controller {
     return active instanceof HTMLElement && element.contains(active);
   }
 };
+
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = values[name];
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
+
+// src/controllers/bulk_select_controller.ts
 var BulkSelectController = class extends Controller {
   static targets = ["all", "item", "bar", "count", "selectAllPages"];
   static values = {
     totalCount: { type: Number, default: 0 },
-    announce: { type: Boolean, default: true }
+    announceText: { type: String, default: "" }
   };
   static actions = ["clear", "selectAllPages"];
-  static events = ["change"];
-  /** All-pages mode is a transient UI state; mirrored to `data-all-pages` so it
-   *  survives a Turbo swap and `connect()` can rehydrate it. */
+  static events = ["change", "reconcile"];
+  /** All-pages mode is a transient UI state, mirrored to `data-all-pages` so a
+   *  `connect()` over markup that already carries the attribute rehydrates the
+   *  mode — a morph, a Turbo Stream, a server that renders it back, or a restore
+   *  visit, whose cached snapshot carries the attribute too. */
   #allPagesMode = false;
-  /** Last emitted figures, so a recompute dispatches `change` only on real change. */
+  /** Last emitted figures, so a recompute reports only on a real change. */
   #lastCount = -1;
   #lastAllPages = false;
+  /** Collapses every signal from one DOM or Value update into one repair. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileNow());
   /** Delegated `change` handler covering the select-all box and every row. */
   #onChange = (event) => {
     const target = event.target;
     if (!target) return;
     if (this.hasAllTarget && target === this.allTarget) {
       this.#applyAll();
-    } else if (target.matches('[data-stimeo--bulk-select-target="item"]')) {
+    } else if (this.itemTargets.some((item) => item === target)) {
       this.#exitAllPages();
-      this.#recompute(true);
+      this.#reportChange(this.#recompute());
     }
   };
   connect() {
     this.#allPagesMode = this.element.dataset.allPages === "true";
+    this.#reconcile.activate();
     this.element.addEventListener("change", this.#onChange);
-    this.#recompute(false);
+    this.#recompute();
   }
   disconnect() {
     this.element.removeEventListener("change", this.#onChange);
+    this.#reconcile.cancel();
+  }
+  /** Repairs the figures for a row that arrived at runtime. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after a row leaves, so a removed selection stops counting. */
+  itemTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Reflects the current selection onto a select-all box added at runtime. */
+  allTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repairs the figures after the select-all box leaves. */
+  allTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Repaints the count for a total that changed at runtime, rejecting non-finite ones. */
+  totalCountValueChanged() {
+    if (!Number.isFinite(this.totalCountValue)) {
+      this.totalCountValue = 0;
+      return;
+    }
+    this.#reconcile.schedule();
+  }
+  /** Repaints so wording changed at runtime is used by the next announcement. */
+  announceTextValueChanged() {
+    this.#reconcile.schedule();
   }
   /** Clears every selection (rows + select-all) and exits all-pages mode. */
   clear() {
-    for (const item of this.#items) item.checked = false;
+    for (const item of this.itemTargets) item.checked = false;
     if (this.hasAllTarget) {
       this.allTarget.checked = false;
       this.allTarget.indeterminate = false;
     }
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
-  /** Enters "select all across pages" mode (count shows `totalCount`). */
+  /**
+   * Enters "select all across pages" mode: the count shows `totalCount`, and every
+   * row on this page is checked.
+   *
+   * The mode's claim is that the whole set is selected, so leaving a visible row
+   * unchecked would put the page and the count in open disagreement.
+   */
   selectAllPages() {
     this.#allPagesMode = true;
-    this.#recompute(true);
+    this.#checkEveryRow();
+    this.#reportChange(this.#recompute());
+  }
+  /** Marks every row on this page selected. */
+  #checkEveryRow() {
+    for (const item of this.itemTargets) item.checked = true;
   }
   /** Mirrors the select-all box to every row, then recomputes. */
   #applyAll() {
     if (!this.hasAllTarget) return;
     const { checked } = this.allTarget;
-    for (const item of this.#items) item.checked = checked;
+    for (const item of this.itemTargets) item.checked = checked;
     this.#exitAllPages();
-    this.#recompute(true);
+    this.#reportChange(this.#recompute());
   }
   #exitAllPages() {
     this.#allPagesMode = false;
   }
+  /** Repairs the derived state after the page moved rows or a render input. */
+  #reconcileNow() {
+    if (this.#allPagesMode) this.#checkEveryRow();
+    const detail = this.#recompute();
+    if (!detail) return;
+    this.dispatch("reconcile", { detail });
+    this.#announce(detail);
+  }
+  /** Reports a selection the user moved. */
+  #reportChange(detail) {
+    if (!detail) return;
+    this.dispatch("change", { detail });
+    this.#announce(detail);
+  }
+  /** Hands the count to the shared announcer, worded by the consumer. */
+  #announce(detail) {
+    announce(fillTemplate(this.announceTextValue, { count: detail.count }));
+  }
   /**
    * Recomputes the count, the select-all checked/indeterminate state, and the bar
-   * visibility from the current DOM. Dispatches `change` (when `notify`) only if
-   * the emitted count or all-pages flag actually changed.
+   * visibility from the current DOM. Returns the figures when the emitted count or
+   * all-pages flag actually moved, and `null` when they did not.
+   *
+   * @stimeoRenderRoot
    */
-  #recompute(notify) {
-    const items = this.#items;
+  #recompute() {
+    const items = this.itemTargets;
     const total = items.length;
     const checked = items.filter((item) => item.checked).length;
     const allPages = this.#allPagesMode;
@@ -1740,8 +1837,10 @@ var BulkSelectController = class extends Controller {
     const count = allPages ? this.totalCountValue : checked;
     const show = allPages || checked > 0;
     if (this.hasBarTarget) {
+      if (!show && this.hasAllTarget && this.barTarget.contains(document.activeElement)) {
+        this.allTarget.focus();
+      }
       this.barTarget.hidden = !show;
-      this.barTarget.setAttribute("aria-live", this.announceValue ? "polite" : "off");
     }
     if (this.hasCountTarget) this.countTarget.textContent = String(count);
     this.element.setAttribute("data-selected-count", String(checked));
@@ -1750,15 +1849,7 @@ var BulkSelectController = class extends Controller {
     const changed = count !== this.#lastCount || allPages !== this.#lastAllPages;
     this.#lastCount = count;
     this.#lastAllPages = allPages;
-    if (notify && changed) {
-      this.dispatch("change", { detail: { count, allPages } });
-    }
-  }
-  /** Live list of row checkboxes, queried from the DOM so dynamic rows count. */
-  get #items() {
-    return Array.from(
-      this.element.querySelectorAll('[data-stimeo--bulk-select-target="item"]')
-    );
+    return changed ? { count, allPages } : null;
   }
 };
 
@@ -2718,25 +2809,6 @@ function hits(elements, node) {
 function setAttributeIfChanged(element, name, value) {
   if (element.getAttribute(name) !== value) element.setAttribute(name, value);
 }
-
-// src/utils/announce.ts
-function announce(message, options = {}) {
-  const text = message.trim();
-  if (text.length === 0) return;
-  window.dispatchEvent(
-    new CustomEvent("stimeo--announcer:announce", {
-      detail: { message: text, assertive: options.assertive === true }
-    })
-  );
-}
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
-}
-
-// src/controllers/character_counter_controller.ts
 var CharacterCounterController = class _CharacterCounterController extends Controller {
   static targets = ["input", "output"];
   static values = {
@@ -3150,45 +3222,59 @@ function setDefaultAttribute(element, name, value) {
 }
 
 // src/controllers/clipboard_controller.ts
+var TRANSIENT_STATES = /* @__PURE__ */ new Set(["copied", "error"]);
 var ClipboardController = class extends Controller {
   static targets = ["source", "button", "feedback"];
   static values = {
     text: { type: String, default: "" },
     feedbackDuration: { type: Number, default: 2e3 },
     copiedLabel: { type: String, default: "Copied" },
-    errorLabel: { type: String, default: "Copy failed" }
+    errorLabel: { type: String, default: "Copy failed" },
+    announceCopiedText: { type: String, default: "" },
+    announceErrorText: { type: String, default: "" }
   };
   static actions = ["copy"];
   static events = ["copy"];
-  /** Auto-clear timer for the completion notice; torn down on disconnect. */
+  /**
+   * The pending return to idle — the only timer this controller schedules, so
+   * `clearAll()` is exactly "drop the auto-clear" and needs no id of its own.
+   */
   #timers = new SafeTimeout();
+  /** Returns the completion state to idle for the snapshot Turbo takes. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewind());
   /**
-   * The pending auto-clear timer id, or `null` when none is scheduled. Tracked so
-   * a rapid second copy cancels the first window instead of letting a stale timer
-   * reset the freshly-shown notice early.
+   * Whether this connection is still live. `copy()` suspends on the Clipboard API,
+   * and a teardown that lands while it is suspended must win: the continuation
+   * would otherwise write to an element nobody owns and arm a timer past the
+   * `clearAll()` that was supposed to be the last word.
    */
-  #resetTimerId = null;
+  #connected = false;
   connect() {
-    setDefaultAttribute(this.element, "data-state", "idle");
+    this.#connected = true;
+    this.#adopt();
+    this.#beforeCache.activate();
   }
   disconnect() {
+    this.#connected = false;
+    this.#beforeCache.deactivate();
     this.#timers.clearAll();
   }
   /**
    * Copies the resolved text and reports the outcome. Bound via `data-action`
-   * (click). Always dispatches `stimeo--clipboard:copy` with `{ success, text }`
-   * — including on failure — so consumers can react either way.
+   * (click). Dispatches `stimeo--clipboard:copy` with `{ success, text }` once per
+   * completed attempt — including on failure — so consumers can react either way.
+   * An attempt whose connection ended while it was in flight reports nothing.
    */
   async copy() {
     const text = this.#resolveText();
     let success = false;
     try {
-      if (!navigator.clipboard?.writeText) throw new Error("Clipboard API unavailable");
       await navigator.clipboard.writeText(text);
       success = true;
     } catch {
       success = false;
     }
+    if (!this.#connected) return;
     this.#reportResult(success);
     this.dispatch("copy", { detail: { success, text } });
   }
@@ -3205,24 +3291,52 @@ var ClipboardController = class extends Controller {
     }
     return source.textContent ?? "";
   }
-  /** Reflects the result on `data-state`, announces it, and schedules a reset. */
+  /**
+   * Reads the current state back from the DOM.
+   *
+   * A `copied` or `error` found at connect time is this controller's own output
+   * from a connection that is gone, and so is the timer that would have cleared it
+   * — nothing else would ever return the element to `idle`. Any other authored
+   * value belongs to the consumer and only a missing attribute takes the default.
+   */
+  #adopt() {
+    if (this.#inTransientState()) {
+      this.#reset();
+      return;
+    }
+    setDefaultAttribute(this.element, "data-state", "idle");
+  }
+  /** Whether `data-state` currently holds one of the values this controller writes. */
+  #inTransientState() {
+    const state = this.element.getAttribute("data-state");
+    return state !== null && TRANSIENT_STATES.has(state);
+  }
+  /**
+   * Returns the completion state to idle for the snapshot Turbo is about to take,
+   * so a page reached with the Back button does not report a copy that happened
+   * before the navigation. Only a state this controller wrote is rewound — an
+   * authored one is the consumer's and has to survive into the snapshot, exactly as
+   * `connect()` leaves it alone. State only — no `copy` is dispatched, which would
+   * claim a fresh copy ran.
+   */
+  #rewind() {
+    if (!this.#inTransientState()) return;
+    this.#timers.clearAll();
+    this.#reset();
+  }
+  /** Reflects the result, announces it, and schedules the return to idle. */
   #reportResult(success) {
     this.element.setAttribute("data-state", success ? "copied" : "error");
     if (this.hasFeedbackTarget) {
       this.feedbackTarget.textContent = success ? this.copiedLabelValue : this.errorLabelValue;
     }
-    if (this.#resetTimerId !== null) {
-      this.#timers.clear(this.#resetTimerId);
-      this.#resetTimerId = null;
-    }
+    announce(success ? this.announceCopiedTextValue : this.announceErrorTextValue);
+    this.#timers.clearAll();
     if (this.feedbackDurationValue > 0) {
-      this.#resetTimerId = this.#timers.set(() => {
-        this.#resetTimerId = null;
-        this.#reset();
-      }, this.feedbackDurationValue);
+      this.#timers.set(() => this.#reset(), this.feedbackDurationValue);
     }
   }
-  /** Returns to the idle state and clears the completion notice. */
+  /** Returns to the idle state and empties the completion slot. */
   #reset() {
     this.element.setAttribute("data-state", "idle");
     if (this.hasFeedbackTarget) {
@@ -3396,7 +3510,7 @@ var CollapsibleController = class extends Controller {
    * `open` Value disagrees. An already-open region remains open without a
    * close/reopen cycle. The Value only seeds a genuinely fresh render where no
    * state attribute is present yet; any opening animation in that case belongs to
-   * the consumer's CSS. Mirrors `sidebar`'s `#restoreCollapsed`.
+   * the consumer's CSS.
    */
   connect() {
     this.#connected = true;
@@ -3511,8 +3625,62 @@ function toFiniteNumber(raw) {
   return Number.isFinite(value) ? value : null;
 }
 
+// src/utils/owned_pointer_session.ts
+var OwnedPointerSession = class {
+  pointerId;
+  #owner;
+  #handlers;
+  #abort = new AbortController();
+  #active = true;
+  constructor(start, owner, handlers) {
+    this.pointerId = start.pointerId;
+    this.#owner = owner;
+    this.#handlers = handlers;
+    const { signal } = this.#abort;
+    owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
+    owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
+    owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
+    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
+    try {
+      owner.setPointerCapture?.(this.pointerId);
+    } catch {
+    }
+  }
+  /** Whether this session still owns its pointer and listeners. */
+  get active() {
+    return this.#active;
+  }
+  /** Whether `event` belongs to the initiating pointer of the live session. */
+  owns(event) {
+    return this.#active && event.pointerId === this.pointerId;
+  }
+  /** Releases capture/listeners and invokes the end callback exactly once. */
+  end() {
+    if (!this.#active) return;
+    this.#active = false;
+    this.#abort.abort();
+    try {
+      this.#owner.releasePointerCapture?.(this.pointerId);
+    } catch {
+    }
+    this.#handlers.end?.();
+  }
+  #onMove = (event) => {
+    if (this.owns(event)) this.#handlers.move(event);
+  };
+  #onEndEvent = (event) => {
+    if (this.owns(event)) this.end();
+  };
+  #onLostCapture = (event) => {
+    const pointerId = event.pointerId;
+    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
+    this.end();
+  };
+};
+
 // src/controllers/color_picker_controller.ts
 var COLOR_PROPERTY = "--stimeo--color";
+var VALUE_TEXT_ATTRIBUTE = "data-value-text";
 var CHANNEL_RANGE = {
   hue: [0, 360],
   saturation: [0, 100],
@@ -3532,10 +3700,10 @@ var ColorPickerController = class extends Controller {
   get #mirrored() {
     return this.logicalTrackValue && isRtl(this.element);
   }
-  /** The current color in the editing model. */
+  /** The current color in the editing model; its alpha is 100 while `alpha` is off. */
   #color = { hue: 0, saturation: 0, lightness: 0, alpha: 100 };
-  /** Aborts in-progress pointer-drag listeners on drag end / teardown. */
-  #dragAbort = null;
+  /** The pointer that owns the live drag, with the slider whose geometry maps it. */
+  #drag = null;
   /** Color the last repaint settled on, so a configuration-driven move is reported once. */
   #committedHex = null;
   /**
@@ -3546,25 +3714,48 @@ var ColorPickerController = class extends Controller {
   /** Seeds the model from the initial hex value and renders every surface. */
   connect() {
     this.#repaint.activate();
-    const parsed = hexToHsla(this.valueValue);
-    if (parsed) this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#adoptValue();
     this.#render();
   }
   /** Cancels any active pointer drag so document listeners never leak. */
   disconnect() {
     this.#repaint.cancel();
-    this.#dragAbort?.abort();
-    this.#dragAbort = null;
+    this.#endDrag();
   }
   /** Repaints when application code (or a Turbo morph) changes `alpha` at runtime. */
   alphaValueChanged() {
     this.#repaint.schedule();
   }
+  /** Adopts a color application code (or a Turbo morph) put in `value` at runtime. */
+  valueValueChanged() {
+    if (this.valueValue === this.#committedHex) return;
+    this.#repaint.schedule();
+  }
+  /** Hydrates a channel slider inserted or replaced at runtime. */
+  sliderTargetConnected(slider) {
+    this.#renderSlider(slider);
+  }
+  /** Ends a gesture whose geometry target disappeared or ceased being a target. */
+  sliderTargetDisconnected(slider) {
+    if (this.#drag?.slider === slider) this.#endDrag();
+  }
+  /** Fills a hex input inserted or replaced at runtime with the current color. */
+  hexTargetConnected(hex) {
+    this.#mirrorColor(hex, this.#hexString());
+  }
+  /** Fills a form field inserted or replaced at runtime with the current color. */
+  fieldTargetConnected(field) {
+    this.#mirrorColor(field, this.#hexString());
+  }
+  /** Publishes the current color on a preview inserted or replaced at runtime. */
+  previewTargetConnected(preview) {
+    this.#publishColor(preview, this.#hexString());
+  }
   /** Keyboard stepping on the focused channel slider (APG Slider model). */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const slider = event.currentTarget;
-    const channel = this.#channelOf(slider);
+    const channel = this.#editableChannel(slider);
     if (!channel) return;
     const [min, max] = this.#rangeOf(slider, channel);
     const value = this.#color[channel];
@@ -3596,34 +3787,36 @@ var ColorPickerController = class extends Controller {
     event.preventDefault();
     this.#setChannel(channel, next, min, max);
   }
-  /** Begins a pointer drag on a channel slider and tracks movement. */
+  /** Begins a primary-button drag on a channel slider, owned by its own pointer. */
   onPointerDown(event) {
+    if (event.button !== 0 || this.#drag) return;
     const slider = event.currentTarget;
-    const channel = this.#channelOf(slider);
+    const channel = this.#editableChannel(slider);
     if (!channel) return;
-    event.preventDefault();
-    slider.focus();
     const [min, max] = this.#rangeOf(slider, channel);
     const mirrored = this.#mirrored;
     const update = (clientX) => {
       const rect = slider.getBoundingClientRect();
-      if (rect.width === 0) return;
+      if (rect.width === 0) return false;
       const offset = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
       const fraction = mirrored ? 1 - offset : offset;
       this.#setChannel(channel, min + fraction * (max - min), min, max);
+      return true;
     };
-    update(event.clientX);
-    this.#dragAbort?.abort();
-    const abort = new AbortController();
-    this.#dragAbort = abort;
-    const onMove = (move) => update(move.clientX);
-    const onUp = () => {
-      abort.abort();
-      this.#dragAbort = null;
-    };
-    document.addEventListener("pointermove", onMove, { signal: abort.signal });
-    document.addEventListener("pointerup", onUp, { signal: abort.signal });
-    document.addEventListener("pointercancel", onUp, { signal: abort.signal });
+    if (!update(event.clientX)) return;
+    event.preventDefault();
+    slider.focus();
+    const drag = { pointer: null, slider };
+    drag.pointer = new OwnedPointerSession(event, slider, {
+      move: (move) => {
+        if (slider.isConnected) update(move.clientX);
+        else this.#endDrag();
+      },
+      end: () => {
+        if (this.#drag === drag) this.#drag = null;
+      }
+    });
+    this.#drag = drag;
   }
   /** Parses the hex input on confirm and syncs every channel + surface. */
   onHexInput() {
@@ -3633,9 +3826,22 @@ var ColorPickerController = class extends Controller {
       this.hexTarget.value = this.#hexString();
       return;
     }
-    this.#color = this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+    this.#color = this.#opaqueUnlessEnabled(parsed);
     this.#commitColor();
   }
+  /** Replaces the model with the color `value` names, leaving an unparsable one alone. */
+  #adoptValue() {
+    const parsed = hexToHsla(this.valueValue);
+    if (parsed) this.#color = this.#opaqueUnlessEnabled(parsed);
+  }
+  /**
+   * The model a parsed color implies: alpha only survives while its channel is
+   * enabled, because `hexString()` would otherwise emit `#RRGGBB` while `change`
+   * reported `rgba.a < 1`.
+   */
+  #opaqueUnlessEnabled(parsed) {
+    return this.alphaValue ? parsed : { ...parsed, alpha: 100 };
+  }
   /** Clamps and snaps one channel to an integer, then re-renders + emits change. */
   #setChannel(channel, raw, min, max) {
     this.#color[channel] = Math.round(Math.min(max, Math.max(min, raw)));
@@ -3654,32 +3860,57 @@ var ColorPickerController = class extends Controller {
     }
   }
   /**
-   * Reflects the model onto sliders, the hex input, preview, and form field.
+   * Reflects the model onto sliders, the hex input, preview, form field, and the
+   * `value` Value it serializes into.
    *
    * @stimeoRenderRoot
    */
   #render() {
-    for (const slider of this.sliderTargets) {
-      const channel = this.#channelOf(slider);
-      if (!channel) continue;
-      const value = this.#color[channel];
-      slider.setAttribute("aria-valuenow", String(value));
-      slider.setAttribute("aria-valuetext", valueText(channel, value));
-    }
+    for (const slider of this.sliderTargets) this.#renderSlider(slider);
     const hex = this.#hexString();
     this.#committedHex = hex;
-    if (this.hasHexTarget) this.hexTarget.value = hex;
-    for (const field of this.fieldTargets) field.value = hex;
-    for (const preview of this.previewTargets) preview.style.setProperty(COLOR_PROPERTY, hex);
-    this.element.style.setProperty(COLOR_PROPERTY, hex);
+    if (this.valueValue !== hex) this.valueValue = hex;
+    if (this.hasHexTarget) this.#mirrorColor(this.hexTarget, hex);
+    for (const field of this.fieldTargets) this.#mirrorColor(field, hex);
+    for (const preview of this.previewTargets) this.#publishColor(preview, hex);
+    this.#publishColor(this.element, hex);
+  }
+  /** Writes one slider's announced range, value, and value text, skipping equal ones. */
+  #renderSlider(slider) {
+    const channel = this.#channelOf(slider);
+    if (!channel) return;
+    const [min, max] = this.#rangeOf(slider, channel);
+    const value = this.#color[channel];
+    const attributes = {
+      "aria-valuemin": String(min),
+      "aria-valuemax": String(max),
+      "aria-valuenow": String(value),
+      "aria-valuetext": this.#valueText(slider, channel, value)
+    };
+    for (const [name, next] of Object.entries(attributes)) {
+      if (slider.getAttribute(name) !== next) slider.setAttribute(name, next);
+    }
+  }
+  /** Mirrors the color into an input, leaving an already-equal value untouched. */
+  #mirrorColor(input, hex) {
+    if (input.value !== hex) input.value = hex;
+  }
+  /** Publishes the color as the consumer's CSS hook, skipping an equal value. */
+  #publishColor(element, hex) {
+    if (element.style.getPropertyValue(COLOR_PROPERTY) !== hex) {
+      element.style.setProperty(COLOR_PROPERTY, hex);
+    }
   }
   /**
-   * Repaints after `alpha` changed at runtime and reports a color this controller
-   * settled on. Disabling alpha drops it from the model, so the committed color can
-   * move without a user edit; `change` stays reserved for the picker's own actions.
+   * Repaints after a declarative input changed at runtime and reports a color this
+   * controller settled on. Disabling alpha drops it from the model and an outside
+   * `value` names another color, so the committed color can move without a user
+   * edit; `change` stays reserved for the picker's own actions.
    */
   #reconcileColor() {
     const previous = this.#committedHex;
+    if (previous !== null && this.valueValue !== previous) this.#adoptValue();
+    if (!this.alphaValue) this.#color.alpha = 100;
     this.#render();
     if (previous !== null && this.#committedHex !== previous) {
       this.dispatch("reconcile", { detail: this.#settledDetail() });
@@ -3700,7 +3931,27 @@ var ColorPickerController = class extends Controller {
   /** Reads a slider's `data-channel`, if it is a known channel. */
   #channelOf(slider) {
     const channel = slider.getAttribute("data-channel");
-    return channel && channel in CHANNEL_RANGE ? channel : null;
+    return channel && Object.hasOwn(CHANNEL_RANGE, channel) ? channel : null;
+  }
+  /**
+   * The channel a slider edits, or null when this picker edits none through it. An
+   * alpha slider authored while `alpha` is off edits nothing: moving it would leave
+   * the model translucent behind an opaque `#RRGGBB`.
+   */
+  #editableChannel(slider) {
+    const channel = this.#channelOf(slider);
+    return channel === "alpha" && !this.alphaValue ? null : channel;
+  }
+  /** The channel's announced text: the slider's template, or the built-in English. */
+  #valueText(slider, channel, value) {
+    const template = slider.getAttribute(VALUE_TEXT_ATTRIBUTE);
+    return template ? template.replaceAll("{value}", String(value)) : defaultValueText(channel, value);
+  }
+  /** Ends the live drag so no further movement of that pointer reaches the model. */
+  #endDrag() {
+    const drag = this.#drag;
+    this.#drag = null;
+    drag?.pointer?.end();
   }
   /**
    * A slider's `[min, max]` from aria-valuemin/max, falling back per channel.
@@ -3716,7 +3967,7 @@ var ColorPickerController = class extends Controller {
     ];
   }
 };
-function valueText(channel, value) {
+function defaultValueText(channel, value) {
   const label = channel.charAt(0).toUpperCase() + channel.slice(1);
   const unit = channel === "hue" ? "degrees" : "percent";
   return `${label} ${value} ${unit}`;
@@ -5183,7 +5434,7 @@ var CountdownController = class extends Controller {
   #pausedAmount = 0;
   /**
    * The amount the slots are currently showing, floored to the second they render.
-   * It lags {@link currentAmount} by up to one tick, and it — not the live reading —
+   * It lags {@link #currentAmount} by up to one tick, and it — not the live reading —
    * is what a pause has to preserve: storing the fraction behind the display instead
    * makes the first tick after a resume step by two units.
    */
@@ -5691,6 +5942,25 @@ function round(value, precision) {
   if (!Number.isFinite(rounded)) return value;
   return rounded === 0 ? 0 : rounded;
 }
+
+// src/utils/interactive_host.ts
+var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
+function isInteractiveHost(element) {
+  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
+  let current = element;
+  while (current) {
+    const raw = current.getAttribute("contenteditable");
+    if (raw !== null) {
+      const value = raw.trim().toLowerCase();
+      if (value === "false") return false;
+      if (value === "" || value === "true" || value === "plaintext-only") return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}
+
+// src/controllers/data_grid_controller.ts
 var SORT_CYCLE = ["none", "ascending", "descending"];
 function nextSortDirection(current) {
   const index = SORT_CYCLE.indexOf(current);
@@ -5704,8 +5974,15 @@ var DataGridController = class extends Controller {
   };
   static actions = ["onKeydown", "sort", "toggleSelect"];
   static events = ["selectionchange", "sort"];
-  /** Gates the row callback so it does not re-walk every row once per authored row on mount. */
-  #connected = false;
+  /**
+   * Collapses the per-element target callbacks of one DOM mutation into a single
+   * baseline pass, and refuses to run before `connect()` or after `disconnect()`.
+   *
+   * Stimulus reports every target one at a time, so an ungated pass would re-walk
+   * the whole grid once per authored cell on mount and once per streamed cell
+   * afterwards — quadratic in the cell count both times.
+   */
+  #reconcile = new MicrotaskCoalescer(() => this.#restoreBaseline());
   /**
    * Establishes a single tab stop across all navigable cells/headers and brings
    * the rows to their baseline.
@@ -5716,15 +5993,30 @@ var DataGridController = class extends Controller {
    * attribute, so the Value callback does not fire a second time.
    */
   connect() {
+    this.#restoreBaseline();
+    this.#reconcile.activate();
+  }
+  /** Closes the reconcile window so a queued pass cannot run against a detached tree. */
+  disconnect() {
+    this.#reconcile.cancel();
+  }
+  /**
+   * Rebuilds both DOM-owned baselines from the live grid: exactly one navigable
+   * cell is in the Tab sequence, and every selectable row carries an explicit
+   * `aria-selected`.
+   *
+   * The tab stop keeps whichever cell already holds it, so a rebuild triggered by
+   * an unrelated row arriving does not throw the user's position away; only when
+   * no cell holds it — the grid is fresh, or the holder was removed — does the
+   * first navigable cell take over. Without that fallback a grid whose active row
+   * is removed keeps every cell at `-1` and drops out of the Tab sequence
+   * entirely.
+   */
+  #restoreBaseline() {
     const cells = this.#navigableCells();
     const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
-    this.#setActiveCell(active, { focus: false });
+    if (active) this.#setActiveCell(active, { focus: false }, cells);
     this.#normalizeSelection();
-    this.#connected = true;
-  }
-  /** Reopens the row callback for the next mount. */
-  disconnect() {
-    this.#connected = false;
   }
   /**
    * Keeps `aria-multiselectable` in step with the `selection` Value. Fires on connect
@@ -5735,16 +6027,25 @@ var DataGridController = class extends Controller {
     this.#syncSelectable();
     this.#normalizeSelection();
   }
-  /**
-   * Re-establishes the row baseline for a row added after connect.
-   *
-   * Each pass walks every row, and Stimulus reports the authored rows one by one
-   * before `connect()`, so the mount is gated to keep it linear in the row count
-   * rather than quadratic; `connect()` runs the single baseline pass instead.
-   */
+  /** Re-establishes the baselines for a row added after connect. */
   rowTargetConnected() {
-    if (!this.#connected) return;
-    this.#normalizeSelection();
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a cell joins the grid after connect. */
+  cellTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a cell leaves the grid. */
+  cellTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a header joins the grid after connect. */
+  columnHeaderTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /** Re-establishes the tab stop when a header leaves the grid. */
+  columnHeaderTargetDisconnected() {
+    this.#reconcile.schedule();
   }
   /**
    * Brings the authored rows to the shape the APG requires, without changing
@@ -5789,6 +6090,9 @@ var DataGridController = class extends Controller {
   sort(event) {
     const header = event.currentTarget;
     if (!this.columnHeaderTargets.includes(header)) return;
+    if (event.defaultPrevented) return;
+    const control = this.#claimingControl(event, header);
+    if (control && !(control instanceof HTMLButtonElement)) return;
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
@@ -5799,14 +6103,19 @@ var DataGridController = class extends Controller {
   /** Toggles selection of the row owning the event target. Bound optionally. */
   toggleSelect(event) {
     if (this.selectionValue === "none") return;
-    const row = event.currentTarget.closest("[role='row']");
+    if (event.defaultPrevented) return;
+    const host = event.currentTarget;
+    if (this.#claimedByDescendant(event, host)) return;
+    const row = host.closest("[role='row']");
     if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
   }
   /** Grid navigation + sort/select activation. Bound to cells and headers. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if (event.isComposing) return;
     const cell = event.currentTarget;
+    if (this.#claimedByDescendant(event, cell)) return;
     const matrix = this.#matrix();
     const position = this.#locate(matrix, cell);
     if (!position) return;
@@ -5842,9 +6151,35 @@ var DataGridController = class extends Controller {
     }
     if (target) {
       event.preventDefault();
-      this.#setActiveCell(target, { focus: true });
+      this.#setActiveCell(target, { focus: true }, matrix.flat());
     }
   }
+  /**
+   * Whether the event was addressed to a control inside `host` rather than to the
+   * grid.
+   *
+   * Cells and headers hold consumer markup, and APG's grid pattern expects that
+   * markup to include working controls — a row action button, an inline editor.
+   * Those own their own keystrokes and clicks, so the grid stands down entirely
+   * rather than acting in parallel. An editable host (its `contenteditable` state
+   * is inherited, so the walk is explicit) counts the same way.
+   */
+  #claimedByDescendant(event, host) {
+    return this.#claimingControl(event, host) !== null;
+  }
+  /**
+   * The nested control this event belongs to, or `null` when the host owns it.
+   *
+   * Naming the control, rather than answering yes or no, is what lets the click
+   * path treat a sortable header's `<button>` as the activation it is while every
+   * other control still takes the event away.
+   */
+  #claimingControl(event, host) {
+    const source = event.target;
+    const control = source.closest(INTERACTIVE_HOST_SELECTOR);
+    if (control && host.contains(control)) return control;
+    return isInteractiveHost(source) ? source : null;
+  }
   /** Performs a header's sort or a cell row's selection toggle on activation. */
   #activate(cell) {
     if (this.columnHeaderTargets.includes(cell)) {
@@ -5855,7 +6190,7 @@ var DataGridController = class extends Controller {
     const row = cell.closest("[role='row']");
     if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
   }
-  /** Shared sort logic for both click and keyboard activation. */
+  /** Cycles a header's sort on keyboard activation and emits `sort`. */
   #cycleSort(header) {
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
@@ -5875,11 +6210,22 @@ var DataGridController = class extends Controller {
     const rows = this.rowTargets.filter((r) => r.getAttribute("aria-selected") === "true");
     this.dispatch("selectionchange", { detail: { rows } });
   }
-  /** Makes `cell` the single tabbable cell (roving) and optionally focuses it. */
-  #setActiveCell(cell, { focus }) {
-    if (!cell) return;
-    for (const candidate of this.#navigableCells()) {
-      candidate.tabIndex = candidate === cell ? 0 : -1;
+  /**
+   * Makes `cell` the single tabbable cell (roving) and optionally focuses it.
+   *
+   * `cells` lets a caller that already walked the grid hand its collection over,
+   * so one keystroke rebuilds the matrix once instead of twice. The write is
+   * skipped where the attribute already holds the wanted value — comparing the
+   * attribute rather than the IDL property, because a cell with no `tabindex` at
+   * all reports `-1` and would then never receive the attribute it needs to be
+   * focusable.
+   */
+  #setActiveCell(cell, { focus }, cells) {
+    for (const candidate of cells ?? this.#navigableCells()) {
+      const wanted = candidate === cell ? "0" : "-1";
+      if (candidate.getAttribute("tabindex") !== wanted) {
+        candidate.setAttribute("tabindex", wanted);
+      }
     }
     if (focus) cell.focus();
   }
@@ -6612,10 +6958,6 @@ var DirectUploadController = class extends Controller {
       this.#rows.delete(id);
     }
   }
-  /**
-   * Returns the widget to its pre-upload state just before Turbo caches the
-   * page, so the snapshot never replays rows for uploads that cannot resume.
-   */
   /**
    * 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
@@ -6654,7 +6996,7 @@ var DirectUploadController = class extends Controller {
   #detail(event) {
     return event.detail ?? {};
   }
-  /** The file name every ActiveStorage `direct-upload:*` event carries. */
+  /** The event's file name, or `""` when it carries none. */
   #name(detail) {
     return detail.file?.name ?? "";
   }
@@ -7028,8 +7370,8 @@ var DrawerController = class extends Controller {
    * rather than being re-derived from the declarative `open` Value (which would
    * close a user-opened drawer). The `open` Value only seeds a genuinely fresh
    * render. We normalize to a clean closed baseline first so {@link open} runs its
-   * full reveal + trap activation — the {@link FocusTrap} is a fresh instance
-   * after a reconnect and must be re-activated.
+   * full reveal + trap activation — the {@link FocusTrap} is inactive after a
+   * disconnect and must be re-activated.
    */
   connect() {
     this.#connected = true;
@@ -7271,33 +7613,64 @@ var EditableController = class extends Controller {
   static values = {
     submitOnBlur: { type: Boolean, default: true }
   };
-  static actions = ["edit", "onBlur", "onDisplayKeydown", "onKeydown"];
+  static actions = ["cancel", "edit", "onDisplayKeydown", "onKeydown", "revert", "save"];
   static events = ["cancel", "change"];
   /** The value captured when edit mode began, used to detect real changes. */
   #previousValue = "";
+  /**
+   * The value the last save replaced, or `null` when there is nothing to undo.
+   * Cleared on connect: a value from before a page restore is unrecoverable, so
+   * `revert()` must not resurrect one.
+   */
+  #revertValue = null;
   /**
    * Owns IME lifecycle state for the edit surface, so a keydown that belongs to
    * a composition (cancel or confirm) is never treated as an edit command.
    */
   #composition = new CompositionTracker();
+  /**
+   * Watches focus leaving the editor from wherever it currently sits.
+   *
+   * `focusout` bubbles where `blur` does not, so one listener on the root sees
+   * every departure — including one from a Save or Cancel button the consumer
+   * placed beside the input. Binding the input alone would make the promise
+   * "saves wherever focus moved" true only for focus that leaves the input
+   * itself, and tabbing straight past an inner button would strand the editor
+   * open.
+   */
+  #onFocusOut = (event) => {
+    const from = event.target;
+    if (this.hasDisplayTarget && from instanceof Node && this.displayTarget.contains(from)) return;
+    const next = event.relatedTarget;
+    if (next instanceof Node && this.element.contains(next)) return;
+    if (this.submitOnBlurValue) this.#commit(false);
+  };
   /** Establishes the initial display mode (display shown, input hidden). */
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#revertValue = null;
     this.#setMode("display");
   }
-  /** Releases the composition listeners so nothing outlives the element. */
+  /** Releases the composition and focus listeners so nothing outlives the element. */
   disconnect() {
     this.#composition.disconnect();
+    this.element.removeEventListener("focusout", this.#onFocusOut);
   }
   /** Tracks an input added initially or after connect (e.g. a Turbo swap). */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    this.#applyMode();
   }
   /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
-  /** Enters edit mode: seeds the input from the display text, focuses, selects. */
+  /** Re-hides or re-shows a display element that arrived after the mode was set. */
+  displayTargetConnected() {
+    this.#applyMode();
+  }
+  /** Enters edit mode: seeds the input from the declared value, focuses, selects. */
   edit() {
     if (this.#isEditing || !this.hasInputTarget || !this.hasDisplayTarget) return;
     this.#previousValue = this.#currentValue;
@@ -7306,6 +7679,27 @@ var EditableController = class extends Controller {
     this.inputTarget.focus();
     this.inputTarget.select();
   }
+  /** Commits the edit and returns focus to the display element. */
+  save() {
+    this.#commit(true);
+  }
+  /** Discards edits, returns to display mode, and dispatches `cancel`. */
+  cancel() {
+    if (!this.#isEditing) return;
+    this.#setMode("display");
+    if (this.hasDisplayTarget) this.displayTarget.focus();
+    this.dispatch("cancel", { detail: {} });
+  }
+  /**
+   * Puts back the value the last save replaced — for a consumer whose server
+   * rejected it. Silent by design: a `change` here would re-enter the same
+   * handler that asked for the undo. One save, one undo.
+   */
+  revert() {
+    if (this.#revertValue === null || this.#isEditing) return;
+    this.#writeValue(this.#revertValue);
+    this.#revertValue = null;
+  }
   /** Adds `F2` as an editing entry point alongside the button's native activation. */
   onDisplayKeydown(event) {
     if (event.key === "F2") {
@@ -7319,56 +7713,57 @@ var EditableController = class extends Controller {
     if (event.key === "Escape") {
       if (event.defaultPrevented) return;
       event.preventDefault();
-      this.#cancel();
+      this.cancel();
       return;
     }
     if (event.key === "Enter") {
       if (event.defaultPrevented) return;
       if (this.#isMultiline && !(event.ctrlKey || event.metaKey)) return;
       event.preventDefault();
-      this.#save(true);
+      this.#commit(true);
     }
   }
-  /** Saves on blur when `submitOnBlur` is set; otherwise keeps editing. */
-  onBlur() {
-    if (!this.#isEditing) return;
-    if (this.submitOnBlurValue) this.#save(false);
-  }
   /**
-   * Returns to display mode, reflecting the input into the display text and
-   * dispatching `change` when the value differs from where editing began.
+   * Returns to display mode, storing the input's value and dispatching `change`
+   * when it differs from where editing began.
    *
    * @param restoreFocus - Move focus back to the display element (explicit
-   *   keyboard commit) rather than honoring the user's new focus target (blur).
+   *   commit) rather than honoring the user's new focus target (blur).
    */
-  #save(restoreFocus) {
-    if (!this.#isEditing) return;
-    const value = this.inputTarget.value;
+  #commit(restoreFocus) {
+    if (!this.#isEditing || !this.hasInputTarget) return;
+    const value = this.inputTarget.value.trim();
     const previous = this.#previousValue;
-    this.displayTarget.textContent = value;
+    this.#writeValue(value);
     this.#setMode("display");
-    if (restoreFocus) this.displayTarget.focus();
+    if (restoreFocus && this.hasDisplayTarget) this.displayTarget.focus();
     if (value !== previous) {
+      this.#revertValue = previous;
       this.dispatch("change", { detail: { value, previous } });
     }
   }
-  /** Discards edits, returns to display mode, and dispatches `cancel`. */
-  #cancel() {
-    if (!this.#isEditing) return;
-    this.#setMode("display");
-    this.displayTarget.focus();
-    this.dispatch("cancel", { detail: {} });
+  /** Stores `value` wherever the display element declares it. */
+  #writeValue(value) {
+    if (!this.hasDisplayTarget) return;
+    const display = this.displayTarget;
+    if (display.hasAttribute("data-value")) display.dataset.value = value;
+    else display.textContent = value;
   }
-  /** Toggles the `data-mode` flag and the `hidden` state of both elements. */
-  #setMode(mode) {
-    this.element.dataset.mode = mode;
-    const editing = mode === "editing";
+  /** Derives both elements' visibility from the mode currently in the DOM. */
+  #applyMode() {
+    const editing = this.#isEditing;
     if (this.hasDisplayTarget) this.displayTarget.hidden = editing;
     if (this.hasInputTarget) this.inputTarget.hidden = !editing;
   }
-  /** Current display text, trimmed — the value shown when not editing. */
+  /** Records the mode, then brings both elements in line with it. */
+  #setMode(mode) {
+    this.element.dataset.mode = mode;
+    this.#applyMode();
+  }
+  /** The value the display element declares, trimmed. */
   get #currentValue() {
-    return (this.displayTarget.textContent ?? "").trim();
+    const display = this.displayTarget;
+    return (display.dataset.value ?? display.textContent ?? "").trim();
   }
   /** Whether the editing control is a multi-line `<textarea>`. */
   get #isMultiline() {
@@ -7980,15 +8375,46 @@ var FilterController = class extends Controller {
   #onChange = () => {
     this.apply();
   };
+  /**
+   * Gates the declaration callback to the connected window.
+   *
+   * Stimulus delivers a Value callback ahead of `connect()` and again for every
+   * runtime change; without the gate, merely connecting would emit an evaluation
+   * — and its `change` — before `connect()` runs its own.
+   */
+  #connected = false;
   connect() {
-    this.apply();
+    this.#evaluate();
     this.element.addEventListener("change", this.#onChange);
+    this.#connected = true;
   }
   disconnect() {
+    this.#connected = false;
     this.element.removeEventListener("change", this.#onChange);
   }
+  /**
+   * Re-evaluates when the match declaration changes at runtime.
+   *
+   * The declaration decides which items are shown, so an element kept across a
+   * morph — where `connect()` does not run again — still has to follow it instead
+   * of waiting for the next control interaction. The evaluation is the ordinary
+   * one, `change` included: a declaration swap is an evaluation like any other.
+   */
+  matchValueChanged() {
+    if (!this.#connected) return;
+    this.#evaluate();
+  }
   /** Re-derives every item's visibility from the active tokens and syncs groups/empty. */
   apply() {
+    this.#evaluate();
+  }
+  /**
+   * The evaluation itself: every item's visibility from the active tokens, then
+   * the groups and the empty element, then the `change` event.
+   *
+   * @stimeoRenderRoot
+   */
+  #evaluate() {
     const active = this.#activeTokens();
     let visibleCount = 0;
     for (const item of this.itemTargets) {
@@ -8339,13 +8765,39 @@ var FocusController = class extends Controller {
     initialFocus: () => this.hasInitialTarget ? this.initialTarget : null,
     onEscape: () => this.deactivate()
   });
+  /**
+   * Whether this scope is currently trapping.
+   *
+   * Held here rather than read back from the trap: the trap releases itself
+   * before Turbo caches the page, so its own flag stops answering for the state
+   * this controller publishes on the element and in its events.
+   */
+  #active = false;
+  /**
+   * Returns the element to its untrapped form before Turbo copies the page. The
+   * trap performs its own release on the same event, so what is left is the hook
+   * this controller owns — carried into the snapshot it would describe a scope
+   * that is no longer trapping.
+   *
+   * Silent, like `disconnect()`: the page is about to be frozen, and a release
+   * nobody asked for is not a close to report.
+   */
+  #beforeCache = new BeforeCacheReset(() => {
+    this.#active = false;
+    this.element.removeAttribute("data-focus-trapped");
+  });
   /** Stimulus drives activation from the `trap` value (also fires on connect). */
   trapValueChanged() {
     if (this.trapValue) this.#activate();
     else this.#deactivate();
   }
+  connect() {
+    this.#beforeCache.activate();
+  }
   disconnect() {
     this.#trap.deactivate({ restoreFocus: false });
+    this.#beforeCache.deactivate();
+    this.#active = false;
     this.element.removeAttribute("data-focus-trapped");
   }
   /** Turns the trap on. Acts synchronously and keeps the `trap` value in sync. */
@@ -8359,13 +8811,15 @@ var FocusController = class extends Controller {
     this.#deactivate();
   }
   #activate() {
-    if (this.#trap.active) return;
+    if (this.#active) return;
+    this.#active = true;
     this.#trap.activate();
     this.element.setAttribute("data-focus-trapped", "true");
     this.dispatch("activate", { detail: {} });
   }
   #deactivate() {
-    if (!this.#trap.active) return;
+    if (!this.#active) return;
+    this.#active = false;
     this.#trap.deactivate({ restoreFocus: this.restoreValue });
     this.element.removeAttribute("data-focus-trapped");
     this.dispatch("deactivate", { detail: {} });
@@ -8383,7 +8837,7 @@ var FormFieldController = class _FormFieldController extends Controller {
   static #INVALID_ATTR = "data-stimeo--form-field-invalid";
   /** Collapses one target/morph batch into one silent ARIA reconciliation. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
-  /** ARIA ownership is scoped to the current singular control target. */
+  /** Returns borrowed control ARIA before Turbo snapshots the page. */
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #ariaDescribedBy = new AttributeLease("aria-describedby");
   #ariaErrorMessage = new AttributeLease("aria-errormessage");
@@ -10500,14 +10954,37 @@ var LocalTimeController = class extends Controller {
   }
 };
 var COLUMNS_PROPERTY = "--stimeo--masonry-columns";
+var DEFAULT_MIN_COLUMN_WIDTH = 240;
+var DEFAULT_GAP = 16;
+function usableNumber(value, fallback) {
+  return Number.isFinite(value) ? value : fallback;
+}
 var MasonryController = class extends Controller {
   static targets = ["item"];
   static values = {
-    minColumnWidth: { type: Number, default: 240 },
-    gap: { type: Number, default: 16 }
+    minColumnWidth: { type: Number, default: DEFAULT_MIN_COLUMN_WIDTH },
+    gap: { type: Number, default: DEFAULT_GAP }
   };
   static events = ["layout"];
-  #layout = new LayoutObserver(() => this.#relayout());
+  /**
+   * The declared numbers after validation, so the layout path never sees a value
+   * it cannot compute with. Both are resolved once per declaration change rather
+   * than on every pass.
+   */
+  #minColumnWidth = DEFAULT_MIN_COLUMN_WIDTH;
+  #gap = DEFAULT_GAP;
+  /**
+   * Collapses every re-layout trigger of one DOM mutation into a single pass, and
+   * refuses to run before `connect()` or after `disconnect()`.
+   *
+   * The triggers arrive in bursts — a resize stream, a morph that syncs several
+   * attributes, a batch of rows — and each pass measures every item, so folding
+   * them keeps the work proportional to the batch rather than to the events in it.
+   */
+  #reconcile = new MicrotaskCoalescer(() => this.#relayout());
+  /** Items that left the target set and still carry the column hook. */
+  #released = /* @__PURE__ */ new Set();
+  #layout = new LayoutObserver(() => this.#reconcile.schedule());
   #mutationObserver = null;
   /** Last published column count, so `layout` fires only on real changes. */
   #lastColumns = 0;
@@ -10517,20 +10994,49 @@ var MasonryController = class extends Controller {
    * first pass ran before they settled; `load` does not bubble, so this is bound in
    * the capture phase to catch every descendant.
    */
-  #onLoad = () => this.#relayout();
+  #onLoad = () => this.#reconcile.schedule();
+  /** Resolves the declared column width once, falling back when it is unreadable. */
+  minColumnWidthValueChanged() {
+    this.#minColumnWidth = usableNumber(this.minColumnWidthValue, DEFAULT_MIN_COLUMN_WIDTH);
+    this.#reconcile.schedule();
+  }
+  /** Resolves the declared gap once, falling back when it is unreadable. */
+  gapValueChanged() {
+    this.#gap = usableNumber(this.gapValue, DEFAULT_GAP);
+    this.#reconcile.schedule();
+  }
+  /** Packs an element that became an item without moving in the DOM. */
+  itemTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Queues the column hook of an element that stopped being an item for removal.
+   *
+   * The removal is queued rather than immediate because teardown reports every
+   * target as disconnected: doing it here would strip the whole grid just before
+   * a Turbo snapshot is taken. {@link MicrotaskCoalescer.cancel} drops the queue
+   * with the pass, so only a genuine target change reaches it.
+   */
+  itemTargetDisconnected(item) {
+    this.#released.add(item);
+    this.#reconcile.schedule();
+  }
   /** Observes size/content changes and performs the first layout pass. */
   connect() {
     this.#layout.observe(this.element);
     this.#layout.observeViewport();
     if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.#relayout());
+      this.#mutationObserver = new MutationObserver(() => this.#reconcile.schedule());
       this.#mutationObserver.observe(this.element, { childList: true, subtree: true });
     }
     this.element.addEventListener("load", this.#onLoad, true);
     this.#relayout();
+    this.#reconcile.activate();
   }
   /** Releases both observers and the load listener so nothing fires after detach. */
   disconnect() {
+    this.#reconcile.cancel();
+    this.#released.clear();
     this.#layout.disconnect();
     this.#mutationObserver?.disconnect();
     this.#mutationObserver = null;
@@ -10539,26 +11045,53 @@ var MasonryController = class extends Controller {
   }
   /**
    * Recomputes the column count and assigns every item to the shortest column.
-   * Runs automatically on connect, on resize, on item add/remove, and when a
-   * descendant resource loads (private — there is no public action; the observers
-   * and the capture-phase `load` listener drive it). Items are walked in DOM
-   * order; each lands in the column with the least accumulated height, which
-   * keeps the packing balanced without reordering the DOM.
+   * Runs automatically on connect, on resize, on item add/remove, when a declared
+   * number changes, and when a descendant resource loads (private — there is no
+   * public action; the observers, the target callbacks and the capture-phase
+   * `load` listener drive it). Items are walked in DOM order; each lands in the
+   * column with the least accumulated height, which keeps the packing balanced
+   * without reordering the DOM.
+   *
+   * Every box is measured before anything is written. Interleaving the two would
+   * make a consumer's `data-column` rule invalidate style once per item, and the
+   * next measurement then has to settle layout again — once per item instead of
+   * once per pass. The assignment is independent of the measurement because the
+   * columns are uniform in width, so the order of the two passes does not change
+   * the result.
+   *
+   * @stimeoRenderRoot
    */
   #relayout() {
     const items = this.itemTargets;
     const columns = this.#columnCount();
+    const boxes = items.map((item) => item.getBoundingClientRect().height);
+    let changed = false;
+    if (this.#released.size > 0) {
+      const owned = new Set(items);
+      for (const released of this.#released) {
+        if (owned.has(released)) continue;
+        if (released.hasAttribute("data-column")) {
+          released.removeAttribute("data-column");
+          changed = true;
+        }
+      }
+      this.#released.clear();
+    }
     const heights = new Array(columns).fill(0);
-    for (const item of items) {
+    items.forEach((item, index) => {
       let shortest = 0;
       for (let col = 1; col < columns; col++) {
         if ((heights[col] ?? 0) < (heights[shortest] ?? 0)) shortest = col;
       }
-      item.setAttribute("data-column", String(shortest));
-      heights[shortest] = (heights[shortest] ?? 0) + item.getBoundingClientRect().height + this.gapValue;
-    }
+      const assigned = String(shortest);
+      if (item.getAttribute("data-column") !== assigned) {
+        item.setAttribute("data-column", assigned);
+        changed = true;
+      }
+      heights[shortest] = (heights[shortest] ?? 0) + (boxes[index] ?? 0) + this.#gap;
+    });
     this.element.style.setProperty(COLUMNS_PROPERTY, String(columns));
-    if (columns !== this.#lastColumns) {
+    if (columns !== this.#lastColumns || changed) {
       this.#lastColumns = columns;
       this.dispatch("layout", { detail: { columns } });
     }
@@ -10571,9 +11104,9 @@ var MasonryController = class extends Controller {
    */
   #columnCount() {
     const width = this.element.getBoundingClientRect().width;
-    const denominator = this.minColumnWidthValue + this.gapValue;
+    const denominator = this.#minColumnWidth + this.#gap;
     if (width <= 0 || denominator <= 0) return 1;
-    return Math.max(1, Math.floor((width + this.gapValue) / denominator));
+    return Math.max(1, Math.floor((width + this.#gap) / denominator));
   }
 };
 var MenuController = class extends Controller {
@@ -11191,8 +11724,8 @@ var MenubarController = class extends Controller {
    * being hidden itself, a menu can stay visible after its owning top was removed,
    * an open pair can appear from a morph with no layer registered for it, and the
    * Tab stop can end up on a now-inert top, on a runtime-added one, or on none at
-   * all. Nothing is remembered between calls (except which side of the Escape stack
-   * this layer is on, which the stack itself does not expose), so the outcome is the
+   * all. The only state carried between calls is the tracked focus record and which side
+   * of the Escape stack this layer is on (which the stack itself does not expose), so the outcome is the
    * same whichever mutation arrived and calling it more often than needed is free.
    */
   #reconcile() {
@@ -12306,7 +12839,7 @@ var MultiSelectController = class extends Controller {
   get #values() {
     return this.#selectedOptions.map((option) => this.#optionValue(option));
   }
-  /** Normalized cardinality cap: zero is unlimited and positive fractions round down. */
+  /** Normalized cardinality cap: zero and below are unlimited; a positive value floors, never below 1. */
   get #selectionLimit() {
     if (!Number.isFinite(this.maxValue) || this.maxValue <= 0) return 0;
     return Math.max(1, Math.floor(this.maxValue));
@@ -13611,6 +14144,9 @@ function compilePattern(source) {
 function hasModifier2(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
+function statesDiffer(left, right) {
+  return left.value !== right.value || left.state !== right.state;
+}
 var OtpController = class extends Controller {
   static targets = ["field", "value", "error"];
   static values = {
@@ -13622,8 +14158,8 @@ var OtpController = class extends Controller {
   #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;
+  /** Public state carried by the last dispatch; keeps a no-op sync silent. */
+  #published = null;
   /** Field whose confirming `input` after `compositionend` is already handled. */
   #confirmedField = null;
   /** True between connect and disconnect, so pre-connect Value changes stay silent. */
@@ -13659,7 +14195,7 @@ var OtpController = class extends Controller {
     this.#beforeCache.activate();
     this.#reconcile.activate();
     this.#adopt();
-    this.#lastValue = this.#sync();
+    this.#sync();
   }
   disconnect() {
     this.#connected = false;
@@ -13851,19 +14387,23 @@ var OtpController = class extends Controller {
     this.#markFilled(field, field.value);
   }
   /**
-   * Absorbs a batch of field additions or removals as one value transition.
+   * Absorbs a batch of field additions or removals as one state transition.
    *
-   * The page, not the user, moved the value here, so it is reported as
+   * The page, not the user, moved the state 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.
+   *
+   * Completeness moves on its own when the field count changes: dropping a
+   * trailing empty field completes a passcode whose combined value never moved,
+   * and adding one un-completes it. Comparing the whole derived state, not the
+   * string it contains, is what makes those transitions reportable.
    */
   #reconcileFields() {
-    const previous = this.#lastValue;
-    const combined = this.#sync();
-    if (combined === previous) return;
-    this.#lastValue = combined;
-    this.dispatch("reconcile", { detail: { value: combined } });
+    const previous = this.#published;
+    const current = this.#sync();
+    if (previous && !statesDiffer(previous, current)) return;
+    this.dispatch("reconcile", { detail: { value: current.value } });
   }
   /**
    * Validates the text an entry point received and distributes what it accepts.
@@ -13958,23 +14498,29 @@ var OtpController = class extends Controller {
     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. */
+  /**
+   * Mirrors the combined value into the form and the root's readable state, and
+   * records what was published so the next pass can compare against it.
+   */
   #sync() {
     const combined = this.#combinedValue();
     if (this.hasValueTarget) {
       this.valueTarget.value = combined;
     }
-    this.#state.write(this.element, this.#stateName(combined));
-    return combined;
+    const state = this.#stateName(combined);
+    this.#state.write(this.element, state);
+    const published = { value: combined, state };
+    this.#published = published;
+    return published;
   }
   #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;
+    const previous = this.#published;
+    const { value: combined } = this.#sync();
+    if (previous?.value === combined) return;
     this.dispatch("change", { detail: { value: combined } });
     if (this.#isComplete()) {
       this.dispatch("complete", { detail: { value: combined } });
@@ -14448,8 +14994,8 @@ var OverflowMenuController = class extends Controller {
    *
    * With no known child at all (a fresh instance connecting to markup that already
    * holds banked items), a fully-banked snapshot's inert boundary preserves whether an
-   * unindexed run was prepended or appended before connect. Older or server-rendered
-   * markup has no boundary; for that compatibility path the saved index is used as the
+   * unindexed run was prepended or appended before connect. Markup that holds banked items but no boundary —
+   * server-rendered or hand-authored — uses the saved index as the
    * offset, the inverse of the move that banked it.
    */
   #merge(bar, banked, boundaryAt) {
@@ -14861,6 +15407,7 @@ var PaginationController = class _PaginationController extends Controller {
     return button.hasAttribute(_PaginationController.#BOUNDARY_ATTR);
   }
 };
+var MAX_DELAY = 2 ** 31 - 1;
 var PasswordRevealController = class extends Controller {
   static targets = ["input", "toggle"];
   static values = {
@@ -14870,11 +15417,54 @@ var PasswordRevealController = class extends Controller {
   static events = ["toggle"];
   /** Auto re-mask timer; torn down on disconnect. */
   #timers = new SafeTimeout();
+  /**
+   * Whether this controller is between `connect()` and `disconnect()`.
+   *
+   * Target callbacks outlive the controller: Stimulus stops the target observer
+   * after `disconnect()`, so a field leaving after teardown still reaches
+   * {@link PasswordRevealController.inputTargetDisconnected}. Arming from there
+   * would put a timer back that nothing will clear. The element staying in the
+   * document does not answer this — unloading the controller leaves it there.
+   */
+  #connected = false;
+  /** Masks the field before Turbo copies the page into its snapshot. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindToMasked());
   connect() {
-    this.#reflect(this.#isVisible);
+    this.#connected = true;
+    const visible = this.#isVisible;
+    this.#reflect(visible);
+    this.#beforeCache.activate();
+    this.#arm(visible);
   }
   disconnect() {
+    this.#connected = false;
     this.#timers.clearAll();
+    this.#beforeCache.deactivate();
+  }
+  /** Re-derives the hooks and the re-mask for a field swapped in after connect. */
+  inputTargetConnected() {
+    const visible = this.#connected && this.#isVisible;
+    this.#reflect(visible);
+    this.#arm(visible);
+  }
+  /**
+   * Re-derives from whatever field is left rather than assuming none is. A swap
+   * delivers this callback next to the arrival in either order, so a revealed
+   * replacement that answered "masked" here would be described as hidden while
+   * showing the password, and would carry no re-mask.
+   *
+   * Teardown is the one case with nothing to derive: target callbacks run after
+   * `disconnect()`, so the field is still revealed and re-arming from it would
+   * outlive the controller. A detached root is the signal to stand down.
+   */
+  inputTargetDisconnected() {
+    const visible = this.#connected && this.element.isConnected && this.#isVisible;
+    this.#reflect(visible);
+    this.#arm(visible);
+  }
+  /** Re-derives the pressed state for a button swapped in after connect. */
+  toggleTargetConnected() {
+    this.#reflect(this.#isVisible);
   }
   /** Toggles the input between masked and revealed. Bound via `data-action`. */
   toggle() {
@@ -14903,11 +15493,37 @@ var PasswordRevealController = class extends Controller {
     }
     this.#reflect(visible);
     this.dispatch("toggle", { detail: { visible } });
+    this.#arm(visible);
+  }
+  /** Schedules the auto re-mask for a revealed field, replacing any pending one. */
+  #arm(visible) {
     this.#timers.clearAll();
-    if (visible && this.autoHideValue > 0) {
-      this.#timers.set(() => this.#setVisible(false), this.autoHideValue);
+    const delay = this.#autoHideDelay;
+    if (visible && delay > 0) {
+      this.#timers.set(() => this.#setVisible(false), delay);
     }
   }
+  /**
+   * The auto re-mask delay, held to what `setTimeout` can carry. Past that limit
+   * a delay folds to zero, turning "keep it showing" into "hide it at once" —
+   * the opposite of what the declaration asked for. A value that is no delay at
+   * all stays out of the positive range {@link PasswordRevealController.#arm}
+   * requires, so it schedules nothing.
+   */
+  get #autoHideDelay() {
+    return Math.min(this.autoHideValue, MAX_DELAY);
+  }
+  /**
+   * Returns the field to masked before Turbo copies the page. Silent and
+   * focus-free: the page is about to be frozen, so there is no one to tell and
+   * nowhere for focus to go.
+   */
+  #rewindToMasked() {
+    this.#timers.clearAll();
+    if (!this.hasInputTarget) return;
+    this.inputTarget.type = "password";
+    this.#reflect(false);
+  }
   /** Reflects the visible state onto `aria-pressed` and `data-state`. */
   #reflect(visible) {
     if (this.hasToggleTarget) {
@@ -14921,6 +15537,7 @@ var DEFAULT_LEVELS = ["weak", "fair", "good", "strong"];
 var LENGTH_MILESTONES = [8, 12, 16];
 var MAX_POINTS = LENGTH_MILESTONES.length + (CLASS_PATTERNS.length - 1);
 var STRENGTH_BANDS = ["weak", "fair", "good", "strong"];
+var MIN_LEVELS = 2;
 var PasswordStrengthController = class _PasswordStrengthController extends Controller {
   static targets = ["input", "meter", "label"];
   static values = {
@@ -14928,50 +15545,143 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     // A JSON list read through `parseStringList` rather than Stimulus's `Array`
     // type: that reader throws out of the value observer before any callback
     // runs, so one malformed attribute would stop the meter connecting.
-    levels: { type: String, default: "" }
+    levels: { type: String, default: "" },
+    announceText: { type: String, default: "" }
   };
-  static actions = ["evaluate"];
-  static events = ["change"];
-  /** Delay (ms) before the polite live-region label is written, to throttle SR flooding. */
+  static actions = ["evaluate", "setScore"];
+  static events = ["change", "reconcile"];
+  /** Delay (ms) before one settled level is sent to the shared announcer. */
   static #announceDelay = 200;
   #timers = new SafeTimeout();
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #repaint = new MicrotaskCoalescer(() => this.#reconcile());
+  #levels = [...DEFAULT_LEVELS];
   #announceId = null;
+  #announcedLevel = null;
+  #externalScore = null;
+  #lastDetail = null;
+  /** Reflects the current DOM state and opens the reconciliation window. */
   connect() {
-    this.#update({ announce: false });
+    this.#repaint.activate();
+    this.#beforeCache.activate();
+    this.#lastDetail = this.#detail(this.#render());
   }
+  /** Releases the reconciliation window, the cache subscription and the debounce. */
   disconnect() {
-    this.#timers.clearAll();
-    this.#announceId = null;
+    this.#repaint.cancel();
+    this.#beforeCache.deactivate();
+    this.#cancelAnnouncement();
+    this.#announcedLevel = null;
+    this.#externalScore = null;
+    this.#lastDetail = null;
   }
   /** Re-evaluates strength from the input. Bound via `data-action` (`input`). */
   evaluate() {
-    this.#update();
+    this.#externalScore = null;
+    this.#commit();
+  }
+  /**
+   * Adopts a score computed outside the built-in heuristic, clamped into the
+   * declared scale. An unreadable value leaves the current score standing, and
+   * the next `evaluate` hands scoring back to the heuristic.
+   */
+  setScore(event) {
+    const next = toFiniteNumber(event.params?.score ?? event.detail?.score);
+    if (next === null) return;
+    this.#externalScore = next;
+    this.#commit();
+  }
+  /** Re-reads the scale when application code or a Turbo morph changes `levels`. */
+  levelsValueChanged() {
+    this.#levels = this.#readLevels();
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `minScore`. */
+  minScoreValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Repaints when application code or a Turbo morph changes `announceText`. */
+  announceTextValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Scores the field added or replaced at runtime. */
+  inputTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Falls back to the pristine state after the scored field is removed. */
+  inputTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Syncs a meter added or replaced at runtime, which carries no value yet. */
+  meterTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints the remaining output after a meter is removed. */
+  meterTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Fills a readout added or replaced at runtime. */
+  labelTargetConnected() {
+    this.#repaint.schedule();
+  }
+  /** Repaints the remaining output after a readout is removed. */
+  labelTargetDisconnected() {
+    this.#repaint.schedule();
+  }
+  /** Reflects one confirmed scoring pass and offers its level to the reader. */
+  #commit() {
+    const reading = this.#render();
+    this.#lastDetail = this.#detail(reading);
+    this.dispatch("change", { detail: this.#lastDetail });
+    this.#scheduleAnnouncement(reading);
+  }
+  /** Repaints one mutation batch and reports a changed controller-derived state. */
+  #reconcile() {
+    const previous = this.#lastDetail;
+    const owed = this.#announceId !== null;
+    this.#cancelAnnouncement();
+    const reading = this.#render();
+    const detail = this.#detail(reading);
+    this.#lastDetail = detail;
+    if (reading.score === 0) this.#announcedLevel = null;
+    if (owed) this.#scheduleAnnouncement(reading);
+    if (previous && this.#detailsDiffer(previous, detail)) {
+      this.dispatch("reconcile", { detail });
+    }
   }
   /**
-   * Recomputes the strength. The meter ARIA, data hooks, the custom property and
-   * the `change` event apply immediately; the live-region label text is debounced
-   * unless `announce` is `false` (the initial render).
+   * Synchronizes the meter ARIA, the root state hooks, the fill custom property
+   * and the visible level readout.
+   *
+   * @stimeoRenderRoot
    */
-  #update(options = {}) {
-    const password = this.hasInputTarget ? this.inputTarget.value : "";
-    const labels = parseStringList(this.levelsValue, DEFAULT_LEVELS);
-    const max = labels.length;
-    const score = this.#score(password, max);
-    const label = score > 0 ? labels[score - 1] ?? "" : "";
+  #render() {
+    const max = this.#levels.length;
+    const score = this.#currentScore(max);
+    const level = this.#levels[score - 1] ?? "";
+    const meetsMin = score > 0 && score >= this.#minScore;
+    const band = this.#band(score, max);
     this.#reflectMeter(score, max);
-    this.#reflectRoot(score, max);
-    if (options.announce === false) {
-      this.#writeLabel(label);
-      return;
+    this.#reflectRoot(score, max, band, meetsMin);
+    this.#writeLabel(level);
+    return { score, level, max, meetsMin, band };
+  }
+  /**
+   * The declared minimum, or the Value's default (`0`, an inert gate) when the
+   * declaration cannot be read as a number. Every comparison against an unread
+   * number answers false, which would fail even the strongest password instead
+   * of leaving the gate off, so the unreadable declaration is confined to its
+   * own Value the way an unreadable scale is.
+   */
+  get #minScore() {
+    return Number.isFinite(this.minScoreValue) ? this.minScoreValue : 0;
+  }
+  /** The externally supplied score when one stands, else the heuristic's. */
+  #currentScore(max) {
+    if (this.#externalScore !== null) {
+      return Math.min(max, Math.max(0, Math.round(this.#externalScore)));
     }
-    this.dispatch("change", {
-      detail: { score, level: label, max, meetsMin: score > 0 && score >= this.minScoreValue }
-    });
-    if (this.#announceId !== null) this.#timers.clear(this.#announceId);
-    this.#announceId = this.#timers.set(() => {
-      this.#writeLabel(label);
-      this.#announceId = null;
-    }, _PasswordStrengthController.#announceDelay);
+    return this.#score(this.hasInputTarget ? this.inputTarget.value : "", max);
   }
   /** Syncs the meter target's ARIA value attributes (`0..levels.length`). */
   #reflectMeter(score, max) {
@@ -14985,25 +15695,27 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
    * empty), the `data-below-min` hook when the score is under `minScore`, and the
    * `0–1` fill the consumer's CSS turns into the bar width.
    */
-  #reflectRoot(score, max) {
-    const band = this.#band(score, max);
+  #reflectRoot(score, max, band, meetsMin) {
     this.#toggle("data-strength", band, band.length > 0);
-    this.#toggle("data-below-min", "true", score > 0 && score < this.minScoreValue);
-    const ratio = max > 0 ? score / max : 0;
-    this.element.style.setProperty("--stimeo--password-strength", String(ratio));
+    this.#toggle("data-below-min", "true", score > 0 && !meetsMin);
+    this.element.style.setProperty("--stimeo--password-strength", String(score / max));
   }
-  #writeLabel(label) {
-    if (this.hasLabelTarget) this.labelTarget.textContent = label;
+  /** Writes the visible readout only when its text actually changed. */
+  #writeLabel(text) {
+    if (!this.hasLabelTarget || this.labelTarget.textContent === text) return;
+    this.labelTarget.textContent = text;
   }
   /**
    * Locale-independent styling band (one of {@link STRENGTH_BANDS}) for `score`
-   * out of `max`. Empty input → `""`. Quantizes the `score/max` ratio into the
-   * four fixed bands, so a non-default level count still maps onto a stable hook.
+   * out of `max`. Empty input → `""`. Maps the position within the declared scale
+   * onto the position within the fixed bands, so both ends stay anchored on any
+   * level count: the weakest score is always `weak` and the strongest `strong`,
+   * and only the middle collapses when the scales differ in size.
    */
   #band(score, max) {
-    if (score <= 0 || max <= 0) return "";
-    const index = Math.ceil(score / max * STRENGTH_BANDS.length) - 1;
-    return STRENGTH_BANDS[Math.min(STRENGTH_BANDS.length - 1, Math.max(0, index))] ?? "";
+    if (score <= 0) return "";
+    const index = Math.round((score - 1) / (max - 1) * (STRENGTH_BANDS.length - 1));
+    return STRENGTH_BANDS[index] ?? STRENGTH_BANDS[0];
   }
   /** Sets `name` to `value` when `on`, else removes it (value/presence data hook). */
   #toggle(name, value, on) {
@@ -15013,6 +15725,11 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
       this.element.removeAttribute(name);
     }
   }
+  /** The declared level labels, or the defaults when the scale cannot order. */
+  #readLevels() {
+    const declared = parseStringList(this.levelsValue, DEFAULT_LEVELS);
+    return declared.length >= MIN_LEVELS ? declared : [...DEFAULT_LEVELS];
+  }
   /**
    * Lightweight zero-dependency strength heuristic returning an integer in
    * `[0, max]` (`max` = number of levels). Empty input is `0` (no level); any
@@ -15022,7 +15739,7 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
    * alone cannot mask trivial repetition.
    */
   #score(password, max) {
-    if (password.length === 0 || max === 0) return 0;
+    if (password.length === 0) return 0;
     let points = 0;
     for (const milestone of LENGTH_MILESTONES) {
       if (password.length >= milestone) points += 1;
@@ -15032,6 +15749,64 @@ var PasswordStrengthController = class _PasswordStrengthController extends Contr
     const bucketed = Math.round(points / MAX_POINTS * max);
     return Math.min(max, Math.max(1, bucketed));
   }
+  /** Debounces one i18n-neutral message for a level transition into the announcer. */
+  #scheduleAnnouncement(reading) {
+    this.#cancelAnnouncement();
+    if (reading.score === 0) {
+      this.#announcedLevel = null;
+      return;
+    }
+    if (reading.level === this.#announcedLevel) return;
+    const message = fillTemplate(this.announceTextValue, {
+      level: reading.level,
+      score: reading.score,
+      max: reading.max,
+      band: reading.band
+    });
+    if (message.trim().length === 0) return;
+    this.#announceId = this.#timers.set(() => {
+      this.#announcedLevel = reading.level;
+      announce(message);
+      this.#announceId = null;
+    }, _PasswordStrengthController.#announceDelay);
+  }
+  /** Cancels the one outstanding message without touching visible output. */
+  #cancelAnnouncement() {
+    if (this.#announceId !== null) this.#timers.clear(this.#announceId);
+    this.#announceId = null;
+  }
+  /**
+   * Returns every output derived from the field value to its pristine form.
+   *
+   * The value itself is not carried in a Turbo snapshot, so a band, a fill or a
+   * readout left behind would describe a password the restored page no longer
+   * holds. The pass is silent: `connect()` derives the state again from whatever
+   * the restored field contains.
+   */
+  #rewindForCache() {
+    this.#cancelAnnouncement();
+    this.#announcedLevel = null;
+    this.#externalScore = null;
+    this.#lastDetail = null;
+    this.#reflectMeter(0, this.#levels.length);
+    this.#toggle("data-strength", "", false);
+    this.#toggle("data-below-min", "true", false);
+    this.element.style.removeProperty("--stimeo--password-strength");
+    this.#writeLabel("");
+  }
+  /** Selects the public event state from the richer internal reading. */
+  #detail(reading) {
+    return {
+      score: reading.score,
+      level: reading.level,
+      max: reading.max,
+      meetsMin: reading.meetsMin
+    };
+  }
+  /** Compares exactly the state carried by `change` and `reconcile`. */
+  #detailsDiffer(left, right) {
+    return left.score !== right.score || left.level !== right.level || left.max !== right.max || left.meetsMin !== right.meetsMin;
+  }
 };
 
 // src/utils/safe_storage.ts
@@ -16215,25 +16990,6 @@ var ProgressController = class extends Controller {
     this.element.removeAttribute(OWNED_VALUE_TEXT2);
   }
 };
-
-// src/utils/interactive_host.ts
-var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
-function isInteractiveHost(element) {
-  if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
-  let current = element;
-  while (current) {
-    const raw = current.getAttribute("contenteditable");
-    if (raw !== null) {
-      const value = raw.trim().toLowerCase();
-      if (value === "false") return false;
-      if (value === "" || value === "true" || value === "plaintext-only") return true;
-    }
-    current = current.parentElement;
-  }
-  return false;
-}
-
-// src/controllers/radio_group_controller.ts
 var OBSERVED_ATTRIBUTES4 = [
   "aria-checked",
   "aria-disabled",
@@ -16718,80 +17474,25 @@ var RadioGroupController = class extends Controller {
     this.#markInternal(this.#internalCheckedValues, radio, value);
     radio.setAttribute("aria-checked", value);
   }
-  /** Writes a roving value before the radio is visible to the shared primitive. */
-  #writeTabindex(radio, value) {
-    const serialized = String(value);
-    this.#markInternal(this.#internalTabindexValues, radio, serialized);
-    radio.tabIndex = value;
-  }
-  /** Mirrors the selected value or the empty state to the optional hidden field. */
-  #reflectField(radio, { silent = false } = {}) {
-    if (!this.hasFieldTarget) return;
-    const value = radio ? this.#radioValue(radio) : "";
-    if (this.fieldTarget.value === value) return;
-    this.fieldTarget.value = value;
-    if (!silent) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
-  }
-  /** A radio's submitted value (`data-value`, defaulting to empty). */
-  #radioValue(radio) {
-    return radio.getAttribute("data-value") ?? "";
-  }
-};
-
-// src/utils/owned_pointer_session.ts
-var OwnedPointerSession = class {
-  pointerId;
-  #owner;
-  #handlers;
-  #abort = new AbortController();
-  #active = true;
-  constructor(start, owner, handlers) {
-    this.pointerId = start.pointerId;
-    this.#owner = owner;
-    this.#handlers = handlers;
-    const { signal } = this.#abort;
-    owner.ownerDocument.addEventListener("pointermove", this.#onMove, { signal });
-    owner.ownerDocument.addEventListener("pointerup", this.#onEndEvent, { signal });
-    owner.ownerDocument.addEventListener("pointercancel", this.#onEndEvent, { signal });
-    owner.addEventListener("lostpointercapture", this.#onLostCapture, { signal });
-    try {
-      owner.setPointerCapture?.(this.pointerId);
-    } catch {
-    }
-  }
-  /** Whether this session still owns its pointer and listeners. */
-  get active() {
-    return this.#active;
+  /** Writes a roving value before the radio is visible to the shared primitive. */
+  #writeTabindex(radio, value) {
+    const serialized = String(value);
+    this.#markInternal(this.#internalTabindexValues, radio, serialized);
+    radio.tabIndex = value;
   }
-  /** Whether `event` belongs to the initiating pointer of the live session. */
-  owns(event) {
-    return this.#active && event.pointerId === this.pointerId;
+  /** Mirrors the selected value or the empty state to the optional hidden field. */
+  #reflectField(radio, { silent = false } = {}) {
+    if (!this.hasFieldTarget) return;
+    const value = radio ? this.#radioValue(radio) : "";
+    if (this.fieldTarget.value === value) return;
+    this.fieldTarget.value = value;
+    if (!silent) this.fieldTarget.dispatchEvent(new Event("change", { bubbles: true }));
   }
-  /** Releases capture/listeners and invokes the end callback exactly once. */
-  end() {
-    if (!this.#active) return;
-    this.#active = false;
-    this.#abort.abort();
-    try {
-      this.#owner.releasePointerCapture?.(this.pointerId);
-    } catch {
-    }
-    this.#handlers.end?.();
+  /** A radio's submitted value (`data-value`, defaulting to empty). */
+  #radioValue(radio) {
+    return radio.getAttribute("data-value") ?? "";
   }
-  #onMove = (event) => {
-    if (this.owns(event)) this.#handlers.move(event);
-  };
-  #onEndEvent = (event) => {
-    if (this.owns(event)) this.end();
-  };
-  #onLostCapture = (event) => {
-    const pointerId = event.pointerId;
-    if (typeof pointerId === "number" && pointerId !== this.pointerId) return;
-    this.end();
-  };
 };
-
-// src/controllers/range_slider_controller.ts
 var START_PROPERTY = "--stimeo--range-slider-start";
 var END_PROPERTY = "--stimeo--range-slider-end";
 var DEFAULT_MIN = 0;
@@ -17641,6 +18342,26 @@ var RelativeTimeController = class extends Controller {
     return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
   }
 };
+var STATELESS_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "submit", "reset", "button", "image"]);
+function restoreField(element) {
+  if (element instanceof HTMLTextAreaElement) {
+    element.value = element.defaultValue;
+    return;
+  }
+  if (element instanceof HTMLSelectElement) {
+    for (const option of element.options) option.selected = option.hasAttribute("selected");
+    return;
+  }
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "checkbox" || element.type === "radio") {
+      element.checked = element.defaultChecked;
+    } else if (element.type === "file") {
+      element.value = "";
+    } else if (!STATELESS_INPUT_TYPES.has(element.type)) {
+      element.value = element.defaultValue;
+    }
+  }
+}
 var ResetBeforeCacheController = class extends Controller {
   static values = {
     scope: { type: String, default: "" },
@@ -17648,8 +18369,32 @@ var ResetBeforeCacheController = class extends Controller {
   };
   static actions = ["reset"];
   static events = ["reset", "request"];
+  /** The `scope` declaration after validation; empty when it cannot be parsed. */
+  #scopeSelector = "";
   /** Runs the reset just before Turbo caches the snapshot. */
   #onBeforeCache = () => this.reset();
+  /**
+   * Validates the scope declaration once, keeping only a selector the engine can
+   * read.
+   *
+   * A selector reads back as an ordinary string, so a malformed one survives
+   * until it is handed to the DOM — and this part runs from a single listener
+   * whose whole job is to keep a cached page from freezing. Falling back to the
+   * default keeps that job running with a visible, findable result instead of
+   * silently taking the sweep down.
+   */
+  scopeValueChanged() {
+    const selector = this.scopeValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#scopeSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#scopeSelector = "";
+  }
   connect() {
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
   }
@@ -17660,6 +18405,10 @@ var ResetBeforeCacheController = class extends Controller {
    * Resets transient UI within scope to its initial state. Asks controllers to
    * close (via `request`) first, then applies the declarative `data-reset-*` cleanup,
    * and finally emits `reset`. Safe to call any number of times (idempotent).
+   *
+   * `dispatchReset` decides only whether the `request` ask goes out; the cleanup
+   * and the closing `reset` run either way. Both the listener and this action
+   * reach the same sweep, so `reset` is emitted for a manual call too.
    */
   reset() {
     const root = this.#scopeRoot();
@@ -17678,9 +18427,7 @@ var ResetBeforeCacheController = class extends Controller {
       if (element instanceof HTMLFormElement) element.reset();
     }
     for (const element of root.querySelectorAll("[data-reset-value]")) {
-      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-        element.value = "";
-      }
+      restoreField(element);
     }
     for (const element of root.querySelectorAll("[data-reset-hidden]")) {
       element.hidden = true;
@@ -17692,30 +18439,38 @@ var ResetBeforeCacheController = class extends Controller {
   }
   /** The scan root: a `scope` descendant when set, else the controller element. */
   #scopeRoot() {
-    if (!this.scopeValue) return this.element;
-    return this.element.querySelector(this.scopeValue) ?? this.element;
+    if (!this.#scopeSelector) return this.element;
+    return this.element.querySelector(this.#scopeSelector) ?? this.element;
   }
 };
+var DEFAULT_MIN2 = 0;
+var DEFAULT_MAX2 = 100;
+var DEFAULT_VALUE = 50;
+var DEFAULT_STEP = 1;
 var ResizableController = class extends Controller {
   static targets = ["primary", "secondary", "separator"];
   static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    value: { type: Number, default: 50 }
+    min: { type: Number, default: DEFAULT_MIN2 },
+    max: { type: Number, default: DEFAULT_MAX2 },
+    step: { type: Number, default: DEFAULT_STEP },
+    value: { type: Number, default: DEFAULT_VALUE }
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** The value held before the current collapse, restored when toggling back. */
-  #valueBeforeCollapse = 50;
+  /** Where the divider sat before the current collapse; `null` when unknown. */
+  #valueBeforeCollapse = null;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
   /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
   #paneTabindex = new TabindexLoan();
   /** Releases the pane cycle listener bound in {@link connect}. */
   #cycleAbort = null;
+  /** Folds the range and position inputs of one morph batch into a single paint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
-    this.#clampAndSync();
+    this.element.removeAttribute("data-dragging");
+    this.#repaint.activate();
+    this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
       signal: this.#cycleAbort.signal
@@ -17727,17 +18482,19 @@ var ResizableController = class extends Controller {
     this.#dragAbort = null;
     this.#cycleAbort?.abort();
     this.#cycleAbort = null;
+    this.#repaint.cancel();
     this.#paneTabindex.returnAll();
+    this.element.removeAttribute("data-dragging");
   }
   /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
   #onCycleKeydown = (event) => {
     if (event.key !== "F6") return;
+    if (event.isComposing) return;
     if (event.defaultPrevented) return;
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
     const panes = [];
     if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
     if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
-    if (panes.length === 0) return;
     const target = event.target;
     const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
     const next = panes[(current + 1) % panes.length];
@@ -17746,12 +18503,21 @@ var ResizableController = class extends Controller {
     this.#paneTabindex.lend(next);
     next.focus();
   };
-  /**
-   * Stimulus lifecycle callback when the valueValue changes.
-   * Keeps CSS fractions and ARIA status completely aligned.
-   */
+  /** Re-renders when application code (or a Turbo morph) changes `value` at runtime. */
   valueValueChanged() {
-    this.#clampAndSync();
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-publishes range and position onto a separator swapped in after connect. */
+  separatorTargetConnected() {
+    this.#repaint.schedule();
   }
   /** Starts active pointer drag tracking and locks capture. */
   onPointerDown(event) {
@@ -17772,44 +18538,44 @@ var ResizableController = class extends Controller {
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
+    const { min, max } = this.#range;
+    const isVertical = this.#isVertical;
     let handled = true;
-    let nextValue = this.valueValue;
+    let nextValue = this.#position;
     switch (event.key) {
       case "ArrowLeft":
         if (isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowRight":
         if (isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowUp":
         if (!isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowDown":
         if (!isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "Home":
-        nextValue = this.minValue;
+        nextValue = min;
         break;
       case "End":
-        nextValue = this.maxValue;
+        nextValue = max;
         break;
       case "Enter":
         event.preventDefault();
@@ -17821,65 +18587,86 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(this.minValue, Math.min(nextValue, this.maxValue));
-      this.#clampAndSync();
+      this.valueValue = Math.max(min, Math.min(nextValue, max));
+      this.#render();
       this.#dispatchChange();
     }
   }
-  /** Double-click or Enter to collapse/restore pane to min/max levels. */
+  /** Collapses the primary pane to its minimum, or returns it to the last position. */
   toggle() {
-    const threshold = this.minValue + (this.maxValue - this.minValue) / 2;
-    if (this.valueValue > this.minValue) {
-      this.#valueBeforeCollapse = this.valueValue;
-      this.valueValue = this.minValue;
+    const { min, max } = this.#range;
+    if (this.#position > min) {
+      this.#valueBeforeCollapse = this.#position;
+      this.valueValue = min;
     } else {
-      this.valueValue = this.#valueBeforeCollapse >= threshold ? this.#valueBeforeCollapse : this.maxValue;
+      this.valueValue = this.#valueBeforeCollapse ?? max;
+      this.#valueBeforeCollapse = null;
     }
-    this.#clampAndSync();
+    this.#render();
     this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
-    let fraction = 0.5;
-    if (isVertical) {
-      fraction = (event.clientX - rect.left) / rect.width;
-    } else {
-      fraction = (event.clientY - rect.top) / rect.height;
-    }
-    fraction = Math.max(0, Math.min(fraction, 1));
-    const percent = Math.round(fraction * 100);
-    this.valueValue = Math.max(this.minValue, Math.min(percent, this.maxValue));
-    this.#clampAndSync();
+    const raw = this.#isVertical ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
+    const fraction = Number.isFinite(raw) ? Math.max(0, Math.min(raw, 1)) : 0;
+    const { min, max } = this.#range;
+    this.valueValue = Math.max(min, Math.min(Math.round(fraction * 100), max));
+    this.#render();
   };
   #onPointerUp = (event) => {
-    if (!this.hasSeparatorTarget) return;
-    const separator = this.separatorTarget;
-    separator.releasePointerCapture(event.pointerId);
     this.element.removeAttribute("data-dragging");
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    if (this.hasSeparatorTarget) {
+      this.separatorTarget.releasePointerCapture(event.pointerId);
+    }
     this.#dispatchChange();
   };
-  #clampAndSync() {
-    const clamped = Math.max(this.minValue, Math.min(this.valueValue, this.maxValue));
-    if (this.valueValue !== clamped) {
-      this.valueValue = clamped;
+  /**
+   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
+   * the range assistive tech reads off the separator. The clamped position is
+   * written back to the Value so it, ARIA, CSS, and dispatched events agree.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const { min, max } = this.#range;
+    const position = this.#position;
+    if (this.valueValue !== position) {
+      this.valueValue = position;
     }
-    const fraction = clamped / 100;
-    this.element.style.setProperty("--stimeo--resizable-fraction", String(fraction));
+    this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
-      this.separatorTarget.setAttribute("aria-valuenow", String(clamped));
-      this.separatorTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.separatorTarget.setAttribute("aria-valuemax", String(this.maxValue));
+      this.separatorTarget.setAttribute("aria-valuenow", String(position));
+      this.separatorTarget.setAttribute("aria-valuemin", String(min));
+      this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
   #dispatchChange() {
     const fraction = this.valueValue / 100;
     this.dispatch("change", { detail: { value: this.valueValue, fraction } });
   }
+  /** The declared range after validation; an unreadable bound uses its default. */
+  get #range() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN2;
+    const max = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX2;
+    return { min, max: Math.max(min, max) };
+  }
+  /** The declared position, clamped into the validated range. */
+  get #position() {
+    const { min, max } = this.#range;
+    const value = Number.isFinite(this.valueValue) ? this.valueValue : DEFAULT_VALUE;
+    return Math.max(min, Math.min(value, max));
+  }
+  /** The keyboard increment; a non-positive or unreadable one uses the default. */
+  get #step() {
+    return Number.isFinite(this.stepValue) && this.stepValue > 0 ? this.stepValue : DEFAULT_STEP;
+  }
+  /** Whether the divider runs vertically; a separator that does not say is horizontal. */
+  get #isVertical() {
+    return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
+  }
 };
 var RovingController = class extends Controller {
   static targets = ["item"];
@@ -18387,6 +19174,17 @@ var ScrollAreaController = class extends Controller {
     this.#clearHostState();
   }
 };
+function parseStored(raw) {
+  if (raw === null) return null;
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function storedOffset(value) {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
 var ScrollRestoreController = class extends Controller {
   static values = {
     key: { type: String, default: "" },
@@ -18399,6 +19197,26 @@ var ScrollRestoreController = class extends Controller {
   /** Last offset captured while the element was live; persisted as-is on teardown. */
   #lastTop = 0;
   #lastLeft = 0;
+  /**
+   * The offsets this controller's own restore produced, awaiting the `scroll`
+   * the engine fires for them. A restore the layout cannot reach yet lands short,
+   * so treating that echo as the reader's position would cut the saved offset
+   * down to whatever the unfinished layout allowed.
+   */
+  #echoTop = null;
+  #echoLeft = null;
+  /** Offsets stored for an axis that is not tracked, carried through saves. */
+  #carried = {};
+  /**
+   * Whether each axis holds an offset worth saving — one this namespace restored
+   * or the reader moved. A save writes only the axes that are marked, so an
+   * offset taken under a different key or axis is never re-published as if the
+   * reader had left it there.
+   */
+  #capturedTop = false;
+  #capturedLeft = false;
+  /** Whether the controller is connected; Value callbacks outside that window do not resync. */
+  #connected = false;
   #onScroll = () => {
     this.#capture();
     if (this.#rafId !== null) return;
@@ -18408,58 +19226,127 @@ var ScrollRestoreController = class extends Controller {
     });
   };
   connect() {
+    this.#connected = true;
     this.#storageKey = this.#resolveKey();
-    if (!this.#storageKey) return;
-    this.#restore();
     this.element.addEventListener("scroll", this.#onScroll, { passive: true });
+    if (this.#storageKey) this.#restore();
   }
   disconnect() {
-    if (!this.#storageKey) return;
+    this.#connected = false;
     this.element.removeEventListener("scroll", this.#onScroll);
+    this.#cancelFrame();
+    this.#persist();
+  }
+  /** Re-derives the namespace when application code or a Turbo morph moves `key`. */
+  keyValueChanged() {
+    this.#resync();
+  }
+  /** Re-derives the tracked axes when application code or a Turbo morph moves `axis`. */
+  axisValueChanged() {
+    this.#resync();
+  }
+  /** Rebuilds the persistence state around the Values as they now read. */
+  #resync() {
+    if (!this.#connected) return;
+    this.#cancelFrame();
+    this.#storageKey = this.#resolveKey();
+    this.#echoTop = null;
+    this.#echoLeft = null;
+    this.#carried = {};
+    this.#capturedTop = false;
+    this.#capturedLeft = false;
+    if (this.#storageKey) this.#restore();
+  }
+  /** Drops the pending coalesced save, if one is queued. */
+  #cancelFrame() {
     if (this.#rafId !== null) {
       cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
-    this.#persist();
   }
-  /** Records the live scroll offset for the configured axis. */
+  /**
+   * Records the live scroll offset for the configured axis.
+   *
+   * An axis holds its echo until that axis actually moves. A scroll event names
+   * no axis, so consuming both on the first one to arrive would leave the other
+   * unguarded: on `both`, moving one axis would take the clamped reading of the
+   * untouched axis as the reader's own position and save it, cutting the stored
+   * offset down to whatever the layout could reach at restore time.
+   */
   #capture() {
-    if (this.#tracksVertical) this.#lastTop = this.element.scrollTop;
-    if (this.#tracksHorizontal) this.#lastLeft = this.element.scrollLeft;
+    if (this.#tracksVertical) {
+      const top = this.element.scrollTop;
+      if (top !== this.#echoTop) {
+        this.#echoTop = null;
+        this.#lastTop = top;
+        this.#capturedTop = true;
+      }
+    }
+    if (this.#tracksHorizontal) {
+      const left = this.element.scrollLeft;
+      if (left !== this.#echoLeft) {
+        this.#echoLeft = null;
+        this.#lastLeft = left;
+        this.#capturedLeft = true;
+      }
+    }
   }
-  /** Persists the last captured scroll offset for the configured axis. */
+  /**
+   * Writes the marked axes, carrying through any offset held for an untracked one.
+   * Without a key, or with neither axis marked, it writes nothing.
+   */
   #persist() {
-    const data = {};
-    if (this.#tracksVertical) data.top = this.#lastTop;
-    if (this.#tracksHorizontal) data.left = this.#lastLeft;
+    if (!this.#storageKey || !(this.#capturedTop || this.#capturedLeft)) return;
+    const data = { ...this.#carried };
+    if (this.#tracksVertical && this.#capturedTop) data.top = this.#lastTop;
+    if (this.#tracksHorizontal && this.#capturedLeft) data.left = this.#lastLeft;
     try {
-      sessionStorage.setItem(this.#storageKey, JSON.stringify(data));
+      window.sessionStorage.setItem(this.#storageKey, JSON.stringify(data));
     } catch {
     }
   }
   /** Applies the persisted scroll offset, if any, without moving focus. */
   #restore() {
-    let raw = null;
-    try {
-      raw = sessionStorage.getItem(this.#storageKey);
-    } catch {
-      return;
-    }
-    if (raw === null) return;
-    let data;
+    let raw;
     try {
-      data = JSON.parse(raw);
+      raw = window.sessionStorage.getItem(this.#storageKey);
     } catch {
       return;
     }
-    if (this.#tracksVertical && typeof data.top === "number") {
-      this.element.scrollTop = data.top;
-      this.#lastTop = data.top;
-    }
-    if (this.#tracksHorizontal && typeof data.left === "number") {
-      this.element.scrollLeft = data.left;
-      this.#lastLeft = data.left;
+    const data = parseStored(raw);
+    if (data === null) return;
+    this.#echoTop = null;
+    this.#echoLeft = null;
+    const top = storedOffset(data.top);
+    const left = storedOffset(data.left);
+    const options = { behavior: "instant" };
+    let requested = false;
+    if (this.#tracksVertical) {
+      if (top !== null) {
+        options.top = top;
+        this.#lastTop = top;
+        this.#capturedTop = true;
+        requested = true;
+      }
+    } else if (data.top !== void 0) {
+      this.#carried.top = data.top;
+    }
+    if (this.#tracksHorizontal) {
+      if (left !== null) {
+        options.left = left;
+        this.#lastLeft = left;
+        this.#capturedLeft = true;
+        requested = true;
+      }
+    } else if (data.left !== void 0) {
+      this.#carried.left = data.left;
     }
+    if (!requested) return;
+    const beforeTop = this.element.scrollTop;
+    const beforeLeft = this.element.scrollLeft;
+    this.element.scrollTo(options);
+    if (this.element.scrollTop !== beforeTop) this.#echoTop = this.element.scrollTop;
+    if (this.element.scrollLeft !== beforeLeft) this.#echoLeft = this.element.scrollLeft;
   }
   /** The `sessionStorage` key: explicit `key`, else the element `id`, else none. */
   #resolveKey() {
@@ -18473,10 +19360,11 @@ var ScrollRestoreController = class extends Controller {
     return this.axisValue === "horizontal" || this.axisValue === "both";
   }
 };
+var DEFAULT_OFFSET = 400;
 var ScrollVisibilityController = class extends Controller {
   static targets = ["element"];
   static values = {
-    offset: { type: Number, default: 400 },
+    offset: { type: Number, default: DEFAULT_OFFSET },
     mode: { type: String, default: "offset" },
     focusSelector: { type: String, default: "" },
     root: { type: String, default: "" }
@@ -18494,8 +19382,32 @@ var ScrollVisibilityController = class extends Controller {
    * the window. Captured on connect so teardown detaches from the same source.
    */
   #scrollSource = window;
+  /**
+   * Gates the declaration callbacks to the connected window.
+   *
+   * Stimulus delivers a Value callback ahead of `connect()` and again for every
+   * runtime change; without the gate, merely connecting would evaluate — and
+   * announce — before `connect()` runs its own first reflection.
+   */
+  #connected = false;
+  /** Validated threshold; a non-finite declaration reads as the default. */
+  #offset = DEFAULT_OFFSET;
+  /** Validated `root` selector; an unparsable declaration reads as absent. */
+  #rootSelector = "";
+  /** Validated `focusSelector`; an unparsable declaration reads as absent. */
+  #focusSelector = "";
   /** Focus targets this instance lent a `tabindex` to. */
   #tabindex = new TabindexLoan();
+  /**
+   * The hide held back while the control itself owns focus.
+   *
+   * Completing the deferral re-runs the ordinary evaluation rather than applying
+   * the stale decision: by the time focus leaves, the scroll position may have
+   * moved back past the threshold.
+   */
+  #pendingHide = new BlurDeferral(() => {
+    if (this.#connected) this.#evaluate();
+  });
   #onScroll = () => {
     if (this.#rafId !== null) return;
     this.#rafId = requestAnimationFrame(() => {
@@ -18507,61 +19419,134 @@ var ScrollVisibilityController = class extends Controller {
     this.#scrollSource = this.#resolveScrollSource();
     this.#lastScrollY = this.#scrollY();
     this.#scrollSource.addEventListener("scroll", this.#onScroll, { passive: true });
-    this.#evaluate();
+    this.#evaluate(false);
+    this.#connected = true;
   }
   disconnect() {
+    this.#connected = false;
     this.#scrollSource.removeEventListener("scroll", this.#onScroll);
     if (this.#rafId !== null) {
       cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
+    this.#pendingHide.releaseAll();
     this.#tabindex.returnAll();
     this.#visible = null;
   }
+  /** Writes the current visibility onto a control that arrives after connect. */
+  elementTargetConnected(element) {
+    if (this.#visible !== null) element.hidden = !this.#visible;
+  }
+  /** Drops a held-back hide together with the control it was waiting on. */
+  elementTargetDisconnected() {
+    this.#pendingHide.releaseAll();
+  }
+  /**
+   * Validates `offset` once, then re-renders.
+   *
+   * Re-renders when application code (or a Turbo morph) changes `offset` at
+   * runtime. A declaration that is not a finite number reads as the default, so
+   * the comparison path never sees `NaN` — which would answer `false` to every
+   * comparison and strand the element (in `direction` mode, even the guarantee
+   * that the very top always reveals).
+   */
+  offsetValueChanged() {
+    this.#offset = Number.isFinite(this.offsetValue) ? this.offsetValue : DEFAULT_OFFSET;
+    if (this.#connected) this.#evaluate();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `mode` at runtime. */
+  modeValueChanged() {
+    if (this.#connected) this.#evaluate();
+  }
+  /** Validates `root` once so connect never parses a selector that throws. */
+  rootValueChanged() {
+    this.#rootSelector = this.#validSelector(this.rootValue);
+  }
+  /** Validates `focusSelector` once so `toTop` never parses a selector that throws. */
+  focusSelectorValueChanged() {
+    this.#focusSelector = this.#validSelector(this.focusSelectorValue);
+  }
   /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
   toTop() {
     const behavior = prefersReducedMotion() ? "instant" : "smooth";
     this.#scrollSource.scrollTo({ top: 0, behavior });
-    if (this.focusSelectorValue) {
-      const target = document.querySelector(this.focusSelectorValue);
+    if (this.#focusSelector) {
+      const target = document.querySelector(this.#focusSelector);
       if (target) {
         this.#tabindex.lend(target);
-        target.focus();
+        target.focus({ preventScroll: true });
       }
     }
   }
-  /** Decides the next visibility from the current scroll state and applies it. */
-  #evaluate() {
+  /**
+   * Decides the next visibility from the current scroll state and applies it.
+   *
+   * @param notify - whether a transition announces itself. The reflection
+   *   `connect()` performs is the current state, not a change.
+   *
+   * @stimeoRenderRoot
+   */
+  #evaluate(notify = true) {
     const y = this.#scrollY();
     let nextVisible;
     if (this.modeValue === "direction") {
-      if (y <= this.offsetValue) {
+      if (y <= this.#offset) {
         nextVisible = true;
+      } else if (y === this.#lastScrollY) {
+        return;
       } else {
         nextVisible = y < this.#lastScrollY;
       }
     } else {
-      nextVisible = y > this.offsetValue;
+      nextVisible = y > this.#offset;
     }
     this.#lastScrollY = y;
-    this.#setVisible(nextVisible);
+    this.#setVisible(nextVisible, notify);
   }
   /** Applies visibility to the target, syncing `hidden`, `data-state`, `change`. */
-  #setVisible(next) {
+  #setVisible(next, notify) {
     if (next === this.#visible) return;
+    const focused = !next && this.hasElementTarget ? this.#focusedWithin() : null;
+    if (focused) {
+      this.#pendingHide.deferOnly(focused);
+      return;
+    }
     this.#visible = next;
     if (this.hasElementTarget) this.elementTarget.hidden = !next;
     this.element.setAttribute("data-state", next ? "visible" : "hidden");
-    this.dispatch("change", { detail: { visible: next } });
+    if (notify) this.dispatch("change", { detail: { visible: next } });
   }
   /** Resolves the scroll source from `root` (falling back to the window). */
   #resolveScrollSource() {
-    if (this.rootValue) {
-      const root = document.querySelector(this.rootValue);
+    if (this.#rootSelector) {
+      const root = document.querySelector(this.#rootSelector);
       if (root) return root;
     }
     return window;
   }
+  /**
+   * The focus owner inside the target, or `null` when focus is elsewhere.
+   *
+   * `blur` does not bubble, so the deferral has to ride the focused element
+   * itself: waiting on a container that never receives the event would hold the
+   * hide forever.
+   */
+  #focusedWithin() {
+    const focused = document.activeElement;
+    if (focused instanceof HTMLElement && this.elementTarget.contains(focused)) return focused;
+    return null;
+  }
+  /** Returns `declared` when it parses as a selector, and `""` when it does not. */
+  #validSelector(declared) {
+    if (declared.length > 0) {
+      try {
+        this.element.matches(declared);
+        return declared;
+      } catch {
+      }
+    }
+    return "";
+  }
   #scrollY() {
     if (this.#scrollSource === window) {
       return window.scrollY ?? window.pageYOffset ?? 0;
@@ -18973,16 +19958,16 @@ var ScrollspyController = class extends Controller {
     return value.substring(1) || null;
   }
 };
-var DEFAULT_MIN2 = 0;
-var DEFAULT_MAX2 = 100;
+var DEFAULT_MIN3 = 0;
+var DEFAULT_MAX3 = 100;
 var SeparatorController = class extends Controller {
   static values = {
     orientation: { type: String, default: "horizontal" },
     focusable: { type: Boolean, default: false },
-    min: { type: Number, default: DEFAULT_MIN2 },
-    max: { type: Number, default: DEFAULT_MAX2 },
+    min: { type: Number, default: DEFAULT_MIN3 },
+    max: { type: Number, default: DEFAULT_MAX3 },
     step: { type: Number, default: 1 },
-    value: { type: Number, default: DEFAULT_MIN2 }
+    value: { type: Number, default: DEFAULT_MIN3 }
   };
   static actions = ["onKeydown"];
   static events = ["change"];
@@ -19103,8 +20088,8 @@ var SeparatorController = class extends Controller {
   }
   /** Finite, ordered range shared by rendering and keyboard stepping. */
   get #effectiveRange() {
-    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN2;
-    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX2;
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN3;
+    const candidateMax = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX3;
     return {
       min,
       max: Math.max(min, candidateMax),
@@ -20129,11 +21114,6 @@ var StepIndicatorController = class extends Controller {
   };
   static actions = ["setCurrent"];
   static events = ["change"];
-  /**
-   * Whether the target callbacks may render. Stimulus reports the authored steps
-   * as connected before `connect()` and the remaining ones as disconnected after
-   * `disconnect()`, so this keeps a connect at one render pass, not one per step.
-   */
   /**
    * Collapses a batch of step callbacks — and a morph that swaps `current` with
    * them — into one repaint. Replacing a list of N steps delivers N callbacks, and
@@ -21423,35 +22403,48 @@ var TextareaAutosizeController = class extends Controller {
 };
 var MODES = ["light", "dark", "system"];
 var isMode = (value) => typeof value === "string" && MODES.includes(value);
+var DEFAULT_MODE = "system";
+var DEFAULT_TARGET = "html";
 var ThemeController = class extends Controller {
   static targets = ["option"];
   static values = {
-    mode: { type: String, default: "system" },
+    mode: { type: String, default: DEFAULT_MODE },
     storageKey: { type: String, default: "stimeo-theme" },
-    target: { type: String, default: "html" }
+    target: { type: String, default: DEFAULT_TARGET }
   };
   static actions = ["set", "toggle"];
   static events = ["change"];
   /** The OS dark-mode query, watched so `system` tracks live changes. */
   #media = null;
+  /** Gate for the target callbacks, which Stimulus runs before `connect()`. */
+  #connected = false;
+  /** The `target` declaration after validation; the default when unparsable. */
+  #targetSelector = DEFAULT_TARGET;
+  /** Owns the single Tab stop across the option set (APG radiogroup). */
+  #roving = new RovingTabindex(() => this.optionTargets);
+  /**
+   * The pair last reported, so a move can be told from a repeat. Neither side is
+   * readable after the fact — assigning the Value updates the mode before any
+   * comparison, and the OS query has already flipped by the time it notifies —
+   * so what was reported has to be kept rather than recomputed.
+   */
+  #published = {
+    mode: DEFAULT_MODE,
+    resolved: "light"
+  };
   /** Re-resolves while in `system` mode when the OS preference flips. */
   #onMediaChange = () => {
-    if (this.modeValue === "system") {
-      this.#applyTheme();
-      this.#syncControls();
-      this.#dispatchChange();
-    }
+    if (this.#mode !== "system") return;
+    this.#commit();
   };
   /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
     const options = this.optionTargets;
-    if (options.length === 0) return;
     const target = event.target;
     const current = options.indexOf(target);
     if (current === -1) return;
-    const last = options.length - 1;
     let next = current;
     const step = logicalArrowStep(event.key, this.element);
     switch (event.key) {
@@ -21459,13 +22452,12 @@ var ThemeController = class extends Controller {
       case "ArrowRight":
       case "ArrowUp":
       case "ArrowLeft":
-        next = step === 1 ? current === last ? 0 : current + 1 : current === 0 ? last : current - 1;
+        next = rovingMove(current, options.length, step, "wrap");
         break;
       case "Home":
-        next = 0;
-        break;
       case "End":
-        next = last;
+        if (hasModifierChord(event)) return;
+        next = event.key === "Home" ? 0 : options.length - 1;
         break;
       default:
         return;
@@ -21474,25 +22466,58 @@ var ThemeController = class extends Controller {
     const option = options[next];
     if (!option) return;
     option.focus();
-    this.#setMode(this.#optionMode(option));
+    const mode = this.#optionMode(option);
+    if (mode) this.#setMode(mode);
   };
   connect() {
     const stored = this.#readStored();
     if (stored) this.modeValue = stored;
     this.#media = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
     this.#media?.addEventListener("change", this.#onMediaChange);
-    if (this.hasOptionTarget) this.element.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("keydown", this.#onKeydown);
+    this.#connected = true;
     this.#applyTheme();
     this.#syncControls();
+    this.#published = this.#current;
   }
   disconnect() {
+    this.#connected = false;
     this.#media?.removeEventListener("change", this.#onMediaChange);
     this.element.removeEventListener("keydown", this.#onKeydown);
   }
-  /** Selects an explicit mode from the `mode` action param (radiogroup option). */
+  /** Validates the `target` declaration once, so the render path never parses. */
+  targetValueChanged() {
+    const selector = this.targetValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#targetSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#targetSelector = DEFAULT_TARGET;
+  }
+  /** Re-derives the single Tab stop and ARIA for an option set that changed. */
+  optionTargetConnected() {
+    if (this.#connected) this.#syncControls();
+  }
+  /** Re-derives them again when an option leaves, so a Tab stop always remains. */
+  optionTargetDisconnected() {
+    if (this.#connected) this.#syncControls();
+  }
+  /**
+   * Selects the mode the activated option declares.
+   *
+   * Read through {@link ThemeController.#optionMode}, the same lane that decides
+   * which option is checked, so the two can never disagree about what an option
+   * declares.
+   */
   set(event) {
-    const mode = event.params?.mode;
-    if (isMode(mode)) this.#setMode(mode);
+    const option = event.currentTarget;
+    if (!(option instanceof HTMLElement)) return;
+    const mode = this.#optionMode(option);
+    if (mode) this.#setMode(mode);
   }
   /** Toggles light↔dark for the 2-value single-button contract. */
   toggle() {
@@ -21502,9 +22527,26 @@ var ThemeController = class extends Controller {
   #setMode(mode) {
     this.modeValue = mode;
     this.#writeStored(mode);
+    this.#commit();
+  }
+  /**
+   * Applies the current mode and reports it, but reports only a real move: the
+   * event means "the selection or the effective theme moved", so re-choosing the
+   * option already chosen is not one.
+   */
+  #commit() {
     this.#applyTheme();
     this.#syncControls();
-    this.#dispatchChange();
+    const next = this.#current;
+    const last = this.#published;
+    this.#published = next;
+    if (last.mode !== next.mode || last.resolved !== next.resolved) {
+      this.dispatch("change", { detail: { ...next } });
+    }
+  }
+  /** The pair the `change` detail carries, read from current state. */
+  get #current() {
+    return { mode: this.#mode, resolved: this.#resolved() };
   }
   /** Writes `data-theme` + `color-scheme` (the resolved theme) onto the target. */
   #applyTheme() {
@@ -21518,39 +22560,45 @@ var ThemeController = class extends Controller {
   #syncControls() {
     const options = this.optionTargets;
     if (options.length > 0) {
-      let hasTabbable = false;
-      for (const option of options) {
-        const selected = this.#optionMode(option) === this.modeValue;
-        option.setAttribute("aria-checked", String(selected));
-        option.tabIndex = selected ? 0 : -1;
-        hasTabbable ||= selected;
-      }
-      const first = options[0];
-      if (!hasTabbable && first) first.tabIndex = 0;
+      const mode = this.#mode;
+      let selected = -1;
+      options.forEach((option, index) => {
+        const isSelected = this.#optionMode(option) === mode;
+        option.setAttribute("aria-checked", String(isSelected));
+        if (isSelected && selected === -1) selected = index;
+      });
+      this.#roving.setActive(selected === -1 ? 0 : selected, { items: options });
       return;
     }
-    this.element.setAttribute("aria-pressed", String(this.#resolved() === "dark"));
+    if (this.#isToggleButton) {
+      this.element.setAttribute("aria-pressed", String(this.#resolved() === "dark"));
+    }
   }
-  /** Emits `change` with the selected mode and the resolved theme. */
-  #dispatchChange() {
-    this.dispatch("change", { detail: { mode: this.modeValue, resolved: this.#resolved() } });
+  /** Whether the controller element is the button of the 2-value contract. */
+  get #isToggleButton() {
+    return this.element.tagName === "BUTTON" || this.element.getAttribute("role") === "button";
+  }
+  /** The selected mode after validation; an unreadable declaration is the default. */
+  get #mode() {
+    return isMode(this.modeValue) ? this.modeValue : DEFAULT_MODE;
   }
   /** The effective theme: the OS preference when `system`, else the mode itself. */
   #resolved() {
-    if (this.modeValue === "dark") return "dark";
-    if (this.modeValue === "light") return "light";
+    const mode = this.#mode;
+    if (mode === "dark") return "dark";
+    if (mode === "light") return "light";
     return this.#media?.matches ? "dark" : "light";
   }
-  /** Reads an option's mode from its action param attribute. */
+  /** An option's mode from its `data-value`, or `null` when that is not one of the three. */
   #optionMode(option) {
-    const mode = option.getAttribute("data-stimeo--theme-mode-param");
-    return isMode(mode) ? mode : "system";
+    const mode = option.getAttribute("data-value");
+    return isMode(mode) ? mode : null;
   }
   /** Resolves the state-hook target (`<html>` by default). */
   #targetElement() {
-    if (this.targetValue === "html" || this.targetValue === ":root")
-      return document.documentElement;
-    return document.querySelector(this.targetValue);
+    const selector = this.#targetSelector;
+    if (selector === DEFAULT_TARGET || selector === ":root") return document.documentElement;
+    return document.querySelector(selector);
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
@@ -22007,8 +23055,8 @@ var ToastController = class extends Controller {
   }
   /**
    * Stimulus lifecycle callback triggered automatically when a new item target
-   * enters the DOM. Perfectly handles dynamic client-side injections and server-side
-   * Turbo Stream appends alike.
+   * enters the DOM, from a client-side injection or a Turbo Stream append alike. An
+   * item already leaving, or parented outside `list`, is skipped.
    */
   itemTargetConnected(element) {
     this.enforceMaxLimit();
@@ -22974,12 +24022,21 @@ var TransitionController = class extends Controller {
   static events = ["entered", "left"];
   /** Owns the cancellable completion wait (terminal events + bounded fallback). */
   #transition = new TransitionCompletion();
+  /** Rewinds a half-applied stage before Turbo copies the page into its snapshot. */
+  #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
   #rafId = null;
+  /**
+   * Stage classes this controller put on the element. Removing by declaration
+   * instead would take a token the consumer also authored, and would strand the
+   * token that was applied when a Value changes mid-transition.
+   */
+  #staged = /* @__PURE__ */ new Set();
   connect() {
-    this.#strip();
-    this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
+    this.#beforeCache.activate();
+    this.#settleState();
   }
   disconnect() {
+    this.#beforeCache.deactivate();
     this.#cancel();
   }
   /** Shows the element with the enter transition. */
@@ -23009,6 +24066,7 @@ var TransitionController = class extends Controller {
     const from = isEnter ? this.enterFromValue : this.leaveFromValue;
     const to = isEnter ? this.enterToValue : this.leaveToValue;
     this.#add(base, from);
+    void this.element.offsetWidth;
     this.#rafId = this.#raf(() => {
       this.#rafId = null;
       this.#remove(from);
@@ -23030,6 +24088,21 @@ var TransitionController = class extends Controller {
       this.dispatch("left", { detail: {} });
     }
   }
+  /** Writes the state hook the element's visibility implies. */
+  #settleState() {
+    this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
+  }
+  /**
+   * Returns the element to a settled state before Turbo copies the page.
+   *
+   * The snapshot is taken while the controller is still connected, so stripping on
+   * the next `connect()` would only repair the page after it has been painted from
+   * the cache. The pass is silent: `connect()` derives the state again on restore.
+   */
+  #rewindForCache() {
+    this.#cancel();
+    this.#settleState();
+  }
   /** Cancels any in-flight transition (interruption / teardown). */
   #cancel() {
     if (this.#rafId !== null) {
@@ -23039,24 +24112,34 @@ var TransitionController = class extends Controller {
     this.#transition.cancel();
     this.#strip();
   }
+  /**
+   * Applies the stage tokens this controller does not already find on the
+   * element, and claims exactly those.
+   *
+   * A token already on the element is left unclaimed: it is either the consumer's
+   * standing class or one an earlier stage of this transition already claimed, and
+   * in neither case may this call take ownership of it. That is what keeps a
+   * standing class the consumer also named as a stage Value; the cost is that such
+   * a token cannot be staged, so the property it drives resolves from their CSS.
+   */
   #add(...lists) {
-    const tokens = lists.flatMap(tokensOf);
-    if (tokens.length > 0) this.element.classList.add(...tokens);
+    for (const token of lists.flatMap(tokensOf)) {
+      if (this.element.classList.contains(token)) continue;
+      this.element.classList.add(token);
+      this.#staged.add(token);
+    }
   }
+  /** Drops the named tokens that are this controller's to drop. */
   #remove(...lists) {
-    const tokens = lists.flatMap(tokensOf);
-    if (tokens.length > 0) this.element.classList.remove(...tokens);
+    for (const token of lists.flatMap(tokensOf)) {
+      if (!this.#staged.delete(token)) continue;
+      this.element.classList.remove(token);
+    }
   }
-  /** Removes every stage class so no half-applied state lingers. */
+  /** Removes every stage class this controller applied, so none lingers. */
   #strip() {
-    this.#remove(
-      this.enterValue,
-      this.enterFromValue,
-      this.enterToValue,
-      this.leaveValue,
-      this.leaveFromValue,
-      this.leaveToValue
-    );
+    this.element.classList.remove(...this.#staged);
+    this.#staged.clear();
   }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {