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

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`)
@@ -2045,17 +2164,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 +2224,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 +2270,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
+        if (event.defaultPrevented || this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -2214,7 +2347,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 +2367,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 +2395,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 +2404,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 +2444,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 +2469,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 +2485,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 +2520,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 +2551,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 +2561,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 +2853,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 +2894,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 +2914,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 +2927,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 +2940,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 +2951,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));
@@ -2889,8 +3126,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 +3621,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 +4150,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 +4163,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,23 +4215,44 @@ 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) {
@@ -4136,35 +4396,46 @@ var DrawerController = class extends Controller {
     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 +4448,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 +4459,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 +4497,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 +4537,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;
@@ -4794,25 +5107,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 +5410,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.
    *
@@ -5386,21 +5680,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 +5731,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 +5759,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) {
@@ -6029,6 +6315,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 +6595,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 +6622,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 +6679,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 +6698,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 +6750,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 +6759,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 +6806,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 +6841,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 +6878,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 +6892,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 +7097,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 +7129,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 +7180,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 +7213,7 @@ var MultiSelectController = class extends Controller {
         }
         break;
       case "Escape":
+        if (event.defaultPrevented || this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -7084,18 +7446,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 +7517,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 +7556,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 +8140,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 +8165,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 +8185,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 +8267,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;
@@ -8839,6 +9210,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 +9323,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 +9431,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 +9467,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 +9478,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 +9494,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. */
@@ -10183,7 +10555,7 @@ var RovingController = class extends Controller {
     }
   }
 };
-var FOCUSABLE_SELECTOR2 = [
+var FOCUSABLE_SELECTOR = [
   "a[href]",
   "button:not([disabled])",
   "input:not([disabled])",
@@ -10295,7 +10667,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");
@@ -11956,20 +12328,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();
@@ -12536,6 +12920,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 +12941,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 +13005,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 +13042,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 +13066,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 +13100,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 +13115,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 +13141,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,12 +13159,13 @@ 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;
@@ -12769,14 +13187,59 @@ 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() ?? "";
@@ -12939,27 +13402,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 +13446,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 +13464,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) {