@vielzeug/refine 2.2.5 → 2.4.0

package/dist/combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.cjs","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  prop,\n  ref,\n  useEmit,\n  useField,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport {\n  createChoiceField,\n  createInteraction,\n  createListboxDropdown,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenReason,\n} from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport type { ComboboxOptionInput, ComboboxOptionItem, OreComboboxEvents, OreComboboxProps } from './combobox.types';\nimport { filterOptions, getCreatableLabel, makeCreatableValue, parseSlottedOptions } from './combobox-options';\nimport '../../feedback/chip/chip';\nimport '../input/input';\nimport componentStyles from './combobox.css?inline';\n\nexport type { OreComboboxEvents, OreComboboxProps } from './combobox.types';\n\n/**\n * A searchable select field with multiple selection, custom option creation, and large-list support.\n *\n * @element ore-combobox\n *\n * @attr {string} value - Selected value(s). Use comma-separated for multiple.\n * @attr {boolean} multiple - Enable multiple selection\n * @attr {boolean} creatable - Allow users to create custom options from search query\n * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)\n * @attr {string} placeholder - Placeholder text\n * @attr {boolean} required - Require a non-blank selection for native form validation\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n *\n * @fires input - Emitted when the selection changes.\n * @fires change - Emitted when the selection changes.\n * @fires open-change - Emitted when the dropdown state changes. detail: { open, reason }\n * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }\n *\n * @slot - Slotted combobox options and option groups\n * @cssprop --combobox-dropdown-bg - Dropdown panel background color\n * @cssprop --combobox-dropdown-border-color - Dropdown panel border color\n * @cssprop --combobox-option-hover-bg - Option background on hover\n * @cssprop --combobox-option-focus-bg - Option background when keyboard-focused\n * @cssprop --combobox-option-selected-bg - Option background when selected\n * @cssprop --combobox-option-selected-focus-bg - Option background when selected and focused\n * @cssprop --input-bg - Field background (passed through to ore-input)\n * @cssprop --input-border-color - Field border color (passed through to ore-input)\n *\n * @part wrapper - Root wrapper around the entire field\n * @part label - Label element shown inside or outside the field\n * @part field - Field container that holds the trigger input and clear button\n * @part input - Search input used to filter and select options\n * @part clear-btn - Button that clears the current selection/query\n * @part dropdown - Popup list container for options\n * @part helper-text - Helper text displayed below the field\n * @example\n * ```html\n * <ore-combobox label=\"Country\" name=\"country\">\n *   <ore-combobox-option value=\"us\">United States</ore-combobox-option>\n *   <ore-combobox-option value=\"gb\">United Kingdom</ore-combobox-option>\n *   <ore-combobox-option value=\"de\" disabled>Germany</ore-combobox-option>\n * </ore-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = 'ore-combobox' as const;\ndefine<OreComboboxProps>(COMBOBOX_TAG, {\n  formAssociated: true,\n  props: {\n    autoclose: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    creatable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    'no-filter': prop.bool(false),\n    options: prop.data<ComboboxOptionInput[]>(),\n    placeholder: prop.string('Select...'),\n    required: prop.bool(false),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreComboboxEvents>();\n    const watch = watchEffect;\n\n    const query = signal('');\n\n    // Element refs needed by the listbox dropdown.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null; // set to the ore-input host once it mounts\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    // Ref to the ore-input host; resolved when the template renders.\n    const bitInputRef = ref<HTMLElement>();\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'combobox',\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    // filteredOptions signal declared before optionList so the getItems getter\n    // captures the live signal reference rather than needing a factory indirection.\n    const filteredOptions = signal<ComboboxOptionItem[]>([]);\n\n    const optionList = createListboxDropdown<ComboboxOptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => filteredOptions.value,\n      getOptionId: (index) => `${choice.fieldId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => choice.disabled.value,\n      isItemDisabled: (option) => option.disabled,\n      onClose: (reason) => {\n        emit('open-change', { open: false, reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n\n    const { disabled: isDisabled, fieldId: comboId, selectedValues, triggerValidation } = choice;\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const { focusedIndex, isOpen, scrollFocusedIntoView, updatePosition } = optionList;\n    // ── State ────────────────────────────────────────────────────────────────\n    const isMultiple = () => Boolean(props.multiple.value);\n    const isCreatable = () => Boolean(props.creatable.value);\n    const isNoFilter = () => Boolean(props['no-filter'].value);\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose a native-like, string-valued `.value` property on the host.\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => choice.formValue.value,\n      set: (val: unknown) => {\n        const v = val as string | string[] | null | undefined;\n\n        if (Array.isArray(v)) {\n          choice.setValues(v.map((entry) => String(entry ?? '')));\n\n          return;\n        }\n\n        if (v == null || v === '') {\n          choice.clear();\n\n          return;\n        }\n\n        choice.setValues(isMultiple() ? String(v).split(',') : [String(v)]);\n      },\n    });\n\n    const hasValue = () => selectedValues.value.length > 0;\n\n    function focusLiveInput() {\n      inputEl?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = () => Boolean(props.loading.value);\n\n    function normalizeOption(option: ComboboxOptionInput): ComboboxOptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        iconEl: option.iconEl ?? null,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const optionsProp = props.options.value;\n      const base = Array.isArray(optionsProp) ? optionsProp.map(normalizeOption) : slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    const selectionController = {\n      clear: () => {\n        choice.clear();\n      },\n      remove: (key: string) => {\n        choice.removeValue(key);\n      },\n      select: (key: string) => {\n        choice.selectValue(key);\n      },\n      toggle: (key: string) => {\n        choice.toggleValue(key);\n      },\n    };\n\n    function readOptions(elements: Element[] = Array.from(el.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        query.value = match?.label ?? selectedValue.value;\n      }\n    }\n\n    // Initialize from light DOM immediately; onMounted/observer keep this in sync afterwards.\n    readOptions();\n\n    watch(() => {\n      const nextOptions = filterOptions(allOptions.value, query.value, isNoFilter());\n\n      filteredOptions.value = isMultiple()\n        ? nextOptions.filter((option) => !selectedValues.value.includes(option.value))\n        : nextOptions;\n    });\n\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable(), filteredOptions.value);\n    });\n    const inputPlaceholder = () =>\n      isMultiple() && selectedValues.value.length > 0 ? '' : props.placeholder.value || '';\n\n    function emitChange() {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectionController.remove(value);\n      emitChange();\n      triggerValidation('change');\n    }\n\n    function restoreQueryFromSelection() {\n      // Keep input text and selected value in sync whenever the popup closes.\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        isRestoringQuery = true;\n        query.value = match?.label ?? '';\n        Promise.resolve().then(() => {\n          isRestoringQuery = false;\n        });\n\n        return;\n      }\n\n      query.value = '';\n    }\n\n    watch(() => {\n      if (isOpen.value && !isMultiple() && selectedValue.value && focusedIndex.value === -1 && query.value === '') {\n        const selectedIndex = filteredOptions.value.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n    });\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function openPopup(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) {\n        lastQueryBeforeClear = query.value;\n        query.value = '';\n      }\n\n      // Pre-compute focused index BEFORE opening so the first render has it set\n      if (!isMultiple() && selectedValue.value) {\n        const freshOptions = filterOptions(allOptions.value, '', isNoFilter());\n        const selectedIndex = freshOptions.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n\n      optionList.open(reason);\n\n      if (!isMultiple() && selectedValue.value && focusedIndex.value >= 0) {\n        requestAnimationFrame(() => {\n          scrollFocusedIntoView();\n        });\n      }\n    }\n\n    function closePopup(reason: DropdownCloseReason = 'programmatic') {\n      optionList.close(reason);\n    }\n\n    const fieldPress = createInteraction({\n      disabled: isDisabled,\n      onPress: () => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      },\n    });\n\n    const enterPress = createInteraction({\n      disabled: isDisabled,\n      keys: ['Enter'],\n      onPress: (originalEvent: Event) => {\n        const opts = filteredOptions.value;\n\n        if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n          selectOption(opts[focusedIndex.value], originalEvent);\n        } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n          // Focused on the \"create\" item\n          createOption(query.value, originalEvent);\n        } else if (!isOpen.value) {\n          openPopup(true, 'keyboard');\n        }\n      },\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, _originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple()) {\n        selectionController.toggle(opt.value);\n        query.value = '';\n        emitChange();\n        triggerValidation('change');\n\n        if (props.autoclose.value) {\n          closePopup();\n        }\n\n        // Keep dropdown open in multiple mode (unless autoclose is true)\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        emitChange();\n        triggerValidation('change');\n        closePopup();\n        focusLiveInput();\n      }\n    }\n    function resolveOptionFromElement(optionEl: HTMLElement): ComboboxOptionItem | null {\n      const indexAttr = optionEl.getAttribute('data-option-index');\n      const index = indexAttr ? Number(indexAttr) : -1;\n\n      if (Number.isInteger(index) && index >= 0 && index < filteredOptions.value.length) {\n        return filteredOptions.value[index] ?? null;\n      }\n\n      const valueAttr = optionEl.getAttribute('data-option-value');\n\n      if (valueAttr) {\n        const byValue = filteredOptions.value.find((option) => option.value === valueAttr);\n\n        if (byValue) return byValue;\n      }\n\n      const labelText = optionEl.querySelector('span')?.textContent?.trim() ?? optionEl.textContent?.trim() ?? '';\n\n      if (!labelText) return null;\n\n      return filteredOptions.value.find((option) => option.label === labelText || option.value === labelText) ?? null;\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      emitChange();\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: InputEvent) {\n      const target = e.target as HTMLInputElement;\n      const newValue = target.value;\n\n      // Skip all input processing if we're in the middle of restoring the query\n      // This prevents the clearing logic from firing during close/restore\n      if (isRestoringQuery) {\n        return;\n      }\n\n      if (newValue === query.value) return;\n\n      query.value = newValue;\n\n      if (!isMultiple()) {\n        const currentItem = selectedValues.value[0];\n        const currentLabel = currentItem\n          ? (allOptions.value.find((o) => o.value === currentItem)?.label ?? currentItem)\n          : '';\n\n        // Preserve the current selection while typing. Selection should only\n        // change when a new option is committed or when the user explicitly clears.\n        const isJustOpening = newValue === '' && lastQueryBeforeClear === currentLabel;\n\n        if (isJustOpening) {\n          lastQueryBeforeClear = null;\n        }\n      }\n\n      optionList.navigate('first');\n\n      if (!isOpen.value) openPopup(false, 'keyboard');\n\n      emit('search', { query: target.value });\n    }\n    function handleFocus() {\n      // Intentionally no-op: open only on explicit click or keyboard.\n      // Opening on every focus surprises users tabbing through a form.\n    }\n\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n            optionList.navigate('first');\n          } else {\n            optionList.navigate('next');\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n          } else {\n            optionList.navigate('prev');\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple() && !query.value && selectedValues.value.length > 0) {\n            choice.removeValue(selectedValues.value[selectedValues.value.length - 1] ?? '');\n            emitChange();\n            triggerValidation('change');\n          }\n\n          break;\n        case 'Enter':\n          enterPress.handleKeydown(e);\n\n          break;\n        case 'Tab':\n          closePopup('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(rawQuery: string, originalEvent?: Event) {\n      const actualLabel = rawQuery.trim();\n\n      if (!actualLabel) return;\n\n      const value = makeCreatableValue(actualLabel);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label: actualLabel, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    const observeLightDomOptions = (): (() => void) => {\n      const observer = new MutationObserver(() => {\n        readOptions();\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['disabled', 'label', 'value'],\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      return () => observer.disconnect();\n    };\n\n    const stopObserving = observeLightDomOptions();\n\n    const createListboxListeners = (listEl: HTMLElement): (() => void) => {\n      const handleActivate = (event: Event) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const createRow = target.closest<HTMLElement>('.no-results-create');\n\n        if (createRow) {\n          event.preventDefault();\n          event.stopPropagation();\n          createOption(query.value, event);\n\n          return;\n        }\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option || option.disabled) return;\n\n        selectOption(option, event);\n      };\n\n      const handlePointerMove = (event: PointerEvent) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option) return;\n\n        const focusedIdx = filteredOptions.value.findIndex((candidate) => candidate.value === option.value);\n\n        if (focusedIdx >= 0) {\n          optionList.set(focusedIdx);\n        }\n      };\n\n      listEl.addEventListener('click', handleActivate);\n      listEl.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        listEl.removeEventListener('click', handleActivate);\n        listEl.removeEventListener('pointermove', handlePointerMove);\n      };\n    };\n\n    let stopListboxListeners: (() => void) | null = null;\n    let listboxListenersTarget: HTMLElement | null = null;\n\n    const setListboxElement = (el: HTMLElement | null): void => {\n      listboxEl = el;\n\n      if (listboxListenersTarget === el) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n\n      if (!el) return;\n\n      stopListboxListeners = createListboxListeners(el);\n      listboxListenersTarget = el;\n    };\n\n    const ensureListboxListeners = (): void => {\n      if (!listboxEl) return;\n\n      if (listboxListenersTarget === listboxEl && stopListboxListeners) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = createListboxListeners(listboxEl);\n      listboxListenersTarget = listboxEl;\n    };\n\n    watch(() => {\n      ensureListboxListeners();\n\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n\n        updatePosition();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root\n    // and attach all combobox-specific ARIA + event handlers imperatively.\n    // MUST be registered before the ARIA effects below so inputEl is set first\n    // when bitInputRef fires (effects run in registration order).\n    onElement(bitInputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      rawInput.setAttribute('aria-controls', `${comboId}-listbox`);\n\n      const handleInputClick = (): void => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      };\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', handleFocus);\n      rawInput.addEventListener('click', handleInputClick);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', handleFocus);\n        rawInput.removeEventListener('click', handleInputClick);\n      };\n    });\n\n    // Reactively sync combobox-specific ARIA attrs that ore-input doesn't manage.\n    // Uses bitInputRef (a signal) as the gate so the effect re-runs when the\n    // inner input mounts — inputEl is a plain variable and would not trigger re-runs.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      el.setAttribute('aria-expanded', String(isOpen.value));\n\n      if (isDisabled.value) {\n        el.setAttribute('aria-disabled', 'true');\n      } else {\n        el.removeAttribute('aria-disabled');\n      }\n\n      if (props.error.value) {\n        el.setAttribute('aria-invalid', 'true');\n        el.setAttribute('aria-errormessage', `${comboId}-error`);\n      } else {\n        el.removeAttribute('aria-invalid');\n        el.removeAttribute('aria-errormessage');\n      }\n    });\n\n    // Reactively sync the query signal into the raw input value.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      if (el.value !== query.value) el.value = query.value;\n    });\n\n    onCleanup(() => {\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <slot></slot>\n      <ore-input\n        class=\"trigger\"\n        ref=${bitInputRef}\n        label=\"${() => props.label.value ?? ''}\"\n        placeholder=\"${inputPlaceholder}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        color=\"${inputColor}\"\n        size=\"${inputSize}\"\n        variant=\"${inputVariant}\"\n        rounded=\"${inputRounded}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${isDisabled}\"\n        ?required=\"${() => false}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?success=\"${() => props.success.value}\"\n        name=\"${() => props.name.value ?? ''}\"\n        @click=\"${(e: MouseEvent) => {\n          fieldPress.handleClick(e);\n        }}\"\n        part=\"wrapper\">\n        <div slot=\"prefix\" class=\"chips-row\">\n          <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n          <span class=\"chips-list\">\n            ${() =>\n              (isMultiple() ? selectedValues.value : []).map(\n                (value) => html`\n                  <ore-chip\n                    value=${value}\n                    label=${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    color=\"${props.color}\"\n                    @remove=${removeChip}>\n                    ${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span slot=\"suffix\" class=\"combobox-suffix\" aria-hidden=\"true\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=${() => !hasValue()}\n            @click=\"${clearValue}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <span class=\"combobox-suffix-end\">\n            <span class=\"loader\"></span>\n            <span class=\"chevron\">\n              <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n            </span>\n          </span>\n        </span>\n      </ore-input>\n      <span\n        class=\"sr-only\"\n        id=\"${() => `${comboId}-error`}\"\n        role=\"alert\"\n        aria-live=\"assertive\"\n        ?hidden=\"${() => !props.error.value}\">\n        ${() => props.error.value ?? ''}\n      </span>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${comboId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(el: HTMLElement | null) => {\n          dropdownEl = el;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${comboId}-listbox`}\"\n          style=\"${() =>\n            isOpen.value && filteredOptions.value.length > 0 ? `height:${filteredOptions.value.length * 36}px;` : ''}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"\n          ref=${(el: HTMLElement | null) => {\n            setListboxElement(el);\n          }}>\n          ${() => {\n            if (!isOpen.value) return '';\n\n            if (isLoading()) {\n              return html`\n                <div class=\"dropdown-loading\">Loading...</div>\n              `;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`\n                  <button type=\"button\" class=\"no-results-create\" ?data-focused=${() => focusedIndex.value === -1}>\n                    ${creatableLabel.value}\n                  </button>\n                `;\n              }\n\n              return html`\n                <div class=\"no-results\" role=\"presentation\">No results found</div>\n              `;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`\n                <div\n                  class=\"option\"\n                  role=\"option\"\n                  id=\"${`${comboId}-opt-${index}`}\"\n                  data-option-index=\"${index}\"\n                  data-option-value=\"${option.value}\"\n                  aria-selected=\"${() =>\n                    String(\n                      isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value,\n                    )}\"\n                  aria-disabled=\"${String(option.disabled)}\"\n                  style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * 36}px);`}\"\n                  ?data-focused=${() => focusedIndex.value === index}\n                  ?data-selected=${() =>\n                    isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value}\n                  ?data-disabled=${option.disabled}>\n                  <span>${option.label}</span>\n                  <span class=\"option-check\" aria-hidden=\"true\">\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                  </span>\n                </div>\n              `;\n            });\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin, componentStyles],\n}) as unknown as AddEventListeners<OreComboboxEvents>;\n"],"mappings":"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"}
+{"version":3,"file":"combobox.cjs","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  bind,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  onElement,\n  prop,\n  ref,\n  useEmit,\n  useField,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport {\n  createChoiceField,\n  createInteraction,\n  createListboxDropdown,\n  type DropdownCloseReason,\n  lifecycleSignal,\n  type OverlayOpenReason,\n} from '../../core';\nimport { colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin } from '../../styles';\nimport type { AddEventListeners, ComponentSize, RoundedSize, ThemeColor } from '../../types';\nimport { dispatchNativeFieldEvent } from '../shared/native-field-event';\nimport type { ComboboxOptionInput, ComboboxOptionItem, OreComboboxEvents, OreComboboxProps } from './combobox.types';\nimport { filterOptions, getCreatableLabel, makeCreatableValue, parseSlottedOptions } from './combobox-options';\nimport '../../feedback/chip/chip';\nimport '../input/input';\nimport componentStyles from './combobox.css?inline';\n\nexport type { OreComboboxEvents, OreComboboxProps } from './combobox.types';\n\n/**\n * A searchable select field with multiple selection, custom option creation, and large-list support.\n *\n * @element ore-combobox\n *\n * @attr {string} value - Selected value(s). Use comma-separated for multiple.\n * @attr {boolean} multiple - Enable multiple selection\n * @attr {boolean} creatable - Allow users to create custom options from search query\n * @attr {boolean} no-filter - Disable client-side filtering (useful for server-side search)\n * @attr {boolean} hide-label - Hide the visible label while retaining its accessible name\n * @attr {string} placeholder - Placeholder text\n * @attr {boolean} required - Require a non-blank selection for native form validation\n * @attr {boolean} success - Show an inline success check icon (suppressed while `error` is set)\n *\n * @fires input - Emitted when the selection changes.\n * @fires change - Emitted when the selection changes.\n * @fires open-change - Emitted when the dropdown state changes. detail: { open, reason }\n * @fires {CustomEvent} search - Emitted when user types. detail: { query: string }\n *\n * @slot - Slotted combobox options and option groups\n * @cssprop --combobox-dropdown-bg - Dropdown panel background color\n * @cssprop --combobox-dropdown-border-color - Dropdown panel border color\n * @cssprop --combobox-option-hover-bg - Option background on hover\n * @cssprop --combobox-option-focus-bg - Option background when keyboard-focused\n * @cssprop --combobox-option-selected-bg - Option background when selected\n * @cssprop --combobox-option-selected-focus-bg - Option background when selected and focused\n * @cssprop --input-bg - Field background (passed through to ore-input)\n * @cssprop --input-border-color - Field border color (passed through to ore-input)\n *\n * @part wrapper - Root wrapper around the entire field\n * @part label - Label element shown inside or outside the field\n * @part field - Field container that holds the trigger input and clear button\n * @part input - Search input used to filter and select options\n * @part clear-btn - Button that clears the current selection/query\n * @part dropdown - Popup list container for options\n * @part helper-text - Helper text displayed below the field\n * @example\n * ```html\n * <ore-combobox label=\"Country\" name=\"country\">\n *   <ore-combobox-option value=\"us\">United States</ore-combobox-option>\n *   <ore-combobox-option value=\"gb\">United Kingdom</ore-combobox-option>\n *   <ore-combobox-option value=\"de\" disabled>Germany</ore-combobox-option>\n * </ore-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = 'ore-combobox' as const;\ndefine<OreComboboxProps>(COMBOBOX_TAG, {\n  formAssociated: true,\n  props: {\n    autoclose: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    creatable: prop.bool(false),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    fullwidth: prop.bool(false),\n    helper: prop.string(),\n    'hide-label': prop.bool(false),\n    label: prop.string(),\n    'label-placement': prop.oneOf(['inset', 'outside'] as const, 'inset'),\n    loading: prop.bool(false),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    'no-filter': prop.bool(false),\n    options: prop.data<ComboboxOptionInput[]>(),\n    placeholder: prop.string('Select...'),\n    required: prop.bool(false),\n    rounded: prop.string<RoundedSize>(),\n    size: prop.string<ComponentSize>(),\n    success: prop.bool(false),\n    value: prop.string(),\n    variant: prop.string<'flat' | 'solid' | 'bordered' | 'outline' | 'ghost'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreComboboxEvents>();\n    const watch = watchEffect;\n\n    const query = signal('');\n\n    // Element refs needed by the listbox dropdown.\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null; // set to the ore-input host once it mounts\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    // Ref to the ore-input host; resolved when the template renders.\n    const bitInputRef = ref<HTMLElement>();\n\n    const abortSignal = lifecycleSignal(onCleanup);\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      multiple: props.multiple,\n      prefix: 'combobox',\n      required: props.required,\n      signal: abortSignal,\n      value: props.value,\n    });\n\n    // filteredOptions signal declared before optionList so the getItems getter\n    // captures the live signal reference rather than needing a factory indirection.\n    const filteredOptions = signal<ComboboxOptionItem[]>([]);\n\n    const optionList = createListboxDropdown<ComboboxOptionItem>({\n      getBoundary: () => el,\n      getFocusedOptionElement: () => dropdownEl?.querySelector<HTMLElement>('[data-focused]') ?? null,\n      getItems: () => filteredOptions.value,\n      getOptionId: (index) => `${choice.fieldId}-opt-${index}`,\n      getPanel: () => dropdownEl,\n      getReference: () => fieldEl,\n      getTrigger: () => inputEl,\n      isDisabled: () => choice.disabled.value,\n      isItemDisabled: (option) => option.disabled,\n      onClose: (reason) => {\n        emit('open-change', { open: false, reason });\n\n        if (!abortSignal.aborted) restoreQueryFromSelection();\n\n        choice.triggerValidation('blur');\n      },\n      onOpen: (reason) => emit('open-change', { open: true, reason }),\n      restoreFocus: false,\n      signal: abortSignal,\n    });\n\n    const { disabled: isDisabled, fieldId: comboId, selectedValues, triggerValidation } = choice;\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const { focusedIndex, isOpen, scrollFocusedIntoView, updatePosition } = optionList;\n    // ── State ────────────────────────────────────────────────────────────────\n    const isMultiple = () => Boolean(props.multiple.value);\n    const isCreatable = () => Boolean(props.creatable.value);\n    const isNoFilter = () => Boolean(props['no-filter'].value);\n\n    bind({\n      attr: {\n        open: () => (isOpen.value ? true : undefined),\n        size: props.size,\n        variant: props.variant,\n      },\n    });\n\n    let lastQueryBeforeClear: string | null = null;\n    let isRestoringQuery = false;\n\n    const selectedValue = computed(() => selectedValues.value[0] ?? '');\n\n    // Expose a native-like, string-valued `.value` property on the host.\n    Object.defineProperty(el, 'value', {\n      configurable: true,\n      get: () => choice.formValue.value,\n      set: (val: unknown) => {\n        const v = val as string | string[] | null | undefined;\n\n        if (Array.isArray(v)) {\n          choice.setValues(v.map((entry) => String(entry ?? '')));\n\n          return;\n        }\n\n        if (v == null || v === '') {\n          choice.clear();\n\n          return;\n        }\n\n        choice.setValues(isMultiple() ? String(v).split(',') : [String(v)]);\n      },\n    });\n\n    const hasValue = () => selectedValues.value.length > 0;\n\n    function focusLiveInput() {\n      inputEl?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = () => Boolean(props.loading.value);\n\n    function normalizeOption(option: ComboboxOptionInput): ComboboxOptionItem {\n      return {\n        disabled: Boolean(option.disabled),\n        disabledReason: option.disabledReason,\n        iconEl: option.iconEl ?? null,\n        label: option.label ?? option.value,\n        value: option.value,\n      };\n    }\n\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const optionsProp = props.options.value;\n      const base = Array.isArray(optionsProp) ? optionsProp.map(normalizeOption) : slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    const selectionController = {\n      clear: () => {\n        choice.clear();\n      },\n      remove: (key: string) => {\n        choice.removeValue(key);\n      },\n      select: (key: string) => {\n        choice.selectValue(key);\n      },\n      toggle: (key: string) => {\n        choice.toggleValue(key);\n      },\n    };\n\n    function readOptions(elements: Element[] = Array.from(el.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        query.value = match?.label ?? selectedValue.value;\n      }\n    }\n\n    // Initialize from light DOM immediately; onMounted/observer keep this in sync afterwards.\n    readOptions();\n\n    watch(() => {\n      const nextOptions = filterOptions(allOptions.value, query.value, isNoFilter());\n\n      filteredOptions.value = isMultiple()\n        ? nextOptions.filter((option) => !selectedValues.value.includes(option.value))\n        : nextOptions;\n    });\n\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable(), filteredOptions.value);\n    });\n    const inputPlaceholder = () =>\n      isMultiple() && selectedValues.value.length > 0 ? '' : props.placeholder.value || '';\n\n    function emitChange() {\n      dispatchNativeFieldEvent(el, 'input');\n      dispatchNativeFieldEvent(el, 'change');\n    }\n\n    function removeChip(event: Event): void {\n      event.stopPropagation();\n\n      const value = (event as CustomEvent<{ value?: string }>).detail?.value;\n\n      if (value === undefined) return;\n\n      selectionController.remove(value);\n      emitChange();\n      triggerValidation('change');\n    }\n\n    function restoreQueryFromSelection() {\n      // Keep input text and selected value in sync whenever the popup closes.\n      if (!isMultiple()) {\n        const match = allOptions.value.find((option) => option.value === selectedValue.value);\n\n        isRestoringQuery = true;\n        query.value = match?.label ?? '';\n        Promise.resolve().then(() => {\n          isRestoringQuery = false;\n        });\n\n        return;\n      }\n\n      query.value = '';\n    }\n\n    watch(() => {\n      if (isOpen.value && !isMultiple() && selectedValue.value && focusedIndex.value === -1 && query.value === '') {\n        const selectedIndex = filteredOptions.value.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n    });\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function openPopup(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) {\n        lastQueryBeforeClear = query.value;\n        query.value = '';\n      }\n\n      // Pre-compute focused index BEFORE opening so the first render has it set\n      if (!isMultiple() && selectedValue.value) {\n        const freshOptions = filterOptions(allOptions.value, '', isNoFilter());\n        const selectedIndex = freshOptions.findIndex((option) => option.value === selectedValue.value);\n\n        if (selectedIndex >= 0) {\n          optionList.set(selectedIndex);\n        }\n      }\n\n      optionList.open(reason);\n\n      if (!isMultiple() && selectedValue.value && focusedIndex.value >= 0) {\n        requestAnimationFrame(() => {\n          scrollFocusedIntoView();\n        });\n      }\n    }\n\n    function closePopup(reason: DropdownCloseReason = 'programmatic') {\n      optionList.close(reason);\n    }\n\n    const fieldPress = createInteraction({\n      disabled: isDisabled,\n      onPress: () => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      },\n    });\n\n    const enterPress = createInteraction({\n      disabled: isDisabled,\n      keys: ['Enter'],\n      onPress: (originalEvent: Event) => {\n        const opts = filteredOptions.value;\n\n        if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n          selectOption(opts[focusedIndex.value], originalEvent);\n        } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n          // Focused on the \"create\" item\n          createOption(query.value, originalEvent);\n        } else if (!isOpen.value) {\n          openPopup(true, 'keyboard');\n        }\n      },\n    });\n\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, _originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple()) {\n        selectionController.toggle(opt.value);\n        query.value = '';\n        emitChange();\n        triggerValidation('change');\n\n        if (props.autoclose.value) {\n          closePopup();\n        }\n\n        // Keep dropdown open in multiple mode (unless autoclose is true)\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        emitChange();\n        triggerValidation('change');\n        closePopup();\n        focusLiveInput();\n      }\n    }\n    function resolveOptionFromElement(optionEl: HTMLElement): ComboboxOptionItem | null {\n      const indexAttr = optionEl.getAttribute('data-option-index');\n      const index = indexAttr ? Number(indexAttr) : -1;\n\n      if (Number.isInteger(index) && index >= 0 && index < filteredOptions.value.length) {\n        return filteredOptions.value[index] ?? null;\n      }\n\n      const valueAttr = optionEl.getAttribute('data-option-value');\n\n      if (valueAttr) {\n        const byValue = filteredOptions.value.find((option) => option.value === valueAttr);\n\n        if (byValue) return byValue;\n      }\n\n      const labelText = optionEl.querySelector('span')?.textContent?.trim() ?? optionEl.textContent?.trim() ?? '';\n\n      if (!labelText) return null;\n\n      return filteredOptions.value.find((option) => option.label === labelText || option.value === labelText) ?? null;\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      emitChange();\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: InputEvent) {\n      const target = e.target as HTMLInputElement;\n      const newValue = target.value;\n\n      // Skip all input processing if we're in the middle of restoring the query\n      // This prevents the clearing logic from firing during close/restore\n      if (isRestoringQuery) {\n        return;\n      }\n\n      if (newValue === query.value) return;\n\n      query.value = newValue;\n\n      if (!isMultiple()) {\n        const currentItem = selectedValues.value[0];\n        const currentLabel = currentItem\n          ? (allOptions.value.find((o) => o.value === currentItem)?.label ?? currentItem)\n          : '';\n\n        // Preserve the current selection while typing. Selection should only\n        // change when a new option is committed or when the user explicitly clears.\n        const isJustOpening = newValue === '' && lastQueryBeforeClear === currentLabel;\n\n        if (isJustOpening) {\n          lastQueryBeforeClear = null;\n        }\n      }\n\n      optionList.navigate('first');\n\n      if (!isOpen.value) openPopup(false, 'keyboard');\n\n      emit('search', { query: target.value });\n    }\n    function handleFocus() {\n      // Intentionally no-op: open only on explicit click or keyboard.\n      // Opening on every focus surprises users tabbing through a form.\n    }\n\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      if (optionList.handleKeydown(e)) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n            optionList.navigate('first');\n          } else {\n            optionList.navigate('next');\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            openPopup(true, 'keyboard');\n          } else {\n            optionList.navigate('prev');\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple() && !query.value && selectedValues.value.length > 0) {\n            choice.removeValue(selectedValues.value[selectedValues.value.length - 1] ?? '');\n            emitChange();\n            triggerValidation('change');\n          }\n\n          break;\n        case 'Enter':\n          enterPress.handleKeydown(e);\n\n          break;\n        case 'Tab':\n          closePopup('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(rawQuery: string, originalEvent?: Event) {\n      const actualLabel = rawQuery.trim();\n\n      if (!actualLabel) return;\n\n      const value = makeCreatableValue(actualLabel);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label: actualLabel, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n\n    const observeLightDomOptions = (): (() => void) => {\n      const observer = new MutationObserver(() => {\n        readOptions();\n      });\n\n      observer.observe(el, {\n        attributeFilter: ['disabled', 'disabled-reason', 'label', 'value'],\n        attributes: true,\n        childList: true,\n        subtree: true,\n      });\n\n      return () => observer.disconnect();\n    };\n\n    const stopObserving = observeLightDomOptions();\n\n    const createListboxListeners = (listEl: HTMLElement): (() => void) => {\n      const handleActivate = (event: Event) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const createRow = target.closest<HTMLElement>('.no-results-create');\n\n        if (createRow) {\n          event.preventDefault();\n          event.stopPropagation();\n          createOption(query.value, event);\n\n          return;\n        }\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option || option.disabled) return;\n\n        selectOption(option, event);\n      };\n\n      const handlePointerMove = (event: PointerEvent) => {\n        const target = event.target;\n\n        if (!(target instanceof Element)) return;\n\n        const optionEl = target.closest<HTMLElement>('.option');\n\n        if (!optionEl) return;\n\n        const option = resolveOptionFromElement(optionEl);\n\n        if (!option) return;\n\n        const focusedIdx = filteredOptions.value.findIndex((candidate) => candidate.value === option.value);\n\n        if (focusedIdx >= 0) {\n          optionList.set(focusedIdx);\n        }\n      };\n\n      listEl.addEventListener('click', handleActivate);\n      listEl.addEventListener('pointermove', handlePointerMove);\n\n      return () => {\n        listEl.removeEventListener('click', handleActivate);\n        listEl.removeEventListener('pointermove', handlePointerMove);\n      };\n    };\n\n    let stopListboxListeners: (() => void) | null = null;\n    let listboxListenersTarget: HTMLElement | null = null;\n\n    const setListboxElement = (el: HTMLElement | null): void => {\n      listboxEl = el;\n\n      if (listboxListenersTarget === el) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n\n      if (!el) return;\n\n      stopListboxListeners = createListboxListeners(el);\n      listboxListenersTarget = el;\n    };\n\n    const ensureListboxListeners = (): void => {\n      if (!listboxEl) return;\n\n      if (listboxListenersTarget === listboxEl && stopListboxListeners) return;\n\n      stopListboxListeners?.();\n      stopListboxListeners = createListboxListeners(listboxEl);\n      listboxListenersTarget = listboxEl;\n    };\n\n    watch(() => {\n      ensureListboxListeners();\n\n      if (isOpen.value) {\n        if (dropdownEl && 'showPopover' in dropdownEl && !dropdownEl.matches(':popover-open')) dropdownEl.showPopover();\n\n        updatePosition();\n      } else {\n        if (dropdownEl && 'hidePopover' in dropdownEl && dropdownEl.matches(':popover-open')) dropdownEl.hidePopover();\n      }\n    });\n\n    // Once ore-input is in the DOM, grab its inner <input> from its shadow root\n    // and attach all combobox-specific ARIA + event handlers imperatively.\n    // MUST be registered before the ARIA effects below so inputEl is set first\n    // when bitInputRef fires (effects run in registration order).\n    onElement(bitInputRef, (bitInputEl) => {\n      fieldEl = bitInputEl;\n\n      const rawInput = bitInputEl.shadowRoot?.querySelector<HTMLInputElement>('input') ?? null;\n\n      if (!rawInput) return;\n\n      inputEl = rawInput;\n\n      rawInput.setAttribute('role', 'combobox');\n      rawInput.setAttribute('autocomplete', 'off');\n      rawInput.setAttribute('aria-autocomplete', 'list');\n      rawInput.setAttribute('aria-haspopup', 'listbox');\n      rawInput.setAttribute('spellcheck', 'false');\n      rawInput.setAttribute('aria-controls', `${comboId}-listbox`);\n\n      const handleInputClick = (): void => {\n        if (!isOpen.value) openPopup(true, 'click');\n\n        focusLiveInput();\n      };\n\n      rawInput.addEventListener('input', handleInput as EventListener);\n      rawInput.addEventListener('keydown', handleKeydown as EventListener);\n      rawInput.addEventListener('focus', handleFocus);\n      rawInput.addEventListener('click', handleInputClick);\n\n      return () => {\n        inputEl = null;\n        fieldEl = null;\n        rawInput.removeEventListener('input', handleInput as EventListener);\n        rawInput.removeEventListener('keydown', handleKeydown as EventListener);\n        rawInput.removeEventListener('focus', handleFocus);\n        rawInput.removeEventListener('click', handleInputClick);\n      };\n    });\n\n    // Reactively sync combobox-specific ARIA attrs that ore-input doesn't manage.\n    // Uses bitInputRef (a signal) as the gate so the effect re-runs when the\n    // inner input mounts — inputEl is a plain variable and would not trigger re-runs.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      el.setAttribute('aria-expanded', String(isOpen.value));\n\n      if (isDisabled.value) {\n        el.setAttribute('aria-disabled', 'true');\n      } else {\n        el.removeAttribute('aria-disabled');\n      }\n\n      if (props.error.value) {\n        el.setAttribute('aria-invalid', 'true');\n        el.setAttribute('aria-errormessage', `${comboId}-error`);\n      } else {\n        el.removeAttribute('aria-invalid');\n        el.removeAttribute('aria-errormessage');\n      }\n    });\n\n    // Reactively sync the query signal into the raw input value.\n    watch(() => {\n      if (!bitInputRef.value) return;\n\n      const el = inputEl;\n\n      if (!el) return;\n\n      if (el.value !== query.value) el.value = query.value;\n    });\n\n    onCleanup(() => {\n      stopListboxListeners?.();\n      stopListboxListeners = null;\n      listboxListenersTarget = null;\n      stopObserving();\n    });\n\n    const hideLabel = () => props['hide-label'].value;\n    const inputAriaLabel = () => (hideLabel() ? (props.label.value ?? '') : null);\n    const inputLabel = () => (hideLabel() ? '' : (props.label.value ?? ''));\n    const inputColor = () => props.color?.value ?? undefined;\n    const inputSize = () => props.size?.value ?? undefined;\n    const inputVariant = () => props.variant?.value ?? undefined;\n    const inputRounded = () => props.rounded?.value ?? undefined;\n    const inputFullwidth = () => (props.fullwidth.value ? true : undefined);\n\n    return html`\n      <slot></slot>\n      <ore-input\n        class=\"trigger\"\n        ref=${bitInputRef}\n        aria-label=\"${inputAriaLabel}\"\n        label=\"${inputLabel}\"\n        placeholder=\"${inputPlaceholder}\"\n        label-placement=\"${() => props['label-placement'].value ?? 'inset'}\"\n        color=\"${inputColor}\"\n        size=\"${inputSize}\"\n        variant=\"${inputVariant}\"\n        rounded=\"${inputRounded}\"\n        helper=\"${() => props.helper.value ?? ''}\"\n        error=\"${() => props.error.value ?? ''}\"\n        ?disabled=\"${isDisabled}\"\n        ?required=\"${() => false}\"\n        ?fullwidth=\"${inputFullwidth}\"\n        ?success=\"${() => props.success.value}\"\n        name=\"${() => props.name.value ?? ''}\"\n        @click=\"${(e: MouseEvent) => {\n          fieldPress.handleClick(e);\n        }}\"\n        part=\"wrapper\">\n        <div slot=\"prefix\" class=\"chips-row\">\n          <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n          <span class=\"chips-list\">\n            ${() =>\n              (isMultiple() ? selectedValues.value : []).map(\n                (value) => html`\n                  <ore-chip\n                    value=${value}\n                    label=${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                    mode=\"removable\"\n                    variant=\"flat\"\n                    size=\"sm\"\n                    color=\"${props.color}\"\n                    @remove=${removeChip}>\n                    ${allOptions.value.find((option) => option.value === value)?.label ?? value}\n                  </ore-chip>\n                `,\n              )}\n          </span>\n        </div>\n        <span slot=\"suffix\" class=\"combobox-suffix\" aria-hidden=\"true\">\n          <button\n            class=\"clear-btn\"\n            part=\"clear-btn\"\n            type=\"button\"\n            aria-label=\"Clear\"\n            tabindex=\"-1\"\n            ?hidden=${() => !hasValue()}\n            @click=\"${clearValue}\">\n            <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n          </button>\n          <span class=\"combobox-suffix-end\">\n            <span class=\"loader\"></span>\n            <span class=\"chevron\">\n              <ore-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n            </span>\n          </span>\n        </span>\n      </ore-input>\n      <span\n        class=\"sr-only\"\n        id=\"${() => `${comboId}-error`}\"\n        role=\"alert\"\n        aria-live=\"assertive\"\n        ?hidden=\"${() => !props.error.value}\">\n        ${() => props.error.value ?? ''}\n      </span>\n      <div\n        class=\"dropdown\"\n        part=\"dropdown\"\n        id=\"${() => `${comboId}-dropdown`}\"\n        popover=\"manual\"\n        ?data-open=${() => isOpen.value}\n        ref=${(el: HTMLElement | null) => {\n          dropdownEl = el;\n        }}>\n        <div\n          role=\"listbox\"\n          id=\"${() => `${comboId}-listbox`}\"\n          style=\"${() =>\n            isOpen.value && filteredOptions.value.length > 0 ? `height:${filteredOptions.value.length * 36}px;` : ''}\"\n          aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"\n          ref=${(el: HTMLElement | null) => {\n            setListboxElement(el);\n          }}>\n          ${() => {\n            if (!isOpen.value) return '';\n\n            if (isLoading()) {\n              return html`\n                <div class=\"dropdown-loading\">Loading...</div>\n              `;\n            }\n\n            if (filteredOptions.value.length === 0) {\n              if (creatableLabel.value) {\n                return html`\n                  <button type=\"button\" class=\"no-results-create\" ?data-focused=${() => focusedIndex.value === -1}>\n                    ${creatableLabel.value}\n                  </button>\n                `;\n              }\n\n              return html`\n                <div class=\"no-results\" role=\"presentation\">No results found</div>\n              `;\n            }\n\n            return filteredOptions.value.map((option, index) => {\n              return html`\n                <div\n                  class=\"option\"\n                  role=\"option\"\n                  id=\"${`${comboId}-opt-${index}`}\"\n                  data-option-index=\"${index}\"\n                  data-option-value=\"${option.value}\"\n                  aria-selected=\"${() =>\n                    String(\n                      isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value,\n                    )}\"\n                  aria-disabled=\"${String(option.disabled)}\"\n                  style=\"${`position:absolute;top:0;left:0;right:0;transform:translateY(${index * 36}px);`}\"\n                  ?data-focused=${() => focusedIndex.value === index}\n                  ?data-selected=${() =>\n                    isMultiple() ? selectedValues.value.includes(option.value) : selectedValue.value === option.value}\n                  ?data-disabled=${option.disabled}>\n                  <span>${option.label}</span>\n                  ${\n                    option.disabled && option.disabledReason\n                      ? html`<small class=\"disabled-reason\" title=\"${option.disabledReason}\">${option.disabledReason}</small>`\n                      : html``\n                  }\n                  <span class=\"option-check\" aria-hidden=\"true\">\n                    <ore-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                  </span>\n                </div>\n              `;\n            });\n          }}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [colorThemeMixin, reducedMotionMixin, roundedVariantMixin, srOnlyMixin, componentStyles],\n}) as unknown as AddEventListeners<OreComboboxEvents>;\n"],"mappings":"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"}

package/dist/combobox.js

@@ -22,6 +22,7 @@ c(m, {
 		error: d.string(),
 		fullwidth: d.bool(!1),
 		helper: d.string(),
+		"hide-label": d.bool(!1),
 		label: d.string(),
 		"label-placement": d.oneOf(["inset", "outside"], "inset"),
 		loading: d.bool(!1),
@@ -108,18 +109,19 @@ c(m, {
 			c?.focus();
 		}
 		let P = p([]), F = p([]), ge = () => !!e.loading.value;
-		function I(e) {
+		function _e(e) {
 			return {
 				disabled: !!e.disabled,
+				disabledReason: e.disabledReason,
 				iconEl: e.iconEl ?? null,
 				label: e.label ?? e.value,
 				value: e.value
 			};
 		}
-		let L = f(() => {
-			let t = e.options.value, n = Array.isArray(t) ? t.map(I) : P.value;
+		let I = f(() => {
+			let t = e.options.value, n = Array.isArray(t) ? t.map(_e) : P.value;
 			return F.value.length === 0 ? n : [...n, ...F.value];
-		}), R = {
+		}), L = {
 			clear: () => {
 				v.clear();
 			},
@@ -133,28 +135,28 @@ c(m, {
 				v.toggleValue(e);
 			}
 		};
-		function z(e = Array.from(t.children)) {
+		function R(e = Array.from(t.children)) {
 			if (P.value = ae(e), !O()) {
-				let e = L.value.find((e) => e.value === M.value);
+				let e = I.value.find((e) => e.value === M.value);
 				s.value = e?.label ?? M.value;
 			}
 		}
-		z(), r(() => {
-			let e = o(L.value, s.value, k());
+		R(), r(() => {
+			let e = o(I.value, s.value, k());
 			y.value = O() ? e.filter((e) => !C.value.includes(e.value)) : e;
 		});
-		let B = f(() => re(s.value, me(), y.value)), _e = () => O() && C.value.length > 0 ? "" : e.placeholder.value || "";
-		function V() {
+		let z = f(() => re(s.value, me(), y.value)), ve = () => O() && C.value.length > 0 ? "" : e.placeholder.value || "";
+		function B() {
 			a(t, "input"), a(t, "change");
 		}
-		function ve(e) {
+		function V(e) {
 			e.stopPropagation();
 			let t = e.detail?.value;
-			t !== void 0 && (R.remove(t), V(), w("change"));
+			t !== void 0 && (L.remove(t), B(), w("change"));
 		}
 		function ye() {
 			if (!O()) {
-				let e = L.value.find((e) => e.value === M.value);
+				let e = I.value.find((e) => e.value === M.value);
 				j = !0, s.value = e?.label ?? "", Promise.resolve().then(() => {
 					j = !1;
 				});
@@ -170,7 +172,7 @@ c(m, {
 		});
 		function H(e = !0, t = "programmatic") {
 			if (e && (A = s.value, s.value = ""), !O() && M.value) {
-				let e = o(L.value, "", k()).findIndex((e) => e.value === M.value);
+				let e = o(I.value, "", k()).findIndex((e) => e.value === M.value);
 				e >= 0 && b.set(e);
 			}
 			b.open(t), !O() && M.value && T.value >= 0 && requestAnimationFrame(() => {
@@ -190,11 +192,11 @@ c(m, {
 			keys: ["Enter"],
 			onPress: (e) => {
 				let t = y.value;
-				E.value && T.value >= 0 && T.value < t.length ? W(t[T.value], e) : E.value && T.value === -1 && B.value ? X(s.value, e) : E.value || H(!0, "keyboard");
+				E.value && T.value >= 0 && T.value < t.length ? W(t[T.value], e) : E.value && T.value === -1 && z.value ? Y(s.value, e) : E.value || H(!0, "keyboard");
 			}
 		});
 		function W(t, n) {
-			t.disabled || (O() ? (R.toggle(t.value), s.value = "", V(), w("change"), e.autoclose.value && U(), N(), requestAnimationFrame(() => N())) : (R.select(t.value), s.value = t.label, V(), w("change"), U(), N()));
+			t.disabled || (O() ? (L.toggle(t.value), s.value = "", B(), w("change"), e.autoclose.value && U(), N(), requestAnimationFrame(() => N())) : (L.select(t.value), s.value = t.label, B(), w("change"), U(), N()));
 		}
 		function G(e) {
 			let t = e.getAttribute("data-option-index"), n = t ? Number(t) : -1;
@@ -207,21 +209,21 @@ c(m, {
 			let i = e.querySelector("span")?.textContent?.trim() ?? e.textContent?.trim() ?? "";
 			return i ? y.value.find((e) => e.label === i || e.value === i) ?? null : null;
 		}
-		function K(e) {
-			e.stopPropagation(), R.clear(), s.value = "", V(), w("change"), N();
+		function Se(e) {
+			e.stopPropagation(), L.clear(), s.value = "", B(), w("change"), N();
 		}
-		function q(e) {
+		function K(e) {
 			let t = e.target, r = t.value;
 			if (!j && r !== s.value) {
 				if (s.value = r, !O()) {
-					let e = C.value[0], t = e ? L.value.find((t) => t.value === e)?.label ?? e : "";
+					let e = C.value[0], t = e ? I.value.find((t) => t.value === e)?.label ?? e : "";
 					r === "" && A === t && (A = null);
 				}
 				b.navigate("first"), E.value || H(!1, "keyboard"), n("search", { query: t.value });
 			}
 		}
-		function J() {}
-		function Y(e) {
+		function q() {}
+		function J(e) {
 			if (!x.value && !b.handleKeydown(e)) switch (e.key) {
 				case "ArrowDown":
 					e.preventDefault(), E.value ? b.navigate("next") : (H(!0, "keyboard"), b.navigate("first"));
@@ -230,7 +232,7 @@ c(m, {
 					e.preventDefault(), E.value ? b.navigate("prev") : H(!0, "keyboard");
 					break;
 				case "Backspace":
-					O() && !s.value && C.value.length > 0 && (v.removeValue(C.value[C.value.length - 1] ?? ""), V(), w("change"));
+					O() && !s.value && C.value.length > 0 && (v.removeValue(C.value[C.value.length - 1] ?? ""), B(), w("change"));
 					break;
 				case "Enter":
 					xe.handleKeydown(e);
@@ -238,7 +240,7 @@ c(m, {
 				case "Tab": U("programmatic");
 			}
 		}
-		function X(e, t) {
+		function Y(e, t) {
 			let n = e.trim();
 			if (!n) return;
 			let r = {
@@ -249,13 +251,14 @@ c(m, {
 			};
 			F.value = [...F.value, r], W(r, t);
 		}
-		let Se = (() => {
+		let Ce = (() => {
 			let e = new MutationObserver(() => {
-				z();
+				R();
 			});
 			return e.observe(t, {
 				attributeFilter: [
 					"disabled",
+					"disabled-reason",
 					"label",
 					"value"
 				],
@@ -263,19 +266,19 @@ c(m, {
 				childList: !0,
 				subtree: !0
 			}), () => e.disconnect();
-		})(), Z = (e) => {
+		})(), X = (e) => {
 			let t = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
 				if (t.closest(".no-results-create")) {
-					e.preventDefault(), e.stopPropagation(), X(s.value, e);
+					e.preventDefault(), e.stopPropagation(), Y(s.value, e);
 					return;
 				}
 				let n = t.closest(".option");
 				if (!n) return;
 				e.preventDefault(), e.stopPropagation();
 				let r = G(n);
-				!r || r.disabled || W(r, e);
+				r && !r.disabled && W(r, e);
 			}, n = (e) => {
 				let t = e.target;
 				if (!(t instanceof Element)) return;
@@ -289,13 +292,13 @@ c(m, {
 			return e.addEventListener("click", t), e.addEventListener("pointermove", n), () => {
 				e.removeEventListener("click", t), e.removeEventListener("pointermove", n);
 			};
-		}, Q = null, $ = null, Ce = (e) => {
-			h = e, $ !== e && (Q?.(), Q = null, $ = null, e && (Q = Z(e), $ = e));
-		}, we = () => {
-			h && ($ === h && Q || (Q?.(), Q = Z(h), $ = h));
+		}, Z = null, Q = null, we = (e) => {
+			h = e, Q !== e && (Z?.(), Z = null, Q = null, e && (Z = X(e), Q = e));
+		}, Te = () => {
+			h && (Q === h && Z || (Z?.(), Z = X(h), Q = h));
 		};
-		return r(() => {
-			we(), E.value ? (m && "showPopover" in m && !m.matches(":popover-open") && m.showPopover(), D()) : m && "hidePopover" in m && m.matches(":popover-open") && m.hidePopover();
+		r(() => {
+			Te(), E.value ? (m && "showPopover" in m && !m.matches(":popover-open") && m.showPopover(), D()) : m && "hidePopover" in m && m.matches(":popover-open") && m.hidePopover();
 		}), ce(g, (e) => {
 			d = e;
 			let t = e.shadowRoot?.querySelector("input") ?? null;
@@ -304,8 +307,8 @@ c(m, {
 			let n = () => {
 				E.value || H(!0, "click"), N();
 			};
-			return t.addEventListener("input", q), t.addEventListener("keydown", Y), t.addEventListener("focus", J), t.addEventListener("click", n), () => {
-				c = null, d = null, t.removeEventListener("input", q), t.removeEventListener("keydown", Y), t.removeEventListener("focus", J), t.removeEventListener("click", n);
+			return t.addEventListener("input", K), t.addEventListener("keydown", J), t.addEventListener("focus", q), t.addEventListener("click", n), () => {
+				c = null, d = null, t.removeEventListener("input", K), t.removeEventListener("keydown", J), t.removeEventListener("focus", q), t.removeEventListener("click", n);
 			};
 		}), r(() => {
 			if (!g.value) return;
@@ -316,14 +319,17 @@ c(m, {
 			let e = c;
 			e && e.value !== s.value && (e.value = s.value);
 		}), u(() => {
-			Q?.(), Q = null, $ = null, Se();
-		}), l`
+			Z?.(), Z = null, Q = null, Ce();
+		});
+		let $ = () => e["hide-label"].value;
+		return l`
       <slot></slot>
       <ore-input
         class="trigger"
         ref=${g}
-        label="${() => e.label.value ?? ""}"
-        placeholder="${_e}"
+        aria-label="${() => $() ? e.label.value ?? "" : null}"
+        label="${() => $() ? "" : e.label.value ?? ""}"
+        placeholder="${ve}"
         label-placement="${() => e["label-placement"].value ?? "inset"}"
         color="${() => e.color?.value ?? void 0}"
         size="${() => e.size?.value ?? void 0}"
@@ -346,13 +352,13 @@ c(m, {
             ${() => (O() ? C.value : []).map((t) => l`
                   <ore-chip
                     value=${t}
-                    label=${L.value.find((e) => e.value === t)?.label ?? t}
+                    label=${I.value.find((e) => e.value === t)?.label ?? t}
                     mode="removable"
                     variant="flat"
                     size="sm"
                     color="${e.color}"
-                    @remove=${ve}>
-                    ${L.value.find((e) => e.value === t)?.label ?? t}
+                    @remove=${V}>
+                    ${I.value.find((e) => e.value === t)?.label ?? t}
                   </ore-chip>
                 `)}
           </span>
@@ -365,7 +371,7 @@ c(m, {
             aria-label="Clear"
             tabindex="-1"
             ?hidden=${() => !he()}
-            @click="${K}">
+            @click="${Se}">
             <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
           </button>
           <span class="combobox-suffix-end">
@@ -399,13 +405,13 @@ c(m, {
           style="${() => E.value && y.value.length > 0 ? `height:${y.value.length * 36}px;` : ""}"
           aria-label="${() => e.label.value || e.placeholder.value || "Options"}"
           ref=${(e) => {
-			Ce(e);
+			we(e);
 		}}>
           ${() => E.value ? ge() ? l`
                 <div class="dropdown-loading">Loading...</div>
-              ` : y.value.length === 0 ? B.value ? l`
+              ` : y.value.length === 0 ? z.value ? l`
                   <button type="button" class="no-results-create" ?data-focused=${() => T.value === -1}>
-                    ${B.value}
+                    ${z.value}
                   </button>
                 ` : l`
                 <div class="no-results" role="presentation">No results found</div>
@@ -423,6 +429,7 @@ c(m, {
                   ?data-selected=${() => O() ? C.value.includes(e.value) : M.value === e.value}
                   ?data-disabled=${e.disabled}>
                   <span>${e.label}</span>
+                  ${e.disabled && e.disabledReason ? l`<small class="disabled-reason" title="${e.disabledReason}">${e.disabledReason}</small>` : l``}
                   <span class="option-check" aria-hidden="true">
                     <ore-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></ore-icon>
                   </span>