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

data/dist/controllers/dropdown_controller.js

@@ -1,35 +1,136 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/dropdown_controller.ts
+
+// 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/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/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() {
@@ -42,6 +143,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");
@@ -49,16 +154,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")
+    );
+  }
 };
 
 export { DropdownController };

data/dist/controllers/editable_controller.js

@@ -0,0 +1,168 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/editable_controller.ts
+
+// 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/editable_controller.ts
+var EditableController = class extends Controller {
+  static targets = ["display", "input"];
+  static values = {
+    submitOnBlur: { type: Boolean, default: true }
+  };
+  static actions = ["edit", "onBlur", "onDisplayKeydown", "onKeydown"];
+  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;
+    this.#previousValue = this.#currentValue;
+    this.inputTarget.value = this.#previousValue;
+    this.#setMode("editing");
+    this.inputTarget.focus();
+    this.inputTarget.select();
+  }
+  /** Adds `F2` as an editing entry point alongside the button's native activation. */
+  onDisplayKeydown(event) {
+    if (event.key === "F2") {
+      event.preventDefault();
+      this.edit();
+    }
+  }
+  /** 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;
+    }
+    if (event.key === "Enter") {
+      if (this.#isMultiline && !(event.ctrlKey || event.metaKey)) return;
+      event.preventDefault();
+      this.#save(true);
+    }
+  }
+  /** Saves on blur when `submitOnBlur` is set; otherwise keeps editing. */
+  onBlur() {
+    if (!this.#isEditing) return;
+    if (this.submitOnBlurValue) this.#save(false);
+  }
+  /**
+   * Returns to display mode, reflecting the input into the display text and
+   * dispatching `change` when the value differs from where editing began.
+   *
+   * @param restoreFocus - Move focus back to the display element (explicit
+   *   keyboard commit) rather than honoring the user's new focus target (blur).
+   */
+  #save(restoreFocus) {
+    if (!this.#isEditing) return;
+    const value = this.inputTarget.value;
+    const previous = this.#previousValue;
+    this.displayTarget.textContent = value;
+    this.#setMode("display");
+    if (restoreFocus) this.displayTarget.focus();
+    if (value !== previous) {
+      this.dispatch("change", { detail: { value, previous } });
+    }
+  }
+  /** Discards edits, returns to display mode, and dispatches `cancel`. */
+  #cancel() {
+    if (!this.#isEditing) return;
+    this.#setMode("display");
+    this.displayTarget.focus();
+    this.dispatch("cancel", { detail: {} });
+  }
+  /** Toggles the `data-mode` flag and the `hidden` state of both elements. */
+  #setMode(mode) {
+    this.element.dataset.mode = mode;
+    const editing = mode === "editing";
+    if (this.hasDisplayTarget) this.displayTarget.hidden = editing;
+    if (this.hasInputTarget) this.inputTarget.hidden = !editing;
+  }
+  /** Current display text, trimmed — the value shown when not editing. */
+  get #currentValue() {
+    return (this.displayTarget.textContent ?? "").trim();
+  }
+  /** Whether the editing control is a multi-line `<textarea>`. */
+  get #isMultiline() {
+    return this.inputTarget.tagName === "TEXTAREA";
+  }
+  /** Whether the controller is currently in edit mode. */
+  get #isEditing() {
+    return this.element.dataset.mode === "editing";
+  }
+};
+
+export { EditableController };
+//# sourceMappingURL=editable_controller.js.map
+//# sourceMappingURL=editable_controller.js.map

