@everymatrix/general-input 1.27.6 → 1.27.8

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

@@ -1,9 +1,9 @@
-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 { i, r as registerStyles, J as getDeepActiveElement, M as getFocusableElements, N as isElementFocused, H as ControllerMixin, O as getAncestorRootNodes } from './field-mixin.js';
 import { b as isIOS } from './input-field-shared-styles.js';
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -74,7 +74,113 @@ const overlay = i`
 
 registerStyles('', overlay, { moduleId: 'lumo-overlay' });
 
-registerStyles('vaadin-overlay', overlay, { moduleId: 'lumo-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/
+ */
+
+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' });
 
 /**
 @license
@@ -150,851 +256,326 @@ function afterNextRender(context, callback, args) {
 }
 
 /**
-@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
-*/
-
-// 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;
-}
+ * @license
+ * Copyright (c) 2017 Anton Korzunov
+ * SPDX-License-Identifier: MIT
+ */
 
 /**
- * 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.
+ * @fileoverview
  *
- * 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.
+ * This module includes JS code copied from the `aria-hidden` package:
+ * https://github.com/theKashey/aria-hidden/blob/master/src/index.ts
  */
-const MutableData = dedupingMixin(superClass => {
 
-  /**
-   * @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);
-    }
+/** @type {WeakMap<Element, number>} */
+let counterMap = new WeakMap();
+
+/** @type {WeakMap<Element, boolean>} */
+let uncontrolledNodes = new WeakMap();
+
+/** @type {Record<string, WeakMap<Element, number>>} */
+let markerMap = {};
+
+/** @type {number} */
+let lockCount = 0;
+
+/**
+ * @param {?Node} node
+ * @return {boolean}
+ */
+const isElement = (node) => node && node.nodeType === Node.ELEMENT_NODE;
+
+/**
+ * @param  {...unknown} args
+ */
+const logError = (...args) => {
+  console.error(`Error: ${args.join(' ')}. Skip setting aria-hidden.`);
+};
 
+/**
+ * @param {HTMLElement} parent
+ * @param {Element[]} targets
+ * @return {Element[]}
+ */
+const correctTargets = (parent, targets) => {
+  if (!isElement(parent)) {
+    logError(parent, 'is not a valid element');
+    return [];
   }
 
-  return MutableData;
+  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;
+      }
+
+      logError(target, 'is not contained inside', parent);
+      return null;
+    })
+    .filter((x) => Boolean(x));
+};
 
 /**
- * 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
+ * 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}
  */
-const OptionalMutableData = dedupingMixin(superClass => {
+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);
 
   /**
-   * @mixinClass
-   * @polymer
-   * @implements {Polymer_OptionalMutableData}
+   * @param {?Node} el
    */
-  class OptionalMutableData extends superClass {
-
-    /** @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
-      };
+  const keep = (el) => {
+    if (!el || elementsToKeep.has(el)) {
+      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);
-    }
-  }
+    elementsToKeep.add(el);
 
-  return OptionalMutableData;
+    const slot = el.assignedSlot;
+    if (slot) {
+      keep(slot);
+    }
 
-});
+    keep(el.parentNode || el.host);
+  };
 
-// Export for use by legacy behavior
-MutableData._mutablePropertyChange = mutablePropertyChange;
+  targets.forEach(keep);
 
-/**
-@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
-*/
+  /**
+   * @param {?Node} el
+   */
+  const deep = (parent) => {
+    if (!parent || elementsToStop.has(parent)) {
+      return;
+    }
 
-// 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;
+    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;
+      }
 
-/**
- * @constructor
- * @extends {HTMLTemplateElement}
- * @private
- */
-function HTMLTemplateElementExtension() { return newInstance; }
-HTMLTemplateElementExtension.prototype = Object.create(HTMLTemplateElement.prototype, {
-  constructor: {
-    value: HTMLTemplateElementExtension,
-    writable: true
-  }
-});
+      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;
 
-/**
- * @constructor
- * @implements {Polymer_PropertyEffects}
- * @extends {HTMLTemplateElementExtension}
- * @private
- */
-const DataTemplate = PropertyEffects(HTMLTemplateElementExtension);
+        counterMap.set(node, counterValue);
+        markerCounter.set(node, markerValue);
+        hiddenNodes.push(node);
 
-/**
- * @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 === 1 && alreadyHidden) {
+          uncontrolledNodes.set(node, true);
+        }
 
-/**
- * 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__;
+        if (markerValue === 1) {
+          node.setAttribute(markerName, 'true');
         }
-      // 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 {
-          const replace = n.__polymerReplaced__;
-          if (replace) {
-            wrap(wrap(replace).parentNode).replaceChild(n, replace);
-          }
+
+        if (!alreadyHidden) {
+          node.setAttribute(controlAttribute, 'true');
         }
       }
-      // hide and show nodes
-      else if (n.style) {
-        if (hide) {
-          n.__polymerDisplay__ = n.style.display;
-          n.style.display = 'none';
+    });
+  };
+
+  deep(parentNode);
+
+  elementsToKeep.clear();
+
+  lockCount += 1;
+
+  return () => {
+    hiddenNodes.forEach((node) => {
+      const counterValue = counterMap.get(node) - 1;
+      const markerValue = markerCounter.get(node) - 1;
+
+      counterMap.set(node, counterValue);
+      markerCounter.set(node, markerValue);
+
+      if (!counterValue) {
+        if (uncontrolledNodes.has(node)) {
+          uncontrolledNodes.delete(node);
         } else {
-          n.style.display = n.__polymerDisplay__;
+          node.removeAttribute(controlAttribute);
         }
       }
+
+      if (!markerValue) {
+        node.removeAttribute(markerName);
+      }
+    });
+
+    lockCount -= 1;
+
+    if (!lockCount) {
+      // clear
+      counterMap = new WeakMap();
+      counterMap = new WeakMap();
+      uncontrolledNodes = new WeakMap();
+      markerMap = {};
     }
-    n.__hideTemplateChildren__ = hide;
-    if (n._showHideChildren) {
-      n._showHideChildren(hide);
-    }
-  }
-}
+  };
+};
 
 /**
- * @polymer
- * @customElement
- * @appliesMixin PropertyEffects
- * @unrestricted
+ * 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
  */
-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();
-    }
+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]')));
   }
+
+  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.
+ */
+class AriaModalController {
   /**
-   * 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}
+   * @param {HTMLElement} 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]);
-    }
-  }
-  /**
-   * 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.
-   *
-   * 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}
-   */
-  forwardHostProp(prop, value) {
-    if (this._setPendingPropertyOrPath(prop, value, false, true)) {
-      this.__dataHost._enqueueClient(this);
-    }
-  }
+  constructor(host, callback) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
 
-  /**
-   * 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
-   */
-  _setUnmanagedPropertyToNode(node, prop, value) {
-    if (node.__hideTemplateChildren__ &&
-        node.nodeType == Node.TEXT_NODE && prop == 'textContent') {
-      node.__polymerTextContent__ = value;
-    } else {
-      super._setUnmanagedPropertyToNode(node, prop, value);
-    }
+    /**
+     * 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;
   }
+
   /**
-   * 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.
+   * Make the controller host modal by hiding other elements from screen readers
+   * using `aria-hidden` attribute (can be replaced with `inert` in the future).
    *
-   * @return {!Polymer_PropertyEffects} The parent model of this 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
    */
-  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;
+  showModal() {
+    const targets = this.callback();
+    this.__showOthers = hideOthers(targets);
   }
 
   /**
-   * 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
+   * Remove `aria-hidden` from other elements unless there are any other
+   * controller hosts on the page activated by using `showModal()` call.
    */
-   dispatchEvent(event) { // eslint-disable-line no-unused-vars
-     return true;
+  close() {
+    if (this.__showOthers) {
+      this.__showOthers();
+      this.__showOthers = null;
+    }
   }
 }
 
 /**
- * @constructor
- * @extends {TemplateInstanceBase}
- * @implements {Polymer_MutableData}
- * @private
+ * @license
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-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 */
 /**
- * @suppress {missingProperties} class.prototype is not defined for some reason
+ * A controller for saving a focused node and restoring focus to it later.
  */
-function createTemplatizerClass(template, templateInfo, options) {
-  /**
-   * @constructor
-   * @extends {TemplateInstanceBase}
-   */
-  let templatizerBase = options.mutableData ?
-    MutableTemplateInstanceBase : TemplateInstanceBase;
-
-  // Affordance for global mixins onto TemplatizeInstance
-  if (templatize.mixin) {
-    templatizerBase = templatize.mixin(templatizerBase);
-  }
-
+class FocusRestorationController {
   /**
-   * Anonymous class created by the templatize
-   * @constructor
-   * @private
+   * 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
    */
-  let klass = class extends templatizerBase { };
-  /** @override */
-  klass.prototype.__templatizeOptions = options;
-  klass.prototype._bindTemplate(template);
-  addNotifyEffects(klass, template, templateInfo, options);
-  return klass;
-}
-
-/**
- * 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 {
-      // 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)});
-    }
+  saveFocus(focusNode) {
+    this.focusNode = focusNode || getDeepActiveElement();
   }
-  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}
+   * Restores focus to the target node that was saved previously with `saveFocus()`.
    */
-  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;
-        }
-      }
+  restoreFocus() {
+    const focusNode = this.focusNode;
+    if (!focusNode) {
+      return;
     }
-  }
-}
 
-/**
- * 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;
-      }
+    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());
     } else {
-      // Still in a template scope, keep going up until
-      // a __templatizeInstance is found
-      node = wrap(node).parentNode;
+      focusNode.focus();
     }
+
+    this.focusNode = null;
   }
-  return null;
 }
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2021 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -1026,6 +607,27 @@ 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);
   }
@@ -1124,1123 +726,722 @@ 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 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
 /**
- *
- * `<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
+ * @polymerMixin
  * @mixes ControllerMixin
  */
