stimeo-ui 0.16.0 → 0.18.0

package/dist/controllers/combobox_controller.js

@@ -1,130 +1,416 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/combobox_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
+
+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;
+}
 
-// src/utils/active_option.ts
 function syncActiveOption(options, active) {
   let written = 0;
   for (const option of options) {
     const next = option === active ? "true" : "false";
-    if (option.getAttribute("aria-selected") === next) continue;
-    option.setAttribute("aria-selected", next);
-    written += 1;
+    if (setAttributeIfChanged(option, "aria-selected", next)) written += 1;
   }
   return written;
 }
 
-// src/utils/arrow_step.ts
 function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+function sharedRegistry(key, create) {
+  const symbol = Symbol.for(key);
+  const scope = globalThis;
+  const existing = scope[symbol];
+  if (existing !== void 0) return existing;
+  const registry2 = create();
+  Object.defineProperty(globalThis, symbol, { value: registry2 });
+  return registry2;
+}
+
+var registry = sharedRegistry(
+  "stimeo-ui.attribute-lease.registry.v1",
+  () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Map() })
+);
+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;
+  }
+}
+function attributeStack(element, attribute) {
+  const byAttribute = registry.stacks.get(element) ?? /* @__PURE__ */ new Map();
+  registry.stacks.set(element, byAttribute);
+  const known = byAttribute.get(attribute);
+  if (known) return known;
+  const found = [];
+  for (const record of registry.names.get(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;
+  const stack = found.sort((one, other) => depth(one) - depth(other)).map(({ record, written, original, linked }, index) => ({
+    lease: null,
+    record,
+    written,
+    original,
+    linked: linked && index > 0
+  }));
+  byAttribute.set(attribute, stack);
+  return stack;
+}
+function findHold(stack, lease, record) {
+  return stack.find((held) => held.lease === lease) ?? stack.find((held) => held.lease === null && held.record === record);
+}
+var AttributeLease = class {
+  #attribute;
+  #record;
+  #base;
+  #preserveAuthor;
+  #held = /* @__PURE__ */ new Set();
+  constructor(attribute, owner, options = {}) {
+    this.#attribute = attribute;
+    this.#record = `data-${owner}-${attribute}-lease`;
+    this.#base = options.base === true;
+    this.#preserveAuthor = options.preserveAuthor === true;
+    const names = registry.names;
+    names.set(attribute, (names.get(attribute) ?? /* @__PURE__ */ new Set()).add(this.#record));
+  }
+  write(element, value) {
+    const stack = attributeStack(element, this.#attribute);
+    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);
+  }
+  return(element) {
+    const held = this.#held.delete(element);
+    const known = registry.stacks.get(element)?.has(this.#attribute);
+    const stack = held || known || element.hasAttribute(this.#record) ? attributeStack(element, this.#attribute) : [];
+    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);
+  }
+  #take(stack) {
+    const hold = findHold(stack, this, 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 ? this.#preserveAuthor && !stack.some((held) => held.written === current) ? void 0 : 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) {
+      setAttributeIfChanged(element, name, recorded);
+    }
+  }
+  #reflect(element, value) {
+    setAttributeIfChanged(element, this.#attribute, value);
+  }
+};
 
-// 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 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;
@@ -137,7 +423,17 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/option_scroll.ts
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
 function scrollOptionIntoView(list, option) {
   if (list.scrollHeight <= list.clientHeight) return;
   const listRect = list.getBoundingClientRect();
@@ -149,16 +445,20 @@ function scrollOptionIntoView(list, option) {
   }
 }
 
-// src/utils/state_regions.ts
-var StateRegions = class {
+var StateRegions = class _StateRegions {
+  static #registry = sharedRegistry(
+    "stimeo-ui.state-regions.registry.v1",
+    () => ({ stacks: /* @__PURE__ */ new WeakMap(), names: /* @__PURE__ */ new Set() })
+  );
   #whenTrue;
   #whenFalse;
-  #taken = /* @__PURE__ */ new WeakSet();
-  constructor(options) {
+  #record;
+  constructor(options, owner) {
     this.#whenTrue = options.whenTrue;
     this.#whenFalse = options.whenFalse ?? null;
+    this.#record = `data-${owner}-hidden-region`;
+    _StateRegions.#registry.names.add(this.#record);
   }
-  /** Shows the regions inside `host` that belong to `isTrue` and hides the others. */
   reflect(host, isTrue) {
     const shown = this.#inside(host, this.#whenTrue());
     if (!this.#whenFalse) {
@@ -174,103 +474,199 @@ var StateRegions = class {
     for (const region of shown) this.#write(region, !isTrue);
     for (const region of hiddenSide) this.#write(region, isTrue);
   }
-  /** Writes `hidden` where it moves, noting which regions it takes out of view. */
+  release(host) {
+    for (const region of [host, ...host.querySelectorAll("*")]) {
+      if (!(region instanceof HTMLElement)) continue;
+      const stack = this.#held(region);
+      const hold = stack && this.#take(stack);
+      if (!stack || !hold) continue;
+      const owns = region.hidden === hold.written && !this.#covered(region, stack, hold);
+      const index = stack.indexOf(hold);
+      stack.splice(index, 1);
+      const above = stack[index];
+      if (above) above.linked &&= hold.linked;
+      if (owns) {
+        const below = hold.linked ? stack[index - 1] : void 0;
+        if (below) {
+          if (region.hidden !== below.written) region.hidden = below.written;
+        } else {
+          setAttributeIfChanged(region, "hidden", hold.authored);
+        }
+      }
+      this.#mark(region, stack);
+    }
+  }
   #write(region, hidden) {
-    if (hidden) this.#taken.add(region);
-    else this.#taken.delete(region);
-    if (region.hidden !== hidden) region.hidden = hidden;
+    const stack = this.#stack(region);
+    const hold = this.#take(stack) ?? this.#acquire(region, stack);
+    const shows = !this.#covered(region, stack, hold);
+    hold.written = hidden;
+    if (shows && region.hidden !== hidden) region.hidden = hidden;
+    this.#mark(region, stack);
   }
-  /** Returns a region this instance hid; one it never hid keeps what it carries. */
   #give(region) {
-    if (this.#taken.delete(region)) region.hidden = false;
+    const stack = this.#held(region);
+    if (stack && this.#take(stack)?.written) this.#write(region, false);
+  }
+  #held(region) {
+    return _StateRegions.#registry.stacks.has(region) || region.hasAttribute(this.#record) ? this.#stack(region) : void 0;
+  }
+  #stack(region) {
+    const stacks = _StateRegions.#registry.stacks;
+    const stack = stacks.get(region) ?? this.#seed(region);
+    stacks.set(region, stack);
+    return stack;
+  }
+  #seed(region) {
+    const found = [];
+    for (const record of _StateRegions.#registry.names) {
+      const read = this.#recorded(region, 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, authored, written, linked }, index) => ({
+      instance: null,
+      record,
+      authored,
+      written,
+      linked: linked && index > 0
+    }));
+  }
+  #take(stack) {
+    const hold = stack.find((held) => held.instance === this) ?? stack.find((held) => held.instance === null && held.record === this.#record);
+    if (hold) hold.instance = this;
+    return hold;
+  }
+  #covered(region, stack, hold) {
+    return stack.slice(stack.indexOf(hold) + 1).some((above) => above.written === region.hidden);
+  }
+  #acquire(region, stack) {
+    const top = stack.at(-1);
+    const over = top && region.hidden === top.written ? top : void 0;
+    const hold = {
+      instance: this,
+      record: this.#record,
+      authored: over ? over.authored : region.getAttribute("hidden"),
+      written: false,
+      linked: over !== void 0
+    };
+    stack.push(hold);
+    return hold;
+  }
+  #mark(region, 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,
+        region.getAttribute("hidden") === hold.authored && beneath.length === 0 && index === stack.length - 1 ? null : JSON.stringify([hold.authored, hold.written, ...marker, ...beneath])
+      );
+    });
+    for (const [name, recorded] of records) {
+      setAttributeIfChanged(region, name, recorded);
+    }
+  }
+  #recorded(region, name) {
+    try {
+      const parsed = JSON.parse(region.getAttribute(name) ?? "null");
+      if (!Array.isArray(parsed)) return null;
+      const [authored, written, ...rest] = parsed;
+      if (authored !== null && typeof authored !== "string") return null;
+      const linked = rest[0] !== false;
+      const beneath = linked ? rest : rest.slice(1);
+      if (!beneath.every((under) => typeof under === "string")) return null;
+      return typeof written === "boolean" ? { authored, written, linked, beneath } : null;
+    } catch {
+      return null;
+    }
   }
