@vaadin/login 24.8.0-alpha9 → 25.0.0-alpha2

package/README.md

@@ -26,32 +26,6 @@ Once installed, import the component in your application:
 import '@vaadin/login';
 ```
 
-## Themes
-
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
-The [main entrypoint](https://github.com/vaadin/web-components/blob/main/packages/list-box/vaadin-list-box.js) of the package uses Lumo theme.
-
-To use the Material theme, import the components from the `theme/material` folder:
-
-```js
-import '@vaadin/login/theme/material/vaadin-login-overlay.js';
-import '@vaadin/login/theme/material/vaadin-login-form.js';
-```
-
-You can also import the Lumo version of the components explicitly:
-
-```js
-import '@vaadin/login/theme/lumo/vaadin-login-overlay.js';
-import '@vaadin/login/theme/lumo/vaadin-login-form.js';
-```
-
-Finally, you can import the un-themed components from the `src` folder to get a minimal starting point:
-
-```js
-import '@vaadin/login/src/vaadin-login-overlay.js';
-import '@vaadin/login/src/vaadin-login-form.js';
-```
-
 ## Contributing
 
 Read the [contributing guide](https://vaadin.com/docs/latest/contributing) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "publishConfig": {
     "access": "public"
   },
@@ -31,32 +31,29 @@
     "Vaadin",
     "vaadin-login",
     "web-components",
-    "web-component",
-    "polymer"
+    "web-component"
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/overlay": "24.8.0-alpha9",
-    "@vaadin/password-field": "24.8.0-alpha9",
-    "@vaadin/text-field": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/button": "25.0.0-alpha2",
+    "@vaadin/component-base": "25.0.0-alpha2",
+    "@vaadin/overlay": "25.0.0-alpha2",
+    "@vaadin/password-field": "25.0.0-alpha2",
+    "@vaadin/text-field": "25.0.0-alpha2",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/checkbox": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
-    "@vaadin/testing-helpers": "^1.1.0",
+    "@vaadin/chai-plugins": "25.0.0-alpha2",
+    "@vaadin/checkbox": "25.0.0-alpha2",
+    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
 }

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

@@ -3,15 +3,12 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { loginFormWrapperStyles } from './vaadin-login-form-wrapper-styles.js';
 
-registerStyles('vaadin-login-form-wrapper', loginFormWrapperStyles, {
-  moduleId: 'vaadin-login-form-wrapper-styles',
-});
-
 /**
  * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
  *
@@ -19,36 +16,15 @@ registerStyles('vaadin-login-form-wrapper', loginFormWrapperStyles, {
  * @mixes ThemableMixin
  * @private
  */
-class LoginFormWrapper extends ThemableMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <section part="form">
-        <div part="form-title" part="form-title" role="heading" aria-level$="[[headingLevel]]">[[i18n.form.title]]</div>
-        <div part="error-message" hidden$="[[!error]]">
-          <strong part="error-message-title">[[i18n.errorMessage.title]]</strong>
-          <p part="error-message-description">[[i18n.errorMessage.message]]</p>
-        </div>
-
-        <slot name="form"></slot>
-
-        <slot name="custom-form-area"></slot>
-
-        <slot name="submit"></slot>
-
-        <slot name="forgot-password"></slot>
-
-        <div part="footer">
-          <slot name="footer"></slot>
-          <p>[[i18n.additionalInformation]]</p>
-        </div>
-      </section>
-    `;
-  }
-
+class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
   static get is() {
     return 'vaadin-login-form-wrapper';
   }
 
