@vaadin/login 24.2.0-alpha4 → 24.2.0-alpha6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-alpha6",
   "publishConfig": {
     "access": "public"
   },
@@ -37,23 +37,23 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.2.0-alpha4",
-    "@vaadin/component-base": "24.2.0-alpha4",
-    "@vaadin/overlay": "24.2.0-alpha4",
-    "@vaadin/password-field": "24.2.0-alpha4",
-    "@vaadin/text-field": "24.2.0-alpha4",
-    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-material-styles": "24.2.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha4"
+    "@vaadin/button": "24.2.0-alpha6",
+    "@vaadin/component-base": "24.2.0-alpha6",
+    "@vaadin/overlay": "24.2.0-alpha6",
+    "@vaadin/password-field": "24.2.0-alpha6",
+    "@vaadin/text-field": "24.2.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "24.2.0-alpha6",
+    "@vaadin/vaadin-material-styles": "24.2.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "24.2.0-alpha6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.4.2",
+    "@vaadin/testing-helpers": "^0.4.3",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "aaf7c5ebfea62628210eead4229be1718ac6b129"
+  "gitHead": "3ef6e6cd66919b3ef7637e42916e4c54656beb51"
 }

package/src/vaadin-login-form-mixin.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 { LoginMixinClass } from './vaadin-login-mixin.js';
+
+export declare function LoginFormMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<LoginFormMixinClass> & Constructor<LoginMixinClass> & T;
+
+export declare class LoginFormMixinClass {
+  /**
+   * Submits the form.
+   */
+  submit(): void;
+}

package/src/vaadin-login-form-mixin.js

@@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { LoginMixin } from './vaadin-login-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes LoginMixin
+ */
+export const LoginFormMixin = (superClass) =>
+  class LoginFormMixin extends LoginMixin(superClass) {
+    static get observers() {
+      return ['_errorChanged(error)'];
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      if (!this.noAutofocus) {
+        this.$.vaadinLoginUsername.focus();
+      }
+    }
+
+    /** @private */
+    _errorChanged() {
+      if (this.error && !this._preventAutoEnable) {
+        this.disabled = false;
+      }
+    }
+
+    /**
+     * Submits the form.
+     */
+    submit() {
+      const userName = this.$.vaadinLoginUsername;
+      const password = this.$.vaadinLoginPassword;
+
+      if (this.disabled || !(userName.validate() && password.validate())) {
+        return;
+      }
+
+      this.error = false;
+      this.disabled = true;
+
+      const loginEventDetails = {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          username: userName.value,
+          password: password.value,
+        },
+      };
+
+      const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
+      if (this.action && firedEvent) {
+        const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
+        const csrfMetaValue = document.querySelector('meta[name=_csrf]');
+        if (csrfMetaName && csrfMetaValue) {
+          this.$.csrf.name = csrfMetaName.content;
+          this.$.csrf.value = csrfMetaValue.content;
+        }
+        this.querySelector('form').submit();
+      }
+    }
+
+    /** @protected */
+    _handleInputKeydown(e) {
+      if (e.key === 'Enter') {
+        const { currentTarget: inputActive } = e;
+        const nextInput =
+          inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
+        if (inputActive.validate()) {
+          if (nextInput.checkValidity()) {
+            this.submit();
+          } else {
+            nextInput.focus();
+          }
+        }
+      }
+    }
+
+    /** @protected */
+    _handleInputKeyup(e) {
+      const input = e.currentTarget;
+      if (e.key === 'Tab' && input instanceof HTMLInputElement) {
+        input.select();
+      }
+    }
+
+    /** @protected */
+    _onForgotPasswordClick() {
+      this.dispatchEvent(new CustomEvent('forgot-password'));
+    }
+  };

package/src/vaadin-login-form-wrapper-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const loginFormWrapperStyles: CSSResult;

package/src/vaadin-login-form-wrapper-styles.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 loginFormWrapperStyles = css`
+  :host {
+    overflow: hidden;
+    display: inline-block;
+  }
+
+  :host([hidden]) {
+    display: none !important;
+  }
+
+  [part='form'] {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+  }
+
+  [part='form-title'] {
+    margin: 0;
+  }
+
+  [part='error-message'] {
+    position: relative;
+  }
+`;

