@vaadin/password-field 25.2.0-alpha9 → 25.2.0-beta1

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 (8) hide show
  1. package/custom-elements.json +255 -1
  2. package/package.json +12 -12
  3. package/src/vaadin-password-field-button.js +0 -3
  4. package/src/vaadin-password-field-mixin.js +0 -7
  5. package/src/vaadin-password-field.d.ts +39 -0
  6. package/src/vaadin-password-field.js +39 -1
  7. package/web-types.json +54 -156
  8. package/web-types.lit.json +51 -51
package/custom-elements.json CHANGED
@@ -26,6 +26,29 @@
26
26
  "description": "",
27
27
  "name": "PasswordFieldMixin",
28
28
  "members": [
29
+ {
30
+ "kind": "method",
31
+ "name": "clear",
32
+ "description": "Clear the value of the field.",
33
+ "inheritedFrom": {
34
+ "name": "InputMixin",
35
+ "package": "@vaadin/field-base/src/input-mixin.js"
36
+ }
37
+ },
38
+ {
39
+ "kind": "field",
40
+ "name": "disabled",
41
+ "privacy": "public",
42
+ "type": {
43
+ "text": "boolean"
44
+ },
45
+ "description": "If true, the user cannot interact with this element.",
46
+ "attribute": "disabled",
47
+ "inheritedFrom": {
48
+ "name": "DisabledMixin",
49
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
50
+ }
51
+ },
29
52
  {
30
53
  "kind": "field",
31
54
  "name": "i18n",
@@ -56,6 +79,20 @@
56
79
  },
57
80
  "description": "Set to true to hide the eye icon which toggles the password visibility.",
58
81
  "attribute": "reveal-button-hidden"
82
+ },
83
+ {
84
+ "kind": "field",
85
+ "name": "value",
86
+ "privacy": "public",
87
+ "type": {
88
+ "text": "string"
89
+ },
90
+ "description": "The value of the field.",
91
+ "attribute": "value",
92
+ "inheritedFrom": {
93
+ "name": "InputMixin",
94
+ "package": "@vaadin/field-base/src/input-mixin.js"
95
+ }
59
96
  }
60
97
  ],
61
98
  "events": [
@@ -67,6 +104,18 @@
67
104
  }
68
105
  ],
69
106
  "attributes": [
107
+ {
108
+ "name": "disabled",
109
+ "type": {
110
+ "text": "boolean"
111
+ },
112
+ "description": "If true, the user cannot interact with this element.",
113
+ "fieldName": "disabled",
114
+ "inheritedFrom": {
115
+ "name": "DisabledMixin",
116
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
117
+ }
118
+ },
70
119
  {
71
120
  "name": "password-visible",
72
121
  "type": {
@@ -82,6 +131,18 @@
82
131
  },
83
132
  "description": "Set to true to hide the eye icon which toggles the password visibility.",
84
133
  "fieldName": "revealButtonHidden"
134
+ },
135
+ {
136
+ "name": "value",
137
+ "type": {
138
+ "text": "string"
139
+ },
140
+ "description": "The value of the field.",
141
+ "fieldName": "value",
142
+ "inheritedFrom": {
143
+ "name": "InputMixin",
144
+ "package": "@vaadin/field-base/src/input-mixin.js"
145
+ }
85
146
  }
86
147
  ],
