@vaadin/login 25.0.0-alpha1 → 25.0.0-alpha11

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

@@ -5,11 +5,10 @@
  */
 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;
+): Constructor<LoginOverlayMixinClass> & Constructor<OverlayClassMixinClass> & T;
 
 export declare class LoginOverlayMixinClass {
   /**

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

@@ -4,15 +4,14 @@
  * 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';
+import { TitleController } from './title-controller.js';
 
 /**
  * @polymerMixin
- * @mixes LoginMixin
  * @mixes OverlayClassMixin
  */
 export const LoginOverlayMixin = (superClass) =>
-  class LoginOverlayMixin extends OverlayClassMixin(LoginMixin(superClass)) {
+  class LoginOverlayMixin extends OverlayClassMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -32,8 +31,8 @@ export const LoginOverlayMixin = (superClass) =>
         opened: {
           type: Boolean,
           value: false,
+          reflectToAttribute: true,
           sync: true,
-          observer: '_onOpenedChange',
         },
 
         /**
@@ -47,15 +46,43 @@ export const LoginOverlayMixin = (superClass) =>
       };
     }
 
-    static get observers() {
-      return ['__i18nChanged(__effectiveI18n)'];
+    /** @protected */
+    firstUpdated() {
+      super.firstUpdated();
+
+      this.setAttribute('role', 'dialog');
+
+      this.__titleController = new TitleController(this);
+      this.addController(this.__titleController);
+
+      this._overlayElement = this.$.overlay;
     }
 
     /** @protected */
-    ready() {
-      super.ready();
+    willUpdate(props) {
+      super.willUpdate(props);
+
+      if (props.has('__effectiveI18n') && this.__effectiveI18n.header) {
+        this.title = this.__effectiveI18n.header.title;
+        this.description = this.__effectiveI18n.header.description;
+      }
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('title') || props.has('__effectiveI18n')) {
+        this.__titleController.setTitle(this.title);
+      }
 
-      this._overlayElement = this.$.vaadinLoginOverlayWrapper;
+      if (props.has('headingLevel')) {
+        this.__titleController.setLevel(this.headingLevel);
+      }
+
+      if (props.has('opened')) {
+        this._openedChanged(this.opened);
+      }
     }
 
     /** @protected */
@@ -72,19 +99,14 @@ export const LoginOverlayMixin = (superClass) =>
     disconnectedCallback() {
       super.disconnectedCallback();
 
-      // Close overlay and memorize opened state
-      this.__restoreOpened = this.opened;
-      this.opened = false;
-    }
-
-    /** @private */
-    __i18nChanged(effectiveI18n) {
-      const header = effectiveI18n && effectiveI18n.header;
-      if (!header) {
-        return;
-      }
-      this.title = header.title;
-      this.description = header.description;
+      // Using a timeout to avoid toggling opened state
+      // when just moving the overlay in the DOM
+      setTimeout(() => {
+        if (!this.isConnected) {
+          this.__restoreOpened = this.opened;
+          this.opened = false;
+        }
+      });
     }
 
     /** @protected */
@@ -92,77 +114,28 @@ export const LoginOverlayMixin = (superClass) =>
       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 */
+    __handleOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('closed'));
     }
 
     /** @private */
