@everymatrix/general-input 1.28.7 → 1.28.8

package/dist/components/virtual-keyboard-controller.js

@@ -1,9 +1,9 @@
-import { i, r as registerStyles, J as getDeepActiveElement, M as getFocusableElements, N as isElementFocused, H as ControllerMixin, O as getAncestorRootNodes } from './field-mixin.js';
+import { i, r as registerStyles, d as dedupingMixin, B as PropertyEffects, G as strictTemplatePolicy, w as wrap, H as legacyWarnings, J as getFocusableElements, b as isElementFocused, T as ThemableMixin, A as DirMixin, C as ControllerMixin, P as PolymerElement, h as html, m as FlattenedNodesObserver, M as getAncestorRootNodes } from './field-mixin.js';
 import { b as isIOS } from './input-field-shared-styles.js';
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -74,113 +74,7 @@ const overlay = i`
 
 registerStyles('', overlay, { moduleId: 'lumo-overlay' });
 
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const menuOverlayCore = i`
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.14s lumo-overlay-dummy-animation;
-  }
-
-  [part='overlay'] {
-    will-change: opacity, transform;
-  }
-
-  :host([opening]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-enter ease-out both;
-  }
-
-  @keyframes lumo-menu-overlay-enter {
-    0% {
-      opacity: 0;
-      transform: translateY(-4px);
-    }
-  }
-
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-exit both;
-  }
-
-  @keyframes lumo-menu-overlay-exit {
-    100% {
-      opacity: 0;
-    }
-  }
-`;
-
-registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
-
-const menuOverlayExt = i`
-  /* Small viewport (bottom sheet) styles */
-  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
-  @media (max-width: 420px), (max-height: 420px) {
-    :host {
-      top: 0 !important;
-      right: 0 !important;
-      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-      left: 0 !important;
-      align-items: stretch !important;
-      justify-content: flex-end !important;
-    }
-
-    [part='overlay'] {
-      max-height: 50vh;
-      width: 100vw;
-      border-radius: 0;
-      box-shadow: var(--lumo-box-shadow-xl);
-    }
-
-    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-    [part='content'] {
-      padding: 30px var(--lumo-space-m);
-      max-height: inherit;
-      box-sizing: border-box;
-      -webkit-overflow-scrolling: touch;
-      overflow: auto;
-      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-    }
-
-    [part='backdrop'] {
-      display: block;
-    }
-
-    /* Animations */
-
-    :host([opening]) [part='overlay'] {
-      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-    }
-
-    :host([closing]),
-    :host([closing]) [part='backdrop'] {
-      animation-delay: 0.14s;
-    }
-
-    :host([closing]) [part='overlay'] {
-      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
-    }
-  }
-
-  @keyframes lumo-mobile-menu-overlay-enter {
-    0% {
-      transform: translateY(150%);
-    }
-  }
-
-  @keyframes lumo-mobile-menu-overlay-exit {
-    100% {
-      transform: translateY(150%);
-    }
-  }
-`;
-
-const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
-
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+registerStyles('vaadin-overlay', overlay, { moduleId: 'lumo-vaadin-overlay' });
 
 /**
 @license
@@ -256,326 +150,851 @@ function afterNextRender(context, callback, args) {
 }
 
 /**
- * @license
- * Copyright (c) 2017 Anton Korzunov
- * SPDX-License-Identifier: MIT
- */
-
-/**
- * @fileoverview
- *
- * This module includes JS code copied from the `aria-hidden` package:
- * https://github.com/theKashey/aria-hidden/blob/master/src/index.ts
- */
-
-/** @type {WeakMap<Element, number>} */
-let counterMap = new WeakMap();
-
-/** @type {WeakMap<Element, boolean>} */
-let uncontrolledNodes = new WeakMap();
-
-/** @type {Record<string, WeakMap<Element, number>>} */
-let markerMap = {};
+@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
+*/
 
-/** @type {number} */
-let lockCount = 0;
+// Common implementation for mixin & behavior
+function mutablePropertyChange(inst, property, value, old, mutableData) {
+  let isObject;
+  if (mutableData) {
+    isObject = (typeof value === 'object' && value !== null);
+    // Pull `old` for Objects from temp cache, but treat `null` as a primitive
+    if (isObject) {
+      old = inst.__dataTemp[property];
+    }
+  }
+  // Strict equality check, but return false for NaN===NaN
+  let shouldChange = (old !== value && (old === old || value === value));
+  // Objects are stored in temporary cache (cleared at end of
+  // turn), which is used for dirty-checking
+  if (isObject && shouldChange) {
+    inst.__dataTemp[property] = value;
+  }
+  return shouldChange;
+}
 
 /**
- * @param {?Node} node
- * @return {boolean}
+ * Element class mixin to skip strict dirty-checking for objects and arrays
+ * (always consider them to be "dirty"), for use on elements utilizing
+ * `PropertyEffects`
+ *
+ * By default, `PropertyEffects` performs strict dirty checking on
+ * objects, which means that any deep modifications to an object or array will
+ * not be propagated unless "immutable" data patterns are used (i.e. all object
+ * references from the root to the mutation were changed).
+ *
+ * Polymer also provides a proprietary data mutation and path notification API
+ * (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
+ * mutation and notification of deep changes in an object graph to all elements
+ * bound to the same object graph.
+ *
+ * In cases where neither immutable patterns nor the data mutation API can be
+ * used, applying this mixin will cause Polymer to skip dirty checking for
+ * objects and arrays (always consider them to be "dirty").  This allows a
+ * user to make a deep modification to a bound object graph, and then either
+ * simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
+ * (e.g. `this.notifyPath('items')`) to update the tree.  Note that all
+ * elements that wish to be updated based on deep mutations must apply this
+ * mixin or otherwise skip strict dirty checking for objects/arrays.
+ * Specifically, any elements in the binding tree between the source of a
+ * mutation and the consumption of it must apply this mixin or enable the
+ * `OptionalMutableData` mixin.
+ *
+ * In order to make the dirty check strategy configurable, see
+ * `OptionalMutableData`.
+ *
+ * Note, the performance characteristics of propagating large object graphs
+ * will be worse as opposed to using strict dirty checking with immutable
+ * patterns or Polymer's path notification API.
+ *
+ * @mixinFunction
+ * @polymer
+ * @summary Element class mixin to skip strict dirty-checking for objects
+ *   and arrays
+ * @template T
+ * @param {function(new:T)} superClass Class to apply mixin to.
+ * @return {function(new:T)} superClass with mixin applied.
  */
-const isElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
+const MutableData = dedupingMixin(superClass => {
 
-/**
- * @param  {...unknown} args
- */
-const logError = (...args) => {
-  console.error(`Error: ${args.join(' ')}. Skip setting aria-hidden.`);
-};
+  /**
+   * @polymer
+   * @mixinClass
+   * @implements {Polymer_MutableData}
+   */
+  class MutableData extends superClass {
+    /**
+     * Overrides `PropertyEffects` to provide option for skipping
+     * strict equality checking for Objects and Arrays.
+     *
+     * This method pulls the value to dirty check against from the `__dataTemp`
+     * cache (rather than the normal `__data` cache) for Objects.  Since the temp
+     * cache is cleared at the end of a turn, this implementation allows
+     * side-effects of deep object changes to be processed by re-setting the
+     * same object (using the temp cache as an in-turn backstop to prevent
+     * cycles due to 2-way notification).
+     *
+     * @param {string} property Property name
+     * @param {*} value New property value
+     * @param {*} old Previous property value
+     * @return {boolean} Whether the property should be considered a change
+     * @protected
+     */
+    _shouldPropertyChange(property, value, old) {
+      return mutablePropertyChange(this, property, value, old, true);
+    }
 
-/**
- * @param {HTMLElement} parent
- * @param {Element[]} targets
- * @return {Element[]}
- */
-const correctTargets = (parent, targets) => {
-  if (!isElement(parent)) {
-    logError(parent, 'is not a valid element');
-    return [];
   }
 
-  return targets
-    .map((target) => {
-      if (!isElement(target)) {
-        logError(target, 'is not a valid element');
-        return null;
-      }
-
-      let node = target;
-      while (node && node !== parent) {
-        if (parent.contains(node)) {
-          return target;
-        }
-        node = node.getRootNode().host;
-      }
+  return MutableData;
 
-      logError(target, 'is not contained inside', parent);
-      return null;
-    })
-    .filter((x) => Boolean(x));
-};
+});
 
 /**
- * Marks everything except given node(or nodes) as aria-hidden
- * @param {Element | Element[]} originalTarget - elements to keep on the page
- * @param {HTMLElement} [parentNode] - top element, defaults to document.body
- * @param {String} [markerName] - a special attribute to mark every node
- * @param {String} [controlAttribute] - html Attribute to control
- * @return {Function}
+ * Element class mixin to add the optional ability to skip strict
+ * dirty-checking for objects and arrays (always consider them to be
+ * "dirty") by setting a `mutable-data` attribute on an element instance.
+ *
+ * By default, `PropertyEffects` performs strict dirty checking on
+ * objects, which means that any deep modifications to an object or array will
+ * not be propagated unless "immutable" data patterns are used (i.e. all object
+ * references from the root to the mutation were changed).
+ *
+ * Polymer also provides a proprietary data mutation and path notification API
+ * (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
+ * mutation and notification of deep changes in an object graph to all elements
+ * bound to the same object graph.
+ *
+ * In cases where neither immutable patterns nor the data mutation API can be
+ * used, applying this mixin will allow Polymer to skip dirty checking for
+ * objects and arrays (always consider them to be "dirty").  This allows a
+ * user to make a deep modification to a bound object graph, and then either
+ * simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
+ * (e.g. `this.notifyPath('items')`) to update the tree.  Note that all
+ * elements that wish to be updated based on deep mutations must apply this
+ * mixin or otherwise skip strict dirty checking for objects/arrays.
+ * Specifically, any elements in the binding tree between the source of a
+ * mutation and the consumption of it must enable this mixin or apply the
+ * `MutableData` mixin.
+ *
+ * While this mixin adds the ability to forgo Object/Array dirty checking,
+ * the `mutableData` flag defaults to false and must be set on the instance.
+ *
+ * Note, the performance characteristics of propagating large object graphs
+ * will be worse by relying on `mutableData: true` as opposed to using
+ * strict dirty checking with immutable patterns or Polymer's path notification
+ * API.
+ *
+ * @mixinFunction
+ * @polymer
+ * @summary Element class mixin to optionally skip strict dirty-checking
+ *   for objects and arrays
  */
-const applyAttributeToOthers = (originalTarget, parentNode, markerName, controlAttribute) => {
-  const targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-
-  if (!markerMap[markerName]) {
-    markerMap[markerName] = new WeakMap();
-  }
-
-  const markerCounter = markerMap[markerName];
-
-  /** @type {Element[]} */
-  const hiddenNodes = [];
-
-  /** @type {Set<Node>} */
-  const elementsToKeep = new Set();
-
-  /** @type {Set<Node>} */
-  const elementsToStop = new Set(targets);
+const OptionalMutableData = dedupingMixin(superClass => {
 
   /**
-   * @param {?Node} el
+   * @mixinClass
+   * @polymer
+   * @implements {Polymer_OptionalMutableData}
    */
-  const keep = (el) => {
-    if (!el || elementsToKeep.has(el)) {
-      return;
-    }
+  class OptionalMutableData extends superClass {
 
-    elementsToKeep.add(el);
-
-    const slot = el.assignedSlot;
-    if (slot) {
-      keep(slot);
+    /** @nocollapse */
+    static get properties() {
+      return {
+        /**
+         * Instance-level flag for configuring the dirty-checking strategy
+         * for this element.  When true, Objects and Arrays will skip dirty
+         * checking, otherwise strict equality checking will be used.
+         */
+        mutableData: Boolean
+      };
     }
 
-    keep(el.parentNode || el.host);
-  };
-
-  targets.forEach(keep);
-
-  /**
-   * @param {?Node} el
-   */
-  const deep = (parent) => {
-    if (!parent || elementsToStop.has(parent)) {
-      return;
+    /**
+     * Overrides `PropertyEffects` to provide option for skipping
+     * strict equality checking for Objects and Arrays.
+     *
+     * When `this.mutableData` is true on this instance, this method
+     * pulls the value to dirty check against from the `__dataTemp` cache
+     * (rather than the normal `__data` cache) for Objects.  Since the temp
+     * cache is cleared at the end of a turn, this implementation allows
+     * side-effects of deep object changes to be processed by re-setting the
+     * same object (using the temp cache as an in-turn backstop to prevent
+     * cycles due to 2-way notification).
+     *
+     * @param {string} property Property name
+     * @param {*} value New property value
+     * @param {*} old Previous property value
+     * @return {boolean} Whether the property should be considered a change
+     * @protected
+     */
+    _shouldPropertyChange(property, value, old) {
+      return mutablePropertyChange(this, property, value, old, this.mutableData);
     }
+  }
 
-    const root = parent.shadowRoot;
-    const children = root ? [...parent.children, ...root.children] : [...parent.children];
-    children.forEach((node) => {
-      // Skip elements that don't need to be hidden
-      if (['template', 'script', 'style'].includes(node.localName)) {
-        return;
-      }
-
-      if (elementsToKeep.has(node)) {
-        deep(node);
-      } else {
-        const attr = node.getAttribute(controlAttribute);
-        const alreadyHidden = attr !== null && attr !== 'false';
-        const counterValue = (counterMap.get(node) || 0) + 1;
-        const markerValue = (markerCounter.get(node) || 0) + 1;
-
-        counterMap.set(node, counterValue);
-        markerCounter.set(node, markerValue);
-        hiddenNodes.push(node);
-
-        if (counterValue === 1 && alreadyHidden) {
-          uncontrolledNodes.set(node, true);
-        }
+  return OptionalMutableData;
 
-        if (markerValue === 1) {
-          node.setAttribute(markerName, 'true');
-        }
+});
 
-        if (!alreadyHidden) {
-          node.setAttribute(controlAttribute, 'true');
-        }
-      }
-    });
-  };
+// Export for use by legacy behavior
+MutableData._mutablePropertyChange = mutablePropertyChange;
 
-  deep(parentNode);
+/**
+@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
+*/
 
-  elementsToKeep.clear();
+// Base class for HTMLTemplateElement extension that has property effects
+// machinery for propagating host properties to children. This is an ES5
+// class only because Babel (incorrectly) requires super() in the class
+// constructor even though no `this` is used and it returns an instance.
+let newInstance = null;
 
-  lockCount += 1;
+/**
+ * @constructor
+ * @extends {HTMLTemplateElement}
+ * @private
+ */
+function HTMLTemplateElementExtension() { return newInstance; }
+HTMLTemplateElementExtension.prototype = Object.create(HTMLTemplateElement.prototype, {
+  constructor: {
+    value: HTMLTemplateElementExtension,
+    writable: true
+  }
+});
 
-  return () => {
-    hiddenNodes.forEach((node) => {
-      const counterValue = counterMap.get(node) - 1;
-      const markerValue = markerCounter.get(node) - 1;
+/**
+ * @constructor
+ * @implements {Polymer_PropertyEffects}
+ * @extends {HTMLTemplateElementExtension}
+ * @private
+ */
+const DataTemplate = PropertyEffects(HTMLTemplateElementExtension);
 
-      counterMap.set(node, counterValue);
-      markerCounter.set(node, markerValue);
+/**
+ * @constructor
+ * @implements {Polymer_MutableData}
+ * @extends {DataTemplate}
+ * @private
+ */
+const MutableDataTemplate = MutableData(DataTemplate);
+
+// Applies a DataTemplate subclass to a <template> instance
+function upgradeTemplate(template, constructor) {
+  newInstance = template;
+  Object.setPrototypeOf(template, constructor.prototype);
+  new constructor();
+  newInstance = null;
+}
 
-      if (!counterValue) {
-        if (uncontrolledNodes.has(node)) {
-          uncontrolledNodes.delete(node);
+/**
+ * Base class for TemplateInstance.
+ * @constructor
+ * @extends {HTMLElement}
+ * @implements {Polymer_PropertyEffects}
+ * @private
+ */
+const templateInstanceBase = PropertyEffects(class {});
+
+function showHideChildren(hide, children) {
+  for (let i=0; i<children.length; i++) {
+    let n = children[i];
+    // Ignore non-changes
+    if (Boolean(hide) != Boolean(n.__hideTemplateChildren__)) {
+      // clear and restore text
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (hide) {
+          n.__polymerTextContent__ = n.textContent;
+          n.textContent = '';
+        } else {
+          n.textContent = n.__polymerTextContent__;
+        }
+      // remove and replace slot
+      } else if (n.localName === 'slot') {
+        if (hide) {
+          n.__polymerReplaced__ = document.createComment('hidden-slot');
+          wrap(wrap(n).parentNode).replaceChild(n.__polymerReplaced__, n);
         } else {
-          node.removeAttribute(controlAttribute);
+          const replace = n.__polymerReplaced__;
+          if (replace) {
+            wrap(wrap(replace).parentNode).replaceChild(n, replace);
+          }
         }
       }
-
-      if (!markerValue) {
-        node.removeAttribute(markerName);
+      // hide and show nodes
+      else if (n.style) {
+        if (hide) {
+          n.__polymerDisplay__ = n.style.display;
+          n.style.display = 'none';
+        } else {
+          n.style.display = n.__polymerDisplay__;
+        }
       }
-    });
-
-    lockCount -= 1;
-
-    if (!lockCount) {
-      // clear
-      counterMap = new WeakMap();
-      counterMap = new WeakMap();
-      uncontrolledNodes = new WeakMap();
-      markerMap = {};
     }
-  };
-};
-
-/**
- * Marks everything except given node(or nodes) as aria-hidden
- * @param {Element | Element[]} originalTarget - elements to keep on the page
- * @param {HTMLElement} [parentNode] - top element, defaults to document.body
- * @param {String} [markerName] - a special attribute to mark every node
- * @return {Function} undo command
- */
-const hideOthers = (originalTarget, parentNode = document.body, markerName = 'data-aria-hidden') => {
-  const targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]);
-
-  if (parentNode) {
-    // We should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10
-    targets.push(...Array.from(parentNode.querySelectorAll('[aria-live]')));
+    n.__hideTemplateChildren__ = hide;
+    if (n._showHideChildren) {
+      n._showHideChildren(hide);
+    }
   }
-
-  return applyAttributeToOthers(targets, parentNode, markerName, 'aria-hidden');
-};
-
-/**
- * @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 handling modal state on the elements with `dialog` and `alertdialog` role.
- * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal
- *
- * Note, the actual `role` and `aria-modal` attributes are supposed to be handled by the
- * consumer web component. This is done in to ensure the controller only does one thing.
+ * @polymer
+ * @customElement
+ * @appliesMixin PropertyEffects
+ * @unrestricted
  */
-class AriaModalController {
+class TemplateInstanceBase extends templateInstanceBase {
+  constructor(props) {
+    super();
+    this._configureProperties(props);
+    /** @type {!StampedTemplate} */
+    this.root = this._stampTemplate(this.__dataHost);
+    // Save list of stamped children
+    let children = [];
+    /** @suppress {invalidCasts} */
+    this.children = /** @type {!NodeList} */ (children);
+    // Polymer 1.x did not use `Polymer.dom` here so not bothering.
+    for (let n = this.root.firstChild; n; n=n.nextSibling) {
+      children.push(n);
+      n.__templatizeInstance = this;
+    }
+    if (this.__templatizeOwner &&
+      this.__templatizeOwner.__hideTemplateChildren__) {
+      this._showHideChildren(true);
+    }
+    // Flush props only when props are passed if instance props exist
+    // or when there isn't instance props.
+    let options = this.__templatizeOptions;
+    if ((props && options.instanceProps) || !options.instanceProps) {
+      this._enableProperties();
+    }
+  }
   /**
-   * @param {HTMLElement} host
+   * Configure the given `props` by calling `_setPendingProperty`. Also
+   * sets any properties stored in `__hostProps`.
+   * @private
+   * @param {Object} props Object of property name-value pairs to set.
+   * @return {void}
    */
-  constructor(host, callback) {
-    /**
-     * The controller host element.
-     *
-     * @type {HTMLElement}
-     */
-    this.host = host;
-
-    /**
-     * The callback used to detect which element
-     * to use as a target. Defaults to the host.
-     *
-     * @type {Function}
-     */
-    this.callback = typeof callback === 'function' ? callback : () => host;
+  _configureProperties(props) {
+    let options = this.__templatizeOptions;
+    if (options.forwardHostProp) {
+      for (let hprop in this.__hostProps) {
+        this._setPendingProperty(hprop, this.__dataHost['_host_' + hprop]);
+      }
+    }
+    // Any instance props passed in the constructor will overwrite host props;
+    // normally this would be a user error but we don't specifically filter them
+    for (let iprop in props) {
+      this._setPendingProperty(iprop, props[iprop]);
+    }
   }
-
   /**
-   * Make the controller host modal by hiding other elements from screen readers
-   * using `aria-hidden` attribute (can be replaced with `inert` in the future).
+   * Forwards a host property to this instance.  This method should be
+   * called on instances from the `options.forwardHostProp` callback
+   * to propagate changes of host properties to each instance.
    *
-   * The method name is chosen to align with the one provided by native `<dialog>`:
-   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal
+   * Note this method enqueues the change, which are flushed as a batch.
+   *
+   * @param {string} prop Property or path name
+   * @param {*} value Value of the property to forward
+   * @return {void}
    */
-  showModal() {
-    const targets = this.callback();
-    this.__showOthers = hideOthers(targets);
+  forwardHostProp(prop, value) {
+    if (this._setPendingPropertyOrPath(prop, value, false, true)) {
+      this.__dataHost._enqueueClient(this);
+    }
   }
 
   /**
-   * Remove `aria-hidden` from other elements unless there are any other
-   * controller hosts on the page activated by using `showModal()` call.
+   * Override point for adding custom or simulated event handling.
+   *
+   * @override
+   * @param {!Node} node Node to add event listener to
+   * @param {string} eventName Name of event
+   * @param {function(!Event):void} handler Listener function to add
+   * @return {void}
+   */
+  _addEventListenerToNode(node, eventName, handler) {
+    if (this._methodHost && this.__templatizeOptions.parentModel) {
+      // If this instance should be considered a parent model, decorate
+      // events this template instance as `model`
+      this._methodHost._addEventListenerToNode(node, eventName, (e) => {
+        e.model = this;
+        handler(e);
+      });
+    } else {
+      // Otherwise delegate to the template's host (which could be)
+      // another template instance
+      let templateHost = this.__dataHost.__dataHost;
+      if (templateHost) {
+        templateHost._addEventListenerToNode(node, eventName, handler);
+      }
+    }
+  }
+  /**
+   * Shows or hides the template instance top level child elements. For
+   * text nodes, `textContent` is removed while "hidden" and replaced when
+   * "shown."
+   * @param {boolean} hide Set to true to hide the children;
+   * set to false to show them.
+   * @return {void}
+   * @protected
+   */
+  _showHideChildren(hide) {
+    showHideChildren(hide, this.children);
+  }
+  /**
+   * Overrides default property-effects implementation to intercept
+   * textContent bindings while children are "hidden" and cache in
+   * private storage for later retrieval.
+   *
+   * @override
+   * @param {!Node} node The node to set a property on
+   * @param {string} prop The property to set
+   * @param {*} value The value to set
+   * @return {void}
+   * @protected
    */
-  close() {
-    if (this.__showOthers) {
-      this.__showOthers();
-      this.__showOthers = null;
+  _setUnmanagedPropertyToNode(node, prop, value) {
+    if (node.__hideTemplateChildren__ &&
+        node.nodeType == Node.TEXT_NODE && prop == 'textContent') {
+      node.__polymerTextContent__ = value;
+    } else {
+      super._setUnmanagedPropertyToNode(node, prop, value);
     }
   }
+  /**
+   * Find the parent model of this template instance.  The parent model
+   * is either another templatize instance that had option `parentModel: true`,
+   * or else the host element.
+   *
+   * @return {!Polymer_PropertyEffects} The parent model of this instance
+   */
+  get parentModel() {
+    let model = this.__parentModel;
+    if (!model) {
+      let options;
+      model = this;
+      do {
+        // A template instance's `__dataHost` is a <template>
+        // `model.__dataHost.__dataHost` is the template's host
+        model = model.__dataHost.__dataHost;
+      } while ((options = model.__templatizeOptions) && !options.parentModel);
+      this.__parentModel = model;
+    }
+    return model;
+  }
+
+  /**
+   * Stub of HTMLElement's `dispatchEvent`, so that effects that may
+   * dispatch events safely no-op.
+   *
+   * @param {Event} event Event to dispatch
+   * @return {boolean} Always true.
+   * @override
+   */
+   dispatchEvent(event) { // eslint-disable-line no-unused-vars
+     return true;
+  }
 }
 
 /**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ * @constructor
+ * @extends {TemplateInstanceBase}
+ * @implements {Polymer_MutableData}
+ * @private
  */
+const MutableTemplateInstanceBase = MutableData(
+    // This cast shouldn't be neccessary, but Closure doesn't understand that
+    // TemplateInstanceBase is a constructor function.
+    /** @type {function(new:TemplateInstanceBase)} */ (TemplateInstanceBase));
+
+function findMethodHost(template) {
+  // Technically this should be the owner of the outermost template.
+  // In shadow dom, this is always getRootNode().host, but we can
+  // approximate this via cooperation with our dataHost always setting
+  // `_methodHost` as long as there were bindings (or id's) on this
+  // instance causing it to get a dataHost.
+  let templateHost = template.__dataHost;
+  return templateHost && templateHost._methodHost || templateHost;
+}
 
+/* eslint-disable valid-jsdoc */
 /**
- * A controller for saving a focused node and restoring focus to it later.
+ * @suppress {missingProperties} class.prototype is not defined for some reason
  */
-class FocusRestorationController {
+function createTemplatizerClass(template, templateInfo, options) {
   /**
-   * Saves the given node as a target for restoring focus to
-   * when `restoreFocus()` is called. If no node is provided,
-   * the currently focused node in the DOM is saved as a target.
-   *
-   * @param {Node | null | undefined} focusNode
+   * @constructor
+   * @extends {TemplateInstanceBase}
    */
-  saveFocus(focusNode) {
-    this.focusNode = focusNode || getDeepActiveElement();
+  let templatizerBase = options.mutableData ?
+    MutableTemplateInstanceBase : TemplateInstanceBase;
+
+  // Affordance for global mixins onto TemplatizeInstance
+  if (templatize.mixin) {
+    templatizerBase = templatize.mixin(templatizerBase);
   }
 
   /**
-   * Restores focus to the target node that was saved previously with `saveFocus()`.
+   * Anonymous class created by the templatize
+   * @constructor
+   * @private
    */
-  restoreFocus() {
-    const focusNode = this.focusNode;
-    if (!focusNode) {
-      return;
-    }
+  let klass = class extends templatizerBase { };
+  /** @override */
+  klass.prototype.__templatizeOptions = options;
+  klass.prototype._bindTemplate(template);
+  addNotifyEffects(klass, template, templateInfo, options);
+  return klass;
+}
 
-    if (getDeepActiveElement() === document.body) {
-      // In Firefox and Safari, focusing the node synchronously
-      // doesn't work as expected when the overlay is closing on outside click.
-      // These browsers force focus to move to the body element and retain it
-      // there until the next event loop iteration.
-      setTimeout(() => focusNode.focus());
+/**
+ * Adds propagate effects from the template to the template instance for
+ * properties that the host binds to the template using the `_host_` prefix.
+ *
+ * @suppress {missingProperties} class.prototype is not defined for some reason
+ */
+function addPropagateEffects(target, templateInfo, options, methodHost) {
+  let userForwardHostProp = options.forwardHostProp;
+  if (userForwardHostProp && templateInfo.hasHostProps) {
+    // Under the `removeNestedTemplates` optimization, a custom element like
+    // `dom-if` or `dom-repeat` can itself be treated as the "template"; this
+    // flag is used to switch between upgrading a `<template>` to be a property
+    // effects client vs. adding the effects directly to the custom element
+    const isTemplate = target.localName == 'template';
+    // Provide data API and property effects on memoized template class
+    let klass = templateInfo.templatizeTemplateClass;
+    if (!klass) {
+      if (isTemplate) {
+        /**
+         * @constructor
+         * @extends {DataTemplate}
+         */
+        let templatizedBase =
+            options.mutableData ? MutableDataTemplate : DataTemplate;
+
+        // NOTE: due to https://github.com/google/closure-compiler/issues/2928,
+        // combining the next two lines into one assignment causes a spurious
+        // type error.
+        /** @private */
+        class TemplatizedTemplate extends templatizedBase {}
+        klass = templateInfo.templatizeTemplateClass = TemplatizedTemplate;
+      } else {
+        /**
+         * @constructor
+         * @extends {PolymerElement}
+         */
+        const templatizedBase = target.constructor;
+
+        // Create a cached subclass of the base custom element class onto which
+        // to put the template-specific propagate effects
+        // NOTE: due to https://github.com/google/closure-compiler/issues/2928,
+        // combining the next two lines into one assignment causes a spurious
+        // type error.
+        /** @private */
+        class TemplatizedTemplateExtension extends templatizedBase {}
+        klass = templateInfo.templatizeTemplateClass =
+            TemplatizedTemplateExtension;
+      }
+      // Add template - >instances effects
+      // and host <- template effects
+      let hostProps = templateInfo.hostProps;
+      for (let prop in hostProps) {
+        klass.prototype._addPropertyEffect('_host_' + prop,
+          klass.prototype.PROPERTY_EFFECT_TYPES.PROPAGATE,
+          {fn: createForwardHostPropEffect(prop, userForwardHostProp)});
+        klass.prototype._createNotifyingProperty('_host_' + prop);
+      }
+      if (legacyWarnings && methodHost) {
+        warnOnUndeclaredProperties(templateInfo, options, methodHost);
+      }
+    }
+    // Mix any pre-bound data into __data; no need to flush this to
+    // instances since they pull from the template at instance-time
+    if (target.__dataProto) {
+      // Note, generally `__dataProto` could be chained, but it's guaranteed
+      // to not be since this is a vanilla template we just added effects to
+      Object.assign(target.__data, target.__dataProto);
+    }
+    if (isTemplate) {
+      upgradeTemplate(target, klass);
+      // Clear any pending data for performance
+      target.__dataTemp = {};
+      target.__dataPending = null;
+      target.__dataOld = null;
+      target._enableProperties();
     } else {
-      focusNode.focus();
+      // Swizzle the cached subclass prototype onto the custom element
+      Object.setPrototypeOf(target, klass.prototype);
+      // Check for any pre-bound instance host properties, and do the
+      // instance property delete/assign dance for those (directly into data;
+      // not need to go through accessor since they are pulled at instance time)
+      const hostProps = templateInfo.hostProps;
+      for (let prop in hostProps) {
+        prop = '_host_' + prop;
+        if (prop in target) {
+          const val = target[prop];
+          delete target[prop];
+          target.__data[prop] = val;
+        }
+      }
+    }
+  }
+}
+/* eslint-enable valid-jsdoc */
+
+function createForwardHostPropEffect(hostProp, userForwardHostProp) {
+  return function forwardHostProp(template, prop, props) {
+    userForwardHostProp.call(template.__templatizeOwner,
+      prop.substring('_host_'.length), props[prop]);
+  };
+}
+
+function addNotifyEffects(klass, template, templateInfo, options) {
+  let hostProps = templateInfo.hostProps || {};
+  for (let iprop in options.instanceProps) {
+    delete hostProps[iprop];
+    let userNotifyInstanceProp = options.notifyInstanceProp;
+    if (userNotifyInstanceProp) {
+      klass.prototype._addPropertyEffect(iprop,
+        klass.prototype.PROPERTY_EFFECT_TYPES.NOTIFY,
+        {fn: createNotifyInstancePropEffect(iprop, userNotifyInstanceProp)});
+    }
+  }
+  if (options.forwardHostProp && template.__dataHost) {
+    for (let hprop in hostProps) {
+      // As we're iterating hostProps in this function, note whether
+      // there were any, for an optimization in addPropagateEffects
+      if (!templateInfo.hasHostProps) {
+        templateInfo.hasHostProps = true;
+      }
+      klass.prototype._addPropertyEffect(hprop,
+        klass.prototype.PROPERTY_EFFECT_TYPES.NOTIFY,
+        {fn: createNotifyHostPropEffect()});
+    }
+  }
+}
+
+function createNotifyInstancePropEffect(instProp, userNotifyInstanceProp) {
+  return function notifyInstanceProp(inst, prop, props) {
+    userNotifyInstanceProp.call(inst.__templatizeOwner,
+      inst, prop, props[prop]);
+  };
+}
+
+function createNotifyHostPropEffect() {
+  return function notifyHostProp(inst, prop, props) {
+    inst.__dataHost._setPendingPropertyOrPath('_host_' + prop, props[prop], true, true);
+  };
+}
+
+
+/**
+ * Returns an anonymous `PropertyEffects` class bound to the
+ * `<template>` provided.  Instancing the class will result in the
+ * template being stamped into a document fragment stored as the instance's
+ * `root` property, after which it can be appended to the DOM.
+ *
+ * Templates may utilize all Polymer data-binding features as well as
+ * declarative event listeners.  Event listeners and inline computing
+ * functions in the template will be called on the host of the template.
+ *
+ * The constructor returned takes a single argument dictionary of initial
+ * property values to propagate into template bindings.  Additionally
+ * host properties can be forwarded in, and instance properties can be
+ * notified out by providing optional callbacks in the `options` dictionary.
+ *
+ * Valid configuration in `options` are as follows:
+ *
+ * - `forwardHostProp(property, value)`: Called when a property referenced
+ *   in the template changed on the template's host. As this library does
+ *   not retain references to templates instanced by the user, it is the
+ *   templatize owner's responsibility to forward host property changes into
+ *   user-stamped instances.  The `instance.forwardHostProp(property, value)`
+ *    method on the generated class should be called to forward host
+ *   properties into the template to prevent unnecessary property-changed
+ *   notifications. Any properties referenced in the template that are not
+ *   defined in `instanceProps` will be notified up to the template's host
+ *   automatically.
+ * - `instanceProps`: Dictionary of property names that will be added
+ *   to the instance by the templatize owner.  These properties shadow any
+ *   host properties, and changes within the template to these properties
+ *   will result in `notifyInstanceProp` being called.
+ * - `mutableData`: When `true`, the generated class will skip strict
+ *   dirty-checking for objects and arrays (always consider them to be
+ *   "dirty").
+ * - `notifyInstanceProp(instance, property, value)`: Called when
+ *   an instance property changes.  Users may choose to call `notifyPath`
+ *   on e.g. the owner to notify the change.
+ * - `parentModel`: When `true`, events handled by declarative event listeners
+ *   (`on-event="handler"`) will be decorated with a `model` property pointing
+ *   to the template instance that stamped it.  It will also be returned
+ *   from `instance.parentModel` in cases where template instance nesting
+ *   causes an inner model to shadow an outer model.
+ *
+ * All callbacks are called bound to the `owner`. Any context
+ * needed for the callbacks (such as references to `instances` stamped)
+ * should be stored on the `owner` such that they can be retrieved via
+ * `this`.
+ *
+ * When `options.forwardHostProp` is declared as an option, any properties
+ * referenced in the template will be automatically forwarded from the host of
+ * the `<template>` to instances, with the exception of any properties listed in
+ * the `options.instanceProps` object.  `instanceProps` are assumed to be
+ * managed by the owner of the instances, either passed into the constructor
+ * or set after the fact.  Note, any properties passed into the constructor will
+ * always be set to the instance (regardless of whether they would normally
+ * be forwarded from the host).
+ *
+ * Note that `templatize()` can be run only once for a given `<template>`.
+ * Further calls will result in an error. Also, there is a special
+ * behavior if the template was duplicated through a mechanism such as
+ * `<dom-repeat>` or `<test-fixture>`. In this case, all calls to
+ * `templatize()` return the same class for all duplicates of a template.
+ * The class returned from `templatize()` is generated only once using
+ * the `options` from the first call. This means that any `options`
+ * provided to subsequent calls will be ignored. Therefore, it is very
+ * important not to close over any variables inside the callbacks. Also,
+ * arrow functions must be avoided because they bind the outer `this`.
+ * Inside the callbacks, any contextual information can be accessed
+ * through `this`, which points to the `owner`.
+ *
+ * @param {!HTMLTemplateElement} template Template to templatize
+ * @param {Polymer_PropertyEffects=} owner Owner of the template instances;
+ *   any optional callbacks will be bound to this owner.
+ * @param {Object=} options Options dictionary (see summary for details)
+ * @return {function(new:TemplateInstanceBase, Object=)} Generated class bound
+ *   to the template provided
+ * @suppress {invalidCasts}
+ */
+function templatize(template, owner, options) {
+  // Under strictTemplatePolicy, the templatized element must be owned
+  // by a (trusted) Polymer element, indicated by existence of _methodHost;
+  // e.g. for dom-if & dom-repeat in main document, _methodHost is null
+  if (strictTemplatePolicy && !findMethodHost(template)) {
+    throw new Error('strictTemplatePolicy: template owner not trusted');
+  }
+  options = /** @type {!TemplatizeOptions} */(options || {});
+  if (template.__templatizeOwner) {
+    throw new Error('A <template> can only be templatized once');
+  }
+  template.__templatizeOwner = owner;
+  const ctor = owner ? owner.constructor : TemplateInstanceBase;
+  let templateInfo = ctor._parseTemplate(template);
+  // Get memoized base class for the prototypical template, which
+  // includes property effects for binding template & forwarding
+  /**
+   * @constructor
+   * @extends {TemplateInstanceBase}
+   */
+  let baseClass = templateInfo.templatizeInstanceClass;
+  if (!baseClass) {
+    baseClass = createTemplatizerClass(template, templateInfo, options);
+    templateInfo.templatizeInstanceClass = baseClass;
+  }
+  const methodHost = findMethodHost(template);
+  // Host property forwarding must be installed onto template instance
+  addPropagateEffects(template, templateInfo, options, methodHost);
+  // Subclass base class and add reference for this specific template
+  /** @private */
+  let klass = class TemplateInstance extends baseClass {};
+  /** @override */
+  klass.prototype._methodHost = methodHost;
+  /** @override */
+  klass.prototype.__dataHost = /** @type {!DataTemplate} */ (template);
+  /** @override */
+  klass.prototype.__templatizeOwner = /** @type {!Object} */ (owner);
+  /** @override */
+  klass.prototype.__hostProps = templateInfo.hostProps;
+  klass = /** @type {function(new:TemplateInstanceBase)} */(klass); //eslint-disable-line no-self-assign
+  return klass;
+}
+
+function warnOnUndeclaredProperties(templateInfo, options, methodHost) {
+  const declaredProps = methodHost.constructor._properties;
+  const {propertyEffects} = templateInfo;
+  const {instanceProps} = options;
+  for (let prop in propertyEffects) {
+    // Ensure properties with template effects are declared on the outermost
+    // host (`methodHost`), unless they are instance props or static functions
+    if (!declaredProps[prop] && !(instanceProps && instanceProps[prop])) {
+      const effects = propertyEffects[prop];
+      for (let i=0; i<effects.length; i++) {
+        const {part} = effects[i].info;
+        if (!(part.signature && part.signature.static)) {
+          console.warn(`Property '${prop}' used in template but not ` +
+            `declared in 'properties'; attribute will not be observed.`);
+          break;
+        }
+      }
     }
+  }
+}
 
-    this.focusNode = null;
+/**
+ * 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 is an instance of
+ * `TemplateInstanceBase`, and 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} template The model will be returned for
+ *   elements stamped from this template (accepts either an HTMLTemplateElement)
+ *   or a `<dom-if>`/`<dom-repeat>` element when using `removeNestedTemplates`
+ *   optimization.
+ * @param {Node=} node Node for which to return a template model.
+ * @return {TemplateInstanceBase} Template instance representing the
+ *   binding scope for the element
+ */
+function modelForElement(template, node) {
+  let model;
+  while (node) {
+    // An element with a __templatizeInstance marks the top boundary
+    // of a scope; walk up until we find one, and then ensure that
+    // its __dataHost matches `this`, meaning this dom-repeat stamped it
+    if ((model = node.__dataHost ? node : node.__templatizeInstance)) {
+      // Found an element stamped by another template; keep walking up
+      // from its __dataHost
+      if (model.__dataHost != template) {
+        node = model.__dataHost;
+      } else {
+        return model;
+      }
+    } else {
+      // Still in a template scope, keep going up until
+      // a __templatizeInstance is found
+      node = wrap(node).parentNode;
+    }
   }
+  return null;
 }
 
 /**
  * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -607,27 +1026,6 @@ class FocusTrapController {
     this.__onKeyDown = this.__onKeyDown.bind(this);
   }
 
-  /**
-   * An array of tab-ordered focusable elements inside the trap node.
-   *
-   * @return {HTMLElement[]}
-   * @private
-   */
-  get __focusableElements() {
-    return getFocusableElements(this.__trapNode);
-  }
-
-  /**
-   * The index of the element inside the trap node that currently has focus.
-   *
-   * @return {HTMLElement | undefined}
-   * @private
-   */
-  get __focusedElementIndex() {
-    const focusableElements = this.__focusableElements;
-    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
-  }
-
   hostConnected() {
     document.addEventListener('keydown', this.__onKeyDown);
   }
@@ -726,722 +1124,1123 @@ class FocusTrapController {
       element.select();
     }
   }
+
+  /**
+   * An array of tab-ordered focusable elements inside the trap node.
+   *
+   * @return {HTMLElement[]}
+   * @private
+   */
+  get __focusableElements() {
+    return getFocusableElements(this.__trapNode);
+  }
+
+  /**
+   * The index of the element inside the trap node that currently has focus.
+   *
+   * @return {HTMLElement | undefined}
+   * @private
+   */
+  get __focusedElementIndex() {
+    const focusableElements = this.__focusableElements;
+    return focusableElements.indexOf(focusableElements.filter(isElementFocused).pop());
+  }
 }
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- * @polymerMixin
+ *
+ * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
+ * can be populated in two ways: imperatively by using renderer callback function and
+ * declaratively by using Polymer's Templates.
+ *
+ * ### Rendering
+ *
+ * By default, the overlay uses the content provided by using the renderer callback function.
+ *
+ * The renderer function provides `root`, `owner`, `model` arguments when applicable.
+ * Generate DOM content by using `model` object properties if needed, append it to the `root`
+ * element and control the state of the host element by accessing `owner`. Before generating new
+ * content, users are able to check if there is already content in `root` for reusing it.
+ *
+ * ```html
+ * <vaadin-overlay id="overlay"></vaadin-overlay>
+ * ```
+ * ```js
+ * const overlay = document.querySelector('#overlay');
+ * overlay.renderer = function(root) {
+ *  root.textContent = "Overlay content";
+ * };
+ * ```
+ *
+ * Renderer is called on the opening of the overlay and each time the related model is updated.
+ * DOM generated during the renderer call can be reused
+ * in the next renderer call and will be provided with the `root` argument.
+ * On first call it will be empty.
+ *
+ * **NOTE:** when the renderer property is defined, the `<template>` content is not used.
+ *
+ * ### Templating
+ *
+ * Alternatively, the content can be provided with Polymer Template.
+ * Overlay finds the first child template and uses that in case renderer callback function
+ * is not provided. You can also set a custom template using the `template` property.
+ *
+ * After the content from the template is stamped, the `content` property
+ * points to the content container.
+ *
+ * The overlay provides `forwardHostProp` when calling
+ * `Polymer.Templatize.templatize` for the template, so that the bindings
+ * from the parent scope propagate to the content.
+ *
+ * ### Styling
+ *
+ * To style the overlay content, use styles in the parent scope:
+ *
+ * - If the overlay is used in a component, then the component styles
+ *   apply the overlay content.
+ * - If the overlay is used in the global DOM scope, then global styles
+ *   apply to the overlay content.
+ *
+ * See examples for styling the overlay content in the live demos.
+ *
+ * The following Shadow DOM parts are available for styling the overlay component itself:
+ *
+ * Part name  | Description
+ * -----------|---------------------------------------------------------|
+ * `backdrop` | Backdrop of the overlay
+ * `overlay`  | Container for position/sizing/alignment of the content
+ * `content`  | Content of the overlay
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute | Description | Part
+ * ---|---|---
+ * `opening` | Applied just after the overlay is attached to the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ * `closing` | Applied just before the overlay is detached from the DOM. You can apply a CSS @keyframe animation for this state. | `:host`
+ *
+ * The following custom CSS properties are available for styling:
+ *
+ * Custom CSS property | Description | Default value
+ * ---|---|---
+ * `--vaadin-overlay-viewport-bottom` | Bottom offset of the visible viewport area | `0` or detected offset
+ *
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
+ *
+ * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
+ * @fires {CustomEvent} vaadin-overlay-open - Fired after the overlay is opened.
+ * @fires {CustomEvent} vaadin-overlay-close - Fired before the overlay will be closed. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-closing - Fired when the overlay will be closed.
+ * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay will be closed on outside click. If canceled the closing of the overlay is canceled as well.
+ * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
+ *
+ * @extends HTMLElement
+ * @mixes ThemableMixin
+ * @mixes DirMixin
  * @mixes ControllerMixin
  */
-const OverlayFocusMixin = (superClass) =>
-  class OverlayFocusMixin extends ControllerMixin(superClass) {
-    static get properties() {
-      return {
-        /**
-         * When true, opening the overlay moves focus to the first focusable child,
-         * or to the overlay part with tabindex if there are no focusable children.
-         * @attr {boolean} focus-trap
-         */
-        focusTrap: {
-          type: Boolean,
-          value: false,
-        },
+class Overlay extends ThemableMixin(DirMixin(ControllerMixin(PolymerElement))) {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          z-index: 200;
+          position: fixed;
+
+          /* Despite of what the names say, <vaadin-overlay> is just a container
+          for position/sizing/alignment. The actual overlay is the overlay part. */
 
-        /**
-         * Set to true to enable restoring of focus when overlay is closed.
-         * @attr {boolean} restore-focus-on-close
-         */
-        restoreFocusOnClose: {
-          type: Boolean,
-          value: false,
-        },
+          /* Default position constraints: the entire viewport. Note: themes can
+          override this to introduce gaps between the overlay and the viewport. */
+          top: 0;
+          right: 0;
+          bottom: var(--vaadin-overlay-viewport-bottom);
+          left: 0;
 
-        /**
-         * Set to specify the element which should be focused on overlay close,
-         * if `restoreFocusOnClose` is set to true.
-         * @type {HTMLElement}
-         */
-        restoreFocusNode: {
-          type: HTMLElement,
-        },
-      };
-    }
+          /* Use flexbox alignment for the overlay part. */
+          display: flex;
+          flex-direction: column; /* makes dropdowns sizing easier */
+          /* Align to center by default. */
+          align-items: center;
+          justify-content: center;
 
-    constructor() {
-      super();
+          /* Allow centering when max-width/max-height applies. */
+          margin: auto;
 
-      this.__ariaModalController = new AriaModalController(this);
-      this.__focusTrapController = new FocusTrapController(this);
-      this.__focusRestorationController = new FocusRestorationController();
-    }
+          /* The host is not clickable, only the overlay part is. */
+          pointer-events: none;
 
-    /** @protected */
-    ready() {
-      super.ready();
+          /* Remove tap highlight on touch devices. */
+          -webkit-tap-highlight-color: transparent;
 
-      this.addController(this.__ariaModalController);
-      this.addController(this.__focusTrapController);
-      this.addController(this.__focusRestorationController);
-    }
+          /* CSS API for host */
+          --vaadin-overlay-viewport-bottom: 0;
+        }
 
-    /**
-     * Release focus and restore focus after the overlay is closed.
-     *
-     * @protected
-     */
-    _resetFocus() {
-      if (this.focusTrap) {
-        this.__ariaModalController.close();
-        this.__focusTrapController.releaseFocus();
-      }
+        :host([hidden]),
+        :host(:not([opened]):not([closing])) {
+          display: none !important;
+        }
 
-      if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
-        this.__focusRestorationController.restoreFocus();
-      }
-    }
+        [part='overlay'] {
+          -webkit-overflow-scrolling: touch;
+          overflow: auto;
+          pointer-events: auto;
 
-    /**
-     * Save the previously focused node when the overlay starts to open.
-     *
-     * @protected
-     */
-    _saveFocus() {
-      if (this.restoreFocusOnClose) {
-        this.__focusRestorationController.saveFocus(this.restoreFocusNode);
-      }
-    }
+          /* Prevent overflowing the host in MSIE 11 */
+          max-width: 100%;
+          box-sizing: border-box;
 
-    /**
-     * Trap focus within the overlay after opening has completed.
-     *
-     * @protected
-     */
-    _trapFocus() {
-      if (this.focusTrap) {
-        this.__ariaModalController.showModal();
-        this.__focusTrapController.trapFocus(this.$.overlay);
-      }
-    }
+          -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
+        }
 
-    /**
-     * Returns true if focus is still inside the overlay or on the body element,
-     * otherwise false.
-     *
-     * Focus shouldn't be restored if it's been moved elsewhere by another
-     * component or as a result of a user interaction e.g. the user clicked
-     * on a button outside the overlay while the overlay was open.
-     *
-     * @protected
-     * @return {boolean}
-     */
-    _shouldRestoreFocus() {
-      const activeElement = getDeepActiveElement();
-      return activeElement === document.body || this._deepContains(activeElement);
-    }
+        [part='backdrop'] {
+          z-index: -1;
+          content: '';
+          background: rgba(0, 0, 0, 0.5);
+          position: fixed;
+          top: 0;
+          left: 0;
+          bottom: 0;
+          right: 0;
+          pointer-events: auto;
+        }
+      </style>
+
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <div part="content" id="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
 
-    /**
-     * Returns true if the overlay contains the given node,
-     * including those within shadow DOM trees.
-     *
-     * @param {Node} node
-     * @return {boolean}
-     * @protected
-     */
-    _deepContains(node) {
-      if (this.contains(node)) {
-        return true;
-      }
-      let n = node;
-      const doc = node.ownerDocument;
-      // Walk from node to `this` or `document`
-      while (n && n !== doc && n !== this) {
-        n = n.parentNode || n.host;
-      }
-      return n === this;
-    }
-  };
+  static get is() {
+    return 'vaadin-overlay';
+  }
 
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+  static get properties() {
+    return {
+      /**
+       * When true, the overlay is visible and attached to body.
+       */
+      opened: {
+        type: Boolean,
+        notify: true,
+        observer: '_openedChanged',
+        reflectToAttribute: true,
+      },
+
+      /**
+       * Owner element passed with renderer function
+       * @type {HTMLElement}
+       */
+      owner: Element,
+
+      /**
+       * Custom function for rendering the content of the overlay.
+       * Receives three arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `owner` The host element of the renderer function.
+       * - `model` The object with the properties related with rendering.
+       * @type {OverlayRenderer | null | undefined}
+       */
+      renderer: Function,
+
+      /**
+       * The template of the overlay content.
+       * @type {HTMLTemplateElement | null | undefined}
+       */
+      template: {
+        type: Object,
+        notify: true,
+      },
+
+      /**
+       * References the content container after the template is stamped.
+       * @type {!HTMLElement | undefined}
+       */
+      content: {
+        type: Object,
+        notify: true,
+      },
+
+      /**
+       * When true the overlay has backdrop on top of content when opened.
+       * @type {boolean}
+       */
+      withBackdrop: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * Object with properties that is passed to `renderer` function
+       */
+      model: Object,
+
+      /**
+       * When true the overlay won't disable the main content, showing
+       * it doesn’t change the functionality of the user interface.
+       * @type {boolean}
+       */
+      modeless: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '_modelessChanged',
+      },
+
+      /**
+       * When set to true, the overlay is hidden. This also closes the overlay
+       * immediately in case there is a closing animation in progress.
+       * @type {boolean}
+       */
+      hidden: {
+        type: Boolean,
+        reflectToAttribute: true,
+        observer: '_hiddenChanged',
+      },
+
+      /**
+       * When true move focus to the first focusable element in the overlay,
+       * or to the overlay if there are no focusable elements.
+       * @type {boolean}
+       */
+      focusTrap: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * Set to true to enable restoring of focus when overlay is closed.
+       * @type {boolean}
+       */
+      restoreFocusOnClose: {
+        type: Boolean,
+        value: false,
+      },
+
+      /**
+       * Set to specify the element which should be focused on overlay close,
+       * if `restoreFocusOnClose` is set to true.
+       * @type {HTMLElement}
+       */
+      restoreFocusNode: {
+        type: HTMLElement,
+      },
+
+      /** @private */
+      _mouseDownInside: {
+        type: Boolean,
+      },
+
+      /** @private */
+      _mouseUpInside: {
+        type: Boolean,
+      },
+
+      /** @private */
+      _instance: {
+        type: Object,
+      },
+
+      /** @private */
+      _originalContentPart: Object,
+
+      /** @private */
+      _contentNodes: Array,
+
+      /** @private */
+      _oldOwner: Element,
+
+      /** @private */
+      _oldModel: Object,
+
+      /** @private */
+      _oldTemplate: Object,
+
+      /** @private */
+      _oldRenderer: Object,
+
+      /** @private */
+      _oldOpened: Boolean,
+    };
+  }
 
-/**
- * Returns all attached overlays in visual stacking order.
- * @private
- */
-const getAttachedInstances = () =>
-  Array.from(document.body.children)
-    .filter((el) => el instanceof HTMLElement && el._hasOverlayStackMixin && !el.hasAttribute('closing'))
-    .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+  static get observers() {
+    return ['_templateOrRendererChanged(template, renderer, owner, model, opened)'];
+  }
 
-/**
- * Returns true if the overlay is the last one in the opened overlays stack.
- * @param {HTMLElement} overlay
- * @return {boolean}
- * @protected
- */
-const isLastOverlay = (overlay) => overlay === getAttachedInstances().pop();
+  constructor() {
+    super();
+    this._boundMouseDownListener = this._mouseDownListener.bind(this);
+    this._boundMouseUpListener = this._mouseUpListener.bind(this);
+    this._boundOutsideClickListener = this._outsideClickListener.bind(this);
+    this._boundKeydownListener = this._keydownListener.bind(this);
 
-/**
- * @polymerMixin
- */
-const OverlayStackMixin = (superClass) =>
-  class OverlayStackMixin extends superClass {
-    constructor() {
-      super();
+    this._observer = new FlattenedNodesObserver(this, (info) => {
+      this._setTemplateFromNodes(info.addedNodes);
+    });
 
-      this._hasOverlayStackMixin = true;
-    }
+    // Listener for preventing closing of the paper-dialog and all components extending `iron-overlay-behavior`.
+    this._boundIronOverlayCanceledListener = this._ironOverlayCanceled.bind(this);
 
-    /**
-     * Returns true if this is the last one in the opened overlays stack.
-     *
-     * @return {boolean}
-     * @protected
-     */
-    get _last() {
-      return isLastOverlay(this);
+    /* c8 ignore next 3 */
+    if (isIOS) {
+      this._boundIosResizeListener = () => this._detectIosNavbar();
     }
 
-    /**
-     * Brings the overlay as visually the frontmost one.
-     */
-    bringToFront() {
-      let zIndex = '';
-      const frontmost = getAttachedInstances()
-        .filter((o) => o !== this)
-        .pop();
-      if (frontmost) {
-        const frontmostZIndex = frontmost.__zIndex;
-        zIndex = frontmostZIndex + 1;
-      }
-      this.style.zIndex = zIndex;
-      this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+    this.__focusTrapController = new FocusTrapController(this);
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._observer.flush();
+
+    // Need to add dummy click listeners to this and the backdrop or else
+    // the document click event listener (_outsideClickListener) may never
+    // get invoked on iOS Safari (reproducible in <vaadin-dialog>
+    // and <vaadin-context-menu>).
+    this.addEventListener('click', () => {});
+    this.$.backdrop.addEventListener('click', () => {});
+
+    this.addController(this.__focusTrapController);
+  }
+
+  /** @private */
+  _detectIosNavbar() {
+    /* c8 ignore next 15 */
+    if (!this.opened) {
+      return;
     }
 
-    /** @protected */
-    _enterModalState() {
-      if (document.body.style.pointerEvents !== 'none') {
-        // Set body pointer-events to 'none' to disable mouse interactions with
-        // other document nodes.
-        this._previousDocumentPointerEvents = document.body.style.pointerEvents;
-        document.body.style.pointerEvents = 'none';
-      }
+    const innerHeight = window.innerHeight;
+    const innerWidth = window.innerWidth;
 
-      // Disable pointer events in other attached overlays
-      getAttachedInstances().forEach((el) => {
-        if (el !== this) {
-          el.$.overlay.style.pointerEvents = 'none';
-        }
-      });
+    const landscape = innerWidth > innerHeight;
+
+    const clientHeight = document.documentElement.clientHeight;
+
+    if (landscape && clientHeight > innerHeight) {
+      this.style.setProperty('--vaadin-overlay-viewport-bottom', `${clientHeight - innerHeight}px`);
+    } else {
+      this.style.setProperty('--vaadin-overlay-viewport-bottom', '0');
     }
+  }
 
-    /** @protected */
-    _exitModalState() {
-      if (this._previousDocumentPointerEvents !== undefined) {
-        // Restore body pointer-events
-        document.body.style.pointerEvents = this._previousDocumentPointerEvents;
-        delete this._previousDocumentPointerEvents;
-      }
+  /**
+   * @param {!Array<!Element>} nodes
+   * @protected
+   */
+  _setTemplateFromNodes(nodes) {
+    this.template = nodes.find((node) => node.localName && node.localName === 'template') || this.template;
+  }
 
-      // Restore pointer events in the previous overlay(s)
-      const instances = getAttachedInstances();
+  /**
+   * @param {Event=} sourceEvent
+   * @event vaadin-overlay-close
+   * fired before the `vaadin-overlay` will be closed. If canceled the closing of the overlay is canceled as well.
+   */
+  close(sourceEvent) {
+    const evt = new CustomEvent('vaadin-overlay-close', {
+      bubbles: true,
+      cancelable: true,
+      detail: { sourceEvent },
+    });
+    this.dispatchEvent(evt);
+    if (!evt.defaultPrevented) {
+      this.opened = false;
+    }
+  }
 
-      let el;
-      // Use instances.pop() to ensure the reverse order
-      while ((el = instances.pop())) {
-        if (el === this) {
-          // Skip the current instance
-          continue;
-        }
-        el.$.overlay.style.removeProperty('pointer-events');
-        if (!el.modeless) {
-          // Stop after the last modal
-          break;
-        }
-      }
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    /* c8 ignore next 3 */
+    if (this._boundIosResizeListener) {
+      this._detectIosNavbar();
+      window.addEventListener('resize', this._boundIosResizeListener);
     }
-  };
+  }
 
-/**
- * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
 
-/**
- * @polymerMixin
- * @mixes OverlayFocusMixin
- * @mixes OverlayStackMixin
- */
-const OverlayMixin = (superClass) =>
-  class OverlayMixin extends OverlayFocusMixin(OverlayStackMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * When true, the overlay is visible and attached to body.
-         */
-        opened: {
-          type: Boolean,
-          notify: true,
-          observer: '_openedChanged',
-          reflectToAttribute: true,
-        },
+    /* c8 ignore next 3 */
+    if (this._boundIosResizeListener) {
+      window.removeEventListener('resize', this._boundIosResizeListener);
+    }
+  }
 
-        /**
-         * Owner element passed with renderer function
-         * @type {HTMLElement}
-         */
-        owner: {
-          type: Object,
-        },
+  /**
+   * Requests an update for the content of the overlay.
+   * 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) {
+      this.renderer.call(this.owner, this.content, this.owner, this.model);
+    }
+  }
 
-        /**
-         * Object with properties that is passed to `renderer` function
-         */
-        model: {
-          type: Object,
-        },
+  /** @private */
+  _ironOverlayCanceled(event) {
+    event.preventDefault();
+  }
 
-        /**
-         * Custom function for rendering the content of the overlay.
-         * Receives three arguments:
-         *
-         * - `root` The root container DOM element. Append your content to it.
-         * - `owner` The host element of the renderer function.
-         * - `model` The object with the properties related with rendering.
-         * @type {OverlayRenderer | null | undefined}
-         */
-        renderer: {
-          type: Object,
-        },
+  /** @private */
+  _mouseDownListener(event) {
+    this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+  }
 
-        /**
-         * When true the overlay won't disable the main content, showing
-         * it doesn't change the functionality of the user interface.
-         * @type {boolean}
-         */
-        modeless: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-          observer: '_modelessChanged',
-        },
+  /** @private */
+  _mouseUpListener(event) {
+    this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+  }
 
-        /**
-         * When set to true, the overlay is hidden. This also closes the overlay
-         * immediately in case there is a closing animation in progress.
-         * @type {boolean}
-         */
-        hidden: {
-          type: Boolean,
-          reflectToAttribute: true,
-          observer: '_hiddenChanged',
-        },
+  /**
+   * We need to listen on 'click' / 'tap' event and capture it and close the overlay before
+   * propagating the event to the listener in the button. Otherwise, if the clicked button would call
+   * open(), this would happen: https://www.youtube.com/watch?v=Z86V_ICUCD4
+   *
+   * @event vaadin-overlay-outside-click
+   * fired before the `vaadin-overlay` will be closed on outside click. If canceled the closing of the overlay is canceled as well.
+   *
+   * @private
+   */
+  _outsideClickListener(event) {
+    if (event.composedPath().includes(this.$.overlay) || this._mouseDownInside || this._mouseUpInside) {
+      this._mouseDownInside = false;
+      this._mouseUpInside = false;
+      return;
+    }
+    if (!this._last) {
+      return;
+    }
 
-        /**
-         * When true the overlay has backdrop on top of content when opened.
-         * @type {boolean}
-         */
-        withBackdrop: {
-          type: Boolean,
-          value: false,
-          reflectToAttribute: true,
-        },
-      };
+    const evt = new CustomEvent('vaadin-overlay-outside-click', {
+      bubbles: true,
+      cancelable: true,
+      detail: { sourceEvent: event },
+    });
+    this.dispatchEvent(evt);
+
+    if (this.opened && !evt.defaultPrevented) {
+      this.close(event);
     }
+  }
 
-    static get observers() {
-      return ['_rendererOrDataChanged(renderer, owner, model, opened)'];
+  /**
+   * @event vaadin-overlay-escape-press
+   * fired before the `vaadin-overlay` will be closed on ESC button press. If canceled the closing of the overlay is canceled as well.
+   *
+   * @private
+   */
+  _keydownListener(event) {
+    if (!this._last) {
+      return;
     }
 
-    constructor() {
-      super();
+    // Only close modeless overlay on Esc press when it contains focus
+    if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+      return;
+    }
 
-      this._boundMouseDownListener = this._mouseDownListener.bind(this);
-      this._boundMouseUpListener = this._mouseUpListener.bind(this);
-      this._boundOutsideClickListener = this._outsideClickListener.bind(this);
-      this._boundKeydownListener = this._keydownListener.bind(this);
+    if (event.key === 'Escape') {
+      const evt = new CustomEvent('vaadin-overlay-escape-press', {
+        bubbles: true,
+        cancelable: true,
+        detail: { sourceEvent: event },
+      });
+      this.dispatchEvent(evt);
 
-      /* c8 ignore next 3 */
-      if (isIOS) {
-        this._boundIosResizeListener = () => this._detectIosNavbar();
+      if (this.opened && !evt.defaultPrevented) {
+        this.close(event);
       }
     }
+  }
 
-    /** @protected */
-    ready() {
-      super.ready();
+  /** @protected */
+  _ensureTemplatized() {
+    this._setTemplateFromNodes(Array.from(this.children));
+  }
 
-      // Need to add dummy click listeners to this and the backdrop or else
-      // the document click event listener (_outsideClickListener) may never
-      // get invoked on iOS Safari (reproducible in <vaadin-dialog>
-      // and <vaadin-context-menu>).
-      this.addEventListener('click', () => {});
-      this.$.backdrop.addEventListener('click', () => {});
+  /**
+   * @event vaadin-overlay-open
+   * fired after the `vaadin-overlay` is opened.
+   *
+   * @private
+   */
+  _openedChanged(opened, wasOpened) {
+    if (!this._instance) {
+      this._ensureTemplatized();
     }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+    if (opened) {
+      // Store focused node.
+      this.__restoreFocusNode = this._getActiveElement();
+      this._animatedOpening();
 
-      /* c8 ignore next 3 */
-      if (this._boundIosResizeListener) {
-        this._detectIosNavbar();
-        window.addEventListener('resize', this._boundIosResizeListener);
+      afterNextRender(this, () => {
+        if (this.focusTrap) {
+          this.__focusTrapController.trapFocus(this.$.overlay);
+        }
+
+        const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
+        this.dispatchEvent(evt);
+      });
+
+      document.addEventListener('keydown', this._boundKeydownListener);
+
+      if (!this.modeless) {
+        this._addGlobalListeners();
+      }
+    } else if (wasOpened) {
+      if (this.focusTrap) {
+        this.__focusTrapController.releaseFocus();
       }
-    }
 
-    /** @protected */
-    disconnectedCallback() {
-      super.disconnectedCallback();
+      this._animatedClosing();
+
+      document.removeEventListener('keydown', this._boundKeydownListener);
 
-      /* c8 ignore next 3 */
-      if (this._boundIosResizeListener) {
-        window.removeEventListener('resize', this._boundIosResizeListener);
+      if (!this.modeless) {
+        this._removeGlobalListeners();
       }
     }
+  }
 
-    /**
-     * Requests an update for the content of the overlay.
-     * 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) {
-        this.renderer.call(this.owner, this, this.owner, this.model);
+  /** @private */
+  _hiddenChanged(hidden) {
+    if (hidden && this.hasAttribute('closing')) {
+      this._flushAnimation('closing');
+    }
+  }
+
+  /**
+   * @return {boolean}
+   * @protected
+   */
+  _shouldAnimate() {
+    const name = getComputedStyle(this).getPropertyValue('animation-name');
+    const hidden = getComputedStyle(this).getPropertyValue('display') === 'none';
+    return !hidden && name && name !== 'none';
+  }
+
+  /**
+   * @param {string} type
+   * @param {Function} callback
+   * @protected
+   */
+  _enqueueAnimation(type, callback) {
+    const handler = `__${type}Handler`;
+    const listener = (event) => {
+      if (event && event.target !== this) {
+        return;
       }
+      callback();
+      this.removeEventListener('animationend', listener);
+      delete this[handler];
+    };
+    this[handler] = listener;
+    this.addEventListener('animationend', listener);
+  }
+
+  /**
+   * @param {string} type
+   * @protected
+   */
+  _flushAnimation(type) {
+    const handler = `__${type}Handler`;
+    if (typeof this[handler] === 'function') {
+      this[handler]();
     }
+  }
 
-    /**
-     * @param {Event=} sourceEvent
-     */
-    close(sourceEvent) {
-      const evt = new CustomEvent('vaadin-overlay-close', {
-        bubbles: true,
-        cancelable: true,
-        detail: { sourceEvent },
+  /** @protected */
+  _animatedOpening() {
+    if (this.parentNode === document.body && this.hasAttribute('closing')) {
+      this._flushAnimation('closing');
+    }
+    this._attachOverlay();
+    if (!this.modeless) {
+      this._enterModalState();
+    }
+    this.setAttribute('opening', '');
+
+    if (this._shouldAnimate()) {
+      this._enqueueAnimation('opening', () => {
+        this._finishOpening();
       });
-      this.dispatchEvent(evt);
-      if (!evt.defaultPrevented) {
-        this.opened = false;
-      }
+    } else {
+      this._finishOpening();
     }
+  }
 
-    /** @private */
-    _detectIosNavbar() {
-      /* c8 ignore next 15 */
-      if (!this.opened) {
-        return;
-      }
+  /** @protected */
+  _attachOverlay() {
+    this._placeholder = document.createComment('vaadin-overlay-placeholder');
+    this.parentNode.insertBefore(this._placeholder, this);
+    document.body.appendChild(this);
+    this.bringToFront();
+  }
+
+  /** @protected */
+  _finishOpening() {
+    document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this.removeAttribute('opening');
+  }
 
-      const innerHeight = window.innerHeight;
-      const innerWidth = window.innerWidth;
+  /** @protected */
+  _finishClosing() {
+    document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this._detachOverlay();
+    this.$.overlay.style.removeProperty('pointer-events');
+    this.removeAttribute('closing');
+  }
 
-      const landscape = innerWidth > innerHeight;
+  /**
+   * @event vaadin-overlay-closing
+   * Fired when the overlay will be closed.
+   *
+   * @protected
+   */
+  _animatedClosing() {
+    if (this.hasAttribute('opening')) {
+      this._flushAnimation('opening');
+    }
+    if (this._placeholder) {
+      this._exitModalState();
+
+      // Use this.restoreFocusNode if specified, otherwise fallback to the node
+      // which was focused before opening the overlay.
+      const restoreFocusNode = this.restoreFocusNode || this.__restoreFocusNode;
+
+      if (this.restoreFocusOnClose && restoreFocusNode) {
+        // If the activeElement is `<body>` or inside the overlay,
+        // we are allowed to restore the focus. In all the other
+        // cases focus might have been moved elsewhere by another
+        // component or by the user interaction (e.g. click on a
+        // button outside the overlay).
+        const activeElement = this._getActiveElement();
+
+        if (activeElement === document.body || this._deepContains(activeElement)) {
+          // Focusing the restoreFocusNode doesn't always work synchronously on Firefox and Safari
+          // (e.g. combo-box overlay close on outside click).
+          setTimeout(() => restoreFocusNode.focus());
+        }
+        this.__restoreFocusNode = null;
+      }
 
-      const clientHeight = document.documentElement.clientHeight;
+      this.setAttribute('closing', '');
+      this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
 
-      if (landscape && clientHeight > innerHeight) {
-        this.style.setProperty('--vaadin-overlay-viewport-bottom', `${clientHeight - innerHeight}px`);
+      if (this._shouldAnimate()) {
+        this._enqueueAnimation('closing', () => {
+          this._finishClosing();
+        });
       } else {
-        this.style.setProperty('--vaadin-overlay-viewport-bottom', '0');
+        this._finishClosing();
       }
     }
+  }
 
-    /** @private */
-    _addGlobalListeners() {
-      document.addEventListener('mousedown', this._boundMouseDownListener);
-      document.addEventListener('mouseup', this._boundMouseUpListener);
-      // Firefox leaks click to document on contextmenu even if prevented
-      // https://bugzilla.mozilla.org/show_bug.cgi?id=990614
-      document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);
+  /** @protected */
+  _detachOverlay() {
+    this._placeholder.parentNode.insertBefore(this, this._placeholder);
+    this._placeholder.parentNode.removeChild(this._placeholder);
+  }
+
+  /**
+   * Returns all attached overlays in visual stacking order.
+   * @private
+   */
+  static get __attachedInstances() {
+    return Array.from(document.body.children)
+      .filter((el) => el instanceof Overlay && !el.hasAttribute('closing'))
+      .sort((a, b) => a.__zIndex - b.__zIndex || 0);
+  }
+
+  /**
+   * Returns true if this is the last one in the opened overlays stack
+   * @return {boolean}
+   * @protected
+   */
+  get _last() {
+    return this === Overlay.__attachedInstances.pop();
+  }
+
+  /** @private */
+  _modelessChanged(modeless) {
+    if (!modeless) {
+      if (this.opened) {
+        this._addGlobalListeners();
+        this._enterModalState();
+      }
+    } else {
+      this._removeGlobalListeners();
+      this._exitModalState();
     }
+  }
 
-    /** @private */
-    _removeGlobalListeners() {
-      document.removeEventListener('mousedown', this._boundMouseDownListener);
-      document.removeEventListener('mouseup', this._boundMouseUpListener);
-      document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
+  /** @protected */
+  _addGlobalListeners() {
+    document.addEventListener('mousedown', this._boundMouseDownListener);
+    document.addEventListener('mouseup', this._boundMouseUpListener);
+    // Firefox leaks click to document on contextmenu even if prevented
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=990614
+    document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);
+  }
+
+  /** @protected */
+  _enterModalState() {
+    if (document.body.style.pointerEvents !== 'none') {
+      // Set body pointer-events to 'none' to disable mouse interactions with
+      // other document nodes.
+      this._previousDocumentPointerEvents = document.body.style.pointerEvents;
+      document.body.style.pointerEvents = 'none';
     }
 
-    /** @private */
-    _rendererOrDataChanged(renderer, owner, model, opened) {
-      const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
-      this._oldModel = model;
-      this._oldOwner = owner;
-
-      const rendererChanged = this._oldRenderer !== renderer;
-      this._oldRenderer = renderer;
-
-      const openedChanged = this._oldOpened !== opened;
-      this._oldOpened = opened;
-
-      if (rendererChanged) {
-        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$;
+    // Disable pointer events in other attached overlays
+    Overlay.__attachedInstances.forEach((el) => {
+      if (el !== this) {
+        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
       }
+    });
+  }
 
-      if (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
-        this.requestContentUpdate();
+  /** @protected */
+  _removeGlobalListeners() {
+    document.removeEventListener('mousedown', this._boundMouseDownListener);
+    document.removeEventListener('mouseup', this._boundMouseUpListener);
+    document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
+  }
+
+  /** @protected */
+  _exitModalState() {
+    if (this._previousDocumentPointerEvents !== undefined) {
+      // Restore body pointer-events
+      document.body.style.pointerEvents = this._previousDocumentPointerEvents;
+      delete this._previousDocumentPointerEvents;
+    }
+
+    // Restore pointer events in the previous overlay(s)
+    const instances = Overlay.__attachedInstances;
+    let el;
+    // Use instances.pop() to ensure the reverse order
+    while ((el = instances.pop())) {
+      if (el === this) {
+        // Skip the current instance
+        continue;
+      }
+      el.shadowRoot.querySelector('[part="overlay"]').style.removeProperty('pointer-events');
+      if (!el.modeless) {
+        // Stop after the last modal
+        break;
       }
     }
+  }
 
-    /** @private */
-    _modelessChanged(modeless) {
-      if (!modeless) {
-        if (this.opened) {
-          this._addGlobalListeners();
-          this._enterModalState();
-        }
-      } else {
-        this._removeGlobalListeners();
-        this._exitModalState();
+  /** @protected */
+  _removeOldContent() {
+    if (!this.content || !this._contentNodes) {
+      return;
+    }
+
+    this._observer.disconnect();
+
+    this._contentNodes.forEach((node) => {
+      if (node.parentNode === this.content) {
+        this.content.removeChild(node);
       }
+    });
+
+    if (this._originalContentPart) {
+      // Restore the original <div part="content">
+      this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);
+      this.$.content = this._originalContentPart;
+      this._originalContentPart = undefined;
     }
 
-    /** @private */
-    _openedChanged(opened, wasOpened) {
-      if (opened) {
-        this._saveFocus();
+    this._observer.connect();
 
-        this._animatedOpening();
+    this._contentNodes = undefined;
+    this.content = undefined;
+  }
 
-        afterNextRender(this, () => {
-          this._trapFocus();
+  /**
+   * @param {!HTMLTemplateElement} template
+   * @protected
+   */
+  _stampOverlayTemplate(template) {
+    this._removeOldContent();
+
+    if (!template._Templatizer) {
+      template._Templatizer = templatize(template, this, {
+        forwardHostProp(prop, value) {
+          if (this._instance) {
+            this._instance.forwardHostProp(prop, value);
+          }
+        },
+      });
+    }
+
+    this._instance = new template._Templatizer({});
+    this._contentNodes = Array.from(this._instance.root.childNodes);
+
+    const templateRoot = template._templateRoot || (template._templateRoot = template.getRootNode());
+
+    if (templateRoot !== document) {
+      if (!this.$.content.shadowRoot) {
+        this.$.content.attachShadow({ mode: 'open' });
+      }
+
+      let scopeCssText = Array.from(templateRoot.querySelectorAll('style')).reduce(
+        (result, style) => result + style.textContent,
+        '',
+      );
+
+      // The overlay root’s :host styles should not apply inside the overlay
+      scopeCssText = scopeCssText.replace(/:host/g, ':host-nomatch');
+
+      if (scopeCssText) {
+        // Append a style to the content shadowRoot
+        const style = document.createElement('style');
+        style.textContent = scopeCssText;
+        this.$.content.shadowRoot.appendChild(style);
+        this._contentNodes.unshift(style);
+      }
+
+      this.$.content.shadowRoot.appendChild(this._instance.root);
+      this.content = this.$.content.shadowRoot;
+    } else {
+      this.appendChild(this._instance.root);
+      this.content = this;
+    }
+  }
+
+  /** @private */
+  _removeNewRendererOrTemplate(template, oldTemplate, renderer, oldRenderer) {
+    if (template !== oldTemplate) {
+      this.template = undefined;
+    } else if (renderer !== oldRenderer) {
+      this.renderer = undefined;
+    }
+  }
 
-          const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
-          this.dispatchEvent(evt);
-        });
+  /** @private */
+  // eslint-disable-next-line max-params
+  _templateOrRendererChanged(template, renderer, owner, model, opened) {
+    if (template && renderer) {
+      this._removeNewRendererOrTemplate(template, this._oldTemplate, renderer, this._oldRenderer);
+      throw new Error('You should only use either a renderer or a template for overlay content');
+    }
 
-        document.addEventListener('keydown', this._boundKeydownListener);
+    const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
+    this._oldModel = model;
+    this._oldOwner = owner;
 
-        if (!this.modeless) {
-          this._addGlobalListeners();
-        }
-      } else if (wasOpened) {
-        this._resetFocus();
+    const templateChanged = this._oldTemplate !== template;
+    this._oldTemplate = template;
 
-        this._animatedClosing();
+    const rendererChanged = this._oldRenderer !== renderer;
+    this._oldRenderer = renderer;
 
-        document.removeEventListener('keydown', this._boundKeydownListener);
+    const openedChanged = this._oldOpened !== opened;
+    this._oldOpened = opened;
 
-        if (!this.modeless) {
-          this._removeGlobalListeners();
-        }
-      }
+    if (rendererChanged) {
+      this.content = this;
+      this.content.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.content._$litPart$;
     }
 
-    /** @private */
-    _hiddenChanged(hidden) {
-      if (hidden && this.hasAttribute('closing')) {
-        this._flushAnimation('closing');
+    if (template && templateChanged) {
+      this._stampOverlayTemplate(template);
+    } else if (renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
+      if (opened) {
+        this.requestContentUpdate();
       }
     }
+  }
 
-    /**
-     * @return {boolean}
-     * @private
-     */
-    _shouldAnimate() {
-      const style = getComputedStyle(this);
-      const name = style.getPropertyValue('animation-name');
-      const hidden = style.getPropertyValue('display') === 'none';
-      return !hidden && name && name !== 'none';
-    }
+  /**
+   * @return {!Element}
+   * @protected
+   */
+  _getActiveElement() {
+    // Document.activeElement can be null
+    // https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement
+    let active = document.activeElement || document.body;
+    while (active.shadowRoot && active.shadowRoot.activeElement) {
+      active = active.shadowRoot.activeElement;
+    }
+    return active;
+  }
 
-    /**
-     * @param {string} type
-     * @param {Function} callback
-     * @private
-     */
-    _enqueueAnimation(type, callback) {
-      const handler = `__${type}Handler`;
-      const listener = (event) => {
-        if (event && event.target !== this) {
-          return;
-        }
-        callback();
-        this.removeEventListener('animationend', listener);
-        delete this[handler];
-      };
-      this[handler] = listener;
-      this.addEventListener('animationend', listener);
+  /**
+   * @param {!Node} node
+   * @return {boolean}
+   * @protected
+   */
+  _deepContains(node) {
+    if (this.contains(node)) {
+      return true;
     }
-
-    /**
-     * @param {string} type
-     * @protected
-     */
-    _flushAnimation(type) {
-      const handler = `__${type}Handler`;
-      if (typeof this[handler] === 'function') {
-        this[handler]();
-      }
+    let n = node;
+    const doc = node.ownerDocument;
+    // Walk from node to `this` or `document`
+    while (n && n !== doc && n !== this) {
+      n = n.parentNode || n.host;
     }
+    return n === this;
+  }
 
-    /** @private */
-    _animatedOpening() {
-      if (this.parentNode === document.body && this.hasAttribute('closing')) {
-        this._flushAnimation('closing');
-      }
-      this._attachOverlay();
-      if (!this.modeless) {
-        this._enterModalState();
-      }
-      this.setAttribute('opening', '');
+  /**
+   * Brings the overlay as visually the frontmost one
+   */
+  bringToFront() {
+    let zIndex = '';
+    const frontmost = Overlay.__attachedInstances.filter((o) => o !== this).pop();
+    if (frontmost) {
+      const frontmostZIndex = frontmost.__zIndex;
+      zIndex = frontmostZIndex + 1;
+    }
+    this.style.zIndex = zIndex;
+    this.__zIndex = zIndex || parseFloat(getComputedStyle(this).zIndex);
+  }
+}
 
-      if (this._shouldAnimate()) {
-        this._enqueueAnimation('opening', () => {
-          this._finishOpening();
-        });
-      } else {
-        this._finishOpening();
-      }
-    }
+customElements.define(Overlay.is, Overlay);
 
-    /** @private */
-    _attachOverlay() {
-      this._placeholder = document.createComment('vaadin-overlay-placeholder');
-      this.parentNode.insertBefore(this._placeholder, this);
-      document.body.appendChild(this);
-      this.bringToFront();
-    }
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-    /** @private */
-    _finishOpening() {
-      this.removeAttribute('opening');
-    }
+const menuOverlayCore = i`
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
 
