@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { computed, defineComponent, html, signal, typed, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Icons\n// ============================================\n\n// Small close icon for remove button (relative sizing for chip)\nconst CHIP_CLOSE_ICON = html`\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2.5\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    width=\"0.75em\"\n    height=\"0.75em\"\n    aria-hidden=\"true\">\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </svg>\n`;\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Accessible label (required for icon-only chips) */\n  'aria-label'?: string;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\ntype BitChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<BitChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<BitChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<BitChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<BitChipMode, 'action'>;\n};\n\ntype BitChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: BitChipMode;\n};\n\nexport type BitChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type BitChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element bit-chip\n *\n * @attr {string}  aria-label - Accessible label (required for icon-only chips)\n * @attr {string}  color     - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  variant   - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string}  size      - Component size: 'sm' | 'md' | 'lg'\n * @attr {string}  rounded   - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @event remove - Fired when the remove button is clicked, with `detail.value` and `detail.originalEvent`\n * @event change - Fired when a selectable chip toggles, with `detail.checked`, `detail.value`, and `detail.originalEvent`\n * @event click  - Fired when an action chip is clicked, with `detail.value` and `detail.originalEvent`\n *\n * @cssprop --chip-bg           - Background color\n * @cssprop --chip-color        - Text color\n * @cssprop --chip-border-color - Border color\n * @cssprop --chip-radius       - Border radius\n * @cssprop --chip-font-size    - Font size\n * @cssprop --chip-font-weight  - Font weight\n * @cssprop --chip-padding-x    - Horizontal padding\n * @cssprop --chip-padding-y    - Vertical padding\n * @cssprop --chip-gap          - Gap between icon, label and remove button\n *\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <bit-chip color=\"primary\">Design</bit-chip>\n *\n * <!-- Removable chip -->\n * <bit-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </bit-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <bit-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </bit-chip>\n *\n * <!-- Icon-only chip -->\n * <bit-chip color=\"error\" mode=\"action\" aria-label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </bit-chip>\n * ```\n */\nexport const CHIP_TAG = defineComponent<BitChipComponentProps, BitChipEvents>({\n  props: {\n    'aria-label': typed<BitChipComponentProps['aria-label']>(undefined),\n    checked: typed<BitChipComponentProps['checked']>(undefined, {\n      parse: (value) => (value == null ? undefined : value !== 'false'),\n    }),\n    color: typed<BitChipComponentProps['color']>(undefined),\n    'default-checked': typed<boolean>(false),\n    disabled: typed<boolean>(false),\n    mode: typed<BitChipMode>('static'),\n    rounded: typed<BitChipComponentProps['rounded']>(undefined),\n    size: typed<BitChipComponentProps['size']>(undefined),\n    value: typed<BitChipComponentProps['value']>(undefined),\n    variant: typed<BitChipComponentProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const checkedProp = props.checked;\n    const ariaLabelProp = props['aria-label'];\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(checkedProp.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(checkedProp, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return checkedProp.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    // Sync the [checked] attribute for CSS selectors across controlled and uncontrolled modes.\n    watch(\n      [isChecked, props.mode],\n      () => {\n        host.toggleAttribute('checked', props.mode.value === 'selectable' && isChecked.value);\n      },\n      { immediate: true },\n    );\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      // Button's disabled attribute prevents this from firing when disabled\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n    function handleActionClick(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        :aria-label=\"${() => {\n          const label = ariaLabelProp.value || props.value.value;\n\n          return label ? `Remove ${label}` : 'Remove';\n        }}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleRemove}\">\n        ${CHIP_CLOSE_ICON}\n      </button>\n    `;\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        :aria-checked=\"${() => String(isChecked.value)}\"\n        :aria-label=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        :aria-label=\"${() => ariaLabelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderStaticChip = () => html` <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span> `;\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\"> ${renderChipContent()} ${renderRemoveButton()} </span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin(),\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n  tag: 'bit-chip',\n});\n"],"mappings":"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"}
+{"version":3,"file":"chip.js","names":[],"sources":["../src/feedback/chip/chip.ts"],"sourcesContent":["import { define, computed, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport '../../content/icon/icon';\nimport {\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './chip.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\n/** Chip component properties */\ntype ChipBaseProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interactions */\n  disabled?: boolean;\n  /** Accessible label (required for icon-only chips) */\n  label?: string;\n  /** Border radius override */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Value associated with this chip — included in emitted event detail */\n  value?: string;\n  /** Visual style variant */\n  variant?: Exclude<VisualVariant, 'glass' | 'text' | 'frost'>;\n};\n\ntype BitChipMode = 'static' | 'removable' | 'selectable' | 'action';\n\n/** Read-only presentation chip */\ntype StaticChipProps = {\n  mode?: Extract<BitChipMode, 'static'>;\n};\n\n/** Removable chip mode */\ntype RemovableChipProps = {\n  mode: Extract<BitChipMode, 'removable'>;\n};\n\n/** Selectable chip mode */\ntype SelectableChipProps = {\n  /** Controlled checked state for `mode=\"selectable\"` */\n  checked?: boolean | undefined;\n  /** Initial checked state for uncontrolled `mode=\"selectable\"` */\n  'default-checked'?: boolean;\n  mode: Extract<BitChipMode, 'selectable'>;\n};\n\n/** Action chip mode — behaves like a button, fires a click event without maintaining state */\ntype ActionChipProps = {\n  mode: Extract<BitChipMode, 'action'>;\n};\n\ntype BitChipComponentProps = ChipBaseProps & {\n  checked?: boolean | undefined;\n  'default-checked'?: boolean;\n  mode?: BitChipMode;\n};\n\nexport type BitChipEvents = {\n  change: { checked: boolean; originalEvent: Event; value: string | undefined };\n  click: { originalEvent: MouseEvent; value: string | undefined };\n  remove: { originalEvent: MouseEvent; value: string | undefined };\n};\n\nexport type BitChipProps = ChipBaseProps &\n  (StaticChipProps | RemovableChipProps | SelectableChipProps | ActionChipProps);\n\n/**\n * A compact, styled label element. Supports icons, a remove button, colors, sizes, and variants.\n * Commonly used to represent tags, filters, or selected options in a multiselect field.\n *\n * @element bit-chip\n *\n * @attr {string}  label     - Accessible label (required for icon-only chips)\n * @attr {string}  color     - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string}  variant   - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost'\n * @attr {string}  size      - Component size: 'sm' | 'md' | 'lg'\n * @attr {string}  rounded   - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string}  mode      - Interaction mode: 'static' | 'removable' | 'selectable' | 'action'\n * @attr {boolean} disabled  - Disable the chip\n * @attr {string}  value     - Value included in emitted event detail\n * @attr {boolean} checked   - Controlled checked state for selectable chips\n * @attr {boolean} default-checked - Initial checked state for uncontrolled selectable chips\n *\n * @slot         - Chip label text\n * @slot icon    - Leading icon or decoration\n *\n * @event remove - Fired when the remove button is clicked, with `detail.value` and `detail.originalEvent`\n * @event change - Fired when a selectable chip toggles, with `detail.checked`, `detail.value`, and `detail.originalEvent`\n * @event click  - Fired when an action chip is clicked, with `detail.value` and `detail.originalEvent`\n *\n * @cssprop --chip-bg           - Background color\n * @cssprop --chip-color        - Text color\n * @cssprop --chip-border-color - Border color\n * @cssprop --chip-radius       - Border radius\n * @cssprop --chip-font-size    - Font size\n * @cssprop --chip-font-weight  - Font weight\n * @cssprop --chip-padding-x    - Horizontal padding\n * @cssprop --chip-padding-y    - Vertical padding\n * @cssprop --chip-gap          - Gap between icon, label and remove button\n *\n * @example\n * ```html\n * <!-- Static chip (read-only) -->\n * <bit-chip color=\"primary\">Design</bit-chip>\n *\n * <!-- Removable chip -->\n * <bit-chip color=\"success\" variant=\"flat\" mode=\"removable\" value=\"ts\">\n *   TypeScript\n * </bit-chip>\n *\n * <!-- Selectable chip (controlled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Selectable chip (uncontrolled) -->\n * <bit-chip color=\"info\" variant=\"flat\" mode=\"selectable\" default-checked value=\"ui\">\n *   UI\n * </bit-chip>\n *\n * <!-- Action chip (acts like a button) -->\n * <bit-chip color=\"warning\" mode=\"action\" value=\"add\">\n *   <svg slot=\"icon\" ...></svg>\n *   Add Item\n * </bit-chip>\n *\n * <!-- Icon-only chip -->\n * <bit-chip color=\"error\" mode=\"action\" label=\"Delete\">\n *   <svg slot=\"icon\" ...></svg>\n * </bit-chip>\n * ```\n */\nexport const CHIP_TAG = define<BitChipComponentProps, BitChipEvents>('bit-chip', {\n  props: {\n    checked: {\n      default: undefined as BitChipComponentProps['checked'],\n      parse: (value: string | null) => (value == null ? undefined : value !== 'false'),\n    },\n    color: undefined,\n    'default-checked': false,\n    disabled: false,\n    label: undefined,\n    mode: 'static',\n    rounded: undefined,\n    size: undefined,\n    value: undefined,\n    variant: undefined,\n  },\n  setup({ emit, host, props }) {\n    const checkedProp = props.checked;\n    const labelProp = props.label;\n    // ============================================\n    // State Management\n    // ============================================\n    // Once a checked prop is provided, treat the chip as controlled for the rest of its lifecycle.\n    const isControlled = signal(checkedProp.value !== undefined);\n    // Internal tracking for uncontrolled selectable chips; seeded from default-checked.\n    const checkedState = signal(!isControlled.value && props['default-checked'].value);\n\n    watch(checkedProp, (value) => {\n      if (value !== undefined) {\n        isControlled.value = true;\n      }\n    });\n\n    // Effective checked value — reactive to checked prop changes in controlled mode.\n    const isChecked = computed(() => {\n      if (props.mode.value !== 'selectable') return false;\n\n      if (isControlled.value) {\n        return checkedProp.value ?? false;\n      }\n\n      return checkedState.value;\n    });\n\n    host.bind('attr', {\n      checked: () => (props.mode.value === 'selectable' && isChecked.value ? true : undefined),\n    });\n    // ============================================\n    // Event Handlers\n    // ============================================\n    function handleRemove(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('remove', { originalEvent: e, value: props.value.value });\n    }\n\n    function handleSelectableActivate(e: MouseEvent) {\n      e.stopPropagation();\n\n      if (props.disabled.value) return;\n\n      const nextChecked = !isChecked.value;\n\n      if (!isControlled.value) {\n        checkedState.value = nextChecked;\n      }\n\n      emit('change', { checked: nextChecked, originalEvent: e, value: props.value.value });\n    }\n\n    function handleActionClick(e: MouseEvent) {\n      if (props.disabled.value) return;\n\n      emit('click', { originalEvent: e, value: props.value.value });\n    }\n\n    // ============================================\n    // Template Helpers\n    // ============================================\n    const renderChipContent = () => html`\n      <slot name=\"icon\"></slot>\n      <span class=\"label\"><slot></slot></span>\n    `;\n    const renderRemoveButton = () => html`\n      <button\n        class=\"remove-btn\"\n        part=\"remove-btn\"\n        type=\"button\"\n        :aria-label=\"${() => {\n          const label = labelProp.value || props.value.value;\n\n          return label ? `Remove ${label}` : 'Remove';\n        }}\"\n        ?hidden=\"${() => props.mode.value !== 'removable'}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleRemove}\">\n        <bit-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n      </button>\n    `;\n    const renderSelectableChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        role=\"checkbox\"\n        :aria-checked=\"${() => String(isChecked.value)}\"\n        :aria-label=\"${() => labelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleSelectableActivate}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderActionChip = () => html`\n      <button\n        class=\"chip-btn\"\n        part=\"chip-btn\"\n        type=\"button\"\n        :aria-label=\"${() => labelProp.value}\"\n        :disabled=\"${() => props.disabled.value}\"\n        @click=\"${handleActionClick}\">\n        <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span>\n      </button>\n    `;\n    const renderStaticChip = () => html` <span class=\"chip\" part=\"chip\"> ${renderChipContent()} </span> `;\n    const renderRemovableChip = () => html`\n      <span class=\"chip\" part=\"chip\"> ${renderChipContent()} ${renderRemoveButton()} </span>\n    `;\n\n    // ============================================\n    // Render\n    // ============================================\n    return html`\n      ${() => {\n        const mode = props.mode.value;\n\n        if (mode === 'selectable') return renderSelectableChip();\n\n        if (mode === 'action') return renderActionChip();\n\n        if (mode === 'removable') return renderRemovableChip();\n\n        return renderStaticChip();\n      }}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    disabledStateMixin(),\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: {\n        '--_font-size': 'var(--text-sm)',\n        '--_gap': 'var(--size-1-5)',\n        '--_padding-x': 'var(--size-3)',\n        '--_padding-y': 'var(--size-1)',\n      },\n      sm: {\n        '--_font-size': 'var(--text-xs)',\n        '--_gap': 'var(--size-0-5)',\n        '--_padding-x': 'var(--size-2-5)',\n        '--_padding-y': 'var(--size-px)',\n      },\n    }),\n    forcedColorsMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;AAkJA,IAAa,IAAW,EAA6C,YAAY;CAC/E,OAAO;EACL,SAAS;GACP,SAAS,KAAA;GACT,QAAQ,MAA0B,KAAS,OAAO,KAAA,IAAY,MAAU;GACzE;EACD,OAAO,KAAA;EACP,mBAAmB;EACnB,UAAU;EACV,OAAO,KAAA;EACP,MAAM;EACN,SAAS,KAAA;EACT,MAAM,KAAA;EACN,OAAO,KAAA;EACP,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAc,EAAM,SACpB,IAAY,EAAM,OAKlB,IAAe,EAAO,EAAY,UAAU,KAAA,EAAU,EAEtD,IAAe,EAAO,CAAC,EAAa,SAAS,EAAM,mBAAmB,MAAM;AAElF,IAAM,IAAc,MAAU;AAC5B,GAAI,MAAU,KAAA,MACZ,EAAa,QAAQ;IAEvB;EAGF,IAAM,IAAY,QACZ,EAAM,KAAK,UAAU,eAErB,EAAa,QACR,EAAY,SAAS,KAGvB,EAAa,QAN0B,GAO9C;AAEF,IAAK,KAAK,QAAQ,EAChB,eAAgB,EAAM,KAAK,UAAU,gBAAgB,EAAU,QAAQ,KAAO,KAAA,GAC/E,CAAC;EAIF,SAAS,EAAa,GAAe;AAC/B,KAAM,SAAS,SAEnB,EAAK,UAAU;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAGhE,SAAS,EAAyB,GAAe;AAG/C,OAFA,EAAE,iBAAiB,EAEf,EAAM,SAAS,MAAO;GAE1B,IAAM,IAAc,CAAC,EAAU;AAM/B,GAJK,EAAa,UAChB,EAAa,QAAQ,IAGvB,EAAK,UAAU;IAAE,SAAS;IAAa,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAGtF,SAAS,EAAkB,GAAe;AACpC,KAAM,SAAS,SAEnB,EAAK,SAAS;IAAE,eAAe;IAAG,OAAO,EAAM,MAAM;IAAO,CAAC;;EAM/D,IAAM,UAA0B,CAAI;;;OAI9B,UAA2B,CAAI;;;;;6BAKZ;GACnB,IAAM,IAAQ,EAAU,SAAS,EAAM,MAAM;AAE7C,UAAO,IAAQ,UAAU,MAAU;IACnC;yBACe,EAAM,KAAK,UAAU,YAAY;2BAC/B,EAAM,SAAS,MAAM;kBAC9B,EAAa;;;OAIrB,UAA6B,CAAI;;;;;;+BAMZ,OAAO,EAAU,MAAM,CAAC;6BAC1B,EAAU,MAAM;2BAClB,EAAM,SAAS,MAAM;kBAC9B,EAAyB;0CACD,GAAmB,CAAC;;OAGpD,UAAyB,CAAI;;;;;6BAKV,EAAU,MAAM;2BAClB,EAAM,SAAS,MAAM;kBAC9B,EAAkB;0CACM,GAAmB,CAAC;;OAGpD,UAAyB,CAAI,oCAAoC,GAAmB,CAAC,YACrF,UAA4B,CAAI;wCACF,GAAmB,CAAC,GAAG,GAAoB,CAAC;;AAMhF,SAAO,CAAI;cACD;GACN,IAAM,IAAO,EAAM,KAAK;AAQxB,UANI,MAAS,eAAqB,GAAsB,GAEpD,MAAS,WAAiB,GAAkB,GAE5C,MAAS,cAAoB,GAAqB,GAE/C,GAAkB;IACzB;;;CAGN,QAAQ;EACN;EACA,GAAoB;EACpB;EACA,EAAiB;GACf,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IACjB;GACD,IAAI;IACF,gBAAgB;IAChB,UAAU;IACV,gBAAgB;IAChB,gBAAgB;IACjB;GACF,CAAC;EACF;EACA;EACD;CACF,CAAC"}

package/dist/combobox.cjs

@@ -1,59 +1,65 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./icons.cjs`);require(`./chip.cjs`);const ee=require(`./craftit/dist/labs/list.cjs`),a=require(`./craftit/dist/labs/overlay.cjs`),o=require(`./craftit/dist/labs/selection.cjs`);require(`./craftit/dist/labs.cjs`);const s=require(`./inputs/shared/dom-sync/dropdown.cjs`),te=require(`./inputs/shared/utils/assistive-text.cjs`),ne=require(`./inputs/shared/utils/choice-change.cjs`),re=require(`./inputs/shared/utils/controlled-csv.cjs`),ie=require(`./inputs/shared/form-context.cjs`),c=require(`./inputs/shared/dom-sync/label-sync.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const ae=require(`./inputs/shared/validation/index.cjs`),l=require(`./inputs/shared/design-presets.cjs`),u=require(`./inputs/combobox/combobox-options.cjs`),oe=require(`./inputs/combobox/combobox-virtualizer.cjs`),d=require(`./inputs/combobox/combobox.css?inline.cjs`);let f=require(`@vielzeug/craftit`);var p=(0,f.defineComponent)({setup(){return f.html`<style>
-      ${f.css`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/states.css.cjs`),r=require(`./styles/mixins/theme.css.cjs`),i=require(`./styles/index.cjs`),ee=require(`./packages/craftit/dist/controls/field-control.cjs`),a=require(`./packages/craftit/dist/controls/press-control.cjs`),te=require(`./packages/craftit/dist/controls/list-control.cjs`),o=require(`./packages/craftit/dist/controls/list-key-control.cjs`),s=require(`./packages/craftit/dist/controls/overlay-control.cjs`);require(`./packages/craftit/dist/controls.cjs`),require(`./chip.cjs`);const c=require(`./inputs/shared/dom-sync/dropdown.cjs`),l=require(`./inputs/shared/form-context.cjs`),ne=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const re=require(`./inputs/shared/utils/choice-change.cjs`),u=require(`./inputs/shared/design-presets.cjs`),ie=require(`./utils/aria.cjs`),d=require(`./inputs/combobox/combobox-options.cjs`),ae=require(`./inputs/combobox/combobox-virtualizer.cjs`),f=require(`./inputs/combobox/combobox.css?inline.cjs`);let p=require(`@vielzeug/craftit`);var oe=`<bit-icon name="check" size="14" stroke-width="2.5" aria-hidden="true"></bit-icon>`,m=(0,p.define)(`bit-combobox-option`,{setup(){return p.html`<style>
+      ${p.css`
       @layer buildit.base {
         :host {
           display: none;
         }
       }
     `}
-    </style>`},tag:`bit-combobox-option`}),m=(0,f.defineComponent)({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:(0,f.typed)(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:l,labelId:d}=(0,f.createFormIds)(`combobox`,n.name.value),p=(0,f.ref)(),m=(0,f.ref)(),h=(0,f.inject)(ie.FORM_CTX,void 0),g=(0,f.signal)(String(n.value.value??``)),{triggerValidation:_}=ae.createFieldValidation(h,(0,f.defineField)({disabled:(0,f.computed)(()=>!!n.disabled.value||!!h?.disabled.value),value:g},{onReset:()=>{g.value=``,C.value=[],y.value=``}})),v=(0,f.signal)(!1),y=(0,f.signal)(``),b=(0,f.computed)(()=>!!n.disabled.value),x=(0,f.computed)(()=>!!n.multiple.value),se=(0,f.computed)(()=>!!n.creatable.value),S=(0,f.computed)(()=>!!n[`no-filter`].value);(0,f.watch)(v,e=>{t.toggleAttribute(`open`,(e=>!!e)(e))},{immediate:!0});let C=(0,f.signal)(n.value.value?[{label:``,value:n.value.value}]:[]),w=(0,f.signal)(-1),T=o.e({findByKey:e=>{let t=C.value.find(t=>t.value===e);if(t)return t;let n=F.value.find(t=>t.value===e);return n?{label:n.label,value:n.value}:{label:``,value:e}},getMode:()=>x.value?`multiple`:`single`,getSelected:()=>C.value,keyExtractor:e=>e.value,setSelected:e=>{C.value=e}}),E=e=>{let t=re.computeControlledCsvState(String(e??``));if(t.isEmpty){T.clear(),y.value=``,g.value=``;return}if(x.value){C.value=t.values.map(e=>({label:``,value:e})),g.value=t.formValue;return}C.value=[{label:``,value:t.firstValue}],g.value=t.firstValue};(0,f.watch)(n.value,e=>E(e),{immediate:!0}),(0,f.watch)(n.multiple,()=>E(n.value.value));let D=(0,f.computed)(()=>C.value[0]?.value??``),ce=(0,f.computed)(()=>C.value.length>0),le=(0,f.computed)(()=>!!n.label.value),O=null,k=null,A=null,j=null;function ue(){let e=t.shadowRoot?.querySelector(`input[role="combobox"]`)??null;return e&&(O=e),e??O}function M(){ue()?.focus()}let N=(0,f.signal)([]),P=(0,f.signal)([]),de=(0,f.computed)(()=>!!n.loading.value),F=(0,f.computed)(()=>{let e=n.options.value??N.value;return P.value.length===0?e:[...e,...P.value]});function I(e=Array.from(t.children)){N.value=u.parseSlottedOptions(e),C.value.length>0&&(C.value=u.backfillSelectionLabels(C.value,F.value),!x.value&&C.value.length===1&&(y.value=C.value[0]?.label??``))}let L=(0,f.computed)(()=>u.filterOptions(F.value,y.value,S.value)),R=(0,f.computed)(()=>u.getCreatableLabel(y.value,se.value,L.value)),z=(0,f.computed)(()=>te.resolveMergedAssistiveText(n.error.value,n.helper.value)),B=(0,f.computed)(()=>x.value&&C.value.length>0?``:n.placeholder.value||``),V=(0,f.computed)(()=>C.value.map(e=>e.value)),fe=(0,f.computed)(()=>C.value.map(e=>e.label?e.label:F.value.find(t=>t.value===e.value)?.label??e.value));function H(){g.value=T.serialize(`,`)}function U(t){e(`change`,ne.createChoiceChangeDetail(V.value,fe.value,t))}function pe(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(T.remove(t),H(),U(e),_(`change`))}let W=s.createDropdownPositioner(()=>k,()=>A),G=ee.e({getIndex:()=>w.value,getItems:()=>L.value,isItemDisabled:e=>e.disabled,setIndex:e=>{w.value=e,ve()}}),K=a.t({getBoundaryElement:()=>t,getPanelElement:()=>A,getTriggerElement:()=>O,isDisabled:()=>b.value,isOpen:()=>v.value,positioner:{floating:()=>A,reference:()=>k,update:()=>W.updatePosition()},restoreFocus:!1,setOpen:(e,t)=>{v.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&&(y.value=``),K.open({reason:t})}function Y(e=`programmatic`){K.close({reason:e,restoreFocus:!1}),x.value?y.value=``:y.value=F.value.find(e=>e.value===D.value)?.label??``,_(`blur`)}function X(e,t){e.disabled||(x.value?(T.toggle(e.value),H(),y.value=``,U(t),_(`change`),M(),requestAnimationFrame(()=>M())):(T.select(e.value),y.value=e.label,g.value=e.value,U(t),_(`change`),Y(),M()))}function me(e){e.stopPropagation(),T.clear(),y.value=``,g.value=``,U(e),_(`change`),M()}function he(t){let n=t.target;y.value=n.value,x.value||T.clear(),q(G.first()),v.value||J(!1,`trigger`),e(`search`,{query:n.value})}function ge(){v.value||J(!1,`trigger`)}function _e(e){if(b.value)return;let t=L.value;switch(e.key){case`ArrowDown`:e.preventDefault(),v.value?q(G.next()):(J(!0,`trigger`),q(G.first()));break;case`ArrowUp`:e.preventDefault(),v.value?q(G.prev()):J(!0,`trigger`);break;case`Backspace`:x.value&&!y.value&&C.value.length>0&&(C.value=C.value.slice(0,-1),H(),U(e),_(`change`));break;case`End`:v.value&&(e.preventDefault(),q(G.last()));break;case`Enter`:e.preventDefault(),v.value&&w.value>=0&&w.value<t.length?X(t[w.value],e):v.value&&w.value===-1&&R.value?$(R.value,e):v.value||J();break;case`Escape`:e.preventDefault(),v.value&&Y(`escape`);break;case`Home`:v.value&&(e.preventDefault(),q(G.first()));break;case`Tab`:Y(`programmatic`);break;default:break}}function ve(){if(w.value>=0){Z.scrollToIndex(w.value,{align:`auto`});return}j&&j.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})}let{domVirtualList:Z,setupVirtualizer:ye,updateRenderedItemState:Q}=oe.createComboboxVirtualizer({checkIconHTML:i.checkIconHTML,comboId:r,getDropdownElement:()=>A,getFocusedIndex:()=>w.peek(),getIsMultiple:()=>x.peek(),getListboxElement:()=>j,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:u.makeCreatableValue(e)};P.value=[...P.value,n],X(n,t)}return(0,f.onMount)(()=>{k=O?.closest(`.field`),A=t.shadowRoot?.querySelector(`.dropdown`)??null,j=t.shadowRoot?.querySelector(`[role="listbox"]`)??null;let e=K.bindOutsideClick(document);return(0,f.onSlotChange)(`default`,I),I(),(0,f.effect)(()=>{let e=L.value,t=v.value;t&&e.length>0?requestAnimationFrame(()=>ye(e,t)):Z.update(e,!1)}),c.mountLabelSyncStandalone(m,p,n),(0,f.effect)(()=>{if(j){for(let e of Array.from(j.querySelectorAll(`.no-results,.no-results-create,.dropdown-loading`)))e.remove();if(de.value){let e=document.createElement(`div`);e.className=`dropdown-loading`,e.textContent=`Loading…`,j.prepend(e)}else if(L.value.length===0)if(R.value){let e=document.createElement(`button`);e.type=`button`,e.className=`no-results-create`,e.textContent=`Create "${R.value}"`,w.value===-1&&e.setAttribute(`data-focused`,``),e.addEventListener(`pointerdown`,e=>{e.preventDefault()}),e.addEventListener(`click`,e=>{e.stopPropagation(),$(R.value,e)}),j.appendChild(e)}else{let e=document.createElement(`div`);e.className=`no-results`,e.setAttribute(`role`,`presentation`),e.textContent=`No results found`,j.appendChild(e)}Q()}}),(0,f.watch)([v,n.multiple,w,C,D],()=>{v.value&&Q()},{immediate:!0}),()=>{Z.destroy(),W.destroy(),e()}}),f.html`
+    </style>`}}),h={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,...e.loadableBundle,...e.roundableBundle,clearable:!1,creatable:!1,error:{default:``,omit:!0},fullwidth:!1,helper:``,label:``,"label-placement":`inset`,multiple:!1,name:``,"no-filter":!1,options:{default:void 0,reflect:!1},placeholder:``,value:``,variant:void 0},g=(0,p.define)(`bit-combobox`,{formAssociated:!0,props:h,setup({emit:e,host:t,props:n,slots:r}){let i=(0,p.inject)(l.FORM_CTX,void 0),u=(0,p.signal)(!1),f=(0,p.signal)(``),m=ee.S({context:i,disabled:n.disabled,error:n.error,getValue:e=>e.value,helper:n.helper,label:n.label,labelPlacement:n[`label-placement`],mapControlledValue:e=>({label:``,value:e}),multiple:n.multiple,name:n.name,onReset:()=>{f.value=``},prefix:`combobox`,value:n.value}),{disabled:h,fieldId:g,helperId:_,labelInsetId:v,labelInsetRef:se,labelOutsideId:y,labelOutsideRef:ce,selectedItems:b,triggerValidation:x}=m;ne.mountFormContextSync(t.el,i,n);let S=(0,p.computed)(()=>!!n.multiple.value),le=(0,p.computed)(()=>!!n.creatable.value),ue=(0,p.computed)(()=>!!n[`no-filter`].value);t.bind(`attr`,{open:()=>u.value?!0:void 0});let C=(0,p.signal)(-1),w=(0,p.computed)(()=>b.value[0]?.value??``),T=(0,p.computed)(()=>b.value.length>0),E=(0,p.computed)(()=>!!n.label.value),D=null,O=null,k=null,A=null,j=(0,p.createCleanupSignal)();function de(){let e=t.shadowRoot?.querySelector(`input[role="combobox"]`)??null;return e&&(D=e),e??D}function M(){de()?.focus()}let N=(0,p.signal)([]),P=(0,p.signal)([]),fe=(0,p.computed)(()=>!!n.loading.value);function pe(e){return{disabled:!!e.disabled,iconEl:e.iconEl??null,label:e.label??e.value,value:e.value}}let F=(0,p.computed)(()=>{let e=n.options.value?.map(pe)??N.value;return P.value.length===0?e:[...e,...P.value]}),I=(0,p.computed)(()=>F.value.map(e=>({label:e.label,value:e.value}))),L={clear:()=>{m.clear()},remove:e=>{m.removeValue(e)},select:e=>{let t=I.value.find(t=>t.value===e);t&&m.selectItem(t)},toggle:e=>{let t=I.value.find(t=>t.value===e);t&&m.toggleItem(t)}};function R(e=Array.from(t.el.children)){N.value=d.parseSlottedOptions(e),b.value.length>0&&(b.value=d.backfillSelectionLabels(b.value,F.value),!S.value&&b.value.length===1&&(f.value=b.value[0]?.label??``))}let z=(0,p.computed)(()=>d.filterOptions(F.value,f.value,ue.value)),B=(0,p.computed)(()=>d.getCreatableLabel(f.value,le.value,z.value)),V=m.assistive,me=(0,p.computed)(()=>S.value&&b.value.length>0?``:n.placeholder.value||``),he=(0,p.computed)(()=>b.value.map(e=>e.value)),ge=(0,p.computed)(()=>b.value.map(e=>e.label?e.label:F.value.find(t=>t.value===e.value)?.label??e.value));function H(t){e(`change`,re.createChoiceChangeDetail(he.value,ge.value,t))}function _e(e){e.stopPropagation();let t=e.detail?.value;t!==void 0&&(L.remove(t),H(e),x(`change`))}let U=c.createDropdownPositioner(()=>O,()=>k),W=te.n({getIndex:()=>C.value,getItems:()=>z.value,isItemDisabled:e=>e.disabled,setIndex:e=>{C.value=e,Te()}}),ve=o.n({control:W,disabled:()=>!u.value,onInvoke:(e,t)=>{q(t)}}),G={boundary:t.el,panel:null,trigger:null},K=s.i({disabled:h,elements:G,isOpen:u,onClose:t=>e(`close`,{reason:t}),onOpen:t=>e(`open`,{reason:t}),positioner:{floating:()=>k,reference:()=>O,update:()=>U.updatePosition()},restoreFocus:!1,setOpen:e=>{u.value=e,e||W.reset()}}),q=e=>{e.index===-1&&(C.value=-1)};function J(e=!0,t=`programmatic`){e&&(f.value=``),K.open(t)}function Y(e=`programmatic`){K.close(e,!1),S.value?f.value=``:f.value=F.value.find(e=>e.value===w.value)?.label??``,x(`blur`)}let ye=a.t({disabled:()=>h.value,onPress:()=>{u.value||J(!0,`trigger`),M()}}),be=a.t({disabled:()=>h.value,keys:[`Enter`],onPress:e=>{let t=z.value;u.value&&C.value>=0&&C.value<t.length?X(t[C.value],e):u.value&&C.value===-1&&B.value?$(B.value,e):u.value||J()}});function X(e,t){e.disabled||(S.value?(L.toggle(e.value),f.value=``,H(t),x(`change`),M(),requestAnimationFrame(()=>M())):(L.select(e.value),f.value=e.label,H(t),x(`change`),Y(),M()))}function xe(e){e.stopPropagation(),L.clear(),f.value=``,H(e),x(`change`),M()}function Se(t){let n=t.target;f.value=n.value,S.value||L.clear(),q(W.first()),u.value||J(!1,`trigger`),e(`search`,{query:n.value})}function Ce(){u.value||J(!0,`trigger`)}function we(e){if(!h.value&&!ve.handleKeydown(e))switch(e.key){case`ArrowDown`:e.preventDefault(),u.value?q(W.next()):(J(!0,`trigger`),q(W.first()));break;case`ArrowUp`:e.preventDefault(),u.value?q(W.prev()):J(!0,`trigger`);break;case`Backspace`:S.value&&!f.value&&b.value.length>0&&(b.value=b.value.slice(0,-1),H(e),x(`change`));break;case`Enter`:be.handleKeydown(e);break;case`Escape`:e.preventDefault(),u.value&&Y(`escape`);break;case`Tab`:Y(`programmatic`);break;default:break}}function Te(){if(C.value>=0){Z.scrollToIndex(C.value,{align:`auto`});return}A&&A.querySelector(`[data-focused]`)?.scrollIntoView({block:`nearest`})}let{domVirtualList:Z,setupVirtualizer:Ee,updateRenderedItemState:Q}=ae.createComboboxVirtualizer({checkIconHTML:oe,comboId:g,getDropdownElement:()=>k,getFocusedIndex:()=>(0,p.untrack)(()=>C.value),getIsMultiple:()=>(0,p.untrack)(()=>S.value),getListboxElement:()=>A,getSelectedValue:()=>(0,p.untrack)(()=>w.value),getSelectedValues:()=>(0,p.untrack)(()=>b.value),onSelectOption:X,setFocusedIndex:e=>{C.value=e}});function $(e,t){let n={disabled:!1,iconEl:null,label:e,value:d.makeCreatableValue(e)};P.value=[...P.value,n],X(n,t)}return(0,p.onMount)(()=>{O=D?.closest(`.field`),k=t.shadowRoot?.querySelector(`.dropdown`)??null,A=t.shadowRoot?.querySelector(`[role="listbox"]`)??null,G.panel=k;let e=K.bindOutsideClick(document);return(0,p.watch)(r.elements(),()=>R(),{immediate:!0}),(0,p.effect)(()=>{let e=z.value,t=u.value;t&&e.length>0?requestAnimationFrame(()=>Ee(e,t)):Z.setItems(e)}),(0,p.effect)(()=>{if(!A)return;let e=u.value;for(let e of Array.from(A.querySelectorAll(`.no-results,.no-results-create,.dropdown-loading`)))e.remove();if(!e){Q();return}if(fe.value){let e=document.createElement(`div`);e.className=`dropdown-loading`,e.textContent=`Loading…`,A.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}"`,e.toggleAttribute(`data-focused`,C.value===-1),e.addEventListener(`pointerdown`,e=>{e.preventDefault()}),e.addEventListener(`click`,e=>{e.stopPropagation(),$(B.value,e)}),A.appendChild(e)}else{let e=document.createElement(`div`);e.className=`no-results`,e.setAttribute(`role`,`presentation`),e.textContent=`No results found`,A.appendChild(e)}Q()}),(0,p.watch)((0,p.computed)(()=>`${u.value?`1`:`0`}|${n.multiple.value?`1`:`0`}|${C.value}|${w.value}|${b.value.map(e=>e.value).join(`,`)}`),()=>{u.value&&Q()},{immediate:!0}),()=>{Z.destroy(),U.destroy(),e()}}),p.html`
       <slot></slot>
       <div class="combobox-wrapper" part="wrapper">
         <label
           class="label-outside"
-          for="${r}"
-          id="${d}"
-          ref=${p}
+          for="${g}"
+          id="${y}"
+          ref=${ce}
           hidden
           part="label"></label>
         <div
           class="field"
           part="field"
-          @click="${()=>{v.value||J(!1,`trigger`),M()}}">
-          <label class="label-inset" for="${r}" id="${d}" ref=${m} hidden part="label"></label>
+          @click="${e=>{ye.handleClick(e)}}">
+          <label
+            class="label-inset"
+            for="${g}"
+            id="${v}"
+            ref=${se}
+            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">
-                ${()=>(x.value?C.value:[]).map(e=>f.html`
+                ${()=>(S.value?b.value:[]).map(e=>p.html`
                       <bit-chip
                         value=${e.value}
-                        aria-label=${e.label||e.value}
+                        label=${e.label||e.value}
                         mode="removable"
                         variant="flat"
                         size="sm"
                         color=${()=>n.color.value}
-                        @remove=${pe}>
+                        @remove=${_e}>
                         ${e.label||e.value}
                       </bit-chip>
                     `)}
               </span>
               <input
