stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/currency_input_controller.js

@@ -6,63 +6,182 @@ var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
   "deleteCompositionText",
   "deleteByComposition"
 ]);
+function isCompositionInputType(inputType) {
+  return inputType !== void 0 && COMPOSITION_INPUT_TYPES.has(inputType);
+}
+var BEFORE_MORPH_ATTRIBUTE = "turbo:before-morph-attribute";
+var textOf = (element) => element.value;
+var holdsFocus = (element) => element instanceof Node && element.getRootNode().activeElement === element;
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
-  #activeTargets = /* @__PURE__ */ new Set();
+  #composition = null;
   #onStart;
   #onEnd;
+  #onAbandon;
   #confirmedTarget = null;
+  #keyComposing = false;
+  #connected = false;
+  #abandoned = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
+    this.#onAbandon = options.onAbandon;
   }
   observe(target) {
+    this.#connected = true;
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
-    target.addEventListener("keydown", this.#handleKeydown);
+    target.addEventListener("keydown", this.#handleKeydown, true);
+    target.addEventListener("beforeinput", this.#handleBeforeInput, true);
+    target.addEventListener("input", this.#handleInput, true);
+    target.addEventListener("blur", this.#handleBlur, true);
+    target.addEventListener(BEFORE_MORPH_ATTRIBUTE, this.#handleBeforeMorphAttribute);
     this.#observedTargets.add(target);
   }
   unobserve(target) {
     if (!this.#observedTargets.delete(target)) return;
-    target.removeEventListener("compositionstart", this.#handleStart);
-    target.removeEventListener("compositionend", this.#handleEnd);
-    target.removeEventListener("keydown", this.#handleKeydown);
-    this.#activeTargets.delete(target);
+    this.#release(target);
+    if (this.#composition?.target === target) this.#letGo();
     if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
   disconnect() {
-    for (const target of this.#observedTargets) {
-      target.removeEventListener("compositionstart", this.#handleStart);
-      target.removeEventListener("compositionend", this.#handleEnd);
-      target.removeEventListener("keydown", this.#handleKeydown);
-    }
+    this.#connected = false;
+    for (const target of this.#observedTargets) this.#release(target);
     this.#observedTargets.clear();
-    this.#activeTargets.clear();
+    this.#letGo();
     this.#confirmedTarget = null;
+    this.#keyComposing = false;
+    this.#abandoned = null;
   }
   isComposing(event) {
-    return this.#activeTargets.size > 0 || event?.isComposing === true;
+    this.#settle();
+    return event?.isComposing === true || this.#composition !== null;
+  }
+  composingElement() {
+    this.#settle();
+    return this.#composition?.element ?? null;
+  }
+  owns(event) {
+    const element = this.composingElement();
+    return event.isComposing === true || element !== null && element === event.target;
   }
   consumesConfirmedInput(event) {
     const confirmed = this.#confirmedTarget;
     this.#confirmedTarget = null;
     if (confirmed === null || confirmed !== event.target) return false;
     const inputType = event.inputType;
-    return !inputType || COMPOSITION_INPUT_TYPES.has(inputType);
+    return !inputType || isCompositionInputType(inputType);
+  }
+  #release(target) {
+    target.removeEventListener("compositionstart", this.#handleStart);
+    target.removeEventListener("compositionend", this.#handleEnd);
+    target.removeEventListener("keydown", this.#handleKeydown, true);
+    target.removeEventListener("beforeinput", this.#handleBeforeInput, true);
+    target.removeEventListener("input", this.#handleInput, true);
+    target.removeEventListener("blur", this.#handleBlur, true);
+    target.removeEventListener(BEFORE_MORPH_ATTRIBUTE, this.#handleBeforeMorphAttribute);
+  }
+  #letGo() {
+    const composition = this.#composition;
+    if (composition === null) return;
+    if (!holdsFocus(composition.element)) {
+      this.#composition = null;
+      return;
+    }
+    queueMicrotask(() => {
+      if (this.#composition !== composition || this.#observedTargets.has(composition.target)) {
+        return;
+      }
+      this.#composition = null;
+      if (!this.#connected) return;
+      this.#abandoned = { element: composition.element, inPlace: true };
+      this.#runAbandon();
+    });
+  }
+  #settle() {
+    const composition = this.#composition;
+    if (composition === null) return;
+    const { target, element, text } = composition;
+    if (target instanceof Node && element instanceof Node && !target.contains(element)) {
+      this.#composition = null;
+    } else if (textOf(element) !== text) {
+      this.#abandon(false);
+    }
+  }
+  #abandon(inPlace) {
+    this.#owe(inPlace);
+    this.#composition = null;
+    queueMicrotask(this.#runAbandon);
   }
+  #owe(inPlace) {
+    const composition = this.#composition;
+    if (composition !== null) this.#abandoned = { element: composition.element, inPlace };
+  }
+  #runAbandon = () => {
+    const abandoned = this.#abandoned;
+    if (abandoned === null) return;
+    this.#abandoned = null;
+    this.#onAbandon?.(abandoned.element, abandoned.inPlace);
+  };
   #handleStart = (event) => {
     this.#confirmedTarget = null;
-    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#settle();
+    this.#owe(true);
+    const target = event.currentTarget;
+    const element = event.target;
+    this.#composition = { target, element, text: textOf(element) };
+    this.#runAbandon();
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
-    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#runAbandon();
+    if (this.#composition?.target === event.currentTarget) this.#composition = null;
     this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
-  #handleKeydown = () => {
+  #handleKeydown = (event) => {
+    this.#settle();
+    this.#runAbandon();
     this.#confirmedTarget = null;
+    this.#keyComposing = event.isComposing === true;
+  };
+  #handleBeforeInput = (event) => {
+    const keyComposing = this.#keyComposing;
+    this.#keyComposing = false;
+    this.#settle();
+    const { isComposing, inputType } = event;
+    if (this.#composition !== null && !keyComposing && !isComposing && inputType && !isCompositionInputType(inputType)) {
+      this.#abandon(true);
+    }
+    this.#runAbandon();
+  };
+  #handleInput = (event) => {
+    const composition = this.#composition;
+    const { isTrusted, isComposing, inputType } = event;
+    if (composition !== null && event.target === composition.element && (isTrusted || isComposing || isCompositionInputType(inputType))) {
+      composition.text = textOf(composition.element);
+    } else {
+      this.#settle();
+    }
+    this.#runAbandon();
+  };
+  #handleBlur = (event) => {
+    this.#settle();
+    this.#runAbandon();
+    const composition = this.#composition;
+    if (composition === null || composition.target === composition.element) return;
+    const { element } = composition;
+    if (!(element instanceof Node) || event.target !== element) return;
+    const root = element.getRootNode();
+    if (root.activeElement !== element) this.#composition = null;
+  };
+  #handleBeforeMorphAttribute = (event) => {
+    this.#settle();
+    const composition = this.#composition;
+    if (composition?.target !== event.currentTarget || event.target !== composition.element) return;
+    const detail = event.detail;
+    if (detail?.attributeName === "value") event.preventDefault();
   };
 };
 
@@ -103,10 +222,6 @@ function construct(factory, locale, options, fallbackLocale) {
   }
 }
 
-function resolveLocale(element, declared = "") {
-  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
-}
-
 var ListenerSet = class {
   #abort = new AbortController();
   add(target, type, handler, options) {
@@ -118,6 +233,10 @@ var ListenerSet = class {
   }
 };
 
+function resolveLocale(element, declared = "") {
+  return declared || element.closest("[lang]")?.getAttribute("lang") || void 0;
+}
+
 var MicrotaskCoalescer = class {
   #run;
   #queued = false;
@@ -134,6 +253,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -164,6 +286,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -213,6 +338,94 @@ var NumberValueReader = class {
   }
 };
 
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var OwnedText = class {
+  #attribute;
+  #channel;
+  #guard;
+  #writes = /* @__PURE__ */ new WeakMap();
+  constructor(attribute, channel = "text", guard = () => true) {
+    this.#attribute = attribute;
+    this.#channel = channel;
+    this.#guard = guard;
+  }
+  hasRecord(element) {
+    return element.hasAttribute(this.#attribute);
+  }
+  read(element, evidence = {}) {
+    if (evidence.source === "live") return this.#writes.get(element) ?? null;
+    const raw = element.getAttribute(this.#attribute);
+    if (raw === null) return null;
+    try {
+      const record = JSON.parse(raw);
+      if (!Array.isArray(record) || record.length !== 3 || record[0] !== this.#channel || typeof record[1] !== "string" || typeof record[2] !== "string")
+        return null;
+      return { original: record[1], written: record[2] };
+    } catch {
+      return null;
+    }
+  }
+  owns(element, evidence = {}) {
+    return this.#ownedRecord(element, evidence) !== null;
+  }
+  #ownedRecord(element, evidence) {
+    const record = this.read(element, evidence);
+    if (record === null || !this.#guard(element)) return null;
+    if (this.#channel === "text" && element.firstElementChild !== null) return null;
+    const current = this.#current(element);
+    return current === record.written || evidence.source === "live" && evidence.allowOriginal === true && current === record.original ? record : null;
+  }
+  write(element, written, original, force = false) {
+    const current = this.#current(element);
+    if (current === null) return;
+    const before = original ?? this.#writes.get(element)?.original ?? this.read(element)?.original ?? current;
+    if (force || current !== written) this.#put(element, written);
+    this.remember(element, written, before);
+  }
+  remember(element, written, original) {
+    const current = this.#current(element);
+    if (current === null) return;
+    const before = original ?? this.#writes.get(element)?.original ?? this.read(element)?.original ?? current;
+    this.#writes.set(element, { original: before, written });
+    setAttributeIfChanged(
+      element,
+      this.#attribute,
+      JSON.stringify([this.#channel, before, written])
+    );
+  }
+  clear(element, evidence = {}) {
+    if (!this.owns(element, evidence)) return false;
+    if (this.#current(element) !== "") this.#put(element, "");
+    this.forget(element);
+    return true;
+  }
+  restore(element, evidence = {}) {
+    const record = this.#ownedRecord(element, evidence);
+    if (record === null) return false;
+    if (this.#current(element) !== record.original) this.#put(element, record.original);
+    this.forget(element);
+    return true;
+  }
+  forget(element) {
+    setAttributeIfChanged(element, this.#attribute, null);
+    this.#writes.delete(element);
+  }
+  #current(element) {
+    if (this.#channel === "text") return element.textContent ?? "";
+    return element instanceof HTMLInputElement ? element.value : null;
+  }
+  #put(element, text) {
+    if (this.#channel === "text") element.textContent = text;
+    else if (element instanceof HTMLInputElement) element.value = text;
+  }
+};
+
 var FALLBACK_LOCALE = "en-US";
 var CurrencyInputController = class _CurrencyInputController extends Controller {
   #numbers = new NumberValueReader();
@@ -229,9 +442,17 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
   static events = ["change", "reconcile"];
   #lastValue = null;
   #started = false;
-  #changeHeld = false;
-  #composing = null;
-  #rendered = null;
+  #unsettled = null;
+  #configured = false;
+  #listeners = new ListenerSet();
+  #declarationsHeld = false;
+  #displayText = new OwnedText(
+    `data-${this.identifier}-display-text`,
+    "value"
+  );
+  #renderedDisplay = null;
+  #departed = null;
+  #formatHeld = null;
   #locale;
   #currency = "";
   #precision = 2;
@@ -242,13 +463,32 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
   #decimal = ".";
   #digits = /* @__PURE__ */ new Map();
   #composition = new CompositionTracker({
-    onStart: (event) => {
-      this.#composing = event.currentTarget;
+    onEnd: (event) => {
+      const display = event.currentTarget;
+      if (this.#unsettled === display) this.#unsettled = null;
+      const round2 = this.#takeFormatHeld(display);
+      if (this.#inCharge(display)) this.#reformat(round2, "edit");
+      if (this.#owed(display)) this.#applyValueChange();
+      if (round2 && !this.#inCharge(display)) this.#reformat(true, "edit");
     },
-    onEnd: () => {
-      this.#composing = null;
-      this.#reformat(false, "edit");
-      this.#applyHeldChange();
+    onAbandon: (display, inPlace) => {
+      const next = this.#composition.composingElement();
+      if (inPlace && next !== null && next !== display) {
+        this.#endUntrackedComposition(display);
+      } else {
+        this.#formatHeld = null;
+      }
+      if (next === display && inPlace || !this.#owed(display)) return;
+      if (next !== null) {
+        this.#readPageText(next);
+        return;
+      }
+      if (inPlace) this.#endUntrackedComposition(display);
+      if (this.#owed(display)) this.#applyValueChange();
+    },
+    onStart: (event) => {
+      if (this.#unsettled === event.target) this.#unsettled = null;
+      if (this.#formatHeld?.heard === false) this.#formatHeld = null;
     }
   });
   localeValueChanged() {
@@ -261,42 +501,56 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
     this.#applyValueChange();
   }
   #applyValueChange() {
+    if (!this.#started) return;
+    if (this.#holdUnsettled(false)) return;
     if (this.#composition.isComposing()) {
-      this.#changeHeld = true;
+      this.#declarationsHeld = this.#declarationsChanged();
+      this.#resync();
       return;
     }
-    if (!this.#started || !this.hasDisplayTarget) return;
-    const scan = this.#readDisplay();
+    if (!this.hasDisplayTarget) return;
+    const { scan, anchor } = this.#readDisplay();
     if (document.activeElement === this.displayTarget) {
       const formatted = this.#render(scan.parts);
-      this.#show(formatted);
+      this.#showAtCaret(formatted, anchor);
       this.#reflect(scan.value, formatted, "reconcile");
     } else {
       this.#renderFixed(scan.value, "reconcile");
     }
   }
-  #applyHeldChange() {
-    if (!this.#changeHeld) return;
-    this.#changeHeld = false;
-    this.#applyValueChange();
-  }
   #readDisplay() {
     const text = this.displayTarget.value;
-    const own = text === this.#rendered ? this.#scan(text) : null;
-    this.#takeInDeclarations();
-    return own ?? this.#scan(text);
-  }
-  #takeInDeclarations() {
-    this.#changeHeld = false;
+    const own = this.#showsOwnRendering(this.displayTarget) ? this.#read(text) : null;
     this.#revalidate();
+    return own ?? this.#read(text);
+  }
+  #showsOwnRendering(display) {
+    return display === this.#renderedDisplay && this.#displayText.owns(display, { source: "live" });
+  }
+  #inCharge(source) {
+    return source === null || this.hasDisplayTarget && source === this.displayTarget;
+  }
+  #read(text) {
+    return {
+      scan: this.#scan(text),
+      anchor: this.#significantBefore(text, this.displayTarget.selectionStart)
+    };
   }
   #morph = new MorphRenderWatcher(() => this.#applyValueChange());
   connect() {
     this.#morph.observe(this.element);
+    this.#listeners.add(this.element, "turbo:before-morph-attribute", this.#protectUnsettled);
     this.#started = true;
-    this.#takeInDeclarations();
+    if (!this.#configured) this.#revalidate();
+    if (this.#composition.isComposing()) {
+      this.#applyValueChange();
+      return;
+    }
+    this.#formatHeld = null;
+    if (this.#holdUnsettled(true)) return;
+    this.#revalidate();
     if (!this.hasDisplayTarget) return;
-    if (this.displayTarget.value === this.#rendered) {
+    if (this.#showsOwnRendering(this.displayTarget)) {
       this.#renderFixed(this.#lastValue, "reconcile");
       return;
     }
@@ -306,25 +560,37 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
   }
   disconnect() {
     this.#morph.disconnect();
-    this.#endUntrackedComposition();
+    this.#listeners.dispose();
+    const composing = this.#composition.composingElement();
     this.#composition.disconnect();
+    if (this.#composition.composingElement() !== composing) {
+      this.#endUntrackedComposition(composing);
+    }
     this.#started = false;
   }
   displayTargetConnected(target) {
     this.#composition.observe(target);
     if (!this.#started || !this.hasDisplayTarget || this.displayTarget !== target) return;
-    this.#renderFixed(this.#readDisplay().value, "reconcile");
+    this.#applyValueChange();
   }
   displayTargetDisconnected(target) {
+    if (target === this.#renderedDisplay && !(this.#started && this.hasDisplayTarget && this.displayTarget === target)) {
+      this.#departed = target;
+    }
+    const composing = this.#composition.composingElement() === target;
     this.#composition.unobserve(target);
-    if (target === this.#composing) this.#endUntrackedComposition();
+    if (composing && this.#composition.composingElement() !== target) {
+      this.#endUntrackedComposition(target);
+    }
+    if (this.#formatHeld?.display === target && this.#composition.composingElement() !== target) {
+      this.#formatHeld = null;
+    }
     this.#applyValueChange();
   }
-  #endUntrackedComposition() {
-    const display = this.#composing;
-    this.#composing = null;
+  #endUntrackedComposition(display) {
+    const round2 = this.#takeFormatHeld(display);
     if (this.hasDisplayTarget && this.displayTarget === display) {
-      this.#reformat(false, "reconcile");
+      this.#reformat(round2, "reconcile");
     }
   }
   fieldTargetConnected() {
@@ -340,14 +606,64 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
     if (this.#started) this.#resync();
   }
   onInput(event) {
-    if (this.#composition.isComposing(event)) return;
+    const source = event?.target ?? null;
+    if (!this.#inCharge(source)) return;
+    this.#holdUnsettled(false);
+    if (event && this.#composition.consumesConfirmedInput(event)) return;
+    const input = event;
+    if (this.#composition.isComposing(input) || isCompositionInputType(input?.inputType)) {
+      if (this.#composition.composingElement() === null && this.hasDisplayTarget) {
+        this.#beginUnsettled(this.displayTarget);
+      }
+      return;
+    }
+    const unsettled = this.#unsettled !== null;
+    if (unsettled) {
+      if (source !== this.#unsettled || input?.isComposing !== false || !input.inputType) return;
+      this.#unsettled = null;
+      this.#formatHeld = null;
+    }
     this.#reformat(false, "edit");
+    if (unsettled && this.#owed(source)) this.#applyValueChange();
+  }
+  format(event) {
+    if (!this.#inCharge(event?.target ?? null)) return;
+    const returned = this.hasDisplayTarget && this.displayTarget === this.#departed;
+    this.#holdUnsettled(false);
+    if (this.hasDisplayTarget && (this.displayTarget !== this.#renderedDisplay || returned && !this.#showsOwnRendering(this.displayTarget)) && (event?.type === "blur" || event?.type === "focusout") && this.#composition.composingElement() !== this.displayTarget) {
+      this.#beginUnsettled(this.displayTarget);
+    }
+    if (this.#unsettled !== null) {
+      this.#formatHeld = { display: this.#unsettled, heard: false };
+      return;
+    }
+    if (this.#composition.isComposing(event)) {
+      const composing = this.#composition.composingElement();
+      const display = composing ?? event?.target ?? (this.hasDisplayTarget ? this.displayTarget : null);
+      this.#formatHeld = display === null ? null : { display, heard: composing !== null };
+      if (composing === null && this.hasDisplayTarget && display === this.displayTarget) {
+        this.#beginUnsettled(this.displayTarget);
+      }
+    } else {
+      this.#formatHeld = null;
+      this.#reformat(true, "edit");
+    }
+  }
+  #takeFormatHeld(display) {
+    const held = this.#formatHeld;
+    this.#formatHeld = null;
+    return held !== null && held.display === display;
   }
-  format() {
-    this.#reformat(true, "edit");
+  #readPageText(composing) {
+    if (this.#unsettled !== null || !this.#inCharge(composing) || this.#showsOwnRendering(this.displayTarget))
+      return;
+    const { scan } = this.#readDisplay();
+    this.#displayText.remember(this.displayTarget, this.displayTarget.value);
+    this.#renderedDisplay = this.displayTarget;
+    this.#reflect(scan.value, this.#render(scan.parts), "reconcile");
   }
   #reformat(fixedPrecision, cause) {
-    if (!this.hasDisplayTarget) return;
+    if (!this.hasDisplayTarget || this.#unsettled === this.displayTarget) return;
     const raw = this.displayTarget.value;
     const { parts, value } = this.#scan(raw);
     if (fixedPrecision) {
@@ -355,14 +671,16 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
       return;
     }
     const formatted = this.#render(parts);
-    if (formatted !== raw) {
-      const caret = this.displayTarget.selectionStart;
-      const anchor = caret === null ? null : this.#significantBefore(raw, caret);
+    this.#showAtCaret(formatted, this.#significantBefore(raw, this.displayTarget.selectionStart));
+    this.#reflect(value, formatted, cause);
+  }
+  #showAtCaret(formatted, anchor) {
+    if (formatted !== this.displayTarget.value) {
       this.displayTarget.value = formatted;
       if (anchor !== null) this.#restoreCaret(formatted, anchor);
     }
-    this.#rendered = formatted;
-    this.#reflect(value, formatted, cause);
+    this.#displayText.remember(this.displayTarget, formatted);
+    this.#renderedDisplay = this.displayTarget;
   }
   #renderFixed(value, cause) {
     if (value === null) {
@@ -376,8 +694,8 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
     this.#reflect(rounded, formatted, cause);
   }
   #show(text) {
-    if (this.displayTarget.value !== text) this.displayTarget.value = text;
-    this.#rendered = text;
+    this.#displayText.write(this.displayTarget, text);
+    this.#renderedDisplay = this.displayTarget;
   }
   #render(parts) {
     const int = parts.int === "" ? "" : this.#grouping.format(BigInt(parts.int));
@@ -400,6 +718,7 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
     }
   }
   #significantBefore(text, caret) {
+    if (caret === null) return null;
     let count = 0;
     let sawSign = false;
     let sawDigit = false;
@@ -463,22 +782,77 @@ var CurrencyInputController = class _CurrencyInputController extends Controller
   }
   #resync() {
     if (!this.hasDisplayTarget) return;
-    const value = this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
+    const unsettled = this.#trackUnsettled(false);
+    if (this.#renderedDisplay === null) return;
+    const value = unsettled || this.#composition.isComposing() ? this.#lastValue : this.#scan(this.displayTarget.value).value;
     this.#write(value);
   }
-  #revalidate() {
+  #holdUnsettled(arriving) {
+    if (!this.#trackUnsettled(arriving)) return false;
+    this.#declarationsHeld = this.#declarationsChanged();
+    this.#resync();
+    return true;
+  }
+  #trackUnsettled(arriving) {
+    this.#forgetUnsettledOwner();
+    if (!this.hasDisplayTarget) return false;
+    const display = this.displayTarget;
+    const returned = display === this.#departed;
+    if (returned) this.#departed = null;
+    if (this.#unsettled === null && document.activeElement === display && (arriving || display !== this.#renderedDisplay || returned && !this.#showsOwnRendering(display)) && this.#composition.composingElement() !== display) {
+      this.#beginUnsettled(display);
+    }
+    return this.#unsettled !== null;
+  }
+  #beginUnsettled(display) {
+    if (this.#unsettled === null && this.#renderedDisplay === null && this.#declarationsChanged()) {
+      this.#revalidate();
+    }
+    this.#unsettled = display;
+  }
+  #forgetUnsettledOwner() {
+    if (this.#unsettled !== null && this.hasDisplayTarget && this.#unsettled !== this.displayTarget) {
+      if (this.#formatHeld?.display === this.#unsettled) this.#formatHeld = null;
+      this.#unsettled = null;
+    }
+  }
+  #protectUnsettled = (event) => {
+    this.#holdUnsettled(false);
+    if (this.#unsettled === null || event.target !== this.#unsettled) return;
+    const detail = event.detail;
+    if (detail?.attributeName === "value") event.preventDefault();
+  };
+  #declared() {
     const resolved = resolveLocale(this.element, this.localeValue);
     const usable = intlFormatter(Intl.NumberFormat, resolved, {});
-    this.#locale = usable === null ? FALLBACK_LOCALE : resolved;
-    this.#precision = this.#safePrecision;
-    this.#currency = "";
+    const locale = usable === null ? FALLBACK_LOCALE : resolved;
+    let currency = "";
     if (this.currencyValue !== "") {
-      const declaredCurrency = intlFormatter(Intl.NumberFormat, this.#locale, {
+      const declaredCurrency = intlFormatter(Intl.NumberFormat, locale, {
         style: "currency",
         currency: this.currencyValue
       });
-      if (declaredCurrency !== null) this.#currency = this.currencyValue;
+      if (declaredCurrency !== null) currency = this.currencyValue;
     }
+    return { locale, currency, precision: this.#safePrecision };
+  }
+  #owed(composed) {
+    if (this.#declarationsHeld) return true;
+    if (!this.hasDisplayTarget) return false;
+    const display = this.displayTarget;
+    return display !== this.#renderedDisplay || display !== composed && !this.#showsOwnRendering(display);
+  }
+  #declarationsChanged() {
+    const { locale, currency, precision } = this.#declared();
+    return locale !== this.#locale || currency !== this.#currency || precision !== this.#precision;
+  }
+  #revalidate() {
+    this.#configured = true;
+    this.#declarationsHeld = false;
+    const declared = this.#declared();
+    this.#locale = declared.locale;
+    this.#currency = declared.currency;
+    this.#precision = declared.precision;
     this.#grouping = intlFormatter(
       Intl.NumberFormat,
       this.#locale,