stimeo-ui 0.7.0 → 0.9.0

data/dist/controllers/reset_before_cache_controller.js

@@ -1,6 +1,26 @@
 import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/reset_before_cache_controller.ts
+var STATELESS_INPUT_TYPES = /* @__PURE__ */ new Set(["hidden", "submit", "reset", "button", "image"]);
+function restoreField(element) {
+  if (element instanceof HTMLTextAreaElement) {
+    element.value = element.defaultValue;
+    return;
+  }
+  if (element instanceof HTMLSelectElement) {
+    for (const option of element.options) option.selected = option.hasAttribute("selected");
+    return;
+  }
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "checkbox" || element.type === "radio") {
+      element.checked = element.defaultChecked;
+    } else if (element.type === "file") {
+      element.value = "";
+    } else if (!STATELESS_INPUT_TYPES.has(element.type)) {
+      element.value = element.defaultValue;
+    }
+  }
+}
 var ResetBeforeCacheController = class extends Controller {
   static values = {
     scope: { type: String, default: "" },
@@ -8,8 +28,32 @@ var ResetBeforeCacheController = class extends Controller {
   };
   static actions = ["reset"];
   static events = ["reset", "request"];
+  /** The `scope` declaration after validation; empty when it cannot be parsed. */
+  #scopeSelector = "";
   /** Runs the reset just before Turbo caches the snapshot. */
   #onBeforeCache = () => this.reset();
+  /**
+   * Validates the scope declaration once, keeping only a selector the engine can
+   * read.
+   *
+   * A selector reads back as an ordinary string, so a malformed one survives
+   * until it is handed to the DOM — and this part runs from a single listener
+   * whose whole job is to keep a cached page from freezing. Falling back to the
+   * default keeps that job running with a visible, findable result instead of
+   * silently taking the sweep down.
+   */
+  scopeValueChanged() {
+    const selector = this.scopeValue;
+    if (selector.length > 0) {
+      try {
+        this.element.matches(selector);
+        this.#scopeSelector = selector;
+        return;
+      } catch {
+      }
+    }
+    this.#scopeSelector = "";
+  }
   connect() {
     document.addEventListener("turbo:before-cache", this.#onBeforeCache);
   }
@@ -20,6 +64,10 @@ var ResetBeforeCacheController = class extends Controller {
    * Resets transient UI within scope to its initial state. Asks controllers to
    * close (via `request`) first, then applies the declarative `data-reset-*` cleanup,
    * and finally emits `reset`. Safe to call any number of times (idempotent).
+   *
+   * `dispatchReset` decides only whether the `request` ask goes out; the cleanup
+   * and the closing `reset` run either way. Both the listener and this action
+   * reach the same sweep, so `reset` is emitted for a manual call too.
    */
   reset() {
     const root = this.#scopeRoot();
@@ -38,9 +86,7 @@ var ResetBeforeCacheController = class extends Controller {
       if (element instanceof HTMLFormElement) element.reset();
     }
     for (const element of root.querySelectorAll("[data-reset-value]")) {
-      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-        element.value = "";
-      }
+      restoreField(element);
     }
     for (const element of root.querySelectorAll("[data-reset-hidden]")) {
       element.hidden = true;
@@ -52,8 +98,8 @@ var ResetBeforeCacheController = class extends Controller {
   }
   /** The scan root: a `scope` descendant when set, else the controller element. */
   #scopeRoot() {
-    if (!this.scopeValue) return this.element;
-    return this.element.querySelector(this.scopeValue) ?? this.element;
+    if (!this.#scopeSelector) return this.element;
+    return this.element.querySelector(this.#scopeSelector) ?? this.element;
   }
 };
 

data/dist/controllers/resizable_controller.js

@@ -8,6 +8,39 @@ 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/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
 // src/utils/before_cache_reset.ts
 var BeforeCacheReset = class _BeforeCacheReset {
   /** Every subscribed instance, iterated by the one shared document listener. */
@@ -69,26 +102,34 @@ var TabindexLoan = class {
 };
 
 // src/controllers/resizable_controller.ts
+var DEFAULT_MIN = 0;
+var DEFAULT_MAX = 100;
+var DEFAULT_VALUE = 50;
+var DEFAULT_STEP = 1;
 var ResizableController = class extends Controller {
   static targets = ["primary", "secondary", "separator"];
   static values = {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    value: { type: Number, default: 50 }
+    min: { type: Number, default: DEFAULT_MIN },
+    max: { type: Number, default: DEFAULT_MAX },
+    step: { type: Number, default: DEFAULT_STEP },
+    value: { type: Number, default: DEFAULT_VALUE }
   };
   static actions = ["onKeydown", "onPointerDown", "toggle"];
   static events = ["change"];
-  /** The value held before the current collapse, restored when toggling back. */
-  #valueBeforeCollapse = 50;
+  /** Where the divider sat before the current collapse; `null` when unknown. */
+  #valueBeforeCollapse = null;
   /** Aborts in-progress pointer-drag listeners when the drag ends or on teardown. */
   #dragAbort = null;
   /** `tabindex` lent to a pane so `F6` can put focus on it; panes carry none. */
   #paneTabindex = new TabindexLoan();
   /** Releases the pane cycle listener bound in {@link connect}. */
   #cycleAbort = null;
+  /** Folds the range and position inputs of one morph batch into a single paint. */
+  #repaint = new MicrotaskCoalescer(() => this.#render());
   connect() {
-    this.#clampAndSync();
+    this.element.removeAttribute("data-dragging");
+    this.#repaint.activate();
+    this.#render();
     this.#cycleAbort = new AbortController();
     this.element.addEventListener("keydown", this.#onCycleKeydown, {
       signal: this.#cycleAbort.signal
@@ -100,17 +141,19 @@ var ResizableController = class extends Controller {
     this.#dragAbort = null;
     this.#cycleAbort?.abort();
     this.#cycleAbort = null;
+    this.#repaint.cancel();
     this.#paneTabindex.returnAll();
+    this.element.removeAttribute("data-dragging");
   }
   /** Moves focus to the next pane on `F6`, wrapping; entering at the first one. */
   #onCycleKeydown = (event) => {
     if (event.key !== "F6") return;
+    if (event.isComposing) return;
     if (event.defaultPrevented) return;
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
     const panes = [];
     if (this.hasPrimaryTarget) panes.push(this.primaryTarget);
     if (this.hasSecondaryTarget) panes.push(this.secondaryTarget);
-    if (panes.length === 0) return;
     const target = event.target;
     const current = panes.findIndex((pane) => target instanceof Node && pane.contains(target));
     const next = panes[(current + 1) % panes.length];
@@ -119,12 +162,21 @@ var ResizableController = class extends Controller {
     this.#paneTabindex.lend(next);
     next.focus();
   };
-  /**
-   * Stimulus lifecycle callback when the valueValue changes.
-   * Keeps CSS fractions and ARIA status completely aligned.
-   */
+  /** Re-renders when application code (or a Turbo morph) changes `value` at runtime. */
   valueValueChanged() {
-    this.#clampAndSync();
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `min` at runtime. */
+  minValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-renders when application code (or a Turbo morph) changes `max` at runtime. */
+  maxValueChanged() {
+    this.#repaint.schedule();
+  }
+  /** Re-publishes range and position onto a separator swapped in after connect. */
+  separatorTargetConnected() {
+    this.#repaint.schedule();
   }
   /** Starts active pointer drag tracking and locks capture. */
   onPointerDown(event) {
@@ -145,44 +197,44 @@ var ResizableController = class extends Controller {
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     if (!this.hasSeparatorTarget) return;
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
+    const { min, max } = this.#range;
+    const isVertical = this.#isVertical;
     let handled = true;
-    let nextValue = this.valueValue;
+    let nextValue = this.#position;
     switch (event.key) {
       case "ArrowLeft":
         if (isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowRight":
         if (isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowUp":
         if (!isVertical) {
-          nextValue -= this.stepValue;
+          nextValue -= this.#step;
         } else {
           handled = false;
         }
         break;
       case "ArrowDown":
         if (!isVertical) {
-          nextValue += this.stepValue;
+          nextValue += this.#step;
         } else {
           handled = false;
         }
         break;
       case "Home":
-        nextValue = this.minValue;
+        nextValue = min;
         break;
       case "End":
-        nextValue = this.maxValue;
+        nextValue = max;
         break;
       case "Enter":
         event.preventDefault();
@@ -194,65 +246,86 @@ var ResizableController = class extends Controller {
     }
     if (handled) {
       event.preventDefault();
-      this.valueValue = Math.max(this.minValue, Math.min(nextValue, this.maxValue));
-      this.#clampAndSync();
+      this.valueValue = Math.max(min, Math.min(nextValue, max));
+      this.#render();
       this.#dispatchChange();
     }
   }
-  /** Double-click or Enter to collapse/restore pane to min/max levels. */
+  /** Double-click or Enter to collapse the primary pane, or put it back. */
   toggle() {
-    const threshold = this.minValue + (this.maxValue - this.minValue) / 2;
-    if (this.valueValue > this.minValue) {
-      this.#valueBeforeCollapse = this.valueValue;
-      this.valueValue = this.minValue;
+    const { min, max } = this.#range;
+    if (this.#position > min) {
+      this.#valueBeforeCollapse = this.#position;
+      this.valueValue = min;
     } else {
-      this.valueValue = this.#valueBeforeCollapse >= threshold ? this.#valueBeforeCollapse : this.maxValue;
+      this.valueValue = this.#valueBeforeCollapse ?? max;
+      this.#valueBeforeCollapse = null;
     }
-    this.#clampAndSync();
+    this.#render();
     this.#dispatchChange();
   }
   #onPointerMove = (event) => {
     if (!this.hasSeparatorTarget) return;
     const rect = this.element.getBoundingClientRect();
-    const orientation = this.separatorTarget.getAttribute("aria-orientation") || "vertical";
-    const isVertical = orientation === "vertical";
-    let fraction = 0.5;
-    if (isVertical) {
-      fraction = (event.clientX - rect.left) / rect.width;
-    } else {
-      fraction = (event.clientY - rect.top) / rect.height;
-    }
-    fraction = Math.max(0, Math.min(fraction, 1));
-    const percent = Math.round(fraction * 100);
-    this.valueValue = Math.max(this.minValue, Math.min(percent, this.maxValue));
-    this.#clampAndSync();
+    const raw = this.#isVertical ? (event.clientX - rect.left) / rect.width : (event.clientY - rect.top) / rect.height;
+    const fraction = Number.isFinite(raw) ? Math.max(0, Math.min(raw, 1)) : 0;
+    const { min, max } = this.#range;
+    this.valueValue = Math.max(min, Math.min(Math.round(fraction * 100), max));
+    this.#render();
   };
   #onPointerUp = (event) => {
-    if (!this.hasSeparatorTarget) return;
-    const separator = this.separatorTarget;
-    separator.releasePointerCapture(event.pointerId);
     this.element.removeAttribute("data-dragging");
     this.#dragAbort?.abort();
     this.#dragAbort = null;
+    if (this.hasSeparatorTarget) {
+      this.separatorTarget.releasePointerCapture(event.pointerId);
+    }
     this.#dispatchChange();
   };
-  #clampAndSync() {
-    const clamped = Math.max(this.minValue, Math.min(this.valueValue, this.maxValue));
-    if (this.valueValue !== clamped) {
-      this.valueValue = clamped;
+  /**
+   * Publishes the position: the fraction consumer CSS multiplies a pane by, and
+   * the range assistive tech reads off the separator. The clamped position is
+   * written back to the Value so it, ARIA, CSS, and dispatched events agree.
+   *
+   * @stimeoRenderRoot
+   */
+  #render() {
+    const { min, max } = this.#range;
+    const position = this.#position;
+    if (this.valueValue !== position) {
+      this.valueValue = position;
     }
-    const fraction = clamped / 100;
-    this.element.style.setProperty("--stimeo--resizable-fraction", String(fraction));
+    this.element.style.setProperty("--stimeo--resizable-fraction", String(position / 100));
     if (this.hasSeparatorTarget) {
-      this.separatorTarget.setAttribute("aria-valuenow", String(clamped));
-      this.separatorTarget.setAttribute("aria-valuemin", String(this.minValue));
-      this.separatorTarget.setAttribute("aria-valuemax", String(this.maxValue));
+      this.separatorTarget.setAttribute("aria-valuenow", String(position));
+      this.separatorTarget.setAttribute("aria-valuemin", String(min));
+      this.separatorTarget.setAttribute("aria-valuemax", String(max));
     }
   }
   #dispatchChange() {
     const fraction = this.valueValue / 100;
     this.dispatch("change", { detail: { value: this.valueValue, fraction } });
   }
+  /** The declared range after validation; an unreadable bound uses its default. */
+  get #range() {
+    const min = Number.isFinite(this.minValue) ? this.minValue : DEFAULT_MIN;
+    const max = Number.isFinite(this.maxValue) ? this.maxValue : DEFAULT_MAX;
+    return { min, max: Math.max(min, max) };
+  }
+  /** The declared position, clamped into the validated range. */
+  get #position() {
+    const { min, max } = this.#range;
+    const value = Number.isFinite(this.valueValue) ? this.valueValue : DEFAULT_VALUE;
+    return Math.max(min, Math.min(value, max));
+  }
+  /** The keyboard increment; a non-positive or unreadable one uses the default. */
+  get #step() {
+    return Number.isFinite(this.stepValue) && this.stepValue > 0 ? this.stepValue : DEFAULT_STEP;
+  }
+  /** Whether the divider runs vertically; a separator that does not say is horizontal. */
+  get #isVertical() {
+    return this.hasSeparatorTarget && this.separatorTarget.getAttribute("aria-orientation") === "vertical";
+  }
 };
 
 export { ResizableController };

data/dist/controllers/spinner_controller.js

@@ -222,7 +222,7 @@ var SpinnerController = class extends Controller {
     timeout: { type: Number, default: 0 }
   };
   static actions = ["start", "stop"];
-  static events = ["hide", "show", "timeout"];
+  static events = ["hide", "show", "timeout", "reconcile"];
   #timers = new SafeTimeout();
   #floor = new MinDurationFloor(this.#timers);
   #gate = new DetachGate();
@@ -326,16 +326,18 @@ var SpinnerController = class extends Controller {
    * Returns the loading state to idle for the snapshot Turbo is about to take,
    * so a page reached with the Back button is not restored mid-load with a
    * spinner nothing can stop. State only: `data-state`, the indicator's `hidden`,
-   * and `aria-busy`. No `hide` is dispatched — the load was never observed to
-   * finish, and a snapshot rewind is not a lifecycle event the consumer can act
-   * on. The live page keeps its timers, so a navigation that never completes
-   * leaves the running cycle intact.
+   * and `aria-busy`. No `hide` is dispatched — that would claim the load finished.
+   * The rewind reports itself as `reconcile` instead, so a consumer painting from
+   * `show` can drop it before the snapshot is taken. The live page keeps its
+   * timers, so a navigation that never completes leaves the running cycle intact.
    */
   #rewindForCache() {
+    const running = this.element.getAttribute("data-state") !== "idle";
     this.#cancelTimeout();
     this.#setBusy(false);
     if (this.hasIndicatorTarget) this.indicatorTarget.hidden = true;
     this.element.setAttribute("data-state", "idle");
+    if (running) this.dispatch("reconcile", { detail: {} });
   }
   /** Reflects busy state onto the controlled region (if present). */
   #setBusy(busy) {

data/dist/controllers/submit_once_controller.js

@@ -203,7 +203,7 @@ var SubmitOnceController = class extends Controller {
     restoreFocus: { type: Boolean, default: false }
   };
   static actions = ["cancel", "finish", "start"];
-  static events = ["start", "end"];
+  static events = ["start", "end", "reconcile"];
   #timers = new SafeTimeout();
   #gate = new DetachGate();
   #beforeCache = new BeforeCacheReset(() => this.#rewindForCache());
@@ -419,7 +419,9 @@ var SubmitOnceController = class extends Controller {
   }
   /** Keeps Turbo's cached snapshot idle, without events, announcements, or focus moves. */
   #rewindForCache() {
+    const forms = [...this.#sessions.keys()];
     this.#abandonSessions();
+    if (forms.length > 0) this.dispatch("reconcile", { detail: { forms } });
   }
   /** Tears down a true detach; an in-page move is canceled by the next `connect()`. */
   #teardown() {

data/dist/controllers/textarea_autosize_controller.js

@@ -1,5 +1,63 @@
 import { Controller } from '@hotwired/stimulus';
 
+// src/controllers/textarea_autosize_controller.ts
+
+// src/utils/layout_observer.ts
+var LayoutObserver = class {
+  #callback;
+  #resizeObserverFactory;
+  #resizeObserver = null;
+  #observingViewport = false;
+  /** Stable bound handler so add/removeEventListener target the same reference. */
+  #handleViewportResize = () => {
+    this.#callback();
+  };
+  constructor(callback, options = {}) {
+    this.#callback = callback;
+    this.#resizeObserverFactory = options.resizeObserverFactory ?? (typeof ResizeObserver === "undefined" ? null : (cb) => new ResizeObserver(cb));
+  }
+  /**
+   * Starts observing an element's size. Repeated calls observe additional
+   * elements through the same shared observer. No-ops when no
+   * `ResizeObserver` implementation is available.
+   */
+  observe(element) {
+    if (!this.#resizeObserverFactory) return;
+    if (!this.#resizeObserver) {
+      this.#resizeObserver = this.#resizeObserverFactory(() => {
+        this.#callback();
+      });
+    }
+    this.#resizeObserver.observe(element);
+  }
+  /** Stops observing a single element while leaving any others in place. */
+  unobserve(element) {
+    this.#resizeObserver?.unobserve(element);
+  }
+  /** Starts observing viewport resizes. Idempotent: the listener is added once. */
+  observeViewport() {
+    if (this.#observingViewport) return;
+    this.#observingViewport = true;
+    window.addEventListener("resize", this.#handleViewportResize);
+  }
+  /** Stops observing viewport resizes without affecting element observation. */
+  unobserveViewport() {
+    if (!this.#observingViewport) return;
+    this.#observingViewport = false;
+    window.removeEventListener("resize", this.#handleViewportResize);
+  }
+  /**
+   * Releases every observation: disconnects the {@link ResizeObserver} and
+   * removes the viewport listener. Safe to call multiple times. Call this from a
+   * controller's `disconnect()`.
+   */
+  disconnect() {
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    this.unobserveViewport();
+  }
+};
+
 // src/controllers/textarea_autosize_controller.ts
 function px(value) {
   const n = Number.parseFloat(value);
@@ -13,18 +71,69 @@ var TextareaAutosizeController = class extends Controller {
   static actions = ["resize"];
   static events = ["resize"];
   #lastHeight = -1;
-  #onInput = () => {
+  #lastWidth = -1;
+  #started = false;
+  #pending = false;
+  #fonts = null;
+  /**
+   * Content triggers arriving while the box is collapsed (`display: none`
+   * ancestors) are deferred: `scrollHeight` is 0 there, so measuring would
+   * clamp the kept height to the `minRows` floor and dispatch a bogus
+   * `resize`. The next report from a rendered box flushes the deferral.
+   */
+  #remeasure = () => {
+    if (this.element.clientWidth === 0) {
+      this.#pending = true;
+      return;
+    }
     this.resize();
   };
+  /**
+   * Re-measures when the content width changed (re-wrapping, including a
+   * horizontal padding change under `border-box`), the applied inline height
+   * was stripped (a Turbo morph syncing attributes from server HTML that has no
+   * `style`), or a content trigger was deferred while the box was collapsed.
+   * This instance's own height writes match none of these signals, so they
+   * cannot re-enter; an authored inline height (e.g. a user dragging the native
+   * resize handle) is left alone until the next content trigger. Reports from a
+   * still-collapsed box are skipped (nothing is measurable there).
+   */
+  #layout = new LayoutObserver(() => {
+    if (this.element.clientWidth === 0) return;
+    const width = this.#contentWidth();
+    const stripped = this.element.style.height === "";
+    if (width === this.#lastWidth && !stripped && !this.#pending) return;
+    this.#lastWidth = width;
+    this.resize();
+  });
   connect() {
-    this.element.addEventListener("input", this.#onInput);
+    this.#lastHeight = Math.round(px(this.element.style.height));
+    this.#lastWidth = this.#contentWidth();
+    this.element.addEventListener("input", this.#remeasure);
+    this.element.addEventListener("change", this.#remeasure);
+    this.#layout.observe(this.element);
+    this.#bindFonts();
+    this.#started = true;
     this.resize();
   }
   disconnect() {
-    this.element.removeEventListener("input", this.#onInput);
+    this.#started = false;
+    this.element.removeEventListener("input", this.#remeasure);
+    this.element.removeEventListener("change", this.#remeasure);
+    this.#layout.disconnect();
+    this.#unbindFonts();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `minRows`. */
+  minRowsValueChanged() {
+    if (this.#started) this.#remeasure();
+  }
+  /** Re-clamps when application code or a Turbo morph changes `maxRows`. */
+  maxRowsValueChanged() {
+    if (this.#started) this.#remeasure();
   }
   /** Re-measures the content and applies the clamped height. */
   resize() {
+    this.#pending = false;
     const el = this.element;
     const style = window.getComputedStyle(el);
     const lineHeight = this.#lineHeight(style);
@@ -58,6 +167,11 @@ var TextareaAutosizeController = class extends Controller {
       this.dispatch("resize", { detail: { height, rows } });
     }
   }
+  /** Content-box width — the wrapping input, unaffected by this instance's height writes. */
+  #contentWidth() {
+    const style = window.getComputedStyle(this.element);
+    return Math.max(0, this.element.clientWidth - px(style.paddingLeft) - px(style.paddingRight));
+  }
   /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
   #lineHeight(style) {
     const lh = px(style.lineHeight);
@@ -65,6 +179,20 @@ var TextareaAutosizeController = class extends Controller {
     const fontSize = px(style.fontSize);
     return fontSize > 0 ? fontSize * 1.2 : 16;
   }
+  /** Subscribes to font completion when the current engine exposes `document.fonts`. */
+  #bindFonts() {
+    const fonts = this.element.ownerDocument.fonts;
+    if (!fonts) return;
+    this.#fonts = fonts;
+    fonts.addEventListener("loadingdone", this.#remeasure);
+    fonts.addEventListener("loadingerror", this.#remeasure);
+  }
+  /** Removes the font completion subscriptions. */
+  #unbindFonts() {
+    this.#fonts?.removeEventListener("loadingdone", this.#remeasure);
+    this.#fonts?.removeEventListener("loadingerror", this.#remeasure);
+    this.#fonts = null;
+  }
 };
 
 export { TextareaAutosizeController };