@vaadin/overlay 24.2.0-alpha2 → 24.2.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/overlay",
-  "version": "24.2.0-alpha2",
+  "version": "24.2.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -36,11 +36,11 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.2.0-alpha2",
-    "@vaadin/component-base": "24.2.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha2"
+    "@vaadin/a11y-base": "24.2.0-alpha3",
+    "@vaadin/component-base": "24.2.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha3",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -48,5 +48,5 @@
     "lit": "^2.0.0",
     "sinon": "^13.0.2"
   },
-  "gitHead": "b8378bd2267728e172012bcb2ea45c3e5a6e590a"
+  "gitHead": "e5d1e1ed2d01b56d5922e18a3fcb7cd306351954"
 }

package/src/vaadin-overlay-mixin.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+import type { OverlayFocusMixinClass } from './vaadin-overlay-focus-mixin.js';
+import type { OverlayStackMixinClass } from './vaadin-overlay-stack-mixin.js';
+
+export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
+
+export declare function OverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> &
+  Constructor<OverlayFocusMixinClass> &
+  Constructor<OverlayMixinClass> &
+  Constructor<OverlayStackMixinClass> &
+  T;
+
+export declare class OverlayMixinClass {
+  /**
+   * Owner element passed with renderer function
+   */
+  owner: HTMLElement | null;
+
+  /**
+   * 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.
+   */
+  renderer: OverlayRenderer | null | undefined;
+
+  /**
+   * When true the overlay has backdrop on top of content when opened.
+   */
+  withBackdrop: boolean;
+
+  /**
+   * Object with properties that is passed to `renderer` function
+   */
+  model: object | null | undefined;
+
+  /**
+   * When true, the overlay is visible and attached to body.
+   */
+  opened: boolean | null | undefined;
+
+  /**
+   * When true the overlay won't disable the main content, showing
+   * it doesn't change the functionality of the user interface.
+   */
+  modeless: boolean;
+
+  /**
+   * When set to true, the overlay is hidden. This also closes the overlay
+   * immediately in case there is a closing animation in progress.
+   */
+  hidden: boolean;
+
+  close(sourceEvent?: Event | null): void;
+
+  /**
+   * 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(): void;
+
+  protected _flushAnimation(type: 'closing' | 'opening'): void;
+
+  /**
+   * Whether to close the overlay on outside click or not.
+   * Override this method to customize the closing logic.
+   */
+  protected _shouldCloseOnOutsideClick(event: Event): boolean;
+}

package/src/vaadin-overlay-mixin.js

