@everymatrix/general-input 1.31.1 → 1.32.4

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

@@ -1,4512 +0,0 @@
-import { i, r as registerStyles, f as defineCustomElement, h as html, g as ThemableMixin, n as DirMixin, P as PolymerElement, m as microTask, R as idlePeriod, U as animationFrame, W as flush, o as Debouncer, X as enqueueDebouncer, t as timeOut, p as generateUniqueId, H as ControllerMixin, V as ValidateMixin, l as FocusMixin, K as KeyboardMixin, I as InputMixin, a as DisabledMixin, N as isElementFocused, c as InputController, e as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
-import { c as overlay, d as menuOverlayCore, P as PositionMixin, O as OverlayMixin, o as overlayStyles, b as OverlayClassMixin, V as VirtualKeyboardController } from './virtual-keyboard-controller.js';
-import { i as inputFieldShared, e as isSafari, I as InputConstraintsMixin, f as isTouch, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-
-const item = i`
-  :host {
-    display: flex;
-    align-items: center;
-    box-sizing: border-box;
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size-m);
-    line-height: var(--lumo-line-height-xs);
-    padding: 0.5em calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4) 0.5em
-      var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
-    min-height: var(--lumo-size-m);
-    outline: none;
-    border-radius: var(--lumo-border-radius-m);
-    cursor: var(--lumo-clickable-cursor);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-tap-highlight-color: var(--lumo-primary-color-10pct);
-  }
-
-  /* Checkmark */
-  [part='checkmark']::before {
-    display: var(--_lumo-item-selected-icon-display, none);
-    content: var(--lumo-icons-checkmark);
-    font-family: lumo-icons;
-    font-size: var(--lumo-icon-size-m);
-    line-height: 1;
-    font-weight: normal;
-    width: 1em;
-    height: 1em;
-    margin: calc((1 - var(--lumo-line-height-xs)) * var(--lumo-font-size-m) / 2) 0;
-    color: var(--lumo-primary-text-color);
-    flex: none;
-    opacity: 0;
-    transition: transform 0.2s cubic-bezier(0.12, 0.32, 0.54, 2), opacity 0.1s;
-  }
-
-  :host([selected]) [part='checkmark']::before {
-    opacity: 1;
-  }
-
-  :host([active]:not([selected])) [part='checkmark']::before {
-    transform: scale(0.8);
-    opacity: 0;
-    transition-duration: 0s;
-  }
-
-  [part='content'] {
-    flex: auto;
-  }
-
-  /* Disabled */
-  :host([disabled]) {
-    color: var(--lumo-disabled-text-color);
-    cursor: default;
-    pointer-events: none;
-  }
-
-  /* TODO a workaround until we have "focus-follows-mouse". After that, use the hover style for focus-ring as well */
-  @media (any-hover: hover) {
-    :host(:hover:not([disabled])) {
-      background-color: var(--lumo-primary-color-10pct);
-    }
-
-    :host([focus-ring]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-    }
-  }
-
-  /* RTL specific styles */
-  :host([dir='rtl']) {
-    padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius-m) / 4);
-    padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius-m) / 4));
-  }
-
-  /* Slotted icons */
-  :host ::slotted(vaadin-icon) {
-    width: var(--lumo-icon-size-m);
-    height: var(--lumo-icon-size-m);
-  }
-`;
-
-registerStyles('vaadin-item', item, { moduleId: 'lumo-item' });
-
-const comboBoxItem = i`
-  :host {
-    transition: background-color 100ms;
-    overflow: hidden;
-    --_lumo-item-selected-icon-display: block;
-  }
-
-  @media (any-hover: hover) {
-    :host([focused]:not([disabled])) {
-      box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
-    }
-  }
-`;
-
-registerStyles('vaadin-combo-box-item', [item, comboBoxItem], {
-  moduleId: 'lumo-combo-box-item',
-});
-
-/**
- * @license
- * Copyright (c) 2022 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const loader = i`
-  [part~='loader'] {
-    box-sizing: border-box;
-    width: var(--lumo-icon-size-s);
-    height: var(--lumo-icon-size-s);
-    border: 2px solid transparent;
-    border-color: var(--lumo-primary-color-10pct) var(--lumo-primary-color-10pct) var(--lumo-primary-color)
-      var(--lumo-primary-color);
-    border-radius: calc(0.5 * var(--lumo-icon-size-s));
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  :host(:not([loading])) [part~='loader'] {
-    display: none;
-  }
-
-  :host([loading]) [part~='loader'] {
-    animation: 1s linear infinite lumo-loader-rotate, 0.3s 0.1s lumo-loader-fade-in both;
-  }
-
-  @keyframes lumo-loader-fade-in {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @keyframes lumo-loader-rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-const comboBoxOverlay = i`
-  [part='content'] {
-    padding: 0;
-  }
-
-  /* When items are empty, the spinner needs some room */
-  :host(:not([closing])) [part~='content'] {
-    min-height: calc(2 * var(--lumo-space-s) + var(--lumo-icon-size-s));
-  }
-
-  [part~='overlay'] {
-    position: relative;
-  }
-
-  :host([top-aligned]) [part~='overlay'] {
-    margin-top: var(--lumo-space-xs);
-  }
-
-  :host([bottom-aligned]) [part~='overlay'] {
-    margin-bottom: var(--lumo-space-xs);
-  }
-`;
-
-const comboBoxLoader = i`
-  [part~='loader'] {
-    position: absolute;
-    z-index: 1;
-    left: var(--lumo-space-s);
-    right: var(--lumo-space-s);
-    top: var(--lumo-space-s);
-    margin-left: auto;
-    margin-inline-start: auto;
-    margin-inline-end: 0;
-  }
-
-  :host([dir='rtl']) [part~='loader'] {
-    left: auto;
-    margin-left: 0;
-    margin-right: auto;
-    margin-inline-start: 0;
-    margin-inline-end: auto;
-  }
-`;
-
-registerStyles(
-  'vaadin-combo-box-overlay',
-  [
-    overlay,
-    menuOverlayCore,
-    comboBoxOverlay,
-    loader,
-    comboBoxLoader,
-    i`
-      :host {
-        --_vaadin-combo-box-items-container-border-width: var(--lumo-space-xs);
-        --_vaadin-combo-box-items-container-border-style: solid;
-      }
-    `,
-  ],
-  { moduleId: 'lumo-combo-box-overlay' },
-);
-
-const comboBox = i`
-  :host {
-    outline: none;
-  }
-
-  [part='toggle-button']::before {
-    content: var(--lumo-icons-dropdown);
-  }
-`;
-
-registerStyles('vaadin-combo-box', [inputFieldShared, comboBox], { moduleId: 'lumo-combo-box' });
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-const ComboBoxItemMixin = (superClass) =>
-  class ComboBoxItemMixinClass extends superClass {
-    static get properties() {
-      return {
-        /**
-         * The index of the item.
-         */
-        index: {
-          type: Number,
-        },
-
-        /**
-         * The item to render.
-         */
-        item: {
-          type: Object,
-        },
-
-        /**
-         * The text to render in the item.
-         */
-        label: {
-          type: String,
-        },
-
-        /**
-         * True when item is selected.
-         */
-        selected: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * True when item is focused.
-         */
-        focused: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-
-        /**
-         * Custom function for rendering the item content.
-         */
-        renderer: {
-          type: Function,
-        },
-      };
-    }
-
-    static get observers() {
-      return ['__rendererOrItemChanged(renderer, index, item.*, selected, focused)', '__updateLabel(label, renderer)'];
-    }
-
-    static get observedAttributes() {
-      return [...super.observedAttributes, 'hidden'];
-    }
-
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (name === 'hidden' && newValue !== null) {
-        // The element is being hidden (by virtualizer). Mark one of the __rendererOrItemChanged
-        // dependencies as undefined to make sure it's called when the element is shown again
-        // and assigned properties with possibly identical values as before hiding.
-        this.index = undefined;
-      } else {
-        super.attributeChangedCallback(name, oldValue, newValue);
-      }
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      this._owner = this.parentNode.owner;
-
-      const hostDir = this._owner.getAttribute('dir');
-      if (hostDir) {
-        this.setAttribute('dir', hostDir);
-      }
-    }
-
-    /**
-     * Requests an update for the content of the item.
-     * While performing the update, it invokes the renderer passed in the `renderer` property.
-     *
-     * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
-     */
-    requestContentUpdate() {
-      if (!this.renderer) {
-        return;
-      }
-
-      const model = {
-        index: this.index,
-        item: this.item,
-        focused: this.focused,
-        selected: this.selected,
-      };
-
-      this.renderer(this, this._owner, model);
-    }
-
-    /** @private */
-    __rendererOrItemChanged(renderer, index, item) {
-      if (item === undefined || index === undefined) {
-        return;
-      }
-
-      if (this._oldRenderer !== renderer) {
-        this.innerHTML = '';
-        // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-        // When clearing the rendered content, this part needs to be manually disposed of.
-        // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-        delete this._$litPart$;
-      }
-
-      if (renderer) {
-        this._oldRenderer = renderer;
-        this.requestContentUpdate();
-      }
-    }
-
-    /** @private */
-    __updateLabel(label, renderer) {
-      if (renderer) {
-        return;
-      }
-
-      this.textContent = label;
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * An item element used by the `<vaadin-combo-box>` dropdown.
- *
- * ### Styling
- *
- * The following shadow DOM parts are available for styling:
- *
- * Part name   | Description
- * ------------|--------------
- * `checkmark` | The graphical checkmark shown for a selected item
- * `content`   | The element that wraps the item content
- *
- * The following state attributes are exposed for styling:
- *
- * Attribute    | Description
- * -------------|-------------
- * `selected`   | Set when the item is selected
- * `focused`    | Set when the item is focused
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
- *
- * @customElement
- * @mixes ComboBoxItemMixin
- * @mixes ThemableMixin
- * @mixes DirMixin
- * @private
- */
-class ComboBoxItem extends ComboBoxItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-        }
-
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      <span part="checkmark" aria-hidden="true"></span>
-      <div part="content">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-combo-box-item';
-  }
-}
-
-defineCustomElement(ComboBoxItem);
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- * @mixes PositionMixin
- */
-const ComboBoxOverlayMixin = (superClass) =>
-  class ComboBoxOverlayMixin extends PositionMixin(superClass) {
-    static get observers() {
-      return ['_setOverlayWidth(positionTarget, opened)'];
-    }
-
-    constructor() {
-      super();
-
-      this.requiredVerticalSpace = 200;
-    }
-
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
-
-      const comboBox = this._comboBox;
-
-      const hostDir = comboBox && comboBox.getAttribute('dir');
-      if (hostDir) {
-        this.setAttribute('dir', hostDir);
-      }
-    }
-
-    /**
-     * Override method inherited from `Overlay`
-     * to not close on position target click.
-     *
-     * @param {Event} event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldCloseOnOutsideClick(event) {
-      const eventPath = event.composedPath();
-      return !eventPath.includes(this.positionTarget) && !eventPath.includes(this);
-    }
-
-    /** @private */
-    _setOverlayWidth(positionTarget, opened) {
-      if (positionTarget && opened) {
-        const propPrefix = this.localName;
-        this.style.setProperty(`--_${propPrefix}-default-width`, `${positionTarget.clientWidth}px`);
-
-        const customWidth = getComputedStyle(this._comboBox).getPropertyValue(`--${propPrefix}-width`);
-
-        if (customWidth === '') {
-          this.style.removeProperty(`--${propPrefix}-width`);
-        } else {
-          this.style.setProperty(`--${propPrefix}-width`, customWidth);
-        }
-
-        this._updatePosition();
-      }
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const comboBoxOverlayStyles = i`
-  #overlay {
-    width: var(--vaadin-combo-box-overlay-width, var(--_vaadin-combo-box-overlay-default-width, auto));
-  }
-
-  [part='content'] {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-`;
-
-registerStyles('vaadin-combo-box-overlay', [overlayStyles, comboBoxOverlayStyles], {
-  moduleId: 'vaadin-combo-box-overlay-styles',
-});
-
-/**
- * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ComboBoxOverlayMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
- * @private
- */
-class ComboBoxOverlay extends ComboBoxOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolymerElement)))) {
-  static get is() {
-    return 'vaadin-combo-box-overlay';
-  }
-
-  static get template() {
-    return html`
-      <div id="backdrop" part="backdrop" hidden></div>
-      <div part="overlay" id="overlay">
-        <div part="loader"></div>
-        <div part="content" id="content"><slot></slot></div>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(ComboBoxOverlay);
-
-/**
- * @license
- * Copyright (c) 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * Convenience method for reading a value from a path.
- *
- * @param {string} path
- * @param {object} object
- */
-function get(path, object) {
-  return path.split('.').reduce((obj, property) => (obj ? obj[property] : undefined), object);
-}
-
-/**
- * @license
- * Copyright (c) 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+)/u);
-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;
-      if (!this._physicalItems) {
-        this._physicalItems = [];
-      }
-      if (!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) {
-    const estScrollHeight =
-      this._physicalBottom +
-      Math.max(this._virtualCount - this._physicalCount - this._virtualStart, 0) * this._physicalAverage;
-
-    this._estScrollHeight = estScrollHeight;
-
-    // Amortize height adjustment, so it won't trigger large repaints too often.
-    if (
-      forceUpdate ||
-      this._scrollHeight === 0 ||
-      this._scrollPosition >= estScrollHeight - this._physicalSize ||
-      Math.abs(estScrollHeight - this._scrollHeight) >= this._viewportHeight
-    ) {
-      this.$.items.style.height = `${estScrollHeight}px`;
-      this._scrollHeight = estScrollHeight;
-    }
-  },
-
-  /**
-   * 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) {
-    if (!this._debouncers) {
-      this._debouncers = {};
-    }
-    this._debouncers[name] = Debouncer.debounce(this._debouncers[name], asyncModule, cb.bind(this));
-    enqueueDebouncer(this._debouncers[name]);
-  },
-};
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 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) {
-    const updatedElements = [];
-    this.__getVisibleElements().forEach((el) => {
-      if (el.__virtualIndex >= startIndex && el.__virtualIndex <= endIndex) {
-        this.__updateElement(el, el.__virtualIndex, true);
-        updatedElements.push(el);
-      }
-    });
-
-    this.__afterElementsUpdated(updatedElements);
-  }
-
-  /**
-   * 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;
-    }
-  }
-
-  /**
-   * Called synchronously right after elements have been updated.
-   * This is a good place to do any post-update work.
-   *
-   * @param {!Array<!HTMLElement>} updatedElements
-   */
-  __afterElementsUpdated(updatedElements) {
-    updatedElements.forEach((el) => {
-      const elementHeight = el.offsetHeight;
-      if (elementHeight === 0) {
-        // If the elements have 0 height after update (for example due to lazy rendering),
-        // it results in iron-list requesting to create an unlimited count of elements.
-        // Assign a temporary placeholder sizing to elements that would otherwise end up having
-        // no height.
-        el.style.paddingTop = `${this.__placeholderHeight}px`;
-
-        // Manually schedule the resize handler to make sure the placeholder padding is
-        // cleared in case the resize observer never triggers.
-        this.__placeholderClearDebouncer = Debouncer.debounce(this.__placeholderClearDebouncer, animationFrame, () =>
-          this._resizeHandler(),
-        );
-      } else {
-        // Add element height to the queue
-        this.__elementHeightQueue.push(elementHeight);
-        this.__elementHeightQueue.shift();
-
-        // Calculate new placeholder height based on the average of the defined values in the
-        // element height queue
-        const filteredHeights = this.__elementHeightQueue.filter((h) => h !== undefined);
-        this.__placeholderHeight = Math.round(filteredHeights.reduce((a, b) => a + b, 0) / filteredHeights.length);
-      }
-    });
-  }
-
-  __getIndexScrollOffset(index) {
-    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();
-    }
-
-    // Change the size
-    this.__size = size;
-
-    if (!this._physicalItems) {
-      // Not initialized yet
-      this._itemsChanged({
-        path: 'items',
-      });
-      this.__preventElementUpdates = true;
-      flush();
-      this.__preventElementUpdates = false;
-    } else {
-      // Already initialized, just update _virtualCount
-      this._updateScrollerSize();
-      this._virtualCount = this.items.length;
-      this._render();
-    }
-
-    // When reducing size while invisible, iron-list does not update items, so
-    // their hidden state is not updated and their __lastUpdatedIndex is not
-    // reset. In that case force an update here.
-    if (!this._isVisible) {
-      this._assignModels();
-    }
-
-    if (!this.elementsContainer.children.length) {
-      requestAnimationFrame(() => this._resizeHandler());
-    }
-
-    // Schedule and flush a resize handler. This will cause a
-    // re-render for the elements.
-    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) {
-    const updatedElements = [];
-    this._iterateItems((pidx, vidx) => {
-      const el = this._physicalItems[pidx];
-      el.hidden = vidx >= this.size;
-      if (!el.hidden) {
-        el.__virtualIndex = vidx + (this._vidxOffset || 0);
-        this.__updateElement(el, el.__virtualIndex);
-        updatedElements.push(el);
-      } else {
-        delete el.__lastUpdatedIndex;
-      }
-    }, itemSet);
-
-    this.__afterElementsUpdated(updatedElements);
-  }
-
-  /** @private */
-  _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;
-    }
-
-    if (!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)
-    );
-  }
-
-  /**
-   * Increases the pool size.
-   * @override
-   */
-  _increasePoolIfNeeded(count) {
-    if (this._physicalCount > 2 && count) {
-      // The iron-list logic has already created some physical items and
-      // has decided to create more. Since each item creation round is
-      // expensive, let's try to create the remaining items in one go.
-
-      // Calculate the total item count that would be needed to fill the viewport
-      // plus the buffer assuming rest of the items to be of the average size
-      // of the items already created.
-      const totalItemCount = Math.ceil(this._optPhysicalSize / this._physicalAverage);
-      const missingItemCount = totalItemCount - this._physicalCount;
-      // Create the remaining items in one go. Use a maximum of 100 items
-      // as a safety measure.
-      super._increasePoolIfNeeded(Math.max(count, Math.min(100, missingItemCount)));
-    } else {
-      super._increasePoolIfNeeded(count);
-    }
-  }
-
-  /**
-   * @returns {Number|undefined} - The browser's default font-size in pixels
-   * @private
-   */
-  _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);
-  }
-
-  /**
-   * Gets the index of the first visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get firstVisibleIndex() {
-    return this.__adapter.adjustedFirstVisibleIndex;
-  }
-
-  /**
-   * Gets the index of the last visible item in the viewport.
-   *
-   * @return {number}
-   */
-  get lastVisibleIndex() {
-    return this.__adapter.adjustedLastVisibleIndex;
-  }
-
-  /**
-   * The size of the virtualizer
-   * @return {number | undefined} The size of the virtualizer
-   */
-  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();
-  }
-}
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/*
- * Placeholder object class representing items being loaded.
- *
- * @private
- */
-const ComboBoxPlaceholder = class ComboBoxPlaceholder {
-  toString() {
-    return '';
-  }
-};
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * @polymerMixin
- */
-const ComboBoxScrollerMixin = (superClass) =>
-  class ComboBoxScrollerMixin extends superClass {
-    static get properties() {
-      return {
-        /**
-         * A full set of items to filter the visible options from.
-         * Set to an empty array when combo-box is not opened.
-         */
-        items: {
-          type: Array,
-          observer: '__itemsChanged',
-        },
-
-        /**
-         * Index of an item that has focus outline and is scrolled into view.
-         * The actual focus still remains in the input field.
-         */
-        focusedIndex: {
-          type: Number,
-          observer: '__focusedIndexChanged',
-        },
-
-        /**
-         * Set to true while combo-box fetches new page from the data provider.
-         */
-        loading: {
-          type: Boolean,
-          observer: '__loadingChanged',
-        },
-
-        /**
-         * Whether the combo-box is currently opened or not. If set to false,
-         * calling `scrollIntoView` does not have any effect.
-         */
-        opened: {
-          type: Boolean,
-          observer: '__openedChanged',
-        },
-
-        /**
-         * The selected item from the `items` array.
-         */
-        selectedItem: {
-          type: Object,
-          observer: '__selectedItemChanged',
-        },
-
-        /**
-         * Path for the id of the item, used to detect whether the item is selected.
-         */
-        itemIdPath: {
-          type: String,
-        },
-
-        /**
-         * Reference to the owner (combo-box owner), used by the item elements.
-         */
-        owner: {
-          type: Object,
-        },
-
-        /**
-         * Function used to set a label for every combo-box item.
-         */
-        getItemLabel: {
-          type: Object,
-        },
-
-        /**
-         * Function used to render the content of every combo-box item.
-         */
-        renderer: {
-          type: Object,
-          observer: '__rendererChanged',
-        },
-
-        /**
-         * Used to propagate the `theme` attribute from the host element.
-         */
-        theme: {
-          type: String,
-        },
-      };
-    }
-
-    constructor() {
-      super();
-      this.__boundOnItemClick = this.__onItemClick.bind(this);
-    }
-
-    /** @private */
-    get _viewportTotalPaddingBottom() {
-      if (this._cachedViewportTotalPaddingBottom === undefined) {
-        const itemsStyle = window.getComputedStyle(this.$.selector);
-        this._cachedViewportTotalPaddingBottom = [itemsStyle.paddingBottom, itemsStyle.borderBottomWidth]
-          .map((v) => {
-            return parseInt(v, 10);
-          })
-          .reduce((sum, v) => {
-            return sum + v;
-          });
-      }
-
-      return this._cachedViewportTotalPaddingBottom;
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      this.setAttribute('role', 'listbox');
-
-      // Ensure every instance has unique ID
-      this.id = `${this.localName}-${generateUniqueId()}`;
-
-      // Allow extensions to customize tag name for the items
-      this.__hostTagName = this.constructor.is.replace('-scroller', '');
-
-      this.addEventListener('click', (e) => e.stopPropagation());
-
-      this.__patchWheelOverScrolling();
-
-      this.__virtualizer = new Virtualizer({
-        createElements: this.__createElements.bind(this),
-        updateElement: this._updateElement.bind(this),
-        elementsContainer: this,
-        scrollTarget: this,
-        scrollContainer: this.$.selector,
-      });
-    }
-
-    /**
-     * Requests an update for the virtualizer to re-render items.
-     */
-    requestContentUpdate() {
-      if (this.__virtualizer) {
-        this.__virtualizer.update();
-      }
-    }
-
-    /**
-     * Scrolls an item at given index into view and adjusts `scrollTop`
-     * so that the element gets fully visible on Arrow Down key press.
-     * @param {number} index
-     */
-    scrollIntoView(index) {
-      if (!(this.opened && index >= 0)) {
-        return;
-      }
-
-      const visibleItemsCount = this._visibleItemsCount();
-
-      let targetIndex = index;
-
-      if (index > this.__virtualizer.lastVisibleIndex - 1) {
-        // Index is below the bottom, scrolling down. Make the item appear at the bottom.
-        // First scroll to target (will be at the top of the scroller) to make sure it's rendered.
-        this.__virtualizer.scrollToIndex(index);
-        // Then calculate the index for the following scroll (to get the target to bottom of the scroller).
-        targetIndex = index - visibleItemsCount + 1;
-      } else if (index > this.__virtualizer.firstVisibleIndex) {
-        // The item is already visible, scrolling is unnecessary per se. But we need to trigger iron-list to set
-        // the correct scrollTop on the scrollTarget. Scrolling to firstVisibleIndex.
-        targetIndex = this.__virtualizer.firstVisibleIndex;
-      }
-      this.__virtualizer.scrollToIndex(Math.max(0, targetIndex));
-
-      // Sometimes the item is partly below the bottom edge, detect and adjust.
-      const lastPhysicalItem = [...this.children].find(
-        (el) => !el.hidden && el.index === this.__virtualizer.lastVisibleIndex,
-      );
-      if (!lastPhysicalItem || index !== lastPhysicalItem.index) {
-        return;
-      }
-      const lastPhysicalItemRect = lastPhysicalItem.getBoundingClientRect();
-      const scrollerRect = this.getBoundingClientRect();
-      const scrollTopAdjust = lastPhysicalItemRect.bottom - scrollerRect.bottom + this._viewportTotalPaddingBottom;
-      if (scrollTopAdjust > 0) {
-        this.scrollTop += scrollTopAdjust;
-      }
-    }
-
-    /**
-     * @param {string | object} item
-     * @param {string | object} selectedItem
-     * @param {string} itemIdPath
-     * @protected
-     */
-    _isItemSelected(item, selectedItem, itemIdPath) {
-      if (item instanceof ComboBoxPlaceholder) {
-        return false;
-      } else if (itemIdPath && item !== undefined && selectedItem !== undefined) {
-        return get(itemIdPath, item) === get(itemIdPath, selectedItem);
-      }
-      return item === selectedItem;
-    }
-
-    /** @private */
-    __itemsChanged(items) {
-      if (this.__virtualizer && items) {
-        this.__virtualizer.size = items.length;
-        this.__virtualizer.flush();
-        this.requestContentUpdate();
-      }
-    }
-
-    /** @private */
-    __loadingChanged() {
-      this.requestContentUpdate();
-    }
-
-    /** @private */
-    __openedChanged(opened) {
-      if (opened) {
-        this.requestContentUpdate();
-      }
-    }
-
-    /** @private */
-    __selectedItemChanged() {
-      this.requestContentUpdate();
-    }
-
-    /** @private */
-    __focusedIndexChanged(index, oldIndex) {
-      if (index !== oldIndex) {
-        this.requestContentUpdate();
-      }
-
-      // Do not jump back to the previously focused item while loading
-      // when requesting next page from the data provider on scroll.
-      if (index >= 0 && !this.loading) {
-        this.scrollIntoView(index);
-      }
-    }
-
-    /** @private */
-    __rendererChanged(renderer, oldRenderer) {
-      if (renderer || oldRenderer) {
-        this.requestContentUpdate();
-      }
-    }
-
-    /** @private */
-    __createElements(count) {
-      return [...Array(count)].map(() => {
-        const item = document.createElement(`${this.__hostTagName}-item`);
-        item.addEventListener('click', this.__boundOnItemClick);
-        // Negative tabindex prevents the item content from being focused.
-        item.tabIndex = '-1';
-        item.style.width = '100%';
-        return item;
-      });
-    }
-
-    /**
-     * @param {HTMLElement} el
-     * @param {number} index
-     * @protected
-     */
-    _updateElement(el, index) {
-      const item = this.items[index];
-      const focusedIndex = this.focusedIndex;
-      const selected = this._isItemSelected(item, this.selectedItem, this.itemIdPath);
-
-      el.setProperties({
-        item,
-        index,
-        label: this.getItemLabel(item),
-        selected,
-        renderer: this.renderer,
-        focused: !this.loading && focusedIndex === index,
-      });
-
-      el.id = `${this.__hostTagName}-item-${index}`;
-      el.setAttribute('role', index !== undefined ? 'option' : false);
-      el.setAttribute('aria-selected', selected.toString());
-      el.setAttribute('aria-posinset', index + 1);
-      el.setAttribute('aria-setsize', this.items.length);
-
-      if (this.theme) {
-        el.setAttribute('theme', this.theme);
-      } else {
-        el.removeAttribute('theme');
-      }
-
-      if (item instanceof ComboBoxPlaceholder) {
-        this.__requestItemByIndex(index);
-      }
-    }
-
-    /** @private */
-    __onItemClick(e) {
-      this.dispatchEvent(new CustomEvent('selection-changed', { detail: { item: e.currentTarget.item } }));
-    }
-
-    /**
-     * We want to prevent the kinetic scrolling energy from being transferred from the overlay contents over to the parent.
-     * Further improvement ideas: after the contents have been scrolled to the top or bottom and scrolling has stopped, it could allow
-     * scrolling the parent similarly to touch scrolling.
-     * @private
-     */
-    __patchWheelOverScrolling() {
-      this.$.selector.addEventListener('wheel', (e) => {
-        const scrolledToTop = this.scrollTop === 0;
-        const scrolledToBottom = this.scrollHeight - this.scrollTop - this.clientHeight <= 1;
-        if (scrolledToTop && e.deltaY < 0) {
-          e.preventDefault();
-        } else if (scrolledToBottom && e.deltaY > 0) {
-          e.preventDefault();
-        }
-      });
-    }
-
-    /**
-     * Dispatches an `index-requested` event for the given index to notify
-     * the data provider that it should start loading the page containing the requested index.
-     *
-     * The event is dispatched asynchronously to prevent an immediate page request and therefore
-     * a possible infinite recursion in case the data provider implements page request cancelation logic
-     * by invoking data provider page callbacks with an empty array.
-     * The infinite recursion may occur otherwise since invoking a data provider page callback with an empty array
-     * triggers a synchronous scroller update and, if the callback corresponds to the currently visible page,
-     * the scroller will synchronously request the page again which may lead to looping in the end.
-     * That was the case for the Flow counterpart:
-     * https://github.com/vaadin/flow-components/issues/3553#issuecomment-1239344828
-     * @private
-     */
-    __requestItemByIndex(index) {
-      requestAnimationFrame(() => {
-        this.dispatchEvent(
-          new CustomEvent('index-requested', {
-            detail: {
-              index,
-              currentScrollerPos: this._oldScrollerPosition,
-            },
-          }),
-        );
-      });
-    }
-
-    /** @private */
-    _visibleItemsCount() {
-      // Ensure items are positioned
-      this.__virtualizer.scrollToIndex(this.__virtualizer.firstVisibleIndex);
-      const hasItems = this.__virtualizer.size > 0;
-      return hasItems ? this.__virtualizer.lastVisibleIndex - this.__virtualizer.firstVisibleIndex + 1 : 0;
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * An element used internally by `<vaadin-combo-box>`. Not intended to be used separately.
- *
- * @customElement
- * @extends HTMLElement
- * @mixes ComboBoxScrollerMixin
- * @private
- */
-class ComboBoxScroller extends ComboBoxScrollerMixin(PolymerElement) {
-  static get is() {
-    return 'vaadin-combo-box-scroller';
-  }
-
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          min-height: 1px;
-          overflow: auto;
-
-          /* Fixes item background from getting on top of scrollbars on Safari */
-          transform: translate3d(0, 0, 0);
-
-          /* Enable momentum scrolling on iOS */
-          -webkit-overflow-scrolling: touch;
-
-          /* Fixes scrollbar disappearing when 'Show scroll bars: Always' enabled in Safari */
-          box-shadow: 0 0 0 white;
-        }
-
-        #selector {
-          border-width: var(--_vaadin-combo-box-items-container-border-width);
-          border-style: var(--_vaadin-combo-box-items-container-border-style);
-          border-color: var(--_vaadin-combo-box-items-container-border-color, transparent);
-          position: relative;
-        }
-      </style>
-      <div id="selector">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-defineCustomElement(ComboBoxScroller);
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin to provide `pattern` property.
- *
- * @polymerMixin
- * @mixes InputConstraintsMixin
- */
-const PatternMixin = (superclass) =>
-  class PatternMixinClass extends InputConstraintsMixin(superclass) {
-    static get properties() {
-      return {
-        /**
-         * A regular expression that the value is checked against.
-         * The pattern must match the entire value, not just some subset.
-         */
-        pattern: {
-          type: String,
-        },
-      };
-    }
-
-    static get delegateAttrs() {
-      return [...super.delegateAttrs, 'pattern'];
-    }
-
-    static get constraints() {
-      return [...super.constraints, 'pattern'];
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2015 - 2023 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);
-        Object.entries(this._pendingRequests).forEach(([page, callback]) => {
-          if (parseInt(page) >= lastPage) {
-            callback([], size);
-          }
-        });
-      }
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * 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 - 2023 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
- * @mixes ControllerMixin
- * @mixes ValidateMixin
- * @mixes DisabledMixin
- * @mixes InputMixin
- * @mixes KeyboardMixin
- * @mixes FocusMixin
- * @mixes OverlayClassMixin
- * @param {function(new:HTMLElement)} subclass
- */
-const ComboBoxMixin = (subclass) =>
-  class ComboBoxMixinClass extends OverlayClassMixin(
-    ControllerMixin(ValidateMixin(FocusMixin(KeyboardMixin(InputMixin(DisabledMixin(subclass)))))),
-  ) {
-    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',
-        },
-
-        /**
-         * Set of items to be rendered in the dropdown.
-         * @protected
-         */
-        _dropdownItems: {
-          type: Array,
-        },
-
-        /** @private */
-        _closeOnBlurIsPrevented: Boolean,
-
-        /** @private */
-        _scroller: Object,
-
-        /** @private */
-        _overlayOpened: {
-          type: Boolean,
-          observer: '_overlayOpenedChanged',
-        },
-      };
-    }
-
-    static get observers() {
-      return [
-        '_selectedItemChanged(selectedItem, itemValuePath, itemLabelPath)',
-        '_openedOrItemsChanged(opened, _dropdownItems, loading)',
-        '_updateScroller(_scroller, _dropdownItems, opened, loading, selectedItem, itemIdPath, _focusedIndex, renderer, theme)',
-      ];
-    }
-
-    constructor() {
-      super();
-      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';
-    }
-
-    /**
-     * 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._lastCommittedValue = this.value;
-
-      this.addEventListener('click', this._boundOnClick);
-      this.addEventListener('touchend', this._boundOnTouchend);
-
-      const bringToFrontListener = () => {
-        requestAnimationFrame(() => {
-          this._overlayElement.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;
-      });
-
-      this._overlayElement = overlay;
-    }
-
-    /**
-     * Create and initialize the scroller element.
-     * Override to provide custom host reference.
-     *
-     * @protected
-     */
-    _initScroller(host) {
-      const scrollerTag = `${this._tagNamePrefix}-scroller`;
-
-      const overlay = this._overlayElement;
-
-      overlay.renderer = (root) => {
-        if (!root.firstChild) {
-          root.appendChild(document.createElement(scrollerTag));
-        }
-      };
-
-      // Ensure the scroller is rendered
-      overlay.requestContentUpdate();
-
-      const scroller = overlay.querySelector(scrollerTag);
-
-      scroller.owner = 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._dropdownItems && this._dropdownItems.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._overlayElement.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;
-    }
-
-    /** @private */
-    __onClearButtonMouseDown(event) {
-      event.preventDefault(); // Prevent native focusout event
-      this.inputElement.focus();
-    }
-
-    /**
-     * @param {Event} event
-     * @protected
-     */
-    _onClearButtonClick(event) {
-      event.preventDefault();
-      this._onClearAction();
-
-      // 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(event) {
-      if (this._isClearButton(event)) {
-        this._onClearButtonClick(event);
-      } else if (event.composedPath().includes(this._toggleElement)) {
-        this._onToggleButtonClick(event);
-      } else {
-        this._onHostClick(event);
-      }
-    }
-
-    /**
-     * Override an event listener from `KeyboardMixin`.
-     *
-     * @param {KeyboardEvent} e
-     * @protected
-     * @override
-     */
-    _onKeyDown(e) {
-      super._onKeyDown(e);
-
-      if (e.key === 'Tab') {
-        this._overlayElement.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 ? get(this.itemLabelPath, item) : undefined;
-      if (label === undefined || label === null) {
-        label = item ? item.toString() : '';
-      }
-      return label;
-    }
-
-    /** @private */
-    _getItemValue(item) {
-      let value = item && this.itemValuePath ? get(this.itemValuePath, item) : undefined;
-      if (value === undefined) {
-        value = item ? item.toString() : '';
-      }
-      return value;
-    }
-
-    /** @private */
-    _onArrowDown() {
-      if (this.opened) {
-        const items = this._dropdownItems;
-        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._dropdownItems;
-          if (items) {
-            this._focusedIndex = items.length - 1;
-          }
-        }
-
-        this._prefillFocusedItemLabel();
-      } else {
-        this.open();
-      }
-    }
-
-    /** @private */
-    _prefillFocusedItemLabel() {
-      if (this._focusedIndex > -1) {
-        const focusedItem = this._dropdownItems[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._onClearAction();
-        }
-      } 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._onClearAction();
-      }
-    }
-
-    /** @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
-     */
-    _onClearAction() {
-      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._dropdownItems[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.selectedItem, ...(this._dropdownItems || [])];
-        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 = '';
-    }
-
-    /**
-     * 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() {
-      // Do not validate when focusout is caused by document
-      // losing focus, which happens on browser tab switch.
-      if (document.hasFocus()) {
-        this.validate();
-      }
-
-      if (this.value !== this._lastCommittedValue) {
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true }));
-        this._lastCommittedValue = this.value;
-      }
-    }
-
-    /** @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) {
-      this._setDropdownItems(filteredItems);
-
-      // Store the currently focused item if any. The focused index preserves
-      // in the case when more filtered items are loading but it is reset
-      // when the user types in a filter query.
-      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);
-      }
-    }
-
-    /**
-     * Provide items to be rendered in the dropdown.
-     * Override this method to show custom items.
-     *
-     * @protected
-     */
-    _setDropdownItems(items) {
-      this._dropdownItems = items;
-    }
-
-    /** @private */
-    _getItemElements() {
-      return Array.from(this._scroller.querySelectorAll(`${this._tagNamePrefix}-item`));
-    }
-
-    /** @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();
-      }
-    }
-
-    /**
-     * Override method inherited from `FocusMixin`
-     * to close the overlay on blur and commit the value.
-     *
-     * @param {boolean} focused
-     * @protected
-     * @override
-     */
-    _setFocused(focused) {
-      super._setFocused(focused);
-
-      if (!focused && !this.readonly && !this._closeOnBlurIsPrevented) {
-        // User's logic in `custom-value-set` event listener might cause input to blur,
-        // which will result in attempting to commit the same custom value once again.
-        if (!this.opened && this.allowCustomValue && this._inputElementValue === this._lastCustomValue) {
-          delete this._lastCustomValue;
-          return;
-        }
-
-        this._closeOrCommit();
-      }
-    }
-
-    /**
-     * Override method inherited from `FocusMixin` to not remove focused
-     * state when focus moves to the overlay.
-     *
-     * @param {FocusEvent} event
-     * @return {boolean}
-     * @protected
-     * @override
-     */
-    _shouldRemoveFocus(event) {
-      // VoiceOver on iOS fires `focusout` event when moving focus to the item in the dropdown.
-      // Do not focus the input in this case, because it would break announcement for the item.
-      if (event.relatedTarget && event.relatedTarget.localName === `${this._tagNamePrefix}-item`) {
-        return false;
-      }
-
-      // Do not blur when focus moves to the overlay
-      // Also, fixes the problem with `focusout` happening when clicking on the scroll bar on Edge
-      if (event.relatedTarget === this._overlayElement) {
-        event.composedPath()[0].focus();
-        return false;
-      }
-
-      return true;
-    }
-
-    /** @private */
-    _onTouchend(event) {
-      if (!this.clearElement || event.composedPath()[0] !== this.clearElement) {
-        return;
-      }
-
-      event.preventDefault();
-      this._onClearAction();
-    }
-
-    /**
-     * 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 - 2023 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/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.
- *
- * @customElement
- * @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.setAriaTarget(this.inputElement);
-    this._tooltipController.setShouldShow((target) => !target.opened);
-
-    this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
-    this._toggleElement = this.$.toggleButton;
-  }
-
-  /**
-   * Override the method from `InputControlMixin`
-   * to stop event propagation to prevent `ComboBoxMixin`
-   * from handling this click event also on its own.
-   *
-   * @param {Event} event
-   * @protected
-   * @override
-   */
-  _onClearButtonClick(event) {
-    event.stopPropagation();
-    super._onClearButtonClick(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);
-    }
-  }
-}
-
-defineCustomElement(ComboBox);