@everymatrix/general-input 1.22.0 → 1.22.1

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

@@ -1,111 +1,73 @@
-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 { o, i, h as html, P as PolymerElement, u as usageStatistics, d as dedupingMixin, V as ValidateMixin, j as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, b as isElementFocused, e as InputController, f as LabelledInputController } from './field-mixin.js';
+import { b as overlay, c as menuOverlayCore, P as PositionMixin, O as OverlayMixin, o as overlayStyles, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
+import { i as inputFieldShared, I as InputConstraintsMixin, a as InputControlMixin, b as inputFieldShared$1 } from './input-field-shared-styles.js';
 
 /**
  * @license
- * Copyright (c) 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
-const loader = i`
-  [part~='loader'] {
-    box-sizing: border-box;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
-    border: 2px solid transparent;
-    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
-      var(--lumo-primary-color);
-    border-radius: calc(0.5 * var(--lumo-icon-size-s));
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host(:not([loading])) [part~='loader'] {
-    display: none;
-  }
-
-  :host([loading]) [part~='loader'] {
-    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
-  }
-
-  @keyframes lumo-loader-fade-in {
-    0% {
-      opacity: 0;
-    }
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes$1(elementClass) {
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
+}
 
-    100% {
-      opacity: 1;
-    }
-  }
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes$1(tagName) {
+  return classHasThemes$1(customElements.get(tagName));
+}
 
-  @keyframes lumo-loader-rotate {
-    0% {
-      transform: rotate(0deg);
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles$1(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof o) {
+      return true;
     }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
 
-    100% {
-      transform: rotate(360deg);
+/**
+ * Registers CSS styles for a component type. Make sure to register the styles before
+ * the first instance of a component of the type is attached to DOM.
+ *
+ * @param {string} themeFor The local/tag name of the component type to register the styles for
+ * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
+ * matching themeFor and included in the local scope of each component instance
+ * @param {{moduleId?: string, include?: string | string[]}} options Additional options
+ * @return {void}
+ */
+function registerStyles$1(themeFor, styles, options = {}) {
+  if (themeFor) {
+    if (hasThemes$1(themeFor)) {
+      console.warn(`The custom element definition for "${themeFor}"
+      was finalized before a style module was registered.
+      Make sure to add component specific style modules before
+      importing the corresponding custom element.`);
     }
   }
-`;
-
-const comboBoxOverlay = i`
-  [part='content'] {
-    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));
-  }
-
-  [part~='overlay'] {
-    position: relative;
-  }
-
-  :host([top-aligned]) [part~='overlay'] {
-    margin-top: var(--lumo-space-xs);
-  }
-
-  :host([bottom-aligned]) [part~='overlay'] {
-    margin-bottom: var(--lumo-space-xs);
-  }
-
-  [part~='loader'] {
-    position: absolute;
-    z-index: 1;
-    left: var(--lumo-space-s);
-    right: var(--lumo-space-s);
-    top: var(--lumo-space-s);
-    margin-left: auto;
-    margin-inline-start: auto;
-    margin-inline-end: 0;
-  }
 
-  /* RTL specific styles */
+  styles = flattenStyles$1(styles);
 
-  :host([dir='rtl']) [part~='loader'] {
-    left: auto;
-    margin-left: 0;
-    margin-right: auto;
-    margin-inline-start: 0;
-    margin-inline-end: auto;
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
   }
-`;
-
-registerStyles('vaadin-combo-box-overlay', [overlay, menuOverlayCore, comboBoxOverlay, loader], {
-  moduleId: 'lumo-combo-box-overlay',
-});
+}
 
 const item = i`
   :host {
@@ -182,309 +144,1377 @@ const item = i`
   }
 
   /* Slotted icons */
-  :host ::slotted(vaadin-icon),
-  :host ::slotted(iron-icon) {
+  :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;
-  }
+registerStyles$1('vaadin-item', item, { moduleId: 'lumo-item' });
 
-  @media (any-hover: hover) {
-    :host([focused]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * @polymerMixin
+ */
+const ThemePropertyMixin = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component's "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+        },
+      };
     }
-  }
-`;
 
-registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
-  moduleId: 'lumo-combo-box-item',
-});
-
-const comboBox = i`
-  :host {
-    outline: none;
-  }
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'theme'];
+    }
 
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
 
-registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
+      if (name === 'theme') {
+        this._set_theme(newValue);
+      }
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * An item element used by the `<vaadin-combo-box>` dropdown.
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name   | Description
- * ------------|--------------
- * `checkmark` | The graphical checkmark shown for a selected item
- * `content`   | The element that wraps the item content
- *
- * The following state attributes are exposed for styling:
- *
- * Attribute    | Description
- * -------------|-------------
- * `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.
+ * @typedef {Object} Theme
+ * @property {string} themeFor
+ * @property {CSSResult[]} styles
+ * @property {string | string[]} [include]
+ * @property {string} [moduleId]
  *
- * @mixes ThemableMixin
- * @mixes DirMixin
- * @private
+ * @typedef {CSSResult[] | CSSResult} CSSResultGroup
  */
-class ComboBoxItem extends ThemableMixin(DirMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  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)'];
-  }
+/**
+ * @type {Theme[]}
+ */
+const themeRegistry = [];
 