package/src/vaadin-login-form-wrapper.js

@@ -4,7 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { loginFormWrapperStyles } from './vaadin-login-form-wrapper-styles.js';
+
+registerStyles('vaadin-login-form-wrapper', loginFormWrapperStyles, {
+  moduleId: 'vaadin-login-form-wrapper-styles',
+});
 
 /**
  * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
@@ -16,31 +21,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
-      <style>
-        :host {
-          overflow: hidden;
-          display: inline-block;
-        }
-
-        :host([hidden]) {
-          display: none !important;
-        }
-
-        [part='form'] {
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          box-sizing: border-box;
-        }
-
-        [part='form-title'] {
-          margin: 0;
-        }
-
-        [part='error-message'] {
-          position: relative;
-        }
-      </style>
       <section part="form">
         <h2 part="form-title">[[i18n.form.title]]</h2>
         <div part="error-message" hidden$="[[!error]]">

package/src/vaadin-login-form.d.ts

@@ -5,7 +5,7 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
 /**
@@ -69,9 +69,7 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */
-declare class LoginForm extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
-  submit(): void;
-
+declare class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof LoginFormEventMap>(
     type: K,
     listener: (this: LoginForm, ev: LoginFormEventMap[K]) => void,

package/src/vaadin-login-form.js

@@ -10,7 +10,7 @@ import './vaadin-login-form-wrapper.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 
 /**
  * `<vaadin-login-form>` is a Web Component providing an easy way to require users
@@ -49,9 +49,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes LoginMixin
+ * @mixes LoginFormMixin
  */
-class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -111,19 +111,6 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
     return 'vaadin-login-form';
   }
 
-  static get observers() {
-    return ['_errorChanged(error)'];
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    if (!this.noAutofocus) {
-      this.$.vaadinLoginUsername.focus();
-    }
-  }
-
   /**
    * @param {StampedTemplate} dom
    * @return {null}
@@ -132,74 +119,6 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   _attachDom(dom) {
     this.appendChild(dom);
   }
-
-  /** @private */
-  _errorChanged() {
-    if (this.error && !this._preventAutoEnable) {
-      this.disabled = false;
-    }
-  }
-
-  submit() {
-    const userName = this.$.vaadinLoginUsername;
-    const password = this.$.vaadinLoginPassword;
-
-    if (this.disabled || !(userName.validate() && password.validate())) {
-      return;
-    }
-
-    this.error = false;
-    this.disabled = true;
-
-    const loginEventDetails = {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        username: userName.value,
-        password: password.value,
-      },
-    };
-
-    const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
-    if (this.action && firedEvent) {
-      const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
-      const csrfMetaValue = document.querySelector('meta[name=_csrf]');
-      if (csrfMetaName && csrfMetaValue) {
-        this.$.csrf.name = csrfMetaName.content;
-        this.$.csrf.value = csrfMetaValue.content;
-      }
-      this.querySelector('form').submit();
-    }
-  }
-
-  /** @private */
-  _handleInputKeydown(e) {
-    if (e.key === 'Enter') {
-      const { currentTarget: inputActive } = e;
-      const nextInput =
-        inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
-      if (inputActive.validate()) {
-        if (nextInput.checkValidity()) {
-          this.submit();
-        } else {
-          nextInput.focus();
-        }
-      }
-    }
-  }
-
-  /** @private */
-  _handleInputKeyup(e) {
-    const input = e.currentTarget;
-    if (e.key === 'Tab' && input instanceof HTMLInputElement) {
-      input.select();
-    }
-  }
-
-  /** @private */
-  _onForgotPasswordClick() {
-    this.dispatchEvent(new CustomEvent('forgot-password'));
-  }
 }
 
 customElements.define(LoginForm.is, LoginForm);

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import type { LoginMixinClass } from './vaadin-login-mixin.js';
+
+export declare function LoginOverlayMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<LoginMixinClass> & Constructor<LoginOverlayMixinClass> & Constructor<OverlayClassMixinClass> & T;
+
+export declare class LoginOverlayMixinClass {
+  /**
+   * Defines the application description
+   */
+  description: string;
+
+  /**
+   * True if the overlay is currently displayed.
+   */
+  opened: boolean;
+
+  /**
+   * Defines the application title
+   */
+  title: string;
+}