-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. */
-
-          /* 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;
-
-          /* 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;
+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,
+        },
 
-          /* Allow centering when max-width/max-height applies. */
-          margin: auto;
+        /**
+         * Set to true to enable restoring of focus when overlay is closed.
+         * @attr {boolean} restore-focus-on-close
+         */
+        restoreFocusOnClose: {
+          type: Boolean,
+          value: false,
+        },
 
-          /* The host is not clickable, only the overlay part is. */
-          pointer-events: none;
+        /**
+         * Set to specify the element which should be focused on overlay close,
+         * if `restoreFocusOnClose` is set to true.
+         * @type {HTMLElement}
+         */
+        restoreFocusNode: {
+          type: HTMLElement,
+        },
+      };
+    }
 
-          /* Remove tap highlight on touch devices. */
-          -webkit-tap-highlight-color: transparent;
+    constructor() {
+      super();
 
-          /* CSS API for host */
-          --vaadin-overlay-viewport-bottom: 0;
-        }
+      this.__ariaModalController = new AriaModalController(this);
+      this.__focusTrapController = new FocusTrapController(this);
+      this.__focusRestorationController = new FocusRestorationController();
+    }
 
-        :host([hidden]),
-        :host(:not([opened]):not([closing])) {
-          display: none !important;
-        }
+    /** @protected */
+    ready() {
+      super.ready();
 
-        [part='overlay'] {
-          -webkit-overflow-scrolling: touch;
-          overflow: auto;
-          pointer-events: auto;
+      this.addController(this.__ariaModalController);
+      this.addController(this.__focusTrapController);
+      this.addController(this.__focusRestorationController);
+    }
 
-          /* Prevent overflowing the host in MSIE 11 */
-          max-width: 100%;
-          box-sizing: border-box;
+    /**
+     * Release focus and restore focus after the overlay is closed.
+     *
+     * @protected
+     */
+    _resetFocus() {
+      if (this.focusTrap) {
+        this.__ariaModalController.close();
+        this.__focusTrapController.releaseFocus();
+      }
 
-          -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
-        }
+      if (this.restoreFocusOnClose && this._shouldRestoreFocus()) {
+        this.__focusRestorationController.restoreFocus();
+      }
+    }
 
