stimeo-ui 0.14.0 → 0.15.0

data/dist/controllers/conditional_fields_controller.js

@@ -26,6 +26,30 @@ function canTakeFocus(element) {
   return !inheritsFieldsetDisabled(element);
 }
 
+// src/utils/listener_set.ts
+var ListenerSet = class {
+  /** The generation every `add` joins until the next `dispose()`. */
+  #abort = new AbortController();
+  /**
+   * Attaches `handler` to the open generation, exactly as the caller spelled it.
+   *
+   * The set supplies the signal, so `options` carries everything else the DOM
+   * accepts — `capture` included, which has to match at release time and no
+   * longer has a second place to drift from.
+   */
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  /**
+   * Releases every listener of the open generation, synchronously, and opens the
+   * next one. Idempotent, and safe before anything has been added.
+   */
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -150,6 +174,7 @@ var ConditionalFieldsController = class extends Controller {
   #observing = false;
   /** Coalesces one target/morph/mutation batch into one full DOM reconciliation. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileDom());
+  #listeners = new ListenerSet();
   /** Provides the last-resort focus landmark without claiming an authored tabindex. */
   #rootTabindex = new TabindexLoan();
   /** Watches retained targets and controls whose declarative or reflected state changed. */
@@ -188,9 +213,9 @@ var ConditionalFieldsController = class extends Controller {
       subtree: true
     });
     this.#observing = true;
-    this.element.addEventListener("change", this.#onTriggerInput);
-    this.element.addEventListener("input", this.#onTriggerInput);
-    this.element.addEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.add(this.element, "change", this.#onTriggerInput);
+    this.#listeners.add(this.element, "input", this.#onTriggerInput);
+    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
     document.addEventListener("reset", this.#onReset, true);
   }
   /** Releases all external resources and returns the temporary focus landmark loan. */
@@ -198,9 +223,7 @@ var ConditionalFieldsController = class extends Controller {
     this.#reconcile.cancel();
     this.#observing = false;
     this.#observer.disconnect();
-    this.element.removeEventListener("change", this.#onTriggerInput);
-    this.element.removeEventListener("input", this.#onTriggerInput);
-    this.element.removeEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.dispose();
     document.removeEventListener("reset", this.#onReset, true);
     this.#rootTabindex.returnAll();
   }

data/dist/controllers/currency_input_controller.js

@@ -88,11 +88,17 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/controllers/currency_input_controller.ts
+var FALLBACK_LOCALE = "en-US";
 var CurrencyInputController = class extends Controller {
   static targets = ["display", "field", "srValue"];
   static values = {
-    locale: { type: String, default: "en-US" },
+    locale: { type: String, default: "" },
     currency: { type: String, default: "" },
     precision: { type: Number, default: 2 }
   };
@@ -102,7 +108,7 @@ var CurrencyInputController = class extends Controller {
   #lastValue = null;
   #started = false;
   /** Validated mirrors of the Values; the hot path never reads a raw Value. */
-  #locale = "en-US";
+  #locale;
   #currency = "";
   #precision = 2;
   /** Formatters rebuilt only when a Value changes, never per keystroke. */
@@ -339,8 +345,9 @@ var CurrencyInputController = class extends Controller {
    * formatters from the validated set.
    */
   #revalidate() {
-    const declaredLocale = intlFormatter(Intl.NumberFormat, this.localeValue, {});
-    this.#locale = declaredLocale === null ? "en-US" : this.localeValue;
+    const resolved = resolveLocale(this.element, this.localeValue);
+    const usable = intlFormatter(Intl.NumberFormat, resolved, {});
+    this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
     const precision = this.precisionValue;
     this.#precision = Number.isInteger(precision) && precision >= 0 && precision <= 100 ? precision : 2;
     this.#currency = "";
@@ -355,7 +362,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: true, maximumFractionDigits: 0 },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#fixed = intlFormatter(
       Intl.NumberFormat,
@@ -365,15 +372,15 @@ var CurrencyInputController = class extends Controller {
         minimumFractionDigits: this.#precision,
         maximumFractionDigits: this.#precision
       },
-      this.#locale
+      FALLBACK_LOCALE
     );
     this.#accessible = this.#currency ? intlFormatter(
       Intl.NumberFormat,
       this.#locale,
       { style: "currency", currency: this.#currency },
-      this.#locale
+      FALLBACK_LOCALE
     ) : this.#fixed;
-    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, this.#locale).formatToParts(
+    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, FALLBACK_LOCALE).formatToParts(
       11111.1
     );
     this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
@@ -383,7 +390,7 @@ var CurrencyInputController = class extends Controller {
       Intl.NumberFormat,
       this.#locale,
       { useGrouping: false },
-      this.#locale
+      FALLBACK_LOCALE
     );
     for (let i = 0; i <= 9; i++) {
       const digit = digitFormatter.format(i);

data/dist/controllers/date_range_picker_controller.js

@@ -114,6 +114,11 @@ function monthLabelFormatter(locale) {
   return intlFormatter(Intl.DateTimeFormat, locale, MONTH_LABEL_OPTIONS, "en");
 }
 
+// src/utils/locale.ts
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -224,7 +229,8 @@ var DateRangePickerController = class extends Controller {
     // A JSON list read through `parseStringList` rather than Stimulus's `Array`
     // type: that reader throws out of the value observer before any callback
     // runs, so one malformed attribute would stop the picker from connecting.
-    disabledDates: { type: String, default: "" }
+    disabledDates: { type: String, default: "" },
+    locale: { type: String, default: "" }
   };
   static actions = ["applyPreset", "next", "onKeydown", "prev", "previewTo", "selectDate"];
   static events = ["change", "monthchange"];
@@ -277,6 +283,10 @@ var DateRangePickerController = class extends Controller {
     this.#beforeCache.deactivate();
     this.#focusTimer.clearAll();
   }
+  /** Repaints the label when application code changes `locale` at runtime. */
+  localeValueChanged() {
+    this.#repaint.schedule();
+  }
   /** Repaints when application code (or a Turbo morph) changes `min` at runtime. */
   minValueChanged() {
     this.#repaint.schedule();
@@ -465,8 +475,7 @@ var DateRangePickerController = class extends Controller {
     const { year, month } = info;
     if (this.#previewDate && !this.#isSelectable(this.#previewDate)) this.#previewDate = "";
     if (this.hasMonthLabelTarget) {
-      const lang = document.documentElement.lang || "en";
-      const formatter = monthLabelFormatter(lang);
+      const formatter = monthLabelFormatter(resolveLocale(this.element, this.localeValue));
       this.monthLabelTarget.textContent = formatter.format(new Date(year, month - 1, 1));
     }
     const [rangeStart, rangeEnd] = this.#visualRange();

data/dist/controllers/dirty_form_controller.js

@@ -2,6 +2,30 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/dirty_form_controller.ts
 
+// src/utils/listener_set.ts
+var ListenerSet = class {
+  /** The generation every `add` joins until the next `dispose()`. */
+  #abort = new AbortController();
+  /**
+   * Attaches `handler` to the open generation, exactly as the caller spelled it.
+   *
+   * The set supplies the signal, so `options` carries everything else the DOM
+   * accepts — `capture` included, which has to match at release time and no
+   * longer has a second place to drift from.
+   */
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  /**
+   * Releases every listener of the open generation, synchronously, and opens the
+   * next one. Idempotent, and safe before anything has been added.
+   */
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -125,6 +149,7 @@ var DirtyFormController = class extends Controller {
   #dirty = false;
   #beforeunloadBound = false;
   #timeouts = new SafeTimeout();
+  #listeners = new ListenerSet();
   /** Whether the active submission still represents the form's current values. */
   #submitting = false;
   #submitAttempt = null;
@@ -182,24 +207,19 @@ var DirtyFormController = class extends Controller {
     this.#baseline = this.#serialize();
     this.#setDirty(false);
     this.element.removeAttribute("data-dirty");
-    this.element.addEventListener("input", this.#onFieldChange);
-    this.element.addEventListener("change", this.#onFieldChange);
-    this.element.addEventListener("submit", this.#onSubmit);
-    this.element.addEventListener("formdata", this.#onFormData);
-    this.element.addEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.add(this.element, "input", this.#onFieldChange);
+    this.#listeners.add(this.element, "change", this.#onFieldChange);
+    this.#listeners.add(this.element, "submit", this.#onSubmit);
+    this.#listeners.add(this.element, "formdata", this.#onFormData);
+    this.#listeners.add(this.element, "turbo:submit-start", this.#onSubmitStart);
+    this.#listeners.add(this.element, "turbo:submit-end", this.#onSubmitEnd);
     this.#unregisterVisit = registerVisitParticipant(this.element.ownerDocument, {
       form: this.element,
       evaluate: (event) => this.#evaluateVisit(event)
     });
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onFieldChange);
-    this.element.removeEventListener("change", this.#onFieldChange);
-    this.element.removeEventListener("submit", this.#onSubmit);
-    this.element.removeEventListener("formdata", this.#onFormData);
-    this.element.removeEventListener("turbo:submit-start", this.#onSubmitStart);
-    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#listeners.dispose();
     this.#unregisterVisit?.();
     this.#unregisterVisit = null;
     this.#unbindBeforeUnload();

data/dist/controllers/flash_controller.js

@@ -2,6 +2,17 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/flash_controller.ts
 
+// src/utils/announce.ts
+function announce(message, options = {}) {
+  const text = message.trim();
+  if (text.length === 0) return;
+  window.dispatchEvent(
+    new CustomEvent("stimeo--announcer:announce", {
+      detail: { message: text, assertive: options.assertive === true }
+    })
+  );
+}
+
 // src/utils/before_cache_reset.ts
 var BeforeCacheReset = class _BeforeCacheReset {
   /** Every subscribed instance, iterated by the one shared document listener. */
@@ -84,6 +95,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();
@@ -130,12 +256,13 @@ var FlashController = class extends Controller {
   };
   static actions = ["dismiss"];
   static events = ["show", "dismiss", "reconcile"];
+  /** Removal timers for the leaving transition; the auto-dismiss ones live below. */
   #timers = new SafeTimeout();
+  /** Per-message auto-dismiss, held open while the message is hovered or focused. */
+  #dismiss = new PausableTimers();
   #observer = null;
   /** Whether the controller is between `connect()` and `disconnect()`. */
   #connected = false;
-  /** Auto-dismiss timer state keyed by message element. */
-  #state = /* @__PURE__ */ new Map();
   /** Messages already processed, in insertion order, to enforce `max` and avoid double work. */
   #order = [];
   /**
@@ -161,8 +288,8 @@ var FlashController = class extends Controller {
     this.#beforeCache.deactivate();
     this.#stopObserving();
     this.#timers.clearAll();
+    this.#dismiss.clearAll();
     for (const message of this.#order) this.#unbindPause(message);
-    this.#state.clear();
     this.#order.length = 0;
     this.#leaving.clear();
   }
@@ -291,8 +418,7 @@ var FlashController = class extends Controller {
    * own role to do the announcing (dynamic inserts). Idempotent per message.
    */
   #process(message, bridge) {
-    if (this.#state.has(message) || this.#order.includes(message)) return;
-    if (this.#leaving.has(message)) return;
+    if (this.#order.includes(message) || this.#leaving.has(message)) return;
     const type = message.getAttribute("data-flash-type") ?? "";
     const assertive = ASSERTIVE_TYPES.has(type);
     if (!message.hasAttribute("role")) {
@@ -303,11 +429,7 @@ var FlashController = class extends Controller {
     this.#bindPause(message);
     const text = message.textContent?.trim() ?? "";
     this.dispatch("show", { target: message, detail: { type, message: text } });
-    if (bridge && text) {
-      window.dispatchEvent(
-        new CustomEvent("stimeo--announcer:announce", { detail: { message: text, assertive } })
-      );
-    }
+    if (bridge) announce(text, { assertive });
     this.#startTimer(message);
     this.#enforceMax();
   }
@@ -320,53 +442,33 @@ var FlashController = class extends Controller {
       this.#beginDismiss(oldest, "limit");
     }
   }
-  #startTimer(message, duration = this.durationValue) {
-    if (duration <= 0) return;
-    const existing = this.#state.get(message);
-    if (existing?.id) this.#timers.clear(existing.id);
-    const id = this.#timers.set(() => this.#beginDismiss(message, "timeout"), duration);
-    this.#state.set(message, {
-      id,
-      startedAt: Date.now(),
-      remaining: duration,
-      paused: existing?.paused ?? /* @__PURE__ */ new Set()
-    });
+  /** Arms a message's auto-dismiss; a non-positive `duration` means it never expires. */
+  #startTimer(message) {
+    if (this.durationValue <= 0) return;
+    this.#dismiss.set(message, () => this.#beginDismiss(message, "timeout"), this.durationValue);
   }
   /**
-   * Pauses a message's auto-dismiss, banking the time left (hover/focus, WCAG 2.2.1).
-   * Hover and focus are independent reasons: the remaining time is banked on the
-   * first of them, and {@link FlashController.#resume} waits for the last one.
+   * Holds a message's auto-dismiss open while it is hovered or focused
+   * (WCAG 2.2 2.2.1). Hover and focus are independent reasons, and the registry
+   * banks the time left on the first of them and waits for the last.
    */
   #pause(message, reason) {
-    const timer = this.#state.get(message);
-    if (!timer) return;
-    timer.paused.add(reason);
-    if (timer.id === 0) return;
-    this.#timers.clear(timer.id);
-    const remaining = Math.max(1, timer.remaining - (Date.now() - timer.startedAt));
-    this.#state.set(message, { id: 0, startedAt: 0, remaining, paused: timer.paused });
-  }
-  /** Resumes a paused message's auto-dismiss with the banked time. */
+    this.#dismiss.pause(message, reason);
+  }
+  /** Releases one reason, resuming the banked time once no reason is left. */
   #resume(message, reason) {
-    const timer = this.#state.get(message);
-    if (!timer) return;
-    timer.paused.delete(reason);
-    if (timer.paused.size > 0) return;
-    if (timer.id !== 0) return;
-    this.#startTimer(message, timer.remaining);
+    this.#dismiss.resume(message, reason);
   }
   /** Releases every per-message resource: timer, stacking slot, pause listeners. */
   #forget(message) {
-    const timer = this.#state.get(message);
-    if (timer?.id) this.#timers.clear(timer.id);
-    this.#state.delete(message);
+    this.#dismiss.clear(message);
     const index = this.#order.indexOf(message);
     if (index !== -1) this.#order.splice(index, 1);
     this.#unbindPause(message);
   }
   /** Marks a message leaving, then removes it after its CSS transition and emits dismiss. */
   #beginDismiss(message, reason) {
-    if (!this.#state.has(message) && !this.#order.includes(message)) return;
+    if (!this.#order.includes(message)) return;
     this.#forget(message);
     this.#leaving.add(message);
     message.setAttribute("data-flash-state", "leaving");

data/dist/controllers/frame_loading_controller.js

@@ -103,6 +103,30 @@ var DetachGate = class _DetachGate {
   }
 };
 
+// src/utils/listener_set.ts
+var ListenerSet = class {
+  /** The generation every `add` joins until the next `dispose()`. */
+  #abort = new AbortController();
+  /**
+   * Attaches `handler` to the open generation, exactly as the caller spelled it.
+   *
+   * The set supplies the signal, so `options` carries everything else the DOM
+   * accepts — `capture` included, which has to match at release time and no
+   * longer has a second place to drift from.
+   */
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  /**
+   * Releases every listener of the open generation, synchronously, and opens the
+   * next one. Idempotent, and safe before anything has been added.
+   */
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 // src/utils/min_duration_floor.ts
 var MinDurationFloor = class {
   #timers;
@@ -218,6 +242,7 @@ var FrameLoadingController = class extends Controller {
   #floor = new MinDurationFloor(this.#timeouts);
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
+  #listeners = new ListenerSet();
   #loading = false;
   /**
    * The optional targets this controller revealed, and the content it marked inert.
@@ -244,14 +269,12 @@ var FrameLoadingController = class extends Controller {
   connect() {
     this.#gate.cancel();
     this.#beforeCache.activate();
-    this.element.addEventListener("turbo:before-fetch-request", this.#onStart);
-    this.element.addEventListener("turbo:frame-load", this.#onEnd);
-    this.element.addEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#listeners.add(this.element, "turbo:before-fetch-request", this.#onStart);
+    this.#listeners.add(this.element, "turbo:frame-load", this.#onEnd);
+    this.#listeners.add(this.element, "turbo:fetch-request-error", this.#onEnd);
   }
   disconnect() {
-    this.element.removeEventListener("turbo:before-fetch-request", this.#onStart);
-    this.element.removeEventListener("turbo:frame-load", this.#onEnd);
-    this.element.removeEventListener("turbo:fetch-request-error", this.#onEnd);
+    this.#listeners.dispose();
     this.#beforeCache.deactivate();
     this.#gate.disconnected(this, () => this.#teardown());
   }