stimeo-ui 0.13.0 → 0.15.0

data/dist/controllers/calendar_controller.js

@@ -18,6 +18,35 @@ 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/intl_format.ts
+var formatters = /* @__PURE__ */ new WeakMap();
+function intlFormatter(factory, locale, options, fallbackLocale) {
+  const cache = cacheFor(factory);
+  const key = cacheKey(locale, options, fallbackLocale);
+  if (cache.has(key)) return cache.get(key);
+  const formatter = construct(factory, locale, options, fallbackLocale);
+  cache.set(key, formatter);
+  return formatter;
+}
+function cacheFor(factory) {
+  const existing = formatters.get(factory);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  formatters.set(factory, created);
+  return created;
+}
+function cacheKey(locale, options, fallbackLocale) {
+  return JSON.stringify([locale, options, fallbackLocale]);
+}
+function construct(factory, locale, options, fallbackLocale) {
+  try {
+    return new factory(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new factory(fallbackLocale, options);
+  }
+}
+
 // src/utils/dates.ts
 function toISODateString(date) {
   const year = date.getFullYear();
@@ -51,14 +80,14 @@ function parseISOMonthString(monthStr) {
 function toISOMonthString(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
+var MONTH_LABEL_OPTIONS = { month: "long", year: "numeric" };
 function monthLabelFormatter(locale) {
-  const options = { month: "long", year: "numeric" };
-  try {
-    return new Intl.DateTimeFormat(locale, options);
-  } catch (error) {
-    if (!(error instanceof RangeError)) throw error;
-    return new Intl.DateTimeFormat("en", options);
-  }
+  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/safe_timeout.ts
@@ -123,8 +152,9 @@ var CalendarController = class extends Controller {
     selected: { type: String, default: "" },
     min: { type: String, default: "" },
     max: { type: String, default: "" },
-    weekStart: { type: Number, default: 0 }
+    weekStart: { type: Number, default: 0 },
     // 0 = Sunday, 1 = Monday, etc.
+    locale: { type: String, default: "" }
   };
   static actions = ["next", "onKeydown", "prev", "selectByClick"];
   static events = ["monthchange", "select"];
@@ -166,6 +196,17 @@ var CalendarController = class extends Controller {
     this.#syncFocusedDateWithMonth();
     this.render();
   }
+  /**
+   * Repaints the label when application code changes `locale` at runtime.
+   *
+   * Stimulus runs this for the initial Value too, before `connect()`. The paint
+   * it triggers is idempotent — the month comes from `month` (or, while that is
+   * still empty, from `focusedDate`), and `monthchange` only reports a move away
+   * from a month already announced, so the first paint never reports one.
+   */
+  localeValueChanged() {
+    this.render();
+  }
   /**
    * Stimulus lifecycle callback triggered automatically when the selectedValue changes.
    * Re-renders grid cells to update `aria-selected` indicators.
@@ -296,8 +337,8 @@ var CalendarController = class extends Controller {
     const year = monthStart.getFullYear();
     const month = monthStart.getMonth() + 1;
     if (this.hasLabelTarget) {
-      const lang = document.documentElement.lang || "en";
-      this.labelTarget.textContent = monthLabelFormatter(lang).format(monthStart);
+      const locale = resolveLocale(this.element, this.localeValue);
+      this.labelTarget.textContent = monthLabelFormatter(locale).format(monthStart);
     }
     const days = this.#calculateGridDays(year, month);
     const dayElements = this.dayTargets;

data/dist/controllers/carousel_controller.js

@@ -90,6 +90,12 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/event_owner.ts
+function ownerIndex(candidates, node) {
+  if (!(node instanceof Node)) return -1;
+  return candidates.findIndex((candidate) => candidate.contains(node));
+}
+
 // src/utils/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -510,9 +516,7 @@ var CarouselController = class extends Controller {
   }
   /** Position of the picker that is or contains `node`, or `-1` when none does. */
   #pickerIndexFor(node) {
-    return this.pickerTargets.findIndex(
-      (picker) => node instanceof Node && (picker === node || picker.contains(node))
-    );
+    return ownerIndex(this.pickerTargets, node);
   }
   /** Whether a focus transition lands on another control of this same carousel. */
   #focusStaysInside(event) {
@@ -731,9 +735,7 @@ function hasModifier(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 function hits(elements, node) {
-  return elements.some(
-    (element) => node instanceof Node && (element === node || element.contains(node))
-  );
+  return ownerIndex(elements, node) !== -1;
 }
 function setAttributeIfChanged(element, name, value) {
   if (element.getAttribute(name) !== value) element.setAttribute(name, value);

data/dist/controllers/checkbox_controller.js

@@ -2,6 +2,30 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/checkbox_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/microtask_coalescer.ts
 var MicrotaskCoalescer = class {
   #run;
@@ -42,6 +66,7 @@ var CheckboxController = class extends Controller {
   static events = ["change", "reconcile"];
   /** Collapses every lifecycle signal from one DOM update into one derived pass. */
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileFromChildren());
+  #listeners = new ListenerSet();
   /** Aggregate this root last settled on, so a derived repair is reported once. */
   #committedState = null;
   /** Watches authored checked-attribute changes on retained target elements. */
@@ -59,14 +84,14 @@ var CheckboxController = class extends Controller {
       attributeFilter: ["checked"],
       subtree: true
     });
-    this.element.addEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.add(this.element, "turbo:morph-element", this.#onMorph);
     document.addEventListener("reset", this.#onReset, true);
   }
   /** Releases the observer, global reset listener, and every pending reconciliation. */
   disconnect() {
     this.#reconcile.cancel();
     this.#checkedObserver.disconnect();
-    this.element.removeEventListener("turbo:morph-element", this.#onMorph);
+    this.#listeners.dispose();
     document.removeEventListener("reset", this.#onReset, true);
   }
   /** Reconciles the aggregate for a parent added or replaced at runtime. */

data/dist/controllers/conditional_fields_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/conditional_fields_controller.ts
 
+// 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]");
@@ -20,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;
@@ -144,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. */
@@ -182,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. */
@@ -192,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();
   }
@@ -393,7 +422,7 @@ var ConditionalFieldsController = class extends Controller {
   }
   /** Whether an authored mutation target belongs to a trigger, region, or managed control. */
   #elementAffectsState(target, triggers, regions) {
-    return triggers.some((trigger) => trigger === target || trigger.contains(target)) || regions.some((region) => region === target || region.contains(target));
+    return ownerIndex(triggers, target) !== -1 || ownerIndex(regions, target) !== -1;
   }
   /** Whether a form owns at least one current trigger, including `form=` associations. */
   #hasTriggerOwnedBy(form) {

data/dist/controllers/currency_input_controller.js

@@ -58,11 +58,47 @@ function halfWidthChar(char) {
   return char === "\u3000" ? " " : char;
 }
 
+// src/utils/intl_format.ts
+var formatters = /* @__PURE__ */ new WeakMap();
+function intlFormatter(factory, locale, options, fallbackLocale) {
+  const cache = cacheFor(factory);
+  const key = cacheKey(locale, options, fallbackLocale);
+  if (cache.has(key)) return cache.get(key);
+  const formatter = construct(factory, locale, options, fallbackLocale);
+  cache.set(key, formatter);
+  return formatter;
+}
+function cacheFor(factory) {
+  const existing = formatters.get(factory);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  formatters.set(factory, created);
+  return created;
+}
+function cacheKey(locale, options, fallbackLocale) {
+  return JSON.stringify([locale, options, fallbackLocale]);
+}
+function construct(factory, locale, options, fallbackLocale) {
+  try {
+    return new factory(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    if (fallbackLocale === void 0) return null;
+    return new factory(fallbackLocale, options);
+  }
+}
+
+// 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 }
   };
@@ -72,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. */
@@ -309,37 +345,53 @@ var CurrencyInputController = class extends Controller {
    * formatters from the validated set.
    */
   #revalidate() {
-    this.#locale = "en-US";
-    try {
-      new Intl.NumberFormat(this.localeValue);
-      this.#locale = this.localeValue;
-    } catch {
-    }
+    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 = "";
     if (this.currencyValue !== "") {
-      try {
-        new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.currencyValue });
-        this.#currency = this.currencyValue;
-      } catch {
-      }
+      const declaredCurrency = intlFormatter(Intl.NumberFormat, this.#locale, {
+        style: "currency",
+        currency: this.currencyValue
+      });
+      if (declaredCurrency !== null) this.#currency = this.currencyValue;
     }
-    this.#grouping = new Intl.NumberFormat(this.#locale, {
-      useGrouping: true,
-      maximumFractionDigits: 0
-    });
-    this.#fixed = new Intl.NumberFormat(this.#locale, {
-      useGrouping: true,
-      minimumFractionDigits: this.#precision,
-      maximumFractionDigits: this.#precision
-    });
-    this.#accessible = this.#currency ? new Intl.NumberFormat(this.#locale, { style: "currency", currency: this.#currency }) : this.#fixed;
-    const parts = new Intl.NumberFormat(this.#locale).formatToParts(11111.1);
+    this.#grouping = intlFormatter(
+      Intl.NumberFormat,
+      this.#locale,
+      { useGrouping: true, maximumFractionDigits: 0 },
+      FALLBACK_LOCALE
+    );
+    this.#fixed = intlFormatter(
+      Intl.NumberFormat,
+      this.#locale,
+      {
+        useGrouping: true,
+        minimumFractionDigits: this.#precision,
+        maximumFractionDigits: this.#precision
+      },
+      FALLBACK_LOCALE
+    );
+    this.#accessible = this.#currency ? intlFormatter(
+      Intl.NumberFormat,
+      this.#locale,
+      { style: "currency", currency: this.#currency },
+      FALLBACK_LOCALE
+    ) : this.#fixed;
+    const parts = intlFormatter(Intl.NumberFormat, this.#locale, {}, FALLBACK_LOCALE).formatToParts(
+      11111.1
+    );
     this.#group = parts.find((p) => p.type === "group")?.value ?? ",";
     this.#decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
     this.#digits.clear();