87
148
  "mixins": [
@@ -126,7 +187,7 @@
126
187
  "declarations": [
127
188
  {
128
189
  "kind": "class",
129
- "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
190
+ "description": "`<vaadin-password-field>` is an extension of `<vaadin-text-field>` component for entering passwords.\n\n```html\n<vaadin-password-field label=\"Password\"></vaadin-password-field>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|----------------\n`label` | The label element\n`input-field` | The element that wraps prefix, value and suffix\n`field-button` | Set on both clear and reveal buttons\n`clear-button` | The clear button\n`error-message` | The error message element\n`helper-text` | The helper text element wrapper\n`required-indicator` | The `required` state indicator element\n`reveal-button` | The eye icon which toggles the password visibility\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`has-value` | Set when the element has a value\n`has-label` | Set when the element has a label\n`has-helper` | Set when the element has helper text or slot\n`has-error-message` | Set when the element has an error message\n`has-tooltip` | Set when the element has a slotted tooltip\n`invalid` | Set when the element is invalid\n`input-prevented` | Temporarily set when invalid input is prevented\n`focused` | Set when the element is focused\n`focus-ring` | Set when the element is keyboard focused\n`readonly` | Set when the element is readonly\n`password-visible` | Set when the password is visible\n\nNote, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-field-default-width` |\n| `--vaadin-input-field-background` |\n| `--vaadin-input-field-border-color` |\n| `--vaadin-input-field-border-radius` |\n| `--vaadin-input-field-border-width` |\n| `--vaadin-input-field-bottom-end-radius` |\n| `--vaadin-input-field-bottom-start-radius` |\n| `--vaadin-input-field-button-text-color` |\n| `--vaadin-input-field-container-gap` |\n| `--vaadin-input-field-disabled-background` |\n| `--vaadin-input-field-disabled-text-color` |\n| `--vaadin-input-field-error-color` |\n| `--vaadin-input-field-error-font-size` |\n| `--vaadin-input-field-error-font-weight` |\n| `--vaadin-input-field-error-line-height` |\n| `--vaadin-input-field-gap` |\n| `--vaadin-input-field-helper-color` |\n| `--vaadin-input-field-helper-font-size` |\n| `--vaadin-input-field-helper-font-weight` |\n| `--vaadin-input-field-helper-line-height` |\n| `--vaadin-input-field-label-color` |\n| `--vaadin-input-field-label-font-size` |\n| `--vaadin-input-field-label-font-weight` |\n| `--vaadin-input-field-label-line-height` |\n| `--vaadin-input-field-padding` |\n| `--vaadin-input-field-placeholder-color` |\n| `--vaadin-input-field-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n| `--vaadin-input-field-top-end-radius` |\n| `--vaadin-input-field-top-start-radius` |\n| `--vaadin-input-field-value-color` |\n| `--vaadin-input-field-value-font-size` |\n| `--vaadin-input-field-value-font-weight` |\n| `--vaadin-input-field-value-line-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
130
191
  "name": "PasswordField",
131
192
  "members": [
132
193
  {
@@ -213,6 +274,20 @@
213
274
  "package": "@vaadin/field-base/src/input-field-mixin.js"
214
275
  }
215
276
  },
277
+ {
278
+ "kind": "field",
279
+ "name": "autofocus",
280
+ "privacy": "public",
281
+ "type": {
282
+ "text": "boolean"
283
+ },
284
+ "description": "Specify that this control should have input focus when the page loads.",
285
+ "attribute": "autofocus",
286
+ "inheritedFrom": {
287
+ "name": "DelegateFocusMixin",
288
+ "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
289
+ }
290
+ },
216
291
  {
217
292
  "kind": "field",
218
293
  "name": "autoselect",
@@ -227,6 +302,29 @@
227
302
  "package": "@vaadin/field-base/src/input-control-mixin.js"
228
303
  }
229
304
  },
305
+ {
306
+ "kind": "method",
307
+ "name": "checkValidity",
308
+ "description": "Returns true if the current input value satisfies all constraints (if any).",
309
+ "return": {
310
+ "type": {
311
+ "text": "boolean"
312
+ }
313
+ },
314
+ "inheritedFrom": {
315
+ "name": "InputConstraintsMixin",
316
+ "package": "@vaadin/field-base/src/input-constraints-mixin.js"
317
+ }
318
+ },
319
+ {
320
+ "kind": "method",
321
+ "name": "clear",
322
+ "description": "Clear the value of the field.",
323
+ "inheritedFrom": {
324
+ "name": "InputMixin",
325
+ "package": "@vaadin/field-base/src/input-mixin.js"
326
+ }
327
+ },
230
328
  {
231
329
  "kind": "field",
232
330
  "name": "clearButtonVisible",
@@ -241,6 +339,20 @@
241
339
  "package": "@vaadin/field-base/src/clear-button-mixin.js"
242
340
  }
243
341
  },
342
+ {
343
+ "kind": "field",
344
+ "name": "disabled",
345
+ "privacy": "public",
346
+ "type": {
347
+ "text": "boolean"
348
+ },
349
+ "description": "If true, the user cannot interact with this element.",
350
+ "attribute": "disabled",
351
+ "inheritedFrom": {
352
+ "name": "DisabledMixin",
353
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
354
+ }
355
+ },
244
356
  {
245
357
  "kind": "field",
246
358
  "name": "errorMessage",
@@ -283,6 +395,20 @@
283
395
  "module": "src/vaadin-password-field-mixin.js"
284
396
  }
285
397
  },
