@vaadin/login 25.3.0-dev.3a3c2d7d2a → 25.3.0-rc1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/custom-elements.json +69 -55
  2. package/package.json +14 -14
  3. package/src/vaadin-login-form-mixin.js +4 -0
  4. package/src/vaadin-login-form-wrapper.js +1 -0
  5. package/src/vaadin-login-form.js +1 -0
  6. package/src/vaadin-login-overlay-mixin.js +1 -1
  7. package/src/vaadin-login-overlay-wrapper.js +3 -2
  8. package/src/vaadin-login-overlay.d.ts +1 -0
  9. package/src/vaadin-login-overlay.js +2 -0
  10. package/web-types.json +4 -8
  11. package/web-types.lit.json +2 -2
package/custom-elements.json CHANGED
@@ -432,30 +432,6 @@
432
432
  }
433
433
  }
434
434
  ],
435
- "mixins": [
436
- {
437
- "name": "LoginFormMixin",
438
- "module": "src/vaadin-login-form-mixin.js"
439
- },
440
- {
441
- "name": "ElementMixin",
442
- "package": "@vaadin/component-base/src/element-mixin.js"
443
- },
444
- {
445
- "name": "ThemableMixin",
446
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
447
- },
448
- {
449
- "name": "PolylitMixin",
450
- "package": "@vaadin/component-base/src/polylit-mixin.js"
451
- }
452
- ],
453
- "superclass": {
454
- "name": "LitElement",
455
- "package": "lit"
456
- },
457
- "tagName": "vaadin-login-form",
458
- "customElement": true,
459
435
  "attributes": [
460
436
  {
461
437
  "name": "action",
@@ -540,8 +516,39 @@
540
516
  "name": "LoginMixin",
541
517
  "module": "src/vaadin-login-mixin.js"
542
518
  }
519
+ },
520
+ {
521
+ "type": {
522
+ "text": "string"
523
+ },
524
+ "description": "The theme variants to apply to the component.",
525
+ "name": "theme"
543
526
  }
544
- ]
527
+ ],
528
+ "mixins": [
529
+ {
530
+ "name": "LoginFormMixin",
531
+ "module": "src/vaadin-login-form-mixin.js"
532
+ },
533
+ {
534
+ "name": "ElementMixin",
535
+ "package": "@vaadin/component-base/src/element-mixin.js"
536
+ },
537
+ {
538
+ "name": "ThemableMixin",
539
+ "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
540
+ },
541
+ {
542
+ "name": "PolylitMixin",
543
+ "package": "@vaadin/component-base/src/polylit-mixin.js"
544
+ }
545
+ ],
546
+ "superclass": {
547
+ "name": "LitElement",
548
+ "package": "lit"
549
+ },
550
+ "tagName": "vaadin-login-form",
551
+ "customElement": true
545
552
  }
546
553
  ],
547
554
  "exports": [
@@ -823,7 +830,7 @@
823
830
  "declarations": [
824
831
  {
825
832
  "kind": "class",
826
- "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
833
+ "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-shadow` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
827
834
  "name": "LoginOverlay",
828
835
  "members": [
829
836
  {
@@ -1032,34 +1039,6 @@
1032
1039
  }
1033
1040
  }
1034
1041
  ],
1035
- "mixins": [
1036
- {
1037
- "name": "LoginFormMixin",
1038
- "module": "src/vaadin-login-form-mixin.js"
1039
- },
1040
- {
1041
- "name": "LoginOverlayMixin",
1042
- "module": "src/vaadin-login-overlay-mixin.js"
1043
- },
1044
- {
1045
- "name": "ElementMixin",
1046
- "package": "@vaadin/component-base/src/element-mixin.js"
1047
- },
1048
- {
1049
- "name": "ThemableMixin",
1050
- "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
1051
- },
1052
- {
1053
- "name": "PolylitMixin",
1054
- "package": "@vaadin/component-base/src/polylit-mixin.js"
1055
- }
1056
- ],
1057
- "superclass": {
1058
- "name": "LitElement",
1059
- "package": "lit"
1060
- },
1061
- "tagName": "vaadin-login-overlay",
1062
- "customElement": true,
1063
1042
  "attributes": [
1064
1043
  {
1065
1044
  "name": "action",
@@ -1169,6 +1148,13 @@
1169
1148
  "module": "src/vaadin-login-overlay-mixin.js"
1170
1149
  }
1171
1150
  },
1151
+ {
1152
+ "type": {
1153
+ "text": "string"
1154
+ },
1155
+ "description": "The theme variants to apply to the component.",
1156
+ "name": "theme"
1157
+ },
1172
1158
  {
1173
1159
  "name": "title",
1174
1160
  "type": {
@@ -1181,7 +1167,35 @@
1181
1167
  "module": "src/vaadin-login-overlay-mixin.js"
1182
1168
  }
1183
1169
  }
1184
- ]
1170
+ ],
1171
+ "mixins": [
1172
+ {
1173
+ "name": "LoginFormMixin",
1174
+ "module": "src/vaadin-login-form-mixin.js"
1175
+ },
1176
+ {
1177
+ "name": "LoginOverlayMixin",
1178
+ "module": "src/vaadin-login-overlay-mixin.js"
1179
+ },
1180
+ {
1181
+ "name": "ElementMixin",
1182
+ "package": "@vaadin/component-base/src/element-mixin.js"
1183
+ },
1184
+ {
1185
+ "name": "ThemableMixin",
1186
+ "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
1187
+ },
1188
+ {
1189
+ "name": "PolylitMixin",
1190
+ "package": "@vaadin/component-base/src/polylit-mixin.js"
1191
+ }
1192
+ ],
1193
+ "superclass": {
1194
+ "name": "LitElement",
1195
+ "package": "lit"
1196
+ },
1197
+ "tagName": "vaadin-login-overlay",
1198
+ "customElement": true
1185
1199
  }
