@everymatrix/general-input 0.0.1

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

@@ -0,0 +1,2693 @@
+import { i, r as registerStyles, d as dedupingMixin, H as PropertyEffects, J as strictTemplatePolicy, w as wrap, M as legacyWarnings, N as getFocusableElements, b as isElementFocused, T as ThemableMixin, G as DirMixin, C as ControllerMixin, P as PolymerElement, h as html, F as FlattenedNodesObserver, O as getAncestorRootNodes } from './field-mixin.js';
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const overlay = i`
+  :host {
+    top: var(--lumo-space-m);
+    right: var(--lumo-space-m);
+    bottom: var(--lumo-space-m);
+    left: var(--lumo-space-m);
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
+  }
+
+  [part='overlay'] {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-m);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-xs);
+  }
+
+  [part='backdrop'] {
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
+  }
+
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
+
+  :host([closing]) [part='backdrop'] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
+  }
+
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes lumo-overlay-dummy-animation {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+`;
+
+registerStyles('', overlay, { moduleId: 'lumo-overlay' });
+
+registerStyles('vaadin-overlay', overlay, { moduleId: 'lumo-vaadin-overlay' });
+
+/**
+@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
+*/
+
+let scheduled = false;
+let beforeRenderQueue = [];
+let afterRenderQueue = [];
+
+function schedule() {
+  scheduled = true;
+  // before next render
+  requestAnimationFrame(function() {
+    scheduled = false;
+    flushQueue(beforeRenderQueue);
+    // after the render
+    setTimeout(function() {
+      runQueue(afterRenderQueue);
+    });
+  });
+}
+
+function flushQueue(queue) {
+  while (queue.length) {
+    callMethod(queue.shift());
+  }
+}
+
+function runQueue(queue) {
+  for (let i=0, l=queue.length; i < l; i++) {
+    callMethod(queue.shift());
+  }
+}
+
+function callMethod(info) {
+  const context = info[0];
+  const callback = info[1];
+  const args = info[2];
+  try {
+    callback.apply(context, args);
+  } catch(e) {
+    setTimeout(() => {
+      throw e;
+    });
+  }
+}
+
+/**
+ * Enqueues a callback which will be run after the next render, equivalent
+ * to one task (`setTimeout`) after the next `requestAnimationFrame`.
+ *
+ * This method is useful for tuning the first-render performance of an
+ * element or application by deferring non-critical work until after the
+ * first paint.  Typical non-render-critical work may include adding UI
+ * event listeners and aria attributes.
+ *
+ * @param {*} context Context object the callback function will be bound to
+ * @param {function(...*):void} callback Callback function
+ * @param {!Array=} args An array of arguments to call the callback function with
+ * @return {void}
+ */
+function afterNextRender(context, callback, args) {
+  if (!scheduled) {
+    schedule();
+  }
+  afterRenderQueue.push([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;
+}
+
+/**
+ * Element class mixin to skip strict dirty-checking for objects and arrays
+ * (always consider them to be "dirty"), for use on elements utilizing
+ * `PropertyEffects`
+ *
+ * By default, `PropertyEffects` performs strict dirty checking on
+ * objects, which means that any deep modifications to an object or array will
+ * not be propagated unless "immutable" data patterns are used (i.e. all object
+ * references from the root to the mutation were changed).
+ *
+ * Polymer also provides a proprietary data mutation and path notification API
+ * (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
+ * mutation and notification of deep changes in an object graph to all elements
+ * bound to the same object graph.
+ *
+ * In cases where neither immutable patterns nor the data mutation API can be
+ * used, applying this mixin will cause Polymer to skip dirty checking for
+ * objects and arrays (always consider them to be "dirty").  This allows a
+ * user to make a deep modification to a bound object graph, and then either
+ * simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
+ * (e.g. `this.notifyPath('items')`) to update the tree.  Note that all
+ * elements that wish to be updated based on deep mutations must apply this
+ * mixin or otherwise skip strict dirty checking for objects/arrays.
+ * Specifically, any elements in the binding tree between the source of a
+ * mutation and the consumption of it must apply this mixin or enable the
+ * `OptionalMutableData` mixin.
+ *
+ * In order to make the dirty check strategy configurable, see
+ * `OptionalMutableData`.
+ *
+ * Note, the performance characteristics of propagating large object graphs
+ * will be worse as opposed to using strict dirty checking with immutable
+ * patterns or Polymer's path notification API.
+ *
+ * @mixinFunction
+ * @polymer
+ * @summary Element class mixin to skip strict dirty-checking for objects
+ *   and arrays
+ * @template T
+ * @param {function(new:T)} superClass Class to apply mixin to.
+ * @return {function(new:T)} superClass with mixin applied.
+ */
+const 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);
+    }
+
+  }
+
+  return MutableData;
+
+});
+
+/**
+ * Element class mixin to add the optional ability to skip strict
+ * dirty-checking for objects and arrays (always consider them to be
+ * "dirty") by setting a `mutable-data` attribute on an element instance.
+ *
+ * By default, `PropertyEffects` performs strict dirty checking on
+ * objects, which means that any deep modifications to an object or array will
+ * not be propagated unless "immutable" data patterns are used (i.e. all object
+ * references from the root to the mutation were changed).
+ *
+ * Polymer also provides a proprietary data mutation and path notification API
+ * (e.g. `notifyPath`, `set`, and array mutation API's) that allow efficient
+ * mutation and notification of deep changes in an object graph to all elements
+ * bound to the same object graph.
+ *
+ * In cases where neither immutable patterns nor the data mutation API can be
+ * used, applying this mixin will allow Polymer to skip dirty checking for
+ * objects and arrays (always consider them to be "dirty").  This allows a
+ * user to make a deep modification to a bound object graph, and then either
+ * simply re-set the object (e.g. `this.items = this.items`) or call `notifyPath`
+ * (e.g. `this.notifyPath('items')`) to update the tree.  Note that all
+ * elements that wish to be updated based on deep mutations must apply this
+ * mixin or otherwise skip strict dirty checking for objects/arrays.
+ * Specifically, any elements in the binding tree between the source of a
+ * mutation and the consumption of it must enable this mixin or apply the
+ * `MutableData` mixin.
+ *
+ * While this mixin adds the ability to forgo Object/Array dirty checking,
+ * the `mutableData` flag defaults to false and must be set on the instance.
+ *
+ * Note, the performance characteristics of propagating large object graphs
+ * will be worse by relying on `mutableData: true` as opposed to using
+ * strict dirty checking with immutable patterns or Polymer's path notification
+ * API.
+ *
+ * @mixinFunction
+ * @polymer
+ * @summary Element class mixin to optionally skip strict dirty-checking
+ *   for objects and arrays
+ */
+const OptionalMutableData = dedupingMixin(superClass => {
+
+  /**
+   * @mixinClass
+   * @polymer
+   * @implements {Polymer_OptionalMutableData}
+   */
+  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
+      };
+    }
+
+    /**
+     * 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);
+    }
+  }
+
+  return OptionalMutableData;
+
+});
+
+// Export for use by legacy behavior
+MutableData._mutablePropertyChange = mutablePropertyChange;
+
+/**
+@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
+*/
+
+// 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;
+
+/**
+ * @constructor
+ * @extends {HTMLTemplateElement}
+ * @private
+ */
+function HTMLTemplateElementExtension() { return newInstance; }
+HTMLTemplateElementExtension.prototype = Object.create(HTMLTemplateElement.prototype, {
+  constructor: {
+    value: HTMLTemplateElementExtension,
+    writable: true
+  }
+});
+
+/**
+ * @constructor
+ * @implements {Polymer_PropertyEffects}
+ * @extends {HTMLTemplateElementExtension}
+ * @private
+ */
+const DataTemplate = PropertyEffects(HTMLTemplateElementExtension);
+
+/**
+ * @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;
+}
+
+/**
+ * Base class for TemplateInstance.
+ * @constructor
+ * @extends {HTMLElement}
+ * @implements {Polymer_PropertyEffects}
+ * @private
+ */
+const templateInstanceBase = PropertyEffects(class {});
+
+function showHideChildren(hide, children) {
+  for (let i=0; i<children.length; i++) {
+    let n = children[i];
+    // Ignore non-changes
+    if (Boolean(hide) != Boolean(n.__hideTemplateChildren__)) {
+      // clear and restore text
+      if (n.nodeType === Node.TEXT_NODE) {
+        if (hide) {
+          n.__polymerTextContent__ = n.textContent;
+          n.textContent = '';
+        } else {
+          n.textContent = n.__polymerTextContent__;
+        }
+      // remove and replace slot
+      } else if (n.localName === 'slot') {
+        if (hide) {
+          n.__polymerReplaced__ = document.createComment('hidden-slot');
+          wrap(wrap(n).parentNode).replaceChild(n.__polymerReplaced__, n);
+        } else {
+          const replace = n.__polymerReplaced__;
+          if (replace) {
+            wrap(wrap(replace).parentNode).replaceChild(n, replace);
+          }
+        }
+      }
+      // hide and show nodes
+      else if (n.style) {
+        if (hide) {
+          n.__polymerDisplay__ = n.style.display;
+          n.style.display = 'none';
+        } else {
+          n.style.display = n.__polymerDisplay__;
+        }
+      }
+    }
+    n.__hideTemplateChildren__ = hide;
+    if (n._showHideChildren) {
+      n._showHideChildren(hide);
+    }
+  }
+}
+
+/**
+ * @polymer
+ * @customElement
+ * @appliesMixin PropertyEffects
+ * @unrestricted
+ */
+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();
+    }
+  }
+  /**
+   * 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}
+   */
+  _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);
+    }
+  }
+
+  /**
+   * 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);
+    }
+  }
+  /**
+   * Find the parent model of this template instance.  The parent model
+   * is either another templatize instance that had option `parentModel: true`,
+   * or else the host element.
+   *
+   * @return {!Polymer_PropertyEffects} The parent model of this instance
+   */
+  get parentModel() {
+    let model = this.__parentModel;
+    if (!model) {
+      let options;
+      model = this;
+      do {
+        // A template instance's `__dataHost` is a <template>
+        // `model.__dataHost.__dataHost` is the template's host
+        model = model.__dataHost.__dataHost;
+      } while ((options = model.__templatizeOptions) && !options.parentModel);
+      this.__parentModel = model;
+    }
+    return model;
+  }
+
+  /**
+   * Stub of HTMLElement's `dispatchEvent`, so that effects that may
+   * dispatch events safely no-op.
+   *
+   * @param {Event} event Event to dispatch
+   * @return {boolean} Always true.
+   * @override
+   */
+   dispatchEvent(event) { // eslint-disable-line no-unused-vars
+     return true;
+  }
+}
+
+/**
+ * @constructor
+ * @extends {TemplateInstanceBase}
+ * @implements {Polymer_MutableData}
+ * @private
+ */
+const MutableTemplateInstanceBase = MutableData(
+    // This cast shouldn't be neccessary, but Closure doesn't understand that
+    // TemplateInstanceBase is a constructor function.
+    /** @type {function(new:TemplateInstanceBase)} */ (TemplateInstanceBase));
+
+function findMethodHost(template) {
+  // Technically this should be the owner of the outermost template.
+  // In shadow dom, this is always getRootNode().host, but we can
+  // approximate this via cooperation with our dataHost always setting
+  // `_methodHost` as long as there were bindings (or id's) on this
+  // instance causing it to get a dataHost.
+  let templateHost = template.__dataHost;
+  return templateHost && templateHost._methodHost || templateHost;
+}
+
+/* eslint-disable valid-jsdoc */
+/**
+ * @suppress {missingProperties} class.prototype is not defined for some reason
+ */
+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);
+  }
+
+  /**
+   * Anonymous class created by the templatize
+   * @constructor
+   * @private
+   */
+  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)});
+    }
+  }
+  if (options.forwardHostProp && template.__dataHost) {
+    for (let hprop in hostProps) {
+      // As we're iterating hostProps in this function, note whether
+      // there were any, for an optimization in addPropagateEffects
+      if (!templateInfo.hasHostProps) {
+        templateInfo.hasHostProps = true;
+      }
+      klass.prototype._addPropertyEffect(hprop,
+        klass.prototype.PROPERTY_EFFECT_TYPES.NOTIFY,
+        {fn: createNotifyHostPropEffect()});
+    }
+  }
+}
+
+function createNotifyInstancePropEffect(instProp, userNotifyInstanceProp) {
+  return function notifyInstanceProp(inst, prop, props) {
+    userNotifyInstanceProp.call(inst.__templatizeOwner,
+      inst, prop, props[prop]);
+  };
+}
+
+function createNotifyHostPropEffect() {
+  return function notifyHostProp(inst, prop, props) {
+    inst.__dataHost._setPendingPropertyOrPath('_host_' + prop, props[prop], true, true);
+  };
+}
+
+
+/**
+ * Returns an anonymous `PropertyEffects` class bound to the
+ * `<template>` provided.  Instancing the class will result in the
+ * template being stamped into a document fragment stored as the instance's
+ * `root` property, after which it can be appended to the DOM.
+ *
+ * Templates may utilize all Polymer data-binding features as well as
+ * declarative event listeners.  Event listeners and inline computing
+ * functions in the template will be called on the host of the template.
+ *
+ * The constructor returned takes a single argument dictionary of initial
+ * property values to propagate into template bindings.  Additionally
+ * host properties can be forwarded in, and instance properties can be
+ * notified out by providing optional callbacks in the `options` dictionary.
+ *
+ * Valid configuration in `options` are as follows:
+ *
+ * - `forwardHostProp(property, value)`: Called when a property referenced
+ *   in the template changed on the template's host. As this library does
+ *   not retain references to templates instanced by the user, it is the
+ *   templatize owner's responsibility to forward host property changes into
+ *   user-stamped instances.  The `instance.forwardHostProp(property, value)`
+ *    method on the generated class should be called to forward host
+ *   properties into the template to prevent unnecessary property-changed
+ *   notifications. Any properties referenced in the template that are not
+ *   defined in `instanceProps` will be notified up to the template's host
+ *   automatically.
+ * - `instanceProps`: Dictionary of property names that will be added
+ *   to the instance by the templatize owner.  These properties shadow any
+ *   host properties, and changes within the template to these properties
+ *   will result in `notifyInstanceProp` being called.
+ * - `mutableData`: When `true`, the generated class will skip strict
+ *   dirty-checking for objects and arrays (always consider them to be
+ *   "dirty").
+ * - `notifyInstanceProp(instance, property, value)`: Called when
+ *   an instance property changes.  Users may choose to call `notifyPath`
+ *   on e.g. the owner to notify the change.
+ * - `parentModel`: When `true`, events handled by declarative event listeners
+ *   (`on-event="handler"`) will be decorated with a `model` property pointing
+ *   to the template instance that stamped it.  It will also be returned
+ *   from `instance.parentModel` in cases where template instance nesting
+ *   causes an inner model to shadow an outer model.
+ *
+ * All callbacks are called bound to the `owner`. Any context
+ * needed for the callbacks (such as references to `instances` stamped)
+ * should be stored on the `owner` such that they can be retrieved via
+ * `this`.
+ *
+ * When `options.forwardHostProp` is declared as an option, any properties
+ * referenced in the template will be automatically forwarded from the host of
+ * the `<template>` to instances, with the exception of any properties listed in
+ * the `options.instanceProps` object.  `instanceProps` are assumed to be
+ * managed by the owner of the instances, either passed into the constructor
+ * or set after the fact.  Note, any properties passed into the constructor will
+ * always be set to the instance (regardless of whether they would normally
+ * be forwarded from the host).
+ *
+ * Note that `templatize()` can be run only once for a given `<template>`.
+ * Further calls will result in an error. Also, there is a special
+ * behavior if the template was duplicated through a mechanism such as
+ * `<dom-repeat>` or `<test-fixture>`. In this case, all calls to
+ * `templatize()` return the same class for all duplicates of a template.
+ * The class returned from `templatize()` is generated only once using
+ * the `options` from the first call. This means that any `options`
+ * provided to subsequent calls will be ignored. Therefore, it is very
+ * important not to close over any variables inside the callbacks. Also,
+ * arrow functions must be avoided because they bind the outer `this`.
+ * Inside the callbacks, any contextual information can be accessed
+ * through `this`, which points to the `owner`.
+ *
+ * @param {!HTMLTemplateElement} template Template to templatize
+ * @param {Polymer_PropertyEffects=} owner Owner of the template instances;
+ *   any optional callbacks will be bound to this owner.
+ * @param {Object=} options Options dictionary (see summary for details)
+ * @return {function(new:TemplateInstanceBase, Object=)} Generated class bound
+ *   to the template provided
+ * @suppress {invalidCasts}
+ */
+function templatize(template, owner, options) {
+  // Under strictTemplatePolicy, the templatized element must be owned
+  // by a (trusted) Polymer element, indicated by existence of _methodHost;
+  // e.g. for dom-if & dom-repeat in main document, _methodHost is null
+  if (strictTemplatePolicy && !findMethodHost(template)) {
+    throw new Error('strictTemplatePolicy: template owner not trusted');
+  }
+  options = /** @type {!TemplatizeOptions} */(options || {});
+  if (template.__templatizeOwner) {
+    throw new Error('A <template> can only be templatized once');
+  }
+  template.__templatizeOwner = owner;
+  const ctor = owner ? owner.constructor : TemplateInstanceBase;
+  let templateInfo = ctor._parseTemplate(template);
+  // Get memoized base class for the prototypical template, which
+  // includes property effects for binding template & forwarding
+  /**
+   * @constructor
+   * @extends {TemplateInstanceBase}
+   */
+  let baseClass = templateInfo.templatizeInstanceClass;
+  if (!baseClass) {
+    baseClass = createTemplatizerClass(template, templateInfo, options);
+    templateInfo.templatizeInstanceClass = baseClass;
+  }
+  const methodHost = findMethodHost(template);
+  // Host property forwarding must be installed onto template instance
+  addPropagateEffects(template, templateInfo, options, methodHost);
+  // Subclass base class and add reference for this specific template
+  /** @private */
+  let klass = class TemplateInstance extends baseClass {};
+  /** @override */
+  klass.prototype._methodHost = methodHost;
+  /** @override */
+  klass.prototype.__dataHost = /** @type {!DataTemplate} */ (template);
+  /** @override */
+  klass.prototype.__templatizeOwner = /** @type {!Object} */ (owner);
+  /** @override */
+  klass.prototype.__hostProps = templateInfo.hostProps;
+  klass = /** @type {function(new:TemplateInstanceBase)} */(klass); //eslint-disable-line no-self-assign
+  return klass;
+}
+
+function warnOnUndeclaredProperties(templateInfo, options, methodHost) {
+  const declaredProps = methodHost.constructor._properties;
+  const {propertyEffects} = templateInfo;
+  const {instanceProps} = options;
+  for (let prop in propertyEffects) {
+    // Ensure properties with template effects are declared on the outermost
+    // host (`methodHost`), unless they are instance props or static functions
+    if (!declaredProps[prop] && !(instanceProps && instanceProps[prop])) {
+      const effects = propertyEffects[prop];
+      for (let i=0; i<effects.length; i++) {
+        const {part} = effects[i].info;
+        if (!(part.signature && part.signature.static)) {
+          console.warn(`Property '${prop}' used in template but not ` +
+            `declared in 'properties'; attribute will not be observed.`);
+          break;
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Returns the template "model" associated with a given element, which
+ * serves as the binding scope for the template instance the element is
+ * contained in. A template model is an instance of
+ * `TemplateInstanceBase`, and should be used to manipulate data
+ * associated with this template instance.
+ *
+ * Example:
+ *
+ *   let model = modelForElement(el);
+ *   if (model.index < 10) {
+ *     model.set('item.checked', true);
+ *   }
+ *
+ * @param {HTMLElement} template The model will be returned for
+ *   elements stamped from this template (accepts either an HTMLTemplateElement)
+ *   or a `<dom-if>`/`<dom-repeat>` element when using `removeNestedTemplates`
+ *   optimization.
+ * @param {Node=} node Node for which to return a template model.
+ * @return {TemplateInstanceBase} Template instance representing the
+ *   binding scope for the element
+ */
+function modelForElement(template, node) {
+  let model;
+  while (node) {
+    // An element with a __templatizeInstance marks the top boundary
+    // of a scope; walk up until we find one, and then ensure that
+    // its __dataHost matches `this`, meaning this dom-repeat stamped it
+    if ((model = node.__dataHost ? node : node.__templatizeInstance)) {
+      // Found an element stamped by another template; keep walking up
+      // from its __dataHost
+      if (model.__dataHost != template) {
+        node = model.__dataHost;
+      } else {
+        return model;
+      }
+    } else {
+      // Still in a template scope, keep going up until
+      // a __templatizeInstance is found
+      node = wrap(node).parentNode;
+    }
+  }
+  return null;
+}
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const testUserAgent = (regexp) => regexp.test(navigator.userAgent);
+
+const testPlatform = (regexp) => regexp.test(navigator.platform);
+
+const testVendor = (regexp) => regexp.test(navigator.vendor);
+
+testUserAgent(/Android/);
+
+testUserAgent(/Chrome/) && testVendor(/Google Inc/);
+
+const isFirefox = testUserAgent(/Firefox/);
+
+// IPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+const isIPad = testPlatform(/^iPad/) || (testPlatform(/^Mac/) && navigator.maxTouchPoints > 1);
+
+const isIPhone = testPlatform(/^iPhone/);
+
+const isIOS = isIPhone || isIPad;
+
+const isSafari = testUserAgent(/^((?!chrome|android).)*safari/i);
+
+const isTouch = (() => {
+  try {
+    document.createEvent('TouchEvent');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const instances = [];
+
+/**
+ * A controller for trapping focus within a DOM node.
+ */
+class FocusTrapController {
+  /**
+   * @param {HTMLElement} host
+   */
+  constructor(host) {
+    /**
+     * The controller host element.
+     *
+     * @type {HTMLElement}
+     */
+    this.host = host;
+
+    /**
+     * A node for trapping focus in.
+     *
+     * @type {HTMLElement | null}
+     * @private
+     */
+    this.__trapNode = null;
+
+    this.__onKeyDown = this.__onKeyDown.bind(this);
+  }
+
+  hostConnected() {
+    document.addEventListener('keydown', this.__onKeyDown);
+  }
+
+  hostDisconnected() {
+    document.removeEventListener('keydown', this.__onKeyDown);
+  }
+
+  /**
+   * Activates a focus trap for a DOM node that will prevent focus from escaping the node.
+   * The trap can be deactivated with the `.releaseFocus()` method.
+   *
+   * If focus is initially outside the trap, the method will move focus inside,
+   * on the first focusable element of the trap in the tab order.
+   * The first focusable element can be the trap node itself if it is focusable
+   * and comes first in the tab order.
+   *
+   * If there are no focusable elements, the method will throw an exception
+   * and the trap will not be set.
+   *
+   * @param {HTMLElement} trapNode
+   */
+  trapFocus(trapNode) {
+    this.__trapNode = trapNode;
+
+    if (this.__focusableElements.length === 0) {
+      this.__trapNode = null;
+      throw new Error('The trap node should have at least one focusable descendant or be focusable itself.');
+    }
+
+    instances.push(this);
+
+    if (this.__focusedElementIndex === -1) {
+      this.__focusableElements[0].focus();
+    }
+  }
+
+  /**
+   * Deactivates the focus trap set with the `.trapFocus()` method
+   * so that it becomes possible to tab outside the trap node.
+   */
+  releaseFocus() {
+    this.__trapNode = null;
+
+    instances.pop();
+  }
+
+  /**
+   * A `keydown` event handler that manages tabbing navigation when the trap is enabled.
+   *
+   * - Moves focus to the next focusable element of the trap on `Tab` press.
+   * When no next element to focus, the method moves focus to the first focusable element.
+   * - Moves focus to the prev focusable element of the trap on `Shift+Tab` press.
+   * When no prev element to focus, the method moves focus to the last focusable element.
+   *
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  __onKeyDown(event) {
+    if (!this.__trapNode) {
+      return;
+    }
+
+    // Only handle events for the last instance
+    if (this !== Array.from(instances).pop()) {
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      event.preventDefault();
+
+      const backward = event.shiftKey;
+      this.__focusNextElement(backward);
+    }
+  }
+
+  /**
+   * - Moves focus to the next focusable element if `backward === false`.
+   * When no next element to focus, the method moves focus to the first focusable element.
+   * - Moves focus to the prev focusable element if `backward === true`.
+   * When no prev element to focus the method moves focus to the last focusable element.
+   *
+   * If no focusable elements, the method returns immediately.
+   *
+   * @param {boolean} backward
+   * @private
+   */
+  __focusNextElement(backward = false) {
+    const focusableElements = this.__focusableElements;
+    const step = backward ? -1 : 1;
+    const currentIndex = this.__focusedElementIndex;
+    const nextIndex = (focusableElements.length + currentIndex + step) % focusableElements.length;
+    const element = focusableElements[nextIndex];
+    element.focus();
+    if (element.localName === 'input') {
+      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.
+ * 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
+ * @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;
+
+          /* 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 in MSIE 11 */
+          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;
+          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>
+    `;
+  }
+
+  static get is() {
+    return 'vaadin-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,
+    };
+  }
+
+  static get observers() {
+    return ['_templateOrRendererChanged(template, renderer, owner, model, opened)'];
+  }
+
+  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);
+
+    this._observer = new FlattenedNodesObserver(this, (info) => {
+      this._setTemplateFromNodes(info.addedNodes);
+    });
+
+    // Listener for preventing closing of the paper-dialog and all components extending `iron-overlay-behavior`.
+    this._boundIronOverlayCanceledListener = this._ironOverlayCanceled.bind(this);
+
+    /* 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);
+  }
+
+  /** @private */
+  _detectIosNavbar() {
+    /* c8 ignore next 15 */
+    if (!this.opened) {
+      return;
+    }
+
+    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');
+    }
+  }
+
+  /**
+   * @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;
+    }
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    /* c8 ignore next 3 */
+    if (this._boundIosResizeListener) {
+      this._detectIosNavbar();
+      window.addEventListener('resize', this._boundIosResizeListener);
+    }
+  }
+
+  /** @protected */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    /* c8 ignore next 3 */
+    if (this._boundIosResizeListener) {
+      window.removeEventListener('resize', this._boundIosResizeListener);
+    }
+  }
+
+  /**
+   * 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);
+    }
+  }
+
+  /** @private */
+  _ironOverlayCanceled(event) {
+    event.preventDefault();
+  }
+
+  /** @private */
+  _mouseDownListener(event) {
+    this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+  }
+
+  /** @private */
+  _mouseUpListener(event) {
+    this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+  }
+
+  /**
+   * 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;
+    }
+
+    const evt = new CustomEvent('vaadin-overlay-outside-click', {
+      bubbles: true,
+      cancelable: true,
+      detail: { sourceEvent: event },
+    });
+    this.dispatchEvent(evt);
+
+    if (this.opened && !evt.defaultPrevented) {
+      this.close(event);
+    }
+  }
+
+  /**
+   * @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;
+    }
+
+    // Only close modeless overlay on Esc press when it contains focus
+    if (this.modeless && !event.composedPath().includes(this.$.overlay)) {
+      return;
+    }
+
+    if (event.key === 'Escape') {
+      const evt = new CustomEvent('vaadin-overlay-escape-press', {
+        bubbles: true,
+        cancelable: true,
+        detail: { sourceEvent: event },
+      });
+      this.dispatchEvent(evt);
+
+      if (this.opened && !evt.defaultPrevented) {
+        this.close(event);
+      }
+    }
+  }
+
+  /** @protected */
+  _ensureTemplatized() {
+    this._setTemplateFromNodes(Array.from(this.children));
+  }
+
+  /**
+   * @event vaadin-overlay-open
+   * fired after the `vaadin-overlay` is opened.
+   *
+   * @private
+   */
+  _openedChanged(opened, wasOpened) {
+    if (!this._instance) {
+      this._ensureTemplatized();
+    }
+
+    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);
+
+      if (!this.modeless) {
+        this._removeGlobalListeners();
+      }
+    }
+  }
+
+  /** @private */
+  _hiddenChanged(hidden) {
+    if (hidden && this.hasAttribute('closing')) {
+      this._flushAnimation('closing');
+    }
+  }
+
+  /**
+   * @return {boolean}
+   * @protected
+   */
+  _shouldAnimate() {
+    const name = getComputedStyle(this).getPropertyValue('animation-name');
+    const hidden = getComputedStyle(this).getPropertyValue('display') === 'none';
+    return !hidden && name && name !== 'none';
+  }
+
+  /**
+   * @param {string} type
+   * @param {Function} callback
+   * @protected
+   */
+  _enqueueAnimation(type, callback) {
+    const handler = `__${type}Handler`;
+    const listener = (event) => {
+      if (event && event.target !== this) {
+        return;
+      }
+      callback();
+      this.removeEventListener('animationend', listener);
+      delete this[handler];
+    };
+    this[handler] = listener;
+    this.addEventListener('animationend', listener);
+  }
+
+  /**
+   * @param {string} type
+   * @protected
+   */
+  _flushAnimation(type) {
+    const handler = `__${type}Handler`;
+    if (typeof this[handler] === 'function') {
+      this[handler]();
+    }
+  }
+
+  /** @protected */
+  _animatedOpening() {
+    if (this.parentNode === document.body && this.hasAttribute('closing')) {
+      this._flushAnimation('closing');
+    }
+    this._attachOverlay();
+    if (!this.modeless) {
+      this._enterModalState();
+    }
+    this.setAttribute('opening', '');
+
+    if (this._shouldAnimate()) {
+      this._enqueueAnimation('opening', () => {
+        this._finishOpening();
+      });
+    } else {
+      this._finishOpening();
+    }
+  }
+
+  /** @protected */
+  _attachOverlay() {
+    this._placeholder = document.createComment('vaadin-overlay-placeholder');
+    this.parentNode.insertBefore(this._placeholder, this);
+    document.body.appendChild(this);
+    this.bringToFront();
+  }
+
+  /** @protected */
+  _finishOpening() {
+    document.addEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this.removeAttribute('opening');
+  }
+
+  /** @protected */
+  _finishClosing() {
+    document.removeEventListener('iron-overlay-canceled', this._boundIronOverlayCanceledListener);
+    this._detachOverlay();
+    this.$.overlay.style.removeProperty('pointer-events');
+    this.removeAttribute('closing');
+  }
+
+  /**
+   * @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;
+      }
+
+      this.setAttribute('closing', '');
+      this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
+
+      if (this._shouldAnimate()) {
+        this._enqueueAnimation('closing', () => {
+          this._finishClosing();
+        });
+      } else {
+        this._finishClosing();
+      }
+    }
+  }
+
+  /** @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();
+    }
+  }
+
+  /** @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';
+    }
+
+    // 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;
+      }
+    }
+  }
+
+  /** @protected */
+  _removeOldContent() {
+    if (!this.content || !this._contentNodes) {
+      return;
+    }
+
+    this._observer.disconnect();
+
+    this._contentNodes.forEach((node) => {
+      if (node.parentNode === this.content) {
+        this.content.removeChild(node);
+      }
+    });
+
+    if (this._originalContentPart) {
+      // Restore the original <div part="content">
+      this.$.content.parentNode.replaceChild(this._originalContentPart, this.$.content);
+      this.$.content = this._originalContentPart;
+      this._originalContentPart = undefined;
+    }
+
+    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);
+      }
+
+      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 */
+  // 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');
+    }
+
+    const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
+    this._oldModel = model;
+    this._oldOwner = owner;
+
+    const templateChanged = this._oldTemplate !== template;
+    this._oldTemplate = template;
+
+    const rendererChanged = this._oldRenderer !== renderer;
+    this._oldRenderer = renderer;
+
+    const openedChanged = this._oldOpened !== opened;
+    this._oldOpened = opened;
+
+    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$;
+    }
+
+    if (template && templateChanged) {
+      this._stampOverlayTemplate(template);
+    } else if (renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+  }
+
+  /**
+   * @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;
+    }
+    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);
+
+/**
+ * @license
+ * Copyright (c) 2017 - 2022 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
+ * Copyright (c) 2017 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+const PROP_NAMES_VERTICAL = {
+  start: 'top',
+  end: 'bottom',
+};
+
+const PROP_NAMES_HORIZONTAL = {
+  start: 'left',
+  end: 'right',
+};
+
+const targetResizeObserver = new ResizeObserver((entries) => {
+  setTimeout(() => {
+    entries.forEach((entry) => {
+      if (entry.target.__overlay) {
+        entry.target.__overlay._updatePosition();
+      }
+    });
+  });
+});
+
+/**
+ * @polymerMixin
+ */
+const PositionMixin = (superClass) =>
+  class PositionMixin extends superClass {
+    static get properties() {
+      return {
+        /**
+         * The element next to which this overlay should be aligned.
+         * The position of the overlay relative to the positionTarget can be adjusted
+         * with properties `horizontalAlign`, `verticalAlign`, `noHorizontalOverlap`
+         * and `noVerticalOverlap`.
+         */
+        positionTarget: {
+          type: Object,
+          value: null,
+        },
+
+        /**
+         * When `positionTarget` is set, this property defines whether to align the overlay's
+         * left or right side to the target element by default.
+         * Possible values are `start` and `end`.
+         * RTL is taken into account when interpreting the value.
+         * The overlay is automatically flipped to the opposite side when it doesn't fit into
+         * the default side defined by this property.
+         *
+         * @attr {start|end} horizontal-align
+         */
+        horizontalAlign: {
+          type: String,
+          value: 'start',
+        },
+
+        /**
+         * When `positionTarget` is set, this property defines whether to align the overlay's
+         * top or bottom side to the target element by default.
+         * Possible values are `top` and `bottom`.
+         * The overlay is automatically flipped to the opposite side when it doesn't fit into
+         * the default side defined by this property.
+         *
+         * @attr {top|bottom} vertical-align
+         */
+        verticalAlign: {
+          type: String,
+          value: 'top',
+        },
+
+        /**
+         * When `positionTarget` is set, this property defines whether the overlay should overlap
+         * the target element in the x-axis, or be positioned right next to it.
+         *
+         * @attr {boolean} no-horizontal-overlap
+         */
+        noHorizontalOverlap: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * When `positionTarget` is set, this property defines whether the overlay should overlap
+         * the target element in the y-axis, or be positioned right above/below it.
+         *
+         * @attr {boolean} no-vertical-overlap
+         */
+        noVerticalOverlap: {
+          type: Boolean,
+          value: false,
+        },
+
+        /**
+         * If the overlay content has no intrinsic height, this property can be used to set
+         * the minimum vertical space (in pixels) required by the overlay. Setting a value to
+         * the property effectively disables the content measurement in favor of using this
+         * fixed value for determining the open direction.
+         *
+         * @attr {number} required-vertical-space
+         */
+        requiredVerticalSpace: {
+          type: Number,
+          value: 0,
+        },
+      };
+    }
+
+    static get observers() {
+      return [
+        '__positionSettingsChanged(horizontalAlign, verticalAlign, noHorizontalOverlap, noVerticalOverlap, requiredVerticalSpace)',
+        '__overlayOpenedChanged(opened, positionTarget)',
+      ];
+    }
+
+    constructor() {
+      super();
+
+      this.__onScroll = this.__onScroll.bind(this);
+      this._updatePosition = this._updatePosition.bind(this);
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (this.opened) {
+        this.__addUpdatePositionEventListeners();
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      this.__removeUpdatePositionEventListeners();
+    }
+
+    /** @private */
+    __addUpdatePositionEventListeners() {
+      window.addEventListener('resize', this._updatePosition);
+
+      this.__positionTargetAncestorRootNodes = getAncestorRootNodes(this.positionTarget);
+      this.__positionTargetAncestorRootNodes.forEach((node) => {
+        node.addEventListener('scroll', this.__onScroll, true);
+      });
+    }
+
+    /** @private */
+    __removeUpdatePositionEventListeners() {
+      window.removeEventListener('resize', this._updatePosition);
+
+      if (this.__positionTargetAncestorRootNodes) {
+        this.__positionTargetAncestorRootNodes.forEach((node) => {
+          node.removeEventListener('scroll', this.__onScroll, true);
+        });
+        this.__positionTargetAncestorRootNodes = null;
+      }
+    }
+
+    /** @private */
+    __overlayOpenedChanged(opened, positionTarget) {
+      this.__removeUpdatePositionEventListeners();
+
+      if (positionTarget) {
+        positionTarget.__overlay = null;
+        targetResizeObserver.unobserve(positionTarget);
+
+        if (opened) {
+          this.__addUpdatePositionEventListeners();
+          positionTarget.__overlay = this;
+          targetResizeObserver.observe(positionTarget);
+        }
+      }
+
+      if (opened) {
+        const computedStyle = getComputedStyle(this);
+        if (!this.__margins) {
+          this.__margins = {};
+          ['top', 'bottom', 'left', 'right'].forEach((propName) => {
+            this.__margins[propName] = parseInt(computedStyle[propName], 10);
+          });
+        }
+        this.setAttribute('dir', computedStyle.direction);
+
+        this._updatePosition();
+        // Schedule another position update (to cover virtual keyboard opening for example)
+        requestAnimationFrame(() => this._updatePosition());
+      }
+    }
+
+    get __isRTL() {
+      return this.getAttribute('dir') === 'rtl';
+    }
+
+    __positionSettingsChanged() {
+      this._updatePosition();
+    }
+
+    /** @private */
+    __onScroll(e) {
+      // If the scroll event occurred inside the overlay, ignore it.
+      if (!this.contains(e.target)) {
+        this._updatePosition();
+      }
+    }
+
+    _updatePosition() {
+      if (!this.positionTarget || !this.opened) {
+        return;
+      }
+
+      const targetRect = this.positionTarget.getBoundingClientRect();
+
+      // Detect the desired alignment and update the layout accordingly
+      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);
+      this.style.alignItems = flexStart ? 'flex-start' : 'flex-end';
+
+      // Get the overlay rect after possible overlay alignment changes
+      const overlayRect = this.getBoundingClientRect();
+
+      // Obtain vertical positioning properties
+      const verticalProps = this.__calculatePositionInOneDimension(
+        targetRect,
+        overlayRect,
+        this.noVerticalOverlap,
+        PROP_NAMES_VERTICAL,
+        this,
+        shouldAlignStartVertically,
+      );
+
+      // Obtain horizontal positioning properties
+      const horizontalProps = this.__calculatePositionInOneDimension(
+        targetRect,
+        overlayRect,
+        this.noHorizontalOverlap,
+        PROP_NAMES_HORIZONTAL,
+        this,
+        shouldAlignStartHorizontally,
+      );
+
+      // Apply the positioning properties to the overlay
+      Object.assign(this.style, verticalProps, horizontalProps);
+
+      this.toggleAttribute('bottom-aligned', !shouldAlignStartVertically);
+      this.toggleAttribute('top-aligned', shouldAlignStartVertically);
+
+      this.toggleAttribute('end-aligned', !flexStart);
+      this.toggleAttribute('start-aligned', flexStart);
+    }
+
+    __shouldAlignStartHorizontally(targetRect, rtl) {
+      // Using previous size to fix a case where window resize may cause the overlay to be squeezed
+      // smaller than its current space before the fit-calculations.
+      const contentWidth = Math.max(this.__oldContentWidth || 0, this.$.overlay.offsetWidth);
+      this.__oldContentWidth = this.$.overlay.offsetWidth;
+
+      const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
+      const defaultAlignLeft = (!rtl && this.horizontalAlign === 'start') || (rtl && this.horizontalAlign === 'end');
+
+      return this.__shouldAlignStart(
+        targetRect,
+        contentWidth,
+        viewportWidth,
+        this.__margins,
+        defaultAlignLeft,
+        this.noHorizontalOverlap,
+        PROP_NAMES_HORIZONTAL,
+      );
+    }
+
+    __shouldAlignStartVertically(targetRect) {
+      // Using previous size to fix a case where window resize may cause the overlay to be squeezed
+      // smaller than its current space before the fit-calculations.
+      const contentHeight =
+        this.requiredVerticalSpace || Math.max(this.__oldContentHeight || 0, this.$.overlay.offsetHeight);
+      this.__oldContentHeight = this.$.overlay.offsetHeight;
+
+      const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
+      const defaultAlignTop = this.verticalAlign === 'top';
+
+      return this.__shouldAlignStart(
+        targetRect,
+        contentHeight,
+        viewportHeight,
+        this.__margins,
+        defaultAlignTop,
+        this.noVerticalOverlap,
+        PROP_NAMES_VERTICAL,
+      );
+    }
+
+    // eslint-disable-next-line max-params
+    __shouldAlignStart(targetRect, contentSize, viewportSize, margins, defaultAlignStart, noOverlap, propNames) {
+      const spaceForStartAlignment =
+        viewportSize - targetRect[noOverlap ? propNames.end : propNames.start] - margins[propNames.end];
+      const spaceForEndAlignment = targetRect[noOverlap ? propNames.start : propNames.end] - margins[propNames.start];
+
+      const spaceForDefaultAlignment = defaultAlignStart ? spaceForStartAlignment : spaceForEndAlignment;
+      const spaceForOtherAlignment = defaultAlignStart ? spaceForEndAlignment : spaceForStartAlignment;
+
+      const shouldGoToDefaultSide =
+        spaceForDefaultAlignment > spaceForOtherAlignment || spaceForDefaultAlignment > contentSize;
+
+      return defaultAlignStart === shouldGoToDefaultSide;
+    }
+
+    /**
+     * Returns an adjusted value after resizing the browser window,
+     * to avoid wrong calculations when e.g. previously set `bottom`
+     * CSS property value is larger than the updated viewport height.
+     * See https://github.com/vaadin/web-components/issues/4604
+     */
+    __adjustBottomProperty(cssPropNameToSet, propNames, currentValue) {
+      let adjustedProp;
+
+      if (cssPropNameToSet === propNames.end) {
+        // Adjust horizontally
+        if (propNames.end === PROP_NAMES_VERTICAL.end) {
+          const viewportHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
+
+          if (currentValue > viewportHeight && this.__oldViewportHeight) {
+            const heightDiff = this.__oldViewportHeight - viewportHeight;
+            adjustedProp = currentValue - heightDiff;
+          }
+
+          this.__oldViewportHeight = viewportHeight;
+        }
+
+        // Adjust vertically
+        if (propNames.end === PROP_NAMES_HORIZONTAL.end) {
+          const viewportWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
+
+          if (currentValue > viewportWidth && this.__oldViewportWidth) {
+            const widthDiff = this.__oldViewportWidth - viewportWidth;
+            adjustedProp = currentValue - widthDiff;
+          }
+
+          this.__oldViewportWidth = viewportWidth;
+        }
+      }
+
+      return adjustedProp;
+    }
+
+    /**
+     * Returns an object with CSS position properties to set,
+     * e.g. { top: "100px" }
+     */
+    // eslint-disable-next-line max-params
+    __calculatePositionInOneDimension(targetRect, overlayRect, noOverlap, propNames, overlay, shouldAlignStart) {
+      const cssPropNameToSet = shouldAlignStart ? propNames.start : propNames.end;
+      const cssPropNameToClear = shouldAlignStart ? propNames.end : propNames.start;
+
+      const currentValue = parseFloat(overlay.style[cssPropNameToSet] || getComputedStyle(overlay)[cssPropNameToSet]);
+      const adjustedValue = this.__adjustBottomProperty(cssPropNameToSet, propNames, currentValue);
+
+      const diff =
+        overlayRect[shouldAlignStart ? propNames.start : propNames.end] -
+        targetRect[noOverlap === shouldAlignStart ? propNames.end : propNames.start];
+
+      const valueToSet = adjustedValue
+        ? `${adjustedValue}px`
+        : `${currentValue + diff * (shouldAlignStart ? -1 : 1)}px`;
+
+      return {
+        [cssPropNameToSet]: valueToSet,
+        [cssPropNameToClear]: '',
+      };
+    }
+  };
+
+/**
+ * @license
+ * Copyright (c) 2021 - 2022 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller which prevents the virtual keyboard from showing up on mobile devices
+ * when the field's overlay is closed.
+ */
+class VirtualKeyboardController {
+  /**
+   * @param {{ inputElement?: HTMLElement; opened: boolean } & HTMLElement} host
+   */
+  constructor(host) {
+    this.host = host;
+
+    host.addEventListener('opened-changed', () => {
+      if (!host.opened) {
+        // Prevent opening the virtual keyboard when the input gets re-focused on dropdown close
+        this.__setVirtualKeyboardEnabled(false);
+      }
+    });
+
+    // Re-enable virtual keyboard on blur, so it gets opened when the field is focused again
+    host.addEventListener('blur', () => this.__setVirtualKeyboardEnabled(true));
+
+    // Re-enable the virtual keyboard whenever the field is touched
+    host.addEventListener('touchstart', () => this.__setVirtualKeyboardEnabled(true));
+  }
+
+  /** @private */
+  __setVirtualKeyboardEnabled(value) {
+    if (this.host.inputElement) {
+      this.host.inputElement.inputMode = value ? '' : 'none';
+    }
+  }
+}
+
+export { Overlay as O, PositionMixin as P, VirtualKeyboardController as V, OptionalMutableData as a, modelForElement as b, afterNextRender as c, isIOS as d, menuOverlayCore as e, isSafari as f, isTouch as g, isFirefox as i, menuOverlay as m, overlay as o, templatize as t };