@vaadin/login 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "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-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/overlay": "24.0.0-alpha10",
+    "@vaadin/password-field": "24.0.0-alpha10",
+    "@vaadin/text-field": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

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,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,33 @@ 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 `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,6 +69,9 @@ 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.
  */

package/src/vaadin-login-overlay.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/
  */
 import './vaadin-login-form.js';
@@ -37,6 +37,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.
  *
@@ -60,11 +63,11 @@ class LoginOverlay extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement)
         <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"
@@ -161,6 +164,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-alpha10",
   "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-alpha10/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",
@@ -345,10 +333,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 +340,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-alpha10",
   "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-alpha10/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {
@@ -201,13 +180,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 +193,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';