@vaadin/login 25.0.0-alpha11 → 25.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -34,26 +34,26 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/button": "25.0.0-alpha11",
-    "@vaadin/component-base": "25.0.0-alpha11",
-    "@vaadin/overlay": "25.0.0-alpha11",
-    "@vaadin/password-field": "25.0.0-alpha11",
-    "@vaadin/text-field": "25.0.0-alpha11",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha11",
+    "@vaadin/button": "25.0.0-alpha13",
+    "@vaadin/component-base": "25.0.0-alpha13",
+    "@vaadin/overlay": "25.0.0-alpha13",
+    "@vaadin/password-field": "25.0.0-alpha13",
+    "@vaadin/text-field": "25.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha13",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/a11y-base": "25.0.0-alpha11",
-    "@vaadin/chai-plugins": "25.0.0-alpha11",
-    "@vaadin/checkbox": "25.0.0-alpha11",
-    "@vaadin/test-runner-commands": "25.0.0-alpha11",
+    "@vaadin/a11y-base": "25.0.0-alpha13",
+    "@vaadin/chai-plugins": "25.0.0-alpha13",
+    "@vaadin/checkbox": "25.0.0-alpha13",
+    "@vaadin/test-runner-commands": "25.0.0-alpha13",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha13",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "abfd315ba5a7484a613e0768635a4e8fe945a44b"
+  "gitHead": "182de596226343392135468f021bbce9e6402011"
 }

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

@@ -13,8 +13,8 @@ export const loginFormWrapperStyles = css`
     display: flex;
     box-sizing: border-box;
     flex-direction: column;
-    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
-    padding: var(--vaadin-login-form-padding, var(--vaadin-padding));
+    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-l));
+    padding: var(--vaadin-login-form-padding, var(--vaadin-padding-l));
     max-width: 100%;
     width: var(--vaadin-login-form-width, 360px);
   }
@@ -26,7 +26,7 @@ export const loginFormWrapperStyles = css`
   ::slotted(form) {
     display: flex;
     flex-direction: column;
-    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-container-block));
+    gap: var(--vaadin-login-form-gap, var(--vaadin-gap-m));
   }
 
   ::slotted([slot='form-title']) {
@@ -44,7 +44,7 @@ export const loginFormWrapperStyles = css`
     color: var(--vaadin-login-form-error-color, var(--vaadin-color));
     font-size: var(--vaadin-login-form-error-font-size, inherit);
     font-weight: var(--vaadin-login-form-error-font-weight, 400);
-    gap: var(--vaadin-login-form-error-gap, 0 var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-login-form-error-gap, 0 var(--vaadin-gap-s));
     grid-template-columns: auto 1fr;
     line-height: var(--vaadin-login-form-error-line-height, inherit);
   }

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

@@ -14,7 +14,7 @@ const loginOverlayWrapper = css`
       var(--vaadin-overlay-background, var(--vaadin-background-color))
     );
     border: var(--vaadin-login-overlay-border-width, var(--vaadin-overlay-border-width, 1px)) solid
-      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color)));
+      var(--vaadin-login-overlay-border-color, var(--vaadin-overlay-border-color, var(--vaadin-border-color-subtle)));
     border-radius: var(--vaadin-login-overlay-border-radius, var(--vaadin-radius-l));
     box-shadow: var(
       --vaadin-login-overlay-box-shadow,
@@ -34,7 +34,7 @@ const loginOverlayWrapper = css`
     background: var(--vaadin-login-overlay-brand-background, var(--vaadin-background-container));
     display: flex;
     flex-direction: column;
-    padding: var(--vaadin-login-overlay-brand-padding, var(--vaadin-padding));
+    padding: var(--vaadin-login-overlay-brand-padding, var(--vaadin-padding-l));
   }
 
   ::slotted([slot='title']) {

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

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

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

@@ -3,15 +3,13 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
 import { TitleController } from './title-controller.js';
 
 /**
  * @polymerMixin
- * @mixes OverlayClassMixin
  */
 export const LoginOverlayMixin = (superClass) =>
-  class LoginOverlayMixin extends OverlayClassMixin(superClass) {
+  class LoginOverlayMixin extends superClass {
     static get properties() {
       return {
         /**

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -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",
@@ -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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha11",
+  "version": "25.0.0-alpha13",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -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",