@vaadin/login 24.7.0-alpha2 → 24.7.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -37,25 +37,25 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.7.0-alpha2",
-    "@vaadin/component-base": "24.7.0-alpha2",
-    "@vaadin/overlay": "24.7.0-alpha2",
-    "@vaadin/password-field": "24.7.0-alpha2",
-    "@vaadin/text-field": "24.7.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha2",
+    "@vaadin/button": "24.7.0-alpha4",
+    "@vaadin/component-base": "24.7.0-alpha4",
+    "@vaadin/overlay": "24.7.0-alpha4",
+    "@vaadin/password-field": "24.7.0-alpha4",
+    "@vaadin/text-field": "24.7.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-material-styles": "24.7.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha2",
-    "@vaadin/checkbox": "24.7.0-alpha2",
-    "@vaadin/testing-helpers": "^1.0.0",
+    "@vaadin/chai-plugins": "24.7.0-alpha4",
+    "@vaadin/checkbox": "24.7.0-alpha4",
+    "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "e2523f9b4abc5a9586fb758166f823dc40c399dd"
+  "gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -44,6 +44,13 @@ class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
       i18n: {
         type: Object,
       },
+
+      /**
+       * Used to customize the `aria-level` attribute on the heading element.
+       */
+      headingLevel: {
+        type: Number,
+      },
     };
   }
 
@@ -51,9 +58,9 @@ class LoginFormWrapper extends ThemableMixin(PolylitMixin(LitElement)) {
   render() {
     return html`
       <section part="form">
-        <h2 part="form-title">${this.i18n.form.title}</h2>
+        <div part="form-title" role="heading" aria-level="${this.headingLevel}">${this.i18n.form.title}</div>
         <div part="error-message" ?hidden="${!this.error}">
-          <h5 part="error-message-title">${this.i18n.errorMessage.title}</h5>
+          <strong part="error-message-title">${this.i18n.errorMessage.title}</strong>
           <p part="error-message-description">${this.i18n.errorMessage.message}</p>
         </div>
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-lit-button.js';
@@ -50,6 +50,7 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolylitMixin(L
         theme="${ifDefined(this._theme)}"
         .error="${this.error}"
         .i18n="${this.i18n}"
+        .headingLevel="${this.headingLevel}"
       >
         <form method="POST" action="${ifDefined(this.action)}" @formdata="${this._onFormData}" slot="form">
           <input id="csrf" type="hidden" />

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -35,7 +35,7 @@ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(Polylit
           <section part="card">
             <div part="brand">
               <slot name="title">
-                <h1 part="title">${this.title}</h1>
+                <div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
               </slot>
               <p part="description">${this.description}</p>
             </div>

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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-overlay.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-lit-login-form.js';
@@ -35,6 +35,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitM
         .opened="${this.opened}"
         .title="${this.title}"
         .description="${this.description}"
+        .headingLevel="${this.headingLevel}"
         role="dialog"
         focus-trap
         with-backdrop
@@ -51,6 +52,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolylitM
           .error="${this.error}"
           .noAutofocus="${this.noAutofocus}"
           .noForgotPassword="${this.noForgotPassword}"
+          .headingLevel="${this.__computeHeadingLevel(this.headingLevel)}"
           .i18n="${this.i18n}"
           @login="${this._retargetEvent}"
           @forgot-password="${this._retargetEvent}"

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { LoginMixin } from './vaadin-login-mixin.js';

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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -23,9 +23,9 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
   static get template() {
     return html`
       <section part="form">
-        <h2 part="form-title">[[i18n.form.title]]</h2>
+        <div part="form-title" part="form-title" role="heading" aria-level$="[[headingLevel]]">[[i18n.form.title]]</div>
         <div part="error-message" hidden$="[[!error]]">
-          <h5 part="error-message-title">[[i18n.errorMessage.title]]</h5>
+          <strong part="error-message-title">[[i18n.errorMessage.title]]</strong>
           <p part="error-message-description">[[i18n.errorMessage.message]]</p>
         </div>
 
@@ -68,6 +68,13 @@ class LoginFormWrapper extends ThemableMixin(PolymerElement) {
       i18n: {
         type: Object,
       },
+
+      /**
+       * Used to customize the `aria-level` attribute on the heading element.
+       */
+      headingLevel: {
+        type: Number,
+      },
     };
   }
 }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-login-form.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import '@vaadin/button/src/vaadin-button.js';
