@vaadin/slider 25.3.0-alpha1 → 25.3.0-alpha10

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 +74 -8
  2. package/package.json +11 -11
  3. package/src/vaadin-range-slider.js +1 -0
  4. package/src/vaadin-slider-bubble-overlay.js +1 -0
  5. package/src/vaadin-slider-bubble.js +1 -0
  6. package/src/vaadin-slider.js +1 -0
  7. package/web-types.json +47 -15
  8. package/web-types.lit.json +19 -5
package/custom-elements.json CHANGED
@@ -41,6 +41,20 @@
41
41
  "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.",
42
42
  "name": "RangeSlider",
43
43
  "members": [
44
+ {
45
+ "kind": "field",
46
+ "name": "accessibleDescriptionRef",
47
+ "privacy": "public",
48
+ "type": {
49
+ "text": "string"
50
+ },
51
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
52
+ "attribute": "accessible-description-ref",
53
+ "inheritedFrom": {
54
+ "name": "FieldMixin",
55
+ "package": "@vaadin/field-base/src/field-mixin.js"
56
+ }
57
+ },
44
58
  {
45
59
  "kind": "field",
46
60
  "name": "accessibleName",
@@ -48,7 +62,7 @@
48
62
  "type": {
49
63
  "text": "string"
50
64
  },
51
- "description": "String used to label the component to screen reader users.",
65
+ "description": "String used to label the component for screen reader users.",
52
66
  "attribute": "accessible-name",
53
67
  "inheritedFrom": {
54
68
  "name": "FieldMixin",
@@ -72,7 +86,7 @@
72
86
  "type": {
73
87
  "text": "string"
74
88
  },
75
- "description": "Id of the element used as label of the component to screen reader users.",
89
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
76
90
  "attribute": "accessible-name-ref",
77
91
  "inheritedFrom": {
78
92
  "name": "FieldMixin",
@@ -360,12 +374,24 @@
360
374
  }
361
375
  ],
362
376
  "attributes": [
377
+ {
378
+ "name": "accessible-description-ref",
379
+ "type": {
380
+ "text": "string"
381
+ },
382
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
383
+ "fieldName": "accessibleDescriptionRef",
384
+ "inheritedFrom": {
385
+ "name": "FieldMixin",
386
+ "package": "@vaadin/field-base/src/field-mixin.js"
387
+ }
388
+ },
363
389
  {
364
390
  "name": "accessible-name",
365
391
  "type": {
366
392
  "text": "string"
367
393
  },
368
- "description": "String used to label the component to screen reader users.",
394
+ "description": "String used to label the component for screen reader users.",
369
395
  "fieldName": "accessibleName",
370
396
  "inheritedFrom": {
371
397
  "name": "FieldMixin",
@@ -385,7 +411,7 @@
385
411
  "type": {
386
412
  "text": "string"
387
413
  },
388
- "description": "Id of the element used as label of the component to screen reader users.",
414
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
389
415
  "fieldName": "accessibleNameRef",
390
416
  "inheritedFrom": {
391
417
  "name": "FieldMixin",
@@ -544,6 +570,13 @@
544
570
  "module": "src/vaadin-slider-mixin.js"
545
571
  }
546
572
  },
573
+ {
574
+ "type": {
575
+ "text": "string"
576
+ },
577
+ "description": "The theme variants to apply to the component.",
578
+ "name": "theme"
579
+ },
547
580
  {
548
581
  "name": "value",
549
582
  "type": {
@@ -811,6 +844,20 @@
811
844
  "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.",
812
845
  "name": "Slider",
813
846
  "members": [
847
+ {
848
+ "kind": "field",
849
+ "name": "accessibleDescriptionRef",
850
+ "privacy": "public",
851
+ "type": {
852
+ "text": "string"
853
+ },
854
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
855
+ "attribute": "accessible-description-ref",
856
+ "inheritedFrom": {
857
+ "name": "FieldMixin",
858
+ "package": "@vaadin/field-base/src/field-mixin.js"
859
+ }
860
+ },
814
861
  {
815
862
  "kind": "field",
816
863
  "name": "accessibleName",
@@ -818,7 +865,7 @@
818
865
  "type": {
819
866
  "text": "string"
820
867
  },
821
- "description": "String used to label the component to screen reader users.",
868
+ "description": "String used to label the component for screen reader users.",
822
869
  "attribute": "accessible-name",
823
870
  "inheritedFrom": {
824
871
  "name": "FieldMixin",
@@ -832,7 +879,7 @@
832
879
  "type": {
833
880
  "text": "string"
834
881
  },
835
- "description": "Id of the element used as label of the component to screen reader users.",
882
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
836
883
  "attribute": "accessible-name-ref",
837
884
  "inheritedFrom": {
838
885
  "name": "FieldMixin",
@@ -1110,12 +1157,24 @@
1110
1157
  }
1111
1158
  ],
1112
1159
  "attributes": [
1160
+ {
1161
+ "name": "accessible-description-ref",
1162
+ "type": {
1163
+ "text": "string"
1164
+ },
1165
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
1166
+ "fieldName": "accessibleDescriptionRef",
1167
+ "inheritedFrom": {
1168
+ "name": "FieldMixin",
1169
+ "package": "@vaadin/field-base/src/field-mixin.js"
1170
+ }
1171
+ },
1113
1172
  {
1114
1173
  "name": "accessible-name",
1115
1174
  "type": {
1116
1175
  "text": "string"
1117
1176
  },
1118
- "description": "String used to label the component to screen reader users.",
1177
+ "description": "String used to label the component for screen reader users.",
1119
1178
  "fieldName": "accessibleName",
1120
1179
  "inheritedFrom": {
1121
1180
  "name": "FieldMixin",
@@ -1127,7 +1186,7 @@
1127
1186
  "type": {
1128
1187
  "text": "string"
1129
1188
  },
1130
- "description": "Id of the element used as label of the component to screen reader users.",
1189
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
1131
1190
  "fieldName": "accessibleNameRef",
1132
1191
  "inheritedFrom": {
1133
1192
  "name": "FieldMixin",
@@ -1278,6 +1337,13 @@
1278
1337
  "module": "src/vaadin-slider-mixin.js"
1279
1338
  }
1280
1339
  },
1340
+ {
1341
+ "type": {
1342
+ "text": "string"
1343
+ },
1344
+ "description": "The theme variants to apply to the component.",
1345
+ "name": "theme"
1346
+ },
1281
1347
  {
1282
1348
  "name": "value",
1283
1349
  "type": {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/slider",
3
- "version": "25.3.0-alpha1",
3
+ "version": "25.3.0-alpha10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -35,24 +35,24 @@
35
35
  ],
36
36
  "dependencies": {
37
37
  "@open-wc/dedupe-mixin": "^1.3.0",
38
- "@vaadin/a11y-base": "25.3.0-alpha1",
39
- "@vaadin/component-base": "25.3.0-alpha1",
40
- "@vaadin/field-base": "25.3.0-alpha1",
41
- "@vaadin/overlay": "25.3.0-alpha1",
42
- "@vaadin/vaadin-themable-mixin": "25.3.0-alpha1",
38
+ "@vaadin/a11y-base": "25.3.0-alpha10",
39
+ "@vaadin/component-base": "25.3.0-alpha10",
40
+ "@vaadin/field-base": "25.3.0-alpha10",
41
+ "@vaadin/overlay": "25.3.0-alpha10",
42
+ "@vaadin/vaadin-themable-mixin": "25.3.0-alpha10",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/aura": "25.3.0-alpha1",
47
- "@vaadin/chai-plugins": "25.3.0-alpha1",
48
- "@vaadin/test-runner-commands": "25.3.0-alpha1",
46
+ "@vaadin/aura": "25.3.0-alpha10",
47
+ "@vaadin/chai-plugins": "25.3.0-alpha10",
48
+ "@vaadin/test-runner-commands": "25.3.0-alpha10",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "25.3.0-alpha1"
50
+ "@vaadin/vaadin-lumo-styles": "25.3.0-alpha10"
51
51
  },
52
52
  "customElements": "custom-elements.json",
53
53
  "web-types": [
54
54
  "web-types.json",
55
55
  "web-types.lit.json"
56
56
  ],
57
- "gitHead": "5824d54c995945aafd50d30edc2cb763a58a18b6"
57
+ "gitHead": "f2833abdf9b613fa0d0ed216830e3f4de87b7dac"
58
58
  }
package/src/vaadin-range-slider.js CHANGED
@@ -123,6 +123,7 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
123
123
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
124
124
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
125
125
  *
126
+ * @attr {string} theme - The theme variants to apply to the component.
126
127
  * @customElement vaadin-range-slider
127
128
  * @extends HTMLElement
128
129
  */
package/src/vaadin-slider-bubble-overlay.js CHANGED
@@ -16,6 +16,7 @@ import { sliderBubbleOverlayStyles } from './styles/vaadin-slider-bubble-overlay
16
16
  /**
17
17
  * An element used internally by `<vaadin-slider>`. Not intended to be used separately.
18
18
  *
19
+ * @attr {string} theme - The theme variants to apply to the component.
19
20
  * @customElement vaadin-slider-bubble-overlay
20
21
  * @extends HTMLElement
21
22
  * @private
package/src/vaadin-slider-bubble.js CHANGED
@@ -13,6 +13,7 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
13
13
  /**
14
14
  * An element used internally by `<vaadin-slider>`. Not intended to be used separately.
15
15
  *
16
+ * @attr {string} theme - The theme variants to apply to the component.
16
17
  * @customElement vaadin-slider-bubble
17
18
  * @extends HTMLElement
18
19
  * @private
package/src/vaadin-slider.js CHANGED
@@ -118,6 +118,7 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
118
118
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
119
119
  * @fires {CustomEvent} validated - Fired whenever the field is validated.
120
120
  *
121
+ * @attr {string} theme - The theme variants to apply to the component.
121
122
  * @customElement vaadin-slider
122
123
  * @extends HTMLElement
123
124
  */
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.3.0-alpha1",
4
+ "version": "25.3.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -10,9 +10,18 @@
10
10
  "name": "vaadin-range-slider",
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
+ {
14
+ "name": "accessible-description-ref",
15
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
16
+ "value": {
17
+ "type": [
18
+ "string"
19
+ ]
20
+ }
21
+ },
13
22
  {
14
23
  "name": "accessible-name",
15
- "description": "String used to label the component to screen reader users.",
24
+ "description": "String used to label the component for screen reader users.",
16
25
  "value": {
17
26
  "type": [
18
27
  "string"
@@ -30,7 +39,7 @@
30
39
  },
31
40
  {
32
41
  "name": "accessible-name-ref",
33
- "description": "Id of the element used as label of the component to screen reader users.",
42
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
34
43
  "value": {
35
44
  "type": [
36
45
  "string"
@@ -159,9 +168,7 @@
159
168
  "description": "The theme variants to apply to the component.",
160
169
  "value": {
161
170
  "type": [
162
- "string",
163
- "null",
164
- "undefined"
171
+ "string"
165
172
  ]
166
173
  }
167
174
  },
@@ -177,9 +184,18 @@
177
184
  ],
178
185
  "js": {
179
186
  "properties": [
187
+ {
188
+ "name": "accessibleDescriptionRef",
189
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
190
+ "value": {
191
+ "type": [
192
+ "string"
193
+ ]
194
+ }
195
+ },
180
196
  {
181
197
  "name": "accessibleName",
182
- "description": "String used to label the component to screen reader users.",
198
+ "description": "String used to label the component for screen reader users.",
183
199
  "value": {
184
200
  "type": [
185
201
  "string"
@@ -197,7 +213,7 @@
197
213
  },
198
214
  {
199
215
  "name": "accessibleNameRef",
200
- "description": "Id of the element used as label of the component to screen reader users.",
216
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
201
217
  "value": {
202
218
  "type": [
203
219
  "string"
@@ -368,9 +384,18 @@
368
384
  "name": "vaadin-slider",
369
385
  "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.",
370
386
  "attributes": [
387
+ {
388
+ "name": "accessible-description-ref",
389
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
390
+ "value": {
391
+ "type": [
392
+ "string"
393
+ ]
394
+ }
395
+ },
371
396
  {
372
397
  "name": "accessible-name",
373
- "description": "String used to label the component to screen reader users.",
398
+ "description": "String used to label the component for screen reader users.",
374
399
  "value": {
375
400
  "type": [
376
401
  "string"
@@ -379,7 +404,7 @@
379
404
  },
380
405
  {
381
406
  "name": "accessible-name-ref",
382
- "description": "Id of the element used as label of the component to screen reader users.",
407
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
383
408
  "value": {
384
409
  "type": [
385
410
  "string"
@@ -499,9 +524,7 @@
499
524
  "description": "The theme variants to apply to the component.",
500
525
  "value": {
501
526
  "type": [
502
- "string",
503
- "null",
504
- "undefined"
527
+ "string"
505
528
  ]
506
529
  }
507
530
  },
@@ -526,9 +549,18 @@
526
549
  ],
527
550
  "js": {
528
551
  "properties": [
552
+ {
553
+ "name": "accessibleDescriptionRef",
554
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
555
+ "value": {
556
+ "type": [
557
+ "string"
558
+ ]
559
+ }
560
+ },
529
561
  {
530
562
  "name": "accessibleName",
531
- "description": "String used to label the component to screen reader users.",
563
+ "description": "String used to label the component for screen reader users.",
532
564
  "value": {
533
565
  "type": [
534
566
  "string"
@@ -537,7 +569,7 @@
537
569
  },
538
570
  {
539
571
  "name": "accessibleNameRef",
540
- "description": "Id of the element used as label of the component to screen reader users.",
572
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
541
573
  "value": {
542
574
  "type": [
543
575
  "string"
package/web-types.lit.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/slider",
4
- "version": "25.3.0-alpha1",
4
+ "version": "25.3.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -19,9 +19,16 @@
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": ".accessibleDescriptionRef",
24
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
25
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": ".accessibleName",
24
- "description": "String used to label the component to screen reader users.",
31
+ "description": "String used to label the component for screen reader users.",
25
32
  "value": {
26
33
  "kind": "expression"
27
34
  }
@@ -35,7 +42,7 @@
35
42
  },
36
43
  {
37
44
  "name": ".accessibleNameRef",
38
- "description": "Id of the element used as label of the component to screen reader users.",
45
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
39
46
  "value": {
40
47
  "kind": "expression"
41
48
  }
@@ -187,16 +194,23 @@
187
194
  "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
195
  "extension": true,
189
196
  "attributes": [
197
+ {
198
+ "name": ".accessibleDescriptionRef",
199
+ "description": "A space-separated list of IDs referencing the elements that\ndescribe the component for screen reader users. The referenced\nelements are announced in addition to the helper text and\nthe error message.",
200
+ "value": {
201
+ "kind": "expression"
202
+ }
203
+ },
190
204
  {
191
205
  "name": ".accessibleName",
192
- "description": "String used to label the component to screen reader users.",
206
+ "description": "String used to label the component for screen reader users.",
193
207
  "value": {
194
208
  "kind": "expression"
195
209
  }
196
210
  },
197
211
  {
198
212
  "name": ".accessibleNameRef",
199
- "description": "Id of the element used as label of the component to screen reader users.",
213
+ "description": "A space-separated list of IDs referencing the elements that\nlabel the component for screen reader users.",
200
214
  "value": {
201
215
  "kind": "expression"
202
216
  }