-  /** The declared regions that sit within `host`, which may be the host itself. */
   #inside(host, regions) {
     return regions.filter((region) => host.contains(region));
   }
 };
 
-// src/controllers/combobox_controller.ts
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var ComboboxController = class extends Controller {
+  #moves = new MoveCounter();
+  #moveToken = 0;
   static targets = ["input", "list", "option", "empty"];
-  static actions = ["close", "filter", "onKeydown", "open", "selectByClick"];
+  static actions = ["close", "filter", "onKeydown", "open", "select"];
   static events = ["selected"];
-  /** Owns `hidden` on the regions declared for the empty state. */
-  #emptyRegion = new StateRegions({ whenTrue: () => this.emptyTargets });
-  /** Stable ID of the active option; the live element is resolved before every use. */
+  #emptyRegion = new StateRegions({ whenTrue: () => this.emptyTargets }, this.identifier);
   #activeId = null;
   #connected = false;
-  /** Collapses one mutation batch of target callbacks into a single pass. */
+  #list = null;
+  #listHidden = new AttributeLease("hidden", this.identifier);
+  #expanded = new AttributeLease("aria-expanded", this.identifier);
+  #activeDescendant = new AttributeLease(
+    "aria-activedescendant",
+    this.identifier
+  );
   #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
-  /**
-   * Suppresses {@link ComboboxController.open | open} for the duration of the
-   * programmatic re-focus in `#select`, so committing a value (which returns focus
-   * to the input) does not immediately re-open the listbox via a `focus`-bound
-   * action.
-   */
   #suppressOpen = false;
