stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/combobox_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/combobox_controller.ts
 
+// 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;
+  }
+  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");
+}
+
 // src/utils/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -49,6 +67,39 @@ var CompositionTracker = class {
   };
 };
 
+// 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;
@@ -66,8 +117,11 @@ var ComboboxController = class extends Controller {
   static targets = ["input", "list", "option"];
   static actions = ["close", "filter", "onKeydown", "open", "selectByClick"];
   static events = ["selected"];
-  /** Index into the *visible* options of the active option, or -1 if none. */
-  #activeIndex = -1;
+  /** Stable ID of the active option; the live element is resolved before every use. */
+  #activeId = null;
+  #connected = false;
+  /** Collapses one mutation batch of target callbacks into a single pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileOptions());
   /**
    * Suppresses {@link open} for the duration of the programmatic re-focus in
    * `#select`, so committing a value (which returns focus to the input)
@@ -80,21 +134,36 @@ var ComboboxController = class extends Controller {
   connect() {
     if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
-    document.addEventListener("click", this.#onOutsideClick);
+    document.addEventListener("click", this.#onOutsideClick, 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);
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** 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);
   }
+  /** 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;
@@ -106,7 +175,7 @@ var ComboboxController = class extends Controller {
    * re-opening with a stale non-matching value still surfaces the empty state).
    */
   open() {
-    if (!this.hasListTarget || this.#suppressOpen) return;
+    if (!this.hasListTarget || !this.hasInputTarget || this.#suppressOpen) return;
     this.#applyFilter();
     this.listTarget.hidden = false;
     this.inputTarget.setAttribute("aria-expanded", "true");
@@ -124,24 +193,47 @@ var ComboboxController = class extends Controller {
       option.hidden = query.length > 0 && !text.includes(query);
     }
   }
-  /** Closes the listbox, clears the active option, and updates ARIA state. */
+  /**
+   * 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.inputTarget.setAttribute("aria-expanded", "false");
-    this.#setActive(-1);
     this.element.removeAttribute("data-stimeo--combobox-empty");
+    if (this.hasInputTarget) this.inputTarget.setAttribute("aria-expanded", "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.altKey && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
+      if (event.key === "ArrowDown" ? !this.#isClosed : this.#isClosed) return;
+      event.preventDefault();
+      if (event.key === "ArrowDown") {
+        this.open();
+      } else {
+        this.close();
+      }
+      return;
+    }
+    if (!this.#isClosed) this.#reconcileActive();
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? 0 : (this.#activeIndex + 1) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? 0 : (activeIndex + 1) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -151,7 +243,8 @@ var ComboboxController = class extends Controller {
         if (this.#isClosed) this.open();
         const visible = this.#visibleOptions();
         if (visible.length > 0) {
-          const next = this.#activeIndex === -1 ? visible.length - 1 : (this.#activeIndex - 1 + visible.length) % visible.length;
+          const activeIndex = this.#findActiveIndex(visible);
+          const next = activeIndex === -1 ? visible.length - 1 : (activeIndex - 1 + visible.length) % visible.length;
           this.#setActive(next);
         }
         break;
@@ -172,7 +265,8 @@ var ComboboxController = class extends Controller {
       }
       case "Enter": {
         const visible = this.#visibleOptions();
-        const active = this.#activeIndex === -1 ? void 0 : visible[this.#activeIndex];
+        const activeIndex = this.#findActiveIndex(visible);
+        const active = activeIndex === -1 ? void 0 : visible[activeIndex];
         if (active) {
           event.preventDefault();
           this.#select(active);
@@ -180,7 +274,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
-        if (event.defaultPrevented || this.#isClosed) break;
+        if (this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;
@@ -200,11 +294,24 @@ var ComboboxController = class extends Controller {
   /** Selects the clicked option. Bound via `data-action` (click). */
   selectByClick(event) {
     const option = event.currentTarget.closest('[role="option"]');
-    if (option) this.#select(option);
+    if (option && this.optionTargets.includes(option)) this.#select(option);
   }
-  /** Commits an option: fills the input, closes the listbox, notifies listeners. */
+  /**
+   * 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 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) {
     const value = option.dataset.value ?? (option.textContent ?? "").trim();
+    if (!this.hasInputTarget) {
+      this.close();
+      this.dispatch("selected", { detail: { value } });
+      return;
+    }
     const changed = this.inputTarget.value !== value;
     this.inputTarget.value = value;
     this.close();
@@ -235,19 +342,51 @@ var ComboboxController = class extends Controller {
    * input's `aria-activedescendant`. Pass `-1` to clear the active option.
    */
   #setActive(index) {
-    this.#activeIndex = index;
     const visible = this.#visibleOptions();
-    const active = index === -1 ? null : visible[index];
-    for (const option of this.optionTargets) {
-      option.setAttribute("aria-selected", option === active ? "true" : "false");
-    }
-    if (active?.id) {
-      this.inputTarget.setAttribute("aria-activedescendant", active.id);
-    } else {
-      this.inputTarget.removeAttribute("aria-activedescendant");
+    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 (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);
   }
+  /** Re-applies filtering and active state after a target collection change. */
+  #reconcileOptions() {
+    if (this.hasInputTarget && !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);
+      return;
+    }
+    const visible = this.#visibleOptions();
+    const index = this.#findActiveIndex(visible);
+    const active = index === -1 ? null : visible[index] ?? null;
+    const selected = this.optionTargets.filter(
+      (option) => option.getAttribute("aria-selected") === "true"
+    );
+    const idref = this.inputTarget.getAttribute("aria-activedescendant");
+    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);

data/dist/controllers/command_palette_controller.js

@@ -2,6 +2,24 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/command_palette_controller.ts
 
+// 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;
+  }
+  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");
+}
+
 // src/utils/composition_tracker.ts
 var CompositionTracker = class {
   #observedTargets = /* @__PURE__ */ new Set();
@@ -304,6 +322,39 @@ var FocusTrap = class {
   }
 };
 