1186
1200
  ],
1187
1201
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/login",
3
- "version": "25.3.0-dev.3a3c2d7d2a",
3
+ "version": "25.3.0-rc1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,22 +35,22 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/button": "25.3.0-dev.3a3c2d7d2a",
39
- "@vaadin/component-base": "25.3.0-dev.3a3c2d7d2a",
40
- "@vaadin/overlay": "25.3.0-dev.3a3c2d7d2a",
41
- "@vaadin/password-field": "25.3.0-dev.3a3c2d7d2a",
42
- "@vaadin/text-field": "25.3.0-dev.3a3c2d7d2a",
43
- "@vaadin/vaadin-themable-mixin": "25.3.0-dev.3a3c2d7d2a",
38
+ "@vaadin/button": "25.3.0-rc1",
39
+ "@vaadin/component-base": "25.3.0-rc1",
40
+ "@vaadin/overlay": "25.3.0-rc1",
41
+ "@vaadin/password-field": "25.3.0-rc1",
42
+ "@vaadin/text-field": "25.3.0-rc1",
43
+ "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/a11y-base": "25.3.0-dev.3a3c2d7d2a",
48
- "@vaadin/aura": "25.3.0-dev.3a3c2d7d2a",
49
- "@vaadin/chai-plugins": "25.3.0-dev.3a3c2d7d2a",
50
- "@vaadin/checkbox": "25.3.0-dev.3a3c2d7d2a",
51
- "@vaadin/test-runner-commands": "25.3.0-dev.3a3c2d7d2a",
47
+ "@vaadin/a11y-base": "25.3.0-rc1",
48
+ "@vaadin/aura": "25.3.0-rc1",
49
+ "@vaadin/chai-plugins": "25.3.0-rc1",
50
+ "@vaadin/checkbox": "25.3.0-rc1",
51
+ "@vaadin/test-runner-commands": "25.3.0-rc1",
52
52
  "@vaadin/testing-helpers": "^2.0.0",
53
- "@vaadin/vaadin-lumo-styles": "25.3.0-dev.3a3c2d7d2a",
53
+ "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
54
54
  "sinon": "^22.0.0"
55
55
  },
56
56
  "customElements": "custom-elements.json",
@@ -58,5 +58,5 @@
58
58
  "web-types.json",
59
59
  "web-types.lit.json"
60
60
  ],
61
- "gitHead": "ac506ca7800c23e05da55863c56bcedf12812d37"
61
+ "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
62
62
  }
package/src/vaadin-login-form-mixin.js CHANGED
@@ -189,6 +189,10 @@ export const LoginFormMixin = (superClass) =>
189
189
  /** @protected */
190
190
  _handleInputKeydown(e) {
191
191
  if (e.key === 'Enter') {
192
+ // Prevent default so that the browser does not apply the Enter activation
193
+ // behavior to an element that receives focus while this event is handled.
194
+ e.preventDefault();
195
+
192
196
  const { currentTarget: inputActive } = e;
193
197
  const nextInput = inputActive.id === 'vaadinLoginUsername' ? this._passwordField : this._userNameField;
194
198
  // eslint-disable-next-line no-restricted-syntax
package/src/vaadin-login-form-wrapper.js CHANGED
@@ -15,6 +15,7 @@ import { loginFormWrapperStyles } from './styles/vaadin-login-form-wrapper-base-
15
15
  *
16
16
  * @extends HTMLElement
17
17
  * @private
18
+ * @attr {string} theme - The theme variants to apply to the component.
18
19
  */
19
20
  class LoginFormWrapper extends ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))) {
20
21
  static get is() {
package/src/vaadin-login-form.js CHANGED
@@ -65,6 +65,7 @@ import { LoginFormMixin } from './vaadin-login-form-mixin.js';
65
65
  * @fires {CustomEvent} forgot-password - Fired when user clicks on the "Forgot password" button.
66
66
  * @fires {CustomEvent} login - Fired when a user submits the login form. The event detail contains `username` and `password`.
67
67
  *
68
+ * @attr {string} theme - The theme variants to apply to the component.
68
69
  * @customElement vaadin-login-form
69
70
  * @extends HTMLElement
70
71
  */
package/src/vaadin-login-overlay-mixin.js CHANGED
@@ -86,7 +86,7 @@ export const LoginOverlayMixin = (superClass) =>
86
86
  }
87
87
 
88
88
  if (props.has('opened')) {
89
- this._openedChanged(this.opened);
89
+ this._openedChanged(this.opened, props.get('opened'));
90
90
  }
91
91
  }
