@vaadin/slider 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.
Files changed (10) hide show
  1. package/custom-elements.json +28 -0
  2. package/package.json +11 -10
  3. package/src/styles/vaadin-slider-base-styles.js +1 -1
  4. package/src/vaadin-range-slider.d.ts +2 -0
  5. package/src/vaadin-range-slider.js +2 -0
  6. package/src/vaadin-slider-mixin.js +14 -2
  7. package/src/vaadin-slider.d.ts +2 -0
  8. package/src/vaadin-slider.js +2 -0
  9. package/web-types.json +180 -180
  10. package/web-types.lit.json +73 -73
package/web-types.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/slider",
4
- "version": "25.1.0-alpha7",
4
+ "version": "25.1.0-alpha9",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -11,8 +11,8 @@
11
11
  "description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`start-active` | Set when the start thumb is activated with mouse or touch\n`end-active` | Set when the end thumb is activated with mouse or touch\n`start-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
- "name": "label",
15
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
14
+ "name": "accessible-name",
15
+ "description": "String used to label the component to screen reader users.",
16
16
  "value": {
17
17
  "type": [
18
18
  "string",
@@ -22,52 +22,52 @@
22
22
  }
23
23
  },
24
24
  {
25
- "name": "invalid",
26
- "description": "Set to true when the field is invalid.",
25
+ "name": "accessible-name-end",
26
+ "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
27
27
  "value": {
28
28
  "type": [
29
- "boolean",
29
+ "string",
30
30
  "null",
31
31
  "undefined"
32
32
  ]
33
33
  }
34
34
  },
35
35
  {
36
- "name": "manual-validation",
37
- "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.",
36
+ "name": "accessible-name-ref",
37
+ "description": "Id of the element used as label of the component to screen reader users.",
38
38
  "value": {
39
39
  "type": [
40
- "boolean",
40
+ "string",
41
41
  "null",
42
42
  "undefined"
43
43
  ]
44
44
  }
45
45
  },
46
46
  {
47
- "name": "required",
48
- "description": "Specifies that the user must fill in a value.",
47
+ "name": "accessible-name-start",
48
+ "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
49
49
  "value": {
50
50
  "type": [
51
- "boolean",
51
+ "string",
52
52
  "null",
53
53
  "undefined"
54
54
  ]
55
55
  }
56
56
  },
57
57
  {
58
- "name": "error-message",
59
- "description": "Error to show when the field is invalid.",
58
+ "name": "disabled",
59
+ "description": "If true, the user cannot interact with this element.",
60
60
  "value": {
61
61
  "type": [
62
- "string",
62
+ "boolean",
63
63
  "null",
64
64
  "undefined"
65
65
  ]
66
66
  }
67
67
  },
