@vielzeug/buildit 2.0.0

package/dist/combobox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.cjs","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createFormIds,\n  css,\n  defineComponent,\n  defineField,\n  effect,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  ref,\n  signal,\n  typed,\n  watch,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  createSelectionControl,\n  type ListNavigationResult,\n  type OverlayOpenReason,\n} from '@vielzeug/craftit/labs';\n\nimport type { AddEventListeners } from '../../types';\n\nimport '../../feedback/chip/chip';\nimport { checkIconHTML, chevronDownIcon, clearIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountLabelSyncStandalone } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { computeControlledCsvState, createChoiceChangeDetail, resolveMergedAssistiveText } from '../shared/utils';\nimport { createFieldValidation } from '../shared/validation';\nimport {\n  backfillSelectionLabels,\n  filterOptions,\n  getCreatableLabel,\n  makeCreatableValue,\n  parseSlottedOptions,\n} from './combobox-options';\nimport { createComboboxVirtualizer } from './combobox-virtualizer';\nimport componentStyles from './combobox.css?inline';\nimport {\n  type BitComboboxEvents,\n  type BitComboboxProps,\n  type ComboboxOptionItem,\n  type ComboboxSelectionItem,\n} from './combobox.types';\n\nexport type { BitComboboxEvents, BitComboboxOptionProps, BitComboboxProps } from './combobox.types';\n\n// ============================================\n// Styles\n// ============================================\n\n// ============================================\n// ComboboxOption Component\n// ============================================\n\n/**\n * `bit-combobox-option` — A child element of `<bit-combobox>` that represents one option.\n *\n * @slot         - Label text for the option.\n * @slot icon    - Optional leading icon or decoration.\n */\nexport const COMBOBOX_OPTION_TAG = defineComponent({\n  setup() {\n    const optionStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: none;\n        }\n      }\n    `;\n\n    return html`<style>\n      ${optionStyles}\n    </style>`;\n  },\n  tag: 'bit-combobox-option',\n});\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * `bit-combobox` — Autocomplete/combobox text input with a filterable listbox.\n *\n * Place `<bit-combobox-option>` elements as children to define the available options.\n * Each option supports a `label` attribute (falls back to text content) and an `icon` named slot.\n *\n * @example\n * ```html\n * <bit-combobox label=\"Country\" placeholder=\"Search\\u2026\">\n *   <bit-combobox-option value=\"us\">United States</bit-combobox-option>\n *   <bit-combobox-option value=\"gb\">United Kingdom</bit-combobox-option>\n *   <bit-combobox-option value=\"de\" disabled>Germany</bit-combobox-option>\n * </bit-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = defineComponent<BitComboboxProps, BitComboboxEvents>({\n  formAssociated: true,\n  props: {\n    clearable: { default: false },\n    color: { default: undefined },\n    creatable: { default: false },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    loading: { default: false },\n    multiple: { default: false },\n    name: { default: '' },\n    'no-filter': { default: false },\n    options: typed<ComboboxOptionItem[] | undefined>(undefined, { reflect: false }),\n    placeholder: { default: '' },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const { fieldId: comboId, helperId, labelId } = createFormIds('combobox', props.name.value);\n    // Label refs\n    const labelOutsideRef = ref<HTMLLabelElement>();\n    const labelInsetRef = ref<HTMLLabelElement>();\n    const formCtx = inject(FORM_CTX, undefined);\n    // Signal for the form value\n    const formValue = signal(String(props.value.value ?? ''));\n    const fd = defineField(\n      { disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)), value: formValue },\n      {\n        onReset: () => {\n          formValue.value = '';\n          selectedValues.value = [];\n          query.value = '';\n        },\n      },\n    );\n\n    const { triggerValidation } = createFieldValidation(formCtx, fd);\n\n    // ── State ────────────────────────────────────────────────────────────────\n    const isOpen = signal(false);\n    const query = signal('');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isMultiple = computed(() => Boolean(props.multiple.value));\n    const isCreatable = computed(() => Boolean(props.creatable.value));\n    const isNoFilter = computed(() => Boolean(props['no-filter'].value));\n\n    watch(\n      isOpen,\n      (value) => {\n        host.toggleAttribute('open', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n\n    // Multi-value state: always an array; single mode uses at most one entry\n    const selectedValues = signal<ComboboxSelectionItem[]>(\n      props.value.value ? [{ label: '', value: props.value.value }] : [],\n    );\n    const focusedIndex = signal(-1);\n    const selectionController = createSelectionControl<ComboboxSelectionItem>({\n      findByKey: (value) => {\n        const existing = selectedValues.value.find((item) => item.value === value);\n\n        if (existing) return existing;\n\n        // If not found in selection, try to find in all options to get label\n        const option = allOptions.value.find((o) => o.value === value);\n\n        if (option) return { label: option.label, value: option.value };\n\n        // Fallback: key is the value\n        return { label: '', value };\n      },\n      getMode: () => (isMultiple.value ? 'multiple' : 'single'),\n      getSelected: () => selectedValues.value,\n      keyExtractor: (item) => item.value,\n      setSelected: (next) => {\n        selectedValues.value = next;\n      },\n    });\n\n    // Sync external value prop changes to selectedValues (controlled mode)\n    const syncControlledValue = (nextValue: unknown): void => {\n      const state = computeControlledCsvState(String(nextValue ?? ''));\n\n      if (state.isEmpty) {\n        selectionController.clear();\n        query.value = '';\n        formValue.value = '';\n\n        return;\n      }\n\n      if (isMultiple.value) {\n        selectedValues.value = state.values.map((value) => ({ label: '', value }));\n        formValue.value = state.formValue;\n\n        return;\n      }\n\n      // Single mode: one value\n      selectedValues.value = [{ label: '', value: state.firstValue }];\n      formValue.value = state.firstValue;\n    };\n\n    watch(props.value, (newValue) => syncControlledValue(newValue), { immediate: true });\n    watch(props.multiple, () => syncControlledValue(props.value.value));\n\n    // Convenience getter for single-select\n    const selectedValue = computed(() => selectedValues.value[0]?.value ?? '');\n    const hasValue = computed(() => selectedValues.value.length > 0);\n    const hasLabel = computed(() => !!props.label.value);\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    function getLiveInput(): HTMLInputElement | null {\n      const liveInput = host.shadowRoot?.querySelector<HTMLInputElement>('input[role=\"combobox\"]') ?? null;\n\n      if (liveInput) inputEl = liveInput;\n\n      return liveInput ?? inputEl;\n    }\n\n    function focusLiveInput() {\n      getLiveInput()?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const base = props.options.value ?? slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    function readOptions(elements: Element[] = Array.from(host.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      // Backfill labels for any already-selected values that were set before options loaded\n      if (selectedValues.value.length > 0) {\n        selectedValues.value = backfillSelectionLabels(selectedValues.value, allOptions.value);\n\n        // Also sync the query in single mode\n        if (!isMultiple.value && selectedValues.value.length === 1) {\n          query.value = selectedValues.value[0]?.label ?? '';\n        }\n      }\n    }\n\n    const filteredOptions = computed<ComboboxOptionItem[]>(() => {\n      return filterOptions(allOptions.value, query.value, isNoFilter.value);\n    });\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable.value, filteredOptions.value);\n    });\n    const assistiveText = computed(() => resolveMergedAssistiveText(props.error.value, props.helper.value));\n    const inputPlaceholder = computed(() =>\n      isMultiple.value && selectedValues.value.length > 0 ? '' : props.placeholder.value || '',\n    );\n\n    const selectedValueItems = computed(() => selectedValues.value.map((s) => s.value));\n    const selectedLabelItems = computed(() =>\n      selectedValues.value.map((selection) => {\n        if (selection.label) return selection.label;\n\n        return allOptions.value.find((option) => option.value === selection.value)?.label ?? selection.value;\n      }),\n    );\n\n    function syncMultipleFormValue() {\n      formValue.value = selectionController.serialize(',');\n    }\n\n    function emitChange(originalEvent?: Event) {\n      emit('change', createChoiceChangeDetail(selectedValueItems.value, selectedLabelItems.value, originalEvent));\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      syncMultipleFormValue();\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    // ── Positioning (shared positioner) ──────────────────────────────────────\n    const positioner = createDropdownPositioner(\n      () => fieldEl,\n      () => dropdownEl,\n    );\n\n    const listNavigation = createListNavigation<ComboboxOptionItem>({\n      getIndex: () => focusedIndex.value,\n      getItems: () => filteredOptions.value,\n      isItemDisabled: (option) => option.disabled,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n        scrollFocusedIntoView();\n      },\n    });\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => dropdownEl,\n      getTriggerElement: () => inputEl,\n      isDisabled: () => isDisabled.value,\n      isOpen: () => isOpen.value,\n      positioner: {\n        floating: () => dropdownEl,\n        reference: () => fieldEl,\n        update: () => positioner.updatePosition(),\n      },\n      restoreFocus: false,\n      setOpen: (next, _context) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const applyNavigationResult = (result: ListNavigationResult): void => {\n      if (result.reason === 'empty' || result.reason === 'no-enabled-item') {\n        focusedIndex.value = -1;\n      }\n    };\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function open(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) query.value = '';\n\n      overlay.open({ reason });\n    }\n\n    function close(reason: 'escape' | 'programmatic' | 'outside-click' | 'toggle' = 'programmatic') {\n      overlay.close({ reason, restoreFocus: false });\n\n      // In single mode restore the query to the selected label (or clear)\n      if (!isMultiple.value) {\n        const match = allOptions.value.find((o) => o.value === selectedValue.value);\n\n        query.value = match?.label ?? '';\n      } else {\n        query.value = '';\n      }\n\n      triggerValidation('blur');\n    }\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple.value) {\n        selectionController.toggle(opt.value);\n        syncMultipleFormValue();\n        query.value = '';\n        emitChange(originalEvent);\n        triggerValidation('change');\n        // Keep dropdown open in multiple mode\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        formValue.value = opt.value;\n        emitChange(originalEvent);\n        triggerValidation('change');\n        close();\n        focusLiveInput();\n      }\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      formValue.value = '';\n      emitChange(e);\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: Event) {\n      const target = e.target as HTMLInputElement;\n\n      query.value = target.value;\n\n      if (!isMultiple.value) selectionController.clear();\n\n      applyNavigationResult(listNavigation.first());\n\n      if (!isOpen.value) open(false, 'trigger');\n\n      emit('search', { query: target.value } as { query: string });\n    }\n    function handleFocus() {\n      if (!isOpen.value) open(false, 'trigger');\n    }\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const opts = filteredOptions.value;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open(true, 'trigger');\n\n            applyNavigationResult(listNavigation.first());\n          } else {\n            applyNavigationResult(listNavigation.next());\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open(true, 'trigger');\n          } else {\n            applyNavigationResult(listNavigation.prev());\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple.value && !query.value && selectedValues.value.length > 0) {\n            selectedValues.value = selectedValues.value.slice(0, -1);\n            syncMultipleFormValue();\n            emitChange(e);\n            triggerValidation('change');\n          }\n\n          break;\n        case 'End':\n          if (isOpen.value) {\n            e.preventDefault();\n            applyNavigationResult(listNavigation.last());\n          }\n\n          break;\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n            selectOption(opts[focusedIndex.value], e);\n          } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n            // Focused on the \"create\" item\n            createOption(creatableLabel.value, e);\n          } else if (!isOpen.value) {\n            open();\n          }\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            close('escape');\n          }\n\n          break;\n        case 'Home':\n          if (isOpen.value) {\n            e.preventDefault();\n            applyNavigationResult(listNavigation.first());\n          }\n\n          break;\n        case 'Tab':\n          close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n    function scrollFocusedIntoView() {\n      if (focusedIndex.value >= 0) {\n        domVirtualList.scrollToIndex(focusedIndex.value, { align: 'auto' });\n\n        return;\n      }\n\n      if (!listboxEl) return;\n\n      const focusedEl = listboxEl.querySelector<HTMLElement>('[data-focused]');\n\n      focusedEl?.scrollIntoView({ block: 'nearest' });\n    }\n\n    // ── Virtualizer ──────────────────────────────────────────────────────────\n    const { domVirtualList, setupVirtualizer, updateRenderedItemState } = createComboboxVirtualizer({\n      checkIconHTML,\n      comboId,\n      getDropdownElement: () => dropdownEl,\n      getFocusedIndex: () => focusedIndex.peek(),\n      getIsMultiple: () => isMultiple.peek(),\n      getListboxElement: () => listboxEl,\n      getSelectedValue: () => selectedValue.peek(),\n      getSelectedValues: () => selectedValues.peek(),\n      onSelectOption: selectOption,\n      setFocusedIndex: (index) => {\n        focusedIndex.value = index;\n      },\n    });\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(label: string, originalEvent?: Event) {\n      const value = makeCreatableValue(label);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n    onMount(() => {\n      fieldEl = inputEl?.closest('.field') as HTMLElement | null;\n      dropdownEl = host.shadowRoot?.querySelector<HTMLElement>('.dropdown') ?? null;\n      listboxEl = host.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]') ?? null;\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      onSlotChange('default', readOptions);\n      // Ensure initial light-DOM options are available for immediate keyboard interaction.\n      readOptions();\n      // Rebuild virtualizer when filtered options or open state changes\n      effect(() => {\n        const opts = filteredOptions.value;\n        const open = isOpen.value;\n\n        if (open && opts.length > 0) {\n          requestAnimationFrame(() => setupVirtualizer(opts, open));\n        } else {\n          domVirtualList.update(opts, false);\n        }\n      });\n      mountLabelSyncStandalone(labelInsetRef, labelOutsideRef, props);\n      effect(() => {\n        if (listboxEl) {\n          // Remove existing state nodes\n          for (const el of Array.from(listboxEl.querySelectorAll('.no-results,.no-results-create,.dropdown-loading')))\n            el.remove();\n\n          if (isLoading.value) {\n            const loadingEl = document.createElement('div');\n\n            loadingEl.className = 'dropdown-loading';\n            loadingEl.textContent = 'Loading\\u2026';\n            listboxEl.prepend(loadingEl);\n          } else if (filteredOptions.value.length === 0) {\n            if (creatableLabel.value) {\n              const createEl = document.createElement('button');\n\n              createEl.type = 'button';\n              createEl.className = 'no-results-create';\n              createEl.textContent = `Create \"${creatableLabel.value}\"`;\n\n              // Apply focused state when keyboard nav lands here (focusedIndex === -1 means create row)\n              if (focusedIndex.value === -1) createEl.setAttribute('data-focused', '');\n\n              createEl.addEventListener('pointerdown', (e: PointerEvent) => {\n                e.preventDefault();\n              });\n\n              createEl.addEventListener('click', (e) => {\n                e.stopPropagation();\n                createOption(creatableLabel.value, e);\n              });\n              listboxEl.appendChild(createEl);\n            } else {\n              const noResults = document.createElement('div');\n\n              noResults.className = 'no-results';\n              noResults.setAttribute('role', 'presentation');\n              noResults.textContent = 'No results found';\n              listboxEl.appendChild(noResults);\n            }\n          }\n\n          // Update focused/selected state on already-rendered items without touching\n          // the DOM structure. The virtualizer owns full re-renders via onChange.\n          updateRenderedItemState();\n        }\n      });\n      // Keep rendered option selected/focused attributes in sync while the popup stays open.\n      watch(\n        [isOpen, props.multiple, focusedIndex, selectedValues, selectedValue],\n        () => {\n          if (!isOpen.value) return;\n\n          updateRenderedItemState();\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        domVirtualList.destroy();\n        positioner.destroy();\n        removeOutsideClick();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div class=\"combobox-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${comboId}\"\n          id=\"${labelId}\"\n          ref=${labelOutsideRef}\n          hidden\n          part=\"label\"></label>\n        <div\n          class=\"field\"\n          part=\"field\"\n          @click=\"${() => {\n            if (!isOpen.value) open(false, 'trigger');\n\n            focusLiveInput();\n          }}\">\n          <label class=\"label-inset\" for=\"${comboId}\" id=\"${labelId}\" ref=${labelInsetRef} hidden part=\"label\"></label>\n          <div class=\"field-row\">\n            <div class=\"chips-row\">\n              <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n              <span class=\"chips-list\">\n                ${() =>\n                  (isMultiple.value ? selectedValues.value : []).map(\n                    (item) => html`\n                      <bit-chip\n                        value=${item.value}\n                        aria-label=${item.label || item.value}\n                        mode=\"removable\"\n                        variant=\"flat\"\n                        size=\"sm\"\n                        color=${() => props.color.value}\n                        @remove=${removeChip}>\n                        ${item.label || item.value}\n                      </bit-chip>\n                    `,\n                  )}\n              </span>\n              <input\n                ref=${(el: HTMLInputElement | null) => {\n                  inputEl = el;\n\n                  if (!el) {\n                    fieldEl = null;\n\n                    return;\n                  }\n\n                  fieldEl = el.closest('.field') as HTMLElement | null;\n                  aria(el, {\n                    activedescendant: () => (focusedIndex.value >= 0 ? `${comboId}-opt-${focusedIndex.value}` : null),\n                    autocomplete: 'list',\n                    controls: () => `${comboId}-listbox`,\n                    describedby: () => (props.error.value || props.helper.value ? helperId : null),\n                    disabled: () => isDisabled.value,\n                    expanded: () => (isOpen.value ? 'true' : 'false'),\n                    invalid: () => !!props.error.value,\n                    labelledby: () => (hasLabel.value ? labelId : null),\n                  });\n                }}\n                class=\"input\"\n                part=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                id=\"${comboId}\"\n                name=\"${() => props.name.value}\"\n                placeholder=${() => inputPlaceholder.value}\n                :disabled=\"${() => isDisabled.value}\"\n                @input=${handleInput}\n                @keydown=${handleKeydown}\n                @focus=${handleFocus}\n                .value=${query} />\n            </div>\n            <button\n              class=\"clear-btn\"\n              part=\"clear-btn\"\n              type=\"button\"\n              aria-label=\"Clear\"\n              tabindex=\"-1\"\n              ?hidden=${() => !hasValue.value}\n              @click=\"${clearValue}\">\n              ${clearIcon}\n            </button>\n            <span class=\"chevron\" aria-hidden=\"true\">\n              ${chevronDownIcon}\n              <span class=\"loader\" aria-label=\"Loading\"></span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"dropdown\" part=\"dropdown\" id=\"${() => `${comboId}-dropdown`}\" ?data-open=${() => isOpen.value}>\n          <div\n            role=\"listbox\"\n            id=\"${() => `${comboId}-listbox`}\"\n            aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"></div>\n        </div>\n\n        <span\n          class=\"helper-text\"\n          id=\"${helperId}\"\n          part=\"helper-text\"\n          aria-live=\"polite\"\n          ?hidden=${() => assistiveText.value.hidden}\n          style=${() => (assistiveText.value.isError ? 'color: var(--color-error);' : '')}\n          >${() => assistiveText.value.text}</span\n        >\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.input'),\n    componentStyles,\n  ],\n  tag: 'bit-combobox',\n}) as unknown as AddEventListeners<BitComboboxEvents>;\n"],"mappings":"ymCAmEA,IAAa,GAAA,EAAA,EAAA,iBAAsC,CACjD,OAAQ,CASN,MAAO,GAAA,IAAI;QARoB,EAAA,GAAG;;;;;;MASjB;eAGnB,IAAK,sBACN,CAAC,CAqBW,GAAA,EAAA,EAAA,iBAAoE,CAC/E,eAAgB,GAChB,MAAO,CACL,UAAW,CAAE,QAAS,GAAO,CAC7B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,UAAW,CAAE,QAAS,GAAO,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,GAAI,KAAM,GAAM,CAClC,UAAW,CAAE,QAAS,GAAO,CAC7B,OAAQ,CAAE,QAAS,GAAI,CACvB,MAAO,CAAE,QAAS,GAAI,CACtB,kBAAmB,CAAE,QAAS,QAAS,CACvC,QAAS,CAAE,QAAS,GAAO,CAC3B,SAAU,CAAE,QAAS,GAAO,CAC5B,KAAM,CAAE,QAAS,GAAI,CACrB,YAAa,CAAE,QAAS,GAAO,CAC/B,SAAA,EAAA,EAAA,OAAiD,IAAA,GAAW,CAAE,QAAS,GAAO,CAAC,CAC/E,YAAa,CAAE,QAAS,GAAI,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,GAAI,CACtB,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,GAAM,CAAE,QAAS,EAAS,WAAU,YAAA,EAAA,EAAA,eAA0B,WAAY,EAAM,KAAK,MAAM,CAErF,GAAA,EAAA,EAAA,MAAyC,CACzC,GAAA,EAAA,EAAA,MAAuC,CACvC,GAAA,EAAA,EAAA,QAAiB,GAAA,SAAU,IAAA,GAAU,CAErC,GAAA,EAAA,EAAA,QAAmB,OAAO,EAAM,MAAM,OAAS,GAAG,CAAC,CAYnD,CAAE,qBAAsB,GAAA,sBAAsB,GAAA,EAAA,EAAA,aAVlD,CAAE,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,OAAU,EAAQ,GAAS,SAAS,MAAO,CAAE,MAAO,EAAW,CACjH,CACE,YAAe,CACb,EAAU,MAAQ,GAClB,EAAe,MAAQ,EAAE,CACzB,EAAM,MAAQ,IAEjB,CACF,CAE+D,CAG1D,GAAA,EAAA,EAAA,QAAgB,GAAM,CACtB,GAAA,EAAA,EAAA,QAAe,GAAG,CAClB,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAM,SAAS,MAAO,CAC1D,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAM,SAAS,MAAO,CAC1D,IAAA,EAAA,EAAA,cAA6B,EAAQ,EAAM,UAAU,MAAO,CAC5D,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAM,aAAa,MAAO,EAEpE,EAAA,EAAA,OACE,EACC,GAAU,CACT,EAAK,gBAAgB,QAAU,GAAU,EAAQ,GAAQ,EAAM,CAAC,EAElE,CAAE,UAAW,GAAM,CACpB,CAGD,IAAM,GAAA,EAAA,EAAA,QACJ,EAAM,MAAM,MAAQ,CAAC,CAAE,MAAO,GAAI,MAAO,EAAM,MAAM,MAAO,CAAC,CAAG,EAAE,CACnE,CACK,GAAA,EAAA,EAAA,QAAsB,GAAG,CACzB,EAAsB,EAAA,EAA8C,CACxE,UAAY,GAAU,CACpB,IAAM,EAAW,EAAe,MAAM,KAAM,GAAS,EAAK,QAAU,EAAM,CAE1E,GAAI,EAAU,OAAO,EAGrB,IAAM,EAAS,EAAW,MAAM,KAAM,GAAM,EAAE,QAAU,EAAM,CAK9D,OAHI,EAAe,CAAE,MAAO,EAAO,MAAO,MAAO,EAAO,MAAO,CAGxD,CAAE,MAAO,GAAI,QAAO,EAE7B,YAAgB,EAAW,MAAQ,WAAa,SAChD,gBAAmB,EAAe,MAClC,aAAe,GAAS,EAAK,MAC7B,YAAc,GAAS,CACrB,EAAe,MAAQ,GAE1B,CAAC,CAGI,EAAuB,GAA6B,CACxD,IAAM,EAAQ,GAAA,0BAA0B,OAAO,GAAa,GAAG,CAAC,CAEhE,GAAI,EAAM,QAAS,CACjB,EAAoB,OAAO,CAC3B,EAAM,MAAQ,GACd,EAAU,MAAQ,GAElB,OAGF,GAAI,EAAW,MAAO,CACpB,EAAe,MAAQ,EAAM,OAAO,IAAK,IAAW,CAAE,MAAO,GAAI,QAAO,EAAE,CAC1E,EAAU,MAAQ,EAAM,UAExB,OAIF,EAAe,MAAQ,CAAC,CAAE,MAAO,GAAI,MAAO,EAAM,WAAY,CAAC,CAC/D,EAAU,MAAQ,EAAM,aAG1B,EAAA,EAAA,OAAM,EAAM,MAAQ,GAAa,EAAoB,EAAS,CAAE,CAAE,UAAW,GAAM,CAAC,EACpF,EAAA,EAAA,OAAM,EAAM,aAAgB,EAAoB,EAAM,MAAM,MAAM,CAAC,CAGnE,IAAM,GAAA,EAAA,EAAA,cAA+B,EAAe,MAAM,IAAI,OAAS,GAAG,CACpE,IAAA,EAAA,EAAA,cAA0B,EAAe,MAAM,OAAS,EAAE,CAC1D,IAAA,EAAA,EAAA,cAA0B,CAAC,CAAC,EAAM,MAAM,MAAM,CAChD,EAAmC,KACnC,EAA8B,KAC9B,EAAiC,KACjC,EAAgC,KAEpC,SAAS,IAAwC,CAC/C,IAAM,EAAY,EAAK,YAAY,cAAgC,yBAAyB,EAAI,KAIhG,OAFI,IAAW,EAAU,GAElB,GAAa,EAGtB,SAAS,GAAiB,CACxB,IAAc,EAAE,OAAO,CAIzB,IAAM,GAAA,EAAA,EAAA,QAA8C,EAAE,CAAC,CACjD,GAAA,EAAA,EAAA,QAA8C,EAAE,CAAC,CACjD,IAAA,EAAA,EAAA,cAA2B,EAAQ,EAAM,QAAQ,MAAO,CAExD,GAAA,EAAA,EAAA,cAAkD,CACtD,IAAM,EAAO,EAAM,QAAQ,OAAS,EAAe,MAInD,OAFI,EAAe,MAAM,SAAW,EAAU,EAEvC,CAAC,GAAG,EAAM,GAAG,EAAe,MAAM,EACzC,CAEF,SAAS,EAAY,EAAsB,MAAM,KAAK,EAAK,SAAS,CAAE,CACpE,EAAe,MAAQ,EAAA,oBAAoB,EAAS,CAGhD,EAAe,MAAM,OAAS,IAChC,EAAe,MAAQ,EAAA,wBAAwB,EAAe,MAAO,EAAW,MAAM,CAGlF,CAAC,EAAW,OAAS,EAAe,MAAM,SAAW,IACvD,EAAM,MAAQ,EAAe,MAAM,IAAI,OAAS,KAKtD,IAAM,GAAA,EAAA,EAAA,cACG,EAAA,cAAc,EAAW,MAAO,EAAM,MAAO,EAAW,MAAM,CACrE,CAEI,GAAA,EAAA,EAAA,cACG,EAAA,kBAAkB,EAAM,MAAO,GAAY,MAAO,EAAgB,MAAM,CAC/E,CACI,GAAA,EAAA,EAAA,cAA+B,GAAA,2BAA2B,EAAM,MAAM,MAAO,EAAM,OAAO,MAAM,CAAC,CACjG,GAAA,EAAA,EAAA,cACJ,EAAW,OAAS,EAAe,MAAM,OAAS,EAAI,GAAK,EAAM,YAAY,OAAS,GACvF,CAEK,GAAA,EAAA,EAAA,cAAoC,EAAe,MAAM,IAAK,GAAM,EAAE,MAAM,CAAC,CAC7E,IAAA,EAAA,EAAA,cACJ,EAAe,MAAM,IAAK,GACpB,EAAU,MAAc,EAAU,MAE/B,EAAW,MAAM,KAAM,GAAW,EAAO,QAAU,EAAU,MAAM,EAAE,OAAS,EAAU,MAC/F,CACH,CAED,SAAS,GAAwB,CAC/B,EAAU,MAAQ,EAAoB,UAAU,IAAI,CAGtD,SAAS,EAAW,EAAuB,CACzC,EAAK,SAAU,GAAA,yBAAyB,EAAmB,MAAO,GAAmB,MAAO,EAAc,CAAC,CAG7G,SAAS,GAAW,EAAoB,CACtC,EAAM,iBAAiB,CAEvB,IAAM,EAAS,EAA0C,QAAQ,MAE7D,IAAU,IAAA,KAEd,EAAoB,OAAO,EAAM,CACjC,GAAuB,CACvB,EAAW,EAAM,CACjB,EAAkB,SAAS,EAI7B,IAAM,EAAa,EAAA,6BACX,MACA,EACP,CAEK,EAAiB,GAAA,EAAyC,CAC9D,aAAgB,EAAa,MAC7B,aAAgB,EAAgB,MAChC,eAAiB,GAAW,EAAO,SACnC,SAAW,GAAU,CACnB,EAAa,MAAQ,EACrB,IAAuB,EAE1B,CAAC,CAEI,EAAU,EAAA,EAAqB,CACnC,uBAA0B,EAC1B,oBAAuB,EACvB,sBAAyB,EACzB,eAAkB,EAAW,MAC7B,WAAc,EAAO,MACrB,WAAY,CACV,aAAgB,EAChB,cAAiB,EACjB,WAAc,EAAW,gBAAgB,CAC1C,CACD,aAAc,GACd,SAAU,EAAM,IAAa,CAC3B,EAAO,MAAQ,EAEV,GAAM,EAAe,OAAO,EAEpC,CAAC,CAEI,EAAyB,GAAuC,EAChE,EAAO,SAAW,SAAW,EAAO,SAAW,qBACjD,EAAa,MAAQ,KAKzB,SAAS,EAAK,EAAc,GAAM,EAA4B,eAAgB,CACxE,IAAa,EAAM,MAAQ,IAE/B,EAAQ,KAAK,CAAE,SAAQ,CAAC,CAG1B,SAAS,EAAM,EAAiE,eAAgB,CAC9F,EAAQ,MAAM,CAAE,SAAQ,aAAc,GAAO,CAAC,CAGzC,EAAW,MAKd,EAAM,MAAQ,GAFd,EAAM,MAFQ,EAAW,MAAM,KAAM,GAAM,EAAE,QAAU,EAAc,MAAM,EAEtD,OAAS,GAKhC,EAAkB,OAAO,CAG3B,SAAS,EAAa,EAAyB,EAAuB,CAChE,EAAI,WAEJ,EAAW,OACb,EAAoB,OAAO,EAAI,MAAM,CACrC,GAAuB,CACvB,EAAM,MAAQ,GACd,EAAW,EAAc,CACzB,EAAkB,SAAS,CAE3B,GAAgB,CAChB,0BAA4B,GAAgB,CAAC,GAE7C,EAAoB,OAAO,EAAI,MAAM,CACrC,EAAM,MAAQ,EAAI,MAClB,EAAU,MAAQ,EAAI,MACtB,EAAW,EAAc,CACzB,EAAkB,SAAS,CAC3B,GAAO,CACP,GAAgB,GAGpB,SAAS,GAAW,EAAU,CAC5B,EAAE,iBAAiB,CACnB,EAAoB,OAAO,CAC3B,EAAM,MAAQ,GACd,EAAU,MAAQ,GAClB,EAAW,EAAE,CACb,EAAkB,SAAS,CAC3B,GAAgB,CAElB,SAAS,GAAY,EAAU,CAC7B,IAAM,EAAS,EAAE,OAEjB,EAAM,MAAQ,EAAO,MAEhB,EAAW,OAAO,EAAoB,OAAO,CAElD,EAAsB,EAAe,OAAO,CAAC,CAExC,EAAO,OAAO,EAAK,GAAO,UAAU,CAEzC,EAAK,SAAU,CAAE,MAAO,EAAO,MAAO,CAAsB,CAE9D,SAAS,IAAc,CAChB,EAAO,OAAO,EAAK,GAAO,UAAU,CAG3C,SAAS,GAAc,EAAkB,CACvC,GAAI,EAAW,MAAO,OAEtB,IAAM,EAAO,EAAgB,MAE7B,OAAQ,EAAE,IAAV,CACE,IAAK,YACH,EAAE,gBAAgB,CAEb,EAAO,MAKV,EAAsB,EAAe,MAAM,CAAC,EAJ5C,EAAK,GAAM,UAAU,CAErB,EAAsB,EAAe,OAAO,CAAC,EAK/C,MACF,IAAK,UACH,EAAE,gBAAgB,CAEb,EAAO,MAGV,EAAsB,EAAe,MAAM,CAAC,CAF5C,EAAK,GAAM,UAAU,CAKvB,MACF,IAAK,YAEC,EAAW,OAAS,CAAC,EAAM,OAAS,EAAe,MAAM,OAAS,IACpE,EAAe,MAAQ,EAAe,MAAM,MAAM,EAAG,GAAG,CACxD,GAAuB,CACvB,EAAW,EAAE,CACb,EAAkB,SAAS,EAG7B,MACF,IAAK,MACC,EAAO,QACT,EAAE,gBAAgB,CAClB,EAAsB,EAAe,MAAM,CAAC,EAG9C,MACF,IAAK,QACH,EAAE,gBAAgB,CAEd,EAAO,OAAS,EAAa,OAAS,GAAK,EAAa,MAAQ,EAAK,OACvE,EAAa,EAAK,EAAa,OAAQ,EAAE,CAChC,EAAO,OAAS,EAAa,QAAU,IAAM,EAAe,MAErE,EAAa,EAAe,MAAO,EAAE,CAC3B,EAAO,OACjB,GAAM,CAGR,MACF,IAAK,SACH,EAAE,gBAAgB,CAEd,EAAO,OACT,EAAM,SAAS,CAGjB,MACF,IAAK,OACC,EAAO,QACT,EAAE,gBAAgB,CAClB,EAAsB,EAAe,OAAO,CAAC,EAG/C,MACF,IAAK,MACH,EAAM,eAAe,CACrB,MACF,QACE,OAGN,SAAS,IAAwB,CAC/B,GAAI,EAAa,OAAS,EAAG,CAC3B,EAAe,cAAc,EAAa,MAAO,CAAE,MAAO,OAAQ,CAAC,CAEnE,OAGG,GAEa,EAAU,cAA2B,iBAAiB,EAE7D,eAAe,CAAE,MAAO,UAAW,CAAC,CAIjD,GAAM,CAAE,iBAAgB,oBAAkB,2BAA4B,GAAA,0BAA0B,CAC9F,cAAA,EAAA,cACA,UACA,uBAA0B,EAC1B,oBAAuB,EAAa,MAAM,CAC1C,kBAAqB,EAAW,MAAM,CACtC,sBAAyB,EACzB,qBAAwB,EAAc,MAAM,CAC5C,sBAAyB,EAAe,MAAM,CAC9C,eAAgB,EAChB,gBAAkB,GAAU,CAC1B,EAAa,MAAQ,GAExB,CAAC,CAGF,SAAS,EAAa,EAAe,EAAuB,CAE1D,IAAM,EAA6B,CAAE,SAAU,GAAO,OAAQ,KAAM,QAAO,MAD7D,EAAA,mBAAmB,EAAM,CAC2C,CAElF,EAAe,MAAQ,CAAC,GAAG,EAAe,MAAO,EAAO,CACxD,EAAa,EAAQ,EAAc,CA0FrC,OAvFA,EAAA,EAAA,aAAc,CACZ,EAAU,GAAS,QAAQ,SAAS,CACpC,EAAa,EAAK,YAAY,cAA2B,YAAY,EAAI,KACzE,EAAY,EAAK,YAAY,cAA2B,mBAAmB,EAAI,KAE/E,IAAM,EAAqB,EAAQ,iBAAiB,SAAS,CA2E7D,OAzEA,EAAA,EAAA,cAAa,UAAW,EAAY,CAEpC,GAAa,EAEb,EAAA,EAAA,YAAa,CACX,IAAM,EAAO,EAAgB,MACvB,EAAO,EAAO,MAEhB,GAAQ,EAAK,OAAS,EACxB,0BAA4B,GAAiB,EAAM,EAAK,CAAC,CAEzD,EAAe,OAAO,EAAM,GAAM,EAEpC,CACF,EAAA,yBAAyB,EAAe,EAAiB,EAAM,EAC/D,EAAA,EAAA,YAAa,CACX,GAAI,EAAW,CAEb,IAAK,IAAM,KAAM,MAAM,KAAK,EAAU,iBAAiB,mDAAmD,CAAC,CACzG,EAAG,QAAQ,CAEb,GAAI,GAAU,MAAO,CACnB,IAAM,EAAY,SAAS,cAAc,MAAM,CAE/C,EAAU,UAAY,mBACtB,EAAU,YAAc,WACxB,EAAU,QAAQ,EAAU,SACnB,EAAgB,MAAM,SAAW,EAC1C,GAAI,EAAe,MAAO,CACxB,IAAM,EAAW,SAAS,cAAc,SAAS,CAEjD,EAAS,KAAO,SAChB,EAAS,UAAY,oBACrB,EAAS,YAAc,WAAW,EAAe,MAAM,GAGnD,EAAa,QAAU,IAAI,EAAS,aAAa,eAAgB,GAAG,CAExE,EAAS,iBAAiB,cAAgB,GAAoB,CAC5D,EAAE,gBAAgB,EAClB,CAEF,EAAS,iBAAiB,QAAU,GAAM,CACxC,EAAE,iBAAiB,CACnB,EAAa,EAAe,MAAO,EAAE,EACrC,CACF,EAAU,YAAY,EAAS,KAC1B,CACL,IAAM,EAAY,SAAS,cAAc,MAAM,CAE/C,EAAU,UAAY,aACtB,EAAU,aAAa,OAAQ,eAAe,CAC9C,EAAU,YAAc,mBACxB,EAAU,YAAY,EAAU,CAMpC,GAAyB,GAE3B,EAEF,EAAA,EAAA,OACE,CAAC,EAAQ,EAAM,SAAU,EAAc,EAAgB,EAAc,KAC/D,CACC,EAAO,OAEZ,GAAyB,EAE3B,CAAE,UAAW,GAAM,CACpB,KAEY,CACX,EAAe,SAAS,CACxB,EAAW,SAAS,CACpB,GAAoB,GAEtB,CAEK,EAAA,IAAI;;;;;iBAKE,EAAQ;gBACT,EAAQ;gBACR,EAAgB;;;;;;wBAMN,CACT,EAAO,OAAO,EAAK,GAAO,UAAU,CAEzC,GAAgB,EAChB;4CACgC,EAAQ,QAAQ,EAAQ,QAAQ,EAAc;;;;;uBAMvE,EAAW,MAAQ,EAAe,MAAQ,EAAE,EAAE,IAC5C,GAAS,EAAA,IAAI;;gCAEF,EAAK,MAAM;qCACN,EAAK,OAAS,EAAK,MAAM;;;;oCAIxB,EAAM,MAAM,MAAM;kCACtB,GAAW;0BACnB,EAAK,OAAS,EAAK,MAAM;;sBAGhC,CAAC;;;sBAGG,GAAgC,CAGrC,GAFA,EAAU,EAEN,CAAC,EAAI,CACP,EAAU,KAEV,OAGF,EAAU,EAAG,QAAQ,SAAS,EAC9B,EAAA,EAAA,MAAK,EAAI,CACP,qBAAyB,EAAa,OAAS,EAAI,GAAG,EAAQ,OAAO,EAAa,QAAU,KAC5F,aAAc,OACd,aAAgB,GAAG,EAAQ,UAC3B,gBAAoB,EAAM,MAAM,OAAS,EAAM,OAAO,MAAQ,EAAW,KACzE,aAAgB,EAAW,MAC3B,aAAiB,EAAO,MAAQ,OAAS,QACzC,YAAe,CAAC,CAAC,EAAM,MAAM,MAC7B,eAAmB,GAAS,MAAQ,EAAU,KAC/C,CAAC,EACF;;;;;;;sBAOI,EAAQ;4BACA,EAAM,KAAK,MAAM;kCACX,EAAiB,MAAM;iCACxB,EAAW,MAAM;yBAC3B,GAAY;2BACV,GAAc;yBAChB,GAAY;yBACZ,EAAM;;;;;;;;4BAQD,CAAC,GAAS,MAAM;wBACtB,GAAW;gBACnB,EAAA,UAAU;;;gBAGV,EAAA,gBAAgB;;;;;;wDAM0B,GAAG,EAAQ,WAAW,mBAAqB,EAAO,MAAM;;;sBAG1F,GAAG,EAAQ,UAAU;8BACb,EAAM,MAAM,OAAS,EAAM,YAAY,OAAS,UAAU;;;;;gBAK1E,EAAS;;;wBAGC,EAAc,MAAM,OAAO;sBAC5B,EAAc,MAAM,QAAU,6BAA+B,GAAI;iBACvE,EAAc,MAAM,KAAK;;;OAK1C,OAAQ,CAAE,eAAgB,GAAM,CAChC,OAAQ,CACN,EAAA,iBAAiB,EAAA,kBAAkB,CACnC,GAAG,EAAA,gBACH,EAAA,sBAAsB,CACtB,EAAA,uBAAuB,SAAS,CAChC,EAAA,QACD,CACD,IAAK,eACN,CAAC"}

