@vaadin/slider 25.1.0-alpha3 → 25.1.0-alpha5

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/package.json +10 -8
  2. package/src/styles/vaadin-slider-base-styles.js +45 -25
  3. package/src/vaadin-range-slider.d.ts +76 -1
  4. package/src/vaadin-range-slider.js +171 -77
  5. package/src/vaadin-slider-mixin.d.ts +2 -1
  6. package/src/vaadin-slider-mixin.js +47 -125
  7. package/src/vaadin-slider.d.ts +72 -1
  8. package/src/vaadin-slider.js +112 -15
  9. package/web-types.json +379 -3
  10. package/web-types.lit.json +157 -3
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-alpha3",
4
+ "version": "25.1.0-alpha5",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,9 +16,30 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-range-slider",
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```",
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\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-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
+ {
23
+ "name": "?invalid",
24
+ "description": "Set to true when the field is invalid.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
29
+ {
30
+ "name": "?manualValidation",
31
+ "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.",
32
+ "value": {
33
+ "kind": "expression"
34
+ }
35
+ },
36
+ {
37
+ "name": "?required",
38
+ "description": "Specifies that the user must fill in a value.",
39
+ "value": {
40
+ "kind": "expression"
41
+ }
42
+ },
22
43
  {
23
44
  "name": "?disabled",
24
45
  "description": "If true, the user cannot interact with this element.",
@@ -33,6 +54,41 @@
33
54
  "kind": "expression"
34
55
  }
35
56
  },
57
+ {
58
+ "name": ".label",
59
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
60
+ "value": {
61
+ "kind": "expression"
62
+ }
63
+ },
64
+ {
65
+ "name": ".errorMessage",
66
+ "description": "Error to show when the field is invalid.",
67
+ "value": {
68
+ "kind": "expression"
69
+ }
70
+ },
71
+ {
72
+ "name": ".helperText",
73
+ "description": "String used for the helper text.",
74
+ "value": {
75
+ "kind": "expression"
76
+ }
77
+ },
78
+ {
79
+ "name": ".accessibleName",
80
+ "description": "String used to label the component to screen reader users.",
81
+ "value": {
82
+ "kind": "expression"
83
+ }
84
+ },
85
+ {
86
+ "name": ".accessibleNameRef",
87
+ "description": "Id of the element used as label of the component to screen reader users.",
88
+ "value": {
89
+ "kind": "expression"
90
+ }
91
+ },
36
92
  {
37
93
  "name": ".min",
38
94
  "description": "The minimum allowed value.",
@@ -61,6 +117,13 @@
61
117
  "kind": "expression"
62
118
  }
63
119
  },
120
+ {
121
+ "name": "@validated",
122
+ "description": "Fired whenever the field is validated.",
123
+ "value": {
124
+ "kind": "expression"
125
+ }
126
+ },
64
127
  {
65
128
  "name": "@change",
66
129
  "description": "Fired when the user commits a value change.",
@@ -68,20 +131,55 @@
68
131
  "kind": "expression"
69
132
  }
70
133
  },
134
+ {
135
+ "name": "@input",
136
+ "description": "Fired when the slider value changes during user interaction.",
137
+ "value": {
138
+ "kind": "expression"
139
+ }
140
+ },
71
141
  {
72
142
  "name": "@value-changed",
73
143
  "description": "Fired when the `value` property changes.",
74
144
  "value": {
75
145
  "kind": "expression"
76
146
  }
147
+ },
148
+ {
149
+ "name": "@invalid-changed",
150
+ "description": "Fired when the `invalid` property changes.",
151
+ "value": {
152
+ "kind": "expression"
153
+ }
77
154
  }
78
155
  ]
79
156
  },
80
157
  {
81
158
  "name": "vaadin-slider",
82
- "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```",
159
+ "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\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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
83
160
  "extension": true,
84
161
  "attributes": [
162
+ {
163
+ "name": "?invalid",
164
+ "description": "Set to true when the field is invalid.",
165
+ "value": {
166
+ "kind": "expression"
167
+ }
168
+ },
169
+ {
170
+ "name": "?manualValidation",
171
+ "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.",
172
+ "value": {
173
+ "kind": "expression"
174
+ }
175
+ },
176
+ {
177
+ "name": "?required",
178
+ "description": "Specifies that the user must fill in a value.",
179
+ "value": {
180
+ "kind": "expression"
181
+ }
182
+ },
85
183
  {
86
184
  "name": "?disabled",
87
185
  "description": "If true, the user cannot interact with this element.",
@@ -96,6 +194,41 @@
96
194
  "kind": "expression"
97
195
  }
98
196
  },
197
+ {
198
+ "name": ".label",
199
+ "description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
200
+ "value": {
201
+ "kind": "expression"
202
+ }
203
+ },
204
+ {
205
+ "name": ".errorMessage",
206
+ "description": "Error to show when the field is invalid.",
207
+ "value": {
208
+ "kind": "expression"
209
+ }
210
+ },
211
+ {
212
+ "name": ".helperText",
213
+ "description": "String used for the helper text.",
214
+ "value": {
215
+ "kind": "expression"
216
+ }
217
+ },
218
+ {
219
+ "name": ".accessibleName",
220
+ "description": "String used to label the component to screen reader users.",
221
+ "value": {
222
+ "kind": "expression"
223
+ }
224
+ },
225
+ {
226
+ "name": ".accessibleNameRef",
227
+ "description": "Id of the element used as label of the component to screen reader users.",
228
+ "value": {
229
+ "kind": "expression"
230
+ }
231
+ },
99
232
  {
100
233
  "name": ".min",
101
234
  "description": "The minimum allowed value.",
@@ -124,6 +257,13 @@
124
257
  "kind": "expression"
125
258
  }
126
259
  },
260
+ {
261
+ "name": "@validated",
262
+ "description": "Fired whenever the field is validated.",
263
+ "value": {
264
+ "kind": "expression"
265
+ }
266
+ },
127
267
  {
128
268
  "name": "@change",
129
269
  "description": "Fired when the user commits a value change.",
@@ -131,12 +271,26 @@
131
271
  "kind": "expression"
132
272
  }
133
273
  },
274
+ {
275
+ "name": "@input",
276
+ "description": "Fired when the slider value changes during user interaction.",
277
+ "value": {
278
+ "kind": "expression"
279
+ }
280
+ },
134
281
  {
135
282
  "name": "@value-changed",
136
283
  "description": "Fired when the `value` property changes.",
137
284
  "value": {
138
285
  "kind": "expression"
139
286
  }
287
+ },
288
+ {
289
+ "name": "@invalid-changed",
290
+ "description": "Fired when the `invalid` property changes.",
291
+ "value": {
292
+ "kind": "expression"
293
+ }
140
294
  }
141
295
  ]
142
296
  }