-  connectedCallback() {
-    super.connectedCallback();
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes(elementClass) {
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
+}
 
-    this._comboBox = this.parentNode.comboBox;
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes(tagName) {
+  return classHasThemes(customElements.get(tagName));
+}
 
-    const hostDir = this._comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof o) {
+      return true;
     }
-  }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
 
-  /**
-   * 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;
+/**
+ * Registers CSS styles for a component type. Make sure to register the styles before
+ * the first instance of a component of the type is attached to DOM.
+ *
+ * @param {string} themeFor The local/tag name of the component type to register the styles for
+ * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
+ * matching themeFor and included in the local scope of each component instance
+ * @param {{moduleId?: string, include?: string | string[]}} options Additional options
+ * @return {void}
+ */
+function registerStyles(themeFor, styles, options = {}) {
+  if (themeFor) {
+    if (hasThemes(themeFor)) {
+      console.warn(`The custom element definition for "${themeFor}"
+      was finalized before a style module was registered.
+      Make sure to add component specific style modules before
+      importing the corresponding custom element.`);
     }
-
-    const model = {
-      index: this.index,
-      item: this.item,
-      focused: this.focused,
-      selected: this.selected,
-    };
-
-    this.renderer(this, this._comboBox, model);
   }
 
-  /** @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$;
-    }
+  styles = flattenStyles(styles);
 
-    if (renderer) {
-      this._oldRenderer = renderer;
-      this.requestContentUpdate();
-    }
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
+  } else {
+    themeRegistry.push({
+      themeFor,
+      styles,
+      include: options.include,
+      moduleId: options.moduleId,
+    });
   }
+}
 
-  /** @private */
-  __updateLabel(label, renderer) {
-    if (renderer) {
-      return;
-    }
-
-    this.textContent = label;
+/**
+ * Returns all registered themes. By default the themeRegistry is returned as is.
+ * In case the style-modules adapter is imported, the themes are obtained from there instead
+ * @returns {Theme[]}
+ */
+function getAllThemes() {
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    return window.Vaadin.styleModules.getAllThemes();
   }
+  return themeRegistry;
 }
 
-customElements.define(ComboBoxItem.is, ComboBoxItem);
-
+/**
+ * Returns true if the themeFor string matches the tag name
+ * @param {string} themeFor
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function matchesThemeFor(themeFor, tagName) {
+  return (themeFor || '').split(' ').some((themeForToken) => {
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+  });
+}
+
+/**
+ * Maps the moduleName to an include priority number which is used for
+ * determining the order in which styles are applied.
+ * @param {string} moduleName
+ * @returns {number}
+ */
+function getIncludePriority(moduleName = '') {
+  let includePriority = 0;
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+    includePriority = 1;
+  } else if (moduleName.startsWith('vaadin-')) {
+    includePriority = 2;
+  }
+  return includePriority;
+}
+
+/**
+ * Gets an array of CSSResults matching the include property of the theme.
+ * @param {Theme} theme
+ * @returns {CSSResult[]}
+ */
+function getIncludedStyles(theme) {
+  const includedStyles = [];
+  if (theme.include) {
+    [].concat(theme.include).forEach((includeModuleId) => {
+      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      if (includedTheme) {
+        includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
+      } else {
+        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
+      }
+    }, theme.styles);
+  }
+  return includedStyles;
+}
+
+/**
+ * Includes the styles to the template.
+ * @param {CSSResult[]} styles
+ * @param {HTMLTemplateElement} template
+ */
+function addStylesToTemplate(styles, template) {
+  const styleEl = document.createElement('style');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
+  template.content.appendChild(styleEl);
+}
+
+/**
+ * Returns an array of themes that should be used for styling a component matching
+ * the tag name. The array is sorted by the include order.
+ * @param {string} tagName
+ * @returns {Theme[]}
+ */
+function getThemes(tagName) {
+  const defaultModuleName = `${tagName}-default-theme`;
+
+  const themes = getAllThemes()
+    // Filter by matching themeFor properties
+    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
+    .map((theme) => ({
+      ...theme,
+      // Prepend styles from included themes
+      styles: [...getIncludedStyles(theme), ...theme.styles],
+      // Map moduleId to includePriority
+      includePriority: getIncludePriority(theme.moduleId),
+    }))
+    // Sort by includePriority
+    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
+
+  if (themes.length > 0) {
+    return themes;
+  }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+}
+
+/**
+ * @polymerMixin
+ * @mixes ThemePropertyMixin
+ */
+const ThemableMixin = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+    /**
+     * Covers PolymerElement based component styling
+     * @protected
+     */
+    static finalize() {
+      super.finalize();
+
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
+      const template = this.prototype._template;
+      if (!template || classHasThemes(this)) {
+        return;
+      }
+
+      addStylesToTemplate(this.getStylesForThis(), template);
+    }
+
+    /**
+     * Covers LitElement based component styling
+     *
+     * @protected
+     */
+    static finalizeStyles(styles) {
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
+    }
+  };
+
+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 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const loader = i`
+  [part~='loader'] {
+    box-sizing: border-box;
+    width: var(--lumo-icon-size-s);
+    height: var(--lumo-icon-size-s);
+    border: 2px solid transparent;
+    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
+      var(--lumo-primary-color);
+    border-radius: calc(0.5 * var(--lumo-icon-size-s));
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host(:not([loading])) [part~='loader'] {
+    display: none;
+  }
+
+  :host([loading]) [part~='loader'] {
+    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
+  }
+
+  @keyframes lumo-loader-fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  @keyframes lumo-loader-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+const comboBoxOverlay = i`
+  [part='content'] {
+    padding: 0;
+  }
+
+  /* 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));
+  }
+
+  [part~='overlay'] {
+    position: relative;
+  }
+
+  :host([top-aligned]) [part~='overlay'] {
+    margin-top: var(--lumo-space-xs);
+  }
+
+  :host([bottom-aligned]) [part~='overlay'] {
+    margin-bottom: var(--lumo-space-xs);
+  }
+`;
+
+const comboBoxLoader = i`
+  [part~='loader'] {
+    position: absolute;
+    z-index: 1;
+    left: var(--lumo-space-s);
+    right: var(--lumo-space-s);
+    top: var(--lumo-space-s);
+    margin-left: auto;
+    margin-inline-start: auto;
+    margin-inline-end: 0;
+  }
+
+  :host([dir='rtl']) [part~='loader'] {
+    left: auto;
+    margin-left: 0;
+    margin-right: auto;
+    margin-inline-start: 0;
+    margin-inline-end: auto;
+  }
+`;
+
+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 comboBox = i`
+  :host {
+    outline: none;
+  }
+
+  [part='toggle-button']::before {
+    content: var(--lumo-icons-dropdown);
+  }
+`;
+
+registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+function defineCustomElement(CustomElement) {
+  const defined = customElements.get(CustomElement.is);
+  if (!defined) {
+    customElements.define(CustomElement.is, CustomElement);
+  } else {
+    const definedVersion = defined.version;
+    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
+      // Just loading the same thing again
+      console.warn(`The component ${CustomElement.is} has been loaded twice`);
+    } else {
+      console.error(
+        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
+      );
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Array of Vaadin custom element classes that have been subscribed to the dir changes.
+ */
+const directionSubscribers = [];
+
+function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
+  if (documentDir) {
+    element.setAttribute('dir', documentDir);
+  } else if (elementDir != null) {
+    element.removeAttribute('dir');
+  }
+}
+
+function getDocumentDir() {
+  return document.documentElement.getAttribute('dir');
+}
+
+function directionUpdater() {
+  const documentDir = getDocumentDir();
+  directionSubscribers.forEach((element) => {
+    alignDirs(element, documentDir);
+  });
+}
+
+const directionObserver = new MutationObserver(directionUpdater);
+directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+/**
+ * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
+ *
+ * @polymerMixin
+ */
+const DirMixin = (superClass) =>
+  class VaadinDirMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * @protected
+         */
+        dir: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
+      };
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
+        this.__subscribe();
+        alignDirs(this, getDocumentDir(), null);
+      }
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (name !== 'dir') {
+        return;
+      }
+
+      const documentDir = getDocumentDir();
+
+      // New value equals to the document direction and the element is not subscribed to the changes
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
+      // Value was emptied and the element is not subscribed to the changes
+      const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
+      // New value is different and the old equals to document direction and the element is not subscribed to the changes
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
+
+      if (newValueEqlDocDir || newValueEmptied) {
+        this.__subscribe();
+        alignDirs(this, documentDir, newValue);
+      } else if (newDiffValue) {
+        this.__unsubscribe();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
+    }
+
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
+      }
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
+    /** @private */
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+      }
+    }
+  };
+
+/**
+ * @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,
+        },
+
+        /**
+         * True when item is focused.
+         */
+        focused: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Custom function for rendering the item content.
+         */
+        renderer: {
+          type: Function,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'hidden'];
+    }
+
+    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);
+      }
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      this._owner = this.parentNode.owner;
+
+      const hostDir = this._owner.getAttribute('dir');
+      if (hostDir) {
+        this.setAttribute('dir', hostDir);
+      }
+    }
+
+    /**
+     * 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 model = {
+        index: this.index,
+        item: this.item,
+        focused: this.focused,
+        selected: this.selected,
+      };
+
+      this.renderer(this, this._owner, model);
+    }
+
+    /** @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 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * An item element used by the `<vaadin-combo-box>` dropdown.
+ *
+ * ### Styling
+ *
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name   | Description
+ * ------------|--------------
+ * `checkmark` | The graphical checkmark shown for a selected item
+ * `content`   | The element that wraps the item content
+ *
+ * The following state attributes are exposed for styling:
+ *
+ * Attribute    | Description
+ * -------------|-------------
+ * `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.
+ *
+ * @customElement
+ * @mixes ComboBoxItemMixin
+ * @mixes ThemableMixin
+ * @mixes DirMixin
+ * @private
+ */
+class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-combo-box-item';
+  }
+}
+
+defineCustomElement(ComboBoxItem);
+
 /**
  * @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));
+/**
+ * @polymerMixin
+ * @mixes PositionMixin
+ */
+const ComboBoxOverlayMixin = (superClass) =>
+  class ComboBoxOverlayMixin extends PositionMixin(superClass) {
+    static get observers() {
+      return ['_setOverlayWidth(positionTarget, opened)'];
     }
 
-    [part='content'] {
-      display: flex;
-      flex-direction: column;
-      height: 100%;
+    constructor() {
+      super();
+
+      this.requiredVerticalSpace = 200;
     }
-  `,
-  { moduleId: 'vaadin-combo-box-overlay-styles' },
-);
 
-let memoizedTemplate;
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      const comboBox = this._comboBox;
+
+      const hostDir = comboBox && 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);
+    }
+
+    /** @private */
+    _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();
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 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));
+  }
+
+  [part='content'] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+`;
+
+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
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ComboBoxOverlayMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
  * @private
  */
-class ComboBoxOverlay extends PositionMixin(Overlay) {
+class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
   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 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>
+    `;
+  }
+}
+
+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);
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+let uniqueId = 0;
+
+/**
+ * Returns a unique integer id.
+ *
+ * @return {number}
+ */
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
+}
+
+/**
+ * @license
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+ */
+
+/**
+ * @fileoverview
+ *
+ * This module provides a number of strategies for enqueuing asynchronous
+ * tasks. Each sub-module provides a standard `run(fn)` interface that returns a
+ * handle, and a `cancel(handle)` interface for canceling async tasks before
+ * they run.
+ *
+ * @summary Module that provides a number of strategies for enqueuing
+ * asynchronous tasks.
+ */
 
-    return memoizedTemplate;
+let microtaskCurrHandle = 0;
+let microtaskLastHandle = 0;
+const microtaskCallbacks = [];
+let microtaskScheduled = false;
+
+function microtaskFlush() {
+  microtaskScheduled = false;
+  const len = microtaskCallbacks.length;
+  for (let i = 0; i < len; i++) {
+    const cb = microtaskCallbacks[i];
+    if (cb) {
+      try {
+        cb();
+      } catch (e) {
+        setTimeout(() => {
+          throw e;
+        });
+      }
+    }
   }
+  microtaskCallbacks.splice(0, len);
+  microtaskLastHandle += len;
+}
+
+/**
+ * Async interface wrapper around `setTimeout`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `setTimeout`.
+ */
+const timeOut = {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @memberof timeOut
+   * @param {number=} delay Time to wait before calling callbacks in ms
+   * @return {!AsyncInterface} An async timeout interface
+   */
+  after(delay) {
+    return {
+      run(fn) {
+        return window.setTimeout(fn, delay);
+      },
+      cancel(handle) {
+        window.clearTimeout(handle);
+      },
+    };
+  },
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @memberof timeOut
+   * @param {!Function} fn Callback to run
+   * @param {number=} delay Delay in milliseconds
+   * @return {number} Handle used for canceling task
+   */
+  run(fn, delay) {
+    return window.setTimeout(fn, delay);
+  },
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   *
+   * @memberof timeOut
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.clearTimeout(handle);
+  },
+};
+
+/**
+ * Async interface wrapper around `requestAnimationFrame`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestAnimationFrame`.
+ */
+const animationFrame = {
+  /**
+   * Enqueues a function called at `requestAnimationFrame` timing.
+   *
+   * @memberof animationFrame
+   * @param {function(number):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestAnimationFrame(fn);
+  },
+  /**
+   * Cancels a previously enqueued `animationFrame` callback.
+   *
+   * @memberof animationFrame
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.cancelAnimationFrame(handle);
+  },
+};
+
+/**
+ * Async interface wrapper around `requestIdleCallback`.  Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestIdleCallback`.
+ */
+const idlePeriod = {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @memberof idlePeriod
+   * @param {function(!IdleDeadline):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.setTimeout(fn, 16);
+  },
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   *
+   * @memberof idlePeriod
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
+    }
+  },
+};
+
+/**
+ * Async interface for enqueuing callbacks that run at microtask timing.
+ *
+ * @namespace
+ * @summary Async interface for enqueuing callbacks that run at microtask
+ *   timing.
+ */
+const microTask = {
+  /**
+   * Enqueues a function called at microtask timing.
+   *
+   * @memberof microTask
+   * @param {!Function=} callback Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(callback) {
+    if (!microtaskScheduled) {
+      microtaskScheduled = true;
+      queueMicrotask(() => microtaskFlush());
+    }
+    microtaskCallbacks.push(callback);
+    const result = microtaskCurrHandle;
+    microtaskCurrHandle += 1;
+    return result;
+  },
+
+  /**
+   * Cancels a previously enqueued `microTask` callback.
+   *
+   * @memberof microTask
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    const idx = handle - microtaskLastHandle;
+    if (idx >= 0) {
+      if (!microtaskCallbacks[idx]) {
+        throw new Error(`invalid async handle: ${handle}`);
+      }
+      microtaskCallbacks[idx] = null;
+    }
+  },
+};
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
+
+const testPlatform = (regexp) => regexp.test(navigator.platform);
+
+const testVendor = (regexp) => regexp.test(navigator.vendor);
+
+testUserAgent(/Android/u);
+
+testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
+
+testUserAgent(/Firefox/u);
 
-  static get observers() {
-    return ['_setOverlayWidth(positionTarget, opened)'];
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
+
+testPlatform(/^iPhone/u);
+
+const isSafari = testUserAgent(/^((?!chrome|android).)*safari/iu);
+
+const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
   }
+})();
 
-  connectedCallback() {
-    super.connectedCallback();
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
 
-    const comboBox = this._comboBox;
+const debouncerQueue = new Set();
 
-    const hostDir = comboBox && comboBox.getAttribute('dir');
-    if (hostDir) {
-      this.setAttribute('dir', hostDir);
+/**
+ * @summary Collapse multiple callbacks into one invocation after a timer.
+ */
+class Debouncer {
+  /**
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
+   */
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer();
     }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
   }
 
-  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;
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
   }
 
-  _outsideClickListener(event) {
-    const eventPath = event.composedPath();
-    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
-      this.close();
+  /**
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param {!AsyncInterface} asyncModule Object with Async interface.
+   * @param {function()} callback Callback to run.
+   * @return {void}
+   */
+  setConfig(asyncModule, callback) {
+    this._asyncModule = asyncModule;
+    this._callback = callback;
+    this._timer = this._asyncModule.run(() => {
+      this._timer = null;
+      debouncerQueue.delete(this);
+      this._callback();
+    });
+  }
+
+  /**
+   * Cancels an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  cancel() {
+    if (this.isActive()) {
+      this._cancelAsync();
+      // Canceling a debouncer removes its spot from the flush queue,
+      // so if a debouncer is manually canceled and re-debounced, it
+      // will reset its flush order (this is a very minor difference from 1.x)
+      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
+      debouncerQueue.delete(this);
+    }
+  }
+
+  /**
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
+   */
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
     }
   }
 