package/dist/combobox.js

@@ -0,0 +1,401 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as r } from "./styles/index.js";
+import { checkIconHTML as ee, chevronDownIcon as te, clearIcon as ne } from "./icons.js";
+import "./chip.js";
+import { e as re } from "./craftit/dist/labs/list.js";
+import { t as ie } from "./craftit/dist/labs/overlay.js";
+import { e as ae } from "./craftit/dist/labs/selection.js";
+import "./craftit/dist/labs.js";
+import { createDropdownPositioner as oe } from "./inputs/shared/dom-sync/dropdown.js";
+import { resolveMergedAssistiveText as se } from "./inputs/shared/utils/assistive-text.js";
+import { createChoiceChangeDetail as ce } from "./inputs/shared/utils/choice-change.js";
+import { computeControlledCsvState as le } from "./inputs/shared/utils/controlled-csv.js";
+import { FORM_CTX as i } from "./inputs/shared/form-context.js";
+import { mountLabelSyncStandalone as ue } from "./inputs/shared/dom-sync/label-sync.js";
+import "./inputs/shared/dom-sync/index.js";
+import { createFieldValidation as de } from "./inputs/shared/validation/index.js";
+import { FIELD_SIZE_PRESET as a } from "./inputs/shared/design-presets.js";
+import { backfillSelectionLabels as fe, filterOptions as pe, getCreatableLabel as me, makeCreatableValue as he, parseSlottedOptions as ge } from "./inputs/combobox/combobox-options.js";
+import { createComboboxVirtualizer as _e } from "./inputs/combobox/combobox-virtualizer.js";
+import o from "./inputs/combobox/combobox.css?inline.js";
+import { aria as s, computed as c, createFormIds as ve, css as l, defineComponent as u, defineField as ye, effect as d, html as f, inject as be, onMount as xe, onSlotChange as Se, ref as p, signal as m, typed as h, watch as g } from "@vielzeug/craftit";
+//#region src/inputs/combobox/combobox.ts
+var _ = u({
+	setup() {
+		return f`<style>
+      ${l`
+      @layer buildit.base {
+        :host {
+          display: none;
+        }
+      }
+    `}
+    </style>`;
+	},
+	tag: "bit-combobox-option"
+}), v = u({
+	formAssociated: !0,
+	props: {
+		clearable: { default: !1 },
+		color: { default: void 0 },
+		creatable: { default: !1 },
+		disabled: { default: !1 },
+		error: {
+			default: "",
+			omit: !0
+		},
+		fullwidth: { default: !1 },
+		helper: { default: "" },
+		label: { default: "" },
+		"label-placement": { default: "inset" },
+		loading: { default: !1 },
+		multiple: { default: !1 },
+		name: { default: "" },
+		"no-filter": { default: !1 },
+		options: h(void 0, { reflect: !1 }),
+		placeholder: { default: "" },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		value: { default: "" },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let { fieldId: r, helperId: a, labelId: o } = ve("combobox", n.name.value), l = p(), u = p(), h = be(i, void 0), _ = m(String(n.value.value ?? "")), { triggerValidation: v } = de(h, ye({
+			disabled: c(() => !!n.disabled.value || !!h?.disabled.value),
+			value: _
+		}, { onReset: () => {
+			_.value = "", C.value = [], b.value = "";
+		} })), y = m(!1), b = m(""), x = c(() => !!n.disabled.value), S = c(() => !!n.multiple.value), Ce = c(() => !!n.creatable.value), we = c(() => !!n["no-filter"].value);
+		g(y, (e) => {
+			t.toggleAttribute("open", ((e) => !!e)(e));
+		}, { immediate: !0 });
+		let C = m(n.value.value ? [{
+			label: "",
+			value: n.value.value
+		}] : []), w = m(-1), T = ae({
+			findByKey: (e) => {
+				let t = C.value.find((t) => t.value === e);
+				if (t) return t;
+				let n = L.value.find((t) => t.value === e);
+				return n ? {
+					label: n.label,
+					value: n.value
+				} : {
+					label: "",
+					value: e
+				};
+			},
+			getMode: () => S.value ? "multiple" : "single",
+			getSelected: () => C.value,
+			keyExtractor: (e) => e.value,
+			setSelected: (e) => {
+				C.value = e;
+			}
+		}), E = (e) => {
+			let t = le(String(e ?? ""));
+			if (t.isEmpty) {
+				T.clear(), b.value = "", _.value = "";
+				return;
+			}
+			if (S.value) {
+				C.value = t.values.map((e) => ({
+					label: "",
+					value: e
+				})), _.value = t.formValue;
+				return;
+			}
+			C.value = [{
+				label: "",
+				value: t.firstValue
+			}], _.value = t.firstValue;
+		};
+		g(n.value, (e) => E(e), { immediate: !0 }), g(n.multiple, () => E(n.value.value));
+		let D = c(() => C.value[0]?.value ?? ""), O = c(() => C.value.length > 0), k = c(() => !!n.label.value), A = null, j = null, M = null, N = null;
+		function Te() {
+			let e = t.shadowRoot?.querySelector("input[role=\"combobox\"]") ?? null;
+			return e && (A = e), e ?? A;
+		}
+		function P() {
+			Te()?.focus();
+		}
+		let F = m([]), I = m([]), Ee = c(() => !!n.loading.value), L = c(() => {
+			let e = n.options.value ?? F.value;
+			return I.value.length === 0 ? e : [...e, ...I.value];
+		});
+		function R(e = Array.from(t.children)) {
+			F.value = ge(e), C.value.length > 0 && (C.value = fe(C.value, L.value), !S.value && C.value.length === 1 && (b.value = C.value[0]?.label ?? ""));
+		}
+		let z = c(() => pe(L.value, b.value, we.value)), B = c(() => me(b.value, Ce.value, z.value)), V = c(() => se(n.error.value, n.helper.value)), De = c(() => S.value && C.value.length > 0 ? "" : n.placeholder.value || ""), Oe = c(() => C.value.map((e) => e.value)), ke = c(() => C.value.map((e) => e.label ? e.label : L.value.find((t) => t.value === e.value)?.label ?? e.value));
+		function H() {
+			_.value = T.serialize(",");
+		}
+		function U(t) {
+			e("change", ce(Oe.value, ke.value, t));
+		}
+		function Ae(e) {
+			e.stopPropagation();
+			let t = e.detail?.value;
+			t !== void 0 && (T.remove(t), H(), U(e), v("change"));
+		}
+		let W = oe(() => j, () => M), G = re({
+			getIndex: () => w.value,
+			getItems: () => z.value,
+			isItemDisabled: (e) => e.disabled,
+			setIndex: (e) => {
+				w.value = e, Fe();
+			}
+		}), K = ie({
+			getBoundaryElement: () => t,
+			getPanelElement: () => M,
+			getTriggerElement: () => A,
+			isDisabled: () => x.value,
+			isOpen: () => y.value,
+			positioner: {
+				floating: () => M,
+				reference: () => j,
+				update: () => W.updatePosition()
+			},
+			restoreFocus: !1,
+			setOpen: (e, t) => {
+				y.value = e, e || G.reset();
+			}
+		}), q = (e) => {
+			(e.reason === "empty" || e.reason === "no-enabled-item") && (w.value = -1);
+		};
+		function J(e = !0, t = "programmatic") {
+			e && (b.value = ""), K.open({ reason: t });
+		}
+		function Y(e = "programmatic") {
+			K.close({
+				reason: e,
+				restoreFocus: !1
+			}), S.value ? b.value = "" : b.value = L.value.find((e) => e.value === D.value)?.label ?? "", v("blur");
+		}
+		function X(e, t) {
+			e.disabled || (S.value ? (T.toggle(e.value), H(), b.value = "", U(t), v("change"), P(), requestAnimationFrame(() => P())) : (T.select(e.value), b.value = e.label, _.value = e.value, U(t), v("change"), Y(), P()));
+		}
+		function je(e) {
+			e.stopPropagation(), T.clear(), b.value = "", _.value = "", U(e), v("change"), P();
+		}
+		function Me(t) {
+			let n = t.target;
+			b.value = n.value, S.value || T.clear(), q(G.first()), y.value || J(!1, "trigger"), e("search", { query: n.value });
+		}
+		function Ne() {
+			y.value || J(!1, "trigger");
+		}
+		function Pe(e) {
+			if (x.value) return;
+			let t = z.value;
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), y.value ? q(G.next()) : (J(!0, "trigger"), q(G.first()));
+					break;
+				case "ArrowUp":
+					e.preventDefault(), y.value ? q(G.prev()) : J(!0, "trigger");
+					break;
+				case "Backspace":
+					S.value && !b.value && C.value.length > 0 && (C.value = C.value.slice(0, -1), H(), U(e), v("change"));
+					break;
+				case "End":
+					y.value && (e.preventDefault(), q(G.last()));
+					break;
+				case "Enter":
+					e.preventDefault(), y.value && w.value >= 0 && w.value < t.length ? X(t[w.value], e) : y.value && w.value === -1 && B.value ? $(B.value, e) : y.value || J();
+					break;
+				case "Escape":
+					e.preventDefault(), y.value && Y("escape");
+					break;
+				case "Home":
+					y.value && (e.preventDefault(), q(G.first()));
+					break;
+				case "Tab":
+					Y("programmatic");
+					break;
+				default: break;
+			}
+		}
+		function Fe() {
+			if (w.value >= 0) {
+				Z.scrollToIndex(w.value, { align: "auto" });
+				return;
+			}
+			N && N.querySelector("[data-focused]")?.scrollIntoView({ block: "nearest" });
+		}
+		let { domVirtualList: Z, setupVirtualizer: Ie, updateRenderedItemState: Q } = _e({
+			checkIconHTML: ee,
+			comboId: r,
+			getDropdownElement: () => M,
+			getFocusedIndex: () => w.peek(),
+			getIsMultiple: () => S.peek(),
+			getListboxElement: () => N,
+			getSelectedValue: () => D.peek(),
+			getSelectedValues: () => C.peek(),
+			onSelectOption: X,
+			setFocusedIndex: (e) => {
+				w.value = e;
+			}
+		});
+		function $(e, t) {
+			let n = {
+				disabled: !1,
+				iconEl: null,
+				label: e,
+				value: he(e)
+			};
+			I.value = [...I.value, n], X(n, t);
+		}
+		return xe(() => {
+			j = A?.closest(".field"), M = t.shadowRoot?.querySelector(".dropdown") ?? null, N = t.shadowRoot?.querySelector("[role=\"listbox\"]") ?? null;
+			let e = K.bindOutsideClick(document);
+			return Se("default", R), R(), d(() => {
+				let e = z.value, t = y.value;
+				t && e.length > 0 ? requestAnimationFrame(() => Ie(e, t)) : Z.update(e, !1);
+			}), ue(u, l, n), d(() => {
+				if (N) {
+					for (let e of Array.from(N.querySelectorAll(".no-results,.no-results-create,.dropdown-loading"))) e.remove();
+					if (Ee.value) {
+						let e = document.createElement("div");
+						e.className = "dropdown-loading", e.textContent = "Loading…", N.prepend(e);
+					} else if (z.value.length === 0) if (B.value) {
+						let e = document.createElement("button");
+						e.type = "button", e.className = "no-results-create", e.textContent = `Create "${B.value}"`, w.value === -1 && e.setAttribute("data-focused", ""), e.addEventListener("pointerdown", (e) => {
+							e.preventDefault();
+						}), e.addEventListener("click", (e) => {
+							e.stopPropagation(), $(B.value, e);
+						}), N.appendChild(e);
+					} else {
+						let e = document.createElement("div");
+						e.className = "no-results", e.setAttribute("role", "presentation"), e.textContent = "No results found", N.appendChild(e);
+					}
+					Q();
+				}
+			}), g([
+				y,
+				n.multiple,
+				w,
+				C,
+				D
+			], () => {
+				y.value && Q();
+			}, { immediate: !0 }), () => {
+				Z.destroy(), W.destroy(), e();
+			};
+		}), f`
+      <slot></slot>
+      <div class="combobox-wrapper" part="wrapper">
+        <label
+          class="label-outside"
+          for="${r}"
+          id="${o}"
+          ref=${l}
+          hidden
+          part="label"></label>
+        <div
+          class="field"
+          part="field"
+          @click="${() => {
+			y.value || J(!1, "trigger"), P();
+		}}">
+          <label class="label-inset" for="${r}" id="${o}" ref=${u} hidden part="label"></label>
+          <div class="field-row">
+            <div class="chips-row">
+              <!-- Keep chip list diffing isolated so input node identity stays stable. -->
+              <span class="chips-list">
+                ${() => (S.value ? C.value : []).map((e) => f`
+                      <bit-chip
+                        value=${e.value}
+                        aria-label=${e.label || e.value}
+                        mode="removable"
+                        variant="flat"
+                        size="sm"
+                        color=${() => n.color.value}
+                        @remove=${Ae}>
+                        ${e.label || e.value}
+                      </bit-chip>
+                    `)}
+              </span>
+              <input
+                ref=${(e) => {
+			if (A = e, !e) {
+				j = null;
+				return;
+			}
+			j = e.closest(".field"), s(e, {
+				activedescendant: () => w.value >= 0 ? `${r}-opt-${w.value}` : null,
+				autocomplete: "list",
+				controls: () => `${r}-listbox`,
+				describedby: () => n.error.value || n.helper.value ? a : null,
+				disabled: () => x.value,
+				expanded: () => y.value ? "true" : "false",
+				invalid: () => !!n.error.value,
+				labelledby: () => k.value ? o : null
+			});
+		}}
+                class="input"
+                part="input"
+                type="text"
+                role="combobox"
+                autocomplete="off"
+                spellcheck="false"
+                id="${r}"
+                name="${() => n.name.value}"
+                placeholder=${() => De.value}
+                :disabled="${() => x.value}"
+                @input=${Me}
+                @keydown=${Pe}
+                @focus=${Ne}
+                .value=${b} />
+            </div>
+            <button
+              class="clear-btn"
+              part="clear-btn"
+              type="button"
+              aria-label="Clear"
+              tabindex="-1"
+              ?hidden=${() => !O.value}
+              @click="${je}">
+              ${ne}
+            </button>
+            <span class="chevron" aria-hidden="true">
+              ${te}
+              <span class="loader" aria-label="Loading"></span>
+            </span>
+          </div>
+        </div>
+
+        <div class="dropdown" part="dropdown" id="${() => `${r}-dropdown`}" ?data-open=${() => y.value}>
+          <div
+            role="listbox"
+            id="${() => `${r}-listbox`}"
+            aria-label="${() => n.label.value || n.placeholder.value || "Options"}"></div>
+        </div>
+
+        <span
+          class="helper-text"
+          id="${a}"
+          part="helper-text"
+          aria-live="polite"
+          ?hidden=${() => V.value.hidden}
+          style=${() => V.value.isError ? "color: var(--color-error);" : ""}
+          >${() => V.value.text}</span
+        >
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		e(a),
+		...r,
+		t(),
+		n(".input"),
+		o
+	],
+	tag: "bit-combobox"
+});
+//#endregion
+export { _ as COMBOBOX_OPTION_TAG, v as COMBOBOX_TAG };
+
+//# sourceMappingURL=combobox.js.map

package/dist/combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.js","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createFormIds,\n  css,\n  defineComponent,\n  defineField,\n  effect,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  ref,\n  signal,\n  typed,\n  watch,\n} from '@vielzeug/craftit';\nimport {\n  createListNavigation,\n  createOverlayControl,\n  createSelectionControl,\n  type ListNavigationResult,\n  type OverlayOpenReason,\n} from '@vielzeug/craftit/labs';\n\nimport type { AddEventListeners } from '../../types';\n\nimport '../../feedback/chip/chip';\nimport { checkIconHTML, chevronDownIcon, clearIcon } from '../../icons';\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountLabelSyncStandalone } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { computeControlledCsvState, createChoiceChangeDetail, resolveMergedAssistiveText } from '../shared/utils';\nimport { createFieldValidation } from '../shared/validation';\nimport {\n  backfillSelectionLabels,\n  filterOptions,\n  getCreatableLabel,\n  makeCreatableValue,\n  parseSlottedOptions,\n} from './combobox-options';\nimport { createComboboxVirtualizer } from './combobox-virtualizer';\nimport componentStyles from './combobox.css?inline';\nimport {\n  type BitComboboxEvents,\n  type BitComboboxProps,\n  type ComboboxOptionItem,\n  type ComboboxSelectionItem,\n} from './combobox.types';\n\nexport type { BitComboboxEvents, BitComboboxOptionProps, BitComboboxProps } from './combobox.types';\n\n// ============================================\n// Styles\n// ============================================\n\n// ============================================\n// ComboboxOption Component\n// ============================================\n\n/**\n * `bit-combobox-option` — A child element of `<bit-combobox>` that represents one option.\n *\n * @slot         - Label text for the option.\n * @slot icon    - Optional leading icon or decoration.\n */\nexport const COMBOBOX_OPTION_TAG = defineComponent({\n  setup() {\n    const optionStyles = /* css */ css`\n      @layer buildit.base {\n        :host {\n          display: none;\n        }\n      }\n    `;\n\n    return html`<style>\n      ${optionStyles}\n    </style>`;\n  },\n  tag: 'bit-combobox-option',\n});\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * `bit-combobox` — Autocomplete/combobox text input with a filterable listbox.\n *\n * Place `<bit-combobox-option>` elements as children to define the available options.\n * Each option supports a `label` attribute (falls back to text content) and an `icon` named slot.\n *\n * @example\n * ```html\n * <bit-combobox label=\"Country\" placeholder=\"Search\\u2026\">\n *   <bit-combobox-option value=\"us\">United States</bit-combobox-option>\n *   <bit-combobox-option value=\"gb\">United Kingdom</bit-combobox-option>\n *   <bit-combobox-option value=\"de\" disabled>Germany</bit-combobox-option>\n * </bit-combobox>\n * ```\n */\nexport const COMBOBOX_TAG = defineComponent<BitComboboxProps, BitComboboxEvents>({\n  formAssociated: true,\n  props: {\n    clearable: { default: false },\n    color: { default: undefined },\n    creatable: { default: false },\n    disabled: { default: false },\n    error: { default: '', omit: true },\n    fullwidth: { default: false },\n    helper: { default: '' },\n    label: { default: '' },\n    'label-placement': { default: 'inset' },\n    loading: { default: false },\n    multiple: { default: false },\n    name: { default: '' },\n    'no-filter': { default: false },\n    options: typed<ComboboxOptionItem[] | undefined>(undefined, { reflect: false }),\n    placeholder: { default: '' },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    value: { default: '' },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const { fieldId: comboId, helperId, labelId } = createFormIds('combobox', props.name.value);\n    // Label refs\n    const labelOutsideRef = ref<HTMLLabelElement>();\n    const labelInsetRef = ref<HTMLLabelElement>();\n    const formCtx = inject(FORM_CTX, undefined);\n    // Signal for the form value\n    const formValue = signal(String(props.value.value ?? ''));\n    const fd = defineField(\n      { disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)), value: formValue },\n      {\n        onReset: () => {\n          formValue.value = '';\n          selectedValues.value = [];\n          query.value = '';\n        },\n      },\n    );\n\n    const { triggerValidation } = createFieldValidation(formCtx, fd);\n\n    // ── State ────────────────────────────────────────────────────────────────\n    const isOpen = signal(false);\n    const query = signal('');\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const isMultiple = computed(() => Boolean(props.multiple.value));\n    const isCreatable = computed(() => Boolean(props.creatable.value));\n    const isNoFilter = computed(() => Boolean(props['no-filter'].value));\n\n    watch(\n      isOpen,\n      (value) => {\n        host.toggleAttribute('open', ((value) => Boolean(value))(value));\n      },\n      { immediate: true },\n    );\n\n    // Multi-value state: always an array; single mode uses at most one entry\n    const selectedValues = signal<ComboboxSelectionItem[]>(\n      props.value.value ? [{ label: '', value: props.value.value }] : [],\n    );\n    const focusedIndex = signal(-1);\n    const selectionController = createSelectionControl<ComboboxSelectionItem>({\n      findByKey: (value) => {\n        const existing = selectedValues.value.find((item) => item.value === value);\n\n        if (existing) return existing;\n\n        // If not found in selection, try to find in all options to get label\n        const option = allOptions.value.find((o) => o.value === value);\n\n        if (option) return { label: option.label, value: option.value };\n\n        // Fallback: key is the value\n        return { label: '', value };\n      },\n      getMode: () => (isMultiple.value ? 'multiple' : 'single'),\n      getSelected: () => selectedValues.value,\n      keyExtractor: (item) => item.value,\n      setSelected: (next) => {\n        selectedValues.value = next;\n      },\n    });\n\n    // Sync external value prop changes to selectedValues (controlled mode)\n    const syncControlledValue = (nextValue: unknown): void => {\n      const state = computeControlledCsvState(String(nextValue ?? ''));\n\n      if (state.isEmpty) {\n        selectionController.clear();\n        query.value = '';\n        formValue.value = '';\n\n        return;\n      }\n\n      if (isMultiple.value) {\n        selectedValues.value = state.values.map((value) => ({ label: '', value }));\n        formValue.value = state.formValue;\n\n        return;\n      }\n\n      // Single mode: one value\n      selectedValues.value = [{ label: '', value: state.firstValue }];\n      formValue.value = state.firstValue;\n    };\n\n    watch(props.value, (newValue) => syncControlledValue(newValue), { immediate: true });\n    watch(props.multiple, () => syncControlledValue(props.value.value));\n\n    // Convenience getter for single-select\n    const selectedValue = computed(() => selectedValues.value[0]?.value ?? '');\n    const hasValue = computed(() => selectedValues.value.length > 0);\n    const hasLabel = computed(() => !!props.label.value);\n    let inputEl: HTMLInputElement | null = null;\n    let fieldEl: HTMLElement | null = null;\n    let dropdownEl: HTMLElement | null = null;\n    let listboxEl: HTMLElement | null = null;\n\n    function getLiveInput(): HTMLInputElement | null {\n      const liveInput = host.shadowRoot?.querySelector<HTMLInputElement>('input[role=\"combobox\"]') ?? null;\n\n      if (liveInput) inputEl = liveInput;\n\n      return liveInput ?? inputEl;\n    }\n\n    function focusLiveInput() {\n      getLiveInput()?.focus();\n    }\n\n    // ── Options ──────────────────────────────────────────────────────────────\n    const slottedOptions = signal<ComboboxOptionItem[]>([]);\n    const createdOptions = signal<ComboboxOptionItem[]>([]);\n    const isLoading = computed(() => Boolean(props.loading.value));\n    // Merged options: explicit prop value overrides slotted options.\n    const allOptions = computed<ComboboxOptionItem[]>(() => {\n      const base = props.options.value ?? slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    function readOptions(elements: Element[] = Array.from(host.children)) {\n      slottedOptions.value = parseSlottedOptions(elements);\n\n      // Backfill labels for any already-selected values that were set before options loaded\n      if (selectedValues.value.length > 0) {\n        selectedValues.value = backfillSelectionLabels(selectedValues.value, allOptions.value);\n\n        // Also sync the query in single mode\n        if (!isMultiple.value && selectedValues.value.length === 1) {\n          query.value = selectedValues.value[0]?.label ?? '';\n        }\n      }\n    }\n\n    const filteredOptions = computed<ComboboxOptionItem[]>(() => {\n      return filterOptions(allOptions.value, query.value, isNoFilter.value);\n    });\n    // \"Create\" option shown when creatable + query doesn't match any existing option\n    const creatableLabel = computed(() => {\n      return getCreatableLabel(query.value, isCreatable.value, filteredOptions.value);\n    });\n    const assistiveText = computed(() => resolveMergedAssistiveText(props.error.value, props.helper.value));\n    const inputPlaceholder = computed(() =>\n      isMultiple.value && selectedValues.value.length > 0 ? '' : props.placeholder.value || '',\n    );\n\n    const selectedValueItems = computed(() => selectedValues.value.map((s) => s.value));\n    const selectedLabelItems = computed(() =>\n      selectedValues.value.map((selection) => {\n        if (selection.label) return selection.label;\n\n        return allOptions.value.find((option) => option.value === selection.value)?.label ?? selection.value;\n      }),\n    );\n\n    function syncMultipleFormValue() {\n      formValue.value = selectionController.serialize(',');\n    }\n\n    function emitChange(originalEvent?: Event) {\n      emit('change', createChoiceChangeDetail(selectedValueItems.value, selectedLabelItems.value, originalEvent));\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      syncMultipleFormValue();\n      emitChange(event);\n      triggerValidation('change');\n    }\n\n    // ── Positioning (shared positioner) ──────────────────────────────────────\n    const positioner = createDropdownPositioner(\n      () => fieldEl,\n      () => dropdownEl,\n    );\n\n    const listNavigation = createListNavigation<ComboboxOptionItem>({\n      getIndex: () => focusedIndex.value,\n      getItems: () => filteredOptions.value,\n      isItemDisabled: (option) => option.disabled,\n      setIndex: (index) => {\n        focusedIndex.value = index;\n        scrollFocusedIntoView();\n      },\n    });\n\n    const overlay = createOverlayControl({\n      getBoundaryElement: () => host,\n      getPanelElement: () => dropdownEl,\n      getTriggerElement: () => inputEl,\n      isDisabled: () => isDisabled.value,\n      isOpen: () => isOpen.value,\n      positioner: {\n        floating: () => dropdownEl,\n        reference: () => fieldEl,\n        update: () => positioner.updatePosition(),\n      },\n      restoreFocus: false,\n      setOpen: (next, _context) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const applyNavigationResult = (result: ListNavigationResult): void => {\n      if (result.reason === 'empty' || result.reason === 'no-enabled-item') {\n        focusedIndex.value = -1;\n      }\n    };\n\n    // ── Open / Close ─────────────────────────────────────────────────────────\n    function open(clearFilter = true, reason: OverlayOpenReason = 'programmatic') {\n      if (clearFilter) query.value = '';\n\n      overlay.open({ reason });\n    }\n\n    function close(reason: 'escape' | 'programmatic' | 'outside-click' | 'toggle' = 'programmatic') {\n      overlay.close({ reason, restoreFocus: false });\n\n      // In single mode restore the query to the selected label (or clear)\n      if (!isMultiple.value) {\n        const match = allOptions.value.find((o) => o.value === selectedValue.value);\n\n        query.value = match?.label ?? '';\n      } else {\n        query.value = '';\n      }\n\n      triggerValidation('blur');\n    }\n    // ── Selection ────────────────────────────────────────────────────────────\n    function selectOption(opt: ComboboxOptionItem, originalEvent?: Event) {\n      if (opt.disabled) return;\n\n      if (isMultiple.value) {\n        selectionController.toggle(opt.value);\n        syncMultipleFormValue();\n        query.value = '';\n        emitChange(originalEvent);\n        triggerValidation('change');\n        // Keep dropdown open in multiple mode\n        focusLiveInput();\n        requestAnimationFrame(() => focusLiveInput());\n      } else {\n        selectionController.select(opt.value);\n        query.value = opt.label;\n        formValue.value = opt.value;\n        emitChange(originalEvent);\n        triggerValidation('change');\n        close();\n        focusLiveInput();\n      }\n    }\n    function clearValue(e: Event) {\n      e.stopPropagation();\n      selectionController.clear();\n      query.value = '';\n      formValue.value = '';\n      emitChange(e);\n      triggerValidation('change');\n      focusLiveInput();\n    }\n    function handleInput(e: Event) {\n      const target = e.target as HTMLInputElement;\n\n      query.value = target.value;\n\n      if (!isMultiple.value) selectionController.clear();\n\n      applyNavigationResult(listNavigation.first());\n\n      if (!isOpen.value) open(false, 'trigger');\n\n      emit('search', { query: target.value } as { query: string });\n    }\n    function handleFocus() {\n      if (!isOpen.value) open(false, 'trigger');\n    }\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      const opts = filteredOptions.value;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open(true, 'trigger');\n\n            applyNavigationResult(listNavigation.first());\n          } else {\n            applyNavigationResult(listNavigation.next());\n          }\n\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n\n          if (!isOpen.value) {\n            open(true, 'trigger');\n          } else {\n            applyNavigationResult(listNavigation.prev());\n          }\n\n          break;\n        case 'Backspace':\n          // In multiple mode, remove the last chip when the input is empty\n          if (isMultiple.value && !query.value && selectedValues.value.length > 0) {\n            selectedValues.value = selectedValues.value.slice(0, -1);\n            syncMultipleFormValue();\n            emitChange(e);\n            triggerValidation('change');\n          }\n\n          break;\n        case 'End':\n          if (isOpen.value) {\n            e.preventDefault();\n            applyNavigationResult(listNavigation.last());\n          }\n\n          break;\n        case 'Enter':\n          e.preventDefault();\n\n          if (isOpen.value && focusedIndex.value >= 0 && focusedIndex.value < opts.length) {\n            selectOption(opts[focusedIndex.value], e);\n          } else if (isOpen.value && focusedIndex.value === -1 && creatableLabel.value) {\n            // Focused on the \"create\" item\n            createOption(creatableLabel.value, e);\n          } else if (!isOpen.value) {\n            open();\n          }\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            close('escape');\n          }\n\n          break;\n        case 'Home':\n          if (isOpen.value) {\n            e.preventDefault();\n            applyNavigationResult(listNavigation.first());\n          }\n\n          break;\n        case 'Tab':\n          close('programmatic');\n          break;\n        default:\n          break;\n      }\n    }\n    function scrollFocusedIntoView() {\n      if (focusedIndex.value >= 0) {\n        domVirtualList.scrollToIndex(focusedIndex.value, { align: 'auto' });\n\n        return;\n      }\n\n      if (!listboxEl) return;\n\n      const focusedEl = listboxEl.querySelector<HTMLElement>('[data-focused]');\n\n      focusedEl?.scrollIntoView({ block: 'nearest' });\n    }\n\n    // ── Virtualizer ──────────────────────────────────────────────────────────\n    const { domVirtualList, setupVirtualizer, updateRenderedItemState } = createComboboxVirtualizer({\n      checkIconHTML,\n      comboId,\n      getDropdownElement: () => dropdownEl,\n      getFocusedIndex: () => focusedIndex.peek(),\n      getIsMultiple: () => isMultiple.peek(),\n      getListboxElement: () => listboxEl,\n      getSelectedValue: () => selectedValue.peek(),\n      getSelectedValues: () => selectedValues.peek(),\n      onSelectOption: selectOption,\n      setFocusedIndex: (index) => {\n        focusedIndex.value = index;\n      },\n    });\n\n    // ── Create option ────────────────────────────────────────────────────────\n    function createOption(label: string, originalEvent?: Event) {\n      const value = makeCreatableValue(label);\n      const newOpt: ComboboxOptionItem = { disabled: false, iconEl: null, label, value };\n\n      createdOptions.value = [...createdOptions.value, newOpt];\n      selectOption(newOpt, originalEvent);\n    }\n    // ── Lifecycle ────────────────────────────────────────────────────────────\n    onMount(() => {\n      fieldEl = inputEl?.closest('.field') as HTMLElement | null;\n      dropdownEl = host.shadowRoot?.querySelector<HTMLElement>('.dropdown') ?? null;\n      listboxEl = host.shadowRoot?.querySelector<HTMLElement>('[role=\"listbox\"]') ?? null;\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      onSlotChange('default', readOptions);\n      // Ensure initial light-DOM options are available for immediate keyboard interaction.\n      readOptions();\n      // Rebuild virtualizer when filtered options or open state changes\n      effect(() => {\n        const opts = filteredOptions.value;\n        const open = isOpen.value;\n\n        if (open && opts.length > 0) {\n          requestAnimationFrame(() => setupVirtualizer(opts, open));\n        } else {\n          domVirtualList.update(opts, false);\n        }\n      });\n      mountLabelSyncStandalone(labelInsetRef, labelOutsideRef, props);\n      effect(() => {\n        if (listboxEl) {\n          // Remove existing state nodes\n          for (const el of Array.from(listboxEl.querySelectorAll('.no-results,.no-results-create,.dropdown-loading')))\n            el.remove();\n\n          if (isLoading.value) {\n            const loadingEl = document.createElement('div');\n\n            loadingEl.className = 'dropdown-loading';\n            loadingEl.textContent = 'Loading\\u2026';\n            listboxEl.prepend(loadingEl);\n          } else if (filteredOptions.value.length === 0) {\n            if (creatableLabel.value) {\n              const createEl = document.createElement('button');\n\n              createEl.type = 'button';\n              createEl.className = 'no-results-create';\n              createEl.textContent = `Create \"${creatableLabel.value}\"`;\n\n              // Apply focused state when keyboard nav lands here (focusedIndex === -1 means create row)\n              if (focusedIndex.value === -1) createEl.setAttribute('data-focused', '');\n\n              createEl.addEventListener('pointerdown', (e: PointerEvent) => {\n                e.preventDefault();\n              });\n\n              createEl.addEventListener('click', (e) => {\n                e.stopPropagation();\n                createOption(creatableLabel.value, e);\n              });\n              listboxEl.appendChild(createEl);\n            } else {\n              const noResults = document.createElement('div');\n\n              noResults.className = 'no-results';\n              noResults.setAttribute('role', 'presentation');\n              noResults.textContent = 'No results found';\n              listboxEl.appendChild(noResults);\n            }\n          }\n\n          // Update focused/selected state on already-rendered items without touching\n          // the DOM structure. The virtualizer owns full re-renders via onChange.\n          updateRenderedItemState();\n        }\n      });\n      // Keep rendered option selected/focused attributes in sync while the popup stays open.\n      watch(\n        [isOpen, props.multiple, focusedIndex, selectedValues, selectedValue],\n        () => {\n          if (!isOpen.value) return;\n\n          updateRenderedItemState();\n        },\n        { immediate: true },\n      );\n\n      return () => {\n        domVirtualList.destroy();\n        positioner.destroy();\n        removeOutsideClick();\n      };\n    });\n\n    return html`\n      <slot></slot>\n      <div class=\"combobox-wrapper\" part=\"wrapper\">\n        <label\n          class=\"label-outside\"\n          for=\"${comboId}\"\n          id=\"${labelId}\"\n          ref=${labelOutsideRef}\n          hidden\n          part=\"label\"></label>\n        <div\n          class=\"field\"\n          part=\"field\"\n          @click=\"${() => {\n            if (!isOpen.value) open(false, 'trigger');\n\n            focusLiveInput();\n          }}\">\n          <label class=\"label-inset\" for=\"${comboId}\" id=\"${labelId}\" ref=${labelInsetRef} hidden part=\"label\"></label>\n          <div class=\"field-row\">\n            <div class=\"chips-row\">\n              <!-- Keep chip list diffing isolated so input node identity stays stable. -->\n              <span class=\"chips-list\">\n                ${() =>\n                  (isMultiple.value ? selectedValues.value : []).map(\n                    (item) => html`\n                      <bit-chip\n                        value=${item.value}\n                        aria-label=${item.label || item.value}\n                        mode=\"removable\"\n                        variant=\"flat\"\n                        size=\"sm\"\n                        color=${() => props.color.value}\n                        @remove=${removeChip}>\n                        ${item.label || item.value}\n                      </bit-chip>\n                    `,\n                  )}\n              </span>\n              <input\n                ref=${(el: HTMLInputElement | null) => {\n                  inputEl = el;\n\n                  if (!el) {\n                    fieldEl = null;\n\n                    return;\n                  }\n\n                  fieldEl = el.closest('.field') as HTMLElement | null;\n                  aria(el, {\n                    activedescendant: () => (focusedIndex.value >= 0 ? `${comboId}-opt-${focusedIndex.value}` : null),\n                    autocomplete: 'list',\n                    controls: () => `${comboId}-listbox`,\n                    describedby: () => (props.error.value || props.helper.value ? helperId : null),\n                    disabled: () => isDisabled.value,\n                    expanded: () => (isOpen.value ? 'true' : 'false'),\n                    invalid: () => !!props.error.value,\n                    labelledby: () => (hasLabel.value ? labelId : null),\n                  });\n                }}\n                class=\"input\"\n                part=\"input\"\n                type=\"text\"\n                role=\"combobox\"\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                id=\"${comboId}\"\n                name=\"${() => props.name.value}\"\n                placeholder=${() => inputPlaceholder.value}\n                :disabled=\"${() => isDisabled.value}\"\n                @input=${handleInput}\n                @keydown=${handleKeydown}\n                @focus=${handleFocus}\n                .value=${query} />\n            </div>\n            <button\n              class=\"clear-btn\"\n              part=\"clear-btn\"\n              type=\"button\"\n              aria-label=\"Clear\"\n              tabindex=\"-1\"\n              ?hidden=${() => !hasValue.value}\n              @click=\"${clearValue}\">\n              ${clearIcon}\n            </button>\n            <span class=\"chevron\" aria-hidden=\"true\">\n              ${chevronDownIcon}\n              <span class=\"loader\" aria-label=\"Loading\"></span>\n            </span>\n          </div>\n        </div>\n\n        <div class=\"dropdown\" part=\"dropdown\" id=\"${() => `${comboId}-dropdown`}\" ?data-open=${() => isOpen.value}>\n          <div\n            role=\"listbox\"\n            id=\"${() => `${comboId}-listbox`}\"\n            aria-label=\"${() => props.label.value || props.placeholder.value || 'Options'}\"></div>\n        </div>\n\n        <span\n          class=\"helper-text\"\n          id=\"${helperId}\"\n          part=\"helper-text\"\n          aria-live=\"polite\"\n          ?hidden=${() => assistiveText.value.hidden}\n          style=${() => (assistiveText.value.isError ? 'color: var(--color-error);' : '')}\n          >${() => assistiveText.value.text}</span\n        >\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    sizeVariantMixin(FIELD_SIZE_PRESET),\n    ...formFieldMixins,\n    disabledLoadingMixin(),\n    forcedColorsFocusMixin('.input'),\n    componentStyles,\n  ],\n  tag: 'bit-combobox',\n}) as unknown as AddEventListeners<BitComboboxEvents>;\n"],"mappings":"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"}

