@vaadin/login 25.0.0-alpha9 → 25.0.0-beta2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,26 +34,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/overlay": "25.0.0-alpha9",
-    "@vaadin/password-field": "25.0.0-alpha9",
-    "@vaadin/text-field": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/button": "25.0.0-beta2",
+    "@vaadin/component-base": "25.0.0-beta2",
+    "@vaadin/overlay": "25.0.0-beta2",
+    "@vaadin/password-field": "25.0.0-beta2",
+    "@vaadin/text-field": "25.0.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha9",
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/checkbox": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta2",
+    "@vaadin/chai-plugins": "25.0.0-beta2",
+    "@vaadin/checkbox": "25.0.0-beta2",
+    "@vaadin/test-runner-commands": "25.0.0-beta2",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta2",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "e078f8371ae266f05c7ca1ec25686cc489c83f24"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const loginFormWrapperStyles = css`
@@ -13,8 +13,8 @@ export const loginFormWrapperStyles = css`
     display: flex;
     box-sizing: border-box;
     flex-direction: column;
-    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
-    padding: var(--vaadin-login-form-padding, var(--vaadin-padding));
+    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-l));
+    padding: var(--vaadin-login-form-padding, var(--vaadin-padding-l));
     max-width: 100%;
     width: var(--vaadin-login-form-width, 360px);
   }
@@ -26,11 +26,11 @@ export const loginFormWrapperStyles = css`
   ::slotted(form) {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
+    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-m));
   }
 
   ::slotted([slot='form-title']) {
-    color: var(--vaadin-login-form-title-color, var(--vaadin-color));
+    color: var(--vaadin-login-form-title-color, var(--vaadin-text-color));
     font-size: var(--vaadin-login-form-title-font-size, 1.25rem);
     font-weight: var(--vaadin-login-form-title-font-weight, 600);
     line-height: var(--vaadin-login-form-title-line-height, inherit);
@@ -41,10 +41,10 @@ export const loginFormWrapperStyles = css`
   }
 
   [part='error-message'] {
-    color: var(--vaadin-login-form-error-color, var(--vaadin-color));
+    color: var(--vaadin-login-form-error-color, var(--vaadin-text-color));
     font-size: var(--vaadin-login-form-error-font-size, inherit);
     font-weight: var(--vaadin-login-form-error-font-weight, 400);
-    gap: var(--vaadin-login-form-error-gap, 0 var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-login-form-error-gap, 0 var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     line-height: var(--vaadin-login-form-error-line-height, inherit);
   }
@@ -55,7 +55,7 @@ export const loginFormWrapperStyles = css`
     display: inline-block;
     flex: none;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-warn);
+    mask: var(--_vaadin-icon-warn) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-base-styles.js';
 
@@ -14,12 +14,9 @@ const loginOverlayWrapper = css`
       var(--vaadin-overlay-background, var(--vaadin-background-color))
     );
     border: var(--vaadin-login-overlay-border-width, var(--vaadin-overlay-border-width, 1px)) solid
-      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
+      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-secondary)));
     border-radius: var(--vaadin-login-overlay-border-radius, var(--vaadin-radius-l));
-    box-shadow: var(
-      --vaadin-login-overlay-box-shadow,
-      var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3))
-    );
+    box-shadow: var(--vaadin-login-overlay-shadow, var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3)));
   }
 
   [part='card'] {
@@ -34,18 +31,18 @@ const loginOverlayWrapper = css`
     background: var(--vaadin-login-overlay-brand-background, var(--vaadin-background-container));
     display: flex;
     flex-direction: column;
