@vaadin/vaadin-login 22.0.0-alpha6 → 22.0.0-beta1

package/package.json

@@ -1,10 +1,29 @@
 {
   "name": "@vaadin/vaadin-login",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-beta1",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "vaadin-login",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-login"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-login/issues"
+  },
   "main": "vaadin-login-overlay.js",
   "module": "vaadin-login-overlay.js",
-  "repository": "vaadin/vaadin-login",
+  "files": [
+    "src",
+    "theme",
+    "vaadin-*.d.ts",
+    "vaadin-*.js"
+  ],
   "keywords": [
     "Vaadin",
     "vaadin-login",
@@ -12,36 +31,8 @@
     "web-component",
     "polymer"
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-login/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "vaadin-*.d.ts",
-    "vaadin-*.js",
-    "src",
-    "theme"
-  ],
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "^22.0.0-alpha6",
-    "@vaadin/password-field": "^22.0.0-alpha6",
-    "@vaadin/vaadin-element-mixin": "^22.0.0-alpha6",
-    "@vaadin/vaadin-lumo-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-material-styles": "^22.0.0-alpha6",
-    "@vaadin/vaadin-overlay": "^22.0.0-alpha6",
-    "@vaadin/vaadin-text-field": "^22.0.0-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
-  },
-  "devDependencies": {
-    "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/testing-helpers": "^0.3.0",
-    "sinon": "^9.2.1"
-  },
-  "publishConfig": {
-    "access": "public"
+    "@vaadin/login": "22.0.0-beta1"
   },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "4cf8a9d0504994200c610e44b3676114fef49c1e"
 }

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

@@ -1,64 +1,19 @@
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { LoginMixin } from './vaadin-login-mixin.js';
-
-import { LoginEventMap } from './interfaces';
-
 /**
- * `<vaadin-login-form>` is a Web Component providing an easy way to require users
- * to log in into an application. Note that component has no shadowRoot.
- *
- * ```
- * <vaadin-login-form></vaadin-login-form>
- * ```
- *
- * Component has to be accessible from the `document` layer in order to allow password managers to work properly with form values.
- * Using `<vaadin-login-overlay>` allows to always attach the component to the document body.
- *
- * ### Styling
- *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- *
- * Use `<vaadin-login-form-wrapper>` themable component to apply styles.
- * The following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:
- *
- * Part name      | Description
- * ---------------|---------------------------------------------------------|
- * `form`         | Container for the entire component's content
- * `form-title`   | Title of the login form
- * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
- * `error-message-title`       | Container for error message title
- * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
- * `footer`  | Container additional information text from `i18n` object
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
- * @fires {CustomEvent} login - Fired when a user submits the login.
+ * @license
+ * Vaadin Login
+ * Copyright (C) 2020 Vaadin Ltd
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class LoginFormElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
-  submit(): void;
-
-  addEventListener<K extends keyof LoginEventMap>(
-    type: K,
-    listener: (this: LoginFormElement, ev: LoginEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
+import { LoginForm } from '@vaadin/login/src/vaadin-login-form.js';
 
-  removeEventListener<K extends keyof LoginEventMap>(
-    type: K,
-    listener: (this: LoginFormElement, ev: LoginEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
+ */
+export type LoginFormElement = LoginForm;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-login-form': LoginFormElement;
-  }
-}
+/**
+ * @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
+ */
+export const LoginFormElement: typeof LoginForm;
 
-export { LoginFormElement };
+export * from '@vaadin/login/src/vaadin-login-form.js';

package/src/vaadin-login-form.js

