@vaadin/slider 25.1.0-alpha8 → 25.1.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/custom-elements.json +28 -0
  2. package/package.json +11 -11
  3. package/src/vaadin-range-slider.d.ts +2 -0
  4. package/src/vaadin-range-slider.js +2 -0
  5. package/src/vaadin-slider.d.ts +2 -0
  6. package/src/vaadin-slider.js +2 -0
  7. package/web-types.json +180 -180
  8. package/web-types.lit.json +73 -73
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/slider",
4
- "version": "25.1.0-alpha8",
4
+ "version": "25.1.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -19,6 +19,13 @@
19
19
  "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.",
20
20
  "extension": true,
21
21
  "attributes": [
22
+ {
23
+ "name": "?disabled",
24
+ "description": "If true, the user cannot interact with this element.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": "?invalid",
24
31
  "description": "Set to true when the field is invalid.",
@@ -34,22 +41,22 @@
34
41
  }
35
42
  },
36
43
  {
37
- "name": "?required",
38
- "description": "Specifies that the user must fill in a value.",
44
+ "name": "?minMaxVisible",
45
+ "description": "When true, displays the min and max values below the slider track.",
39
46
  "value": {
40
47
  "kind": "expression"
41
48
  }
42
49
  },
43
50
  {
44
- "name": "?disabled",
45
- "description": "If true, the user cannot interact with this element.",
51
+ "name": "?readonly",
52
+ "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.",
46
53
  "value": {
47
54
  "kind": "expression"
48
55
  }
49
56
  },
50
57
  {
51
- "name": "?readonly",
52
- "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.",
58
+ "name": "?required",
59
+ "description": "Specifies that the user must fill in a value.",
53
60
  "value": {
54
61
  "kind": "expression"
55
62
  }
@@ -62,50 +69,50 @@
62
69
  }
63
70
  },
64
71
  {
65
- "name": "?minMaxVisible",
66
- "description": "When true, displays the min and max values below the slider track.",
72
+ "name": ".accessibleName",
73
+ "description": "String used to label the component to screen reader users.",
67
74
  "value": {
68
75
  "kind": "expression"
69
76
  }
70
77
  },
71
78
  {
72
- "name": ".label",
73
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
79
+ "name": ".accessibleNameEnd",
80
+ "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
74
81
  "value": {
75
82
  "kind": "expression"
76
83
  }
77
84
  },
78
85
  {
79
- "name": ".errorMessage",
80
- "description": "Error to show when the field is invalid.",
86
+ "name": ".accessibleNameRef",
87
+ "description": "Id of the element used as label of the component to screen reader users.",
81
88
  "value": {
82
89
  "kind": "expression"
83
90
  }
84
91
  },
85
92
  {
86
- "name": ".helperText",
87
- "description": "String used for the helper text.",
93
+ "name": ".accessibleNameStart",
94
+ "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
88
95
  "value": {
89
96
  "kind": "expression"
90
97
  }
91
98
  },
92
99
  {
93
- "name": ".accessibleName",
94
- "description": "String used to label the component to screen reader users.",
100
+ "name": ".errorMessage",
101
+ "description": "Error to show when the field is invalid.",
95
102
  "value": {
96
103
  "kind": "expression"
97
104
  }
98
105
  },
99
106
  {
100
- "name": ".accessibleNameRef",
101
- "description": "Id of the element used as label of the component to screen reader users.",
107
+ "name": ".helperText",
108
+ "description": "String used for the helper text.",
102
109
  "value": {
103
110
  "kind": "expression"
104
111
  }
105
112
  },
106
113
  {
107
- "name": ".min",
108
- "description": "The minimum allowed value.",
114
+ "name": ".label",
115
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
109
116
  "value": {
110
117
  "kind": "expression"
111
118
  }
@@ -118,50 +125,50 @@
118
125
  }
119
126
  },
120
127
  {
121
- "name": ".step",
122
- "description": "The stepping interval of the slider.",
128
+ "name": ".min",
129
+ "description": "The minimum allowed value.",
123
130
  "value": {
124
131
  "kind": "expression"
125
132
  }
126
133
  },
127
134
  {
128
- "name": ".value",
129
- "description": "The value of the slider.",
135
+ "name": ".step",
136
+ "description": "The stepping interval of the slider.",
130
137
  "value": {
131
138
  "kind": "expression"
132
139
  }
133
140
  },
134
141
  {
135
- "name": ".accessibleNameStart",
136
- "description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
142
+ "name": ".value",
143
+ "description": "The value of the slider.",
137
144
  "value": {
138
145
  "kind": "expression"
139
146
  }
140
147
  },
141
148
  {
142
- "name": ".accessibleNameEnd",
143
- "description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
149
+ "name": "@change",
150
+ "description": "Fired when the user commits a value change.",
144
151
  "value": {
145
152
  "kind": "expression"
146
153
  }
147
154
  },
148
155
  {
149
- "name": "@validated",
150
- "description": "Fired whenever the field is validated.",
156
+ "name": "@input",
157
+ "description": "Fired when the slider value changes during user interaction.",
151
158
  "value": {
152
159
  "kind": "expression"
153
160
  }
154
161
  },