-    padding: var(--vaadin-login-overlay-brand-padding, var(--vaadin-padding));
+    padding: var(--vaadin-login-overlay-brand-padding, var(--vaadin-padding-l));
   }
 
   ::slotted([slot='title']) {
-    color: var(--vaadin-login-overlay-title-color, var(--vaadin-color));
+    color: var(--vaadin-login-overlay-title-color, var(--vaadin-text-color));
     font-size: var(--vaadin-login-overlay-title-font-size, inherit);
     font-weight: var(--vaadin-login-overlay-title-font-weight, 600);
     line-height: var(--vaadin-login-overlay-title-line-height, inherit);
   }
 
   [part='description'] {
-    color: var(--vaadin-login-overlay-description-color, var(--vaadin-color-subtle));
+    color: var(--vaadin-login-overlay-description-color, var(--vaadin-text-color-secondary));
     font-size: var(--vaadin-login-overlay-description-font-size, inherit);
     font-weight: var(--vaadin-login-overlay-description-font-weight, inherit);
     line-height: var(--vaadin-login-overlay-description-line-height, inherit);

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

@@ -8,7 +8,7 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-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 { loginFormWrapperStyles } from './styles/vaadin-login-form-wrapper-core-styles.js';
+import { loginFormWrapperStyles } from './styles/vaadin-login-form-wrapper-base-styles.js';
 
 /**
  * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.

package/src/vaadin-login-form.js

@@ -61,7 +61,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
     return css`
       :host {
         display: block;
-        max-width: max-content;
+        max-width: 100%;
       }
 
       :host([hidden]) {

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

@@ -69,7 +69,7 @@ export declare class LoginMixinClass {
    * and `header` sections, `header` can be added to override `title` and `description` properties
    * in `vaadin-login-overlay`):
    *
-   * ```
+   * ```js
    * {
    *   header: {
    *     title: 'App name',

package/src/vaadin-login-mixin.js

@@ -129,7 +129,7 @@ export const LoginMixin = (superClass) =>
      * and `header` sections, `header` can be added to override `title` and `description` properties
      * in `vaadin-login-overlay`):
      *
-     * ```
+     * ```js
      * {
      *   header: {
      *     title: 'App name',

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

@@ -4,11 +4,10 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
-import type { OverlayClassMixinClass } from '@vaadin/component-base/src/overlay-class-mixin.js';
 
 export declare function LoginOverlayMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<LoginOverlayMixinClass> & Constructor<OverlayClassMixinClass> & T;
+): Constructor<LoginOverlayMixinClass> & T;
 
 export declare class LoginOverlayMixinClass {
   /**

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

@@ -3,15 +3,13 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { TitleController } from './title-controller.js';
 
 /**
  * @polymerMixin
- * @mixes OverlayClassMixin
  */
 export const LoginOverlayMixin = (superClass) =>
-  class LoginOverlayMixin extends OverlayClassMixin(superClass) {
+  class LoginOverlayMixin extends superClass {
     static get properties() {
       return {
         /**
@@ -51,6 +49,8 @@ export const LoginOverlayMixin = (superClass) =>
       super.firstUpdated();
 
       this.setAttribute('role', 'dialog');
+      this.setAttribute('aria-modal', 'true');
+      this.setAttribute('tabindex', '0');
 
       this.__titleController = new TitleController(this);
       this.addController(this.__titleController);
@@ -114,6 +114,11 @@ export const LoginOverlayMixin = (superClass) =>
       e.preventDefault();
     }
 
+    /** @private */
+    __handleOverlayClosed() {
+      this.dispatchEvent(new CustomEvent('closed'));
+    }
+
     /** @private */
     _openedChanged(opened, oldOpened) {
       if (oldOpened) {
@@ -127,4 +132,10 @@ export const LoginOverlayMixin = (superClass) =>
         document.body.style.pointerEvents = this.$.overlay._previousDocumentPointerEvents;
       }
     }
+
+    /**
+     * Fired when the overlay is closed.
+     *
+     * @event closed
+     */
   };

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

@@ -10,7 +10,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.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 { loginOverlayWrapperStyles } from './styles/vaadin-login-overlay-wrapper-core-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.
@@ -42,10 +42,11 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
   }
 
   /**
+   * Override method from OverlayFocusMixin to use owner as focus trap root
    * @protected
    * @override
    */
-  get _modalRoot() {
+  get _focusTrapRoot() {
     return this.owner;
   }
 
@@ -53,7 +54,7 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
   render() {
     return html`
       <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
-      <div part="overlay" id="overlay" tabindex="0">
+      <div part="overlay" id="overlay">
         <div part="content" id="content">
           <section part="card">
             <div part="brand">

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

@@ -34,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;
 
@@ -44,6 +49,8 @@ export interface LoginOverlayCustomEventMap {
   'forgot-password': Event;
 
   login: LoginOverlayLoginEvent;
+
+  closed: LoginOverlayClosedEvent;
 }
 
 export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayCustomEventMap {}
@@ -81,6 +88,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
  * @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 LoginFormMixin(LoginOverlayMixin(ElementMixin(ThemableMixin(HTMLElement)))) {
   addEventListener<K extends keyof LoginOverlayEventMap>(

package/src/vaadin-login-overlay.js

@@ -52,6 +52,7 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
  * @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
@@ -67,13 +68,22 @@ class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(Themabl
 
   static get styles() {
     return css`
-      :host {
-        display: block;
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: block !important;
+        position: absolute;
+        outline: none;
       }
 
+      :host,
       :host([hidden]) {
         display: none !important;
       }
+
+      :host(:focus-visible) ::part(overlay) {
+        outline: var(--vaadin-focus-ring-width) solid var(--vaadin-focus-ring-color);
+      }
     `;
   }
 
@@ -90,6 +100,7 @@ class LoginOverlay extends LoginFormMixin(LoginOverlayMixin(ElementMixin(Themabl
         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"
       >

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,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -83,7 +83,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```js\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
                 "value": {
                   "type": [
                     "LoginI18n"
@@ -229,17 +229,6 @@
                 ]
               }
             },
-            {
-              "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",
@@ -283,7 +272,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```js\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
                 "value": {
                   "type": [
                     "LoginI18n"
@@ -347,17 +336,6 @@
                   ]
                 }
               },
-              {
-                "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",
@@ -395,6 +373,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-alpha9",
+  "version": "25.0.0-beta2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -49,7 +49,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```js\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
               "value": {
                 "kind": "expression"
               }
@@ -140,7 +140,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure (by default it doesn't include `additionalInformation`\nand `header` sections, `header` can be added to override `title` and `description` properties\nin `vaadin-login-overlay`):\n\n```js\n{\n  header: {\n    title: 'App name',\n    description: 'Inspiring application description'\n  },\n  form: {\n    title: 'Log in',\n    username: 'Username',\n    password: 'Password',\n    submit: 'Log in',\n    forgotPassword: 'Forgot password'\n  },\n  errorMessage: {\n    title: 'Incorrect username or password',\n    message: 'Check that you have entered the correct username and password and try again.',\n    username: 'Username is required',\n    password: 'Password is required'\n  },\n  additionalInformation: 'In case you need to provide some additional info for the user.'\n}\n```",
               "value": {
                 "kind": "expression"
               }
@@ -159,13 +159,6 @@
                 "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",
@@ -194,6 +187,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.",

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

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

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

@@ -1,31 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const loginFormWrapperStyles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    box-sizing: border-box;
-    overflow: hidden;
-  }
-
-  :host([hidden]) {
-    display: none !important;
-  }
-
-  ::slotted([slot='form-title']) {
-    margin: 0;
-  }
-
-  [part='error-message'] {
-    position: relative;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-`;

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

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

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

@@ -1,38 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-import { overlayStyles } from '@vaadin/overlay/src/styles/vaadin-overlay-core-styles.js';
-
-const loginOverlayWrapper = css`
-  [part='overlay'] {
-    outline: none;
-  }
-
-  [part='card'] {
-    max-width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  [part='brand'] {
-    box-sizing: border-box;
-    overflow: hidden;
-    flex-grow: 1;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-  }
-
-  ::slotted([slot='title']) {
-    color: inherit;
-    margin: 0;
-  }
-`;
-
-export const loginOverlayWrapperStyles = [overlayStyles, loginOverlayWrapper];

package/theme/lumo/vaadin-login-form-wrapper-styles.d.ts

@@ -1,4 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,98 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/sizing.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const loginFormWrapper = css`
-  :host {
-    width: calc(var(--lumo-size-m) * 10);
-    padding: var(--lumo-space-l);
-    max-width: 100%;
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-  }
-
-  ::slotted(form) {
-    display: flex;
-    flex-direction: column;
-  }
-
-  ::slotted([slot='form-title']) {
-    margin-top: calc(var(--lumo-font-size-xxxl) - var(--lumo-font-size-xxl));
-    color: var(--lumo-header-text-color);
-    font-size: var(--lumo-font-size-xxl);
-    font-weight: 600;
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  ::slotted([slot='submit']) {
-    margin-top: var(--lumo-space-l);
-    margin-bottom: var(--lumo-space-s);
-  }
-
-  ::slotted([slot='forgot-password']) {
-    margin: var(--lumo-space-s) auto;
-  }
-
-  [part='error-message'] {
-    background-color: var(--lumo-error-color-10pct);
-    padding: var(--lumo-space-m);
-    border-radius: var(--lumo-border-radius-m);
-    margin-top: var(--lumo-space-m);
-    margin-bottom: var(--lumo-space-s);
-    color: var(--lumo-error-text-color);
-  }
-
-  :host(:not([dir='rtl'])) [part='error-message'] {
-    padding-left: var(--lumo-size-m);
-  }
-
-  :host([dir='rtl']) [part='error-message'] {
-    padding-right: var(--lumo-size-m);
-  }
-
-  [part='error-message']::before {
-    content: var(--lumo-icons-error);
-    font-family: lumo-icons;
-    font-size: var(--lumo-icon-size-m);
-    position: absolute;
-    width: var(--lumo-size-m);
-    height: 1em;
-    line-height: 1;
-    text-align: center;
-  }
-
-  :host(:not([dir='rtl'])) [part='error-message']::before {
-    /* Visual centering */
-    margin-left: calc(var(--lumo-size-m) * -0.95);
-  }
-
-  :host([dir='rtl']) [part='error-message']::before {
-    /* Visual centering */
-    margin-right: calc(var(--lumo-size-m) * -0.95);
-  }
-
-  [part='error-message-title'] {
-    display: block;
-    margin: 0 0 0.25em;
-    color: inherit;
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='error-message-description'] {
-    font-size: var(--lumo-font-size-s);
-    line-height: var(--lumo-line-height-s);
-    margin: 0;
-    opacity: 0.9;
-  }
-
-  [part='footer'] {
-    font-size: var(--lumo-font-size-xs);
-    line-height: var(--lumo-line-height-s);
-    color: var(--lumo-secondary-text-color);
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', loginFormWrapper, {
-  moduleId: 'lumo-login-form-wrapper',
-});

package/theme/lumo/vaadin-login-form.d.ts

@@ -1,5 +0,0 @@
-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-styles.js';
-import '../../src/vaadin-login-form.js';

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

@@ -1,5 +0,0 @@
-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-styles.js';
-import '../../src/vaadin-login-form.js';

package/theme/lumo/vaadin-login-overlay-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,173 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const loginOverlayWrapper = css`
-  :host {
-    inset: 0;
-  }
-
-  [part='backdrop'] {
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
-  }
-
-  [part='overlay'] {
-    background: none;
-    border-radius: 0;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-  }
-
-  [part='brand'] {
-    padding: var(--lumo-space-l) var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
-    background-color: var(--lumo-primary-color);
-    color: var(--lumo-primary-contrast-color);
-    min-height: calc(var(--lumo-size-m) * 5);
-  }
-
-  ::slotted([slot='title']) {
-    font-size: var(--lumo-font-size-xxxl);
-    font-weight: 600;
-    line-height: var(--lumo-line-height-xs);
-  }
-
-  [part='description'] {
-    line-height: var(--lumo-line-height-s);
-    color: var(--lumo-tint-70pct);
-    margin: 0.5em 0 0;
-  }
-
-  [part='content'] {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-  }
-
-  [part='card'] {
-    width: calc(var(--lumo-size-m) * 10);
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-    border-radius: var(--lumo-border-radius-l);
-    box-shadow: var(--lumo-box-shadow-s);
-    margin: var(--lumo-space-s);
-    height: auto;
-  }
-
-  ::slotted(vaadin-login-form-wrapper) {
-    min-height: 100%;
-    max-width: 100%;
-  }
-
-  /* Small screen */
-  @media only screen and (max-width: 500px) {
-    [part='overlay'],
-    [part='content'] {
-      height: 100%;
-    }
-
-    [part='content'] {
-      min-height: 100%;
-      background: var(--lumo-base-color);
-      align-items: flex-start;
-    }
-
-    [part='card'],
-    [part='overlay'] {
-      width: 100%;
-      border-radius: 0;
-      box-shadow: none;
-      margin: 0;
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='brand'] {
-      padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
-    }
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    [part='card'] {
-      flex-direction: row;
-      align-items: stretch;
-      max-width: calc(var(--lumo-size-m) * 16);
-      width: 100%;
-    }
-
-    [part='brand'],
-    [part='form-wrapper'] {
-      flex: auto;
-      flex-basis: 0;
-      box-sizing: border-box;
-    }
-
-    [part='brand'] {
-      justify-content: flex-start;
-    }
-
-    [part='form-wrapper'] {
-      padding: var(--lumo-space-l);
-      overflow: auto;
-    }
-
-    ::slotted(vaadin-login-form-wrapper) {
-      flex: 1;
-      padding: 2px;
-    }
-  }
-
-  /* Landscape really small screen */
-  @media only screen and (max-height: 500px) and (min-width: 600px) and (orientation: landscape),
-    only screen and (max-width: 600px) and (min-width: 600px) and (orientation: landscape) {
-    [part='content'] {
-      height: 100vh;
-    }
-
-    [part='card'] {
-      margin: 0;
-      width: 100%;
-      max-width: none;
-      height: 100%;
-      flex: auto;
-      border-radius: 0;
-      box-shadow: none;
-    }
-
-    [part='form-wrapper'] {
-      height: 100%;
-      overflow: auto;
-    }
-  }
-
-  /* Handle iPhone X notch */
-  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
-    [part='card'] {
-      padding-right: env(safe-area-inset-right);
-      padding-left: env(safe-area-inset-left);
-    }
-
-    [part='brand'] {
-      margin-left: calc(env(safe-area-inset-left) * -1);
-      padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
-    }
-
-    /* RTL styles */
-    :host([dir='rtl']) [part='card'] {
-      padding-left: env(safe-area-inset-right);
-      padding-right: env(safe-area-inset-left);
-    }
-
-    :host([dir='rtl']) [part='brand'] {
-      margin-right: calc(env(safe-area-inset-left) * -1);
-      padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
-    }
-  }
-`;
-
-registerStyles('vaadin-login-overlay-wrapper', [overlay, loginOverlayWrapper], {
-  moduleId: 'lumo-login-overlay-wrapper',
-});

package/theme/lumo/vaadin-login-overlay.d.ts

@@ -1,6 +0,0 @@
-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-styles.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';

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

@@ -1,6 +0,0 @@
-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-styles.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';