@umbraco-ui/uui 2.0.0-rc.2 → 2.0.1

package/dist/components/combobox/combobox.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.element.js","sources":["../../../src/components/combobox/combobox.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport type {\n  UUIComboboxListElement,\n  UUIComboboxListOptionElement,\n} from '../combobox-list/combobox-list.js';\nimport { UUIComboboxListEvent } from '../combobox-list/combobox-list.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\n\nimport { UUIComboboxEvent } from './UUIComboboxEvent.js';\n\nimport '../input/input.js';\nimport '../symbol-expand/symbol-expand.js';\nimport '../button/button.js';\nimport '../icon/icon.js';\nimport '../scroll-container/scroll-container.js';\nimport '../popover-container/popover-container.js';\nimport '../tag/tag.js';\n\n/**\n * @element uui-combobox\n * @fires {UUIComboboxEvent} input - fires when search input is changed\n * @fires {UUIComboboxEvent} change - fires when selection is changed\n * @slot - for uui-combobox-list-options\n * @slot input-prepend - prepend for the uui-input\n * @slot input-append - append for the uui-input\n * @cssprop --uui-dropdown-width - overwrite the dropdown width\n * @description - Filterable combobox\n */\nexport class UUIComboboxElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  @property({ attribute: 'value', reflect: true })\n  set value(newValue) {\n    super.value = newValue;\n\n    if (typeof newValue === 'string') {\n      this.#updateValue();\n    }\n  }\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * The search input.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String })\n  public set search(newValue) {\n    if (this.search === newValue) return;\n    const oldValue = this._search;\n    this._search = newValue;\n    this.requestUpdate('search', oldValue);\n  }\n  public get search() {\n    return this._search;\n  }\n\n  /**\n   * Specifies if the popover should be open.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public set open(newValue: boolean) {\n    const oldValue = newValue;\n    this._isOpen = newValue;\n    const popover = this._comboboxPopoverElement;\n    if (popover) {\n      if (newValue) {\n        const width = this._input.offsetWidth;\n        popover.style.setProperty('--popover-width', `${width}px`);\n        popover.showPopover();\n      } else {\n        popover.hidePopover();\n      }\n    }\n\n    this.requestUpdate('open', oldValue);\n  }\n  public get open() {\n    return this._isOpen;\n  }\n\n  /**\n   * Specifies the button label for the close button in mobile mode\n   * @type {string}\n   * @attr\n   * @default \"Close\"\n   */\n  @property({ type: String, attribute: 'close-label' })\n  public closeLabel = 'Close';\n\n  /**\n   * Disables the uui-combobox.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Enables multiple selection mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Removes the expand symbol.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: false, attribute: 'hide-expand-symbol' })\n  hideExpandSymbol = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Defines the input placeholder.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property()\n  placeholder = '';\n\n  @query('#combobox-input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#combobox-popover')\n  private readonly _comboboxPopoverElement?: UUIPopoverContainerElement;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-combobox-list',\n  })\n  private readonly _comboboxListElements?: UUIComboboxListElement[];\n\n  #comboboxList!: UUIComboboxListElement;\n  #phoneMediaQuery!: MediaQueryList;\n\n  @state()\n  private _displayValue = '';\n\n  @state()\n  private _search = '';\n\n  @state()\n  private _isPhone = false;\n\n  @state()\n  private _isOpen = false;\n\n  @state()\n  private _selectedItems: Array<{ value: string; displayValue: string }> = [];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('blur', this.#onBlur);\n    this.addEventListener('mousedown', this.#onMouseDown);\n\n    this.#phoneMediaQuery = window.matchMedia('(max-width: 600px)');\n    this.#onPhoneChange();\n    this.#phoneMediaQuery.addEventListener('change', this.#onPhoneChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('blur', this.#onBlur);\n    this.removeEventListener('mousedown', this.#onMouseDown);\n    this.#phoneMediaQuery.removeEventListener('change', this.#onPhoneChange);\n  }\n\n  #onSlotChange() {\n    if (this.#comboboxList) {\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n    const list = this._comboboxListElements?.[0];\n\n    if (list) {\n      this.#comboboxList = list;\n      this.#comboboxList.for = this;\n      this.#comboboxList.multiple = this.multiple;\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n\n    this.updateComplete.then(() => {\n      this.#updateValue();\n    });\n  }\n\n  readonly #onPhoneChange = () => {\n    this._isPhone = this.#phoneMediaQuery.matches;\n  };\n\n  #updateValue() {\n    if (this.#comboboxList) {\n      this.#comboboxList.value = this.value;\n      requestAnimationFrame(\n        () => (this._displayValue = this.#comboboxList.displayValue || ''),\n      );\n    }\n  }\n\n  protected getFormElement(): HTMLElement | undefined {\n    return this._input;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  readonly #onMouseDown = () =>\n    requestAnimationFrame(() => this._input.focus());\n\n  readonly #onBlur = () =>\n    requestAnimationFrame(() => {\n      if (!this.shadowRoot?.activeElement) {\n        this.#onClose();\n      }\n    });\n\n  readonly #onInput = (e: any) => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.search = e.target.value;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.#onOpen();\n  };\n\n  readonly #onInnerSlotChange = () => {\n    if (this.value && this.value !== this.#comboboxList?.value) {\n      this.#updateValue();\n    }\n  };\n\n  readonly #onChange = () => {\n    const list = this.#comboboxList;\n    if (!list) return;\n\n    if (list.multiple) {\n      this._selectedItems = list.selectedValues.map((val, i) => ({\n        value: val,\n        displayValue: list.selectedDisplayValues[i] || val,\n      }));\n      this.value = list.selectedValues.join(',');\n\n      this.search = '';\n      this._input.value = '';\n      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    } else {\n      this.value = list.value || '';\n      this.search = this.value ? this.search : '';\n      this.#onClose();\n    }\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #onToggle = () => {\n    if (this.readonly) return;\n    this.open = !this.open;\n  };\n\n  readonly #onOpen = () => {\n    if (this.open) return;\n    if (this.readonly) return;\n    this.open = true;\n  };\n\n  readonly #onClose = () => {\n    if (!this.open) return;\n\n    this.open = false;\n    this.search = '';\n    // Reset input(search-input) value:\n    this._input.value = this._displayValue;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n  };\n\n  readonly #onKeyDown = (e: KeyboardEvent) => {\n    if (\n      e.code === 'Backspace' &&\n      this.multiple &&\n      this._selectedItems.length > 0 &&\n      this.search === ''\n    ) {\n      const lastItem = this._selectedItems[this._selectedItems.length - 1];\n      this.#onRemoveTag(e, lastItem.value);\n      return;\n    }\n    if (this.open === false && e.code === 'Enter') {\n      e.preventDefault(); // Prevent form submission when combobox is closed\n      e.stopImmediatePropagation(); // Don't let list handle Enter when closed\n\n      this.#onOpen();\n    }\n\n    if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {\n      this.#onOpen();\n    }\n\n    if (e.code === 'Escape') {\n      this.#onClose();\n    }\n  };\n\n  readonly #onClear = (e: any) => {\n    if (e.key && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    const list = this.#comboboxList;\n    if (list?.multiple) {\n      // Deselect all options\n      for (const el of list.querySelectorAll<UUIComboboxListOptionElement>(\n        'uui-combobox-list-option[selected]',\n      )) {\n        el.selected = false;\n      }\n      list.resetSelection();\n      this._selectedItems = [];\n    }\n\n    this.value = '';\n    this.search = '';\n    this._input.value = this._displayValue;\n\n    this._input.focus();\n\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #onRemoveTag = (e: Event, value: string) => {\n    e.stopPropagation(); // Don't let this trigger the input click/toggle\n\n    const list = this.#comboboxList;\n    if (!list) return;\n\n    const options = list.querySelectorAll('uui-combobox-list-option');\n    for (const option of options) {\n      if (option.value === value && option.selected) {\n        option.click(); // Triggers SelectableMixin's toggle → fires DESELECTED → list updates arrays\n        break;\n      }\n    }\n  };\n\n  readonly #renderInput = () => {\n    return html`<uui-input\n      slot=\"trigger\"\n      id=\"combobox-input\"\n      label=\"combobox-input\"\n      type=\"text\"\n      .value=${this._displayValue}\n      .placeholder=${this.placeholder}\n      autocomplete=\"off\"\n      .disabled=${this.disabled}\n      .readonly=${this.readonly}\n      popovertarget=\"combobox-popover\"\n      @click=${this.#onToggle}\n      @input=${this.#onInput}\n      @keydown=${this.#onKeyDown}>\n      <slot name=\"input-prepend\" slot=\"prepend\"></slot>\n      ${this.#renderSelectedTags()} ${this.#renderClearButton()}\n      ${this.hideExpandSymbol || this.multiple\n        ? nothing\n        : html`<div id=\"expand-symbol-wrapper\" slot=\"append\">\n            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>\n          </div>`}\n      <slot name=\"input-append\" slot=\"append\"></slot>\n    </uui-input>`;\n  };\n\n  readonly #renderClearButton = () => {\n    if (this.disabled) return nothing;\n    if (this.readonly) return nothing;\n    if (this.multiple) return nothing;\n\n    return html`<uui-button\n      id=\"clear-button\"\n      @click=${this.#onClear}\n      @keydown=${this.#onClear}\n      label=\"clear\"\n      slot=\"append\"\n      compact\n      style=\"height: 100%;\"\n      tabindex=${this.value || this.search || this._selectedItems.length > 0\n        ? ''\n        : '-1'}\n      class=${this.value || this.search || this._selectedItems.length > 0\n        ? 'visible'\n        : ''}>\n      <uui-icon name=\"remove\" .fallback=${iconRemove.strings[0]}></uui-icon>\n    </uui-button>`;\n  };\n\n  readonly #renderSelectedTags = () => {\n    if (this._selectedItems.length === 0) return nothing;\n\n    return html` ${this._selectedItems.map(\n      item =>\n        html`<uui-tag look=\"secondary\">\n          ${item.displayValue}\n          <uui-button\n            compact\n            label=\"Remove ${item.displayValue}\"\n            @click=${(e: Event) => this.#onRemoveTag(e, item.value)}>\n            <uui-icon\n              name=\"remove\"\n              .fallback=${iconRemove.strings[0]}></uui-icon>\n          </uui-button>\n        </uui-tag>`,\n    )}`;\n  };\n\n  readonly #renderDropdown = () => {\n    return html`<div id=\"dropdown\">\n      <uui-scroll-container tabindex=\"-1\" id=\"scroll-container\">\n        <slot @slotchange=${this.#onSlotChange}></slot>\n      </uui-scroll-container>\n    </div>`;\n  };\n\n  render() {\n    if (this._isPhone && this.open) {\n      return html`<div id=\"phone-wrapper\">\n        <uui-button label=\"close\" look=\"primary\" @click=${this.#onClose}>\n          ${this.closeLabel}\n        </uui-button>\n        ${this.#renderInput()} ${this.#renderDropdown()}\n      </div>`;\n    } else {\n      return html`\n        ${this.#renderInput()}\n        <uui-popover-container\n          id=\"combobox-popover\"\n          popover=\"manual\"\n          placement=\"bottom-end\">\n          ${this.#renderDropdown()}\n        </uui-popover-container>\n      `;\n    }\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      #combobox-input {\n        width: 100%;\n        border-radius: var(--uui-border-radius-3);\n      }\n\n      #combobox-popover {\n        width: var(--uui-dropdown-width, var(--popover-width, inherit));\n      }\n\n      #scroll-container {\n        overflow-y: auto;\n        width: 100%;\n        max-height: var(--uui-combobox-popover-max-height, 500px);\n      }\n      #expand-symbol-wrapper {\n        height: 100%;\n        padding-right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: center;\n      }\n\n      #clear-button {\n        opacity: 0;\n        transition: opacity 80ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):focus-within)\n        #clear-button.visible,\n      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {\n        opacity: 1;\n      }\n\n      #dropdown {\n        overflow: hidden;\n        z-index: -1;\n        background-color: var(\n          --uui-combobox-popover-background-color,\n          var(--uui-color-surface)\n        );\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-3);\n        width: 100%;\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-3);\n      }\n\n      :host([disabled]) #caret {\n        fill: var(--uui-color-disabled-contrast);\n      }\n\n      #phone-wrapper {\n        position: fixed;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        z-index: 1;\n        font-size: 1.1em;\n      }\n\n      #phone-wrapper #dropdown {\n        display: flex;\n      }\n\n      #phone-wrapper #combobox-input {\n        height: var(--uui-size-16);\n      }\n\n      #phone-wrapper > uui-button {\n        height: var(--uui-size-14);\n        width: 100%;\n      }\n\n      #phone-wrapper #scroll-container {\n        max-height: unset;\n      }\n\n      :host([multiple]) #combobox-input {\n        --uui-input-height: auto;\n        min-height: var(--uui-size-11);\n      }\n      :host([multiple]) uui-tag {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n      }\n\n      :host([multiple]) uui-tag uui-button {\n        font-size: 10px;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"combobox.element.js","names":["#phoneMediaQuery","#onClose","#onOpen","#comboboxList","#updateValue","#onRemoveTag","#onToggle","#onInput","#onKeyDown","#renderSelectedTags","#renderClearButton","#onClear","#onSlotChange","#onBlur","#onMouseDown","#onPhoneChange","#onChange","#onInnerSlotChange","#renderInput","#renderDropdown"],"sources":["../../../src/components/combobox/combobox.element.ts"],"sourcesContent":["import { UUIFormControlWithBasicsMixin } from '../../internal/mixins/index.js';\nimport type {\n  UUIComboboxListElement,\n  UUIComboboxListOptionElement,\n} from '../combobox-list/combobox-list.js';\nimport { UUIComboboxListEvent } from '../combobox-list/combobox-list.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport type { UUIPopoverContainerElement } from '../popover-container/popover-container.js';\nimport { css, html, LitElement, nothing } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\n\nimport { UUIComboboxEvent } from './UUIComboboxEvent.js';\n\nimport '../input/input.js';\nimport '../symbol-expand/symbol-expand.js';\nimport '../button/button.js';\nimport '../icon/icon.js';\nimport '../scroll-container/scroll-container.js';\nimport '../popover-container/popover-container.js';\nimport '../tag/tag.js';\n\n/**\n * @element uui-combobox\n * @fires {UUIComboboxEvent} input - fires when search input is changed\n * @fires {UUIComboboxEvent} change - fires when selection is changed\n * @slot - for uui-combobox-list-options\n * @slot input-prepend - prepend for the uui-input\n * @slot input-append - append for the uui-input\n * @cssprop --uui-dropdown-width - overwrite the dropdown width\n * @description - Filterable combobox\n */\nexport class UUIComboboxElement extends UUIFormControlWithBasicsMixin(\n  LitElement,\n  '',\n) {\n  @property({ attribute: 'value', reflect: true })\n  set value(newValue) {\n    super.value = newValue;\n\n    if (typeof newValue === 'string') {\n      this.#updateValue();\n    }\n  }\n  get value() {\n    return super.value;\n  }\n\n  /**\n   * The search input.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String })\n  public set search(newValue) {\n    if (this.search === newValue) return;\n    const oldValue = this._search;\n    this._search = newValue;\n    this.requestUpdate('search', oldValue);\n  }\n  public get search() {\n    return this._search;\n  }\n\n  /**\n   * Specifies if the popover should be open.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean })\n  public set open(newValue: boolean) {\n    const oldValue = newValue;\n    this._isOpen = newValue;\n    const popover = this._comboboxPopoverElement;\n    if (popover) {\n      if (newValue) {\n        const width = this._input.offsetWidth;\n        popover.style.setProperty('--popover-width', `${width}px`);\n        popover.showPopover();\n      } else {\n        popover.hidePopover();\n      }\n    }\n\n    this.requestUpdate('open', oldValue);\n  }\n  public get open() {\n    return this._isOpen;\n  }\n\n  /**\n   * Specifies the button label for the close button in mobile mode\n   * @type {string}\n   * @attr\n   * @default \"Close\"\n   */\n  @property({ type: String, attribute: 'close-label' })\n  public closeLabel = 'Close';\n\n  /**\n   * Disables the uui-combobox.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Enables multiple selection mode.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Removes the expand symbol.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: false, attribute: 'hide-expand-symbol' })\n  hideExpandSymbol = false;\n\n  /**\n   * Sets the input to readonly mode, meaning value cannot be changed but still able to read and select its content.\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Defines the input placeholder.\n   * @type {string}\n   * @attr\n   * @default ''\n   */\n  @property()\n  placeholder = '';\n\n  @query('#combobox-input')\n  private readonly _input!: HTMLInputElement;\n\n  @query('#combobox-popover')\n  private readonly _comboboxPopoverElement?: UUIPopoverContainerElement;\n\n  @queryAssignedElements({\n    flatten: true,\n    selector: 'uui-combobox-list',\n  })\n  private readonly _comboboxListElements?: UUIComboboxListElement[];\n\n  #comboboxList!: UUIComboboxListElement;\n  #phoneMediaQuery!: MediaQueryList;\n\n  @state()\n  private _displayValue = '';\n\n  @state()\n  private _search = '';\n\n  @state()\n  private _isPhone = false;\n\n  @state()\n  private _isOpen = false;\n\n  @state()\n  private _selectedItems: Array<{ value: string; displayValue: string }> = [];\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.addEventListener('blur', this.#onBlur);\n    this.addEventListener('mousedown', this.#onMouseDown);\n\n    this.#phoneMediaQuery = window.matchMedia('(max-width: 600px)');\n    this.#onPhoneChange();\n    this.#phoneMediaQuery.addEventListener('change', this.#onPhoneChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n\n    this.removeEventListener('blur', this.#onBlur);\n    this.removeEventListener('mousedown', this.#onMouseDown);\n    this.#phoneMediaQuery.removeEventListener('change', this.#onPhoneChange);\n  }\n\n  #onSlotChange() {\n    if (this.#comboboxList) {\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.removeEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n    const list = this._comboboxListElements?.[0];\n\n    if (list) {\n      this.#comboboxList = list;\n      this.#comboboxList.for = this;\n      this.#comboboxList.multiple = this.multiple;\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.CHANGE,\n        this.#onChange,\n      );\n      this.#comboboxList.addEventListener(\n        UUIComboboxListEvent.INNER_SLOT_CHANGE,\n        this.#onInnerSlotChange,\n      );\n    }\n\n    this.updateComplete.then(() => {\n      this.#updateValue();\n    });\n  }\n\n  readonly #onPhoneChange = () => {\n    this._isPhone = this.#phoneMediaQuery.matches;\n  };\n\n  #updateValue() {\n    if (this.#comboboxList) {\n      this.#comboboxList.value = this.value;\n      requestAnimationFrame(\n        () => (this._displayValue = this.#comboboxList.displayValue || ''),\n      );\n    }\n  }\n\n  protected getFormElement(): HTMLElement | undefined {\n    return this._input;\n  }\n\n  async focus() {\n    await this.updateComplete;\n    this._input.focus();\n  }\n  async blur() {\n    await this.updateComplete;\n    this._input.blur();\n  }\n  async click() {\n    await this.updateComplete;\n    this._input.click();\n  }\n\n  readonly #onMouseDown = () =>\n    requestAnimationFrame(() => this._input.focus());\n\n  readonly #onBlur = () =>\n    requestAnimationFrame(() => {\n      if (!this.shadowRoot?.activeElement) {\n        this.#onClose();\n      }\n    });\n\n  readonly #onInput = (e: any) => {\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.search = e.target.value;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.#onOpen();\n  };\n\n  readonly #onInnerSlotChange = () => {\n    if (this.value && this.value !== this.#comboboxList?.value) {\n      this.#updateValue();\n    }\n  };\n\n  readonly #onChange = () => {\n    const list = this.#comboboxList;\n    if (!list) return;\n\n    if (list.multiple) {\n      this._selectedItems = list.selectedValues.map((val, i) => ({\n        value: val,\n        displayValue: list.selectedDisplayValues[i] || val,\n      }));\n      this.value = list.selectedValues.join(',');\n\n      this.search = '';\n      this._input.value = '';\n      this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    } else {\n      this.value = list.value || '';\n      this.search = this.value ? this.search : '';\n      this.#onClose();\n    }\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #onToggle = () => {\n    if (this.readonly) return;\n    this.open = !this.open;\n  };\n\n  readonly #onOpen = () => {\n    if (this.open) return;\n    if (this.readonly) return;\n    this.open = true;\n  };\n\n  readonly #onClose = () => {\n    if (!this.open) return;\n\n    this.open = false;\n    this.search = '';\n    // Reset input(search-input) value:\n    this._input.value = this._displayValue;\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n  };\n\n  readonly #onKeyDown = (e: KeyboardEvent) => {\n    if (\n      e.code === 'Backspace' &&\n      this.multiple &&\n      this._selectedItems.length > 0 &&\n      this.search === ''\n    ) {\n      const lastItem = this._selectedItems.at(-1);\n      if (lastItem) this.#onRemoveTag(e, lastItem.value);\n      return;\n    }\n    if (this.open === false && e.code === 'Enter') {\n      e.preventDefault(); // Prevent form submission when combobox is closed\n      e.stopImmediatePropagation(); // Don't let list handle Enter when closed\n\n      this.#onOpen();\n    }\n\n    if (e.code === 'ArrowUp' || e.code === 'ArrowDown') {\n      this.#onOpen();\n    }\n\n    if (e.code === 'Escape') {\n      this.#onClose();\n    }\n  };\n\n  readonly #onClear = (e: any) => {\n    if (e.key && e.key !== 'Enter') return;\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n\n    const list = this.#comboboxList;\n    if (list?.multiple) {\n      // Deselect all options\n      for (const el of list.querySelectorAll<UUIComboboxListOptionElement>(\n        'uui-combobox-list-option[selected]',\n      )) {\n        el.selected = false;\n      }\n      list.resetSelection();\n      this._selectedItems = [];\n    }\n\n    this.value = '';\n    this.search = '';\n    this._input.value = this._displayValue;\n\n    this._input.focus();\n\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.SEARCH));\n    this.dispatchEvent(new UUIComboboxEvent(UUIComboboxEvent.CHANGE));\n  };\n\n  readonly #onRemoveTag = (e: Event, value: string) => {\n    e.stopPropagation(); // Don't let this trigger the input click/toggle\n\n    const list = this.#comboboxList;\n    if (!list) return;\n\n    const options = list.querySelectorAll('uui-combobox-list-option');\n    for (const option of options) {\n      if (option.value === value && option.selected) {\n        option.click(); // Triggers SelectableMixin's toggle → fires DESELECTED → list updates arrays\n        break;\n      }\n    }\n  };\n\n  readonly #renderInput = () => {\n    return html`<uui-input\n      slot=\"trigger\"\n      id=\"combobox-input\"\n      label=\"combobox-input\"\n      type=\"text\"\n      .value=${this._displayValue}\n      .placeholder=${this.placeholder}\n      autocomplete=\"off\"\n      .disabled=${this.disabled}\n      .readonly=${this.readonly}\n      popovertarget=\"combobox-popover\"\n      @click=${this.#onToggle}\n      @input=${this.#onInput}\n      @keydown=${this.#onKeyDown}>\n      <slot name=\"input-prepend\" slot=\"prepend\"></slot>\n      ${this.#renderSelectedTags()} ${this.#renderClearButton()}\n      ${this.hideExpandSymbol || this.multiple\n        ? nothing\n        : html`<div id=\"expand-symbol-wrapper\" slot=\"append\">\n            <uui-symbol-expand .open=${this._isOpen}></uui-symbol-expand>\n          </div>`}\n      <slot name=\"input-append\" slot=\"append\"></slot>\n    </uui-input>`;\n  };\n\n  readonly #renderClearButton = () => {\n    if (this.disabled) return nothing;\n    if (this.readonly) return nothing;\n    if (this.multiple) return nothing;\n\n    return html`<uui-button\n      id=\"clear-button\"\n      @click=${this.#onClear}\n      @keydown=${this.#onClear}\n      label=\"clear\"\n      slot=\"append\"\n      compact\n      style=\"height: 100%;\"\n      tabindex=${this.value || this.search || this._selectedItems.length > 0\n        ? ''\n        : '-1'}\n      class=${this.value || this.search || this._selectedItems.length > 0\n        ? 'visible'\n        : ''}>\n      <uui-icon name=\"remove\" .fallback=${iconRemove.strings[0]}></uui-icon>\n    </uui-button>`;\n  };\n\n  readonly #renderSelectedTags = () => {\n    if (this._selectedItems.length === 0) return nothing;\n\n    return html` ${this._selectedItems.map(\n      item =>\n        html`<uui-tag look=\"secondary\">\n          ${item.displayValue}\n          <uui-button\n            compact\n            label=\"Remove ${item.displayValue}\"\n            @click=${(e: Event) => this.#onRemoveTag(e, item.value)}>\n            <uui-icon\n              name=\"remove\"\n              .fallback=${iconRemove.strings[0]}></uui-icon>\n          </uui-button>\n        </uui-tag>`,\n    )}`;\n  };\n\n  readonly #renderDropdown = () => {\n    return html`<div id=\"dropdown\">\n      <uui-scroll-container tabindex=\"-1\" id=\"scroll-container\">\n        <slot @slotchange=${this.#onSlotChange}></slot>\n      </uui-scroll-container>\n    </div>`;\n  };\n\n  render() {\n    if (this._isPhone && this.open) {\n      return html`<div id=\"phone-wrapper\">\n        <uui-button label=\"close\" look=\"primary\" @click=${this.#onClose}>\n          ${this.closeLabel}\n        </uui-button>\n        ${this.#renderInput()} ${this.#renderDropdown()}\n      </div>`;\n    } else {\n      return html`\n        ${this.#renderInput()}\n        <uui-popover-container\n          id=\"combobox-popover\"\n          popover=\"manual\"\n          placement=\"bottom-end\">\n          ${this.#renderDropdown()}\n        </uui-popover-container>\n      `;\n    }\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        display: inline-flex;\n      }\n\n      #combobox-input {\n        width: 100%;\n        border-radius: var(--uui-border-radius-3);\n      }\n\n      #combobox-popover {\n        width: var(--uui-dropdown-width, var(--popover-width, inherit));\n      }\n\n      #scroll-container {\n        overflow-y: auto;\n        width: 100%;\n        max-height: var(--uui-combobox-popover-max-height, 500px);\n      }\n      #expand-symbol-wrapper {\n        height: 100%;\n        padding-right: var(--uui-size-space-3);\n        display: flex;\n        justify-content: center;\n      }\n\n      #clear-button {\n        opacity: 0;\n        transition: opacity 80ms;\n      }\n\n      :host(:not([disabled]):not([readonly]):focus-within)\n        #clear-button.visible,\n      :host(:not([disabled]):not([readonly]):hover) #clear-button.visible {\n        opacity: 1;\n      }\n\n      #dropdown {\n        overflow: hidden;\n        z-index: -1;\n        background-color: var(\n          --uui-combobox-popover-background-color,\n          var(--uui-color-surface)\n        );\n        border: 1px solid var(--uui-color-border);\n        border-radius: var(--uui-border-radius-3);\n        width: 100%;\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-3);\n      }\n\n      :host([disabled]) #caret {\n        fill: var(--uui-color-disabled-contrast);\n      }\n\n      #phone-wrapper {\n        position: fixed;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        z-index: 1;\n        font-size: 1.1em;\n      }\n\n      #phone-wrapper #dropdown {\n        display: flex;\n      }\n\n      #phone-wrapper #combobox-input {\n        height: var(--uui-size-16);\n      }\n\n      #phone-wrapper > uui-button {\n        height: var(--uui-size-14);\n        width: 100%;\n      }\n\n      #phone-wrapper #scroll-container {\n        max-height: unset;\n      }\n\n      :host([multiple]) #combobox-input {\n        --uui-input-height: auto;\n        min-height: var(--uui-size-11);\n      }\n      :host([multiple]) uui-tag {\n        display: inline-flex;\n        align-items: center;\n        gap: 2px;\n      }\n\n      :host([multiple]) uui-tag uui-button {\n        font-size: 10px;\n      }\n    `,\n  ];\n}\n"],"mappings":"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"}

