@vaadin/login 24.7.0-rc1 → 24.8.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.7.0-rc1",
+  "version": "24.8.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,20 +37,20 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.7.0-rc1",
-    "@vaadin/component-base": "24.7.0-rc1",
-    "@vaadin/overlay": "24.7.0-rc1",
-    "@vaadin/password-field": "24.7.0-rc1",
-    "@vaadin/text-field": "24.7.0-rc1",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-rc1",
-    "@vaadin/vaadin-material-styles": "24.7.0-rc1",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-rc1",
+    "@vaadin/button": "24.8.0-alpha1",
+    "@vaadin/component-base": "24.8.0-alpha1",
+    "@vaadin/overlay": "24.8.0-alpha1",
+    "@vaadin/password-field": "24.8.0-alpha1",
+    "@vaadin/text-field": "24.8.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-rc1",
-    "@vaadin/checkbox": "24.7.0-rc1",
-    "@vaadin/test-runner-commands": "24.7.0-rc1",
+    "@vaadin/chai-plugins": "24.8.0-alpha1",
+    "@vaadin/checkbox": "24.8.0-alpha1",
+    "@vaadin/test-runner-commands": "24.8.0-alpha1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -58,5 +58,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "28f6d361ebf39070c0961cee75ee6c14089109b2"
+  "gitHead": "dfec8767c5d1c343ae689c93429c3364f4182f76"
 }

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

@@ -49,15 +49,15 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
         id="vaadinLoginFormWrapper"
         theme="${ifDefined(this._theme)}"
         .error="${this.error}"
-        .i18n="${this.i18n}"
+        .i18n="${this.__effectiveI18n}"
         .headingLevel="${this.headingLevel}"
       >
         <form method="POST" action="${ifDefined(this.action)}" @formdata="${this._onFormData}" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field
             name="username"
-            .label="${this.i18n.form.username}"
-            .errorMessage="${this.i18n.errorMessage.username}"
+            .label="${this.__effectiveI18n.form.username}"
+            .errorMessage="${this.__effectiveI18n.errorMessage.username}"
             id="vaadinLoginUsername"
             required
             @keydown="${this._handleInputKeydown}"
@@ -72,8 +72,8 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
 
           <vaadin-password-field
             name="password"
-            .label="${this.i18n.form.password}"
-            .errorMessage="${this.i18n.errorMessage.password}"
+            .label="${this.__effectiveI18n.form.password}"
+            .errorMessage="${this.__effectiveI18n.errorMessage.password}"
             id="vaadinLoginPassword"
             required
             @keydown="${this._handleInputKeydown}"
@@ -91,7 +91,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
           @click="${this.submit}"
           .disabled="${this.disabled}"
         >
-          ${this.i18n.form.submit}
+          ${this.__effectiveI18n.form.submit}
         </vaadin-button>
 
         <vaadin-button
@@ -100,7 +100,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
           @click="${this._onForgotPasswordClick}"
           ?hidden="${this.noForgotPassword}"
         >
-          ${this.i18n.form.forgotPassword}
+          ${this.__effectiveI18n.form.forgotPassword}
         </vaadin-button>
       </vaadin-login-form-wrapper>
     `;

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

@@ -53,7 +53,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitM
           .noAutofocus="${this.noAutofocus}"
           .noForgotPassword="${this.noForgotPassword}"
           .headingLevel="${this.__computeHeadingLevel(this.headingLevel)}"
-          .i18n="${this.i18n}"
+          .i18n="${this.__effectiveI18n}"
           @login="${this._retargetEvent}"
           @forgot-password="${this._retargetEvent}"
           @disabled-changed="${this._onDisabledChanged}"

package/src/vaadin-login-form.js

@@ -65,15 +65,15 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
         id="vaadinLoginFormWrapper"
         theme$="[[_theme]]"
         error="[[error]]"
-        i18n="[[i18n]]"
+        i18n="[[__effectiveI18n]]"
         heading-level="[[headingLevel]]"
       >
         <form method="POST" action$="[[action]]" on-formdata="_onFormData" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field
             name="username"
-            label="[[i18n.form.username]]"
-            error-message="[[i18n.errorMessage.username]]"
+            label="[[__effectiveI18n.form.username]]"
+            error-message="[[__effectiveI18n.errorMessage.username]]"
             id="vaadinLoginUsername"
             required
             on-keydown="_handleInputKeydown"
@@ -88,8 +88,8 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
 
           <vaadin-password-field
             name="password"
-            label="[[i18n.form.password]]"
-            error-message="[[i18n.errorMessage.password]]"
+            label="[[__effectiveI18n.form.password]]"
+            error-message="[[__effectiveI18n.errorMessage.password]]"
             id="vaadinLoginPassword"
             required
             on-keydown="_handleInputKeydown"
@@ -102,7 +102,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
         </form>
 
         <vaadin-button slot="submit" theme="primary contained submit" on-click="submit" disabled$="[[disabled]]">
-          [[i18n.form.submit]]
+          [[__effectiveI18n.form.submit]]
         </vaadin-button>
 
         <vaadin-button
@@ -111,7 +111,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
           on-click="_onForgotPasswordClick"
           hidden$="[[noForgotPassword]]"
         >
-          [[i18n.form.forgotPassword]]
+          [[__effectiveI18n.form.forgotPassword]]
         </vaadin-button>
       </vaadin-login-form-wrapper>
     `;

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

