@vaadin/login 25.0.0-alpha1 → 25.0.0-alpha10

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

@@ -1 +1,4 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,19 +1,23 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginFormWrapper = css`
   :host {
-    max-width: calc(var(--lumo-size-m) * 10);
+    width: calc(var(--lumo-size-m) * 10);
+    padding: var(--lumo-space-l);
+    max-width: 100%;
     background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
   }
 
-  [part='form'] {
-    padding: var(--lumo-space-l);
+  ::slotted(form) {
+    display: flex;
+    flex-direction: column;
   }
 
-  [part='form-title'] {
+  ::slotted([slot='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);
@@ -89,6 +93,6 @@ const loginFormWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-form-wrapper', [color, typography, loginFormWrapper], {
+registerStyles('vaadin-login-form-wrapper', loginFormWrapper, {
   moduleId: 'lumo-login-form-wrapper',
 });

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

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

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

@@ -1,8 +1,7 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
-import './vaadin-login-form-wrapper-styles.js';
-import { color } from '@vaadin/vaadin-lumo-styles/color.js';
+import '@vaadin/vaadin-lumo-styles/typography.js';
 import { overlay } from '@vaadin/vaadin-lumo-styles/mixins/overlay.js';
-import { typography } from '@vaadin/vaadin-lumo-styles/typography.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 const loginOverlayWrapper = css`
@@ -29,7 +28,7 @@ const loginOverlayWrapper = css`
     min-height: calc(var(--lumo-size-m) * 5);
   }
 
-  [part='title'] {
+  ::slotted([slot='title']) {
     font-size: var(--lumo-font-size-xxxl);
     font-weight: 600;
     line-height: var(--lumo-line-height-xs);
@@ -38,7 +37,7 @@ const loginOverlayWrapper = css`
   [part='description'] {
     line-height: var(--lumo-line-height-s);
     color: var(--lumo-tint-70pct);
-    margin-bottom: 0;
+    margin: 0.5em 0 0;
   }
 
   [part='content'] {
@@ -58,6 +57,11 @@ const loginOverlayWrapper = css`
     height: auto;
   }
 
+  ::slotted(vaadin-login-form-wrapper) {
+    min-height: 100%;
+    max-width: 100%;
+  }
+
   /* Small screen */
   @media only screen and (max-width: 500px) {
     [part='overlay'],
@@ -95,7 +99,7 @@ const loginOverlayWrapper = css`
     }
 
     [part='brand'],
-    [part='form'] {
+    [part='form-wrapper'] {
       flex: auto;
       flex-basis: 0;
       box-sizing: border-box;
@@ -105,10 +109,15 @@ const loginOverlayWrapper = css`
       justify-content: flex-start;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       padding: var(--lumo-space-l);
       overflow: auto;
     }
+
+    ::slotted(vaadin-login-form-wrapper) {
+      flex: 1;
+      padding: 2px;
+    }
   }
 
   /* Landscape really small screen */
@@ -128,10 +137,9 @@ const loginOverlayWrapper = css`
       box-shadow: none;
     }
 
-    [part='form'] {
+    [part='form-wrapper'] {
       height: 100%;
       overflow: auto;
-      -webkit-overflow-scrolling: touch;
     }
   }
 
@@ -160,29 +168,6 @@ const loginOverlayWrapper = css`
   }
 `;
 
-registerStyles('vaadin-login-overlay-wrapper', [color, typography, overlay, loginOverlayWrapper], {
+registerStyles('vaadin-login-overlay-wrapper', [overlay, loginOverlayWrapper], {
   moduleId: 'lumo-login-overlay-wrapper',
 });
-
-const loginFormWrapper = css`
-  :host([theme~='with-overlay']) {
-    min-height: 100%;
-    display: flex;
-    justify-content: center;
-    max-width: 100%;
-  }
-
-  /* Landscape small screen */
-  @media only screen and (max-height: 600px) and (min-width: 600px) and (orientation: landscape) {
-    :host([theme~='with-overlay']) [part='form'] {
-      height: 100%;
-      -webkit-overflow-scrolling: touch;
-      flex: 1;
-      padding: 2px;
-    }
-  }
-`;
-
-registerStyles('vaadin-login-form-wrapper', [loginFormWrapper], {
-  moduleId: 'lumo-login-overlay',
-});

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

@@ -1,3 +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-login-form-wrapper-styles.js';
 import './vaadin-login-overlay-styles.js';
-import './vaadin-login-form.js';
 import '../../src/vaadin-login-overlay.js';

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

@@ -1,3 +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-login-form-wrapper-styles.js';
 import './vaadin-login-overlay-styles.js';
-import './vaadin-login-form.js';
 import '../../src/vaadin-login-overlay.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```html\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -170,7 +170,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "action",
@@ -395,6 +395,10 @@
                 "name": "login",
                 "description": "Fired when an user submits the login.\nThe event contains `username` and `password` values in the `detail` property."
               },
+              {
+                "name": "closed",
+                "description": "Fired when the overlay is closed."
+              },
               {
                 "name": "disabled-changed",
                 "description": "Fired when the `disabled` property changes."

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/login",
-  "version": "25.0.0-alpha1",
+  "version": "25.0.0-alpha10",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-login-form",
-          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-form-wrapper>` themable component to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-login-form>` is a Web Component providing an easy way to require users\nto log in into an application. Note that component has no shadowRoot.\n\n```html\n<vaadin-login-form></vaadin-login-form>\n```\n\nComponent has to be accessible from the `document` layer in order to allow password managers to work properly with form values.\nUsing `<vaadin-login-overlay>` allows to always attach the component to the document body.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name      | Description\n---------------|---------------------------------------------------------|\n`form`         | Container for the entire component's content\n`form-title`   | Title of the login form\n`error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.\n`error-message-title`       | Container for error message title\n`error-message-description` | Container for error message description\n`footer`  | Container additional information text from `i18n` object\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -100,7 +100,7 @@
         },
         {
           "name": "vaadin-login-overlay",
-          "description": "`<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and\nhaving an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows\npassword managers to work with login form.\n\n```\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.\nUse `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.\n\nThe following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:\n\nPart name       | Description\n----------------|---------------------------------------------------------|\n`card`          | Container for the entire component's content\n`brand`         | Container for application title and description\n`form`          | Container for the `<vaadin-login-form>` component\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nSee [`<vaadin-login-form>`](https://cdn.vaadin.com/vaadin-web-components/25.0.0-alpha1/#/elements/vaadin-login-form)\ndocumentation for  `<vaadin-login-form-wrapper>` stylable parts.",
+          "description": "`<vaadin-login-overlay>` is a web component which renders a login form in an overlay and\nprovides an additional `brand` part for application title and description.\n\n```html\n<vaadin-login-overlay opened></vaadin-login-overlay>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name                    | Description\n-----------------------------|--------------------------------\n`backdrop`                   | Backdrop of the overlay\n`overlay`                    | The overlay container element\n`content`                    | The overlay content element\n`card`                       | Container for the brand and form wrapper\n`brand`                      | Container for application title and description\n`description`                | The application description\n`form-wrapper`               | The login form wrapper element\n`form`                       | The login form element\n`form-title`                 | Title of the login form\n`error-message`              | Container for error message\n`error-message-title`        | Container for error message title\n`error-message-description`  | Container for error message description\n`footer`                     | Container for the footer element\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -194,6 +194,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "@closed",
+              "description": "Fired when the overlay is closed.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": "@disabled-changed",
               "description": "Fired when the `disabled` property changes.",

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

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