package/dist/components/combobox/combobox.js

@@ -1,10 +1,9 @@
 import { defineElement } from "../../internal/registration/index.js";
-import { UUIComboboxElement } from "./combobox.element.js";
 import { UUIComboboxEvent } from "./UUIComboboxEvent.js";
+import { UUIComboboxElement } from "./combobox.element.js";
+//#region src/components/combobox/combobox.ts
 defineElement("uui-combobox", UUIComboboxElement);
-export {
-  UUIComboboxElement,
-  UUIComboboxEvent,
-  UUIComboboxElement as default
-};
-//# sourceMappingURL=combobox.js.map
+//#endregion
+export { UUIComboboxElement, UUIComboboxEvent };
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox.js","sources":["../../../src/components/combobox/combobox.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIComboboxElement } from './combobox.element.js';\n\ndefineElement('uui-combobox', UUIComboboxElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-combobox': UUIComboboxElement;\n  }\n}\n\nexport * from './combobox.element.js';\nexport * from './UUIComboboxEvent.js';\nexport { UUIComboboxElement as default } from './combobox.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,gBAAgB,kBAAkB;"}
+{"version":3,"file":"combobox.js","names":[],"sources":["../../../src/components/combobox/combobox.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIComboboxElement } from './combobox.element.js';\n\ndefineElement('uui-combobox', UUIComboboxElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-combobox': UUIComboboxElement;\n  }\n}\n\nexport * from './combobox.element.js';\nexport * from './UUIComboboxEvent.js';\n"],"mappings":";;;;AAGA,cAAc,gBAAgB,kBAAkB"}

package/dist/components/combobox-list/UUIComboboxListEvent.js

@@ -1,16 +1,20 @@
 import { UUIEvent } from "../../internal/events/UUIEvent.js";
-const _UUIComboboxListEvent = class _UUIComboboxListEvent extends UUIEvent {
-  constructor(evName, eventInit = {}) {
-    super(evName, {
-      bubbles: true,
-      ...eventInit
-    });
-  }
+//#region src/components/combobox-list/UUIComboboxListEvent.ts
+var UUIComboboxListEvent = class extends UUIEvent {
+	static {
+		this.CHANGE = "change";
+	}
+	static {
+		this.INNER_SLOT_CHANGE = "inner-slot-change";
+	}
+	constructor(evName, eventInit = {}) {
+		super(evName, {
+			bubbles: true,
+			...eventInit
+		});
+	}
 };
-_UUIComboboxListEvent.CHANGE = "change";
-_UUIComboboxListEvent.INNER_SLOT_CHANGE = "inner-slot-change";
-let UUIComboboxListEvent = _UUIComboboxListEvent;
-export {
-  UUIComboboxListEvent
-};
-//# sourceMappingURL=UUIComboboxListEvent.js.map
+//#endregion
+export { UUIComboboxListEvent };
+
+//# sourceMappingURL=UUIComboboxListEvent.js.map

package/dist/components/combobox-list/UUIComboboxListEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"UUIComboboxListEvent.js","sources":["../../../src/components/combobox-list/UUIComboboxListEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIComboboxListElement } from './combobox-list.element.js';\n\nexport class UUIComboboxListEvent extends UUIEvent<UUIComboboxListElement> {\n  public static readonly CHANGE: string = 'change';\n  public static readonly INNER_SLOT_CHANGE: string = 'inner-slot-change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"names":[],"mappings":";AAGO,MAAM,wBAAN,MAAM,8BAA6B,SAAiC;AAAA,EAIzE,YAAY,QAAgB,YAAiB,IAAI;AAC/C,UAAM,QAAQ;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,CACJ;AAAA,EACH;AACF;AATE,sBAAuB,SAAiB;AACxC,sBAAuB,oBAA4B;AAF9C,IAAM,uBAAN;"}
+{"version":3,"file":"UUIComboboxListEvent.js","names":[],"sources":["../../../src/components/combobox-list/UUIComboboxListEvent.ts"],"sourcesContent":["import { UUIEvent } from '../../internal/events/index.js';\nimport type { UUIComboboxListElement } from './combobox-list.element.js';\n\nexport class UUIComboboxListEvent extends UUIEvent<UUIComboboxListElement> {\n  public static readonly CHANGE: string = 'change';\n  public static readonly INNER_SLOT_CHANGE: string = 'inner-slot-change';\n\n  constructor(evName: string, eventInit: any = {}) {\n    super(evName, {\n      bubbles: true,\n      ...eventInit,\n    });\n  }\n}\n"],"mappings":";;AAGA,IAAa,uBAAb,cAA0C,SAAiC;;gBACjC;;;2BACW;;CAEnD,YAAY,QAAgB,YAAiB,CAAC,GAAG;EAC/C,MAAM,QAAQ;GACZ,SAAS;GACT,GAAG;EACL,CAAC;CACH;AACF"}

package/dist/components/combobox-list/combobox-list-option.element.js

@@ -1,60 +1,71 @@
-import { LitElement, nothing, html, css } from "lit";
-import { state, property } from "lit/decorators.js";
-import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { ActiveMixin } from "../../internal/mixins/ActiveMixin.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const _UUIComboboxListOptionElement = class _UUIComboboxListOptionElement extends SelectableMixin(
-  ActiveMixin(LitElement)
-) {
-  constructor() {
-    super();
-    this._disabled = false;
-    this._displayValue = "";
-    this.multiple = false;
-    this.selectable = true;
-    this.deselectable = false;
-  }
-  get value() {
-    return this._value ? this._value : this.textContent?.trim() || "";
-  }
-  set value(newValue) {
-    const oldValue = this._value;
-    this._value = newValue;
-    this.requestUpdate("value", oldValue);
-  }
-  get displayValue() {
-    return this._displayValue ? this._displayValue : this.textContent?.trim() || "";
-  }
-  set displayValue(newValue) {
-    const oldValue = this._displayValue;
-    this._displayValue = newValue;
-    this.requestUpdate("displayValue", oldValue);
-  }
-  get disabled() {
-    return this._disabled;
-  }
-  set disabled(newValue) {
-    const oldValue = this._disabled;
-    this._disabled = newValue;
-    this.selectable = !this._disabled;
-    this.requestUpdate("disabled", oldValue);
-  }
-  render() {
-    return html`${this.multiple ? html`<span id="checkbox"></span>` : nothing}
-      <slot></slot>`;
-  }
-};
-_UUIComboboxListOptionElement.styles = [
-  css`
+import { SelectableMixin } from "../../internal/mixins/SelectableMixin.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/combobox-list/combobox-list-option.element.ts
+/**
+* @element uui-combobox-list-option
+* @slot - For option content
+* @description - An option to be used within uui-combobox-list
+*/
+var UUIComboboxListOptionElement = class extends SelectableMixin(ActiveMixin(LitElement)) {
+	/**
+	* Value of the option.
+	* @type {string}
+	* @attr
+	* @default ""
+	*/
+	get value() {
+		return this._value ? this._value : this.textContent?.trim() || "";
+	}
+	set value(newValue) {
+		const oldValue = this._value;
+		this._value = newValue;
+		this.requestUpdate("value", oldValue);
+	}
+	/**
+	* A readable value.
+	* @type {string}
+	* @attr
+	* @default ""
+	*/
+	get displayValue() {
+		return this._displayValue ? this._displayValue : this.textContent?.trim() || "";
+	}
+	set displayValue(newValue) {
+		const oldValue = this._displayValue;
+		this._displayValue = newValue;
+		this.requestUpdate("displayValue", oldValue);
+	}
+	/**
+	* Determines if the options is disabled. If true the option can't be selected
+	* @type {boolean}
+	* @attr
+	* @default false
+	*/
+	get disabled() {
+		return this._disabled;
+	}
+	set disabled(newValue) {
+		const oldValue = this._disabled;
+		this._disabled = newValue;
+		this.selectable = !this._disabled;
+		this.requestUpdate("disabled", oldValue);
+	}
+	constructor() {
+		super();
+		this._disabled = false;
+		this._displayValue = "";
+		this.multiple = false;
+		this.selectable = true;
+		this.deselectable = false;
+	}
+	render() {
+		return html`${this.multiple ? html`<span id="checkbox"></span>` : nothing} <slot></slot>`;
+	}
+	static {
+		this.styles = [css`
       :host {
         position: relative;
         cursor: pointer;
@@ -162,28 +173,25 @@ _UUIComboboxListOptionElement.styles = [
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
       }
-    `
-];
-let UUIComboboxListOptionElement = _UUIComboboxListOptionElement;
-__decorateClass([
-  state()
-], UUIComboboxListOptionElement.prototype, "_disabled", 2);
-__decorateClass([
-  state()
-], UUIComboboxListOptionElement.prototype, "_displayValue", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIComboboxListOptionElement.prototype, "multiple", 2);
-__decorateClass([
-  property({ type: String })
-], UUIComboboxListOptionElement.prototype, "value", 1);
-__decorateClass([
-  property({ type: String, attribute: "display-value" })
-], UUIComboboxListOptionElement.prototype, "displayValue", 1);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], UUIComboboxListOptionElement.prototype, "disabled", 1);
-export {
-  UUIComboboxListOptionElement
+    `];
+	}
 };
-//# sourceMappingURL=combobox-list-option.element.js.map
+__decorate([state()], UUIComboboxListOptionElement.prototype, "_disabled", void 0);
+__decorate([state()], UUIComboboxListOptionElement.prototype, "_displayValue", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIComboboxListOptionElement.prototype, "multiple", void 0);
+__decorate([property({ type: String })], UUIComboboxListOptionElement.prototype, "value", null);
+__decorate([property({
+	type: String,
+	attribute: "display-value"
+})], UUIComboboxListOptionElement.prototype, "displayValue", null);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], UUIComboboxListOptionElement.prototype, "disabled", null);
+//#endregion
+export { UUIComboboxListOptionElement };
+
+//# sourceMappingURL=combobox-list-option.element.js.map

