stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/tags_input_controller.js

@@ -1,8 +1,12 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/tags_input_controller.ts
+function fillTemplate(template, values) {
+  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
+    const replacement = Object.hasOwn(values, name) ? values[name] : void 0;
+    return replacement === void 0 ? match : String(replacement);
+  });
+}
 
-// src/utils/announce.ts
 function announce(message, options = {}) {
   const text = message.trim();
   if (text.length === 0) return;
@@ -12,19 +16,11 @@ function announce(message, options = {}) {
     })
   );
 }
-function fillTemplate(template, values) {
-  return template.replace(/\{([a-zA-Z][a-zA-Z0-9]*)\}/g, (match, name) => {
-    const replacement = values[name];
-    return replacement === void 0 ? match : String(replacement);
-  });
-}
 
-// 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,7 +31,6 @@ 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/element_part.ts
 function matchingPart(root, selector) {
   return root.matches(selector) ? root : root.querySelector(selector);
 }
@@ -54,31 +49,14 @@ function writeLabel(slot, text) {
   else slot.prepend(text);
 }
 
-// src/utils/roving_tabindex.ts
 var RovingTabindex = class {
-  /** Returns the current ordered item elements; called on every operation. */
   #getItems;
-  /**
-   * @param getItems - Returns the current ordered item elements. Called on every
-   *   operation so the live target list is always used.
-   */
   constructor(getItems) {
     this.#getItems = getItems;
   }
-  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
   get activeIndex() {
     return this.#getItems().findIndex((item) => item.tabIndex === 0);
   }
-  /**
-   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
-   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
-   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
-   * "nothing is currently tabbable".
-   *
-   * @param index - Position of the item to make tabbable.
-   * @param options - Pass `{ focus: true }` to also move DOM focus to that item,
-   *   and `items` to reuse an event-scoped collection snapshot.
-   */
   setActive(index, options = {}) {
     const { focus = false } = options;
     const items = options.items ?? this.#getItems();
@@ -89,9 +67,8 @@ var RovingTabindex = class {
   }
 };
 
-// src/utils/chip_row.ts
 var ChipRow = class {
-  #directionElement;
+  #getDirectionElement;
   #getItems;
   #getButton;
   #onRemove;
@@ -99,16 +76,12 @@ var ChipRow = class {
   #roving = new RovingTabindex(() => this.buttons);
   #container = null;
   constructor(options) {
-    this.#directionElement = options.directionElement;
+    this.#getDirectionElement = options.getDirectionElement;
     this.#getItems = options.getItems;
     this.#getButton = options.getButton ?? ((item) => matchingPart(item, "button"));
     this.#onRemove = options.onRemove;
     this.#focusAfterEnd = options.focusAfterEnd;
   }
-  /**
-   * Binds delegation to `container`; any row currently bound is released first.
-   * Idempotent for the same node, so target callbacks may call it freely.
-   */
   connect(container) {
     if (this.#container === container) return;
     this.disconnect();
@@ -116,10 +89,6 @@ var ChipRow = class {
     container.addEventListener("click", this.#onClick);
     container.addEventListener("keydown", this.#onKeydown);
   }
-  /**
-   * Releases the current row. When `container` is supplied, a stale disconnect
-   * callback cannot tear listeners off a newer replacement target.
-   */
   disconnect(container) {
     const current = this.#container;
     if (!current || container !== void 0 && current !== container) return;
@@ -127,19 +96,15 @@ var ChipRow = class {
     current.removeEventListener("keydown", this.#onKeydown);
     this.#container = null;
   }
-  /** Current remove buttons, at most one consumer-resolved button per chip item. */
   get buttons() {
     return this.#entries.map(({ button }) => button);
   }
-  /** Number of currently navigable remove buttons. */
   get length() {
     return this.buttons.length;
   }
-  /** Declared-item index of the last navigable chip, or `-1` for an empty row. */
   get lastIndex() {
     return this.#entries.at(-1)?.itemIndex ?? -1;
   }
-  /** Keeps exactly one button tabbable, preferring the first authored Tab stop. */
   ensureTabStop() {
     const buttons = this.#entries.map(({ button }) => button);
     const active = buttons.findIndex((button) => button.tabIndex === 0);
@@ -148,7 +113,6 @@ var ChipRow = class {
       this.#roving.setActive(active === -1 ? 0 : active, { items: buttons });
     }
   }
-  /** Focuses the last chip, returning false for an empty row. */
   focusLast() {
     const buttons = this.#entries.map(({ button }) => button);
     const last = buttons.length - 1;
@@ -156,10 +120,6 @@ var ChipRow = class {
     this.#roving.setActive(last, { focus: true, items: buttons });
     return true;
   }
-  /**
-   * Focuses the chip that followed a removed index, or the new last chip.
-   * Returns false when removal emptied the row so the consumer can rescue focus.
-   */
   focusAfterRemoval(index) {
     const entries = this.#entries;
     if (entries.length === 0) return false;
@@ -170,14 +130,12 @@ var ChipRow = class {
     });
     return true;
   }
-  /** Current remove-button entries, retaining each button's declared item index. */
   get #entries() {
     return this.#getItems().flatMap((item, itemIndex) => {
       const button = this.#getButton(item);
       return button ? [{ button, itemIndex }] : [];
     });
   }
-  /** Resolves a delegated event to the remove button owned by a declared chip. */
   #entry(event) {
     const target = event.target;
     if (!(target instanceof Element)) return null;
@@ -188,20 +146,18 @@ var ChipRow = class {
     const entry = entries[buttonIndex];
     return { ...entry, buttonIndex, buttons: entries.map(({ button: button2 }) => button2) };
   }
-  /** Delegates removal clicks without waiting for Stimulus to wire a new chip. */
   #onClick = (event) => {
     const entry = this.#entry(event);
     if (!entry) return;
     this.#onRemove(entry.itemIndex);
   };
-  /** Applies the shared logical-arrow and removal policy within the chip row. */
   #onKeydown = (event) => {
     if (event.defaultPrevented || isReservedArrowChord(event)) return;
     const entry = this.#entry(event);
     if (!entry) return;
     const buttons = entry.buttons;
     const index = entry.buttonIndex;
-    switch (logicalArrowKey(event.key, this.#directionElement)) {
+    switch (logicalArrowKey(event.key, this.#getDirectionElement())) {
       case "ArrowLeft":
         if (index > 0) {
           event.preventDefault();
@@ -225,86 +181,191 @@ var ChipRow = class {
   };
 };
 
-// src/utils/composition_tracker.ts
 var COMPOSITION_INPUT_TYPES = /* @__PURE__ */ new Set([
   "insertCompositionText",
   "insertFromComposition",
   "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;
-  /** The field whose confirming `input` is still owed, while the window is open. */
+  #onAbandon;
   #confirmedTarget = null;
+  #keyComposing = false;
+  #connected = false;
+  #abandoned = null;
   constructor(options = {}) {
     this.#onStart = options.onStart;
     this.#onEnd = options.onEnd;
+    this.#onAbandon = options.onAbandon;
   }
-  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */
   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);
   }
-  /** 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);
+    this.#release(target);
+    if (this.#composition?.target === target) this.#letGo();
     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.#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;
   }
-  /** True when lifecycle tracking or the current event reports composition. */
   isComposing(event) {
-    return this.#activeTargets.size > 0 || event?.isComposing === true;
-  }
-  /**
-   * Whether `event` is the `input` echoing the composition just confirmed.
-   *
-   * Asking closes the window either way, so one confirmation is folded at most
-   * once and a consumer asks once per `input`.
-   */
+    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);
   };
-  /** A key on an observed field opens an edit of its own, so no echo is owed. */
-  #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();
   };
 };
 
-// src/utils/field_mirror.ts
 function writeFields(container, values, { name, form = "" }) {
   const current = [...container.children];
   const submits = current.length === values.length && current.every(
@@ -327,27 +388,36 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/microtask_coalescer.ts
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
+
 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. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -360,12 +430,93 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/target_selector.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+var NUMBER_BOUNDS = {
+  nonNegative: { finite: true, min: 0 }};
+function matchesNumberBounds(value, bounds) {
+  if (!Number.isFinite(value)) {
+    const direction = value === Infinity ? "positive" : value === -Infinity ? "negative" : null;
+    if (direction === null) return false;
+    if (bounds.allowInfinity !== "both" && bounds.allowInfinity !== direction) return false;
+  }
+  if (bounds.min !== void 0 && value < bounds.min) return false;
+  if (bounds.max !== void 0 && value > bounds.max) return false;
+  if (bounds.exclusiveMin !== void 0 && value <= bounds.exclusiveMin) return false;
+  if (bounds.integer && !Number.isInteger(value)) return false;
+  if (bounds.allowedValues !== void 0 && !bounds.allowedValues.includes(value)) return false;
+  return true;
+}
+
+function readNumber(raw, fallback, bounds) {
+  return matchesNumberBounds(raw, bounds) ? raw : fallback;
+}
+
+var NumberValueReader = class {
+  #lastRejected = /* @__PURE__ */ new Map();
+  read(owner, name, raw, fallback, bounds) {
+    const resolved = readNumber(raw, fallback, bounds);
+    if (matchesNumberBounds(raw, bounds)) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    const attribute = `data-${owner.identifier}-${name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-value`;
+    const literal = owner.element.getAttribute(attribute);
+    if (literal === null) {
+      this.#lastRejected.delete(name);
+      return resolved;
+    }
+    if (this.#lastRejected.get(name) !== literal) {
+      this.#lastRejected.set(name, literal);
+      console.warn(
+        `Stimeo UI: "${owner.identifier}" has an invalid number Value "${name}" declaration ${JSON.stringify(literal)}; using ${fallback}.`
+      );
+    }
+    return resolved;
+  }
+};
+
 function targetSelector(identifier, name) {
   return `[data-${identifier}-target~="${name}"]`;
 }
 
-// src/utils/template_row.ts
 function cloneTemplateRoot(template) {
   const root = template.content.firstElementChild;
   return root instanceof HTMLElement ? root.cloneNode(true) : null;
@@ -376,22 +527,15 @@ var TemplateRow = class {
   constructor(options) {
     this.#options = options;
   }
-  /** The attribute selector for one declared part, in this controller's namespace. */
   selector(name) {
     return targetSelector(this.#options.identifier, name);
   }
-  /** Re-arms the once-per-connection diagnostic. */
   connect() {
     this.#warned = false;
   }
-  /**
-   * Names one missing part on the console, at most once per connection, and
-   * returns `null` so a caller can hand it straight back.
-   */
   report(missing) {
     return this.#say(`lacks ${missing}`);
   }
-  /** Writes one diagnostic per connection, saying what the template got wrong. */
   #say(problem) {
     if (this.#warned) return null;
     this.#warned = true;
@@ -399,10 +543,6 @@ var TemplateRow = class {
     console.warn(`Stimeo UI: "${identifier}" ${outcome} because its ${noun} ${problem}.`);
     return null;
   }
-  /**
-   * Clones the row and resolves its parts, or names what the template got wrong
-   * and returns `null`. `values` fills the button's authored `aria-label`.
-   */
   instantiate(template, values) {
     const { root: rootName, required, optional, button: buttonName } = this.#options;
     const root = cloneTemplateRoot(template);
@@ -430,7 +570,6 @@ var TemplateRow = class {
     button.setAttribute("aria-label", fillTemplate(name, values));
     return { root, slots, button };
   }
-  /** The row may be its own part; otherwise the first descendant carrying the target. */
   #resolve(root, name) {
     return matchingPart(root, this.selector(name));
   }
@@ -439,8 +578,9 @@ var TemplateRow = class {
   }
 };
 
-// src/controllers/tags_input_controller.ts
-var TagsInputController = class extends Controller {
+var TagsInputController = class _TagsInputController extends Controller {
+  #numbers = new NumberValueReader();
+  #moves = new MoveCounter();
   static targets = ["input", "tags", "tag", "tagTemplate", "label", "remove", "fields"];
   static values = {
     delimiter: { type: String, default: "," },
@@ -451,11 +591,12 @@ var TagsInputController = class extends Controller {
     announceText: { type: String, default: "" },
     announceRemovedText: { type: String, default: "" }
   };
+  static valueConstraints = {
+    max: NUMBER_BOUNDS.nonNegative
+  };
   static actions = ["onKeydown"];
   static events = ["change", "reconcile", "reject"];
-  /** Last reconciled tag order, separating user edits from DOM/Turbo repair. */
   #tagValues = [];
-  /** Builds one chip from the authored template and owns its diagnostic. */
   #rows = new TemplateRow({
     identifier: this.identifier,
     root: "tag",
@@ -464,18 +605,15 @@ var TagsInputController = class extends Controller {
     outcome: "added no tag",
     noun: "chip template"
   });
-  /** Collapses one target/Value mutation batch into one final-DOM repair pass. */
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileTags());
+  #reconcile = new MorphRenderWatcher(() => this.#reconcileTags());
   #chipRow = new ChipRow({
-    directionElement: this.element,
+    getDirectionElement: () => this.#chipDirectionElement,
     getItems: () => this.tagTargets,
     getButton: (tag) => matchingPart(tag, `button${this.#rows.selector("remove")}`),
     onRemove: (index) => this.#removeAt(index),
     focusAfterEnd: () => this.#focusInput()
   });
-  /** Owns IME lifecycle state for commit-key guarding. */
   #composition = new CompositionTracker();
-  /** Wires tag-list keyboard navigation and removal, and seeds the single Tab stop. */
   connect() {
     this.#rows.connect();
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
@@ -483,56 +621,47 @@ var TagsInputController = class extends Controller {
     const tags = this.#values;
     this.#syncState(tags);
     this.#tagValues = tags;
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
   }
-  /** Releases the delegated listeners so no handler outlives the element. */
   disconnect() {
-    this.#reconcile.cancel();
+    this.#reconcile.disconnect();
     this.#composition.disconnect();
     this.#chipRow.disconnect();
   }
-  /** Tracks an input added initially or after connect. */
   inputTargetConnected(input) {
     this.#composition.observe(input);
   }
-  /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
   }
-  /** Rebinds delegation and derived state when the tags container is replaced. */
   tagsTargetConnected(_tags) {
     this.#reconcile.schedule();
   }
-  /** Releases only the row that disconnected, leaving a newer target intact. */
   tagsTargetDisconnected(tags) {
     this.#chipRow.disconnect(tags);
     this.#reconcile.schedule();
   }
-  /** Reconciles a tag inserted by Turbo, a server render, or another controller. */
   tagTargetConnected(_tag) {
     this.#reconcile.schedule();
   }
-  /** Reconciles a tag removed by Turbo, a server render, or another controller. */
   tagTargetDisconnected(_tag) {
     this.#reconcile.schedule();
   }
-  /** Seeds a fields target inserted after connect. */
   fieldsTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Rebuilds submitted fields when the public name changes at runtime. */
+  fieldsTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
   nameValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Repoints submitted fields when the owning form changes at runtime. */
   formValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Recomputes the full hook when the cap changes at runtime. */
   maxValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Commits on `Enter`/delimiter and deletes the last tag on empty `Backspace`. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
@@ -551,25 +680,20 @@ var TagsInputController = class extends Controller {
       }
       return;
     }
-    if (logicalArrowKey(event.key, this.element) === "ArrowLeft" && this.inputTarget.value === "") {
+    if (logicalArrowKey(event.key, this.#chipDirectionElement) === "ArrowLeft" && this.inputTarget.value === "") {
       if (this.#chipRow.length > 0) {
         event.preventDefault();
         this.#chipRow.focusLast();
       }
     }
   }
-  /**
-   * Validates and adds the current input value as a tag, then clears the input.
-   *
-   * @stimeoRuntimeOnly `max` and `allowDuplicates` decide whether this one entry is taken.
-   */
   #commitInput() {
     const value = this.inputTarget.value.trim();
     if (value === "") {
       this.#reject(value, "empty");
       return;
     }
-    if (this.maxValue > 0 && this.tagTargets.length >= this.maxValue) {
+    if (this.#safeMax > 0 && this.tagTargets.length >= this.#safeMax) {
       this.#reject(value, "max");
       return;
     }
@@ -580,18 +704,8 @@ var TagsInputController = class extends Controller {
     if (!this.#appendTag(value)) return;
     this.inputTarget.value = "";
     const tags = this.#values;
-    this.#syncState(tags, true);
-    this.#tagValues = tags;
-    this.#announceTransition(true, value, tags.length);
-    this.dispatch("change", { detail: { tags } });
+    this.#publishTags(tags, true, value);
   }
-  /**
-   * Builds one chip from the template and appends it to the tag list.
-   *
-   * A refused row leaves the commit a no-op — nothing about the input, the tag
-   * set, the hidden fields, the announcement, or the events changes — and the
-   * row reports why on the console once per connection.
-   */
   #appendTag(value) {
     if (!this.hasTagsTarget) return false;
     if (!this.hasTagTemplateTarget) {
@@ -606,76 +720,82 @@ var TagsInputController = class extends Controller {
     this.tagsTarget.appendChild(row.root);
     return true;
   }
-  /** Removes the tag at `index`, then applies the interaction-origin focus policy. */
   #removeAt(index, focus = "neighbor") {
     const tag = this.tagTargets[index];
     if (!tag) return;
     const value = tag.dataset.value ?? "";
     tag.remove();
     const tags = this.#values;
-    this.#syncState(tags, true);
-    this.#tagValues = tags;
-    this.#announceTransition(false, value, tags.length);
-    this.dispatch("change", { detail: { tags } });
+    if (!this.#publishTags(tags, false, value)) return;
     if (focus === "input") {
       this.#focusInput();
       return;
     }
     if (!this.#chipRow.focusAfterRemoval(index)) this.#focusInput();
   }
-  /** Moves focus to the current input when one exists. */
+  get #chipDirectionElement() {
+    return this.hasTagsTarget ? this.tagsTarget : this.element;
+  }
   #focusInput() {
     if (this.hasInputTarget) this.inputTarget.focus();
   }
-  /**
-   * Rebuilds the hidden form fields, the `full` flag, and the roving Tab stop.
-   *
-   * @stimeoRenderRoot
-   */
-  #syncState(values, notify = false) {
+  #syncState(values) {
+    let fieldChanged = false;
     if (this.hasFieldsTarget) {
       const options = { name: this.nameValue, form: this.formValue };
-      if (writeFields(this.fieldsTarget, values, options) && notify) {
-        commitField(this.fieldsTarget);
-      }
+      fieldChanged = writeFields(this.fieldsTarget, values, options);
     }
-    const full = this.maxValue > 0 && values.length >= this.maxValue;
+    const full = this.#safeMax > 0 && values.length >= this.#safeMax;
     this.element.toggleAttribute(`data-${this.identifier}-full`, full);
     this.#chipRow.ensureTabStop();
+    return fieldChanged;
+  }
+  #publishTags(tags, added, value) {
+    const changed = !this.#sameTags(this.#tagValues, tags);
+    const fieldChanged = this.#syncState(tags);
+    this.#tagValues = tags;
+    if (!changed) return true;
+    const token = this.#moves.record();
+    if (fieldChanged) commitField(this.fieldsTarget);
+    if (!this.#moves.isLatest(token)) return false;
+    this.#announceTransition(added, value, tags.length);
+    if (!this.#moves.isLatest(token)) return false;
+    this.dispatch("change", { detail: { tags } });
+    return this.#moves.isLatest(token);
   }
-  /** Repairs derived state after DOM/Turbo changes and reports a changed tag order. */
   #reconcileTags() {
     if (this.hasTagsTarget) this.#chipRow.connect(this.tagsTarget);
-    else this.#chipRow.disconnect();
     const tags = this.#values;
     this.#syncState(tags);
     const changed = !this.#sameTags(this.#tagValues, tags);
     this.#tagValues = tags;
-    if (changed) this.dispatch("reconcile", { detail: { tags } });
+    if (changed) {
+      this.dispatch("reconcile", { detail: { tags } });
+    }
   }
-  /**
-   * Sends one localized tag transition through the page's shared announcer.
-   *
-   * @stimeoRuntimeOnly The texts word the one announcement of this change.
-   */
   #announceTransition(added, value, count) {
     const template = added ? this.announceTextValue : this.announceRemovedTextValue;
     announce(fillTemplate(template, { label: value, value, count }));
   }
-  /** Reports rejection with `{ value, reason: "duplicate" | "empty" | "max" }`. */
   #reject(value, reason) {
     this.dispatch("reject", { detail: { value, reason } });
   }
-  /** Current tag values in order. */
   get #values() {
     return this.tagTargets.map((tag) => tag.dataset.value ?? "");
   }
-  /** Whether two arrays carry the same values in the same submitted order. */
   #sameTags(left, right) {
     return left.length === right.length && left.every((value, index) => value === right[index]);
   }
+  get #safeMax() {
+    return this.#numbers.read(
+      this,
+      "max",
+      this.maxValue,
+      _TagsInputController.values.max.default,
+      _TagsInputController.valueConstraints.max
+    );
+  }
 };
 
 export { TagsInputController };
-//# sourceMappingURL=tags_input_controller.js.map
 //# sourceMappingURL=tags_input_controller.js.map