stimeo-ui 0.13.0 → 0.15.0

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/form_field_controller.js

@@ -100,6 +100,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;
@@ -357,7 +363,7 @@ var FormFieldController = class _FormFieldController extends Controller {
         return this.errorTargets.includes(target);
       return record.attributeName === "id" && [...this.descriptionTargets, ...this.errorTargets].includes(target);
     }
-    return this.errorTargets.some((error) => error === target || error.contains(target));
+    return ownerIndex(this.errorTargets, target) !== -1;
   }
   /** Returns borrowed control ARIA before Turbo snapshots the page. */
   #rewindForCache() {

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

data/dist/controllers/highlight_controller.js

@@ -2,11 +2,6 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/highlight_controller.ts
 
-// src/utils/reduced_motion.ts
-function prefersReducedMotion() {
-  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -60,6 +55,54 @@ 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/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/controllers/highlight_controller.ts
 var hookOwners = /* @__PURE__ */ new WeakMap();
 var HighlightController = class extends Controller {
@@ -68,14 +111,11 @@ var HighlightController = class extends Controller {
     observe: { type: Boolean, default: false }
   };
   static events = ["start", "end"];
-  #timeouts = new SafeTimeout();
   /**
-   * The removal timer this connection has outstanding for an element. Held weakly so
-   * a row that leaves the DOM is not retained, and dropped wholesale on `disconnect()`
-   * so a cleared id can never be matched against a recycled one. Which connection owns
-   * an element's hook is answered by the shared owner registry above.
+   * The removal timer this connection has outstanding for each element. Which
+   * connection owns an element's hook is answered by the shared owner registry above.
    */
-  #pending = /* @__PURE__ */ new WeakMap();
+  #removal = new KeyedTimers();
   #observer = null;
   connect() {
     this.#clearArrivedHook(this.element);
@@ -92,8 +132,7 @@ var HighlightController = class extends Controller {
   disconnect() {
     this.#observer?.disconnect();
     this.#observer = null;
-    this.#timeouts.clearAll();
-    this.#pending = /* @__PURE__ */ new WeakMap();
+    this.#removal.clearAll();
   }
   /** Drops a hook that arrived with the DOM, along with this connection's claim on it. */
   #clearArrivedHook(el) {
@@ -114,13 +153,15 @@ var HighlightController = class extends Controller {
     this.#releasePending(el);
     el.setAttribute("data-highlight", "true");
     this.dispatch("start", { target: el, detail: { element: el } });
-    const id = this.#timeouts.set(() => {
-      this.#pending.delete(el);
-      hookOwners.delete(el);
-      el.removeAttribute("data-highlight");
-      this.dispatch("end", { target: el, detail: { element: el } });
-    }, this.durationValue);
-    this.#pending.set(el, id);
+    this.#removal.set(
+      el,
+      () => {
+        hookOwners.delete(el);
+        el.removeAttribute("data-highlight");
+        this.dispatch("end", { target: el, detail: { element: el } });
+      },
+      this.durationValue
+    );
     hookOwners.set(el, this);
   }
   /**
@@ -133,10 +174,9 @@ var HighlightController = class extends Controller {
     if (owner !== void 0 && owner !== this) owner.#cancelPending(el);
     this.#cancelPending(el);
   }
-  /** Releases `el`'s pending removal timer, if it has one. */
+  /** Releases `el`'s pending removal timer, if it has one, and this connection's claim. */
   #cancelPending(el) {
-    this.#timeouts.clear(this.#pending.get(el) ?? -1);
-    this.#pending.delete(el);
+    this.#removal.clear(el);
     hookOwners.delete(el);
   }
 };

data/dist/controllers/input_mask_controller.js

@@ -49,6 +49,30 @@ var CompositionTracker = class {
   };
 };
 