package/dist/components/combobox-list/combobox-list-option.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-list-option.element.js","sources":["../../../src/components/combobox-list/combobox-list-option.element.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ActiveMixin, SelectableMixin } from '../../internal/mixins/index.js';\n\n/**\n * @element uui-combobox-list-option\n * @slot - For option content\n * @description - An option to be used within uui-combobox-list\n */\nexport class UUIComboboxListOptionElement extends SelectableMixin(\n  ActiveMixin(LitElement),\n) {\n  private _value: string | undefined;\n\n  @state()\n  private _disabled = false;\n\n  @state() _displayValue = '';\n\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Value of the option.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String })\n  public get value(): string {\n    return this._value ? this._value : this.textContent?.trim() || '';\n  }\n  public set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n  }\n\n  /**\n   * A readable value.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String, attribute: 'display-value' })\n  public get displayValue() {\n    return this._displayValue\n      ? this._displayValue\n      : this.textContent?.trim() || '';\n  }\n  public set displayValue(newValue) {\n    const oldValue = this._displayValue;\n    this._displayValue = newValue;\n    this.requestUpdate('displayValue', oldValue);\n  }\n\n  /**\n   * Determines if the options is disabled. If true the option can't be selected\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get disabled() {\n    return this._disabled;\n  }\n  public set disabled(newValue) {\n    const oldValue = this._disabled;\n    this._disabled = newValue;\n    this.selectable = !this._disabled;\n    this.requestUpdate('disabled', oldValue);\n  }\n\n  constructor() {\n    super();\n    this.selectable = true;\n    this.deselectable = false;\n  }\n\n  render() {\n    return html`${this.multiple ? html`<span id=\"checkbox\"></span>` : nothing}\n      <slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        cursor: pointer;\n        margin: 1px var(--uui-size-1);\n        border-radius: var(--uui-border-radius);\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n        padding: var(--uui-size-2);\n        padding-left: var(--uui-size-3);\n      }\n\n      :host(:first-child) {\n        margin-top: 6px;\n      }\n      :host(:last-child) {\n        margin-bottom: 6px;\n      }\n\n      :host([selected]):host([active])::after {\n        display: block;\n        content: '';\n        position: absolute;\n        inset: 2px;\n        border: var(--uui-color-surface) solid 1px;\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        pointer-events: none;\n      }\n      /*\n      :host::before {\n        display: block;\n        content: '';\n        opacity: 0;\n        position: absolute;\n        inset: 0;\n        background-color: var(--uui-color-selected);\n      }\n\n      :host(:hover)::before {\n        opacity: 0.15;\n        border-radius: var(--uui-border-radius);\n      } */\n\n      :host(:hover) {\n        background-color: var(--uui-color-surface-emphasis);\n        color: var(--uui-color-interactive-emphasis);\n      }\n\n      :host([disabled]) {\n        cursor: auto;\n        color: var(--uui-color-disabled-contrast);\n        background-color: var(--uui-color-disabled);\n      }\n\n      :host([disabled]:hover) {\n        background-color: var(--uui-color-disabled);\n      }\n\n      :host([active]) {\n        outline-color: var(--uui-color-focus);\n      }\n\n      :host([selected]:not([multiple])) {\n        color: var(--uui-color-selected-contrast);\n        background-color: var(--uui-color-selected);\n      }\n\n      :host([selected]:not([multiple]):hover) {\n        color: var(--uui-color-selected-contrast);\n        background-color: var(--uui-color-selected-emphasis);\n      }\n      :host([selected][disabled]) {\n        color: var(--uui-color-disabled-contrast);\n        background-color: var(--uui-color-disabled);\n      }\n\n      #checkbox {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        min-width: 16px;\n        border: 2px solid var(--uui-color-border-standalone);\n        border-radius: 3px;\n        margin-right: var(--uui-size-2);\n        vertical-align: middle;\n        box-sizing: border-box;\n        position: relative;\n      }\n\n      :host([selected]) #checkbox {\n        background-color: var(--uui-color-selected);\n        border-color: var(--uui-color-selected);\n      }\n\n      :host([selected]) #checkbox::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 2px;\n        margin: auto;\n        width: 4px;\n        height: 8px;\n        border: solid var(--uui-color-selected-contrast);\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASO,MAAM,gCAAN,MAAM,sCAAqC;AAAA,EAChD,YAAY,UAAU;AACxB,EAAE;AAAA,EA8DA,cAAc;AACZ,UAAA;AA3DF,SAAQ,YAAY;AAEX,SAAA,gBAAgB;AAGzB,SAAA,WAAW;AAuDT,SAAK,aAAa;AAClB,SAAK,eAAe;AAAA,EACtB;AAAA,EAhDA,IAAW,QAAgB;AACzB,WAAO,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,UAAU;AAAA,EACjE;AAAA,EACA,IAAW,MAAM,UAAkB;AACjC,UAAM,WAAW,KAAK;AACtB,SAAK,SAAS;AACd,SAAK,cAAc,SAAS,QAAQ;AAAA,EACtC;AAAA,EASA,IAAW,eAAe;AACxB,WAAO,KAAK,gBACR,KAAK,gBACL,KAAK,aAAa,UAAU;AAAA,EAClC;AAAA,EACA,IAAW,aAAa,UAAU;AAChC,UAAM,WAAW,KAAK;AACtB,SAAK,gBAAgB;AACrB,SAAK,cAAc,gBAAgB,QAAQ;AAAA,EAC7C;AAAA,EASA,IAAW,WAAW;AACpB,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,SAAS,UAAU;AAC5B,UAAM,WAAW,KAAK;AACtB,SAAK,YAAY;AACjB,SAAK,aAAa,CAAC,KAAK;AACxB,SAAK,cAAc,YAAY,QAAQ;AAAA,EACzC;AAAA,EAQA,SAAS;AACP,WAAO,OAAO,KAAK,WAAW,oCAAoC,OAAO;AAAA;AAAA,EAE3E;AAiHF;AA/GE,8BAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA5EG,IAAM,+BAAN;AAMG,gBAAA;AAAA,EADP,MAAA;AAAM,GALI,6BAMH,WAAA,aAAA,CAAA;AAEC,gBAAA;AAAA,EAAR,MAAA;AAAM,GARI,6BAQF,WAAA,iBAAA,CAAA;AAGT,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GAV/B,6BAWX,WAAA,YAAA,CAAA;AASW,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnBf,6BAoBA,WAAA,SAAA,CAAA;AAgBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB;AAAA,GAnC3C,6BAoCA,WAAA,gBAAA,CAAA;AAkBA,gBAAA;AAAA,EADV,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM;AAAA,GArD/B,6BAsDA,WAAA,YAAA,CAAA;"}
+{"version":3,"file":"combobox-list-option.element.js","names":[],"sources":["../../../src/components/combobox-list/combobox-list-option.element.ts"],"sourcesContent":["import { css, html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { ActiveMixin, SelectableMixin } from '../../internal/mixins/index.js';\n\n/**\n * @element uui-combobox-list-option\n * @slot - For option content\n * @description - An option to be used within uui-combobox-list\n */\nexport class UUIComboboxListOptionElement extends SelectableMixin(\n  ActiveMixin(LitElement),\n) {\n  private _value: string | undefined;\n\n  @state()\n  private _disabled = false;\n\n  @state() _displayValue = '';\n\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Value of the option.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String })\n  public get value(): string {\n    return this._value ? this._value : this.textContent?.trim() || '';\n  }\n  public set value(newValue: string) {\n    const oldValue = this._value;\n    this._value = newValue;\n    this.requestUpdate('value', oldValue);\n  }\n\n  /**\n   * A readable value.\n   * @type {string}\n   * @attr\n   * @default \"\"\n   */\n  @property({ type: String, attribute: 'display-value' })\n  public get displayValue() {\n    return this._displayValue\n      ? this._displayValue\n      : this.textContent?.trim() || '';\n  }\n  public set displayValue(newValue) {\n    const oldValue = this._displayValue;\n    this._displayValue = newValue;\n    this.requestUpdate('displayValue', oldValue);\n  }\n\n  /**\n   * Determines if the options is disabled. If true the option can't be selected\n   * @type {boolean}\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get disabled() {\n    return this._disabled;\n  }\n  public set disabled(newValue) {\n    const oldValue = this._disabled;\n    this._disabled = newValue;\n    this.selectable = !this._disabled;\n    this.requestUpdate('disabled', oldValue);\n  }\n\n  constructor() {\n    super();\n    this.selectable = true;\n    this.deselectable = false;\n  }\n\n  render() {\n    const checkbox = this.multiple\n      ? html`<span id=\"checkbox\"></span>`\n      : nothing;\n    return html`${checkbox} <slot></slot>`;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: relative;\n        cursor: pointer;\n        margin: 1px var(--uui-size-1);\n        border-radius: var(--uui-border-radius);\n        outline: 2px solid transparent;\n        outline-offset: -2px;\n        padding: var(--uui-size-2);\n        padding-left: var(--uui-size-3);\n      }\n\n      :host(:first-child) {\n        margin-top: 6px;\n      }\n      :host(:last-child) {\n        margin-bottom: 6px;\n      }\n\n      :host([selected]):host([active])::after {\n        display: block;\n        content: '';\n        position: absolute;\n        inset: 2px;\n        border: var(--uui-color-surface) solid 1px;\n        border-radius: calc(var(--uui-border-radius) - 1px);\n        pointer-events: none;\n      }\n      /*\n      :host::before {\n        display: block;\n        content: '';\n        opacity: 0;\n        position: absolute;\n        inset: 0;\n        background-color: var(--uui-color-selected);\n      }\n\n      :host(:hover)::before {\n        opacity: 0.15;\n        border-radius: var(--uui-border-radius);\n      } */\n\n      :host(:hover) {\n        background-color: var(--uui-color-surface-emphasis);\n        color: var(--uui-color-interactive-emphasis);\n      }\n\n      :host([disabled]) {\n        cursor: auto;\n        color: var(--uui-color-disabled-contrast);\n        background-color: var(--uui-color-disabled);\n      }\n\n      :host([disabled]:hover) {\n        background-color: var(--uui-color-disabled);\n      }\n\n      :host([active]) {\n        outline-color: var(--uui-color-focus);\n      }\n\n      :host([selected]:not([multiple])) {\n        color: var(--uui-color-selected-contrast);\n        background-color: var(--uui-color-selected);\n      }\n\n      :host([selected]:not([multiple]):hover) {\n        color: var(--uui-color-selected-contrast);\n        background-color: var(--uui-color-selected-emphasis);\n      }\n      :host([selected][disabled]) {\n        color: var(--uui-color-disabled-contrast);\n        background-color: var(--uui-color-disabled);\n      }\n\n      #checkbox {\n        display: inline-block;\n        width: 16px;\n        height: 16px;\n        min-width: 16px;\n        border: 2px solid var(--uui-color-border-standalone);\n        border-radius: 3px;\n        margin-right: var(--uui-size-2);\n        vertical-align: middle;\n        box-sizing: border-box;\n        position: relative;\n      }\n\n      :host([selected]) #checkbox {\n        background-color: var(--uui-color-selected);\n        border-color: var(--uui-color-selected);\n      }\n\n      :host([selected]) #checkbox::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        bottom: 2px;\n        margin: auto;\n        width: 4px;\n        height: 8px;\n        border: solid var(--uui-color-selected-contrast);\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;AASA,IAAa,+BAAb,cAAkD,gBAChD,YAAY,UAAU,CACxB,CAAC,CAAC;;;;;;;CAiBA,IACW,QAAgB;EACzB,OAAO,KAAK,SAAS,KAAK,SAAS,KAAK,aAAa,KAAK,KAAK;CACjE;CACA,IAAW,MAAM,UAAkB;EACjC,MAAM,WAAW,KAAK;EACtB,KAAK,SAAS;EACd,KAAK,cAAc,SAAS,QAAQ;CACtC;;;;;;;CAQA,IACW,eAAe;EACxB,OAAO,KAAK,gBACR,KAAK,gBACL,KAAK,aAAa,KAAK,KAAK;CAClC;CACA,IAAW,aAAa,UAAU;EAChC,MAAM,WAAW,KAAK;EACtB,KAAK,gBAAgB;EACrB,KAAK,cAAc,gBAAgB,QAAQ;CAC7C;;;;;;;CAQA,IACW,WAAW;EACpB,OAAO,KAAK;CACd;CACA,IAAW,SAAS,UAAU;EAC5B,MAAM,WAAW,KAAK;EACtB,KAAK,YAAY;EACjB,KAAK,aAAa,CAAC,KAAK;EACxB,KAAK,cAAc,YAAY,QAAQ;CACzC;CAEA,cAAc;EACZ,MAAM;mBA3DY;uBAEK;kBAGd;EAuDT,KAAK,aAAa;EAClB,KAAK,eAAe;CACtB;CAEA,SAAS;EAIP,OAAO,IAAI,GAHM,KAAK,WAClB,IAAI,gCACJ,QACmB;CACzB;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6GL;;AACF;YAvLG,MAAM,CAAA,GAAA,6BAAA,WAAA,aAAA,KAAA,CAAA;YAGN,MAAM,CAAA,GAAA,6BAAA,WAAA,iBAAA,KAAA,CAAA;YAEN,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,YAAA,KAAA,CAAA;YASzC,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,6BAAA,WAAA,SAAA,IAAA;YAgBzB,SAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,6BAAA,WAAA,gBAAA,IAAA;YAkBrD,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,6BAAA,WAAA,YAAA,IAAA"}

package/dist/components/combobox-list/combobox-list.d.ts

@@ -9,4 +9,3 @@ declare global {
 export * from './combobox-list-option.element.js';
 export * from './combobox-list.element.js';
 export * from './UUIComboboxListEvent.js';
-export { UUIComboboxListElement as default } from './combobox-list.element.js';