package/src/vaadin-login-overlay-mixin.js

@@ -0,0 +1,146 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { LoginMixin } from './vaadin-login-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes LoginMixin
+ * @mixes OverlayClassMixin
+ */
+export const LoginOverlayMixin = (superClass) =>
+  class LoginOverlayMixin extends OverlayClassMixin(LoginMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Defines the application description
+         * @type {string}
+         */
+        description: {
+          type: String,
+          value: 'Application description',
+          notify: true,
+        },
+
+        /**
+         * True if the overlay is currently displayed.
+         * @type {boolean}
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          observer: '_onOpenedChange',
+        },
+
+        /**
+         * Defines the application title
+         * @type {string}
+         */
+        title: {
+          type: String,
+          value: 'App name',
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__i18nChanged(i18n)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._overlayElement = this.$.vaadinLoginOverlayWrapper;
+    }
+
+    /** @protected */
+    connectedCallback() {
+      super.connectedCallback();
+
+      // Restore opened state if overlay was open when disconnecting
+      if (this.__restoreOpened) {
+        this.opened = true;
+      }
+    }
+
+    /** @protected */
+    disconnectedCallback() {
+      super.disconnectedCallback();
+
+      // Close overlay and memorize opened state
+      this.__restoreOpened = this.opened;
+      this.opened = false;
+    }
+
+    /** @private */
+    __i18nChanged(i18n) {
+      const header = i18n && i18n.header;
+      if (!header) {
+        return;
+      }
+      this.title = header.title;
+      this.description = header.description;
+    }
+
+    /** @protected */
+    _preventClosingLogin(e) {
+      e.preventDefault();
+    }
+
+    /**
+     * @param {!Event} e
+     * @protected
+     */
+    _retargetEvent(e) {
+      e.stopPropagation();
+      const { detail, composed, cancelable, bubbles } = e;
+
+      const firedEvent = this.dispatchEvent(new CustomEvent(e.type, { bubbles, cancelable, composed, detail }));
+      // Check if `eventTarget.preventDefault()` was called to prevent default in the original event
+      if (!firedEvent) {
+        e.preventDefault();
+      }
+    }
+
+    /** @private */
+    _onOpenedChange() {
+      if (!this.opened) {
+        this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
+        this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
+        this.disabled = false;
+
+        if (this._undoTeleport) {
+          this._undoTeleport();
+        }
+      } else {
+        this._undoTeleport = this._teleport(this._getElementsToTeleport());
+
+        // Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
+        // Reverting it back to the previous state
+        // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
+        document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
+      }
+    }
+
+    /** @private */
+    _teleport(elements) {
+      const teleported = Array.from(elements).map((e) => {
+        return this.$.vaadinLoginOverlayWrapper.appendChild(e);
+      });
+      // Function to undo the teleport
+      return () => {
+        while (teleported.length > 0) {
+          this.appendChild(teleported.shift());
+        }
+      };
+    }
+
+    /** @private */
+    _getElementsToTeleport() {
+      return this.querySelectorAll('[slot=title]');
+    }
+  };

package/src/vaadin-login-overlay-wrapper-styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { CSSResult } from 'lit';
+
+export const loginOverlayWrapperStyles: CSSResult;

package/src/vaadin-login-overlay-wrapper-styles.js

@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2018 - 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 loginOverlayWrapperStyles = css`
+  [part='overlay'] {
+    outline: none;
+  }
+
+  [part='card'] {
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  [part='brand'] {
+    box-sizing: border-box;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+  }
+
+  [part='brand'] h1 {
+    color: inherit;
+    margin: 0;
+  }
+`;

package/src/vaadin-login-overlay-wrapper.js

@@ -3,58 +3,16 @@
  * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
 