-    const digitFormatter = new Intl.NumberFormat(this.#locale, { useGrouping: false });
+    const digitFormatter = intlFormatter(
+      Intl.NumberFormat,
+      this.#locale,
+      { useGrouping: false },
+      FALLBACK_LOCALE
+    );
     for (let i = 0; i <= 9; i++) {
       const digit = digitFormatter.format(i);
       if (digit !== String(i)) this.#digits.set(digit, String(i));

data/dist/controllers/date_range_picker_controller.js

@@ -47,6 +47,35 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// src/utils/intl_format.ts
+var formatters = /* @__PURE__ */ new WeakMap();
+function intlFormatter(factory, locale, options, fallbackLocale) {
+  const cache = cacheFor(factory);
+  const key = cacheKey(locale, options, fallbackLocale);
+  if (cache.has(key)) return cache.get(key);
+  const formatter = construct(factory, locale, options, fallbackLocale);
+  cache.set(key, formatter);
+  return formatter;
+}
+function cacheFor(factory) {
+  const existing = formatters.get(factory);
+  if (existing) return existing;
+  const created = /* @__PURE__ */ new Map();
+  formatters.set(factory, created);
+  return created;
+}
+function cacheKey(locale, options, fallbackLocale) {
+  return JSON.stringify([locale, options, fallbackLocale]);
+}
+function construct(factory, locale, options, fallbackLocale) {
+  try {
+    return new factory(locale, options);
+  } catch (error) {
+    if (!(error instanceof RangeError)) throw error;
+    return new factory(fallbackLocale, options);
+  }
+}
+
 // src/utils/dates.ts
 function toISODateString(date) {
   const year = date.getFullYear();
@@ -80,14 +109,14 @@ function parseISOMonthString(monthStr) {
 function toISOMonthString(date) {
   return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
 }
+var MONTH_LABEL_OPTIONS = { month: "long", year: "numeric" };
 function monthLabelFormatter(locale) {
-  const options = { month: "long", year: "numeric" };
-  try {
-    return new Intl.DateTimeFormat(locale, options);
-  } catch (error) {
-    if (!(error instanceof RangeError)) throw error;
-    return new Intl.DateTimeFormat("en", options);
-  }
+  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
@@ -200,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"];
@@ -253,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();
@@ -441,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/direct_upload_controller.js

@@ -48,6 +48,26 @@ var BeforeCacheReset = class _BeforeCacheReset {
   }
 };
 
+// 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/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -156,16 +176,7 @@ var DirectUploadController = class extends Controller {
   }
   /** Validates `scope` once so the per-event path never parses or throws. */
   scopeValueChanged() {
-    const selector = this.scopeValue;
-    if (selector.length > 0) {
-      try {
-        this.element.matches(selector);
-        this.#scopeSelector = selector;
-        return;
-      } catch {
-      }
-    }
-    this.#scopeSelector = "";
+    this.#scopeSelector = validSelector(this.element, this.scopeValue, "");
   }
   /** Updates a row's progress and the aggregate, emitting `progress`. */
   #updateProgress(id, percent, name) {

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();