@everymatrix/general-input 1.28.7 → 1.28.8

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

@@ -1,111 +1,11 @@
-import { i, r as registerStyles, f as defineCustomElement, h as html, g as ThemableMixin, n as DirMixin, P as PolymerElement, m as microTask, R as idlePeriod, U as animationFrame, W as flush, o as Debouncer, X as enqueueDebouncer, t as timeOut, p as generateUniqueId, H as ControllerMixin, V as ValidateMixin, l as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, N as isElementFocused, c as InputController, e 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',
-});
+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';
 
 /**
  * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * Copyright (c) 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -156,6 +56,14 @@ 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));
@@ -172,9 +80,7 @@ const comboBoxOverlay = i`
   :host([bottom-aligned]) [part~='overlay'] {
     margin-bottom: var(--lumo-space-xs);
   }
-`;
 
-const comboBoxLoader = i`
   [part~='loader'] {
     position: absolute;
     z-index: 1;
@@ -186,6 +92,8 @@ const comboBoxLoader = i`
     margin-inline-end: 0;
   }
 
+  /* RTL specific styles */
+
   :host([dir='rtl']) [part~='loader'] {
     left: auto;
     margin-left: 0;
@@ -195,182 +103,127 @@ const comboBoxLoader = i`
   }
 `;
 
-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' },
-);
+registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay, loader], {
+  moduleId: 'lumo-combo-box-overlay',
+});
 
-const comboBox = i`
+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);
   }
 
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
+  /* 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;
   }
-`;
 
-registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-const ComboBoxItemMixin = (superClass) =>
-  class ComboBoxItemMixinClass extends superClass {
-    static get properties() {
-      return {
-        /**
-         * The index of the item.
-         */
-        index: {
-          type: Number,
-        },
-
-        /**
-         * The item to render.
-         */
-        item: {
-          type: Object,
-        },
-
-        /**
-         * The text to render in the item.
-         */
-        label: {
-          type: String,
-        },
-
-        /**
-         * True when item is selected.
-         */
-        selected: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
+  :host([selected]) [part='checkmark']::before {
+    opacity: 1;
+  }
 
-        /**
-         * True when item is focused.
-         */
-        focused: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
+  :host([active]:not([selected])) [part='checkmark']::before {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-duration: 0s;
+  }
 
-        /**
-         * Custom function for rendering the item content.
-         */
-        renderer: {
-          type: Function,
-        },
-      };
-    }
+  [part='content'] {
+    flex: auto;
+  }
 
-    static get observers() {
-      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
-    }
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
 
-    static get observedAttributes() {
-      return [...super.observedAttributes, 'hidden'];
+  /* 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);
     }
 
-    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);
-      }
+    :host([focus-ring]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
+  }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this._owner = this.parentNode.owner;
+  /* 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));
+  }
 
-      const hostDir = this._owner.getAttribute('dir');
-      if (hostDir) {
-        this.setAttribute('dir', hostDir);
-      }
-    }
+  /* Slotted icons */
+  :host ::slotted(vaadin-icon),
+  :host ::slotted(iron-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+`;
 
-    /**
-     * 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;
-      }
+registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
 
-      const model = {
-        index: this.index,
-        item: this.item,
-        focused: this.focused,
-        selected: this.selected,
-      };
+const comboBoxItem = i`
+  :host {
+    transition: background-color 100ms;
+    overflow: hidden;
+    --_lumo-item-selected-icon-display: block;
+  }
 
-      this.renderer(this, this._owner, model);
+  @media (any-hover: hover) {
+    :host([focused]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
     }
+  }
+`;
 
-    /** @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$;
-      }
+registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
+  moduleId: 'lumo-combo-box-item',
+});
 
-      if (renderer) {
-        this._oldRenderer = renderer;
-        this.requestContentUpdate();
-      }
-    }
+const comboBox = i`
+  :host {
+    outline: none;
+  }
 
-    /** @private */
-    __updateLabel(label, renderer) {
-      if (renderer) {
-        return;
-      }
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+`;
 
-      this.textContent = label;
-    }
-  };
+registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -393,15 +246,13 @@ const ComboBoxItemMixin = (superClass) =>
  * `selected`   | Set when the item is selected
  * `focused`    | Set when the item is focused
  *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * @customElement
- * @mixes ComboBoxItemMixin
  * @mixes ThemableMixin
  * @mixes DirMixin
  * @private
  */
-class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
   static get template() {
     return html`
       <style>
@@ -423,142 +274,217 @@ class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerEleme
   static get is() {
     return 'vaadin-combo-box-item';
   }
-}
 
-defineCustomElement(ComboBoxItem);
+  static get properties() {
+    return {
+      /**
+       * The index of the item
+       */
+      index: Number,
 
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+      /**
+       * The item to render
+       * @type {(String|Object)}
+       */
+      item: Object,
 
-/**
- * @polymerMixin
- * @mixes PositionMixin
- */
-const ComboBoxOverlayMixin = (superClass) =>
-  class ComboBoxOverlayMixin extends PositionMixin(superClass) {
-    static get observers() {
-      return ['_setOverlayWidth(positionTarget, opened)'];
-    }
+      /**
+       * The text label corresponding to the item
+       */
+      label: String,
 
-    constructor() {
-      super();
+      /**
+       * True when item is selected
+       */
+      selected: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
 
-      this.requiredVerticalSpace = 200;
-    }
+      /**
+       * True when item is focused
+       */
+      focused: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+      /**
+       * 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,
+    };
+  }
 
-      const comboBox = this._comboBox;
+  static get observers() {
+    return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
+  }
 
-      const hostDir = comboBox && comboBox.getAttribute('dir');
-      if (hostDir) {
-        this.setAttribute('dir', hostDir);
-      }
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._comboBox = this.parentNode.comboBox;
+
+    const hostDir = this._comboBox.getAttribute('dir');
+    if (hostDir) {
+      this.setAttribute('dir', hostDir);
     }
+  }
 
-    /**
-     * 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);
+  /**
+   * 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;
     }
 
-    /** @private */
-    _setOverlayWidth(positionTarget, opened) {
-      if (positionTarget && opened) {
-        const propPrefix = this.localName;
-        this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+    const model = {
+      index: this.index,
+      item: this.item,
+      focused: this.focused,
+      selected: this.selected,
+    };
+
+    this.renderer(this, this._comboBox, model);
+  }
 
-        const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+  /** @private */
+  __rendererOrItemChanged(renderer, index, item) {
+    if (item === undefined || index === undefined) {
+      return;
+    }
 
-        if (customWidth === '') {
-          this.style.removeProperty(`--${propPrefix}-width`);
-        } else {
-          this.style.setProperty(`--${propPrefix}-width`, customWidth);
-        }
+    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$;
+    }
 
-        this._updatePosition();
-      }
+    if (renderer) {
+      this._oldRenderer = renderer;
+      this.requestContentUpdate();
     }
-  };
+  }
+
+  /** @private */
+  __updateLabel(label, renderer) {
+    if (renderer) {
+      return;
+    }
+
+    this.textContent = label;
+  }
+}
+
+customElements.define(ComboBoxItem.is, ComboBoxItem);
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const comboBoxOverlayStyles = i`
-  #overlay {
-    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-  }
+registerStyles(
+  'vaadin-combo-box-overlay',
+  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%;
-  }
-`;
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  `,
+  { moduleId: 'vaadin-combo-box-overlay-styles' },
+);
 
-registerStyles('vaadin-combo-box-overlay', [overlayStyles, comboBoxOverlayStyles], {
-  moduleId: 'vaadin-combo-box-overlay-styles',
-});
+let memoizedTemplate;
 
 /**
  * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
- * @customElement
- * @extends HTMLElement
- * @mixes ComboBoxOverlayMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
+ * @extends Overlay
  * @private
  */
-class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
+class ComboBoxOverlay extends PositionMixin(Overlay) {
   static get is() {
     return 'vaadin-combo-box-overlay';
   }
 
   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>
-    `;
+    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;
+  }
+
+  _outsideClickListener(event) {
+    const eventPath = event.composedPath();
+    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
+      this.close();
+    }
+  }
+
+  _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`);
+
+      if (customWidth === '') {
+        this.style.removeProperty(`--${propPrefix}-width`);
+      } else {
+        this.style.setProperty(`--${propPrefix}-width`, customWidth);
+      }
+
+      this._updatePosition();
+    }
   }
 }
 
-defineCustomElement(ComboBoxOverlay);
-
-/**
- * @license
- * Copyright (c) 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * 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
@@ -570,7 +496,7 @@ function get(path, object) {
  * 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+)/u);
+const IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
 const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
 const DEFAULT_PHYSICAL_COUNT = 3;
 
@@ -1060,12 +986,9 @@ const ironList = {
       this._physicalIndexForKey = {};
       this._firstVisibleIndexVal = null;
       this._lastVisibleIndexVal = null;
-      if (!this._physicalItems) {
-        this._physicalItems = [];
-      }
-      if (!this._physicalSizes) {
-        this._physicalSizes = [];
-      }
+      this._physicalCount = this._physicalCount || 0;
+      this._physicalItems = this._physicalItems || [];
+      this._physicalSizes = this._physicalSizes || [];
       this._physicalStart = 0;
       if (this._scrollTop > this._scrollOffset) {
         this._resetScrollPosition(0);
@@ -1174,21 +1097,16 @@ const ironList = {
    * @param {boolean=} forceUpdate If true, updates the height no matter what.
    */
   _updateScrollerSize(forceUpdate) {
-    const estScrollHeight =
+    this._estScrollHeight =
       this._physicalBottom +
       Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
 
-    this._estScrollHeight = estScrollHeight;
-
+    forceUpdate = forceUpdate || this._scrollHeight === 0;
+    forceUpdate = forceUpdate || this._scrollPosition >= this._estScrollHeight - this._physicalSize;
     // Amortize height adjustment, so it won't trigger large repaints too often.
-    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;
+    if (forceUpdate || Math.abs(this._estScrollHeight - this._scrollHeight) >= this._viewportHeight) {
+      this.$.items.style.height = `${this._estScrollHeight}px`;
+      this._scrollHeight = this._estScrollHeight;
     }
   },
 
@@ -1284,9 +1202,7 @@ const ironList = {
   },
 
   _debounce(name, cb, asyncModule) {
-    if (!this._debouncers) {
-      this._debouncers = {};
-    }
+    this._debouncers = this._debouncers || {};
     this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
     enqueueDebouncer(this._debouncers[name]);
   },
@@ -1294,7 +1210,7 @@ const ironList = {
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1424,15 +1340,11 @@ 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);
   }
 
   /**
@@ -1495,40 +1407,28 @@ class IronListAdapter {
       this.updateElement(el, index);
       el.__lastUpdatedIndex = index;
     }
-  }
 
-  /**
-   * 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);
-      }
-    });
+    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);
+    }
   }
 
   __getIndexScrollOffset(index) {
@@ -1553,37 +1453,42 @@ 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;
 
-    if (!this._physicalItems) {
-      // Not initialized yet
-      this._itemsChanged({
-        path: 'items',
-      });
-      this.__preventElementUpdates = true;
-      flush();
-      this.__preventElementUpdates = false;
-    } else {
-      // Already initialized, just update _virtualCount
-      this._updateScrollerSize();
-      this._virtualCount = this.items.length;
-      this._render();
-    }
+    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);
 
-    // 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();
+      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
+      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
+        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
+      }
     }
 
     if (!this.elementsContainer.children.length) {
       requestAnimationFrame(() => this._resizeHandler());
     }
 
-    // Schedule and flush a resize handler. This will cause a
-    // re-render for the elements.
+    this.__preventElementUpdates = false;
+    // Schedule and flush a resize handler
     this._resizeHandler();
     flush();
   }
@@ -1648,20 +1553,16 @@ 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 */
@@ -1790,9 +1691,7 @@ class IronListAdapter {
       deltaY *= this._scrollPageHeight;
     }
 
-    if (!this._deltaYAcc) {
-      this._deltaYAcc = 0;
-    }
+    this._deltaYAcc = this._deltaYAcc || 0;
 
     if (this._wheelAnimationFrame) {
       // Accumulate wheel delta while a frame is being processed
@@ -1865,29 +1764,6 @@ 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
@@ -2017,24 +1893,6 @@ 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
@@ -2082,11 +1940,29 @@ 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 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2103,454 +1979,394 @@ const ComboBoxPlaceholder = class ComboBoxPlaceholder {
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * @polymerMixin
+ * Element for internal use only.
+ *
+ * @extends HTMLElement
+ * @private
  */
-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',
-        },
-
-        /**
-         * 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',
-        },
-
-        /**
-         * 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',
-        },
+class ComboBoxScroller extends PolymerElement {
+  static get is() {
+    return 'vaadin-combo-box-scroller';
+  }
 
-        /**
-         * The selected item from the `items` array.
-         */
-        selectedItem: {
-          type: Object,
-          observer: '__selectedItemChanged',
-        },
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          min-height: 1px;
+          overflow: auto;
 
-        /**
-         * Path for the id of the item, used to detect whether the item is selected.
-         */
-        itemIdPath: {
-          type: String,
-        },
+          /* Fixes item background from getting on top of scrollbars on Safari */
+          transform: translate3d(0, 0, 0);
 
-        /**
-         * Reference to the owner (combo-box owner), used by the item elements.
-         */
-        owner: {
-          type: Object,
-        },
+          /* Enable momentum scrolling on iOS */
+          -webkit-overflow-scrolling: touch;
 
-        /**
-         * Function used to set a label for every combo-box item.
-         */
-        getItemLabel: {
-          type: Object,
-        },
+          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+          box-shadow: 0 0 0 white;
+        }
 
-        /**
-         * Function used to render the content of every combo-box item.
-         */
-        renderer: {
-          type: Object,
-          observer: '__rendererChanged',
-        },
+        #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>
+    `;
+  }
 