92
92
 
package/src/vaadin-login-overlay-wrapper.js CHANGED
@@ -17,6 +17,7 @@ import { loginOverlayWrapperStyles } from './styles/vaadin-login-overlay-wrapper
17
17
  *
18
18
  * @extends HTMLElement
19
19
  * @private
20
+ * @attr {string} theme - The theme variants to apply to the component.
20
21
  */
21
22
  class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
22
23
  static get is() {
@@ -39,11 +40,11 @@ class LoginOverlayWrapper extends OverlayMixin(DirMixin(ThemableMixin(PolylitMix
39
40
  }
40
41
 
41
42
  /**
42
- * Override method from OverlayFocusMixin to use owner as focus trap root
43
+ * Override method from OverlayFocusMixin to use owner as focus root
43
44
  * @protected
44
45
  * @override
45
46
  */
46
- get _focusTrapRoot() {
47
+ get _focusRoot() {
47
48
  return this.owner;
48
49
  }
49
50
 
package/src/vaadin-login-overlay.d.ts CHANGED
@@ -97,6 +97,7 @@ export interface LoginOverlayEventMap extends HTMLElementEventMap, LoginOverlayC
97
97
  * | `--vaadin-login-overlay-description-font-size` |
98
98
  * | `--vaadin-login-overlay-description-font-weight` |
99
99
  * | `--vaadin-login-overlay-description-line-height` |
100
+ * | `--vaadin-login-overlay-shadow` |
100
101
  * | `--vaadin-login-overlay-text-color` |
101
102
  * | `--vaadin-login-overlay-title-color` |
102
103
  * | `--vaadin-login-overlay-title-font-size` |
package/src/vaadin-login-overlay.js CHANGED
@@ -59,6 +59,7 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
59
59
  * | `--vaadin-login-overlay-description-font-size` |
60
60
  * | `--vaadin-login-overlay-description-font-weight` |
61
61
  * | `--vaadin-login-overlay-description-line-height` |
62
+ * | `--vaadin-login-overlay-shadow` |
62
63
  * | `--vaadin-login-overlay-text-color` |
63
64
  * | `--vaadin-login-overlay-title-color` |
64
65
  * | `--vaadin-login-overlay-title-font-size` |
@@ -74,6 +75,7 @@ import { LoginOverlayMixin } from './vaadin-login-overlay-mixin.js';
74
75
  * @fires {CustomEvent} login - Fired when a user submits the login form. The event detail contains `username` and `password`.
75
76
  * @fires {CustomEvent} closed - Fired when the overlay is closed.
76
77
  *
78
+ * @attr {string} theme - The theme variants to apply to the component.
77
79
  * @customElement vaadin-login-overlay
78
80
  * @extends HTMLElement
79
81
  */
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/login",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -69,9 +69,7 @@
69
69
  "description": "The theme variants to apply to the component.",
70
70
  "value": {
71
71
  "type": [
72
- "string",
73
- "null",
74
- "undefined"
72
+ "string"
75
73
  ]
76
74
  }
77
75
  }
@@ -164,7 +162,7 @@
164
162
  },
165
163
  {
166
164
  "name": "vaadin-login-overlay",
167
- "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
165
+ "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-shadow` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
168
166
  "attributes": [
169
167
  {
170
168
  "name": "action",
@@ -243,9 +241,7 @@
243
241
  "description": "The theme variants to apply to the component.",
244
242
  "value": {
245
243
  "type": [
246
- "string",
247
- "null",
248
- "undefined"
244
+ "string"
249
245
  ]
250
246
  }
251
247
  },
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/login",
4
- "version": "25.3.0-dev.3a3c2d7d2a",
4
+ "version": "25.3.0-rc1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -100,7 +100,7 @@
100
100
  },
101
101
  {
102
102
  "name": "vaadin-login-overlay",
103
- "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
103
+ "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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-login-overlay-background` |\n| `--vaadin-login-overlay-border-color` |\n| `--vaadin-login-overlay-border-radius` |\n| `--vaadin-login-overlay-border-width` |\n| `--vaadin-login-overlay-brand-background` |\n| `--vaadin-login-overlay-brand-padding` |\n| `--vaadin-login-overlay-description-color` |\n| `--vaadin-login-overlay-description-font-size` |\n| `--vaadin-login-overlay-description-font-weight` |\n| `--vaadin-login-overlay-description-line-height` |\n| `--vaadin-login-overlay-shadow` |\n| `--vaadin-login-overlay-text-color` |\n| `--vaadin-login-overlay-title-color` |\n| `--vaadin-login-overlay-title-font-size` |\n| `--vaadin-login-overlay-title-font-weight` |\n| `--vaadin-login-overlay-title-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
104
104
  "extension": true,
105
105
  "attributes": [
106
106
  {