@vaadin/checkbox 25.3.0-alpha8 → 25.3.0-alpha9
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 +60 -8
- package/package.json +10 -10
- package/src/vaadin-checkbox-mixin.js +12 -20
- package/src/vaadin-checkbox.js +3 -1
- package/web-types.json +23 -5
- package/web-types.lit.json +10 -3
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",
|
|
@@ -253,12 +267,24 @@
|
|
|
253
267
|
}
|
|
254
268
|
],
|
|
255
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
|
+
},
|
|
256
282
|
{
|
|
257
283
|
"name": "accessible-name",
|
|
258
284
|
"type": {
|
|
259
285
|
"text": "string"
|
|
260
286
|
},
|
|
261
|
-
"description": "String used to label the component
|
|
287
|
+
"description": "String used to label the component for screen reader users.",
|
|
262
288
|
"fieldName": "accessibleName",
|
|
263
289
|
"inheritedFrom": {
|
|
264
290
|
"name": "FieldMixin",
|
|
@@ -270,7 +296,7 @@
|
|
|
270
296
|
"type": {
|
|
271
297
|
"text": "string"
|
|
272
298
|
},
|
|
273
|
-
"description": "
|
|
299
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
274
300
|
"fieldName": "accessibleNameRef",
|
|
275
301
|
"inheritedFrom": {
|
|
276
302
|
"name": "FieldMixin",
|
|
@@ -475,6 +501,20 @@
|
|
|
475
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.",
|
|
476
502
|
"name": "Checkbox",
|
|
477
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
|
+
},
|
|
478
518
|
{
|
|
479
519
|
"kind": "field",
|
|
480
520
|
"name": "accessibleName",
|
|
@@ -482,7 +522,7 @@
|
|
|
482
522
|
"type": {
|
|
483
523
|
"text": "string"
|
|
484
524
|
},
|
|
485
|
-
"description": "String used to label the component
|
|
525
|
+
"description": "String used to label the component for screen reader users.",
|
|
486
526
|
"attribute": "accessible-name",
|
|
487
527
|
"inheritedFrom": {
|
|
488
528
|
"name": "FieldMixin",
|
|
@@ -496,7 +536,7 @@
|
|
|
496
536
|
"type": {
|
|
497
537
|
"text": "string"
|
|
498
538
|
},
|
|
499
|
-
"description": "
|
|
539
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
500
540
|
"attribute": "accessible-name-ref",
|
|
501
541
|
"inheritedFrom": {
|
|
502
542
|
"name": "FieldMixin",
|
|
@@ -756,12 +796,24 @@
|
|
|
756
796
|
}
|
|
757
797
|
],
|
|
758
798
|
"attributes": [
|
|
799
|
+
{
|
|
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
|
+
}
|
|
810
|
+
},
|
|
759
811
|
{
|
|
760
812
|
"name": "accessible-name",
|
|
761
813
|
"type": {
|
|
762
814
|
"text": "string"
|
|
763
815
|
},
|
|
764
|
-
"description": "String used to label the component
|
|
816
|
+
"description": "String used to label the component for screen reader users.",
|
|
765
817
|
"fieldName": "accessibleName",
|
|
766
818
|
"inheritedFrom": {
|
|
767
819
|
"name": "FieldMixin",
|
|
@@ -773,7 +825,7 @@
|
|
|
773
825
|
"type": {
|
|
774
826
|
"text": "string"
|
|
775
827
|
},
|
|
776
|
-
"description": "
|
|
828
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
777
829
|
"fieldName": "accessibleNameRef",
|
|
778
830
|
"inheritedFrom": {
|
|
779
831
|
"name": "FieldMixin",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/checkbox",
|
|
3
|
-
"version": "25.3.0-
|
|
3
|
+
"version": "25.3.0-alpha9",
|
|
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": "25.3.0-
|
|
39
|
-
"@vaadin/component-base": "25.3.0-
|
|
40
|
-
"@vaadin/field-base": "25.3.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.3.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.3.0-alpha9",
|
|
39
|
+
"@vaadin/component-base": "25.3.0-alpha9",
|
|
40
|
+
"@vaadin/field-base": "25.3.0-alpha9",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.3.0-alpha9",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/aura": "25.3.0-
|
|
46
|
-
"@vaadin/chai-plugins": "25.3.0-
|
|
47
|
-
"@vaadin/test-runner-commands": "25.3.0-
|
|
45
|
+
"@vaadin/aura": "25.3.0-alpha9",
|
|
46
|
+
"@vaadin/chai-plugins": "25.3.0-alpha9",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.3.0-alpha9",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "25.3.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.3.0-alpha9",
|
|
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": "cb915ebde095ec5b94a87af93dd4530f51984c52"
|
|
58
58
|
}
|
|
@@ -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';
|
|
@@ -105,6 +106,16 @@ export const CheckboxMixin = (superclass) =>
|
|
|
105
106
|
this._createPropertyObserver('checked', '_checkedChanged');
|
|
106
107
|
}
|
|
107
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
|
+
|
|
108
119
|
/**
|
|
109
120
|
* Override method inherited from `ActiveMixin` to only set the `active`
|
|
110
121
|
* attribute for clicks that actually toggle the checked state.
|
|
@@ -168,11 +179,7 @@ export const CheckboxMixin = (superclass) =>
|
|
|
168
179
|
}
|
|
169
180
|
|
|
170
181
|
// Use aria-readonly since native checkbox doesn't support readonly
|
|
171
|
-
|
|
172
|
-
inputElement.setAttribute('aria-readonly', 'true');
|
|
173
|
-
} else {
|
|
174
|
-
inputElement.removeAttribute('aria-readonly');
|
|
175
|
-
}
|
|
182
|
+
setOrRemoveAttribute(inputElement, 'aria-readonly', readonly);
|
|
176
183
|
}
|
|
177
184
|
|
|
178
185
|
/**
|
|
@@ -205,21 +212,6 @@ export const CheckboxMixin = (superclass) =>
|
|
|
205
212
|
}
|
|
206
213
|
}
|
|
207
214
|
|
|
208
|
-
/**
|
|
209
|
-
* Override an observer from `FieldMixin`
|
|
210
|
-
* to validate when required is removed.
|
|
211
|
-
*
|
|
212
|
-
* @protected
|
|
213
|
-
* @override
|
|
214
|
-
*/
|
|
215
|
-
_requiredChanged(required) {
|
|
216
|
-
super._requiredChanged(required);
|
|
217
|
-
|
|
218
|
-
if (required === false) {
|
|
219
|
-
this._requestValidation();
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
|
|
223
215
|
/** @private */
|
|
224
216
|
_onRequiredIndicatorClick() {
|
|
225
217
|
this._labelNode.click();
|
package/src/vaadin-checkbox.js
CHANGED
|
@@ -88,7 +88,7 @@ import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
|
|
|
88
88
|
* @customElement vaadin-checkbox
|
|
89
89
|
* @extends HTMLElement
|
|
90
90
|
*/
|
|
91
|
-
|
|
91
|
+
class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
92
92
|
static get is() {
|
|
93
93
|
return 'vaadin-checkbox';
|
|
94
94
|
}
|
|
@@ -168,3 +168,5 @@ export class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(PolylitMi
|
|
|
168
168
|
}
|
|
169
169
|
|
|
170
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha9",
|
|
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"
|
|
@@ -157,9 +166,18 @@
|
|
|
157
166
|
],
|
|
158
167
|
"js": {
|
|
159
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
|
+
},
|
|
160
178
|
{
|
|
161
179
|
"name": "accessibleName",
|
|
162
|
-
"description": "String used to label the component
|
|
180
|
+
"description": "String used to label the component for screen reader users.",
|
|
163
181
|
"value": {
|
|
164
182
|
"type": [
|
|
165
183
|
"string"
|
|
@@ -168,7 +186,7 @@
|
|
|
168
186
|
},
|
|
169
187
|
{
|
|
170
188
|
"name": "accessibleNameRef",
|
|
171
|
-
"description": "
|
|
189
|
+
"description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
|
|
172
190
|
"value": {
|
|
173
191
|
"type": [
|
|
174
192
|
"string"
|
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.3.0-
|
|
4
|
+
"version": "25.3.0-alpha9",
|
|
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
|
}
|