-    /** @private */
-    _finishClosing() {
-      this._detachOverlay();
-      this.$.overlay.style.removeProperty('pointer-events');
-      this.removeAttribute('closing');
-      this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
+  [part='overlay'] {
+    will-change: opacity, transform;
+  }
+
+  :host([opening]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
+
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
     }
+  }
 
-    /** @private */
-    _animatedClosing() {
-      if (this.hasAttribute('opening')) {
-        this._flushAnimation('opening');
-      }
-      if (this._placeholder) {
-        this._exitModalState();
-        this.setAttribute('closing', '');
-        this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
-
-        if (this._shouldAnimate()) {
-          this._enqueueAnimation('closing', () => {
-            this._finishClosing();
-          });
-        } else {
-          this._finishClosing();
-        }
-      }
+  :host([closing]) [part='overlay'] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
+
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
     }
+  }
+`;
 
-    /** @private */
-    _detachOverlay() {
-      this._placeholder.parentNode.insertBefore(this, this._placeholder);
-      this._placeholder.parentNode.removeChild(this._placeholder);
+registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
+
+const menuOverlayExt = i`
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 420px), (max-height: 420px) {
+    :host {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+      left: 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
     }
 
-    /** @private */
-    _mouseDownListener(event) {
-      this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+    [part='overlay'] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
     }
 
-    /** @private */
-    _mouseUpListener(event) {
-      this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part='content'] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
     }
 