+  static get styles() {
+    return loginFormWrapperStyles;
+  }
+
   static get properties() {
     return {
       /**
@@ -77,6 +53,32 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
       },
     };
   }
+
+  /** @protected */
+  render() {
+    return html`
+      <section part="form">
+        <div part="form-title" role="heading" aria-level="${this.headingLevel}">${this.i18n.form.title}</div>
+        <div part="error-message" ?hidden="${!this.error}">
+          <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
+          <p part="error-message-description">${this.i18n.errorMessage.message}</p>
+        </div>
+
+        <slot name="form"></slot>
+
+        <slot name="custom-form-area"></slot>
+
+        <slot name="submit"></slot>
+
+        <slot name="forgot-password"></slot>
+
+        <div part="footer">
+          <slot name="footer"></slot>
+          <p>${this.i18n.additionalInformation}</p>
+        </div>
+      </section>
+    `;
+  }
 }
 
 defineCustomElement(LoginFormWrapper);

package/src/vaadin-login-form.js

@@ -7,9 +7,11 @@ 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 { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { 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';
 
@@ -53,8 +55,21 @@ import { LoginFormMixin } from './vaadin-login-form-mixin.js';
  * @mixes ThemableMixin
  * @mixes LoginFormMixin
  */
-class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
+class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-login-form';
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  createRenderRoot() {
+    return this;
+  }
+
+  /** @protected */
+  render() {
     return html`
       <style>
         vaadin-login-form-wrapper > form > * {
@@ -63,72 +78,59 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
       </style>
       <vaadin-login-form-wrapper
         id="vaadinLoginFormWrapper"
-        theme$="[[_theme]]"
-        error="[[error]]"
-        i18n="[[__effectiveI18n]]"
-        heading-level="[[headingLevel]]"
+        theme="${ifDefined(this._theme)}"
+        .error="${this.error}"
+        .i18n="${this.__effectiveI18n}"
+        .headingLevel="${this.headingLevel}"
       >
-        <form method="POST" action$="[[action]]" on-formdata="_onFormData" slot="form">
+        <form method="POST" action="${ifDefined(this.action)}" @formdata="${this._onFormData}" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field
             name="username"
-            label="[[__effectiveI18n.form.username]]"
-            error-message="[[__effectiveI18n.errorMessage.username]]"
+            .label="${this.__effectiveI18n.form.username}"
+            .errorMessage="${this.__effectiveI18n.errorMessage.username}"
             id="vaadinLoginUsername"
             required
-            on-keydown="_handleInputKeydown"
+            @keydown="${this._handleInputKeydown}"
             autocapitalize="none"
             autocorrect="off"
             spellcheck="false"
             autocomplete="username"
             manual-validation
           >
-            <input type="text" slot="input" on-keyup="_handleInputKeyup" />
+            <input type="text" slot="input" @keyup="${this._handleInputKeyup}" />
           </vaadin-text-field>
 
           <vaadin-password-field
             name="password"
-            label="[[__effectiveI18n.form.password]]"
-            error-message="[[__effectiveI18n.errorMessage.password]]"
+            .label="${this.__effectiveI18n.form.password}"
+            .errorMessage="${this.__effectiveI18n.errorMessage.password}"
             id="vaadinLoginPassword"
             required
-            on-keydown="_handleInputKeydown"
+            @keydown="${this._handleInputKeydown}"
             spellcheck="false"
             autocomplete="current-password"
             manual-validation
           >
-            <input type="password" slot="input" on-keyup="_handleInputKeyup" />
+            <input type="password" slot="input" @keyup="${this._handleInputKeyup}" />
           </vaadin-password-field>
         </form>
 
-        <vaadin-button slot="submit" theme="primary contained submit" on-click="submit" disabled$="[[disabled]]">
-          [[__effectiveI18n.form.submit]]
+        <vaadin-button slot="submit" theme="primary submit" @click="${this.submit}" .disabled="${this.disabled}">
+          ${this.__effectiveI18n.form.submit}
         </vaadin-button>
 
         <vaadin-button
           slot="forgot-password"
           theme="tertiary small"
-          on-click="_onForgotPasswordClick"
-          hidden$="[[noForgotPassword]]"
+          @click="${this._onForgotPasswordClick}"
+          ?hidden="${this.noForgotPassword}"
         >
-          [[__effectiveI18n.form.forgotPassword]]
+          ${this.__effectiveI18n.form.forgotPassword}
         </vaadin-button>
       </vaadin-login-form-wrapper>
     `;
   }
-
-  static get is() {
-    return 'vaadin-login-form';
-  }
-
-  /**
-   * @param {StampedTemplate} dom
-   * @return {null}
-   * @protected
-   */
-  _attachDom(dom) {
-    this.appendChild(dom);
-  }
 }
 
 defineCustomElement(LoginForm);

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

@@ -32,6 +32,7 @@ export const LoginOverlayMixin = (superClass) =>
         opened: {
           type: Boolean,
           value: false,
+          sync: true,
           observer: '_onOpenedChange',
         },
 

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

@@ -3,17 +3,14 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
-import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-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';
 
-registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapperStyles], {
-  moduleId: 'vaadin-login-overlay-wrapper-styles',
-});
-
 /**
  * An element used internally by `<vaadin-login-overlay>`. Not intended to be used separately.
  *
@@ -22,22 +19,27 @@ registerStyles('vaadin-login-overlay-wrapper', [overlayStyles, loginOverlayWrapp
  * @mixes ThemableMixin
  * @private
  */
