stimeo-ui 0.15.0 → 0.17.0

package/dist/controllers/otp_controller.js

@@ -1,14 +1,21 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/otp_controller.ts
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry = create();
+  Object.defineProperty(globalThis, symbol, { value: registry });
+  return registry;
+}
 
-// src/utils/aria_ids.ts
-var counter = 0;
+var ids = sharedRegistry("stimeo-ui.aria-ids.registry.v1", () => ({ counter: 0 }));
 function uniqueId(prefix = "stimeo") {
   let candidate;
   do {
-    counter += 1;
-    candidate = `${prefix}-${counter}`;
+    ids.counter += 1;
+    candidate = `${prefix}-${ids.counter}`;
   } while (typeof document !== "undefined" && document.getElementById(candidate) !== null);
   return candidate;
 }
@@ -19,12 +26,10 @@ function ensureId(element, prefix = "stimeo") {
   return id;
 }
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowKey(key, element) {
   if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
   if (!isRtl(element)) return key;
@@ -35,124 +40,209 @@ 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/attribute_lease.ts
-var AttributeLease = class {
+function isAttributeValue(value) {
+  return value === null || typeof value === "string";
+}
+function readLeaseRecord(element, record) {
+  try {
+    const parsed = JSON.parse(element.getAttribute(record) ?? "null");
+    if (!Array.isArray(parsed)) return void 0;
+    const [original, written, ...rest] = parsed;
+    const linked = rest[0] !== false;
+    const beneath = linked ? rest : rest.slice(1);
+    if (!beneath.every((under) => typeof under === "string")) return void 0;
+    return isAttributeValue(original) && isAttributeValue(written) ? { original, written, linked, beneath } : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var AttributeLease = class _AttributeLease {
+  static #registry = sharedRegistry(
+    "stimeo-ui.attribute-lease.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+  );
   #attribute;
-  #records = /* @__PURE__ */ new Map();
-  /** @param attribute - The attribute whose temporary values this lease owns. */
-  constructor(attribute) {
+  #record;
+  #base;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
     this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    const names = _AttributeLease.#registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
   }
-  /** Writes or removes the leased attribute while preserving its authored value. */
   write(element, value) {
-    const existing = this.#records.get(element);
-    if (existing) {
-      existing.written = value;
-    } else {
-      this.#records.set(element, {
-        original: element.getAttribute(this.#attribute),
-        written: value
-      });
-    }
-    this.#reflect(element, value);
+    const stack = this.#stack(element);
+    const hold = this.#take(stack) ?? this.#acquire(element, stack);
+    this.#held.add(element);
+    const shows = !this.#covered(element, stack, hold);
+    hold.written = value;
+    this.#mark(element, stack);
+    if (shows) this.#reflect(element, value);
   }
-  /** Returns one lease without overwriting a value subsequently authored by a consumer. */
   return(element) {
-    const record = this.#records.get(element);
-    if (!record) return;
-    this.#records.delete(element);
-    const stillOwned = element.getAttribute(this.#attribute) === record.written;
-    if (stillOwned) this.#reflect(element, record.original);
+    const held = this.#held.delete(element);
+    const known = _AttributeLease.#registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? this.#stack(element) : [];
+    const hold = this.#take(stack);
+    if (!hold) return false;
+    const carries = element.getAttribute(this.#attribute) === hold.written;
+    const owns = carries && !this.#covered(element, stack, hold);
+    const index = stack.indexOf(hold);
+    stack.splice(index, 1);
+    const above = stack[index];
+    if (above) above.linked &&= hold.linked;
+    this.#mark(element, stack);
+    if (!owns) return true;
+    const below = hold.linked ? stack[index - 1] : void 0;
+    this.#reflect(element, below ? below.written : hold.original);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#held)) this.return(element);
+  }
+  #stack(element) {
+    const stacks = _AttributeLease.#registry.stacks;
+    const byAttribute = stacks.get(element) ?? /* @__PURE__ */ new Map();
+    stacks.set(element, byAttribute);
+    const stack = byAttribute.get(this.#attribute) ?? this.#seed(element);
+    byAttribute.set(this.#attribute, stack);
+    return stack;
+  }
+  #seed(element) {
+    const found = [];
+    for (const record of _AttributeLease.#registry.names.get(this.#attribute) ?? []) {
+      const read = readLeaseRecord(element, record);
+      if (read) found.push({ ...read, record });
+    }
+    const depth = ({ beneath }) => beneath.filter((name) => found.some((other) => other.record === name)).length;
+    return found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+      lease: null,
+      record,
+      written,
+      original,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.lease === this) ?? stack.find((held) => held.lease === null && held.record === this.#record);
+    if (hold) hold.lease = this;
+    return hold;
+  }
+  #acquire(element, stack) {
+    const current = element.getAttribute(this.#attribute);
+    const top = stack.at(-1);
+    const bottom = stack[0];
+    const over = top?.written === current ? top : void 0;
+    const from = this.#base ? bottom : over;
+    const hold = {
+      lease: this,
+      record: this.#record,
+      written: current,
+      original: from ? from.original : current,
+      linked: !this.#base && over !== void 0
+    };
+    if (this.#base && bottom) {
+      bottom.linked = true;
+      stack.unshift(hold);
+    } else stack.push(hold);
+    return hold;
+  }
+  #covered(element, stack, hold) {
+    const current = element.getAttribute(this.#attribute);
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === current);
+  }
+  #mark(element, stack) {
+    const records = /* @__PURE__ */ new Map([[this.#record, null]]);
+    stack.forEach((hold, index) => {
+      const names = stack.slice(0, index).map((under) => under.record);
+      const beneath = [...new Set(names.reverse())].filter((name) => name !== hold.record);
+      const marker = hold.linked || beneath.length === 0 ? [] : [false];
+      records.set(
+        hold.record,
+        hold.written === hold.original && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.original, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      if (element.getAttribute(name) === recorded) continue;
+      if (recorded === null) element.removeAttribute(name);
+      else element.setAttribute(name, recorded);
+    }
   }
-  /** Reflects only a real value transition, avoiding self-triggered mutation work. */
   #reflect(element, value) {
     if (element.getAttribute(this.#attribute) === value) return;
     if (value === null) element.removeAttribute(this.#attribute);
     else element.setAttribute(this.#attribute, value);
   }
-  /** Returns every outstanding lease using the same ownership check as {@link return}. */
-  returnAll() {
-    for (const element of Array.from(this.#records.keys())) this.return(element);
-  }
-};
-
-// src/utils/before_cache_reset.ts
-var BeforeCacheReset = class _BeforeCacheReset {
-  /** Every subscribed instance, iterated by the one shared document listener. */
-  static #subscribers = /* @__PURE__ */ new Set();
-  /** The shared listener; installed while at least one instance is subscribed. */
-  static #onBeforeCache = () => {
-    for (const subscriber of _BeforeCacheReset.#subscribers) subscriber.#rewind();
-  };
-  #rewind;
-  /** @param rewind - the pass that returns this controller's state to its initial form. */
-  constructor(rewind) {
-    this.#rewind = rewind;
-  }
-  /** Subscribes to `turbo:before-cache`; call from `connect()`. Idempotent. */
-  activate() {
-    const first = _BeforeCacheReset.#subscribers.size === 0;
-    _BeforeCacheReset.#subscribers.add(this);
-    if (first) {
-      document.addEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-    }
-  }
-  /** Unsubscribes; call from `disconnect()`. Safe when never subscribed. */
-  deactivate() {
-    _BeforeCacheReset.#subscribers.delete(this);
-    if (_BeforeCacheReset.#subscribers.size > 0) return;
-    document.removeEventListener("turbo:before-cache", _BeforeCacheReset.#onBeforeCache);
-  }
 };
 
-// src/utils/composition_tracker.ts
+var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
+  "insertCompositionText",
+  "insertFromComposition",
+  "deleteCompositionText",
+  "deleteByComposition"
+]);
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
   #activeTargets = /* @__PURE__ */ new Set();
   #onStart;
   #onEnd;
+  #confirmedTarget = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
   }
-  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
   observe(target) {
     if (this.#observedTargets.has(target)) return;
     target.addEventListener("compositionstart", this.#handleStart);
     target.addEventListener("compositionend", this.#handleEnd);
+    target.addEventListener("keydown", this.#handleKeydown);
     this.#observedTargets.add(target);
   }
-  /** Stops tracking one target and clears any active composition it owned. */
   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);
+    if (this.#confirmedTarget === target) this.#confirmedTarget = null;
   }
-  /** Releases every listener and clears state so reconnect starts cleanly. */
   disconnect() {
     for (const target of this.#observedTargets) {
       target.removeEventListener("compositionstart", this.#handleStart);
       target.removeEventListener("compositionend", this.#handleEnd);
+      target.removeEventListener("keydown", this.#handleKeydown);
     }
     this.#observedTargets.clear();
     this.#activeTargets.clear();
+    this.#confirmedTarget = null;
   }
-  /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
     return this.#activeTargets.size > 0 || event?.isComposing === true;
   }
+  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);
+  }
   #handleStart = (event) => {
+    this.#confirmedTarget = null;
     if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
     this.#onStart?.(event);
   };
   #handleEnd = (event) => {
     if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#confirmedTarget = event.target;
     this.#onEnd?.(event);
   };
+  #handleKeydown = () => {
+    this.#confirmedTarget = null;
+  };
 };
 
-// src/utils/declared_value.ts
 function parseDeclared(raw, parse, fallback) {
   try {
     return parse(raw);
@@ -171,7 +261,46 @@ function compileRegExp(source, anchor = "none") {
   );
 }
 
-// src/utils/half_width.ts
+var FormResetWatcher = class {
+  #owns;
+  #onReset;
+  #frames = /* @__PURE__ */ new Set();
+  #generation = 0;
+  constructor(owns, onReset) {
+    this.#owns = owns;
+    this.#onReset = onReset;
+  }
+  observe() {
+    document.addEventListener("reset", this.#handleReset, true);
+  }
+  disconnect() {
+    document.removeEventListener("reset", this.#handleReset, true);
+    this.#generation += 1;
+    for (const frame of this.#frames) cancelAnimationFrame(frame);
+    this.#frames.clear();
+  }
+  #handleReset = (event) => {
+    const form = event.target;
+    if (!(form instanceof HTMLFormElement) || !this.#owns(form)) return;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation) return;
+      if (event.eventPhase === Event.NONE) {
+        this.#settle(event);
+        return;
+      }
+      const frame = requestAnimationFrame(() => {
+        this.#frames.delete(frame);
+        this.#settle(event);
+      });
+      this.#frames.add(frame);
+    });
+  };
+  #settle(event) {
+    if (!event.defaultPrevented) this.#onReset();
+  }
+};
+
 var FULL_WIDTH_SHIFT = 65248;
 function halfWidthChar(char) {
   if (char >= "\uFF01" && char <= "\uFF5E") {
@@ -185,27 +314,22 @@ function toHalfWidth(text) {
   return out;
 }
 
-// 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;
@@ -218,7 +342,38 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/otp_controller.ts
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+var LEASE_MARKERS = {
+  "aria-invalid": "data-otp-invalid-lease",
+  "aria-errormessage": "data-otp-errormessage-lease",
+  "aria-describedby": "data-otp-describedby-lease"
+};
+function isErrorLease(value) {
+  const lease = value;
+  return typeof lease?.written === "string" && (lease.authored === null || typeof lease.authored === "string");
+}
+function readLease(field, marker) {
+  try {
+    const parsed = JSON.parse(field.getAttribute(marker) ?? "null");
+    return isErrorLease(parsed) ? parsed : null;
+  } catch {
+    return null;
+  }
+}
+function describedByWith(described, errorId, earlier) {
+  const tokens = (described ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== errorId && token !== earlier);
+  return [...tokens, errorId].join(" ");
+}
 var DEFAULT_PATTERN = "[0-9]";
 var DEFAULT_MATCHER = new RegExp(`^(?:${DEFAULT_PATTERN})$`);
 function hasModifier(event) {
@@ -228,51 +383,53 @@ function statesDiffer(left, right) {
   return left.value !== right.value || left.state !== right.state;
 }
 var OtpController = class extends Controller {
+  #moves = new MoveCounter();
   static targets = ["field", "value", "error"];
   static values = {
     pattern: { type: String, default: DEFAULT_PATTERN }
   };
   static actions = ["onInput", "onKeydown", "onPaste", "onPointerDown", "clear"];
   static events = ["change", "complete", "invalid", "reconcile"];
-  /** Validated matcher; the hot path never compiles a raw declaration. */
   #pattern = DEFAULT_MATCHER;
-  /** Source of {@link #pattern}, reported in `invalid` so consumers can word it. */
   #patternSource = DEFAULT_PATTERN;
-  /** Public state carried by the last dispatch; keeps a no-op sync silent. */
   #published = null;
-  /** Field whose confirming `input` after `compositionend` is already handled. */
-  #confirmedField = null;
-  /** True between connect and disconnect, so pre-connect Value changes stay silent. */
   #connected = false;
-  /** Digit each field last committed, restored when rejected input replaced it. */
   #committed = /* @__PURE__ */ new WeakMap();
-  /** Collapses one batch of field target callbacks into a single reconciliation. */
+  #composing = null;
+  #dropHeld = false;
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileFields());
-  #ariaInvalid = new AttributeLease("aria-invalid");
-  #ariaErrorMessage = new AttributeLease("aria-errormessage");
-  #ariaDescribedBy = new AttributeLease("aria-describedby");
-  #errorHidden = new AttributeLease("hidden");
-  #state = new AttributeLease("data-state");
-  /** Rewinds the transient error surface before Turbo freezes the page. */
-  #beforeCache = new BeforeCacheReset(() => this.#clearError());
-  /** Owns IME lifecycle state across every digit field. */
+  #errorHidden = new AttributeLease("hidden", this.identifier);
+  #state = new AttributeLease("data-state", this.identifier);
+  #formReset = new FormResetWatcher(
+    (form) => this.#ownedBy(form),
+    () => {
+      this.#adopt();
+      this.#reconcile.schedule();
+    }
+  );
   #composition = new CompositionTracker({
-    onStart: () => {
-      this.#confirmedField = null;
+    onStart: (event) => {
+      const field = this.#fieldFrom(event);
+      if (field) this.#composing = { field, before: field.value };
     },
     onEnd: (event) => {
+      const composing = this.#composing;
+      this.#composing = null;
       const input = this.#fieldFrom(event);
-      if (!input) return;
-      this.#confirmedField = input;
-      const committed = event.data ?? "";
-      this.#accept(input, committed.length > input.value.length ? committed : input.value);
+      const data = event.data ?? "";
+      const text = input && data.length <= input.value.length ? input.value : data;
+      const commit = input !== null && (composing?.field !== input || text !== composing.before);
+      if (this.#dropHeld) {
+        if (input && commit) input.value = this.#committed.get(input) ?? "";
+        this.#reconcileFields();
+      }
+      if (input && commit) this.#accept(input, text);
     }
   });
   connect() {
     this.#connected = true;
     for (const field of this.fieldTargets) this.#bind(field);
-    document.addEventListener("reset", this.#onReset, true);
-    this.#beforeCache.activate();
+    this.#formReset.observe();
     this.#reconcile.activate();
     this.#adopt();
     this.#sync();
@@ -281,37 +438,47 @@ var OtpController = class extends Controller {
     this.#connected = false;
     for (const field of this.fieldTargets) this.#unbind(field);
     this.#composition.disconnect();
-    document.removeEventListener("reset", this.#onReset, true);
-    this.#beforeCache.deactivate();
+    this.#formReset.disconnect();
     this.#reconcile.cancel();
+    this.#dropHeld = false;
     this.#clearError();
     this.#state.return(this.element);
   }
-  /**
-   * Stimulus lifecycle callback when a new field target enters the DOM.
-   * Wires the new field and folds the wider digit count into one reconciliation,
-   * which stays inert until `connect()` opens the window.
-   */
   fieldTargetConnected(element) {
     this.#bind(element);
     this.#adoptField(element);
     this.#reconcile.schedule();
   }
-  /** Releases a dropped field's listeners and leases, then reconciles the rest. */
   fieldTargetDisconnected(element) {
     this.#unbind(element);
-    this.#returnFieldLeases(element);
+    this.#returnLeases(element);
+    this.#reconcile.schedule();
+  }
+  valueTargetConnected() {
+    this.#reconcile.schedule();
+  }
+  valueTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /**
-   * Re-validates a changed `pattern` declaration once and drops any entered digit
-   * the new pattern no longer accepts, so the combined value stays interpretable.
-   */
+  errorTargetConnected() {
+    this.#followError();
+  }
+  errorTargetDisconnected(element) {
+    if (!this.errorTargets.includes(element)) this.#errorHidden.return(element);
+    this.#followError();
+  }
   patternValueChanged() {
     const compiled = compileRegExp(this.patternValue, "exact");
     this.#patternSource = compiled ? this.patternValue : DEFAULT_PATTERN;
     this.#pattern = compiled ?? DEFAULT_MATCHER;
     if (!this.#connected) return;
+    if (this.#composing !== null) {
+      this.#dropHeld = true;
+      return;
+    }
+    if (this.#dropRejected()) this.#reconcile.schedule();
+  }
+  #dropRejected() {
     let dropped = false;
     for (const field of this.fieldTargets) {
       if (field.value === "" || !this.#isWritable(field)) continue;
@@ -319,24 +486,19 @@ var OtpController = class extends Controller {
       this.#writeField(field, "");
       dropped = true;
     }
-    if (dropped) this.#syncAndDispatch();
+    return dropped;
   }
-  /** Handles keystroke inputs, distributes autofilled text, and advances focus. */
   onInput(event) {
     const input = this.#fieldFrom(event);
     if (!input) return;
-    const confirmed = this.#confirmedField;
-    this.#confirmedField = null;
-    if (confirmed === input) return;
+    if (this.#composition.consumesConfirmedInput(event)) return;
     if (this.#composition.isComposing(event)) return;
     this.#accept(input);
   }
-  /** Handles Backspace clearing, arrows, and home/end navigation. */
   onKeydown(event) {
     if (isReservedArrowChord(event)) return;
     const input = this.#fieldFrom(event);
     if (!input) return;
-    this.#confirmedField = null;
     if (this.#composition.isComposing(event)) return;
     const index = this.fieldTargets.indexOf(input);
     const fields = this.fieldTargets;
@@ -395,19 +557,12 @@ var OtpController = class extends Controller {
       }
     }
   }
-  /** Divides pasted string characters across the available input fields. */
   onPaste(event) {
     const input = this.#fieldFrom(event);
     if (!input) return;
     event.preventDefault();
-    this.#confirmedField = null;
     this.#distribute(input, toHalfWidth(event.clipboardData?.getData("text") ?? ""));
   }
-  /**
-   * Redirects a pointer landing on an empty field to the earliest empty one, so
-   * a passcode is entered in order. Filled fields stay directly reachable for
-   * correction, and keyboard focus is left alone.
-   */
   onPointerDown(event) {
     const input = this.#fieldFrom(event);
     if (input?.value !== "") return;
@@ -416,7 +571,6 @@ var OtpController = class extends Controller {
     event.preventDefault();
     first.focus();
   }
-  /** Empties every writable field and restarts entry at the first of them. */
   clear() {
     for (const field of this.fieldTargets) {
       if (this.#isWritable(field)) this.#writeField(field, "");
@@ -431,17 +585,6 @@ var OtpController = class extends Controller {
       input.select();
     }
   };
-  /** Reconciles derived state after a non-cancelled reset restores the fields. */
-  #onReset = (event) => {
-    const form = event.target;
-    if (!(form instanceof HTMLFormElement) || !this.#ownedBy(form)) return;
-    queueMicrotask(() => {
-      if (event.defaultPrevented) return;
-      this.#adopt();
-      this.#syncAndDispatch();
-    });
-  };
-  /** Whether a form owns at least one field or the hidden combined value. */
   #ownedBy(form) {
     if (this.fieldTargets.some((field) => field.form === form)) return true;
     return this.hasValueTarget && this.valueTarget.form === form;
@@ -453,43 +596,44 @@ var OtpController = class extends Controller {
   #unbind(field) {
     field.removeEventListener("focus", this.#onFieldFocus);
     this.#composition.unobserve(field);
-    if (this.#confirmedField === field) this.#confirmedField = null;
+    if (this.#composing?.field === field) this.#composing = null;
   }
-  /** Reads every field back so a restored or reset group starts consistent. */
   #adopt() {
     for (const field of this.fieldTargets) this.#adoptField(field);
     this.#clearError();
-    if (this.hasErrorTarget) this.errorTarget.setAttribute("hidden", "");
   }
-  /** Takes one field's current value as the truth behind its derived state. */
+  #lease(field, attribute, value) {
+    const marker = LEASE_MARKERS[attribute];
+    const held = readLease(field, marker);
+    const authored = held ? held.authored : field.getAttribute(attribute);
+    field.setAttribute(marker, JSON.stringify({ authored, written: value }));
+    field.setAttribute(attribute, value);
+  }
+  #returnLeases(field) {
+    for (const [attribute, marker] of Object.entries(LEASE_MARKERS)) {
+      const held = readLease(field, marker);
+      if (!held) continue;
+      field.removeAttribute(marker);
+      if (field.getAttribute(attribute) !== held.written) continue;
+      if (held.authored === null) field.removeAttribute(attribute);
+      else field.setAttribute(attribute, held.authored);
+    }
+  }
   #adoptField(field) {
     this.#committed.set(field, field.value);
     this.#markFilled(field, field.value);
   }
-  /**
-   * Absorbs a batch of field additions or removals as one state transition.
-   *
-   * The page, not the user, moved the state here, so it is reported as
-   * `reconcile`: automation listening for `change` must not read a re-render as
-   * an edit, and a passcode that happens to end up full must not fire the
-   * `complete` that submits it.
-   *
-   * Completeness moves on its own when the field count changes: dropping a
-   * trailing empty field completes a passcode whose combined value never moved,
-   * and adding one un-completes it. Comparing the whole derived state, not the
-   * string it contains, is what makes those transitions reportable.
-   */
   #reconcileFields() {
+    if (this.#dropHeld && this.#composing === null) {
+      this.#dropHeld = false;
+      this.#dropRejected();
+    }
     const previous = this.#published;
     const current = this.#sync();
     if (previous && !statesDiffer(previous, current)) return;
+    this.#moves.record();
     this.dispatch("reconcile", { detail: { value: current.value } });
   }
-  /**
-   * Validates the text an entry point received and distributes what it accepts.
-   * `text` defaults to the field's own value; a confirmation passes the string it
-   * committed, which `maxlength` would otherwise have truncated.
-   */
   #accept(input, text = input.value) {
     const raw = toHalfWidth(text);
     if (raw === "") {
@@ -500,10 +644,6 @@ var OtpController = class extends Controller {
     }
     this.#distribute(input, raw);
   }
-  /**
-   * Fills `text`'s accepted characters into the writable fields at and after the
-   * entry point, then leaves focus on the field after the last one filled.
-   */
   #distribute(from, text) {
     const accepted = Array.from(text).filter((char) => this.#pattern.test(char));
     let reached = false;
@@ -528,11 +668,9 @@ var OtpController = class extends Controller {
     this.#clearError();
     this.#syncAndDispatch();
   }
-  /** Restores the digit a field committed before rejected input replaced it. */
   #restore(field) {
     this.#writeField(field, this.#committed.get(field) ?? "");
   }
-  /** Commits one field's value and the derived hook that reports it as entered. */
   #writeField(field, value) {
     field.value = value;
     this.#committed.set(field, value);
@@ -561,27 +699,23 @@ var OtpController = class extends Controller {
   #focusableBefore(index) {
     return this.#before(index).find((field) => this.#isFocusable(field)) ?? null;
   }
-  /** Fields before `index`, nearest first; empty at the first field. */
   #before(index) {
     return this.fieldTargets.slice(0, Math.max(index, 0)).reverse();
   }
-  /** The event's field target, or `null` when the wiring points somewhere else. */
   #fieldFrom(event) {
     const input = event.currentTarget;
     return this.fieldTargets.find((field) => field === input) ?? null;
   }
   #combinedValue() {
-    return this.fieldTargets.map((field) => field.value).join("");
+    return this.fieldTargets.map((field) => this.#publishedText(field)).join("");
   }
-  /** Every field carries a character, and there is at least one field. */
   #isComplete() {
     const fields = this.fieldTargets;
-    return fields.length > 0 && fields.every((field) => field.value.length > 0);
+    return fields.length > 0 && fields.every((field) => this.#publishedText(field).length > 0);
+  }
+  #publishedText(field) {
+    return field === this.#composing?.field ? this.#committed.get(field) ?? "" : field.value;
   }
-  /**
-   * Mirrors the combined value into the form and the root's readable state, and
-   * records what was published so the next pass can compare against it.
-   */
   #sync() {
     const combined = this.#combinedValue();
     if (this.hasValueTarget) {
@@ -601,42 +735,56 @@ var OtpController = class extends Controller {
     const previous = this.#published;
     const { value: combined } = this.#sync();
     if (previous?.value === combined) return;
+    const token = this.#moves.record();
     this.dispatch("change", { detail: { value: combined } });
+    if (!this.#moves.isLatest(token)) return;
     if (this.#isComplete()) {
       this.dispatch("complete", { detail: { value: combined } });
     }
   }
-  /** Surfaces rejected input on every field and on the optional error target. */
   #showError() {
     const errorId = this.hasErrorTarget ? ensureId(this.errorTarget, "stimeo--otp-error") : null;
     for (const field of this.fieldTargets) {
-      this.#ariaInvalid.write(field, "true");
-      if (!errorId) continue;
-      this.#ariaErrorMessage.write(field, errorId);
-      this.#ariaDescribedBy.write(field, this.#describedByWith(field, errorId));
+      this.#lease(field, "aria-invalid", "true");
+      if (errorId) this.#pointAtError(field, errorId);
     }
     if (this.hasErrorTarget) this.#errorHidden.write(this.errorTarget, null);
     this.dispatch("invalid", { detail: { pattern: this.#patternSource } });
   }
-  /** Returns every error lease, restoring the authored error surface. */
-  #clearError() {
-    this.#ariaInvalid.returnAll();
-    this.#ariaErrorMessage.returnAll();
-    this.#ariaDescribedBy.returnAll();
-    this.#errorHidden.returnAll();
+  #pointAtError(field, errorId) {
+    const earlier = readLease(field, LEASE_MARKERS["aria-errormessage"])?.written ?? null;
+    this.#lease(field, "aria-errormessage", errorId);
+    const described = field.getAttribute("aria-describedby");
+    this.#lease(field, "aria-describedby", describedByWith(described, errorId, earlier));
+  }
+  #followError() {
+    if (!this.#connected) return;
+    const reported = this.fieldTargets.filter(
+      (field) => readLease(field, LEASE_MARKERS["aria-invalid"]) !== null
+    );
+    if (reported.length === 0) {
+      this.#hideErrors();
+      return;
+    }
+    if (!this.hasErrorTarget) return;
+    const errorId = ensureId(this.errorTarget, "stimeo--otp-error");
+    for (const field of reported) this.#pointAtError(field, errorId);
+    this.#errorHidden.write(this.errorTarget, null);
   }
-  #returnFieldLeases(field) {
-    this.#ariaInvalid.return(field);
-    this.#ariaErrorMessage.return(field);
-    this.#ariaDescribedBy.return(field);
+  #clearError() {
+    for (const field of this.fieldTargets) this.#returnLeases(field);
+    if (!this.#connected) {
+      this.#errorHidden.returnAll();
+      return;
+    }
+    this.#hideErrors();
   }
-  /** The field's own description tokens with the error id appended once. */
-  #describedByWith(field, errorId) {
-    const tokens = (field.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((token) => token.length > 0 && token !== errorId);
-    return [...tokens, errorId].join(" ");
+  #hideErrors() {
+    const [first, ...others] = this.errorTargets;
+    for (const other of others) this.#errorHidden.return(other);
+    if (first) this.#errorHidden.write(first, "");
   }
 };
 
 export { OtpController };
-//# sourceMappingURL=otp_controller.js.map
 //# sourceMappingURL=otp_controller.js.map