-                ref=${e=>{if(O=e,!e){k=null;return}k=e.closest(`.field`),(0,f.aria)(e,{activedescendant:()=>w.value>=0?`${r}-opt-${w.value}`:null,autocomplete:`list`,controls:()=>`${r}-listbox`,describedby:()=>n.error.value||n.helper.value?l:null,disabled:()=>b.value,expanded:()=>v.value?`true`:`false`,invalid:()=>!!n.error.value,labelledby:()=>le.value?d:null})}}
+                ref=${e=>{if(D=e,!e){O=null,j.clear();return}O=e.closest(`.field`),j.set(ie.syncAria(e,{activedescendant:()=>C.value>=0?`${g}-opt-${C.value}`:null,autocomplete:`list`,controls:()=>`${g}-listbox`,describedby:()=>n.error.value||n.helper.value?_:null,disabled:()=>h.value,expanded:()=>u.value?`true`:`false`,invalid:()=>!!n.error.value,labelledby:()=>E.value?`${y} ${v}`:null}))}}
                 class="input"
                 part="input"
                 type="text"
                 role="combobox"
                 autocomplete="off"
                 spellcheck="false"
-                id="${r}"
+                id="${g}"
                 name="${()=>n.name.value}"
-                placeholder=${()=>B.value}
-                :disabled="${()=>b.value}"
-                @input=${he}
-                @keydown=${_e}
-                @focus=${ge}
-                .value=${y} />
+                placeholder=${()=>me.value}
+                :disabled="${()=>h.value}"
+                @input=${Se}
+                @keydown=${we}
+                @focus=${Ce}
+                .value=${f} />
             </div>
             <button
               class="clear-btn"