data/dist/controllers/file_dropzone_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/file_dropzone_controller.ts
+var FileDropzoneController = class extends Controller {
+  static targets = ["zone", "trigger", "input", "list", "item", "itemTemplate", "status"];
+  static values = {
+    maxSize: { type: Number, default: 0 },
+    maxFiles: { type: Number, default: 0 },
+    dragLabel: { type: String, default: "Drop files to add them" }
+  };
+  static actions = ["onChange", "onDragLeave", "onDragOver", "onDrop", "openDialog"];
+  static events = ["change", "reject"];
+  /** Selected files paired with their rendered item and any preview objectURL. */
+  #entries = [];
+  /** Wires file removal as a delegated listener on the list container. */
+  connect() {
+    if (this.hasListTarget) this.listTarget.addEventListener("click", this.#onItemClick);
+  }
+  /** Revokes any outstanding preview URLs so none leaks across navigations. */
+  disconnect() {
+    if (this.hasListTarget) this.listTarget.removeEventListener("click", this.#onItemClick);
+    for (const entry of this.#entries) {
+      if (entry.url) URL.revokeObjectURL(entry.url);
+    }
+    this.#entries.length = 0;
+  }
+  /** Opens the native file dialog. Bound via `data-action` (trigger click). */
+  openDialog() {
+    this.inputTarget.click();
+  }
+  /** Adds the files chosen through the native dialog. */
+  onChange() {
+    if (this.inputTarget.files) this.#addFiles(this.inputTarget.files);
+    this.inputTarget.value = "";
+  }
+  /** Marks the zone as a drop target and announces the affordance in words. */
+  onDragOver(event) {
+    event.preventDefault();
+    if (this.hasZoneTarget) this.zoneTarget.setAttribute("data-dragover", "");
+    this.#setStatus(this.dragLabelValue);
+  }
+  /** Clears the drag-over flag when the pointer leaves the zone. */
+  onDragLeave() {
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-dragover");
+  }
+  /** Accepts dropped files, clearing the drag-over state. */
+  onDrop(event) {
+    event.preventDefault();
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-dragover");
+    if (event.dataTransfer?.files) this.#addFiles(event.dataTransfer.files);
+  }
+  /**
+   * Removes the file whose remove button was clicked. Delegated on the list
+   * container rather than bound per item via `data-action`, so it works the instant
+   * an item is appended without waiting on Stimulus to wire a freshly created element.
+   */
+  #onItemClick = (event) => {
+    const button = event.target.closest("button");
+    if (!button || !this.hasListTarget || !this.listTarget.contains(button)) return;
+    const index = this.#entries.findIndex((entry) => entry.item.contains(button));
+    if (index !== -1) this.#removeAt(index);
+  };
+  /** Validates each incoming file and renders the accepted ones. */
+  #addFiles(files) {
+    let changed = false;
+    if (this.hasZoneTarget) this.zoneTarget.removeAttribute("data-stimeo--file-dropzone-invalid");
+    for (const file of Array.from(files)) {
+      const reason = this.#validate(file);
+      if (reason) {
+        if (this.hasZoneTarget) {
+          this.zoneTarget.setAttribute("data-stimeo--file-dropzone-invalid", "");
+        }
+        this.#setStatus(file.name);
+        this.dispatch("reject", { detail: { file, reason } });
+        continue;
+      }
+      this.#appendFile(file);
+      this.#setStatus(file.name);
+      changed = true;
+    }
+    if (changed) this.dispatch("change", { detail: { files: this.#files } });
+  }
+  /** Returns the rejection reason for `file`, or `null` when it is acceptable. */
+  #validate(file) {
+    const limit = this.#effectiveMaxFiles;
+    if (limit > 0 && this.#entries.length >= limit) return "count";
+    if (!this.#matchesAccept(file)) return "type";
+    if (this.maxSizeValue > 0 && file.size > this.maxSizeValue) return "size";
+    return null;
+  }
+  /** Builds one preview item (name, optional thumbnail, remove button). */
+  #appendFile(file) {
+    if (!this.hasItemTemplateTarget || !this.hasListTarget) return;
+    const fragment = this.itemTemplateTarget.content.cloneNode(true);
+    const item = fragment.querySelector('[data-stimeo--file-dropzone-target="item"]');
+    const name = fragment.querySelector('[data-file-dropzone-slot="name"]');
+    const thumb = fragment.querySelector('[data-file-dropzone-slot="thumb"]');
+    const button = fragment.querySelector("button");
+    if (!item) return;
+    if (name) name.textContent = file.name;
+    if (button) button.setAttribute("aria-label", `Remove ${file.name}`);
+    let url;
+    if (thumb && file.type.startsWith("image/")) {
+      url = URL.createObjectURL(file);
+      thumb.src = url;
+      thumb.alt = file.name;
+      thumb.hidden = false;
+    } else if (thumb) {
+      thumb.hidden = true;
+    }
+    this.listTarget.appendChild(fragment);
+    this.#entries.push({ file, item, url });
+  }
+  /** Removes entry `index`, revokes its preview, and re-homes focus. */
+  #removeAt(index) {
+    const entry = this.#entries[index];
+    if (!entry) return;
+    if (entry.url) URL.revokeObjectURL(entry.url);
+    entry.item.remove();
+    this.#entries.splice(index, 1);
+    this.#setStatus(entry.file.name);
+    this.dispatch("change", { detail: { files: this.#files } });
+    const buttons = this.#removeButtons;
+    if (buttons.length === 0) {
+      if (this.hasTriggerTarget) this.triggerTarget.focus();
+    } else {
+      (buttons[index] ?? buttons[buttons.length - 1])?.focus();
+    }
+  }
+  /** Whether `file` satisfies the input's `accept` list (empty accepts all). */
+  #matchesAccept(file) {
+    const accept = this.inputTarget.accept.trim();
+    if (accept === "") return true;
+    const name = file.name.toLowerCase();
+    const type = file.type.toLowerCase();
+    return accept.split(",").some((raw) => {
+      const token = raw.trim().toLowerCase();
+      if (token === "") return false;
+      if (token.startsWith(".")) return name.endsWith(token);
+      if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+      return type === token;
+    });
+  }
+  /** Updates the live region so assistive tech announces the change. */
+  #setStatus(text) {
+    if (this.hasStatusTarget) this.statusTarget.textContent = text;
+  }
+  /** Effective file cap: `maxFiles`, or 1 when the input is single-select. */
+  get #effectiveMaxFiles() {
+    if (this.maxFilesValue > 0) return this.maxFilesValue;
+    return this.inputTarget.multiple ? 0 : 1;
+  }
+  /** The remove buttons currently in the list, in order. */
+  get #removeButtons() {
+    return Array.from(this.listTarget.querySelectorAll("button"));
+  }
+  /** The accepted files in selection order. */
+  get #files() {
+    return this.#entries.map((entry) => entry.file);
+  }
+};
+
+export { FileDropzoneController };
+//# sourceMappingURL=file_dropzone_controller.js.map
+//# sourceMappingURL=file_dropzone_controller.js.map