@@ -4,205 +4,11 @@
  * Copyright (C) 2020 Vaadin Ltd
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import '@vaadin/vaadin-text-field/src/vaadin-text-field.js';
-import '@vaadin/password-field/src/vaadin-password-field.js';
-import './vaadin-login-form-wrapper.js';
+import { LoginForm } from '@vaadin/login/src/vaadin-login-form.js';
 
 /**
- * `<vaadin-login-form>` is a Web Component providing an easy way to require users
- * to log in into an application. Note that component has no shadowRoot.
- *
- * ```
- * <vaadin-login-form></vaadin-login-form>
- * ```
- *
- * Component has to be accessible from the `document` layer in order to allow password managers to work properly with form values.
- * Using `<vaadin-login-overlay>` allows to always attach the component to the document body.
- *
- * ### Styling
- *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-form-wrapper>` themable component to apply styles.
- *
- * The following shadow DOM parts of the `<vaadin-login-form-wrapper>` are available for styling:
- *
- * Part name      | Description
- * ---------------|---------------------------------------------------------|
- * `form`         | Container for the entire component's content
- * `form-title`   | Title of the login form
- * `error-message`| Container for error message, contains error-message-title and error-message-description parts. Hidden by default.
- * `error-message-title`       | Container for error message title
- * `error-message-description` | Container for error message description
- * `error-message-description` | Container for error message description
- * `footer`  | Container additional information text from `i18n` object
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
- * @fires {CustomEvent} login - Fired when a user submits the login.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes LoginMixin
+ * @deprecated Import `LoginForm` from `@vaadin/login/vaadin-login-form` instead.
  */
-class LoginFormElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <style>
-        [part='vaadin-login-native-form'] * {
-          width: 100%;
-        }
-      </style>
-      <vaadin-login-form-wrapper
-        theme$="[[theme]]"
-        part="vaadin-login-native-form-wrapper"
-        action="{{action}}"
-        disabled="{{disabled}}"
-        error="{{error}}"
-        no-forgot-password="{{noForgotPassword}}"
-        i18n="{{i18n}}"
-        on-login="_retargetEvent"
-        on-forgot-password="_retargetEvent"
-      >
-        <form part="vaadin-login-native-form" method="POST" action$="[[action]]" slot="form">
-          <input id="csrf" type="hidden" />
-          <vaadin-text-field
-            name="username"
-            label="[[i18n.form.username]]"
-            id="vaadinLoginUsername"
-            required
-            on-keydown="_handleInputKeydown"
-            autocapitalize="none"
-            autocorrect="off"
-            spellcheck="false"
-          >
-            <input type="text" slot="input" on-keyup="_handleInputKeyup" />
-          </vaadin-text-field>
+export const LoginFormElement = LoginForm;
 