+// 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/controllers/command_palette_controller.ts
 var CommandPaletteController = class _CommandPaletteController extends Controller {
   static #ORIGINAL_ARIA_DISABLED = "data-command-palette-original-aria-disabled";
@@ -323,8 +374,13 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     "toggle"
   ];
   static events = ["select"];
-  /** The index of the currently active option within the visible subset. */
-  #activeIndex = -1;
+  /** Stable ID of the active option; the live target is resolved before every use. */
+  #activeId = null;
+  /** Visible/selectable target ID order captured for removal fallback. */
+  #activeOrder = [];
+  #connected = false;
+  /** Collapses one mutation batch of target callbacks into a single pass. */
+  #reconcile = new MicrotaskCoalescer(() => this.#reconcileActive());
   /** Owns IME lifecycle state; confirmed text re-filters an open palette once. */
   #composition = new CompositionTracker({
     onEnd: () => {
@@ -358,9 +414,13 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     const shouldOpen = this.#isOpen || this.openValue;
     this.#resetToClosedState();
     if (shouldOpen) this.open();
+    this.#connected = true;
+    this.#reconcile.activate();
   }
   /** Tears down the global hotkey listener and reverts the modal side effects. */
   disconnect() {
+    this.#connected = false;
+    this.#reconcile.cancel();
     document.removeEventListener("keydown", this.#onGlobalKeydown);
     this.#composition.disconnect();
     this.#trap.deactivate({ restoreFocus: false });
@@ -369,10 +429,20 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
   /** Initializes semantics for an option added before or after the controller connects. */
   optionTargetConnected(option) {
     this.#syncOptionSemanticsFor(option);
+    option.setAttribute("aria-selected", "false");
+    option.removeAttribute("data-active");
+    if (this.#connected) this.#queueOptionReconciliation();
+  }
+  /** Clears active residue on the old node and reconciles the surviving targets. */
+  optionTargetDisconnected(option) {
+    option.setAttribute("aria-selected", "false");
+    option.removeAttribute("data-active");
+    if (this.#connected) this.#queueOptionReconciliation();
   }
   /** Tracks an input added initially or after connect without extra consumer actions. */
   inputTargetConnected(input) {
     this.#composition.observe(input);
+    if (this.#connected) this.#queueOptionReconciliation();
   }
   /** Removes controller-owned listeners when the input target is replaced or removed. */
   inputTargetDisconnected(input) {
@@ -412,7 +482,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
       const matches = searchText.includes(query);
       if (matches) {
         option.removeAttribute("hidden");
-        if (!this.#isDisabled(option)) hasSelectableMatch = true;
+        if (this.#isNavigable(option)) hasSelectableMatch = true;
       } else {
         option.setAttribute("hidden", "true");
       }
@@ -427,8 +497,9 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     const target = event.currentTarget;
     if (!target) return;
     const option = target.closest("[role='option']");
-    if (option) this.#syncOptionSemanticsFor(option);
-    if (option && !this.#isDisabled(option)) {
+    if (!option || !this.optionTargets.includes(option)) return;
+    this.#syncOptionSemanticsFor(option);
+    if (!option.hasAttribute("hidden") && !this.#isDisabled(option)) {
       this.#confirmSelection(option);
     }
   }
@@ -443,7 +514,10 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
    * focus — not only the input.
    */
   onKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (this.#composition.isComposing(event) || !this.#isOpen) return;
+    this.#reconcileActive();
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -463,7 +537,9 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
         break;
       case "Enter": {
         event.preventDefault();
-        const activeOption = this.#visibleOptions[this.#activeIndex];
+        const visible = this.#visibleOptions;
+        const activeIndex = this.#findActiveIndex(visible);
+        const activeOption = activeIndex < 0 ? void 0 : visible[activeIndex];
         if (activeOption) this.#confirmSelection(activeOption);
         break;
       }
@@ -472,7 +548,7 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
   #navigate(direction) {
     const visible = this.#visibleOptions;
     if (visible.length === 0) return;
-    let newIndex = this.#activeIndex + direction;
+    let newIndex = this.#findActiveIndex(visible) + direction;
     if (newIndex >= visible.length) newIndex = 0;
     if (newIndex < 0) newIndex = visible.length - 1;
     this.#setActiveIndex(newIndex);
@@ -481,16 +557,16 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
     this.#syncOptionSemantics();
     const visible = this.#visibleOptions;
     const activeOption = visible[index] ?? null;
-    this.#activeIndex = activeOption ? index : -1;
+    syncActiveOption(this.optionTargets, activeOption);
     for (const option of this.optionTargets) {
-      option.setAttribute("aria-selected", "false");
-      option.removeAttribute("data-active");
+      if (option === activeOption) option.setAttribute("data-active", "true");
+      else option.removeAttribute("data-active");
     }
     if (activeOption) {
-      activeOption.setAttribute("aria-selected", "true");
-      activeOption.setAttribute("data-active", "true");
       activeOption.scrollIntoView({ block: "nearest" });
     }
+    this.#activeId = activeOption?.id || null;
+    this.#activeOrder = activeOption ? visible.map((option) => option.id).filter(Boolean) : [];
     if (this.hasInputTarget) {
       if (activeOption?.id) {
         this.inputTarget.setAttribute("aria-activedescendant", activeOption.id);
@@ -499,7 +575,75 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
       }
     }
   }
+  /** Re-resolves active identity and component-specific fallback against live targets. */
+  #reconcileActive() {
+    if (!this.#isOpen) {
+      this.#setActiveIndex(-1);
+      this.#reflectEmptyState();
+      return;
+    }
+    const visible = this.#visibleOptions;
+    const currentIndex = this.#findActiveIndex(visible);
+    if (currentIndex >= 0) {
+      const active = visible[currentIndex] ?? null;
+      const options = this.optionTargets;
+      const marked = options.filter((option) => option.hasAttribute("data-active"));
+      const selected = options.filter((option) => option.getAttribute("aria-selected") === "true");
+      const stateMatches = this.#activeId === (active?.id || null) && marked.length === 1 && marked[0] === active && selected.length === 1 && selected[0] === active && (!this.hasInputTarget || this.inputTarget.getAttribute("aria-activedescendant") === (active?.id || null));
+      if (stateMatches) {
+        this.#activeOrder = visible.map((option) => option.id).filter(Boolean);
+      } else {
+        this.#setActiveIndex(currentIndex);
+      }
+      this.#reflectEmptyState();
+      return;
+    }
+    const activeId = (this.hasInputTarget ? this.inputTarget.getAttribute("aria-activedescendant") : null) ?? this.#activeId;
+    this.#setActiveIndex(activeId ? this.#findFallbackIndex(visible, activeId) : -1);
+    this.#reflectEmptyState();
+  }
+  /** Resolves stable ID first, then active markers for the existing ID-less case. */
+  #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.hasAttribute("data-active") || option.getAttribute("aria-selected") === "true"
+    );
+  }
+  /** Chooses a surviving former successor, then predecessor, from selectable targets only. */
+  #findFallbackIndex(options, activeId) {
+    const oldIndex = this.#activeOrder.indexOf(activeId);
+    if (oldIndex < 0) return -1;
+    const indexesById = new Map(options.map((option, index) => [option.id, index]));
+    for (let index = oldIndex + 1; index < this.#activeOrder.length; index += 1) {
+      const fallback = indexesById.get(this.#activeOrder[index] ?? "");
+      if (fallback !== void 0) return fallback;
+    }
+    for (let index = oldIndex - 1; index >= 0; index -= 1) {
+      const fallback = indexesById.get(this.#activeOrder[index] ?? "");
+      if (fallback !== void 0) return fallback;
+    }
+    return -1;
+  }
+  /** Reflects whether any visible, navigable command remains. */
+  #reflectEmptyState() {
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = this.#visibleOptions.length > 0;
+  }
+  /** Coalesces all target callbacks from one MutationObserver batch. */
+  #queueOptionReconciliation() {
+    this.#reconcile.schedule();
+  }
+  /**
+   * Runs `option`: dispatches `select` and closes.
+   *
+   * **Activation is refused here, not at the call sites.** Every path that runs a
+   * command funnels through this method, so one check covers keyboard, pointer,
+   * and anything added later. Per-call-site guards would leave `aria-disabled`
+   * options — which stay within the keyboard's reach — runnable from whichever
+   * path forgets to consult the predicate.
+   */
   #confirmSelection(option) {
+    if (this.#isDisabled(option)) return;
     const value = option.dataset.value || option.textContent || "";
     this.dispatch("select", { detail: { value, option } });
     this.close();
@@ -510,14 +654,33 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
       option.removeAttribute("hidden");
     }
     const hasSelectableOption = this.#visibleOptions.length > 0;
-    if (this.hasEmptyTarget) this.emptyTarget.hidden = hasSelectableOption;
+    this.#reflectEmptyState();
     this.#setActiveIndex(hasSelectableOption ? 0 : -1);
   }
   get #visibleOptions() {
     return this.optionTargets.filter(
-      (option) => !option.hasAttribute("hidden") && !this.#isDisabled(option)
+      (option) => !option.hasAttribute("hidden") && this.#isNavigable(option)
     );
   }
+  /**
+   * Whether virtual focus may land on `option`.
+   *
+   * Only `data-disabled` disqualifies. That attribute is this controller's own —
+   * authors reach for it to mark a row that is not a destination at all, such as
+   * a group heading — so it can mean "skip entirely" without contradicting ARIA.
+   *
+   * **`aria-disabled` does not disqualify.** It marks a command that must stay
+   * *discoverable*: `aria-activedescendant` names it, so a reader announces it as
+   * unavailable rather than hiding its existence. Virtual focus does
+   * not change that — pointing `aria-activedescendant` at a disabled option is
+   * ordinary ARIA. Keeping the two attributes distinct is what leaves both
+   * meanings expressible; collapsing them would take "show it, say it is
+   * unavailable, do not run it" away from consumers.
+   */
+  #isNavigable(option) {
+    return option.dataset.disabled !== "true";
+  }
+  /** Whether activating `option` may run. Suppressed for either disabled marker. */
   #isDisabled(option) {
     return option.dataset.disabled === "true" || option.getAttribute("aria-disabled") === "true";
   }