@@ -61,33 +67,33 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
               type="button"
               aria-label="Clear"
               tabindex="-1"
-              ?hidden=${()=>!ce.value}
-              @click="${me}">
-              ${i.clearIcon}
+              ?hidden=${()=>!T.value}
+              @click="${xe}">
+              <bit-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></bit-icon>
             </button>
             <span class="chevron" aria-hidden="true">
-              ${i.chevronDownIcon}
+              <bit-icon name="chevron-down" size="14" stroke-width="2" aria-hidden="true"></bit-icon>
               <span class="loader" aria-label="Loading"></span>
             </span>
           </div>
         </div>
 
-        <div class="dropdown" part="dropdown" id="${()=>`${r}-dropdown`}" ?data-open=${()=>v.value}>
+        <div class="dropdown" part="dropdown" id="${()=>`${g}-dropdown`}" ?data-open=${()=>u.value}>
           <div
             role="listbox"
-            id="${()=>`${r}-listbox`}"
+            id="${()=>`${g}-listbox`}"
             aria-label="${()=>n.label.value||n.placeholder.value||`Options`}"></div>
         </div>
 
         <span
           class="helper-text"
-          id="${l}"
+          id="${_}"
           part="helper-text"
           aria-live="polite"
-          ?hidden=${()=>z.value.hidden}
-          style=${()=>z.value.isError?`color: var(--color-error);`:``}
-          >${()=>z.value.text}</span
+          ?hidden=${()=>V.value.hidden}
+          style=${()=>V.value.isError?`color: var(--color-error);`:``}
+          >${()=>V.value.text}</span
         >
       </div>