398
+ {
399
+ "kind": "field",
400
+ "name": "invalid",
401
+ "privacy": "public",
402
+ "type": {
403
+ "text": "boolean"
404
+ },
405
+ "description": "Set to true when the field is invalid.",
406
+ "attribute": "invalid",
407
+ "inheritedFrom": {
408
+ "name": "FieldMixin",
409
+ "package": "@vaadin/field-base/src/field-mixin.js"
410
+ }
411
+ },
286
412
  {
287
413
  "kind": "field",
288
414
  "name": "label",
@@ -297,6 +423,20 @@
297
423
  "package": "@vaadin/field-base/src/field-mixin.js"
298
424
  }
299
425
  },
426
+ {
427
+ "kind": "field",
428
+ "name": "manualValidation",
429
+ "privacy": "public",
430
+ "type": {
431
+ "text": "boolean"
432
+ },
433
+ "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
434
+ "attribute": "manual-validation",
435
+ "inheritedFrom": {
436
+ "name": "FieldMixin",
437
+ "package": "@vaadin/field-base/src/field-mixin.js"
438
+ }
439
+ },
300
440
  {
301
441
  "kind": "field",
302
442
  "name": "maxlength",
@@ -396,6 +536,20 @@
396
536
  "package": "@vaadin/field-base/src/input-control-mixin.js"
397
537
  }
398
538
  },
539
+ {
540
+ "kind": "field",
541
+ "name": "required",
542
+ "privacy": "public",
543
+ "type": {
544
+ "text": "boolean"
545
+ },
546
+ "description": "Specifies that the user must fill in a value.",
547
+ "attribute": "required",
548
+ "inheritedFrom": {
549
+ "name": "FieldMixin",
550
+ "package": "@vaadin/field-base/src/field-mixin.js"
551
+ }
552
+ },
399
553
  {
400
554
  "kind": "field",
401
555
  "name": "revealButtonHidden",
@@ -423,6 +577,34 @@
423
577
  "name": "InputControlMixin",
424
578
  "package": "@vaadin/field-base/src/input-control-mixin.js"
425
579
  }
580
+ },
581
+ {
582
+ "kind": "method",
583
+ "name": "validate",
584
+ "description": "Validates the field and sets the `invalid` property based on the result.\n\nThe method fires a `validated` event with the result of the validation.",
585
+ "return": {
586
+ "type": {
587
+ "text": "boolean"
588
+ }
589
+ },
590
+ "inheritedFrom": {
591
+ "name": "FieldMixin",
592
+ "package": "@vaadin/field-base/src/field-mixin.js"
593
+ }
594
+ },
595
+ {
596
+ "kind": "field",
597
+ "name": "value",
598
+ "privacy": "public",
599
+ "type": {
600
+ "text": "string"
601
+ },
602
+ "description": "The value of the field.",
603
+ "attribute": "value",
604
+ "inheritedFrom": {
605
+ "name": "InputMixin",
606
+ "package": "@vaadin/field-base/src/input-mixin.js"
607
+ }
426
608
  }
427
609
  ],
428
610
  "events": [
@@ -567,6 +749,18 @@
567
749
  "package": "@vaadin/field-base/src/input-field-mixin.js"
568
750
  }
569
751
  },
