@everymatrix/general-input 1.21.7 → 1.22.1

package/dist/components/date-input2.js

@@ -1,10 +1,302 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h } from '@stencil/core/internal/client';
 import { t as translate$1, a as tooltipIconSvg } from './tooltipIcon.js';
-import { i as inputFieldShared, a as isFirefox, I as InputConstraintsMixin, b as isIOS, c as InputControlMixin, d as inputFieldShared$1 } from './input-field-shared-styles.js';
-import { i, r as registerStyles, h as html, g as defineCustomElement$1, o as DirMixin, j as ThemableMixin, P as PolymerElement, p as Debouncer$1, t as timeOut, q as generateUniqueId, d as dedupingMixin, s as PropertyEffects, w as wrap, u as strictTemplatePolicy, v as legacyWarnings, x as legacyOptimizations, y as useShadow, z as suppressTemplateNotifications, A as timeOut$1, B as microTask, C as matches, G as translate, m as FocusMixin, H as SlotController, J as ControllerMixin, c as DelegateFocusMixin, K as KeyboardMixin, e as InputController, f as LabelledInputController, T as TooltipController, E as ElementMixin } from './field-mixin.js';
-import { m as menuOverlay, P as PositionMixin, O as OverlayMixin, o as overlayStyles, a as afterNextRender, b as OverlayClassMixin, V as VirtualKeyboardController, h as hideOthers } from './virtual-keyboard-controller.js';
+import { i as inputFieldShared, I as InputConstraintsMixin, a as InputControlMixin, b as inputFieldShared$1 } from './input-field-shared-styles.js';
+import { o, i, h as html, P as PolymerElement, d as dedupingMixin, k as PropertyEffects, w as wrap$1, s as strictTemplatePolicy, l as legacyWarnings, m as legacyOptimizations, n as useShadow, p as suppressTemplateNotifications, t as timeOut$1, q as microTask$1, v as matches, x as translate, j as FocusMixin, u as usageStatistics, c as DelegateFocusMixin, K as KeyboardMixin, e as InputController, f as LabelledInputController } from './field-mixin.js';
+import { m as menuOverlay, P as PositionMixin, O as OverlayMixin, o as overlayStyles, a as afterNextRender, V as VirtualKeyboardController, h as hideOthers } from './virtual-keyboard-controller.js';
 import './vaadin-button.js';
-import { a as addListener, s as setTouchAction } from './active-mixin.js';
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+/**
+ * @polymerMixin
+ */
+const ThemePropertyMixin = (superClass) =>
+  class VaadinThemePropertyMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * Helper property with theme attribute value facilitating propagation
+         * in shadow DOM.
+         *
+         * Enables the component implementation to propagate the `theme`
+         * attribute value to the sub-components in Shadow DOM by binding
+         * the sub-component's "theme" attribute to the `theme` property of
+         * the host.
+         *
+         * **NOTE:** Extending the mixin only provides the property for binding,
+         * and does not make the propagation alone.
+         *
+         * See [Styling Components: Sub-components](https://vaadin.com/docs/latest/styling/styling-components/#sub-components).
+         * page for more information.
+         *
+         * @protected
+         */
+        _theme: {
+          type: String,
+          readOnly: true,
+        },
+      };
+    }
+
+    static get observedAttributes() {
+      return [...super.observedAttributes, 'theme'];
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+
+      if (name === 'theme') {
+        this._set_theme(newValue);
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef {Object} Theme
+ * @property {string} themeFor
+ * @property {CSSResult[]} styles
+ * @property {string | string[]} [include]
+ * @property {string} [moduleId]
+ *
+ * @typedef {CSSResult[] | CSSResult} CSSResultGroup
+ */
+
+/**
+ * @type {Theme[]}
+ */
+const themeRegistry = [];
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {Function} elementClass
+ * @returns {boolean}
+ */
+function classHasThemes(elementClass) {
+  return elementClass && Object.prototype.hasOwnProperty.call(elementClass, '__themes');
+}
+
+/**
+ * Check if the custom element type has themes applied.
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function hasThemes(tagName) {
+  return classHasThemes(customElements.get(tagName));
+}
+
+/**
+ * Flattens the styles into a single array of styles.
+ * @param {CSSResultGroup} styles
+ * @param {CSSResult[]} result
+ * @returns {CSSResult[]}
+ */
+function flattenStyles(styles = []) {
+  return [styles].flat(Infinity).filter((style) => {
+    if (style instanceof o) {
+      return true;
+    }
+    console.warn('An item in styles is not of type CSSResult. Use `unsafeCSS` or `css`.');
+    return false;
+  });
+}
+
+/**
+ * Registers CSS styles for a component type. Make sure to register the styles before
+ * the first instance of a component of the type is attached to DOM.
+ *
+ * @param {string} themeFor The local/tag name of the component type to register the styles for
+ * @param {CSSResultGroup} styles The CSS style rules to be registered for the component type
+ * matching themeFor and included in the local scope of each component instance
+ * @param {{moduleId?: string, include?: string | string[]}} options Additional options
+ * @return {void}
+ */
+function registerStyles(themeFor, styles, options = {}) {
+  if (themeFor) {
+    if (hasThemes(themeFor)) {
+      console.warn(`The custom element definition for "${themeFor}"
+      was finalized before a style module was registered.
+      Make sure to add component specific style modules before
+      importing the corresponding custom element.`);
+    }
+  }
+
+  styles = flattenStyles(styles);
+
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    window.Vaadin.styleModules.registerStyles(themeFor, styles, options);
+  } else {
+    themeRegistry.push({
+      themeFor,
+      styles,
+      include: options.include,
+      moduleId: options.moduleId,
+    });
+  }
+}
+
+/**
+ * Returns all registered themes. By default the themeRegistry is returned as is.
+ * In case the style-modules adapter is imported, the themes are obtained from there instead
+ * @returns {Theme[]}
+ */
+function getAllThemes() {
+  if (window.Vaadin && window.Vaadin.styleModules) {
+    return window.Vaadin.styleModules.getAllThemes();
+  }
+  return themeRegistry;
+}
+
+/**
+ * Returns true if the themeFor string matches the tag name
+ * @param {string} themeFor
+ * @param {string} tagName
+ * @returns {boolean}
+ */
+function matchesThemeFor(themeFor, tagName) {
+  return (themeFor || '').split(' ').some((themeForToken) => {
+    return new RegExp(`^${themeForToken.split('*').join('.*')}$`, 'u').test(tagName);
+  });
+}
+
+/**
+ * Maps the moduleName to an include priority number which is used for
+ * determining the order in which styles are applied.
+ * @param {string} moduleName
+ * @returns {number}
+ */
+function getIncludePriority(moduleName = '') {
+  let includePriority = 0;
+  if (moduleName.startsWith('lumo-') || moduleName.startsWith('material-')) {
+    includePriority = 1;
+  } else if (moduleName.startsWith('vaadin-')) {
+    includePriority = 2;
+  }
+  return includePriority;
+}
+
+/**
+ * Gets an array of CSSResults matching the include property of the theme.
+ * @param {Theme} theme
+ * @returns {CSSResult[]}
+ */
+function getIncludedStyles(theme) {
+  const includedStyles = [];
+  if (theme.include) {
+    [].concat(theme.include).forEach((includeModuleId) => {
+      const includedTheme = getAllThemes().find((s) => s.moduleId === includeModuleId);
+      if (includedTheme) {
+        includedStyles.push(...getIncludedStyles(includedTheme), ...includedTheme.styles);
+      } else {
+        console.warn(`Included moduleId ${includeModuleId} not found in style registry`);
+      }
+    }, theme.styles);
+  }
+  return includedStyles;
+}
+
+/**
+ * Includes the styles to the template.
+ * @param {CSSResult[]} styles
+ * @param {HTMLTemplateElement} template
+ */
+function addStylesToTemplate(styles, template) {
+  const styleEl = document.createElement('style');
+  styleEl.innerHTML = styles.map((style) => style.cssText).join('\n');
+  template.content.appendChild(styleEl);
+}
+
+/**
+ * Returns an array of themes that should be used for styling a component matching
+ * the tag name. The array is sorted by the include order.
+ * @param {string} tagName
+ * @returns {Theme[]}
+ */
+function getThemes(tagName) {
+  const defaultModuleName = `${tagName}-default-theme`;
+
+  const themes = getAllThemes()
+    // Filter by matching themeFor properties
+    .filter((theme) => theme.moduleId !== defaultModuleName && matchesThemeFor(theme.themeFor, tagName))
+    .map((theme) => ({
+      ...theme,
+      // Prepend styles from included themes
+      styles: [...getIncludedStyles(theme), ...theme.styles],
+      // Map moduleId to includePriority
+      includePriority: getIncludePriority(theme.moduleId),
+    }))
+    // Sort by includePriority
+    .sort((themeA, themeB) => themeB.includePriority - themeA.includePriority);
+
+  if (themes.length > 0) {
+    return themes;
+  }
+  // No theme modules found, return the default module if it exists
+  return getAllThemes().filter((theme) => theme.moduleId === defaultModuleName);
+}
+
+/**
+ * @polymerMixin
+ * @mixes ThemePropertyMixin
+ */
+const ThemableMixin = (superClass) =>
+  class VaadinThemableMixin extends ThemePropertyMixin(superClass) {
+    /**
+     * Covers PolymerElement based component styling
+     * @protected
+     */
+    static finalize() {
+      super.finalize();
+
+      // Make sure not to run the logic intended for PolymerElement when LitElement is used.
+      if (this.elementStyles) {
+        return;
+      }
+
+      const template = this.prototype._template;
+      if (!template || classHasThemes(this)) {
+        return;
+      }
+
+      addStylesToTemplate(this.getStylesForThis(), template);
+    }
+
+    /**
+     * Covers LitElement based component styling
+     *
+     * @protected
+     */
+    static finalizeStyles(styles) {
+      // The "styles" object originates from the "static get styles()" function of
+      // a LitElement based component. The theme styles are added after it
+      // so that they can override the component styles.
+      const themeStyles = this.getStylesForThis();
+      return styles ? [...super.finalizeStyles(styles), ...themeStyles] : themeStyles;
+    }
+
+    /**
+     * Get styles for the component type
+     *
+     * @private
+     */
+    static getStylesForThis() {
+      const parent = Object.getPrototypeOf(this.prototype);
+      const inheritedThemes = (parent ? parent.constructor.__themes : []) || [];
+      this.__themes = [...inheritedThemes, ...getThemes(this.is)];
+      const themeStyles = this.__themes.flatMap((theme) => theme.styles);
+      // Remove duplicates
+      return themeStyles.filter((style, index) => index === themeStyles.lastIndexOf(style));
+    }
+  };
 
 const datePickerOverlay = i`
   [part='overlay'] {
@@ -436,6 +728,174 @@ const datePicker = i`
 
 registerStyles('vaadin-date-picker', [inputFieldShared, datePicker], { moduleId: 'lumo-date-picker' });
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+function defineCustomElement$1(CustomElement) {
+  const defined = customElements.get(CustomElement.is);
+  if (!defined) {
+    customElements.define(CustomElement.is, CustomElement);
+  } else {
+    const definedVersion = defined.version;
+    if (definedVersion && CustomElement.version && definedVersion === CustomElement.version) {
+      // Just loading the same thing again
+      console.warn(`The component ${CustomElement.is} has been loaded twice`);
+    } else {
+      console.error(
+        `Tried to define ${CustomElement.is} version ${CustomElement.version} when version ${defined.version} is already in use. Something will probably break.`,
+      );
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Array of Vaadin custom element classes that have been subscribed to the dir changes.
+ */
+const directionSubscribers = [];
+
+function alignDirs(element, documentDir, elementDir = element.getAttribute('dir')) {
+  if (documentDir) {
+    element.setAttribute('dir', documentDir);
+  } else if (elementDir != null) {
+    element.removeAttribute('dir');
+  }
+}
+
+function getDocumentDir() {
+  return document.documentElement.getAttribute('dir');
+}
+
+function directionUpdater() {
+  const documentDir = getDocumentDir();
+  directionSubscribers.forEach((element) => {
+    alignDirs(element, documentDir);
+  });
+}
+
+const directionObserver = new MutationObserver(directionUpdater);
+directionObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+
+/**
+ * A mixin to handle `dir` attribute based on the one set on the `<html>` element.
+ *
+ * @polymerMixin
+ */
+const DirMixin = (superClass) =>
+  class VaadinDirMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * @protected
+         */
+        dir: {
+          type: String,
+          value: '',
+          reflectToAttribute: true,
+          converter: {
+            fromAttribute: (attr) => {
+              return !attr ? '' : attr;
+            },
+            toAttribute: (prop) => {
+              return prop === '' ? null : prop;
+            },
+          },
+        },
+      };
+    }
+
+    /**
+     * @return {boolean}
+     * @protected
+     */
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.hasAttribute('dir') || this.__restoreSubscription) {
+        this.__subscribe();
+        alignDirs(this, getDocumentDir(), null);
+      }
+    }
+
+    /** @protected */
+    attributeChangedCallback(name, oldValue, newValue) {
+      super.attributeChangedCallback(name, oldValue, newValue);
+      if (name !== 'dir') {
+        return;
+      }
+
+      const documentDir = getDocumentDir();
+
+      // New value equals to the document direction and the element is not subscribed to the changes
+      const newValueEqlDocDir = newValue === documentDir && directionSubscribers.indexOf(this) === -1;
+      // Value was emptied and the element is not subscribed to the changes
+      const newValueEmptied = !newValue && oldValue && directionSubscribers.indexOf(this) === -1;
+      // New value is different and the old equals to document direction and the element is not subscribed to the changes
+      const newDiffValue = newValue !== documentDir && oldValue === documentDir;
+
+      if (newValueEqlDocDir || newValueEmptied) {
+        this.__subscribe();
+        alignDirs(this, documentDir, newValue);
+      } else if (newDiffValue) {
+        this.__unsubscribe();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__restoreSubscription = directionSubscribers.includes(this);
+      this.__unsubscribe();
+    }
+
+    /** @protected */
+    _valueToNodeAttribute(node, value, attribute) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the property contains an empty string then it should not create an empty attribute
+      if (attribute === 'dir' && value === '' && !node.hasAttribute('dir')) {
+        return;
+      }
+      super._valueToNodeAttribute(node, value, attribute);
+    }
+
+    /** @protected */
+    _attributeToProperty(attribute, value, type) {
+      // Override default Polymer attribute reflection to match native behavior of HTMLElement.dir property
+      // If the attribute is removed, then the dir property should contain an empty string instead of null
+      if (attribute === 'dir' && !value) {
+        this.dir = '';
+      } else {
+        super._attributeToProperty(attribute, value, type);
+      }
+    }
+
+    /** @private */
+    __subscribe() {
+      if (!directionSubscribers.includes(this)) {
+        directionSubscribers.push(this);
+      }
+    }
+
+    /** @private */
+    __unsubscribe() {
+      if (directionSubscribers.includes(this)) {
+        directionSubscribers.splice(directionSubscribers.indexOf(this), 1);
+      }
+    }
+  };
+
 /**
  * @license
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
@@ -668,177 +1128,550 @@ function parseDate(str) {
 
 /**
  * @license
- * Copyright (c) 2016 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+ * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+ * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+ * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+ * Code distributed by Google as part of the polymer project is also
+ * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  */
 