-    /**
-     * Whether to close the overlay on outside click or not.
-     * Override this method to customize the closing logic.
-     *
-     * @param {Event} _event
-     * @return {boolean}
-     * @protected
-     */
-    _shouldCloseOnOutsideClick(_event) {
-      return this._last;
+    [part='backdrop'] {
+      display: block;
     }
 
-    /**
-     * Outside click listener used in capture phase to close the overlay before
-     * propagating the event to the listener on the element that triggered it.
-     * Otherwise, calling `open()` would result in closing and re-opening.
-     *
-     * @private
-     */
-    _outsideClickListener(event) {
-      if (event.composedPath().includes(this.$.overlay) || this._mouseDownInside || this._mouseUpInside) {
-        this._mouseDownInside = false;
-        this._mouseUpInside = false;
-        return;
-      }
+    /* Animations */
 
-      if (!this._shouldCloseOnOutsideClick(event)) {
-        return;
-      }
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
+    }
 
-      const evt = new CustomEvent('vaadin-overlay-outside-click', {
-        bubbles: true,
-        cancelable: true,
-        detail: { sourceEvent: event },
-      });
-      this.dispatchEvent(evt);
+    :host([closing]),
+    :host([closing]) [part='backdrop'] {
+      animation-delay: 0.14s;
+    }
 
-      if (this.opened && !evt.defaultPrevented) {
-        this.close(event);
-      }
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
     }