@@ -61,7 +61,13 @@ class LoginForm extends LoginFormMixin(ElementMixin(ThemableMixin(PolymerElement
           width: 100%;
         }
       </style>
-      <vaadin-login-form-wrapper id="vaadinLoginFormWrapper" theme$="[[_theme]]" error="[[error]]" i18n="[[i18n]]">
+      <vaadin-login-form-wrapper
+        id="vaadinLoginFormWrapper"
+        theme$="[[_theme]]"
+        error="[[error]]"
+        i18n="[[i18n]]"
+        heading-level="[[headingLevel]]"
+      >
         <form method="POST" action$="[[action]]" on-formdata="_onFormData" slot="form">
           <input id="csrf" type="hidden" />
           <vaadin-text-field

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
@@ -93,4 +93,14 @@ export declare class LoginMixinClass {
    * ```
    */
   i18n: LoginI18n;
+
+  /**
+   * 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
+   * renders its title as `<h1>`, whereas the form in the overlay uses `<h2>`, as the `<h1>`
+   * element is used by the overlay's own title.
+   *
+   * @attr {number} heading-level
+   */
+  headingLevel: number;
 }

package/src/vaadin-login-mixin.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 
@@ -134,6 +134,19 @@ export const LoginMixin = (superClass) =>
           },
         },
 
+        /**
+         * 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
+         * renders its title as `<h1>`, whereas the form in the overlay uses `<h2>`, as the `<h1>`
+         * element is used by the overlay's own title.
+         *
+         * @attr {number} heading-level
+         */
+        headingLevel: {
+          type: Number,
+          value: 1,
+        },
+
         /**
          * If set, prevents auto enabling the component when error property is set to true.
          * @private

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
@@ -159,4 +159,9 @@ export const LoginOverlayMixin = (superClass) =>
         this.append(...teleported);
       };
     }
+
+    /** @private */
+    __computeHeadingLevel(headingLevel) {
+      return headingLevel + 1;
+    }
   };

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -31,6 +31,13 @@ export const LoginOverlayWrapperMixin = (superClass) =>
         description: {
           type: String,
         },
+
+        /**
+         * Used to customize the `aria-level` attribute on the heading element.
+         */
+        headingLevel: {
+          type: Number,
+        },
       };
     }
 

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

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

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -28,7 +28,7 @@ export const loginOverlayWrapperStyles = css`
     justify-content: flex-end;
   }
 
-  [part='brand'] h1 {
+  [part='title'] {
     color: inherit;
     margin: 0;
   }

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * 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';
@@ -35,7 +35,7 @@ class LoginOverlayWrapper extends LoginOverlayWrapperMixin(ThemableMixin(Polymer
           <section part="card">
             <div part="brand">
               <slot name="title">
-                <h1 part="title">[[title]]</h1>
+                <div part="title" role="heading" aria-level$="[[headingLevel]]">[[title]]</div>
               </slot>
               <p part="description">[[description]]</p>
             </div>

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/src/vaadin-login-overlay.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2024 Vaadin Ltd.
+ * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './vaadin-login-form.js';
@@ -61,6 +61,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
         with-backdrop
         title="[[title]]"
         description="[[description]]"
+        heading-level="[[headingLevel]]"
         theme$="[[_theme]]"
         on-vaadin-overlay-escape-press="_preventClosingLogin"
         on-vaadin-overlay-outside-click="_preventClosingLogin"
@@ -71,6 +72,7 @@ class LoginOverlay extends LoginOverlayMixin(ElementMixin(ThemableMixin(PolymerE
           action="[[action]]"
           disabled="{{disabled}}"
           error="{{error}}"
+          heading-level="[[__computeHeadingLevel(headingLevel)]]"
           no-autofocus="[[noAutofocus]]"
           no-forgot-password="[[noForgotPassword]]"
           i18n="{{i18n}}"

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

@@ -15,6 +15,10 @@ const loginFormWrapper = css`
 
   [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']) {
@@ -65,8 +69,10 @@ const loginFormWrapper = css`
   }
 
   [part='error-message-title'] {
+    display: block;
     margin: 0 0 0.25em;
     color: inherit;
+    line-height: var(--lumo-line-height-xs);
   }
 
   [part='error-message-description'] {

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

@@ -29,6 +29,12 @@ const loginOverlayWrapper = css`
     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);

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

@@ -19,6 +19,10 @@ const loginFormWrapper = css`
   [part='form-title'] {
     margin-top: calc(var(--material-h3-font-size) - var(--material-h4-font-size));
     font-size: var(--material-h5-font-size);
+    font-weight: 300;
+    line-height: 1.1;
+    letter-spacing: -0.01em;
+    text-indent: -0.07em;
   }
 
   ::slotted([slot='submit']) {
@@ -78,9 +82,12 @@ const loginFormWrapper = css`
     margin-right: calc(2.25rem * -0.95);
   }
 
-  [part='error-message'] h5 {
+  [part='error-message-title'] {
+    display: block;
     margin: 0 0 0.25em;
     color: inherit;
+    line-height: 1.1;
+    text-indent: -0.025em;
   }
 
   [part='error-message'] p {

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

@@ -58,11 +58,14 @@ const loginOverlayWrapper = css`
     min-height: 225px;
   }
 
-  [part='brand'] h1 {
+  [part='title'] {
     color: inherit;
     margin: 0;
     font-weight: 500;
     font-size: 2rem;
+    line-height: 1.1;
+    letter-spacing: -0.015em;
+    text-indent: -0.07em;
   }
 
   [part='form'] {
@@ -91,7 +94,7 @@ const loginOverlayWrapper = css`
       padding: 0 2.5rem 5.5rem 2rem;
     }
 
-    [part='brand'] h1 {
+    [part='title'] {
       font-weight: 500;
       font-size: 1.8rem;
       text-indent: 1rem;
@@ -210,7 +213,7 @@ const loginOverlayWrapper = css`
       box-sizing: border-box;
     }
 
-    [part='brand'] h1 {
+    [part='title'] {
       font-size: 2.5em;
     }
 
@@ -311,7 +314,7 @@ const loginFormWrapper = css`
     padding: 2rem 2.5rem 2rem 1.8rem;
   }
 
-  :host([theme~='with-overlay']) [part='form'] h2 {
+  :host([theme~='with-overlay']) [part='form-title'] {
     text-align: center;
     font-size: 1.8em;
     font-weight: 500;

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -56,6 +56,17 @@
                 ]
               }
             },
+            {
+              "name": "heading-level",
+              "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.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -124,6 +135,17 @@
                     "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.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [
@@ -148,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-alpha2/#/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.7.0-alpha4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "attributes": [
             {
               "name": "action",
@@ -196,6 +218,17 @@
                 ]
               }
             },
+            {
+              "name": "heading-level",
+              "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.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "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.",
@@ -303,6 +336,17 @@
                   ]
                 }
               },
+              {
+                "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.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
               {
                 "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.",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "24.7.0-alpha2",
+  "version": "24.7.0-alpha4",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -61,6 +61,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "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.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@forgot-password",
               "description": "Fired when user clicks on the \"Forgot password\" button.",
@@ -93,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-alpha2/#/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.7.0-alpha4/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
           "extension": true,
           "attributes": [
             {
@@ -145,6 +152,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "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.",
+              "value": {
+                "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.",