-        /**
-         * Used to propagate the `theme` attribute from the host element.
-         */
-        theme: {
-          type: String,
-        },
-      };
-    }
+  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',
+      },
 
-    constructor() {
-      super();
-      this.__boundOnItemClick = this.__onItemClick.bind(this);
-    }
+      /**
+       * 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',
+      },
 
-    /** @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;
-          });
-      }
+      /**
+       * Set to true while combo-box fetches new page from the data provider.
+       */
+      loading: {
+        type: Boolean,
+        observer: '__loadingChanged',
+      },
 
-      return this._cachedViewportTotalPaddingBottom;
-    }
+      /**
+       * 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',
+      },
 
-    /** @protected */
-    ready() {
-      super.ready();
+      /**
+       * The selected item from the `items` array.
+       */
+      selectedItem: {
+        type: Object,
+        observer: '__selectedItemChanged',
+      },
 
-      this.setAttribute('role', 'listbox');
+      /**
+       * Path for the id of the item, used to detect whether the item is selected.
+       */
+      itemIdPath: {
+        type: String,
+      },
 
-      // Ensure every instance has unique ID
-      this.id = `${this.localName}-${generateUniqueId()}`;
+      /**
+       * Reference to the combo-box, used by the item elements.
+       */
+      comboBox: {
+        type: Object,
+      },
 
-      // Allow extensions to customize tag name for the items
-      this.__hostTagName = this.constructor.is.replace('-scroller', '');
+      /**
+       * Function used to set a label for every combo-box item.
+       */
+      getItemLabel: {
+        type: Object,
+      },
 
-      this.addEventListener('click', (e) => e.stopPropagation());
+      /**
+       * Function used to render the content of every combo-box item.
+       */
+      renderer: {
+        type: Object,
+        observer: '__rendererChanged',
+      },
 
-      this.__patchWheelOverScrolling();
+      /**
+       * Used to propagate the `theme` attribute from the host element.
+       */
+      theme: {
+        type: String,
+      },
+    };
+  }
 
