@vaadin/login 24.0.0-alpha1 → 24.0.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -37,14 +37,14 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/overlay": "24.0.0-alpha1",
-    "@vaadin/password-field": "24.0.0-alpha1",
-    "@vaadin/text-field": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha11",
+    "@vaadin/component-base": "24.0.0-alpha11",
+    "@vaadin/overlay": "24.0.0-alpha11",
+    "@vaadin/password-field": "24.0.0-alpha11",
+    "@vaadin/text-field": "24.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha11"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "641b3d96ceeb3e503a093682ebe686afdd8c3a68"
 }

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

@@ -1,24 +1,19 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/button/src/vaadin-button.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';
 
 /**
  * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
  *
  * @extends HTMLElement
- * @mixes ElementMixin
  * @mixes ThemableMixin
- * @mixes LoginMixin
  * @private
  */
-class LoginFormWrapper extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
@@ -55,13 +50,7 @@ class LoginFormWrapper extends LoginMixin(ElementMixin(ThemableMixin(PolymerElem
 
         <slot name="form"></slot>
 
-        <vaadin-button
-          id="forgotPasswordButton"
-          theme="tertiary small forgot-password"
-          on-click="_forgotPassword"
-          hidden$="[[noForgotPassword]]"
-          >[[i18n.form.forgotPassword]]</vaadin-button
-        >
+        <slot name="forgot-password"></slot>
 
         <div part="footer">
           <p>[[i18n.additionalInformation]]</p>
@@ -74,8 +63,26 @@ class LoginFormWrapper extends LoginMixin(ElementMixin(ThemableMixin(PolymerElem
     return 'vaadin-login-form-wrapper';
   }
 
-  _forgotPassword() {
-    this.dispatchEvent(new CustomEvent('forgot-password'));
+  static get properties() {
+    return {
+      /**
+       * If set, the error message is shown. The message is hidden by default.
+       * When set, it changes the disabled state of the submit button.
+       * @type {boolean}
+       */
+      error: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+      },
+
+      /**
+       * The object used to localize this component.
+       */
+      i18n: {
+        type: Object,
+      },
+    };
   }
 }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * 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';
@@ -8,12 +8,26 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
 import { LoginMixin } from './vaadin-login-mixin.js';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
+/**
+ * Fired when the `disabled` property changes.
+ */
+export type LoginFormDisabledChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `error` property changes.
+ */
+export type LoginFormErrorChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when a user submits the login.
  */
 export type LoginFormLoginEvent = CustomEvent<{ username: string; password: string }>;
 
 export interface LoginFormCustomEventMap {
+  'disabled-changed': LoginFormDisabledChangedEvent;
+
+  'error-changed': LoginFormErrorChangedEvent;
+
   'forgot-password': Event;
 
   login: LoginFormLoginEvent;
@@ -46,11 +60,12 @@ export interface LoginFormEventMap extends HTMLElementEventMap, LoginFormCustomE
  * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
  * `error-message-title`       | Container for error message title
  * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
  * `footer`  | Container additional information text from `i18n` object
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  */

package/src/vaadin-login-form.js

@@ -1,8 +1,9 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import '@vaadin/button/src/vaadin-button.js';
 import '@vaadin/text-field/src/vaadin-text-field.js';
 import '@vaadin/password-field/src/vaadin-password-field.js';
 import './vaadin-login-form-wrapper.js';
@@ -36,11 +37,12 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
  * `error-message-title`       | Container for error message title
  * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
  * `footer`  | Container additional information text from `i18n` object
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  *
@@ -53,22 +55,12 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   static get template() {
     return html`
       <style>
-        [part='vaadin-login-native-form'] * {
+        vaadin-login-form-wrapper > form > * {
           width: 100%;
         }
       </style>
-      <vaadin-login-form-wrapper
-        theme$="[[_theme]]"
-        part="vaadin-login-native-form-wrapper"
-        action="{{action}}"
-        disabled="{{disabled}}"
-        error="{{error}}"
-        no-forgot-password="{{noForgotPassword}}"
-        i18n="{{i18n}}"
-        on-login="_retargetEvent"
-        on-forgot-password="_retargetEvent"
-      >
-        <form part="vaadin-login-native-form" method="POST" action$="[[action]]" slot="form">
+      <vaadin-login-form-wrapper theme$="[[_theme]]" error="[[error]]" i18n="[[i18n]]">
+        <form method="POST" action$="[[action]]" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field
             name="username"
@@ -79,6 +71,7 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
             autocapitalize="none"
             autocorrect="off"
             spellcheck="false"
+            autocomplete="username"
           >
             <input type="text" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-text-field>
@@ -95,10 +88,19 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
             <input type="password" slot="input" on-keyup="_handleInputKeyup" />
           </vaadin-password-field>
 
-          <vaadin-button part="vaadin-login-submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]"
-            >[[i18n.form.submit]]</vaadin-button
-          >
+          <vaadin-button theme="primary contained submit" on-click="submit" disabled$="[[disabled]]">
+            [[i18n.form.submit]]
+          </vaadin-button>
         </form>
+
+        <vaadin-button
+          slot="forgot-password"
+          theme="tertiary small"
+          on-click="_onForgotPasswordClick"
+          hidden$="[[noForgotPassword]]"
+        >
+          [[i18n.form.forgotPassword]]
+        </vaadin-button>
       </vaadin-login-form-wrapper>
     `;
   }
@@ -107,10 +109,14 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
     return 'vaadin-login-form';
   }
 
+  static get observers() {
+    return ['_errorChanged(error)'];
+  }
+
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
-    this._handleInputKeydown = this._handleInputKeydown.bind(this);
+
     if (!this.noAutofocus) {
       this.$.vaadinLoginUsername.focus();
     }
@@ -125,10 +131,6 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
     this.appendChild(dom);
   }
 
-  static get observers() {
-    return ['_errorChanged(error)'];
-  }
-
   /** @private */
   _errorChanged() {
     if (this.error && !this._preventAutoEnable) {
@@ -137,7 +139,10 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
   }
 
   submit() {
-    if (this.disabled || !(this.__isValid(this.$.vaadinLoginUsername) && this.__isValid(this.$.vaadinLoginPassword))) {
+    const userName = this.$.vaadinLoginUsername;
+    const password = this.$.vaadinLoginPassword;
+
+    if (this.disabled || !(userName.validate() && password.validate())) {
       return;
     }
 
@@ -148,8 +153,8 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
       bubbles: true,
       cancelable: true,
       detail: {
-        username: this.$.vaadinLoginUsername.value,
-        password: this.$.vaadinLoginPassword.value,
+        username: userName.value,
+        password: password.value,
       },
     };
 
@@ -161,28 +166,18 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
         this.$.csrf.name = csrfMetaName.content;
         this.$.csrf.value = csrfMetaValue.content;
       }
-      this.querySelector('[part="vaadin-login-native-form"]').submit();
+      this.querySelector('form').submit();
     }
   }
 
-  /** @private */
-  __isValid(input) {
-    return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
-  }
-
-  /** @private */
-  _isEnterKey(e) {
-    return e.key === 'Enter' || e.keyCode === 13;
-  }
-
   /** @private */
   _handleInputKeydown(e) {
-    if (this._isEnterKey(e)) {
+    if (e.key === 'Enter') {
       const { currentTarget: inputActive } = e;
       const nextInput =
         inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
-      if (this.__isValid(inputActive)) {
-        if (this.__isValid(nextInput)) {
+      if (inputActive.validate()) {
+        if (nextInput.validate()) {
           this.submit();
         } else {
           nextInput.focus();
@@ -193,14 +188,16 @@ class LoginForm extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)))
 
   /** @private */
   _handleInputKeyup(e) {
-    const isTab = e.key === 'Tab' || e.keyCode === 9;
     const input = e.currentTarget;
-    if (isTab && input && input.select) {
+    if (e.key === 'Tab' && input instanceof HTMLInputElement) {
       input.select();
-      // IOS 9 workaround: https://stackoverflow.com/a/7436574
-      setTimeout(() => input.setSelectionRange(0, 9999));
     }
   }
+
+  /** @private */
+  _onForgotPasswordClick() {
+    this.dispatchEvent(new CustomEvent('forgot-password'));
+  }
 }
 
 customElements.define(LoginForm.is, LoginForm);

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * 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';
@@ -89,6 +89,4 @@ export declare class LoginMixinClass {
    * ```
    */
   i18n: LoginI18n;
-
-  protected _retargetEvent(e: Event): void;
 }

package/src/vaadin-login-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -32,7 +32,6 @@ export const LoginMixin = (superClass) =>
         action: {
           type: String,
           value: null,
-          notify: true,
         },
 
         /**
@@ -67,7 +66,6 @@ export const LoginMixin = (superClass) =>
         noForgotPassword: {
           type: Boolean,
           value: false,
-          notify: true,
         },
 
         /**
@@ -130,7 +128,6 @@ export const LoginMixin = (superClass) =>
               },
             };
           },
-          notify: true,
         },
 
         /**
@@ -143,19 +140,4 @@ export const LoginMixin = (superClass) =>
         },
       };
     }
-
-    /**
-     * @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();
-      }
-    }
   };

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

@@ -1,58 +1,58 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { DomModule } from '@polymer/polymer/lib/elements/dom-module.js';
+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';
 
-const template = document.createElement('template');
-
-template.innerHTML = `<dom-module id="vaadin-login-overlay-wrapper-template">
-  <template>
-    <style>
-      [part="overlay"] {
-        outline: none;
-      }
+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='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'] {
+      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;
-      }
-    </style>
-    <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>
-  </template>
-</dom-module>`;
+    [part='brand'] h1 {
+      color: inherit;
+      margin: 0;
+    }
+  `,
+  { moduleId: 'vaadin-login-overlay-wrapper-styles' },
+);
 
-document.head.appendChild(template.content);
+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;
 
@@ -90,15 +90,10 @@ class LoginOverlayWrapper extends Overlay {
       // Clone the superclass template
       memoizedTemplate = super.template.cloneNode(true);
 
-      // Retrieve the elements from component's template
-      const thisTemplate = DomModule.import(`${this.is}-template`, 'template');
-      const card = thisTemplate.content.querySelector('[part=card]');
-      const styles = thisTemplate.content.querySelector('style');
-
-      // Append elements to cloned template
+      // Replace overlay slot with card
+      const card = template.content.querySelector('[part=card]');
       const content = memoizedTemplate.content.querySelector('#content');
       content.replaceChild(card, content.children[0]);
-      content.appendChild(styles);
     }
 
     return memoizedTemplate;

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

@@ -1,19 +1,41 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * 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';
 export { LoginI18n } from './vaadin-login-mixin.js';
 
+/**
+ * Fired when the `description` property changes.
+ */
+export type LoginOverlayDescriptionChangedEvent = CustomEvent<{ value: string }>;
+
+/**
+ * Fired when the `disabled` property changes.
+ */
+export type LoginOverlayDisabledChangedEvent = CustomEvent<{ value: boolean }>;
+
+/**
+ * Fired when the `error` property changes.
+ */
+export type LoginOverlayErrorChangedEvent = CustomEvent<{ value: boolean }>;
+
 /**
  * Fired when a user submits the login.
  */
 export type LoginOverlayLoginEvent = CustomEvent<{ username: string; password: string }>;
 
 export interface LoginOverlayCustomEventMap {
+  'description-changed': LoginOverlayDescriptionChangedEvent;
+
+  'disabled-changed': LoginOverlayDisabledChangedEvent;
+
+  'error-changed': LoginOverlayErrorChangedEvent;
+
   'forgot-password': Event;
 
   login: LoginOverlayLoginEvent;
@@ -48,10 +70,13 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
  * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
  *
+ * @fires {CustomEvent} description-changed - Fired when the `description` property changes.
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @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 ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
+declare class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   /**
    * Defines the application description
    */

package/src/vaadin-login-overlay.js

@@ -1,12 +1,13 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 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';
 
@@ -37,6 +38,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
  * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
  *
+ * @fires {CustomEvent} description-changed - Fired when the `description` property changes.
+ * @fires {CustomEvent} disabled-changed - Fired when the `disabled` property changes.
+ * @fires {CustomEvent} error-changed - Fired when the `error` property changes.
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
  * @fires {CustomEvent} login - Fired when a user submits the login.
  *
@@ -44,8 +48,9 @@ import { LoginMixin } from './vaadin-login-mixin.js';
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes LoginMixin
+ * @mixes OverlayClassMixin
  */
-class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class LoginOverlay extends LoginMixin(OverlayClassMixin(ElementMixin(ThemableMixin(PolymerElement)))) {
   static get template() {
     return html`
       <vaadin-login-overlay-wrapper
@@ -56,15 +61,17 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
         title="[[title]]"
         description="[[description]]"
         theme$="[[_theme]]"
+        on-vaadin-overlay-escape-press="_preventClosingLogin"
+        on-vaadin-overlay-outside-click="_preventClosingLogin"
       >
         <vaadin-login-form
           theme="with-overlay"
           id="vaadinLoginForm"
-          action="{{action}}"
+          action="[[action]]"
           disabled="{{disabled}}"
           error="{{error}}"
           no-autofocus="[[noAutofocus]]"
-          no-forgot-password="{{noForgotPassword}}"
+          no-forgot-password="[[noForgotPassword]]"
           i18n="{{i18n}}"
           on-login="_retargetEvent"
           on-forgot-password="_retargetEvent"
@@ -118,19 +125,16 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
   ready() {
     super.ready();
 
-    this._preventClosingLogin = this._preventClosingLogin.bind(this);
+    this._overlayElement = this.$.vaadinLoginOverlayWrapper;
   }
 
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
 
-    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
-
     // Restore opened state if overlay was open when disconnecting
     if (this.__restoreOpened) {
-      this.$.vaadinLoginOverlayWrapper.opened = true;
+      this.opened = true;
     }
   }
 
@@ -138,12 +142,9 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
   disconnectedCallback() {
     super.disconnectedCallback();
 
-    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
-
     // Close overlay and memorize opened state
-    this.__restoreOpened = this.$.vaadinLoginOverlayWrapper.opened;
-    this.$.vaadinLoginOverlayWrapper.opened = false;
+    this.__restoreOpened = this.opened;
+    this.opened = false;
   }
 
   /** @private */
@@ -161,6 +162,21 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
     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) {

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

@@ -4,7 +4,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-login-form',
   css`
-    vaadin-button[part='vaadin-login-submit'] {
+    form > vaadin-button[theme~='submit'] {
       margin-top: var(--lumo-space-l);
       margin-bottom: var(--lumo-space-s);
     }

package/theme/lumo/vaadin-login-form-wrapper-styles.js

@@ -17,7 +17,7 @@ const loginFormWrapper = css`
     margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
   }
 
-  #forgotPasswordButton {
+  ::slotted([slot='forgot-password']) {
     margin: var(--lumo-space-s) auto;
   }
 

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

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

package/theme/material/vaadin-login-form-styles.js

@@ -3,7 +3,7 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-login-form',
   css`
-    vaadin-button[part='vaadin-login-submit'] {
+    form > vaadin-button[theme~='submit'] {
       margin-top: 3em;
       margin-bottom: 2em;
       flex-grow: 0;
@@ -11,7 +11,7 @@ registerStyles(
 
     /* Small screen */
     @media only screen and (max-width: 1023px) {
-      vaadin-button[part='vaadin-login-submit'] {
+      form > vaadin-button[theme~='submit'] {
         margin-top: 2.5em;
         margin-bottom: 1em;
       }

package/theme/material/vaadin-login-form-wrapper-styles.js

@@ -22,7 +22,7 @@ const loginFormWrapper = css`
     font-size: var(--material-h5-font-size);
   }
 
-  #forgotPasswordButton {
+  ::slotted([slot='forgot-password']) {
     margin: 0.5rem auto;
     padding-bottom: 12px;
     padding-top: 12px;

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

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

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

@@ -302,7 +302,7 @@ const loginOverlayWrapper = css`
 `;
 
 registerStyles('vaadin-login-overlay-wrapper', [overlay, typography, loginOverlayWrapper], {
-  moduleId: 'vaadin-login-overlay-wrapper-material-styles',
+  moduleId: 'material-login-overlay-wrapper',
 });
 
 const loginFormWrapper = css`

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\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-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\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-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -135,10 +135,6 @@
                 "name": "login",
                 "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
               },
-              {
-                "name": "action-changed",
-                "description": "Fired when the `action` property changes."
-              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."
@@ -146,21 +142,13 @@
               {
                 "name": "error-changed",
                 "description": "Fired when the `error` property changes."
-              },
-              {
-                "name": "no-forgot-password-changed",
-                "description": "Fired when the `noForgotPassword` property changes."
-              },
-              {
-                "name": "i18n-changed",
-                "description": "Fired when the `i18n` property changes."
               }
             ]
           }
         },
         {
           "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/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",
@@ -208,6 +196,17 @@
                 ]
               }
             },
+            {
+              "name": "overlay-class",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "description",
               "description": "Defines the application description",
@@ -304,6 +303,17 @@
                   ]
                 }
               },
+              {
+                "name": "overlayClass",
+                "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+                "value": {
+                  "type": [
+                    "string",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "name": "description",
                 "description": "Defines the application description",
@@ -345,10 +355,6 @@
                 "name": "description-changed",
                 "description": "Fired when the `description` property changes."
               },
-              {
-                "name": "action-changed",
-                "description": "Fired when the `action` property changes."
-              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."
@@ -356,14 +362,6 @@
               {
                 "name": "error-changed",
                 "description": "Fired when the `error` property changes."
-              },
-              {
-                "name": "no-forgot-password-changed",
-                "description": "Fired when the `noForgotPassword` property changes."
-              },
-              {
-                "name": "i18n-changed",
-                "description": "Fired when the `i18n` property changes."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\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-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\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-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -75,13 +75,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@action-changed",
-              "description": "Fired when the `action` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@disabled-changed",
               "description": "Fired when the `disabled` property changes.",
@@ -95,26 +88,12 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@no-forgot-password-changed",
-              "description": "Fired when the `noForgotPassword` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@i18n-changed",
-              "description": "Fired when the `i18n` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         },
         {
           "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/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha1/#/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/custom-theme/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha11/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {
@@ -166,6 +145,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".overlayClass",
+              "description": "A space-delimited list of CSS class names to set on the overlay element.\nThis property does not affect other CSS class names set manually via JS.\n\nNote, if the CSS class name was set with this property, clearing it will\nremove it from the overlay, even if the same class name was also added\nmanually, e.g. by using `classList.add()` in the `renderer` function.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".description",
               "description": "Defines the application description",
@@ -201,13 +187,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@action-changed",
-              "description": "Fired when the `action` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@disabled-changed",
               "description": "Fired when the `disabled` property changes.",
@@ -221,20 +200,6 @@
               "value": {
                 "kind": "expression"
               }
-            },
-            {
-              "name": "@no-forgot-password-changed",
-              "description": "Fired when the `noForgotPassword` property changes.",
-              "value": {
-                "kind": "expression"
-              }
-            },
-            {
-              "name": "@i18n-changed",
-              "description": "Fired when the `i18n` property changes.",
-              "value": {
-                "kind": "expression"
-              }
             }
           ]
         }

package/theme/lumo/vaadin-login-form-wrapper.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-login-form-wrapper.js';

package/theme/material/vaadin-login-form-wrapper.js

@@ -1,3 +0,0 @@
-import '@vaadin/button/theme/material/vaadin-button.js';
-import './vaadin-login-form-wrapper-styles.js';
-import '../../src/vaadin-login-form-wrapper.js';