New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@vaadin/login

Package Overview
Dependencies
Maintainers
12
Versions
430
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@vaadin/login - npm Package Compare versions

Comparing version

to
24.7.0-alpha4

24

package.json
{
"name": "@vaadin/login",
"version": "24.7.0-alpha3",
"version": "24.7.0-alpha4",
"publishConfig": {

@@ -40,15 +40,15 @@ "access": "public"

"@polymer/polymer": "^3.0.0",
"@vaadin/button": "24.7.0-alpha3",
"@vaadin/component-base": "24.7.0-alpha3",
"@vaadin/overlay": "24.7.0-alpha3",
"@vaadin/password-field": "24.7.0-alpha3",
"@vaadin/text-field": "24.7.0-alpha3",
"@vaadin/vaadin-lumo-styles": "24.7.0-alpha3",
"@vaadin/vaadin-material-styles": "24.7.0-alpha3",
"@vaadin/vaadin-themable-mixin": "24.7.0-alpha3",
"@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-alpha3",
"@vaadin/checkbox": "24.7.0-alpha3",
"@vaadin/chai-plugins": "24.7.0-alpha4",
"@vaadin/checkbox": "24.7.0-alpha4",
"@vaadin/testing-helpers": "^1.1.0",

@@ -61,3 +61,3 @@ "sinon": "^18.0.0"

],
"gitHead": "dd5cfad6c9b54e676f5b10dffba2233775378f40"
"gitHead": "d7165cebf9dcf6a7e9e22f6353662d33404b4856"
}
/**
* @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/

@@ -47,2 +47,9 @@ */

},
/**
* Used to customize the `aria-level` attribute on the heading element.
*/
headingLevel: {
type: Number,
},
};

@@ -55,5 +62,5 @@ }

<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>

@@ -60,0 +67,0 @@ </div>

/**
* @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';
/**
* @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/

@@ -53,2 +53,3 @@ */

.i18n="${this.i18n}"
.headingLevel="${this.headingLevel}"
>

@@ -55,0 +56,0 @@ <form method="POST" action="${ifDefined(this.action)}" @formdata="${this._onFormData}" slot="form">

/**
* @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/

@@ -38,3 +38,3 @@ */

<slot name="title">
<h1 part="title">${this.title}</h1>
<div part="title" role="heading" aria-level="${this.headingLevel}">${this.title}</div>
</slot>

@@ -41,0 +41,0 @@ <p part="description">${this.description}</p>

/**
* @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';
/**
* @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/

@@ -38,2 +38,3 @@ */

.description="${this.description}"
.headingLevel="${this.headingLevel}"
role="dialog"

@@ -55,2 +56,3 @@ focus-trap

.noForgotPassword="${this.noForgotPassword}"
.headingLevel="${this.__computeHeadingLevel(this.headingLevel)}"
.i18n="${this.i18n}"

@@ -57,0 +59,0 @@ @login="${this._retargetEvent}"

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -26,5 +26,5 @@ */

<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>

@@ -72,2 +72,9 @@ </div>

},
/**
* Used to customize the `aria-level` attribute on the heading element.
*/
headingLevel: {
type: Number,
},
};

@@ -74,0 +81,0 @@ }

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -64,3 +64,9 @@ */

</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">

@@ -67,0 +73,0 @@ <input id="csrf" type="hidden" />

/**
* @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/

@@ -96,2 +96,12 @@ */

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;
}
/**
* @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/

@@ -138,2 +138,15 @@ */

/**
* 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.

@@ -140,0 +153,0 @@ * @private

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -162,2 +162,7 @@ */

}
/** @private */
__computeHeadingLevel(headingLevel) {
return headingLevel + 1;
}
};
/**
* @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/

@@ -34,2 +34,9 @@ */

},
/**
* Used to customize the `aria-level` attribute on the heading element.
*/
headingLevel: {
type: Number,
},
};

@@ -36,0 +43,0 @@ }

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -31,3 +31,3 @@ */