68
68
  {
69
- "name": "helper-text",
70
- "description": "String used for the helper text.",
69
+ "name": "error-message",
70
+ "description": "Error to show when the field is invalid.",
71
71
  "value": {
72
72
  "type": [
73
73
  "string",
@@ -77,8 +77,8 @@
77
77
  }
78
78
  },
79
79
  {
80
- "name": "accessible-name",
81
- "description": "String used to label the component to screen reader users.",
80
+ "name": "helper-text",
81
+ "description": "String used for the helper text.",
82
82
  "value": {
83
83
  "type": [
84
84
  "string",
@@ -88,33 +88,33 @@
88
88
  }
89
89
  },
90
90
  {
91
- "name": "accessible-name-ref",
92
- "description": "Id of the element used as label of the component to screen reader users.",
91
+ "name": "invalid",
92
+ "description": "Set to true when the field is invalid.",
93
93
  "value": {
94
94
  "type": [
95
- "string",
95
+ "boolean",
96
96
  "null",
97
97
  "undefined"
98
98
  ]
99
99
  }
100
100
  },
101
101
  {
102
- "name": "disabled",
103
- "description": "If true, the user cannot interact with this element.",
102
+ "name": "label",
103
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
104
104
  "value": {
105
105
  "type": [
106
- "boolean",
106
+ "string",
107
107
  "null",
108
108
  "undefined"
109
109
  ]
110
110
  }
111
111
  },
112
112
  {
113
- "name": "min",
114
- "description": "The minimum allowed value.",
113
+ "name": "manual-validation",
114
+ "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.",
115
115
  "value": {
116
116
  "type": [
117
- "number",
117
+ "boolean",
118
118
  "null",
119
119
  "undefined"
120
120
  ]
@@ -132,8 +132,8 @@
132
132
  }
133
133
  },
134
134
  {
135
- "name": "step",
136
- "description": "The stepping interval of the slider.",
135
+ "name": "min",
136
+ "description": "The minimum allowed value.",
137
137
  "value": {
138
138
  "type": [
139
139
  "number",
@@ -143,8 +143,8 @@
143
143
  }
144
144
  },
145
145
  {
146
- "name": "readonly",
147
- "description": "When true, the user cannot modify the value of the slider.\nThe difference between `disabled` and `readonly` is that the\nread-only slider remains focusable and is announced by screen\nreaders.",
146
+ "name": "min-max-visible",
147
+ "description": "When true, displays the min and max values below the slider track.",
148
148
  "value": {
149
149
  "type": [
150
150
  "boolean",
@@ -154,8 +154,8 @@
154
154
  }
155
155
  },
156
156
  {
157
- "name": "value-always-visible",
158
- "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
157
+ "name": "readonly",
158
+ "description": "When true, the user cannot modify the value of the slider.\nThe difference between `disabled` and `readonly` is that the\nread-only slider remains focusable and is announced by screen\nreaders.",
159
159
  "value": {
160
160
  "type": [
161
161
  "boolean",
@@ -165,8 +165,8 @@
165
165
  }
166
166
  },
167
167
  {
168
- "name": "min-max-visible",
169
- "description": "When true, displays the min and max values below the slider track.",
168
+ "name": "required",
169
+ "description": "Specifies that the user must fill in a value.",
170
170
  "value": {
171
171
  "type": [
172
172
  "boolean",
@@ -176,19 +176,19 @@
176
176
  }
177
177
  },
178
178
  {
179
- "name": "accessible-name-start",
180
- "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
179
+ "name": "step",
180
+ "description": "The stepping interval of the slider.",
181
181
  "value": {
182
182
  "type": [
183
- "string",
183
+ "number",
184
184
  "null",
185
185
  "undefined"
186
186
  ]
187
187
  }
188
188
  },
189
189
  {
190
- "name": "accessible-name-end",
191
- "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
190
+ "name": "theme",
191
+ "description": "The theme variants to apply to the component.",
192
192
  "value": {
193
193
  "type": [
194
194
  "string",
@@ -198,11 +198,11 @@
198
198
  }
199
199
  },
200
200
  {
201
- "name": "theme",
202
- "description": "The theme variants to apply to the component.",
201
+ "name": "value-always-visible",
202
+ "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
203
203
  "value": {
204
204
  "type": [
205
- "string",
205
+ "boolean",
206
206
  "null",
207
207
  "undefined"
208
208
  ]
@@ -212,8 +212,8 @@
212
212
  "js": {
213
213
  "properties": [
214
214
  {
215
- "name": "label",
216
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
215
+ "name": "accessibleName",
216
+ "description": "String used to label the component to screen reader users.",
217
217
  "value": {
218
218
  "type": [
219
219
  "string",
@@ -223,30 +223,41 @@
223
223
  }
224
224
  },
225
225
  {
226
- "name": "invalid",
227
- "description": "Set to true when the field is invalid.",
226
+ "name": "accessibleNameEnd",
227
+ "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
228
228
  "value": {
229
229
  "type": [
230
- "boolean",
230
+ "string",
231
231
  "null",
232
232
  "undefined"
233
233
  ]
234
234
  }
235
235
  },
236
236
  {
237
- "name": "manualValidation",
238
- "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.",
237
+ "name": "accessibleNameRef",
238
+ "description": "Id of the element used as label of the component to screen reader users.",
239
239
  "value": {
240
240
  "type": [
241
- "boolean",
241
+ "string",
242
242
  "null",
243
243
  "undefined"
244
244
  ]
245
245
  }
246
246
  },
247
247
  {
248
- "name": "required",
249
- "description": "Specifies that the user must fill in a value.",
248
+ "name": "accessibleNameStart",
249
+ "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
250
+ "value": {
251
+ "type": [
252
+ "string",
253
+ "null",
254
+ "undefined"
255
+ ]
256
+ }
257
+ },
258
+ {
259
+ "name": "disabled",
260
+ "description": "If true, the user cannot interact with this element.",
250
261
  "value": {
251
262
  "type": [
252
263
  "boolean",
@@ -278,19 +289,19 @@
278
289
  }
279
290
  },
280
291
  {
281
- "name": "accessibleName",
282
- "description": "String used to label the component to screen reader users.",
292
+ "name": "invalid",
293
+ "description": "Set to true when the field is invalid.",
283
294
  "value": {
284
295
  "type": [
285
- "string",
296
+ "boolean",
286
297
  "null",
287
298
  "undefined"
288
299
  ]
289
300
  }
290
301
  },
291
302
  {
292
- "name": "accessibleNameRef",
293
- "description": "Id of the element used as label of the component to screen reader users.",
303
+ "name": "label",
304
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
294
305
  "value": {
295
306
  "type": [
296
307
  "string",
@@ -300,8 +311,8 @@
300
311
  }
301
312
  },
302
313
  {
303
- "name": "disabled",
304
- "description": "If true, the user cannot interact with this element.",
314
+ "name": "manualValidation",
315
+ "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.",
305
316
  "value": {
306
317
  "type": [
307
318
  "boolean",
@@ -311,8 +322,8 @@
311
322
  }
312
323
  },
313
324
  {
314
- "name": "min",
315
- "description": "The minimum allowed value.",
325
+ "name": "max",
326
+ "description": "The maximum allowed value.",
316
327
  "value": {
317
328
  "type": [
318
329
  "number",
@@ -322,8 +333,8 @@
322
333
  }
323
334
  },
324
335
  {
325
- "name": "max",
326
- "description": "The maximum allowed value.",
336
+ "name": "min",
337
+ "description": "The minimum allowed value.",
327
338
  "value": {
328
339
  "type": [
329
340
  "number",
@@ -333,11 +344,11 @@
333
344
  }
334
345
  },
335
346
  {
336
- "name": "step",
337
- "description": "The stepping interval of the slider.",
347
+ "name": "minMaxVisible",
348
+ "description": "When true, displays the min and max values below the slider track.",
338
349
  "value": {
339
350
  "type": [
340
- "number",
351
+ "boolean",
341
352
  "null",
342
353
  "undefined"
343
354
  ]
@@ -355,8 +366,8 @@
355
366
  }
356
367
  },
357
368
  {
358
- "name": "valueAlwaysVisible",
359
- "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
369
+ "name": "required",
370
+ "description": "Specifies that the user must fill in a value.",
360
371
  "value": {
361
372
  "type": [
362
373
  "boolean",
@@ -366,11 +377,11 @@
366
377
  }
367
378
  },
368
379
  {
369
- "name": "minMaxVisible",
370
- "description": "When true, displays the min and max values below the slider track.",
380
+ "name": "step",
381
+ "description": "The stepping interval of the slider.",
371
382
  "value": {
372
383
  "type": [
373
- "boolean",
384
+ "number",
374
385
  "null",
375
386
  "undefined"
376
387
  ]
@@ -388,22 +399,11 @@
388
399
  }
389
400
  },
390
401
  {
391
- "name": "accessibleNameStart",
392
- "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
393
- "value": {
394
- "type": [
395
- "string",
396
- "null",
397
- "undefined"
398
- ]
399
- }
400
- },
401
- {
402
- "name": "accessibleNameEnd",
403
- "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
402
+ "name": "valueAlwaysVisible",
403
+ "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
404
404
  "value": {
405
405
  "type": [
406
- "string",
406
+ "boolean",
407
407
  "null",
408
408
  "undefined"
409
409
  ]
@@ -411,10 +411,6 @@
411
411
  }
412
412
  ],
413
413
  "events": [
414
- {
415
- "name": "validated",
416
- "description": "Fired whenever the field is validated."
417
- },
418
414
  {
419
415
  "name": "change",
420
416
  "description": "Fired when the user commits a value change."
@@ -423,13 +419,17 @@
423
419
  "name": "input",
424
420
  "description": "Fired when the slider value changes during user interaction."
425
421
  },
426
- {
427
- "name": "value-changed",
428
- "description": "Fired when the `value` property changes."
429
- },
430
422
  {
431
423
  "name": "invalid-changed",
432
424
  "description": "Fired when the `invalid` property changes."
425
+ },
426
+ {
427
+ "name": "validated",
428
+ "description": "Fired whenever the field is validated."
429
+ },
430
+ {
431
+ "name": "value-changed",
432
+ "description": "Fired when the `value` property changes."
433
433
  }
434
434
  ]
435
435
  }
@@ -439,8 +439,8 @@
439
439
  "description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`active` | Set when the slider is activated with mouse or touch\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
440
440
  "attributes": [
441
441
  {
442
- "name": "label",
443
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
442
+ "name": "accessible-name",
443
+ "description": "String used to label the component to screen reader users.",
444
444
  "value": {
445
445
  "type": [
446
446
  "string",
@@ -450,30 +450,19 @@
450
450
  }
451
451
  },
452
452
  {
453
- "name": "invalid",
454
- "description": "Set to true when the field is invalid.",
455
- "value": {
456
- "type": [
457
- "boolean",
458
- "null",
459
- "undefined"
460
- ]
461
- }
462
- },
463
- {
464
- "name": "manual-validation",
465
- "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.",
453
+ "name": "accessible-name-ref",
454
+ "description": "Id of the element used as label of the component to screen reader users.",
466
455
  "value": {
467
456
  "type": [
468
- "boolean",
457
+ "string",
469
458
  "null",
470
459
  "undefined"
471
460
  ]
472
461
  }
473
462
  },
474
463
  {
475
- "name": "required",
476
- "description": "Specifies that the user must fill in a value.",
464
+ "name": "disabled",
465
+ "description": "If true, the user cannot interact with this element.",
477
466
  "value": {
478
467
  "type": [
479
468
  "boolean",
@@ -505,19 +494,19 @@
505
494
  }
506
495
  },
507
496
  {
508
- "name": "accessible-name",
509
- "description": "String used to label the component to screen reader users.",
497
+ "name": "invalid",
498
+ "description": "Set to true when the field is invalid.",
510
499
  "value": {
511
500
  "type": [
512
- "string",
501
+ "boolean",
513
502
  "null",
514
503
  "undefined"
515
504
  ]
516
505
  }
517
506
  },
518
507
  {
519
- "name": "accessible-name-ref",
520
- "description": "Id of the element used as label of the component to screen reader users.",
508
+ "name": "label",
509
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
521
510
  "value": {
522
511
  "type": [
523
512
  "string",
@@ -527,8 +516,8 @@
527
516
  }
528
517
  },
529
518
  {
530
- "name": "disabled",
531
- "description": "If true, the user cannot interact with this element.",
519
+ "name": "manual-validation",
520
+ "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.",
532
521
  "value": {
533
522
  "type": [
534
523
  "boolean",
@@ -538,8 +527,8 @@
538
527
  }
539
528
  },
540
529
  {
541
- "name": "min",
542
- "description": "The minimum allowed value.",
530
+ "name": "max",
531
+ "description": "The maximum allowed value.",
543
532
  "value": {
544
533
  "type": [
545
534
  "number",
@@ -549,8 +538,8 @@
549
538
  }
550
539
  },
551
540
  {
552
- "name": "max",
553
- "description": "The maximum allowed value.",
541
+ "name": "min",
542
+ "description": "The minimum allowed value.",
554
543
  "value": {
555
544
  "type": [
556
545
  "number",
@@ -560,11 +549,11 @@
560
549
  }
561
550
  },
562
551
  {
563
- "name": "step",
564
- "description": "The stepping interval of the slider.",
552
+ "name": "min-max-visible",
553
+ "description": "When true, displays the min and max values below the slider track.",
565
554
  "value": {
566
555
  "type": [
567
- "number",
556
+ "boolean",
568
557
  "null",
569
558
  "undefined"
570
559
  ]
@@ -582,8 +571,8 @@
582
571
  }
583
572
  },
584
573
  {
585
- "name": "value-always-visible",
586
- "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
574
+ "name": "required",
575
+ "description": "Specifies that the user must fill in a value.",
587
576
  "value": {
588
577
  "type": [
589
578
  "boolean",
@@ -593,11 +582,22 @@
593
582
  }
594
583
  },
595
584
  {
596
- "name": "min-max-visible",
597
- "description": "When true, displays the min and max values below the slider track.",
585
+ "name": "step",
586
+ "description": "The stepping interval of the slider.",
598
587
  "value": {
599
588
  "type": [
600
- "boolean",
589
+ "number",
590
+ "null",
591
+ "undefined"
592
+ ]
593
+ }
594
+ },
595
+ {
596
+ "name": "theme",
597
+ "description": "The theme variants to apply to the component.",
598
+ "value": {
599
+ "type": [
600
+ "string",
601
601
  "null",
602
602
  "undefined"
603
603
  ]
@@ -615,11 +615,11 @@
615
615
  }
616
616
  },
617
617
  {
618
- "name": "theme",
619
- "description": "The theme variants to apply to the component.",
618
+ "name": "value-always-visible",
619
+ "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
620
620
  "value": {
621
621
  "type": [
622
- "string",
622
+ "boolean",
623
623
  "null",
624
624
  "undefined"
625
625
  ]
@@ -629,8 +629,8 @@
629
629
  "js": {
630
630
  "properties": [
631
631
  {
632
- "name": "label",
633
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
632
+ "name": "accessibleName",
633
+ "description": "String used to label the component to screen reader users.",
634
634
  "value": {
635
635
  "type": [
636
636
  "string",
@@ -640,30 +640,19 @@
640
640
  }
641
641
  },
642
642
  {
643
- "name": "invalid",
644
- "description": "Set to true when the field is invalid.",
645
- "value": {
646
- "type": [
647
- "boolean",
648
- "null",
649
- "undefined"
650
- ]
651
- }
652
- },
653
- {
654
- "name": "manualValidation",
655
- "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.",
643
+ "name": "accessibleNameRef",
644
+ "description": "Id of the element used as label of the component to screen reader users.",
656
645
  "value": {
657
646
  "type": [
658
- "boolean",
647
+ "string",
659
648
  "null",
660
649
  "undefined"
661
650
  ]
662
651
  }
663
652
  },
664
653
  {
665
- "name": "required",
666
- "description": "Specifies that the user must fill in a value.",
654
+ "name": "disabled",
655
+ "description": "If true, the user cannot interact with this element.",
667
656
  "value": {
668
657
  "type": [
669
658
  "boolean",
@@ -695,19 +684,19 @@
695
684
  }
696
685
  },
697
686
  {
698
- "name": "accessibleName",
699
- "description": "String used to label the component to screen reader users.",
687
+ "name": "invalid",
688
+ "description": "Set to true when the field is invalid.",
700
689
  "value": {
701
690
  "type": [
702
- "string",
691
+ "boolean",
703
692
  "null",
704
693
  "undefined"
705
694
  ]
706
695
  }
707
696
  },
708
697
  {
709
- "name": "accessibleNameRef",
710
- "description": "Id of the element used as label of the component to screen reader users.",
698
+ "name": "label",
699
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
711
700
  "value": {
712
701
  "type": [
713
702
  "string",
@@ -717,8 +706,8 @@
717
706
  }
718
707
  },
719
708
  {
720
- "name": "disabled",
721
- "description": "If true, the user cannot interact with this element.",
709
+ "name": "manualValidation",
710
+ "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.",
722
711
  "value": {
723
712
  "type": [
724
713
  "boolean",
@@ -728,8 +717,8 @@
728
717
  }
729
718
  },
730
719
  {
731
- "name": "min",
732
- "description": "The minimum allowed value.",
720
+ "name": "max",
721
+ "description": "The maximum allowed value.",
733
722
  "value": {
734
723
  "type": [
735
724
  "number",
@@ -739,8 +728,8 @@
739
728
  }
740
729
  },
741
730
  {
742
- "name": "max",
743
- "description": "The maximum allowed value.",
731
+ "name": "min",
732
+ "description": "The minimum allowed value.",
744
733
  "value": {
745
734
  "type": [
746
735
  "number",
@@ -750,11 +739,11 @@
750
739
  }
751
740
  },
752
741
  {
753
- "name": "step",
754
- "description": "The stepping interval of the slider.",
742
+ "name": "minMaxVisible",
743
+ "description": "When true, displays the min and max values below the slider track.",
755
744
  "value": {
756
745
  "type": [
757
- "number",
746
+ "boolean",
758
747
  "null",
759
748
  "undefined"
760
749
  ]
@@ -772,8 +761,8 @@
772
761
  }
773
762
  },
774
763
  {
775
- "name": "valueAlwaysVisible",
776
- "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
764
+ "name": "required",
765
+ "description": "Specifies that the user must fill in a value.",
777
766
  "value": {
778
767
  "type": [
779
768
  "boolean",
@@ -783,11 +772,11 @@
783
772
  }
784
773
  },
785
774
  {
786
- "name": "minMaxVisible",
787
- "description": "When true, displays the min and max values below the slider track.",
775
+ "name": "step",
776
+ "description": "The stepping interval of the slider.",
788
777
  "value": {
789
778
  "type": [
790
- "boolean",
779
+ "number",
791
780
  "null",
792
781
  "undefined"
793
782
  ]
@@ -803,13 +792,20 @@
803
792
  "undefined"
804
793
  ]
805
794
  }
795
+ },
796
+ {
797
+ "name": "valueAlwaysVisible",
798
+ "description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
799
+ "value": {
800
+ "type": [
801
+ "boolean",
802
+ "null",
803
+ "undefined"
804
+ ]
805
+ }
806
806
  }
807
807
  ],
808
808
  "events": [
809
- {
810
- "name": "validated",
811
- "description": "Fired whenever the field is validated."
812
- },
813
809
  {
814
810
  "name": "change",
815
811
  "description": "Fired when the user commits a value change."
@@ -818,13 +814,17 @@
818
814
  "name": "input",
819
815
  "description": "Fired when the slider value changes during user interaction."
820
816
  },
821
- {
822
- "name": "value-changed",
823
- "description": "Fired when the `value` property changes."
824
- },
825
817
  {
826
818
  "name": "invalid-changed",
827
819
  "description": "Fired when the `invalid` property changes."
820
+ },
821
+ {
822
+ "name": "validated",
823
+ "description": "Fired whenever the field is validated."
824
+ },
825
+ {
826
+ "name": "value-changed",
827
+ "description": "Fired when the `value` property changes."
828
828
  }
829
829
  ]
830
830
  }