-          <vaadin-password-field
-            name="password"
-            label="[[i18n.form.password]]"
-            id="vaadinLoginPassword"
-            required
-            on-keydown="_handleInputKeydown"
-            spellcheck="false"
-          >
-            <input type="password" slot="input" on-keyup="_handleInputKeyup" />
-          </vaadin-password-field>
-
-          <vaadin-button part="vaadin-login-submit" theme="primary contained" on-click="submit" disabled$="[[disabled]]"
-            >[[i18n.form.submit]]</vaadin-button
-          >
-        </form>
-      </vaadin-login-form-wrapper>
-    `;
-  }
-
-  static get is() {
-    return 'vaadin-login-form';
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-    this._handleInputKeydown = this._handleInputKeydown.bind(this);
-    if (!this.noAutofocus) {
-      this.$.vaadinLoginUsername.focus();
-    }
-  }
-
-  /**
-   * @param {StampedTemplate} dom
-   * @return {null}
-   * @protected
-   */
-  _attachDom(dom) {
-    this.appendChild(dom);
-  }
-
-  static get observers() {
-    return ['_errorChanged(error)'];
-  }
-
-  /** @private */
-  _errorChanged() {
-    if (this.error && !this._preventAutoEnable) {
-      this.disabled = false;
-    }
-  }
-
-  submit() {
-    if (this.disabled || !(this.__isValid(this.$.vaadinLoginUsername) && this.__isValid(this.$.vaadinLoginPassword))) {
-      return;
-    }
-
-    this.error = false;
-    this.disabled = true;
-
-    const loginEventDetails = {
-      bubbles: true,
-      cancelable: true,
-      detail: {
-        username: this.$.vaadinLoginUsername.value,
-        password: this.$.vaadinLoginPassword.value
-      }
-    };
-
-    const firedEvent = this.dispatchEvent(new CustomEvent('login', loginEventDetails));
-    if (this.action && firedEvent) {
-      const csrfMetaName = document.querySelector('meta[name=_csrf_parameter]');
-      const csrfMetaValue = document.querySelector('meta[name=_csrf]');
-      if (csrfMetaName && csrfMetaValue) {
-        this.$.csrf.name = csrfMetaName.content;
-        this.$.csrf.value = csrfMetaValue.content;
-      }
-      this.querySelector('[part="vaadin-login-native-form"]').submit();
-    }
-  }
-
-  /** @private */
-  __isValid(input) {
-    return (input.validate && input.validate()) || (input.checkValidity && input.checkValidity());
-  }
-
-  /** @private */
-  _isEnterKey(e) {
-    return e.key === 'Enter' || e.keyCode === 13;
-  }
-
-  /** @private */
-  _handleInputKeydown(e) {
-    if (this._isEnterKey(e)) {
-      const { currentTarget: inputActive } = e;
-      const nextInput =
-        inputActive.id === 'vaadinLoginUsername' ? this.$.vaadinLoginPassword : this.$.vaadinLoginUsername;
-      if (this.__isValid(inputActive)) {
-        if (this.__isValid(nextInput)) {
-          this.submit();
-        } else {
-          nextInput.focus();
-        }
-      }
-    }
-  }
-
-  /** @private */
-  _handleInputKeyup(e) {
-    const isTab = e.key === 'Tab' || e.keyCode === 9;
-    const input = e.currentTarget;
-    if (isTab && input && input.select) {
-      input.select();
-      // iOS 9 workaround: https://stackoverflow.com/a/7436574
-      setTimeout(() => input.setSelectionRange(0, 9999));
-    }
-  }
-}
-
-customElements.define(LoginFormElement.is, LoginFormElement);
-
-export { LoginFormElement };
+export * from '@vaadin/login/src/vaadin-login-form.js';

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

@@ -1,74 +1,19 @@
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-
-import { LoginMixin } from './vaadin-login-mixin.js';
-
-import { LoginEventMap } from './interfaces';
-
 /**
- * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
- * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
- * password managers to work with login form.
- *
- * ```
- * <vaadin-login-overlay opened></vaadin-login-overlay>
- * ```
- *
- * ### Styling
- *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
- *
- * The following Shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
- *
- * Part name       | Description
- * ----------------|---------------------------------------------------------|
- * `card`          | Container for the entire component's content
- * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login-form>` component
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
- * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
- *
- * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
- * @fires {CustomEvent} login - Fired when a user submits the login.
+ * @license
+ * Vaadin Login
+ * Copyright (C) 2020 Vaadin Ltd
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-declare class LoginOverlayElement extends ElementMixin(ThemableMixin(LoginMixin(HTMLElement))) {
-  /**
-   * Defines the application description
-   */
-  description: string;
-
-  /**
-   * True if the overlay is currently displayed.
-   */
-  opened: boolean;
-
-  /**
-   * Defines the application title
-   */
-  title: string;
+import { LoginOverlay } from '@vaadin/login/src/vaadin-login-overlay.js';
 
-  addEventListener<K extends keyof LoginEventMap>(
-    type: K,
-    listener: (this: LoginOverlayElement, ev: LoginEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
-  ): void;
-
-  removeEventListener<K extends keyof LoginEventMap>(
-    type: K,
-    listener: (this: LoginOverlayElement, ev: LoginEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
-  ): void;
-}
+/**
+ * @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
+ */
+export type LoginOverlayElement = LoginOverlay;
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'vaadin-login-overlay': LoginOverlayElement;
-  }
-}
+/**
+ * @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
+ */
+export const LoginOverlayElement: typeof LoginOverlay;
 