-class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolymerElement)) {
+class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(PolylitMixin(LitElement))) {
   static get is() {
     return 'vaadin-login-overlay-wrapper';
   }
 
-  static get template() {
+  static get styles() {
+    return [overlayStyles, loginOverlayWrapperStyles];
+  }
+
+  /** @protected */
+  render() {
     return html`
-      <div id="backdrop" part="backdrop" hidden$="[[!withBackdrop]]"></div>
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
       <div part="overlay" id="overlay" tabindex="0">
         <div part="content" id="content">
           <section part="card">
             <div part="brand">
               <slot name="title">
-                <div part="title" role="heading" aria-level$="[[headingLevel]]">[[title]]</div>
+                <div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
               </slot>
-              <p part="description">[[description]]</p>
+              <p part="description">${this.description}</p>
             </div>
             <div part="form">
               <slot></slot>

package/src/vaadin-login-overlay.js

@@ -5,9 +5,11 @@
  */
 import './vaadin-login-form.js';
 import './vaadin-login-overlay-wrapper.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { 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 { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
 
@@ -50,34 +52,41 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
  * @mixes ThemableMixin
  * @mixes LoginOverlayMixin
  */
-class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
+class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-login-overlay';
+  }
+
+  /** @protected */
+  render() {
     return html`
       <vaadin-login-overlay-wrapper
         id="vaadinLoginOverlayWrapper"
-        opened="{{opened}}"
+        .opened="${this.opened}"
+        .title="${this.title}"
+        .description="${this.description}"
+        .headingLevel="${this.headingLevel}"
         role="dialog"
         focus-trap
         with-backdrop
-        title="[[title]]"
-        description="[[description]]"
-        heading-level="[[headingLevel]]"
-        theme$="[[_theme]]"
-        on-vaadin-overlay-escape-press="_preventClosingLogin"
-        on-vaadin-overlay-outside-click="_preventClosingLogin"
+        theme="${ifDefined(this._theme)}"
+        @vaadin-overlay-escape-press="${this._preventClosingLogin}"
+        @vaadin-overlay-outside-click="${this._preventClosingLogin}"
+        @opened-changed="${this._onOpenedChanged}"
       >
         <vaadin-login-form
           theme="with-overlay"
           id="vaadinLoginForm"
-          action="[[action]]"
-          disabled="{{disabled}}"
-          error="{{error}}"
-          heading-level="[[__computeHeadingLevel(headingLevel)]]"
-          no-autofocus="[[noAutofocus]]"
-          no-forgot-password="[[noForgotPassword]]"
-          i18n="{{__effectiveI18n}}"
-          on-login="_retargetEvent"
-          on-forgot-password="_retargetEvent"
+          .action="${this.action}"
+          .disabled="${this.disabled}"
+          .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>
       </vaadin-login-overlay-wrapper>
 
@@ -88,8 +97,14 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
     `;
   }
 
-  static get is() {
-    return 'vaadin-login-overlay';
+  /** @private */
+  _onOpenedChanged(event) {
+    this.opened = event.detail.value;
+  }
+
+  /** @private */
+  _onDisabledChanged(event) {
+    this.disabled = event.detail.value;
   }
 }
 

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

@@ -1,2 +1 @@
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import './vaadin-login-form-wrapper-styles.js';

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

@@ -1,5 +1,4 @@
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import './vaadin-login-form-wrapper-styles.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';

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

@@ -1,6 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-login-form.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 +1,6 @@
+import '@vaadin/button/theme/lumo/vaadin-button.js';
 import '@vaadin/text-field/theme/lumo/vaadin-text-field.js';
 import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import './vaadin-login-form.js';
+import './vaadin-login-form-wrapper-styles.js';
 import './vaadin-login-overlay-styles.js';
 import '../../src/vaadin-login-overlay.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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/24.8.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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.",
           "attributes": [
             {
               "name": "action",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.8.0-alpha9",
+  "version": "25.0.0-alpha2",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -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/24.8.0-alpha9/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/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.",
           "extension": true,
           "attributes": [
             {

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

@@ -1,86 +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 { html, LitElement } from 'lit';
-import { defineCustomElement } from '@vaadin/component-base/src/define.js';
-import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { loginFormWrapperStyles } from './vaadin-login-form-wrapper-styles.js';
-
-/**
- * An element used internally by `<vaadin-login-form>`. Not intended to be used separately.
- *
- * @extends HTMLElement
- * @mixes ThemableMixin
- * @private
- */
-class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
-  static get is() {
-    return 'vaadin-login-form-wrapper';
-  }
-
-  static get styles() {
-    return loginFormWrapperStyles;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * If set, the error message is shown. The message is hidden by default.
-       * When set, it changes the disabled state of the submit button.
-       * @type {boolean}
-       */
-      error: {
-        type: Boolean,
-        value: false,
-        reflectToAttribute: true,
-      },
-
-      /**
-       * The object used to localize this component.
-       */
-      i18n: {
-        type: Object,
-      },
-
-      /**
-       * Used to customize the `aria-level` attribute on the heading element.
-       */
-      headingLevel: {
-        type: Number,
-      },
-    };
-  }
-
-  /** @protected */
-  render() {
-    return html`
-      <section part="form">
-        <div part="form-title" role="heading" aria-level="${this.headingLevel}">${this.i18n.form.title}</div>
-        <div part="error-message" ?hidden="${!this.error}">
-          <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
-          <p part="error-message-description">${this.i18n.errorMessage.message}</p>
-        </div>
-
-        <slot name="form"></slot>
-
-        <slot name="custom-form-area"></slot>
-
-        <slot name="submit"></slot>
-
-        <slot name="forgot-password"></slot>
-
-        <div part="footer">
-          <slot name="footer"></slot>
-          <p>${this.i18n.additionalInformation}</p>
-        </div>
-      </section>
-    `;
-  }
-}
-
-defineCustomElement(LoginFormWrapper);
-
-export { LoginFormWrapper };

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

@@ -1,6 +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/
- */
-export * from './vaadin-login-form.js';