@astronox/core 0.1.0

package/src/patterns/Combobox/comboboxController.ts

@@ -0,0 +1,788 @@
+export type ComboboxChangeDetail =
+  | {
+      mode: 'options';
+      values: readonly string[];
+    }
+  | {
+      mode: 'number';
+      value: number;
+    };
+
+type SetComboboxValueOptions = {
+  emit?: boolean;
+};
+
+type NumberBounds = {
+  min: number;
+  max: number;
+  step: number;
+};
+
+const initializedAttribute = 'data-combobox-initialized';
+const compactViewportQuery =
+  '(width < 48rem), (hover: none) and (pointer: coarse)';
+const noop = (): void => undefined;
+
+const normalizeSearchValue = (value: string): string =>
+  value
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .toLocaleLowerCase(document.documentElement.lang || undefined);
+
+const getOptions = (root: HTMLElement): HTMLButtonElement[] =>
+  Array.from(
+    root.querySelectorAll<HTMLButtonElement>('[data-combobox-option]'),
+  );
+
+export function getComboboxValues(root: HTMLElement): string[] {
+  return getOptions(root)
+    .filter((option) => option.getAttribute('aria-selected') === 'true')
+    .map((option) => option.dataset.comboboxOption)
+    .filter((value): value is string => value !== undefined);
+}
+
+const syncSelectedTags = (
+  root: HTMLElement,
+  selectedValues: readonly string[],
+): void => {
+  const valuesRoot = root.querySelector<HTMLElement>('[data-combobox-values]');
+  const placeholder = root.querySelector<HTMLElement>(
+    '[data-combobox-placeholder]',
+  );
+  if (!valuesRoot || !placeholder) return;
+
+  for (const tag of valuesRoot.querySelectorAll('[data-combobox-tag]')) {
+    tag.remove();
+  }
+
+  const templates = Array.from(
+    root.querySelectorAll<HTMLTemplateElement>(
+      'template[data-combobox-tag-template]',
+    ),
+  );
+  for (const value of selectedValues) {
+    const template = templates.find(
+      (candidate) => candidate.dataset.comboboxTagTemplate === value,
+    );
+    const tag = template?.content.firstElementChild?.cloneNode(true);
+    if (tag) valuesRoot.insertBefore(tag, placeholder);
+  }
+
+  placeholder.hidden = selectedValues.length > 0;
+};
+
+function getNumberBounds(root: HTMLElement): NumberBounds | null {
+  const min = Number(root.dataset.comboboxNumberMin);
+  const max = Number(root.dataset.comboboxNumberMax);
+  const step = Number(root.dataset.comboboxNumberStep);
+
+  return Number.isInteger(min) &&
+    Number.isInteger(max) &&
+    Number.isInteger(step) &&
+    min <= max &&
+    step > 0
+    ? { min, max, step }
+    : null;
+}
+
+function normalizeNumber(value: number, bounds: NumberBounds): number {
+  const bounded = Math.min(bounds.max, Math.max(bounds.min, value));
+  const stepped =
+    bounds.min + Math.round((bounded - bounds.min) / bounds.step) * bounds.step;
+
+  return Math.min(bounds.max, Math.max(bounds.min, stepped));
+}
+
+export function setComboboxValues(
+  root: HTMLElement,
+  requestedValues: readonly string[],
+  { emit = false }: SetComboboxValueOptions = {},
+): void {
+  if (root.dataset.comboboxMode === 'number') return;
+
+  const options = getOptions(root);
+  const selectionMode =
+    root.dataset.comboboxSelectionMode === 'multiple' ? 'multiple' : 'single';
+  const validValues = new Set(
+    options
+      .filter((option) => !option.disabled)
+      .map((option) => option.dataset.comboboxOption)
+      .filter((value): value is string => value !== undefined),
+  );
+  const selectedValues = [
+    ...new Set(requestedValues.filter((value) => validValues.has(value))),
+  ];
+  if (selectionMode === 'single') selectedValues.splice(1);
+
+  const selectedSet = new Set(selectedValues);
+  for (const option of options) {
+    option.setAttribute(
+      'aria-selected',
+      String(selectedSet.has(option.dataset.comboboxOption ?? '')),
+    );
+  }
+  syncSelectedTags(root, selectedValues);
+
+  if (emit) {
+    root.dispatchEvent(
+      new CustomEvent<ComboboxChangeDetail>('combobox:change', {
+        bubbles: true,
+        detail: { mode: 'options', values: selectedValues },
+      }),
+    );
+  }
+}
+
+export function clearCombobox(
+  root: HTMLElement,
+  options: SetComboboxValueOptions = {},
+): void {
+  if (root.dataset.comboboxMode === 'number') return;
+
+  setComboboxValues(root, [], options);
+  root.dispatchEvent(new Event('combobox:clear'));
+}
+
+export function setComboboxNumberValue(
+  root: HTMLElement,
+  requestedValue: number,
+  { emit = false }: SetComboboxValueOptions = {},
+): void {
+  if (root.dataset.comboboxMode !== 'number') return;
+
+  const bounds = getNumberBounds(root);
+  const input = root.querySelector<HTMLInputElement>(
+    '[data-combobox-number-input]',
+  );
+  if (!bounds || !input || !Number.isFinite(requestedValue)) return;
+
+  const value = normalizeNumber(Math.round(requestedValue), bounds);
+  const displayValue = String(value);
+  if (input.value !== displayValue) input.value = displayValue;
+
+  for (const option of getOptions(root)) {
+    option.setAttribute(
+      'aria-selected',
+      String(option.dataset.comboboxOption === displayValue),
+    );
+  }
+
+  const decrement = root.querySelector<HTMLButtonElement>(
+    '[data-combobox-number-step="decrement"]',
+  );
+  const increment = root.querySelector<HTMLButtonElement>(
+    '[data-combobox-number-step="increment"]',
+  );
+  if (decrement) decrement.disabled = value <= bounds.min;
+  if (increment) increment.disabled = value >= bounds.max;
+
+  if (emit) {
+    root.dispatchEvent(
+      new CustomEvent<ComboboxChangeDetail>('combobox:change', {
+        bubbles: true,
+        detail: { mode: 'number', value },
+      }),
+    );
+  }
+}
+
+export function initCombobox(root: HTMLElement): () => void {
+  if (root.getAttribute(initializedAttribute) === 'true') return noop;
+
+  const mode = root.dataset.comboboxMode === 'number' ? 'number' : 'options';
+  const control = root.querySelector<HTMLElement>('[data-combobox-control]');
+  const trigger = root.querySelector<HTMLButtonElement>(
+    '[data-combobox-trigger]',
+  );
+  const numberInput = root.querySelector<HTMLInputElement>(
+    '[data-combobox-number-input]',
+  );
+  const panel = root.querySelector<HTMLElement>('[data-combobox-panel]');
+  const search = root.querySelector<HTMLInputElement>('[data-combobox-search]');
+  const optionsRoot = root.querySelector<HTMLElement>(
+    '[data-combobox-options]',
+  );
+  const empty = root.querySelector<HTMLElement>('[data-combobox-empty]');
+  const owner = mode === 'number' ? numberInput : trigger;
+
+  if (
+    !control ||
+    !owner ||
+    !panel ||
+    !optionsRoot ||
+    (mode === 'options' && (!trigger || !search || !empty)) ||
+    (mode === 'number' && (!numberInput || !getNumberBounds(root)))
+  ) {
+    return noop;
+  }
+
+  root.setAttribute(initializedAttribute, 'true');
+  const clearable = root.dataset.comboboxClearable === 'true';
+  const closeOnSelect = root.dataset.comboboxCloseOnSelect === 'true';
+  const selectionMode =
+    root.dataset.comboboxSelectionMode === 'multiple' ? 'multiple' : 'single';
+  let activeOption: HTMLButtonElement | null = null;
+  let positionFrame: number | null = null;
+  let viewportListenersAttached = false;
+
+  const isOpen = (): boolean => root.hasAttribute('data-combobox-open');
+
+  const getVisibleOptions = (): HTMLButtonElement[] =>
+    getOptions(root).filter((option) => !option.hidden && !option.disabled);
+
+  const toPixels = (value: string): number => Number.parseFloat(value) || 0;
+
+  const getPanelContentBlockSize = (): number => {
+    const panelStyle = window.getComputedStyle(panel);
+    const searchRegion = search?.closest<HTMLElement>('.combobox__search');
+
+    return (
+      toPixels(panelStyle.borderBlockStartWidth) +
+      toPixels(panelStyle.borderBlockEndWidth) +
+      (searchRegion?.offsetHeight ?? 0) +
+      optionsRoot.scrollHeight
+    );
+  };
+
+  const setActiveOption = (option: HTMLButtonElement | null): void => {
+    for (const candidate of getOptions(root)) {
+      candidate.toggleAttribute(
+        'data-interaction-accent-hover',
+        candidate === option,
+      );
+    }
+    activeOption = option;
+
+    for (const ariaOwner of [owner, search]) {
+      if (!ariaOwner) continue;
+      if (option) {
+        ariaOwner.setAttribute('aria-activedescendant', option.id);
+      } else {
+        ariaOwner.removeAttribute('aria-activedescendant');
+      }
+    }
+  };
+
+  const positionPanel = (): void => {
+    if (!isOpen()) return;
+
+    const viewportPadding = 8;
+    const visualViewport = window.visualViewport;
+    const viewportLeft = visualViewport?.offsetLeft ?? 0;
+    const viewportTop = visualViewport?.offsetTop ?? 0;
+    const viewportWidth = visualViewport?.width ?? window.innerWidth;
+    const viewportHeight = visualViewport?.height ?? window.innerHeight;
+    const viewportRight = viewportLeft + viewportWidth;
+    const viewportBottom = viewportTop + viewportHeight;
+    const controlRect = control.getBoundingClientRect();
+    const overlayBoundary = root.closest<HTMLElement>(
+      '[data-overlay-boundary]',
+    );
+    const upperBoundary = Math.max(
+      viewportTop + viewportPadding,
+      overlayBoundary?.getBoundingClientRect().top ??
+        viewportTop + viewportPadding,
+    );
+    const availableWidth = Math.max(0, viewportWidth - viewportPadding * 2);
+    const panelWidth = Math.min(controlRect.width, availableWidth);
+    const left = Math.min(
+      Math.max(viewportLeft + viewportPadding, controlRect.left),
+      Math.max(
+        viewportLeft + viewportPadding,
+        viewportRight - panelWidth - viewportPadding,
+      ),
+    );
+    const availableBelow = Math.max(
+      0,
+      viewportBottom - controlRect.bottom - viewportPadding,
+    );
+    const availableAbove = Math.max(0, controlRect.top - upperBoundary);
+    const contentBlockSize = getPanelContentBlockSize();
+    const placement =
+      contentBlockSize <= availableBelow || availableBelow >= availableAbove
+        ? 'below'
+        : 'above';
+    const availableBlockSize =
+      placement === 'above' ? availableAbove : availableBelow;
+
+    panel.style.setProperty(
+      '--combobox-panel-inline-start',
+      `${Math.round(left)}px`,
+    );
+    panel.style.setProperty(
+      '--combobox-panel-inline-size',
+      `${Math.round(panelWidth)}px`,
+    );
+    panel.style.setProperty(
+      '--combobox-panel-available-block-size',
+      `${Math.floor(availableBlockSize)}px`,
+    );
+    root.dataset.comboboxPlacement = placement;
+    const top =
+      placement === 'above'
+        ? Math.max(upperBoundary, controlRect.top - panel.offsetHeight)
+        : controlRect.bottom;
+
+    panel.style.setProperty(
+      '--combobox-panel-block-start',
+      `${Math.round(top)}px`,
+    );
+  };
+
+  const schedulePanelPosition = (): void => {
+    if (!isOpen() || positionFrame !== null) return;
+
+    positionFrame = window.requestAnimationFrame(() => {
+      positionFrame = null;
+      positionPanel();
+    });
+  };
+  const controlResizeObserver =
+    'ResizeObserver' in window
+      ? new ResizeObserver(schedulePanelPosition)
+      : null;
+
+  const resetFilter = (): void => {
+    if (search) search.value = '';
+    for (const option of getOptions(root)) option.hidden = false;
+    if (empty) empty.hidden = getOptions(root).length > 0;
+  };
+
+  const handleViewportChange = (): void => {
+    schedulePanelPosition();
+  };
+
+  const handleViewportScroll = (event: Event): void => {
+    const target = event.target;
+    if (target instanceof Node && panel.contains(target)) return;
+
+    if (window.matchMedia(compactViewportQuery).matches) {
+      close();
+      blurFocusedDescendant();
+      return;
+    }
+
+    schedulePanelPosition();
+  };
+
+  const attachViewportListeners = (): void => {
+    if (viewportListenersAttached) return;
+
+    viewportListenersAttached = true;
+    document.addEventListener('click', handleDocumentClick);
+    document.addEventListener('focusin', handleDocumentFocusin);
+    window.addEventListener('resize', handleViewportChange, { passive: true });
+    window.addEventListener('scroll', handleViewportScroll, {
+      capture: true,
+      passive: true,
+    });
+    window.visualViewport?.addEventListener('resize', handleViewportChange, {
+      passive: true,
+    });
+    window.visualViewport?.addEventListener('scroll', handleViewportChange, {
+      passive: true,
+    });
+    controlResizeObserver?.observe(control);
+  };
+
+  const detachViewportListeners = (): void => {
+    if (!viewportListenersAttached) return;
+
+    viewportListenersAttached = false;
+    document.removeEventListener('click', handleDocumentClick);
+    document.removeEventListener('focusin', handleDocumentFocusin);
+    window.removeEventListener('resize', handleViewportChange);
+    window.removeEventListener('scroll', handleViewportScroll, true);
+    window.visualViewport?.removeEventListener('resize', handleViewportChange);
+    window.visualViewport?.removeEventListener('scroll', handleViewportChange);
+    controlResizeObserver?.unobserve(control);
+  };
+
+  const close = (restoreFocus = false): void => {
+    if (!isOpen()) return;
+
+    detachViewportListeners();
+    if (positionFrame !== null) {
+      window.cancelAnimationFrame(positionFrame);
+      positionFrame = null;
+    }
+    owner.setAttribute('aria-expanded', 'false');
+    root.removeAttribute('data-combobox-open');
+    root.removeAttribute('data-combobox-placement');
+    setActiveOption(null);
+    resetFilter();
+    if (panel.matches(':popover-open')) panel.hidePopover();
+    panel.hidden = true;
+
+    if (restoreFocus) owner.focus();
+  };
+
+  const blurFocusedDescendant = (): void => {
+    const focused = document.activeElement;
+    if (focused instanceof HTMLElement && root.contains(focused)) {
+      focused.blur();
+    }
+  };
+
+  const open = (focusSearch = true): void => {
+    if (isOpen() || owner.matches(':disabled')) return;
+
+    panel.hidden = false;
+    if (!panel.matches(':popover-open')) panel.showPopover();
+    owner.setAttribute('aria-expanded', 'true');
+    root.setAttribute('data-combobox-open', '');
+    attachViewportListeners();
+    schedulePanelPosition();
+
+    const selectedOption =
+      getVisibleOptions().find(
+        (option) => option.getAttribute('aria-selected') === 'true',
+      ) ?? null;
+    setActiveOption(null);
+    selectedOption?.scrollIntoView({ block: 'nearest' });
+
+    if (focusSearch && search) {
+      window.requestAnimationFrame(() => {
+        if (isOpen()) search.focus();
+      });
+    }
+  };
+
+  const moveActiveOption = (direction: 1 | -1): void => {
+    const visibleOptions = getVisibleOptions();
+    if (visibleOptions.length === 0) {
+      setActiveOption(null);
+      return;
+    }
+
+    const currentIndex = activeOption
+      ? visibleOptions.indexOf(activeOption)
+      : -1;
+    const nextIndex =
+      currentIndex === -1
+        ? direction === 1
+          ? 0
+          : visibleOptions.length - 1
+        : (currentIndex + direction + visibleOptions.length) %
+          visibleOptions.length;
+    const nextOption = visibleOptions[nextIndex] ?? null;
+    setActiveOption(nextOption);
+    nextOption?.scrollIntoView({ block: 'nearest' });
+  };
+
+  const selectOption = (
+    option: HTMLButtonElement,
+    restoreFocus = true,
+  ): void => {
+    const value = option.dataset.comboboxOption;
+    if (!value || option.disabled) return;
+
+    if (mode === 'number') {
+      setComboboxNumberValue(root, Number(value), { emit: true });
+      close(restoreFocus);
+      return;
+    }
+
+    const selectedValues = getComboboxValues(root);
+    const isSelected = selectedValues.includes(value);
+    const nextValues = isSelected
+      ? clearable
+        ? selectedValues.filter((selectedValue) => selectedValue !== value)
+        : selectedValues
+      : selectionMode === 'multiple'
+        ? [...selectedValues, value]
+        : [value];
+
+    if (!isSelected || clearable) {
+      setComboboxValues(root, nextValues, { emit: true });
+    }
+    if (closeOnSelect) close(restoreFocus);
+  };
+
+  const removeTag = (button: HTMLElement): void => {
+    if (!clearable) return;
+    const tag = button.closest<HTMLElement>('[data-combobox-tag]');
+    const value = tag?.dataset.comboboxTag;
+    if (!value) return;
+
+    setComboboxValues(
+      root,
+      getComboboxValues(root).filter(
+        (selectedValue) => selectedValue !== value,
+      ),
+      { emit: true },
+    );
+    if (isOpen() && search) {
+      search.focus();
+    } else {
+      owner.focus();
+    }
+  };
+
+  const filterOptions = (): void => {
+    if (!search || !empty) return;
+
+    const query = normalizeSearchValue(search.value.trim());
+    let visibleCount = 0;
+
+    for (const option of getOptions(root)) {
+      const searchText = normalizeSearchValue(
+        option.dataset.comboboxSearchText ?? '',
+      );
+      option.hidden = query.length > 0 && !searchText.includes(query);
+      if (!option.hidden) visibleCount += 1;
+    }
+    empty.hidden = visibleCount > 0;
+    setActiveOption(null);
+    schedulePanelPosition();
+  };
+
+  const handleTagRemoval = (event: Event): boolean => {
+    const target = event.target;
+    if (!(target instanceof Element)) return false;
+
+    const removeButton = target.closest<HTMLElement>('[data-tag-remove]');
+    if (removeButton && control.contains(removeButton)) {
+      event.preventDefault();
+      event.stopPropagation();
+      removeTag(removeButton);
+      return true;
+    }
+
+    return false;
+  };
+
+  const toggleControl = (restoreFocus = true): void => {
+    if (isOpen()) {
+      close(restoreFocus);
+    } else {
+      open();
+    }
+  };
+
+  const handleOptionsTriggerClick = (): void => {
+    toggleControl(false);
+  };
+
+  const handleOptionsControlClick = (event: MouseEvent): void => {
+    handleTagRemoval(event);
+  };
+
+  const handleOwnerKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      if (!isOpen()) {
+        open(false);
+        if (event.key === 'ArrowUp') {
+          const visibleOptions = getVisibleOptions();
+          setActiveOption(visibleOptions.at(-1) ?? null);
+        }
+      } else {
+        moveActiveOption(event.key === 'ArrowDown' ? 1 : -1);
+      }
+    } else if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      open(false);
+      const visibleOptions = getVisibleOptions();
+      setActiveOption(
+        event.key === 'Home'
+          ? (visibleOptions[0] ?? null)
+          : (visibleOptions.at(-1) ?? null),
+      );
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      if (mode === 'number' && numberInput) {
+        commitNumberInput();
+        close(true);
+      } else if (!isOpen()) {
+        open();
+      } else if (activeOption) {
+        selectOption(activeOption);
+      }
+    } else if (event.key === ' ' && mode === 'options') {
+      event.preventDefault();
+      if (!isOpen()) open();
+      else if (activeOption) selectOption(activeOption);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      if (mode === 'number' && numberInput) {
+        const selected = Number(getComboboxValues(root)[0]);
+        if (Number.isFinite(selected)) numberInput.value = String(selected);
+      }
+      close(true);
+    }
+  };
+
+  const handleSearchKeydown = (event: KeyboardEvent): void => {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      moveActiveOption(event.key === 'ArrowDown' ? 1 : -1);
+    } else if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const visibleOptions = getVisibleOptions();
+      setActiveOption(
+        event.key === 'Home'
+          ? (visibleOptions[0] ?? null)
+          : (visibleOptions.at(-1) ?? null),
+      );
+    } else if (event.key === 'Enter') {
+      event.preventDefault();
+      if (activeOption) selectOption(activeOption);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      close(true);
+    } else if (event.key === 'Tab') {
+      close();
+    }
+  };
+
+  const handleOptionClick = (event: MouseEvent): void => {
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    const option = target.closest<HTMLButtonElement>('[data-combobox-option]');
+    if (option && optionsRoot.contains(option)) {
+      const closesPanel = mode === 'number' || closeOnSelect;
+      selectOption(option, false);
+      if (closesPanel) blurFocusedDescendant();
+      if (mode === 'options' && !closeOnSelect) search?.focus();
+    }
+  };
+
+  const commitNumberInput = (emit = true): void => {
+    if (!numberInput) return;
+    const selected = Number(getComboboxValues(root)[0]);
+    const requested = Number(numberInput.value);
+
+    if (!Number.isInteger(requested)) {
+      if (Number.isFinite(selected)) numberInput.value = String(selected);
+      return;
+    }
+    setComboboxNumberValue(root, requested, {
+      emit: emit && requested !== selected,
+    });
+  };
+
+  const handleNumberInputClick = (): void => {
+    if (!numberInput) return;
+
+    if (isOpen()) {
+      close();
+    } else {
+      open(false);
+      numberInput.select();
+    }
+  };
+
+  const handleNumberInput = (): void => {
+    if (!numberInput) return;
+    const bounds = getNumberBounds(root);
+    const allowNegative = Boolean(bounds && bounds.min < 0);
+    const sign = allowNegative && numberInput.value.startsWith('-') ? '-' : '';
+    const digits = numberInput.value.replace(/\D/g, '');
+    numberInput.value = `${sign}${digits}`;
+    const matchingOption = getOptions(root).find(
+      (option) => option.dataset.comboboxOption === numberInput.value,
+    );
+    if (matchingOption) {
+      const selected = Number(getComboboxValues(root)[0]);
+      const requested = Number(matchingOption.dataset.comboboxOption);
+      setComboboxNumberValue(root, requested, {
+        emit: requested !== selected,
+      });
+    }
+    setActiveOption(matchingOption ?? null);
+    matchingOption?.scrollIntoView({ block: 'nearest' });
+  };
+
+  const handleNumberInputChange = (): void => {
+    commitNumberInput();
+  };
+
+  const handleNumberStep = (event: MouseEvent): void => {
+    const target = event.currentTarget;
+    if (!(target instanceof HTMLButtonElement) || !numberInput) return;
+    const bounds = getNumberBounds(root);
+    if (!bounds) return;
+
+    commitNumberInput(false);
+    const current = Number(numberInput.value);
+    const direction =
+      target.dataset.comboboxNumberStep === 'decrement' ? -1 : 1;
+    setComboboxNumberValue(root, current + direction * bounds.step, {
+      emit: true,
+    });
+    if (isOpen()) {
+      const selectedOption =
+        getOptions(root).find(
+          (option) => option.getAttribute('aria-selected') === 'true',
+        ) ?? null;
+      setActiveOption(selectedOption);
+      selectedOption?.scrollIntoView({ block: 'nearest' });
+    }
+  };
+
+  const handleDocumentClick = (event: MouseEvent): void => {
+    const target = event.target;
+    if (target instanceof Node && !root.contains(target)) close();
+  };
+
+  const handleDocumentFocusin = (event: FocusEvent): void => {
+    const target = event.target;
+    if (target instanceof Node && !root.contains(target)) close();
+  };
+
+  const handleClear = (): void => {
+    resetFilter();
+    close();
+  };
+
+  if (mode === 'options' && trigger && search) {
+    control.addEventListener('click', handleOptionsControlClick);
+    trigger.addEventListener('click', handleOptionsTriggerClick);
+    trigger.addEventListener('keydown', handleOwnerKeydown);
+    search.addEventListener('input', filterOptions);
+    search.addEventListener('keydown', handleSearchKeydown);
+  }
+
+  if (mode === 'number' && numberInput) {
+    numberInput.addEventListener('click', handleNumberInputClick);
+    numberInput.addEventListener('input', handleNumberInput);
+    numberInput.addEventListener('change', handleNumberInputChange);
+    numberInput.addEventListener('keydown', handleOwnerKeydown);
+  }
+
+  const stepButtons = Array.from(
+    root.querySelectorAll<HTMLButtonElement>('[data-combobox-number-step]'),
+  );
+  for (const button of stepButtons) {
+    button.addEventListener('click', handleNumberStep);
+  }
+  optionsRoot.addEventListener('click', handleOptionClick);
+  root.addEventListener('combobox:clear', handleClear);
+
+  return () => {
+    close();
+    detachViewportListeners();
+    controlResizeObserver?.disconnect();
+    control.removeEventListener('click', handleOptionsControlClick);
+    trigger?.removeEventListener('click', handleOptionsTriggerClick);
+    trigger?.removeEventListener('keydown', handleOwnerKeydown);
+    search?.removeEventListener('input', filterOptions);
+    search?.removeEventListener('keydown', handleSearchKeydown);
+    numberInput?.removeEventListener('click', handleNumberInputClick);
+    numberInput?.removeEventListener('input', handleNumberInput);
+    numberInput?.removeEventListener('change', handleNumberInputChange);
+    numberInput?.removeEventListener('keydown', handleOwnerKeydown);
+    for (const button of stepButtons) {
+      button.removeEventListener('click', handleNumberStep);
+    }
+    optionsRoot.removeEventListener('click', handleOptionClick);
+    root.removeEventListener('combobox:clear', handleClear);
+    panel.style.removeProperty('--combobox-panel-inline-start');
+    panel.style.removeProperty('--combobox-panel-block-start');
+    panel.style.removeProperty('--combobox-panel-inline-size');
+    panel.style.removeProperty('--combobox-panel-available-block-size');
+    root.removeAttribute('data-combobox-placement');
+    root.removeAttribute(initializedAttribute);
+  };
+}