-      this.__virtualizer = new Virtualizer({
-        createElements: this.__createElements.bind(this),
-        updateElement: this._updateElement.bind(this),
-        elementsContainer: this,
-        scrollTarget: this,
-        scrollContainer: this.$.selector,
-      });
-    }
+  constructor() {
+    super();
+    this.__boundOnItemClick = this.__onItemClick.bind(this);
+  }
 
-    /**
-     * Requests an update for the virtualizer to re-render items.
-     */
-    requestContentUpdate() {
-      if (this.__virtualizer) {
-        this.__virtualizer.update();
-      }
+  __openedChanged(opened) {
+    if (opened) {
+      this.requestContentUpdate();
     }
+  }
 
-    /**
-     * 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();
+  /** @protected */
+  ready() {
+    super.ready();
 
-      let targetIndex = index;
+    // Ensure every instance has unique ID
+    this.id = `${this.localName}-${generateUniqueId()}`;
 
-      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));
+    // Allow extensions to customize tag name for the items
+    this.__hostTagName = this.constructor.is.replace('-scroller', '');
 
-      // 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;
-      }
-    }
+    this.setAttribute('role', 'listbox');
 
-    /**
-     * @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;
-    }
+    this.addEventListener('click', (e) => e.stopPropagation());
 
-    /** @private */
-    __itemsChanged(items) {
-      if (this.__virtualizer && items) {
-        this.__virtualizer.size = items.length;
-        this.__virtualizer.flush();
-        this.requestContentUpdate();
-      }
-    }
+    this.__patchWheelOverScrolling();
 