155
162
  {
156
- "name": "@change",
157
- "description": "Fired when the user commits a value change.",
163
+ "name": "@invalid-changed",
164
+ "description": "Fired when the `invalid` property changes.",
158
165
  "value": {
159
166
  "kind": "expression"
160
167
  }
161
168
  },
162
169
  {
163
- "name": "@input",
164
- "description": "Fired when the slider value changes during user interaction.",
170
+ "name": "@validated",
171
+ "description": "Fired whenever the field is validated.",
165
172
  "value": {
166
173
  "kind": "expression"
167
174
  }
@@ -172,13 +179,6 @@
172
179
  "value": {
173
180
  "kind": "expression"
174
181
  }
175
- },
176
- {
177
- "name": "@invalid-changed",
178
- "description": "Fired when the `invalid` property changes.",
179
- "value": {
180
- "kind": "expression"
181
- }
182
182
  }
183
183
  ]
184
184
  },
@@ -187,6 +187,13 @@
187
187
  "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.",
188
188
  "extension": true,
189
189
  "attributes": [
190
+ {
191
+ "name": "?disabled",
192
+ "description": "If true, the user cannot interact with this element.",
193
+ "value": {
194
+ "kind": "expression"
195
+ }
196
+ },
190
197
  {
191
198
  "name": "?invalid",
192
199
  "description": "Set to true when the field is invalid.",
@@ -202,22 +209,22 @@
202
209
  }
203
210
  },
204
211
  {
205
- "name": "?required",
206
- "description": "Specifies that the user must fill in a value.",
212
+ "name": "?minMaxVisible",
213
+ "description": "When true, displays the min and max values below the slider track.",
207
214
  "value": {
208
215
  "kind": "expression"
209
216
  }
210
217
  },
211
218
  {
212
- "name": "?disabled",
213
- "description": "If true, the user cannot interact with this element.",
219
+ "name": "?readonly",
220
+ "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.",
214
221
  "value": {
215
222
  "kind": "expression"
216
223
  }
217
224
  },
218
225
  {
219
- "name": "?readonly",
220
- "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.",
226
+ "name": "?required",
227
+ "description": "Specifies that the user must fill in a value.",
221
228
  "value": {
222
229
  "kind": "expression"
223
230
  }
@@ -230,15 +237,15 @@
230
237
  }
231
238
  },
232
239
  {
233
- "name": "?minMaxVisible",
234
- "description": "When true, displays the min and max values below the slider track.",
240
+ "name": ".accessibleName",
241
+ "description": "String used to label the component to screen reader users.",
235
242
  "value": {
236
243
  "kind": "expression"
237
244
  }
238
245
  },
239
246
  {
240
- "name": ".label",
241
- "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
247
+ "name": ".accessibleNameRef",
248
+ "description": "Id of the element used as label of the component to screen reader users.",
242
249
  "value": {
243
250
  "kind": "expression"
244
251
  }
@@ -258,15 +265,15 @@
258
265
  }
259
266
  },
260
267
  {
261
- "name": ".accessibleName",
262
- "description": "String used to label the component to screen reader users.",
268
+ "name": ".label",
269
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
263
270
  "value": {
264
271
  "kind": "expression"
265
272
  }
266
273
  },
267
274
  {
268
- "name": ".accessibleNameRef",
269
- "description": "Id of the element used as label of the component to screen reader users.",
275
+ "name": ".max",
276
+ "description": "The maximum allowed value.",
270
277
  "value": {
271
278
  "kind": "expression"
272
279
  }
@@ -278,13 +285,6 @@
278
285
  "kind": "expression"
279
286
  }
280
287
  },
281
- {
282
- "name": ".max",
283
- "description": "The maximum allowed value.",
284
- "value": {
285
- "kind": "expression"
286
- }
287
- },
288
288
  {
289
289
  "name": ".step",
290
290
  "description": "The stepping interval of the slider.",
@@ -300,36 +300,36 @@
300
300
  }
301
301
  },
302
302
  {
303
- "name": "@validated",
304
- "description": "Fired whenever the field is validated.",
303
+ "name": "@change",
304
+ "description": "Fired when the user commits a value change.",
305
305
  "value": {
306
306
  "kind": "expression"
307
307
  }
308
308
  },
309
309
  {
310
- "name": "@change",
311
- "description": "Fired when the user commits a value change.",
310
+ "name": "@input",
311
+ "description": "Fired when the slider value changes during user interaction.",
312
312
  "value": {
313
313
  "kind": "expression"
314
314
  }
315
315
  },
316
316
  {
317
- "name": "@input",
318
- "description": "Fired when the slider value changes during user interaction.",
317
+ "name": "@invalid-changed",
318
+ "description": "Fired when the `invalid` property changes.",
319
319
  "value": {
320
320
  "kind": "expression"
321
321
  }
322
322
  },
323
323
  {
324
- "name": "@value-changed",
325
- "description": "Fired when the `value` property changes.",
324
+ "name": "@validated",
325
+ "description": "Fired whenever the field is validated.",
326
326
  "value": {
327
327
  "kind": "expression"
328
328
  }
329
329
  },
330
330
  {
331
- "name": "@invalid-changed",
332
- "description": "Fired when the `invalid` property changes.",
331
+ "name": "@value-changed",
332
+ "description": "Fired when the `value` property changes.",
333
333
  "value": {
334
334
  "kind": "expression"
335
335
  }