@everymatrix/general-input 1.22.0 → 1.22.2

package/dist/components/vaadin-combo-box.js

@@ -1,11 +1,111 @@
-import { i, r as registerStyles, T as ThemableMixin, A as DirMixin, P as PolymerElement, h as html, n as microTask, O as idlePeriod, Q as animationFrame, R as flush, y as Debouncer, U as enqueueDebouncer, z as timeOut, W as generateUniqueId, C as ControllerMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, b as isElementFocused, e as InputController, f as LabelledInputController, g as TooltipController, E as ElementMixin } from './field-mixin.js';
-import { o as overlay, d as menuOverlayCore, P as PositionMixin, O as Overlay, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
-import { i as inputFieldShared, e as isSafari, f as isTouch, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { P as PatternMixin } from './pattern-mixin.js';
+import { i, r as registerStyles, g as defineCustomElement, h as html, j as ThemableMixin, o as DirMixin, P as PolymerElement, n as microTask, R as idlePeriod, U as animationFrame, W as flush, p as Debouncer, X as enqueueDebouncer, t as timeOut, q as generateUniqueId, J as ControllerMixin, V as ValidateMixin, m as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, b as isElementFocused, e as InputController, f as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
+import { c as overlay, d as menuOverlayCore, P as PositionMixin, O as OverlayMixin, o as overlayStyles, b as OverlayClassMixin, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
+import { i as inputFieldShared, e as isSafari, I as InputConstraintsMixin, f as isTouch, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
+
+const item = i`
+  :host {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-xs);
+    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
+      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+    min-height: var(--lumo-size-m);
+    outline: none;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
+  }
+
+  /* Checkmark */
+  [part='checkmark']::before {
+    display: var(--_lumo-item-selected-icon-display, none);
+    content: var(--lumo-icons-checkmark);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    font-weight: normal;
+    width: 1em;
+    height: 1em;
+    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
+    color: var(--lumo-primary-text-color);
+    flex: none;
+    opacity: 0;
+    transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
+  }
+
+  :host([selected]) [part='checkmark']::before {
+    opacity: 1;
+  }
+
+  :host([active]:not([selected])) [part='checkmark']::before {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-duration: 0s;
+  }
+
+  [part='content'] {
+    flex: auto;
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+  @media (any-hover: hover) {
+    :host(:hover:not([disabled])) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    :host([focus-ring]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) {
+    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+  }
+
+  /* Slotted icons */
+  :host ::slotted(vaadin-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+`;
+
+registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
+
+const comboBoxItem = i`
+  :host {
+    transition: background-color 100ms;
+    overflow: hidden;
+    --_lumo-item-selected-icon-display: block;
+  }
+
+  @media (any-hover: hover) {
+    :host([focused]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+`;
+
+registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
+  moduleId: 'lumo-combo-box-item',
+});
 
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -56,14 +156,6 @@ const comboBoxOverlay = i`
     padding: 0;
   }
 
-  :host {
-    --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
-    --_vaadin-combo-box-items-container-border-style: solid;
-    --_vaadin-combo-box-items-container-border-color: transparent;
-  }
-
-  /* Loading state */
-
   /* When items are empty, the spinner needs some room */
   :host(:not([closing])) [part~='content'] {
     min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
@@ -80,7 +172,9 @@ const comboBoxOverlay = i`
   :host([bottom-aligned]) [part~='overlay'] {
     margin-bottom: var(--lumo-space-xs);
   }
+`;
 
+const comboBoxLoader = i`
   [part~='loader'] {
     position: absolute;
     z-index: 1;
@@ -92,8 +186,6 @@ const comboBoxOverlay = i`
     margin-inline-end: 0;
   }
 
-  /* RTL specific styles */
-
   :host([dir='rtl']) [part~='loader'] {
     left: auto;
     margin-left: 0;
@@ -103,127 +195,182 @@ const comboBoxOverlay = i`
   }
 `;
 
-registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay, loader], {
-  moduleId: 'lumo-combo-box-overlay',
-});
+registerStyles(
+  'vaadin-combo-box-overlay',
+  [
+    overlay,
+    menuOverlayCore,
+    comboBoxOverlay,
+    loader,
+    comboBoxLoader,
+    i`
+      :host {
+        --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
+        --_vaadin-combo-box-items-container-border-style: solid;
+      }
+    `,
+  ],
+  { moduleId: 'lumo-combo-box-overlay' },
+);
 
-const item = i`
+const comboBox = i`
   :host {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    line-height: var(--lumo-line-height-xs);
-    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
-      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
-    min-height: var(--lumo-size-m);
     outline: none;
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
   }
 
-  /* Checkmark */
-  [part='checkmark']::before {
-    display: var(--_lumo-item-selected-icon-display, none);
-    content: var(--lumo-icons-checkmark);
-    font-family: lumo-icons;
-    font-size: var(--lumo-icon-size-m);
-    line-height: 1;
-    font-weight: normal;
-    width: 1em;
-    height: 1em;
-    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
-    color: var(--lumo-primary-text-color);
-    flex: none;
-    opacity: 0;
-    transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
   }
+`;
 
-  :host([selected]) [part='checkmark']::before {
-    opacity: 1;
-  }
+registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
 
-  :host([active]:not([selected])) [part='checkmark']::before {
-    transform: scale(0.8);
-    opacity: 0;
-    transition-duration: 0s;
-  }
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  [part='content'] {
-    flex: auto;
-  }
+/**
+ * @polymerMixin
+ */
+const ComboBoxItemMixin = (superClass) =>
+  class ComboBoxItemMixinClass extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The index of the item.
+         */
+        index: {
+          type: Number,
+        },
 
-  /* Disabled */
-  :host([disabled]) {
-    color: var(--lumo-disabled-text-color);
-    cursor: default;
-    pointer-events: none;
-  }
+        /**
+         * The item to render.
+         */
+        item: {
+          type: Object,
+        },
 
-  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
-  @media (any-hover: hover) {
-    :host(:hover:not([disabled])) {
-      background-color: var(--lumo-primary-color-10pct);
+        /**
+         * The text to render in the item.
+         */
+        label: {
+          type: String,
+        },
+
+        /**
+         * True when item is selected.
+         */
+        selected: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * True when item is focused.
+         */
+        focused: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Custom function for rendering the item content.
+         */
+        renderer: {
+          type: Function,
+        },
+      };
     }
 
-    :host([focus-ring]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    static get observers() {
+      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
     }
-  }
 
-  /* RTL specific styles */
-  :host([dir='rtl']) {
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
-  }
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'hidden'];
+    }
 
-  /* Slotted icons */
-  :host ::slotted(vaadin-icon),
-  :host ::slotted(iron-icon) {
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
-  }
-`;
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === 'hidden' && newValue !== null) {
+        // The element is being hidden (by virtualizer). Mark one of the __rendererOrItemChanged
+        // dependencies as undefined to make sure it's called when the element is shown again
+        // and assigned properties with possibly identical values as before hiding.
+        this.index = undefined;
+      } else {
+        super.attributeChangedCallback(name, oldValue, newValue);
+      }
+    }
 
-registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-const comboBoxItem = i`
-  :host {
-    transition: background-color 100ms;
-    overflow: hidden;
-    --_lumo-item-selected-icon-display: block;
-  }
+      this._owner = this.parentNode.owner;
 
-  @media (any-hover: hover) {
-    :host([focused]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+      const hostDir = this._owner.getAttribute('dir');
+      if (hostDir) {
+        this.setAttribute('dir', hostDir);
+      }
     }
-  }
-`;
 
-registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
-  moduleId: 'lumo-combo-box-item',
-});
+    /**
+     * Requests an update for the content of the item.
+     * While performing the update, it invokes the renderer passed in the `renderer` property.
+     *
+     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     */
+    requestContentUpdate() {
+      if (!this.renderer) {
+        return;
+      }
 
-const comboBox = i`
-  :host {
-    outline: none;
-  }
+      const model = {
+        index: this.index,
+        item: this.item,
+        focused: this.focused,
+        selected: this.selected,
+      };
 
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;
+      this.renderer(this, this._owner, model);
+    }
 
-registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
+    /** @private */
+    __rendererOrItemChanged(renderer, index, item) {
+      if (item === undefined || index === undefined) {
+        return;
+      }
+
+      if (this._oldRenderer !== renderer) {
+        this.innerHTML = '';
+        // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+        // When clearing the rendered content, this part needs to be manually disposed of.
+        // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+        delete this._$litPart$;
+      }
+
+      if (renderer) {
+        this._oldRenderer = renderer;
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    __updateLabel(label, renderer) {
+      if (renderer) {
+        return;
+      }
+
+      this.textContent = label;
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -246,13 +393,15 @@ registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lu
  * `selected`   | Set when the item is selected
  * `focused`    | Set when the item is focused
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @customElement
+ * @mixes ComboBoxItemMixin
  * @mixes ThemableMixin
  * @mixes DirMixin
  * @private
  */
-class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
+class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -274,218 +423,143 @@ class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
   static get is() {
     return 'vaadin-combo-box-item';
   }
+}
 
-  static get properties() {
-    return {
-      /**
-       * The index of the item
-       */
-      index: Number,
-
-      /**
-       * The item to render
-       * @type {(String|Object)}
-       */
-      item: Object,
-
-      /**
-       * The text label corresponding to the item
-       */
-      label: String,
-
-      /**
-       * True when item is selected
-       */
-      selected: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * True when item is focused
-       */
-      focused: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * Custom function for rendering the content of the `<vaadin-combo-box-item>` propagated from the combo box element.
-       */
-      renderer: Function,
-
-      /**
-       * Saved instance of a custom renderer function.
-       */
-      _oldRenderer: Function,
-    };
-  }
-
-  static get observers() {
-    return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
+defineCustomElement(ComboBoxItem);
 
-    this._comboBox = this.parentNode.comboBox;
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-    const hostDir = this._comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
+/**
+ * @polymerMixin
+ * @mixes PositionMixin
+ */
+const ComboBoxOverlayMixin = (superClass) =>
+  class ComboBoxOverlayMixin extends PositionMixin(superClass) {
+    static get observers() {
+      return ['_setOverlayWidth(positionTarget, opened)'];
     }
-  }
 
-  /**
-   * Requests an update for the content of the item.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
-   *
-   * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-   */
-  requestContentUpdate() {
-    if (!this.renderer) {
-      return;
+    constructor() {
+      super();
+
+      this.requiredVerticalSpace = 200;
     }
 
-    const model = {
-      index: this.index,
-      item: this.item,
-      focused: this.focused,
-      selected: this.selected,
-    };
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-    this.renderer(this, this._comboBox, model);
-  }
+      const comboBox = this._comboBox;
 
-  /** @private */
-  __rendererOrItemChanged(renderer, index, item) {
-    if (item === undefined || index === undefined) {
-      return;
+      const hostDir = comboBox && comboBox.getAttribute('dir');
+      if (hostDir) {
+        this.setAttribute('dir', hostDir);
+      }
     }
 
-    if (this._oldRenderer !== renderer) {
-      this.innerHTML = '';
-      // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-      // When clearing the rendered content, this part needs to be manually disposed of.
-      // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-      delete this._$litPart$;
+    /**
+     * Override method inherited from `Overlay`
+     * to not close on position target click.
+     *
+     * @param {Event} event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldCloseOnOutsideClick(event) {
+      const eventPath = event.composedPath();
+      return !eventPath.includes(this.positionTarget) && !eventPath.includes(this);
     }
 
-    if (renderer) {
-      this._oldRenderer = renderer;
-      this.requestContentUpdate();
-    }
-  }
+    /** @private */
+    _setOverlayWidth(positionTarget, opened) {
+      if (positionTarget && opened) {
+        const propPrefix = this.localName;
+        this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
 
-  /** @private */
-  __updateLabel(label, renderer) {
-    if (renderer) {
-      return;
-    }
+        const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
 
-    this.textContent = label;
-  }
-}
+        if (customWidth === '') {
+          this.style.removeProperty(`--${propPrefix}-width`);
+        } else {
+          this.style.setProperty(`--${propPrefix}-width`, customWidth);
+        }
 
-customElements.define(ComboBoxItem.is, ComboBoxItem);
+        this._updatePosition();
+      }
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-registerStyles(
-  'vaadin-combo-box-overlay',
-  i`
-    #overlay {
-      width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-    }
+const comboBoxOverlayStyles = i`
+  #overlay {
+    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
+  }
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-  `,
-  { moduleId: 'vaadin-combo-box-overlay-styles' },
-);
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
 
-let memoizedTemplate;
+registerStyles('vaadin-combo-box-overlay', [overlayStyles, comboBoxOverlayStyles], {
+  moduleId: 'vaadin-combo-box-overlay-styles',
+});
 
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
- * @extends Overlay
- * @private
- */
-class ComboBoxOverlay extends PositionMixin(Overlay) {
-  static get is() {
-    return 'vaadin-combo-box-overlay';
-  }
-
-  static get template() {
-    if (!memoizedTemplate) {
-      memoizedTemplate = super.template.cloneNode(true);
-      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
-    }
-
-    return memoizedTemplate;
-  }
-
-  static get observers() {
-    return ['_setOverlayWidth(positionTarget, opened)'];
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-
-    const comboBox = this._comboBox;
-
-    const hostDir = comboBox && comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
-    }
-  }
-
-  ready() {
-    super.ready();
-    const loader = document.createElement('div');
-    loader.setAttribute('part', 'loader');
-    const content = this.shadowRoot.querySelector('[part~="content"]');
-    content.parentNode.insertBefore(loader, content);
-    this.requiredVerticalSpace = 200;
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @private
+ */
+class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-combo-box-overlay';
   }
 
-  _outsideClickListener(event) {
-    const eventPath = event.composedPath();
-    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
-      this.close();
-    }
+  static get template() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="loader"></div>
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
   }
+}
 
-  _setOverlayWidth(positionTarget, opened) {
-    if (positionTarget && opened) {
-      const propPrefix = this.localName;
-      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
-
-      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+defineCustomElement(ComboBoxOverlay);
 
-      if (customWidth === '') {
-        this.style.removeProperty(`--${propPrefix}-width`);
-      } else {
-        this.style.setProperty(`--${propPrefix}-width`, customWidth);
-      }
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-      this._updatePosition();
-    }
-  }
+/**
+ * Convenience method for reading a value from a path.
+ *
+ * @param {string} path
+ * @param {object} object
+ */
+function get(path, object) {
+  return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
 }
 
-customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);
-
 /**
  * @license
  * Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
@@ -496,7 +570,7 @@ customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);
  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
+const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/u);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
 const DEFAULT_PHYSICAL_COUNT = 3;
 
@@ -986,9 +1060,12 @@ const ironList = {
       this._physicalIndexForKey = {};
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
-      this._physicalCount = this._physicalCount || 0;
-      this._physicalItems = this._physicalItems || [];
-      this._physicalSizes = this._physicalSizes || [];
+      if (!this._physicalItems) {
+        this._physicalItems = [];
+      }
+      if (!this._physicalSizes) {
+        this._physicalSizes = [];
+      }
       this._physicalStart = 0;
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
@@ -1097,16 +1174,21 @@ const ironList = {
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
   _updateScrollerSize(forceUpdate) {
-    this._estScrollHeight =
+    const estScrollHeight =
       this._physicalBottom +
       Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
 
-    forceUpdate = forceUpdate || this._scrollHeight === 0;
-    forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
+    this._estScrollHeight = estScrollHeight;
+
     // Amortize height adjustment, so it won't trigger large repaints too often.
-    if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {
-      this.$.items.style.height = `${this._estScrollHeight}px`;
-      this._scrollHeight = this._estScrollHeight;
+    if (
+      forceUpdate ||
+      this._scrollHeight === 0 ||
+      this._scrollPosition >= estScrollHeight - this._physicalSize ||
+      Math.abs(estScrollHeight - this._scrollHeight) >= this._viewportHeight
+    ) {
+      this.$.items.style.height = `${estScrollHeight}px`;
+      this._scrollHeight = estScrollHeight;
     }
   },
 
@@ -1202,7 +1284,9 @@ const ironList = {
   },
 
   _debounce(name, cb, asyncModule) {
-    this._debouncers = this._debouncers || {};
+    if (!this._debouncers) {
+      this._debouncers = {};
+    }
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
   },
@@ -1210,7 +1294,7 @@ const ironList = {
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1340,11 +1424,15 @@ class IronListAdapter {
   }
 
   update(startIndex = 0, endIndex = this.size - 1) {
+    const updatedElements = [];
     this.__getVisibleElements().forEach((el) => {
       if (el.__virtualIndex >= startIndex && el.__virtualIndex <= endIndex) {
         this.__updateElement(el, el.__virtualIndex, true);
+        updatedElements.push(el);
       }
     });
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /**
@@ -1407,28 +1495,40 @@ class IronListAdapter {
       this.updateElement(el, index);
       el.__lastUpdatedIndex = index;
     }
+  }
 
-    const elementHeight = el.offsetHeight;
-    if (elementHeight === 0) {
-      // If the elements have 0 height after update (for example due to lazy rendering),
-      // it results in iron-list requesting to create an unlimited count of elements.
-      // Assign a temporary placeholder sizing to elements that would otherwise end up having
-      // no height.
-      el.style.paddingTop = `${this.__placeholderHeight}px`;
-
-      // Manually schedule the resize handler to make sure the placeholder padding is
-      // cleared in case the resize observer never triggers.
-      requestAnimationFrame(() => this._resizeHandler());
-    } else {
-      // Add element height to the queue
-      this.__elementHeightQueue.push(elementHeight);
-      this.__elementHeightQueue.shift();
-
-      // Calcualte new placeholder height based on the average of the defined values in the
-      // element height queue
-      const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-      this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-    }
+  /**
+   * Called synchronously right after elements have been updated.
+   * This is a good place to do any post-update work.
+   *
+   * @param {!Array<!HTMLElement>} updatedElements
+   */
+  __afterElementsUpdated(updatedElements) {
+    updatedElements.forEach((el) => {
+      const elementHeight = el.offsetHeight;
+      if (elementHeight === 0) {
+        // If the elements have 0 height after update (for example due to lazy rendering),
+        // it results in iron-list requesting to create an unlimited count of elements.
+        // Assign a temporary placeholder sizing to elements that would otherwise end up having
+        // no height.
+        el.style.paddingTop = `${this.__placeholderHeight}px`;
+
+        // Manually schedule the resize handler to make sure the placeholder padding is
+        // cleared in case the resize observer never triggers.
+        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
+          this._resizeHandler(),
+        );
+      } else {
+        // Add element height to the queue
+        this.__elementHeightQueue.push(elementHeight);
+        this.__elementHeightQueue.shift();
+
+        // Calculate new placeholder height based on the average of the defined values in the
+        // element height queue
+        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
+        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
+      }
+    });
   }
 
   __getIndexScrollOffset(index) {
@@ -1453,42 +1553,35 @@ class IronListAdapter {
       this._debouncers._increasePoolIfNeeded.cancel();
     }
 
-    // Prevent element update while the scroll position is being restored
-    this.__preventElementUpdates = true;
-
-    // Record the scroll position before changing the size
-    let fvi; // First visible index
-    let fviOffsetBefore; // Scroll offset of the first visible index
-    if (size > 0) {
-      fvi = this.adjustedFirstVisibleIndex;
-      fviOffsetBefore = this.__getIndexScrollOffset(fvi);
-    }
-
     // Change the size
     this.__size = size;
 
-    this._itemsChanged({
-      path: 'items',
-    });
-    flush();
-
-    // Try to restore the scroll position if the new size is larger than 0
-    if (size > 0) {
-      fvi = Math.min(fvi, size - 1);
-      this.scrollToIndex(fvi);
+    if (!this._physicalItems) {
+      // Not initialized yet
+      this._itemsChanged({
+        path: 'items',
+      });
+      this.__preventElementUpdates = true;
+      flush();
+      this.__preventElementUpdates = false;
+    } else {
+      // Already initialized, just update _virtualCount
+      this._virtualCount = this.items.length;
+    }
 
-      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
-      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
-        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
-      }
+    // When reducing size while invisible, iron-list does not update items, so
+    // their hidden state is not updated and their __lastUpdatedIndex is not
+    // reset. In that case force an update here.
+    if (!this._isVisible) {
+      this._assignModels();
     }
 
     if (!this.elementsContainer.children.length) {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    this.__preventElementUpdates = false;
-    // Schedule and flush a resize handler
+    // Schedule and flush a resize handler. This will cause a
+    // re-render for the elements.
     this._resizeHandler();
     flush();
   }
@@ -1553,16 +1646,20 @@ class IronListAdapter {
 
   /** @private */
   _assignModels(itemSet) {
+    const updatedElements = [];
     this._iterateItems((pidx, vidx) => {
       const el = this._physicalItems[pidx];
       el.hidden = vidx >= this.size;
       if (!el.hidden) {
         el.__virtualIndex = vidx + (this._vidxOffset || 0);
         this.__updateElement(el, el.__virtualIndex);
+        updatedElements.push(el);
       } else {
         delete el.__lastUpdatedIndex;
       }
     }, itemSet);
+
+    this.__afterElementsUpdated(updatedElements);
   }
 
   /** @private */
@@ -1691,7 +1788,9 @@ class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    this._deltaYAcc = this._deltaYAcc || 0;
+    if (!this._deltaYAcc) {
+      this._deltaYAcc = 0;
+    }
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed
@@ -1764,6 +1863,29 @@ class IronListAdapter {
     );
   }
 
+  /**
+   * Increases the pool size.
+   * @override
+   */
+  _increasePoolIfNeeded(count) {
+    if (this._physicalCount > 2 && count) {
+      // The iron-list logic has already created some physical items and
+      // has decided to create more. Since each item creation round is
+      // expensive, let's try to create the remaining items in one go.
+
+      // Calculate the total item count that would be needed to fill the viewport
+      // plus the buffer assuming rest of the items to be of the average size
+      // of the items already created.
+      const totalItemCount = Math.ceil(this._optPhysicalSize / this._physicalAverage);
+      const missingItemCount = totalItemCount - this._physicalCount;
+      // Create the remaining items in one go. Use a maximum of 100 items
+      // as a safety measure.
+      super._increasePoolIfNeeded(Math.max(count, Math.min(100, missingItemCount)));
+    } else {
+      super._increasePoolIfNeeded(count);
+    }
+  }
+
   /**
    * @returns {Number|undefined} - The browser's default font-size in pixels
    * @private
@@ -1893,6 +2015,24 @@ class Virtualizer {
     this.__adapter = new IronListAdapter(config);
   }
 
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get firstVisibleIndex() {
+    return this.__adapter.adjustedFirstVisibleIndex;
+  }
+
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get lastVisibleIndex() {
+    return this.__adapter.adjustedLastVisibleIndex;
+  }
+
   /**
    * The size of the virtualizer
    * @return {number | undefined} The size of the virtualizer
@@ -1940,29 +2080,11 @@ class Virtualizer {
   flush() {
     this.__adapter.flush();
   }
-
-  /**
-   * Gets the index of the first visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get firstVisibleIndex() {
-    return this.__adapter.adjustedFirstVisibleIndex;
-  }
-
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
-  }
 }
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1979,394 +2101,454 @@ const ComboBoxPlaceholder = class ComboBoxPlaceholder {
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * Element for internal use only.
- *
- * @extends HTMLElement
- * @private
+ * @polymerMixin
  */
-class ComboBoxScroller extends PolymerElement {
-  static get is() {
-    return 'vaadin-combo-box-scroller';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          min-height: 1px;
-          overflow: auto;
-
-          /* Fixes item background from getting on top of scrollbars on Safari */
-          transform: translate3d(0, 0, 0);
-
-          /* Enable momentum scrolling on iOS */
-          -webkit-overflow-scrolling: touch;
-
-          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-          box-shadow: 0 0 0 white;
-        }
-
-        #selector {
-          border-width: var(--_vaadin-combo-box-items-container-border-width);
-          border-style: var(--_vaadin-combo-box-items-container-border-style);
-          border-color: var(--_vaadin-combo-box-items-container-border-color);
-          position: relative;
-        }
-      </style>
-      <div id="selector">
-        <slot></slot>
-      </div>
-    `;
-  }
+const ComboBoxScrollerMixin = (superClass) =>
+  class ComboBoxScrollerMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * A full set of items to filter the visible options from.
+         * Set to an empty array when combo-box is not opened.
+         */
+        items: {
+          type: Array,
+          observer: '__itemsChanged',
+        },
 
-  static get properties() {
-    return {
-      /**
-       * A full set of items to filter the visible options from.
-       * Set to an empty array when combo-box is not opened.
-       */
-      items: {
-        type: Array,
-        observer: '__itemsChanged',
-      },
+        /**
+         * Index of an item that has focus outline and is scrolled into view.
+         * The actual focus still remains in the input field.
+         */
+        focusedIndex: {
+          type: Number,
+          observer: '__focusedIndexChanged',
+        },
 
-      /**
-       * Index of an item that has focus outline and is scrolled into view.
-       * The actual focus still remains in the input field.
-       */
-      focusedIndex: {
-        type: Number,
-        observer: '__focusedIndexChanged',
-      },
+        /**
+         * Set to true while combo-box fetches new page from the data provider.
+         */
+        loading: {
+          type: Boolean,
+          observer: '__loadingChanged',
+        },
 
-      /**
-       * Set to true while combo-box fetches new page from the data provider.
-       */
-      loading: {
-        type: Boolean,
-        observer: '__loadingChanged',
-      },
+        /**
+         * Whether the combo-box is currently opened or not. If set to false,
+         * calling `scrollIntoView` does not have any effect.
+         */
+        opened: {
+          type: Boolean,
+          observer: '__openedChanged',
+        },
 
-      /**
-       * Whether the combo-box is currently opened or not. If set to false,
-       * calling `scrollIntoView` does not have any effect.
-       */
-      opened: {
-        type: Boolean,
-        observer: '__openedChanged',
-      },
+        /**
+         * The selected item from the `items` array.
+         */
+        selectedItem: {
+          type: Object,
+          observer: '__selectedItemChanged',
+        },
 
-      /**
-       * The selected item from the `items` array.
-       */
-      selectedItem: {
-        type: Object,
-        observer: '__selectedItemChanged',
-      },
+        /**
+         * Path for the id of the item, used to detect whether the item is selected.
+         */
+        itemIdPath: {
+          type: String,
+        },
 
-      /**
-       * Path for the id of the item, used to detect whether the item is selected.
-       */
-      itemIdPath: {
-        type: String,
-      },
+        /**
+         * Reference to the owner (combo-box owner), used by the item elements.
+         */
+        owner: {
+          type: Object,
+        },
 
-      /**
-       * Reference to the combo-box, used by the item elements.
-       */
-      comboBox: {
-        type: Object,
-      },
+        /**
+         * Function used to set a label for every combo-box item.
+         */
+        getItemLabel: {
+          type: Object,
+        },
 
-      /**
-       * Function used to set a label for every combo-box item.
-       */
-      getItemLabel: {
-        type: Object,
-      },
+        /**
+         * Function used to render the content of every combo-box item.
+         */
+        renderer: {
+          type: Object,
+          observer: '__rendererChanged',
+        },
 
-      /**
-       * Function used to render the content of every combo-box item.
-       */
-      renderer: {
-        type: Object,
-        observer: '__rendererChanged',
-      },
+        /**
+         * Used to propagate the `theme` attribute from the host element.
+         */
+        theme: {
+          type: String,
+        },
+      };
+    }
 
-      /**
-       * Used to propagate the `theme` attribute from the host element.
-       */
-      theme: {
-        type: String,
-      },
-    };
-  }
+    constructor() {
+      super();
+      this.__boundOnItemClick = this.__onItemClick.bind(this);
+    }
 
-  constructor() {
-    super();
-    this.__boundOnItemClick = this.__onItemClick.bind(this);
-  }
+    /** @private */
+    get _viewportTotalPaddingBottom() {
+      if (this._cachedViewportTotalPaddingBottom === undefined) {
+        const itemsStyle = window.getComputedStyle(this.$.selector);
+        this._cachedViewportTotalPaddingBottom = [itemsStyle.paddingBottom, itemsStyle.borderBottomWidth]
+          .map((v) => {
+            return parseInt(v, 10);
+          })
+          .reduce((sum, v) => {
+            return sum + v;
+          });
+      }
 
-  __openedChanged(opened) {
-    if (opened) {
-      this.requestContentUpdate();
+      return this._cachedViewportTotalPaddingBottom;
     }
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
 
-    // Ensure every instance has unique ID
-    this.id = `${this.localName}-${generateUniqueId()}`;
+    /** @protected */
+    ready() {
+      super.ready();
 
-    // Allow extensions to customize tag name for the items
-    this.__hostTagName = this.constructor.is.replace('-scroller', '');
+      this.setAttribute('role', 'listbox');
 
-    this.setAttribute('role', 'listbox');
+      // Ensure every instance has unique ID
+      this.id = `${this.localName}-${generateUniqueId()}`;
 
-    this.addEventListener('click', (e) => e.stopPropagation());
+      // Allow extensions to customize tag name for the items
+      this.__hostTagName = this.constructor.is.replace('-scroller', '');
 
-    this.__patchWheelOverScrolling();
+      this.addEventListener('click', (e) => e.stopPropagation());
 
-    this.__virtualizer = new Virtualizer({
-      createElements: this.__createElements.bind(this),
-      updateElement: this.__updateElement.bind(this),
-      elementsContainer: this,
-      scrollTarget: this,
-      scrollContainer: this.$.selector,
-    });
-  }
+      this.__patchWheelOverScrolling();
 
-  requestContentUpdate() {
-    if (this.__virtualizer) {
-      this.__virtualizer.update();
+      this.__virtualizer = new Virtualizer({
+        createElements: this.__createElements.bind(this),
+        updateElement: this._updateElement.bind(this),
+        elementsContainer: this,
+        scrollTarget: this,
+        scrollContainer: this.$.selector,
+      });
     }
-  }
 
-  scrollIntoView(index) {
-    if (!(this.opened && index >= 0)) {
-      return;
+    /**
+     * Requests an update for the virtualizer to re-render items.
+     */
+    requestContentUpdate() {
+      if (this.__virtualizer) {
+        this.__virtualizer.update();
+      }
     }
 
-    const visibleItemsCount = this._visibleItemsCount();
+    /**
+     * Scrolls an item at given index into view and adjusts `scrollTop`
+     * so that the element gets fully visible on Arrow Down key press.
+     * @param {number} index
+     */
+    scrollIntoView(index) {
+      if (!(this.opened && index >= 0)) {
+        return;
+      }
+
+      const visibleItemsCount = this._visibleItemsCount();
 
-    let targetIndex = index;
+      let targetIndex = index;
 
-    if (index > this.__virtualizer.lastVisibleIndex - 1) {
-      // Index is below the bottom, scrolling down. Make the item appear at the bottom.
-      // First scroll to target (will be at the top of the scroller) to make sure it's rendered.
-      this.__virtualizer.scrollToIndex(index);
-      // Then calculate the index for the following scroll (to get the target to bottom of the scroller).
-      targetIndex = index - visibleItemsCount + 1;
-    } else if (index > this.__virtualizer.firstVisibleIndex) {
-      // The item is already visible, scrolling is unnecessary per se. But we need to trigger iron-list to set
-      // the correct scrollTop on the scrollTarget. Scrolling to firstVisibleIndex.
-      targetIndex = this.__virtualizer.firstVisibleIndex;
-    }
-    this.__virtualizer.scrollToIndex(Math.max(0, targetIndex));
+      if (index > this.__virtualizer.lastVisibleIndex - 1) {
+        // Index is below the bottom, scrolling down. Make the item appear at the bottom.
+        // First scroll to target (will be at the top of the scroller) to make sure it's rendered.
+        this.__virtualizer.scrollToIndex(index);
+        // Then calculate the index for the following scroll (to get the target to bottom of the scroller).
+        targetIndex = index - visibleItemsCount + 1;
+      } else if (index > this.__virtualizer.firstVisibleIndex) {
+        // The item is already visible, scrolling is unnecessary per se. But we need to trigger iron-list to set
+        // the correct scrollTop on the scrollTarget. Scrolling to firstVisibleIndex.
+        targetIndex = this.__virtualizer.firstVisibleIndex;
+      }
+      this.__virtualizer.scrollToIndex(Math.max(0, targetIndex));
 
-    // Sometimes the item is partly below the bottom edge, detect and adjust.
-    const lastPhysicalItem = [...this.children].find(
-      (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
-    );
-    if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
-      return;
+      // Sometimes the item is partly below the bottom edge, detect and adjust.
+      const lastPhysicalItem = [...this.children].find(
+        (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
+      );
+      if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
+        return;
+      }
+      const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
+      const scrollerRect = this.getBoundingClientRect();
+      const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
+      if (scrollTopAdjust > 0) {
+        this.scrollTop += scrollTopAdjust;
+      }
     }
-    const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
-    const scrollerRect = this.getBoundingClientRect();
-    const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
-    if (scrollTopAdjust > 0) {
-      this.scrollTop += scrollTopAdjust;
+
+    /**
+     * @param {string | object} item
+     * @param {string | object} selectedItem
+     * @param {string} itemIdPath
+     * @protected
+     */
+    _isItemSelected(item, selectedItem, itemIdPath) {
+      if (item instanceof ComboBoxPlaceholder) {
+        return false;
+      } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
+        return get(itemIdPath, item) === get(itemIdPath, selectedItem);
+      }
+      return item === selectedItem;
     }
-  }
 
-  /** @private */
-  __getAriaRole(itemIndex) {
-    return itemIndex !== undefined ? 'option' : false;
-  }
+    /** @private */
+    __itemsChanged(items) {
+      if (this.__virtualizer && items) {
+        this.__virtualizer.size = items.length;
+        this.__virtualizer.flush();
+        this.requestContentUpdate();
+      }
+    }
 
-  /** @private */
-  __isItemFocused(focusedIndex, itemIndex) {
-    return !this.loading && focusedIndex === itemIndex;
-  }
+    /** @private */
+    __loadingChanged() {
+      this.requestContentUpdate();
+    }
 
-  /** @protected */
-  _isItemSelected(item, selectedItem, itemIdPath) {
-    if (item instanceof ComboBoxPlaceholder) {
-      return false;
-    } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
-      return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);
+    /** @private */
+    __openedChanged(opened) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
     }
-    return item === selectedItem;
-  }
 
-  /** @private */
-  __itemsChanged(items) {
-    if (this.__virtualizer && items) {
-      this.__virtualizer.size = items.length;
-      this.__virtualizer.flush();
+    /** @private */
+    __selectedItemChanged() {
       this.requestContentUpdate();
     }
-  }
-
-  /** @private */
-  __loadingChanged() {
-    this.requestContentUpdate();
-  }
 
-  /** @private */
-  __selectedItemChanged() {
-    this.requestContentUpdate();
-  }
+    /** @private */
+    __focusedIndexChanged(index, oldIndex) {
+      if (index !== oldIndex) {
+        this.requestContentUpdate();
+      }
 
-  /** @private */
-  __focusedIndexChanged(index, oldIndex) {
-    if (index !== oldIndex) {
-      this.requestContentUpdate();
+      // Do not jump back to the previously focused item while loading
+      // when requesting next page from the data provider on scroll.
+      if (index >= 0 && !this.loading) {
+        this.scrollIntoView(index);
+      }
     }
 
-    // Do not jump back to the previously focused item while loading
-    // when requesting next page from the data provider on scroll.
-    if (index >= 0 && !this.loading) {
-      this.scrollIntoView(index);
+    /** @private */
+    __rendererChanged(renderer, oldRenderer) {
+      if (renderer || oldRenderer) {
+        this.requestContentUpdate();
+      }
     }
-  }
 
-  /** @private */
-  __rendererChanged(renderer, oldRenderer) {
-    if (renderer || oldRenderer) {
-      this.requestContentUpdate();
+    /** @private */
+    __createElements(count) {
+      return [...Array(count)].map(() => {
+        const item = document.createElement(`${this.__hostTagName}-item`);
+        item.addEventListener('click', this.__boundOnItemClick);
+        // Negative tabindex prevents the item content from being focused.
+        item.tabIndex = '-1';
+        item.style.width = '100%';
+        return item;
+      });
     }
-  }
 
-  /** @private */
-  __createElements(count) {
-    return [...Array(count)].map(() => {
-      const item = document.createElement(`${this.__hostTagName}-item`);
-      item.addEventListener('click', this.__boundOnItemClick);
-      // Negative tabindex prevents the item content from being focused.
-      item.tabIndex = '-1';
-      item.style.width = '100%';
-      return item;
-    });
-  }
+    /**
+     * @param {HTMLElement} el
+     * @param {number} index
+     * @protected
+     */
+    _updateElement(el, index) {
+      const item = this.items[index];
+      const focusedIndex = this.focusedIndex;
+      const selected = this._isItemSelected(item, this.selectedItem, this.itemIdPath);
+
+      el.setProperties({
+        item,
+        index,
+        label: this.getItemLabel(item),
+        selected,
+        renderer: this.renderer,
+        focused: !this.loading && focusedIndex === index,
+      });
 
-  /** @private */
-  __updateElement(el, index) {
-    const item = this.items[index];
-    const focusedIndex = this.focusedIndex;
-    const selected = this._isItemSelected(item, this.selectedItem, this.itemIdPath);
-
-    el.setProperties({
-      item,
-      index,
-      label: this.getItemLabel(item),
-      selected,
-      renderer: this.renderer,
-      focused: this.__isItemFocused(focusedIndex, index),
-    });
+      el.id = `${this.__hostTagName}-item-${index}`;
+      el.setAttribute('role', index !== undefined ? 'option' : false);
+      el.setAttribute('aria-selected', selected.toString());
+      el.setAttribute('aria-posinset', index + 1);
+      el.setAttribute('aria-setsize', this.items.length);
 
-    el.id = `${this.__hostTagName}-item-${index}`;
-    el.setAttribute('role', this.__getAriaRole(index));
-    el.setAttribute('aria-selected', selected.toString());
-    el.setAttribute('aria-posinset', index + 1);
-    el.setAttribute('aria-setsize', this.items.length);
+      if (this.theme) {
+        el.setAttribute('theme', this.theme);
+      } else {
+        el.removeAttribute('theme');
+      }
 
-    if (this.theme) {
-      el.setAttribute('theme', this.theme);
-    } else {
-      el.removeAttribute('theme');
+      if (item instanceof ComboBoxPlaceholder) {
+        this.__requestItemByIndex(index);
+      }
     }
 
-    if (item instanceof ComboBoxPlaceholder) {
-      this.__requestItemByIndex(index);
+    /** @private */
+    __onItemClick(e) {
+      this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
     }
-  }
 
-  /** @private */
-  __onItemClick(e) {
-    this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
-  }
+    /**
+     * We want to prevent the kinetic scrolling energy from being transferred from the overlay contents over to the parent.
+     * Further improvement ideas: after the contents have been scrolled to the top or bottom and scrolling has stopped, it could allow
+     * scrolling the parent similarly to touch scrolling.
+     * @private
+     */
+    __patchWheelOverScrolling() {
+      this.$.selector.addEventListener('wheel', (e) => {
+        const scrolledToTop = this.scrollTop === 0;
+        const scrolledToBottom = this.scrollHeight - this.scrollTop - this.clientHeight <= 1;
+        if (scrolledToTop && e.deltaY < 0) {
+          e.preventDefault();
+        } else if (scrolledToBottom && e.deltaY > 0) {
+          e.preventDefault();
+        }
+      });
+    }
 
-  /**
-   * We want to prevent the kinetic scrolling energy from being transferred from the overlay contents over to the parent.
-   * Further improvement ideas: after the contents have been scrolled to the top or bottom and scrolling has stopped, it could allow
-   * scrolling the parent similarly to touch scrolling.
-   */
-  __patchWheelOverScrolling() {
-    this.$.selector.addEventListener('wheel', (e) => {
-      const scrolledToTop = this.scrollTop === 0;
-      const scrolledToBottom = this.scrollHeight - this.scrollTop - this.clientHeight <= 1;
-      if (scrolledToTop && e.deltaY < 0) {
-        e.preventDefault();
-      } else if (scrolledToBottom && e.deltaY > 0) {
-        e.preventDefault();
-      }
-    });
-  }
+    /**
+     * Dispatches an `index-requested` event for the given index to notify
+     * the data provider that it should start loading the page containing the requested index.
+     *
+     * The event is dispatched asynchronously to prevent an immediate page request and therefore
+     * a possible infinite recursion in case the data provider implements page request cancelation logic
+     * by invoking data provider page callbacks with an empty array.
+     * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
+     * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
+     * the scroller will synchronously request the page again which may lead to looping in the end.
+     * That was the case for the Flow counterpart:
+     * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
+     * @private
+     */
+    __requestItemByIndex(index) {
+      requestAnimationFrame(() => {
+        this.dispatchEvent(
+          new CustomEvent('index-requested', {
+            detail: {
+              index,
+              currentScrollerPos: this._oldScrollerPosition,
+            },
+          }),
+        );
+      });
+    }
 
-  get _viewportTotalPaddingBottom() {
-    if (this._cachedViewportTotalPaddingBottom === undefined) {
-      const itemsStyle = window.getComputedStyle(this.$.selector);
-      this._cachedViewportTotalPaddingBottom = [itemsStyle.paddingBottom, itemsStyle.borderBottomWidth]
-        .map((v) => {
-          return parseInt(v, 10);
-        })
-        .reduce((sum, v) => {
-          return sum + v;
-        });
+    /** @private */
+    _visibleItemsCount() {
+      // Ensure items are positioned
+      this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);
+      const hasItems = this.__virtualizer.size > 0;
+      return hasItems ? this.__virtualizer.lastVisibleIndex - this.__virtualizer.firstVisibleIndex + 1 : 0;
     }
+  };
 
-    return this._cachedViewportTotalPaddingBottom;
-  }
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  /**
-   * Dispatches an `index-requested` event for the given index to notify
-   * the data provider that it should start loading the page containing the requested index.
-   *
-   * The event is dispatched asynchronously to prevent an immediate page request and therefore
-   * a possible infinite recursion in case the data provider implements page request cancelation logic
-   * by invoking data provider page callbacks with an empty array.
-   * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
-   * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
-   * the scroller will synchronously request the page again which may lead to looping in the end.
-   * That was the case for the Flow counterpart:
-   * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
-   */
-  __requestItemByIndex(index) {
-    requestAnimationFrame(() => {
-      this.dispatchEvent(
-        new CustomEvent('index-requested', {
-          detail: {
-            index,
-            currentScrollerPos: this._oldScrollerPosition,
-          },
-        }),
-      );
-    });
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
+ * @private
+ */
+class ComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
+  static get is() {
+    return 'vaadin-combo-box-scroller';
   }
 
-  /** @private */
-  _visibleItemsCount() {
-    // Ensure items are positioned
-    this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);
-    const hasItems = this.__virtualizer.size > 0;
-    return hasItems ? this.__virtualizer.lastVisibleIndex - this.__virtualizer.firstVisibleIndex + 1 : 0;
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          min-height: 1px;
+          overflow: auto;
+
+          /* Fixes item background from getting on top of scrollbars on Safari */
+          transform: translate3d(0, 0, 0);
+
+          /* Enable momentum scrolling on iOS */
+          -webkit-overflow-scrolling: touch;
+
+          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+          box-shadow: 0 0 0 white;
+        }
+
+        #selector {
+          border-width: var(--_vaadin-combo-box-items-container-border-width);
+          border-style: var(--_vaadin-combo-box-items-container-border-style);
+          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
+          position: relative;
+        }
+      </style>
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
   }
 }
 
-customElements.define(ComboBoxScroller.is, ComboBoxScroller);
+defineCustomElement(ComboBoxScroller);
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin to provide `pattern` property.
+ *
+ * @polymerMixin
+ * @mixes InputConstraintsMixin
+ */
+const PatternMixin = (superclass) =>
+  class PatternMixinClass extends InputConstraintsMixin(superclass) {
+    static get properties() {
+      return {
+        /**
+         * A regular expression that the value is checked against.
+         * The pattern must match the entire value, not just some subset.
+         */
+        pattern: {
+          type: String,
+        },
+      };
+    }
+
+    static get delegateAttrs() {
+      return [...super.delegateAttrs, 'pattern'];
+    }
+
+    static get constraints() {
+      return [...super.constraints, 'pattern'];
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2676,20 +2858,18 @@ const ComboBoxDataProviderMixin = (superClass) =>
     _flushPendingRequests(size) {
       if (this._pendingRequests) {
         const lastPage = Math.ceil(size / this.pageSize);
-        const pendingRequestsKeys = Object.keys(this._pendingRequests);
-        for (let reqIdx = 0; reqIdx < pendingRequestsKeys.length; reqIdx++) {
-          const page = parseInt(pendingRequestsKeys[reqIdx]);
-          if (page >= lastPage) {
-            this._pendingRequests[page]([], size);
+        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
+          if (parseInt(page) >= lastPage) {
+            callback([], size);
           }
-        }
+        });
       }
     }
   };
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2714,7 +2894,7 @@ function processTemplates(component) {
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2748,10 +2928,19 @@ function findItemIndex(items, callback) {
 
 /**
  * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes ValidateMixin
+ * @mixes DisabledMixin
+ * @mixes InputMixin
+ * @mixes KeyboardMixin
+ * @mixes FocusMixin
+ * @mixes OverlayClassMixin
  * @param {function(new:HTMLElement)} subclass
  */
 const ComboBoxMixin = (subclass) =>
-  class VaadinComboBoxMixinElement extends ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))) {
+  class ComboBoxMixinClass extends OverlayClassMixin(
+    ControllerMixin(ValidateMixin(FocusMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))))),
+  ) {
     static get properties() {
       return {
         /**
@@ -2950,7 +3139,6 @@ const ComboBoxMixin = (subclass) =>
 
     constructor() {
       super();
-      this._boundOnFocusout = this._onFocusout.bind(this);
       this._boundOverlaySelectedItemChanged = this._overlaySelectedItemChanged.bind(this);
       this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
       this._boundOnClick = this._onClick.bind(this);
@@ -2967,24 +3155,6 @@ const ComboBoxMixin = (subclass) =>
       return 'vaadin-combo-box';
     }
 
-    /**
-     * @return {string | undefined}
-     * @protected
-     */
-    get _inputElementValue() {
-      return this.inputElement ? this.inputElement[this._propertyForValue] : undefined;
-    }
-
-    /**
-     * @param {string} value
-     * @protected
-     */
-    set _inputElementValue(value) {
-      if (this.inputElement) {
-        this.inputElement[this._propertyForValue] = value;
-      }
-    }
-
     /**
      * Get a reference to the native `<input>` element.
      * Override to provide a custom input.
@@ -3035,8 +3205,6 @@ const ComboBoxMixin = (subclass) =>
       this._initOverlay();
       this._initScroller();
 
-      this.addEventListener('focusout', this._boundOnFocusout);
-
       this._lastCommittedValue = this.value;
 
       this.addEventListener('click', this._boundOnClick);
@@ -3044,7 +3212,7 @@ const ComboBoxMixin = (subclass) =>
 
       const bringToFrontListener = () => {
         requestAnimationFrame(() => {
-          this.$.overlay.bringToFront();
+          this._overlayElement.bringToFront();
         });
       };
 
@@ -3135,6 +3303,8 @@ const ComboBoxMixin = (subclass) =>
       overlay.addEventListener('opened-changed', (e) => {
         this._overlayOpened = e.detail.value;
       });
+
+      this._overlayElement = overlay;
     }
 
     /**
@@ -3146,7 +3316,7 @@ const ComboBoxMixin = (subclass) =>
     _initScroller(host) {
       const scrollerTag = `${this._tagNamePrefix}-scroller`;
 
-      const overlay = this.$.overlay;
+      const overlay = this._overlayElement;
 
       overlay.renderer = (root) => {
         if (!root.firstChild) {
@@ -3159,7 +3329,7 @@ const ComboBoxMixin = (subclass) =>
 
       const scroller = overlay.querySelector(scrollerTag);
 
-      scroller.comboBox = host || this;
+      scroller.owner = host || this;
       scroller.getItemLabel = this._getItemLabel.bind(this);
       scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
@@ -3254,7 +3424,7 @@ const ComboBoxMixin = (subclass) =>
           }
         }
 
-        this.$.overlay.restoreFocusOnClose = true;
+        this._overlayElement.restoreFocusOnClose = true;
       } else {
         this._onClosed();
         if (this._openedWithFocusRing && this._isInputFocused()) {
@@ -3288,13 +3458,19 @@ const ComboBoxMixin = (subclass) =>
       return event.composedPath()[0] === this.clearElement;
     }
 
+    /** @private */
+    __onClearButtonMouseDown(event) {
+      event.preventDefault(); // Prevent native focusout event
+      this.inputElement.focus();
+    }
+
     /**
      * @param {Event} event
      * @protected
      */
-    _handleClearButtonClick(event) {
+    _onClearButtonClick(event) {
       event.preventDefault();
-      this._clear();
+      this._onClearAction();
 
       // De-select dropdown item
       if (this.opened) {
@@ -3330,15 +3506,13 @@ const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _onClick(e) {
-      const path = e.composedPath();
-
-      if (this._isClearButton(e)) {
-        this._handleClearButtonClick(e);
-      } else if (path.indexOf(this._toggleElement) > -1) {
-        this._onToggleButtonClick(e);
+    _onClick(event) {
+      if (this._isClearButton(event)) {
+        this._onClearButtonClick(event);
+      } else if (event.composedPath().includes(this._toggleElement)) {
+        this._onToggleButtonClick(event);
       } else {
-        this._onHostClick(e);
+        this._onHostClick(event);
       }
     }
 
@@ -3353,7 +3527,7 @@ const ComboBoxMixin = (subclass) =>
       super._onKeyDown(e);
 
       if (e.key === 'Tab') {
-        this.$.overlay.restoreFocusOnClose = false;
+        this._overlayElement.restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
         this._onArrowDown();
 
@@ -3369,7 +3543,7 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemLabel(item) {
-      let label = item && this.itemLabelPath ? this.get(this.itemLabelPath, item) : undefined;
+      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
       if (label === undefined || label === null) {
         label = item ? item.toString() : '';
       }
@@ -3378,7 +3552,7 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemValue(item) {
-      let value = item && this.itemValuePath ? this.get(this.itemValuePath, item) : undefined;
+      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
       if (value === undefined) {
         value = item ? item.toString() : '';
       }
@@ -3516,7 +3690,7 @@ const ComboBoxMixin = (subclass) =>
         } else if (this.clearButtonVisible && !this.opened && !!this.value) {
           e.stopPropagation();
           // The clear button is visible and the overlay is closed, so clear the value.
-          this._clear();
+          this._onClearAction();
         }
       } else if (this.opened) {
         // Auto-open is enabled
@@ -3534,7 +3708,7 @@ const ComboBoxMixin = (subclass) =>
       } else if (this.clearButtonVisible && !!this.value) {
         e.stopPropagation();
         // The clear button is visible and the overlay is closed, so clear the value.
-        this._clear();
+        this._onClearAction();
       }
     }
 
@@ -3556,7 +3730,7 @@ const ComboBoxMixin = (subclass) =>
      * Clears the current value.
      * @protected
      */
-    _clear() {
+    _onClearAction() {
       this.selectedItem = null;
 
       if (this.allowCustomValue) {
@@ -3607,7 +3781,7 @@ const ComboBoxMixin = (subclass) =>
         }
       } else {
         // Try to find an item which label matches the input value.
-        const items = [...(this.filteredItems || []), this.selectedItem];
+        const items = [this.selectedItem, ...(this.filteredItems || [])];
         const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
 
         if (
@@ -3648,14 +3822,6 @@ const ComboBoxMixin = (subclass) =>
       this.filter = '';
     }
 
-    /**
-     * @return {string}
-     * @protected
-     */
-    get _propertyForValue() {
-      return 'value';
-    }
-
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event
@@ -3802,6 +3968,12 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _detectAndDispatchChange() {
+      // Do not validate when focusout is caused by document
+      // losing focus, which happens on browser tab switch.
+      if (document.hasFocus()) {
+        this.validate();
+      }
+
       if (this.value !== this._lastCommittedValue) {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
         this._lastCommittedValue = this.value;
@@ -3944,26 +4116,18 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /** @private */
-    __onClearButtonMouseDown(event) {
-      event.preventDefault(); // Prevent native focusout event
-      this.inputElement.focus();
-    }
-
-    /** @private */
-    _onFocusout(event) {
-      // VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
-      // Do not focus the input in this case, because it would break announcement for the item.
-      if (event.relatedTarget && event.relatedTarget.localName === `${this._tagNamePrefix}-item`) {
-        return;
-      }
+    /**
+     * Override method inherited from `FocusMixin`
+     * to close the overlay on blur and commit the value.
+     *
+     * @param {boolean} focused
+     * @protected
+     * @override
+     */
+    _setFocused(focused) {
+      super._setFocused(focused);
 
-      // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (event.relatedTarget === this.$.overlay) {
-        event.composedPath()[0].focus();
-        return;
-      }
-      if (!this.readonly && !this._closeOnBlurIsPrevented) {
+      if (!focused && !this.readonly && !this._closeOnBlurIsPrevented) {
         // User's logic in `custom-value-set` event listener might cause input to blur,
         // which will result in attempting to commit the same custom value once again.
         if (!this.opened && this.allowCustomValue && this._inputElementValue === this._lastCustomValue) {
@@ -3975,6 +4139,32 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
+    /**
+     * Override method inherited from `FocusMixin` to not remove focused
+     * state when focus moves to the overlay.
+     *
+     * @param {FocusEvent} event
+     * @return {boolean}
+     * @protected
+     * @override
+     */
+    _shouldRemoveFocus(event) {
+      // VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
+      // Do not focus the input in this case, because it would break announcement for the item.
+      if (event.relatedTarget && event.relatedTarget.localName === `${this._tagNamePrefix}-item`) {
+        return false;
+      }
+
+      // Do not blur when focus moves to the overlay
+      // Also, fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
+      if (event.relatedTarget === this._overlayElement) {
+        event.composedPath()[0].focus();
+        return false;
+      }
+
+      return true;
+    }
+
     /** @private */
     _onTouchend(event) {
       if (!this.clearElement || event.composedPath()[0] !== this.clearElement) {
@@ -3982,7 +4172,7 @@ const ComboBoxMixin = (subclass) =>
       }
 
       event.preventDefault();
-      this._clear();
+      this._onClearAction();
     }
 
     /**
@@ -4028,7 +4218,7 @@ const ComboBoxMixin = (subclass) =>
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -4148,7 +4338,7 @@ registerStyles('vaadin-combo-box', inputFieldShared$1, { moduleId: 'vaadin-combo
  * Note: the `theme` attribute value set on `<vaadin-combo-box>` is
  * propagated to the internal components listed above.
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {Event} change - Fired when the user commits a value change.
  * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
@@ -4159,6 +4349,7 @@ registerStyles('vaadin-combo-box', inputFieldShared$1, { moduleId: 'vaadin-combo
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
  *
+ * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
@@ -4261,6 +4452,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
     this._tooltipController = new TooltipController(this);
     this.addController(this._tooltipController);
     this._tooltipController.setPosition('top');
+    this._tooltipController.setAriaTarget(this.inputElement);
     this._tooltipController.setShouldShow((target) => !target.opened);
 
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
@@ -4268,48 +4460,17 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 
   /**
-   * Override method inherited from `FocusMixin` to validate on blur.
-   * @param {boolean} focused
-   * @protected
-   * @override
-   */
-  _setFocused(focused) {
-    super._setFocused(focused);
-
-    if (!focused) {
-      this.validate();
-    }
-  }
-
-  /**
-   * Override method inherited from `FocusMixin` to not remove focused
-   * state when focus moves to the overlay.
-   * @param {FocusEvent} event
-   * @return {boolean}
-   * @protected
-   * @override
-   */
-  _shouldRemoveFocus(event) {
-    // Do not blur when focus moves to the overlay
-    if (event.relatedTarget === this.$.overlay) {
-      event.composedPath()[0].focus();
-      return false;
-    }
-
-    return true;
-  }
-
-  /**
-   * Override method inherited from `InputControlMixin` to handle clear
-   * button click and stop event from propagating to the host element.
+   * Override the method from `InputControlMixin`
+   * to stop event propagation to prevent `ComboBoxMixin`
+   * from handling this click event also on its own.
+   *
    * @param {Event} event
    * @protected
    * @override
    */
   _onClearButtonClick(event) {
     event.stopPropagation();
-
-    this._handleClearButtonClick(event);
+    super._onClearButtonClick(event);
   }
 
   /**
@@ -4326,4 +4487,4 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 }
 
-customElements.define(ComboBox.is, ComboBox);
+defineCustomElement(ComboBox);