stimeo-ui 0.1.0.pre.beta.3 → 0.2.1

data/dist/index.js

@@ -71,6 +71,96 @@ var AccordionController = class extends Controller {
   }
 };
 
+// src/utils/escape_layer.ts
+function claimsWhileFocusWithin(element) {
+  return () => {
+    const active = element.ownerDocument.activeElement;
+    return active === null || active === element.ownerDocument.body || element.contains(active);
+  };
+}
+var EscapeLayer = class _EscapeLayer {
+  static #registries = /* @__PURE__ */ new WeakMap();
+  #ownerDocument = null;
+  /** Dismissal callback while active; `null` when inactive. */
+  #onDismiss = null;
+  /** Live predicate deciding whether the layer claims a press; `null` = always. */
+  #claims = null;
+  /**
+   * Activates this layer at the top of its document's Escape stack, installing
+   * the document's shared resolver listener if this is its first layer.
+   * Re-activating an already-active layer moves it to the top.
+   */
+  activate(ownerDocument = document, options) {
+    this.deactivate();
+    let registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) {
+      registry = _EscapeLayer.#createRegistry();
+      _EscapeLayer.#registries.set(ownerDocument, registry);
+      ownerDocument.addEventListener("keydown", registry.onKeydown);
+    }
+    registry.stack.push(this);
+    this.#ownerDocument = ownerDocument;
+    this.#onDismiss = options.onDismiss;
+    this.#claims = options.claims ?? null;
+  }
+  /**
+   * Removes this layer from its document's Escape stack, uninstalling the
+   * shared listener when the stack empties. Safe to call when inactive.
+   */
+  deactivate() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (registry) {
+      const index = registry.stack.lastIndexOf(this);
+      if (index >= 0) registry.stack.splice(index, 1);
+      if (registry.stack.length === 0) {
+        ownerDocument.removeEventListener("keydown", registry.onKeydown);
+        _EscapeLayer.#registries.delete(ownerDocument);
+      }
+    }
+    this.#ownerDocument = null;
+    this.#onDismiss = null;
+    this.#claims = null;
+  }
+  /**
+   * Whether this active layer would own a press right now: it is the topmost
+   * layer whose {@link EscapeLayerOptions.claims} passes. Exposed for tests
+   * and diagnostics — production dismissal goes through the shared listener.
+   */
+  get ownsEscape() {
+    const ownerDocument = this.#ownerDocument;
+    if (!ownerDocument) return false;
+    const registry = _EscapeLayer.#registries.get(ownerDocument);
+    if (!registry) return false;
+    return _EscapeLayer.#resolveOwner(registry.stack) === this;
+  }
+  /** Builds a document's registry with its shared resolver listener. */
+  static #createRegistry() {
+    const registry = {
+      stack: [],
+      onKeydown: (event) => {
+        if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+        const owner = _EscapeLayer.#resolveOwner(registry.stack);
+        if (!owner) return;
+        event.preventDefault();
+        owner.#onDismiss?.();
+      }
+    };
+    return registry;
+  }
+  /** The topmost stack layer whose claims predicate passes, or `null`. */
+  static #resolveOwner(stack) {
+    for (let index = stack.length - 1; index >= 0; index--) {
+      const layer = stack[index];
+      if (!layer) continue;
+      if (layer.#claims && !layer.#claims()) continue;
+      return layer;
+    }
+    return null;
+  }
+};
+
 // src/utils/focus_trap.ts
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
 var FocusTrap = class {
@@ -84,6 +174,8 @@ var FocusTrap = class {
   #inertedSiblings = [];
   /** Whether the modal side effects are currently applied. */
   #activeState = false;
+  /** Registers the trap on the shared Escape stack while active (see {@link EscapeLayer}). */
+  #escapeLayer = new EscapeLayer();
   /** Returns the trapped element; called on every operation for the live target. */
   #getContainer;
   /** Closing/focus hooks; see {@link FocusTrapOptions}. */
@@ -119,6 +211,8 @@ var FocusTrap = class {
     if (this.#flag(this.#options.isolate, true)) this.#isolateBackground();
     document.addEventListener("keydown", this.#onKeydown);
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
+    const onEscape = this.#options.onEscape;
+    if (onEscape) this.#escapeLayer.activate(document, { onDismiss: () => onEscape() });
     if (this.#flag(this.#options.autoFocus, true)) this.#focusInitial();
   }
   /**
@@ -131,6 +225,7 @@ var FocusTrap = class {
   deactivate({ restoreFocus = true } = {}) {
     if (!this.#activeState) return;
     this.#activeState = false;
+    this.#escapeLayer.deactivate();
     document.removeEventListener("keydown", this.#onKeydown);
     document.removeEventListener("turbo:before-cache", this.#onBeforeCache);
     if (this.#scrollLocked) {
@@ -159,15 +254,12 @@ var FocusTrap = class {
   #onBeforeCache = () => {
     this.deactivate({ restoreFocus: false });
   };
-  /** Handles `Escape` (delegated) and `Tab` (focus trap) while active. */
+  /**
+   * Handles `Tab` (focus trap) while active. `Escape` dismissal is owned by the
+   * shared {@link EscapeLayer} resolver, so Tab trapping stays independent of
+   * which layer currently owns Escape.
+   */
   #onKeydown = (event) => {
-    if (event.key === "Escape") {
-      if (this.#options.onEscape) {
-        event.preventDefault();
-        this.#options.onEscape();
-      }
-      return;
-    }
     if (event.key === "Tab") this.#trapTab(event);
   };
   /** Keeps `Tab` focus cycling within the container's focusable elements. */
@@ -515,6 +607,55 @@ var AspectRatioController = class extends Controller {
     return value !== void 0 && Number.isFinite(value) && value > 0;
   }
 };
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  constructor(options = {}) {
+    this.#onStart = options.onStart;
+    this.#onEnd = options.onEnd;
+  }
+  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
+  observe(target) {
+    if (this.#observedTargets.has(target)) return;
+    target.addEventListener("compositionstart", this.#handleStart);
+    target.addEventListener("compositionend", this.#handleEnd);
+    this.#observedTargets.add(target);
+  }
+  /** Stops tracking one target and clears any active composition it owned. */
+  unobserve(target) {
+    if (!this.#observedTargets.delete(target)) return;
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    this.#activeTargets.delete(target);
+  }
+  /** Releases every listener and clears state so reconnect starts cleanly. */
+  disconnect() {
+    for (const target of this.#observedTargets) {
+      target.removeEventListener("compositionstart", this.#handleStart);
+      target.removeEventListener("compositionend", this.#handleEnd);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/controllers/auto_submit_controller.ts
 var AutoSubmitController = class extends Controller {
   static targets = ["form"];
   static values = {
@@ -538,34 +679,22 @@ var AutoSubmitController = class extends Controller {
       window.dispatchEvent(new CustomEvent("stimeo--announcer:announce", { detail: { message } }));
     }
   };
-  /** True while an IME composition is in progress on one of the form's fields. */
-  #composing = false;
-  /** Marks composition active so `input` events mid-conversion don't submit. */
-  #onCompositionStart = () => {
-    this.#composing = true;
-  };
-  /**
-   * Composition finished (the IME conversion is confirmed): clear the flag and
-   * schedule a submit as if `input` fired, so the settled text triggers a submit
-   * even on browsers whose post-composition `input` still reads `isComposing`.
-   */
-  #onCompositionEnd = (event) => {
-    this.#composing = false;
-    if (this.#triggers("input")) this.#schedule(event.target ?? null);
-  };
+  /** Owns delegated IME lifecycle state and submits confirmed input text. */
+  #composition = new CompositionTracker({
+    onEnd: (event) => {
+      if (this.#triggers("input")) this.#schedule(event.target ?? null);
+    }
+  });
   connect() {
     this.#form.addEventListener("turbo:submit-end", this.#onSubmitEnd);
-    this.#form.addEventListener("compositionstart", this.#onCompositionStart);
-    this.#form.addEventListener("compositionend", this.#onCompositionEnd);
+    this.#composition.observe(this.#form);
   }
   disconnect() {
     this.#timers.clearAll();
     this.#pendingId = 0;
-    this.#composing = false;
+    this.#composition.disconnect();
     this.#form.removeAttribute("data-auto-submit-pending");
     this.#form.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
-    this.#form.removeEventListener("compositionstart", this.#onCompositionStart);
-    this.#form.removeEventListener("compositionend", this.#onCompositionEnd);
   }
   /**
    * Schedules a debounced submit. Wired to `input`/`change`; the `on` value is an
@@ -574,7 +703,7 @@ var AutoSubmitController = class extends Controller {
    */
   submit(event) {
     if (!this.#triggers(event.type)) return;
-    if (event.type === "input" && (this.#composing || event.isComposing)) return;
+    if (event.type === "input" && this.#composition.isComposing(event)) return;
     this.#schedule(event.target ?? null);
   }
   /** Schedules (and coalesces) the debounced submit for the given trigger. */
@@ -1443,35 +1572,25 @@ var CharacterCounterController = class _CharacterCounterController extends Contr
   static #announceDelay = 200;
   #timeouts = new SafeTimeout();
   #announceId = null;
-  /** True while an IME composition is active; intermediate input is skipped. */
-  #composing = false;
+  /** Owns IME lifecycle state and applies the confirmed count once. */
+  #composition = new CompositionTracker({ onEnd: () => this.#update() });
   #onInput = (event) => {
-    if (this.#composing || event.isComposing) return;
-    this.#update();
-  };
-  #onCompositionStart = () => {
-    this.#composing = true;
-  };
-  #onCompositionEnd = () => {
-    this.#composing = false;
+    if (this.#composition.isComposing(event)) return;
     this.#update();
   };
   connect() {
     const field = this.#field;
     if (!field) return;
     field.addEventListener("input", this.#onInput);
-    field.addEventListener("compositionstart", this.#onCompositionStart);
-    field.addEventListener("compositionend", this.#onCompositionEnd);
+    this.#composition.observe(field);
     this.#update({ announce: false });
   }
   disconnect() {
     const field = this.#field;
     field?.removeEventListener("input", this.#onInput);
-    field?.removeEventListener("compositionstart", this.#onCompositionStart);
-    field?.removeEventListener("compositionend", this.#onCompositionEnd);
+    this.#composition.disconnect();
     this.#timeouts.clearAll();
     this.#announceId = null;
-    this.#composing = false;
   }
   /**
    * Recomputes length-derived state. Non-text state (data hooks, `aria-invalid`)
@@ -1695,28 +1814,176 @@ var ClipboardController = class extends Controller {
     }
   }
 };
+
+// src/utils/transition_completion.ts
+function timeMs(value) {
+  const trimmed = value.trim();
+  const amount = Number.parseFloat(trimmed);
+  if (!Number.isFinite(amount)) return 0;
+  if (trimmed.endsWith("ms")) return amount;
+  if (trimmed.endsWith("s")) return amount * 1e3;
+  return 0;
+}
+function cssList(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function transitionTimings(style) {
+  const properties = cssList(style.transitionProperty);
+  const durations = cssList(style.transitionDuration).map(timeMs);
+  const delays = cssList(style.transitionDelay).map(timeMs);
+  const effectiveProperties = properties.length > 0 ? properties : Array.from({ length: Math.max(durations.length, delays.length, 1) }, () => "all");
+  const effectiveDurations = durations.length > 0 ? durations : [0];
+  const effectiveDelays = delays.length > 0 ? delays : [0];
+  return effectiveProperties.filter((property) => property !== "none").map((property, index) => ({
+    property,
+    totalMs: Math.max(
+      0,
+      (effectiveDurations[index % effectiveDurations.length] ?? 0) + (effectiveDelays[index % effectiveDelays.length] ?? 0)
+    )
+  }));
+}
+function maxTotalMs(timings) {
+  return timings.reduce((max, { totalMs }) => Math.max(max, totalMs), 0);
+}
+function maxTransitionTotalMs(style) {
+  return maxTotalMs(transitionTimings(style));
+}
+var TransitionCompletion = class {
+  #timers = new SafeTimeout();
+  #element = null;
+  #complete = null;
+  #pendingProperties = null;
+  #deadline = 0;
+  /**
+   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
+   * transition (including when `getComputedStyle` is unavailable).
+   *
+   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
+   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
+   */
+  wait(element, complete, options = {}) {
+    this.cancel();
+    const requested = options.timeoutMs ?? 0;
+    const override = Number.isFinite(requested) && requested > 0 ? requested : 0;
+    const timings = typeof window.getComputedStyle === "function" ? transitionTimings(window.getComputedStyle(element)) : [];
+    const maximum = maxTotalMs(timings);
+    if (maximum <= 0 && override <= 0) {
+      complete();
+      return;
+    }
+    this.#element = element;
+    this.#complete = complete;
+    this.#deadline = Date.now() + maximum;
+    const activeProperties = this.#activeTransitionProperties(element);
+    this.#pendingProperties = activeProperties.size > 0 ? activeProperties : this.#explicitPendingProperties(timings);
+    element.addEventListener("transitionend", this.#onTerminal);
+    element.addEventListener("transitioncancel", this.#onTerminal);
+    this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
+  }
+  /** Cancels the pending wait without invoking its completion callback. */
+  cancel() {
+    this.#complete = null;
+    this.#teardown();
+  }
+  /**
+   * Handles terminal events from the observed element only.
+   *
+   * For explicit property lists, every declared positive-time property must
+   * settle. For `all`, no reliable property set exists, so an event can finish
+   * only after the computed maximum time; the safety timeout owns the usual path.
+   */
+  #onTerminal = (event) => {
+    if (event.target !== this.#element) return;
+    const transitionEvent = event;
+    if (transitionEvent.pseudoElement) return;
+    if (this.#pendingProperties) {
+      const propertyName = transitionEvent.propertyName;
+      const active = this.#activeTransitionProperties(this.#element);
+      if (active.has(propertyName)) return;
+      if (!this.#pendingProperties.delete(propertyName)) return;
+      if (this.#pendingProperties.size > 0) return;
+      if (active.size > 0) {
+        this.#pendingProperties = active;
+        return;
+      }
+      this.#finish();
+      return;
+    }
+    if (Date.now() >= this.#deadline) this.#finish();
+  };
+  /**
+   * Returns active CSS transition properties expanded to the names reported by
+   * terminal events. CSS animations and pseudo-element effects are excluded.
+   */
+  #activeTransitionProperties(element) {
+    if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
+    try {
+      const properties = element.getAnimations().flatMap((animation) => {
+        if (animation.playState === "idle" || animation.playState === "finished") return [];
+        const effect = animation.effect;
+        if (effect?.pseudoElement) return [];
+        const target = effect?.target;
+        if (target && target !== element) return [];
+        const property = animation.transitionProperty;
+        return typeof property === "string" && property.length > 0 ? [property] : [];
+      });
+      return new Set(properties);
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  }
+  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
+  #explicitPendingProperties(timings) {
+    if (timings.some(({ property }) => property === "all")) return null;
+    const pending = new Set(
+      timings.filter(({ totalMs }) => totalMs > 0).map(({ property }) => property)
+    );
+    return pending.size > 0 ? pending : null;
+  }
+  /** Completes exactly once, releasing listeners and the fallback before the callback. */
+  #finish() {
+    const complete = this.#complete;
+    if (!complete) return;
+    this.#complete = null;
+    this.#teardown();
+    complete();
+  }
+  /** Releases the exact element listeners and timer owned by the current wait. */
+  #teardown() {
+    this.#timers.clearAll();
+    this.#element?.removeEventListener("transitionend", this.#onTerminal);
+    this.#element?.removeEventListener("transitioncancel", this.#onTerminal);
+    this.#element = null;
+    this.#pendingProperties = null;
+    this.#deadline = 0;
+  }
+};
+
+// src/controllers/collapsible_controller.ts
 var CollapsibleController = class extends Controller {
   static targets = ["trigger", "content"];
   static values = {
     open: { type: Boolean, default: false }
   };
   static actions = ["toggle"];
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from the callbacks that precede `connect()`. */
+  #connected = false;
   /**
-   * The pending `transitionend` handler that re-applies `hidden` after a close.
-   * Tracked so {@link disconnect} can detach it and a reopen can supersede it.
-   */
-  #pendingTransitionEnd = null;
-  /**
-   * Establishes the initial open/closed state without animating.
+   * Establishes the initial open/closed state without waiting for a close transition.
    *
    * The DOM is the source of truth on reconnect (Turbo cache restore / morph): an
    * **explicit** state attribute — `aria-expanded="true"`/`"false"` (or, with no
    * trigger, `data-state="open"`/`"closed"`) — is honored verbatim so a region the
    * user opened *or* closed survives a back-navigation, even when the declarative
-   * `open` Value disagrees. The Value only seeds a genuinely fresh render where no
-   * state attribute is present yet. Mirrors `sidebar`'s `#restoreCollapsed`.
+   * `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`.
    */
   connect() {
+    this.#connected = true;
     this.#apply(this.#initialOpen(), false);
   }
   /** Resolves the connect-time state: explicit DOM state wins, else the `open` Value. */
@@ -1733,7 +2000,27 @@ var CollapsibleController = class extends Controller {
     return this.openValue;
   }
   disconnect() {
-    this.#detachTransitionEnd();
+    this.#connected = false;
+    this.#transition.cancel();
+  }
+  /** Reconciles a replacement trigger target with the content's live state. */
+  triggerTargetConnected(trigger) {
+    if (!this.#connected || !this.hasContentTarget) return;
+    trigger.setAttribute(
+      "aria-expanded",
+      this.contentTarget.getAttribute("data-state") === "open" ? "true" : "false"
+    );
+  }
+  /** Reconciles a replacement content target with the disclosure's live state. */
+  contentTargetConnected(content) {
+    if (!this.#connected) return;
+    this.#transition.cancel();
+    const open = this.hasTriggerTarget ? this.triggerTarget.getAttribute("aria-expanded") === "true" : content.getAttribute("data-state") === "open";
+    this.#applyContent(content, open, false);
+  }
+  /** Cancels a wait tied to a content target that was removed or replaced. */
+  contentTargetDisconnected() {
+    this.#transition.cancel();
   }
   /** Toggles the region open/closed. Bound via `data-action` (click). */
   toggle() {
@@ -1756,16 +2043,21 @@ var CollapsibleController = class extends Controller {
    * spec requires.
    *
    * @param open - Target state.
-   * @param animate - When `false` (initial `connect`) the close path applies
-   *   `hidden` immediately instead of waiting for a transition.
+   * @param waitForCloseTransition - When `false` (initial `connect`) the close
+   *   path applies `hidden` immediately. This flag does not suppress consumer CSS
+   *   on the open path.
    */
-  #apply(open, animate) {
+  #apply(open, waitForCloseTransition) {
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", open ? "true" : "false");
     }
     if (!this.hasContentTarget) return;
     const content = this.contentTarget;
-    this.#detachTransitionEnd();
+    this.#transition.cancel();
+    this.#applyContent(content, open, waitForCloseTransition);
+  }
+  /** Reflects one content target without relying on a later target lookup. */
+  #applyContent(content, open, waitForCloseTransition) {
     if (open) {
       content.hidden = false;
       content.style.setProperty("--stimeo-collapsible-content-height", `${content.scrollHeight}px`);
@@ -1773,44 +2065,23 @@ var CollapsibleController = class extends Controller {
       return;
     }
     content.setAttribute("data-state", "closed");
-    if (animate && this.#transitionMs(content) > 0) {
+    if (waitForCloseTransition) {
       this.#applyHiddenAfterTransition(content);
     } else {
       content.hidden = true;
     }
   }
   /**
-   * Re-applies `hidden` once the close transition finishes. Guarded against a
-   * reopen mid-transition: if the region is open again by the time the
-   * transition ends, `hidden` is left off.
+   * Re-applies `hidden` once the close transition settles. Guarded against a
+   * reopen mid-transition; the shared waiter also guarantees a bounded fallback
+   * when the browser emits no terminal transition event.
    */
   #applyHiddenAfterTransition(content) {
-    const handler = (event) => {
-      if (event.target !== content) return;
-      this.#detachTransitionEnd();
+    this.#transition.wait(content, () => {
       if (content.getAttribute("data-state") === "closed") {
         content.hidden = true;
       }
-    };
-    this.#pendingTransitionEnd = handler;
-    content.addEventListener("transitionend", handler);
-  }
-  #detachTransitionEnd() {
-    if (this.#pendingTransitionEnd && this.hasContentTarget) {
-      this.contentTarget.removeEventListener("transitionend", this.#pendingTransitionEnd);
-    }
-    this.#pendingTransitionEnd = null;
-  }
-  /**
-   * First `transition-duration` of `element` in milliseconds. Browsers normalize
-   * computed `<time>` to seconds (`0.2s`), but `ms` is parsed defensively. A zero
-   * here — including the consumer's reduced-motion CSS — takes the immediate path.
-   */
-  #transitionMs(element) {
-    const first = window.getComputedStyle(element).transitionDuration.split(",")[0]?.trim() ?? "";
-    const amount = Number.parseFloat(first);
-    if (Number.isNaN(amount)) return 0;
-    return first.endsWith("ms") ? amount : amount * 1e3;
+    });
   }
 };
 var COLOR_PROPERTY = "--stimeo-color";
@@ -2045,17 +2316,30 @@ var ComboboxController = class extends Controller {
    * does not immediately re-open the listbox via a `focus`-bound action.
    */
   #suppressOpen = false;
+  /** Owns IME lifecycle state; confirmed text re-filters the list once. */
+  #composition = new CompositionTracker({ onEnd: () => this.filter() });
   /** Starts closed with no active option and registers the outside-click listener. */
   connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
     document.addEventListener("click", this.#onOutsideClick);
   }
   /** Removes the document-level listener registered in {@link connect}. */
   disconnect() {
+    this.#composition.disconnect();
     document.removeEventListener("click", this.#onOutsideClick);
   }
-  /** Filters options by the current input value and opens the listbox. */
-  filter() {
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
+  /** Filters confirmed input text and opens the listbox. */
+  filter(event) {
+    if (this.#composition.isComposing(event)) return;
     this.open();
   }
   /**
@@ -2092,7 +2376,7 @@ var ComboboxController = class extends Controller {
   }
   /** Routes keyboard interaction per the APG combobox model. */
   onKeydown(event) {
-    if (event.isComposing || event.keyCode === 229) return;
+    if (this.#composition.isComposing(event)) return;
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
@@ -2138,6 +2422,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
+        if (event.defaultPrevented || this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -2214,7 +2499,9 @@ var ComboboxController = class extends Controller {
     return !this.hasListTarget || this.listTarget.hidden !== false;
   }
 };
-var CommandPaletteController = class extends Controller {
+var CommandPaletteController = class _CommandPaletteController extends Controller {
+  static #ORIGINAL_ARIA_DISABLED = "data-command-palette-original-aria-disabled";
+  static #ABSENT_ARIA_DISABLED = "absent";
   static targets = ["dialog", "input", "list", "option", "empty"];
   static values = {
     hotkey: { type: String, default: "mod+k" },
@@ -2232,6 +2519,12 @@ var CommandPaletteController = class extends Controller {
   static events = ["select"];
   /** The index of the currently active option within the visible subset. */
   #activeIndex = -1;
+  /** Owns IME lifecycle state; confirmed text re-filters an open palette once. */
+  #composition = new CompositionTracker({
+    onEnd: () => {
+      if (this.#isOpen) this.filter();
+    }
+  });
   /**
    * Owns the modal side effects (focus trap, scroll lock, background `inert`, focus
    * restore). Escape closes; focus on open goes to the input, and is restored to
@@ -2254,6 +2547,8 @@ var CommandPaletteController = class extends Controller {
    */
   connect() {
     document.addEventListener("keydown", this.#onGlobalKeydown);
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.#syncOptionSemantics();
     const shouldOpen = this.#isOpen || this.openValue;
     this.#resetToClosedState();
     if (shouldOpen) this.open();
@@ -2261,9 +2556,22 @@ var CommandPaletteController = class extends Controller {
   /** Tears down the global hotkey listener and reverts the modal side effects. */
   disconnect() {
     document.removeEventListener("keydown", this.#onGlobalKeydown);
+    this.#composition.disconnect();
     this.#trap.deactivate({ restoreFocus: false });
     this.#resetToClosedState();
   }
+  /** Initializes semantics for an option added before or after the controller connects. */
+  optionTargetConnected(option) {
+    this.#syncOptionSemanticsFor(option);
+  }
+  /** Tracks an input added initially or after connect without extra consumer actions. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes controller-owned listeners when the input target is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
   /** Toggles the open state of the command palette. */
   toggle() {
     if (this.#isOpen) {
@@ -2288,8 +2596,9 @@ var CommandPaletteController = class extends Controller {
     this.#trap.deactivate();
   }
   /** Filters option elements in-memory matching the input value. Bound to input target. */
-  filter() {
-    if (!this.hasInputTarget) return;
+  filter(event) {
+    if (!this.hasInputTarget || this.#composition.isComposing(event)) return;
+    this.#syncOptionSemantics();
     const query = this.inputTarget.value.trim().toLowerCase();
     let hasSelectableMatch = false;
     for (const option of this.optionTargets) {
@@ -2312,6 +2621,7 @@ var CommandPaletteController = class extends Controller {
     const target = event.currentTarget;
     if (!target) return;
     const option = target.closest("[role='option']");
+    if (option) this.#syncOptionSemanticsFor(option);
     if (option && !this.#isDisabled(option)) {
       this.#confirmSelection(option);
     }
@@ -2327,7 +2637,7 @@ var CommandPaletteController = class extends Controller {
    * focus — not only the input.
    */
   onKeydown(event) {
-    if (!this.#isOpen) return;
+    if (this.#composition.isComposing(event) || !this.#isOpen) return;
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -2362,23 +2672,25 @@ var CommandPaletteController = class extends Controller {
     this.#setActiveIndex(newIndex);
   }
   #setActiveIndex(index) {
+    this.#syncOptionSemantics();
     const visible = this.#visibleOptions;
-    this.#activeIndex = index;
-    visible.forEach((option, i) => {
-      if (i === index) {
-        option.setAttribute("aria-selected", "true");
-        option.setAttribute("data-active", "true");
-        if (this.hasInputTarget) {
-          this.inputTarget.setAttribute("aria-activedescendant", option.id || "");
-        }
-        option.scrollIntoView({ block: "nearest" });
+    const activeOption = visible[index] ?? null;
+    this.#activeIndex = activeOption ? index : -1;
+    for (const option of this.optionTargets) {
+      option.setAttribute("aria-selected", "false");
+      option.removeAttribute("data-active");
+    }
+    if (activeOption) {
+      activeOption.setAttribute("aria-selected", "true");
+      activeOption.setAttribute("data-active", "true");
+      activeOption.scrollIntoView({ block: "nearest" });
+    }
+    if (this.hasInputTarget) {
+      if (activeOption?.id) {
+        this.inputTarget.setAttribute("aria-activedescendant", activeOption.id);
       } else {
-        option.setAttribute("aria-selected", "false");
-        option.removeAttribute("data-active");
+        this.inputTarget.removeAttribute("aria-activedescendant");
       }
-    });
-    if (index === -1 && this.hasInputTarget) {
-      this.inputTarget.removeAttribute("aria-activedescendant");
     }
   }
   #confirmSelection(option) {
@@ -2391,8 +2703,9 @@ var CommandPaletteController = class extends Controller {
     for (const option of this.optionTargets) {
       option.removeAttribute("hidden");
     }
-    if (this.hasEmptyTarget) this.emptyTarget.hidden = true;
-    this.#setActiveIndex(0);
+    const hasSelectableOption = this.#visibleOptions.length > 0;
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = hasSelectableOption;
+    this.#setActiveIndex(hasSelectableOption ? 0 : -1);
   }
   get #visibleOptions() {
     return this.optionTargets.filter(
@@ -2400,23 +2713,66 @@ var CommandPaletteController = class extends Controller {
     );
   }
   #isDisabled(option) {
-    return option.dataset.disabled === "true";
+    return option.dataset.disabled === "true" || option.getAttribute("aria-disabled") === "true";
+  }
+  /** Synchronizes every option's controller-owned selection and disabled semantics. */
+  #syncOptionSemantics() {
+    for (const option of this.optionTargets) this.#syncOptionSemanticsFor(option);
+  }
+  /** Reflects `data-disabled` to ARIA without losing a pre-existing authored value. */
+  #syncOptionSemanticsFor(option) {
+    if (!option.hasAttribute("aria-selected")) option.setAttribute("aria-selected", "false");
+    const originalAttribute = _CommandPaletteController.#ORIGINAL_ARIA_DISABLED;
+    const originalValue = option.getAttribute(originalAttribute);
+    if (option.dataset.disabled === "true") {
+      if (originalValue === null) {
+        option.setAttribute(
+          originalAttribute,
+          option.getAttribute("aria-disabled") ?? _CommandPaletteController.#ABSENT_ARIA_DISABLED
+        );
+      }
+      option.setAttribute("aria-disabled", "true");
+      return;
+    }
+    if (originalValue === null) return;
+    if (originalValue === _CommandPaletteController.#ABSENT_ARIA_DISABLED) {
+      option.removeAttribute("aria-disabled");
+    } else {
+      option.setAttribute("aria-disabled", originalValue);
+    }
+    option.removeAttribute(originalAttribute);
   }
   get #isOpen() {
     return this.hasDialogTarget && !this.dialogTarget.hidden;
   }
   #onGlobalKeydown = (event) => {
-    const hotkey = this.hotkeyValue.toLowerCase();
-    const isMod = hotkey.includes("mod+");
-    const key = hotkey.split("+").pop();
-    if (!key) return;
-    const modPressed = isMod ? event.metaKey || event.ctrlKey : !event.metaKey && !event.ctrlKey;
-    const keyMatch = event.key.toLowerCase() === key;
-    if (modPressed && keyMatch) {
-      event.preventDefault();
-      this.toggle();
-    }
+    if (this.#composition.isComposing(event) || !this.#matchesHotkey(event)) return;
+    event.preventDefault();
+    this.toggle();
   };
+  /** Matches the configured `mod+key` or bare-key hotkey without extra modifiers. */
+  #matchesHotkey(event) {
+    const hotkey = this.#parseHotkey();
+    if (!hotkey || event.altKey || event.shiftKey) return false;
+    if (hotkey.requiresMod) {
+      const hasExactlyOneModKey = event.metaKey !== event.ctrlKey;
+      if (!hasExactlyOneModKey) return false;
+    } else if (event.metaKey || event.ctrlKey) {
+      return false;
+    }
+    return event.key.toLowerCase() === hotkey.key;
+  }
+  /** Parses the intentionally small public hotkey grammar. */
+  #parseHotkey() {
+    const parts = this.hotkeyValue.toLowerCase().split("+");
+    if (parts.length === 1 && parts[0] && parts[0] !== "mod") {
+      return { key: parts[0], requiresMod: false };
+    }
+    if (parts.length === 2 && parts[0] === "mod" && parts[1]) {
+      return { key: parts[1], requiresMod: true };
+    }
+    return null;
+  }
   /** Resets transient open state so reconnect starts from a predictable closed snapshot. */
   #resetToClosedState() {
     this.#activeIndex = -1;
@@ -2649,14 +3005,23 @@ var ConfirmController = class extends Controller {
 var ContextMenuController = class extends Controller {
   static targets = ["region", "menu", "item"];
   static actions = ["activate", "onItemKeydown", "onRegionKeydown", "open"];
-  /** Starts closed and registers the outside-click listener. */
+  #timers = new SafeTimeout();
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** Starts closed and registers delegated activation and outside-pointer listeners. */
   connect() {
     this.#closeMenu();
-    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("click", this.#onItemClickCapture, true);
+    document.addEventListener("click", this.#onOutsidePointer);
+    document.addEventListener("contextmenu", this.#onOutsidePointer);
   }
-  /** Removes the document-level listener registered in {@link connect}. */
+  /** Releases the listeners, stack membership, and pending Tab-close task. */
   disconnect() {
-    document.removeEventListener("click", this.#onOutsideClick);
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
+    this.element.removeEventListener("click", this.#onItemClickCapture, true);
+    document.removeEventListener("click", this.#onOutsidePointer);
+    document.removeEventListener("contextmenu", this.#onOutsidePointer);
   }
   /**
    * Opens the menu from a `contextmenu` event: suppresses the native menu and
@@ -2681,11 +3046,17 @@ var ContextMenuController = class extends Controller {
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        if (items.length > 0) items[(currentIndex + 1) % items.length]?.focus();
+        if (items.length > 0) {
+          const nextIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % items.length;
+          items[nextIndex]?.focus();
+        }
         break;
       case "ArrowUp":
         event.preventDefault();
-        if (items.length > 0) items[(currentIndex - 1 + items.length) % items.length]?.focus();
+        if (items.length > 0) {
+          const previousIndex = currentIndex < 0 ? items.length - 1 : currentIndex - 1;
+          items[(previousIndex + items.length) % items.length]?.focus();
+        }
         break;
       case "Home":
         event.preventDefault();
@@ -2695,12 +3066,9 @@ var ContextMenuController = class extends Controller {
         event.preventDefault();
         items[items.length - 1]?.focus();
         break;
-      case "Escape":
-        event.preventDefault();
-        this.#closeAndRestore();
-        break;
       case "Tab":
-        this.#closeMenu();
+        this.#timers.clearAll();
+        this.#timers.set(() => this.#closeMenu(), 0);
         break;
     }
   }
@@ -2711,6 +3079,11 @@ var ContextMenuController = class extends Controller {
   /** Opens the menu at viewport coordinates `(x, y)` and focuses the first item. */
   #openAt(x, y) {
     if (!this.hasMenuTarget) return;
+    this.#timers.clearAll();
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#closeAndRestore(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     this.menuTarget.style.setProperty("--stimeo-context-menu-x", `${x}px`);
     this.menuTarget.style.setProperty("--stimeo-context-menu-y", `${y}px`);
     this.menuTarget.hidden = false;
@@ -2719,6 +3092,8 @@ var ContextMenuController = class extends Controller {
   }
   /** Hides the menu and reflects the collapsed state on the region. */
   #closeMenu() {
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
     if (!this.hasMenuTarget) return;
     this.menuTarget.hidden = true;
     if (this.hasRegionTarget) this.regionTarget.setAttribute("data-state", "closed");
@@ -2728,10 +3103,24 @@ var ContextMenuController = class extends Controller {
     this.#closeMenu();
     if (this.hasRegionTarget) this.regionTarget.focus();
   }
-  /** Closes the menu when a click lands outside the controller's element. */
-  #onOutsideClick = (event) => {
+  /** Closes when a click or context-menu invocation lands outside this instance. */
+  #onOutsidePointer = (event) => {
     if (this.#isOpen && !this.element.contains(event.target)) this.#closeMenu();
   };
+  /**
+   * Captures clicks so `aria-disabled` commands cannot reach consumer handlers.
+   * Native Enter/Space activation also synthesizes a click and is blocked here.
+   */
+  #onItemClickCapture = (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    const disabled = this.itemTargets.some(
+      (item) => item.getAttribute("aria-disabled") === "true" && item.contains(target)
+    );
+    if (!disabled) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
   /** Menu items eligible for roving focus (excludes disabled / hidden). */
   get #navigableItems() {
     return this.itemTargets.filter((item) => this.#isNavigable(item));
@@ -2751,6 +3140,13 @@ var ContextMenuController = class extends Controller {
     return this.hasMenuTarget && !this.menuTarget.hidden;
   }
 };
+
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+// src/controllers/count_up_controller.ts
 var CountUpController = class extends Controller {
   static values = {
     duration: { type: Number, default: 1200 },
@@ -2782,7 +3178,7 @@ var CountUpController = class extends Controller {
     this.#finalText = this.element.textContent ?? "";
     const target = Number.parseInt(this.#finalText.replace(/[^0-9-]/g, ""), 10);
     if (Number.isNaN(target)) return;
-    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+    if (prefersReducedMotion()) {
       this.element.setAttribute("data-count-up-done", "true");
       this.dispatch("end", { detail: { value: target } });
       return;
@@ -2889,8 +3285,8 @@ var CountdownController = class extends Controller {
    * paused (or completed) one resets the displayed amount but stays paused until the
    * user resumes — it never silently restarts. The run state is read from the DOM,
    * not re-derived from the declarative `autostart` Value (which only governs the
-   * initial state on connect); re-deriving it would override a user's pause, the same
-   * anti-pattern the Turbo-lifecycle guide warns about.
+   * initial state on connect); re-deriving it would override a user's pause —
+   * the DOM, not a re-run of declarative config, is the source of truth.
    */
   reset() {
     const wasRunning = this.#state === "running";
@@ -3384,7 +3780,7 @@ var DateRangePickerController = class extends Controller {
       return;
     }
     if (event.key === "Escape") {
-      if (this.#pendingStart) {
+      if (this.#pendingStart && !event.defaultPrevented && !event.isComposing) {
         event.preventDefault();
         this.#pendingStart = "";
         this.#previewDate = "";
@@ -3913,14 +4309,6 @@ var DirtyFormController = class extends Controller {
     return null;
   }
 };
-var FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])'
-].join(",");
 var DismissibleController = class extends Controller {
   static targets = ["root", "fallback"];
   static values = {
@@ -3934,25 +4322,35 @@ var DismissibleController = class extends Controller {
     if (!root.hasAttribute("data-state")) {
       root.setAttribute("data-state", "open");
     }
-    if (this.closeOnEscapeValue) {
-      this.element.addEventListener("keydown", this.#onKeydown);
-    }
+    this.#syncEscapeListener();
   }
   disconnect() {
     this.element.removeEventListener("keydown", this.#onKeydown);
   }
+  /** Keeps the Escape listener aligned with a live `closeOnEscape` Value. */
+  closeOnEscapeValueChanged() {
+    this.#syncEscapeListener();
+  }
   /** Dismisses the element. Bound via `data-action` (click on the close button). */
   dismiss() {
     this.#performDismiss();
   }
   /** Dismisses on Escape when `closeOnEscape` is set and focus is inside. */
   #onKeydown = (event) => {
-    if (event.key !== "Escape") return;
+    if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+    if (!this.closeOnEscapeValue) return;
     const active = document.activeElement;
     if (!active || !this.element.contains(active)) return;
     event.preventDefault();
     this.#performDismiss();
   };
+  /** Adds or removes the one stable listener reference without duplicating it. */
+  #syncEscapeListener() {
+    this.element.removeEventListener("keydown", this.#onKeydown);
+    if (this.closeOnEscapeValue) {
+      this.element.addEventListener("keydown", this.#onKeydown);
+    }
+  }
   /** The element to dismiss: the explicit `root` target, or the host element. */
   get #root() {
     return this.hasRootTarget ? this.rootTarget : this.element;
@@ -3976,34 +4374,46 @@ var DismissibleController = class extends Controller {
   #retreatFocus(root) {
     const active = document.activeElement;
     if (!(active instanceof HTMLElement) || !root.contains(active)) return;
-    this.#focusFallback(root).focus();
-  }
-  /** Resolves the best focus fallback per the documented precedence. */
-  #focusFallback(root) {
-    if (this.hasFallbackTarget && !root.contains(this.fallbackTarget)) {
-      return this.fallbackTarget;
-    }
-    const candidates = Array.from(
-      document.querySelectorAll(FOCUSABLE_SELECTOR)
-    ).filter((element) => !root.contains(element));
-    const after = candidates.find(
-      (element) => root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING
-    );
-    if (after) return after;
-    const before = candidates.reverse().find((element) => root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING);
-    if (before) return before;
-    return document.body;
+    for (const candidate of this.#focusFallbacks(root)) {
+      candidate.focus();
+      if (document.activeElement === candidate) return;
+    }
+    document.body.focus();
+  }
+  /** Yields available focus fallbacks in precedence order, stopping after focus succeeds. */
+  *#focusFallbacks(root) {
+    const explicitFallback = this.hasFallbackTarget ? this.fallbackTarget : null;
+    if (explicitFallback && !root.contains(explicitFallback) && this.#isFocusAvailable(explicitFallback)) {
+      yield explicitFallback;
+    }
+    const candidates = document.querySelectorAll(FOCUSABLE);
+    for (const element of candidates) {
+      if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING)) {
+        continue;
+      }
+      if (this.#isFocusAvailable(element)) yield element;
+    }
+    for (let index = candidates.length - 1; index >= 0; index -= 1) {
+      const element = candidates.item(index);
+      if (element === explicitFallback || root.contains(element) || !(root.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING)) {
+        continue;
+      }
+      if (this.#isFocusAvailable(element)) yield element;
+    }
+  }
+  /** Whether focus is allowed by the element and its semantic ancestors. */
+  #isFocusAvailable(element) {
+    if (!element.matches(FOCUSABLE) && !element.hasAttribute("tabindex") && !element.isContentEditable) {
+      return false;
+    }
+    if (element.matches(":disabled")) return false;
+    if (element instanceof HTMLInputElement && element.type === "hidden") return false;
+    for (let current = element; current; current = current.parentElement) {
+      if (current.hidden || current.inert) return false;
+    }
+    return true;
   }
 };
-function maxTransitionMs(value) {
-  const durations = value.split(",").map((part) => {
-    const trimmed = part.trim();
-    if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
-    if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1e3;
-    return 0;
-  });
-  return durations.length === 0 ? 0 : Math.max(...durations);
-}
 var DrawerController = class extends Controller {
   static targets = ["trigger", "overlay", "panel"];
   static values = {
@@ -4011,13 +4421,17 @@ var DrawerController = class extends Controller {
     open: { type: Boolean, default: false }
   };
   static actions = ["close", "closeOnBackdrop", "open"];
+  /** Exact panel currently owned by the modal lifecycle (survives target churn safely). */
+  #activePanel = null;
   /** Owns the modal side effects; Escape closes, focus falls back to the trigger. */
-  #trap = new FocusTrap(() => this.panelTarget, {
+  #trap = new FocusTrap(() => this.#activePanel ?? this.panelTarget, {
     onEscape: () => this.close(),
     fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
   });
-  /** Pending `transitionend` hide listener, kept so it can be cancelled on reopen. */
-  #pendingHide = null;
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from callbacks around controller teardown. */
+  #connected = false;
   /**
    * Reflects placement and establishes the initial open/closed state.
    *
@@ -4030,6 +4444,8 @@ var DrawerController = class extends Controller {
    * after a reconnect and must be re-activated.
    */
   connect() {
+    this.#connected = true;
+    this.#activePanel = this.hasPanelTarget ? this.panelTarget : null;
     this.#reflectPlacement();
     const shouldOpen = this.#isOpen || this.openValue;
     this.#applyClosedState();
@@ -4037,8 +4453,31 @@ var DrawerController = class extends Controller {
   }
   /** Reverts the modal side effects and pending hide if torn down while open. */
   disconnect() {
-    this.#cancelPendingHide();
+    this.#connected = false;
+    this.#transition.cancel();
     this.#trap.deactivate({ restoreFocus: false });
+    this.#activePanel = null;
+  }
+  /** Adopts a panel target added by a Turbo morph after the controller connected. */
+  panelTargetConnected(panel) {
+    if (!this.#connected || this.#activePanel?.isConnected && this.#activePanel !== panel) return;
+    this.#adoptPanel(panel);
+  }
+  /** Closes and releases modal side effects when the actively trapped panel disappears. */
+  panelTargetDisconnected(panel) {
+    if (panel !== this.#activePanel) return;
+    this.#transition.cancel();
+    this.#activePanel = null;
+    if (!this.#connected) return;
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.setAttribute("data-state", "closed");
+      this.overlayTarget.hidden = true;
+    }
+    this.openValue = false;
+    this.#trap.deactivate();
+    if (this.hasPanelTarget) this.#adoptPanel(this.panelTarget);
   }
   /** Keeps `data-placement` in sync if the value changes at runtime. */
   placementValueChanged() {
@@ -4047,7 +4486,8 @@ var DrawerController = class extends Controller {
   /** Opens the drawer: reveals it, syncs `data-state`, traps focus. */
   open() {
     if (!this.hasPanelTarget || this.#isOpen) return;
-    this.#cancelPendingHide();
+    this.#transition.cancel();
+    this.#activePanel = this.panelTarget;
     this.panelTarget.hidden = false;
     if (this.hasOverlayTarget) this.overlayTarget.hidden = false;
     void this.panelTarget.offsetWidth;
@@ -4077,6 +4517,32 @@ var DrawerController = class extends Controller {
   #reflectPlacement() {
     if (this.hasPanelTarget) this.panelTarget.setAttribute("data-placement", this.#placement);
   }
+  /** Reconciles a replacement panel and companion overlay from its explicit DOM state. */
+  #adoptPanel(panel) {
+    this.#transition.cancel();
+    const trapWasActive = this.#trap.active;
+    this.#activePanel = panel;
+    panel.setAttribute("data-placement", this.#placement);
+    if (panel.getAttribute("data-state") === "open") {
+      panel.hidden = false;
+      if (this.hasOverlayTarget) {
+        this.overlayTarget.setAttribute("data-state", "open");
+        this.overlayTarget.hidden = false;
+      }
+      this.openValue = true;
+      if (trapWasActive) this.#trap.deactivate({ restoreFocus: false });
+      this.#trap.activate();
+      return;
+    }
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    if (this.hasOverlayTarget) {
+      this.overlayTarget.setAttribute("data-state", "closed");
+      this.overlayTarget.hidden = true;
+    }
+    this.openValue = false;
+    this.#trap.deactivate();
+  }
   /** Validated placement (`left`/`right`/`top`/`bottom`), defaulting to `right`. */
   get #placement() {
     const value = this.placementValue;
@@ -4095,24 +4561,13 @@ var DrawerController = class extends Controller {
   }
   /**
    * Applies `hidden` once the panel's close transition ends, so the exit slide
-   * can play. When the panel has no transition (the duration is `0`, as in tests
-   * or unstyled usage), it hides synchronously rather than waiting for an event
-   * that would never fire.
+   * can play. The shared waiter hides synchronously for 0ms transitions and
+   * supplies a bounded fallback when the browser emits no terminal event.
    */
   #hideAfterTransition() {
     const panel = this.panelTarget;
-    const duration = maxTransitionMs(getComputedStyle(panel).transitionDuration);
-    if (duration === 0) {
-      this.#applyHidden();
-      return;
-    }
-    const onEnd = (event) => {
-      if (event.target !== panel) return;
-      this.#cancelPendingHide();
-      this.#applyHidden();
-    };
-    this.#pendingHide = () => panel.removeEventListener("transitionend", onEnd);
-    panel.addEventListener("transitionend", onEnd);
+    this.#activePanel = panel;
+    this.#transition.wait(panel, () => this.#applyHidden(panel));
   }
   /**
    * Runs once the close transition has finished: applies `hidden` to the panel
@@ -4121,50 +4576,56 @@ var DrawerController = class extends Controller {
    * {@link FocusTrap} teardown to here — rather than at {@link close} time — keeps
    * the background unreachable and focus trapped for the whole exit animation.
    */
-  #applyHidden() {
-    if (this.hasPanelTarget) this.panelTarget.hidden = true;
+  #applyHidden(panel) {
+    panel.hidden = true;
     if (this.hasOverlayTarget) this.overlayTarget.hidden = true;
     this.#trap.deactivate();
   }
-  /** Removes any pending `transitionend` hide listener. */
-  #cancelPendingHide() {
-    this.#pendingHide?.();
-    this.#pendingHide = null;
-  }
   /** Whether the drawer is open (tracked via `data-state`, not `hidden`). */
   get #isOpen() {
     return this.hasPanelTarget && this.panelTarget.getAttribute("data-state") === "open";
   }
 };
+
+// src/utils/aria_ids.ts
+var counter = 0;
+function uniqueId(prefix = "stimeo") {
+  let candidate;
+  do {
+    counter += 1;
+    candidate = `${prefix}-${counter}`;
+  } while (typeof document !== "undefined" && document.getElementById(candidate) !== null);
+  return candidate;
+}
+function ensureId(element, prefix = "stimeo") {
+  if (element.id) return element.id;
+  const id = uniqueId(prefix);
+  element.id = id;
+  return id;
+}
+
+// src/controllers/dropdown_controller.ts
 var DropdownController = class extends Controller {
   static targets = ["trigger", "menu"];
   static actions = ["close", "open", "toggle"];
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   /** Closes the menu when a click lands outside the controller's element. */
   #onOutsideClick = (event) => {
     if (!this.element.contains(event.target)) {
       this.close();
     }
   };
-  /** Closes the menu on `Escape` and restores focus to the trigger. */
-  #onKeydown = (event) => {
-    if (event.key === "Escape" && this.#isOpen) {
-      this.close();
-      if (this.hasTriggerTarget) this.triggerTarget.focus();
-    }
-  };
-  /**
-   * Starts in the closed state and registers the document-level listeners that
-   * power outside-click and `Escape` handling.
-   */
+  /** Starts in the closed state and registers outside-click handling. */
   connect() {
+    this.#associateTriggerWithMenu();
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
-    document.addEventListener("keydown", this.#onKeydown);
+    document.addEventListener("click", this.#onOutsideClick, true);
   }
-  /** Removes the document-level listeners registered in {@link connect}. */
+  /** Removes the listeners registered in {@link connect}. */
   disconnect() {
-    document.removeEventListener("click", this.#onOutsideClick);
-    document.removeEventListener("keydown", this.#onKeydown);
+    this.#escapeLayer.deactivate();
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** Toggles the menu between open and closed. Bound via `data-action`. */
   toggle() {
@@ -4177,6 +4638,10 @@ var DropdownController = class extends Controller {
   /** Reveals the menu and reflects the open state on the trigger. */
   open() {
     if (!this.hasMenuTarget) return;
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#closeAndRestore(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     this.menuTarget.hidden = false;
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", "true");
@@ -4184,16 +4649,34 @@ var DropdownController = class extends Controller {
   }
   /** Hides the menu and reflects the closed state on the trigger. */
   close() {
+    this.#escapeLayer.deactivate();
     if (!this.hasMenuTarget) return;
     this.menuTarget.hidden = true;
     if (this.hasTriggerTarget) {
       this.triggerTarget.setAttribute("aria-expanded", "false");
     }
   }
+  /** Closes and restores focus to the trigger (the keyboard-dismissal path). */
+  #closeAndRestore() {
+    this.close();
+    if (this.hasTriggerTarget) this.triggerTarget.focus();
+  }
   /** Whether the menu is currently visible. */
   get #isOpen() {
     return this.hasMenuTarget && !this.menuTarget.hidden;
   }
+  /**
+   * Associates the disclosure trigger and controlled region without clobbering
+   * authored markup.
+   */
+  #associateTriggerWithMenu() {
+    if (!this.hasTriggerTarget || !this.hasMenuTarget) return;
+    if (this.triggerTarget.hasAttribute("aria-controls")) return;
+    this.triggerTarget.setAttribute(
+      "aria-controls",
+      ensureId(this.menuTarget, "stimeo--dropdown-menu")
+    );
+  }
 };
 var EditableController = class extends Controller {
   static targets = ["display", "input"];
@@ -4204,10 +4687,28 @@ var EditableController = class extends Controller {
   static events = ["cancel", "change"];
   /** The value captured when edit mode began, used to detect real changes. */
   #previousValue = "";
+  /**
+   * 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();
   /** Establishes the initial display mode (display shown, input hidden). */
   connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.#setMode("display");
   }
+  /** Releases the composition listeners so nothing outlives the element. */
+  disconnect() {
+    this.#composition.disconnect();
+  }
+  /** Tracks an input added initially or after connect (e.g. a Turbo swap). */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** 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. */
   edit() {
     if (this.#isEditing || !this.hasInputTarget || !this.hasDisplayTarget) return;
@@ -4226,7 +4727,9 @@ var EditableController = class extends Controller {
   }
   /** Commits on `Enter` (or `Ctrl+Enter` when multiline) and cancels on `Escape`. */
   onKeydown(event) {
+    if (this.#composition.isComposing(event)) return;
     if (event.key === "Escape") {
+      if (event.defaultPrevented) return;
       event.preventDefault();
       this.#cancel();
       return;
@@ -4734,13 +5237,10 @@ var FlashController = class extends Controller {
       finalize();
     }
   }
-  /** First `transition-duration` of `el` in ms (0 when none / unsupported). */
+  /** Maximum transition total (duration + delay) of `el` in ms (0 when none / unsupported). */
   #transitionMs(el) {
     if (typeof window.getComputedStyle !== "function") return 0;
-    const first = window.getComputedStyle(el).transitionDuration.split(",")[0]?.trim() ?? "";
-    const amount = Number.parseFloat(first);
-    if (Number.isNaN(amount)) return 0;
-    return first.endsWith("ms") ? amount : amount * 1e3;
+    return maxTransitionTotalMs(window.getComputedStyle(el));
   }
 };
 var FocusController = class extends Controller {
@@ -4794,25 +5294,6 @@ var FocusController = class extends Controller {
     this.dispatch("deactivate", { detail: {} });
   }
 };
-
-// src/utils/aria_ids.ts
-var counter = 0;
-function uniqueId(prefix = "stimeo") {
-  let candidate;
-  do {
-    counter += 1;
-    candidate = `${prefix}-${counter}`;
-  } while (typeof document !== "undefined" && document.getElementById(candidate) !== null);
-  return candidate;
-}
-function ensureId(element, prefix = "stimeo") {
-  if (element.id) return element.id;
-  const id = uniqueId(prefix);
-  element.id = id;
-  return id;
-}
-
-// src/controllers/form_field_controller.ts
 var FormFieldController = class _FormFieldController extends Controller {
   static targets = ["control", "description", "error"];
   static values = {
@@ -5116,8 +5597,8 @@ var FormValidationController = class _FormValidationController extends Controlle
   }
   /**
    * Applies (or clears) a declarative custom constraint via `setCustomValidity`,
-   * for controls that opt in with `data-stimeo--form-field-disallow`. The one
-   * supported rule today is `"whitespace"` — a value that is non-empty but blank
+   * for controls that opt in with `data-stimeo--form-field-disallow`. The supported
+   * rule is `"whitespace"` — a value that is non-empty but blank
    * after trimming (which slips past `required` / `minlength`); its message follows
    * the per-constraint (`value-missing`) → generic → default chain.
    *
@@ -5340,7 +5821,7 @@ var HighlightController = class extends Controller {
   }
   /** Flags `el` with `data-highlight` and schedules its removal (unless reduced-motion). */
   #highlight(el) {
-    if (this.#prefersReducedMotion()) return;
+    if (prefersReducedMotion()) return;
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
     this.#timeouts.set(() => {
@@ -5348,9 +5829,6 @@ var HighlightController = class extends Controller {
       this.dispatch("end", { target: el, detail: { element: el } });
     }, this.durationValue);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 // src/utils/scroll_dismiss.ts
@@ -5386,21 +5864,26 @@ var HoverCardController = class extends Controller {
     closeDelay: { type: Number, default: 200 },
     closeOnScroll: { type: Boolean, default: false }
   };
-  static actions = ["close", "onKeydown", "open"];
-  /** Pending open/close timers, torn down together on disconnect. */
+  static actions = ["close", "open"];
+  /** Pending open/close timers, with their IDs reset on every lifecycle boundary. */
   #timers = new SafeTimeout();
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   #pendingOpen = null;
   #pendingClose = null;
   /** Cleanup for the dismiss-on-scroll listeners while open, or `null`. */
   #stopScrollDismiss = null;
-  /** Starts closed. */
+  /** Starts closed and discards any stale pending state from a prior connection. */
   connect() {
+    this.#cancelOpen();
+    this.#cancelClose();
     this.#conceal();
   }
-  /** Clears timers and the document `Escape` / scroll listeners so nothing outlives the element. */
+  /** Clears timers, the Escape-stack membership, and scroll listeners so nothing outlives the element. */
   disconnect() {
-    this.#timers.clearAll();
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#cancelOpen();
+    this.#cancelClose();
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
   }
@@ -5432,32 +5915,26 @@ var HoverCardController = class extends Controller {
       this.#conceal();
     }, this.closeDelayValue);
   }
-  /** Closes immediately on `Escape` while open (keyboard dismissal from the trigger). */
-  onKeydown(event) {
-    if (event.key === "Escape" && this.#isOpen) {
-      event.preventDefault();
-      this.#dismiss();
-    }
-  }
-  /** Reveals the card, reflects state, and starts watching for a dismissing `Escape`/scroll. */
+  /** Reveals the card, reflects state, and joins the Escape stack / scroll watcher. */
   #reveal() {
     if (!this.hasCardTarget) return;
     this.cardTarget.hidden = false;
     this.cardTarget.setAttribute("data-state", "open");
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true");
-    document.addEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.activate(document, { onDismiss: () => this.#dismiss() });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
       this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.#dismiss());
     }
   }
-  /** Hides the card, reflects state, and stops watching for `Escape`/scroll. */
+  /** Hides the card, reflects state, and leaves the Escape stack / scroll watcher. */
   #conceal() {
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
-    if (!this.hasCardTarget) return;
-    this.cardTarget.hidden = true;
-    this.cardTarget.setAttribute("data-state", "closed");
+    if (this.hasCardTarget) {
+      this.cardTarget.hidden = true;
+      this.cardTarget.setAttribute("data-state", "closed");
+    }
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false");
   }
   /** Cancels pending timers and conceals immediately (shared Escape path). */
@@ -5466,13 +5943,6 @@ var HoverCardController = class extends Controller {
     this.#cancelClose();
     this.#conceal();
   }
-  /** Document-level `Escape` watcher (active only while open). */
-  #onDocumentKeydown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.#dismiss();
-    }
-  };
   /** Cancels any pending open timer. */
   #cancelOpen() {
     if (this.#pendingOpen !== null) {
@@ -5732,6 +6202,12 @@ var InputMaskController = class extends Controller {
 };
 
 // src/utils/intersection_watcher.ts
+function isBeforeRootStart(entry) {
+  const rect = entry.boundingClientRect;
+  if (rect.width === 0 && rect.height === 0) return false;
+  const rootTop = entry.rootBounds?.top ?? 0;
+  return rect.bottom <= rootTop;
+}
 var IntersectionWatcher = class {
   #onEntries;
   #observer = null;
@@ -5747,6 +6223,11 @@ var IntersectionWatcher = class {
    * (Re)creates the observer and observes `targets`. Returns `false` — leaving
    * the watcher inert — without `IntersectionObserver` support (very old
    * browsers; the caller's no-JS fallback stays in charge) or with no targets.
+   *
+   * @throws Whatever the platform throws for an invalid `rootMargin`/`threshold`
+   *   or a failing `observe()`. The exception is passed through unchanged, but
+   *   the watcher rolls back first: every target observed so far is released and
+   *   `active` stays `false`, so a caller that retries starts from a clean slate.
    */
   start(targets, options = {}) {
     this.stop();
@@ -5754,25 +6235,42 @@ var IntersectionWatcher = class {
     const list = Array.isArray(targets) ? targets : [targets];
     if (list.length === 0) return false;
     const root = "root" in options ? options.root ?? null : options.rootSelector ? document.querySelector(options.rootSelector) : null;
-    this.#active = true;
-    this.#observer = new IntersectionObserver(
-      (entries) => {
-        if (this.#active) this.#onEntries(entries);
-      },
-      { root, rootMargin: options.rootMargin, threshold: options.threshold }
-    );
-    for (const target of list) this.#observer.observe(target);
-    return true;
+    let observer = null;
+    try {
+      observer = new IntersectionObserver(
+        (entries) => {
+          if (this.#active && this.#observer === observer) this.#onEntries(entries);
+        },
+        { root, rootMargin: options.rootMargin, threshold: options.threshold }
+      );
+      for (const target of list) observer.observe(target);
+      this.#observer = observer;
+      this.#active = true;
+      return true;
+    } catch (error) {
+      observer?.disconnect();
+      this.#observer = null;
+      this.#active = false;
+      throw error;
+    }
   }
   /**
    * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`
    * only reports *changes*, but `observe()` always reports the present state,
    * so unobserve→observe turns "still intersecting" into a fresh callback.
+   *
+   * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped
+   *   first, so it never stays live with a half-rearmed target.
    */
   rearm(target) {
     if (!this.#observer) return;
-    this.#observer.unobserve(target);
-    this.#observer.observe(target);
+    try {
+      this.#observer.unobserve(target);
+      this.#observer.observe(target);
+    } catch (error) {
+      this.stop();
+      throw error;
+    }
   }
   /** Severs the observer; late queued callbacks become no-ops via the guard. */
   stop() {
@@ -5809,7 +6307,7 @@ var IntersectionController = class extends Controller {
       this.element.style.setProperty(RATIO_PROPERTY, String(ratio));
       this.dispatch("change", { detail: { intersecting, ratio } });
       this.#syncIntersecting(intersecting, ratio, entry);
-      this.#syncPassed(!intersecting && this.#isBefore(entry));
+      this.#syncPassed(!intersecting && isBeforeRootStart(entry));
     }
   }
   connect() {
@@ -5857,7 +6355,7 @@ var IntersectionController = class extends Controller {
       if (this.onceValue) this.#watcher.stop();
     } else if (!intersecting && previous === "true") {
       this.dispatch("exit", {
-        detail: { ratio, position: this.#isBefore(entry) ? "before" : "after" }
+        detail: { ratio, position: isBeforeRootStart(entry) ? "before" : "after" }
       });
     }
   }
@@ -5873,11 +6371,6 @@ var IntersectionController = class extends Controller {
     const changed = previous === null ? passed : previous === "true" !== passed;
     if (changed) this.dispatch("passed", { detail: { passed } });
   }
-  /** True when the element sits entirely before the root's start (top) edge. */
-  #isBefore(entry) {
-    const rootTop = entry.rootBounds?.top ?? 0;
-    return entry.boundingClientRect.bottom <= rootTop;
-  }
   /** The configured `threshold`, clamped to the 0..1 the observer accepts. */
   #clampedThreshold() {
     return Math.min(1, Math.max(0, this.thresholdValue));
@@ -6029,6 +6522,7 @@ var ListboxController = class extends Controller {
         this.#commitActive();
         break;
       case "Escape":
+        if (event.defaultPrevented || event.isComposing) break;
         event.preventDefault();
         this.close();
         this.triggerTarget.focus();
@@ -6308,13 +6802,20 @@ var MenuController = class extends Controller {
     "open",
     "toggle"
   ];
-  /** Starts closed and registers the outside-click listener. */
+  #timers = new SafeTimeout();
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** Starts closed and registers delegated listeners. */
   connect() {
     this.close();
+    this.element.addEventListener("click", this.#onItemClickCapture, true);
     document.addEventListener("click", this.#onOutsideClick);
   }
-  /** Removes the document-level listener registered in {@link connect}. */
+  /** Releases the listeners, stack membership, and any pending Tab-close task. */
   disconnect() {
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
+    this.element.removeEventListener("click", this.#onItemClickCapture, true);
     document.removeEventListener("click", this.#onOutsideClick);
   }
   /** Toggles the menu open/closed. Bound via `data-action` (click). */
@@ -6328,12 +6829,19 @@ var MenuController = class extends Controller {
   }
   /** Opens the menu and reflects the expanded state on the trigger. */
   open() {
+    this.#timers.clearAll();
     if (!this.hasMenuTarget) return;
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#closeAndRestore(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     this.menuTarget.hidden = false;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true");
   }
   /** Closes the menu and reflects the collapsed state on the trigger. */
   close() {
+    this.#timers.clearAll();
+    this.#escapeLayer.deactivate();
     if (!this.hasMenuTarget) return;
     this.menuTarget.hidden = true;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false");
@@ -6378,18 +6886,18 @@ var MenuController = class extends Controller {
         event.preventDefault();
         items[items.length - 1]?.focus();
         break;
-      case "Escape":
-        event.preventDefault();
-        this.close();
-        if (this.hasTriggerTarget) this.triggerTarget.focus();
-        break;
       case "Tab":
-        this.close();
+        this.#timers.clearAll();
+        this.#timers.set(() => this.close(), 0);
         break;
     }
   }
   /** Closes the menu after an item is activated. Bound via `data-action`. */
   activate() {
+    this.#closeAndRestore();
+  }
+  /** Closes and returns focus to the trigger (Escape / item-activation path). */
+  #closeAndRestore() {
     this.close();
     if (this.hasTriggerTarget) this.triggerTarget.focus();
   }
@@ -6397,6 +6905,20 @@ var MenuController = class extends Controller {
   #onOutsideClick = (event) => {
     if (this.#isOpen && !this.element.contains(event.target)) this.close();
   };
+  /**
+   * Captures clicks so `aria-disabled` commands cannot reach consumer handlers.
+   * Native Enter/Space activation also synthesizes a click and is blocked here.
+   */
+  #onItemClickCapture = (event) => {
+    const target = event.target;
+    if (!(target instanceof Node)) return;
+    const disabled = this.itemTargets.some(
+      (item) => item.getAttribute("aria-disabled") === "true" && item.contains(target)
+    );
+    if (!disabled) return;
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  };
   /** Moves focus to the first navigable item (no-op if none). */
   #focusFirst() {
     this.#navigableItems[0]?.focus();
@@ -6435,6 +6957,8 @@ var MenubarController = class extends Controller {
   #typeahead = "";
   #typeaheadId = 0;
   #timers = new SafeTimeout();
+  /** Escape-stack membership while a menu is open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   /** Establishes the single tab stop and the closed baseline. */
   connect() {
     const active = this.#roving.activeIndex;
@@ -6442,8 +6966,9 @@ var MenubarController = class extends Controller {
     this.#closeAllMenus();
     document.addEventListener("click", this.#onOutsideClick);
   }
-  /** Removes the document listener and any pending typeahead timer. */
+  /** Removes the document listener, stack membership, and any pending typeahead timer. */
   disconnect() {
+    this.#escapeLayer.deactivate();
     document.removeEventListener("click", this.#onOutsideClick);
     this.#timers.clearAll();
   }
@@ -6488,12 +7013,6 @@ var MenubarController = class extends Controller {
         event.preventDefault();
         this.#gotoTop(length - 1, anyOpen);
         break;
-      case "Escape":
-        if (anyOpen) {
-          event.preventDefault();
-          this.#closeAllMenus();
-        }
-        break;
     }
   }
   /** Keyboard handling while focus is on a menu item. */
@@ -6529,11 +7048,6 @@ var MenubarController = class extends Controller {
         event.preventDefault();
         this.#moveToAdjacentMenu(menu, -1);
         break;
-      case "Escape":
-        event.preventDefault();
-        this.#closeMenu(this.#topFor(menu));
-        this.#focusTop(this.#topFor(menu));
-        break;
       case "Tab":
         this.#closeAllMenus();
         break;
@@ -6571,6 +7085,10 @@ var MenubarController = class extends Controller {
     if (!menu) return;
     menu.hidden = false;
     top.setAttribute("aria-expanded", "true");
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#dismissOpenMenu(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     this.#roving.setActive(this.topTargets.indexOf(top));
     const items = this.#itemsIn(menu);
     this.#focusAt(items, focus === "first" ? 0 : items.length - 1);
@@ -6581,12 +7099,30 @@ var MenubarController = class extends Controller {
     const menu = this.#menuFor(top);
     if (menu) menu.hidden = true;
     top.setAttribute("aria-expanded", "false");
+    if (!this.#isAnyOpen) this.#escapeLayer.deactivate();
   }
   /** Closes every menu and resets the typeahead buffer. */
   #closeAllMenus() {
     for (const top of this.topTargets) this.#closeMenu(top);
     this.#resetTypeahead();
   }
+  /**
+   * Escape path, invoked by the shared resolver: pressed inside an open menu it
+   * closes that menu and returns focus to its top item (the APG behavior);
+   * pressed while focus is on a top item (or fell to the body) it closes every
+   * menu without moving focus.
+   */
+  #dismissOpenMenu() {
+    const active = document.activeElement;
+    const menu = this.menuTargets.find((candidate) => candidate.contains(active));
+    if (menu) {
+      const top = this.#topFor(menu);
+      this.#closeMenu(top);
+      this.#focusTop(top);
+      return;
+    }
+    this.#closeAllMenus();
+  }
   /** Opens the menu of the top item `delta` steps from the one owning `menu`. */
   #moveToAdjacentMenu(menu, delta) {
     const top = this.#topFor(menu);
@@ -6768,9 +7304,25 @@ var MultiSelectController = class extends Controller {
   static events = ["change", "filter"];
   /** The active option (tracked via `aria-activedescendant`), or null. */
   #activeOption = null;
+  /** Absorbs the browser's redundant final input after compositionend. */
+  #ignorePostCompositionInput = false;
+  /** Owns IME lifecycle state; confirmed text emits one filter result. */
+  #composition = new CompositionTracker({
+    onStart: () => {
+      this.#ignorePostCompositionInput = false;
+    },
+    onEnd: () => {
+      this.#ignorePostCompositionInput = true;
+      queueMicrotask(() => {
+        this.#ignorePostCompositionInput = false;
+      });
+      this.filter();
+    }
+  });
   #roving = new RovingTabindex(() => this.#removeButtons);
   /** Starts closed, syncs chips for any pre-selected options, and listens out. */
   connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
     if (this.hasTagsTarget) {
       this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
@@ -6784,14 +7336,30 @@ var MultiSelectController = class extends Controller {
   }
   /** Tears down document and chip listeners on disconnect (Turbo included). */
   disconnect() {
+    this.#composition.disconnect();
+    this.#ignorePostCompositionInput = false;
     if (this.hasTagsTarget) {
       this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
       this.tagsTarget.removeEventListener("click", this.#onTagClick);
     }
     document.removeEventListener("click", this.#onOutsideClick);
   }
-  /** Filters options by the input substring, opens, and re-seeds the active one. */
-  filter() {
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+    this.#ignorePostCompositionInput = false;
+  }
+  /** Filters confirmed input text, opens, and re-seeds the active option. */
+  filter(event) {
+    if (event && this.#ignorePostCompositionInput) {
+      this.#ignorePostCompositionInput = false;
+      return;
+    }
+    if (this.#composition.isComposing(event)) return;
     const query = this.inputTarget.value.trim().toLowerCase();
     for (const option of this.optionTargets) {
       const label = (option.textContent ?? "").trim().toLowerCase();
@@ -6819,7 +7387,7 @@ var MultiSelectController = class extends Controller {
   }
   /** Routes input keyboard interaction per the multi-select combobox model. */
   onKeydown(event) {
-    if (event.isComposing || event.keyCode === 229) return;
+    if (this.#composition.isComposing(event)) return;
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -6852,6 +7420,7 @@ var MultiSelectController = class extends Controller {
         }
         break;
       case "Escape":
+        if (event.defaultPrevented || this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -7084,18 +7653,19 @@ var NavigationMenuController = class extends Controller {
    * when targets churn between connect and disconnect.
    */
   #hoverWired = /* @__PURE__ */ new Set();
+  /** Escape-stack membership while any panel is open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   /** Establishes the closed baseline and the dismissal listeners. */
   connect() {
     this.#closeAll();
     document.addEventListener("click", this.#onOutsideClick);
-    document.addEventListener("keydown", this.#onKeydown);
     this.element.addEventListener("focusout", this.#onFocusOut);
     if (this.openOnHoverValue) this.#addHoverListeners();
   }
-  /** Removes every listener and pending hover timer registered in {@link connect}. */
+  /** Removes every listener, pending hover timer, and stack membership registered while connected. */
   disconnect() {
+    this.#escapeLayer.deactivate();
     document.removeEventListener("click", this.#onOutsideClick);
-    document.removeEventListener("keydown", this.#onKeydown);
     this.element.removeEventListener("focusout", this.#onFocusOut);
     this.#removeHoverListeners();
     this.#hoverTimers.clearAll();
@@ -7154,17 +7724,34 @@ var NavigationMenuController = class extends Controller {
     if (!panel) return;
     panel.hidden = false;
     trigger.setAttribute("aria-expanded", "true");
+    this.#syncEscapeLayer();
   }
   /** Closes `trigger`'s panel and reflects the collapsed state. */
   #closePanel(trigger) {
     const panel = this.#panelFor(trigger);
     if (panel) panel.hidden = true;
     trigger.setAttribute("aria-expanded", "false");
+    this.#syncEscapeLayer();
   }
   /** Closes every open panel. */
   #closeAll() {
     for (const trigger of this.triggerTargets) this.#closePanel(trigger);
   }
+  /**
+   * Aligns Escape-stack membership with the open state: joins (or re-asserts to
+   * the top) while a panel is open, leaves once none is. Re-asserting when the
+   * user switches panels is deliberate — the nav is again the newest layer.
+   */
+  #syncEscapeLayer() {
+    if (this.#isAnyOpen) {
+      this.#escapeLayer.activate(document, {
+        onDismiss: () => this.#closeAndRestore(),
+        claims: claimsWhileFocusWithin(this.element)
+      });
+    } else {
+      this.#escapeLayer.deactivate();
+    }
+  }
   /** Closes any open panel and returns focus to its trigger (Escape path). */
   #closeAndRestore() {
     const open = this.#openTrigger;
@@ -7176,17 +7763,17 @@ var NavigationMenuController = class extends Controller {
   #onOutsideClick = (event) => {
     if (this.#isAnyOpen && !this.element.contains(event.target)) this.#closeAll();
   };
-  /** Closes (restoring focus) on `Escape` while a panel is open. */
-  #onKeydown = (event) => {
-    if (event.key !== "Escape" || !this.#isAnyOpen) return;
-    if (!this.element.contains(document.activeElement)) return;
-    event.preventDefault();
-    this.#closeAndRestore();
-  };
-  /** Closes (without restoring focus) when focus leaves the nav entirely. */
+  /**
+   * Closes (without restoring focus) when focus leaves the nav for a known
+   * external destination. A null/non-Node destination is indeterminate:
+   * browsers use it for clicks on non-focusable content and for window
+   * deactivation, so those never close the nav here (matching the popover
+   * convention) — the outside-click handler decides pointer dismissal, and the
+   * Escape stack's body-focus claim keeps keyboard dismissal working.
+   */
   #onFocusOut = (event) => {
     const next = event.relatedTarget;
-    if (next && this.element.contains(next)) return;
+    if (!(next instanceof Node) || this.element.contains(next)) return;
     this.#closeAll();
   };
   /** Opens a trigger's panel after the hover delay (hover mode). */
@@ -7760,21 +8347,24 @@ var OtpController = class extends Controller {
   };
   static actions = ["onInput", "onKeydown", "onPaste"];
   static events = ["change", "complete", "invalid"];
-  #isComposing = /* @__PURE__ */ new Map();
+  /** Owns IME lifecycle state across every digit field. */
+  #composition = new CompositionTracker({
+    onEnd: (event) => {
+      const input = event.currentTarget;
+      if (input) this.#handleInputValidation(input);
+    }
+  });
   connect() {
     for (const field of this.fieldTargets) {
       field.addEventListener("focus", this.#onFieldFocus);
-      field.addEventListener("compositionstart", this.#onCompositionStart);
-      field.addEventListener("compositionend", this.#onCompositionEnd);
+      this.#composition.observe(field);
     }
   }
   disconnect() {
     for (const field of this.fieldTargets) {
       field.removeEventListener("focus", this.#onFieldFocus);
-      field.removeEventListener("compositionstart", this.#onCompositionStart);
-      field.removeEventListener("compositionend", this.#onCompositionEnd);
     }
-    this.#isComposing.clear();
+    this.#composition.disconnect();
   }
   /**
    * Stimulus lifecycle callback when a new field target enters the DOM.
@@ -7782,21 +8372,18 @@ var OtpController = class extends Controller {
    */
   fieldTargetConnected(element) {
     element.addEventListener("focus", this.#onFieldFocus);
-    element.addEventListener("compositionstart", this.#onCompositionStart);
-    element.addEventListener("compositionend", this.#onCompositionEnd);
+    this.#composition.observe(element);
   }
   /** Removes focus listeners when fields are dropped. */
   fieldTargetDisconnected(element) {
     element.removeEventListener("focus", this.#onFieldFocus);
-    element.removeEventListener("compositionstart", this.#onCompositionStart);
-    element.removeEventListener("compositionend", this.#onCompositionEnd);
-    this.#isComposing.delete(element);
+    this.#composition.unobserve(element);
   }
   /** Handles keystroke inputs and advances focus to the next field. */
   onInput(event) {
     const input = event.currentTarget;
     if (!input) return;
-    if (this.#isComposing.get(input)) return;
+    if (this.#composition.isComposing(event)) return;
     this.#handleInputValidation(input);
   }
   /** Handles Backspace retreating, arrows, and home/end navigation. */
@@ -7805,7 +8392,7 @@ var OtpController = class extends Controller {
     if (!input) return;
     const index = this.fieldTargets.indexOf(input);
     if (index === -1) return;
-    if (this.#isComposing.get(input)) return;
+    if (this.#composition.isComposing(event)) return;
     switch (event.key) {
       case "Backspace":
         if (!input.value) {
@@ -7887,15 +8474,6 @@ var OtpController = class extends Controller {
       input.select();
     }
   };
-  #onCompositionStart = (event) => {
-    const input = event.currentTarget;
-    this.#isComposing.set(input, true);
-  };
-  #onCompositionEnd = (event) => {
-    const input = event.currentTarget;
-    this.#isComposing.set(input, false);
-    this.#handleInputValidation(input);
-  };
   #handleInputValidation(input) {
     const index = this.fieldTargets.indexOf(input);
     if (index === -1) return;
@@ -7946,6 +8524,26 @@ var OtpController = class extends Controller {
     }
   }
 };
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+function logicalScrollMetrics(element, horizontal) {
+  const max = Math.max(
+    0,
+    horizontal ? element.scrollWidth - element.clientWidth : element.scrollHeight - element.clientHeight
+  );
+  const raw = horizontal ? element.scrollLeft : element.scrollTop;
+  const position = horizontal && isRtl(element) ? -raw : raw;
+  return { position: Math.min(max, Math.max(0, position)), max };
+}
+function physicalScrollDelta(element, horizontal, logicalDelta) {
+  return horizontal && isRtl(element) ? -logicalDelta : logicalDelta;
+}
+
+// src/controllers/overflow_indicator_controller.ts
+var DIRECTION_BUTTON_SELECTOR = "[data-stimeo--overflow-indicator-direction-param]";
 var OverflowIndicatorController = class extends Controller {
   static targets = ["viewport"];
   static values = {
@@ -7954,38 +8552,50 @@ var OverflowIndicatorController = class extends Controller {
   };
   static actions = ["scrollByPage", "update"];
   static events = ["change"];
-  #layout = new LayoutObserver(() => this.update());
+  #layout = new LayoutObserver(() => {
+    if (this.#connected) this.update();
+  });
+  #connected = false;
+  #observedViewport = null;
+  #observedContent = /* @__PURE__ */ new Set();
   #mutationObserver = null;
+  #pendingButtonDisables = /* @__PURE__ */ new Map();
   /** Last reported room, so `change` fires only on transitions. */
   #state = null;
   connect() {
-    if (!this.hasViewportTarget) return;
-    this.#layout.observe(this.viewportTarget);
-    this.#layout.observeViewport();
-    if (typeof MutationObserver !== "undefined") {
-      this.#mutationObserver = new MutationObserver(() => this.update());
-      this.#mutationObserver.observe(this.viewportTarget, {
-        childList: true,
-        subtree: true,
-        characterData: true
-      });
-    }
-    this.update();
+    this.#connected = true;
+    this.#syncViewport();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingViewport();
     this.#layout.disconnect();
-    this.#mutationObserver?.disconnect();
-    this.#mutationObserver = null;
+    this.#clearPendingButtonDisables();
     this.#state = null;
   }
-  /** Re-measures remaining scroll room and reflects the state hooks. Public so it can be wired to the viewport's `scroll`. */
+  viewportTargetConnected() {
+    this.#syncViewport();
+  }
+  viewportTargetDisconnected(viewport) {
+    if (this.#observedViewport === viewport) this.#stopObservingViewport();
+    this.#syncViewport();
+  }
+  orientationValueChanged() {
+    if (this.#connected) this.update();
+  }
+  thresholdValueChanged() {
+    if (this.#connected) this.update();
+  }
+  /**
+   * Re-measures remaining scroll room and reflects the state hooks.
+   * Public so it can be wired to the viewport's `scroll`.
+   */
   update() {
     if (!this.hasViewportTarget) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
-    const t = this.thresholdValue;
-    const scrollPos = horizontal ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontal ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const t = this.#threshold;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontal);
     const start = scrollPos > t;
     const end = scrollPos < maxScroll - t;
     vp.setAttribute("data-overflow-start", start ? "true" : "false");
@@ -8001,11 +8611,13 @@ var OverflowIndicatorController = class extends Controller {
     if (!this.hasViewportTarget) return;
     const direction = this.#directionFromEvent(event);
     if (!direction) return;
+    if (this.#state && !this.#state[direction]) return;
     const vp = this.viewportTarget;
     const horizontal = this.orientationValue !== "vertical";
     const page = horizontal ? vp.clientWidth : vp.clientHeight;
-    const delta = direction === "start" ? -page : page;
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const logicalDelta = direction === "start" ? -page : page;
+    const delta = physicalScrollDelta(vp, horizontal, logicalDelta);
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     if (horizontal) {
       vp.scrollBy({ left: delta, behavior });
     } else {
@@ -8014,10 +8626,16 @@ var OverflowIndicatorController = class extends Controller {
   }
   /** Mirrors remaining room onto any direction buttons by toggling `disabled`. */
   #syncButtons(start, end) {
-    const buttons = this.element.querySelectorAll(
-      "[data-stimeo--overflow-indicator-direction-param]"
-    );
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      if (!button.isConnected || button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        this.#cancelPendingButtonDisable(button);
+      }
+    }
+    const buttons = this.element.querySelectorAll(DIRECTION_BUTTON_SELECTOR);
     for (const button of buttons) {
+      if (button.closest("[data-controller~='stimeo--overflow-indicator']") !== this.element) {
+        continue;
+      }
       const direction = button.getAttribute("data-stimeo--overflow-indicator-direction-param");
       if (direction === "start") this.#toggleButton(button, start);
       else if (direction === "end") this.#toggleButton(button, end);
@@ -8030,7 +8648,11 @@ var OverflowIndicatorController = class extends Controller {
    * whole control disabled) is therefore never blindly re-enabled.
    */
   #toggleButton(button, hasRoom) {
+    if (!this.#pendingButtonDisables.has(button) && button.hasAttribute("data-overflow-indicator-pending-disabled")) {
+      this.#cancelPendingButtonDisable(button);
+    }
     if (hasRoom) {
+      this.#cancelPendingButtonDisable(button);
       if (button.hasAttribute("data-overflow-indicator-disabled")) {
         button.disabled = false;
         button.removeAttribute("data-overflow-indicator-disabled");
@@ -8038,17 +8660,121 @@ var OverflowIndicatorController = class extends Controller {
       return;
     }
     if (button.disabled) return;
+    if (document.activeElement === button) {
+      this.#deferButtonDisable(button);
+    } else {
+      this.#disableButton(button);
+    }
+  }
+  /**
+   * Keeps a boundary button focusable until native blur, exposing its temporary
+   * inoperability with `aria-disabled` and making its action a no-op meanwhile.
+   */
+  #deferButtonDisable(button) {
+    if (this.#pendingButtonDisables.has(button)) return;
+    button.setAttribute("data-overflow-indicator-pending-disabled", "");
+    button.setAttribute(
+      "data-overflow-indicator-aria-disabled",
+      button.getAttribute("aria-disabled") ?? ""
+    );
+    button.setAttribute("aria-disabled", "true");
+    const onBlur = () => {
+      this.#cancelPendingButtonDisable(button);
+      if (!button.disabled) this.#disableButton(button);
+    };
+    this.#pendingButtonDisables.set(button, { onBlur });
+    button.addEventListener("blur", onBlur);
+  }
+  #disableButton(button) {
     button.disabled = true;
     button.setAttribute("data-overflow-indicator-disabled", "");
   }
+  #cancelPendingButtonDisable(button) {
+    const pending = this.#pendingButtonDisables.get(button);
+    if (pending) button.removeEventListener("blur", pending.onBlur);
+    this.#pendingButtonDisables.delete(button);
+    button.removeAttribute("data-overflow-indicator-pending-disabled");
+    const displaced = button.getAttribute("data-overflow-indicator-aria-disabled");
+    if (displaced !== null) {
+      button.removeAttribute("data-overflow-indicator-aria-disabled");
+      if (button.getAttribute("aria-disabled") === "true") {
+        if (displaced === "") button.removeAttribute("aria-disabled");
+        else button.setAttribute("aria-disabled", displaced);
+      }
+    }
+  }
+  #clearPendingButtonDisables() {
+    for (const button of [...this.#pendingButtonDisables.keys()]) {
+      this.#cancelPendingButtonDisable(button);
+    }
+  }
+  /** Moves resize/mutation/load observation to the current viewport target. */
+  #syncViewport() {
+    if (!this.#connected) return;
+    const next = this.hasViewportTarget ? this.viewportTarget : null;
+    if (next === this.#observedViewport) return;
+    this.#stopObservingViewport();
+    if (!next) return;
+    this.#observedViewport = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#onContentLoad, true);
+    this.#syncContentObservation();
+    if (typeof MutationObserver !== "undefined") {
+      this.#mutationObserver = new MutationObserver(() => {
+        if (!this.#connected || this.#observedViewport !== next) return;
+        this.#syncContentObservation();
+        this.update();
+      });
+      this.#mutationObserver.observe(this.element, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["class", "style", "hidden"]
+      });
+    }
+    this.#state = null;
+    this.update();
+  }
+  /** Observes direct content boxes whose resize can change the viewport's scroll extent. */
+  #syncContentObservation() {
+    const next = new Set(this.#observedViewport?.children ?? []);
+    for (const content of this.#observedContent) {
+      if (!next.has(content)) {
+        this.#layout.unobserve(content);
+        this.#observedContent.delete(content);
+      }
+    }
+    for (const content of next) {
+      if (!this.#observedContent.has(content)) {
+        this.#observedContent.add(content);
+        this.#layout.observe(content);
+      }
+    }
+  }
+  #stopObservingViewport() {
+    this.#mutationObserver?.disconnect();
+    this.#mutationObserver = null;
+    this.#observedViewport?.removeEventListener("load", this.#onContentLoad, true);
+    if (this.#observedViewport) this.#layout.unobserve(this.#observedViewport);
+    for (const content of this.#observedContent) this.#layout.unobserve(content);
+    this.#observedContent.clear();
+    this.#observedViewport = null;
+    this.#layout.unobserveViewport();
+  }
+  #onContentLoad = () => {
+    if (this.#connected) this.update();
+  };
+  get #threshold() {
+    const value = this.thresholdValue;
+    return Number.isFinite(value) ? Math.max(0, value) : 1;
+  }
   #directionFromEvent(event) {
     const params = event.params;
     const direction = params?.direction;
     return direction === "start" || direction === "end" ? direction : null;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var OverflowMenuController = class extends Controller {
   static targets = ["items", "more"];
@@ -8839,6 +9565,7 @@ var PointerDragController = class _PointerDragController extends Controller {
     const handle = this.#handleFor(event.target);
     if (!handle) return;
     if (event.key === "Escape") {
+      if (event.defaultPrevented || event.isComposing) return;
       if (this.#pointer?.started) {
         const { pointerType } = this.#pointer;
         this.#teardownSessions();
@@ -8951,9 +9678,8 @@ var PointerDragController = class _PointerDragController extends Controller {
   }
   /**
    * Silently tears down whatever session is live (disconnect / disabled /
-   * Escape). Composed from the two single-session teardowns so a cleanup step
-   * added to one path can never be missed on the other (the bug-shape behind
-   * the capture-release fix).
+   * Escape). Composed from the two single-session teardowns so pointer and
+   * keyboard cleanup cannot diverge as either path evolves.
    */
   #teardownSessions() {
     this.#endPointerSession();
@@ -9060,24 +9786,26 @@ var PopoverController = class _PopoverController extends Controller {
   static actions = ["close", "open", "toggle"];
   /** Cleanup for the dismiss-on-scroll listeners while open, or `null`. */
   #stopScrollDismiss = null;
+  /** Escape-stack membership while open; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
   /** Selector for natively focusable elements used to find the first one. */
   static #FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-  /** Starts closed and registers the document-level dismissal listeners. */
+  /** Starts closed and registers the standing dismissal listeners. */
   connect() {
     this.close();
     document.addEventListener("click", this.#onOutsideClick);
-    document.addEventListener("keydown", this.#onKeydown);
+    this.element.addEventListener("focusout", this.#onFocusOut);
   }
   /**
-   * Removes the document-level listeners registered in {@link connect}, plus the
-   * panel's `focusout` listener if the popover is torn down while open (e.g. a
-   * Turbo navigation). `removeEventListener` is a no-op when it was never added,
-   * so this is safe in the closed state too — no listener outlives the element.
+   * Removes every standing listener registered in {@link connect} plus any active
+   * dismiss-on-scroll observers. `removeEventListener` is a no-op when it was
+   * never added, so this is safe in the closed state too — no listener outlives
+   * the element after a Turbo navigation.
    */
   disconnect() {
+    this.#escapeLayer.deactivate();
     document.removeEventListener("click", this.#onOutsideClick);
-    document.removeEventListener("keydown", this.#onKeydown);
-    if (this.hasPanelTarget) this.panelTarget.removeEventListener("focusout", this.#onFocusOut);
+    this.element.removeEventListener("focusout", this.#onFocusOut);
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
   }
@@ -9094,7 +9822,10 @@ var PopoverController = class _PopoverController extends Controller {
     if (!this.hasPanelTarget || this.#isOpen) return;
     this.panelTarget.hidden = false;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "true");
-    this.panelTarget.addEventListener("focusout", this.#onFocusOut);
+    this.#escapeLayer.activate(document, {
+      onDismiss: () => this.#closeAndRestore(),
+      claims: claimsWhileFocusWithin(this.element)
+    });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
       this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.close());
     }
@@ -9102,11 +9833,10 @@ var PopoverController = class _PopoverController extends Controller {
   }
   /** Closes the panel and reflects the collapsed state. Bound via `data-action`. */
   close() {
-    if (!this.hasPanelTarget) return;
-    this.panelTarget.removeEventListener("focusout", this.#onFocusOut);
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
-    this.panelTarget.hidden = true;
+    if (this.hasPanelTarget) this.panelTarget.hidden = true;
     if (this.hasTriggerTarget) this.triggerTarget.setAttribute("aria-expanded", "false");
   }
   /** Moves focus to the first focusable element in the panel, or the panel itself. */
@@ -9119,31 +9849,28 @@ var PopoverController = class _PopoverController extends Controller {
     if (!this.panelTarget.hasAttribute("tabindex")) this.panelTarget.tabIndex = -1;
     this.panelTarget.focus();
   }
-  /** Closes and restores focus to the trigger (shared by Escape / outside click). */
+  /** Closes and restores focus to the trigger for explicit keyboard dismissal. */
   #closeAndRestore() {
     this.close();
     if (this.hasTriggerTarget) this.triggerTarget.focus();
   }
-  /** Closes (restoring focus) when a click lands outside the controller element. */
+  /** Closes without moving focus when a click lands outside the controller element. */
   #onOutsideClick = (event) => {
-    if (this.#isOpen && !this.element.contains(event.target)) this.#closeAndRestore();
-  };
-  /** Closes (restoring focus) on `Escape` while open. */
-  #onKeydown = (event) => {
-    if (event.key === "Escape" && this.#isOpen) {
-      event.preventDefault();
-      this.#closeAndRestore();
-    }
+    const target = event.target;
+    if (this.#isOpen && target instanceof Node && !this.element.contains(target)) this.close();
   };
   /**
-   * Closes when focus leaves the panel for an element outside the controller
-   * (e.g. `Tab` past the last field). Focus is *not* restored — the natural
-   * destination is kept, which is the modeless contract. Moves within the
-   * controller (panel → trigger) keep it open.
+   * Closes when focus leaves the controller for a known external destination
+   * (e.g. forward Tab past the panel or reverse Tab past the trigger). Focus is
+   * not restored — the natural destination is kept, which is the modeless
+   * contract. A null/non-Node destination is indeterminate: browsers use it for
+   * clicks on non-focusable content and window deactivation, so the later outside
+   * click handler decides pointer dismissal instead.
    */
   #onFocusOut = (event) => {
+    if (!this.#isOpen) return;
     const next = event.relatedTarget;
-    if (next && this.element.contains(next)) return;
+    if (!(next instanceof Node) || this.element.contains(next)) return;
     this.close();
   };
   /** Whether the panel is currently visible. */
@@ -9738,29 +10465,49 @@ var ReadMoreController = class extends Controller {
     collapsed: { type: Boolean, default: true }
   };
   static actions = ["toggle"];
-  /** Re-checks overflow when the content box or the viewport resizes. */
-  #layout = new LayoutObserver(() => this.#evaluateOverflow());
+  #connected = false;
+  #collapsed = true;
+  #observedContent = null;
+  #contentMutationObserver = null;
+  #deferredHideTrigger = null;
+  #update = () => {
+    if (this.#connected) this.#evaluateOverflow();
+  };
+  #layout = new LayoutObserver(this.#update);
+  #onDeferredHideBlur = () => {
+    this.#clearDeferredHide();
+    this.#update();
+  };
   connect() {
-    this.#reflect(this.#initialCollapsed());
-    this.#evaluateOverflow();
-    if (this.hasContentTarget) {
-      this.#layout.observe(this.contentTarget);
-      this.#layout.observeViewport();
-    }
+    this.#connected = true;
+    this.#collapsed = this.#initialCollapsed();
+    this.#syncTargets();
   }
   disconnect() {
+    this.#connected = false;
+    this.#stopObservingContent();
     this.#layout.disconnect();
   }
+  contentTargetConnected() {
+    this.#syncTargets();
+  }
+  contentTargetDisconnected() {
+    this.#syncTargets();
+  }
+  triggerTargetConnected() {
+    this.#syncTargets();
+  }
+  triggerTargetDisconnected(trigger) {
+    if (this.#deferredHideTrigger === trigger) this.#clearDeferredHide();
+    this.#syncTargets();
+  }
   /** Toggles between the collapsed (clamped) and expanded states. */
   toggle() {
-    this.#reflect(!this.#isCollapsed);
+    if (!this.#connected) return;
+    this.#collapsed = !this.#collapsed;
+    this.#reflect();
     this.#evaluateOverflow();
   }
-  /** Whether the content is currently collapsed (clamped). */
-  get #isCollapsed() {
-    return this.hasContentTarget ? this.contentTarget.getAttribute("data-state") !== "expanded" : this.collapsedValue;
-  }
-  /** Connect-time state: an explicit `data-state` wins, else the `collapsed` Value. */
   #initialCollapsed() {
     if (this.hasContentTarget) {
       const state = this.contentTarget.getAttribute("data-state");
@@ -9769,29 +10516,76 @@ var ReadMoreController = class extends Controller {
     }
     return this.collapsedValue;
   }
-  /** Writes the collapsed/expanded state onto the content and trigger. */
-  #reflect(collapsed) {
+  #reflect() {
     if (this.hasContentTarget) {
-      this.contentTarget.setAttribute("data-state", collapsed ? "collapsed" : "expanded");
+      this.contentTarget.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
     }
     if (this.hasTriggerTarget) {
-      this.triggerTarget.setAttribute("aria-expanded", collapsed ? "false" : "true");
+      this.triggerTarget.setAttribute("aria-expanded", this.#collapsed ? "false" : "true");
     }
   }
-  /**
-   * Shows the toggle only when it is useful: while expanded it is always shown
-   * (the user needs a way back), and while collapsed it is shown only if the
-   * text actually overflows its clamp (`scrollHeight > clientHeight`).
-   */
+  #syncTargets() {
+    if (!this.#connected) return;
+    this.#syncContentObservation();
+    this.#reflect();
+    this.#evaluateOverflow();
+  }
+  #syncContentObservation() {
+    const next = this.hasContentTarget ? this.contentTarget : null;
+    if (next === this.#observedContent) return;
+    this.#stopObservingContent();
+    if (!next) return;
+    this.#observedContent = next;
+    this.#layout.observe(next);
+    this.#layout.observeViewport();
+    next.addEventListener("load", this.#update, true);
+    if (typeof MutationObserver !== "undefined") {
+      this.#contentMutationObserver = new MutationObserver(this.#update);
+      this.#contentMutationObserver.observe(next, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+    }
+  }
+  #stopObservingContent() {
+    this.#clearDeferredHide();
+    if (this.#observedContent) {
+      this.#layout.unobserve(this.#observedContent);
+      this.#observedContent.removeEventListener("load", this.#update, true);
+    }
+    this.#observedContent = null;
+    this.#contentMutationObserver?.disconnect();
+    this.#contentMutationObserver = null;
+    this.#layout.unobserveViewport();
+  }
+  #deferHide(trigger) {
+    if (this.#deferredHideTrigger === trigger) return;
+    this.#clearDeferredHide();
+    this.#deferredHideTrigger = trigger;
+    trigger.addEventListener("blur", this.#onDeferredHideBlur);
+  }
+  #clearDeferredHide() {
+    this.#deferredHideTrigger?.removeEventListener("blur", this.#onDeferredHideBlur);
+    this.#deferredHideTrigger = null;
+  }
   #evaluateOverflow() {
     if (!this.hasTriggerTarget || !this.hasContentTarget) return;
-    if (!this.#isCollapsed) {
-      this.triggerTarget.hidden = false;
+    const trigger = this.triggerTarget;
+    const content = this.contentTarget;
+    const useful = !this.#collapsed || content.scrollHeight > content.clientHeight;
+    if (useful) {
+      this.#clearDeferredHide();
+      trigger.hidden = false;
       return;
     }
-    const content = this.contentTarget;
-    const overflowing = content.scrollHeight > content.clientHeight;
-    this.triggerTarget.hidden = !overflowing;
+    if (document.activeElement === trigger) {
+      trigger.hidden = false;
+      this.#deferHide(trigger);
+      return;
+    }
+    this.#clearDeferredHide();
+    trigger.hidden = true;
   }
 };
 var PROGRESS_PROPERTY = "--stimeo--reading-progress";
@@ -10183,7 +10977,7 @@ var RovingController = class extends Controller {
     }
   }
 };
-var FOCUSABLE_SELECTOR2 = [
+var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -10255,8 +11049,7 @@ var ScrollAreaController = class extends Controller {
    */
   #measurePosition(vp) {
     const horizontalPrimary = this.orientationValue === "horizontal" || this.orientationValue === "both" && vp.scrollHeight <= vp.clientHeight + EDGE_EPSILON;
-    const scrollPos = horizontalPrimary ? vp.scrollLeft : vp.scrollTop;
-    const maxScroll = horizontalPrimary ? vp.scrollWidth - vp.clientWidth : vp.scrollHeight - vp.clientHeight;
+    const { position: scrollPos, max: maxScroll } = logicalScrollMetrics(vp, horizontalPrimary);
     if (maxScroll <= EDGE_EPSILON) return { position: "start", progress: 0 };
     const progress = Math.min(1, Math.max(0, scrollPos / maxScroll));
     if (scrollPos <= EDGE_EPSILON) return { position: "start", progress };
@@ -10295,7 +11088,7 @@ var ScrollAreaController = class extends Controller {
     }
   }
   #hasFocusableContent(vp) {
-    return vp.querySelector(FOCUSABLE_SELECTOR2) !== null;
+    return vp.querySelector(FOCUSABLE_SELECTOR) !== null;
   }
   #hasAccessibleName(vp) {
     return vp.hasAttribute("aria-label") || vp.hasAttribute("aria-labelledby");
@@ -10431,7 +11224,7 @@ var ScrollVisibilityController = class extends Controller {
   }
   /** Scrolls the source to the top and, optionally, moves focus to a safe target. */
   toTop() {
-    const behavior = this.#prefersReducedMotion() ? "auto" : "smooth";
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
     this.#scrollSource.scrollTo({ top: 0, behavior });
     if (this.focusSelectorValue) {
       const target = document.querySelector(this.focusSelectorValue);
@@ -10479,9 +11272,6 @@ var ScrollVisibilityController = class extends Controller {
     }
     return this.#scrollSource.scrollTop;
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var ScrollspyController = class extends Controller {
   static targets = ["link"];
@@ -10720,15 +11510,23 @@ var SeparatorController = class extends Controller {
     }
   }
 };
-function maxTransitionMs2(value) {
-  const durations = value.split(",").map((part) => {
-    const trimmed = part.trim();
-    if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
-    if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1e3;
-    return 0;
-  });
-  return durations.length === 0 ? 0 : Math.max(...durations);
+
+// src/utils/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
 }
+
+// src/controllers/sidebar_controller.ts
 var SidebarController = class extends Controller {
   static targets = ["trigger", "panel", "backdrop"];
   static values = {
@@ -10736,9 +11534,11 @@ var SidebarController = class extends Controller {
     key: { type: String, default: "" },
     collapsed: { type: Boolean, default: false }
   };
-  static actions = ["close", "open", "toggle"];
+  static actions = ["beforeCache", "close", "open", "toggle"];
+  /** Exact panel currently owned by the modal lifecycle (survives target churn safely). */
+  #activePanel = null;
   /** Owns the overlay modal side effects; Escape closes, focus falls to trigger. */
-  #trap = new FocusTrap(() => this.panelTarget, {
+  #trap = new FocusTrap(() => this.#activePanel ?? this.panelTarget, {
     onEscape: () => this.close(),
     fallbackFocus: () => this.hasTriggerTarget ? this.triggerTarget : null
   });
@@ -10748,18 +11548,79 @@ var SidebarController = class extends Controller {
   #collapsed = false;
   /** The matched media query (`min-width: breakpoint`), watched for mode changes. */
   #mql = null;
-  /** Pending `transitionend` hide listener, cancelled on reopen/teardown. */
-  #pendingHide = null;
+  /** Exact normalized query currently represented by the active media-query listener. */
+  #mqlQuery = null;
+  /** Owns the cancellable close-transition wait and its bounded fallback. */
+  #transition = new TransitionCompletion();
+  /** Distinguishes dynamic target churn from callbacks around controller teardown. */
+  #connected = false;
   connect() {
+    this.#connected = true;
+    this.#activePanel = this.hasPanelTarget ? this.panelTarget : null;
     this.#collapsed = this.#restoreCollapsed();
-    this.#mql = this.#matchBreakpoint();
+    this.#mqlQuery = this.#breakpointQuery;
+    this.#mql = this.#matchBreakpoint(this.#mqlQuery);
     this.#mql?.addEventListener("change", this.#onMediaChange);
     this.#applyMode(this.#computeMode());
   }
   disconnect() {
+    this.#connected = false;
+    this.#mql?.removeEventListener("change", this.#onMediaChange);
+    this.#mql = null;
+    this.#mqlQuery = null;
+    this.#transition.cancel();
+    this.#trap.deactivate({ restoreFocus: false });
+    this.#activePanel = null;
+  }
+  /** Adopts a panel target added by a Turbo morph after the controller connected. */
+  panelTargetConnected(panel) {
+    if (!this.#connected || this.#activePanel?.isConnected && this.#activePanel !== panel) return;
+    this.#adoptPanel(panel);
+  }
+  /** Closes and releases overlay side effects when the actively trapped panel disappears. */
+  panelTargetDisconnected(panel) {
+    if (panel !== this.#activePanel) return;
+    this.#transition.cancel();
+    this.#activePanel = null;
+    if (!this.#connected) return;
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    this.#hideBackdrop();
+    this.#setExpandedAttr(false);
+    this.#trap.deactivate();
+    if (this.hasPanelTarget) this.#adoptPanel(this.panelTarget);
+  }
+  /**
+   * Rebinds responsive observation when `breakpoint` changes at runtime.
+   *
+   * Stimulus calls value callbacks before `connect()`, so the connected guard
+   * prevents an eager subscription. Equivalent normalized queries retain the
+   * existing listener instead of allocating duplicate `MediaQueryList` objects.
+   */
+  breakpointValueChanged() {
+    if (!this.#connected) return;
+    const query = this.#breakpointQuery;
+    if (this.#mqlQuery === query) return;
     this.#mql?.removeEventListener("change", this.#onMediaChange);
-    this.#cancelPendingHide();
+    this.#mqlQuery = query;
+    this.#mql = this.#matchBreakpoint(query);
+    this.#mql?.addEventListener("change", this.#onMediaChange);
+    const next = this.#computeMode();
+    if (next !== this.#mode) this.#applyMode(next);
+  }
+  /**
+   * Sanitizes overlay markup before Turbo snapshots the page.
+   *
+   * Inline state is durable and remains untouched. Overlay state is transient:
+   * pending transitions are cancelled, controller-owned open attributes are
+   * closed immediately, and modal side effects are released without moving
+   * focus during navigation.
+   */
+  beforeCache() {
+    if (!this.#connected || !this.#isOverlay) return;
+    this.#transition.cancel();
     this.#trap.deactivate({ restoreFocus: false });
+    this.#setOverlayClosedImmediate();
   }
   /** Toggles the panel: inline flips collapsed/expanded, overlay flips open/closed. */
   toggle() {
@@ -10785,17 +11646,48 @@ var SidebarController = class extends Controller {
     this.#mode = mode;
     if (this.hasPanelTarget) this.panelTarget.setAttribute("data-mode", mode);
     if (mode === "inline") {
-      this.#cancelPendingHide();
+      this.#transition.cancel();
       this.#trap.deactivate({ restoreFocus: false });
       if (this.hasPanelTarget) this.panelTarget.hidden = false;
       this.#hideBackdrop();
       this.#applyInlineState(this.#collapsed);
     } else {
-      this.#cancelPendingHide();
+      this.#transition.cancel();
       this.#trap.deactivate({ restoreFocus: false });
       this.#setOverlayClosedImmediate();
     }
   }
+  /** Reconciles a replacement panel with the current responsive mode and DOM state. */
+  #adoptPanel(panel) {
+    this.#transition.cancel();
+    const trapWasActive = this.#trap.active;
+    this.#activePanel = panel;
+    panel.setAttribute("data-mode", this.#mode);
+    if (this.#mode === "inline") {
+      panel.hidden = false;
+      panel.setAttribute("data-state", this.#collapsed ? "collapsed" : "expanded");
+      this.#hideBackdrop();
+      this.#setExpandedAttr(!this.#collapsed);
+      this.#trap.deactivate({ restoreFocus: false });
+      return;
+    }
+    if (panel.getAttribute("data-state") === "open") {
+      panel.hidden = false;
+      if (this.hasBackdropTarget) {
+        this.backdropTarget.setAttribute("data-state", "open");
+        this.backdropTarget.hidden = false;
+      }
+      this.#setExpandedAttr(true);
+      if (trapWasActive) this.#trap.deactivate({ restoreFocus: false });
+      this.#trap.activate();
+      return;
+    }
+    panel.setAttribute("data-state", "closed");
+    panel.hidden = true;
+    this.#hideBackdrop();
+    this.#setExpandedAttr(false);
+    this.#trap.deactivate();
+  }
   #onMediaChange = (event) => {
     const next = event.matches ? "inline" : "overlay";
     if (next !== this.#mode) this.#applyMode(next);
@@ -10803,13 +11695,14 @@ var SidebarController = class extends Controller {
   #computeMode() {
     return this.#mql?.matches ?? true ? "inline" : "overlay";
   }
-  #matchBreakpoint() {
+  #matchBreakpoint(query = this.#breakpointQuery) {
     if (typeof window.matchMedia !== "function") return null;
-    return window.matchMedia(`(min-width: ${this.breakpointValue}px)`);
+    return window.matchMedia(query);
   }
   // --- Inline (rail) ---------------------------------------------------------
   /** Sets, reflects, and persists the inline collapsed preference. */
   #setCollapsed(collapsed) {
+    if (collapsed === this.#collapsed) return;
     this.#collapsed = collapsed;
     this.#applyInlineState(collapsed);
     this.#persistCollapsed(collapsed);
@@ -10825,7 +11718,8 @@ var SidebarController = class extends Controller {
   /** Opens the overlay: reveal it, commit a starting frame, then trap focus. */
   #openOverlay() {
     if (!this.hasPanelTarget || this.#isOverlayOpen) return;
-    this.#cancelPendingHide();
+    this.#transition.cancel();
+    this.#activePanel = this.panelTarget;
     this.panelTarget.hidden = false;
     if (this.hasBackdropTarget) this.backdropTarget.hidden = false;
     void this.panelTarget.offsetWidth;
@@ -10854,28 +11748,18 @@ var SidebarController = class extends Controller {
   }
   /**
    * Applies `hidden` once the close transition ends so the exit slide can play,
-   * then reverts the modal side effects. With no transition (0ms / reduced
-   * motion / unstyled) it runs synchronously rather than awaiting an event that
-   * would never fire.
+   * then reverts the modal side effects. The shared waiter completes
+   * synchronously for 0ms transitions and supplies a bounded fallback when the
+   * browser emits no terminal event.
    */
   #hideAfterTransition() {
     const panel = this.panelTarget;
-    const duration = maxTransitionMs2(getComputedStyle(panel).transitionDuration);
-    if (duration === 0) {
-      this.#applyOverlayHidden();
-      return;
-    }
-    const onEnd = (event) => {
-      if (event.target !== panel) return;
-      this.#cancelPendingHide();
-      this.#applyOverlayHidden();
-    };
-    this.#pendingHide = () => panel.removeEventListener("transitionend", onEnd);
-    panel.addEventListener("transitionend", onEnd);
+    this.#activePanel = panel;
+    this.#transition.wait(panel, () => this.#applyOverlayHidden(panel));
   }
   /** Hides the panel/backdrop and tears down the trap after the exit transition. */
-  #applyOverlayHidden() {
-    if (this.hasPanelTarget) this.panelTarget.hidden = true;
+  #applyOverlayHidden(panel) {
+    panel.hidden = true;
     this.#hideBackdrop();
     this.#trap.deactivate();
   }
@@ -10884,10 +11768,6 @@ var SidebarController = class extends Controller {
     this.backdropTarget.setAttribute("data-state", "closed");
     this.backdropTarget.hidden = true;
   }
-  #cancelPendingHide() {
-    this.#pendingHide?.();
-    this.#pendingHide = null;
-  }
   // --- Shared helpers --------------------------------------------------------
   #setExpandedAttr(expanded) {
     if (this.hasTriggerTarget) {
@@ -10905,11 +11785,8 @@ var SidebarController = class extends Controller {
   #restoreCollapsed() {
     const key = this.#storageKey;
     if (key) {
-      try {
-        const stored = localStorage.getItem(key);
-        if (stored !== null) return stored === "1";
-      } catch {
-      }
+      const stored = readLocalStorage(key);
+      if (stored !== null) return stored === "1";
     }
     const domState = this.hasPanelTarget ? this.panelTarget.getAttribute("data-state") : null;
     if (domState === "collapsed") return true;
@@ -10920,14 +11797,17 @@ var SidebarController = class extends Controller {
   #persistCollapsed(collapsed) {
     const key = this.#storageKey;
     if (!key) return;
-    try {
-      localStorage.setItem(key, collapsed ? "1" : "0");
-    } catch {
-    }
+    writeLocalStorage(key, collapsed ? "1" : "0");
   }
   get #storageKey() {
     return this.keyValue ? `stimeo--sidebar:${this.keyValue}` : "";
   }
+  /** Valid breakpoint CSS query, defaulting malformed or negative values to 768px. */
+  get #breakpointQuery() {
+    const value = this.breakpointValue;
+    const breakpoint = Number.isFinite(value) && value >= 0 ? value : 768;
+    return `(min-width: ${breakpoint}px)`;
+  }
   get #isOverlay() {
     return this.#mode === "overlay";
   }
@@ -11487,23 +12367,32 @@ var StepperController = class extends Controller {
   };
   static actions = ["goto", "next", "prev"];
   static events = ["change"];
+  #isConnected = false;
   /** Normalizes an out-of-range initial `index` and renders the initial state. */
   connect() {
-    this.indexValue = this.#clampIndex(this.indexValue);
-    this.#render();
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  disconnect() {
+    this.#isConnected = false;
+  }
+  /** Re-renders when Turbo Morph or application code changes `index` at runtime. */
+  indexValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
   }
   /** Advances to the next step (ignored at the last step). */
   next() {
-    this.#moveTo(this.indexValue + 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) + 1);
   }
   /** Returns to the previous step (ignored at the first step). */
   prev() {
-    this.#moveTo(this.indexValue - 1);
+    this.#moveTo(this.#clampIndex(this.indexValue) - 1);
   }
   /** Jumps to the step carried in the action's `index` param. */
   goto(event) {
     const target = Number(event.params.index);
-    if (!Number.isFinite(target)) return;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     this.#moveTo(target);
   }
   /**
@@ -11513,16 +12402,24 @@ var StepperController = class extends Controller {
    */
   #moveTo(target) {
     const total = this.stepTargets.length;
+    if (!Number.isFinite(target) || !Number.isInteger(target)) return;
     if (target < 0 || target >= total) return;
-    if (target === this.indexValue) return;
-    if (this.linearValue && target > this.indexValue + 1) return;
-    const previous = this.indexValue;
+    const current = this.#clampIndex(this.indexValue);
+    if (target === current) return;
+    if (this.linearValue && target > current + 1) return;
+    const previous = current;
     this.indexValue = target;
-    this.#render();
+    this.#render(target);
     this.dispatch("change", {
       detail: { index: target, previous, step: this.stepTargets[target] }
     });
   }
+  /** Normalizes the public Value and reflects it without dispatching an action event. */
+  #normalizeAndRender() {
+    const normalized = this.#clampIndex(this.indexValue);
+    if (!Object.is(normalized, this.indexValue)) this.indexValue = normalized;
+    this.#render(normalized);
+  }
   /**
    * Derives each step's `data-state` and the current button's `aria-current`.
    *
@@ -11530,8 +12427,7 @@ var StepperController = class extends Controller {
    * contract assumes one operable button per step. If a step needs multiple
    * buttons, mark the navigational one first (or this would target the wrong one).
    */
-  #render() {
-    const current = this.indexValue;
+  #render(current) {
     this.stepTargets.forEach((step, index) => {
       step.dataset.state = index < current ? "complete" : index === current ? "current" : "upcoming";
       const button = step.querySelector("button");
@@ -11546,7 +12442,7 @@ var StepperController = class extends Controller {
   /** Constrains an index to `[0, total-1]` (or `0` when there are no steps). */
   #clampIndex(index) {
     const last = this.stepTargets.length - 1;
-    if (last < 0) return 0;
+    if (last < 0 || !Number.isFinite(index)) return 0;
     return Math.min(last, Math.max(0, Math.trunc(index)));
   }
 };
@@ -11636,12 +12532,9 @@ var StickToBottomController = class extends Controller {
     return this.hasContentTarget ? this.contentTarget : this.element;
   }
   #behavior() {
-    if (this.#prefersReducedMotion()) return "auto";
+    if (prefersReducedMotion()) return "auto";
     return this.behaviorValue === "smooth" ? "smooth" : "auto";
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var StickyObserverController = class extends Controller {
   static targets = ["sentinel", "element"];
@@ -11654,23 +12547,63 @@ var StickyObserverController = class extends Controller {
   #watcher = new IntersectionWatcher((entries) => this.#onIntersect(entries));
   /** Last reported stuck state, so `change` fires only on transitions. */
   #stuck = null;
+  /** Target currently owned by the watcher, used to avoid duplicate restarts. */
+  #observedSentinel = null;
+  #connected = false;
   #onIntersect(entries) {
-    const entry = entries[entries.length - 1];
-    if (!entry) return;
-    this.#setStuck(!entry.isIntersecting);
+    for (const entry of entries) {
+      if (!this.#connected || !this.#watcher.active) return;
+      this.#setStuck(!entry.isIntersecting && isBeforeRootStart(entry));
+    }
   }
   connect() {
-    if (!this.hasSentinelTarget) return;
-    this.#watcher.start(this.sentinelTarget, {
-      rootSelector: this.rootSelectorValue,
-      rootMargin: `-${this.offsetValue}px 0px 0px 0px`,
-      threshold: [0]
-    });
+    this.#connected = true;
+    this.#stuck = null;
+    this.#syncObserver();
   }
   disconnect() {
+    this.#connected = false;
     this.#watcher.stop();
+    this.#observedSentinel = null;
     this.#stuck = null;
   }
+  /** Starts observation when a sentinel is inserted after connection. */
+  sentinelTargetConnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Stops or transfers observation when the current sentinel is removed. */
+  sentinelTargetDisconnected() {
+    if (this.#connected) this.#syncObserver();
+  }
+  /** Reflects the last snapshot onto an element inserted after that snapshot. */
+  elementTargetConnected(element) {
+    if (this.#stuck !== null) {
+      element.setAttribute("data-stuck", this.#stuck ? "true" : "false");
+    }
+  }
+  /** Rebuilds the observer when Turbo morphs the configured root. */
+  rootSelectorValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  /** Rebuilds the observer when Turbo morphs the configured top offset. */
+  offsetValueChanged() {
+    if (this.#connected) this.#syncObserver(true);
+  }
+  #syncObserver(force = false) {
+    const sentinel = this.hasSentinelTarget ? this.sentinelTarget : null;
+    if (!force && sentinel === this.#observedSentinel && this.#watcher.active) return;
+    this.#watcher.stop();
+    this.#observedSentinel = null;
+    if (!sentinel) return;
+    const configuredOffset = this.offsetValue;
+    const offset = Number.isFinite(configuredOffset) ? configuredOffset : 0;
+    const started = this.#watcher.start(sentinel, {
+      rootSelector: this.rootSelectorValue,
+      rootMargin: `${-offset}px 0px 0px 0px`,
+      threshold: [0]
+    });
+    if (started) this.#observedSentinel = sentinel;
+  }
   /** Reflects the stuck state onto the sticky element and emits `change`. */
   #setStuck(next) {
     if (next === this.#stuck) return;
@@ -11956,20 +12889,32 @@ var TagsInputController = class extends Controller {
   static actions = ["onKeydown"];
   static events = ["change", "reject"];
   #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Owns IME lifecycle state for commit-key guarding. */
+  #composition = new CompositionTracker();
   /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
   connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
     this.tagsTarget.addEventListener("click", this.#onTagClick);
     this.#syncState();
   }
   /** Releases the delegated listeners so no handler outlives the element. */
   disconnect() {
+    this.#composition.disconnect();
     this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
     this.tagsTarget.removeEventListener("click", this.#onTagClick);
   }
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
   /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
   onKeydown(event) {
-    if (event.isComposing || event.keyCode === 229) return;
+    if (this.#composition.isComposing(event)) return;
     if (event.key === "Enter" || event.key === this.delimiterValue) {
       event.preventDefault();
       this.#commitInput();
@@ -12316,19 +13261,12 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    try {
-      const value = window.localStorage.getItem(this.storageKeyValue);
-      return isMode(value) ? value : null;
-    } catch {
-      return null;
-    }
+    const value = readLocalStorage(this.storageKeyValue);
+    return isMode(value) ? value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {
-    try {
-      window.localStorage.setItem(this.storageKeyValue, mode);
-    } catch {
-    }
+    writeLocalStorage(this.storageKeyValue, mode);
   }
 };
 var AM = 0;
@@ -12536,6 +13474,7 @@ var TimePickerController = class extends Controller {
 function pad(value) {
   return String(value).padStart(2, "0");
 }
+var DELEGATED_EVENTS = ["click", "focusin", "focusout", "keydown", "mouseover", "mouseout"];
 var ToastController = class extends Controller {
   static targets = ["list", "template", "item"];
   static values = {
@@ -12556,34 +13495,57 @@ var ToastController = class extends Controller {
    * Tracked so {@link disconnect} can cancel any that have not fired, preventing a
    * detached element from being mutated after it leaves the DOM (Turbo).
    */
-  #rafHandles = /* @__PURE__ */ new Set();
+  #rafHandles = /* @__PURE__ */ new Map();
   /** Track active timeouts mapped by each toast element for safe cancellation. */
   #activeTimeouts = /* @__PURE__ */ new Map();
   /** Track active pause reasons (hover/focus) per toast for WCAG 2.2.1 pause/resume. */
   #pauseReasons = /* @__PURE__ */ new Map();
+  /** The stable list that owns delegated listeners for dynamically added items. */
+  #delegatedList = null;
   connect() {
+    this.#connectDelegatedEvents();
     this.enforceMaxLimit();
     for (const item of this.itemTargets) {
-      if (!this.#activeTimeouts.has(item)) {
+      if (!this.#activeTimeouts.has(item) && item.dataset.state !== "leaving") {
         this.#startTimer(item);
       }
     }
   }
   disconnect() {
+    this.#disconnectDelegatedEvents();
     this.#timers.clearAll();
-    for (const handle of this.#rafHandles) {
+    for (const handle of this.#rafHandles.values()) {
       window.cancelAnimationFrame(handle);
     }
     this.#rafHandles.clear();
     this.#activeTimeouts.clear();
     this.#pauseReasons.clear();
   }
+  /** Rebinds delegated interaction when Turbo replaces the list target in place. */
+  listTargetConnected(element) {
+    if (this.#delegatedList !== element) this.#connectDelegatedEvents(element);
+  }
+  /** Releases delegation only when the removed target is its current owner. */
+  listTargetDisconnected(element) {
+    if (this.#delegatedList === element) this.#disconnectDelegatedEvents();
+  }
   durationValueChanged() {
-    if (this.durationValue > 0) {
-      for (const item of this.itemTargets) {
-        if (!this.#activeTimeouts.has(item)) {
-          this.#startTimer(item);
-        }
+    for (const item of this.itemTargets) {
+      if (item.dataset.state === "leaving") continue;
+      const pauseReasons = this.#pauseReasons.get(item);
+      this.#clearTimer(item);
+      if (this.durationValue <= 0) {
+        item.removeAttribute("data-paused");
+      } else if (pauseReasons && pauseReasons.size > 0) {
+        this.#pauseReasons.set(item, pauseReasons);
+        this.#activeTimeouts.set(item, {
+          id: 0,
+          startedAt: 0,
+          remaining: this.durationValue
+        });
+        item.setAttribute("data-paused", "true");
+      } else {
+        this.#startTimer(item);
       }
     }
   }
@@ -12597,17 +13559,21 @@ var ToastController = class extends Controller {
    */
   itemTargetConnected(element) {
     this.enforceMaxLimit();
+    if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
     this.#startTimer(element);
     element.setAttribute("data-state", "entering");
+    this.#cancelAnimation(element);
     const handle = window.requestAnimationFrame(() => {
-      this.#rafHandles.delete(handle);
+      this.#rafHandles.delete(element);
+      if (element.parentNode !== this.listTarget || element.dataset.state === "leaving") return;
       element.setAttribute("data-state", "visible");
     });
-    this.#rafHandles.add(handle);
+    this.#rafHandles.set(element, handle);
   }
   /** Clears any active timer when a toast is removed from the DOM. */
   itemTargetDisconnected(element) {
     this.#clearTimer(element);
+    this.#cancelAnimation(element);
   }
   /**
    * Shows a new toast. Accepts its content from either a Stimulus action param
@@ -12630,10 +13596,9 @@ var ToastController = class extends Controller {
     const item = clone.querySelector("[data-stimeo--toast-target='item']");
     if (!item) return;
     const bodySlot = item.querySelector("[data-toast-slot='body']");
-    if (bodySlot) {
-      bodySlot.textContent = body;
-    }
-    item.setAttribute("role", this.#readField(event, "type") === "alert" ? "alert" : "status");
+    if (!bodySlot) return;
+    bodySlot.textContent = body;
+    bodySlot.setAttribute("role", this.#readField(event, "type") === "alert" ? "alert" : "status");
     this.listTarget.appendChild(item);
     this.dispatch("show", { detail: { item } });
   }
@@ -12655,18 +13620,15 @@ var ToastController = class extends Controller {
   }
   /** Dismisses the toast that contained the trigger. */
   dismiss(event) {
-    const target = event.currentTarget || event.target;
-    if (!target) return;
-    const item = target.closest("[data-stimeo--toast-target='item']");
+    const item = this.#itemFromEvent(event);
     if (!item) return;
     this.#removeWithTransition(item, "user");
   }
   /** Dismisses the focused toast when Escape is pressed. */
   onKeydown(event) {
     if (event.key === "Escape") {
-      const target = event.currentTarget || event.target;
-      if (!target) return;
-      const item = target.closest("[data-stimeo--toast-target='item']");
+      if (event.defaultPrevented || event.isComposing) return;
+      const item = this.#itemFromEvent(event);
       if (!item) return;
       event.preventDefault();
       this.#removeWithTransition(item, "user");
@@ -12692,6 +13654,10 @@ var ToastController = class extends Controller {
     this.#timers.clear(timeout.id);
     const elapsed = Date.now() - timeout.startedAt;
     const remaining = Math.max(0, timeout.remaining - elapsed);
+    if (remaining <= 0) {
+      this.#removeWithTransition(item, "timeout");
+      return;
+    }
     this.#activeTimeouts.set(item, { id: 0, startedAt: 0, remaining });
     item.setAttribute("data-paused", "true");
   }
@@ -12703,14 +13669,17 @@ var ToastController = class extends Controller {
     reasons.delete(this.#pauseReason(event));
     if (reasons.size > 0) return;
     const timeout = this.#activeTimeouts.get(item);
-    if (!timeout || timeout.remaining <= 0) return;
+    if (!timeout) return;
+    if (timeout.id !== 0 || timeout.remaining <= 0) return;
     item.removeAttribute("data-paused");
     this.#startTimer(item, timeout.remaining);
   }
   /** Resolves the toast item element a pause/resume event targets. */
   #itemFromEvent(event) {
-    const target = event.currentTarget || event.target;
-    return target?.closest("[data-stimeo--toast-target='item']") ?? null;
+    const target = event.target instanceof Element ? event.target : event.currentTarget;
+    if (!(target instanceof Element) || !this.hasListTarget) return null;
+    const item = target.closest("[data-stimeo--toast-target='item']");
+    return item && this.listTarget.contains(item) ? item : null;
   }
   /** Classifies a pause/resume event as a hover or focus reason. */
   #pauseReason(event) {
@@ -12726,7 +13695,9 @@ var ToastController = class extends Controller {
     return reasons;
   }
   #startTimer(element, duration = this.durationValue) {
-    if (duration <= 0) return;
+    if (duration <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
+      return;
+    }
     this.#clearTimer(element);
     const id = this.#timers.set(() => {
       this.#removeWithTransition(element, "timeout");
@@ -12742,16 +13713,16 @@ var ToastController = class extends Controller {
     this.#pauseReasons.delete(element);
   }
   #removeWithTransition(element, reason) {
+    if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
     this.#clearTimer(element);
+    this.#cancelAnimation(element);
     element.setAttribute("data-state", "leaving");
     const finalize = () => {
-      if (element.parentNode === this.listTarget) {
-        this.listTarget.removeChild(element);
-      }
+      if (element.parentNode !== this.listTarget) return;
+      this.listTarget.removeChild(element);
       this.dispatch("dismiss", { detail: { item: element, reason } });
     };
-    const transitions = window.getComputedStyle(element).transitionDuration;
-    const duration = cssTimeToMs(transitions);
+    const duration = maxTransitionTotalMs(window.getComputedStyle(element));
     if (duration > 0) {
       this.#timers.set(finalize, duration);
     } else {
@@ -12769,21 +13740,60 @@ var ToastController = class extends Controller {
    */
   enforceMaxLimit() {
     const currentItems = this.itemTargets;
-    if (currentItems.length > this.maxValue) {
-      const excessCount = currentItems.length - this.maxValue;
+    const max = Math.max(0, this.maxValue);
+    if (currentItems.length > max) {
+      const excessCount = currentItems.length - max;
       for (let i = 0; i < excessCount; i++) {
         const oldest = currentItems[i];
         if (oldest) this.#removeWithTransition(oldest, "timeout");
       }
     }
   }
+  /** Wires stable-container delegation so newly appended items work immediately. */
+  #connectDelegatedEvents(list = this.hasListTarget ? this.listTarget : null) {
+    this.#disconnectDelegatedEvents();
+    if (!list) return;
+    this.#delegatedList = list;
+    for (const type of DELEGATED_EVENTS) {
+      this.#delegatedList.addEventListener(type, this.#onListEvent);
+    }
+  }
+  /** Releases every delegated listener from the exact list that owns it. */
+  #disconnectDelegatedEvents() {
+    if (!this.#delegatedList) return;
+    for (const type of DELEGATED_EVENTS) {
+      this.#delegatedList.removeEventListener(type, this.#onListEvent);
+    }
+    this.#delegatedList = null;
+  }
+  /** Routes every delegated item interaction from the stable list. */
+  #onListEvent = (event) => {
+    if (event.type === "click") {
+      const target = event.target instanceof Element ? event.target : null;
+      const trigger = target?.closest("[data-toast-dismiss]");
+      if (trigger && this.#delegatedList?.contains(trigger)) this.dismiss(event);
+    } else if (event.type === "keydown") {
+      this.onKeydown(event);
+    } else if (this.#crossesItemBoundary(event)) {
+      if (event.type === "focusin" || event.type === "mouseover") this.pause(event);
+      else this.resume(event);
+    }
+  };
+  /** Whether a bubbling focus/pointer event enters or leaves a toast boundary. */
+  #crossesItemBoundary(event) {
+    const item = this.#itemFromEvent(event);
+    if (!item) return false;
+    const related = "relatedTarget" in event ? event.relatedTarget : null;
+    return !(related instanceof Node && item.contains(related));
+  }
+  /** Cancels the pending entering-to-visible frame owned by one item. */
+  #cancelAnimation(element) {
+    const handle = this.#rafHandles.get(element);
+    if (handle === void 0) return;
+    window.cancelAnimationFrame(handle);
+    this.#rafHandles.delete(element);
+  }
 };
-function cssTimeToMs(value) {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-}
 var ToggleGroupController = class extends Controller {
   static targets = ["item"];
   static values = {
@@ -12939,27 +13949,39 @@ var TooltipController = class extends Controller {
     hideDelay: { type: Number, default: 0 },
     closeOnScroll: { type: Boolean, default: false }
   };
-  static actions = ["hide", "onKeydown", "show"];
-  /** Pending show/hide timers, torn down together on disconnect. */
+  static actions = ["hide", "show"];
+  /** Registry whose pending timers are cancelled individually with their guard ids. */
   #timers = new SafeTimeout();
-  /** The id of the currently pending show or hide timer, if any. */
+  /** Escape-stack membership while shown; the shared resolver dismisses via it. */
+  #escapeLayer = new EscapeLayer();
+  /** The id of the currently pending show timer, if any. */
   #pendingShow = null;
+  /** The id of the currently pending hide timer, if any. */
   #pendingHide = null;
+  /** Whether focus or the pointer currently requires the tooltip to persist. */
+  #focusActive = false;
+  #pointerActive = false;
   /** Cleanup for the dismiss-on-scroll listeners while shown, or `null`. */
   #stopScrollDismiss = null;
-  /** Starts hidden. */
+  /** Starts hidden with no stale timer or interaction state from a prior connection. */
   connect() {
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#resetInteractionState();
     this.#conceal();
   }
-  /** Clears timers and the document `Escape` / scroll listeners so nothing outlives the element. */
+  /** Clears timers, the Escape-stack membership, and scroll listeners so nothing outlives the element. */
   disconnect() {
-    this.#timers.clearAll();
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#resetInteractionState();
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
   }
-  /** Shows the tooltip, after `showDelay` ms (or immediately at 0). Cancels a pending hide. */
-  show() {
+  /** Shows after `showDelay`, recording the focus/pointer reason supplied by an action event. */
+  show(event) {
+    this.#activateInteraction(event);
     this.#cancelHide();
     if (this.#isVisible || this.#pendingShow !== null) return;
     if (this.showDelayValue <= 0) {
@@ -12971,8 +13993,13 @@ var TooltipController = class extends Controller {
       this.#reveal();
     }, this.showDelayValue);
   }
-  /** Hides the tooltip, after `hideDelay` ms (or immediately at 0). Cancels a pending show. */
-  hide() {
+  /** Hides after `hideDelay` once no focus/pointer reason remains; eventless calls are explicit. */
+  hide(event) {
+    const interactionEnded = this.#deactivateInteraction(event);
+    if (interactionEnded && this.#hasActiveInteraction) {
+      this.#cancelHide();
+      return;
+    }
     this.#cancelShow();
     if (!this.#isVisible || this.#pendingHide !== null) return;
     if (this.hideDelayValue <= 0) {
@@ -12984,52 +14011,57 @@ var TooltipController = class extends Controller {
       this.#conceal();
     }, this.hideDelayValue);
   }
-  /**
-   * Dismisses the tooltip on `Escape` from the trigger. The authoritative
-   * dismissal path is the document-level listener (added while shown) so a
-   * hover-triggered tooltip is dismissible regardless of focus; this handler
-   * keeps the documented `keydown->#onKeydown` binding meaningful too.
-   */
-  onKeydown(event) {
-    if (event.key === "Escape" && this.#isVisible) {
-      event.preventDefault();
-      this.#cancelShow();
-      this.#cancelHide();
-      this.#conceal();
-    }
-  }
-  /** Reveals the content and starts watching for a dismissing `Escape`/scroll. */
+  /** Reveals the content and joins the Escape stack / starts the scroll watcher. */
   #reveal() {
     if (!this.hasContentTarget) return;
     this.contentTarget.hidden = false;
     this.contentTarget.setAttribute("data-state", "open");
-    document.addEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.activate(document, { onDismiss: () => this.#dismiss() });
     if (this.closeOnScrollValue && !this.#stopScrollDismiss) {
-      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => {
-        this.#cancelShow();
-        this.#cancelHide();
-        this.#conceal();
-      });
+      this.#stopScrollDismiss = observeScrollDismiss(this.element, () => this.#dismiss());
     }
   }
-  /** Hides the content and stops watching for `Escape`/scroll. */
+  /** Hides the content and leaves the Escape stack / stops the scroll watcher. */
   #conceal() {
-    document.removeEventListener("keydown", this.#onDocumentKeydown);
+    this.#escapeLayer.deactivate();
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;
     if (!this.hasContentTarget) return;
     this.contentTarget.hidden = true;
     this.contentTarget.setAttribute("data-state", "closed");
   }
-  /** Document-level `Escape` watcher (active only while shown). */
-  #onDocumentKeydown = (event) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.#cancelShow();
-      this.#cancelHide();
-      this.#conceal();
+  /** Cancels pending timers and conceals immediately (shared Escape / scroll path). */
+  #dismiss() {
+    this.#cancelShow();
+    this.#cancelHide();
+    this.#conceal();
+  }
+  /** Records the modality whose enter/focus event requires the tooltip to stay visible. */
+  #activateInteraction(event) {
+    if (event?.type === "mouseenter") this.#pointerActive = true;
+    if (event?.type === "focusin") this.#focusActive = true;
+  }
+  /** Clears a modality on leave/blur and reports whether the event represented such a change. */
+  #deactivateInteraction(event) {
+    if (event?.type === "mouseleave") {
+      this.#pointerActive = false;
+      return true;
     }
-  };
+    if (event?.type === "focusout") {
+      this.#focusActive = false;
+      return true;
+    }
+    return false;
+  }
+  /** Discards interaction reasons at a lifecycle boundary. */
+  #resetInteractionState() {
+    this.#focusActive = false;
+    this.#pointerActive = false;
+  }
+  /** Whether focus or pointer presence still requires a persistent tooltip. */
+  get #hasActiveInteraction() {
+    return this.#focusActive || this.#pointerActive;
+  }
   /** Cancels any pending show timer. */
   #cancelShow() {
     if (this.#pendingShow !== null) {
@@ -13050,12 +14082,6 @@ var TooltipController = class extends Controller {
   }
 };
 var tokensOf = (value) => value.split(/\s+/).filter(Boolean);
-var firstTimeMs = (value) => {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-};
 var TransitionController = class extends Controller {
   static values = {
     enter: { type: String, default: "" },
@@ -13068,9 +14094,9 @@ var TransitionController = class extends Controller {
   };
   static actions = ["enter", "leave", "toggle"];
   static events = ["entered", "left"];
-  #timers = new SafeTimeout();
+  /** Owns the cancellable completion wait (terminal events + bounded fallback). */
+  #transition = new TransitionCompletion();
   #rafId = null;
-  #endListener = null;
   connect() {
     this.#strip();
     this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
@@ -13097,7 +14123,7 @@ var TransitionController = class extends Controller {
     const isEnter = kind === "enter";
     if (isEnter) this.element.hidden = false;
     this.element.setAttribute("data-transition-state", isEnter ? "entering" : "leaving");
-    if (this.#prefersReducedMotion()) {
+    if (prefersReducedMotion()) {
       this.#finish(kind);
       return;
     }
@@ -13109,12 +14135,13 @@ var TransitionController = class extends Controller {
       this.#rafId = null;
       this.#remove(from);
       this.#add(to);
-      this.#awaitEnd(() => this.#finish(kind));
+      this.#transition.wait(this.element, () => this.#finish(kind), {
+        timeoutMs: this.timeoutValue
+      });
     });
   }
   /** Settles the element into the completed state, clearing the stage classes. */
   #finish(kind) {
-    this.#cleanupEnd();
     this.#strip();
     if (kind === "enter") {
       this.element.setAttribute("data-transition-state", "entered");
@@ -13125,29 +14152,13 @@ var TransitionController = class extends Controller {
       this.dispatch("left", { detail: {} });
     }
   }
-  /** Resolves on the element's own `transitionend`, with a safety timeout fallback. */
-  #awaitEnd(done) {
-    this.#endListener = (event) => {
-      if (event.target === this.element) done();
-    };
-    this.element.addEventListener("transitionend", this.#endListener);
-    const ms = this.timeoutValue > 0 ? this.timeoutValue : this.#duration();
-    this.#timers.set(done, ms);
-  }
-  #cleanupEnd() {
-    if (this.#endListener) {
-      this.element.removeEventListener("transitionend", this.#endListener);
-      this.#endListener = null;
-    }
-    this.#timers.clearAll();
-  }
   /** Cancels any in-flight transition (interruption / teardown). */
   #cancel() {
     if (this.#rafId !== null) {
       this.#cancelRaf(this.#rafId);
       this.#rafId = null;
     }
-    this.#cleanupEnd();
+    this.#transition.cancel();
     this.#strip();
   }
   #add(...lists) {
@@ -13169,13 +14180,6 @@ var TransitionController = class extends Controller {
       this.leaveToValue
     );
   }
-  /** Auto-computed safety duration (transition time + delay, with a small buffer). */
-  #duration() {
-    if (typeof window.getComputedStyle !== "function") return 0;
-    const style = window.getComputedStyle(this.element);
-    const total = firstTimeMs(style.transitionDuration) + firstTimeMs(style.transitionDelay);
-    return total > 0 ? total + 50 : 0;
-  }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {
       return window.requestAnimationFrame(() => callback());
@@ -13186,9 +14190,6 @@ var TransitionController = class extends Controller {
     if (typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(id);
     else window.clearTimeout(id);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 var TYPEAHEAD_TIMEOUT2 = 500;
 var TreeViewController = class extends Controller {