stimeo-ui 0.2.1 → 0.3.0

data/dist/controllers/pagination_controller.js

@@ -1,7 +1,53 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/pagination_controller.ts
-var PaginationController = class extends Controller {
+
+// src/utils/focus_candidate.ts
+function inheritsFieldsetDisabled(control) {
+  let fieldset = control.closest("fieldset[disabled]");
+  while (fieldset) {
+    const legend = Array.from(fieldset.children).find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(control)) return true;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null;
+  }
+  return false;
+}
+function canTakeFocus(element) {
+  if (element.closest("[hidden]")) return false;
+  if (!("disabled" in element)) return true;
+  if (element.disabled) return false;
+  return !inheritsFieldsetDisabled(element);
+}
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
+// src/controllers/pagination_controller.ts
+var PaginationController = class _PaginationController extends Controller {
   static targets = ["page", "prev", "next"];
   static values = {
     page: { type: Number, default: 1 },
@@ -9,79 +55,164 @@ var PaginationController = class extends Controller {
   };
   static actions = ["next", "prev", "select"];
   static events = ["change"];
+  /** Marks a `disabled` this controller applied at a boundary (ownership flag). */
+  static #BOUNDARY_ATTR = "data-stimeo--pagination-boundary-disabled";
+  #isConnected = false;
+  /** The `tabindex` this instance lends the root for the focus fallback. */
+  #tabindex = new TabindexLoan();
   /** Normalizes out-of-range initial values and renders the initial state. */
   connect() {
-    this.totalValue = Math.max(1, Math.trunc(this.totalValue));
-    this.pageValue = Math.min(this.totalValue, Math.max(1, Math.trunc(this.pageValue)));
+    this.#isConnected = true;
+    this.#normalizeAndRender();
+  }
+  /** Reverts the one attribute the controller adds outside its state hooks. */
+  disconnect() {
+    this.#isConnected = false;
+    this.#tabindex.returnAll();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `page` at runtime. */
+  pageValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `total` at runtime. */
+  totalValueChanged() {
+    if (!this.#isConnected) return;
+    this.#normalizeAndRender();
+  }
+  /** Syncs a page button appended/replaced at runtime (the consumer owns the list). */
+  pageTargetConnected() {
+    if (!this.#isConnected) return;
+    this.#render();
+  }
+  /** Syncs a `prev` button appended/replaced at runtime. */
+  prevTargetConnected() {
+    if (!this.#isConnected) return;
+    this.#render();
+  }
+  /** Syncs a `next` button appended/replaced at runtime. */
+  nextTargetConnected() {
+    if (!this.#isConnected) return;
     this.#render();
   }
   /** Makes the clicked page button (its `data-page`) current. */
   select(event) {
     const button = event.currentTarget;
-    const page = Number(button.dataset.page);
-    if (!Number.isFinite(page)) return;
+    const raw = button.dataset.page;
+    if (raw === void 0 || raw.trim() === "") return;
+    const page = Number(raw);
+    if (!Number.isInteger(page)) return;
     this.#goto(page);
   }
   /** Steps to the previous page. */
   prev() {
-    this.#goto(this.pageValue - 1);
+    this.#goto(this.#page - 1);
   }
   /** Steps to the next page. */
   next() {
-    this.#goto(this.pageValue + 1);
+    this.#goto(this.#page + 1);
   }
   /** Moves to `page` (clamped to `[1, total]`), re-renders, and dispatches `change`. */
   #goto(page) {
-    const total = Math.max(1, Math.trunc(this.totalValue));
-    const target = Math.min(total, Math.max(1, Math.trunc(page)));
-    if (target === this.pageValue) return;
-    const previous = this.pageValue;
+    if (!Number.isFinite(page)) return;
+    const previous = this.#page;
+    const target = this.#clamp(page);
+    if (target === previous) return;
     this.pageValue = target;
     this.#render();
     this.dispatch("change", {
-      detail: { page: target, total: this.totalValue, previous }
+      detail: { page: target, total: this.#total, previous }
     });
   }
+  /** Writes the normalized Values back (only when they differ) and renders. */
+  #normalizeAndRender() {
+    const total = this.#total;
+    if (!Object.is(total, this.totalValue)) this.totalValue = total;
+    const page = this.#page;
+    if (!Object.is(page, this.pageValue)) this.pageValue = page;
+    this.#render();
+  }
   /** Syncs `aria-current` on the page buttons and the prev/next `disabled` state. */
   #render() {
+    const page = this.#page;
     for (const button of this.pageTargets) {
-      if (Number(button.dataset.page) === this.pageValue) {
+      if (Number(button.dataset.page) === page) {
         button.setAttribute("aria-current", "page");
       } else {
         button.removeAttribute("aria-current");
       }
     }
-    this.#setDisabled(this.hasPrevTarget ? this.prevTarget : null, this.pageValue <= 1);
-    this.#setDisabled(
-      this.hasNextTarget ? this.nextTarget : null,
-      this.pageValue >= this.totalValue
-    );
+    const prev = this.hasPrevTarget ? this.prevTarget : null;
+    const next = this.hasNextTarget ? this.nextTarget : null;
+    const atStart = page <= 1;
+    const atEnd = page >= this.#total;
+    const prevStaysDisabled = this.#disabledAfter(prev, atStart);
+    const nextStaysDisabled = this.#disabledAfter(next, atEnd);
+    this.#release(prev, atStart);
+    this.#release(next, atEnd);
+    this.#disable(prev, atStart, nextStaysDisabled ? null : next);
+    this.#disable(next, atEnd, prevStaysDisabled ? null : prev);
+  }
+  /** Whether a boundary button will still be `disabled` once this render applies. */
+  #disabledAfter(button, atBoundary) {
+    if (!button) return true;
+    if (atBoundary) return true;
+    return button.disabled && !this.#owns(button);
+  }
+  /** Releases the boundary `disabled` this controller owns, once away from it. */
+  #release(button, atBoundary) {
+    if (!button || atBoundary || !this.#owns(button)) return;
+    button.disabled = false;
+    button.removeAttribute(_PaginationController.#BOUNDARY_ATTR);
   }
   /**
-   * Sets `disabled` on a boundary button, first moving focus off it if it is the
-   * active element so disabling never strands focus.
+   * Disables a boundary button, first moving focus off it when it is the active
+   * element so disabling never strands focus.
    */
-  #setDisabled(button, disabled) {
-    if (!button) return;
-    if (disabled && button === document.activeElement) {
-      this.#moveFocusAwayFrom(button);
-    }
-    button.disabled = disabled;
+  #disable(button, atBoundary, opposite) {
+    if (!button || !atBoundary) return;
+    if (button.disabled && !this.#owns(button)) return;
+    if (button === document.activeElement) this.#moveFocusAwayFrom(opposite);
+    button.disabled = true;
+    button.setAttribute(_PaginationController.#BOUNDARY_ATTR, "");
   }
-  /** Moves focus to the opposite enabled control, falling back to the current page. */
-  #moveFocusAwayFrom(button) {
-    const opposite = button === (this.hasPrevTarget ? this.prevTarget : null) ? this.hasNextTarget ? this.nextTarget : null : this.hasPrevTarget ? this.prevTarget : null;
+  /**
+   * Moves focus to `opposite` (already resolved to `null` when it will stay
+   * disabled), else to the current page button, else to the landmark itself.
+   */
+  #moveFocusAwayFrom(opposite) {
+    const page = this.#page;
     const currentPage = this.pageTargets.find(
-      (candidate) => Number(candidate.dataset.page) === this.pageValue
+      (candidate) => Number(candidate.dataset.page) === page
+    );
+    const destination = [opposite, currentPage].find(
+      (candidate) => candidate != null && canTakeFocus(candidate)
     );
-    const destination = opposite && !opposite.disabled ? opposite : currentPage;
     if (destination) {
       destination.focus();
       return;
     }
-    if (!this.element.hasAttribute("tabindex")) this.element.setAttribute("tabindex", "-1");
+    this.#tabindex.lend(this.element);
     this.element.focus();
   }
+  /** Total pages, normalized to a finite integer >= 1. */
+  get #total() {
+    const total = this.totalValue;
+    return Number.isFinite(total) ? Math.max(1, Math.trunc(total)) : 1;
+  }
+  /** The current page, normalized into `[1, total]`. */
+  get #page() {
+    return this.#clamp(this.pageValue);
+  }
+  /** Constrains `page` to `[1, total]`; a non-finite page falls back to page 1. */
+  #clamp(page) {
+    if (!Number.isFinite(page)) return 1;
+    return Math.min(this.#total, Math.max(1, Math.trunc(page)));
+  }
+  /** Whether the button's current `disabled` was applied by boundary control. */
+  #owns(button) {
+    return button.hasAttribute(_PaginationController.#BOUNDARY_ATTR);
+  }
 };
 
 export { PaginationController };

data/dist/controllers/persist_controller.js

@@ -182,12 +182,12 @@ var PersistController = class extends Controller {
   }
   /**
    * Persistable fields paired with a stable storage key. Uniquely-named fields key
-   * by their name (unchanged, backward-compatible). Repeated same-name fields
-   * (e.g. a `tags[]` checkbox group or array text inputs) are disambiguated by
-   * DOM-order occurrence — the first keeps its plain `name` (backward-
-   * compatible), later ones get a NUL-separated index suffix — so each is stored and
-   * restored individually instead of the last one clobbering the rest. Radios are
-   * the exception: a group intentionally shares one key (one value per name).
+   * by their name. Repeated same-name fields (e.g. a `tags[]` checkbox group or
+   * array text inputs) are disambiguated by DOM-order occurrence — the first keeps
+   * its plain `name`, later ones get a NUL-separated index suffix — so each is
+   * stored and restored individually instead of the last one clobbering the rest.
+   * Radios are the exception: a group intentionally shares one key (one value per
+   * name).
    */
   #fieldEntries() {
     const entries = [];

data/dist/controllers/pointer_drag_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/pointer_drag_controller.ts
 
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/detach_gate.ts
 var DetachGate = class _DetachGate {
   /** Set while a probe is queued, waiting for a reconnect to cancel it. */
@@ -186,8 +192,10 @@ var PointerDragController = class _PointerDragController extends Controller {
     if (this.disabledValue) return;
     const handle = this.#handleFor(event.target);
     if (!handle) return;
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (event.key === "Escape") {
-      if (event.defaultPrevented || event.isComposing) return;
+      if (event.isComposing) return;
       if (this.#pointer?.started) {
         const { pointerType } = this.#pointer;
         this.#teardownSessions();

data/dist/controllers/popover_controller.js

@@ -133,7 +133,7 @@ var PopoverController = class _PopoverController extends Controller {
   /** Starts closed and registers the standing dismissal listeners. */
   connect() {
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, true);
     this.element.addEventListener("focusout", this.#onFocusOut);
   }
   /**
@@ -144,7 +144,7 @@ var PopoverController = class _PopoverController extends Controller {
    */
   disconnect() {
     this.#escapeLayer.deactivate();
-    document.removeEventListener("click", this.#onOutsideClick);
+    document.removeEventListener("click", this.#onOutsideClick, true);
     this.element.removeEventListener("focusout", this.#onFocusOut);
     this.#stopScrollDismiss?.();
     this.#stopScrollDismiss = null;

data/dist/controllers/radio_group_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/radio_group_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowStep(key, element) {
+  if (key === "ArrowDown") return 1;
+  if (key === "ArrowUp") return -1;
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return 0;
+  const forward = isRtl(element) ? "ArrowLeft" : "ArrowRight";
+  return key === forward ? 1 : -1;
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -59,17 +77,18 @@ var RadioGroupController = class extends Controller {
   }
   /** Arrow/Home/End/Space navigation with selection-follows-focus. */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const current = this.radioTargets.indexOf(event.currentTarget);
     if (current === -1) return;
     let next = null;
+    const step = logicalArrowStep(event.key, this.element);
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        next = rovingMove(current, this.radioTargets.length, 1);
-        break;
       case "ArrowUp":
       case "ArrowLeft":
-        next = rovingMove(current, this.radioTargets.length, -1);
+        next = rovingMove(current, this.radioTargets.length, step);
         break;
       case "Home":
         next = 0;

data/dist/controllers/range_slider_controller.js

@@ -1,5 +1,23 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/range_slider_controller.ts
+
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function logicalArrowKey(key, element) {
+  if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
+  if (!isRtl(element)) return key;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/controllers/range_slider_controller.ts
 var START_PROPERTY = "--stimeo-range-start";
 var END_PROPERTY = "--stimeo-range-end";
@@ -10,12 +28,17 @@ var RangeSliderController = class extends Controller {
     max: { type: Number, default: 100 },
     step: { type: Number, default: 1 },
     start: { type: Number, default: 0 },
-    end: { type: Number, default: 100 }
+    end: { type: Number, default: 100 },
+    logicalTrack: { type: Boolean, default: false }
   };
   static actions = ["onKeydown", "onPointerDown"];
   static events = ["change"];
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
+  /** Whether the consumer declared a mirroring track and the direction mirrors it. */
+  get #mirrored() {
+    return this.logicalTrackValue && isRtl(this.element);
+  }
   /** Normalizes the initial pair (clamped, snapped, ordered) and renders. */
   connect() {
     const lo = Math.min(this.startValue, this.endValue);
@@ -29,6 +52,7 @@ var RangeSliderController = class extends Controller {
   }
   /** Keyboard stepping for whichever thumb is focused (the action's element). */
   onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
     const thumb = event.currentTarget;
     const isStart = this.hasStartThumbTarget && thumb === this.startThumbTarget;
     const current = isStart ? this.startValue : this.endValue;
@@ -36,7 +60,7 @@ var RangeSliderController = class extends Controller {
     const upper = isStart ? this.endValue : this.maxValue;
     const big = this.stepValue * 10;
     let next = null;
-    switch (event.key) {
+    switch (this.#mirrored ? logicalArrowKey(event.key, this.element) : event.key) {
       case "ArrowRight":
       case "ArrowUp":
         next = current + this.stepValue;
@@ -66,7 +90,8 @@ var RangeSliderController = class extends Controller {
   /** Begins a pointer drag on the track, moving the thumb nearest the press. */
   onPointerDown(event) {
     if (!this.hasTrackTarget) return;
-    const value = this.#valueFromClientX(event.clientX);
+    const mirrored = this.#mirrored;
+    const value = this.#valueFromClientX(event.clientX, mirrored);
     if (value === null) return;
     event.preventDefault();
     const useStart = Math.abs(value - this.startValue) <= Math.abs(value - this.endValue);
@@ -80,7 +105,7 @@ var RangeSliderController = class extends Controller {
     const abort = new AbortController();
     this.#dragAbort = abort;
     const onMove = (move) => {
-      const moved = this.#valueFromClientX(move.clientX);
+      const moved = this.#valueFromClientX(move.clientX, mirrored);
       if (moved !== null) this.#moveThumb(useStart, moved);
     };
     const onUp = () => {
@@ -92,10 +117,11 @@ var RangeSliderController = class extends Controller {
     document.addEventListener("pointercancel", onUp, { signal: abort.signal });
   }
   /** Maps a pointer X coordinate to a raw value using the track geometry. */
-  #valueFromClientX(clientX) {
+  #valueFromClientX(clientX, mirrored) {
     const rect = this.trackTarget.getBoundingClientRect();
     if (rect.width === 0) return null;
-    const fraction = (clientX - rect.left) / rect.width;
+    const offset = (clientX - rect.left) / rect.width;
+    const fraction = mirrored ? 1 - offset : offset;
     return this.minValue + fraction * (this.maxValue - this.minValue);
   }
   /** Moves one thumb to a new raw value, keeping the pair ordered. */

data/dist/controllers/rating_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/rating_controller.ts
 
+// src/utils/logical_scroll.ts
+function isRtl(element) {
+  return window.getComputedStyle(element).direction === "rtl";
+}
+
+// src/utils/arrow_step.ts
+function isReservedArrowChord(event, allow = []) {
+  if (!event.key.startsWith("Arrow")) return false;
+  return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -77,16 +88,19 @@ var RatingController = class extends Controller {
   }
   /** Arrow/Home/End/Space keyboard control, clamped (no wrap). */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (this.readonlyValue) return;
     let next = null;
+    const rtl = isRtl(this.element);
     switch (event.key) {
       case "ArrowRight":
       case "ArrowUp":
-        next = this.valueValue + 1;
+        next = this.valueValue + (event.key === "ArrowRight" && rtl ? -1 : 1);
         break;
       case "ArrowLeft":
       case "ArrowDown":
-        next = this.valueValue - 1;
+        next = this.valueValue - (event.key === "ArrowLeft" && rtl ? -1 : 1);
         break;
       case "Home":
         next = this.#minValue;

data/dist/controllers/read_more_controller.js

@@ -2,6 +2,61 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/read_more_controller.ts
 
+// src/utils/blur_deferral.ts
+var BlurDeferral = class {
+  /** Elements currently holding an update back, mapped to their `blur` listener. */
+  #pending = /* @__PURE__ */ new Map();
+  /** Called after a pending element blurs and has been detached. */
+  #onRelease;
+  /** @param onRelease - Invoked once `element` actually blurs; never on `release`. */
+  constructor(onRelease) {
+    this.#onRelease = onRelease;
+  }
+  /** Number of elements currently holding an update back. */
+  get size() {
+    return this.#pending.size;
+  }
+  /** Snapshot of the pending elements, safe to iterate while releasing them. */
+  get elements() {
+    return [...this.#pending.keys()];
+  }
+  /** Whether `element` is currently holding an update back. */
+  has(element) {
+    return this.#pending.has(element);
+  }
+  /** Holds an update back until `element` blurs. Idempotent (no stacked listeners). */
+  defer(element) {
+    if (this.#pending.has(element)) return;
+    const onBlur = () => {
+      this.#detach(element);
+      this.#onRelease(element);
+    };
+    this.#pending.set(element, onBlur);
+    element.addEventListener("blur", onBlur);
+  }
+  /** Defers `element` as the only pending entry, cancelling any others. */
+  deferOnly(element) {
+    for (const pending of this.elements) {
+      if (pending !== element) this.#detach(pending);
+    }
+    this.defer(element);
+  }
+  /** Cancels `element`'s deferral without completing it; no-ops when not pending. */
+  release(element) {
+    this.#detach(element);
+  }
+  /** Cancels every deferral without completing any of them. */
+  releaseAll() {
+    for (const element of this.elements) this.#detach(element);
+  }
+  /** Removes the `blur` listener for `element` and forgets it. */
+  #detach(element) {
+    const onBlur = this.#pending.get(element);
+    if (onBlur) element.removeEventListener("blur", onBlur);
+    this.#pending.delete(element);
+  }
+};
+
 // src/utils/layout_observer.ts
 var LayoutObserver = class {
   #callback;
@@ -69,15 +124,14 @@ var ReadMoreController = class extends Controller {
   #collapsed = true;
   #observedContent = null;
   #contentMutationObserver = null;
-  #deferredHideTrigger = null;
   #update = () => {
     if (this.#connected) this.#evaluateOverflow();
   };
   #layout = new LayoutObserver(this.#update);
-  #onDeferredHideBlur = () => {
-    this.#clearDeferredHide();
+  /** Holds the trigger's hide back while it has focus; re-evaluates on blur. */
+  #deferredHide = new BlurDeferral(() => {
     this.#update();
-  };
+  });
   connect() {
     this.#connected = true;
     this.#collapsed = this.#initialCollapsed();
@@ -98,7 +152,7 @@ var ReadMoreController = class extends Controller {
     this.#syncTargets();
   }
   triggerTargetDisconnected(trigger) {
-    if (this.#deferredHideTrigger === trigger) this.#clearDeferredHide();
+    this.#deferredHide.release(trigger);
     this.#syncTargets();
   }
   /** Toggles between the collapsed (clamped) and expanded states. */
@@ -149,7 +203,7 @@ var ReadMoreController = class extends Controller {
     }
   }
   #stopObservingContent() {
-    this.#clearDeferredHide();
+    this.#deferredHide.releaseAll();
     if (this.#observedContent) {
       this.#layout.unobserve(this.#observedContent);
       this.#observedContent.removeEventListener("load", this.#update, true);
@@ -159,32 +213,22 @@ var ReadMoreController = class extends Controller {
     this.#contentMutationObserver = null;
     this.#layout.unobserveViewport();
   }
-  #deferHide(trigger) {
-    if (this.#deferredHideTrigger === trigger) return;
-    this.#clearDeferredHide();
-    this.#deferredHideTrigger = trigger;
-    trigger.addEventListener("blur", this.#onDeferredHideBlur);
-  }
-  #clearDeferredHide() {
-    this.#deferredHideTrigger?.removeEventListener("blur", this.#onDeferredHideBlur);
-    this.#deferredHideTrigger = null;
-  }
   #evaluateOverflow() {
     if (!this.hasTriggerTarget || !this.hasContentTarget) return;
     const trigger = this.triggerTarget;
     const content = this.contentTarget;
     const useful = !this.#collapsed || content.scrollHeight > content.clientHeight;
     if (useful) {
-      this.#clearDeferredHide();
+      this.#deferredHide.releaseAll();
       trigger.hidden = false;
       return;
     }
     if (document.activeElement === trigger) {
       trigger.hidden = false;
-      this.#deferHide(trigger);
+      this.#deferredHide.deferOnly(trigger);
       return;
     }
-    this.#clearDeferredHide();
+    this.#deferredHide.releaseAll();
     trigger.hidden = true;
   }
 };