stimeo-ui 0.13.0 → 0.15.0

data/dist/controllers/textarea_autosize_controller.js

@@ -8,10 +8,15 @@ var LayoutObserver = class {
   #resizeObserverFactory;
   #resizeObserver = null;
   #observingViewport = false;
+  #loadContainer = null;
   /** Stable bound handler so add/removeEventListener target the same reference. */
   #handleViewportResize = () => {
     this.#callback();
   };
+  /** Stable bound handler for the capture-phase `load`; see {@link observeDescendantLoads}. */
+  #handleDescendantLoad = () => {
+    this.#callback();
+  };
   constructor(callback, options = {}) {
     this.#callback = callback;
     this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
@@ -47,14 +52,35 @@ var LayoutObserver = class {
     window.removeEventListener("resize", this.#handleViewportResize);
   }
   /**
-   * Releases every observation: disconnects the {@link ResizeObserver} and
-   * removes the viewport listener. Safe to call multiple times. Call this from a
-   * controller's `disconnect()`.
+   * Starts reporting a `load` from anywhere inside `container` — an image or a
+   * frame settling changes the box it sits in, and it measures as zero high until
+   * then. `load` does not bubble, so the subscription is a capture-phase listener
+   * on the container itself and nothing the caller spells.
+   *
+   * **One container at a time.** A further call moves the observation, so a widget
+   * whose content element is swapped at runtime releases the element it let go by
+   * naming the new one — there is no second place for the release to drift from.
+   */
+  observeDescendantLoads(container) {
+    this.unobserveDescendantLoads();
+    this.#loadContainer = container;
+    container.addEventListener("load", this.#handleDescendantLoad, true);
+  }
+  /** Stops reporting descendant loads without affecting element or viewport observation. */
+  unobserveDescendantLoads() {
+    this.#loadContainer?.removeEventListener("load", this.#handleDescendantLoad, true);
+    this.#loadContainer = null;
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and removes
+   * the viewport and descendant-load listeners. Safe to call multiple times. Call
+   * this from a controller's `disconnect()`.
    */
   disconnect() {
     this.#resizeObserver?.disconnect();
     this.#resizeObserver = null;
     this.unobserveViewport();
+    this.unobserveDescendantLoads();
   }
 };
 

data/dist/controllers/theme_controller.js

@@ -23,6 +23,26 @@ function hasModifierChord(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 
+// src/utils/declared_value.ts
+function parseDeclared(raw, parse, fallback) {
+  try {
+    return parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+function validSelector(element, raw, fallback) {
+  if (raw.length === 0) return fallback;
+  return parseDeclared(
+    raw,
+    (selector) => {
+      element.matches(selector);
+      return selector;
+    },
+    fallback
+  );
+}
+
 // src/utils/roving_tabindex.ts
 var RovingTabindex = class {
   /** Returns the current ordered item elements; called on every operation. */
@@ -167,16 +187,7 @@ var ThemeController = class extends Controller {
   }
   /** Validates the `target` declaration once, so the render path never parses. */
   targetValueChanged() {
-    const selector = this.targetValue;
-    if (selector.length > 0) {
-      try {
-        this.element.matches(selector);
-        this.#targetSelector = selector;
-        return;
-      } catch {
-      }
-    }
-    this.#targetSelector = DEFAULT_TARGET;
+    this.#targetSelector = validSelector(this.element, this.targetValue, DEFAULT_TARGET);
   }
   /** Re-derives the single Tab stop and ARIA for an option set that changed. */
   optionTargetConnected() {
@@ -189,9 +200,8 @@ var ThemeController = class extends Controller {
   /**
    * Selects the mode the activated option declares.
    *
-   * Read through {@link ThemeController.#optionMode}, the same lane that decides
-   * which option is checked, so the two can never disagree about what an option
-   * declares.
+   * Read through the same lane that decides which option is checked, so the two
+   * can never disagree about what an option declares.
    */
   set(event) {
     const option = event.currentTarget;

data/dist/controllers/toast_controller.js

@@ -55,6 +55,121 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/keyed_timers.ts
+var KeyedTimers = class {
+  #timers = new SafeTimeout();
+  /** The pending timer of each key; an entry lives exactly as long as its timer. */
+  #pending = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, cancelling the timer `key` had
+   * pending. The entry is dropped before the callback runs, so the callback sees
+   * the key unarmed and may arm it again for the next round.
+   */
+  set(key, callback, delay) {
+    this.clear(key);
+    const id = this.#timers.set(() => {
+      this.#pending.delete(key);
+      callback();
+    }, delay);
+    this.#pending.set(key, id);
+  }
+  /**
+   * Cancels `key`'s pending timer, if it has one.
+   *
+   * A timer id is a positive integer, so `-1` stands for "nothing pending" and
+   * the registry ignores an id it does not own — the unarmed case needs no
+   * branch of its own, and no other key's timer can be reached from here.
+   */
+  clear(key) {
+    this.#timers.clear(this.#pending.get(key) ?? -1);
+    this.#pending.delete(key);
+  }
+  /**
+   * Cancels every pending timer and forgets every key. Call this from a
+   * controller's `disconnect()` so no timer, and no entry, outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#pending.clear();
+  }
+  /** Whether `key` has a timer pending. */
+  has(key) {
+    return this.#pending.has(key);
+  }
+};
+
+// src/utils/pausable_timers.ts
+var PausableTimers = class {
+  #timers = new KeyedTimers();
+  /** Every key armed or held; an entry goes as its timer fires, or with the key. */
+  #entries = /* @__PURE__ */ new Map();
+  /**
+   * Arms `callback` after `delay` ms for `key`, replacing whatever `key` had.
+   * A held key stays held and banks `delay` for its resume.
+   */
+  set(key, callback, delay) {
+    const reasons = this.#entries.get(key)?.reasons ?? /* @__PURE__ */ new Set();
+    const entry = { callback, startedAt: 0, remaining: delay, reasons };
+    this.#entries.set(key, entry);
+    if (reasons.size === 0) this.#arm(key, entry);
+  }
+  /**
+   * Holds `key` for `reason` and banks the time left, with a floor of one
+   * millisecond. Reports whether this call is the one that stopped a running
+   * timer, so the caller can write its held-state hook exactly once.
+   */
+  pause(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.add(reason);
+    if (!this.#timers.has(key)) return false;
+    this.#timers.clear(key);
+    entry.remaining = Math.max(1, entry.remaining - (Date.now() - entry.startedAt));
+    return true;
+  }
+  /**
+   * Releases `reason` on `key`, arming the banked time again once no reason is
+   * left. Reports whether this call is the one that started the timer again.
+   */
+  resume(key, reason) {
+    const entry = this.#entries.get(key);
+    if (entry === void 0) return false;
+    entry.reasons.delete(reason);
+    if (entry.reasons.size > 0 || this.#timers.has(key)) return false;
+    this.#arm(key, entry);
+    return true;
+  }
+  /** Whether `key` is armed or held — that is, whether this registry drives it at all. */
+  tracks(key) {
+    return this.#entries.has(key);
+  }
+  /** Cancels `key`'s timer and drops its hold. */
+  clear(key) {
+    this.#timers.clear(key);
+    this.#entries.delete(key);
+  }
+  /**
+   * Cancels every timer and forgets every key. Call this from a controller's
+   * `disconnect()` so neither a timer nor a hold outlives the element.
+   */
+  clearAll() {
+    this.#timers.clearAll();
+    this.#entries.clear();
+  }
+  /** Starts `entry`'s banked time running for `key`, and drops it as it fires. */
+  #arm(key, entry) {
+    entry.startedAt = Date.now();
+    this.#timers.set(
+      key,
+      () => {
+        this.#entries.delete(key);
+        entry.callback();
+      },
+      entry.remaining
+    );
+  }
+};
+
 // src/utils/transition_completion.ts
 function timeMs(value) {
   const trimmed = value.trim();
@@ -99,30 +214,23 @@ var ToastController = class extends Controller {
   };
   static actions = ["dismiss", "onKeydown", "pause", "resume", "show"];
   static events = ["dismiss", "show"];
-  /**
-   * Registry for every auto-dismiss and transition-finalize timer the controller
-   * schedules. `SafeTimeout` owns *registration and teardown only*; the
-   * pause/resume remaining-time accounting stays in `#activeTimeouts` so the
-   * per-widget WCAG 2.2.1 semantics are not flattened into the helper.
-   */
+  /** Removal timers for the leaving transition; the auto-dismiss ones live below. */
   #timers = new SafeTimeout();
+  /** Per-toast auto-dismiss, held open while the toast is hovered or focused. */
+  #dismiss = new PausableTimers();
   /**
    * Pending one-shot `requestAnimationFrame` handles (the entering→visible flip).
    * 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 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) && item.dataset.state !== "leaving") {
+      if (!this.#dismiss.tracks(item) && item.dataset.state !== "leaving") {
         this.#startTimer(item);
       }
     }
@@ -130,12 +238,11 @@ var ToastController = class extends Controller {
   disconnect() {
     this.#disconnectDelegatedEvents();
     this.#timers.clearAll();
+    this.#dismiss.clearAll();
     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) {
@@ -148,18 +255,9 @@ var ToastController = class extends Controller {
   durationValueChanged() {
     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) {
+        this.#dismiss.clear(item);
         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);
       }
@@ -188,7 +286,7 @@ var ToastController = class extends Controller {
   }
   /** Clears any active timer when a toast is removed from the DOM. */
   itemTargetDisconnected(element) {
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
   }
   /**
@@ -260,35 +358,16 @@ var ToastController = class extends Controller {
    */
   pause(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    const reasons = this.#pauseReasonsFor(item);
-    const wasActive = reasons.size > 0;
-    reasons.add(this.#pauseReason(event));
-    if (wasActive || timeout.id === 0) return;
-    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;
+    if (item && this.#dismiss.pause(item, this.#pauseReason(event))) {
+      item.setAttribute("data-paused", "true");
     }
-    this.#activeTimeouts.set(item, { id: 0, startedAt: 0, remaining });
-    item.setAttribute("data-paused", "true");
   }
   /** Resumes the auto-dismiss timer once both hover and focus have been released. */
   resume(event) {
     const item = this.#itemFromEvent(event);
-    if (!item || this.durationValue <= 0) return;
-    const reasons = this.#pauseReasonsFor(item);
-    reasons.delete(this.#pauseReason(event));
-    if (reasons.size > 0) return;
-    const timeout = this.#activeTimeouts.get(item);
-    if (!timeout) return;
-    if (timeout.id !== 0 || timeout.remaining <= 0) return;
-    item.removeAttribute("data-paused");
-    this.#startTimer(item, timeout.remaining);
+    if (item && this.#dismiss.resume(item, this.#pauseReason(event))) {
+      item.removeAttribute("data-paused");
+    }
   }
   /** Resolves the toast item element a pause/resume event targets. */
   #itemFromEvent(event) {
@@ -301,36 +380,20 @@ var ToastController = class extends Controller {
   #pauseReason(event) {
     return event.type === "focusin" || event.type === "focusout" ? "focus" : "hover";
   }
-  /** Lazily creates and returns the active pause-reason set for an item. */
-  #pauseReasonsFor(item) {
-    let reasons = this.#pauseReasons.get(item);
-    if (!reasons) {
-      reasons = /* @__PURE__ */ new Set();
-      this.#pauseReasons.set(item, reasons);
-    }
-    return reasons;
-  }
-  #startTimer(element, duration = this.durationValue) {
-    if (duration <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
+  /** Arms a toast's auto-dismiss; a non-positive `duration` means it never expires. */
+  #startTimer(element) {
+    if (this.durationValue <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
       return;
     }
-    this.#clearTimer(element);
-    const id = this.#timers.set(() => {
-      this.#removeWithTransition(element, "timeout");
-    }, duration);
-    this.#activeTimeouts.set(element, { id, startedAt: Date.now(), remaining: duration });
-  }
-  #clearTimer(element) {
-    const timeout = this.#activeTimeouts.get(element);
-    if (timeout) {
-      if (timeout.id) this.#timers.clear(timeout.id);
-      this.#activeTimeouts.delete(element);
-    }
-    this.#pauseReasons.delete(element);
+    this.#dismiss.set(
+      element,
+      () => this.#removeWithTransition(element, "timeout"),
+      this.durationValue
+    );
   }
   #removeWithTransition(element, reason) {
     if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
-    this.#clearTimer(element);
+    this.#dismiss.clear(element);
     this.#cancelAnimation(element);
     element.setAttribute("data-state", "leaving");
     const finalize = () => {

data/dist/controllers/toggle_group_controller.js

@@ -20,6 +20,15 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+// src/utils/event_owner.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+function ownerOf(candidates, node) {
+  return candidates[ownerIndex(candidates, node)] ?? null;
+}
+
 // src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -363,9 +372,8 @@ var ToggleGroupController = class extends Controller {
   }
   /** Finds this group's item containing an event target, excluding nested groups. */
   #itemForEventTarget(target) {
-    if (!this.#ownsEventTarget(target)) return void 0;
-    const node = target;
-    return this.itemTargets.find((item) => item === node || item.contains(node));
+    if (!this.#ownsEventTarget(target)) return null;
+    return ownerOf(this.itemTargets, target);
   }
   /** Whether the closest Toggle Group scope around a target is this instance. */
   #ownsEventTarget(target) {

data/dist/controllers/toolbar_controller.js

@@ -60,6 +60,12 @@ var CompositionTracker = class {
   };
 };
 
+// src/utils/event_owner.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+
 // src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -268,9 +274,7 @@ var ToolbarController = class extends Controller {
   }
   /** Index in `controlTargets` of the control owning `target` (it or a descendant). */
   #indexOf(target) {
-    const node = target;
-    if (!node) return -1;
-    return this.controlTargets.findIndex((control) => control === node || control.contains(node));
+    return ownerIndex(this.controlTargets, target);
   }
   /** Controls eligible for the roving tab stop (excludes native disabled / hidden). */
   get #navigableControls() {