-const template = document.createElement('template');
-template.innerHTML = `
-  <style>
-    :host {
-      display: block;
-      overflow: hidden;
-      height: 500px;
-    }
-
-    #scroller {
-      position: relative;
-      height: 100%;
-      overflow: auto;
-      outline: none;
-      margin-right: -40px;
-      -webkit-overflow-scrolling: touch;
-      overflow-x: hidden;
-    }
-
-    #scroller.notouchscroll {
-      -webkit-overflow-scrolling: auto;
-    }
+/**
+ * @fileoverview
+ *
+ * This module provides a number of strategies for enqueuing asynchronous
+ * tasks. Each sub-module provides a standard `run(fn)` interface that returns a
+ * handle, and a `cancel(handle)` interface for canceling async tasks before
+ * they run.
+ *
+ * @summary Module that provides a number of strategies for enqueuing
+ * asynchronous tasks.
+ */
 
-    #scroller::-webkit-scrollbar {
-      display: none;
+let microtaskCurrHandle = 0;
+let microtaskLastHandle = 0;
+const microtaskCallbacks = [];
+let microtaskScheduled = false;
+
+function microtaskFlush() {
+  microtaskScheduled = false;
+  const len = microtaskCallbacks.length;
+  for (let i = 0; i < len; i++) {
+    const cb = microtaskCallbacks[i];
+    if (cb) {
+      try {
+        cb();
+      } catch (e) {
+        setTimeout(() => {
+          throw e;
+        });
+      }
     }
+  }
+  microtaskCallbacks.splice(0, len);
+  microtaskLastHandle += len;
+}
 
-    .buffer {
-      position: absolute;
-      width: var(--vaadin-infinite-scroller-buffer-width, 100%);
-      box-sizing: border-box;
-      padding-right: 40px;
-      top: var(--vaadin-infinite-scroller-buffer-offset, 0);
-      animation: fadein 0.2s;
+/**
+ * Async interface wrapper around `setTimeout`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `setTimeout`.
+ */
+const timeOut = {
+  /**
+   * Returns a sub-module with the async interface providing the provided
+   * delay.
+   *
+   * @memberof timeOut
+   * @param {number=} delay Time to wait before calling callbacks in ms
+   * @return {!AsyncInterface} An async timeout interface
+   */
+  after(delay) {
+    return {
+      run(fn) {
+        return window.setTimeout(fn, delay);
+      },
+      cancel(handle) {
+        window.clearTimeout(handle);
+      },
+    };
+  },
+  /**
+   * Enqueues a function called in the next task.
+   *
+   * @memberof timeOut
+   * @param {!Function} fn Callback to run
+   * @param {number=} delay Delay in milliseconds
+   * @return {number} Handle used for canceling task
+   */
+  run(fn, delay) {
+    return window.setTimeout(fn, delay);
+  },
+  /**
+   * Cancels a previously enqueued `timeOut` callback.
+   *
+   * @memberof timeOut
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    window.clearTimeout(handle);
+  },
+};
+
+/**
+ * Async interface wrapper around `requestIdleCallback`.  Falls back to
+ * `setTimeout` on browsers that do not support `requestIdleCallback`.
+ *
+ * @namespace
+ * @summary Async interface wrapper around `requestIdleCallback`.
+ */
+const idlePeriod = {
+  /**
+   * Enqueues a function called at `requestIdleCallback` timing.
+   *
+   * @memberof idlePeriod
+   * @param {function(!IdleDeadline):void} fn Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(fn) {
+    return window.requestIdleCallback ? window.requestIdleCallback(fn) : window.setTimeout(fn, 16);
+  },
+  /**
+   * Cancels a previously enqueued `idlePeriod` callback.
+   *
+   * @memberof idlePeriod
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    if (window.cancelIdleCallback) {
+      window.cancelIdleCallback(handle);
+    } else {
+      window.clearTimeout(handle);
     }
+  },
+};
 
-    @keyframes fadein {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
+/**
+ * Async interface for enqueuing callbacks that run at microtask timing.
+ *
+ * @namespace
+ * @summary Async interface for enqueuing callbacks that run at microtask
+ *   timing.
+ */
+const microTask = {
+  /**
+   * Enqueues a function called at microtask timing.
+   *
+   * @memberof microTask
+   * @param {!Function=} callback Callback to run
+   * @return {number} Handle used for canceling task
+   */
+  run(callback) {
+    if (!microtaskScheduled) {
+      microtaskScheduled = true;
+      queueMicrotask(() => microtaskFlush());
+    }
+    microtaskCallbacks.push(callback);
+    const result = microtaskCurrHandle;
+    microtaskCurrHandle += 1;
+    return result;
+  },
+
+  /**
+   * Cancels a previously enqueued `microTask` callback.
+   *
+   * @memberof microTask
+   * @param {number} handle Handle returned from `run` of callback to cancel
+   * @return {void}
+   */
+  cancel(handle) {
+    const idx = handle - microtaskLastHandle;
+    if (idx >= 0) {
+      if (!microtaskCallbacks[idx]) {
+        throw new Error(`invalid async handle: ${handle}`);
       }
+      microtaskCallbacks[idx] = null;
     }
-  </style>
-
-  <div id="scroller">
-    <div class="buffer"></div>
-    <div class="buffer"></div>
-    <div id="fullHeight"></div>
-  </div>
-`;
+  },
+};
 
 /**
- * @extends HTMLElement
- * @private
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-class InfiniteScroller extends HTMLElement {
-  constructor() {
-    super();
 
-    const root = this.attachShadow({ mode: 'open' });
-    root.appendChild(template.content.cloneNode(true));
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
 
-    /**
-     * Count of individual items in each buffer.
-     * The scroller has 2 buffers altogether so bufferSize of 20
-     * will result in 40 buffered DOM items in total.
-     * Changing after initialization not supported.
-     * @type {number}
-     */
-    this.bufferSize = 20;
+const testPlatform = (regexp) => regexp.test(navigator.platform);
 