752
+ {
753
+ "name": "autofocus",
754
+ "type": {
755
+ "text": "boolean"
756
+ },
757
+ "description": "Specify that this control should have input focus when the page loads.",
758
+ "fieldName": "autofocus",
759
+ "inheritedFrom": {
760
+ "name": "DelegateFocusMixin",
761
+ "package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
762
+ }
763
+ },
570
764
  {
571
765
  "name": "autoselect",
572
766
  "type": {
@@ -591,6 +785,18 @@
591
785
  "package": "@vaadin/field-base/src/clear-button-mixin.js"
592
786
  }
593
787
  },
788
+ {
789
+ "name": "disabled",
790
+ "type": {
791
+ "text": "boolean"
792
+ },
793
+ "description": "If true, the user cannot interact with this element.",
794
+ "fieldName": "disabled",
795
+ "inheritedFrom": {
796
+ "name": "DisabledMixin",
797
+ "package": "@vaadin/a11y-base/src/disabled-mixin.js"
798
+ }
799
+ },
594
800
  {
595
801
  "name": "error-message",
596
802
  "type": {
@@ -615,6 +821,18 @@
615
821
  "package": "@vaadin/field-base/src/field-mixin.js"
616
822
  }
617
823
  },
824
+ {
825
+ "name": "invalid",
826
+ "type": {
827
+ "text": "boolean"
828
+ },
829
+ "description": "Set to true when the field is invalid.",
830
+ "fieldName": "invalid",
831
+ "inheritedFrom": {
832
+ "name": "FieldMixin",
833
+ "package": "@vaadin/field-base/src/field-mixin.js"
834
+ }
835
+ },
618
836
  {
619
837
  "name": "label",
620
838
  "type": {
@@ -627,6 +845,18 @@
627
845
  "package": "@vaadin/field-base/src/field-mixin.js"
628
846
  }
629
847
  },
848
+ {
849
+ "name": "manual-validation",
850
+ "type": {
851
+ "text": "boolean"
852
+ },
853
+ "description": "Set to true to enable manual validation mode. This mode disables automatic\nconstraint validation, allowing you to control the validation process yourself.\nYou can still trigger constraint validation manually with the `validate()` method\nor use `checkValidity()` to assess the component's validity without affecting\nthe invalid state. In manual validation mode, you can also manipulate\nthe `invalid` property directly through your application logic without conflicts\nwith the component's internal validation.",
854
+ "fieldName": "manualValidation",
855
+ "inheritedFrom": {
856
+ "name": "FieldMixin",
857
+ "package": "@vaadin/field-base/src/field-mixin.js"
858
+ }
859
+ },
630
860
  {
631
861
  "name": "maxlength",
632
862
  "type": {
@@ -711,6 +941,18 @@
711
941
  "package": "@vaadin/field-base/src/input-control-mixin.js"
712
942
  }
713
943
  },
944
+ {
945
+ "name": "required",
946
+ "type": {
947
+ "text": "boolean"
948
+ },
949
+ "description": "Specifies that the user must fill in a value.",
950
+ "fieldName": "required",
951
+ "inheritedFrom": {
952
+ "name": "FieldMixin",
953
+ "package": "@vaadin/field-base/src/field-mixin.js"
954
+ }
955
+ },
714
956
  {
715
957
  "name": "reveal-button-hidden",
716
958
  "type": {
@@ -734,6 +976,18 @@
734
976
  "name": "InputControlMixin",
735
977
  "package": "@vaadin/field-base/src/input-control-mixin.js"
736
978
  }
979
+ },
980
+ {
981
+ "name": "value",
982
+ "type": {
983
+ "text": "string"
984
+ },
985
+ "description": "The value of the field.",
986
+ "fieldName": "value",
987
+ "inheritedFrom": {
988
+ "name": "InputMixin",
989
+ "package": "@vaadin/field-base/src/input-mixin.js"
990
+ }
737
991
  }
738
992
  ]
