stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/tags_input_controller.js

@@ -0,0 +1,295 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/tags_input_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/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/utils/roving_tabindex.ts
+var RovingTabindex = class {
+  /** Returns the current ordered item elements; called on every operation. */
+  #getItems;
+  /**
+   * @param getItems - Returns the current ordered item elements. Called on every
+   *   operation so the live target list is always used.
+   */
+  constructor(getItems) {
+    this.#getItems = getItems;
+  }
+  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
+  get activeIndex() {
+    return this.#getItems().findIndex((item) => item.tabIndex === 0);
+  }
+  /**
+   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
+   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
+   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
+   * "nothing is currently tabbable".
+   *
+   * @param index - Position of the item to make tabbable.
+   * @param options - Pass `{ focus: true }` to also move DOM focus to that item.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+
+// src/controllers/tags_input_controller.ts
+var TagsInputController = class extends Controller {
+  static targets = ["input", "tags", "tag", "tagTemplate", "status", "fields"];
+  static values = {
+    delimiter: { type: String, default: "," },
+    max: { type: Number, default: 0 },
+    allowDuplicates: { type: Boolean, default: false },
+    name: { type: String, default: "tags[]" }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change", "reject"];
+  #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Owns IME lifecycle state for commit-key guarding. */
+  #composition = new CompositionTracker();
+  /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
+  connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.addEventListener("click", this.#onTagClick);
+    this.#syncState();
+  }
+  /** Releases the delegated listeners so no handler outlives the element. */
+  disconnect() {
+    this.#composition.disconnect();
+    this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
+    this.tagsTarget.removeEventListener("click", this.#onTagClick);
+  }
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
+  /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
+  onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    if (this.#composition.isComposing(event)) return;
+    if (event.key === "Enter" || event.key === this.delimiterValue) {
+      event.preventDefault();
+      this.#commitInput();
+      return;
+    }
+    if (event.key === "Backspace" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#removeAt(buttons.length - 1);
+      }
+      return;
+    }
+    if (logicalArrowKey(event.key, this.element) === "ArrowLeft" && this.inputTarget.value === "") {
+      const buttons = this.#removeButtons;
+      if (buttons.length > 0) {
+        event.preventDefault();
+        this.#roving.setActive(buttons.length - 1, { focus: true });
+      }
+    }
+  }
+  /**
+   * Deletes the tag whose remove button was clicked. Delegated on the tags
+   * container (like `#onTagKeydown`) rather than bound per chip via
+   * `data-action`, so it works the instant a chip is appended without waiting on
+   * Stimulus to wire a freshly created element.
+   */
+  #onTagClick = (event) => {
+    const button = event.target.closest("button");
+    if (!button || !this.tagsTarget.contains(button)) return;
+    const index = this.#removeButtons.indexOf(button);
+    if (index !== -1) this.#removeAt(index);
+  };
+  /** Validates and adds the current input value as a tag, then clears the input. */
+  #commitInput() {
+    const value = this.inputTarget.value.trim();
+    if (value === "") {
+      this.#reject(value, "empty");
+      return;
+    }
+    if (this.maxValue > 0 && this.tagTargets.length >= this.maxValue) {
+      this.#reject(value, "max");
+      return;
+    }
+    if (!this.allowDuplicatesValue && this.#values.includes(value)) {
+      this.#reject(value, "duplicate");
+      return;
+    }
+    this.#appendTag(value);
+    this.inputTarget.value = "";
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+  }
+  /** Builds one chip from the template and appends it to the tag list. */
+  #appendTag(value) {
+    if (!this.hasTagTemplateTarget) return;
+    const fragment = this.tagTemplateTarget.content.cloneNode(true);
+    const tag = fragment.querySelector('[data-stimeo--tags-input-target="tag"]');
+    const label = fragment.querySelector('[data-tags-input-slot="label"]');
+    const button = fragment.querySelector("button");
+    if (!tag || !button) return;
+    tag.dataset.value = value;
+    if (label) label.textContent = value;
+    button.setAttribute("aria-label", `Remove ${value}`);
+    button.tabIndex = -1;
+    this.tagsTarget.appendChild(fragment);
+  }
+  /** Removes the tag at `index`, then moves focus to a neighbor or the input. */
+  #removeAt(index) {
+    const tag = this.tagTargets[index];
+    if (!tag) return;
+    const value = tag.dataset.value ?? "";
+    tag.remove();
+    this.#announce(value);
+    this.#syncState();
+    this.dispatch("change", { detail: { tags: this.#values } });
+    const remaining = this.#removeButtons;
+    if (remaining.length === 0) {
+      this.inputTarget.focus();
+    } else {
+      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    }
+  }
+  /** Handles arrow navigation and deletion within the chip list (delegated). */
+  #onTagKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    const button = event.target.closest("button");
+    if (!button) return;
+    const buttons = this.#removeButtons;
+    const index = buttons.indexOf(button);
+    if (index === -1) return;
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.#roving.setActive(index - 1, { focus: true });
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (index < buttons.length - 1) {
+          this.#roving.setActive(index + 1, { focus: true });
+        } else {
+          this.inputTarget.focus();
+        }
+        break;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        this.#removeAt(index);
+        break;
+    }
+  };
+  /** Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop. */
+  #syncState() {
+    if (this.hasFieldsTarget) {
+      this.fieldsTarget.replaceChildren(
+        ...this.#values.map((value) => {
+          const input = document.createElement("input");
+          input.type = "hidden";
+          input.name = this.nameValue;
+          input.value = value;
+          return input;
+        })
+      );
+    }
+    const full = this.maxValue > 0 && this.tagTargets.length >= this.maxValue;
+    this.element.toggleAttribute("data-stimeo--tags-input-full", full);
+    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1) {
+      this.#roving.setActive(0);
+    }
+  }
+  /** Mirrors the changed tag into the live region for assistive tech. */
+  #announce(value) {
+    if (this.hasStatusTarget) this.statusTarget.textContent = value;
+  }
+  /** Reports a rejected addition via `stimeo--tags-input:reject`. */
+  #reject(value, reason) {
+    this.dispatch("reject", { detail: { value, reason } });
+  }
+  /** The remove buttons in document order (the roving navigation set). */
+  get #removeButtons() {
+    return Array.from(this.tagsTarget.querySelectorAll("button"));
+  }
+  /** Current tag values in order. */
+  get #values() {
+    return this.tagTargets.map((tag) => tag.dataset.value ?? "");
+  }
+};
+
+export { TagsInputController };
+//# sourceMappingURL=tags_input_controller.js.map
+//# sourceMappingURL=tags_input_controller.js.map