-  /** Owns IME lifecycle state; confirmed text re-filters the list once. */
   #composition = new CompositionTracker({ onEnd: () => this.filter() });
-  /** Starts closed with no active option and registers the outside-click listener. */
+  #listeners = new ListenerSet();
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
-    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#list = this.hasListTarget ? this.listTarget : null;
+    this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
     this.#connected = true;
     this.#reconcile.activate();
   }
-  /** Removes the document-level listener registered in {@link connect}. */
   disconnect() {
     this.#connected = false;
     this.#reconcile.cancel();
     this.#composition.disconnect();
-    document.removeEventListener("click", this.#onOutsideClick, true);
+    this.#listeners.dispose();
   }
-  /** Tracks an input added initially or after connect. */
   inputTargetConnected(input) {
     this.#composition.observe(input);
     if (this.#connected) this.#queueOptionReconciliation();
   }
-  /** Removes composition listeners when the active input is replaced or removed. */
   inputTargetDisconnected(input) {
     this.#composition.unobserve(input);
+    if (!this.inputTargets.includes(input)) {
+      this.#expanded.return(input);
+      this.#activeDescendant.return(input);
+    }
+    this.#queueOptionReconciliation();
+  }
+  listTargetConnected() {
+    this.#adoptList();
+  }
+  listTargetDisconnected(list) {
+    this.#adoptList();
+    if (!this.listTargets.includes(list)) this.#listHidden.return(list);
   }
-  /** Settles a connecting region on the side the empty state is on. */
   emptyTargetConnected() {
     this.#reflectEmptyState();
   }
-  /** Establishes the active-state baseline, then reconciles a runtime addition. */
   optionTargetConnected(option) {
     option.setAttribute("aria-selected", "false");
     if (this.#connected) this.#queueOptionReconciliation();
   }
-  /** Clears the disconnected node's active state, then reconciles the survivors. */
   optionTargetDisconnected(option) {
     option.setAttribute("aria-selected", "false");
     if (this.#connected) this.#queueOptionReconciliation();
   }
-  /** Filters confirmed input text and opens the listbox. */
   filter(event) {
     if (this.#composition.isComposing(event)) return;
     this.open();
   }
-  /**
-   * Opens the listbox, re-filtering the options against the current input value
-   * so the visible options and empty state always match what is typed (e.g.
-   * re-opening with a stale non-matching value still surfaces the empty state).
-   */
   open() {
     if (!this.hasListTarget || !this.hasInputTarget || this.#suppressOpen) return;
     this.#applyFilter();
-    this.listTarget.hidden = false;
-    this.inputTarget.setAttribute("aria-expanded", "true");
+    this.#listHidden.write(this.listTarget, null);
+    this.#expanded.write(this.inputTarget, "true");
     this.#setActive(-1);
     this.#reflectEmptyState();
   }
-  /**
-   * Hides options that don't match the current input value (case-insensitive
-   * substring). An empty query shows every option. Does not change open state.
-   */
   #applyFilter() {
     const query = this.inputTarget.value.trim().toLowerCase();
     for (const option of this.optionTargets) {
@@ -278,28 +674,18 @@ var ComboboxController = class extends Controller {
       option.hidden = query.length > 0 && !text.includes(query);
     }
   }
-  /**
-   * Closes the listbox, clears the active option, and updates ARIA state.
-   *
-   * Survives a missing input in both directions. {@link inputTargetConnected}
-   * accepts an input added after connect, so dereferencing it here would abort
-   * `connect()` before it registers the outside-click listener, and nothing
-   * re-registers it later. Symmetrically, an input removed while the popup is
-   * open must still let the popup come down — so hiding the list is
-   * unconditional and only the ARIA half is guarded.
-   */
   close() {
     if (!this.hasListTarget) return;
-    this.listTarget.hidden = true;
+    this.#listHidden.write(this.listTarget, "");
     this.#reflectEmptyState();
-    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "false");
+    if (this.hasInputTarget) this.#expanded.write(this.inputTarget, "false");
     this.#setActive(-1);
   }
-  /** Routes keyboard interaction per the APG combobox model. */
   onKeydown(event) {
     if (this.#composition.isComposing(event)) return;
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event, ["alt"])) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     if (event.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
       if (event.key === "ArrowDown" ? !this.#isClosed : this.#isClosed) return;
       event.preventDefault();
@@ -368,56 +754,41 @@ var ComboboxController = class extends Controller {
         break;
     }
   }
-  /**
-   * Closes the listbox when a click lands outside the combobox. Mirrors the menu
-   * button's outside-click behavior; clicks on an option are inside the element,
-   * so `#select` (not this handler) closes the popup after committing.
-   */
   #onOutsideClick = (event) => {
     if (!this.#isClosed && !this.element.contains(event.target)) this.close();
   };
-  /** Selects the clicked option. Bound via `data-action` (click). */
-  selectByClick(event) {
-    const option = event.currentTarget.closest('[role="option"]');
-    if (option && this.optionTargets.includes(option)) this.#select(option);
-  }
-  /**
-   * Commits an option: fills the input, closes the listbox, notifies listeners.
-   *
-   * An input removed while the popup is open leaves the options clickable, and
-   * {@link ComboboxController.close | close} already survives that state. Selection
-   * does too: the popup comes down and listeners still hear the choice, with only
-   * the field-bound half — the value write, the focus return, and the native
-   * `change` — skipped, because there is no field to carry them.
-   */
-  #select(option) {
+  select(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const option = host?.closest(targetSelector(this.identifier, "option"));
+    if (!option || !this.optionTargets.includes(option)) return;
+    const focus = event !== null || this.element.contains(document.activeElement);
+    this.#select(option, reason, focus);
+  }
+  #select(option, reason = "user", focus = true) {
     const value = option.dataset.value ?? (option.textContent ?? "").trim();
     if (!this.hasInputTarget) {
       this.close();
-      this.dispatch("selected", { detail: { value } });
+      this.dispatch("selected", { detail: { value, reason } });
       return;
     }
     const changed = this.inputTarget.value !== value;
+    if (changed) this.#moveToken = this.#moves.record();
+    const token = this.#moveToken;
     this.inputTarget.value = value;
     this.close();
     this.#suppressOpen = true;
-    this.inputTarget.focus();
+    if (focus && (reason !== "api" || this.element.contains(document.activeElement)))
+      this.inputTarget.focus();
     this.#suppressOpen = false;
+    if (!this.#moves.isLatest(token)) return;
     if (changed) {
       commitField(this.inputTarget);
     }
-    this.dispatch("selected", { detail: { value } });
-  }
-  /**
-   * Writes whether the open listbox has zero matching options to the state hook
-   * `data-stimeo--combobox-empty` on the root element and to the regions declared
-   * for that state. Behavior only: consumers decide how to present the empty state
-   * via CSS keyed off the attribute, while the `empty` targets carry the copy.
-   *
-   * Every path that can change the answer — opening, filtering, reconciling a
-   * runtime option change, and closing — ends here, so the hook and the regions
-   * are a pure function of the state rather than of the order things happened in.
-   */
+    if (!this.#moves.isLatest(token)) return;
+    this.dispatch("selected", { detail: { value, reason } });
+  }
   #reflectEmptyState() {
     const empty = !this.#isClosed && this.#visibleOptions().length === 0;
     if (empty) {
@@ -427,31 +798,31 @@ var ComboboxController = class extends Controller {
     }
     this.#emptyRegion.reflect(this.element, empty);
   }
-  /**
-   * Marks the visible option at `index` active via `aria-selected` and the
-   * input's `aria-activedescendant`. Pass `-1` to clear the active option.
-   */
   #setActive(index) {
     const visible = this.#visibleOptions();
     const active = index === -1 ? null : visible[index] ?? null;
     syncActiveOption(this.optionTargets, active);
     this.#activeId = active?.id || null;
-    if (this.hasInputTarget) {
-      if (active?.id) {
-        this.inputTarget.setAttribute("aria-activedescendant", active.id);
-      } else {
-        this.inputTarget.removeAttribute("aria-activedescendant");
-      }
-    }
+    if (this.hasInputTarget) this.#activeDescendant.write(this.inputTarget, active?.id || null);
     if (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);
   }
-  /** Re-applies filtering and active state after a target collection change. */
+  #adoptList() {
+    if (!this.#connected) return;
+    const list = this.hasListTarget ? this.listTarget : null;
+    const previous = this.#list;
+    if (list === previous) return;
+    this.#list = list;
+    if (list) this.#listHidden.write(list, previous?.hidden ?? true ? "" : null);
+    this.#queueOptionReconciliation();
+  }
   #reconcileOptions() {
-    if (this.hasInputTarget && !this.#isClosed) this.#applyFilter();
+    if (this.hasInputTarget) {
+      this.#expanded.write(this.inputTarget, String(!this.#isClosed));
+      if (!this.#isClosed) this.#applyFilter();
+    }
     this.#reconcileActive();
     this.#reflectEmptyState();
   }
-  /** Preserves a surviving active ID; disappearance deliberately clears active state. */
   #reconcileActive() {
     if (!this.hasInputTarget || this.#isClosed) {
       this.#setActive(-1);
@@ -467,26 +838,21 @@ var ComboboxController = class extends Controller {
     const stateMatches = active ? this.#activeId === (active.id || null) && selected.length === 1 && selected[0] === active && idref === (active.id || null) : this.#activeId === null && selected.length === 0 && idref === null;
     if (!stateMatches) this.#setActive(index);
   }
-  /** Resolves the stable ID, with `aria-selected` as the ID-less compatibility marker. */
   #findActiveIndex(options) {
     const activeId = (this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null) ?? this.#activeId;
     if (activeId) return options.findIndex((option) => option.id === activeId);
     return options.findIndex((option) => option.getAttribute("aria-selected") === "true");
   }
-  /** Coalesces all target callbacks from one MutationObserver batch. */
   #queueOptionReconciliation() {
     this.#reconcile.schedule();
   }
-  /** The options currently shown (not filtered out). */
   #visibleOptions() {
     return this.optionTargets.filter((option) => !option.hidden);
   }
-  /** Whether the listbox is currently hidden. */
   get #isClosed() {
     return !this.hasListTarget || this.listTarget.hidden !== false;
   }
 };
 
 export { ComboboxController };
-//# sourceMappingURL=combobox_controller.js.map
 //# sourceMappingURL=combobox_controller.js.map