@everymatrix/general-input 0.0.1

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

@@ -0,0 +1,4329 @@
+import { i, r as registerStyles, T as ThemableMixin, G as DirMixin, P as PolymerElement, h as html, n as microTask, R as idlePeriod, U as animationFrame, W as flush, A as Debouncer, X as enqueueDebouncer, B as timeOut, Y 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, e as menuOverlayCore, P as PositionMixin, O as Overlay, f as isSafari, V as VirtualKeyboardController, g as isTouch } from './virtual-keyboard-controller.js';
+import { i as inputFieldShared, a as InputControlMixin, b as inputFieldShared$1 } from './input-field-shared-styles.js';
+import { P as PatternMixin } from './pattern-mixin.js';
+
+/**
+ * @license
+ * Copyright (c) 2022 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;
+  }
+
+  :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 */
+
+  :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], {
+  moduleId: 'lumo-combo-box-overlay',
+});
+
+const item = i`
+  :host {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    line-height: var(--lumo-line-height-xs);
+    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
+      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+    min-height: var(--lumo-size-m);
+    outline: none;
+    border-radius: var(--lumo-border-radius-m);
+    cursor: var(--lumo-clickable-cursor);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
+  }
+
+  /* Checkmark */
+  [part='checkmark']::before {
+    display: var(--_lumo-item-selected-icon-display, none);
+    content: var(--lumo-icons-checkmark);
+    font-family: lumo-icons;
+    font-size: var(--lumo-icon-size-m);
+    line-height: 1;
+    font-weight: normal;
+    width: 1em;
+    height: 1em;
+    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
+    color: var(--lumo-primary-text-color);
+    flex: none;
+    opacity: 0;
+    transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
+  }
+
+  :host([selected]) [part='checkmark']::before {
+    opacity: 1;
+  }
+
+  :host([active]:not([selected])) [part='checkmark']::before {
+    transform: scale(0.8);
+    opacity: 0;
+    transition-duration: 0s;
+  }
+
+  [part='content'] {
+    flex: auto;
+  }
+
+  /* Disabled */
+  :host([disabled]) {
+    color: var(--lumo-disabled-text-color);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
+  @media (any-hover: hover) {
+    :host(:hover:not([disabled])) {
+      background-color: var(--lumo-primary-color-10pct);
+    }
+
+    :host([focus-ring]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+
+  /* RTL specific styles */
+  :host([dir='rtl']) {
+    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
+    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
+  }
+
+  /* Slotted icons */
+  :host ::slotted(vaadin-icon),
+  :host ::slotted(iron-icon) {
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
+`;
+
+registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
+
+const comboBoxItem = i`
+  :host {
+    transition: background-color 100ms;
+    overflow: hidden;
+    --_lumo-item-selected-icon-display: block;
+  }
+
+  @media (any-hover: hover) {
+    :host([focused]:not([disabled])) {
+      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
+    }
+  }
+`;
+
+registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
+  moduleId: 'lumo-combo-box-item',
+});
+
+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) 2015 - 2022 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.
+ *
+ * @mixes ThemableMixin
+ * @mixes DirMixin
+ * @private
+ */
+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)'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this._comboBox = this.parentNode.comboBox;
+
+    const hostDir = this._comboBox.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._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$;
+    }
+
+    if (renderer) {
+      this._oldRenderer = renderer;
+      this.requestContentUpdate();
+    }
+  }
+
+  /** @private */
+  __updateLabel(label, renderer) {
+    if (renderer) {
+      return;
+    }
+
+    this.textContent = label;
+  }
+}
+
+customElements.define(ComboBoxItem.is, ComboBoxItem);
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 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));
+    }
+
+    [part='content'] {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+  `,
+  { moduleId: 'vaadin-combo-box-overlay-styles' },
+);
+
+let memoizedTemplate;
+
+/**
+ * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
+ *
+ * @extends Overlay
+ * @private
+ */
+class ComboBoxOverlay extends PositionMixin(Overlay) {
+  static get is() {
+    return 'vaadin-combo-box-overlay';
+  }
+
+  static get template() {
+    if (!memoizedTemplate) {
+      memoizedTemplate = super.template.cloneNode(true);
+      memoizedTemplate.content.querySelector('[part~="overlay"]').removeAttribute('tabindex');
+    }
+
+    return memoizedTemplate;
+  }
+
+  static get observers() {
+    return ['_setOverlayWidth(positionTarget, opened)'];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    const comboBox = this._comboBox;
+
+    const hostDir = comboBox && comboBox.getAttribute('dir');
+    if (hostDir) {
+      this.setAttribute('dir', hostDir);
+    }
+  }
+
+  ready() {
+    super.ready();
+    const loader = document.createElement('div');
+    loader.setAttribute('part', 'loader');
+    const content = this.shadowRoot.querySelector('[part~="content"]');
+    content.parentNode.insertBefore(loader, content);
+    this.requiredVerticalSpace = 200;
+  }
+
+  _outsideClickListener(event) {
+    const eventPath = event.composedPath();
+    if (!eventPath.includes(this.positionTarget) && !eventPath.includes(this)) {
+      this.close();
+    }
+  }
+
+  _setOverlayWidth(positionTarget, opened) {
+    if (positionTarget && opened) {
+      const propPrefix = this.localName;
+      this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
+
+      const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
+
+      if (customWidth === '') {
+        this.style.removeProperty(`--${propPrefix}-width`);
+      } else {
+        this.style.setProperty(`--${propPrefix}-width`, customWidth);
+      }
+
+      this._updatePosition();
+    }
+  }
+}
+
+customElements.define(ComboBoxOverlay.is, ComboBoxOverlay);
+
+/**
+ * @license
+ * Copyright (c) 2016 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 IOS = navigator.userAgent.match(/iP(?:hone|ad;(?: U;)? CPU) OS (\d+)/);
+const IOS_TOUCH_SCROLLING = IOS && IOS[1] >= 8;
+const DEFAULT_PHYSICAL_COUNT = 3;
+
+/**
+ * DO NOT EDIT THIS FILE!
+ *
+ * This file includes the iron-list scrolling engine copied from
+ * https://github.com/PolymerElements/iron-list/blob/master/iron-list.js
+ *
+ * If something in the scrolling engine needs to be changed
+ * for the virtualizer's purposes, override a function
+ * in virtualizer-iron-list-adapter.js instead of changing it here.
+ * If a function on this file is no longer needed, the code can be safely deleted.
+ *
+ * This will allow us to keep the iron-list code here as close to
+ * the original as possible.
+ */
+const ironList = {
+  /**
+   * The ratio of hidden tiles that should remain in the scroll direction.
+   * Recommended value ~0.5, so it will distribute tiles evenly in both
+   * directions.
+   */
+  _ratio: 0.5,
+
+  /**
+   * The padding-top value for the list.
+   */
+  _scrollerPaddingTop: 0,
+
+  /**
+   * This value is a cached value of `scrollTop` from the last `scroll` event.
+   */
+  _scrollPosition: 0,
+
+  /**
+   * The sum of the heights of all the tiles in the DOM.
+   */
+  _physicalSize: 0,
+
+  /**
+   * The average `offsetHeight` of the tiles observed till now.
+   */
+  _physicalAverage: 0,
+
+  /**
+   * The number of tiles which `offsetHeight` > 0 observed until now.
+   */
+  _physicalAverageCount: 0,
+
+  /**
+   * The Y position of the item rendered in the `_physicalStart`
+   * tile relative to the scrolling list.
+   */
+  _physicalTop: 0,
+
+  /**
+   * The number of items in the list.
+   */
+  _virtualCount: 0,
+
+  /**
+   * The estimated scroll height based on `_physicalAverage`
+   */
+  _estScrollHeight: 0,
+
+  /**
+   * The scroll height of the dom node
+   */
+  _scrollHeight: 0,
+
+  /**
+   * The height of the list. This is referred as the viewport in the context of
+   * list.
+   */
+  _viewportHeight: 0,
+
+  /**
+   * The width of the list. This is referred as the viewport in the context of
+   * list.
+   */
+  _viewportWidth: 0,
+
+  /**
+   * An array of DOM nodes that are currently in the tree
+   * @type {?Array<!HTMLElement>}
+   */
+  _physicalItems: null,
+
+  /**
+   * An array of heights for each item in `_physicalItems`
+   * @type {?Array<number>}
+   */
+  _physicalSizes: null,
+
+  /**
+   * A cached value for the first visible index.
+   * See `firstVisibleIndex`
+   * @type {?number}
+   */
+  _firstVisibleIndexVal: null,
+
+  /**
+   * A cached value for the last visible index.
+   * See `lastVisibleIndex`
+   * @type {?number}
+   */
+  _lastVisibleIndexVal: null,
+
+  /**
+   * The max number of pages to render. One page is equivalent to the height of
+   * the list.
+   */
+  _maxPages: 2,
+
+  /**
+   * The cost of stamping a template in ms.
+   */
+  _templateCost: 0,
+
+  /**
+   * The bottom of the physical content.
+   */
+  get _physicalBottom() {
+    return this._physicalTop + this._physicalSize;
+  },
+
+  /**
+   * The bottom of the scroll.
+   */
+  get _scrollBottom() {
+    return this._scrollPosition + this._viewportHeight;
+  },
+
+  /**
+   * The n-th item rendered in the last physical item.
+   */
+  get _virtualEnd() {
+    return this._virtualStart + this._physicalCount - 1;
+  },
+
+  /**
+   * The height of the physical content that isn't on the screen.
+   */
+  get _hiddenContentSize() {
+    return this._physicalSize - this._viewportHeight;
+  },
+
+  /**
+   * The maximum scroll top value.
+   */
+  get _maxScrollTop() {
+    return this._estScrollHeight - this._viewportHeight + this._scrollOffset;
+  },
+
+  /**
+   * The largest n-th value for an item such that it can be rendered in
+   * `_physicalStart`.
+   */
+  get _maxVirtualStart() {
+    const virtualCount = this._virtualCount;
+    return Math.max(0, virtualCount - this._physicalCount);
+  },
+
+  get _virtualStart() {
+    return this._virtualStartVal || 0;
+  },
+
+  set _virtualStart(val) {
+    val = this._clamp(val, 0, this._maxVirtualStart);
+    this._virtualStartVal = val;
+  },
+
+  get _physicalStart() {
+    return this._physicalStartVal || 0;
+  },
+
+  /**
+   * The k-th tile that is at the top of the scrolling list.
+   */
+  set _physicalStart(val) {
+    val %= this._physicalCount;
+    if (val < 0) {
+      val = this._physicalCount + val;
+    }
+    this._physicalStartVal = val;
+  },
+
+  /**
+   * The k-th tile that is at the bottom of the scrolling list.
+   */
+  get _physicalEnd() {
+    return (this._physicalStart + this._physicalCount - 1) % this._physicalCount;
+  },
+
+  get _physicalCount() {
+    return this._physicalCountVal || 0;
+  },
+
+  set _physicalCount(val) {
+    this._physicalCountVal = val;
+  },
+
+  /**
+   * An optimal physical size such that we will have enough physical items
+   * to fill up the viewport and recycle when the user scrolls.
+   *
+   * This default value assumes that we will at least have the equivalent
+   * to a viewport of physical items above and below the user's viewport.
+   */
+  get _optPhysicalSize() {
+    return this._viewportHeight === 0 ? Infinity : this._viewportHeight * this._maxPages;
+  },
+
+  /**
+   * True if the current list is visible.
+   */
+  get _isVisible() {
+    return Boolean(this.offsetWidth || this.offsetHeight);
+  },
+
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @type {number}
+   */
+  get firstVisibleIndex() {
+    let idx = this._firstVisibleIndexVal;
+    if (idx == null) {
+      let physicalOffset = this._physicalTop + this._scrollOffset;
+
+      idx =
+        this._iterateItems((pidx, vidx) => {
+          physicalOffset += this._getPhysicalSizeIncrement(pidx);
+
+          if (physicalOffset > this._scrollPosition) {
+            return vidx;
+          }
+        }) || 0;
+      this._firstVisibleIndexVal = idx;
+    }
+    return idx;
+  },
+
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @type {number}
+   */
+  get lastVisibleIndex() {
+    let idx = this._lastVisibleIndexVal;
+    if (idx == null) {
+      let physicalOffset = this._physicalTop + this._scrollOffset;
+      this._iterateItems((pidx, vidx) => {
+        if (physicalOffset < this._scrollBottom) {
+          idx = vidx;
+        }
+        physicalOffset += this._getPhysicalSizeIncrement(pidx);
+      });
+
+      this._lastVisibleIndexVal = idx;
+    }
+    return idx;
+  },
+
+  get _scrollOffset() {
+    return this._scrollerPaddingTop + this.scrollOffset;
+  },
+
+  /**
+   * Recycles the physical items when needed.
+   */
+  _scrollHandler() {
+    const scrollTop = Math.max(0, Math.min(this._maxScrollTop, this._scrollTop));
+    let delta = scrollTop - this._scrollPosition;
+    const isScrollingDown = delta >= 0;
+    // Track the current scroll position.
+    this._scrollPosition = scrollTop;
+    // Clear indexes for first and last visible indexes.
+    this._firstVisibleIndexVal = null;
+    this._lastVisibleIndexVal = null;
+    // Random access.
+    if (Math.abs(delta) > this._physicalSize && this._physicalSize > 0) {
+      delta -= this._scrollOffset;
+      const idxAdjustment = Math.round(delta / this._physicalAverage);
+      this._virtualStart += idxAdjustment;
+      this._physicalStart += idxAdjustment;
+      // Estimate new physical offset based on the virtual start index.
+      // adjusts the physical start position to stay in sync with the clamped
+      // virtual start index. It's critical not to let this value be
+      // more than the scroll position however, since that would result in
+      // the physical items not covering the viewport, and leading to
+      // _increasePoolIfNeeded to run away creating items to try to fill it.
+      this._physicalTop = Math.min(Math.floor(this._virtualStart) * this._physicalAverage, this._scrollPosition);
+      this._update();
+    } else if (this._physicalCount > 0) {
+      const reusables = this._getReusables(isScrollingDown);
+      if (isScrollingDown) {
+        this._physicalTop = reusables.physicalTop;
+        this._virtualStart += reusables.indexes.length;
+        this._physicalStart += reusables.indexes.length;
+      } else {
+        this._virtualStart -= reusables.indexes.length;
+        this._physicalStart -= reusables.indexes.length;
+      }
+      this._update(reusables.indexes, isScrollingDown ? null : reusables.indexes);
+      this._debounce('_increasePoolIfNeeded', this._increasePoolIfNeeded.bind(this, 0), microTask);
+    }
+  },
+
+  /**
+   * Returns an object that contains the indexes of the physical items
+   * that might be reused and the physicalTop.
+   *
+   * @param {boolean} fromTop If the potential reusable items are above the scrolling region.
+   */
+  _getReusables(fromTop) {
+    let ith, offsetContent, physicalItemHeight;
+    const idxs = [];
+    const protectedOffsetContent = this._hiddenContentSize * this._ratio;
+    const virtualStart = this._virtualStart;
+    const virtualEnd = this._virtualEnd;
+    const physicalCount = this._physicalCount;
+    let top = this._physicalTop + this._scrollOffset;
+    const bottom = this._physicalBottom + this._scrollOffset;
+    // This may be called outside of a scrollHandler, so use last cached position
+    const scrollTop = this._scrollPosition;
+    const scrollBottom = this._scrollBottom;
+
+    if (fromTop) {
+      ith = this._physicalStart;
+      offsetContent = scrollTop - top;
+    } else {
+      ith = this._physicalEnd;
+      offsetContent = bottom - scrollBottom;
+    }
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      physicalItemHeight = this._getPhysicalSizeIncrement(ith);
+      offsetContent -= physicalItemHeight;
+      if (idxs.length >= physicalCount || offsetContent <= protectedOffsetContent) {
+        break;
+      }
+      if (fromTop) {
+        // Check that index is within the valid range.
+        if (virtualEnd + idxs.length + 1 >= this._virtualCount) {
+          break;
+        }
+        // Check that the index is not visible.
+        if (top + physicalItemHeight >= scrollTop - this._scrollOffset) {
+          break;
+        }
+        idxs.push(ith);
+        top += physicalItemHeight;
+        ith = (ith + 1) % physicalCount;
+      } else {
+        // Check that index is within the valid range.
+        if (virtualStart - idxs.length <= 0) {
+          break;
+        }
+        // Check that the index is not visible.
+        if (top + this._physicalSize - physicalItemHeight <= scrollBottom) {
+          break;
+        }
+        idxs.push(ith);
+        top -= physicalItemHeight;
+        ith = ith === 0 ? physicalCount - 1 : ith - 1;
+      }
+    }
+    return { indexes: idxs, physicalTop: top - this._scrollOffset };
+  },
+
+  /**
+   * Update the list of items, starting from the `_virtualStart` item.
+   * @param {!Array<number>=} itemSet
+   * @param {!Array<number>=} movingUp
+   */
+  _update(itemSet, movingUp) {
+    if ((itemSet && itemSet.length === 0) || this._physicalCount === 0) {
+      return;
+    }
+    this._assignModels(itemSet);
+    this._updateMetrics(itemSet);
+    // Adjust offset after measuring.
+    if (movingUp) {
+      while (movingUp.length) {
+        const idx = movingUp.pop();
+        this._physicalTop -= this._getPhysicalSizeIncrement(idx);
+      }
+    }
+    this._positionItems();
+    this._updateScrollerSize();
+  },
+
+  _isClientFull() {
+    return (
+      this._scrollBottom !== 0 &&
+      this._physicalBottom - 1 >= this._scrollBottom &&
+      this._physicalTop <= this._scrollPosition
+    );
+  },
+
+  /**
+   * Increases the pool size.
+   */
+  _increasePoolIfNeeded(count) {
+    const nextPhysicalCount = this._clamp(
+      this._physicalCount + count,
+      DEFAULT_PHYSICAL_COUNT,
+      this._virtualCount - this._virtualStart,
+    );
+    const delta = nextPhysicalCount - this._physicalCount;
+    let nextIncrease = Math.round(this._physicalCount * 0.5);
+
+    if (delta < 0) {
+      return;
+    }
+    if (delta > 0) {
+      const ts = window.performance.now();
+      // Concat arrays in place.
+      [].push.apply(this._physicalItems, this._createPool(delta));
+      // Push 0s into physicalSizes. Can't use Array.fill because IE11 doesn't
+      // support it.
+      for (let i = 0; i < delta; i++) {
+        this._physicalSizes.push(0);
+      }
+      this._physicalCount += delta;
+      // Update the physical start if it needs to preserve the model of the
+      // focused item. In this situation, the focused item is currently rendered
+      // and its model would have changed after increasing the pool if the
+      // physical start remained unchanged.
+      if (
+        this._physicalStart > this._physicalEnd &&
+        this._isIndexRendered(this._focusedVirtualIndex) &&
+        this._getPhysicalIndex(this._focusedVirtualIndex) < this._physicalEnd
+      ) {
+        this._physicalStart += delta;
+      }
+      this._update();
+      this._templateCost = (window.performance.now() - ts) / delta;
+      nextIncrease = Math.round(this._physicalCount * 0.5);
+    }
+    if (this._virtualEnd >= this._virtualCount - 1 || nextIncrease === 0) ; else if (!this._isClientFull()) {
+      this._debounce('_increasePoolIfNeeded', this._increasePoolIfNeeded.bind(this, nextIncrease), microTask);
+    } else if (this._physicalSize < this._optPhysicalSize) {
+      // Yield and increase the pool during idle time until the physical size is
+      // optimal.
+      this._debounce(
+        '_increasePoolIfNeeded',
+        this._increasePoolIfNeeded.bind(this, this._clamp(Math.round(50 / this._templateCost), 1, nextIncrease)),
+        idlePeriod,
+      );
+    }
+  },
+
+  /**
+   * Renders the a new list.
+   */
+  _render() {
+    if (!this.isAttached || !this._isVisible) {
+      return;
+    }
+    if (this._physicalCount !== 0) {
+      const reusables = this._getReusables(true);
+      this._physicalTop = reusables.physicalTop;
+      this._virtualStart += reusables.indexes.length;
+      this._physicalStart += reusables.indexes.length;
+      this._update(reusables.indexes);
+      this._update();
+      this._increasePoolIfNeeded(0);
+    } else if (this._virtualCount > 0) {
+      // Initial render
+      this.updateViewportBoundaries();
+      this._increasePoolIfNeeded(DEFAULT_PHYSICAL_COUNT);
+    }
+  },
+
+  /**
+   * Called when the items have changed. That is, reassignments
+   * to `items`, splices or updates to a single item.
+   */
+  _itemsChanged(change) {
+    if (change.path === 'items') {
+      this._virtualStart = 0;
+      this._physicalTop = 0;
+      this._virtualCount = this.items ? this.items.length : 0;
+      this._physicalIndexForKey = {};
+      this._firstVisibleIndexVal = null;
+      this._lastVisibleIndexVal = null;
+      this._physicalCount = this._physicalCount || 0;
+      this._physicalItems = this._physicalItems || [];
+      this._physicalSizes = this._physicalSizes || [];
+      this._physicalStart = 0;
+      if (this._scrollTop > this._scrollOffset) {
+        this._resetScrollPosition(0);
+      }
+      this._debounce('_render', this._render, animationFrame);
+    }
+  },
+
+  /**
+   * Executes a provided function per every physical index in `itemSet`
+   * `itemSet` default value is equivalent to the entire set of physical
+   * indexes.
+   *
+   * @param {!function(number, number)} fn
+   * @param {!Array<number>=} itemSet
+   */
+  _iterateItems(fn, itemSet) {
+    let pidx, vidx, rtn, i;
+
+    if (arguments.length === 2 && itemSet) {
+      for (i = 0; i < itemSet.length; i++) {
+        pidx = itemSet[i];
+        vidx = this._computeVidx(pidx);
+        if ((rtn = fn.call(this, pidx, vidx)) != null) {
+          return rtn;
+        }
+      }
+    } else {
+      pidx = this._physicalStart;
+      vidx = this._virtualStart;
+      for (; pidx < this._physicalCount; pidx++, vidx++) {
+        if ((rtn = fn.call(this, pidx, vidx)) != null) {
+          return rtn;
+        }
+      }
+      for (pidx = 0; pidx < this._physicalStart; pidx++, vidx++) {
+        if ((rtn = fn.call(this, pidx, vidx)) != null) {
+          return rtn;
+        }
+      }
+    }
+  },
+
+  /**
+   * Returns the virtual index for a given physical index
+   *
+   * @param {number} pidx Physical index
+   * @return {number}
+   */
+  _computeVidx(pidx) {
+    if (pidx >= this._physicalStart) {
+      return this._virtualStart + (pidx - this._physicalStart);
+    }
+    return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
+  },
+
+  /**
+   * Updates the position of the physical items.
+   */
+  _positionItems() {
+    this._adjustScrollPosition();
+
+    let y = this._physicalTop;
+
+    this._iterateItems((pidx) => {
+      this.translate3d(0, `${y}px`, 0, this._physicalItems[pidx]);
+      y += this._physicalSizes[pidx];
+    });
+  },
+
+  _getPhysicalSizeIncrement(pidx) {
+    return this._physicalSizes[pidx];
+  },
+
+  /**
+   * Adjusts the scroll position when it was overestimated.
+   */
+  _adjustScrollPosition() {
+    const deltaHeight =
+      this._virtualStart === 0 ? this._physicalTop : Math.min(this._scrollPosition + this._physicalTop, 0);
+    // Note: the delta can be positive or negative.
+    if (deltaHeight !== 0) {
+      this._physicalTop -= deltaHeight;
+      // This may be called outside of a scrollHandler, so use last cached position
+      const scrollTop = this._scrollPosition;
+      // Juking scroll position during interial scrolling on iOS is no bueno
+      if (!IOS_TOUCH_SCROLLING && scrollTop > 0) {
+        this._resetScrollPosition(scrollTop - deltaHeight);
+      }
+    }
+  },
+
+  /**
+   * Sets the position of the scroll.
+   */
+  _resetScrollPosition(pos) {
+    if (this.scrollTarget && pos >= 0) {
+      this._scrollTop = pos;
+      this._scrollPosition = this._scrollTop;
+    }
+  },
+
+  /**
+   * Sets the scroll height, that's the height of the content,
+   *
+   * @param {boolean=} forceUpdate If true, updates the height no matter what.
+   */
+  _updateScrollerSize(forceUpdate) {
+    this._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;
+    // 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;
+    }
+  },
+
+  /**
+   * Scroll to a specific index in the virtual list regardless
+   * of the physical items in the DOM tree.
+   *
+   * @method scrollToIndex
+   * @param {number} idx The index of the item
+   */
+  scrollToIndex(idx) {
+    if (typeof idx !== 'number' || idx < 0 || idx > this.items.length - 1) {
+      return;
+    }
+    flush();
+    // Items should have been rendered prior scrolling to an index.
+    if (this._physicalCount === 0) {
+      return;
+    }
+    idx = this._clamp(idx, 0, this._virtualCount - 1);
+    // Update the virtual start only when needed.
+    if (!this._isIndexRendered(idx) || idx >= this._maxVirtualStart) {
+      this._virtualStart = idx - 1;
+    }
+    this._assignModels();
+    this._updateMetrics();
+    // Estimate new physical offset.
+    this._physicalTop = this._virtualStart * this._physicalAverage;
+
+    let currentTopItem = this._physicalStart;
+    let currentVirtualItem = this._virtualStart;
+    let targetOffsetTop = 0;
+    const hiddenContentSize = this._hiddenContentSize;
+    // Scroll to the item as much as we can.
+    while (currentVirtualItem < idx && targetOffsetTop <= hiddenContentSize) {
+      targetOffsetTop += this._getPhysicalSizeIncrement(currentTopItem);
+      currentTopItem = (currentTopItem + 1) % this._physicalCount;
+      currentVirtualItem += 1;
+    }
+    this._updateScrollerSize(true);
+    this._positionItems();
+    this._resetScrollPosition(this._physicalTop + this._scrollOffset + targetOffsetTop);
+    this._increasePoolIfNeeded(0);
+    // Clear cached visible index.
+    this._firstVisibleIndexVal = null;
+    this._lastVisibleIndexVal = null;
+  },
+
+  /**
+   * Reset the physical average and the average count.
+   */
+  _resetAverage() {
+    this._physicalAverage = 0;
+    this._physicalAverageCount = 0;
+  },
+
+  /**
+   * A handler for the `iron-resize` event triggered by `IronResizableBehavior`
+   * when the element is resized.
+   */
+  _resizeHandler() {
+    this._debounce(
+      '_render',
+      () => {
+        // Clear cached visible index.
+        this._firstVisibleIndexVal = null;
+        this._lastVisibleIndexVal = null;
+        if (this._isVisible) {
+          this.updateViewportBoundaries();
+          // Reinstall the scroll event listener.
+          this.toggleScrollListener(true);
+          this._resetAverage();
+          this._render();
+        } else {
+          // Uninstall the scroll event listener.
+          this.toggleScrollListener(false);
+        }
+      },
+      animationFrame,
+    );
+  },
+
+  _isIndexRendered(idx) {
+    return idx >= this._virtualStart && idx <= this._virtualEnd;
+  },
+
+  _getPhysicalIndex(vidx) {
+    return (this._physicalStart + (vidx - this._virtualStart)) % this._physicalCount;
+  },
+
+  _clamp(v, min, max) {
+    return Math.min(max, Math.max(min, v));
+  },
+
+  _debounce(name, cb, asyncModule) {
+    this._debouncers = this._debouncers || {};
+    this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
+    enqueueDebouncer(this._debouncers[name]);
+  },
+};
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+// Iron-list can by default handle sizes up to around 100000.
+// When the size is larger than MAX_VIRTUAL_COUNT _vidxOffset is used
+const MAX_VIRTUAL_COUNT = 100000;
+const OFFSET_ADJUST_MIN_THRESHOLD = 1000;
+
+class IronListAdapter {
+  constructor({ createElements, updateElement, scrollTarget, scrollContainer, elementsContainer, reorderElements }) {
+    this.isAttached = true;
+    this._vidxOffset = 0;
+    this.createElements = createElements;
+    this.updateElement = updateElement;
+    this.scrollTarget = scrollTarget;
+    this.scrollContainer = scrollContainer;
+    this.elementsContainer = elementsContainer || scrollContainer;
+    this.reorderElements = reorderElements;
+    // Iron-list uses this value to determine how many pages of elements to render
+    this._maxPages = 1.3;
+
+    // Placeholder height (used for sizing elements that have intrinsic 0 height after update)
+    this.__placeholderHeight = 200;
+    // A queue of 10 previous element heights
+    this.__elementHeightQueue = Array(10);
+
+    this.timeouts = {
+      SCROLL_REORDER: 500,
+      IGNORE_WHEEL: 500,
+      FIX_INVALID_ITEM_POSITIONING: 100,
+    };
+
+    this.__resizeObserver = new ResizeObserver(() => this._resizeHandler());
+
+    if (getComputedStyle(this.scrollTarget).overflow === 'visible') {
+      this.scrollTarget.style.overflow = 'auto';
+    }
+
+    if (getComputedStyle(this.scrollContainer).position === 'static') {
+      this.scrollContainer.style.position = 'relative';
+    }
+
+    this.__resizeObserver.observe(this.scrollTarget);
+    this.scrollTarget.addEventListener('scroll', () => this._scrollHandler());
+
+    this._scrollLineHeight = this._getScrollLineHeight();
+    this.scrollTarget.addEventListener('wheel', (e) => this.__onWheel(e));
+
+    if (this.reorderElements) {
+      // Reordering the physical elements cancels the user's grab of the scroll bar handle on Safari.
+      // Need to defer reordering until the user lets go of the scroll bar handle.
+      this.scrollTarget.addEventListener('mousedown', () => {
+        this.__mouseDown = true;
+      });
+      this.scrollTarget.addEventListener('mouseup', () => {
+        this.__mouseDown = false;
+        if (this.__pendingReorder) {
+          this.__reorderElements();
+        }
+      });
+    }
+  }
+
+  get scrollOffset() {
+    return 0;
+  }
+
+  get adjustedFirstVisibleIndex() {
+    return this.firstVisibleIndex + this._vidxOffset;
+  }
+
+  get adjustedLastVisibleIndex() {
+    return this.lastVisibleIndex + this._vidxOffset;
+  }
+
+  scrollToIndex(index) {
+    if (typeof index !== 'number' || isNaN(index) || this.size === 0 || !this.scrollTarget.offsetHeight) {
+      return;
+    }
+    index = this._clamp(index, 0, this.size - 1);
+
+    const visibleElementCount = this.__getVisibleElements().length;
+    let targetVirtualIndex = Math.floor((index / this.size) * this._virtualCount);
+    if (this._virtualCount - targetVirtualIndex < visibleElementCount) {
+      targetVirtualIndex = this._virtualCount - (this.size - index);
+      this._vidxOffset = this.size - this._virtualCount;
+    } else if (targetVirtualIndex < visibleElementCount) {
+      if (index < OFFSET_ADJUST_MIN_THRESHOLD) {
+        targetVirtualIndex = index;
+        this._vidxOffset = 0;
+      } else {
+        targetVirtualIndex = OFFSET_ADJUST_MIN_THRESHOLD;
+        this._vidxOffset = index - targetVirtualIndex;
+      }
+    } else {
+      this._vidxOffset = index - targetVirtualIndex;
+    }
+
+    this.__skipNextVirtualIndexAdjust = true;
+    super.scrollToIndex(targetVirtualIndex);
+
+    if (this.adjustedFirstVisibleIndex !== index && this._scrollTop < this._maxScrollTop && !this.grid) {
+      // Workaround an iron-list issue by manually adjusting the scroll position
+      this._scrollTop -= this.__getIndexScrollOffset(index) || 0;
+    }
+    this._scrollHandler();
+  }
+
+  flush() {
+    // The scroll target is hidden.
+    if (this.scrollTarget.offsetHeight === 0) {
+      return;
+    }
+
+    this._resizeHandler();
+    flush();
+    this._scrollHandler();
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.flush();
+    }
+    if (this.__scrollReorderDebouncer) {
+      this.__scrollReorderDebouncer.flush();
+    }
+    if (this.__debouncerWheelAnimationFrame) {
+      this.__debouncerWheelAnimationFrame.flush();
+    }
+  }
+
+  update(startIndex = 0, endIndex = this.size - 1) {
+    this.__getVisibleElements().forEach((el) => {
+      if (el.__virtualIndex >= startIndex && el.__virtualIndex <= endIndex) {
+        this.__updateElement(el, el.__virtualIndex, true);
+      }
+    });
+  }
+
+  /**
+   * Updates the height for a given set of items.
+   *
+   * @param {!Array<number>=} itemSet
+   */
+  _updateMetrics(itemSet) {
+    // Make sure we distributed all the physical items
+    // so we can measure them.
+    flush();
+
+    let newPhysicalSize = 0;
+    let oldPhysicalSize = 0;
+    const prevAvgCount = this._physicalAverageCount;
+    const prevPhysicalAvg = this._physicalAverage;
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this._iterateItems((pidx, vidx) => {
+      oldPhysicalSize += this._physicalSizes[pidx];
+      this._physicalSizes[pidx] = Math.ceil(this.__getBorderBoxHeight(this._physicalItems[pidx]));
+      newPhysicalSize += this._physicalSizes[pidx];
+      this._physicalAverageCount += this._physicalSizes[pidx] ? 1 : 0;
+    }, itemSet);
+
+    this._physicalSize = this._physicalSize + newPhysicalSize - oldPhysicalSize;
+
+    // Update the average if it measured something.
+    if (this._physicalAverageCount !== prevAvgCount) {
+      this._physicalAverage = Math.round(
+        (prevPhysicalAvg * prevAvgCount + newPhysicalSize) / this._physicalAverageCount,
+      );
+    }
+  }
+
+  __getBorderBoxHeight(el) {
+    const style = getComputedStyle(el);
+
+    const itemHeight = parseFloat(style.height) || 0;
+
+    if (style.boxSizing === 'border-box') {
+      return itemHeight;
+    }
+
+    const paddingBottom = parseFloat(style.paddingBottom) || 0;
+    const paddingTop = parseFloat(style.paddingTop) || 0;
+    const borderBottomWidth = parseFloat(style.borderBottomWidth) || 0;
+    const borderTopWidth = parseFloat(style.borderTopWidth) || 0;
+
+    return itemHeight + paddingBottom + paddingTop + borderBottomWidth + borderTopWidth;
+  }
+
+  __updateElement(el, index, forceSameIndexUpdates) {
+    // Clean up temporary placeholder sizing
+    if (el.style.paddingTop) {
+      el.style.paddingTop = '';
+    }
+
+    if (!this.__preventElementUpdates && (el.__lastUpdatedIndex !== index || forceSameIndexUpdates)) {
+      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);
+    }
+  }
+
+  __getIndexScrollOffset(index) {
+    const element = this.__getVisibleElements().find((el) => el.__virtualIndex === index);
+    return element ? this.scrollTarget.getBoundingClientRect().top - element.getBoundingClientRect().top : undefined;
+  }
+
+  get size() {
+    return this.__size;
+  }
+
+  set size(size) {
+    if (size === this.size) {
+      return;
+    }
+    // Cancel active debouncers
+    if (this.__fixInvalidItemPositioningDebouncer) {
+      this.__fixInvalidItemPositioningDebouncer.cancel();
+    }
+    if (this._debouncers && this._debouncers._increasePoolIfNeeded) {
+      // Avoid creating unnecessary elements on the following flush()
+      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);
+
+      const fviOffsetAfter = this.__getIndexScrollOffset(fvi);
+      if (fviOffsetBefore !== undefined && fviOffsetAfter !== undefined) {
+        this._scrollTop += fviOffsetBefore - fviOffsetAfter;
+      }
+    }
+
+    if (!this.elementsContainer.children.length) {
+      requestAnimationFrame(() => this._resizeHandler());
+    }
+
+    this.__preventElementUpdates = false;
+    // Schedule and flush a resize handler
+    this._resizeHandler();
+    flush();
+  }
+
+  /** @private */
+  get _scrollTop() {
+    return this.scrollTarget.scrollTop;
+  }
+
+  /** @private */
+  set _scrollTop(top) {
+    this.scrollTarget.scrollTop = top;
+  }
+
+  /** @private */
+  get items() {
+    return {
+      length: Math.min(this.size, MAX_VIRTUAL_COUNT),
+    };
+  }
+
+  /** @private */
+  get offsetHeight() {
+    return this.scrollTarget.offsetHeight;
+  }
+
+  /** @private */
+  get $() {
+    return {
+      items: this.scrollContainer,
+    };
+  }
+
+  /** @private */
+  updateViewportBoundaries() {
+    const styles = window.getComputedStyle(this.scrollTarget);
+    this._scrollerPaddingTop = this.scrollTarget === this ? 0 : parseInt(styles['padding-top'], 10);
+    this._isRTL = Boolean(styles.direction === 'rtl');
+    this._viewportWidth = this.elementsContainer.offsetWidth;
+    this._viewportHeight = this.scrollTarget.offsetHeight;
+    this._scrollPageHeight = this._viewportHeight - this._scrollLineHeight;
+    if (this.grid) {
+      this._updateGridMetrics();
+    }
+  }
+
+  /** @private */
+  setAttribute() {}
+
+  /** @private */
+  _createPool(size) {
+    const physicalItems = this.createElements(size);
+    const fragment = document.createDocumentFragment();
+    physicalItems.forEach((el) => {
+      el.style.position = 'absolute';
+      fragment.appendChild(el);
+      this.__resizeObserver.observe(el);
+    });
+    this.elementsContainer.appendChild(fragment);
+    return physicalItems;
+  }
+
+  /** @private */
+  _assignModels(itemSet) {
+    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);
+      } else {
+        delete el.__lastUpdatedIndex;
+      }
+    }, itemSet);
+  }
+
+  /** @private */
+  _isClientFull() {
+    // Workaround an issue in iron-list that can cause it to freeze on fast scroll
+    setTimeout(() => {
+      this.__clientFull = true;
+    });
+    return this.__clientFull || super._isClientFull();
+  }
+
+  /** @private */
+  translate3d(_x, y, _z, el) {
+    el.style.transform = `translateY(${y})`;
+  }
+
+  /** @private */
+  toggleScrollListener() {}
+
+  _scrollHandler() {
+    // The scroll target is hidden.
+    if (this.scrollTarget.offsetHeight === 0) {
+      return;
+    }
+
+    this._adjustVirtualIndexOffset(this._scrollTop - (this.__previousScrollTop || 0));
+    const delta = this.scrollTarget.scrollTop - this._scrollPosition;
+
+    super._scrollHandler();
+
+    if (this._physicalCount !== 0) {
+      const isScrollingDown = delta >= 0;
+      const reusables = this._getReusables(!isScrollingDown);
+
+      if (reusables.indexes.length) {
+        // After running super._scrollHandler, fix internal properties to workaround an iron-list issue.
+        // See https://github.com/vaadin/web-components/issues/1691
+        this._physicalTop = reusables.physicalTop;
+
+        if (isScrollingDown) {
+          this._virtualStart -= reusables.indexes.length;
+          this._physicalStart -= reusables.indexes.length;
+        } else {
+          this._virtualStart += reusables.indexes.length;
+          this._physicalStart += reusables.indexes.length;
+        }
+        this._resizeHandler();
+      }
+    }
+
+    if (delta) {
+      // There was a change in scroll top. Schedule a check for invalid item positioning.
+      this.__fixInvalidItemPositioningDebouncer = Debouncer.debounce(
+        this.__fixInvalidItemPositioningDebouncer,
+        timeOut.after(this.timeouts.FIX_INVALID_ITEM_POSITIONING),
+        () => this.__fixInvalidItemPositioning(),
+      );
+    }
+
+    if (this.reorderElements) {
+      this.__scrollReorderDebouncer = Debouncer.debounce(
+        this.__scrollReorderDebouncer,
+        timeOut.after(this.timeouts.SCROLL_REORDER),
+        () => this.__reorderElements(),
+      );
+    }
+
+    this.__previousScrollTop = this._scrollTop;
+
+    // If the first visible index is not 0 when scrolled to the top,
+    // scroll to index 0 to fix the issue.
+    if (this._scrollTop === 0 && this.firstVisibleIndex !== 0 && Math.abs(delta) > 0) {
+      this.scrollToIndex(0);
+    }
+  }
+
+  /**
+   * Work around an iron-list issue with invalid item positioning.
+   * See https://github.com/vaadin/flow-components/issues/4306
+   * @private
+   */
+  __fixInvalidItemPositioning() {
+    if (!this.scrollTarget.isConnected) {
+      return;
+    }
+
+    // Check if the first physical item element is below the top of the viewport
+    const physicalTopBelowTop = this._physicalTop > this._scrollTop;
+    // Check if the last physical item element is above the bottom of the viewport
+    const physicalBottomAboveBottom = this._physicalBottom < this._scrollBottom;
+
+    // Check if the first index is visible
+    const firstIndexVisible = this.adjustedFirstVisibleIndex === 0;
+    // Check if the last index is visible
+    const lastIndexVisible = this.adjustedLastVisibleIndex === this.size - 1;
+
+    if ((physicalTopBelowTop && !firstIndexVisible) || (physicalBottomAboveBottom && !lastIndexVisible)) {
+      // Invalid state! Try to recover.
+
+      const isScrollingDown = physicalBottomAboveBottom;
+      // Set the "_ratio" property temporarily to 0 to make iron-list's _getReusables
+      // place all the free physical items on one side of the viewport.
+      const originalRatio = this._ratio;
+      this._ratio = 0;
+      // Fake a scroll change to make _scrollHandler place the physical items
+      // on the desired side.
+      this._scrollPosition = this._scrollTop + (isScrollingDown ? -1 : 1);
+      this._scrollHandler();
+      // Restore the original "_ratio" value.
+      this._ratio = originalRatio;
+    }
+  }
+
+  /** @private */
+  __onWheel(e) {
+    if (e.ctrlKey || this._hasScrolledAncestor(e.target, e.deltaX, e.deltaY)) {
+      return;
+    }
+
+    let deltaY = e.deltaY;
+    if (e.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+      // Scrolling by "lines of text" instead of pixels
+      deltaY *= this._scrollLineHeight;
+    } else if (e.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+      // Scrolling by "pages" instead of pixels
+      deltaY *= this._scrollPageHeight;
+    }
+
+    this._deltaYAcc = this._deltaYAcc || 0;
+
+    if (this._wheelAnimationFrame) {
+      // Accumulate wheel delta while a frame is being processed
+      this._deltaYAcc += deltaY;
+      e.preventDefault();
+      return;
+    }
+
+    deltaY += this._deltaYAcc;
+    this._deltaYAcc = 0;
+
+    this._wheelAnimationFrame = true;
+    this.__debouncerWheelAnimationFrame = Debouncer.debounce(
+      this.__debouncerWheelAnimationFrame,
+      animationFrame,
+      () => {
+        this._wheelAnimationFrame = false;
+      },
+    );
+
+    const momentum = Math.abs(e.deltaX) + Math.abs(deltaY);
+
+    if (this._canScroll(this.scrollTarget, e.deltaX, deltaY)) {
+      e.preventDefault();
+      this.scrollTarget.scrollTop += deltaY;
+      this.scrollTarget.scrollLeft += e.deltaX;
+
+      this._hasResidualMomentum = true;
+
+      this._ignoreNewWheel = true;
+      this._debouncerIgnoreNewWheel = Debouncer.debounce(
+        this._debouncerIgnoreNewWheel,
+        timeOut.after(this.timeouts.IGNORE_WHEEL),
+        () => {
+          this._ignoreNewWheel = false;
+        },
+      );
+    } else if ((this._hasResidualMomentum && momentum <= this._previousMomentum) || this._ignoreNewWheel) {
+      e.preventDefault();
+    } else if (momentum > this._previousMomentum) {
+      this._hasResidualMomentum = false;
+    }
+    this._previousMomentum = momentum;
+  }
+
+  /**
+   * Determines if the element has an ancestor that handles the scroll delta prior to this
+   *
+   * @private
+   */
+  _hasScrolledAncestor(el, deltaX, deltaY) {
+    if (el === this.scrollTarget || el === this.scrollTarget.getRootNode().host) {
+      return false;
+    } else if (
+      this._canScroll(el, deltaX, deltaY) &&
+      ['auto', 'scroll'].indexOf(getComputedStyle(el).overflow) !== -1
+    ) {
+      return true;
+    } else if (el !== this && el.parentElement) {
+      return this._hasScrolledAncestor(el.parentElement, deltaX, deltaY);
+    }
+  }
+
+  _canScroll(el, deltaX, deltaY) {
+    return (
+      (deltaY > 0 && el.scrollTop < el.scrollHeight - el.offsetHeight) ||
+      (deltaY < 0 && el.scrollTop > 0) ||
+      (deltaX > 0 && el.scrollLeft < el.scrollWidth - el.offsetWidth) ||
+      (deltaX < 0 && el.scrollLeft > 0)
+    );
+  }
+
+  /**
+   * @returns {Number|undefined} - The browser's default font-size in pixels
+   * @private
+   */
+  _getScrollLineHeight() {
+    const el = document.createElement('div');
+    el.style.fontSize = 'initial';
+    el.style.display = 'none';
+    document.body.appendChild(el);
+    const fontSize = window.getComputedStyle(el).fontSize;
+    document.body.removeChild(el);
+    return fontSize ? window.parseInt(fontSize) : undefined;
+  }
+
+  __getVisibleElements() {
+    return Array.from(this.elementsContainer.children).filter((element) => !element.hidden);
+  }
+
+  /** @private */
+  __reorderElements() {
+    if (this.__mouseDown) {
+      this.__pendingReorder = true;
+      return;
+    }
+    this.__pendingReorder = false;
+
+    const adjustedVirtualStart = this._virtualStart + (this._vidxOffset || 0);
+
+    // Which row to use as a target?
+    const visibleElements = this.__getVisibleElements();
+
+    const elementWithFocus = visibleElements.find(
+      (element) =>
+        element.contains(this.elementsContainer.getRootNode().activeElement) ||
+        element.contains(this.scrollTarget.getRootNode().activeElement),
+    );
+    const targetElement = elementWithFocus || visibleElements[0];
+    if (!targetElement) {
+      // All elements are hidden, don't reorder
+      return;
+    }
+
+    // Where the target row should be?
+    const targetPhysicalIndex = targetElement.__virtualIndex - adjustedVirtualStart;
+
+    // Reodrer the DOM elements to keep the target row at the target physical index
+    const delta = visibleElements.indexOf(targetElement) - targetPhysicalIndex;
+    if (delta > 0) {
+      for (let i = 0; i < delta; i++) {
+        this.elementsContainer.appendChild(visibleElements[i]);
+      }
+    } else if (delta < 0) {
+      for (let i = visibleElements.length + delta; i < visibleElements.length; i++) {
+        this.elementsContainer.insertBefore(visibleElements[i], visibleElements[0]);
+      }
+    }
+
+    // Due to a rendering bug, reordering the rows can make parts of the scroll target disappear
+    // on Safari when using sticky positioning in case the scroll target is inside a flexbox.
+    // This issue manifests with grid (the header can disappear if grid is used inside a flexbox)
+    if (isSafari) {
+      const { transform } = this.scrollTarget.style;
+      this.scrollTarget.style.transform = 'translateZ(0)';
+      setTimeout(() => {
+        this.scrollTarget.style.transform = transform;
+      });
+    }
+  }
+
+  /** @private */
+  _adjustVirtualIndexOffset(delta) {
+    if (this._virtualCount >= this.size) {
+      this._vidxOffset = 0;
+    } else if (this.__skipNextVirtualIndexAdjust) {
+      this.__skipNextVirtualIndexAdjust = false;
+    } else if (Math.abs(delta) > 10000) {
+      // Process a large scroll position change
+      const scale = this._scrollTop / (this.scrollTarget.scrollHeight - this.scrollTarget.offsetHeight);
+      const offset = scale * this.size;
+      this._vidxOffset = Math.round(offset - scale * this._virtualCount);
+    } else {
+      // Make sure user can always swipe/wheel scroll to the start and end
+      const oldOffset = this._vidxOffset;
+      const threshold = OFFSET_ADJUST_MIN_THRESHOLD;
+      const maxShift = 100;
+
+      // Near start
+      if (this._scrollTop === 0) {
+        this._vidxOffset = 0;
+        if (oldOffset !== this._vidxOffset) {
+          super.scrollToIndex(0);
+        }
+      } else if (this.firstVisibleIndex < threshold && this._vidxOffset > 0) {
+        this._vidxOffset -= Math.min(this._vidxOffset, maxShift);
+        super.scrollToIndex(this.firstVisibleIndex + (oldOffset - this._vidxOffset));
+      }
+
+      // Near end
+      const maxOffset = this.size - this._virtualCount;
+      if (this._scrollTop >= this._maxScrollTop && this._maxScrollTop > 0) {
+        this._vidxOffset = maxOffset;
+        if (oldOffset !== this._vidxOffset) {
+          super.scrollToIndex(this._virtualCount - 1);
+        }
+      } else if (this.firstVisibleIndex > this._virtualCount - threshold && this._vidxOffset < maxOffset) {
+        this._vidxOffset += Math.min(maxOffset - this._vidxOffset, maxShift);
+        super.scrollToIndex(this.firstVisibleIndex - (this._vidxOffset - oldOffset));
+      }
+    }
+  }
+}
+
+Object.setPrototypeOf(IronListAdapter.prototype, ironList);
+
+class Virtualizer {
+  /**
+   * @typedef {Object} VirtualizerConfig
+   * @property {Function} createElements Function that returns the given number of new elements
+   * @property {Function} updateElement Function that updates the element at a specific index
+   * @property {HTMLElement} scrollTarget Reference to the scrolling element
+   * @property {HTMLElement} scrollContainer Reference to a wrapper for the item elements (or a slot) inside the scrollTarget
+   * @property {HTMLElement | undefined} elementsContainer Reference to the container in which the item elements are placed, defaults to scrollContainer
+   * @property {boolean | undefined} reorderElements Determines whether the physical item elements should be kept in order in the DOM
+   * @param {VirtualizerConfig} config Configuration for the virtualizer
+   */
+  constructor(config) {
+    this.__adapter = new IronListAdapter(config);
+  }
+
+  /**
+   * The size of the virtualizer
+   * @return {number | undefined} The size of the virtualizer
+   */
+  get size() {
+    return this.__adapter.size;
+  }
+
+  /**
+   * The size of the virtualizer
+   * @param {number} size The size of the virtualizer
+   */
+  set size(size) {
+    this.__adapter.size = size;
+  }
+
+  /**
+   * Scroll to a specific index in the virtual list
+   *
+   * @method scrollToIndex
+   * @param {number} index The index of the item
+   */
+  scrollToIndex(index) {
+    this.__adapter.scrollToIndex(index);
+  }
+
+  /**
+   * Requests the virtualizer to re-render the item elements on an index range, if currently in the DOM
+   *
+   * @method update
+   * @param {number | undefined} startIndex The start index of the range
+   * @param {number | undefined} endIndex The end index of the range
+   */
+  update(startIndex = 0, endIndex = this.size - 1) {
+    this.__adapter.update(startIndex, endIndex);
+  }
+
+  /**
+   * Flushes active asynchronous tasks so that the component and the DOM end up in a stable state
+   *
+   * @method update
+   * @param {number | undefined} startIndex The start index of the range
+   * @param {number | undefined} endIndex The end index of the range
+   */
+  flush() {
+    this.__adapter.flush();
+  }
+
+  /**
+   * Gets the index of the first visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get firstVisibleIndex() {
+    return this.__adapter.adjustedFirstVisibleIndex;
+  }
+
+  /**
+   * Gets the index of the last visible item in the viewport.
+   *
+   * @return {number}
+   */
+  get lastVisibleIndex() {
+    return this.__adapter.adjustedLastVisibleIndex;
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * 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 '';
+  }
+};
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Element for internal use only.
+ *
+ * @extends HTMLElement
+ * @private
+ */
+class ComboBoxScroller extends PolymerElement {
+  static get is() {
+    return 'vaadin-combo-box-scroller';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          min-height: 1px;
+          overflow: auto;
+
+          /* Fixes item background from getting on top of scrollbars on Safari */
+          transform: translate3d(0, 0, 0);
+
+          /* Enable momentum scrolling on iOS */
+          -webkit-overflow-scrolling: touch;
+
+          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
+          box-shadow: 0 0 0 white;
+        }
+
+        #selector {
+          border-width: var(--_vaadin-combo-box-items-container-border-width);
+          border-style: var(--_vaadin-combo-box-items-container-border-style);
+          border-color: var(--_vaadin-combo-box-items-container-border-color);
+          position: relative;
+        }
+      </style>
+      <div id="selector">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  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 combo-box, used by the item elements.
+       */
+      comboBox: {
+        type: Object,
+      },
+
+      /**
+       * Function used to set a label for every combo-box item.
+       */
+      getItemLabel: {
+        type: Object,
+      },
+
+      /**
+       * Function used to 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);
+  }
+
+  __openedChanged(opened) {
+    if (opened) {
+      this.requestContentUpdate();
+    }
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    // 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.setAttribute('role', 'listbox');
+
+    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,
+    });
+  }
+
+  requestContentUpdate() {
+    if (this.__virtualizer) {
+      this.__virtualizer.update();
+    }
+  }
+
+  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;
+    }
+  }
+
+  /** @private */
+  __getAriaRole(itemIndex) {
+    return itemIndex !== undefined ? 'option' : false;
+  }
+
+  /** @private */
+  __isItemFocused(focusedIndex, itemIndex) {
+    return !this.loading && focusedIndex === itemIndex;
+  }
+
+  /** @protected */
+  _isItemSelected(item, selectedItem, itemIdPath) {
+    if (item instanceof ComboBoxPlaceholder) {
+      return false;
+    } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
+      return this.get(itemIdPath, item) === this.get(itemIdPath, selectedItem);
+    }
+    return item === selectedItem;
+  }
+
+  /** @private */
+  __itemsChanged(items) {
+    if (this.__virtualizer && items) {
+      this.__virtualizer.size = items.length;
+      this.__virtualizer.flush();
+      this.requestContentUpdate();
+    }
+  }
+
+  /** @private */
+  __loadingChanged() {
+    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;
+    });
+  }
+
+  /** @private */
+  __updateElement(el, index) {
+    const item = this.items[index];
+    const focusedIndex = this.focusedIndex;
+    const selected = this._isItemSelected(item, this.selectedItem, this.itemIdPath);
+
+    el.setProperties({
+      item,
+      index,
+      label: this.getItemLabel(item),
+      selected,
+      renderer: this.renderer,
+      focused: this.__isItemFocused(focusedIndex, index),
+    });
+
+    el.id = `${this.__hostTagName}-item-${index}`;
+    el.setAttribute('role', this.__getAriaRole(index));
+    el.setAttribute('aria-selected', selected.toString());
+    el.setAttribute('aria-posinset', index + 1);
+    el.setAttribute('aria-setsize', this.items.length);
+
+    if (this.theme) {
+      el.setAttribute('theme', this.theme);
+    } else {
+      el.removeAttribute('theme');
+    }
+
+    if (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.
+   */
+  __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();
+      }
+    });
+  }
+
+  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;
+  }
+
+  /**
+   * Dispatches an `index-requested` event for the given index to notify
+   * the data provider that it should start loading the page containing the requested index.
+   *
+   * The event is dispatched asynchronously to prevent an immediate page request and therefore
+   * a possible infinite recursion in case the data provider implements page request cancelation logic
+   * by invoking data provider page callbacks with an empty array.
+   * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
+   * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
+   * the scroller will synchronously request the page again which may lead to looping in the end.
+   * That was the case for the Flow counterpart:
+   * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
+   */
+  __requestItemByIndex(index) {
+    requestAnimationFrame(() => {
+      this.dispatchEvent(
+        new CustomEvent('index-requested', {
+          detail: {
+            index,
+            currentScrollerPos: this._oldScrollerPosition,
+          },
+        }),
+      );
+    });
+  }
+
+  /** @private */
+  _visibleItemsCount() {
+    // Ensure items are positioned
+    this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);
+    const hasItems = this.__virtualizer.size > 0;
+    return hasItems ? this.__virtualizer.lastVisibleIndex - this.__virtualizer.firstVisibleIndex + 1 : 0;
+  }
+}
+
+customElements.define(ComboBoxScroller.is, ComboBoxScroller);
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @polymerMixin
+ */
+const ComboBoxDataProviderMixin = (superClass) =>
+  class DataProviderMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Number of items fetched at a time from the dataprovider.
+         * @attr {number} page-size
+         * @type {number}
+         */
+        pageSize: {
+          type: Number,
+          value: 50,
+          observer: '_pageSizeChanged',
+        },
+
+        /**
+         * Total number of items.
+         * @type {number | undefined}
+         */
+        size: {
+          type: Number,
+          observer: '_sizeChanged',
+        },
+
+        /**
+         * Function that provides items lazily. Receives arguments `params`, `callback`
+         *
+         * `params.page` Requested page index
+         *
+         * `params.pageSize` Current page size
+         *
+         * `params.filter` Currently applied filter
+         *
+         * `callback(items, size)` Callback function with arguments:
+         *   - `items` Current page of items
+         *   - `size` Total number of items.
+         * @type {ComboBoxDataProvider | undefined}
+         */
+        dataProvider: {
+          type: Object,
+          observer: '_dataProviderChanged',
+        },
+
+        /** @private */
+        _pendingRequests: {
+          value: () => {
+            return {};
+          },
+        },
+
+        /** @private */
+        __placeHolder: {
+          value: new ComboBoxPlaceholder(),
+        },
+
+        /** @private */
+        __previousDataProviderFilter: {
+          type: String,
+        },
+      };
+    }
+
+    static get observers() {
+      return [
+        '_dataProviderFilterChanged(filter)',
+        '_warnDataProviderValue(dataProvider, value)',
+        '_ensureFirstPage(opened)',
+      ];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+      this._scroller.addEventListener('index-requested', (e) => {
+        const index = e.detail.index;
+        const currentScrollerPos = e.detail.currentScrollerPos;
+        const allowedIndexRange = Math.floor(this.pageSize * 1.5);
+
+        // Ignores the indexes, which are being re-sent during scrolling reset,
+        // if the corresponding page is around the current scroller position.
+        // Otherwise, there might be a last pages duplicates, which cause the
+        // loading indicator hanging and blank items
+        if (this._shouldSkipIndex(index, allowedIndexRange, currentScrollerPos)) {
+          return;
+        }
+
+        if (index !== undefined) {
+          const page = this._getPageForIndex(index);
+          if (this._shouldLoadPage(page)) {
+            this._loadPage(page);
+          }
+        }
+      });
+    }
+
+    /** @private */
+    _dataProviderFilterChanged(filter) {
+      if (this.__previousDataProviderFilter === undefined && filter === '') {
+        this.__previousDataProviderFilter = filter;
+        return;
+      }
+
+      if (this.__previousDataProviderFilter !== filter) {
+        this.__previousDataProviderFilter = filter;
+
+        this._pendingRequests = {};
+        // Immediately mark as loading if this refresh leads to re-fetching pages
+        // This prevents some issues with the properties below triggering
+        // observers that also rely on the loading state
+        this.loading = this._shouldFetchData();
+        // Reset size and internal loading state
+        this.size = undefined;
+
+        this.clearCache();
+      }
+    }
+
+    /** @private */
+    _shouldFetchData() {
+      if (!this.dataProvider) {
+        return false;
+      }
+
+      return this.opened || (this.filter && this.filter.length);
+    }
+
+    /** @private */
+    _ensureFirstPage(opened) {
+      if (opened && this._shouldLoadPage(0)) {
+        this._loadPage(0);
+      }
+    }
+
+    /** @private */
+    _shouldSkipIndex(index, allowedIndexRange, currentScrollerPos) {
+      return (
+        currentScrollerPos !== 0 &&
+        index >= currentScrollerPos - allowedIndexRange &&
+        index <= currentScrollerPos + allowedIndexRange
+      );
+    }
+
+    /** @private */
+    _shouldLoadPage(page) {
+      if (!this.filteredItems || this._forceNextRequest) {
+        this._forceNextRequest = false;
+        return true;
+      }
+
+      const loadedItem = this.filteredItems[page * this.pageSize];
+      if (loadedItem !== undefined) {
+        return loadedItem instanceof ComboBoxPlaceholder;
+      }
+      return this.size === undefined;
+    }
+
+    /** @private */
+    _loadPage(page) {
+      // Make sure same page isn't requested multiple times.
+      if (this._pendingRequests[page] || !this.dataProvider) {
+        return;
+      }
+
+      const params = {
+        page,
+        pageSize: this.pageSize,
+        filter: this.filter,
+      };
+
+      const callback = (items, size) => {
+        if (this._pendingRequests[page] !== callback) {
+          return;
+        }
+
+        const filteredItems = this.filteredItems ? [...this.filteredItems] : [];
+        filteredItems.splice(params.page * params.pageSize, items.length, ...items);
+        this.filteredItems = filteredItems;
+
+        if (!this.opened && !this._isInputFocused()) {
+          this._commitValue();
+        }
+
+        if (size !== undefined) {
+          this.size = size;
+        }
+
+        delete this._pendingRequests[page];
+
+        if (Object.keys(this._pendingRequests).length === 0) {
+          this.loading = false;
+        }
+      };
+
+      this._pendingRequests[page] = callback;
+      // Set the `loading` flag only after marking the request as pending
+      // to prevent the same page from getting requested multiple times
+      // as a result of `__loadingChanged` in the scroller which requests
+      // a virtualizer update which in turn may trigger a data provider page request.
+      this.loading = true;
+      this.dataProvider(params, callback);
+    }
+
+    /** @private */
+    _getPageForIndex(index) {
+      return Math.floor(index / this.pageSize);
+    }
+
+    /**
+     * Clears the cached pages and reloads data from dataprovider when needed.
+     */
+    clearCache() {
+      if (!this.dataProvider) {
+        return;
+      }
+
+      this._pendingRequests = {};
+      const filteredItems = [];
+      for (let i = 0; i < (this.size || 0); i++) {
+        filteredItems.push(this.__placeHolder);
+      }
+      this.filteredItems = filteredItems;
+
+      if (this._shouldFetchData()) {
+        this._forceNextRequest = false;
+        this._loadPage(0);
+      } else {
+        this._forceNextRequest = true;
+      }
+    }
+
+    /** @private */
+    _sizeChanged(size = 0) {
+      const filteredItems = (this.filteredItems || []).slice(0, size);
+      for (let i = 0; i < size; i++) {
+        filteredItems[i] = filteredItems[i] !== undefined ? filteredItems[i] : this.__placeHolder;
+      }
+      this.filteredItems = filteredItems;
+
+      // Cleans up the redundant pending requests for pages > size
+      // Refers to https://github.com/vaadin/vaadin-flow-components/issues/229
+      this._flushPendingRequests(size);
+    }
+
+    /** @private */
+    _pageSizeChanged(pageSize, oldPageSize) {
+      if (Math.floor(pageSize) !== pageSize || pageSize < 1) {
+        this.pageSize = oldPageSize;
+        throw new Error('`pageSize` value must be an integer > 0');
+      }
+      this.clearCache();
+    }
+
+    /** @private */
+    _dataProviderChanged(dataProvider, oldDataProvider) {
+      this._ensureItemsOrDataProvider(() => {
+        this.dataProvider = oldDataProvider;
+      });
+
+      this.clearCache();
+    }
+
+    /** @private */
+    _ensureItemsOrDataProvider(restoreOldValueCallback) {
+      if (this.items !== undefined && this.dataProvider !== undefined) {
+        restoreOldValueCallback();
+        throw new Error('Using `items` and `dataProvider` together is not supported');
+      } else if (this.dataProvider && !this.filteredItems) {
+        this.filteredItems = [];
+      }
+    }
+
+    /** @private */
+    _warnDataProviderValue(dataProvider, value) {
+      if (dataProvider && value !== '' && (this.selectedItem === undefined || this.selectedItem === null)) {
+        const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
+        if (valueIndex < 0 || !this._getItemLabel(this.filteredItems[valueIndex])) {
+          console.warn(
+            'Warning: unable to determine the label for the provided `value`. ' +
+              'Nothing to display in the text field. This usually happens when ' +
+              'setting an initial `value` before any items are returned from ' +
+              'the `dataProvider` callback. Consider setting `selectedItem` ' +
+              'instead of `value`',
+          );
+        }
+      }
+    }
+
+    /**
+     * This method cleans up the page callbacks which refers to the
+     * non-existing pages, i.e. which item indexes are greater than the
+     * changed size.
+     * This case is basically happens when:
+     * 1. Users scroll fast to the bottom and combo box generates the
+     * redundant page request/callback
+     * 2. Server side uses undefined size lazy loading and suddenly reaches
+     * the exact size which is on the range edge
+     * (for default page size = 50, it will be 100, 200, 300, ...).
+     * @param size the new size of items
+     * @private
+     */
+    _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);
+          }
+        }
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Passes the component to the template renderer callback if the template renderer is imported.
+ * Otherwise, if there is a template, it warns that the template renderer needs to be imported.
+ *
+ * @param {HTMLElement} component
+ */
+function processTemplates(component) {
+  if (window.Vaadin && window.Vaadin.templateRendererCallback) {
+    window.Vaadin.templateRendererCallback(component);
+    return;
+  }
+
+  if (component.querySelector('template')) {
+    console.warn(
+      `WARNING: <template> inside <${component.localName}> is no longer supported. Import @vaadin/polymer-legacy-adapter/template-renderer.js to enable compatibility.`,
+    );
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Checks if the value is supported as an item value in this control.
+ *
+ * @param {unknown} value
+ * @return {boolean}
+ */
+function isValidValue(value) {
+  return value !== undefined && value !== null;
+}
+
+/**
+ * Returns the index of the first item that satisfies the provided testing function
+ * ignoring placeholder items.
+ *
+ * @param {Array<ComboBoxItem | string>} items
+ * @param {Function} callback
+ * @return {number}
+ */
+function findItemIndex(items, callback) {
+  return items.findIndex((item) => {
+    if (item instanceof ComboBoxPlaceholder) {
+      return false;
+    }
+
+    return callback(item);
+  });
+}
+
+/**
+ * @polymerMixin
+ * @param {function(new:HTMLElement)} subclass
+ */
+const ComboBoxMixin = (subclass) =>
+  class VaadinComboBoxMixinElement extends ControllerMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))) {
+    static get properties() {
+      return {
+        /**
+         * True if the dropdown is open, false otherwise.
+         * @type {boolean}
+         */
+        opened: {
+          type: Boolean,
+          notify: true,
+          value: false,
+          reflectToAttribute: true,
+          observer: '_openedChanged',
+        },
+
+        /**
+         * Set true to prevent the overlay from opening automatically.
+         * @attr {boolean} auto-open-disabled
+         */
+        autoOpenDisabled: {
+          type: Boolean,
+        },
+
+        /**
+         * When present, it specifies that the field is read-only.
+         * @type {boolean}
+         */
+        readonly: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Custom function for rendering the content of every item.
+         * Receives three arguments:
+         *
+         * - `root` The `<vaadin-combo-box-item>` internal container DOM element.
+         * - `comboBox` The reference to the `<vaadin-combo-box>` element.
+         * - `model` The object with the properties related with the rendered
+         *   item, contains:
+         *   - `model.index` The index of the rendered item.
+         *   - `model.item` The item.
+         * @type {ComboBoxRenderer | undefined}
+         */
+        renderer: Function,
+
+        /**
+         * A full set of items to filter the visible options from.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        items: {
+          type: Array,
+          observer: '_itemsChanged',
+        },
+
+        /**
+         * If `true`, the user can input a value that is not present in the items list.
+         * `value` property will be set to the input value in this case.
+         * Also, when `value` is set programmatically, the input value will be set
+         * to reflect that value.
+         * @attr {boolean} allow-custom-value
+         * @type {boolean}
+         */
+        allowCustomValue: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * A subset of items, filtered based on the user input. Filtered items
+         * can be assigned directly to omit the internal filtering functionality.
+         * The items can be of either `String` or `Object` type.
+         * @type {!Array<!ComboBoxItem | string> | undefined}
+         */
+        filteredItems: {
+          type: Array,
+          observer: '_filteredItemsChanged',
+        },
+
+        /**
+         * Used to detect user value changes and fire `change` events.
+         * @private
+         */
+        _lastCommittedValue: String,
+
+        /**
+         * When set to `true`, "loading" attribute is added to host and the overlay element.
+         * @type {boolean}
+         */
+        loading: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
+        /**
+         * @type {number}
+         * @protected
+         */
+        _focusedIndex: {
+          type: Number,
+          observer: '_focusedIndexChanged',
+          value: -1,
+        },
+
+        /**
+         * Filtering string the user has typed into the input field.
+         * @type {string}
+         */
+        filter: {
+          type: String,
+          value: '',
+          notify: true,
+        },
+
+        /**
+         * The selected item from the `items` array.
+         * @type {ComboBoxItem | string | undefined}
+         */
+        selectedItem: {
+          type: Object,
+          notify: true,
+        },
+
+        /**
+         * Path for label of the item. If `items` is an array of objects, the
+         * `itemLabelPath` is used to fetch the displayed string label for each
+         * item.
+         *
+         * The item label is also used for matching items when processing user
+         * input, i.e., for filtering and selecting items.
+         * @attr {string} item-label-path
+         * @type {string}
+         */
+        itemLabelPath: {
+          type: String,
+          value: 'label',
+          observer: '_itemLabelPathChanged',
+        },
+
+        /**
+         * Path for the value of the item. If `items` is an array of objects, the
+         * `itemValuePath:` is used to fetch the string value for the selected
+         * item.
+         *
+         * The item value is used in the `value` property of the combo box,
+         * to provide the form value.
+         * @attr {string} item-value-path
+         * @type {string}
+         */
+        itemValuePath: {
+          type: String,
+          value: 'value',
+        },
+
+        /**
+         * Path for the id of the item. If `items` is an array of objects,
+         * the `itemIdPath` is used to compare and identify the same item
+         * in `selectedItem` and `filteredItems` (items given by the
+         * `dataProvider` callback).
+         * @attr {string} item-id-path
+         */
+        itemIdPath: String,
+
+        /**
+         * @type {!HTMLElement | undefined}
+         * @protected
+         */
+        _toggleElement: {
+          type: Object,
+          observer: '_toggleElementChanged',
+        },
+
+        /** @private */
+        _closeOnBlurIsPrevented: Boolean,
+
+        /** @private */
+        _scroller: Object,
+
+        /** @private */
+        _overlayOpened: {
+          type: Boolean,
+          observer: '_overlayOpenedChanged',
+        },
+      };
+    }
+
+    static get observers() {
+      return [
+        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
+        '_openedOrItemsChanged(opened, filteredItems, loading)',
+        '_updateScroller(_scroller, filteredItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
+      ];
+    }
+
+    constructor() {
+      super();
+      this._boundOnFocusout = this._onFocusout.bind(this);
+      this._boundOverlaySelectedItemChanged = this._overlaySelectedItemChanged.bind(this);
+      this._boundOnClearButtonMouseDown = this.__onClearButtonMouseDown.bind(this);
+      this._boundOnClick = this._onClick.bind(this);
+      this._boundOnOverlayTouchAction = this._onOverlayTouchAction.bind(this);
+      this._boundOnTouchend = this._onTouchend.bind(this);
+    }
+
+    /**
+     * Tag name prefix used by scroller and items.
+     * @protected
+     * @return {string}
+     */
+    get _tagNamePrefix() {
+      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.
+     * @protected
+     * @return {HTMLInputElement | undefined}
+     */
+    get _nativeInput() {
+      return this.inputElement;
+    }
+
+    /**
+     * Override method inherited from `InputMixin`
+     * to customize the input element.
+     * @protected
+     * @override
+     */
+    _inputElementChanged(inputElement) {
+      super._inputElementChanged(inputElement);
+
+      const input = this._nativeInput;
+
+      if (input) {
+        input.autocomplete = 'off';
+        input.autocapitalize = 'off';
+
+        input.setAttribute('role', 'combobox');
+        input.setAttribute('aria-autocomplete', 'list');
+        input.setAttribute('aria-expanded', !!this.opened);
+
+        // Disable the macOS Safari spell check auto corrections.
+        input.setAttribute('spellcheck', 'false');
+
+        // Disable iOS autocorrect suggestions.
+        input.setAttribute('autocorrect', 'off');
+
+        this._revertInputValueToValue();
+
+        if (this.clearElement) {
+          this.clearElement.addEventListener('mousedown', this._boundOnClearButtonMouseDown);
+        }
+      }
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._initOverlay();
+      this._initScroller();
+
+      this.addEventListener('focusout', this._boundOnFocusout);
+
+      this._lastCommittedValue = this.value;
+
+      this.addEventListener('click', this._boundOnClick);
+      this.addEventListener('touchend', this._boundOnTouchend);
+
+      const bringToFrontListener = () => {
+        requestAnimationFrame(() => {
+          this.$.overlay.bringToFront();
+        });
+      };
+
+      this.addEventListener('mousedown', bringToFrontListener);
+      this.addEventListener('touchstart', bringToFrontListener);
+
+      processTemplates(this);
+
+      this.addController(new VirtualKeyboardController(this));
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      // Close the overlay on detach
+      this.close();
+    }
+
+    /**
+     * Requests an update for the content of items.
+     * While performing the update, it invokes the renderer (passed in the `renderer` property) once an item.
+     *
+     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
+     */
+    requestContentUpdate() {
+      if (!this._scroller) {
+        return;
+      }
+
+      this._scroller.requestContentUpdate();
+
+      this._getItemElements().forEach((item) => {
+        item.requestContentUpdate();
+      });
+    }
+
+    /**
+     * Opens the dropdown list.
+     */
+    open() {
+      // Prevent _open() being called when input is disabled or read-only
+      if (!this.disabled && !this.readonly) {
+        this.opened = true;
+      }
+    }
+
+    /**
+     * Closes the dropdown list.
+     */
+    close() {
+      this.opened = false;
+    }
+
+    /**
+     * Override Polymer lifecycle callback to handle `filter` property change after
+     * the observer for `opened` property is triggered. This is needed when opening
+     * combo-box on user input to ensure the focused index is set correctly.
+     *
+     * @param {!Object} currentProps Current accessor values
+     * @param {?Object} changedProps Properties changed since the last call
+     * @param {?Object} oldProps Previous values for each changed property
+     * @protected
+     * @override
+     */
+    _propertiesChanged(currentProps, changedProps, oldProps) {
+      super._propertiesChanged(currentProps, changedProps, oldProps);
+
+      if (changedProps.filter !== undefined) {
+        this._filterChanged(changedProps.filter);
+      }
+    }
+
+    /** @private */
+    _initOverlay() {
+      const overlay = this.$.overlay;
+
+      // Store instance for detecting "dir" attribute on opening
+      overlay._comboBox = this;
+
+      overlay.addEventListener('touchend', this._boundOnOverlayTouchAction);
+      overlay.addEventListener('touchmove', this._boundOnOverlayTouchAction);
+
+      // Prevent blurring the input when clicking inside the overlay
+      overlay.addEventListener('mousedown', (e) => e.preventDefault());
+
+      // Manual two-way binding for the overlay "opened" property
+      overlay.addEventListener('opened-changed', (e) => {
+        this._overlayOpened = e.detail.value;
+      });
+    }
+
+    /**
+     * Create and initialize the scroller element.
+     * Override to provide custom host reference.
+     *
+     * @protected
+     */
+    _initScroller(host) {
+      const scrollerTag = `${this._tagNamePrefix}-scroller`;
+
+      const overlay = this.$.overlay;
+
+      overlay.renderer = (root) => {
+        if (!root.firstChild) {
+          root.appendChild(document.createElement(scrollerTag));
+        }
+      };
+
+      // Ensure the scroller is rendered
+      overlay.requestContentUpdate();
+
+      const scroller = overlay.querySelector(scrollerTag);
+
+      scroller.comboBox = host || this;
+      scroller.getItemLabel = this._getItemLabel.bind(this);
+      scroller.addEventListener('selection-changed', this._boundOverlaySelectedItemChanged);
+
+      // Trigger the observer to set properties
+      this._scroller = scroller;
+    }
+
+    /** @private */
+    // eslint-disable-next-line max-params
+    _updateScroller(scroller, items, opened, loading, selectedItem, itemIdPath, focusedIndex, renderer, theme) {
+      if (scroller) {
+        if (opened) {
+          scroller.style.maxHeight =
+            getComputedStyle(this).getPropertyValue(`--${this._tagNamePrefix}-overlay-max-height`) || '65vh';
+        }
+
+        scroller.setProperties({
+          items: opened ? items : [],
+          opened,
+          loading,
+          selectedItem,
+          itemIdPath,
+          focusedIndex,
+          renderer,
+          theme,
+        });
+      }
+    }
+
+    /** @private */
+    _openedOrItemsChanged(opened, items, loading) {
+      // Close the overlay if there are no items to display.
+      // See https://github.com/vaadin/vaadin-combo-box/pull/964
+      this._overlayOpened = !!(opened && (loading || (items && items.length)));
+    }
+
+    /** @private */
+    _overlayOpenedChanged(opened, wasOpened) {
+      if (opened) {
+        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-opened', { bubbles: true, composed: true }));
+
+        this._onOpened();
+      } else if (wasOpened && this.filteredItems && this.filteredItems.length) {
+        this.close();
+
+        this.dispatchEvent(new CustomEvent('vaadin-combo-box-dropdown-closed', { bubbles: true, composed: true }));
+      }
+    }
+
+    /** @private */
+    _focusedIndexChanged(index, oldIndex) {
+      if (oldIndex === undefined) {
+        return;
+      }
+      this._updateActiveDescendant(index);
+    }
+
+    /** @protected */
+    _isInputFocused() {
+      return this.inputElement && isElementFocused(this.inputElement);
+    }
+
+    /** @private */
+    _updateActiveDescendant(index) {
+      const input = this._nativeInput;
+      if (!input) {
+        return;
+      }
+
+      const item = this._getItemElements().find((el) => el.index === index);
+      if (item) {
+        input.setAttribute('aria-activedescendant', item.id);
+      } else {
+        input.removeAttribute('aria-activedescendant');
+      }
+    }
+
+    /** @private */
+    _openedChanged(opened, wasOpened) {
+      // Prevent _close() being called when opened is set to its default value (false).
+      if (wasOpened === undefined) {
+        return;
+      }
+
+      if (opened) {
+        this._openedWithFocusRing = this.hasAttribute('focus-ring');
+        // For touch devices, we don't want to popup virtual keyboard
+        // unless input element is explicitly focused by the user.
+        if (!this._isInputFocused() && !isTouch) {
+          if (this.inputElement) {
+            this.inputElement.focus();
+          }
+        }
+
+        this.$.overlay.restoreFocusOnClose = true;
+      } else {
+        this._onClosed();
+        if (this._openedWithFocusRing && this._isInputFocused()) {
+          this.setAttribute('focus-ring', '');
+        }
+      }
+
+      const input = this._nativeInput;
+      if (input) {
+        input.setAttribute('aria-expanded', !!opened);
+
+        if (opened) {
+          input.setAttribute('aria-controls', this._scroller.id);
+        } else {
+          input.removeAttribute('aria-controls');
+        }
+      }
+    }
+
+    /** @private */
+    _onOverlayTouchAction() {
+      // On touch devices, blur the input on touch start inside the overlay, in order to hide
+      // the virtual keyboard. But don't close the overlay on this blur.
+      this._closeOnBlurIsPrevented = true;
+      this.inputElement.blur();
+      this._closeOnBlurIsPrevented = false;
+    }
+
+    /** @protected */
+    _isClearButton(event) {
+      return event.composedPath()[0] === this.clearElement;
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _handleClearButtonClick(event) {
+      event.preventDefault();
+      this._clear();
+
+      // De-select dropdown item
+      if (this.opened) {
+        this.requestContentUpdate();
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @private
+     */
+    _onToggleButtonClick(event) {
+      // Prevent parent components such as `vaadin-grid`
+      // from handling the click event after it bubbles.
+      event.preventDefault();
+
+      if (this.opened) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+
+    /**
+     * @param {Event} event
+     * @protected
+     */
+    _onHostClick(event) {
+      if (!this.autoOpenDisabled) {
+        event.preventDefault();
+        this.open();
+      }
+    }
+
+    /** @private */
+    _onClick(e) {
+      const path = e.composedPath();
+
+      if (this._isClearButton(e)) {
+        this._handleClearButtonClick(e);
+      } else if (path.indexOf(this._toggleElement) > -1) {
+        this._onToggleButtonClick(e);
+      } else {
+        this._onHostClick(e);
+      }
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     *
+     * @param {KeyboardEvent} e
+     * @protected
+     * @override
+     */
+    _onKeyDown(e) {
+      super._onKeyDown(e);
+
+      if (e.key === 'Tab') {
+        this.$.overlay.restoreFocusOnClose = false;
+      } else if (e.key === 'ArrowDown') {
+        this._onArrowDown();
+
+        // Prevent caret from moving
+        e.preventDefault();
+      } else if (e.key === 'ArrowUp') {
+        this._onArrowUp();
+
+        // Prevent caret from moving
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    _getItemLabel(item) {
+      let label = item && this.itemLabelPath ? this.get(this.itemLabelPath, item) : undefined;
+      if (label === undefined || label === null) {
+        label = item ? item.toString() : '';
+      }
+      return label;
+    }
+
+    /** @private */
+    _getItemValue(item) {
+      let value = item && this.itemValuePath ? this.get(this.itemValuePath, item) : undefined;
+      if (value === undefined) {
+        value = item ? item.toString() : '';
+      }
+      return value;
+    }
+
+    /** @private */
+    _onArrowDown() {
+      if (this.opened) {
+        const items = this.filteredItems;
+        if (items) {
+          this._focusedIndex = Math.min(items.length - 1, this._focusedIndex + 1);
+          this._prefillFocusedItemLabel();
+        }
+      } else {
+        this.open();
+      }
+    }
+
+    /** @private */
+    _onArrowUp() {
+      if (this.opened) {
+        if (this._focusedIndex > -1) {
+          this._focusedIndex = Math.max(0, this._focusedIndex - 1);
+        } else {
+          const items = this.filteredItems;
+          if (items) {
+            this._focusedIndex = items.length - 1;
+          }
+        }
+
+        this._prefillFocusedItemLabel();
+      } else {
+        this.open();
+      }
+    }
+
+    /** @private */
+    _prefillFocusedItemLabel() {
+      if (this._focusedIndex > -1) {
+        const focusedItem = this.filteredItems[this._focusedIndex];
+        this._inputElementValue = this._getItemLabel(focusedItem);
+        this._markAllSelectionRange();
+      }
+    }
+
+    /** @private */
+    _setSelectionRange(start, end) {
+      // Setting selection range focuses and/or moves the caret in some browsers,
+      // and there's no need to modify the selection range if the input isn't focused anyway.
+      // This affects Safari. When the overlay is open, and then hitting tab, browser should focus
+      // the next focusable element instead of the combo-box itself.
+      if (this._isInputFocused() && this.inputElement.setSelectionRange) {
+        this.inputElement.setSelectionRange(start, end);
+      }
+    }
+
+    /** @private */
+    _markAllSelectionRange() {
+      if (this._inputElementValue !== undefined) {
+        this._setSelectionRange(0, this._inputElementValue.length);
+      }
+    }
+
+    /** @private */
+    _clearSelectionRange() {
+      if (this._inputElementValue !== undefined) {
+        const pos = this._inputElementValue ? this._inputElementValue.length : 0;
+        this._setSelectionRange(pos, pos);
+      }
+    }
+
+    /** @private */
+    _closeOrCommit() {
+      if (!this.opened && !this.loading) {
+        this._commitValue();
+      } else {
+        this.close();
+      }
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     *
+     * @param {KeyboardEvent} e
+     * @protected
+     * @override
+     */
+    _onEnter(e) {
+      // Do not commit value when custom values are disallowed and input value is not a valid option
+      // also stop propagation of the event, otherwise the user could submit a form while the input
+      // still contains an invalid value
+      const hasInvalidOption =
+        this._focusedIndex < 0 &&
+        this._inputElementValue !== '' &&
+        this._getItemLabel(this.selectedItem) !== this._inputElementValue;
+      if (!this.allowCustomValue && hasInvalidOption) {
+        // Do not submit the surrounding form.
+        e.preventDefault();
+        // Do not trigger global listeners
+        e.stopPropagation();
+        return;
+      }
+
+      // Stop propagation of the enter event only if the dropdown is opened, this
+      // "consumes" the enter event for the action of closing the dropdown
+      if (this.opened) {
+        // Do not submit the surrounding form.
+        e.preventDefault();
+        // Do not trigger global listeners
+        e.stopPropagation();
+      }
+
+      this._closeOrCommit();
+    }
+
+    /**
+     * Override an event listener from `KeyboardMixin`.
+     * Do not call `super` in order to override clear
+     * button logic defined in `InputControlMixin`.
+     *
+     * @param {!KeyboardEvent} e
+     * @protected
+     * @override
+     */
+    _onEscape(e) {
+      if (this.autoOpenDisabled) {
+        // Auto-open is disabled
+        if (this.opened || (this.value !== this._inputElementValue && this._inputElementValue.length > 0)) {
+          // The overlay is open or
+          // The input value has changed but the change hasn't been committed, so cancel it.
+          e.stopPropagation();
+          this._focusedIndex = -1;
+          this.cancel();
+        } 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();
+        }
+      } else if (this.opened) {
+        // Auto-open is enabled
+        // The overlay is open
+        e.stopPropagation();
+
+        if (this._focusedIndex > -1) {
+          // An item is focused, revert the input to the filtered value
+          this._focusedIndex = -1;
+          this._revertInputValue();
+        } else {
+          // No item is focused, cancel the change and close the overlay
+          this.cancel();
+        }
+      } else if (this.clearButtonVisible && !!this.value) {
+        e.stopPropagation();
+        // The clear button is visible and the overlay is closed, so clear the value.
+        this._clear();
+      }
+    }
+
+    /** @private */
+    _toggleElementChanged(toggleElement) {
+      if (toggleElement) {
+        // Don't blur the input on toggle mousedown
+        toggleElement.addEventListener('mousedown', (e) => e.preventDefault());
+        // Unfocus previously focused element if focus is not inside combo box (on touch devices)
+        toggleElement.addEventListener('click', () => {
+          if (isTouch && !this._isInputFocused()) {
+            document.activeElement.blur();
+          }
+        });
+      }
+    }
+
+    /**
+     * Clears the current value.
+     * @protected
+     */
+    _clear() {
+      this.selectedItem = null;
+
+      if (this.allowCustomValue) {
+        this.value = '';
+      }
+
+      this._detectAndDispatchChange();
+    }
+
+    /**
+     * Reverts back to original value.
+     */
+    cancel() {
+      this._revertInputValueToValue();
+      // In the next _detectAndDispatchChange() call, the change detection should not pass
+      this._lastCommittedValue = this.value;
+      this._closeOrCommit();
+    }
+
+    /** @private */
+    _onOpened() {
+      // _detectAndDispatchChange() should not consider value changes done before opening
+      this._lastCommittedValue = this.value;
+    }
+
+    /** @private */
+    _onClosed() {
+      if (!this.loading || this.allowCustomValue) {
+        this._commitValue();
+      }
+    }
+
+    /** @private */
+    _commitValue() {
+      if (this._focusedIndex > -1) {
+        const focusedItem = this.filteredItems[this._focusedIndex];
+        if (this.selectedItem !== focusedItem) {
+          this.selectedItem = focusedItem;
+        }
+        // Make sure input field is updated in case value doesn't change (i.e. FOO -> foo)
+        this._inputElementValue = this._getItemLabel(this.selectedItem);
+        this._focusedIndex = -1;
+      } else if (this._inputElementValue === '' || this._inputElementValue === undefined) {
+        this.selectedItem = null;
+
+        if (this.allowCustomValue) {
+          this.value = '';
+        }
+      } else {
+        // Try to find an item which label matches the input value.
+        const items = [...(this.filteredItems || []), this.selectedItem];
+        const itemMatchingInputValue = items[this.__getItemIndexByLabel(items, this._inputElementValue)];
+
+        if (
+          this.allowCustomValue &&
+          // To prevent a repetitive input value being saved after pressing ESC and Tab.
+          !itemMatchingInputValue
+        ) {
+          const customValue = this._inputElementValue;
+
+          // Store reference to the last custom value for checking it on focusout.
+          this._lastCustomValue = customValue;
+
+          // An item matching by label was not found, but custom values are allowed.
+          // Dispatch a custom-value-set event with the input value.
+          const e = new CustomEvent('custom-value-set', {
+            detail: customValue,
+            composed: true,
+            cancelable: true,
+            bubbles: true,
+          });
+          this.dispatchEvent(e);
+          if (!e.defaultPrevented) {
+            this.value = customValue;
+          }
+        } else if (!this.allowCustomValue && !this.opened && itemMatchingInputValue) {
+          // An item matching by label was found, select it.
+          this.value = this._getItemValue(itemMatchingInputValue);
+        } else {
+          // Revert the input value
+          this._inputElementValue = this.selectedItem ? this._getItemLabel(this.selectedItem) : this.value || '';
+        }
+      }
+
+      this._detectAndDispatchChange();
+
+      this._clearSelectionRange();
+
+      this.filter = '';
+    }
+
+    /**
+     * @return {string}
+     * @protected
+     */
+    get _propertyForValue() {
+      return 'value';
+    }
+
+    /**
+     * Override an event listener from `InputMixin`.
+     * @param {!Event} event
+     * @protected
+     * @override
+     */
+    _onInput(event) {
+      const filter = this._inputElementValue;
+
+      // When opening dropdown on user input, both `opened` and `filter` properties are set.
+      // Perform a batched property update instead of relying on sync property observers.
+      // This is necessary to avoid an extra data-provider request for loading first page.
+      const props = {};
+
+      if (this.filter === filter) {
+        // Filter and input value might get out of sync, while keyboard navigating for example.
+        // Afterwards, input value might be changed to the same value as used in filtering.
+        // In situation like these, we need to make sure all the filter changes handlers are run.
+        this._filterChanged(this.filter);
+      } else {
+        props.filter = filter;
+      }
+
+      if (!this.opened && !this._isClearButton(event) && !this.autoOpenDisabled) {
+        props.opened = true;
+      }
+
+      this.setProperties(props);
+    }
+
+    /**
+     * Override an event listener from `InputMixin`.
+     * @param {!Event} event
+     * @protected
+     * @override
+     */
+    _onChange(event) {
+      // Suppress the native change event fired on the native input.
+      // We use `_detectAndDispatchChange` to fire a custom event.
+      event.stopPropagation();
+    }
+
+    /** @private */
+    _itemLabelPathChanged(itemLabelPath) {
+      if (typeof itemLabelPath !== 'string') {
+        console.error('You should set itemLabelPath to a valid string');
+      }
+    }
+
+    /** @private */
+    _filterChanged(filter) {
+      // Scroll to the top of the list whenever the filter changes.
+      this._scrollIntoView(0);
+
+      this._focusedIndex = -1;
+
+      if (this.items) {
+        this.filteredItems = this._filterItems(this.items, filter);
+      } else {
+        // With certain use cases (e. g., external filtering), `items` are
+        // undefined. Filtering is unnecessary per se, but the filteredItems
+        // observer should still be invoked to update focused item.
+        this._filteredItemsChanged(this.filteredItems);
+      }
+    }
+
+    /** @protected */
+    _revertInputValue() {
+      if (this.filter !== '') {
+        this._inputElementValue = this.filter;
+      } else {
+        this._revertInputValueToValue();
+      }
+      this._clearSelectionRange();
+    }
+
+    /** @private */
+    _revertInputValueToValue() {
+      if (this.allowCustomValue && !this.selectedItem) {
+        this._inputElementValue = this.value;
+      } else {
+        this._inputElementValue = this._getItemLabel(this.selectedItem);
+      }
+    }
+
+    /** @private */
+    _selectedItemChanged(selectedItem) {
+      if (selectedItem === null || selectedItem === undefined) {
+        if (this.filteredItems) {
+          if (!this.allowCustomValue) {
+            this.value = '';
+          }
+
+          this._toggleHasValue(this._hasValue);
+          this._inputElementValue = this.value;
+        }
+      } else {
+        const value = this._getItemValue(selectedItem);
+        if (this.value !== value) {
+          this.value = value;
+          if (this.value !== value) {
+            // The value was changed to something else in value-changed listener,
+            // so prevent from resetting it to the previous value.
+            return;
+          }
+        }
+
+        this._toggleHasValue(true);
+        this._inputElementValue = this._getItemLabel(selectedItem);
+      }
+    }
+
+    /**
+     * Override an observer from `InputMixin`.
+     * @protected
+     * @override
+     */
+    _valueChanged(value, oldVal) {
+      if (value === '' && oldVal === undefined) {
+        // Initializing, no need to do anything
+        // See https://github.com/vaadin/vaadin-combo-box/issues/554
+        return;
+      }
+
+      if (isValidValue(value)) {
+        if (this._getItemValue(this.selectedItem) !== value) {
+          this._selectItemForValue(value);
+        }
+
+        if (!this.selectedItem && this.allowCustomValue) {
+          this._inputElementValue = value;
+        }
+
+        this._toggleHasValue(this._hasValue);
+      } else {
+        this.selectedItem = null;
+      }
+
+      this.filter = '';
+
+      // In the next _detectAndDispatchChange() call, the change detection should pass
+      this._lastCommittedValue = undefined;
+    }
+
+    /** @private */
+    _detectAndDispatchChange() {
+      if (this.value !== this._lastCommittedValue) {
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+        this._lastCommittedValue = this.value;
+      }
+    }
+
+    /** @private */
+    _itemsChanged(items, oldItems) {
+      this._ensureItemsOrDataProvider(() => {
+        this.items = oldItems;
+      });
+
+      if (items) {
+        this.filteredItems = items.slice(0);
+      } else if (oldItems) {
+        // Only clear filteredItems if the component had items previously but got cleared
+        this.filteredItems = null;
+      }
+    }
+
+    /** @private */
+    _filteredItemsChanged(filteredItems, oldFilteredItems) {
+      // Store the currently focused item if any. The focused index preserves
+      // in the case when more filtered items are loading but it is reset
+      // when the user types in a filter query.
+      const focusedItem = oldFilteredItems ? oldFilteredItems[this._focusedIndex] : null;
+
+      // Try to sync `selectedItem` based on `value` once a new set of `filteredItems` is available
+      // (as a result of external filtering or when they have been loaded by the data provider).
+      // When `value` is specified but `selectedItem` is not, it means that there was no item
+      // matching `value` at the moment `value` was set, so `selectedItem` has remained unsynced.
+      const valueIndex = this.__getItemIndexByValue(filteredItems, this.value);
+      if ((this.selectedItem === null || this.selectedItem === undefined) && valueIndex >= 0) {
+        this.selectedItem = filteredItems[valueIndex];
+      }
+
+      // Try to first set focus on the item that had been focused before `filteredItems` were updated
+      // if it is still present in the `filteredItems` array. Otherwise, set the focused index
+      // depending on the selected item or the filter query.
+      const focusedItemIndex = this.__getItemIndexByValue(filteredItems, this._getItemValue(focusedItem));
+      if (focusedItemIndex > -1) {
+        this._focusedIndex = focusedItemIndex;
+      } else {
+        // When the user filled in something that is different from the current value = filtering is enabled,
+        // set the focused index to the item that matches the filter query.
+        this._focusedIndex = this.__getItemIndexByLabel(this.filteredItems, this.filter);
+      }
+    }
+
+    /** @private */
+    _filterItems(arr, filter) {
+      if (!arr) {
+        return arr;
+      }
+
+      const filteredItems = arr.filter((item) => {
+        filter = filter ? filter.toString().toLowerCase() : '';
+        // Check if item contains input value.
+        return this._getItemLabel(item).toString().toLowerCase().indexOf(filter) > -1;
+      });
+
+      return filteredItems;
+    }
+
+    /** @private */
+    _selectItemForValue(value) {
+      const valueIndex = this.__getItemIndexByValue(this.filteredItems, value);
+      const previouslySelectedItem = this.selectedItem;
+
+      if (valueIndex >= 0) {
+        this.selectedItem = this.filteredItems[valueIndex];
+      } else if (this.dataProvider && this.selectedItem === undefined) {
+        this.selectedItem = undefined;
+      } else {
+        this.selectedItem = null;
+      }
+
+      if (this.selectedItem === null && previouslySelectedItem === null) {
+        this._selectedItemChanged(this.selectedItem);
+      }
+    }
+
+    /** @private */
+    _getItemElements() {
+      return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));
+    }
+
+    /** @private */
+    _scrollIntoView(index) {
+      if (!this._scroller) {
+        return;
+      }
+      this._scroller.scrollIntoView(index);
+    }
+
+    /**
+     * Returns the first item that matches the provided value.
+     *
+     * @private
+     */
+    __getItemIndexByValue(items, value) {
+      if (!items || !isValidValue(value)) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemValue(item) === value;
+      });
+    }
+
+    /**
+     * Returns the first item that matches the provided label.
+     * Labels are matched against each other case insensitively.
+     *
+     * @private
+     */
+    __getItemIndexByLabel(items, label) {
+      if (!items || !label) {
+        return -1;
+      }
+
+      return findItemIndex(items, (item) => {
+        return this._getItemLabel(item).toString().toLowerCase() === label.toString().toLowerCase();
+      });
+    }
+
+    /** @private */
+    _overlaySelectedItemChanged(e) {
+      // Stop this private event from leaking outside.
+      e.stopPropagation();
+
+      if (e.detail.item instanceof ComboBoxPlaceholder) {
+        // Placeholder items should not be selectable.
+        return;
+      }
+
+      if (this.opened) {
+        this._focusedIndex = this.filteredItems.indexOf(e.detail.item);
+        this.close();
+      }
+    }
+
+    /** @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;
+      }
+
+      // 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) {
+        // User's logic in `custom-value-set` event listener might cause input to blur,
+        // which will result in attempting to commit the same custom value once again.
+        if (!this.opened && this.allowCustomValue && this._inputElementValue === this._lastCustomValue) {
+          delete this._lastCustomValue;
+          return;
+        }
+
+        this._closeOrCommit();
+      }
+    }
+
+    /** @private */
+    _onTouchend(event) {
+      if (!this.clearElement || event.composedPath()[0] !== this.clearElement) {
+        return;
+      }
+
+      event.preventDefault();
+      this._clear();
+    }
+
+    /**
+     * Fired when the value changes.
+     *
+     * @event value-changed
+     * @param {Object} detail
+     * @param {String} detail.value the combobox value
+     */
+
+    /**
+     * Fired when selected item changes.
+     *
+     * @event selected-item-changed
+     * @param {Object} detail
+     * @param {Object|String} detail.value the selected item. Type is the same as the type of `items`.
+     */
+
+    /**
+     * Fired when the user sets a custom value.
+     * @event custom-value-set
+     * @param {String} detail the custom value
+     */
+
+    /**
+     * Fired when value changes.
+     * To comply with https://developer.mozilla.org/en-US/docs/Web/Events/change
+     * @event change
+     */
+
+    /**
+     * Fired after the `vaadin-combo-box-overlay` opens.
+     *
+     * @event vaadin-combo-box-dropdown-opened
+     */
+
+    /**
+     * Fired after the `vaadin-combo-box-overlay` closes.
+     *
+     * @event vaadin-combo-box-dropdown-closed
+     */
+  };
+
+/**
+ * @license
+ * Copyright (c) 2015 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+registerStyles('vaadin-combo-box', inputFieldShared$1, { moduleId: 'vaadin-combo-box-styles' });
+
+/**
+ * `<vaadin-combo-box>` is a web component for choosing a value from a filterable list of options
+ * presented in a dropdown overlay. The options can be provided as a list of strings or objects
+ * by setting [`items`](#/elements/vaadin-combo-box#property-items) property on the element.
+ *
+ * ```html
+ * <vaadin-combo-box id="combo-box"></vaadin-combo-box>
+ * ```
+ *
+ * ```js
+ * document.querySelector('#combo-box').items = ['apple', 'orange', 'banana'];
+ * ```
+ *
+ * When the selected `value` is changed, a `value-changed` event is triggered.
+ *
+ * ### Item rendering
+ *
+ * To customize the content of the `<vaadin-combo-box-item>` elements placed in the dropdown, use
+ * [`renderer`](#/elements/vaadin-combo-box#property-renderer) property which accepts a function.
+ * The renderer function is called with `root`, `comboBox`, and `model` as arguments.
+ *
+ * Generate DOM content by using `model` object properties if needed, and append it to the `root`
+ * element. The `comboBox` reference is provided to access the combo-box element state. Do not
+ * set combo-box properties in a `renderer` function.
+ *
+ * ```js
+ * const comboBox = document.querySelector('#combo-box');
+ * comboBox.items = [{'label': 'Hydrogen', 'value': 'H'}];
+ * comboBox.renderer = (root, comboBox, model) => {
+ *   const item = model.item;
+ *   root.innerHTML = `${model.index}: ${item.label} <b>${item.value}</b>`;
+ * };
+ * ```
+ *
+ * Renderer is called on the opening of the combo-box and each time the related model is updated.
+ * Before creating new content, it is recommended to check if there is already an existing DOM
+ * element in `root` from a previous renderer call for reusing it. Even though combo-box uses
+ * infinite scrolling, reducing DOM operations might improve performance.
+ *
+ * The following properties are available in the `model` argument:
+ *
+ * Property   | Type             | Description
+ * -----------|------------------|-------------
+ * `index`    | Number           | Index of the item in the `items` array
+ * `item`     | String or Object | The item reference
+ * `selected` | Boolean          | True when item is selected
+ * `focused`  | Boolean          | True when item is focused
+ *
+ * ### Lazy Loading with Function Data Provider
+ *
+ * In addition to assigning an array to the items property, you can alternatively use the
+ * [`dataProvider`](#/elements/vaadin-combo-box#property-dataProvider) function property.
+ * The `<vaadin-combo-box>` calls this function lazily, only when it needs more data
+ * to be displayed.
+ *
+ * __Note that when using function data providers, the total number of items
+ * needs to be set manually. The total number of items can be returned
+ * in the second argument of the data provider callback:__
+ *
+ * ```js
+ * comboBox.dataProvider = async (params, callback) => {
+ *   const API = 'https://demo.vaadin.com/demo-data/1.0/filtered-countries';
+ *   const { filter, page, pageSize } = params;
+ *   const index = page * pageSize;
+ *
+ *   const res = await fetch(`${API}?index=${index}&count=${pageSize}&filter=${filter}`);
+ *   if (res.ok) {
+ *     const { result, size } = await res.json();
+ *     callback(result, size);
+ *   }
+ * };
+ * ```
+ *
+ * ### Styling
+ *
+ * The following custom properties are available for styling:
+ *
+ * Custom property                         | Description                | Default
+ * ----------------------------------------|----------------------------|---------
+ * `--vaadin-field-default-width`          | Default width of the field | `12em`
+ * `--vaadin-combo-box-overlay-width`      | Width of the overlay       | `auto`
+ * `--vaadin-combo-box-overlay-max-height` | Max height of the overlay  | `65vh`
+ *
+ * `<vaadin-combo-box>` provides the same set of shadow DOM parts and state attributes as `<vaadin-text-field>`.
+ * See [`<vaadin-text-field>`](#/elements/vaadin-text-field) for the styling documentation.
+ *
+ * In addition to `<vaadin-text-field>` parts, the following parts are available for theming:
+ *
+ * Part name       | Description
+ * ----------------|----------------
+ * `toggle-button` | The toggle button
+ *
+ * In addition to `<vaadin-text-field>` state attributes, the following state attributes are available for theming:
+ *
+ * Attribute | Description | Part name
+ * ----------|-------------|------------
+ * `opened`  | Set when the combo box dropdown is open | :host
+ * `loading` | Set when new items are expected | :host
+ *
+ * If you want to replace the default `<input>` and its container with a custom implementation to get full control
+ * over the input field, consider using the [`<vaadin-combo-box-light>`](#/elements/vaadin-combo-box-light) element.
+ *
+ * ### Internal components
+ *
+ * In addition to `<vaadin-combo-box>` itself, the following internal
+ * components are themable:
+ *
+ * - `<vaadin-combo-box-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
+ * - `<vaadin-combo-box-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - [`<vaadin-input-container>`](#/elements/vaadin-input-container) - an internal element wrapping the input.
+ *
+ * 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.
+ *
+ * @fires {Event} change - Fired when the user commits a value change.
+ * @fires {CustomEvent} custom-value-set - Fired when the user sets a custom value.
+ * @fires {CustomEvent} filter-changed - Fired when the `filter` property changes.
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} selected-item-changed - Fired when the `selectedItem` property changes.
+ * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
+ *
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes ThemableMixin
+ * @mixes InputControlMixin
+ * @mixes PatternMixin
+ * @mixes ComboBoxDataProviderMixin
+ * @mixes ComboBoxMixin
+ */
+class ComboBox extends ComboBoxDataProviderMixin(
+  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement))))),
+) {
+  static get is() {
+    return 'vaadin-combo-box';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host([opened]) {
+          pointer-events: auto;
+        }
+      </style>
+
+      <div class="vaadin-combo-box-container">
+        <div part="label">
+          <slot name="label"></slot>
+          <span part="required-indicator" aria-hidden="true" on-click="focus"></span>
+        </div>
+
+        <vaadin-input-container
+          part="input-field"
+          readonly="[[readonly]]"
+          disabled="[[disabled]]"
+          invalid="[[invalid]]"
+          theme$="[[_theme]]"
+        >
+          <slot name="prefix" slot="prefix"></slot>
+          <slot name="input"></slot>
+          <div id="clearButton" part="clear-button" slot="suffix" aria-hidden="true"></div>
+          <div id="toggleButton" part="toggle-button" slot="suffix" aria-hidden="true"></div>
+        </vaadin-input-container>
+
+        <div part="helper-text">
+          <slot name="helper"></slot>
+        </div>
+
+        <div part="error-message">
+          <slot name="error-message"></slot>
+        </div>
+      </div>
+
+      <vaadin-combo-box-overlay
+        id="overlay"
+        opened="[[_overlayOpened]]"
+        loading$="[[loading]]"
+        theme$="[[_theme]]"
+        position-target="[[_positionTarget]]"
+        no-vertical-overlap
+        restore-focus-node="[[inputElement]]"
+      ></vaadin-combo-box-overlay>
+
+      <slot name="tooltip"></slot>
+    `;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * @protected
+       */
+      _positionTarget: {
+        type: Object,
+      },
+    };
+  }
+
+  /**
+   * Used by `InputControlMixin` as a reference to the clear button element.
+   * @protected
+   * @return {!HTMLElement}
+   */
+  get clearElement() {
+    return this.$.clearButton;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.addController(
+      new InputController(this, (input) => {
+        this._setInputElement(input);
+        this._setFocusElement(input);
+        this.stateTarget = input;
+        this.ariaTarget = input;
+      }),
+    );
+    this.addController(new LabelledInputController(this.inputElement, this._labelController));
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+    this._tooltipController.setPosition('top');
+    this._tooltipController.setShouldShow((target) => !target.opened);
+
+    this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
+    this._toggleElement = this.$.toggleButton;
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to validate on blur.
+   * @param {boolean} focused
+   * @protected
+   * @override
+   */
+  _setFocused(focused) {
+    super._setFocused(focused);
+
+    if (!focused) {
+      this.validate();
+    }
+  }
+
+  /**
+   * Override method inherited from `FocusMixin` to not remove focused
+   * state when focus moves to the overlay.
+   * @param {FocusEvent} event
+   * @return {boolean}
+   * @protected
+   * @override
+   */
+  _shouldRemoveFocus(event) {
+    // Do not blur when focus moves to the overlay
+    if (event.relatedTarget === this.$.overlay) {
+      event.composedPath()[0].focus();
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Override method inherited from `InputControlMixin` to handle clear
+   * button click and stop event from propagating to the host element.
+   * @param {Event} event
+   * @protected
+   * @override
+   */
+  _onClearButtonClick(event) {
+    event.stopPropagation();
+
+    this._handleClearButtonClick(event);
+  }
+
+  /**
+   * @param {Event} event
+   * @protected
+   */
+  _onHostClick(event) {
+    const path = event.composedPath();
+
+    // Open dropdown only when clicking on the label or input field
+    if (path.includes(this._labelNode) || path.includes(this._positionTarget)) {
+      super._onHostClick(event);
+    }
+  }
+}
+
+customElements.define(ComboBox.is, ComboBox);