-  _setOverlayWidth(positionTarget, opened) {
-    if (positionTarget && opened) {
-      const propPrefix = this.localName;
-      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+  /**
+   * Flushes an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
+   */
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
+    }
+  }
 
-      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
+  }
+}
 
-      if (customWidth === '') {
-        this.style.removeProperty(`--${propPrefix}-width`);
-      } else {
-        this.style.setProperty(`--${propPrefix}-width`, customWidth);
-      }
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ *
+ * @param {!Debouncer} debouncer Debouncer to enqueue
+ * @return {void}
+ */
+function enqueueDebouncer(debouncer) {
+  debouncerQueue.add(debouncer);
+}
 
-      this._updatePosition();
+/**
+ * Flushes any enqueued debouncers
+ *
+ * @return {boolean} Returns whether any debouncers were flushed
+ */
+function flushDebouncers() {
+  const didFlush = Boolean(debouncerQueue.size);
+  // If new debouncers are added while flushing, Set.forEach will ensure
+  // newly added ones are also flushed
+  debouncerQueue.forEach((debouncer) => {
+    try {
+      debouncer.flush();
+    } catch (e) {
+      setTimeout(() => {
+        throw e;
+      });
     }
-  }
+  });
+  return didFlush;
 }
 
-customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);
+const flush = () => {
+  let debouncers;
+  do {
+    debouncers = flushDebouncers();
+  } while (debouncers);
+};
 
 /**
  * @license
@@ -496,7 +1526,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 +2016,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 +2130,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 +2240,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 +2250,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 +2380,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 +2451,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 +2509,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 +2602,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 +2744,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 +2819,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 +2971,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,56 +3036,399 @@ 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;
-  }
+/**
+ * @license
+ * Copyright (c) 2015 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
+/*
+ * Placeholder object class representing items being loaded.
+ *
+ * @private
+ */
+const ComboBoxPlaceholder = class ComboBoxPlaceholder {
+  toString() {
+    return '';
   }
-}
+};
 
 /**
  * @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/
  */
 