@@ -525,9 +688,18 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
   #syncOptionSemantics() {
     for (const option of this.optionTargets) this.#syncOptionSemanticsFor(option);
   }
-  /** Reflects `data-disabled` to ARIA without losing a pre-existing authored value. */
+  /**
+   * Reflects `data-disabled` to ARIA without losing a pre-existing authored value,
+   * and puts `aria-selected` back to its baseline.
+   *
+   * Here `aria-selected` marks the *active* option, not a committed choice — the
+   * palette runs a command and keeps nothing selected — so an authored value is
+   * meaningless and is overwritten rather than preserved. Every caller either
+   * establishes the active option straight after (`filter`, `#setActiveIndex`) or
+   * is handling an option that cannot be the active one yet
+   * (`optionTargetConnected`).
+   */
   #syncOptionSemanticsFor(option) {
-    if (!option.hasAttribute("aria-selected")) option.setAttribute("aria-selected", "false");
     const originalAttribute = _CommandPaletteController.#ORIGINAL_ARIA_DISABLED;
     const originalValue = option.getAttribute(originalAttribute);
     if (option.dataset.disabled === "true") {
@@ -581,8 +753,13 @@ var CommandPaletteController = class _CommandPaletteController extends Controlle
   }
   /** Resets transient open state so reconnect starts from a predictable closed snapshot. */
   #resetToClosedState() {
-    this.#activeIndex = -1;
+    this.#activeId = null;
+    this.#activeOrder = [];
     this.openValue = false;
+    for (const option of this.optionTargets) {
+      option.setAttribute("aria-selected", "false");
+      option.removeAttribute("data-active");
+    }
     if (this.hasDialogTarget) {
       this.dialogTarget.hidden = true;
     }