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

data/dist/controllers/focus_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/focus_controller.ts
 
+// src/utils/escape_layer.ts
+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 {
@@ -15,6 +99,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}. */
@@ -50,6 +136,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();
   }
   /**
@@ -62,6 +150,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) {
@@ -90,15 +179,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. */

data/dist/controllers/form_validation_controller.js

@@ -181,8 +181,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.
    *

data/dist/controllers/hover_card_controller.js

@@ -2,6 +2,90 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/hover_card_controller.ts
 
+// src/utils/escape_layer.ts
+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/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -88,21 +172,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;
   }
@@ -134,32 +223,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). */
@@ -168,13 +251,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) {

data/dist/controllers/listbox_controller.js

@@ -145,6 +145,7 @@ var ListboxController = class extends Controller {
         this.#commitActive();
         break;
       case "Escape":
+        if (event.defaultPrevented || event.isComposing) break;
         event.preventDefault();
         this.close();
         this.triggerTarget.focus();

data/dist/controllers/menu_controller.js

@@ -1,5 +1,150 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/menu_controller.ts
+
+// 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/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
 // src/controllers/menu_controller.ts
 var MenuController = class extends Controller {
   static targets = ["trigger", "menu", "item"];
@@ -11,13 +156,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). */
@@ -31,12 +183,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");
@@ -81,18 +240,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();
   }
@@ -100,6 +259,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();