[part='brand'] h1 {
[part='title'] {
color: inherit;

@@ -34,0 +34,0 @@ margin: 0;

/**
* @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/

@@ -38,3 +38,3 @@ */

<slot name="title">
<h1 part="title">[[title]]</h1>
<div part="title" role="heading" aria-level$="[[headingLevel]]">[[title]]</div>
</slot>

@@ -41,0 +41,0 @@ <p part="description">[[description]]</p>

/**
* @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/

@@ -5,0 +5,0 @@ */

/**
* @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/

@@ -64,2 +64,3 @@ */

description="[[description]]"
heading-level="[[headingLevel]]"
theme$="[[_theme]]"

@@ -75,2 +76,3 @@ on-vaadin-overlay-escape-press="_preventClosingLogin"

error="{{error}}"
heading-level="[[__computeHeadingLevel(headingLevel)]]"
no-autofocus="[[noAutofocus]]"

@@ -77,0 +79,0 @@ no-forgot-password="[[noForgotPassword]]"

@@ -18,2 +18,6 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';

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);
}

@@ -69,4 +73,6 @@

[part='error-message-title'] {
display: block;
margin: 0 0 0.25em;
color: inherit;
line-height: var(--lumo-line-height-xs);
}

@@ -73,0 +79,0 @@

@@ -32,2 +32,8 @@ import '@vaadin/vaadin-lumo-styles/spacing.js';

[part='title'] {
font-size: var(--lumo-font-size-xxxl);
font-weight: 600;
line-height: var(--lumo-line-height-xs);
}
[part='description'] {

@@ -34,0 +40,0 @@ line-height: var(--lumo-line-height-s);

@@ -22,2 +22,6 @@ import '@vaadin/vaadin-material-styles/color.js';

font-size: var(--material-h5-font-size);
font-weight: 300;
line-height: 1.1;
letter-spacing: -0.01em;
text-indent: -0.07em;
}

@@ -82,5 +86,8 @@

[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;
}

@@ -87,0 +94,0 @@

@@ -61,3 +61,3 @@ import '@vaadin/vaadin-material-styles/color.js';

[part='brand'] h1 {
[part='title'] {
color: inherit;

@@ -67,2 +67,5 @@ margin: 0;

font-size: 2rem;
line-height: 1.1;
letter-spacing: -0.015em;
text-indent: -0.07em;
}

@@ -96,3 +99,3 @@

[part='brand'] h1 {
[part='title'] {
font-weight: 500;

@@ -216,3 +219,3 @@ font-size: 1.8rem;

[part='brand'] h1 {
[part='title'] {
font-size: 2.5em;

@@ -318,3 +321,3 @@ }

:host([theme~='with-overlay']) [part='form'] h2 {
:host([theme~='with-overlay']) [part='form-title'] {
text-align: center;

@@ -321,0 +324,0 @@ font-size: 1.8em;

{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/login",
"version": "24.7.0-alpha3",
"version": "24.7.0-alpha4",
"description-markup": "markdown",

@@ -60,2 +60,13 @@ "contributions": {

{
"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",

@@ -128,2 +139,13 @@ "description": "The theme variants to apply to the component.",

}
},
{
"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"
]
}
}

@@ -153,3 +175,3 @@ ],

"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-alpha3/#/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": [

@@ -203,2 +225,13 @@ {

{
"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",

@@ -311,2 +344,13 @@ "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.",

{
"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",

@@ -313,0 +357,0 @@ "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.",

{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/login",
"version": "24.7.0-alpha3",
"version": "24.7.0-alpha4",
"description-markup": "markdown",

@@ -65,2 +65,9 @@ "framework": "lit",

{
"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",

@@ -97,3 +104,3 @@ "description": "Fired when user clicks on the \"Forgot password\" button.",

"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-alpha3/#/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,

@@ -151,2 +158,9 @@ "attributes": [

{
"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",

@@ -153,0 +167,0 @@ "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.",