-    /** @private */
-    __loadingChanged() {
-      this.requestContentUpdate();
-    }
+    this.__virtualizer = new Virtualizer({
+      createElements: this.__createElements.bind(this),
+      updateElement: this.__updateElement.bind(this),
+      elementsContainer: this,
+      scrollTarget: this,
+      scrollContainer: this.$.selector,
+    });
+  }
 
-    /** @private */
-    __openedChanged(opened) {
-      if (opened) {
-        this.requestContentUpdate();
-      }
+  requestContentUpdate() {
+    if (this.__virtualizer) {
+      this.__virtualizer.update();
     }
+  }
 
-    /** @private */
-    __selectedItemChanged() {
-      this.requestContentUpdate();
+  scrollIntoView(index) {
+    if (!(this.opened && index >= 0)) {
+      return;
     }
 
-    /** @private */
-    __focusedIndexChanged(index, oldIndex) {
-      if (index !== oldIndex) {
-        this.requestContentUpdate();
-      }
+    const visibleItemsCount = this._visibleItemsCount();
 
-      // 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);
-      }
-    }
+    let targetIndex = index;
 
-    /** @private */
-    __rendererChanged(renderer, oldRenderer) {
-      if (renderer || oldRenderer) {
-        this.requestContentUpdate();
-      }
+    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));
 
-    /** @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;
-      });
+    // 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;
+    }
+  }
 
-    /**
-     * @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,
-      });
-
-      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);
+  /** @private */
+  __getAriaRole(itemIndex) {
+    return itemIndex !== undefined ? 'option' : false;
+  }
 
-      if (this.theme) {
-        el.setAttribute('theme', this.theme);
-      } else {
-        el.removeAttribute('theme');
-      }
+  /** @private */
+  __isItemFocused(focusedIndex, itemIndex) {
+    return !this.loading && focusedIndex === itemIndex;
+  }
 
-      if (item instanceof ComboBoxPlaceholder) {
-        this.__requestItemByIndex(index);
-      }
+  /** @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);
     }
+    return item === selectedItem;
+  }
 
-    /** @private */
-    __onItemClick(e) {
-      this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
+  /** @private */
+  __itemsChanged(items) {
+    if (this.__virtualizer && items) {
+      this.__virtualizer.size = items.length;
+      this.__virtualizer.flush();
+      this.requestContentUpdate();
     }
+  }
 
-    /**
-     * 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();
-        }
-      });
-    }
+  /** @private */
+  __loadingChanged() {
+    this.requestContentUpdate();
+  }
 
-    /**
-     * 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,
-            },
-          }),
-        );
-      });
-    }
+  /** @private */
+  __selectedItemChanged() {
+    this.requestContentUpdate();
+  }
 
-    /** @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;
+  /** @private */
+  __focusedIndexChanged(index, oldIndex) {
+    if (index !== oldIndex) {
+      this.requestContentUpdate();
     }
-  };
 
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+    // 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);
+    }
+  }
 