739
993
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/password-field",
3
- "version": "25.2.0-alpha9",
3
+ "version": "25.2.0-beta1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,20 +35,20 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.2.0-alpha9",
39
- "@vaadin/button": "25.2.0-alpha9",
40
- "@vaadin/component-base": "25.2.0-alpha9",
41
- "@vaadin/field-base": "25.2.0-alpha9",
42
- "@vaadin/text-field": "25.2.0-alpha9",
43
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha9",
38
+ "@vaadin/a11y-base": "25.2.0-beta1",
39
+ "@vaadin/button": "25.2.0-beta1",
40
+ "@vaadin/component-base": "25.2.0-beta1",
41
+ "@vaadin/field-base": "25.2.0-beta1",
42
+ "@vaadin/text-field": "25.2.0-beta1",
43
+ "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
44
44
  "lit": "^3.0.0"
45
45
  },
46
46
  "devDependencies": {
47
- "@vaadin/aura": "25.2.0-alpha9",
48
- "@vaadin/chai-plugins": "25.2.0-alpha9",
49
- "@vaadin/test-runner-commands": "25.2.0-alpha9",
47
+ "@vaadin/aura": "25.2.0-beta1",
48
+ "@vaadin/chai-plugins": "25.2.0-beta1",
49
+ "@vaadin/test-runner-commands": "25.2.0-beta1",
50
50
  "@vaadin/testing-helpers": "^2.0.0",
51
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha9",
51
+ "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
52
52
  "sinon": "^21.0.2"
53
53
  },
54
54
  "customElements": "custom-elements.json",
@@ -56,5 +56,5 @@
56
56
  "web-types.json",
57
57
  "web-types.lit.json"
58
58
  ],
59
- "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
59
+ "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
60
60
  }
package/src/vaadin-password-field-button.js CHANGED
@@ -17,9 +17,6 @@ import { passwordFieldButton } from './styles/vaadin-password-field-button-base-
17
17
  *
18
18
  * @customElement vaadin-password-field-button
19
19
  * @extends HTMLElement
20
- * @mixes ButtonMixin
21
- * @mixes DirMixin
22
- * @mixes ThemableMixin
23
20
  * @private
24
21
  */
25
22
  class PasswordFieldButton extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
package/src/vaadin-password-field-mixin.js CHANGED
@@ -9,13 +9,6 @@ import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
9
9
  import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
10
10
  import { InputMixin } from '@vaadin/field-base/src/input-mixin.js';
11
11
 
12
- /**
13
- * @polymerMixin
14
- * @mixes DisabledMixin
15
- * @mixes FocusMixin
16
- * @mixes InputMixin
17
- * @mixes SlotStylesMixin
18
- */
19
12
  export const PasswordFieldMixin = (superClass) =>
