@everymatrix/general-input 1.10.2 → 1.15.0

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

@@ -0,0 +1,2658 @@
+import { i, r as registerStyles, d as dedupingMixin, B as PropertyEffects, G as strictTemplatePolicy, w as wrap, H as legacyWarnings, J as getFocusableElements, b as isElementFocused, T as ThemableMixin, A as DirMixin, C as ControllerMixin, P as PolymerElement, h as html, m as FlattenedNodesObserver, M as getAncestorRootNodes } from './field-mixin.js';
+import { b as isIOS } from './input-field-shared-styles.js';
+
+/**
+ * @license
+ * Copyright (c) 2017 - 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 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, menuOverlayCore as d, menuOverlay as m, overlay as o, templatize as t };