@@ -0,0 +1,472 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
+import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
+import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
+import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes OverlayFocusMixin
+ * @mixes OverlayStackMixin
+ */
+export const OverlayMixin = (superClass) =>
+  class OverlayMixin extends OverlayFocusMixin(OverlayStackMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * When true, the overlay is visible and attached to body.
+         */
+        opened: {
+          type: Boolean,
+          notify: true,
+          observer: '_openedChanged',
+          reflectToAttribute: true,
+        },
+
+        /**
+         * Owner element passed with renderer function
+         * @type {HTMLElement}
+         */
+        owner: {
+          type: Object,
+        },
+
+        /**
+         * Object with properties that is passed to `renderer` function
+         */
+        model: {
+          type: Object,
+        },
+
+        /**
+         * Custom function for rendering the content of the overlay.
+         * Receives three arguments:
+         *
+         * - `root` The root container DOM element. Append your content to it.
+         * - `owner` The host element of the renderer function.
+         * - `model` The object with the properties related with rendering.
+         * @type {OverlayRenderer | null | undefined}
+         */
+        renderer: {
+          type: Object,
+        },
+
+        /**
+         * 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 the overlay has backdrop on top of content when opened.
+         * @type {boolean}
+         */
+        withBackdrop: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['_rendererOrDataChanged(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);
+
+      /* c8 ignore next 3 */
+      if (isIOS) {
+        this._boundIosResizeListener = () => this._detectIosNavbar();
+      }
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // 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', () => {});
+    }
+
+    /** @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, this.owner, this.model);
+      }
+    }
+
+    /**
+     * @param {Event=} sourceEvent
+     */
+    close(sourceEvent) {
+      const evt = new CustomEvent('vaadin-overlay-close', {
+        bubbles: true,
+        cancelable: true,
+        detail: { sourceEvent },
+      });
+      this.dispatchEvent(evt);
+      if (!evt.defaultPrevented) {
+        this.opened = false;
+      }
+    }
+
+    /** @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');
+      }
+    }
+
+    /** @private */
+    _addGlobalListeners() {
+      document.addEventListener('mousedown', this._boundMouseDownListener);
+      document.addEventListener('mouseup', this._boundMouseUpListener);
+      // Firefox leaks click to document on contextmenu even if prevented
+      // https://bugzilla.mozilla.org/show_bug.cgi?id=990614
+      document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);
+    }
+
+    /** @private */
+    _removeGlobalListeners() {
+      document.removeEventListener('mousedown', this._boundMouseDownListener);
+      document.removeEventListener('mouseup', this._boundMouseUpListener);
+      document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
+    }
+
+    /** @private */
+    _rendererOrDataChanged(renderer, owner, model, opened) {
+      const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
+      this._oldModel = model;
+      this._oldOwner = owner;
+
+      const rendererChanged = this._oldRenderer !== renderer;
+      this._oldRenderer = renderer;
+
+      const openedChanged = this._oldOpened !== opened;
+      this._oldOpened = opened;
+
+      if (rendererChanged) {
+        this.innerHTML = '';
+        // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+        // When clearing the rendered content, this part needs to be manually disposed of.
+        // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+        delete this._$litPart$;
+      }
+
+      if (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
+        this.requestContentUpdate();
+      }
+    }
+
+    /** @private */
+    _modelessChanged(modeless) {
+      if (!modeless) {
+        if (this.opened) {
+          this._addGlobalListeners();
+          this._enterModalState();
+        }
+      } else {
+        this._removeGlobalListeners();
+        this._exitModalState();
+      }
+    }
+
+    /** @private */
+    _openedChanged(opened, wasOpened) {
+      if (opened) {
+        this._saveFocus();
+
+        this._animatedOpening();
+
+        afterNextRender(this, () => {
+          this._trapFocus();
+
+          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) {
+        this._resetFocus();
+
+        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}
+     * @private
+     */
+    _shouldAnimate() {
+      const style = getComputedStyle(this);
+      const name = style.getPropertyValue('animation-name');
+      const hidden = style.getPropertyValue('display') === 'none';
+      return !hidden && name && name !== 'none';
+    }
+
+    /**
+     * @param {string} type
+     * @param {Function} callback
+     * @private
+     */
+    _enqueueAnimation(type, callback) {
+      const handler = `__${type}Handler`;
+      const listener = (event) => {
+        if (event && event.target !== this) {
+          return;
+        }
+        callback();
+        this.removeEventListener('animationend', listener);
+        delete this[handler];
+      };
+      this[handler] = listener;
+      this.addEventListener('animationend', listener);
+    }
+
+    /**
+     * @param {string} type
+     * @protected
+     */
+    _flushAnimation(type) {
+      const handler = `__${type}Handler`;
+      if (typeof this[handler] === 'function') {
+        this[handler]();
+      }
+    }
+
+    /** @private */
+    _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();
+      }
+    }
+
+    /** @private */
+    _attachOverlay() {
+      this._placeholder = document.createComment('vaadin-overlay-placeholder');
+      this.parentNode.insertBefore(this._placeholder, this);
+      document.body.appendChild(this);
+      this.bringToFront();
+    }
+
+    /** @private */
+    _finishOpening() {
+      this.removeAttribute('opening');
+    }
+
+    /** @private */
+    _finishClosing() {
+      this._detachOverlay();
+      this.$.overlay.style.removeProperty('pointer-events');
+      this.removeAttribute('closing');
+      this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
+    }
+
+    /** @private */
+    _animatedClosing() {
+      if (this.hasAttribute('opening')) {
+        this._flushAnimation('opening');
+      }
+      if (this._placeholder) {
+        this._exitModalState();
+        this.setAttribute('closing', '');
+        this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
+
+        if (this._shouldAnimate()) {
+          this._enqueueAnimation('closing', () => {
+            this._finishClosing();
+          });
+        } else {
+          this._finishClosing();
+        }
+      }
+    }
+
+    /** @private */
+    _detachOverlay() {
+      this._placeholder.parentNode.insertBefore(this, this._placeholder);
+      this._placeholder.parentNode.removeChild(this._placeholder);
+    }
+
+    /** @private */
+    _mouseDownListener(event) {
+      this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+    }
+
+    /** @private */
+    _mouseUpListener(event) {
+      this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
+    }
+
+    /**
+     * Whether to close the overlay on outside click or not.
+     * Override this method to customize the closing logic.
+     *
+     * @param {Event} _event
+     * @return {boolean}
+     * @protected
+     */
+    _shouldCloseOnOutsideClick(_event) {
+      return this._last;
+    }
+
+    /**
+     * Outside click listener used in capture phase to close the overlay before
+     * propagating the event to the listener on the element that triggered it.
+     * Otherwise, calling `open()` would result in closing and re-opening.
+     *
+     * @private
+     */
+    _outsideClickListener(event) {
+      if (event.composedPath().includes(this.$.overlay) || this._mouseDownInside || this._mouseUpInside) {
+        this._mouseDownInside = false;
+        this._mouseUpInside = false;
+        return;
+      }
+
+      if (!this._shouldCloseOnOutsideClick(event)) {
+        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);
+      }
+    }
+
+    /**
+     * Listener used to close whe overlay on Escape press, if it is the last one.
+     * @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);
+        }
+      }
+    }
+  };

package/src/vaadin-overlay-styles.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2017 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from 'lit';
+
+export const overlayStyles = css`
+  :host {
+    z-index: 200;
+    position: fixed;
+
+    /* Despite of what the names say, <vaadin-overlay> is just a container
+          for position/sizing/alignment. The actual overlay is the overlay part. */
+
+    /* Default position constraints: the entire viewport. Note: themes can
+          override this to introduce gaps between the overlay and the viewport. */
+    inset: 0;
+    bottom: var(--vaadin-overlay-viewport-bottom);
+
+    /* Use flexbox alignment for the overlay part. */
+    display: flex;
+    flex-direction: column; /* makes dropdowns sizing easier */
+    /* Align to center by default. */
+    align-items: center;
+    justify-content: center;
+
+    /* Allow centering when max-width/max-height applies. */
+    margin: auto;
+
+    /* The host is not clickable, only the overlay part is. */
+    pointer-events: none;
+
+    /* Remove tap highlight on touch devices. */
+    -webkit-tap-highlight-color: transparent;
+
+    /* CSS API for host */
+    --vaadin-overlay-viewport-bottom: 0;
+  }
+
+  :host([hidden]),
+  :host(:not([opened]):not([closing])) {
+    display: none !important;
+  }
+
+  [part='overlay'] {
+    -webkit-overflow-scrolling: touch;
+    overflow: auto;
+    pointer-events: auto;
+
+    /* Prevent overflowing the host */
+    max-width: 100%;
+    box-sizing: border-box;
+
+    -webkit-tap-highlight-color: initial; /* reenable tap highlight inside */
+  }
+
+  [part='backdrop'] {
+    z-index: -1;
+    content: '';
+    background: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    inset: 0;
+    pointer-events: auto;
+  }
+`;

package/src/vaadin-overlay.d.ts

@@ -5,10 +5,9 @@
  */
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
-import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
+import { OverlayMixin } from './vaadin-overlay-mixin.js';
 
-export type OverlayRenderer = (root: HTMLElement, owner: HTMLElement, model?: object) => void;
+export { OverlayRenderer } from './vaadin-overlay-mixin.js';
 
 /**
  * Fired when the `opened` property changes.
@@ -120,59 +119,7 @@ export type OverlayEventMap = HTMLElementEventMap & OverlayCustomEventMap;
  * @fires {CustomEvent} vaadin-overlay-outside-click - Fired before the overlay is closed on outside click. Calling `preventDefault()` on the event cancels the closing.
  * @fires {CustomEvent} vaadin-overlay-escape-press - Fired before the overlay is closed on Escape key press. Calling `preventDefault()` on the event cancels the closing.
  */
-declare class Overlay extends OverlayStackMixin(OverlayFocusMixin(ThemableMixin(DirMixin(HTMLElement)))) {
-  /**
-   * When true, the overlay is visible and attached to body.
-   */
-  opened: boolean | null | undefined;
-
-  /**
-   * Owner element passed with renderer function
-   */
-  owner: HTMLElement | null;
-
-  /**
-   * 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.
-   */
-  renderer: OverlayRenderer | null | undefined;
-
-  /**
-   * When true the overlay has backdrop on top of content when opened.
-   */
-  withBackdrop: boolean;
-
-  /**
-   * Object with properties that is passed to `renderer` function
-   */
-  model: object | null | undefined;
-
-  /**
-   * When true the overlay won't disable the main content, showing
-   * it doesn't change the functionality of the user interface.
-   */
-  modeless: boolean;
-
-  /**
-   * When set to true, the overlay is hidden. This also closes the overlay
-   * immediately in case there is a closing animation in progress.
-   */
-  hidden: boolean;
-
-  close(sourceEvent?: Event | null): void;
-
-  /**
-   * 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(): void;
-
+declare class Overlay extends OverlayMixin(ThemableMixin(DirMixin(HTMLElement))) {
   addEventListener<K extends keyof OverlayEventMap>(
     type: K,
     listener: (this: Overlay, ev: OverlayEventMap[K]) => void,
@@ -184,14 +131,6 @@ declare class Overlay extends OverlayStackMixin(OverlayFocusMixin(ThemableMixin(
     listener: (this: Overlay, ev: OverlayEventMap[K]) => void,
     options?: EventListenerOptions | boolean,
   ): void;
-
-  protected _flushAnimation(type: 'closing' | 'opening'): void;
-
-  /**
-   * Whether to close the overlay on outside click or not.
-   * Override this method to customize the closing logic.
-   */
-  protected _shouldCloseOnOutsideClick(event: Event): boolean;
 }
 
 declare global {

package/src/vaadin-overlay.js

@@ -3,14 +3,14 @@
  * Copyright (c) 2017 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { isIOS } from '@vaadin/component-base/src/browser-utils.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { processTemplates } from '@vaadin/component-base/src/templates.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { OverlayFocusMixin } from './vaadin-overlay-focus-mixin.js';
-import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { OverlayMixin } from './vaadin-overlay-mixin.js';
+import { overlayStyles } from './vaadin-overlay-styles.js';
+
+registerStyles('vaadin-overlay', overlayStyles, { moduleId: 'vaadin-overlay-styles' });
 
 /**
  * `<vaadin-overlay>` is a Web Component for creating overlays. The content of the overlay
@@ -74,77 +74,11 @@ import { OverlayStackMixin } from './vaadin-overlay-stack-mixin.js';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes DirMixin
- * @mixes OverlayFocusMixin
- * @mixes OverlayStackMixin
+ * @mixes OverlayMixin
  */
-class Overlay extends OverlayStackMixin(OverlayFocusMixin(ThemableMixin(DirMixin(PolymerElement)))) {
+class Overlay extends OverlayMixin(ThemableMixin(DirMixin(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">
@@ -158,478 +92,13 @@ class Overlay extends OverlayStackMixin(OverlayFocusMixin(ThemableMixin(DirMixin
     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,
-
-      /**
-       * 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',
-      },
-
-      /** @private */
-      _mouseDownInside: {
-        type: Boolean,
-      },
-
-      /** @private */
-      _mouseUpInside: {
-        type: Boolean,
-      },
-
-      /** @private */
-      _oldOwner: Element,
-
-      /** @private */
-      _oldModel: Object,
-
-      /** @private */
-      _oldRenderer: Object,
-
-      /** @private */
-      _oldOpened: Boolean,
-    };
-  }
-
-  static get observers() {
-    return ['_rendererOrDataChanged(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);
-
-    /* c8 ignore next 3 */
-    if (isIOS) {
-      this._boundIosResizeListener = () => this._detectIosNavbar();
-    }
-  }
-
   /** @protected */
   ready() {
     super.ready();
 
-    // 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', () => {});
-
     processTemplates(this);
   }
 
-  /** @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 {Event=} sourceEvent
-   */
-  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, this.owner, this.model);
-    }
-  }
-
-  /** @private */
-  _mouseDownListener(event) {
-    this._mouseDownInside = event.composedPath().indexOf(this.$.overlay) >= 0;
-  }
-
-  /** @private */
-  _mouseUpListener(event) {
-    this._mouseUpInside = event.composedPath().indexOf(this.$.overlay) >= 0;
-  }
-
-  /**
-   * Whether to close the overlay on outside click or not.
-   * Override this method to customize the closing logic.
-   *
-   * @param {Event} _event
-   * @return {boolean}
-   * @protected
-   */
-  _shouldCloseOnOutsideClick(_event) {
-    return this._last;
-  }
-
-  /**
-   * Outside click listener used in capture phase to close the overlay before
-   * propagating the event to the listener on the element that triggered it.
-   * Otherwise, calling `open()` would result in closing and re-opening.
-   *
-   * @private
-   */
-  _outsideClickListener(event) {
-    if (event.composedPath().includes(this.$.overlay) || this._mouseDownInside || this._mouseUpInside) {
-      this._mouseDownInside = false;
-      this._mouseUpInside = false;
-      return;
-    }
-
-    if (!this._shouldCloseOnOutsideClick(event)) {
-      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);
-    }
-  }
-
-  /**
-   * Listener used to close whe overlay on Escape press, if it is the last one.
-   * @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);
-      }
-    }
-  }
-
-  /** @private */
-  _openedChanged(opened, wasOpened) {
-    if (opened) {
-      this._saveFocus();
-
-      this._animatedOpening();
-
-      afterNextRender(this, () => {
-        this._trapFocus();
-
-        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) {
-      this._resetFocus();
-
-      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}
-   * @private
-   */
-  _shouldAnimate() {
-    const style = getComputedStyle(this);
-    const name = style.getPropertyValue('animation-name');
-    const hidden = style.getPropertyValue('display') === 'none';
-    return !hidden && name && name !== 'none';
-  }
-
-  /**
-   * @param {string} type
-   * @param {Function} callback
-   * @private
-   */
-  _enqueueAnimation(type, callback) {
-    const handler = `__${type}Handler`;
-    const listener = (event) => {
-      if (event && event.target !== this) {
-        return;
-      }
-      callback();
-      this.removeEventListener('animationend', listener);
-      delete this[handler];
-    };
-    this[handler] = listener;
-    this.addEventListener('animationend', listener);
-  }
-
-  /**
-   * @param {string} type
-   * @protected
-   */
-  _flushAnimation(type) {
-    const handler = `__${type}Handler`;
-    if (typeof this[handler] === 'function') {
-      this[handler]();
-    }
-  }
-
-  /** @private */
-  _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();
-    }
-  }
-
-  /** @private */
-  _attachOverlay() {
-    this._placeholder = document.createComment('vaadin-overlay-placeholder');
-    this.parentNode.insertBefore(this._placeholder, this);
-    document.body.appendChild(this);
-    this.bringToFront();
-  }
-
-  /** @private */
-  _finishOpening() {
-    this.removeAttribute('opening');
-  }
-
-  /** @private */
-  _finishClosing() {
-    this._detachOverlay();
-    this.$.overlay.style.removeProperty('pointer-events');
-    this.removeAttribute('closing');
-    this.dispatchEvent(new CustomEvent('vaadin-overlay-closed'));
-  }
-
-  /** @private */
-  _animatedClosing() {
-    if (this.hasAttribute('opening')) {
-      this._flushAnimation('opening');
-    }
-    if (this._placeholder) {
-      this._exitModalState();
-      this.setAttribute('closing', '');
-      this.dispatchEvent(new CustomEvent('vaadin-overlay-closing'));
-
-      if (this._shouldAnimate()) {
-        this._enqueueAnimation('closing', () => {
-          this._finishClosing();
-        });
-      } else {
-        this._finishClosing();
-      }
-    }
-  }
-
-  /** @private */
-  _detachOverlay() {
-    this._placeholder.parentNode.insertBefore(this, this._placeholder);
-    this._placeholder.parentNode.removeChild(this._placeholder);
-  }
-
-  /** @private */
-  _modelessChanged(modeless) {
-    if (!modeless) {
-      if (this.opened) {
-        this._addGlobalListeners();
-        this._enterModalState();
-      }
-    } else {
-      this._removeGlobalListeners();
-      this._exitModalState();
-    }
-  }
-
-  /** @private */
-  _addGlobalListeners() {
-    document.addEventListener('mousedown', this._boundMouseDownListener);
-    document.addEventListener('mouseup', this._boundMouseUpListener);
-    // Firefox leaks click to document on contextmenu even if prevented
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=990614
-    document.documentElement.addEventListener('click', this._boundOutsideClickListener, true);
-  }
-
-  /** @private */
-  _removeGlobalListeners() {
-    document.removeEventListener('mousedown', this._boundMouseDownListener);
-    document.removeEventListener('mouseup', this._boundMouseUpListener);
-    document.documentElement.removeEventListener('click', this._boundOutsideClickListener, true);
-  }
-
-  /** @private */
-  _rendererOrDataChanged(renderer, owner, model, opened) {
-    const ownerOrModelChanged = this._oldOwner !== owner || this._oldModel !== model;
-    this._oldModel = model;
-    this._oldOwner = owner;
-
-    const rendererChanged = this._oldRenderer !== renderer;
-    this._oldRenderer = renderer;
-
-    const openedChanged = this._oldOpened !== opened;
-    this._oldOpened = opened;
-
-    if (rendererChanged) {
-      this.innerHTML = '';
-      // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
-      // When clearing the rendered content, this part needs to be manually disposed of.
-      // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
-      delete this._$litPart$;
-    }
-
-    if (opened && renderer && (rendererChanged || openedChanged || ownerOrModelChanged)) {
-      this.requestContentUpdate();
-    }
-  }
-
   /**
    * @event vaadin-overlay-open
    * Fired after the overlay is opened.