@vaadin/checkbox 25.1.0-alpha7 → 25.1.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.
@@ -484,6 +484,20 @@
484
484
  },
485
485
  "description": "Fired when the `indeterminate` property changes.",
486
486
  "name": "indeterminate-changed"
487
+ },
488
+ {
489
+ "type": {
490
+ "text": "CustomEvent"
491
+ },
492
+ "description": "Fired when the `invalid` property changes.",
493
+ "name": "invalid-changed"
494
+ },
495
+ {
496
+ "type": {
497
+ "text": "CustomEvent"
498
+ },
499
+ "description": "Fired whenever the field is validated.",
500
+ "name": "validated"
487
501
  }
488
502
  ],
489
503
  "mixins": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/checkbox",
3
- "version": "25.1.0-alpha7",
3
+ "version": "25.1.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.1.0-alpha7",
39
- "@vaadin/component-base": "25.1.0-alpha7",
40
- "@vaadin/field-base": "25.1.0-alpha7",
41
- "@vaadin/vaadin-themable-mixin": "25.1.0-alpha7",
38
+ "@vaadin/a11y-base": "25.1.0-alpha9",
39
+ "@vaadin/component-base": "25.1.0-alpha9",
40
+ "@vaadin/field-base": "25.1.0-alpha9",
41
+ "@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/aura": "25.1.0-alpha7",
46
- "@vaadin/chai-plugins": "25.1.0-alpha7",
47
- "@vaadin/test-runner-commands": "25.1.0-alpha7",
45
+ "@vaadin/aura": "25.1.0-alpha9",
46
+ "@vaadin/chai-plugins": "25.1.0-alpha9",
47
+ "@vaadin/test-runner-commands": "25.1.0-alpha9",
48
48
  "@vaadin/testing-helpers": "^2.0.0",
49
- "@vaadin/vaadin-lumo-styles": "25.1.0-alpha7",
49
+ "@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
50
50
  "sinon": "^21.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": "98c586125f769c8fefd307536965293668fda81d"
57
+ "gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
58
58
  }
@@ -106,6 +106,8 @@ export interface CheckboxEventMap extends HTMLElementEventMap, CheckboxCustomEve
106
106
  * @fires {Event} change - Fired when the checkbox is checked or unchecked by the user.
107
107
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
108
108
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
109
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
110
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
109
111
  */
110
112
  declare class Checkbox extends CheckboxMixin(ElementMixin(ThemableMixin(HTMLElement))) {
111
113
  addEventListener<K extends keyof CheckboxEventMap>(
@@ -71,6 +71,8 @@ import { CheckboxMixin } from './vaadin-checkbox-mixin.js';
71
71
  * @fires {Event} change - Fired when the checkbox is checked or unchecked by the user.
72
72
  * @fires {CustomEvent} checked-changed - Fired when the `checked` property changes.
73
73
  * @fires {CustomEvent} indeterminate-changed - Fired when the `indeterminate` property changes.
74
+ * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
75
+ * @fires {CustomEvent} validated - Fired whenever the field is validated.
74
76
  *
75
77
  * @customElement vaadin-checkbox
76
78
  * @extends HTMLElement
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.1.0-alpha7",
4
+ "version": "25.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -11,19 +11,19 @@
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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
- "name": "disabled",
15
- "description": "If true, the user cannot interact with this element.",
14
+ "name": "accessible-name",
15
+ "description": "String used to label the component to screen reader users.",
16
16
  "value": {
17
17
  "type": [
18
- "boolean",
18
+ "string",
19
19
  "null",
20
20
  "undefined"
21
21
  ]
22
22
  }
23
23
  },
24
24
  {
25
- "name": "value",
26
- "description": "The value of the field.",
25
+ "name": "accessible-name-ref",
26
+ "description": "Id of the element used as label of the component to screen reader users.",
27
27
  "value": {
28
28
  "type": [
29
29
  "string",
@@ -32,15 +32,6 @@
32
32
  ]
33
33
  }
34
34
  },
35
- {
36
- "name": "checked",
37
- "description": "True if the element is checked.",
38
- "value": {
39
- "type": [
40
- "boolean"
41
- ]
42
- }
43
- },
44
35
  {
45
36
  "name": "autofocus",
46
37
  "description": "Specify that this control should have input focus when the page loads.",
@@ -53,19 +44,17 @@
53
44
  }
54
45
  },
55
46
  {
56
- "name": "label",
57
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
47
+ "name": "checked",
48
+ "description": "True if the element is checked.",
58
49
  "value": {
59
50
  "type": [
60
- "string",
61
- "null",
62
- "undefined"
51
+ "boolean"
63
52
  ]
64
53
  }
65
54
  },