+// src/utils/declared_value.ts
+function parseDeclared(raw, parse, fallback) {
+  try {
+    return parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+function compileRegExp(source, anchor = "none") {
+  return parseDeclared(
+    source,
+    (text) => {
+      const bare = new RegExp(text);
+      return anchor === "exact" ? new RegExp(`^(?:${text})$`) : bare;
+    },
+    null
+  );
+}
+function parseJsonObject(raw) {
+  const parsed = parseDeclared(raw, (text) => JSON.parse(text), null);
+  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return null;
+  return parsed;
+}
+
 // src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
@@ -118,22 +142,19 @@ function applyMask(value, pattern, tokens) {
 }
 function compileTokens(declaration) {
   const map = /* @__PURE__ */ new Map();
-  for (const [key, source] of Object.entries({ ...DEFAULT_TOKENS, ...parseTokens(declaration) })) {
-    try {
-      map.set(key, new RegExp(`^(?:${source})$`));
-    } catch {
-    }
+  for (const [key, source] of Object.entries(DEFAULT_TOKENS)) {
+    const compiled = compileRegExp(source, "exact");
+    if (compiled) map.set(key, compiled);
+  }
+  for (const [key, source] of Object.entries(parseTokens(declaration))) {
+    const compiled = compileRegExp(source, "exact");
+    if (compiled) map.set(key, compiled);
   }
   return map;
 }
 function parseTokens(declaration) {
-  let parsed;
-  try {
-    parsed = JSON.parse(declaration);
-  } catch {
-    return {};
-  }
-  if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+  const parsed = parseJsonObject(declaration);
+  if (parsed === null) return {};
   const tokens = {};
   for (const [key, source] of Object.entries(parsed)) {
     if (typeof source === "string") tokens[key] = source;

data/dist/controllers/intersection_controller.js

@@ -2,6 +2,15 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/intersection_controller.ts
 
+// src/utils/declared_value.ts
+function parseDeclared(raw, parse, fallback) {
+  try {
+    return parse(raw);
+  } catch {
+    return fallback;
+  }
+}
+
 // src/utils/intersection_watcher.ts
 function isBeforeRootStart(entry) {
   const rect = entry.boundingClientRect;
@@ -11,11 +20,7 @@ function isBeforeRootStart(entry) {
 }
 function queryRoot(selector) {
   if (!selector) return null;
-  try {
-    return document.querySelector(selector);
-  } catch {
-  }
-  return null;
+  return parseDeclared(selector, (raw) => document.querySelector(raw), null);
 }
 var IntersectionWatcher = class {
   #onEntries;

data/dist/controllers/lazy_frame_controller.js

@@ -2,14 +2,19 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/lazy_frame_controller.ts
 
-// src/utils/intersection_watcher.ts
-function queryRoot(selector) {
-  if (!selector) return null;
+// src/utils/declared_value.ts
+function parseDeclared(raw, parse, fallback) {
   try {
-    return document.querySelector(selector);
+    return parse(raw);
   } catch {
+    return fallback;
   }
-  return null;
+}
+
+// src/utils/intersection_watcher.ts
+function queryRoot(selector) {
+  if (!selector) return null;
+  return parseDeclared(selector, (raw) => document.querySelector(raw), null);
 }
 var IntersectionWatcher = class {
   #onEntries;

data/dist/controllers/local_time_controller.js

@@ -2,6 +2,40 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/local_time_controller.ts
 
+// 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);
+  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 null;
+  }
+}
+
+// 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;
@@ -150,8 +184,9 @@ var LocalTimeController = class extends Controller {
   /**
    * Formats `date` with `Intl.DateTimeFormat`, including each style only when it
    * is a valid keyword (so a consumer can show date-only or time-only by clearing
-   * the other). Returns `null` when neither style is usable or `Intl` throws, so
-   * the caller can leave the authored text untouched.
+   * the other). Returns `null` when neither style is usable or the declaration
+   * names a locale or time zone `Intl` rejects, so the caller can leave the
+   * authored text untouched.
    */
   #applyFormat(date, dateStyle, timeStyle) {
     const options = {
@@ -160,15 +195,12 @@ var LocalTimeController = class extends Controller {
     };
     if (options.dateStyle === void 0 && options.timeStyle === void 0) return null;
     if (this.timeZoneValue.length > 0) options.timeZone = this.timeZoneValue;
-    try {
-      return new Intl.DateTimeFormat(this.#locale, options).format(date);
-    } catch {
-      return null;
-    }
-  }
-  /** Locale precedence: the value, then the nearest `lang` up the ancestor chain. */
-  get #locale() {
-    return this.localeValue || this.element.closest("[lang]")?.getAttribute("lang") || void 0;
+    const formatter = intlFormatter(
+      Intl.DateTimeFormat,
+      resolveLocale(this.element, this.localeValue),
+      options
+    );
+    return formatter === null ? null : formatter.format(date);
   }
 };