@vaadin/checkbox 25.2.7 → 25.3.0-alpha10
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.
- package/custom-elements.json +107 -74
- package/package.json +10 -10
- package/src/styles/vaadin-checkbox-base-styles.js +0 -7
- package/src/vaadin-checkbox-mixin.d.ts +3 -12
- package/src/vaadin-checkbox-mixin.js +15 -58
- package/src/vaadin-checkbox.d.ts +9 -0
- package/src/vaadin-checkbox.js +43 -1
- package/web-types.json +30 -14
- package/web-types.lit.json +13 -6
package/custom-elements.json
CHANGED
|
@@ -26,6 +26,20 @@
|
|
|
26
26
|
"description": "A mixin providing common checkbox functionality.",
|
|
27
27
|
"name": "CheckboxMixin",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "accessibleDescriptionRef",
|
|
32
|
+
"privacy": "public",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "string"
|
|
35
|
+
},
|
|
36
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
37
|
+
"attribute": "accessible-description-ref",
|
|
38
|
+
"inheritedFrom": {
|
|
39
|
+
"name": "FieldMixin",
|
|
40
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
29
43
|
{
|
|
30
44
|
"kind": "field",
|
|
31
45
|
"name": "accessibleName",
|
|
@@ -33,7 +47,7 @@
|
|
|
33
47
|
"type": {
|
|
34
48
|
"text": "string"
|
|
35
49
|
},
|
|
36
|
-
"description": "String used to label the component
|
|
50
|
+
"description": "String used to label the component for screen reader users.",
|
|
37
51
|
"attribute": "accessible-name",
|
|
38
52
|
"inheritedFrom": {
|
|
39
53
|
"name": "FieldMixin",
|
|
@@ -47,7 +61,7 @@
|
|
|
47
61
|
"type": {
|
|
48
62
|
"text": "string"
|
|
49
63
|
},
|
|
50
|
-
"description": "
|
|
64
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
51
65
|
"attribute": "accessible-name-ref",
|
|
52
66
|
"inheritedFrom": {
|
|
53
67
|
"name": "FieldMixin",
|
|
@@ -147,16 +161,6 @@
|
|
|
147
161
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
148
162
|
}
|
|
149
163
|
},
|
|
150
|
-
{
|
|
151
|
-
"kind": "field",
|
|
152
|
-
"name": "indeterminate",
|
|
153
|
-
"privacy": "public",
|
|
154
|
-
"type": {
|
|
155
|
-
"text": "boolean"
|
|
156
|
-
},
|
|
157
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
|
|
158
|
-
"attribute": "indeterminate"
|
|
159
|
-
},
|
|
160
164
|
{
|
|
161
165
|
"kind": "field",
|
|
162
166
|
"name": "invalid",
|
|
@@ -206,7 +210,7 @@
|
|
|
206
210
|
"type": {
|
|
207
211
|
"text": "string"
|
|
208
212
|
},
|
|
209
|
-
"description": "The name of the
|
|
213
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
210
214
|
"attribute": "name"
|
|
211
215
|
},
|
|
212
216
|
{
|
|
@@ -216,7 +220,7 @@
|
|
|
216
220
|
"type": {
|
|
217
221
|
"text": "boolean"
|
|
218
222
|
},
|
|
219
|
-
"description": "When true, the user cannot modify the value of the
|
|
223
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
220
224
|
"attribute": "readonly"
|
|
221
225
|
},
|
|
222
226
|
{
|
|
@@ -263,12 +267,24 @@
|
|
|
263
267
|
}
|
|
264
268
|
],
|
|
265
269
|
"attributes": [
|
|
270
|
+
{
|
|
271
|
+
"name": "accessible-description-ref",
|
|
272
|
+
"type": {
|
|
273
|
+
"text": "string"
|
|
274
|
+
},
|
|
275
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
276
|
+
"fieldName": "accessibleDescriptionRef",
|
|
277
|
+
"inheritedFrom": {
|
|
278
|
+
"name": "FieldMixin",
|
|
279
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
280
|
+
}
|
|
281
|
+
},
|
|
266
282
|
{
|
|
267
283
|
"name": "accessible-name",
|
|
268
284
|
"type": {
|
|
269
285
|
"text": "string"
|
|
270
286
|
},
|
|
271
|
-
"description": "String used to label the component
|
|
287
|
+
"description": "String used to label the component for screen reader users.",
|
|
272
288
|
"fieldName": "accessibleName",
|
|
273
289
|
"inheritedFrom": {
|
|
274
290
|
"name": "FieldMixin",
|
|
@@ -280,7 +296,7 @@
|
|
|
280
296
|
"type": {
|
|
281
297
|
"text": "string"
|
|
282
298
|
},
|
|
283
|
-
"description": "
|
|
299
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
284
300
|
"fieldName": "accessibleNameRef",
|
|
285
301
|
"inheritedFrom": {
|
|
286
302
|
"name": "FieldMixin",
|
|
@@ -347,14 +363,6 @@
|
|
|
347
363
|
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
348
364
|
}
|
|
349
365
|
},
|
|
350
|
-
{
|
|
351
|
-
"name": "indeterminate",
|
|
352
|
-
"type": {
|
|
353
|
-
"text": "boolean"
|
|
354
|
-
},
|
|
355
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes",
|
|
356
|
-
"fieldName": "indeterminate"
|
|
357
|
-
},
|
|
358
366
|
{
|
|
359
367
|
"name": "invalid",
|
|
360
368
|
"type": {
|
|
@@ -396,7 +404,7 @@
|
|
|
396
404
|
"type": {
|
|
397
405
|
"text": "string"
|
|
398
406
|
},
|
|
399
|
-
"description": "The name of the
|
|
407
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
400
408
|
"fieldName": "name"
|
|
401
409
|
},
|
|
402
410
|
{
|
|
@@ -404,7 +412,7 @@
|
|
|
404
412
|
"type": {
|
|
405
413
|
"text": "boolean"
|
|
406
414
|
},
|
|
407
|
-
"description": "When true, the user cannot modify the value of the
|
|
415
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
408
416
|
"fieldName": "readonly"
|
|
409
417
|
},
|
|
410
418
|
{
|
|
@@ -493,6 +501,20 @@
|
|
|
493
501
|
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`checkbox` | The element representing a stylable custom checkbox\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`readonly` | Set when the checkbox is readonly.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`invalid` | Set when the checkbox is invalid.\n`has-label` | Set when the checkbox has a label.\n`has-helper` | Set when the checkbox has helper text.\n`has-error-message` | Set when the checkbox has an error message.\n`has-tooltip` | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background` |\n| `--vaadin-checkbox-border-color` |\n| `--vaadin-checkbox-border-radius` |\n| `--vaadin-checkbox-border-width` |\n| `--vaadin-checkbox-gap` |\n| `--vaadin-checkbox-label-color` |\n| `--vaadin-checkbox-label-font-size` |\n| `--vaadin-checkbox-label-font-weight` |\n| `--vaadin-checkbox-label-line-height` |\n| `--vaadin-checkbox-marker-color` |\n| `--vaadin-checkbox-marker-size` |\n| `--vaadin-checkbox-size` |\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-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-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
494
502
|
"name": "Checkbox",
|
|
495
503
|
"members": [
|
|
504
|
+
{
|
|
505
|
+
"kind": "field",
|
|
506
|
+
"name": "accessibleDescriptionRef",
|
|
507
|
+
"privacy": "public",
|
|
508
|
+
"type": {
|
|
509
|
+
"text": "string"
|
|
510
|
+
},
|
|
511
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
512
|
+
"attribute": "accessible-description-ref",
|
|
513
|
+
"inheritedFrom": {
|
|
514
|
+
"name": "FieldMixin",
|
|
515
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
516
|
+
}
|
|
517
|
+
},
|
|
496
518
|
{
|
|
497
519
|
"kind": "field",
|
|
498
520
|
"name": "accessibleName",
|
|
@@ -500,7 +522,7 @@
|
|
|
500
522
|
"type": {
|
|
501
523
|
"text": "string"
|
|
502
524
|
},
|
|
503
|
-
"description": "String used to label the component
|
|
525
|
+
"description": "String used to label the component for screen reader users.",
|
|
504
526
|
"attribute": "accessible-name",
|
|
505
527
|
"inheritedFrom": {
|
|
506
528
|
"name": "FieldMixin",
|
|
@@ -514,7 +536,7 @@
|
|
|
514
536
|
"type": {
|
|
515
537
|
"text": "string"
|
|
516
538
|
},
|
|
517
|
-
"description": "
|
|
539
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
518
540
|
"attribute": "accessible-name-ref",
|
|
519
541
|
"inheritedFrom": {
|
|
520
542
|
"name": "FieldMixin",
|
|
@@ -620,12 +642,8 @@
|
|
|
620
642
|
"type": {
|
|
621
643
|
"text": "boolean"
|
|
622
644
|
},
|
|
623
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
624
|
-
"attribute": "indeterminate"
|
|
625
|
-
"inheritedFrom": {
|
|
626
|
-
"name": "CheckboxMixin",
|
|
627
|
-
"module": "src/vaadin-checkbox-mixin.js"
|
|
628
|
-
}
|
|
645
|
+
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
|
|
646
|
+
"attribute": "indeterminate"
|
|
629
647
|
},
|
|
630
648
|
{
|
|
631
649
|
"kind": "field",
|
|
@@ -676,7 +694,7 @@
|
|
|
676
694
|
"type": {
|
|
677
695
|
"text": "string"
|
|
678
696
|
},
|
|
679
|
-
"description": "The name of the
|
|
697
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
680
698
|
"attribute": "name",
|
|
681
699
|
"inheritedFrom": {
|
|
682
700
|
"name": "CheckboxMixin",
|
|
@@ -690,7 +708,7 @@
|
|
|
690
708
|
"type": {
|
|
691
709
|
"text": "boolean"
|
|
692
710
|
},
|
|
693
|
-
"description": "When true, the user cannot modify the value of the
|
|
711
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
694
712
|
"attribute": "readonly",
|
|
695
713
|
"inheritedFrom": {
|
|
696
714
|
"name": "CheckboxMixin",
|
|
@@ -777,41 +795,25 @@
|
|
|
777
795
|
"name": "validated"
|
|
778
796
|
}
|
|
779
797
|
],
|
|
780
|
-
"
|
|
781
|
-
{
|
|
782
|
-
"name": "CheckboxMixin",
|
|
783
|
-
"module": "src/vaadin-checkbox-mixin.js"
|
|
784
|
-
},
|
|
785
|
-
{
|
|
786
|
-
"name": "ElementMixin",
|
|
787
|
-
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
788
|
-
},
|
|
789
|
-
{
|
|
790
|
-
"name": "ThemableMixin",
|
|
791
|
-
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
792
|
-
},
|
|
798
|
+
"attributes": [
|
|
793
799
|
{
|
|
794
|
-
"name": "
|
|
795
|
-
"
|
|
800
|
+
"name": "accessible-description-ref",
|
|
801
|
+
"type": {
|
|
802
|
+
"text": "string"
|
|
803
|
+
},
|
|
804
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
805
|
+
"fieldName": "accessibleDescriptionRef",
|
|
806
|
+
"inheritedFrom": {
|
|
807
|
+
"name": "FieldMixin",
|
|
808
|
+
"package": "@vaadin/field-base/src/field-mixin.js"
|
|
809
|
+
}
|
|
796
810
|
},
|
|
797
|
-
{
|
|
798
|
-
"name": "LumoInjectionMixin",
|
|
799
|
-
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
800
|
-
}
|
|
801
|
-
],
|
|
802
|
-
"superclass": {
|
|
803
|
-
"name": "LitElement",
|
|
804
|
-
"package": "lit"
|
|
805
|
-
},
|
|
806
|
-
"tagName": "vaadin-checkbox",
|
|
807
|
-
"customElement": true,
|
|
808
|
-
"attributes": [
|
|
809
811
|
{
|
|
810
812
|
"name": "accessible-name",
|
|
811
813
|
"type": {
|
|
812
814
|
"text": "string"
|
|
813
815
|
},
|
|
814
|
-
"description": "String used to label the component
|
|
816
|
+
"description": "String used to label the component for screen reader users.",
|
|
815
817
|
"fieldName": "accessibleName",
|
|
816
818
|
"inheritedFrom": {
|
|
817
819
|
"name": "FieldMixin",
|
|
@@ -823,7 +825,7 @@
|
|
|
823
825
|
"type": {
|
|
824
826
|
"text": "string"
|
|
825
827
|
},
|
|
826
|
-
"description": "
|
|
828
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
827
829
|
"fieldName": "accessibleNameRef",
|
|
828
830
|
"inheritedFrom": {
|
|
829
831
|
"name": "FieldMixin",
|
|
@@ -895,12 +897,8 @@
|
|
|
895
897
|
"type": {
|
|
896
898
|
"text": "boolean"
|
|
897
899
|
},
|
|
898
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
899
|
-
"fieldName": "indeterminate"
|
|
900
|
-
"inheritedFrom": {
|
|
901
|
-
"name": "CheckboxMixin",
|
|
902
|
-
"module": "src/vaadin-checkbox-mixin.js"
|
|
903
|
-
}
|
|
900
|
+
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
|
|
901
|
+
"fieldName": "indeterminate"
|
|
904
902
|
},
|
|
905
903
|
{
|
|
906
904
|
"name": "invalid",
|
|
@@ -943,7 +941,7 @@
|
|
|
943
941
|
"type": {
|
|
944
942
|
"text": "string"
|
|
945
943
|
},
|
|
946
|
-
"description": "The name of the
|
|
944
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
947
945
|
"fieldName": "name",
|
|
948
946
|
"inheritedFrom": {
|
|
949
947
|
"name": "CheckboxMixin",
|
|
@@ -955,7 +953,7 @@
|
|
|
955
953
|
"type": {
|
|
956
954
|
"text": "boolean"
|
|
957
955
|
},
|
|
958
|
-
"description": "When true, the user cannot modify the value of the
|
|
956
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
959
957
|
"fieldName": "readonly",
|
|
960
958
|
"inheritedFrom": {
|
|
961
959
|
"name": "CheckboxMixin",
|
|
@@ -974,6 +972,13 @@
|
|
|
974
972
|
"package": "@vaadin/field-base/src/validate-mixin.js"
|
|
975
973
|
}
|
|
976
974
|
},
|
|
975
|
+
{
|
|
976
|
+
"type": {
|
|
977
|
+
"text": "string"
|
|
978
|
+
},
|
|
979
|
+
"description": "The theme variants to apply to the component.",
|
|
980
|
+
"name": "theme"
|
|
981
|
+
},
|
|
977
982
|
{
|
|
978
983
|
"name": "value",
|
|
979
984
|
"type": {
|
|
@@ -986,7 +991,35 @@
|
|
|
986
991
|
"package": "@vaadin/field-base/src/input-mixin.js"
|
|
987
992
|
}
|
|
988
993
|
}
|
|
989
|
-
]
|
|
994
|
+
],
|
|
995
|
+
"mixins": [
|
|
996
|
+
{
|
|
997
|
+
"name": "CheckboxMixin",
|
|
998
|
+
"module": "src/vaadin-checkbox-mixin.js"
|
|
999
|
+
},
|
|
1000
|
+
{
|
|
1001
|
+
"name": "ElementMixin",
|
|
1002
|
+
"package": "@vaadin/component-base/src/element-mixin.js"
|
|
1003
|
+
},
|
|
1004
|
+
{
|
|
1005
|
+
"name": "ThemableMixin",
|
|
1006
|
+
"package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
|
|
1007
|
+
},
|
|
1008
|
+
{
|
|
1009
|
+
"name": "PolylitMixin",
|
|
1010
|
+
"package": "@vaadin/component-base/src/polylit-mixin.js"
|
|
1011
|
+
},
|
|
1012
|
+
{
|
|
1013
|
+
"name": "LumoInjectionMixin",
|
|
1014
|
+
"package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
|
|
1015
|
+
}
|
|
1016
|
+
],
|
|
1017
|
+
"superclass": {
|
|
1018
|
+
"name": "LitElement",
|
|
1019
|
+
"package": "lit"
|
|
1020
|
+
},
|
|
1021
|
+
"tagName": "vaadin-checkbox",
|
|
1022
|
+
"customElement": true
|
|
990
1023
|
}
|
|
991
1024
|
],
|
|
992
1025
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/checkbox",
|
|
3
|
-
"version": "25.
|
|
3
|
+
"version": "25.3.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "
|
|
39
|
-
"@vaadin/component-base": "
|
|
40
|
-
"@vaadin/field-base": "
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-alpha10",
|
|
40
|
+
"@vaadin/field-base": "25.3.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/aura": "
|
|
46
|
-
"@vaadin/chai-plugins": "
|
|
47
|
-
"@vaadin/test-runner-commands": "
|
|
45
|
+
"@vaadin/aura": "25.3.0-alpha10",
|
|
46
|
+
"@vaadin/chai-plugins": "25.3.0-alpha10",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha10",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha10",
|
|
50
50
|
"sinon": "^22.0.0"
|
|
51
51
|
},
|
|
52
52
|
"customElements": "custom-elements.json",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
|
|
58
58
|
}
|
|
@@ -20,13 +20,6 @@ const checkbox = css`
|
|
|
20
20
|
filter: var(--vaadin-checkbox-checkmark-color, var(--_filter));
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
-
:host([readonly]) {
|
|
24
|
-
--vaadin-checkbox-background: transparent;
|
|
25
|
-
--vaadin-checkbox-border-color: var(--vaadin-border-color);
|
|
26
|
-
--vaadin-checkbox-marker-color: var(--vaadin-text-color);
|
|
27
|
-
--_border-style: dashed;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
23
|
:host([indeterminate]) [part='checkbox']::after {
|
|
31
24
|
mask-image: var(--_vaadin-icon-minus);
|
|
32
25
|
}
|
|
@@ -39,23 +39,14 @@ export declare function CheckboxMixin<T extends Constructor<HTMLElement>>(
|
|
|
39
39
|
|
|
40
40
|
export declare class CheckboxMixinClass {
|
|
41
41
|
/**
|
|
42
|
-
*
|
|
43
|
-
* it is not possible to say whether it is checked or unchecked.
|
|
44
|
-
* The state is reset once the user switches the checkbox by hand.
|
|
45
|
-
*
|
|
46
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
|
|
47
|
-
*/
|
|
48
|
-
indeterminate: boolean;
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* The name of the checkbox.
|
|
42
|
+
* The name of the control, which is submitted with the form data.
|
|
52
43
|
*/
|
|
53
44
|
name: string;
|
|
54
45
|
|
|
55
46
|
/**
|
|
56
|
-
* When true, the user cannot modify the value of the
|
|
47
|
+
* When true, the user cannot modify the value of the control.
|
|
57
48
|
* The difference between `disabled` and `readonly` is that the
|
|
58
|
-
* read-only
|
|
49
|
+
* read-only element remains focusable, is announced by screen
|
|
59
50
|
* readers and its value can be submitted as part of the form.
|
|
60
51
|
*/
|
|
61
52
|
readonly: boolean;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { ActiveMixin } from '@vaadin/a11y-base/src/active-mixin.js';
|
|
7
7
|
import { DelegateFocusMixin } from '@vaadin/a11y-base/src/delegate-focus-mixin.js';
|
|
8
|
+
import { setOrRemoveAttribute } from '@vaadin/component-base/src/dom-utils.js';
|
|
8
9
|
import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
9
10
|
import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
|
|
10
11
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
@@ -21,21 +22,7 @@ export const CheckboxMixin = (superclass) =>
|
|
|
21
22
|
static get properties() {
|
|
22
23
|
return {
|
|
23
24
|
/**
|
|
24
|
-
*
|
|
25
|
-
* it is not possible to say whether it is checked or unchecked.
|
|
26
|
-
* The state is reset once the user switches the checkbox by hand.
|
|
27
|
-
*
|
|
28
|
-
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes
|
|
29
|
-
*/
|
|
30
|
-
indeterminate: {
|
|
31
|
-
type: Boolean,
|
|
32
|
-
notify: true,
|
|
33
|
-
value: false,
|
|
34
|
-
reflectToAttribute: true,
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* The name of the checkbox.
|
|
25
|
+
* The name of the control, which is submitted with the form data.
|
|
39
26
|
*/
|
|
40
27
|
name: {
|
|
41
28
|
type: String,
|
|
@@ -43,9 +30,9 @@ export const CheckboxMixin = (superclass) =>
|
|
|
43
30
|
},
|
|
44
31
|
|
|
45
32
|
/**
|
|
46
|
-
* When true, the user cannot modify the value of the
|
|
33
|
+
* When true, the user cannot modify the value of the control.
|
|
47
34
|
* The difference between `disabled` and `readonly` is that the
|
|
48
|
-
* read-only
|
|
35
|
+
* read-only element remains focusable, is announced by screen
|
|
49
36
|
* readers and its value can be submitted as part of the form.
|
|
50
37
|
*/
|
|
51
38
|
readonly: {
|
|
@@ -60,11 +47,6 @@ export const CheckboxMixin = (superclass) =>
|
|
|
60
47
|
return ['__readonlyChanged(readonly, inputElement)'];
|
|
61
48
|
}
|
|
62
49
|
|
|
63
|
-
/** @override */
|
|
64
|
-
static get delegateProps() {
|
|
65
|
-
return [...super.delegateProps, 'indeterminate'];
|
|
66
|
-
}
|
|
67
|
-
|
|
68
50
|
/** @override */
|
|
69
51
|
static get delegateAttrs() {
|
|
70
52
|
return [...super.delegateAttrs, 'name', 'invalid', 'required'];
|
|
@@ -124,6 +106,16 @@ export const CheckboxMixin = (superclass) =>
|
|
|
124
106
|
this._createPropertyObserver('checked', '_checkedChanged');
|
|
125
107
|
}
|
|
126
108
|
|
|
109
|
+
/** @protected */
|
|
110
|
+
updated(props) {
|
|
111
|
+
super.updated(props);
|
|
112
|
+
|
|
113
|
+
// Validate when the required constraint is removed.
|
|
114
|
+
if (props.has('required') && this.required === false) {
|
|
115
|
+
this._requestValidation();
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
127
119
|
/**
|
|
128
120
|
* Override method inherited from `ActiveMixin` to only set the `active`
|
|
129
121
|
* attribute for clicks that actually toggle the checked state.
|
|
@@ -187,27 +179,7 @@ export const CheckboxMixin = (superclass) =>
|
|
|
187
179
|
}
|
|
188
180
|
|
|
189
181
|
// Use aria-readonly since native checkbox doesn't support readonly
|
|
190
|
-
|
|
191
|
-
inputElement.setAttribute('aria-readonly', 'true');
|
|
192
|
-
} else {
|
|
193
|
-
inputElement.removeAttribute('aria-readonly');
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* Override method inherited from `CheckedMixin` to reset
|
|
199
|
-
* `indeterminate` state checkbox is toggled by the user.
|
|
200
|
-
*
|
|
201
|
-
* @param {boolean} checked
|
|
202
|
-
* @protected
|
|
203
|
-
* @override
|
|
204
|
-
*/
|
|
205
|
-
_toggleChecked(checked) {
|
|
206
|
-
if (this.indeterminate) {
|
|
207
|
-
this.indeterminate = false;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
super._toggleChecked(checked);
|
|
182
|
+
setOrRemoveAttribute(inputElement, 'aria-readonly', readonly);
|
|
211
183
|
}
|
|
212
184
|
|
|
213
185
|
/**
|
|
@@ -240,21 +212,6 @@ export const CheckboxMixin = (superclass) =>
|
|
|
240
212
|
}
|
|
241
213
|
}
|
|
242
214
|
|
|
243
|
-
/**
|
|
244
|
-
* Override an observer from `FieldMixin`
|
|
245
|
-
* to validate when required is removed.
|
|
246
|
-
*
|
|
247
|
-
* @protected
|
|
248
|
-
* @override
|
|
249
|
-
*/
|
|
250
|
-
_requiredChanged(required) {
|
|
251
|
-
super._requiredChanged(required);
|
|
252
|
-
|
|
253
|
-
if (required === false) {
|
|
254
|
-
this._requestValidation();
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
|
|
258
215
|
/** @private */
|
|
259
216
|
_onRequiredIndicatorClick() {
|
|
260
217
|
this._labelNode.click();
|
package/src/vaadin-checkbox.d.ts
CHANGED
|
@@ -120,6 +120,15 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
|
|
|
120
120
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
121
121
|
*/
|
|
122
122
|
declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
|
|
123
|
+
/**
|
|
124
|
+
* True if the checkbox is in the indeterminate state which means
|
|
125
|
+
* it is not possible to say whether it is checked or unchecked.
|
|
126
|
+
* The state is reset once the user switches the checkbox by hand.
|
|
127
|
+
*
|
|
128
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes
|
|
129
|
+
*/
|
|
130
|
+
indeterminate: boolean;
|
|
131
|
+
|
|
123
132
|
addEventListener<K extends keyof CheckboxEventMap>(
|
|
124
133
|
type: K,
|
|
125
134
|
listener: (this: Checkbox, ev: CheckboxEventMap[K]) => void,
|
package/src/vaadin-checkbox.js
CHANGED
|
@@ -84,10 +84,11 @@ import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
|
|
|
84
84
|
* @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
|
|
85
85
|
* @fires {CustomEvent} validated - Fired whenever the field is validated.
|
|
86
86
|
*
|
|
87
|
+
* @attr {string} theme - The theme variants to apply to the component.
|
|
87
88
|
* @customElement vaadin-checkbox
|
|
88
89
|
* @extends HTMLElement
|
|
89
90
|
*/
|
|
90
|
-
|
|
91
|
+
class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
91
92
|
static get is() {
|
|
92
93
|
return 'vaadin-checkbox';
|
|
93
94
|
}
|
|
@@ -96,6 +97,29 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
|
|
|
96
97
|
return checkboxStyles;
|
|
97
98
|
}
|
|
98
99
|
|
|
100
|
+
static get properties() {
|
|
101
|
+
return {
|
|
102
|
+
/**
|
|
103
|
+
* True if the checkbox is in the indeterminate state which means
|
|
104
|
+
* it is not possible to say whether it is checked or unchecked.
|
|
105
|
+
* The state is reset once the user switches the checkbox by hand.
|
|
106
|
+
*
|
|
107
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes
|
|
108
|
+
*/
|
|
109
|
+
indeterminate: {
|
|
110
|
+
type: Boolean,
|
|
111
|
+
notify: true,
|
|
112
|
+
value: false,
|
|
113
|
+
reflectToAttribute: true,
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/** @override */
|
|
119
|
+
static get delegateProps() {
|
|
120
|
+
return [...super.delegateProps, 'indeterminate'];
|
|
121
|
+
}
|
|
122
|
+
|
|
99
123
|
/** @protected */
|
|
100
124
|
render() {
|
|
101
125
|
return html`
|
|
@@ -125,6 +149,24 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
|
|
|
125
149
|
this._tooltipController.setAriaTarget(this.inputElement);
|
|
126
150
|
this.addController(this._tooltipController);
|
|
127
151
|
}
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* Override method inherited from `CheckedMixin` to reset
|
|
155
|
+
* `indeterminate` when the checkbox is toggled by the user.
|
|
156
|
+
*
|
|
157
|
+
* @param {boolean} checked
|
|
158
|
+
* @protected
|
|
159
|
+
* @override
|
|
160
|
+
*/
|
|
161
|
+
_toggleChecked(checked) {
|
|
162
|
+
if (this.indeterminate) {
|
|
163
|
+
this.indeterminate = false;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
super._toggleChecked(checked);
|
|
167
|
+
}
|
|
128
168
|
}
|
|
129
169
|
|
|
130
170
|
defineCustomElement(Checkbox);
|
|
171
|
+
|
|
172
|
+
export { Checkbox };
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/checkbox",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -10,9 +10,18 @@
|
|
|
10
10
|
"name": "vaadin-checkbox",
|
|
11
11
|
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`checkbox` | The element representing a stylable custom checkbox\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`readonly` | Set when the checkbox is readonly.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`invalid` | Set when the checkbox is invalid.\n`has-label` | Set when the checkbox has a label.\n`has-helper` | Set when the checkbox has helper text.\n`has-error-message` | Set when the checkbox has an error message.\n`has-tooltip` | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background` |\n| `--vaadin-checkbox-border-color` |\n| `--vaadin-checkbox-border-radius` |\n| `--vaadin-checkbox-border-width` |\n| `--vaadin-checkbox-gap` |\n| `--vaadin-checkbox-label-color` |\n| `--vaadin-checkbox-label-font-size` |\n| `--vaadin-checkbox-label-font-weight` |\n| `--vaadin-checkbox-label-line-height` |\n| `--vaadin-checkbox-marker-color` |\n| `--vaadin-checkbox-marker-size` |\n| `--vaadin-checkbox-size` |\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-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-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
|
+
{
|
|
14
|
+
"name": "accessible-description-ref",
|
|
15
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
16
|
+
"value": {
|
|
17
|
+
"type": [
|
|
18
|
+
"string"
|
|
19
|
+
]
|
|
20
|
+
}
|
|
21
|
+
},
|
|
13
22
|
{
|
|
14
23
|
"name": "accessible-name",
|
|
15
|
-
"description": "String used to label the component
|
|
24
|
+
"description": "String used to label the component for screen reader users.",
|
|
16
25
|
"value": {
|
|
17
26
|
"type": [
|
|
18
27
|
"string"
|
|
@@ -21,7 +30,7 @@
|
|
|
21
30
|
},
|
|
22
31
|
{
|
|
23
32
|
"name": "accessible-name-ref",
|
|
24
|
-
"description": "
|
|
33
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
25
34
|
"value": {
|
|
26
35
|
"type": [
|
|
27
36
|
"string"
|
|
@@ -75,7 +84,7 @@
|
|
|
75
84
|
},
|
|
76
85
|
{
|
|
77
86
|
"name": "indeterminate",
|
|
78
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
87
|
+
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
|
|
79
88
|
"value": {
|
|
80
89
|
"type": [
|
|
81
90
|
"boolean"
|
|
@@ -111,7 +120,7 @@
|
|
|
111
120
|
},
|
|
112
121
|
{
|
|
113
122
|
"name": "name",
|
|
114
|
-
"description": "The name of the
|
|
123
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
115
124
|
"value": {
|
|
116
125
|
"type": [
|
|
117
126
|
"string"
|
|
@@ -120,7 +129,7 @@
|
|
|
120
129
|
},
|
|
121
130
|
{
|
|
122
131
|
"name": "readonly",
|
|
123
|
-
"description": "When true, the user cannot modify the value of the
|
|
132
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
124
133
|
"value": {
|
|
125
134
|
"type": [
|
|
126
135
|
"boolean"
|
|
@@ -141,9 +150,7 @@
|
|
|
141
150
|
"description": "The theme variants to apply to the component.",
|
|
142
151
|
"value": {
|
|
143
152
|
"type": [
|
|
144
|
-
"string"
|
|
145
|
-
"null",
|
|
146
|
-
"undefined"
|
|
153
|
+
"string"
|
|
147
154
|
]
|
|
148
155
|
}
|
|
149
156
|
},
|
|
@@ -159,9 +166,18 @@
|
|
|
159
166
|
],
|
|
160
167
|
"js": {
|
|
161
168
|
"properties": [
|
|
169
|
+
{
|
|
170
|
+
"name": "accessibleDescriptionRef",
|
|
171
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
172
|
+
"value": {
|
|
173
|
+
"type": [
|
|
174
|
+
"string"
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
},
|
|
162
178
|
{
|
|
163
179
|
"name": "accessibleName",
|
|
164
|
-
"description": "String used to label the component
|
|
180
|
+
"description": "String used to label the component for screen reader users.",
|
|
165
181
|
"value": {
|
|
166
182
|
"type": [
|
|
167
183
|
"string"
|
|
@@ -170,7 +186,7 @@
|
|
|
170
186
|
},
|
|
171
187
|
{
|
|
172
188
|
"name": "accessibleNameRef",
|
|
173
|
-
"description": "
|
|
189
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
174
190
|
"value": {
|
|
175
191
|
"type": [
|
|
176
192
|
"string"
|
|
@@ -224,7 +240,7 @@
|
|
|
224
240
|
},
|
|
225
241
|
{
|
|
226
242
|
"name": "indeterminate",
|
|
227
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
243
|
+
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
|
|
228
244
|
"value": {
|
|
229
245
|
"type": [
|
|
230
246
|
"boolean"
|
|
@@ -260,7 +276,7 @@
|
|
|
260
276
|
},
|
|
261
277
|
{
|
|
262
278
|
"name": "name",
|
|
263
|
-
"description": "The name of the
|
|
279
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
264
280
|
"value": {
|
|
265
281
|
"type": [
|
|
266
282
|
"string"
|
|
@@ -269,7 +285,7 @@
|
|
|
269
285
|
},
|
|
270
286
|
{
|
|
271
287
|
"name": "readonly",
|
|
272
|
-
"description": "When true, the user cannot modify the value of the
|
|
288
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
273
289
|
"value": {
|
|
274
290
|
"type": [
|
|
275
291
|
"boolean"
|
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/checkbox",
|
|
4
|
-
"version": "25.
|
|
4
|
+
"version": "25.3.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -19,16 +19,23 @@
|
|
|
19
19
|
"description": "`<vaadin-checkbox>` is an input field representing a binary choice.\n\n```html\n<vaadin-checkbox label=\"I accept the terms and conditions\"></vaadin-checkbox>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-------------\n`checkbox` | The element representing a stylable custom checkbox\n`label` | The slotted label element wrapper\n`helper-text` | The slotted helper text element wrapper\n`error-message` | The slotted error message element wrapper\n`required-indicator` | The `required` state indicator element\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|-------------\n`active` | Set when the checkbox is activated with mouse, touch or the keyboard.\n`checked` | Set when the checkbox is checked.\n`disabled` | Set when the checkbox is disabled.\n`readonly` | Set when the checkbox is readonly.\n`focus-ring` | Set when the checkbox is focused using the keyboard.\n`focused` | Set when the checkbox is focused.\n`indeterminate` | Set when the checkbox is in the indeterminate state.\n`invalid` | Set when the checkbox is invalid.\n`has-label` | Set when the checkbox has a label.\n`has-helper` | Set when the checkbox has helper text.\n`has-error-message` | Set when the checkbox has an error message.\n`has-tooltip` | Set when the checkbox has a slotted tooltip.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------------|\n| `--vaadin-checkbox-background` |\n| `--vaadin-checkbox-border-color` |\n| `--vaadin-checkbox-border-radius` |\n| `--vaadin-checkbox-border-width` |\n| `--vaadin-checkbox-gap` |\n| `--vaadin-checkbox-label-color` |\n| `--vaadin-checkbox-label-font-size` |\n| `--vaadin-checkbox-label-font-weight` |\n| `--vaadin-checkbox-label-line-height` |\n| `--vaadin-checkbox-marker-color` |\n| `--vaadin-checkbox-marker-size` |\n| `--vaadin-checkbox-size` |\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-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-required-indicator` |\n| `--vaadin-input-field-required-indicator-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
|
+
{
|
|
23
|
+
"name": ".accessibleDescriptionRef",
|
|
24
|
+
"description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
|
|
25
|
+
"value": {
|
|
26
|
+
"kind": "expression"
|
|
27
|
+
}
|
|
28
|
+
},
|
|
22
29
|
{
|
|
23
30
|
"name": ".accessibleName",
|
|
24
|
-
"description": "String used to label the component
|
|
31
|
+
"description": "String used to label the component for screen reader users.",
|
|
25
32
|
"value": {
|
|
26
33
|
"kind": "expression"
|
|
27
34
|
}
|
|
28
35
|
},
|
|
29
36
|
{
|
|
30
37
|
"name": ".accessibleNameRef",
|
|
31
|
-
"description": "
|
|
38
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
32
39
|
"value": {
|
|
33
40
|
"kind": "expression"
|
|
34
41
|
}
|
|
@@ -70,7 +77,7 @@
|
|
|
70
77
|
},
|
|
71
78
|
{
|
|
72
79
|
"name": "?indeterminate",
|
|
73
|
-
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/
|
|
80
|
+
"description": "True if the checkbox is in the indeterminate state which means\nit is not possible to say whether it is checked or unchecked.\nThe state is reset once the user switches the checkbox by hand.\n\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/checkbox#indeterminate_state_checkboxes",
|
|
74
81
|
"value": {
|
|
75
82
|
"kind": "expression"
|
|
76
83
|
}
|
|
@@ -98,14 +105,14 @@
|
|
|
98
105
|
},
|
|
99
106
|
{
|
|
100
107
|
"name": ".name",
|
|
101
|
-
"description": "The name of the
|
|
108
|
+
"description": "The name of the control, which is submitted with the form data.",
|
|
102
109
|
"value": {
|
|
103
110
|
"kind": "expression"
|
|
104
111
|
}
|
|
105
112
|
},
|
|
106
113
|
{
|
|
107
114
|
"name": "?readonly",
|
|
108
|
-
"description": "When true, the user cannot modify the value of the
|
|
115
|
+
"description": "When true, the user cannot modify the value of the control.\nThe difference between `disabled` and `readonly` is that the\nread-only element remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
|
|
109
116
|
"value": {
|
|
110
117
|
"kind": "expression"
|
|
111
118
|
}
|