stimeo-ui 0.1.0-beta.2 → 0.2.0

package/dist/controllers/combobox_controller.js

@@ -2,6 +2,53 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/combobox_controller.ts
 
+// 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/option_scroll.ts
 function scrollOptionIntoView(list, option) {
   if (list.scrollHeight <= list.clientHeight) return;
@@ -27,17 +74,30 @@ var ComboboxController = class extends Controller {
    * 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. */
   connect() {
+    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);
     this.close();
     document.addEventListener("click", this.#onOutsideClick);
   }
   /** Removes the document-level listener registered in {@link connect}. */
   disconnect() {
+    this.#composition.disconnect();
     document.removeEventListener("click", this.#onOutsideClick);
   }
-  /** Filters options by the current input value and opens the listbox. */
-  filter() {
+  /** Tracks an input added initially or after connect. */
+  inputTargetConnected(input) {
+    this.#composition.observe(input);
+  }
+  /** Removes composition listeners when the active input is replaced or removed. */
+  inputTargetDisconnected(input) {
+    this.#composition.unobserve(input);
+  }
+  /** Filters confirmed input text and opens the listbox. */
+  filter(event) {
+    if (this.#composition.isComposing(event)) return;
     this.open();
   }
   /**
@@ -74,7 +134,7 @@ var ComboboxController = class extends Controller {
   }
   /** Routes keyboard interaction per the APG combobox model. */
   onKeydown(event) {
-    if (event.isComposing || event.keyCode === 229) return;
+    if (this.#composition.isComposing(event)) return;
     switch (event.key) {
       case "ArrowDown": {
         event.preventDefault();
@@ -120,6 +180,7 @@ var ComboboxController = class extends Controller {
         break;
       }
       case "Escape":
+        if (event.defaultPrevented || this.#isClosed) break;
         event.preventDefault();
         this.close();
         break;

package/dist/controllers/combobox_controller.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/option_scroll.ts","../../src/controllers/combobox_controller.ts"],"names":[],"mappings":"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","file":"combobox_controller.js","sourcesContent":["/**\n * Scroll-follow for virtually-focused listbox options.\n *\n * Listbox-style widgets that track their active option with\n * `aria-activedescendant` keep DOM focus on the input/trigger, so the\n * browser's native \"scroll the focused element into view\" never runs — in a\n * scrollable list (`max-height` + `overflow`) the active option can walk right\n * out of sight on ArrowDown/ArrowUp. This helper keeps it visible.\n *\n * It adjusts the LIST's own `scrollTop` only — deliberately not\n * `scrollIntoView({ block: \"nearest\" })`, which may also scroll ancestor\n * scrolling boxes (the page) when a floating popup pokes past a viewport\n * edge, desyncing anchored/marker-composed placements. (Command-palette keeps\n * its `scrollIntoView` because its page is scroll-locked behind the modal;\n * page-floating popups must use this helper instead.)\n */\n\n/**\n * Scrolls `option` into view within `list` by minimally adjusting\n * `list.scrollTop`. No-ops when the list does not actually scroll. Never\n * touches any other scrolling box.\n *\n * @param list - The scrollable listbox container.\n * @param option - The (virtually focused) option to keep visible.\n */\nexport function scrollOptionIntoView(list: HTMLElement, option: HTMLElement): void {\n  if (list.scrollHeight <= list.clientHeight) return;\n  const listRect = list.getBoundingClientRect();\n  const optionRect = option.getBoundingClientRect();\n  if (optionRect.top < listRect.top) {\n    list.scrollTop -= listRect.top - optionRect.top;\n  } else if (optionRect.bottom > listRect.bottom) {\n    list.scrollTop += optionRect.bottom - listRect.bottom;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { scrollOptionIntoView } from \"../utils/option_scroll\";\n\n/**\n * Headless, accessible combobox behavior (list autocomplete).\n *\n * Markup contract (identifier: `stimeo--combobox`):\n *   <div data-controller=\"stimeo--combobox\">\n *     <input type=\"text\" role=\"combobox\" aria-expanded=\"false\"\n *            aria-autocomplete=\"list\" aria-controls=\"listbox\"\n *            data-stimeo--combobox-target=\"input\"\n *            data-action=\"input->stimeo--combobox#filter\n *                         keydown->stimeo--combobox#onKeydown\n *                         focus->stimeo--combobox#open\n *                         click->stimeo--combobox#open\" />\n *     <ul id=\"listbox\" role=\"listbox\" data-stimeo--combobox-target=\"list\" hidden>\n *       <li role=\"option\" id=\"opt-apple\" data-value=\"apple\"\n *           data-stimeo--combobox-target=\"option\"\n *           data-action=\"click->stimeo--combobox#selectByClick\">Apple</li>\n *       <!-- more options -->\n *     </ul>\n *   </div>\n *\n * Implements the WAI-ARIA APG **Combobox** pattern with a listbox popup and\n * list-autocomplete. Focus stays in the input; the active option is tracked with\n * `aria-activedescendant` rather than by moving DOM focus.\n *\n * @remarks\n * Behavior only. Options are authored in the DOM; the controller filters them by\n * toggling each option's `hidden` attribute (case-insensitive substring match on\n * its text). The consumer owns styling, typically keyed off `[aria-selected]`.\n * When an open listbox has no matching options, the root element gets\n * `data-stimeo--combobox-empty` so the consumer can style the empty state (hide\n * the list, show a \"no results\" node, …) — the library imposes no visuals.\n *\n * Behavior provided:\n * - Typing filters the options and opens the listbox.\n * - Focusing or clicking the input opens the listbox, re-filtered against the\n *   current value (so re-opening with a non-matching value keeps the empty state).\n * - `ArrowDown`/`ArrowUp` move the active option (wrapping); `Enter` selects it;\n *   `Escape` closes the listbox; `Home`/`End` jump to the first/last visible\n *   option.\n * - Selecting an option fills the input (with the option's `data-value` if set,\n *   otherwise its text) and closes the listbox.\n * - A click outside the combobox closes the listbox.\n */\nexport class ComboboxController extends Controller<HTMLElement> {\n  static override targets = [\"input\", \"list\", \"option\"];\n  static actions = [\"close\", \"filter\", \"onKeydown\", \"open\", \"selectByClick\"] as const;\n  static events = [\"selected\"] as const;\n\n  declare readonly inputTarget: HTMLInputElement;\n  declare readonly listTarget: HTMLElement;\n  declare readonly optionTargets: HTMLElement[];\n  declare readonly hasInputTarget: boolean;\n  declare readonly hasListTarget: boolean;\n\n  /** Index into the *visible* options of the active option, or -1 if none. */\n  #activeIndex = -1;\n  /**\n   * Suppresses {@link open} for the duration of the programmatic re-focus in\n   * `#select`, so committing a value (which returns focus to the input)\n   * does not immediately re-open the listbox via a `focus`-bound action.\n   */\n  #suppressOpen = false;\n\n  /** Starts closed with no active option and registers the outside-click listener. */\n  override connect(): void {\n    this.close();\n    document.addEventListener(\"click\", this.#onOutsideClick);\n  }\n\n  /** Removes the document-level listener registered in {@link connect}. */\n  override disconnect(): void {\n    document.removeEventListener(\"click\", this.#onOutsideClick);\n  }\n\n  /** Filters options by the current input value and opens the listbox. */\n  filter(): void {\n    this.open();\n  }\n\n  /**\n   * Opens the listbox, re-filtering the options against the current input value\n   * so the visible options and empty state always match what is typed (e.g.\n   * re-opening with a stale non-matching value still surfaces the empty state).\n   */\n  open(): void {\n    if (!this.hasListTarget || this.#suppressOpen) return;\n    this.#applyFilter();\n    this.listTarget.hidden = false;\n    this.inputTarget.setAttribute(\"aria-expanded\", \"true\");\n    this.#setActive(-1);\n    this.#reflectEmptyState();\n  }\n\n  /**\n   * Hides options that don't match the current input value (case-insensitive\n   * substring). An empty query shows every option. Does not change open state.\n   */\n  #applyFilter(): void {\n    const query = this.inputTarget.value.trim().toLowerCase();\n    for (const option of this.optionTargets) {\n      const text = (option.textContent ?? \"\").trim().toLowerCase();\n      option.hidden = query.length > 0 && !text.includes(query);\n    }\n  }\n\n  /** Closes the listbox, clears the active option, and updates ARIA state. */\n  close(): void {\n    if (!this.hasListTarget) return;\n    this.listTarget.hidden = true;\n    this.inputTarget.setAttribute(\"aria-expanded\", \"false\");\n    this.#setActive(-1);\n    this.element.removeAttribute(\"data-stimeo--combobox-empty\");\n  }\n\n  /** Routes keyboard interaction per the APG combobox model. */\n  onKeydown(event: KeyboardEvent): void {\n    // Ignore keys fired during IME composition: the `Enter` that confirms a\n    // candidate (and arrows that move within it) must not select an option or\n    // close the popup. `keyCode === 229` covers browsers that omit `isComposing`\n    // on the confirming keydown. Aligns with the library's IME composition-guard\n    // policy (the keydown-level equivalent of the input-path guards in\n    // character-counter / auto-submit).\n    if (event.isComposing || event.keyCode === 229) return;\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n        // open() re-filters, so read the visible set afterwards.\n        if (this.#isClosed) this.open();\n        const visible = this.#visibleOptions();\n        if (visible.length > 0) {\n          const next = this.#activeIndex === -1 ? 0 : (this.#activeIndex + 1) % visible.length;\n          this.#setActive(next);\n        }\n        break;\n      }\n      case \"ArrowUp\": {\n        event.preventDefault();\n        if (this.#isClosed) this.open();\n        const visible = this.#visibleOptions();\n        if (visible.length > 0) {\n          // From the input (no active option) ArrowUp jumps to the last option,\n          // per the APG; otherwise it wraps backwards.\n          const next =\n            this.#activeIndex === -1\n              ? visible.length - 1\n              : (this.#activeIndex - 1 + visible.length) % visible.length;\n          this.#setActive(next);\n        }\n        break;\n      }\n      case \"Home\":\n        if (!this.#isClosed && this.#visibleOptions().length > 0) {\n          event.preventDefault();\n          this.#setActive(0);\n        }\n        break;\n      case \"End\": {\n        const visible = this.#visibleOptions();\n        if (!this.#isClosed && visible.length > 0) {\n          event.preventDefault();\n          this.#setActive(visible.length - 1);\n        }\n        break;\n      }\n      case \"Enter\": {\n        const visible = this.#visibleOptions();\n        const active = this.#activeIndex === -1 ? undefined : visible[this.#activeIndex];\n        if (active) {\n          event.preventDefault();\n          this.#select(active);\n        }\n        break;\n      }\n      case \"Escape\":\n        event.preventDefault();\n        this.close();\n        break;\n      case \"Tab\":\n        // Let focus leave naturally, but don't keep a stale popup open.\n        this.close();\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Closes the listbox when a click lands outside the combobox. Mirrors the menu\n   * button's outside-click behavior; clicks on an option are inside the element,\n   * so `#select` (not this handler) closes the popup after committing.\n   */\n  readonly #onOutsideClick = (event: MouseEvent): void => {\n    if (!this.#isClosed && !this.element.contains(event.target as Node)) this.close();\n  };\n\n  /** Selects the clicked option. Bound via `data-action` (click). */\n  selectByClick(event: Event): void {\n    const option = (event.currentTarget as HTMLElement).closest<HTMLElement>('[role=\"option\"]');\n    if (option) this.#select(option);\n  }\n\n  /** Commits an option: fills the input, closes the listbox, notifies listeners. */\n  #select(option: HTMLElement): void {\n    const value = option.dataset.value ?? (option.textContent ?? \"\").trim();\n    const changed = this.inputTarget.value !== value;\n    this.inputTarget.value = value;\n    this.close();\n    // Returning focus to the input would re-trigger a `focus`-bound open(); guard\n    // it so the listbox stays closed after a selection.\n    this.#suppressOpen = true;\n    this.inputTarget.focus();\n    this.#suppressOpen = false;\n    if (changed) {\n      // A native bubbling `change` (matching <select>/listbox semantics: only on\n      // an actual value change) so form-level behaviors — validation re-checks,\n      // auto-submit — hear the commit without knowing this widget. Deliberately\n      // NOT `input`: that is this combobox's own filter trigger and would reopen\n      // the popup on every selection.\n      this.inputTarget.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    this.dispatch(\"selected\", { detail: { value } });\n  }\n\n  /**\n   * Reflects whether the open listbox currently has zero matching options by\n   * toggling `data-stimeo--combobox-empty` on the root element. Behavior only:\n   * consumers decide how to present the empty state (hide the list, show a\n   * \"no results\" node, etc.) via CSS keyed off this attribute.\n   */\n  #reflectEmptyState(): void {\n    const empty = !this.#isClosed && this.#visibleOptions().length === 0;\n    if (empty) {\n      this.element.setAttribute(\"data-stimeo--combobox-empty\", \"\");\n    } else {\n      this.element.removeAttribute(\"data-stimeo--combobox-empty\");\n    }\n  }\n\n  /**\n   * Marks the visible option at `index` active via `aria-selected` and the\n   * input's `aria-activedescendant`. Pass `-1` to clear the active option.\n   */\n  #setActive(index: number): void {\n    this.#activeIndex = index;\n    const visible = this.#visibleOptions();\n    const active = index === -1 ? null : visible[index];\n    // Clear aria-selected on every option (not just the visible ones) so a\n    // previously-active option that became hidden by filtering doesn't keep a\n    // stale selected state.\n    for (const option of this.optionTargets) {\n      option.setAttribute(\"aria-selected\", option === active ? \"true\" : \"false\");\n    }\n    if (active?.id) {\n      this.inputTarget.setAttribute(\"aria-activedescendant\", active.id);\n    } else {\n      this.inputTarget.removeAttribute(\"aria-activedescendant\");\n    }\n    // Virtual focus never triggers the browser's native focus-scrolling, so a\n    // scrollable list must follow the active option itself (list-only scroll).\n    if (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);\n  }\n\n  /** The options currently shown (not filtered out). */\n  #visibleOptions(): HTMLElement[] {\n    return this.optionTargets.filter((option) => !option.hidden);\n  }\n\n  /** Whether the listbox is currently hidden. */\n  get #isClosed(): boolean {\n    return !this.hasListTarget || this.listTarget.hidden !== false;\n  }\n}\n"]}
+{"version":3,"sources":["../../src/utils/composition_tracker.ts","../../src/utils/option_scroll.ts","../../src/controllers/combobox_controller.ts"],"names":[],"mappings":"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","file":"combobox_controller.js","sourcesContent":["/** Minimal event shape carrying the platform's per-event composition signal. */\nexport interface CompositionSignal {\n  readonly isComposing?: boolean;\n}\n\n/** Hooks that keep component-specific work outside {@link CompositionTracker}. */\nexport interface CompositionTrackerOptions {\n  /** Runs after lifecycle state is set for a `compositionstart` event. */\n  readonly onStart?: (event: Event) => void;\n  /** Runs after lifecycle state is cleared for a `compositionend` event. */\n  readonly onEnd?: (event: Event) => void;\n}\n\n/**\n * Owns IME composition listeners and transient state for one or more event targets.\n *\n * Some browsers omit `KeyboardEvent.isComposing` on the keydown that confirms a\n * conversion. Tracking `compositionstart` through `compositionend` supplies the\n * missing lifecycle signal without relying on deprecated numeric key codes.\n * Component policy stays with the consumer: filtering, validation, and submission\n * belong in the optional {@link CompositionTrackerOptions.onEnd} callback.\n *\n * @example\n * ```ts\n * #composition = new CompositionTracker({ onEnd: () => this.filter() });\n *\n * connect(): void {\n *   this.#composition.observe(this.inputTarget);\n * }\n *\n * disconnect(): void {\n *   this.#composition.disconnect();\n * }\n *\n * onKeydown(event: KeyboardEvent): void {\n *   if (this.#composition.isComposing(event)) return;\n * }\n * ```\n */\nexport class CompositionTracker {\n  readonly #observedTargets = new Set<EventTarget>();\n  readonly #activeTargets = new Set<EventTarget>();\n  readonly #onStart: ((event: Event) => void) | undefined;\n  readonly #onEnd: ((event: Event) => void) | undefined;\n\n  constructor(options: CompositionTrackerOptions = {}) {\n    this.#onStart = options.onStart;\n    this.#onEnd = options.onEnd;\n  }\n\n  /** Starts lifecycle tracking for `target`; repeated calls are idempotent. */\n  observe(target: EventTarget): void {\n    if (this.#observedTargets.has(target)) return;\n    target.addEventListener(\"compositionstart\", this.#handleStart);\n    target.addEventListener(\"compositionend\", this.#handleEnd);\n    this.#observedTargets.add(target);\n  }\n\n  /** Stops tracking one target and clears any active composition it owned. */\n  unobserve(target: EventTarget): void {\n    if (!this.#observedTargets.delete(target)) return;\n    target.removeEventListener(\"compositionstart\", this.#handleStart);\n    target.removeEventListener(\"compositionend\", this.#handleEnd);\n    this.#activeTargets.delete(target);\n  }\n\n  /** Releases every listener and clears state so reconnect starts cleanly. */\n  disconnect(): void {\n    for (const target of this.#observedTargets) {\n      target.removeEventListener(\"compositionstart\", this.#handleStart);\n      target.removeEventListener(\"compositionend\", this.#handleEnd);\n    }\n    this.#observedTargets.clear();\n    this.#activeTargets.clear();\n  }\n\n  /** True when lifecycle tracking or the current event reports composition. */\n  isComposing(event?: CompositionSignal): boolean {\n    return this.#activeTargets.size > 0 || event?.isComposing === true;\n  }\n\n  readonly #handleStart = (event: Event): void => {\n    if (event.currentTarget) this.#activeTargets.add(event.currentTarget);\n    this.#onStart?.(event);\n  };\n\n  readonly #handleEnd = (event: Event): void => {\n    if (event.currentTarget) this.#activeTargets.delete(event.currentTarget);\n    this.#onEnd?.(event);\n  };\n}\n","/**\n * Scroll-follow for virtually-focused listbox options.\n *\n * Listbox-style widgets that track their active option with\n * `aria-activedescendant` keep DOM focus on the input/trigger, so the\n * browser's native \"scroll the focused element into view\" never runs — in a\n * scrollable list (`max-height` + `overflow`) the active option can walk right\n * out of sight on ArrowDown/ArrowUp. This helper keeps it visible.\n *\n * It adjusts the LIST's own `scrollTop` only — deliberately not\n * `scrollIntoView({ block: \"nearest\" })`, which may also scroll ancestor\n * scrolling boxes (the page) when a floating popup pokes past a viewport\n * edge, desyncing anchored/marker-composed placements. (Command-palette keeps\n * its `scrollIntoView` because its page is scroll-locked behind the modal;\n * page-floating popups must use this helper instead.)\n */\n\n/**\n * Scrolls `option` into view within `list` by minimally adjusting\n * `list.scrollTop`. No-ops when the list does not actually scroll. Never\n * touches any other scrolling box.\n *\n * @param list - The scrollable listbox container.\n * @param option - The (virtually focused) option to keep visible.\n */\nexport function scrollOptionIntoView(list: HTMLElement, option: HTMLElement): void {\n  if (list.scrollHeight <= list.clientHeight) return;\n  const listRect = list.getBoundingClientRect();\n  const optionRect = option.getBoundingClientRect();\n  if (optionRect.top < listRect.top) {\n    list.scrollTop -= listRect.top - optionRect.top;\n  } else if (optionRect.bottom > listRect.bottom) {\n    list.scrollTop += optionRect.bottom - listRect.bottom;\n  }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { CompositionTracker } from \"../utils/composition_tracker\";\nimport { scrollOptionIntoView } from \"../utils/option_scroll\";\n\n/**\n * Headless, accessible combobox behavior (list autocomplete).\n *\n * Markup contract (identifier: `stimeo--combobox`):\n *   <div data-controller=\"stimeo--combobox\">\n *     <input type=\"text\" role=\"combobox\" aria-expanded=\"false\"\n *            aria-autocomplete=\"list\" aria-controls=\"listbox\"\n *            data-stimeo--combobox-target=\"input\"\n *            data-action=\"input->stimeo--combobox#filter\n *                         keydown->stimeo--combobox#onKeydown\n *                         focus->stimeo--combobox#open\n *                         click->stimeo--combobox#open\" />\n *     <ul id=\"listbox\" role=\"listbox\" data-stimeo--combobox-target=\"list\" hidden>\n *       <li role=\"option\" id=\"opt-apple\" data-value=\"apple\"\n *           data-stimeo--combobox-target=\"option\"\n *           data-action=\"click->stimeo--combobox#selectByClick\">Apple</li>\n *       <!-- more options -->\n *     </ul>\n *   </div>\n *\n * Implements the WAI-ARIA APG **Combobox** pattern with a listbox popup and\n * list-autocomplete. Focus stays in the input; the active option is tracked with\n * `aria-activedescendant` rather than by moving DOM focus.\n *\n * @remarks\n * Behavior only. Options are authored in the DOM; the controller filters them by\n * toggling each option's `hidden` attribute (case-insensitive substring match on\n * its text). The consumer owns styling, typically keyed off `[aria-selected]`.\n * When an open listbox has no matching options, the root element gets\n * `data-stimeo--combobox-empty` so the consumer can style the empty state (hide\n * the list, show a \"no results\" node, …) — the library imposes no visuals.\n *\n * Behavior provided:\n * - Typing filters the options and opens the listbox.\n * - Focusing or clicking the input opens the listbox, re-filtered against the\n *   current value (so re-opening with a non-matching value keeps the empty state).\n * - `ArrowDown`/`ArrowUp` move the active option (wrapping); `Enter` selects it;\n *   `Escape` closes the listbox; `Home`/`End` jump to the first/last visible\n *   option.\n * - Selecting an option fills the input (with the option's `data-value` if set,\n *   otherwise its text) and closes the listbox.\n * - A click outside the combobox closes the listbox.\n */\nexport class ComboboxController extends Controller<HTMLElement> {\n  static override targets = [\"input\", \"list\", \"option\"];\n  static actions = [\"close\", \"filter\", \"onKeydown\", \"open\", \"selectByClick\"] as const;\n  static events = [\"selected\"] as const;\n\n  declare readonly inputTarget: HTMLInputElement;\n  declare readonly listTarget: HTMLElement;\n  declare readonly optionTargets: HTMLElement[];\n  declare readonly hasInputTarget: boolean;\n  declare readonly hasListTarget: boolean;\n\n  /** Index into the *visible* options of the active option, or -1 if none. */\n  #activeIndex = -1;\n  /**\n   * Suppresses {@link open} for the duration of the programmatic re-focus in\n   * `#select`, so committing a value (which returns focus to the input)\n   * does not immediately re-open the listbox via a `focus`-bound action.\n   */\n  #suppressOpen = false;\n  /** Owns IME lifecycle state; confirmed text re-filters the list once. */\n  readonly #composition = new CompositionTracker({ onEnd: () => this.filter() });\n\n  /** Starts closed with no active option and registers the outside-click listener. */\n  override connect(): void {\n    if (this.hasInputTarget) this.#composition.observe(this.inputTarget);\n    this.close();\n    document.addEventListener(\"click\", this.#onOutsideClick);\n  }\n\n  /** Removes the document-level listener registered in {@link connect}. */\n  override disconnect(): void {\n    this.#composition.disconnect();\n    document.removeEventListener(\"click\", this.#onOutsideClick);\n  }\n\n  /** Tracks an input added initially or after connect. */\n  inputTargetConnected(input: HTMLInputElement): void {\n    this.#composition.observe(input);\n  }\n\n  /** Removes composition listeners when the active input is replaced or removed. */\n  inputTargetDisconnected(input: HTMLInputElement): void {\n    this.#composition.unobserve(input);\n  }\n\n  /** Filters confirmed input text and opens the listbox. */\n  filter(event?: InputEvent): void {\n    if (this.#composition.isComposing(event)) return;\n    this.open();\n  }\n\n  /**\n   * Opens the listbox, re-filtering the options against the current input value\n   * so the visible options and empty state always match what is typed (e.g.\n   * re-opening with a stale non-matching value still surfaces the empty state).\n   */\n  open(): void {\n    if (!this.hasListTarget || this.#suppressOpen) return;\n    this.#applyFilter();\n    this.listTarget.hidden = false;\n    this.inputTarget.setAttribute(\"aria-expanded\", \"true\");\n    this.#setActive(-1);\n    this.#reflectEmptyState();\n  }\n\n  /**\n   * Hides options that don't match the current input value (case-insensitive\n   * substring). An empty query shows every option. Does not change open state.\n   */\n  #applyFilter(): void {\n    const query = this.inputTarget.value.trim().toLowerCase();\n    for (const option of this.optionTargets) {\n      const text = (option.textContent ?? \"\").trim().toLowerCase();\n      option.hidden = query.length > 0 && !text.includes(query);\n    }\n  }\n\n  /** Closes the listbox, clears the active option, and updates ARIA state. */\n  close(): void {\n    if (!this.hasListTarget) return;\n    this.listTarget.hidden = true;\n    this.inputTarget.setAttribute(\"aria-expanded\", \"false\");\n    this.#setActive(-1);\n    this.element.removeAttribute(\"data-stimeo--combobox-empty\");\n  }\n\n  /** Routes keyboard interaction per the APG combobox model. */\n  onKeydown(event: KeyboardEvent): void {\n    // Ignore keys fired during IME composition: the `Enter` that confirms a\n    // candidate (and arrows that move within it) must not select an option or\n    // close the popup. Controller-owned lifecycle state covers confirming events\n    // that omit the standard per-event signal.\n    if (this.#composition.isComposing(event)) return;\n    switch (event.key) {\n      case \"ArrowDown\": {\n        event.preventDefault();\n        // open() re-filters, so read the visible set afterwards.\n        if (this.#isClosed) this.open();\n        const visible = this.#visibleOptions();\n        if (visible.length > 0) {\n          const next = this.#activeIndex === -1 ? 0 : (this.#activeIndex + 1) % visible.length;\n          this.#setActive(next);\n        }\n        break;\n      }\n      case \"ArrowUp\": {\n        event.preventDefault();\n        if (this.#isClosed) this.open();\n        const visible = this.#visibleOptions();\n        if (visible.length > 0) {\n          // From the input (no active option) ArrowUp jumps to the last option,\n          // per the APG; otherwise it wraps backwards.\n          const next =\n            this.#activeIndex === -1\n              ? visible.length - 1\n              : (this.#activeIndex - 1 + visible.length) % visible.length;\n          this.#setActive(next);\n        }\n        break;\n      }\n      case \"Home\":\n        if (!this.#isClosed && this.#visibleOptions().length > 0) {\n          event.preventDefault();\n          this.#setActive(0);\n        }\n        break;\n      case \"End\": {\n        const visible = this.#visibleOptions();\n        if (!this.#isClosed && visible.length > 0) {\n          event.preventDefault();\n          this.#setActive(visible.length - 1);\n        }\n        break;\n      }\n      case \"Enter\": {\n        const visible = this.#visibleOptions();\n        const active = this.#activeIndex === -1 ? undefined : visible[this.#activeIndex];\n        if (active) {\n          event.preventDefault();\n          this.#select(active);\n        }\n        break;\n      }\n      case \"Escape\":\n        // Layered-Escape contract: leave a press an inner handler already\n        // owned (rule 1), and consume only while owning a dismissable state —\n        // with the list already closed the press stays free for the shared\n        // resolver, so an enclosing dialog still closes from a focused input.\n        if (event.defaultPrevented || this.#isClosed) break;\n        event.preventDefault();\n        this.close();\n        break;\n      case \"Tab\":\n        // Let focus leave naturally, but don't keep a stale popup open.\n        this.close();\n        break;\n      default:\n        break;\n    }\n  }\n\n  /**\n   * Closes the listbox when a click lands outside the combobox. Mirrors the menu\n   * button's outside-click behavior; clicks on an option are inside the element,\n   * so `#select` (not this handler) closes the popup after committing.\n   */\n  readonly #onOutsideClick = (event: MouseEvent): void => {\n    if (!this.#isClosed && !this.element.contains(event.target as Node)) this.close();\n  };\n\n  /** Selects the clicked option. Bound via `data-action` (click). */\n  selectByClick(event: Event): void {\n    const option = (event.currentTarget as HTMLElement).closest<HTMLElement>('[role=\"option\"]');\n    if (option) this.#select(option);\n  }\n\n  /** Commits an option: fills the input, closes the listbox, notifies listeners. */\n  #select(option: HTMLElement): void {\n    const value = option.dataset.value ?? (option.textContent ?? \"\").trim();\n    const changed = this.inputTarget.value !== value;\n    this.inputTarget.value = value;\n    this.close();\n    // Returning focus to the input would re-trigger a `focus`-bound open(); guard\n    // it so the listbox stays closed after a selection.\n    this.#suppressOpen = true;\n    this.inputTarget.focus();\n    this.#suppressOpen = false;\n    if (changed) {\n      // A native bubbling `change` (matching <select>/listbox semantics: only on\n      // an actual value change) so form-level behaviors — validation re-checks,\n      // auto-submit — hear the commit without knowing this widget. Deliberately\n      // NOT `input`: that is this combobox's own filter trigger and would reopen\n      // the popup on every selection.\n      this.inputTarget.dispatchEvent(new Event(\"change\", { bubbles: true }));\n    }\n    this.dispatch(\"selected\", { detail: { value } });\n  }\n\n  /**\n   * Reflects whether the open listbox currently has zero matching options by\n   * toggling `data-stimeo--combobox-empty` on the root element. Behavior only:\n   * consumers decide how to present the empty state (hide the list, show a\n   * \"no results\" node, etc.) via CSS keyed off this attribute.\n   */\n  #reflectEmptyState(): void {\n    const empty = !this.#isClosed && this.#visibleOptions().length === 0;\n    if (empty) {\n      this.element.setAttribute(\"data-stimeo--combobox-empty\", \"\");\n    } else {\n      this.element.removeAttribute(\"data-stimeo--combobox-empty\");\n    }\n  }\n\n  /**\n   * Marks the visible option at `index` active via `aria-selected` and the\n   * input's `aria-activedescendant`. Pass `-1` to clear the active option.\n   */\n  #setActive(index: number): void {\n    this.#activeIndex = index;\n    const visible = this.#visibleOptions();\n    const active = index === -1 ? null : visible[index];\n    // Clear aria-selected on every option (not just the visible ones) so a\n    // previously-active option that became hidden by filtering doesn't keep a\n    // stale selected state.\n    for (const option of this.optionTargets) {\n      option.setAttribute(\"aria-selected\", option === active ? \"true\" : \"false\");\n    }\n    if (active?.id) {\n      this.inputTarget.setAttribute(\"aria-activedescendant\", active.id);\n    } else {\n      this.inputTarget.removeAttribute(\"aria-activedescendant\");\n    }\n    // Virtual focus never triggers the browser's native focus-scrolling, so a\n    // scrollable list must follow the active option itself (list-only scroll).\n    if (active && this.hasListTarget) scrollOptionIntoView(this.listTarget, active);\n  }\n\n  /** The options currently shown (not filtered out). */\n  #visibleOptions(): HTMLElement[] {\n    return this.optionTargets.filter((option) => !option.hidden);\n  }\n\n  /** Whether the listbox is currently hidden. */\n  get #isClosed(): boolean {\n    return !this.hasListTarget || this.listTarget.hidden !== false;\n  }\n}\n"]}

package/dist/controllers/command_palette_controller.d.ts

@@ -15,11 +15,10 @@ import { Controller } from '@hotwired/stimulus';
  *              data-action="input->stimeo--command-palette#filter
  *                           keydown->stimeo--command-palette#onKeydown" />
  *       <ul id="cmdk-list" data-stimeo--command-palette-target="list" role="listbox">
- *         <li id="cmd-new" role="option"
- *             data-stimeo--command-palette-target="option"
+ *         <li id="cmd-new" role="option" data-stimeo--command-palette-target="option"
  *             data-action="click->stimeo--command-palette#selectByClick">New…</li>
- *         <li role="option" data-stimeo--command-palette-target="option"
- *             data-disabled="true">Section heading (shown but not selectable)</li>
+ *         <li id="cmd-heading" role="option" data-stimeo--command-palette-target="option"
+ *             data-disabled="true">Disabled command (shown but not selectable)</li>
  *       </ul>
  *       <p data-stimeo--command-palette-target="empty" hidden>No commands</p>
  *     </div>
@@ -37,7 +36,9 @@ import { Controller } from '@hotwired/stimulus';
  * primitive (also used by dialog / alert-dialog / drawer). `Escape` closes and
  * `Tab`/`Shift+Tab` cycle focus regardless of which element inside the dialog holds
  * focus (input, close button, …), because the trap listens at the document level.
- * Styling, transitions, and the actual command handlers remain the consumer's.
+ * IME composition is tracked from start to end: intermediate input does not filter,
+ * and conversion-confirming keys never select a command. Styling, transitions, and
+ * the actual command handlers remain the consumer's.
  */
 declare class CommandPaletteController extends Controller<HTMLElement> {
     #private;
@@ -79,6 +80,12 @@ declare class CommandPaletteController extends Controller<HTMLElement> {
     connect(): void;
     /** Tears down the global hotkey listener and reverts the modal side effects. */
     disconnect(): void;
+    /** Initializes semantics for an option added before or after the controller connects. */
+    optionTargetConnected(option: HTMLElement): void;
+    /** Tracks an input added initially or after connect without extra consumer actions. */
+    inputTargetConnected(input: HTMLInputElement): void;
+    /** Removes controller-owned listeners when the input target is replaced or removed. */
+    inputTargetDisconnected(input: HTMLInputElement): void;
     /** Toggles the open state of the command palette. */
     toggle(): void;
     /** Opens the palette, traps focus, and shifts focus to the input. */
@@ -86,7 +93,7 @@ declare class CommandPaletteController extends Controller<HTMLElement> {
     /** Closes the palette and restores focus back to the opener. */
     close(): void;
     /** Filters option elements in-memory matching the input value. Bound to input target. */
-    filter(): void;
+    filter(event?: InputEvent): void;
     /** Selects the clicked option. Bound to option targets. */
     selectByClick(event: MouseEvent): void;
     /** Closes when the backdrop (the dialog target itself) is clicked, ignoring inner clicks. */