-export { LoginOverlayElement };
+export * from '@vaadin/login/src/vaadin-login-overlay.js';

package/src/vaadin-login-overlay.js

@@ -4,195 +4,11 @@
  * Copyright (C) 2020 Vaadin Ltd
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { ElementMixin } from '@vaadin/vaadin-element-mixin/vaadin-element-mixin.js';
-import { LoginMixin } from './vaadin-login-mixin.js';
-import './vaadin-login-form.js';
-import './vaadin-login-overlay-wrapper.js';
+import { LoginOverlay } from '@vaadin/login/src/vaadin-login-overlay.js';
 
 /**
- * `<vaadin-login-overlay>` is a wrapper of the `<vaadin-login-form>` which opens a login form in an overlay and
- * having an additional `brand` part for application title and description. Using `<vaadin-login-overlay>` allows
- * password managers to work with login form.
- *
- * ```
- * <vaadin-login-overlay opened></vaadin-login-overlay>
- * ```
- *
- * ### Styling
- *
- * The component doesn't have a shadowRoot, so the `<form>` and input fields can be styled from a global scope.
- * Use `<vaadin-login-overlay-wrapper>` and `<vaadin-login-form-wrapper>` to apply styles.
- *
- * The following shadow DOM parts of the `<vaadin-login-overlay-wrapper>` are available for styling:
- *
- * Part name       | Description
- * ----------------|---------------------------------------------------------|
- * `card`          | Container for the entire component's content
- * `brand`         | Container for application title and description
- * `form`          | Container for the `<vaadin-login-form>` component
- *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
- *
- * See [`<vaadin-login-form>`](#/elements/vaadin-login-form)
- * documentation for  `<vaadin-login-form-wrapper>` stylable parts.
- *
- * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
- * @fires {CustomEvent} login - Fired when a user submits the login.
- *
- * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes ThemableMixin
- * @mixes LoginMixin
+ * @deprecated Import `LoginOverlay` from `@vaadin/login` instead.
  */
