stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/multi_select_controller.js

@@ -0,0 +1,755 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/multi_select_controller.ts
+
+// src/utils/aria_ids.ts
+var counter = 0;
+function uniqueId(prefix = "stimeo") {
+  let candidate;
+  do {
+    counter += 1;
+    candidate = `${prefix}-${counter}`;
+  } while (typeof document !== "undefined" && document.getElementById(candidate) !== null);
+  return candidate;
+}
+function ensureId(element, prefix = "stimeo") {
+  if (element.id) return element.id;
+  const id = uniqueId(prefix);
+  element.id = id;
+  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;
+  return key === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+}
+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");
+}
+
+// src/utils/composition_tracker.ts
+var CompositionTracker = class {
+  #observedTargets = /* @__PURE__ */ new Set();
+  #activeTargets = /* @__PURE__ */ new Set();
+  #onStart;
+  #onEnd;
+  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);
+    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);
+    this.#activeTargets.delete(target);
+  }
+  /** 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);
+    }
+    this.#observedTargets.clear();
+    this.#activeTargets.clear();
+  }
+  /** True when lifecycle tracking or the current event reports composition. */
+  isComposing(event) {
+    return this.#activeTargets.size > 0 || event?.isComposing === true;
+  }
+  #handleStart = (event) => {
+    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);
+    this.#onStart?.(event);
+  };
+  #handleEnd = (event) => {
+    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);
+    this.#onEnd?.(event);
+  };
+};
+
+// src/utils/microtask_coalescer.ts
+var MicrotaskCoalescer = class {
+  #run;
+  #queued = false;
+  #active = false;
+  #generation = 0;
+  /** @param run - the single reconciliation pass, invoked at most once per batch. */
+  constructor(run) {
+    this.#run = run;
+  }
+  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
+  activate() {
+    this.#active = true;
+  }
+  /** Closes the window and drops any pending pass; call from `disconnect()`. */
+  cancel() {
+    this.#active = false;
+    this.#queued = false;
+    this.#generation += 1;
+  }
+  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  schedule() {
+    if (!this.#active || this.#queued) return;
+    this.#queued = true;
+    const generation = this.#generation;
+    queueMicrotask(() => {
+      if (generation !== this.#generation || !this.#queued || !this.#active) return;
+      this.#queued = false;
+      this.#run();
+    });
+  }
+};
+
+// src/utils/option_scroll.ts
+function scrollOptionIntoView(list, option) {
+  if (list.scrollHeight <= list.clientHeight) return;
+  const listRect = list.getBoundingClientRect();
+  const optionRect = option.getBoundingClientRect();
+  if (optionRect.top < listRect.top) {
+    list.scrollTop -= listRect.top - optionRect.top;
+  } else if (optionRect.bottom > listRect.bottom) {
+    list.scrollTop += optionRect.bottom - listRect.bottom;
+  }
+}
+
+// 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.
+   */
+  setActive(index, { focus = false } = {}) {
+    const items = this.#getItems();
+    items.forEach((item, i) => {
+      item.tabIndex = i === index ? 0 : -1;
+    });
+    if (focus) items[index]?.focus();
+  }
+};
+
+// src/utils/tabindex_loan.ts
+var TabindexLoan = class {
+  #value;
+  #lent = /* @__PURE__ */ new Set();
+  /**
+   * @param value - the `tabindex` to lend. `"-1"` (the default) is
+   *   programmatically focusable but not a Tab stop; `"0"` is a real Tab stop,
+   *   which a scroll region with no focusable content of its own needs.
+   */
+  constructor(value = "-1") {
+    this.#value = value;
+  }
+  /** Lends `element` the value; no-ops when it already carries a `tabindex`. */
+  lend(element) {
+    if (element.hasAttribute("tabindex")) return;
+    element.setAttribute("tabindex", this.#value);
+    this.#lent.add(element);
+  }
+  /** Takes back every loan whose value is still the one that was lent. */
+  returnAll() {
+    for (const element of this.#lent) {
+      if (element.getAttribute("tabindex") === this.#value) element.removeAttribute("tabindex");
+    }
+    this.#lent.clear();
+  }
+};
+
+// src/controllers/multi_select_controller.ts
+var MultiSelectController = class extends Controller {
+  static targets = [
+    "input",
+    "list",
+    "option",
+    "tags",
+    "tag",
+    "tagTemplate",
+    "status",
+    "fields"
+  ];
+  static values = {
+    max: { type: Number, default: 0 },
+    name: { type: String, default: "options[]" },
+    form: { type: String, default: "" }
+  };
+  static actions = ["close", "filter", "onKeydown", "open", "toggleOption"];
+  static events = ["change", "filter"];
+  /** Stable id of the active option; the current target is resolved from the DOM. */
+  #activeOptionId = null;
+  /** Whether the root borrowed a tab stop to catch focus, so teardown can undo it. */
+  #tabindex = new TabindexLoan();
+  /** Prevents initial/teardown target callbacks from mutating authored DOM. */
+  #connected = false;
+  /** Collapses one batch of target callbacks into a single final-DOM reconciliation. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
+  /** Absorbs the browser's redundant final input after compositionend. */
+  #ignorePostCompositionInput = false;
+  /** Owns IME lifecycle state; confirmed text emits one filter result. */
+  #composition = new CompositionTracker({
+    onStart: () => {
+      this.#ignorePostCompositionInput = false;
+    },
+    onEnd: () => {
+      this.#ignorePostCompositionInput = true;
+      queueMicrotask(() => {
+        this.#ignorePostCompositionInput = false;
+      });
+      this.filter();
+    }
+  });
+  #roving = new RovingTabindex(() => this.#removeButtons);
+  /** Starts closed, syncs chips for any pre-selected options, and listens out. */
+  connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
+    this.#normalizeSelection();
+    this.close();
+    if (this.hasTagsTarget) {
+      this.tagsTarget.addEventListener("keydown", this.#onTagKeydown);
+      this.tagsTarget.addEventListener("click", this.#onTagClick);
+      this.#rebuildTags();
+    }
+    this.#syncFields();
+    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#connected = true;
+    this.#reconcile.activate();
+  }
+  /**
+   * Derives the chips from the selected options, idempotently: a Turbo Drive cache
+   * restore or morph can re-connect with chips already in the DOM, so they are
+   * cleared before deriving afresh to avoid duplicates.
+   */
+  #rebuildTags() {
+    if (!this.hasTagsTarget) return;
+    for (const tag of this.tagTargets) tag.remove();
+    for (const option of this.#selectedOptions) this.#appendTag(option);
+    if (this.#removeButtons.length > 0) this.#roving.setActive(0);
+  }
+  /** Tears down document and chip listeners on disconnect (Turbo included). */
+  disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
+    this.#composition.disconnect();
+    this.#ignorePostCompositionInput = false;
+    if (this.hasTagsTarget) {
+      this.tagsTarget.removeEventListener("keydown", this.#onTagKeydown);
+      this.tagsTarget.removeEventListener("click", this.#onTagClick);
+    }
+    document.removeEventListener("click", this.#onOutsideClick, true);
+    this.#releaseTabindex();
+  }
+  /** Reconciles active state after an option target is added at runtime. */
+  optionTargetConnected() {
+    this.#scheduleOptionReconcile();
+  }
+  /** Cleans a removed target and reconciles active state against the surviving DOM. */
+  optionTargetDisconnected(option) {
+    if (!this.#connected) return;
+    option.removeAttribute("data-active");
+    this.#scheduleOptionReconcile();
+  }
+  /** Schedules one reconciliation after all callbacks in the mutation batch. */
+  #scheduleOptionReconcile() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Keeps a surviving/same-id active target, otherwise falls back to the first
+   * visible one — and brings the derived state back in line with the new option set.
+   *
+   * The baseline pass fills in any missing `aria-selected`, and the chips and
+   * hidden fields are re-derived from it, because the options are the truth source
+   * for the selection. The chips are rebuilt **only when the selected value set
+   * actually moved**: the rebuild removes and recreates every chip, so running it
+   * for an unrelated option would drop focus from a chip's remove button to
+   * `<body>`, losing the keyboard user's place for something that did not concern
+   * them.
+   */
+  #reconcileOptions() {
+    const visible = this.#visibleOptions;
+    const active = this.#activeOption;
+    const next = this.#isClosed ? null : active && !active.hidden ? active : visible[0] ?? null;
+    this.#setActive(next);
+    this.#reflectEmpty();
+    this.#normalizeSelection();
+    const selected = this.#selectedOptions;
+    const nextValues = selected.map((option) => this.#optionValue(option)).sort();
+    const tagValues = this.tagTargets.map((tag) => tag.dataset.value ?? "").sort();
+    const unchanged = nextValues.length === tagValues.length && nextValues.every((value, index) => value === tagValues[index]);
+    if (unchanged) this.#refreshTagLabels(selected);
+    else this.#rebuildTags();
+    this.#syncFields();
+  }
+  /**
+   * Gives every option an explicit `aria-selected`, without changing which ones
+   * the author chose. An absent value means "not selectable" in ARIA, so a
+   * forgotten attribute hides a selectable option. Several `true` is the normal
+   * case here — the list is `aria-multiselectable` — so nothing is dropped.
+   */
+  #normalizeSelection() {
+    for (const option of this.optionTargets) {
+      if (option.getAttribute("aria-selected") !== "true") {
+        option.setAttribute("aria-selected", "false");
+      }
+    }
+  }
+  /**
+   * Tracks an input added initially or after connect, and makes it describe the
+   * widget that is actually on screen: a swapped-in input arrives with the
+   * authored ARIA of a fresh node while this controller still holds the popup
+   * state, and the open path cannot repair that (it seeds an active option only
+   * when there is none), so a live list would go unannounced.
+   */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+    input.setAttribute("aria-expanded", String(!this.#isClosed));
+    const active = this.#activeOption;
+    if (active) input.setAttribute("aria-activedescendant", ensureId(active, "stimeo-ms-opt"));
+    else input.removeAttribute("aria-activedescendant");
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+    this.#ignorePostCompositionInput = false;
+  }
+  /** Filters confirmed input text, opens, and re-seeds the active option. */
+  filter(event) {
+    if (event && this.#ignorePostCompositionInput) {
+      this.#ignorePostCompositionInput = false;
+      return;
+    }
+    if (this.#composition.isComposing(event)) return;
+    const query = this.inputTarget.value.trim().toLowerCase();
+    for (const option of this.optionTargets) {
+      const label = (option.textContent ?? "").trim().toLowerCase();
+      option.hidden = query !== "" && !label.includes(query);
+    }
+    this.open();
+    const visible = this.#visibleOptions;
+    this.#reflectEmpty();
+    this.#setActive(visible[0] ?? null);
+    this.dispatch("filter", { detail: { query } });
+  }
+  /**
+   * Opens the list and activates the first visible option when none is active.
+   *
+   * Needs the input, which owns `aria-expanded` and `aria-activedescendant`: a
+   * list shown without one is a popup no assistive technology is told about. So
+   * opening is skipped entirely, where {@link close} still closes.
+   */
+  open() {
+    if (!this.hasListTarget || !this.hasInputTarget) return;
+    this.listTarget.hidden = false;
+    this.inputTarget.setAttribute("aria-expanded", "true");
+    if (!this.#activeOption) this.#setActive(this.#visibleOptions[0] ?? null);
+  }
+  /**
+   * Closes the list and clears the active option.
+   *
+   * Survives a missing input in both directions. `connect()` calls this second,
+   * so dereferencing the input here would throw before the chips, the roving
+   * seed, the chip listeners, the hidden fields and the outside-click listener —
+   * and Stimulus keeps the controller alive after that throw, so none of them
+   * would ever run and the selection would silently stop submitting. An input
+   * removed while the list is open must still let it come down *and* forget its
+   * active option, so only the `aria-expanded` write is guarded.
+   */
+  close() {
+    if (!this.hasListTarget) return;
+    this.listTarget.hidden = true;
+    this.#setActive(null);
+    if (!this.hasInputTarget) return;
+    this.inputTarget.setAttribute("aria-expanded", "false");
+  }
+  /** Routes input keyboard interaction per the multi-select combobox model. */
+  onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    if (this.#composition.isComposing(event)) return;
+    this.#reconcileActiveForInteraction();
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowDown":
+        event.preventDefault();
+        if (this.#isClosed) this.open();
+        else this.#moveActive(1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        if (this.#isClosed) this.open();
+        else this.#moveActive(-1);
+        break;
+      case "Home":
+        if (!this.#isClosed) {
+          event.preventDefault();
+          this.#setActive(this.#visibleOptions[0] ?? null);
+        }
+        break;
+      case "End": {
+        if (!this.#isClosed) {
+          event.preventDefault();
+          const visible = this.#visibleOptions;
+          this.#setActive(visible[visible.length - 1] ?? null);
+        }
+        break;
+      }
+      case "Enter": {
+        const active = this.#activeOption;
+        if (!this.#isClosed && active) {
+          event.preventDefault();
+          this.#toggleSelection(active);
+        }
+        break;
+      }
+      case "Escape":
+        if (this.#isClosed) break;
+        event.preventDefault();
+        this.close();
+        break;
+      case "Backspace":
+        if (this.inputTarget.value === "") {
+          const buttons = this.#removeButtons;
+          if (buttons.length > 0) {
+            event.preventDefault();
+            this.#removeTagAt(buttons.length - 1);
+          }
+        }
+        break;
+      case "ArrowLeft":
+        if (this.inputTarget.value === "" && this.#removeButtons.length > 0) {
+          event.preventDefault();
+          this.#roving.setActive(this.#removeButtons.length - 1, { focus: true });
+        }
+        break;
+      case "Tab":
+        this.close();
+        break;
+    }
+  }
+  /**
+   * Toggles the clicked option's selection. Bound via `data-action`. Focus is
+   * re-homed to the input afterwards: options are non-focusable, so the click blurs
+   * the input to `body` — and with the list deliberately staying open, every
+   * keyboard affordance (Escape, arrows, typing) is bound to the input and would
+   * otherwise go dead until the user clicks back in ("focus stays on the input").
+   */
+  toggleOption(event) {
+    const option = event.currentTarget.closest('[role="option"]');
+    if (!option || !this.optionTargets.includes(option)) return;
+    this.#toggleSelection(option);
+    this.#focusInput();
+  }
+  /**
+   * Re-homes focus to the input, or leaves it where it is when there is none.
+   *
+   * All three callers run *after* an option or a chip already took focus, and all
+   * three are reachable without an input — options and chips carry their own
+   * `data-action`. Throwing here would leave the chip removed but focus stranded
+   * on a detached button.
+   */
+  #focusInput() {
+    if (this.hasInputTarget) this.inputTarget.focus();
+  }
+  /**
+   * Re-homes focus after the last chip was removed: to the input, else the root.
+   *
+   * Unlike the other {@link #focusInput} callers, the element that held focus has
+   * just left the DOM, so "leave it alone" is not an option — the browser already
+   * dropped it to `<body>`. The root borrows a `tabindex="-1"` just-in-time (not a
+   * Tab stop, handed back on teardown). Focus that landed on a real element is
+   * left alone, so a chip removed out of band never steals it.
+   */
+  #focusAfterLastTag() {
+    if (this.hasInputTarget) {
+      this.inputTarget.focus();
+      return;
+    }
+    const doc = this.element.ownerDocument;
+    const active = doc.activeElement;
+    if (active && active !== doc.body && active !== doc.documentElement && active.isConnected) {
+      return;
+    }
+    this.#tabindex.lend(this.element);
+    this.element.focus();
+  }
+  /**
+   * Returns the borrowed tab stop. Owning the borrow is not enough — the value
+   * has to still be the one this instance wrote, since a consumer that changed it
+   * afterwards owns it now.
+   */
+  #releaseTabindex() {
+    this.#tabindex.returnAll();
+  }
+  /**
+   * Removes the chip whose remove button was clicked, deselecting its option.
+   * Delegated on the tags container (like `#onTagKeydown`) rather than bound
+   * per chip via `data-action`, so it works the instant a chip is appended without
+   * waiting on Stimulus to wire a freshly created element.
+   */
+  #onTagClick = (event) => {
+    const button = event.target.closest("button");
+    if (!button || !this.tagsTarget.contains(button)) return;
+    const index = this.#removeButtons.indexOf(button);
+    if (index !== -1) this.#removeTagAt(index);
+  };
+  /** Moves the active option by `delta` among visible options, wrapping. */
+  #moveActive(delta) {
+    const visible = this.#visibleOptions;
+    if (visible.length === 0) return;
+    const current = this.#activeOption ? visible.indexOf(this.#activeOption) : -1;
+    const candidate = current === -1 ? delta > 0 ? 0 : visible.length - 1 : current + delta;
+    const next = (candidate + visible.length) % visible.length;
+    this.#setActive(visible[next] ?? null);
+  }
+  /** Selects/deselects `option`, honoring `max`, and syncs chip + live region. */
+  #toggleSelection(option) {
+    const selected = option.getAttribute("aria-selected") === "true";
+    if (!selected && this.maxValue > 0 && this.#selectedOptions.length >= this.maxValue) {
+      return;
+    }
+    option.setAttribute("aria-selected", String(!selected));
+    if (selected) {
+      this.#removeTagFor(option);
+    } else {
+      this.#appendTag(option);
+    }
+    this.#announce(this.#optionLabel(option));
+    this.#refreshRoving();
+    this.#syncFields();
+    this.dispatch("change", { detail: { values: this.#values } });
+  }
+  /**
+   * Re-reads each chip's label from its option, in place.
+   *
+   * The value order alone does not say the chips are still correct: a server can
+   * re-render the same candidate with a new label ("Apple" → "Green Apple"), and
+   * the chip text and its `Remove {label}` name are both derived from the option.
+   * Updating them here keeps the rebuild — which would drop focus — for the case
+   * that actually needs it, a changed selection.
+   */
+  #refreshTagLabels(selected) {
+    const options = new Map(selected.map((option) => [this.#optionValue(option), option]));
+    for (const tag of this.tagTargets) {
+      const option = options.get(tag.dataset.value ?? "");
+      if (!option) continue;
+      const text = this.#optionLabel(option);
+      const label = tag.querySelector('[data-multi-select-slot="label"]');
+      if (label && label.textContent !== text) label.textContent = text;
+      const button = tag.querySelector("button");
+      const name = `Remove ${text}`;
+      if (button && button.getAttribute("aria-label") !== name) {
+        button.setAttribute("aria-label", name);
+      }
+    }
+  }
+  /** Builds one chip from the template for `option`. */
+  #appendTag(option) {
+    if (!this.hasTagTemplateTarget || !this.hasTagsTarget) return;
+    const fragment = this.tagTemplateTarget.content.cloneNode(true);
+    const tag = fragment.querySelector('[data-stimeo--multi-select-target="tag"]');
+    const label = fragment.querySelector('[data-multi-select-slot="label"]');
+    const button = fragment.querySelector("button");
+    if (!tag || !button) return;
+    const text = this.#optionLabel(option);
+    tag.dataset.value = this.#optionValue(option);
+    if (label) label.textContent = text;
+    button.setAttribute("aria-label", `Remove ${text}`);
+    button.tabIndex = -1;
+    this.tagsTarget.appendChild(fragment);
+  }
+  /** Removes the chip mirroring `option`, if present. */
+  #removeTagFor(option) {
+    const value = this.#optionValue(option);
+    const tag = this.tagTargets.find((candidate) => candidate.dataset.value === value);
+    tag?.remove();
+  }
+  /** Removes chip `index` and deselects its option, re-homing focus. */
+  #removeTagAt(index) {
+    const tag = this.tagTargets[index];
+    if (!tag) return;
+    const value = tag.dataset.value ?? "";
+    const option = this.optionTargets.find((candidate) => this.#optionValue(candidate) === value);
+    if (option) option.setAttribute("aria-selected", "false");
+    tag.remove();
+    this.#announce(option ? this.#optionLabel(option) : value);
+    this.#refreshRoving();
+    this.#syncFields();
+    this.dispatch("change", { detail: { values: this.#values } });
+    const remaining = this.#removeButtons;
+    if (remaining.length === 0) {
+      this.#focusAfterLastTag();
+    } else {
+      this.#roving.setActive(Math.min(index, remaining.length - 1), { focus: true });
+    }
+  }
+  /** Arrow navigation and deletion within the chip list (delegated). */
+  #onTagKeydown = (event) => {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
+    const button = event.target.closest("button");
+    if (!button) return;
+    const buttons = this.#removeButtons;
+    const index = buttons.indexOf(button);
+    if (index === -1) return;
+    switch (logicalArrowKey(event.key, this.element)) {
+      case "ArrowLeft":
+        if (index > 0) {
+          event.preventDefault();
+          this.#roving.setActive(index - 1, { focus: true });
+        }
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        if (index < buttons.length - 1) this.#roving.setActive(index + 1, { focus: true });
+        else this.#focusInput();
+        break;
+      case "Delete":
+      case "Backspace":
+        event.preventDefault();
+        this.#removeTagAt(index);
+        break;
+    }
+  };
+  /**
+   * Marks `option` active via `data-active` and the input's
+   * `aria-activedescendant` (the attribute is removed, not emptied, when null).
+   *
+   * The state half runs even with no input, so a `close()` that cannot touch ARIA
+   * still clears it: {@link open} seeds an active option only when there is none,
+   * so a stale one makes the next open skip the seeding and a replacement input
+   * gets no `aria-activedescendant` at all.
+   */
+  #setActive(option) {
+    const activeId = option ? ensureId(option, "stimeo-ms-opt") : null;
+    this.#activeOptionId = activeId;
+    for (const candidate of this.optionTargets) {
+      candidate.toggleAttribute("data-active", candidate === option);
+    }
+    if (option && this.hasListTarget) scrollOptionIntoView(this.listTarget, option);
+    if (!this.hasInputTarget) return;
+    if (activeId !== null) {
+      this.inputTarget.setAttribute("aria-activedescendant", activeId);
+    } else {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  /** Repairs only active identity before a key; the fallback waits for the target callback. */
+  #reconcileActiveForInteraction() {
+    const activeId = this.#activeOptionId;
+    if (activeId === null) return;
+    const resolved = this.#activeOption;
+    const active = resolved && !resolved.hidden ? resolved : null;
+    const marked = this.optionTargets.filter((candidate) => candidate.hasAttribute("data-active"));
+    const idref = this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null;
+    if (!active || marked.length !== 1 || marked[0] !== active || idref !== activeId) {
+      this.#setActive(active);
+    }
+  }
+  /** Reflects whether the open list currently has no visible option targets. */
+  #reflectEmpty() {
+    this.element.toggleAttribute(
+      "data-stimeo--multi-select-empty",
+      !this.#isClosed && this.#visibleOptions.length === 0
+    );
+  }
+  /**
+   * Mirrors the selected values into named hidden inputs under the `fields`
+   * target so the selection submits with a normal form (parity with tags-input).
+   * No-ops without a `fields` target. When the
+   * `form` value is set, each input gets a matching `form` attribute so the picker
+   * can submit with a `<form>` it lives outside of.
+   */
+  #syncFields() {
+    if (!this.hasFieldsTarget) return;
+    this.fieldsTarget.replaceChildren(
+      ...this.#values.map((value) => {
+        const input = document.createElement("input");
+        input.type = "hidden";
+        input.name = this.nameValue;
+        input.value = value;
+        if (this.hasFormValue && this.formValue !== "") input.setAttribute("form", this.formValue);
+        return input;
+      })
+    );
+  }
+  /** Keeps exactly one chip remove button tabbable after the set changes. */
+  #refreshRoving() {
+    if (this.#removeButtons.length > 0 && this.#roving.activeIndex === -1)
+      this.#roving.setActive(0);
+  }
+  /** Mirrors the changed option label into the live region. */
+  #announce(text) {
+    if (this.hasStatusTarget) this.statusTarget.textContent = text;
+  }
+  /** Closes the list on a click outside the controller element. */
+  #onOutsideClick = (event) => {
+    if (!this.#isClosed && !this.element.contains(event.target)) this.close();
+  };
+  /** Trimmed visible label of an option. */
+  #optionLabel(option) {
+    return (option.textContent ?? "").trim();
+  }
+  /** An option's stable value: its `data-value`, else its display label. */
+  #optionValue(option) {
+    return option.dataset.value ?? this.#optionLabel(option);
+  }
+  /** Options not hidden by the current filter. */
+  get #visibleOptions() {
+    return this.optionTargets.filter((option) => !option.hidden);
+  }
+  /** Current active target resolved by stable id, never a detached node reference. */
+  get #activeOption() {
+    const activeId = this.#activeOptionId;
+    if (activeId === null) return null;
+    return this.optionTargets.find((option) => option.id === activeId) ?? null;
+  }
+  /** Options currently selected. */
+  get #selectedOptions() {
+    return this.optionTargets.filter((option) => option.getAttribute("aria-selected") === "true");
+  }
+  /** Selected values in option order. */
+  get #values() {
+    return this.#selectedOptions.map((option) => this.#optionValue(option));
+  }
+  /** The chip remove buttons in order (the roving navigation set). */
+  get #removeButtons() {
+    return this.hasTagsTarget ? Array.from(this.tagsTarget.querySelectorAll("button")) : [];
+  }
+  /** Whether the list is currently hidden. */
+  get #isClosed() {
+    return !this.hasListTarget || this.listTarget.hidden !== false;
+  }
+};
+
+export { MultiSelectController };
+//# sourceMappingURL=multi_select_controller.js.map
+//# sourceMappingURL=multi_select_controller.js.map