20
13
  class PasswordFieldMixinClass extends SlotStylesMixin(DisabledMixin(FocusMixin(InputMixin(superClass)))) {
21
14
  static get properties() {
package/src/vaadin-password-field.d.ts CHANGED
@@ -81,6 +81,45 @@ export interface PasswordFieldEventMap extends HTMLElementEventMap, PasswordFiel
81
81
  *
82
82
  * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
83
83
  *
84
+ * The following custom CSS properties are available for styling:
85
+ *
86
+ * Custom CSS property |
87
+ * :--------------------------------------------------|
88
+ * | `--vaadin-field-default-width` |
89
+ * | `--vaadin-input-field-background` |
90
+ * | `--vaadin-input-field-border-color` |
91
+ * | `--vaadin-input-field-border-radius` |
92
+ * | `--vaadin-input-field-border-width` |
93
+ * | `--vaadin-input-field-bottom-end-radius` |
94
+ * | `--vaadin-input-field-bottom-start-radius` |
95
+ * | `--vaadin-input-field-button-text-color` |
96
+ * | `--vaadin-input-field-container-gap` |
97
+ * | `--vaadin-input-field-disabled-background` |
98
+ * | `--vaadin-input-field-disabled-text-color` |
99
+ * | `--vaadin-input-field-error-color` |
100
+ * | `--vaadin-input-field-error-font-size` |
101
+ * | `--vaadin-input-field-error-font-weight` |
102
+ * | `--vaadin-input-field-error-line-height` |
103
+ * | `--vaadin-input-field-gap` |
104
+ * | `--vaadin-input-field-helper-color` |
105
+ * | `--vaadin-input-field-helper-font-size` |
106
+ * | `--vaadin-input-field-helper-font-weight` |
107
+ * | `--vaadin-input-field-helper-line-height` |
108
+ * | `--vaadin-input-field-label-color` |
109
+ * | `--vaadin-input-field-label-font-size` |
110
+ * | `--vaadin-input-field-label-font-weight` |
111
+ * | `--vaadin-input-field-label-line-height` |
112
+ * | `--vaadin-input-field-padding` |
113
+ * | `--vaadin-input-field-placeholder-color` |
114
+ * | `--vaadin-input-field-required-indicator` |
115
+ * | `--vaadin-input-field-required-indicator-color` |
116
+ * | `--vaadin-input-field-top-end-radius` |
117
+ * | `--vaadin-input-field-top-start-radius` |
118
+ * | `--vaadin-input-field-value-color` |
119
+ * | `--vaadin-input-field-value-font-size` |
120
+ * | `--vaadin-input-field-value-font-weight` |
121
+ * | `--vaadin-input-field-value-line-height` |
122
+ *
84
123
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
85
124
  *
86
125
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
package/src/vaadin-password-field.js CHANGED
@@ -51,6 +51,45 @@ import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
51
51
  *
52
52
  * Note, the `input-prevented` state attribute is only supported when `allowedCharPattern` is set.
53
53
  *
54
+ * The following custom CSS properties are available for styling:
55
+ *
56
+ * Custom CSS property |
57
+ * :--------------------------------------------------|
58
+ * | `--vaadin-field-default-width` |
59
+ * | `--vaadin-input-field-background` |
60
+ * | `--vaadin-input-field-border-color` |
61
+ * | `--vaadin-input-field-border-radius` |
62
+ * | `--vaadin-input-field-border-width` |
63
+ * | `--vaadin-input-field-bottom-end-radius` |
64
+ * | `--vaadin-input-field-bottom-start-radius` |
65
+ * | `--vaadin-input-field-button-text-color` |
66
+ * | `--vaadin-input-field-container-gap` |
67
+ * | `--vaadin-input-field-disabled-background` |
68
+ * | `--vaadin-input-field-disabled-text-color` |
69
+ * | `--vaadin-input-field-error-color` |
70
+ * | `--vaadin-input-field-error-font-size` |
71
+ * | `--vaadin-input-field-error-font-weight` |
72
+ * | `--vaadin-input-field-error-line-height` |
73
+ * | `--vaadin-input-field-gap` |
74
+ * | `--vaadin-input-field-helper-color` |
75
+ * | `--vaadin-input-field-helper-font-size` |
76
+ * | `--vaadin-input-field-helper-font-weight` |
77
+ * | `--vaadin-input-field-helper-line-height` |
78
+ * | `--vaadin-input-field-label-color` |
79
+ * | `--vaadin-input-field-label-font-size` |
80
+ * | `--vaadin-input-field-label-font-weight` |
81
+ * | `--vaadin-input-field-label-line-height` |
82
+ * | `--vaadin-input-field-padding` |
83
+ * | `--vaadin-input-field-placeholder-color` |
84
+ * | `--vaadin-input-field-required-indicator` |
85
+ * | `--vaadin-input-field-required-indicator-color` |
86
+ * | `--vaadin-input-field-top-end-radius` |
87
+ * | `--vaadin-input-field-top-start-radius` |
88
+ * | `--vaadin-input-field-value-color` |
89
+ * | `--vaadin-input-field-value-font-size` |
90
+ * | `--vaadin-input-field-value-font-weight` |
91
+ * | `--vaadin-input-field-value-line-height` |
92
+ *
54
93
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
55
94
  *
56
95
  * @fires {Event} input - Fired when the value is changed by the user: on every typing keystroke, and the value is cleared using the clear button.
@@ -61,7 +100,6 @@ import { PasswordFieldMixin } from './vaadin-password-field-mixin.js';
61
100
  *
62
101
  * @customElement vaadin-password-field
63
102
  * @extends TextField
64
- * @mixes PasswordFieldMixin
65
103
  */
66
104
  export class PasswordField extends PasswordFieldMixin(TextField) {
67
105
  static get is() {