66
55
  {
67
- "name": "invalid",
68
- "description": "Set to true when the field is invalid.",
56
+ "name": "disabled",
57
+ "description": "If true, the user cannot interact with this element.",
69
58
  "value": {
70
59
  "type": [
71
60
  "boolean",
@@ -75,52 +64,50 @@
75
64
  }
76
65
  },
77
66
  {
78
- "name": "manual-validation",
79
- "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.",
67
+ "name": "error-message",
68
+ "description": "Error to show when the field is invalid.",
80
69
  "value": {
81
70
  "type": [
82
- "boolean",
71
+ "string",
83
72
  "null",
84
73
  "undefined"
85
74
  ]
86
75
  }
87
76
  },
88
77
  {
89
- "name": "required",
90
- "description": "Specifies that the user must fill in a value.",
78
+ "name": "helper-text",
79
+ "description": "String used for the helper text.",
91
80
  "value": {
92
81
  "type": [
93
- "boolean",
82
+ "string",
94
83
  "null",
95
84
  "undefined"
96
85
  ]
97
86
  }
98
87
  },
99
88
  {
100
- "name": "error-message",
101
- "description": "Error to show when the field is invalid.",
89
+ "name": "indeterminate",
90
+ "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",
102
91
  "value": {
103
92
  "type": [
104
- "string",
105
- "null",
106
- "undefined"
93
+ "boolean"
107
94
  ]
108
95
  }
109
96
  },
110
97
  {
111
- "name": "helper-text",
112
- "description": "String used for the helper text.",
98
+ "name": "invalid",
99
+ "description": "Set to true when the field is invalid.",
113
100
  "value": {
114
101
  "type": [
115
- "string",
102
+ "boolean",
116
103
  "null",
117
104
  "undefined"
118
105
  ]
119
106
  }
120
107
  },
121
108
  {
122
- "name": "accessible-name",
123
- "description": "String used to label the component to screen reader users.",
109
+ "name": "label",
110
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
124
111
  "value": {
125
112
  "type": [
126
113
  "string",
@@ -130,37 +117,39 @@
130
117
  }
131
118
  },
132
119
  {
133
- "name": "accessible-name-ref",
134
- "description": "Id of the element used as label of the component to screen reader users.",
120
+ "name": "manual-validation",
121
+ "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.",
135
122
  "value": {
136
123
  "type": [
137
- "string",
124
+ "boolean",
138
125
  "null",
139
126
  "undefined"
140
127
  ]
141
128
  }
142
129
  },
143
130
  {
144
- "name": "indeterminate",
145
- "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",
131
+ "name": "name",
132
+ "description": "The name of the checkbox.",
146
133
  "value": {
147
134
  "type": [
148
- "boolean"
135
+ "string"
149
136
  ]
150
137
  }
151
138
  },
152
139
  {
153
- "name": "name",
154
- "description": "The name of the checkbox.",
140
+ "name": "readonly",
141
+ "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
155
142
  "value": {
156
143
  "type": [
157
- "string"
144
+ "boolean",
145
+ "null",
146
+ "undefined"
158
147
  ]
159
148
  }
160
149
  },
161
150
  {
162
- "name": "readonly",
163
- "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
151
+ "name": "required",
152
+ "description": "Specifies that the user must fill in a value.",
164
153
  "value": {
165
154
  "type": [
166
155
  "boolean",
@@ -179,24 +168,35 @@
179
168
  "undefined"
180
169
  ]
181
170
  }
171
+ },
172
+ {
173
+ "name": "value",
174
+ "description": "The value of the field.",
175
+ "value": {
176
+ "type": [
177
+ "string",
178
+ "null",
179
+ "undefined"
180
+ ]
181
+ }
182
182
  }
183
183
  ],
184
184
  "js": {
185
185
  "properties": [
186
186
  {
187
- "name": "disabled",
188
- "description": "If true, the user cannot interact with this element.",
187
+ "name": "accessibleName",
188
+ "description": "String used to label the component to screen reader users.",
189
189
  "value": {
190
190
  "type": [
191
- "boolean",
191
+ "string",
192
192
  "null",
193
193
  "undefined"
194
194
  ]
195
195
  }
196
196
  },
197
197
  {
198
- "name": "value",
199
- "description": "The value of the field.",
198
+ "name": "accessibleNameRef",
199
+ "description": "Id of the element used as label of the component to screen reader users.",
200
200
  "value": {
201
201
  "type": [
202
202
  "string",
@@ -205,6 +205,17 @@
205
205
  ]
206
206
  }
207
207
  },
208
+ {
209
+ "name": "autofocus",
210
+ "description": "Specify that this control should have input focus when the page loads.",
211
+ "value": {
212
+ "type": [
213
+ "boolean",
214
+ "null",
215
+ "undefined"
216
+ ]
217
+ }
218
+ },
208
219
  {
209
220
  "name": "checked",
210
221
  "description": "True if the element is checked.",
@@ -215,8 +226,8 @@
215
226
  }
216
227
  },
217
228
  {
218
- "name": "autofocus",
219
- "description": "Specify that this control should have input focus when the page loads.",
229
+ "name": "disabled",
230
+ "description": "If true, the user cannot interact with this element.",
220
231
  "value": {
221
232
  "type": [
222
233
  "boolean",
@@ -226,8 +237,8 @@
226
237
  }
227
238
  },
228
239
  {
229
- "name": "label",
230
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
240
+ "name": "errorMessage",
241
+ "description": "Error to show when the field is invalid.",
231
242
  "value": {
232
243
  "type": [
233
244
  "string",
@@ -237,30 +248,28 @@
237
248
  }
238
249
  },
239
250
  {
240
- "name": "invalid",
241
- "description": "Set to true when the field is invalid.",
251
+ "name": "helperText",
252
+ "description": "String used for the helper text.",
242
253
  "value": {
243
254
  "type": [
244
- "boolean",
255
+ "string",
245
256
  "null",
246
257
  "undefined"
247
258
  ]
248
259
  }
249
260
  },
250
261
  {
251
- "name": "manualValidation",
252
- "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.",
262
+ "name": "indeterminate",
263
+ "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",
253
264
  "value": {
254
265
  "type": [
255
- "boolean",
256
- "null",
257
- "undefined"
266
+ "boolean"
258
267
  ]
259
268
  }
260
269
  },
261
270
  {
262
- "name": "required",
263
- "description": "Specifies that the user must fill in a value.",
271
+ "name": "invalid",
272
+ "description": "Set to true when the field is invalid.",
264
273
  "value": {
265
274
  "type": [
266
275
  "boolean",
@@ -270,8 +279,8 @@
270
279
  }
271
280
  },
272
281
  {
273
- "name": "errorMessage",
274
- "description": "Error to show when the field is invalid.",
282
+ "name": "label",
283
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
275
284
  "value": {
276
285
  "type": [
277
286
  "string",
@@ -281,62 +290,53 @@
281
290
  }
282
291
  },
283
292
  {
284
- "name": "helperText",
285
- "description": "String used for the helper text.",
293
+ "name": "manualValidation",
294
+ "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.",
286
295
  "value": {
287
296
  "type": [
288
- "string",
297
+ "boolean",
289
298
  "null",
290
299
  "undefined"
291
300
  ]
292
301
  }
293
302
  },
294
303
  {
295
- "name": "accessibleName",
296
- "description": "String used to label the component to screen reader users.",
304
+ "name": "name",
305
+ "description": "The name of the checkbox.",
297
306
  "value": {
298
307
  "type": [
299
- "string",
300
- "null",
301
- "undefined"
308
+ "string"
302
309
  ]
303
310
  }
304
311
  },
305
312
  {
306
- "name": "accessibleNameRef",
307
- "description": "Id of the element used as label of the component to screen reader users.",
313
+ "name": "readonly",
314
+ "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
308
315
  "value": {
309
316
  "type": [
310
- "string",
317
+ "boolean",
311
318
  "null",
312
319
  "undefined"
313
320
  ]
314
321
  }
315
322
  },
316
323
  {
317
- "name": "indeterminate",
318
- "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",
319
- "value": {
320
- "type": [
321
- "boolean"
322
- ]
323
- }
324
- },
325
- {
326
- "name": "name",
327
- "description": "The name of the checkbox.",
324
+ "name": "required",
325
+ "description": "Specifies that the user must fill in a value.",
328
326
  "value": {
329
327
  "type": [
330
- "string"
328
+ "boolean",
329
+ "null",
330
+ "undefined"
331
331
  ]
332
332
  }
333
333
  },
334
334
  {
335
- "name": "readonly",
336
- "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
335
+ "name": "value",
336
+ "description": "The value of the field.",
337
337
  "value": {
338
338
  "type": [
339
- "boolean",
339
+ "string",
340
340
  "null",
341
341
  "undefined"
342
342
  ]
@@ -344,29 +344,29 @@
344
344
  }
345
345
  ],
346
346
  "events": [
347
- {
348
- "name": "validated",
349
- "description": "Fired whenever the field is validated."
350
- },
351
347
  {
352
348
  "name": "change",
353
349
  "description": "Fired when the checkbox is checked or unchecked by the user."
354
350
  },
355
- {
356
- "name": "value-changed",
357
- "description": "Fired when the `value` property changes."
358
- },
359
351
  {
360
352
  "name": "checked-changed",
361
353
  "description": "Fired when the `checked` property changes."
362
354
  },
355
+ {
356
+ "name": "indeterminate-changed",
357
+ "description": "Fired when the `indeterminate` property changes."
358
+ },
363
359
  {
364
360
  "name": "invalid-changed",
365
361
  "description": "Fired when the `invalid` property changes."
366
362
  },
367
363
  {
368
- "name": "indeterminate-changed",
369
- "description": "Fired when the `indeterminate` property changes."
364
+ "name": "validated",
365
+ "description": "Fired whenever the field is validated."
366
+ },
367
+ {
368
+ "name": "value-changed",
369
+ "description": "Fired when the `value` property changes."
370
370
  }
371
371
  ]
372
372
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/checkbox",
4
- "version": "25.1.0-alpha7",
4
+ "version": "25.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -20,8 +20,8 @@
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
23
- "name": "?disabled",
24
- "description": "If true, the user cannot interact with this element.",
23
+ "name": "?autofocus",
24
+ "description": "Specify that this control should have input focus when the page loads.",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
@@ -34,57 +34,57 @@
34
34
  }
35
35
  },
36
36
  {
37
- "name": "?autofocus",
38
- "description": "Specify that this control should have input focus when the page loads.",
37
+ "name": "?disabled",
38
+ "description": "If true, the user cannot interact with this element.",
39
39
  "value": {
40
40
  "kind": "expression"
41
41
  }
42
42
  },
43
43
  {
44
- "name": "?invalid",
45
- "description": "Set to true when the field is invalid.",
44
+ "name": "?indeterminate",
45
+ "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",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
50
  {
51
- "name": "?manualValidation",
52
- "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.",
51
+ "name": "?invalid",
52
+ "description": "Set to true when the field is invalid.",
53
53
  "value": {
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
57
  {
58
- "name": "?required",
59
- "description": "Specifies that the user must fill in a value.",
58
+ "name": "?manualValidation",
59
+ "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.",
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
64
  {
65
- "name": "?indeterminate",
66
- "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",
65
+ "name": "?readonly",
66
+ "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
67
67
  "value": {
68
68
  "kind": "expression"
69
69
  }
70
70
  },
71
71
  {
72
- "name": "?readonly",
73
- "description": "When true, the user cannot modify the value of the checkbox.\nThe difference between `disabled` and `readonly` is that the\nread-only checkbox remains focusable, is announced by screen\nreaders and its value can be submitted as part of the form.",
72
+ "name": "?required",
73
+ "description": "Specifies that the user must fill in a value.",
74
74
  "value": {
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
78
  {
79
- "name": ".value",
80
- "description": "The value of the field.",
79
+ "name": ".accessibleName",
80
+ "description": "String used to label the component to screen reader users.",
81
81
  "value": {
82
82
  "kind": "expression"
83
83
  }
84
84
  },
85
85
  {
86
- "name": ".label",
87
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
86
+ "name": ".accessibleNameRef",
87
+ "description": "Id of the element used as label of the component to screen reader users.",
88
88
  "value": {
89
89
  "kind": "expression"
90
90
  }
@@ -104,15 +104,8 @@
104
104
  }
105
105
  },
106
106
  {
107
- "name": ".accessibleName",
108
- "description": "String used to label the component to screen reader users.",
109
- "value": {
110
- "kind": "expression"
111
- }
112
- },
113
- {
114
- "name": ".accessibleNameRef",
115
- "description": "Id of the element used as label of the component to screen reader users.",
107
+ "name": ".label",
108
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
116
109
  "value": {
117
110
  "kind": "expression"
118
111
  }
@@ -125,8 +118,8 @@
125
118
  }
126
119
  },
127
120
  {
128
- "name": "@validated",
129
- "description": "Fired whenever the field is validated.",
121
+ "name": ".value",
122
+ "description": "The value of the field.",
130
123
  "value": {
131
124
  "kind": "expression"
132
125
  }
@@ -139,15 +132,15 @@
139
132
  }
140
133
  },
141
134
  {
142
- "name": "@value-changed",
143
- "description": "Fired when the `value` property changes.",
135
+ "name": "@checked-changed",
136
+ "description": "Fired when the `checked` property changes.",
144
137
  "value": {
145
138
  "kind": "expression"
146
139
  }
147
140
  },
148
141
  {
149
- "name": "@checked-changed",
150
- "description": "Fired when the `checked` property changes.",
142
+ "name": "@indeterminate-changed",
143
+ "description": "Fired when the `indeterminate` property changes.",
151
144
  "value": {
152
145
  "kind": "expression"
153
146
  }
@@ -160,8 +153,15 @@
160
153
  }
161
154
  },
162
155
  {
163
- "name": "@indeterminate-changed",
164
- "description": "Fired when the `indeterminate` property changes.",
156
+ "name": "@validated",
157
+ "description": "Fired whenever the field is validated.",
158
+ "value": {
159
+ "kind": "expression"
160
+ }
161
+ },
162
+ {
163
+ "name": "@value-changed",
164
+ "description": "Fired when the `value` property changes.",
165
165
  "value": {
166
166
  "kind": "expression"
167
167
  }