-    _onOpenedChange() {
-      const form = this.$.vaadinLoginForm;
-
-      if (!this.opened) {
-        form.$.vaadinLoginUsername.value = '';
-        form.$.vaadinLoginPassword.value = '';
+    _openedChanged(opened, oldOpened) {
+      if (oldOpened) {
+        this._userNameField.value = '';
+        this._passwordField.value = '';
         this.disabled = false;
-
-        if (this._undoTitleTeleport) {
-          this._undoTitleTeleport();
-        }
-
-        if (this._undoFieldsTeleport) {
-          this._undoFieldsTeleport();
-        }
-
-        if (this._undoFooterTeleport) {
-          this._undoFooterTeleport();
-        }
-      } else {
-        this._undoTitleTeleport = this._teleport('title', this.$.vaadinLoginOverlayWrapper);
-
-        this._undoFieldsTeleport = this._teleport(
-          'custom-form-area',
-          form.$.vaadinLoginFormWrapper,
-          form.querySelector('vaadin-button'),
-        );
-
-        this._undoFooterTeleport = this._teleport('footer', form.$.vaadinLoginFormWrapper);
-
+      } else if (opened) {
         // 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;
+        document.body.style.pointerEvents = this.$.overlay._previousDocumentPointerEvents;
       }
     }
 
-    /** @private */
-    _teleport(slot, target, refNode) {
-      const teleported = [...this.querySelectorAll(`[slot="${slot}"]`)].map((el) => {
-        if (refNode) {
-          target.insertBefore(el, refNode);
-        } else {
-          target.appendChild(el);
-        }
-        return el;
-      });
-      // Function to undo the teleport
-      return () => {
-        this.append(...teleported);
-      };
-    }
-
-    /** @private */
-    __computeHeadingLevel(headingLevel) {
-      return headingLevel + 1;
-    }
+    /**
+     * Fired when the overlay is closed.
+     *
+     * @event closed
+     */
   };

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

@@ -5,27 +5,48 @@
  */
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { LoginOverlayWrapperMixin } from './vaadin-login-overlay-wrapper-mixin.js';
-import { loginOverlayWrapperStyles } from './vaadin-login-overlay-wrapper-styles.js';
+import { loginOverlayWrapperStyles } from './styles/vaadin-login-overlay-wrapper-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
  *
  * @extends HTMLElement
- * @mixes LoginOverlayWrapperMixin
+ * @mixes DirMixin
+ * @mixes OverlayMixin
  * @mixes ThemableMixin
  * @private
  */
-class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolylitMixin(LitElement))) {
+class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
     return 'vaadin-login-overlay-wrapper';
   }
 
   static get styles() {
-    return [overlayStyles, loginOverlayWrapperStyles];
+    return loginOverlayWrapperStyles;
+  }
+
+  static get properties() {
+    return {
+      /**
+       * Application description. Displayed under the title.
+       */
+      description: {
+        type: String,
+      },
+    };
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  get _modalRoot() {
+    return this.owner;
   }
 
   /** @protected */
@@ -36,12 +57,10 @@ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(Polylit
         <div part="content" id="content">
           <section part="card">
             <div part="brand">
-              <slot name="title">
-                <div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
-              </slot>
-              <p part="description">${this.description}</p>
+              <slot name="title"></slot>
+              <div part="description">${this.description}</div>
             </div>
-            <div part="form">
+            <div part="form-wrapper">
               <slot></slot>
             </div>
           </section>

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

@@ -5,6 +5,7 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-mixin.js';
 import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
 
 export { LoginI18n } from './vaadin-login-mixin.js';
@@ -33,6 +34,11 @@ export type LoginOverlayLoginEvent = CustomEvent<{
   custom?: Record<string, unknown>;
 }>;
 
+/**
+ * Fired when the overlay is closed.
+ */
+export type LoginOverlayClosedEvent = CustomEvent;
+
 export interface LoginOverlayCustomEventMap {
   'description-changed': LoginOverlayDescriptionChangedEvent;
 
@@ -43,44 +49,48 @@ export interface LoginOverlayCustomEventMap {
   'forgot-password': Event;
 
   login: LoginOverlayLoginEvent;
+
+  closed: LoginOverlayClosedEvent;
 }
 
 export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayCustomEventMap {}
 
 /**
- * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
- * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
- * password managers to work with login form.
+ * `<vaadin-login-overlay>` is a web component which renders a login form in an overlay and
+ * provides an additional `brand` part for application title and description.
  *
- * ```
+ * ```html
  * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
  *
  * ### Styling
  *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
- *
- * The following Shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
- *
- * Part name       | Description
- * ----------------|---------------------------------------------------------|
- * `card`          | Container for the entire component's content
- * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login-form>` component
- *
- * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ * The following shadow DOM parts are available for styling:
  *
- * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
- * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
+ * Part name                    | Description
+ * -----------------------------|--------------------------------
+ * `backdrop`                   | Backdrop of the overlay
+ * `overlay`                    | The overlay container element
+ * `content`                    | The overlay content element
+ * `card`                       | Container for the brand and form wrapper
+ * `brand`                      | Container for application title and description
+ * `description`                | The application description
+ * `form-wrapper`               | The login form wrapper element
+ * `form`                       | The login form element
+ * `form-title`                 | Title of the login form
+ * `error-message`              | Container for error message
+ * `error-message-title`        | Container for error message title
+ * `error-message-description`  | Container for error message description
+ * `footer`                     | Container for the footer element
  *
  * @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.
+ * @fires {CustomEvent} closed - Fired when the overlay is closed.
  */
-declare class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   addEventListener<K extends keyof LoginOverlayEventMap>(
     type: K,
     listener: (this: LoginOverlay, ev: LoginOverlayEventMap[K]) => void,

package/src/vaadin-login-overlay.js

@@ -3,97 +3,118 @@
  * Copyright (c) 2018 - 2025 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/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';
 import './vaadin-login-overlay-wrapper.js';
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { LoginFormMixin } from './vaadin-login-form-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
- * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
- * password managers to work with login form.
+ * `<vaadin-login-overlay>` is a web component which renders a login form in an overlay and
+ * provides an additional `brand` part for application title and description.
  *
- * ```
+ * ```html
  * <vaadin-login-overlay opened></vaadin-login-overlay>
  * ```
  *
  * ### Styling
  *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
- *
- * The following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
- * Part name       | Description
- * ----------------|---------------------------------------------------------|
- * `card`          | Container for the entire component's content
- * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login-form>` component
+ * Part name                    | Description
+ * -----------------------------|--------------------------------
+ * `backdrop`                   | Backdrop of the overlay
+ * `overlay`                    | The overlay container element
+ * `content`                    | The overlay content element
+ * `card`                       | Container for the brand and form wrapper
+ * `brand`                      | Container for application title and description
+ * `description`                | The application description
+ * `form-wrapper`               | The login form wrapper element
+ * `form`                       | The login form element
+ * `form-title`                 | Title of the login form
+ * `error-message`              | Container for error message
+ * `error-message-title`        | Container for error message title
+ * `error-message-description`  | Container for error message description
+ * `footer`                     | Container for the footer element
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
- * 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.
+ * @fires {CustomEvent} closed - Fired when the overlay is closed.
  *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin
  * @mixes ThemableMixin
+ * @mixes LoginFormMixin
  * @mixes LoginOverlayMixin
  */
-class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-login-overlay';
   }
 
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
   /** @protected */
   render() {
     return html`
       <vaadin-login-overlay-wrapper
-        id="vaadinLoginOverlayWrapper"
+        id="overlay"
+        .owner="${this}"
         .opened="${this.opened}"
-        .title="${this.title}"
         .description="${this.description}"
-        .headingLevel="${this.headingLevel}"
-        role="dialog"
         focus-trap
         with-backdrop
         theme="${ifDefined(this._theme)}"
         @vaadin-overlay-escape-press="${this._preventClosingLogin}"
         @vaadin-overlay-outside-click="${this._preventClosingLogin}"
+        @vaadin-overlay-closed="${this.__handleOverlayClosed}"
         @opened-changed="${this._onOpenedChanged}"
+        exportparts="backdrop, overlay, content, card, brand, description, form-wrapper"
       >
-        <vaadin-login-form
-          theme="with-overlay"
-          id="vaadinLoginForm"
-          .action="${this.action}"
-          .disabled="${this.disabled}"
+        <slot name="title" slot="title"></slot>
+        <vaadin-login-form-wrapper
+          id="form"
           .error="${this.error}"
-          .noAutofocus="${this.noAutofocus}"
-          .noForgotPassword="${this.noForgotPassword}"
-          .headingLevel="${this.__computeHeadingLevel(this.headingLevel)}"
           .i18n="${this.__effectiveI18n}"
-          @login="${this._retargetEvent}"
-          @forgot-password="${this._retargetEvent}"
-          @disabled-changed="${this._onDisabledChanged}"
-        ></vaadin-login-form>
+          part="form"
+          role="region"
+          aria-labelledby="title"
+          exportparts="error-message, error-message-title, error-message-description, footer"
+        >
+          <div id="title" slot="form-title" part="form-title" role="heading" aria-level="${this.headingLevel + 1}">
+            ${this.__effectiveI18n.form.title}
+          </div>
+          <slot name="form" slot="form"></slot>
+          <slot name="custom-form-area" slot="custom-form-area"></slot>
+          <slot name="submit" slot="submit"></slot>
+          <slot name="forgot-password" slot="forgot-password"></slot>
+          <slot name="footer" slot="footer"></slot>
+        </vaadin-login-form-wrapper>
       </vaadin-login-overlay-wrapper>
-
-      <div hidden>
-        <slot name="custom-form-area"></slot>
-        <slot name="footer"></slot>
-      </div>
     `;
   }
 
@@ -101,11 +122,6 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitM
   _onOpenedChanged(event) {
     this.opened = event.detail.value;
   }
-
-  /** @private */
-  _onDisabledChanged(event) {
-    this.disabled = event.detail.value;
-  }
 }
 
 defineCustomElement(LoginOverlay);

package/vaadin-login-form.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-login-form.js';
+import './src/vaadin-login-form.js';
 export * from './src/vaadin-login-form.js';

package/vaadin-login-overlay.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-login-overlay.js';
+import './src/vaadin-login-overlay.js';
 export * from './src/vaadin-login-overlay.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha1",
+  "version": "25.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`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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```html\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 following shadow DOM parts 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/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -170,7 +170,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/25.0.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -395,6 +395,10 @@
                 "name": "login",
                 "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
               },
+              {
+                "name": "closed",
+                "description": "Fired when the overlay is closed."
+              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha1",
+  "version": "25.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`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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```html\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 following shadow DOM parts 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/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -100,7 +100,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/25.0.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the overlay is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@disabled-changed",
               "description": "Fired when the `disabled` property changes.",