-/*
- * Placeholder object class representing items being loaded.
- *
- * @private
- */
-const ComboBoxPlaceholder = class ComboBoxPlaceholder {
-  toString() {
-    return '';
-  }
-};
+/**
+ * @polymerMixin
+ */
+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',
+        },
+
+        /**
+         * 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,
+        },
+
+        /**
+         * Reference to the owner (combo-box owner), used by the item elements.
+         */
+        owner: {
+          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',
+        },
+
+        /**
+         * Used to propagate the `theme` attribute from the host element.
+         */
+        theme: {
+          type: String,
+        },
+      };
+    }
+
+    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;
+          });
+      }
+
+      return this._cachedViewportTotalPaddingBottom;
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this.setAttribute('role', 'listbox');
+
+      // Ensure every instance has unique ID
+      this.id = `${this.localName}-${generateUniqueId()}`;
+
+      // Allow extensions to customize tag name for the items
+      this.__hostTagName = this.constructor.is.replace('-scroller', '');
+
+      this.addEventListener('click', (e) => e.stopPropagation());
+
+      this.__patchWheelOverScrolling();
+
+      this.__virtualizer = new Virtualizer({
+        createElements: this.__createElements.bind(this),
+        updateElement: this._updateElement.bind(this),
+        elementsContainer: this,
+        scrollTarget: this,
+        scrollContainer: this.$.selector,
+      });
+    }
+
+    /**
+     * Requests an update for the virtualizer to re-render items.
+     */
+    requestContentUpdate() {
+      if (this.__virtualizer) {
+        this.__virtualizer.update();
+      }
+    }
+
+    /**
+     * 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;
+
+      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;
+      }
+      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 */
+    __itemsChanged(items) {
+      if (this.__virtualizer && items) {
+        this.__virtualizer.size = items.length;
+        this.__virtualizer.flush();
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    __loadingChanged() {
+      this.requestContentUpdate();
+    }
+
+    /** @private */
+    __openedChanged(opened) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    __selectedItemChanged() {
+      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);
+      }
+    }
+
+    /** @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;
+      });
+    }
+
+    /**
+     * @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);
+
+      if (this.theme) {
+        el.setAttribute('theme', this.theme);
+      } else {
+        el.removeAttribute('theme');
+      }
+
+      if (item instanceof ComboBoxPlaceholder) {
+        this.__requestItemByIndex(index);
+      }
+    }
+
+    /** @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();
+        }
+      });
+    }
+
+    /**
+     * 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 */
+    _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;
+    }
+  };
 
 /**
  * @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.
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
  *
+ * @customElement
  * @extends HTMLElement
+ * @mixes ComboBoxScrollerMixin
  * @private
  */