-registerStyles(
-  'vaadin-login-overlay-wrapper',
-  css`
-    [part='overlay'] {
-      outline: none;
-    }
-
-    [part='card'] {
-      max-width: 100%;
-      box-sizing: border-box;
-      overflow: hidden;
-      display: flex;
-      flex-direction: column;
-    }
-
-    [part='brand'] {
-      box-sizing: border-box;
-      overflow: hidden;
-      flex-grow: 1;
-      flex-shrink: 0;
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-    }
-
-    [part='brand'] h1 {
-      color: inherit;
-      margin: 0;
-    }
-  `,
-  { moduleId: 'vaadin-login-overlay-wrapper-styles' },
-);
-
-const template = html`
-  <section part="card">
-    <div part="brand">
-      <slot name="title">
-        <h1 part="title">[[title]]</h1>
-      </slot>
-      <p part="description">[[description]]</p>
-    </div>
-    <div part="form">
-      <slot></slot>
-    </div>
-  </section>
-`;
-
-let memoizedTemplate;
+registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapperStyles], {
+  moduleId: 'vaadin-login-overlay-wrapper-styles',
+});
 
 /**
  * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
@@ -62,7 +20,7 @@ let memoizedTemplate;
  * @extends Overlay
  * @private
  */
-class LoginOverlayWrapper extends Overlay {
+class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-login-overlay-wrapper';
   }
@@ -86,17 +44,24 @@ class LoginOverlayWrapper extends Overlay {
   }
 
   static get template() {
-    if (!memoizedTemplate) {
-      // Clone the superclass template
-      memoizedTemplate = super.template.cloneNode(true);
-
-      // Replace overlay slot with card
-      const card = template.content.querySelector('[part=card]');
-      const content = memoizedTemplate.content.querySelector('#content');
-      content.replaceChild(card, content.children[0]);
-    }
-
-    return memoizedTemplate;
+    return html`
+      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <div part="content" id="content">
+          <section part="card">
+            <div part="brand">
+              <slot name="title">
+                <h1 part="title">[[title]]</h1>
+              </slot>
+              <p part="description">[[description]]</p>
+            </div>
+            <div part="form">
+              <slot></slot>
+            </div>
+          </section>
+        </div>
+      </div>
+    `;
   }
 }
 

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

