@vaadin/slider 25.3.2 → 25.4.0-alpha2

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 (9) hide show
  1. package/custom-elements.json +2 -2
  2. package/package.json +11 -11
  3. package/src/styles/vaadin-slider-base-styles.js +17 -6
  4. package/src/vaadin-range-slider.d.ts +3 -0
  5. package/src/vaadin-range-slider.js +5 -1
  6. package/src/vaadin-slider.d.ts +3 -0
  7. package/src/vaadin-slider.js +5 -1
  8. package/web-types.json +3 -3
  9. package/web-types.lit.json +3 -3
package/custom-elements.json CHANGED
@@ -38,7 +38,7 @@
38
38
  "declarations": [
39
39
  {
40
40
  "kind": "class",
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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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
44
  {
@@ -841,7 +841,7 @@
841
841
  "declarations": [
842
842
  {
843
843
  "kind": "class",
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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
845
845
  "name": "Slider",
846
846
  "members": [
847
847
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/slider",
3
- "version": "25.3.2",
3
+ "version": "25.4.0-alpha2",
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.2",
39
- "@vaadin/component-base": "~25.3.2",
40
- "@vaadin/field-base": "~25.3.2",
41
- "@vaadin/overlay": "~25.3.2",
42
- "@vaadin/vaadin-themable-mixin": "~25.3.2",
38
+ "@vaadin/a11y-base": "25.4.0-alpha2",
39
+ "@vaadin/component-base": "25.4.0-alpha2",
40
+ "@vaadin/field-base": "25.4.0-alpha2",
41
+ "@vaadin/overlay": "25.4.0-alpha2",
42
+ "@vaadin/vaadin-themable-mixin": "25.4.0-alpha2",
43
43
  "lit": "^3.0.0"
44
44
  },
45
45
  "devDependencies": {
46
- "@vaadin/aura": "~25.3.2",
47
- "@vaadin/chai-plugins": "~25.3.2",
48
- "@vaadin/test-runner-commands": "~25.3.2",
46
+ "@vaadin/aura": "25.4.0-alpha2",
47
+ "@vaadin/chai-plugins": "25.4.0-alpha2",
48
+ "@vaadin/test-runner-commands": "25.4.0-alpha2",
49
49
  "@vaadin/testing-helpers": "^2.0.0",
50
- "@vaadin/vaadin-lumo-styles": "~25.3.2"
50
+ "@vaadin/vaadin-lumo-styles": "25.4.0-alpha2"
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": "3f75254a3f77da3977cb79a77f549f37b8a5d54e"
57
+ "gitHead": "213f8b55112558d2f976d8730fe44370ca868333"
58
58
  }
package/src/styles/vaadin-slider-base-styles.js CHANGED
@@ -38,12 +38,11 @@ export const sliderStyles = css`
38
38
  }
39
39
 
40
40
  :host([min-max-visible]) {
41
- grid-template:
42
- 'label' auto var(--_helper-above-field, 'helper' auto) 'baseline' 0 'input' 1fr 'marks' auto var(
43
- --_helper-below-field,
44
- 'helper' auto
45
- )
46
- 'error' auto / 100%;
41
+ --_rows-after-input: 'marks' auto;
42
+ }
43
+
44
+ :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])[min-max-visible]) {
45
+ --_rows-after-input: 'label marks' auto;
47
46
  }
48
47
 
49
48
  #controls {
@@ -59,6 +58,18 @@ export const sliderStyles = css`
59
58
  --_track-width: calc(100% - var(--_thumb-width));
60
59
  }
61
60
 
61
+ :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) #controls {
62
+ align-self: baseline;
63
+ }
64
+
65
+ /* Baseline alignment guide */
66
+ :host(:is([theme~='label-aside'], [data-form-layout-has-labels-aside])) #controls::before {
67
+ content: '\\2003' / '';
68
+ grid-row: 1;
69
+ grid-column: track-start / track-end;
70
+ pointer-events: none;
71
+ }
72
+
62
73
  [part='track'] {
63
74
  box-sizing: border-box;
64
75
  grid-row: 1;
package/src/vaadin-range-slider.d.ts CHANGED
@@ -103,6 +103,9 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
103
103
  * | `--vaadin-input-field-helper-color` |
104
104
  * | `--vaadin-input-field-helper-font-size` |
105
105
  * | `--vaadin-input-field-helper-font-weight` |
106
+ * | `--vaadin-input-field-label-aside-gap` |
107
+ * | `--vaadin-input-field-label-aside-text-align` |
108
+ * | `--vaadin-input-field-label-aside-width` |
106
109
  * | `--vaadin-input-field-label-color` |
107
110
  * | `--vaadin-input-field-label-font-size` |
108
111
  * | `--vaadin-input-field-label-font-weight` |
package/src/vaadin-range-slider.js CHANGED
@@ -14,7 +14,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
14
14
  import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
15
15
  import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
16
16
  import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
17
- import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
17
+ import { field, fieldLabelAside } from '@vaadin/field-base/src/styles/field-base-styles.js';
18
18
  import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
19
19
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
20
20
  import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
@@ -72,6 +72,9 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
72
72
  * | `--vaadin-input-field-helper-color` |
73
73
  * | `--vaadin-input-field-helper-font-size` |
74
74
  * | `--vaadin-input-field-helper-font-weight` |
75
+ * | `--vaadin-input-field-label-aside-gap` |
76
+ * | `--vaadin-input-field-label-aside-text-align` |
77
+ * | `--vaadin-input-field-label-aside-width` |
75
78
  * | `--vaadin-input-field-label-color` |
76
79
  * | `--vaadin-input-field-label-font-size` |
77
80
  * | `--vaadin-input-field-label-font-weight` |
@@ -139,6 +142,7 @@ class RangeSlider extends FieldMixin(
139
142
  static get styles() {
140
143
  return [
141
144
  field,
145
+ fieldLabelAside,
142
146
  sliderStyles,
143
147
  css`
144
148
  :host([focus-ring][start-focused]) [part~='thumb-start'],
package/src/vaadin-slider.d.ts CHANGED
@@ -98,6 +98,9 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
98
98
  * | `--vaadin-input-field-helper-color` |
99
99
  * | `--vaadin-input-field-helper-font-size` |
100
100
  * | `--vaadin-input-field-helper-font-weight` |
101
+ * | `--vaadin-input-field-label-aside-gap` |
102
+ * | `--vaadin-input-field-label-aside-text-align` |
103
+ * | `--vaadin-input-field-label-aside-width` |
101
104
  * | `--vaadin-input-field-label-color` |
102
105
  * | `--vaadin-input-field-label-font-size` |
103
106
  * | `--vaadin-input-field-label-font-weight` |
package/src/vaadin-slider.js CHANGED
@@ -14,7 +14,7 @@ import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
14
14
  import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
15
15
  import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
16
16
  import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
17
- import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
17
+ import { field, fieldLabelAside } from '@vaadin/field-base/src/styles/field-base-styles.js';
18
18
  import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
19
19
  import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
20
20
  import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
@@ -67,6 +67,9 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
67
67
  * | `--vaadin-input-field-helper-color` |
68
68
  * | `--vaadin-input-field-helper-font-size` |
69
69
  * | `--vaadin-input-field-helper-font-weight` |
70
+ * | `--vaadin-input-field-label-aside-gap` |
71
+ * | `--vaadin-input-field-label-aside-text-align` |
72
+ * | `--vaadin-input-field-label-aside-width` |
70
73
  * | `--vaadin-input-field-label-color` |
71
74
  * | `--vaadin-input-field-label-font-size` |
72
75
  * | `--vaadin-input-field-label-font-weight` |
@@ -134,6 +137,7 @@ class Slider extends FieldMixin(
134
137
  static get styles() {
135
138
  return [
136
139
  field,
140
+ fieldLabelAside,
137
141
  sliderStyles,
138
142
  css`
139
143
  :host([focus-ring]) [part='thumb'] {
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/slider",
4
- "version": "25.3.2",
4
+ "version": "25.4.0-alpha2",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-range-slider",
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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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
14
  "name": "accessible-description-ref",
@@ -382,7 +382,7 @@
382
382
  },
383
383
  {
384
384
  "name": "vaadin-slider",
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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
386
386
  "attributes": [
387
387
  {
388
388
  "name": "accessible-description-ref",
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.2",
4
+ "version": "25.4.0-alpha2",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
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```\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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
22
  {
@@ -191,7 +191,7 @@
191
191
  },
192
192
  {
193
193
  "name": "vaadin-slider",
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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
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-aside-gap` |\n| `--vaadin-input-field-label-aside-text-align` |\n| `--vaadin-input-field-label-aside-width` |\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-border-radius` |\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-font-size` |\n| `--vaadin-slider-bubble-font-weight` |\n| `--vaadin-slider-bubble-line-height` |\n| `--vaadin-slider-bubble-offset` |\n| `--vaadin-slider-bubble-padding` |\n| `--vaadin-slider-bubble-shadow` |\n| `--vaadin-slider-bubble-text-color` |\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-background` |\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.",
195
195
  "extension": true,
196
196
  "attributes": [
197
197
  {