-class LoginOverlayElement extends LoginMixin(ElementMixin(ThemableMixin(PolymerElement))) {
-  static get template() {
-    return html`
-      <vaadin-login-overlay-wrapper
-        id="vaadinLoginOverlayWrapper"
-        opened="{{opened}}"
-        focus-trap
-        with-backdrop
-        title="[[title]]"
-        description="[[description]]"
-        theme$="[[theme]]"
-      >
-        <vaadin-login-form
-          theme="with-overlay"
-          id="vaadinLoginForm"
-          action="{{action}}"
-          disabled="{{disabled}}"
-          error="{{error}}"
-          no-autofocus="[[noAutofocus]]"
-          no-forgot-password="{{noForgotPassword}}"
-          i18n="{{i18n}}"
-          on-login="_retargetEvent"
-          on-forgot-password="_retargetEvent"
-        ></vaadin-login-form>
-      </vaadin-login-overlay-wrapper>
-    `;
-  }
+export const LoginOverlayElement = LoginOverlay;
 
-  static get is() {
-    return 'vaadin-login-overlay';
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Defines the application description
-       * @type {string}
-       */
-      description: {
-        type: String,
-        value: 'Application description',
-        notify: true
-      },
-
-      /**
-       * True if the overlay is currently displayed.
-       * @type {boolean}
-       */
-      opened: {
-        type: Boolean,
-        value: false,
-        observer: '_onOpenedChange'
-      },
-
-      /**
-       * Defines the application title
-       * @type {string}
-       */
-      title: {
-        type: String,
-        value: 'App name'
-      }
-    };
-  }
-
-  static get observers() {
-    return ['__i18nChanged(i18n.header.*)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._preventClosingLogin = this._preventClosingLogin.bind(this);
-  }
-
-  /** @protected */
-  connectedCallback() {
-    super.connectedCallback();
-
-    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.vaadinLoginOverlayWrapper.addEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
-  }
-
-  /** @protected */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-
-    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-outside-click', this._preventClosingLogin);
-    this.$.vaadinLoginOverlayWrapper.removeEventListener('vaadin-overlay-escape-press', this._preventClosingLogin);
-    this.$.vaadinLoginOverlayWrapper.opened = false;
-  }
-
-  /** @private */
-  __i18nChanged(i18n) {
-    const header = i18n.base;
-    if (!header) {
-      return;
-    }
-    this.title = header.title;
-    this.description = header.description;
-  }
-
-  /** @private */
-  _preventClosingLogin(e) {
-    e.preventDefault();
-  }
-
-  /** @private */
-  _onOpenedChange() {
-    if (!this.opened) {
-      this.$.vaadinLoginForm.$.vaadinLoginUsername.value = '';
-      this.$.vaadinLoginForm.$.vaadinLoginPassword.value = '';
-      this.disabled = false;
-
-      if (this._undoTeleport) {
-        this._undoTeleport();
-      }
-    } else {
-      this._undoTeleport = this._teleport(this._getElementsToTeleport());
-
-      // Overlay sets pointerEvents on body to `none`, which breaks LastPass popup
-      // Reverting it back to the previous state
-      // https://github.com/vaadin/vaadin-overlay/blob/041cde4481b6262eac68d3a699f700216d897373/src/vaadin-overlay.html#L660
-      document.body.style.pointerEvents = this.$.vaadinLoginOverlayWrapper._previousDocumentPointerEvents;
-    }
-  }
-
-  /** @private */
-  _teleport(elements) {
-    const teleported = Array.from(elements).map((e) => {
-      return this.$.vaadinLoginOverlayWrapper.appendChild(e);
-    });
-    // Function to undo the teleport
-    return () => {
-      while (teleported.length > 0) {
-        this.appendChild(teleported.shift());
-      }
-    };
-  }
-
-  /** @private */
-  _getElementsToTeleport() {
-    return this.querySelectorAll('[slot=title]');
-  }
-}
-
-customElements.define(LoginOverlayElement.is, LoginOverlayElement);
-
-export { LoginOverlayElement };
+export * from '@vaadin/login/src/vaadin-login-overlay.js';

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

@@ -1,5 +1 @@
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import '@vaadin/password-field/theme/lumo/vaadin-password-field.js';
-import './vaadin-login-form-wrapper.js';
-import './vaadin-login-form-styles.js';
-import '../../src/vaadin-login-form.js';
+import '@vaadin/login/theme/lumo/vaadin-login-form.js';

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

@@ -1,7 +1 @@
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-text-field.js';
-import '@vaadin/vaadin-text-field/theme/lumo/vaadin-password-field.js';
-import '@vaadin/button/theme/lumo/vaadin-button.js';
-import '@vaadin/vaadin-overlay/theme/lumo/vaadin-overlay.js';
-import './vaadin-login-form.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';
+import '@vaadin/login/theme/lumo/vaadin-login-overlay.js';

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

@@ -1,5 +1 @@
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/password-field/theme/material/vaadin-password-field.js';
-import './vaadin-login-form-wrapper.js';
-import './vaadin-login-form-styles.js';
-import '../../src/vaadin-login-form.js';
+import '@vaadin/login/theme/material/vaadin-login-form.js';

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

@@ -1,7 +1 @@
-import '@vaadin/vaadin-text-field/theme/material/vaadin-text-field.js';
-import '@vaadin/vaadin-text-field/theme/material/vaadin-password-field.js';
-import '@vaadin/button/theme/material/vaadin-button.js';
-import '@vaadin/vaadin-overlay/theme/material/vaadin-overlay.js';
-import './vaadin-login-form.js';
-import './vaadin-login-overlay-styles.js';
-import '../../src/vaadin-login-overlay.js';
+import '@vaadin/login/theme/material/vaadin-login-overlay.js';