+  }
 
-    /**
-     * Listener used to close whe overlay on Escape press, if it is the last one.
-     * @private
-     */
-    _keydownListener(event) {
-      if (!this._last) {
-        return;
-      }
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
 
-      // Only close modeless overlay on Esc press when it contains focus
-      if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
-        return;
-      }
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }
+`;
 
-      if (event.key === 'Escape') {
-        const evt = new CustomEvent('vaadin-overlay-escape-press', {
-          bubbles: true,
-          cancelable: true,
-          detail: { sourceEvent: event },
-        });
-        this.dispatchEvent(evt);
+const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
 
-        if (this.opened && !evt.defaultPrevented) {
-          this.close(event);
-        }
-      }
-    }
-  };
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1631,6 +2430,10 @@ const PositionMixin = (superClass) =>
       }
     }
 
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
     __positionSettingsChanged() {
       this._updatePosition();
     }
@@ -1654,9 +2457,9 @@ const PositionMixin = (superClass) =>
       const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
       this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';
 
-      const isRTL = this.__isRTL;
-      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, isRTL);
-      const flexStart = (!isRTL && shouldAlignStartHorizontally) || (isRTL && !shouldAlignStartHorizontally);
+      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, this.__isRTL);
+      const flexStart =
+        (!this.__isRTL && shouldAlignStartHorizontally) || (this.__isRTL && !shouldAlignStartHorizontally);
       this.style.alignItems = flexStart ? 'flex-start' : 'flex-end';
 
       // Get the overlay rect after possible overlay alignment changes
@@ -1815,153 +2618,7 @@ const PositionMixin = (superClass) =>
 
 /**
  * @license
- * Copyright (c) 2017 - 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const overlayStyles = i`
-  :host {
-    z-index: 200;
-    position: fixed;
-
-    /* Despite of what the names say, <vaadin-overlay> is just a container
-          for position/sizing/alignment. The actual overlay is the overlay part. */
-
-    /* Default position constraints: the entire viewport. Note: themes can
-          override this to introduce gaps between the overlay and the viewport. */
-    inset: 0;
-    bottom: var(--vaadin-overlay-viewport-bottom);
-
-    /* Use flexbox alignment for the overlay part. */
-    display: flex;
-    flex-direction: column; /* makes dropdowns sizing easier */
-    /* Align to center by default. */
-    align-items: center;
-    justify-content: center;
-
-    /* Allow centering when max-width/max-height applies. */
-    margin: auto;
-
-    /* The host is not clickable, only the overlay part is. */
-    pointer-events: none;
-
-    /* Remove tap highlight on touch devices. */
-    -webkit-tap-highlight-color: transparent;
-
-    /* CSS API for host */
-    --vaadin-overlay-viewport-bottom: 0;
-  }
-
-  :host([hidden]),
-  :host(:not([opened]):not([closing])) {
-    display: none !important;
-  }
-
-  [part='overlay'] {
-    -webkit-overflow-scrolling: touch;
-    overflow: auto;
-    pointer-events: auto;
-
-    /* Prevent overflowing the host */
-    max-width: 100%;
-    box-sizing: border-box;
-
-    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
-  }
-
-  [part='backdrop'] {
-    z-index: -1;
-    content: '';
-    background: rgba(0, 0, 0, 0.5);
-    position: fixed;
-    inset: 0;
-    pointer-events: auto;
-  }
-`;
-
-/**
- * @license
- * Copyright (c) 2023 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-/**
- * A mixin that forwards CSS class names to the internal overlay element
- * by setting the `overlayClass` property or `overlay-class` attribute.
- *
- * @polymerMixin
- */
-const OverlayClassMixin = (superclass) =>
-  class OverlayClassMixinClass extends superclass {
-    static get properties() {
-      return {
-        /**
-         * A space-delimited list of CSS class names to set on the overlay element.
-         * This property does not affect other CSS class names set manually via JS.
-         *
-         * Note, if the CSS class name was set with this property, clearing it will
-         * remove it from the overlay, even if the same class name was also added
-         * manually, e.g. by using `classList.add()` in the `renderer` function.
-         *
-         * @attr {string} overlay-class
-         */
-        overlayClass: {
-          type: String,
-        },
-
-        /**
-         * An overlay element on which CSS class names are set.
-         *
-         * @protected
-         */
-        _overlayElement: {
-          type: Object,
-        },
-      };
-    }
-
-    static get observers() {
-      return ['__updateOverlayClassNames(overlayClass, _overlayElement)'];
-    }
-
-    /** @private */
-    __updateOverlayClassNames(overlayClass, overlayElement) {
-      if (!overlayElement) {
-        return;
-      }
-
-      // Overlay is set but overlayClass is not set
-      if (overlayClass === undefined) {
-        return;
-      }
-
-      const { classList } = overlayElement;
-
-      if (!this.__initialClasses) {
-        this.__initialClasses = new Set(classList);
-      }
-
-      if (Array.isArray(this.__previousClasses)) {
-        // Remove old classes that no longer apply
-        const classesToRemove = this.__previousClasses.filter((name) => !this.__initialClasses.has(name));
-        if (classesToRemove.length > 0) {
-          classList.remove(...classesToRemove);
-        }
-      }
-
-      // Add new classes based on the overlayClass
-      const classesToAdd = typeof overlayClass === 'string' ? overlayClass.split(' ') : [];
-      if (classesToAdd.length > 0) {
-        classList.add(...classesToAdd);
-      }
-
-      this.__previousClasses = classesToAdd;
-    }
-  };
-
-/**
- * @license
- * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1998,4 +2655,4 @@ class VirtualKeyboardController {
   }
 }
 
-export { OverlayMixin as O, PositionMixin as P, VirtualKeyboardController as V, afterNextRender as a, OverlayClassMixin as b, overlay as c, menuOverlayCore as d, hideOthers as h, menuOverlay as m, overlayStyles as o };
+export { Overlay as O, PositionMixin as P, VirtualKeyboardController as V, OptionalMutableData as a, modelForElement as b, afterNextRender as c, menuOverlayCore as d, menuOverlay as m, overlay as o, templatize as t };