-        [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>
-    `;
-  }
+    /**
+     * Save the previously focused node when the overlay starts to open.
+     *
+     * @protected
+     */
+    _saveFocus() {
+      if (this.restoreFocusOnClose) {
+        this.__focusRestorationController.saveFocus(this.restoreFocusNode);
+      }
+    }
 
-  static get is() {
-    return 'vaadin-overlay';
-  }
+    /**
+     * Trap focus within the overlay after opening has completed.
+     *
+     * @protected
+     */
+    _trapFocus() {
+      if (this.focusTrap) {
+        this.__ariaModalController.showModal();
+        this.__focusTrapController.trapFocus(this.$.overlay);
+      }
+    }
 
-  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 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);
+    }
 
-  static get observers() {
-    return ['_templateOrRendererChanged(template, renderer, owner, model, opened)'];
-  }
+    /**
+     * 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;
+    }
+  };
 
-  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);
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-    this._observer = new FlattenedNodesObserver(this, (info) => {
-      this._setTemplateFromNodes(info.addedNodes);
-    });
+/**
+ * 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);
 
-    // Listener for preventing closing of the paper-dialog and all components extending `iron-overlay-behavior`.
-    this._boundIronOverlayCanceledListener = this._ironOverlayCanceled.bind(this);
+/**
+ * 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();
 
-    /* c8 ignore next 3 */
-    if (isIOS) {
-      this._boundIosResizeListener = () => this._detectIosNavbar();
-    }
-
-    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);
-  }
+/**
+ * @polymerMixin
+ */
+const OverlayStackMixin = (superClass) =>
+  class OverlayStackMixin extends superClass {
+    constructor() {
+      super();
 
-  /** @private */
-  _detectIosNavbar() {
-    /* c8 ignore next 15 */
-    if (!this.opened) {
-      return;
+      this._hasOverlayStackMixin = true;
     }
 
-    const innerHeight = window.innerHeight;
-    const innerWidth = window.innerWidth;
-
-    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');
+    /**
+     * Returns true if this is the last one in the opened overlays stack.
+     *
+     * @return {boolean}
+     * @protected
+     */
+    get _last() {
+      return isLastOverlay(this);
     }
-  }
 
-  /**
-   * @param {!Array<!Element>} nodes
-   * @protected
-   */
-  _setTemplateFromNodes(nodes) {
-    this.template = nodes.find((node) => node.localName && node.localName === 'template') || this.template;
-  }
-
-  /**
-   * @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;
+    /**
+     * 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);
     }
-  }
 
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
+    /** @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';
+      }
 
-    /* c8 ignore next 3 */
-    if (this._boundIosResizeListener) {
-      this._detectIosNavbar();
-      window.addEventListener('resize', this._boundIosResizeListener);
+      // Disable pointer events in other attached overlays
+      getAttachedInstances().forEach((el) => {
+        if (el !== this) {
+          el.$.overlay.style.pointerEvents = 'none';
+        }
+      });
     }
-  }
 
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
+    /** @protected */
+    _exitModalState() {
+      if (this._previousDocumentPointerEvents !== undefined) {
+        // Restore body pointer-events
+        document.body.style.pointerEvents = this._previousDocumentPointerEvents;
+        delete this._previousDocumentPointerEvents;
+      }
 
-    /* c8 ignore next 3 */
-    if (this._boundIosResizeListener) {
-      window.removeEventListener('resize', this._boundIosResizeListener);
-    }
-  }
+      // Restore pointer events in the previous overlay(s)
+      const instances = getAttachedInstances();
 
-  /**
-   * 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);
+      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;
+        }
+      }
     }
-  }
+  };
 
-  /** @private */
-  _ironOverlayCanceled(event) {
-    event.preventDefault();
-  }
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 
-  /** @private */
-  _mouseDownListener(event) {
-    this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
-  }
+/**
+ * @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,
+        },
 
-  /** @private */
-  _mouseUpListener(event) {
-    this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
-  }
+        /**
+         * Owner element passed with renderer function
+         * @type {HTMLElement}
+         */
+        owner: {
+          type: Object,
+        },
 
-  /**
-   * 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;
-    }
+        /**
+         * Object with properties that is passed to `renderer` function
+         */
+        model: {
+          type: Object,
+        },
 
-    const evt = new CustomEvent('vaadin-overlay-outside-click', {
-      bubbles: true,
-      cancelable: true,
-      detail: { sourceEvent: event },
-    });
-    this.dispatchEvent(evt);
+        /**
+         * 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,
+        },
 
-    if (this.opened && !evt.defaultPrevented) {
-      this.close(event);
-    }
-  }
+        /**
+         * 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',
+        },
 
-  /**
-   * @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;
+        /**
+         * 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 the overlay has backdrop on top of content when opened.
+         * @type {boolean}
+         */
+        withBackdrop: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+      };
     }
 
-    // Only close modeless overlay on Esc press when it contains focus
-    if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
-      return;
+    static get observers() {
+      return ['_rendererOrDataChanged(renderer, owner, model, opened)'];
     }
 
-    if (event.key === 'Escape') {
-      const evt = new CustomEvent('vaadin-overlay-escape-press', {
-        bubbles: true,
-        cancelable: true,
-        detail: { sourceEvent: event },
-      });
-      this.dispatchEvent(evt);
+    constructor() {
+      super();
 
-      if (this.opened && !evt.defaultPrevented) {
-        this.close(event);
+      this._boundMouseDownListener = this._mouseDownListener.bind(this);
+      this._boundMouseUpListener = this._mouseUpListener.bind(this);
+      this._boundOutsideClickListener = this._outsideClickListener.bind(this);
+      this._boundKeydownListener = this._keydownListener.bind(this);
+
+      /* c8 ignore next 3 */
+      if (isIOS) {
+        this._boundIosResizeListener = () => this._detectIosNavbar();
       }
     }
-  }
 
-  /** @protected */
-  _ensureTemplatized() {
-    this._setTemplateFromNodes(Array.from(this.children));
-  }
+    /** @protected */
+    ready() {
+      super.ready();
 
-  /**
-   * @event vaadin-overlay-open
-   * fired after the `vaadin-overlay` is opened.
-   *
-   * @private
-   */
-  _openedChanged(opened, wasOpened) {
-    if (!this._instance) {
-      this._ensureTemplatized();
+      // 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', () => {});
     }
 
-    if (opened) {
-      // Store focused node.
-      this.__restoreFocusNode = this._getActiveElement();
-      this._animatedOpening();
-
-      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();
-      }
-
-      this._animatedClosing();
-
-      document.removeEventListener('keydown', this._boundKeydownListener);
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
 
-      if (!this.modeless) {
-        this._removeGlobalListeners();
+      /* c8 ignore next 3 */
+      if (this._boundIosResizeListener) {
+        this._detectIosNavbar();
+        window.addEventListener('resize', this._boundIosResizeListener);
       }
     }
-  }
 
-  /** @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';
-  }
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
 
-  /**
-   * @param {string} type
-   * @param {Function} callback
-   * @protected
-   */
-  _enqueueAnimation(type, callback) {
-    const handler = `__${type}Handler`;
-    const listener = (event) => {
-      if (event && event.target !== this) {
-        return;
+      /* c8 ignore next 3 */
+      if (this._boundIosResizeListener) {
+        window.removeEventListener('resize', this._boundIosResizeListener);
       }
-      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]();
     }
-  }
 
-  /** @protected */
-  _animatedOpening() {
-    if (this.parentNode === document.body && this.hasAttribute('closing')) {
-      this._flushAnimation('closing');
-    }
-    this._attachOverlay();
-    if (!this.modeless) {
-      this._enterModalState();
+    /**
+     * 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);
+      }
     }
-    this.setAttribute('opening', '');
 
-    if (this._shouldAnimate()) {
-      this._enqueueAnimation('opening', () => {
-        this._finishOpening();
+    /**
+     * @param {Event=} sourceEvent
+     */
+    close(sourceEvent) {
+      const evt = new CustomEvent('vaadin-overlay-close', {
+        bubbles: true,
+        cancelable: true,
+        detail: { sourceEvent },
       });
-    } else {
-      this._finishOpening();
+      this.dispatchEvent(evt);
+      if (!evt.defaultPrevented) {
+        this.opened = false;
+      }
     }
-  }
 
-  /** @protected */
-  _attachOverlay() {
-    this._placeholder = document.createComment('vaadin-overlay-placeholder');
-    this.parentNode.insertBefore(this._placeholder, this);
-    document.body.appendChild(this);
-    this.bringToFront();
-  }
+    /** @private */
+    _detectIosNavbar() {
+      /* c8 ignore next 15 */
+      if (!this.opened) {
+        return;
+      }
 
-  /** @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 (this._shouldAnimate()) {
-        this._enqueueAnimation('closing', () => {
-          this._finishClosing();
-        });
+      if (landscape && clientHeight > innerHeight) {
+        this.style.setProperty('--vaadin-overlay-viewport-bottom', `${clientHeight - innerHeight}px`);
       } else {
-        this._finishClosing();
+        this.style.setProperty('--vaadin-overlay-viewport-bottom', '0');
       }
     }
-  }
-
-  /** @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 */
+    _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 */
-  _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 */
+    _removeGlobalListeners() {
+      document.removeEventListener('mousedown', this._boundMouseDownListener);
+      document.removeEventListener('mouseup', this._boundMouseUpListener);
+      document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
     }
 
-    // Disable pointer events in other attached overlays
-    Overlay.__attachedInstances.forEach((el) => {
-      if (el !== this) {
-        el.shadowRoot.querySelector('[part="overlay"]').style.pointerEvents = 'none';
-      }
-    });
-  }
-
-  /** @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 */
+    _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$;
       }
-    }
-  }
-
-  /** @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 (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
+        this.requestContentUpdate();
       }
-    });
-
-    if (this._originalContentPart) {
-      // Restore the original <div part="content">
-      this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);
-      this.$.content = this._originalContentPart;
-      this._originalContentPart = undefined;
     }
 
-    this._observer.connect();
-
-    this._contentNodes = undefined;
-    this.content = undefined;
-  }
-
-  /**
-   * @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);
+    /** @private */
+    _modelessChanged(modeless) {
+      if (!modeless) {
+        if (this.opened) {
+          this._addGlobalListeners();
+          this._enterModalState();
+        }
+      } else {
+        this._removeGlobalListeners();
+        this._exitModalState();
       }
-
-      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;
-    }
-  }
+    /** @private */
+    _openedChanged(opened, wasOpened) {
+      if (opened) {
+        this._saveFocus();
 
-  /** @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');
-    }
+        this._animatedOpening();
 
-    const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
-    this._oldModel = model;
-    this._oldOwner = owner;
+        afterNextRender(this, () => {
+          this._trapFocus();
+
+          const evt = new CustomEvent('vaadin-overlay-open', { bubbles: true });
+          this.dispatchEvent(evt);
+        });
 
-    const templateChanged = this._oldTemplate !== template;
-    this._oldTemplate = template;
+        document.addEventListener('keydown', this._boundKeydownListener);
 
-    const rendererChanged = this._oldRenderer !== renderer;
-    this._oldRenderer = renderer;
+        if (!this.modeless) {
+          this._addGlobalListeners();
+        }
+      } else if (wasOpened) {
+        this._resetFocus();
 
-    const openedChanged = this._oldOpened !== opened;
-    this._oldOpened = opened;
+        this._animatedClosing();
 
-    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$;
-    }
+        document.removeEventListener('keydown', this._boundKeydownListener);
 
-    if (template && templateChanged) {
-      this._stampOverlayTemplate(template);
-    } else if (renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
-      if (opened) {
-        this.requestContentUpdate();
+        if (!this.modeless) {
+          this._removeGlobalListeners();
+        }
       }
     }
-  }
-
-  /**
-   * @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 {!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;
+    /** @private */
+    _hiddenChanged(hidden) {
+      if (hidden && this.hasAttribute('closing')) {
+        this._flushAnimation('closing');
+      }
     }
-    return n === this;
-  }
-
-  /**
-   * 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);
-  }
-}
 
-customElements.define(Overlay.is, Overlay);
+    /**
+     * @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';
+    }
 
-/**
- * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+    /**
+     * @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);
+    }
 
-const menuOverlayCore = i`
-  :host([opening]),
-  :host([closing]) {
-    animation: 0.14s lumo-overlay-dummy-animation;
-  }
+    /**
+     * @param {string} type
+     * @protected
+     */
+    _flushAnimation(type) {
+      const handler = `__${type}Handler`;
+      if (typeof this[handler] === 'function') {
+        this[handler]();
+      }
+    }
 
-  [part='overlay'] {
-    will-change: opacity, transform;
-  }
+    /** @private */
+    _animatedOpening() {
+      if (this.parentNode === document.body && this.hasAttribute('closing')) {
+        this._flushAnimation('closing');
+      }
+      this._attachOverlay();
+      if (!this.modeless) {
+        this._enterModalState();
+      }
+      this.setAttribute('opening', '');
 
-  :host([opening]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-enter ease-out both;
-  }
+      if (this._shouldAnimate()) {
+        this._enqueueAnimation('opening', () => {
+          this._finishOpening();
+        });
+      } else {
+        this._finishOpening();
+      }
+    }
 
-  @keyframes lumo-menu-overlay-enter {
-    0% {
-      opacity: 0;
-      transform: translateY(-4px);
+    /** @private */
+    _attachOverlay() {
+      this._placeholder = document.createComment('vaadin-overlay-placeholder');
+      this.parentNode.insertBefore(this._placeholder, this);
+      document.body.appendChild(this);
+      this.bringToFront();
     }
-  }
 
-  :host([closing]) [part='overlay'] {
-    animation: 0.1s lumo-menu-overlay-exit both;
-  }
+    /** @private */
+    _finishOpening() {
+      this.removeAttribute('opening');
+    }
 
-  @keyframes lumo-menu-overlay-exit {
-    100% {
-      opacity: 0;
+    /** @private */
+    _finishClosing() {
+      this._detachOverlay();
+      this.$.overlay.style.removeProperty('pointer-events');
+      this.removeAttribute('closing');
+      this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
     }
-  }
-`;
 
-registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
+    /** @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();
+        }
+      }
+    }
 
-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 */
+    _detachOverlay() {
+      this._placeholder.parentNode.insertBefore(this, this._placeholder);
+      this._placeholder.parentNode.removeChild(this._placeholder);
     }
 
-    [part='overlay'] {
-      max-height: 50vh;
-      width: 100vw;
-      border-radius: 0;
-      box-shadow: var(--lumo-box-shadow-xl);
+    /** @private */
+    _mouseDownListener(event) {
+      this._mouseDownInside = 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);
+    /** @private */
+    _mouseUpListener(event) {
+      this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
     }
 
-    [part='backdrop'] {
-      display: block;
+    /**
+     * 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;
     }
 
-    /* Animations */
+    /**
+     * 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;
+      }
 
-    :host([opening]) [part='overlay'] {
-      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
-    }
+      if (!this._shouldCloseOnOutsideClick(event)) {
+        return;
+      }
 
-    :host([closing]),
-    :host([closing]) [part='backdrop'] {
-      animation-delay: 0.14s;
-    }
+      const evt = new CustomEvent('vaadin-overlay-outside-click', {
+        bubbles: true,
+        cancelable: true,
+        detail: { sourceEvent: event },
+      });
+      this.dispatchEvent(evt);
 
-    :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;
+      if (this.opened && !evt.defaultPrevented) {
+        this.close(event);
+      }
     }
-  }
 
-  @keyframes lumo-mobile-menu-overlay-enter {
-    0% {
-      transform: translateY(150%);
-    }
-  }
+    /**
+     * 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-exit {
-    100% {
-      transform: translateY(150%);
-    }
-  }
-`;
+      // Only close modeless overlay on Esc press when it contains focus
+      if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+        return;
+      }
 
-const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+      if (event.key === 'Escape') {
+        const evt = new CustomEvent('vaadin-overlay-escape-press', {
+          bubbles: true,
+          cancelable: true,
+          detail: { sourceEvent: event },
+        });
+        this.dispatchEvent(evt);
 
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+        if (this.opened && !evt.defaultPrevented) {
+          this.close(event);
+        }
+      }
+    }
+  };
 
 /**
  * @license
- * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2430,10 +1631,6 @@ const PositionMixin = (superClass) =>
       }
     }
 
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
-
     __positionSettingsChanged() {
       this._updatePosition();
     }
@@ -2457,9 +1654,9 @@ const PositionMixin = (superClass) =>
       const shouldAlignStartVertically = this.__shouldAlignStartVertically(targetRect);
       this.style.justifyContent = shouldAlignStartVertically ? 'flex-start' : 'flex-end';
 
-      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, this.__isRTL);
-      const flexStart =
-        (!this.__isRTL && shouldAlignStartHorizontally) || (this.__isRTL && !shouldAlignStartHorizontally);
+      const isRTL = this.__isRTL;
+      const shouldAlignStartHorizontally = this.__shouldAlignStartHorizontally(targetRect, isRTL);
+      const flexStart = (!isRTL && shouldAlignStartHorizontally) || (isRTL && !shouldAlignStartHorizontally);
       this.style.alignItems = flexStart ? 'flex-start' : 'flex-end';
 
       // Get the overlay rect after possible overlay alignment changes
@@ -2618,7 +1815,153 @@ const PositionMixin = (superClass) =>
 
 /**
  * @license
- * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const 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.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -2655,4 +1998,4 @@ class VirtualKeyboardController {
   }
 }
 
-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 };
+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 };