@@ -4,9 +4,9 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
+
 export { LoginI18n } from './vaadin-login-mixin.js';
 
 /**
@@ -76,22 +76,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */
-declare class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
-  /**
-   * Defines the application description
-   */
-  description: string;
-
-  /**
-   * True if the overlay is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Defines the application title
-   */
-  title: string;
-
+declare class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(HTMLElement))) {
   addEventListener<K extends keyof LoginOverlayEventMap>(
     type: K,
     listener: (this: LoginOverlay, ev: LoginOverlayEventMap[K]) => void,

package/src/vaadin-login-overlay.js

@@ -7,9 +7,8 @@ import './vaadin-login-form.js';
 import './vaadin-login-overlay-wrapper.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
+import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
 
 /**
  * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
@@ -47,10 +46,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes LoginMixin
- * @mixes OverlayClassMixin
+ * @mixes LoginOverlayMixin
  */
-class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
+class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <vaadin-login-overlay-wrapper
@@ -83,137 +81,6 @@ class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMix
   static get is() {
     return 'vaadin-login-overlay';
   }
-
-  static get properties() {
-    return {
-      /**
-       * Defines the application description
-       * @type {string}
-       */
-      description: {
-        type: String,
-        value: 'Application description',
-        notify: true,
-      },
-
-      /**
-       * True if the overlay is currently displayed.
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        observer: '_onOpenedChange',
-      },
-
-      /**
-       * Defines the application title
-       * @type {string}
-       */
-      title: {
-        type: String,
-        value: 'App name',
-      },
-    };
-  }
-
-  static get observers() {
-    return ['__i18nChanged(i18n.header.*)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._overlayElement = this.$.vaadinLoginOverlayWrapper;
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    // Restore opened state if overlay was open when disconnecting
-    if (this.__restoreOpened) {
-      this.opened = true;
-    }
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    // Close overlay and memorize opened state
-    this.__restoreOpened = this.opened;
-    this.opened = false;
-  }
-
-  /** @private */
-  __i18nChanged(i18n) {
-    const header = i18n.base;
-    if (!header) {
-      return;
-    }
-    this.title = header.title;
-    this.description = header.description;
-  }
-
-  /** @private */
-  _preventClosingLogin(e) {
-    e.preventDefault();
-  }
-
-  /**
-   * @param {!Event} e
-   * @private
-   */
-  _retargetEvent(e) {
-    e.stopPropagation();
-    const { detail, composed, cancelable, bubbles } = e;
-
-    const firedEvent = this.dispatchEvent(new CustomEvent(e.type, { bubbles, cancelable, composed, detail }));
-    // Check if `eventTarget.preventDefault()` was called to prevent default in the original event
-    if (!firedEvent) {
-      e.preventDefault();
-    }
-  }
-
-  /** @private */
-  _onOpenedChange() {
-    if (!this.opened) {
-      this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
-      this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
-      this.disabled = false;
-
-      if (this._undoTeleport) {
-        this._undoTeleport();
-      }
-    } else {
-      this._undoTeleport = this._teleport(this._getElementsToTeleport());
-
-      // Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
-      // Reverting it back to the previous state
-      // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
-      document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
-    }
-  }
-
-  /** @private */
-  _teleport(elements) {
-    const teleported = Array.from(elements).map((e) => {
-      return this.$.vaadinLoginOverlayWrapper.appendChild(e);
-    });
-    // Function to undo the teleport
-    return () => {
-      while (teleported.length > 0) {
-        this.appendChild(teleported.shift());
-      }
-    };
-  }
-
-  /** @private */
-  _getElementsToTeleport() {
-    return this.querySelectorAll('[slot=title]');
-  }
 }
 
 customElements.define(LoginOverlay.is, LoginOverlay);

package/theme/lumo/vaadin-login-overlay-styles.js

@@ -1,6 +1,7 @@
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import './vaadin-login-form-wrapper-styles.js';
 import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
 import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -169,8 +170,8 @@ const loginOverlayWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-overlay-wrapper', [color, typography, loginOverlayWrapper], {
-  moduleId: 'vaadin-login-overlay-wrapper-lumo-styles',
+registerStyles('vaadin-login-overlay-wrapper', [color, typography, overlay, loginOverlayWrapper], {
+  moduleId: 'lumo-login-overlay-wrapper',
 });
 
 const loginFormWrapper = css`

package/theme/lumo/vaadin-login-overlay.js

@@ -1,7 +1,6 @@
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
 import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

package/theme/material/vaadin-login-overlay.js

@@ -1,7 +1,6 @@
 import '@vaadin/text-field/theme/material/vaadin-text-field.js';
 import '@vaadin/password-field/theme/material/vaadin-password-field.js';
 import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-alpha6",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -148,7 +148,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha6/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",
@@ -351,10 +351,6 @@
                 "name": "login",
                 "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
               },
-              {
-                "name": "description-changed",
-                "description": "Fired when the `description` property changes."
-              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."
@@ -362,6 +358,10 @@
               {
                 "name": "error-changed",
                 "description": "Fired when the `error` property changes."
+              },
+              {
+                "name": "description-changed",
+                "description": "Fired when the `description` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.2.0-alpha4",
+  "version": "24.2.0-alpha6",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -93,7 +93,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.2.0-alpha6/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {
@@ -181,22 +181,22 @@
               }
             },
             {
-              "name": "@description-changed",
-              "description": "Fired when the `description` property changes.",
+              "name": "@disabled-changed",
+              "description": "Fired when the `disabled` property changes.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "@disabled-changed",
-              "description": "Fired when the `disabled` property changes.",
+              "name": "@error-changed",
+              "description": "Fired when the `error` property changes.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "@error-changed",
-              "description": "Fired when the `error` property changes.",
+              "name": "@description-changed",
+              "description": "Fired when the `description` property changes.",
               "value": {
                 "kind": "expression"
               }