data/dist/controllers/theme_controller.js

@@ -1,5 +1,40 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/theme_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/safe_storage.ts
+function readLocalStorage(key) {
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeLocalStorage(key, value) {
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+
 // src/controllers/theme_controller.ts
 var MODES = ["light", "dark", "system"];
 var isMode = (value) => typeof value === "string" && MODES.includes(value);
@@ -24,6 +59,8 @@ var ThemeController = class extends Controller {
   };
   /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */
   #onKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const options = this.optionTargets;
     if (options.length === 0) return;
     const target = event.target;
@@ -31,14 +68,13 @@ var ThemeController = class extends Controller {
     if (current === -1) return;
     const last = options.length - 1;
     let next = current;
+    const step = logicalArrowStep(event.key, this.element);
     switch (event.key) {
       case "ArrowDown":
       case "ArrowRight":
-        next = current === last ? 0 : current + 1;
-        break;
       case "ArrowUp":
       case "ArrowLeft":
-        next = current === 0 ? last : current - 1;
+        next = step === 1 ? current === last ? 0 : current + 1 : current === 0 ? last : current - 1;
         break;
       case "Home":
         next = 0;
@@ -133,19 +169,12 @@ var ThemeController = class extends Controller {
   }
   /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
   #readStored() {
-    try {
-      const value = window.localStorage.getItem(this.storageKeyValue);
-      return isMode(value) ? value : null;
-    } catch {
-      return null;
-    }
+    const value = readLocalStorage(this.storageKeyValue);
+    return isMode(value) ? value : null;
   }
   /** Persists the mode, swallowing storage errors (private mode / quota). */
   #writeStored(mode) {
-    try {
-      window.localStorage.setItem(this.storageKeyValue, mode);
-    } catch {
-    }
+    writeLocalStorage(this.storageKeyValue, mode);
   }
 };
 

data/dist/controllers/time_picker_controller.js

@@ -0,0 +1,231 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/time_picker_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/time_picker_controller.ts
+var AM = 0;
+var PM = 1;
+var TimePickerController = class extends Controller {
+  static targets = ["segment", "field"];
+  static values = {
+    hourCycle: { type: Number, default: 24 },
+    step: { type: Number, default: 1 },
+    seconds: { type: Boolean, default: false },
+    wrap: { type: Boolean, default: true }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change"];
+  /** Current numeric value per segment kind (hours are the *displayed* hours). */
+  #state = { hour: 0, minute: 0, second: 0, meridiem: AM };
+  /** Direct-entry digit buffer and the segment it belongs to. */
+  #typeBuffer = "";
+  #typeSegment = null;
+  /** Last composed field value, to suppress duplicate `change` dispatches. */
+  #lastValue = "";
+  /** Seeds each segment from its initial `aria-valuenow` and syncs the field. */
+  connect() {
+    for (const segment of this.segmentTargets) {
+      const kind = this.#kindOf(segment);
+      if (!kind) continue;
+      const now = Number(segment.getAttribute("aria-valuenow"));
+      const { min, max } = this.#bounds(kind);
+      this.#state[kind] = Number.isFinite(now) ? Math.min(max, Math.max(min, now)) : min;
+    }
+    for (const segment of this.segmentTargets) this.#renderSegment(segment);
+    this.#syncField(false);
+  }
+  /** Handles stepping, inter-segment focus moves, jumps, and direct entry. */
+  onKeydown(event) {
+    if (isReservedArrowChord(event)) return;
+    const segment = event.target?.closest(
+      "[data-stimeo--time-picker-target='segment']"
+    );
+    const kind = segment ? this.#kindOf(segment) : null;
+    if (!segment || !kind) return;
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowUp":
+        event.preventDefault();
+        this.#step(kind, this.#delta(kind));
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.#step(kind, -this.#delta(kind));
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.#focusSibling(segment, -1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this.#focusSibling(segment, 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#set(kind, this.#bounds(kind).min);
+        break;
+      case "End":
+        event.preventDefault();
+        this.#set(kind, this.#bounds(kind).max);
+        break;
+      default:
+        if (/^[0-9]$/.test(event.key)) {
+          event.preventDefault();
+          this.#typeDigit(segment, kind, event.key);
+        }
+        return;
+    }
+    this.#typeBuffer = "";
+    this.#typeSegment = null;
+  }
+  /** The per-step delta: minutes step by `step`, others by 1, meridiem toggles. */
+  #delta(kind) {
+    return kind === "minute" ? this.stepValue : 1;
+  }
+  /** Steps a segment, wrapping at its bounds and carrying over when enabled. */
+  #step(kind, delta) {
+    if (kind === "meridiem") {
+      this.#set("meridiem", this.#state.meridiem === AM ? PM : AM);
+      return;
+    }
+    const { min, max } = this.#bounds(kind);
+    const span = max - min + 1;
+    const raw = this.#state[kind] + delta;
+    if (raw > max || raw < min) {
+      if (!this.wrapValue) {
+        this.#set(kind, Math.min(max, Math.max(min, raw)));
+        return;
+      }
+      const wrapped = ((raw - min) % span + span) % span + min;
+      const carry = Math.floor((raw - min) / span);
+      this.#set(kind, wrapped);
+      this.#carry(kind, carry);
+      return;
+    }
+    this.#set(kind, raw);
+  }
+  /** Propagates a wrap carry from `kind` into the next larger segment. */
+  #carry(kind, amount) {
+    if (amount === 0) return;
+    if (kind === "second") this.#step("minute", amount);
+    else if (kind === "minute") this.#step("hour", amount);
+  }
+  /**
+   * Sets a segment's value (clamped to its `[min, max]` bounds), re-renders it,
+   * and resyncs the composed field. Clamping here guards the direct-entry path:
+   * typing `0` into a 12-hour hour (min 1) must not commit an out-of-range
+   * `aria-valuenow="0"`. The stepping path already passes in-bounds values, so
+   * the clamp is a no-op there.
+   */
+  #set(kind, value) {
+    const { min, max } = this.#bounds(kind);
+    this.#state[kind] = Math.min(max, Math.max(min, value));
+    const segment = this.segmentTargets.find((s) => this.#kindOf(s) === kind);
+    if (segment) this.#renderSegment(segment);
+    this.#syncField(true);
+  }
+  /** Accumulates a typed digit, committing and advancing after two digits. */
+  #typeDigit(segment, kind, digit) {
+    if (kind === "meridiem") return;
+    if (this.#typeSegment !== kind) this.#typeBuffer = "";
+    this.#typeSegment = kind;
+    const { max } = this.#bounds(kind);
+    const candidate = Number(`${this.#typeBuffer}${digit}`);
+    if (candidate <= max) this.#typeBuffer = `${this.#typeBuffer}${digit}`;
+    else this.#typeBuffer = digit;
+    this.#set(kind, Number(this.#typeBuffer));
+    if (this.#typeBuffer.length >= 2 || Number(this.#typeBuffer) * 10 > max) {
+      this.#typeBuffer = "";
+      this.#typeSegment = null;
+      this.#focusSibling(segment, 1);
+    }
+  }
+  /** Moves focus to the previous/next segment, if one exists. */
+  #focusSibling(segment, direction) {
+    const index = this.segmentTargets.indexOf(segment);
+    const next = this.segmentTargets[index + direction];
+    next?.focus();
+  }
+  /** Reflects a segment's current value onto its ARIA/text representation. */
+  #renderSegment(segment) {
+    const kind = this.#kindOf(segment);
+    if (!kind) return;
+    const value = this.#state[kind];
+    if (kind === "meridiem") {
+      const text2 = value === PM ? "PM" : "AM";
+      segment.setAttribute("aria-valuenow", String(value));
+      segment.setAttribute("aria-valuetext", text2);
+      segment.setAttribute("aria-valuemin", String(AM));
+      segment.setAttribute("aria-valuemax", String(PM));
+      segment.textContent = text2;
+      return;
+    }
+    const { min, max } = this.#bounds(kind);
+    const text = String(value).padStart(2, "0");
+    segment.setAttribute("aria-valuenow", String(value));
+    segment.setAttribute("aria-valuetext", text);
+    segment.setAttribute("aria-valuemin", String(min));
+    segment.setAttribute("aria-valuemax", String(max));
+    segment.textContent = text;
+  }
+  /** Composes `HH:MM[:SS]` (24-hour) into the hidden field; dispatches `change`. */
+  #syncField(notify) {
+    const h24 = this.#hours24();
+    const parts = [pad(h24), pad(this.#state.minute)];
+    if (this.secondsValue) parts.push(pad(this.#state.second));
+    const value = parts.join(":");
+    if (this.hasFieldTarget && this.fieldTarget.value !== value) {
+      this.fieldTarget.value = value;
+    }
+    if (notify && value !== this.#lastValue) this.dispatch("change", { detail: { value } });
+    this.#lastValue = value;
+  }
+  /** Converts the displayed hour (+ meridiem in 12-hour mode) to 24-hour. */
+  #hours24() {
+    if (this.hourCycleValue !== 12) return this.#state.hour;
+    const base = this.#state.hour % 12;
+    return base + (this.#state.meridiem === PM ? 12 : 0);
+  }
+  /** The inclusive `[min, max]` bounds for a segment kind. */
+  #bounds(kind) {
+    switch (kind) {
+      case "hour":
+        return this.hourCycleValue === 12 ? { min: 1, max: 12 } : { min: 0, max: 23 };
+      case "minute":
+      case "second":
+        return { min: 0, max: 59 };
+      case "meridiem":
+        return { min: AM, max: PM };
+    }
+  }
+  /** Reads a segment's declared kind, or null when absent/invalid. */
+  #kindOf(segment) {
+    const kind = segment.getAttribute("data-segment");
+    if (kind === "hour" || kind === "minute" || kind === "second" || kind === "meridiem") {
+      return kind;
+    }
+    return null;
+  }
+};
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+
+export { TimePickerController };
+//# sourceMappingURL=time_picker_controller.js.map
+//# sourceMappingURL=time_picker_controller.js.map

data/dist/controllers/toast_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/toast_controller.ts
 var DELEGATED_EVENTS = ["click", "focusin", "focusout", "keydown", "mouseover", "mouseout"];
 var ToastController = class extends Controller {
@@ -304,8 +338,7 @@ var ToastController = class extends Controller {
       this.listTarget.removeChild(element);
       this.dispatch("dismiss", { detail: { item: element, reason } });
     };
-    const transitions = window.getComputedStyle(element).transitionDuration;
-    const duration = cssTimeToMs(transitions);
+    const duration = maxTransitionTotalMs(window.getComputedStyle(element));
     if (duration > 0) {
       this.#timers.set(finalize, duration);
     } else {
@@ -315,11 +348,10 @@ var ToastController = class extends Controller {
   /**
    * Removes the oldest toasts when the list exceeds `maxValue`.
    *
-   * Public (not `#private`) as a deterministic test seam: enforcement normally
-   * runs from `itemTargetConnected`, a Stimulus callback that fires via a
-   * MutationObserver — which happy-dom does not reliably deliver — so the unit
-   * tests invoke it directly. It is therefore listed in the contract guard's
-   * NON_ACTION_ALLOWLIST (it is not a user-wired action).
+   * Public (not `#private`) as a deterministic seam: enforcement normally runs
+   * from `itemTargetConnected`, a Stimulus callback delivered through a
+   * MutationObserver, which a DOM-only environment does not reliably fire — so
+   * it can also be invoked directly. It is not a user-wired action.
    */
   enforceMaxLimit() {
     const currentItems = this.itemTargets;
@@ -377,13 +409,7 @@ var ToastController = class extends Controller {
     this.#rafHandles.delete(element);
   }
 };
-function cssTimeToMs(value) {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-}
 
-export { ToastController, cssTimeToMs };
+export { ToastController };
 //# sourceMappingURL=toast_controller.js.map
 //# sourceMappingURL=toast_controller.js.map