data/dist/controllers/filter_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/filter_controller.ts
+var FilterController = class extends Controller {
+  static targets = ["item", "control", "group", "empty"];
+  static values = { match: { type: String, default: "all" } };
+  static actions = ["apply", "clear"];
+  static events = ["change"];
+  #onChange = () => {
+    this.apply();
+  };
+  connect() {
+    this.apply();
+    this.element.addEventListener("change", this.#onChange);
+  }
+  disconnect() {
+    this.element.removeEventListener("change", this.#onChange);
+  }
+  /** Re-derives every item's visibility from the active tokens and syncs groups/empty. */
+  apply() {
+    const active = this.#activeTokens();
+    let visibleCount = 0;
+    for (const item of this.itemTargets) {
+      const visible = this.#matches(item, active);
+      item.hidden = !visible;
+      if (visible) visibleCount += 1;
+    }
+    for (const group of this.groupTargets) {
+      group.hidden = !this.#hasVisibleItem(group);
+    }
+    for (const empty of this.emptyTargets) {
+      empty.hidden = visibleCount > 0;
+    }
+    this.dispatch("change", {
+      detail: { active, visible: visibleCount, total: this.itemTargets.length }
+    });
+  }
+  /** Turns every control off (uncheck / aria-pressed="false") and re-applies. */
+  clear() {
+    for (const control of this.controlTargets) {
+      if (control instanceof HTMLInputElement) {
+        control.checked = false;
+      } else if (control.hasAttribute("aria-pressed")) {
+        control.setAttribute("aria-pressed", "false");
+      }
+    }
+    this.apply();
+  }
+  /** The tokens of every control currently "on" (checked or aria-pressed="true"). */
+  #activeTokens() {
+    const tokens = [];
+    for (const control of this.controlTargets) {
+      if (this.#isOn(control)) tokens.push(this.#tokenOf(control));
+    }
+    return tokens.filter(Boolean);
+  }
+  /** Whether a control is in its "on" state. */
+  #isOn(control) {
+    if (control instanceof HTMLInputElement) return control.checked;
+    return control.getAttribute("aria-pressed") === "true";
+  }
+  /** A control's token: explicit `data-stimeo--filter-token`, else `data-value` / value. */
+  #tokenOf(control) {
+    const explicit = control.getAttribute("data-stimeo--filter-token") ?? control.dataset.value;
+    if (explicit) return explicit;
+    return control instanceof HTMLInputElement ? control.value : "";
+  }
+  /** Whether an item satisfies the active token set per `match` (empty active → shown). */
+  #matches(item, active) {
+    if (active.length === 0) return true;
+    const tokens = this.#tokensOf(item);
+    return this.matchValue === "any" ? active.some((token) => tokens.includes(token)) : active.every((token) => tokens.includes(token));
+  }
+  /** An item's declared tokens (`data-stimeo--filter-tokens`, space-separated). */
+  #tokensOf(item) {
+    return (item.getAttribute("data-stimeo--filter-tokens") ?? "").split(/\s+/).filter(Boolean);
+  }
+  /** Whether a group still contains at least one non-hidden item. */
+  #hasVisibleItem(group) {
+    return this.itemTargets.some((item) => !item.hidden && group.contains(item));
+  }
+};
+
+export { FilterController };
+//# sourceMappingURL=filter_controller.js.map
+//# sourceMappingURL=filter_controller.js.map