-class ComboBoxScroller extends PolymerElement {
+class ComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
   static get is() {
     return 'vaadin-combo-box-scroller';
   }
@@ -2015,7 +3454,7 @@ class ComboBoxScroller extends PolymerElement {
         #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);
+          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
           position: relative;
         }
       </style>
@@ -2024,349 +3463,642 @@ class ComboBoxScroller extends PolymerElement {
       </div>
     `;
   }
+}
 
-  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',
-      },
+defineCustomElement(ComboBoxScroller);
 
-      /**
-       * 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',
-      },
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-      /**
-       * Set to true while combo-box fetches new page from the data provider.
-       */
-      loading: {
-        type: Boolean,
-        observer: '__loadingChanged',
-      },
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
 
-      /**
-       * 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',
-      },
+/**
+ * Array of Vaadin custom element classes that have been finalized.
+ */
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
 
-      /**
-       * The selected item from the `items` array.
-       */
-      selectedItem: {
-        type: Object,
-        observer: '__selectedItemChanged',
-      },
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
 
-      /**
-       * Path for the id of the item, used to detect whether the item is selected.
-       */
-      itemIdPath: {
-        type: String,
-      },
+window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
+  usageStatistics();
+};
 
-      /**
-       * Reference to the combo-box, used by the item elements.
-       */
-      comboBox: {
-        type: Object,
-      },
+let statsJob;
 
-      /**
-       * Function used to set a label for every combo-box item.
-       */
-      getItemLabel: {
-        type: Object,
-      },
+const registered = new Set();
 
-      /**
-       * Function used to render the content of every combo-box item.
-       */
-      renderer: {
-        type: Object,
-        observer: '__rendererChanged',
-      },
+/**
+ * @polymerMixin
+ * @mixes DirMixin
+ */
+const ElementMixin = (superClass) =>
+  class VaadinElementMixin extends DirMixin(superClass) {
+    static get version() {
+      return '24.2.3';
+    }
 
-      /**
-       * Used to propagate the `theme` attribute from the host element.
-       */
-      theme: {
-        type: String,
-      },
+    /** @protected */
+    static finalize() {
+      super.finalize();
+
+      const { is } = this;
+
+      // Registers a class prototype for telemetry purposes.
+      if (is && !registered.has(is)) {
+        window.Vaadin.registrations.push(this);
+        registered.add(is);
+
+        if (window.Vaadin.developmentModeCallback) {
+          statsJob = Debouncer.debounce(statsJob, idlePeriod, () => {
+            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+          });
+          enqueueDebouncer(statsJob);
+        }
+      }
+    }
+
+    constructor() {
+      super();
+
+      if (document.doctype === null) {
+        console.warn(
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
+        );
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+class SlotObserver {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
+
+    /** @type Function */
+    this.callback = callback;
+
+    /** @type {Node[]} */
+    this._storedNodes = [];
+
+    this._connected = false;
+    this._scheduled = false;
+
+    this._boundSchedule = () => {
+      this._schedule();
     };
+
+    this.connect();
+    this._schedule();
   }
 
-  constructor() {
-    super();
-    this.__boundOnItemClick = this.__onItemClick.bind(this);
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
   }
 
-  __openedChanged(opened) {
-    if (opened) {
-      this.requestContentUpdate();
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
+
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
+
+      queueMicrotask(() => {
+        this.flush();
+      });
     }
   }
 
-  /** @protected */
-  ready() {
-    super.ready();
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
 
-    // Ensure every instance has unique ID
-    this.id = `${this.localName}-${generateUniqueId()}`;
+    this._scheduled = false;
 
-    // Allow extensions to customize tag name for the items
-    this.__hostTagName = this.constructor.is.replace('-scroller', '');
+    this._processNodes();
+  }
 
-    this.setAttribute('role', 'listbox');
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
 
-    this.addEventListener('click', (e) => e.stopPropagation());
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
 
-    this.__patchWheelOverScrolling();
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
 
-    this.__virtualizer = new Virtualizer({
-      createElements: this.__createElements.bind(this),
-      updateElement: this.__updateElement.bind(this),
-      elementsContainer: this,
-      scrollTarget: this,
-      scrollContainer: this.$.selector,
-    });
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
+        }
+      });
+    }
+
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
+    }
+
+    this._storedNodes = currentNodes;
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+class SlotController extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {HTMLElement} host
+   * @param {string} slotName
+   * @return {string}
+   * @protected
+   */
+  static generateId(host, slotName) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
   }
 
-  requestContentUpdate() {
-    if (this.__virtualizer) {
-      this.__virtualizer.update();
+  constructor(host, slotName, tagName, config = {}) {
+    super();
+
+    const { initializer, multiple, observe, useUniqueId } = config;
+
+    this.host = host;
+    this.slotName = slotName;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = this.constructor.generateId(host, slotName);
     }
   }
 
-  scrollIntoView(index) {
-    if (!(this.opened && index >= 0)) {
-      return;
+  hostConnected() {
+    if (!this.initialized) {
+      if (this.multiple) {
+        this.initMultiple();
+      } else {
+        this.initSingle();
+      }
+
+      if (this.observe) {
+        this.observeSlot();
+      }
+
+      this.initialized = true;
     }
+  }
 
-    const visibleItemsCount = this._visibleItemsCount();
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
 
-    let targetIndex = index;
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
 
-    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;
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
+
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      if (defaultNode) {
+        this.nodes = [defaultNode];
+        this.initNode(defaultNode);
+      }
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
     }
-    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;
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, tagName } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
     }
-    const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
-    const scrollerRect = this.getBoundingClientRect();
-    const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
-    if (scrollTopAdjust > 0) {
-      this.scrollTop += scrollTopAdjust;
+
+    if (node) {
+      host.appendChild(node);
     }
+
+    return node;
   }
 
-  /** @private */
-  __getAriaRole(itemIndex) {
-    return itemIndex !== undefined ? 'option' : false;
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   * @return {Node}
+   */
+  getSlotChildren() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).filter((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
   }
 
-  /** @private */
-  __isItemFocused(focusedIndex, itemIndex) {
-    return !this.loading && focusedIndex === itemIndex;
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
   }
 
-  /** @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);
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(node, this.host);
     }
-    return item === selectedItem;
   }
 
-  /** @private */
-  __itemsChanged(items) {
-    if (this.__virtualizer && items) {
-      this.__virtualizer.size = items.length;
-      this.__virtualizer.flush();
-      this.requestContentUpdate();
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
+
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
+
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
     }
   }
 
-  /** @private */
-  __loadingChanged() {
-    this.requestContentUpdate();
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  observeSlot() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
+
+    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+      const current = this.multiple ? this.nodes : [this.node];
+
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
+
+        removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNodes && newNodes.length > 0) {
+        if (this.multiple) {
+          // Remove default node if exists
+          if (this.defaultNode) {
+            this.defaultNode.remove();
+          }
+          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          // Remove previous node if exists
+          if (this.node) {
+            this.node.remove();
+          }
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
+        }
+      }
+    });
   }
+}
 
-  /** @private */
-  __selectedItemChanged() {
-    this.requestContentUpdate();
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
   }
 
-  /** @private */
-  __focusedIndexChanged(index, oldIndex) {
-    if (index !== oldIndex) {
-      this.requestContentUpdate();
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
     }
 
-    // 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);
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
     }
-  }
 
-  /** @private */
-  __rendererChanged(renderer, oldRenderer) {
-    if (renderer || oldRenderer) {
-      this.requestContentUpdate();
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
     }
-  }
 
-  /** @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;
-    });
+    this.__notifyChange();
   }
 
-  /** @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),
-    });
+  /**
+   * Override to notify the host when the tooltip is removed.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.__notifyChange();
+  }
 
-    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);
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
+   */
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
 
-    if (this.theme) {
-      el.setAttribute('theme', this.theme);
-    } else {
-      el.removeAttribute('theme');
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
     }
+  }
 
-    if (item instanceof ComboBoxPlaceholder) {
-      this.__requestItemByIndex(index);
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
     }
   }
 
-  /** @private */
-  __onItemClick(e) {
-    this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
   }
 
   /**
-   * 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.
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
    */
-  __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();
-      }
-    });
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
   }
 
-  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 default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
     }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
 
-    return this._cachedViewportTotalPaddingBottom;
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
   }
 
   /**
-   * 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
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
    */
-  __requestItemByIndex(index) {
-    requestAnimationFrame(() => {
-      this.dispatchEvent(
-        new CustomEvent('index-requested', {
-          detail: {
-            index,
-            currentScrollerPos: this._oldScrollerPosition,
-          },
-        }),
-      );
-    });
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
   }
 
   /** @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;
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
   }
 }
 
-customElements.define(ComboBoxScroller.is, 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 +4408,179 @@ 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 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef ReactiveController
+ * @type {import('lit').ReactiveController}
+ */
+
+/**
+ * A mixin for connecting controllers to the element.
+ *
+ * @polymerMixin
+ */
+const ControllerMixin = dedupingMixin((superClass) => {
+  // If the superclass extends from LitElement,
+  // use its own controllers implementation.
+  if (typeof superClass.prototype.addController === 'function') {
+    return superClass;
+  }
+
+  return class ControllerMixinClass extends superClass {
+    constructor() {
+      super();
+
+      /**
+       * @type {Set<ReactiveController>}
+       */
+      this.__controllers = new Set();
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostConnected) {
+          c.hostConnected();
+        }
+      });
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostDisconnected) {
+          c.hostDisconnected();
+        }
+      });
+    }
+
+    /**
+     * Registers a controller to participate in the element update cycle.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    addController(controller) {
+      this.__controllers.add(controller);
+      // Call hostConnected if a controller is added after the element is attached.
+      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+        controller.hostConnected();
+      }
+    }
+
+    /**
+     * Removes a controller from the element.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    removeController(controller) {
+      this.__controllers.delete(controller);
+    }
+  };
+});
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin that forwards CSS class names to the internal overlay element
+ * by setting the `overlayClass` property or `overlay-class` attribute.
+ *
+ * @polymerMixin
+ */
+const OverlayClassMixin = (superclass) =>
+  class OverlayClassMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A space-delimited list of CSS class names to set on the overlay element.
+         * This property does not affect other CSS class names set manually via JS.
+         *
+         * Note, if the CSS class name was set with this property, clearing it will
+         * remove it from the overlay, even if the same class name was also added
+         * manually, e.g. by using `classList.add()` in the `renderer` function.
+         *
+         * @attr {string} overlay-class
+         */
+        overlayClass: {
+          type: String,
+        },
+
+        /**
+         * An overlay element on which CSS class names are set.
+         *
+         * @protected
+         */
+        _overlayElement: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateOverlayClassNames(overlayClass, _overlayElement)'];
+    }
+
+    /** @private */
+    __updateOverlayClassNames(overlayClass, overlayElement) {
+      if (!overlayElement) {
+        return;
+      }
+
+      // Overlay is set but overlayClass is not set
+      if (overlayClass === undefined) {
+        return;
+      }
+
+      const { classList } = overlayElement;
+
+      if (!this.__initialClasses) {
+        this.__initialClasses = new Set(classList);
+      }
+
+      if (Array.isArray(this.__previousClasses)) {
+        // Remove old classes that no longer apply
+        const classesToRemove = this.__previousClasses.filter((name) => !this.__initialClasses.has(name));
+        if (classesToRemove.length > 0) {
+          classList.remove(...classesToRemove);
         }
       }
+
+      // Add new classes based on the overlayClass
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      if (classesToAdd.length > 0) {
+        classList.add(...classesToAdd);
+      }
+
+      this.__previousClasses = classesToAdd;
     }
   };
 
 /**
  * @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 +4605,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 +4639,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 +4850,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 +4866,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 +4916,6 @@ const ComboBoxMixin = (subclass) =>
       this._initOverlay();
       this._initScroller();
 
-      this.addEventListener('focusout', this._boundOnFocusout);
-
       this._lastCommittedValue = this.value;
 
       this.addEventListener('click', this._boundOnClick);
@@ -3044,7 +4923,7 @@ const ComboBoxMixin = (subclass) =>
 
       const bringToFrontListener = () => {
         requestAnimationFrame(() => {
-          this.$.overlay.bringToFront();
+          this._overlayElement.bringToFront();
         });
       };
 
@@ -3135,6 +5014,8 @@ const ComboBoxMixin = (subclass) =>
       overlay.addEventListener('opened-changed', (e) => {
         this._overlayOpened = e.detail.value;
       });
+
+      this._overlayElement = overlay;
     }
 
     /**
@@ -3146,7 +5027,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 +5040,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 +5135,7 @@ const ComboBoxMixin = (subclass) =>
           }
         }
 
-        this.$.overlay.restoreFocusOnClose = true;
+        this._overlayElement.restoreFocusOnClose = true;
       } else {
         this._onClosed();
         if (this._openedWithFocusRing && this._isInputFocused()) {
@@ -3288,13 +5169,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 +5217,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 +5238,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 +5254,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 +5263,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 +5401,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 +5419,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 +5441,7 @@ const ComboBoxMixin = (subclass) =>
      * Clears the current value.
      * @protected
      */
-    _clear() {
+    _onClearAction() {
       this.selectedItem = null;
 
       if (this.allowCustomValue) {
@@ -3607,7 +5492,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 +5533,6 @@ const ComboBoxMixin = (subclass) =>
       this.filter = '';
     }
 
-    /**
-     * @return {string}
-     * @protected
-     */
-    get _propertyForValue() {
-      return 'value';
-    }
-
     /**
      * Override an event listener from `InputMixin`.
      * @param {!Event} event
@@ -3802,6 +5679,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 +5827,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 +5850,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 +5883,7 @@ const ComboBoxMixin = (subclass) =>
       }
 
       event.preventDefault();
-      this._clear();
+      this._onClearAction();
     }
 
     /**
@@ -4028,7 +5929,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 +6049,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 +6060,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 +6163,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 +6171,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 +6198,4 @@ class ComboBox extends ComboBoxDataProviderMixin(
   }
 }
 
-customElements.define(ComboBox.is, ComboBox);
+defineCustomElement(ComboBox);