@@ -4,8 +4,9 @@
  * 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 { PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface LoginI18n {
+export type LoginI18n = PartialI18n<{
   form: {
     title: string;
     username: string;
@@ -24,7 +25,7 @@ export interface LoginI18n {
     description?: string;
   };
   additionalInformation?: string;
-}
+}>;
 
 export declare function LoginMixin<T extends Constructor<HTMLElement>>(base: T): Constructor<LoginMixinClass> & T;
 
@@ -61,9 +62,9 @@ export declare class LoginMixinClass {
   noAutofocus: boolean;
 
   /**
-   * The object used to localize this component.
-   * For changing the default localization, change the entire
-   * _i18n_ object or just the property you want to modify.
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following JSON structure (by default it doesn't include `additionalInformation`
    * and `header` sections, `header` can be added to override `title` and `description` properties

package/src/vaadin-login-mixin.js

@@ -3,12 +3,30 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
+
+const DEFAULT_I18N = {
+  form: {
+    title: 'Log in',
+    username: 'Username',
+    password: 'Password',
+    submit: 'Log in',
+    forgotPassword: 'Forgot password',
+  },
+  errorMessage: {
+    title: 'Incorrect username or password',
+    message: 'Check that you have entered the correct username and password and try again.',
+    username: 'Username is required',
+    password: 'Password is required',
+  },
+};
 
 /**
+ * @mixes LoginMixin
  * @polymerMixin
  */
 export const LoginMixin = (superClass) =>
-  class LoginMixin extends superClass {
+  class LoginMixin extends I18nMixin(DEFAULT_I18N, superClass) {
     /**
      * Fired when user clicks on the "Forgot password" button.
      *
@@ -78,62 +96,6 @@ export const LoginMixin = (superClass) =>
           value: false,
         },
 
-        /**
-         * The object used to localize this component.
-         * For changing the default localization, change the entire
-         * _i18n_ object or just the property you want to modify.
-         *
-         * The object has the following JSON structure (by default it doesn't include `additionalInformation`
-         * and `header` sections, `header` can be added to override `title` and `description` properties
-         * in `vaadin-login-overlay`):
-         *
-         * ```
-         * {
-         *   header: {
-         *     title: 'App name',
-         *     description: 'Inspiring application description'
-         *   },
-         *   form: {
-         *     title: 'Log in',
-         *     username: 'Username',
-         *     password: 'Password',
-         *     submit: 'Log in',
-         *     forgotPassword: 'Forgot password'
-         *   },
-         *   errorMessage: {
-         *     title: 'Incorrect username or password',
-         *     message: 'Check that you have entered the correct username and password and try again.',
-         *     username: 'Username is required',
-         *     password: 'Password is required'
-         *   },
-         *   additionalInformation: 'In case you need to provide some additional info for the user.'
-         * }
-         * ```
-         *
-         * @type {!LoginI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value() {
-            return {
-              form: {
-                title: 'Log in',
-                username: 'Username',
-                password: 'Password',
-                submit: 'Log in',
-                forgotPassword: 'Forgot password',
-              },
-              errorMessage: {
-                title: 'Incorrect username or password',
-                message: 'Check that you have entered the correct username and password and try again.',
-                username: 'Username is required',
-                password: 'Password is required',
-              },
-            };
-          },
-        },
-
         /**
          * Sets the root heading level (`aria-level`) for the heading hierarchy. Default value: 1.
          * Child headings automatically increment from this base level i.e. standalone login form
@@ -157,4 +119,45 @@ export const LoginMixin = (superClass) =>
         },
       };
     }
+
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following JSON structure (by default it doesn't include `additionalInformation`
+     * and `header` sections, `header` can be added to override `title` and `description` properties
+     * in `vaadin-login-overlay`):
+     *
+     * ```
+     * {
+     *   header: {
+     *     title: 'App name',
+     *     description: 'Inspiring application description'
+     *   },
+     *   form: {
+     *     title: 'Log in',
+     *     username: 'Username',
+     *     password: 'Password',
+     *     submit: 'Log in',
+     *     forgotPassword: 'Forgot password'
+     *   },
+     *   errorMessage: {
+     *     title: 'Incorrect username or password',
+     *     message: 'Check that you have entered the correct username and password and try again.',
+     *     username: 'Username is required',
+     *     password: 'Password is required'
+     *   },
+     *   additionalInformation: 'In case you need to provide some additional info for the user.'
+     * }
+     * ```
+     * @return {!LoginI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
   };

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

@@ -47,7 +47,7 @@ export const LoginOverlayMixin = (superClass) =>
     }
 
     static get observers() {
-      return ['__i18nChanged(i18n)'];
+      return ['__i18nChanged(__effectiveI18n)'];
     }
 
     /** @protected */
@@ -77,8 +77,8 @@ export const LoginOverlayMixin = (superClass) =>
     }
 
     /** @private */
-    __i18nChanged(i18n) {
-      const header = i18n && i18n.header;
+    __i18nChanged(effectiveI18n) {
+      const header = effectiveI18n && effectiveI18n.header;
       if (!header) {
         return;
       }

package/src/vaadin-login-overlay.js

@@ -75,7 +75,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
           heading-level="[[__computeHeadingLevel(headingLevel)]]"
           no-autofocus="[[noAutofocus]]"
           no-forgot-password="[[noForgotPassword]]"
-          i18n="{{i18n}}"
+          i18n="{{__effectiveI18n}}"
           on-login="_retargetEvent"
           on-forgot-password="_retargetEvent"
         ></vaadin-login-form>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.7.0-rc1",
+  "version": "24.8.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -81,6 +81,15 @@
           ],
           "js": {
             "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```",
+                "value": {
+                  "type": [
+                    "LoginI18n"
+                  ]
+                }
+              },
               {
                 "name": "action",
                 "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
@@ -127,15 +136,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\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```",
-                "value": {
-                  "type": [
-                    "LoginI18n"
-                  ]
-                }
-              },
               {
                 "name": "headingLevel",
                 "description": "Sets the root heading level (`aria-level`) for the heading hierarchy. Default value: 1.\nChild headings automatically increment from this base level i.e. standalone login form\nrenders its title as `<h1>`, whereas the form in the overlay uses `<h2>`, as the `<h1>`\nelement is used by the overlay's own title.",
@@ -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.7.0-rc1/#/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/24.8.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",
@@ -281,6 +281,15 @@
           ],
           "js": {
             "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```",
+                "value": {
+                  "type": [
+                    "LoginI18n"
+                  ]
+                }
+              },
               {
                 "name": "action",
                 "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
@@ -327,15 +336,6 @@
                   ]
                 }
               },
-              {
-                "name": "i18n",
-                "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\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```",
-                "value": {
-                  "type": [
-                    "LoginI18n"
-                  ]
-                }
-              },
               {
                 "name": "headingLevel",
                 "description": "Sets the root heading level (`aria-level`) for the heading hierarchy. Default value: 1.\nChild headings automatically increment from this base level i.e. standalone login form\nrenders its title as `<h1>`, whereas the form in the overlay uses `<h2>`, as the `<h1>`\nelement is used by the overlay's own title.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.7.0-rc1",
+  "version": "24.8.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -48,15 +48,15 @@
               }
             },
             {
-              "name": ".action",
-              "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
+              "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```",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\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```",
+              "name": ".action",
+              "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
               "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/24.7.0-rc1/#/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/24.8.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {
@@ -139,15 +139,15 @@
               }
             },
             {
-              "name": ".action",
-              "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
+              "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```",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".i18n",
-              "description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\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```",
+              "name": ".action",
+              "description": "If set, a synchronous POST call will be fired to the path defined.\nThe `login` event is also dispatched, so `event.preventDefault()` can be called to prevent the POST call.",
               "value": {
                 "kind": "expression"
               }