-    /**
-     * The amount of initial scroll top. Needed in order for the
-     * user to be able to scroll backwards.
-     * @type {number}
-     * @private
-     */
-    this._initialScroll = 500000;
+const testVendor = (regexp) => regexp.test(navigator.vendor);
 
-    /**
-     * The index/position mapped at _initialScroll point.
-     * @type {number}
-     * @private
-     */
-    this._initialIndex = 0;
+testUserAgent(/Android/u);
 
-    /**
-     * @type {boolean}
-     * @private
-     */
-    this._activated = false;
+testUserAgent(/Chrome/u) && testVendor(/Google Inc/u);
+
+const isFirefox = testUserAgent(/Firefox/u);
+
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+const isIPad = testPlatform(/^iPad/u) || (testPlatform(/^Mac/u) && navigator.maxTouchPoints > 1);
+
+const isIPhone = testPlatform(/^iPhone/u);
+
+const isIOS = isIPhone || isIPad;
+
+testUserAgent(/^((?!chrome|android).)*safari/iu);
+
+(() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
   }
+})();
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
 
+const debouncerQueue$1 = new Set();
+
+/**
+ * @summary Collapse multiple callbacks into one invocation after a timer.
+ */
+class Debouncer$1 {
   /**
-   * @return {boolean}
+   * Creates a debouncer if no debouncer is passed as a parameter
+   * or it cancels an active debouncer otherwise. The following
+   * example shows how a debouncer can be called multiple times within a
+   * microtask and "debounced" such that the provided callback function is
+   * called once. Add this method to a custom element:
+   *
+   * ```js
+   * import {microTask} from '@vaadin/component-base/src/async.js';
+   * import {Debouncer} from '@vaadin/component-base/src/debounce.js';
+   * // ...
+   *
+   * _debounceWork() {
+   *   this._debounceJob = Debouncer.debounce(this._debounceJob,
+   *       microTask, () => this._doWork());
+   * }
+   * ```
+   *
+   * If the `_debounceWork` method is called multiple times within the same
+   * microtask, the `_doWork` function will be called only once at the next
+   * microtask checkpoint.
+   *
+   * Note: In testing it is often convenient to avoid asynchrony. To accomplish
+   * this with a debouncer, you can use `enqueueDebouncer` and
+   * `flush`. For example, extend the above example by adding
+   * `enqueueDebouncer(this._debounceJob)` at the end of the
+   * `_debounceWork` method. Then in a test, call `flush` to ensure
+   * the debouncer has completed.
+   *
+   * @param {Debouncer?} debouncer Debouncer object.
+   * @param {!AsyncInterface} asyncModule Object with Async interface
+   * @param {function()} callback Callback to run.
+   * @return {!Debouncer} Returns a debouncer object.
    */
-  get active() {
-    return this._activated;
+  static debounce(debouncer, asyncModule, callback) {
+    if (debouncer instanceof Debouncer$1) {
+      // Cancel the async callback, but leave in debouncerQueue if it was
+      // enqueued, to maintain 1.x flush order
+      debouncer._cancelAsync();
+    } else {
+      debouncer = new Debouncer$1();
+    }
+    debouncer.setConfig(asyncModule, callback);
+    return debouncer;
   }
 
-  set active(active) {
-    if (active && !this._activated) {
-      this._createPool();
-      this._activated = true;
-    }
+  constructor() {
+    this._asyncModule = null;
+    this._callback = null;
+    this._timer = null;
   }
 
   /**
-   * @return {number}
+   * Sets the scheduler; that is, a module with the Async interface,
+   * a callback and optional arguments to be passed to the run function
+   * from the async module.
+   *
+   * @param {!AsyncInterface} asyncModule Object with Async interface.
+   * @param {function()} callback Callback to run.
+   * @return {void}
    */
-  get bufferOffset() {
-    return this._buffers[0].offsetTop;
+  setConfig(asyncModule, callback) {
+    this._asyncModule = asyncModule;
+    this._callback = callback;
+    this._timer = this._asyncModule.run(() => {
+      this._timer = null;
+      debouncerQueue$1.delete(this);
+      this._callback();
+    });
   }
 
   /**
-   * @return {number}
+   * Cancels an active debouncer and returns a reference to itself.
+   *
+   * @return {void}
    */
-  get itemHeight() {
-    if (!this._itemHeightVal) {
-      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
-      // Use background-position temp inline style for unit conversion
-      const tmpStyleProp = 'background-position';
-      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
-      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
-      this.$.fullHeight.style.removeProperty(tmpStyleProp);
-      this._itemHeightVal = parseFloat(itemHeightPx);
+  cancel() {
+    if (this.isActive()) {
+      this._cancelAsync();
+      // Canceling a debouncer removes its spot from the flush queue,
+      // so if a debouncer is manually canceled and re-debounced, it
+      // will reset its flush order (this is a very minor difference from 1.x)
+      // Re-debouncing via the `debounce` API retains the 1.x FIFO flush order
+      debouncerQueue$1.delete(this);
     }
-
-    return this._itemHeightVal;
-  }
-
-  /** @private */
-  get _bufferHeight() {
-    return this.itemHeight * this.bufferSize;
   }
 
   /**
-   * @return {number}
+   * Cancels a debouncer's async callback.
+   *
+   * @return {void}
    */
-  get position() {
-    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  _cancelAsync() {
+    if (this.isActive()) {
+      this._asyncModule.cancel(/** @type {number} */ (this._timer));
+      this._timer = null;
+    }
   }
 
   /**
-   * Current scroller position as index. Can be a fractional number.
+   * Flushes an active debouncer and returns a reference to itself.
    *
-   * @type {number}
+   * @return {void}
    */
-  set position(index) {
-    this._preventScrollEvent = true;
-    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
-      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
-    } else {
-      this._initialIndex = ~~index;
-      this._reset();
-      this._scrollDisabled = true;
-      this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
-      this._scrollDisabled = false;
+  flush() {
+    if (this.isActive()) {
+      this.cancel();
+      this._callback();
     }
+  }
+
+  /**
+   * Returns true if the debouncer is active.
+   *
+   * @return {boolean} True if active.
+   */
+  isActive() {
+    return this._timer != null;
+  }
+}
+
+/**
+ * Adds a `Debouncer` to a list of globally flushable tasks.
+ *
+ * @param {!Debouncer} debouncer Debouncer to enqueue
+ * @return {void}
+ */
+function enqueueDebouncer$1(debouncer) {
+  debouncerQueue$1.add(debouncer);
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+let uniqueId = 0;
+
+/**
+ * Returns a unique integer id.
+ *
+ * @return {number}
+ */
+function generateUniqueId() {
+  // eslint-disable-next-line no-plusplus
+  return uniqueId++;
+}
+
+/**
+ * @license
+ * Copyright (c) 2016 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const template = document.createElement('template');
+template.innerHTML = `
+  <style>
+    :host {
+      display: block;
+      overflow: hidden;
+      height: 500px;
+    }
+
+    #scroller {
+      position: relative;
+      height: 100%;
+      overflow: auto;
+      outline: none;
+      margin-right: -40px;
+      -webkit-overflow-scrolling: touch;
+      overflow-x: hidden;
+    }
+
+    #scroller.notouchscroll {
+      -webkit-overflow-scrolling: auto;
+    }
+
+    #scroller::-webkit-scrollbar {
+      display: none;
+    }
+
+    .buffer {
+      position: absolute;
+      width: var(--vaadin-infinite-scroller-buffer-width, 100%);
+      box-sizing: border-box;
+      padding-right: 40px;
+      top: var(--vaadin-infinite-scroller-buffer-offset, 0);
+      animation: fadein 0.2s;
+    }
+
+    @keyframes fadein {
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
+    }
+  </style>
+
+  <div id="scroller">
+    <div class="buffer"></div>
+    <div class="buffer"></div>
+    <div id="fullHeight"></div>
+  </div>
+`;
+
+/**
+ * @extends HTMLElement
+ * @private
+ */
+class InfiniteScroller extends HTMLElement {
+  constructor() {
+    super();
+
+    const root = this.attachShadow({ mode: 'open' });
+    root.appendChild(template.content.cloneNode(true));
+
+    /**
+     * Count of individual items in each buffer.
+     * The scroller has 2 buffers altogether so bufferSize of 20
+     * will result in 40 buffered DOM items in total.
+     * Changing after initialization not supported.
+     * @type {number}
+     */
+    this.bufferSize = 20;
+
+    /**
+     * The amount of initial scroll top. Needed in order for the
+     * user to be able to scroll backwards.
+     * @type {number}
+     * @private
+     */
+    this._initialScroll = 500000;
+
+    /**
+     * The index/position mapped at _initialScroll point.
+     * @type {number}
+     * @private
+     */
+    this._initialIndex = 0;
+
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this._activated = false;
+  }
+
+  /**
+   * @return {boolean}
+   */
+  get active() {
+    return this._activated;
+  }
+
+  set active(active) {
+    if (active && !this._activated) {
+      this._createPool();
+      this._activated = true;
+    }
+  }
+
+  /**
+   * @return {number}
+   */
+  get bufferOffset() {
+    return this._buffers[0].offsetTop;
+  }
+
+  /**
+   * @return {number}
+   */
+  get itemHeight() {
+    if (!this._itemHeightVal) {
+      const itemHeight = getComputedStyle(this).getPropertyValue('--vaadin-infinite-scroller-item-height');
+      // Use background-position temp inline style for unit conversion
+      const tmpStyleProp = 'background-position';
+      this.$.fullHeight.style.setProperty(tmpStyleProp, itemHeight);
+      const itemHeightPx = getComputedStyle(this.$.fullHeight).getPropertyValue(tmpStyleProp);
+      this.$.fullHeight.style.removeProperty(tmpStyleProp);
+      this._itemHeightVal = parseFloat(itemHeightPx);
+    }
+
+    return this._itemHeightVal;
+  }
+
+  /** @private */
+  get _bufferHeight() {
+    return this.itemHeight * this.bufferSize;
+  }
+
+  /**
+   * @return {number}
+   */
+  get position() {
+    return (this.$.scroller.scrollTop - this._buffers[0].translateY) / this.itemHeight + this._firstIndex;
+  }
+
+  /**
+   * Current scroller position as index. Can be a fractional number.
+   *
+   * @type {number}
+   */
+  set position(index) {
+    this._preventScrollEvent = true;
+    if (index > this._firstIndex && index < this._firstIndex + this.bufferSize * 2) {
+      this.$.scroller.scrollTop = this.itemHeight * (index - this._firstIndex) + this._buffers[0].translateY;
+    } else {
+      this._initialIndex = ~~index;
+      this._reset();
+      this._scrollDisabled = true;
+      this.$.scroller.scrollTop += (index % 1) * this.itemHeight;
+      this._scrollDisabled = false;
+    }
+
+    if (this._mayHaveMomentum) {
+      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
+      this.$.scroller.classList.add('notouchscroll');
+      this._mayHaveMomentum = false;
 
-    if (this._mayHaveMomentum) {
-      // Stop the possible iOS Safari momentum with -webkit-overflow-scrolling: auto;
-      this.$.scroller.classList.add('notouchscroll');
-      this._mayHaveMomentum = false;
-
       setTimeout(() => {
         // Restore -webkit-overflow-scrolling: touch; after a small delay.
         this.$.scroller.classList.remove('notouchscroll');
@@ -1546,11 +2379,11 @@ function showHideChildren(hide, children) {
       } else if (n.localName === 'slot') {
         if (hide) {
           n.__polymerReplaced__ = document.createComment('hidden-slot');
-          wrap(wrap(n).parentNode).replaceChild(n.__polymerReplaced__, n);
+          wrap$1(wrap$1(n).parentNode).replaceChild(n.__polymerReplaced__, n);
         } else {
           const replace = n.__polymerReplaced__;
           if (replace) {
-            wrap(wrap(replace).parentNode).replaceChild(n, replace);
+            wrap$1(wrap$1(replace).parentNode).replaceChild(n, replace);
           }
         }
       }
@@ -2106,7 +2939,7 @@ function modelForElement(template, node) {
     } else {
       // Still in a template scope, keep going up until
       // a __templatizeInstance is found
-      node = wrap(node).parentNode;
+      node = wrap$1(node).parentNode;
     }
   }
   return null;
@@ -2683,7 +3516,7 @@ class DomRepeat extends domRepeatBase {
     // only perform attachment if the element was previously detached.
     if (this.__isDetached) {
       this.__isDetached = false;
-      let wrappedParent = wrap(wrap(this).parentNode);
+      let wrappedParent = wrap$1(wrap$1(this).parentNode);
       for (let i=0; i<this.__instances.length; i++) {
         this.__attachInstance(i, wrappedParent);
       }
@@ -2840,7 +3673,7 @@ class DomRepeat extends domRepeatBase {
   __debounceRender(fn, delay = 0) {
     this.__renderDebouncer = Debouncer.debounce(
           this.__renderDebouncer
-        , delay > 0 ? timeOut$1.after(delay) : microTask
+        , delay > 0 ? timeOut$1.after(delay) : microTask$1
         , fn.bind(this));
     enqueueDebouncer(this.__renderDebouncer);
   }
@@ -2994,7 +3827,7 @@ class DomRepeat extends domRepeatBase {
 
   __detachInstance(idx) {
     let inst = this.__instances[idx];
-    const wrappedRoot = wrap(inst.root);
+    const wrappedRoot = wrap$1(inst.root);
     for (let i=0; i<inst.children.length; i++) {
       let el = inst.children[i];
       wrappedRoot.appendChild(el);
@@ -3025,7 +3858,7 @@ class DomRepeat extends domRepeatBase {
     const inst = this.__stampInstance(item, instIdx, itemIdx);
     let beforeRow = this.__instances[instIdx + 1];
     let beforeNode = beforeRow ? beforeRow.children[0] : this;
-    wrap(wrap(this).parentNode).insertBefore(inst.root, beforeNode);
+    wrap$1(wrap$1(this).parentNode).insertBefore(inst.root, beforeNode);
     this.__instances[instIdx] = inst;
     return inst;
   }
@@ -3085,50 +3918,918 @@ class DomRepeat extends domRepeatBase {
    * @param {!HTMLElement} el Element for which to return the item.
    * @return {*} Item associated with the element.
    */
-  itemForElement(el) {
-    let instance = this.modelForElement(el);
-    return instance && instance[this.as];
-  }
+  itemForElement(el) {
+    let instance = this.modelForElement(el);
+    return instance && instance[this.as];
+  }
+
+  /**
+   * Returns the inst index for a given element stamped by this `dom-repeat`.
+   * If `sort` is provided, the index will reflect the sorted order (rather
+   * than the original array order).
+   *
+   * @param {!HTMLElement} el Element for which to return the index.
+   * @return {?number} Row index associated with the element (note this may
+   *   not correspond to the array index if a user `sort` is applied).
+   */
+  indexForElement(el) {
+    let instance = this.modelForElement(el);
+    return instance && instance[this.indexAs];
+  }
+
+  /**
+   * Returns the template "model" associated with a given element, which
+   * serves as the binding scope for the template instance the element is
+   * contained in. A template model
+   * should be used to manipulate data associated with this template instance.
+   *
+   * Example:
+   *
+   *   let model = modelForElement(el);
+   *   if (model.index < 10) {
+   *     model.set('item.checked', true);
+   *   }
+   *
+   * @param {!HTMLElement} el Element for which to return a template model.
+   * @return {TemplateInstanceBase} Model representing the binding scope for
+   *   the element.
+   */
+  modelForElement(el) {
+    return modelForElement(this.template, el);
+  }
+
+}
+
+customElements.define(DomRepeat.is, DomRepeat);
+
+/**
+@license
+Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+*/
+
+const passiveTouchGestures = false;
+const wrap = (node) => node;
+
+// Detect native touch action support
+const HAS_NATIVE_TA = typeof document.head.style.touchAction === 'string';
+const GESTURE_KEY = '__polymerGestures';
+const HANDLED_OBJ = '__polymerGesturesHandled';
+const TOUCH_ACTION = '__polymerGesturesTouchAction';
+// Radius for tap and track
+const TAP_DISTANCE = 25;
+const TRACK_DISTANCE = 5;
+// Number of last N track positions to keep
+const TRACK_LENGTH = 2;
+
+const MOUSE_EVENTS = ['mousedown', 'mousemove', 'mouseup', 'click'];
+// An array of bitmask values for mapping MouseEvent.which to MouseEvent.buttons
+const MOUSE_WHICH_TO_BUTTONS = [0, 1, 4, 2];
+const MOUSE_HAS_BUTTONS = (function () {
+  try {
+    return new MouseEvent('test', { buttons: 1 }).buttons === 1;
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @param {string} name Possible mouse event name
+ * @return {boolean} true if mouse event, false if not
+ */
+function isMouseEvent(name) {
+  return MOUSE_EVENTS.indexOf(name) > -1;
+}
+
+/* eslint no-empty: ["error", { "allowEmptyCatch": true }] */
+// check for passive event listeners
+let supportsPassive = false;
+(function () {
+  try {
+    const opts = Object.defineProperty({}, 'passive', {
+      // eslint-disable-next-line getter-return
+      get() {
+        supportsPassive = true;
+      },
+    });
+    window.addEventListener('test', null, opts);
+    window.removeEventListener('test', null, opts);
+  } catch (e) {}
+})();
+
+/**
+ * Generate settings for event listeners, dependant on `passiveTouchGestures`
+ *
+ * @param {string} eventName Event name to determine if `{passive}` option is
+ *   needed
+ * @return {{passive: boolean} | undefined} Options to use for addEventListener
+ *   and removeEventListener
+ */
+function PASSIVE_TOUCH(eventName) {
+  if (isMouseEvent(eventName) || eventName === 'touchend') {
+    return;
+  }
+  if (HAS_NATIVE_TA && supportsPassive && passiveTouchGestures) {
+    return { passive: true };
+  }
+}
+
+// Check for touch-only devices
+const IS_TOUCH_ONLY = navigator.userAgent.match(/iP(?:[oa]d|hone)|Android/u);
+
+// Defined at https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute
+/** @type {!Object<boolean>} */
+const canBeDisabled = {
+  button: true,
+  command: true,
+  fieldset: true,
+  input: true,
+  keygen: true,
+  optgroup: true,
+  option: true,
+  select: true,
+  textarea: true,
+};
+
+/**
+ * @param {MouseEvent} ev event to test for left mouse button down
+ * @return {boolean} has left mouse button down
+ */
+function hasLeftMouseButton(ev) {
+  const type = ev.type;
+  // Exit early if the event is not a mouse event
+  if (!isMouseEvent(type)) {
+    return false;
+  }
+  // Ev.button is not reliable for mousemove (0 is overloaded as both left button and no buttons)
+  // instead we use ev.buttons (bitmask of buttons) or fall back to ev.which (deprecated, 0 for no buttons, 1 for left button)
+  if (type === 'mousemove') {
+    // Allow undefined for testing events
+    let buttons = ev.buttons === undefined ? 1 : ev.buttons;
+    if (ev instanceof window.MouseEvent && !MOUSE_HAS_BUTTONS) {
+      buttons = MOUSE_WHICH_TO_BUTTONS[ev.which] || 0;
+    }
+    // Buttons is a bitmask, check that the left button bit is set (1)
+    return Boolean(buttons & 1);
+  }
+  // Allow undefined for testing events
+  const button = ev.button === undefined ? 0 : ev.button;
+  // Ev.button is 0 in mousedown/mouseup/click for left button activation
+  return button === 0;
+}
+
+function isSyntheticClick(ev) {
+  if (ev.type === 'click') {
+    // Ev.detail is 0 for HTMLElement.click in most browsers
+    if (ev.detail === 0) {
+      return true;
+    }
+    // In the worst case, check that the x/y position of the click is within
+    // the bounding box of the target of the event
+    // Thanks IE 10 >:(
+    const t = _findOriginalTarget(ev);
+    // Make sure the target of the event is an element so we can use getBoundingClientRect,
+    // if not, just assume it is a synthetic click
+    if (!t.nodeType || /** @type {Element} */ (t).nodeType !== Node.ELEMENT_NODE) {
+      return true;
+    }
+    const bcr = /** @type {Element} */ (t).getBoundingClientRect();
+    // Use page x/y to account for scrolling
+    const x = ev.pageX,
+      y = ev.pageY;
+    // Ev is a synthetic click if the position is outside the bounding box of the target
+    return !(x >= bcr.left && x <= bcr.right && y >= bcr.top && y <= bcr.bottom);
+  }
+  return false;
+}
+
+const POINTERSTATE = {
+  mouse: {
+    target: null,
+    mouseIgnoreJob: null,
+  },
+  touch: {
+    x: 0,
+    y: 0,
+    id: -1,
+    scrollDecided: false,
+  },
+};
+
+function firstTouchAction(ev) {
+  let ta = 'auto';
+  const path = getComposedPath(ev);
+  for (let i = 0, n; i < path.length; i++) {
+    n = path[i];
+    if (n[TOUCH_ACTION]) {
+      ta = n[TOUCH_ACTION];
+      break;
+    }
+  }
+  return ta;
+}
+
+function trackDocument(stateObj, movefn, upfn) {
+  stateObj.movefn = movefn;
+  stateObj.upfn = upfn;
+  document.addEventListener('mousemove', movefn);
+  document.addEventListener('mouseup', upfn);
+}
+
+function untrackDocument(stateObj) {
+  document.removeEventListener('mousemove', stateObj.movefn);
+  document.removeEventListener('mouseup', stateObj.upfn);
+  stateObj.movefn = null;
+  stateObj.upfn = null;
+}
+
+/**
+ * Returns the composedPath for the given event.
+ * @param {Event} event to process
+ * @return {!Array<!EventTarget>} Path of the event
+ */
+const getComposedPath =
+  window.ShadyDOM && window.ShadyDOM.noPatch
+    ? window.ShadyDOM.composedPath
+    : (event) => (event.composedPath && event.composedPath()) || [];
+
+/** @type {!Object<string, !GestureRecognizer>} */
+const gestures = {};
+
+/** @type {!Array<!GestureRecognizer>} */
+const recognizers = [];
+
+/**
+ * Finds the element rendered on the screen at the provided coordinates.
+ *
+ * Similar to `document.elementFromPoint`, but pierces through
+ * shadow roots.
+ *
+ * @param {number} x Horizontal pixel coordinate
+ * @param {number} y Vertical pixel coordinate
+ * @return {Element} Returns the deepest shadowRoot inclusive element
+ * found at the screen position given.
+ */
+function deepTargetFind(x, y) {
+  let node = document.elementFromPoint(x, y);
+  let next = node;
+  // This code path is only taken when native ShadowDOM is used
+  // if there is a shadowroot, it may have a node at x/y
+  // if there is not a shadowroot, exit the loop
+  while (next && next.shadowRoot && !window.ShadyDOM) {
+    // If there is a node at x/y in the shadowroot, look deeper
+    const oldNext = next;
+    next = next.shadowRoot.elementFromPoint(x, y);
+    // On Safari, elementFromPoint may return the shadowRoot host
+    if (oldNext === next) {
+      break;
+    }
+    if (next) {
+      node = next;
+    }
+  }
+  return node;
+}
+
+/**
+ * A cheaper check than ev.composedPath()[0];
+ *
+ * @private
+ * @param {Event|Touch} ev Event.
+ * @return {EventTarget} Returns the event target.
+ */
+function _findOriginalTarget(ev) {
+  const path = getComposedPath(/** @type {?Event} */ (ev));
+  // It shouldn't be, but sometimes path is empty (window on Safari).
+  return path.length > 0 ? path[0] : ev.target;
+}
+
+/**
+ * @private
+ * @param {Event} ev Event.
+ * @return {void}
+ */
+function _handleNative(ev) {
+  const type = ev.type;
+  const node = ev.currentTarget;
+  const gobj = node[GESTURE_KEY];
+  if (!gobj) {
+    return;
+  }
+  const gs = gobj[type];
+  if (!gs) {
+    return;
+  }
+  if (!ev[HANDLED_OBJ]) {
+    ev[HANDLED_OBJ] = {};
+    if (type.startsWith('touch')) {
+      const t = ev.changedTouches[0];
+      if (type === 'touchstart') {
+        // Only handle the first finger
+        if (ev.touches.length === 1) {
+          POINTERSTATE.touch.id = t.identifier;
+        }
+      }
+      if (POINTERSTATE.touch.id !== t.identifier) {
+        return;
+      }
+      if (!HAS_NATIVE_TA) {
+        if (type === 'touchstart' || type === 'touchmove') {
+          _handleTouchAction(ev);
+        }
+      }
+    }
+  }
+  const handled = ev[HANDLED_OBJ];
+  // Used to ignore synthetic mouse events
+  if (handled.skip) {
+    return;
+  }
+  // Reset recognizer state
+  for (let i = 0, r; i < recognizers.length; i++) {
+    r = recognizers[i];
+    if (gs[r.name] && !handled[r.name]) {
+      if (r.flow && r.flow.start.indexOf(ev.type) > -1 && r.reset) {
+        r.reset();
+      }
+    }
+  }
+  // Enforce gesture recognizer order
+  for (let i = 0, r; i < recognizers.length; i++) {
+    r = recognizers[i];
+    if (gs[r.name] && !handled[r.name]) {
+      handled[r.name] = true;
+      r[type](ev);
+    }
+  }
+}
+
+/**
+ * @private
+ * @param {TouchEvent} ev Event.
+ * @return {void}
+ */
+function _handleTouchAction(ev) {
+  const t = ev.changedTouches[0];
+  const type = ev.type;
+  if (type === 'touchstart') {
+    POINTERSTATE.touch.x = t.clientX;
+    POINTERSTATE.touch.y = t.clientY;
+    POINTERSTATE.touch.scrollDecided = false;
+  } else if (type === 'touchmove') {
+    if (POINTERSTATE.touch.scrollDecided) {
+      return;
+    }
+    POINTERSTATE.touch.scrollDecided = true;
+    const ta = firstTouchAction(ev);
+    let shouldPrevent = false;
+    const dx = Math.abs(POINTERSTATE.touch.x - t.clientX);
+    const dy = Math.abs(POINTERSTATE.touch.y - t.clientY);
+    if (!ev.cancelable) ; else if (ta === 'none') {
+      shouldPrevent = true;
+    } else if (ta === 'pan-x') {
+      shouldPrevent = dy > dx;
+    } else if (ta === 'pan-y') {
+      shouldPrevent = dx > dy;
+    }
+    if (shouldPrevent) {
+      ev.preventDefault();
+    } else {
+      prevent('track');
+    }
+  }
+}
+
+/**
+ * Adds an event listener to a node for the given gesture type.
+ *
+ * @param {!EventTarget} node Node to add listener on
+ * @param {string} evType Gesture type: `down`, `up`, `track`, or `tap`
+ * @param {!function(!Event):void} handler Event listener function to call
+ * @return {boolean} Returns true if a gesture event listener was added.
+ */
+function addListener(node, evType, handler) {
+  if (gestures[evType]) {
+    _add(node, evType, handler);
+    return true;
+  }
+  return false;
+}
+
+/**
+ * Automate the event listeners for the native events
+ *
+ * @private
+ * @param {!EventTarget} node Node on which to add the event.
+ * @param {string} evType Event type to add.
+ * @param {function(!Event)} handler Event handler function.
+ * @return {void}
+ */
+function _add(node, evType, handler) {
+  const recognizer = gestures[evType];
+  const deps = recognizer.deps;
+  const name = recognizer.name;
+  let gobj = node[GESTURE_KEY];
+  if (!gobj) {
+    node[GESTURE_KEY] = gobj = {};
+  }
+  for (let i = 0, dep, gd; i < deps.length; i++) {
+    dep = deps[i];
+    // Don't add mouse handlers on iOS because they cause gray selection overlays
+    if (IS_TOUCH_ONLY && isMouseEvent(dep) && dep !== 'click') {
+      continue;
+    }
+    gd = gobj[dep];
+    if (!gd) {
+      gobj[dep] = gd = { _count: 0 };
+    }
+    if (gd._count === 0) {
+      node.addEventListener(dep, _handleNative, PASSIVE_TOUCH(dep));
+    }
+    gd[name] = (gd[name] || 0) + 1;
+    gd._count = (gd._count || 0) + 1;
+  }
+  node.addEventListener(evType, handler);
+  if (recognizer.touchAction) {
+    setTouchAction(node, recognizer.touchAction);
+  }
+}
+
+/**
+ * Registers a new gesture event recognizer for adding new custom
+ * gesture event types.
+ *
+ * @param {!GestureRecognizer} recog Gesture recognizer descriptor
+ * @return {void}
+ */
+function register(recog) {
+  recognizers.push(recog);
+  recog.emits.forEach((emit) => {
+    gestures[emit] = recog;
+  });
+}
+
+/**
+ * @private
+ * @param {string} evName Event name.
+ * @return {Object} Returns the gesture for the given event name.
+ */
+function _findRecognizerByEvent(evName) {
+  for (let i = 0, r; i < recognizers.length; i++) {
+    r = recognizers[i];
+    for (let j = 0, n; j < r.emits.length; j++) {
+      n = r.emits[j];
+      if (n === evName) {
+        return r;
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Sets scrolling direction on node.
+ *
+ * This value is checked on first move, thus it should be called prior to
+ * adding event listeners.
+ *
+ * @param {!EventTarget} node Node to set touch action setting on
+ * @param {string} value Touch action value
+ * @return {void}
+ */
+function setTouchAction(node, value) {
+  if (HAS_NATIVE_TA && node instanceof HTMLElement) {
+    // NOTE: add touchAction async so that events can be added in
+    // custom element constructors. Otherwise we run afoul of custom
+    // elements restriction against settings attributes (style) in the
+    // constructor.
+    microTask.run(() => {
+      node.style.touchAction = value;
+    });
+  }
+  node[TOUCH_ACTION] = value;
+}
+
+/**
+ * Dispatches an event on the `target` element of `type` with the given
+ * `detail`.
+ * @private
+ * @param {!EventTarget} target The element on which to fire an event.
+ * @param {string} type The type of event to fire.
+ * @param {!Object=} detail The detail object to populate on the event.
+ * @return {void}
+ */
+function _fire(target, type, detail) {
+  const ev = new Event(type, { bubbles: true, cancelable: true, composed: true });
+  ev.detail = detail;
+  wrap(/** @type {!Node} */ (target)).dispatchEvent(ev);
+  // Forward `preventDefault` in a clean way
+  if (ev.defaultPrevented) {
+    const preventer = detail.preventer || detail.sourceEvent;
+    if (preventer && preventer.preventDefault) {
+      preventer.preventDefault();
+    }
+  }
+}
+
+/**
+ * Prevents the dispatch and default action of the given event name.
+ *
+ * @param {string} evName Event name.
+ * @return {void}
+ */
+function prevent(evName) {
+  const recognizer = _findRecognizerByEvent(evName);
+  if (recognizer.info) {
+    recognizer.info.prevent = true;
+  }
+}
+
+register({
+  name: 'downup',
+  deps: ['mousedown', 'touchstart', 'touchend'],
+  flow: {
+    start: ['mousedown', 'touchstart'],
+    end: ['mouseup', 'touchend'],
+  },
+  emits: ['down', 'up'],
+
+  info: {
+    movefn: null,
+    upfn: null,
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @return {void}
+   */
+  reset() {
+    untrackDocument(this.info);
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {MouseEvent} e
+   * @return {void}
+   */
+  mousedown(e) {
+    if (!hasLeftMouseButton(e)) {
+      return;
+    }
+    const t = _findOriginalTarget(e);
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    const movefn = (e) => {
+      if (!hasLeftMouseButton(e)) {
+        downupFire('up', t, e);
+        untrackDocument(self.info);
+      }
+    };
+    const upfn = (e) => {
+      if (hasLeftMouseButton(e)) {
+        downupFire('up', t, e);
+      }
+      untrackDocument(self.info);
+    };
+    trackDocument(this.info, movefn, upfn);
+    downupFire('down', t, e);
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
+   */
+  touchstart(e) {
+    downupFire('down', _findOriginalTarget(e), e.changedTouches[0], e);
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
+   */
+  touchend(e) {
+    downupFire('up', _findOriginalTarget(e), e.changedTouches[0], e);
+  },
+});
+
+/**
+ * @param {string} type
+ * @param {EventTarget} target
+ * @param {Event|Touch} event
+ * @param {Event=} preventer
+ * @return {void}
+ */
+function downupFire(type, target, event, preventer) {
+  if (!target) {
+    return;
+  }
+  _fire(target, type, {
+    x: event.clientX,
+    y: event.clientY,
+    sourceEvent: event,
+    preventer,
+    prevent(e) {
+      return prevent(e);
+    },
+  });
+}
+
+register({
+  name: 'track',
+  touchAction: 'none',
+  deps: ['mousedown', 'touchstart', 'touchmove', 'touchend'],
+  flow: {
+    start: ['mousedown', 'touchstart'],
+    end: ['mouseup', 'touchend'],
+  },
+  emits: ['track'],
+
+  info: {
+    x: 0,
+    y: 0,
+    state: 'start',
+    started: false,
+    moves: [],
+    /** @this {GestureInfo} */
+    addMove(move) {
+      if (this.moves.length > TRACK_LENGTH) {
+        this.moves.shift();
+      }
+      this.moves.push(move);
+    },
+    movefn: null,
+    upfn: null,
+    prevent: false,
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @return {void}
+   */
+  reset() {
+    this.info.state = 'start';
+    this.info.started = false;
+    this.info.moves = [];
+    this.info.x = 0;
+    this.info.y = 0;
+    this.info.prevent = false;
+    untrackDocument(this.info);
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {MouseEvent} e
+   * @return {void}
+   */
+  mousedown(e) {
+    if (!hasLeftMouseButton(e)) {
+      return;
+    }
+    const t = _findOriginalTarget(e);
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const self = this;
+    const movefn = (e) => {
+      const x = e.clientX,
+        y = e.clientY;
+      if (trackHasMovedEnough(self.info, x, y)) {
+        // First move is 'start', subsequent moves are 'move', mouseup is 'end'
+        self.info.state = self.info.started ? (e.type === 'mouseup' ? 'end' : 'track') : 'start';
+        if (self.info.state === 'start') {
+          // If and only if tracking, always prevent tap
+          prevent('tap');
+        }
+        self.info.addMove({ x, y });
+        if (!hasLeftMouseButton(e)) {
+          // Always fire "end"
+          self.info.state = 'end';
+          untrackDocument(self.info);
+        }
+        if (t) {
+          trackFire(self.info, t, e);
+        }
+        self.info.started = true;
+      }
+    };
+    const upfn = (e) => {
+      if (self.info.started) {
+        movefn(e);
+      }
+
+      // Remove the temporary listeners
+      untrackDocument(self.info);
+    };
+    // Add temporary document listeners as mouse retargets
+    trackDocument(this.info, movefn, upfn);
+    this.info.x = e.clientX;
+    this.info.y = e.clientY;
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
+   */
+  touchstart(e) {
+    const ct = e.changedTouches[0];
+    this.info.x = ct.clientX;
+    this.info.y = ct.clientY;
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
+   */
+  touchmove(e) {
+    const t = _findOriginalTarget(e);
+    const ct = e.changedTouches[0];
+    const x = ct.clientX,
+      y = ct.clientY;
+    if (trackHasMovedEnough(this.info, x, y)) {
+      if (this.info.state === 'start') {
+        // If and only if tracking, always prevent tap
+        prevent('tap');
+      }
+      this.info.addMove({ x, y });
+      trackFire(this.info, t, ct);
+      this.info.state = 'track';
+      this.info.started = true;
+    }
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
+   */
+  touchend(e) {
+    const t = _findOriginalTarget(e);
+    const ct = e.changedTouches[0];
+    // Only trackend if track was started and not aborted
+    if (this.info.started) {
+      // Reset started state on up
+      this.info.state = 'end';
+      this.info.addMove({ x: ct.clientX, y: ct.clientY });
+      trackFire(this.info, t, ct);
+    }
+  },
+});
+
+/**
+ * @param {!GestureInfo} info
+ * @param {number} x
+ * @param {number} y
+ * @return {boolean}
+ */
+function trackHasMovedEnough(info, x, y) {
+  if (info.prevent) {
+    return false;
+  }
+  if (info.started) {
+    return true;
+  }
+  const dx = Math.abs(info.x - x);
+  const dy = Math.abs(info.y - y);
+  return dx >= TRACK_DISTANCE || dy >= TRACK_DISTANCE;
+}
+
+/**
+ * @param {!GestureInfo} info
+ * @param {?EventTarget} target
+ * @param {Touch} touch
+ * @return {void}
+ */
+function trackFire(info, target, touch) {
+  if (!target) {
+    return;
+  }
+  const secondlast = info.moves[info.moves.length - 2];
+  const lastmove = info.moves[info.moves.length - 1];
+  const dx = lastmove.x - info.x;
+  const dy = lastmove.y - info.y;
+  let ddx,
+    ddy = 0;
+  if (secondlast) {
+    ddx = lastmove.x - secondlast.x;
+    ddy = lastmove.y - secondlast.y;
+  }
+  _fire(target, 'track', {
+    state: info.state,
+    x: touch.clientX,
+    y: touch.clientY,
+    dx,
+    dy,
+    ddx,
+    ddy,
+    sourceEvent: touch,
+    hover() {
+      return deepTargetFind(touch.clientX, touch.clientY);
+    },
+  });
+}
+
+register({
+  name: 'tap',
+  deps: ['mousedown', 'click', 'touchstart', 'touchend'],
+  flow: {
+    start: ['mousedown', 'touchstart'],
+    end: ['click', 'touchend'],
+  },
+  emits: ['tap'],
+  info: {
+    x: NaN,
+    y: NaN,
+    prevent: false,
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @return {void}
+   */
+  reset() {
+    this.info.x = NaN;
+    this.info.y = NaN;
+    this.info.prevent = false;
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {MouseEvent} e
+   * @return {void}
+   */
+  mousedown(e) {
+    if (hasLeftMouseButton(e)) {
+      this.info.x = e.clientX;
+      this.info.y = e.clientY;
+    }
+  },
+
+  /**
+   * @this {GestureRecognizer}
+   * @param {MouseEvent} e
+   * @return {void}
+   */
+  click(e) {
+    if (hasLeftMouseButton(e)) {
+      trackForward(this.info, e);
+    }
+  },
 
   /**
-   * Returns the inst index for a given element stamped by this `dom-repeat`.
-   * If `sort` is provided, the index will reflect the sorted order (rather
-   * than the original array order).
-   *
-   * @param {!HTMLElement} el Element for which to return the index.
-   * @return {?number} Row index associated with the element (note this may
-   *   not correspond to the array index if a user `sort` is applied).
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
    */
-  indexForElement(el) {
-    let instance = this.modelForElement(el);
-    return instance && instance[this.indexAs];
-  }
+  touchstart(e) {
+    const touch = e.changedTouches[0];
+    this.info.x = touch.clientX;
+    this.info.y = touch.clientY;
+  },
 
   /**
-   * Returns the template "model" associated with a given element, which
-   * serves as the binding scope for the template instance the element is
-   * contained in. A template model
-   * should be used to manipulate data associated with this template instance.
-   *
-   * Example:
-   *
-   *   let model = modelForElement(el);
-   *   if (model.index < 10) {
-   *     model.set('item.checked', true);
-   *   }
-   *
-   * @param {!HTMLElement} el Element for which to return a template model.
-   * @return {TemplateInstanceBase} Model representing the binding scope for
-   *   the element.
+   * @this {GestureRecognizer}
+   * @param {TouchEvent} e
+   * @return {void}
    */
-  modelForElement(el) {
-    return modelForElement(this.template, el);
-  }
+  touchend(e) {
+    trackForward(this.info, e.changedTouches[0], e);
+  },
+});
 
+/**
+ * @param {!GestureInfo} info
+ * @param {Event | Touch} e
+ * @param {Event=} preventer
+ * @return {void}
+ */
+function trackForward(info, e, preventer) {
+  const dx = Math.abs(e.clientX - info.x);
+  const dy = Math.abs(e.clientY - info.y);
+  // Find original target from `preventer` for TouchEvents, or `e` for MouseEvents
+  const t = _findOriginalTarget(preventer || e);
+  if (!t || (canBeDisabled[/** @type {!HTMLElement} */ (t).localName] && t.hasAttribute('disabled'))) {
+    return;
+  }
+  // Dx,dy can be NaN if `click` has been simulated and there was no `down` for `start`
+  if (isNaN(dx) || isNaN(dy) || (dx <= TAP_DISTANCE && dy <= TAP_DISTANCE) || isSyntheticClick(e)) {
+    // Prevent taps from being generated if an event has canceled them
+    if (!info.prevent) {
+      _fire(t, 'tap', {
+        x: e.clientX,
+        y: e.clientY,
+        sourceEvent: e,
+        preventer,
+      });
+    }
+  }
 }
 
-customElements.define(DomRepeat.is, DomRepeat);
-
 /**
  * @license
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
@@ -3663,6 +5364,87 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
 
 defineCustomElement$1(MonthCalendar);
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * @typedef ReactiveController
+ * @type {import('lit').ReactiveController}
+ */
+
+/**
+ * A mixin for connecting controllers to the element.
+ *
+ * @polymerMixin
+ */
+const ControllerMixin = dedupingMixin((superClass) => {
+  // If the superclass extends from LitElement,
+  // use its own controllers implementation.
+  if (typeof superClass.prototype.addController === 'function') {
+    return superClass;
+  }
+
+  return class ControllerMixinClass extends superClass {
+    constructor() {
+      super();
+
+      /**
+       * @type {Set<ReactiveController>}
+       */
+      this.__controllers = new Set();
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostConnected) {
+          c.hostConnected();
+        }
+      });
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      this.__controllers.forEach((c) => {
+        if (c.hostDisconnected) {
+          c.hostDisconnected();
+        }
+      });
+    }
+
+    /**
+     * Registers a controller to participate in the element update cycle.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    addController(controller) {
+      this.__controllers.add(controller);
+      // Call hostConnected if a controller is added after the element is attached.
+      if (this.$ !== undefined && this.isConnected && controller.hostConnected) {
+        controller.hostConnected();
+      }
+    }
+
+    /**
+     * Removes a controller from the element.
+     *
+     * @param {ReactiveController} controller
+     * @protected
+     */
+    removeController(controller) {
+      this.__controllers.delete(controller);
+    }
+  };
+});
+
 /**
  * @license
  * Copyright (c) 2021 - 2023 Vaadin Ltd.
@@ -3682,53 +5464,411 @@ class MediaQueryController {
      */
     this.query = query;
 
-    /**
-     * Function to call when media query changes.
-     *
-     * @type {Function}
-     * @protected
-     */
-    this.callback = callback;
+    /**
+     * Function to call when media query changes.
+     *
+     * @type {Function}
+     * @protected
+     */
+    this.callback = callback;
+
+    this._boundQueryHandler = this._queryHandler.bind(this);
+  }
+
+  hostConnected() {
+    this._removeListener();
+
+    this._mediaQuery = window.matchMedia(this.query);
+
+    this._addListener();
+
+    this._queryHandler(this._mediaQuery);
+  }
+
+  hostDisconnected() {
+    this._removeListener();
+  }
+
+  /** @private */
+  _addListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.addListener(this._boundQueryHandler);
+    }
+  }
+
+  /** @private */
+  _removeListener() {
+    if (this._mediaQuery) {
+      this._mediaQuery.removeListener(this._boundQueryHandler);
+    }
+
+    this._mediaQuery = null;
+  }
+
+  /** @private */
+  _queryHandler(mediaQuery) {
+    if (typeof this.callback === 'function') {
+      this.callback(mediaQuery.matches);
+    }
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * Returns true if the given node is an empty text node, false otherwise.
+ *
+ * @param {Node} node
+ * @return {boolean}
+ */
+function isEmptyTextNode(node) {
+  return node.nodeType === Node.TEXT_NODE && node.textContent.trim() === '';
+}
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A helper for observing slot changes.
+ */
+class SlotObserver {
+  constructor(slot, callback) {
+    /** @type HTMLSlotElement */
+    this.slot = slot;
+
+    /** @type Function */
+    this.callback = callback;
+
+    /** @type {Node[]} */
+    this._storedNodes = [];
+
+    this._connected = false;
+    this._scheduled = false;
+
+    this._boundSchedule = () => {
+      this._schedule();
+    };
+
+    this.connect();
+    this._schedule();
+  }
+
+  /**
+   * Activates an observer. This method is automatically called when
+   * a `SlotObserver` is created. It should only be called to  re-activate
+   * an observer that has been deactivated via the `disconnect` method.
+   */
+  connect() {
+    this.slot.addEventListener('slotchange', this._boundSchedule);
+    this._connected = true;
+  }
+
+  /**
+   * Deactivates the observer. After calling this method the observer callback
+   * will not be called when changes to slotted nodes occur. The `connect` method
+   * may be subsequently called to reactivate the observer.
+   */
+  disconnect() {
+    this.slot.removeEventListener('slotchange', this._boundSchedule);
+    this._connected = false;
+  }
+
+  /** @private */
+  _schedule() {
+    if (!this._scheduled) {
+      this._scheduled = true;
+
+      queueMicrotask(() => {
+        this.flush();
+      });
+    }
+  }
+
+  /**
+   * Run the observer callback synchronously.
+   */
+  flush() {
+    if (!this._connected) {
+      return;
+    }
+
+    this._scheduled = false;
+
+    this._processNodes();
+  }
+
+  /** @private */
+  _processNodes() {
+    const currentNodes = this.slot.assignedNodes({ flatten: true });
+
+    let addedNodes = [];
+    const removedNodes = [];
+    const movedNodes = [];
+
+    if (currentNodes.length) {
+      addedNodes = currentNodes.filter((node) => !this._storedNodes.includes(node));
+    }
+
+    if (this._storedNodes.length) {
+      this._storedNodes.forEach((node, index) => {
+        const idx = currentNodes.indexOf(node);
+        if (idx === -1) {
+          removedNodes.push(node);
+        } else if (idx !== index) {
+          movedNodes.push(node);
+        }
+      });
+    }
+
+    if (addedNodes.length || removedNodes.length || movedNodes.length) {
+      this.callback({ addedNodes, movedNodes, removedNodes });
+    }
+
+    this._storedNodes = currentNodes;
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for providing content to slot element and observing changes.
+ */
+class SlotController extends EventTarget {
+  /**
+   * Ensure that every instance has unique ID.
+   *
+   * @param {HTMLElement} host
+   * @param {string} slotName
+   * @return {string}
+   * @protected
+   */
+  static generateId(host, slotName) {
+    const prefix = slotName || 'default';
+    return `${prefix}-${host.localName}-${generateUniqueId()}`;
+  }
+
+  constructor(host, slotName, tagName, config = {}) {
+    super();
+
+    const { initializer, multiple, observe, useUniqueId } = config;
+
+    this.host = host;
+    this.slotName = slotName;
+    this.tagName = tagName;
+    this.observe = typeof observe === 'boolean' ? observe : true;
+    this.multiple = typeof multiple === 'boolean' ? multiple : false;
+    this.slotInitializer = initializer;
+
+    if (multiple) {
+      this.nodes = [];
+    }
+
+    // Only generate the default ID if requested by the controller.
+    if (useUniqueId) {
+      this.defaultId = this.constructor.generateId(host, slotName);
+    }
+  }
+
+  hostConnected() {
+    if (!this.initialized) {
+      if (this.multiple) {
+        this.initMultiple();
+      } else {
+        this.initSingle();
+      }
+
+      if (this.observe) {
+        this.observeSlot();
+      }
+
+      this.initialized = true;
+    }
+  }
+
+  /** @protected */
+  initSingle() {
+    let node = this.getSlotChild();
+
+    if (!node) {
+      node = this.attachDefaultNode();
+      this.initNode(node);
+    } else {
+      this.node = node;
+      this.initAddedNode(node);
+    }
+  }
+
+  /** @protected */
+  initMultiple() {
+    const children = this.getSlotChildren();
 
-    this._boundQueryHandler = this._queryHandler.bind(this);
+    if (children.length === 0) {
+      const defaultNode = this.attachDefaultNode();
+      if (defaultNode) {
+        this.nodes = [defaultNode];
+        this.initNode(defaultNode);
+      }
+    } else {
+      this.nodes = children;
+      children.forEach((node) => {
+        this.initAddedNode(node);
+      });
+    }
   }
 
-  hostConnected() {
-    this._removeListener();
+  /**
+   * Create and attach default node using the provided tag name, if any.
+   * @return {Node | undefined}
+   * @protected
+   */
+  attachDefaultNode() {
+    const { host, slotName, tagName } = this;
+
+    // Check if the node was created previously and if so, reuse it.
+    let node = this.defaultNode;
+
+    // Tag name is optional, sometimes we don't init default content.
+    if (!node && tagName) {
+      node = document.createElement(tagName);
+      if (node instanceof Element) {
+        if (slotName !== '') {
+          node.setAttribute('slot', slotName);
+        }
+        this.node = node;
+        this.defaultNode = node;
+      }
+    }
 
-    this._mediaQuery = window.matchMedia(this.query);
+    if (node) {
+      host.appendChild(node);
+    }
 
-    this._addListener();
+    return node;
+  }
 
-    this._queryHandler(this._mediaQuery);
+  /**
+   * Return the list of nodes matching the slot managed by the controller.
+   * @return {Node}
+   */
+  getSlotChildren() {
+    const { slotName } = this;
+    return Array.from(this.host.childNodes).filter((node) => {
+      // Either an element (any slot) or a text node (only un-named slot).
+      return (
+        (node.nodeType === Node.ELEMENT_NODE && node.slot === slotName) ||
+        (node.nodeType === Node.TEXT_NODE && node.textContent.trim() && slotName === '')
+      );
+    });
   }
 
-  hostDisconnected() {
-    this._removeListener();
+  /**
+   * Return a reference to the node managed by the controller.
+   * @return {Node}
+   */
+  getSlotChild() {
+    return this.getSlotChildren()[0];
   }
 
-  /** @private */
-  _addListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.addListener(this._boundQueryHandler);
+  /**
+   * Run `slotInitializer` for the node managed by the controller.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initNode(node) {
+    const { slotInitializer } = this;
+    // Don't try to bind `this` to initializer (normally it's arrow function).
+    // Instead, pass the host as a first argument to access component's state.
+    if (slotInitializer) {
+      slotInitializer(node, this.host);
     }
   }
 
-  /** @private */
-  _removeListener() {
-    if (this._mediaQuery) {
-      this._mediaQuery.removeListener(this._boundQueryHandler);
-    }
+  /**
+   * Override to initialize the newly added custom node.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  initCustomNode(_node) {}
 
-    this._mediaQuery = null;
-  }
+  /**
+   * Override to teardown slotted node when it's removed.
+   *
+   * @param {Node} _node
+   * @protected
+   */
+  teardownNode(_node) {}
 
-  /** @private */
-  _queryHandler(mediaQuery) {
-    if (typeof this.callback === 'function') {
-      this.callback(mediaQuery.matches);
+  /**
+   * Run both `initCustomNode` and `initNode` for a custom slotted node.
+   *
+   * @param {Node} node
+   * @protected
+   */
+  initAddedNode(node) {
+    if (node !== this.defaultNode) {
+      this.initCustomNode(node);
+      this.initNode(node);
     }
   }
+
+  /**
+   * Setup the observer to manage slot content changes.
+   * @protected
+   */
+  observeSlot() {
+    const { slotName } = this;
+    const selector = slotName === '' ? 'slot:not([name])' : `slot[name=${slotName}]`;
+    const slot = this.host.shadowRoot.querySelector(selector);
+
+    this.__slotObserver = new SlotObserver(slot, ({ addedNodes, removedNodes }) => {
+      const current = this.multiple ? this.nodes : [this.node];
+
+      // Calling `slot.assignedNodes()` includes whitespace text nodes in case of default slot:
+      // unlike comment nodes, they are not filtered out. So we need to manually ignore them.
+      const newNodes = addedNodes.filter((node) => !isEmptyTextNode(node) && !current.includes(node));
+
+      if (removedNodes.length) {
+        this.nodes = current.filter((node) => !removedNodes.includes(node));
+
+        removedNodes.forEach((node) => {
+          this.teardownNode(node);
+        });
+      }
+
+      if (newNodes && newNodes.length > 0) {
+        if (this.multiple) {
+          // Remove default node if exists
+          if (this.defaultNode) {
+            this.defaultNode.remove();
+          }
+          this.nodes = [...current, ...newNodes].filter((node) => node !== this.defaultNode);
+          newNodes.forEach((node) => {
+            this.initAddedNode(node);
+          });
+        } else {
+          // Remove previous node if exists
+          if (this.node) {
+            this.node.remove();
+          }
+          this.node = newNodes[0];
+          this.initAddedNode(this.node);
+        }
+      }
+    });
+  }
 }
 
 /**
@@ -4877,6 +7017,322 @@ class DatePickerOverlayContent extends DatePickerOverlayContentMixin(
 
 defineCustomElement$1(DatePickerOverlayContent);
 
+/**
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+if (!window.Vaadin) {
+  window.Vaadin = {};
+}
+
+/**
+ * Array of Vaadin custom element classes that have been finalized.
+ */
+if (!window.Vaadin.registrations) {
+  window.Vaadin.registrations = [];
+}
+
+if (!window.Vaadin.developmentModeCallback) {
+  window.Vaadin.developmentModeCallback = {};
+}
+
+window.Vaadin.developmentModeCallback['vaadin-usage-statistics'] = function () {
+  usageStatistics();
+};
+
+let statsJob;
+
+const registered = new Set();
+
+/**
+ * @polymerMixin
+ * @mixes DirMixin
+ */
+const ElementMixin = (superClass) =>
+  class VaadinElementMixin extends DirMixin(superClass) {
+    static get version() {
+      return '24.2.3';
+    }
+
+    /** @protected */
+    static finalize() {
+      super.finalize();
+
+      const { is } = this;
+
+      // Registers a class prototype for telemetry purposes.
+      if (is && !registered.has(is)) {
+        window.Vaadin.registrations.push(this);
+        registered.add(is);
+
+        if (window.Vaadin.developmentModeCallback) {
+          statsJob = Debouncer$1.debounce(statsJob, idlePeriod, () => {
+            window.Vaadin.developmentModeCallback['vaadin-usage-statistics']();
+          });
+          enqueueDebouncer$1(statsJob);
+        }
+      }
+    }
+
+    constructor() {
+      super();
+
+      if (document.doctype === null) {
+        console.warn(
+          'Vaadin components require the "standards mode" declaration. Please add <!DOCTYPE html> to the HTML document.',
+        );
+      }
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller that manages the slotted tooltip element.
+ */
+class TooltipController extends SlotController {
+  constructor(host) {
+    // Do not provide slot factory to create tooltip lazily.
+    super(host, 'tooltip');
+
+    this.setTarget(host);
+  }
+
+  /**
+   * Override to initialize the newly added custom tooltip.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  initCustomNode(tooltipNode) {
+    tooltipNode.target = this.target;
+
+    if (this.ariaTarget !== undefined) {
+      tooltipNode.ariaTarget = this.ariaTarget;
+    }
+
+    if (this.context !== undefined) {
+      tooltipNode.context = this.context;
+    }
+
+    if (this.manual !== undefined) {
+      tooltipNode.manual = this.manual;
+    }
+
+    if (this.opened !== undefined) {
+      tooltipNode.opened = this.opened;
+    }
+
+    if (this.position !== undefined) {
+      tooltipNode._position = this.position;
+    }
+
+    if (this.shouldShow !== undefined) {
+      tooltipNode.shouldShow = this.shouldShow;
+    }
+
+    this.__notifyChange();
+  }
+
+  /**
+   * Override to notify the host when the tooltip is removed.
+   *
+   * @param {Node} tooltipNode
+   * @protected
+   * @override
+   */
+  teardownNode() {
+    this.__notifyChange();
+  }
+
+  /**
+   * Set an HTML element for linking with the tooltip overlay
+   * via `aria-describedby` attribute used by screen readers.
+   * @param {HTMLElement} ariaTarget
+   */
+  setAriaTarget(ariaTarget) {
+    this.ariaTarget = ariaTarget;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.ariaTarget = ariaTarget;
+    }
+  }
+
+  /**
+   * Set a context object to be used by generator.
+   * @param {object} context
+   */
+  setContext(context) {
+    this.context = context;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.context = context;
+    }
+  }
+
+  /**
+   * Toggle manual state on the slotted tooltip.
+   * @param {boolean} manual
+   */
+  setManual(manual) {
+    this.manual = manual;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.manual = manual;
+    }
+  }
+
+  /**
+   * Toggle opened state on the slotted tooltip.
+   * @param {boolean} opened
+   */
+  setOpened(opened) {
+    this.opened = opened;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.opened = opened;
+    }
+  }
+
+  /**
+   * Set default position for the slotted tooltip.
+   * This can be overridden by setting the position
+   * using corresponding property or attribute.
+   * @param {string} position
+   */
+  setPosition(position) {
+    this.position = position;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode._position = position;
+    }
+  }
+
+  /**
+   * Set function used to detect whether to show
+   * the tooltip based on a condition.
+   * @param {Function} shouldShow
+   */
+  setShouldShow(shouldShow) {
+    this.shouldShow = shouldShow;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.shouldShow = shouldShow;
+    }
+  }
+
+  /**
+   * Set an HTML element to attach the tooltip to.
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.target = target;
+
+    const tooltipNode = this.node;
+    if (tooltipNode) {
+      tooltipNode.target = target;
+    }
+  }
+
+  /** @private */
+  __notifyChange() {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  }
+}
+
+/**
+ * @license
+ * Copyright (c) 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A mixin that forwards CSS class names to the internal overlay element
+ * by setting the `overlayClass` property or `overlay-class` attribute.
+ *
+ * @polymerMixin
+ */
+const OverlayClassMixin = (superclass) =>
+  class OverlayClassMixinClass extends superclass {
+    static get properties() {
+      return {
+        /**
+         * A space-delimited list of CSS class names to set on the overlay element.
+         * This property does not affect other CSS class names set manually via JS.
+         *
+         * Note, if the CSS class name was set with this property, clearing it will
+         * remove it from the overlay, even if the same class name was also added
+         * manually, e.g. by using `classList.add()` in the `renderer` function.
+         *
+         * @attr {string} overlay-class
+         */
+        overlayClass: {
+          type: String,
+        },
+
+        /**
+         * An overlay element on which CSS class names are set.
+         *
+         * @protected
+         */
+        _overlayElement: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__updateOverlayClassNames(overlayClass, _overlayElement)'];
+    }
+
+    /** @private */
+    __updateOverlayClassNames(overlayClass, overlayElement) {
+      if (!overlayElement) {
+        return;
+      }
+
+      // Overlay is set but overlayClass is not set
+      if (overlayClass === undefined) {
+        return;
+      }
+
+      const { classList } = overlayElement;
+
+      if (!this.__initialClasses) {
+        this.__initialClasses = new Set(classList);
+      }
+
+      if (Array.isArray(this.__previousClasses)) {
+        // Remove old classes that no longer apply
+        const classesToRemove = this.__previousClasses.filter((name) => !this.__initialClasses.has(name));
+        if (classesToRemove.length > 0) {
+          classList.remove(...classesToRemove);
+        }
+      }
+
+      // Add new classes based on the overlayClass
+      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
+      if (classesToAdd.length > 0) {
+        classList.add(...classesToAdd);
+      }
+
+      this.__previousClasses = classesToAdd;
+    }
+  };
+
 /**
  * @license
  * Copyright (c) 2016 - 2023 Vaadin Ltd.
@@ -6297,14 +8753,14 @@ class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(Element
 
 defineCustomElement$1(DatePicker);
 
-function _typeof(o) {
+function _typeof(obj) {
   "@babel/helpers - typeof";
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
 }
 
 function requiredArgs(required, args) {