-/**
- * 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 */
+  __rendererChanged(renderer, oldRenderer) {
+    if (renderer || oldRenderer) {
+      this.requestContentUpdate();
+    }
   }
 
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          min-height: 1px;
-          overflow: auto;
+  /** @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;
+    });
+  }
 
-          /* Fixes item background from getting on top of scrollbars on Safari */
-          transform: translate3d(0, 0, 0);
+  /** @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),
+    });
 
-          /* Enable momentum scrolling on iOS */
-          -webkit-overflow-scrolling: touch;
+    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);
 
-          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-          box-shadow: 0 0 0 white;
-        }
+    if (this.theme) {
+      el.setAttribute('theme', this.theme);
+    } else {
+      el.removeAttribute('theme');
+    }
 
-        #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>
-    `;
+    if (item instanceof ComboBoxPlaceholder) {
+      this.__requestItemByIndex(index);
+    }
   }
-}
 
-defineCustomElement(ComboBoxScroller);
+  /** @private */
+  __onItemClick(e) {
+    this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
+  }
 
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+  /**
+   * 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();
+      }
+    });
+  }
 
-/**
- * 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,
-        },
-      };
+  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;
+        });
     }
 
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'pattern'];
-    }
+    return this._cachedViewportTotalPaddingBottom;
+  }
 
-    static get constraints() {
-      return [...super.constraints, 'pattern'];
-    }
-  };
+  /**
+   * 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,
+          },
+        }),
+      );
+    });
+  }
+
+  /** @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;
+  }
+}
+
+customElements.define(ComboBoxScroller.is, ComboBoxScroller);
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2860,18 +2676,20 @@ const ComboBoxDataProviderMixin = (superClass) =>
     _flushPendingRequests(size) {
       if (this._pendingRequests) {
         const lastPage = Math.ceil(size / this.pageSize);
-        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
-          if (parseInt(page) >= lastPage) {
-            callback([], size);
+        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);
           }
-        });
+        }
       }
     }
   };
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2896,7 +2714,7 @@ function processTemplates(component) {
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2930,19 +2748,10 @@ 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 ComboBoxMixinClass extends OverlayClassMixin(
-    ControllerMixin(ValidateMixin(FocusMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))))),
-  ) {
+  class VaadinComboBoxMixinElement extends ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))) {
     static get properties() {
       return {
         /**
@@ -3117,14 +2926,6 @@ const ComboBoxMixin = (subclass) =>
           observer: '_toggleElementChanged',
         },
 
-        /**
-         * Set of items to be rendered in the dropdown.
-         * @protected
-         */
-        _dropdownItems: {
-          type: Array,
-        },
-
         /** @private */
         _closeOnBlurIsPrevented: Boolean,
 
@@ -3142,13 +2943,14 @@ const ComboBoxMixin = (subclass) =>
     static get observers() {
       return [
         '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, _dropdownItems, loading)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+        '_openedOrItemsChanged(opened, filteredItems, loading)',
+        '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
       ];
     }
 
     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);
@@ -3165,6 +2967,24 @@ 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.
@@ -3215,6 +3035,8 @@ const ComboBoxMixin = (subclass) =>
       this._initOverlay();
       this._initScroller();
 
+      this.addEventListener('focusout', this._boundOnFocusout);
+
       this._lastCommittedValue = this.value;
 
       this.addEventListener('click', this._boundOnClick);
@@ -3222,7 +3044,7 @@ const ComboBoxMixin = (subclass) =>
 
       const bringToFrontListener = () => {
         requestAnimationFrame(() => {
-          this._overlayElement.bringToFront();
+          this.$.overlay.bringToFront();
         });
       };
 
@@ -3313,8 +3135,6 @@ const ComboBoxMixin = (subclass) =>
       overlay.addEventListener('opened-changed', (e) => {
         this._overlayOpened = e.detail.value;
       });
-
-      this._overlayElement = overlay;
     }
 
     /**
@@ -3326,7 +3146,7 @@ const ComboBoxMixin = (subclass) =>
     _initScroller(host) {
       const scrollerTag = `${this._tagNamePrefix}-scroller`;
 
-      const overlay = this._overlayElement;
+      const overlay = this.$.overlay;
 
       overlay.renderer = (root) => {
         if (!root.firstChild) {
@@ -3339,7 +3159,7 @@ const ComboBoxMixin = (subclass) =>
 
       const scroller = overlay.querySelector(scrollerTag);
 
-      scroller.owner = host || this;
+      scroller.comboBox = host || this;
       scroller.getItemLabel = this._getItemLabel.bind(this);
       scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
 
@@ -3382,7 +3202,7 @@ const ComboBoxMixin = (subclass) =>
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
 
         this._onOpened();
-      } else if (wasOpened && this._dropdownItems && this._dropdownItems.length) {
+      } else if (wasOpened && this.filteredItems && this.filteredItems.length) {
         this.close();
 
         this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
@@ -3434,7 +3254,7 @@ const ComboBoxMixin = (subclass) =>
           }
         }
 
-        this._overlayElement.restoreFocusOnClose = true;
+        this.$.overlay.restoreFocusOnClose = true;
       } else {
         this._onClosed();
         if (this._openedWithFocusRing && this._isInputFocused()) {
@@ -3468,19 +3288,13 @@ 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
      */
-    _onClearButtonClick(event) {
+    _handleClearButtonClick(event) {
       event.preventDefault();
-      this._onClearAction();
+      this._clear();
 
       // De-select dropdown item
       if (this.opened) {
@@ -3516,13 +3330,15 @@ const ComboBoxMixin = (subclass) =>
     }
 
     /** @private */
-    _onClick(event) {
-      if (this._isClearButton(event)) {
-        this._onClearButtonClick(event);
-      } else if (event.composedPath().includes(this._toggleElement)) {
-        this._onToggleButtonClick(event);
+    _onClick(e) {
+      const path = e.composedPath();
+
+      if (this._isClearButton(e)) {
+        this._handleClearButtonClick(e);
+      } else if (path.indexOf(this._toggleElement) > -1) {
+        this._onToggleButtonClick(e);
       } else {
-        this._onHostClick(event);
+        this._onHostClick(e);
       }
     }
 
@@ -3537,7 +3353,7 @@ const ComboBoxMixin = (subclass) =>
       super._onKeyDown(e);
 
       if (e.key === 'Tab') {
-        this._overlayElement.restoreFocusOnClose = false;
+        this.$.overlay.restoreFocusOnClose = false;
       } else if (e.key === 'ArrowDown') {
         this._onArrowDown();
 
@@ -3553,7 +3369,7 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemLabel(item) {
-      let label = item && this.itemLabelPath ? get(this.itemLabelPath, item) : undefined;
+      let label = item && this.itemLabelPath ? this.get(this.itemLabelPath, item) : undefined;
       if (label === undefined || label === null) {
         label = item ? item.toString() : '';
       }
@@ -3562,7 +3378,7 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _getItemValue(item) {
-      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
+      let value = item && this.itemValuePath ? this.get(this.itemValuePath, item) : undefined;
       if (value === undefined) {
         value = item ? item.toString() : '';
       }
@@ -3572,7 +3388,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _onArrowDown() {
       if (this.opened) {
-        const items = this._dropdownItems;
+        const items = this.filteredItems;
         if (items) {
           this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
           this._prefillFocusedItemLabel();
@@ -3588,7 +3404,7 @@ const ComboBoxMixin = (subclass) =>
         if (this._focusedIndex > -1) {
           this._focusedIndex = Math.max(0, this._focusedIndex - 1);
         } else {
-          const items = this._dropdownItems;
+          const items = this.filteredItems;
           if (items) {
             this._focusedIndex = items.length - 1;
           }
@@ -3603,7 +3419,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _prefillFocusedItemLabel() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this._dropdownItems[this._focusedIndex];
+        const focusedItem = this.filteredItems[this._focusedIndex];
         this._inputElementValue = this._getItemLabel(focusedItem);
         this._markAllSelectionRange();
       }
@@ -3700,7 +3516,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._onClearAction();
+          this._clear();
         }
       } else if (this.opened) {
         // Auto-open is enabled
@@ -3718,7 +3534,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._onClearAction();
+        this._clear();
       }
     }
 
@@ -3740,7 +3556,7 @@ const ComboBoxMixin = (subclass) =>
      * Clears the current value.
      * @protected
      */
-    _onClearAction() {
+    _clear() {
       this.selectedItem = null;
 
       if (this.allowCustomValue) {
@@ -3776,7 +3592,7 @@ const ComboBoxMixin = (subclass) =>
     /** @private */
     _commitValue() {
       if (this._focusedIndex > -1) {
-        const focusedItem = this._dropdownItems[this._focusedIndex];
+        const focusedItem = this.filteredItems[this._focusedIndex];
         if (this.selectedItem !== focusedItem) {
           this.selectedItem = focusedItem;
         }
@@ -3791,7 +3607,7 @@ const ComboBoxMixin = (subclass) =>
         }
       } else {
         // Try to find an item which label matches the input value.
-        const items = [this.selectedItem, ...(this._dropdownItems || [])];
+        const items = [...(this.filteredItems || []), this.selectedItem];
         const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
 
         if (
@@ -3832,6 +3648,14 @@ const ComboBoxMixin = (subclass) =>
       this.filter = '';
     }
 
+    /**
+     * @return {string}
+     * @protected
+     */
+    get _propertyForValue() {
+      return 'value';
+    }
+
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event
@@ -3978,12 +3802,6 @@ 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;
@@ -4006,8 +3824,6 @@ const ComboBoxMixin = (subclass) =>
 
     /** @private */
     _filteredItemsChanged(filteredItems, oldFilteredItems) {
-      this._setDropdownItems(filteredItems);
-
       // Store the currently focused item if any. The focused index preserves
       // in the case when more filtered items are loading but it is reset
       // when the user types in a filter query.
@@ -4068,16 +3884,6 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /**
-     * Provide items to be rendered in the dropdown.
-     * Override this method to show custom items.
-     *
-     * @protected
-     */
-    _setDropdownItems(items) {
-      this._dropdownItems = items;
-    }
-
     /** @private */
     _getItemElements() {
       return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));
@@ -4138,53 +3944,35 @@ const ComboBoxMixin = (subclass) =>
       }
     }
 
-    /**
-     * 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);
-
-      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) {
-          delete this._lastCustomValue;
-          return;
-        }
-
-        this._closeOrCommit();
-      }
+    /** @private */
+    __onClearButtonMouseDown(event) {
+      event.preventDefault(); // Prevent native focusout event
+      this.inputElement.focus();
     }
 
-    /**
-     * 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) {
+    /** @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 false;
+        return;
       }
 
-      // 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) {
+      // Fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
+      if (event.relatedTarget === this.$.overlay) {
         event.composedPath()[0].focus();
-        return false;
+        return;
       }
+      if (!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) {
+          delete this._lastCustomValue;
+          return;
+        }
 
-      return true;
+        this._closeOrCommit();
+      }
     }
 
     /** @private */
@@ -4194,7 +3982,7 @@ const ComboBoxMixin = (subclass) =>
       }
 
       event.preventDefault();
-      this._onClearAction();
+      this._clear();
     }
 
     /**
@@ -4240,7 +4028,7 @@ const ComboBoxMixin = (subclass) =>
 
 /**
  * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -4360,7 +4148,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/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/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.
@@ -4371,7 +4159,6 @@ 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
@@ -4474,7 +4261,6 @@ 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"]');
@@ -4482,17 +4268,48 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 
   /**
-   * Override the method from `InputControlMixin`
-   * to stop event propagation to prevent `ComboBoxMixin`
-   * from handling this click event also on its own.
-   *
+   * 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.
    * @param {Event} event
    * @protected
    * @override
    */
   _onClearButtonClick(event) {
     event.stopPropagation();
-    super._onClearButtonClick(event);
+
+    this._handleClearButtonClick(event);
   }
 
   /**
@@ -4509,4 +4326,4 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 }
 
-defineCustomElement(ComboBox);
+customElements.define(ComboBox.is, ComboBox);