@vaadin/login 25.0.0-alpha2 → 25.0.0-alpha21

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha21",
   "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",
@@ -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"
@@ -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-alpha2/#/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",
@@ -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-alpha2",
+  "version": "25.0.0-alpha21",
   "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": [
             {
@@ -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"
               }
@@ -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-alpha2/#/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": [
             {
@@ -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/vaadin-login-form-wrapper-styles.js

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

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

@@ -1,78 +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 { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
-import { SlotObserver } from '@vaadin/component-base/src/slot-observer.js';
-import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
-import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
-
-/**
- * @polymerMixin
- * @mixes DirMixin
- * @mixes OverlayMixin
- */
-export const LoginOverlayWrapperMixin = (superClass) =>
-  class LoginOverlayWrapperMixin extends OverlayMixin(DirMixin(superClass)) {
-    static get properties() {
-      return {
-        /**
-         * Title of the application.
-         */
-        title: {
-          type: String,
-          observer: '_titleChanged',
-        },
-
-        /**
-         * Application description. Displayed under the title.
-         */
-        description: {
-          type: String,
-        },
-
-        /**
-         * Used to customize the `aria-level` attribute on the heading element.
-         */
-        headingLevel: {
-          type: Number,
-        },
-      };
-    }
-
-    /** @protected */
-    ready() {
-      super.ready();
-
-      // Use slot observer instead of slot controller since the latter
-      // does not work well with teleporting (it removes custom title).
-      const slot = this.shadowRoot.querySelector('slot[name="title"]');
-      this._titleSlotObserver = new SlotObserver(slot, () => {
-        const title = slot.assignedElements({ flatten: true })[0];
-        if (!title) {
-          return;
-        }
-
-        // Only set ID on the custom slotted title and link it using
-        // aria-labelledby as the default title is in the shadow DOM.
-        if (title.getAttribute('part') === 'title') {
-          this.setAttribute('aria-label', this.title);
-          this.removeAttribute('aria-labelledby');
-        } else {
-          if (!title.id) {
-            title.id = `login-overlay-title-${generateUniqueId()}`;
-          }
-          this.removeAttribute('aria-label');
-          this.setAttribute('aria-labelledby', title.id);
-        }
-      });
-    }
-
-    /** @private */
-    _titleChanged(title) {
-      if (title && this.hasAttribute('aria-label')) {
-        this.setAttribute('aria-label', title);
-      }
-    }
-  };

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

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

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

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

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

@@ -1,94 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const loginFormWrapper = css`
-  :host {
-    max-width: calc(var(--lumo-size-m) * 10);
-    background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-  }
-
-  [part='form'] {
-    padding: var(--lumo-space-l);
-  }
-
-  [part='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', [color, typography, 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 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';

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

@@ -1,187 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
-import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-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);
-  }
-
-  [part='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-bottom: 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;
-  }
-
-  /* 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'] {
-      flex: auto;
-      flex-basis: 0;
-      box-sizing: border-box;
-    }
-
-    [part='brand'] {
-      justify-content: flex-start;
-    }
-
-    [part='form'] {
-      padding: var(--lumo-space-l);
-      overflow: auto;
-    }
-  }
-
-  /* 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'] {
-      height: 100%;
-      overflow: auto;
-      -webkit-overflow-scrolling: touch;
-    }
-  }
-
-  /* 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', [color, typography, overlay, loginOverlayWrapper], {
-  moduleId: 'lumo-login-overlay-wrapper',
-});
-
-const loginFormWrapper = css`
-  :host([theme~='with-overlay']) {
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    max-width: 100%;
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    :host([theme~='with-overlay']) [part='form'] {
-      height: 100%;
-      -webkit-overflow-scrolling: touch;
-      flex: 1;
-      padding: 2px;
-    }
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', [loginFormWrapper], {
-  moduleId: 'lumo-login-overlay',
-});

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';