package/dist/content/avatar/avatar-group.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{flex-direction:row;display:inline-flex}::slotted(bit-avatar){--avatar-border:var(--border-2) solid var(--color-canvas)}::slotted(bit-avatar):not(:is()){margin-left:calc(var(--avatar-group-overlap,-.75rem))}::slotted(bit-avatar):is(){margin-right:calc(var(--avatar-group-overlap,-.75rem))}::slotted(bit-avatar:first-child):not(:is()){margin-left:0}::slotted(bit-avatar:first-child):is(){margin-right:0}::slotted(bit-avatar[data-avatar-group-hidden]){display:none}.overflow-badge{--_size:var(--avatar-size,var(--size-10));box-sizing:border-box;width:var(--_size);height:var(--_size);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-700);-webkit-user-select:none;user-select:none;background:var(--color-contrast-200);border:var(--border-2) solid var(--color-canvas);border-radius:var(--rounded-full);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.overflow-badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:calc(var(--avatar-group-overlap,-.75rem))}.overflow-badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--avatar-group-overlap,-.75rem))}}`;exports.default=e;
+//# sourceMappingURL=avatar-group.css?inline.cjs.map

package/dist/content/avatar/avatar-group.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.css?inline.cjs","names":[],"sources":["../../../src/content/avatar/avatar-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: inline-flex;\n    flex-direction: row;\n  }\n\n  /* Overlap avatars, latest first */\n  ::slotted(bit-avatar) {\n    --avatar-border: var(--border-2) solid var(--color-canvas);\n\n    margin-inline-start: calc(var(--avatar-group-overlap, -0.75rem));\n  }\n\n  ::slotted(bit-avatar:first-child) {\n    margin-inline-start: 0;\n  }\n\n  ::slotted(bit-avatar[data-avatar-group-hidden]) {\n    display: none;\n  }\n\n  .overflow-badge {\n    --_size: var(--avatar-size, var(--size-10));\n\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    height: var(--_size);\n    margin-inline-start: calc(var(--avatar-group-overlap, -0.75rem));\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n    user-select: none;\n    background: var(--color-contrast-200);\n    border: var(--border-2) solid var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n}\n"],"mappings":""}

package/dist/content/avatar/avatar-group.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/avatar/avatar-group.css?inline
+var e = "@layer buildit.base{:host{flex-direction:row;display:inline-flex}::slotted(bit-avatar){--avatar-border:var(--border-2) solid var(--color-canvas)}::slotted(bit-avatar):not(:is()){margin-left:calc(var(--avatar-group-overlap,-.75rem))}::slotted(bit-avatar):is(){margin-right:calc(var(--avatar-group-overlap,-.75rem))}::slotted(bit-avatar:first-child):not(:is()){margin-left:0}::slotted(bit-avatar:first-child):is(){margin-right:0}::slotted(bit-avatar[data-avatar-group-hidden]){display:none}.overflow-badge{--_size:var(--avatar-size,var(--size-10));box-sizing:border-box;width:var(--_size);height:var(--_size);font-size:var(--text-xs);font-weight:var(--font-semibold);color:var(--color-contrast-700);-webkit-user-select:none;user-select:none;background:var(--color-contrast-200);border:var(--border-2) solid var(--color-canvas);border-radius:var(--rounded-full);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.overflow-badge:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){margin-left:calc(var(--avatar-group-overlap,-.75rem))}.overflow-badge:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){margin-right:calc(var(--avatar-group-overlap,-.75rem))}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=avatar-group.css?inline.js.map

package/dist/content/avatar/avatar-group.css?inline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.css?inline.js","names":[],"sources":["../../../src/content/avatar/avatar-group.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    display: inline-flex;\n    flex-direction: row;\n  }\n\n  /* Overlap avatars, latest first */\n  ::slotted(bit-avatar) {\n    --avatar-border: var(--border-2) solid var(--color-canvas);\n\n    margin-inline-start: calc(var(--avatar-group-overlap, -0.75rem));\n  }\n\n  ::slotted(bit-avatar:first-child) {\n    margin-inline-start: 0;\n  }\n\n  ::slotted(bit-avatar[data-avatar-group-hidden]) {\n    display: none;\n  }\n\n  .overflow-badge {\n    --_size: var(--avatar-size, var(--size-10));\n\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    height: var(--_size);\n    margin-inline-start: calc(var(--avatar-group-overlap, -0.75rem));\n    font-size: var(--text-xs);\n    font-weight: var(--font-semibold);\n    color: var(--color-contrast-700);\n    user-select: none;\n    background: var(--color-contrast-200);\n    border: var(--border-2) solid var(--color-canvas);\n    border-radius: var(--rounded-full);\n  }\n}\n"],"mappings":""}

package/dist/content/avatar/avatar.css?inline.cjs

@@ -0,0 +1,2 @@
+var e=`@layer buildit.base{:host{--_bg:var(--avatar-bg,var(--_theme-backdrop,var(--color-contrast-200)));--_color:var(--avatar-color,var(--_theme-base,var(--color-contrast-700)));--_radius:var(--avatar-radius,var(--rounded-full));--_font-weight:var(--avatar-font-weight,var(--font-semibold));--_border:var(--avatar-border,none);--_border-color:var(--avatar-border-color,var(--color-canvas));--_size:var(--avatar-size,var(--size-10));--_font-size:var(--avatar-font-size,var(--text-sm));flex-shrink:0;display:inline-flex;position:relative}.avatar{box-sizing:border-box;width:var(--_size);height:var(--_size);font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);text-transform:uppercase;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--_border);border-color:var(--_border-color);border-radius:var(--_radius);justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}img{object-fit:cover;width:100%;height:100%;display:block}img[hidden]{display:none}.initials{justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex}.icon-fallback{width:100%;height:100%;color:var(--_color);opacity:.6;justify-content:center;align-items:center;display:inline-flex}.status{border:2px solid var(--_border-color,var(--color-canvas));border-radius:var(--rounded-full);width:.75em;height:.75em;position:absolute;bottom:0}.status:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.status:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.status[data-status=online]{background:var(--color-success)}.status[data-status=offline]{background:var(--color-contrast-400)}.status[data-status=busy]{background:var(--color-error)}.status[data-status=away]{background:var(--color-warning)}}@media (forced-colors:active){.avatar{forced-color-adjust:none;border:1px solid buttontext}.status{background:highlight;border:2px solid buttontext}}`;exports.default=e;
+//# sourceMappingURL=avatar.css?inline.cjs.map

package/dist/content/avatar/avatar.css?inline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.css?inline.cjs","names":[],"sources":["../../../src/content/avatar/avatar.css?inline"],"sourcesContent":["@layer buildit.base {\n  :host {\n    --_bg: var(--avatar-bg, var(--_theme-backdrop, var(--color-contrast-200)));\n    --_color: var(--avatar-color, var(--_theme-base, var(--color-contrast-700)));\n    --_radius: var(--avatar-radius, var(--rounded-full));\n    --_font-weight: var(--avatar-font-weight, var(--font-semibold));\n    --_border: var(--avatar-border, none);\n    --_border-color: var(--avatar-border-color, var(--color-canvas));\n    --_size: var(--avatar-size, var(--size-10));\n    --_font-size: var(--avatar-font-size, var(--text-sm));\n\n    position: relative;\n    display: inline-flex;\n    flex-shrink: 0;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_size);\n    height: var(--_size);\n    overflow: hidden;\n    font-size: var(--_font-size);\n    font-weight: var(--_font-weight);\n    line-height: 1;\n    color: var(--_color);\n    text-transform: uppercase;\n    user-select: none;\n    background: var(--_bg);\n    border: var(--_border);\n    border-color: var(--_border-color);\n    border-radius: var(--_radius);\n  }\n\n  img {\n    display: block;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  img[hidden] {\n    display: none;\n  }\n\n  .initials {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n  }\n\n  .icon-fallback {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    color: var(--_color);\n    opacity: 0.6;\n  }\n\n  .status {\n    position: absolute;\n    inset-inline-end: 0;\n    bottom: 0;\n    width: 0.75em;\n    height: 0.75em;\n    border: 2px solid var(--_border-color, var(--color-canvas));\n    border-radius: var(--rounded-full);\n  }\n\n  .status[data-status='online'] {\n    background: var(--color-success);\n  }\n\n  .status[data-status='offline'] {\n    background: var(--color-contrast-400);\n  }\n\n  .status[data-status='busy'] {\n    background: var(--color-error);\n  }\n\n  .status[data-status='away'] {\n    background: var(--color-warning);\n  }\n}\n\n/* forcedColorsMixin targets :host; avatar needs the border on .avatar (different geometry),\n     so forced-color rules are kept inline and unlayered to match mixin convention. */\n@media (forced-colors: active) {\n  .avatar {\n    forced-color-adjust: none;\n    border: 1px solid ButtonText;\n  }\n\n  .status {\n    background: Highlight;\n    border: 2px solid ButtonText;\n  }\n}\n"],"mappings":""}

package/dist/content/avatar/avatar.css?inline.js

@@ -0,0 +1,6 @@
+//#region src/content/avatar/avatar.css?inline
+var e = "@layer buildit.base{:host{--_bg:var(--avatar-bg,var(--_theme-backdrop,var(--color-contrast-200)));--_color:var(--avatar-color,var(--_theme-base,var(--color-contrast-700)));--_radius:var(--avatar-radius,var(--rounded-full));--_font-weight:var(--avatar-font-weight,var(--font-semibold));--_border:var(--avatar-border,none);--_border-color:var(--avatar-border-color,var(--color-canvas));--_size:var(--avatar-size,var(--size-10));--_font-size:var(--avatar-font-size,var(--text-sm));flex-shrink:0;display:inline-flex;position:relative}.avatar{box-sizing:border-box;width:var(--_size);height:var(--_size);font-size:var(--_font-size);font-weight:var(--_font-weight);color:var(--_color);text-transform:uppercase;-webkit-user-select:none;user-select:none;background:var(--_bg);border:var(--_border);border-color:var(--_border-color);border-radius:var(--_radius);justify-content:center;align-items:center;line-height:1;display:inline-flex;overflow:hidden}img{object-fit:cover;width:100%;height:100%;display:block}img[hidden]{display:none}.initials{justify-content:center;align-items:center;width:100%;height:100%;display:inline-flex}.icon-fallback{width:100%;height:100%;color:var(--_color);opacity:.6;justify-content:center;align-items:center;display:inline-flex}.status{border:2px solid var(--_border-color,var(--color-canvas));border-radius:var(--rounded-full);width:.75em;height:.75em;position:absolute;bottom:0}.status:not(:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi))){right:0}.status:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){left:0}.status[data-status=online]{background:var(--color-success)}.status[data-status=offline]{background:var(--color-contrast-400)}.status[data-status=busy]{background:var(--color-error)}.status[data-status=away]{background:var(--color-warning)}}@media (forced-colors:active){.avatar{forced-color-adjust:none;border:1px solid buttontext}.status{background:highlight;border:2px solid buttontext}}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=avatar.css?inline.js.map