data/dist/controllers/flash_controller.js

@@ -55,6 +55,40 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/transition_completion.ts
+function timeMs(value) {
+  const trimmed = value.trim();
+  const amount = Number.parseFloat(trimmed);
+  if (!Number.isFinite(amount)) return 0;
+  if (trimmed.endsWith("ms")) return amount;
+  if (trimmed.endsWith("s")) return amount * 1e3;
+  return 0;
+}
+function cssList(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function transitionTimings(style) {
+  const properties = cssList(style.transitionProperty);
+  const durations = cssList(style.transitionDuration).map(timeMs);
+  const delays = cssList(style.transitionDelay).map(timeMs);
+  const effectiveProperties = properties.length > 0 ? properties : Array.from({ length: Math.max(durations.length, delays.length, 1) }, () => "all");
+  const effectiveDurations = durations.length > 0 ? durations : [0];
+  const effectiveDelays = delays.length > 0 ? delays : [0];
+  return effectiveProperties.filter((property) => property !== "none").map((property, index) => ({
+    property,
+    totalMs: Math.max(
+      0,
+      (effectiveDurations[index % effectiveDurations.length] ?? 0) + (effectiveDelays[index % effectiveDelays.length] ?? 0)
+    )
+  }));
+}
+function maxTotalMs(timings) {
+  return timings.reduce((max, { totalMs }) => Math.max(max, totalMs), 0);
+}
+function maxTransitionTotalMs(style) {
+  return maxTotalMs(transitionTimings(style));
+}
+
 // src/controllers/flash_controller.ts
 var ASSERTIVE_TYPES = /* @__PURE__ */ new Set(["alert", "error"]);
 var MESSAGE_SELECTOR = '[data-stimeo--flash-target="message"]';
@@ -206,13 +240,10 @@ var FlashController = class extends Controller {
       finalize();
     }
   }
-  /** First `transition-duration` of `el` in ms (0 when none / unsupported). */
+  /** Maximum transition total (duration + delay) of `el` in ms (0 when none / unsupported). */
   #transitionMs(el) {
     if (typeof window.getComputedStyle !== "function") return 0;
-    const first = window.getComputedStyle(el).transitionDuration.split(",")[0]?.trim() ?? "";
-    const amount = Number.parseFloat(first);
-    if (Number.isNaN(amount)) return 0;
-    return first.endsWith("ms") ? amount : amount * 1e3;
+    return maxTransitionTotalMs(window.getComputedStyle(el));
   }
 };