-    `},shadow:{delegatesFocus:!0},styles:[e.sizeVariantMixin(l.FIELD_SIZE_PRESET),...r.formFieldMixins,t.disabledLoadingMixin(),n.forcedColorsFocusMixin(`.input`),d.default],tag:`bit-combobox`});exports.COMBOBOX_OPTION_TAG=p,exports.COMBOBOX_TAG=m;
+    `},shadow:{delegatesFocus:!0},styles:[t.sizeVariantMixin(u.FIELD_SIZE_PRESET),...i.formFieldMixins,n.disabledLoadingMixin(),r.forcedColorsFocusMixin(`.input`),f.default]});exports.COMBOBOX_OPTION_TAG=m,exports.COMBOBOX_TAG=g;
 //# sourceMappingURL=combobox.cjs.map

package/dist/combobox.cjs.map

@@ -1 +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":"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"}
+{"version":3,"file":"combobox.cjs","names":[],"sources":["../src/inputs/combobox/combobox.ts"],"sourcesContent":["import {\n  define,\n  createCleanupSignal,\n  computed,\n  css,\n  effect,\n  html,\n  inject,\n  onMount,\n  signal,\n  untrack,\n  watch,\n} from '@vielzeug/craftit';\nimport {\n  createChoiceFieldControl,\n  createListControl,\n  createListKeyControl,\n  createOverlayControl,\n  createPressControl,\n  type OverlayCloseReason,\n  type OverlayOpenReason,\n} from '@vielzeug/craftit/controls';\n\nimport '../../content/icon/icon';\nimport '../../feedback/chip/chip';\nimport type { AddEventListeners } from '../../types';\n\nimport { disabledLoadingMixin, forcedColorsFocusMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport {\n  disablableBundle,\n  loadableBundle,\n  roundableBundle,\n  sizableBundle,\n  themableBundle,\n  type PropBundle,\n} from '../shared/bundles';\nimport { FIELD_SIZE_PRESET } from '../shared/design-presets';\nimport { createDropdownPositioner, mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createChoiceChangeDetail } from '../shared/utils';\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 ComboboxOptionInput,\n  type BitComboboxProps,\n  type ComboboxOptionItem,\n  type ComboboxSelectionItem,\n} from './combobox.types';\n\nconst checkIconHTML = '<bit-icon name=\"check\" size=\"14\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>';\n\nexport type {\n  BitComboboxEvents,\n  BitComboboxOptionProps,\n  BitComboboxProps,\n  ComboboxOptionInput,\n} 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 = define('bit-combobox-option', {\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});\n\n// ============================================\n// Component\n// ============================================\n\nconst comboboxProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  ...loadableBundle,\n  ...roundableBundle,\n  clearable: false,\n  creatable: false,\n  error: { default: '' as string, omit: true },\n  fullwidth: false,\n  helper: '',\n  label: '',\n  'label-placement': 'inset',\n  multiple: false,\n  name: '',\n  'no-filter': false,\n  options: { default: undefined as ComboboxOptionInput[] | undefined, reflect: false },\n  placeholder: '',\n  value: '',\n  variant: undefined,\n} satisfies PropBundle<BitComboboxProps>;\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 * @fires change - Fired when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n * @fires open - Fired when the dropdown opens. detail: { reason: 'trigger' | 'programmatic' }\n * @fires close - Fired when the dropdown closes. detail: { reason: 'escape' | 'outside-click' | 'programmatic' }\n * @fires search - Fired while typing in the input. detail: { query: string }\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 = define<BitComboboxProps, BitComboboxEvents>('bit-combobox', {\n  formAssociated: true,\n  props: comboboxProps,\n  setup({ emit, host, props, slots }) {\n    const formCtx = inject(FORM_CTX, undefined);\n    const isOpen = signal(false);\n    const query = signal('');\n    const choice = createChoiceFieldControl<ComboboxSelectionItem>({\n      context: formCtx,\n      disabled: props.disabled,\n      error: props.error,\n      getValue: (item) => item.value,\n      helper: props.helper,\n      label: props.label,\n      labelPlacement: props['label-placement'],\n      mapControlledValue: (value) => ({ label: '', value }),\n      multiple: props.multiple,\n      name: props.name,\n      onReset: () => {\n        query.value = '';\n      },\n      prefix: 'combobox',\n      value: props.value,\n    });\n    const {\n      disabled: isDisabled,\n      fieldId: comboId,\n      helperId,\n      labelInsetId,\n      labelInsetRef,\n      labelOutsideId,\n      labelOutsideRef,\n      selectedItems: selectedValues,\n      triggerValidation,\n    } = choice;\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    // ── State ────────────────────────────────────────────────────────────────\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    host.bind('attr', {\n      open: () => (isOpen.value ? true : undefined),\n    });\n\n    const focusedIndex = signal(-1);\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    const inputAriaBinding = createCleanupSignal();\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\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 base = props.options.value?.map(normalizeOption) ?? slottedOptions.value;\n\n      if (createdOptions.value.length === 0) return base;\n\n      return [...base, ...createdOptions.value];\n    });\n\n    const allItemsSignal = computed<ComboboxSelectionItem[]>(() =>\n      allOptions.value.map((option) => ({ label: option.label, value: option.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        const item = allItemsSignal.value.find((entry) => entry.value === key);\n\n        if (!item) return;\n\n        choice.selectItem(item);\n      },\n      toggle: (key: string) => {\n        const item = allItemsSignal.value.find((entry) => entry.value === key);\n\n        if (!item) return;\n\n        choice.toggleItem(item);\n      },\n    };\n\n    function readOptions(elements: Element[] = Array.from(host.el.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 = choice.assistive;\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 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      emitChange(event);\n      triggerValidation('change');\n    }\n\n    // ── Positioning (shared positioner) ──────────────────────────────────────\n    const positioner = createDropdownPositioner(\n      () => fieldEl,\n      () => dropdownEl,\n    );\n\n    const listNavigation = createListControl<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 openListKeys = createListKeyControl({\n      control: listNavigation,\n      disabled: () => !isOpen.value,\n      onInvoke: (_action, result) => {\n        applyNavigationResult(result as ReturnType<typeof listNavigation.next>);\n      },\n    });\n\n    const overlayElements: { boundary: HTMLElement; panel: HTMLElement | null; trigger: HTMLInputElement | null } = {\n      boundary: host.el,\n      panel: null,\n      trigger: null,\n    };\n\n    const overlay = createOverlayControl({\n      disabled: isDisabled,\n      elements: overlayElements,\n      isOpen: isOpen,\n      onClose: (reason) => emit('close', { reason }),\n      onOpen: (reason) => emit('open', { reason }),\n      positioner: {\n        floating: () => dropdownEl,\n        reference: () => fieldEl,\n        update: () => positioner.updatePosition(),\n      },\n      restoreFocus: false,\n      setOpen: (next) => {\n        isOpen.value = next;\n\n        if (!next) listNavigation.reset();\n      },\n    });\n\n    const applyNavigationResult = (result: ReturnType<typeof listNavigation.next>): void => {\n      if (result.index === -1) {\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: OverlayCloseReason = 'programmatic') {\n      overlay.close(reason, 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\n    const fieldPress = createPressControl({\n      disabled: () => isDisabled.value,\n      onPress: () => {\n        if (!isOpen.value) open(true, 'trigger');\n\n        focusLiveInput();\n      },\n    });\n\n    const enterPress = createPressControl({\n      disabled: () => isDisabled.value,\n      keys: ['Enter'],\n      onPress: (originalEvent) => {\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(creatableLabel.value, originalEvent);\n        } else if (!isOpen.value) {\n          open();\n        }\n      },\n    });\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        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        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      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(true, 'trigger');\n    }\n    // ── Keyboard Navigation ──────────────────────────────────────────────────\n    function handleKeydown(e: KeyboardEvent) {\n      if (isDisabled.value) return;\n\n      if (openListKeys.handleKeydown(e)) return;\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            emitChange(e);\n            triggerValidation('change');\n          }\n\n          break;\n        case 'Enter':\n          enterPress.handleKeydown(e);\n\n          break;\n        case 'Escape':\n          e.preventDefault();\n\n          if (isOpen.value) {\n            close('escape');\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: () => untrack(() => focusedIndex.value),\n      getIsMultiple: () => untrack(() => isMultiple.value),\n      getListboxElement: () => listboxEl,\n      getSelectedValue: () => untrack(() => selectedValue.value),\n      getSelectedValues: () => untrack(() => selectedValues.value),\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      // Make the outside-click handler aware of the panel so clicks inside\n      // the dropdown are not treated as outside clicks (critical for multi-select)\n      overlayElements.panel = dropdownEl;\n\n      const removeOutsideClick = overlay.bindOutsideClick(document);\n\n      watch(slots.elements(), () => readOptions(), { immediate: true });\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.setItems(opts);\n        }\n      });\n      effect(() => {\n        if (!listboxEl) return;\n\n        const open = isOpen.value;\n\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 (!open) {\n          updateRenderedItemState();\n\n          return;\n        }\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            createEl.toggleAttribute('data-focused', focusedIndex.value === -1);\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      const renderedStateDeps = computed(\n        () =>\n          `${isOpen.value ? '1' : '0'}|${props.multiple.value ? '1' : '0'}|${focusedIndex.value}|${selectedValue.value}|${selectedValues.value\n            .map((item) => item.value)\n            .join(',')}`,\n      );\n\n      watch(\n        renderedStateDeps,\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=\"${labelOutsideId}\"\n          ref=${labelOutsideRef}\n          hidden\n          part=\"label\"></label>\n        <div\n          class=\"field\"\n          part=\"field\"\n          @click=\"${(e: MouseEvent) => {\n            fieldPress.handleClick(e);\n          }}\">\n          <label\n            class=\"label-inset\"\n            for=\"${comboId}\"\n            id=\"${labelInsetId}\"\n            ref=${labelInsetRef}\n            hidden\n            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                        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                    inputAriaBinding.clear();\n\n                    return;\n                  }\n\n                  fieldEl = el.closest('.field') as HTMLElement | null;\n                  inputAriaBinding.set(\n                    syncAria(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 ? `${labelOutsideId} ${labelInsetId}` : null),\n                    }),\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              <bit-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\n            </button>\n            <span class=\"chevron\" aria-hidden=\"true\">\n              <bit-icon name=\"chevron-down\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\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}) as unknown as AddEventListeners<BitComboboxEvents>;\n"],"mappings":"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"}