ropav 0.1.8 → 0.2.0

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 (67) hide show
  1. package/README.md +13 -4
  2. package/dist/base.css +570 -773
  3. package/dist/calendar.css +45 -34
  4. package/dist/calendar.js +108 -83
  5. package/dist/color-input.css +3 -7
  6. package/dist/color-picker.css +2 -6
  7. package/dist/color-swatch.css +2 -6
  8. package/dist/combobox.css +5 -5
  9. package/dist/componentColors.js +29 -25
  10. package/dist/components/alert/types.d.ts +1 -1
  11. package/dist/components/avatar/types.d.ts +1 -1
  12. package/dist/components/badge/types.d.ts +1 -1
  13. package/dist/components/calendar/index.d.ts +1 -1
  14. package/dist/components/calendar/types.d.ts +3 -0
  15. package/dist/components/date-picker/index.d.ts +1 -1
  16. package/dist/components/date-picker/types.d.ts +3 -1
  17. package/dist/components/pagination/types.d.ts +1 -1
  18. package/dist/components/progress/types.d.ts +1 -1
  19. package/dist/components/segmented-control/types.d.ts +1 -1
  20. package/dist/components/slider/types.d.ts +1 -1
  21. package/dist/components/slider/useSlider.d.ts +1 -1
  22. package/dist/components/slider/useSliderPointer.d.ts +15 -0
  23. package/dist/components/slider/useSliderValueState.d.ts +1 -0
  24. package/dist/components/toast/types.d.ts +1 -1
  25. package/dist/components/toolbar/index.d.ts +3 -0
  26. package/dist/components/toolbar/index.js +2 -0
  27. package/dist/components/toolbar/toolbar.d.ts +24 -0
  28. package/dist/components/toolbar/types.d.ts +12 -0
  29. package/dist/components/toolbar/useToolbar.d.ts +7 -0
  30. package/dist/date-picker.css +9 -9
  31. package/dist/date-picker.js +4 -2
  32. package/dist/dropdown-menu.css +7 -7
  33. package/dist/field.css +1 -1
  34. package/dist/focusNavigation.js +12 -6
  35. package/dist/hover-card.css +1 -1
  36. package/dist/index.d.ts +1 -0
  37. package/dist/index.js +2 -1
  38. package/dist/modal.css +1 -1
  39. package/dist/multi-select.css +5 -5
  40. package/dist/pagination.css +1 -1
  41. package/dist/popover.css +2 -2
  42. package/dist/select.css +5 -5
  43. package/dist/slider.css +80 -71
  44. package/dist/slider.js +91 -16
  45. package/dist/tabs.css +3 -3
  46. package/dist/tags-input.css +1 -1
  47. package/dist/textarea.css +1 -1
  48. package/dist/toast.css +1 -1
  49. package/dist/toolbar.css +15 -0
  50. package/dist/toolbar.js +143 -0
  51. package/dist/tooltip.css +1 -1
  52. package/dist/utils/componentColors.d.ts +2 -4
  53. package/dist/utils/dom/focusNavigation.d.ts +4 -1
  54. package/docs/code-architecture.md +30 -1
  55. package/docs/public-styles-api.md +11 -6
  56. package/docs/releasing.md +39 -0
  57. package/package.json +52 -39
  58. package/src/styles/_mixins.scss +2 -6
  59. package/src/styles/_tokens.scss +4 -833
  60. package/src/styles/generated/showcase.html +274 -0
  61. package/src/styles/generated/tokens.css +592 -0
  62. package/src/styles/generated/tokens.md +583 -0
  63. package/src/styles/generated/tokens.scss +1134 -0
  64. package/tokens/manifest.json +6164 -0
  65. package/docs/public-tokens.md +0 -685
  66. package/src/styles/_variables.scss +0 -243
  67. package/src/styles/styles-manifest.json +0 -5244
@@ -17,7 +17,7 @@
17
17
  display: inline-flex;
18
18
  align-items: center;
19
19
  box-sizing: border-box;
20
- min-width: 180px;
20
+ min-width: var(--rp-component-menu-min-width);
21
21
  min-height: var(--_rp-multi-select-height);
22
22
  padding: var(--rp-spacing-1) var(--_rp-multi-select-padding-x);
23
23
  gap: var(--rp-spacing-2);
@@ -99,7 +99,7 @@
99
99
  .rp-multi-select--radius-xl[data-v-b38d027f] {
100
100
  --_rp-multi-select-radius: var(--rp-radius-xl);
101
101
  }
102
- html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-multi-select[data-v-b38d027f] {
102
+ [data-scheme=dark] .rp-multi-select[data-v-b38d027f] {
103
103
  --_rp-multi-select-invalid-border: var(--rp-color-red-light-color);
104
104
  --_rp-multi-select-invalid-ring: color-mix(
105
105
  in srgb,
@@ -252,13 +252,13 @@ html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-mul
252
252
  .rp-multi-select__dropdown[data-v-b38d027f] {
253
253
  position: absolute;
254
254
  width: calc(100% + var(--rp-border-width-thin) * 2);
255
- z-index: 100;
255
+ z-index: var(--rp-z-index-dropdown);
256
256
  background-color: var(--rp-color-default);
257
257
  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
258
258
  border-radius: var(--_rp-multi-select-radius);
259
259
  box-shadow: var(--rp-shadow-md);
260
260
  padding: var(--rp-spacing-1) 0;
261
- max-height: 240px;
261
+ max-height: var(--rp-component-menu-max-height);
262
262
  padding: var(--rp-spacing-1);
263
263
  }
264
264
  .rp-multi-select__dropdown[data-v-b38d027f] .rp-scroll-area__viewport {
@@ -286,7 +286,7 @@ html.dark .rp-multi-select[data-v-b38d027f], [data-rp-color-scheme=dark] .rp-mul
286
286
  background-color: var(--_rp-multi-select-option-highlighted-bg);
287
287
  }
288
288
  .rp-multi-select__option--selected[data-v-b38d027f] {
289
- color: var(--rp-primary-color-light-color);
289
+ color: var(--rp-color-primary-light-color);
290
290
  }
291
291
  .rp-multi-select__option--disabled[data-v-b38d027f] {
292
292
  color: var(--rp-color-disabled-color);
@@ -5,7 +5,7 @@
5
5
  --_rp-pagination-radius: var(--rp-radius-sm);
6
6
  --_rp-pagination-gap: var(--rp-spacing-1);
7
7
  --_rp-pagination-active-bg: var(--rp-color-control-selected-bg);
8
- --_rp-pagination-active-bg-hover: var(--rp-primary-color-filled-hover);
8
+ --_rp-pagination-active-bg-hover: var(--rp-color-primary-filled-hover);
9
9
  --_rp-pagination-active-fg: var(--rp-color-control-selected-fg);
10
10
  --_rp-pagination-active-fg-hover: var(--_rp-pagination-active-fg);
11
11
  display: inline-flex;
package/dist/popover.css CHANGED
@@ -11,9 +11,9 @@
11
11
  --_rp-popover-radius: var(--rp-radius-sm);
12
12
  --_rp-popover-arrow-size: 0.5rem;
13
13
  position: absolute;
14
- z-index: 100;
14
+ z-index: var(--rp-z-index-dropdown);
15
15
  box-sizing: border-box;
16
- min-width: 180px;
16
+ min-width: var(--rp-component-menu-min-width);
17
17
  max-width: min(24rem, 100vw - var(--rp-spacing-6));
18
18
  padding: var(--rp-spacing-4);
19
19
  color: var(--rp-color-text);
package/dist/select.css CHANGED
@@ -61,7 +61,7 @@
61
61
  --_rp-select-option-min-height: calc(var(--rp-size-control-xl) - var(--rp-spacing-6));
62
62
  --_rp-select-option-padding-y: var(--rp-spacing-2);
63
63
  }
64
- html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[data-v-097d7f90] {
64
+ [data-scheme=dark] .rp-select[data-v-097d7f90] {
65
65
  --_rp-select-invalid-border: var(--rp-color-red-light-color);
66
66
  --_rp-select-invalid-ring: color-mix(
67
67
  in srgb,
@@ -80,7 +80,7 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
80
80
  justify-content: center;
81
81
  justify-content: space-between;
82
82
  width: 100%;
83
- min-width: 180px;
83
+ min-width: var(--rp-component-menu-min-width);
84
84
  height: var(--_rp-select-height);
85
85
  padding: 0 var(--_rp-select-padding-x);
86
86
  font-size: var(--_rp-select-font-size);
@@ -203,13 +203,13 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
203
203
  .rp-select__dropdown[data-v-097d7f90] {
204
204
  position: absolute;
205
205
  width: 100%;
206
- z-index: 100;
206
+ z-index: var(--rp-z-index-dropdown);
207
207
  background-color: var(--rp-color-default);
208
208
  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
209
209
  border-radius: var(--_rp-select-radius);
210
210
  box-shadow: var(--rp-shadow-md);
211
211
  padding: var(--rp-spacing-1) 0;
212
- max-height: 240px;
212
+ max-height: var(--rp-component-menu-max-height);
213
213
  padding: var(--rp-spacing-1);
214
214
  }
215
215
  .rp-select__dropdown[data-v-097d7f90] .rp-scroll-area__viewport {
@@ -230,7 +230,7 @@ html.dark .rp-select[data-v-097d7f90], [data-rp-color-scheme=dark] .rp-select[da
230
230
  background-color: var(--_rp-select-option-focused-bg);
231
231
  }
232
232
  .rp-select__option--selected[data-v-097d7f90] {
233
- color: var(--rp-primary-color-light-color);
233
+ color: var(--rp-color-primary-light-color);
234
234
  }
235
235
  .rp-select__option--disabled[data-v-097d7f90] {
236
236
  color: var(--rp-color-disabled-color);
package/dist/slider.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer ropav.components {
2
- .rp-slider[data-v-f21fa11c] {
2
+ .rp-slider[data-v-0fbfb274] {
3
3
  --_rp-slider-color: var(--rp-color-control-selected-bg);
4
4
  --_rp-slider-track-bg: var(--rp-color-control-track-bg);
5
5
  --_rp-slider-thumb-bg: var(--rp-color-control-thumb-bg);
@@ -51,11 +51,11 @@
51
51
  var(--_rp-slider-tooltip-ratio)
52
52
  );
53
53
  }
54
- .rp-slider--thumb-hidden[data-v-f21fa11c] {
54
+ .rp-slider--thumb-hidden[data-v-0fbfb274], .rp-slider--thumb-interaction[data-v-0fbfb274] {
55
55
  --_rp-slider-fill-position: calc(100% * var(--_rp-slider-ratio));
56
56
  --_rp-slider-tooltip-fill-position: calc(100% * var(--_rp-slider-tooltip-ratio));
57
57
  }
58
- .rp-slider[data-v-f21fa11c] {
58
+ .rp-slider[data-v-0fbfb274] {
59
59
  display: inline-grid;
60
60
  width: 100%;
61
61
  min-width: var(--_rp-slider-track-length);
@@ -65,43 +65,43 @@
65
65
  font-size: var(--_rp-slider-font-size);
66
66
  line-height: var(--rp-line-height-md);
67
67
  }
68
- html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[data-v-f21fa11c] {
68
+ [data-scheme=dark] .rp-slider[data-v-0fbfb274] {
69
69
  --_rp-slider-thumb-bg: var(--_rp-slider-color);
70
70
  --_rp-slider-thumb-border: var(--rp-color-control-thumb-bg);
71
71
  }
72
- .rp-slider--custom-thumb[data-v-f21fa11c] {
72
+ .rp-slider--custom-thumb[data-v-0fbfb274] {
73
73
  --_rp-slider-thumb-bg: var(--_rp-slider-color);
74
74
  --_rp-slider-thumb-border: var(--rp-color-control-thumb-bg);
75
75
  }
76
- .rp-slider--disabled[data-v-f21fa11c] {
76
+ .rp-slider--disabled[data-v-0fbfb274] {
77
77
  opacity: var(--rp-opacity-disabled);
78
78
  cursor: not-allowed;
79
79
  }
80
- .rp-slider--invalid .rp-slider__bar[data-v-f21fa11c] {
80
+ .rp-slider--invalid .rp-slider__bar[data-v-0fbfb274] {
81
81
  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--_rp-slider-invalid-ring);
82
82
  }
83
- .rp-slider__header[data-v-f21fa11c] {
83
+ .rp-slider__header[data-v-0fbfb274] {
84
84
  display: flex;
85
85
  align-items: center;
86
86
  justify-content: space-between;
87
87
  min-width: 0;
88
88
  gap: var(--rp-spacing-3);
89
89
  }
90
- .rp-slider__label[data-v-f21fa11c] {
90
+ .rp-slider__label[data-v-0fbfb274] {
91
91
  min-width: 0;
92
92
  color: var(--rp-color-text);
93
93
  }
94
- .rp-slider__value[data-v-f21fa11c] {
94
+ .rp-slider__value[data-v-0fbfb274] {
95
95
  flex-shrink: 0;
96
96
  color: var(--rp-color-dimmed);
97
97
  font-variant-numeric: tabular-nums;
98
98
  }
99
- .rp-slider__track[data-v-f21fa11c] {
99
+ .rp-slider__track[data-v-0fbfb274] {
100
100
  position: relative;
101
101
  display: block;
102
102
  min-width: 0;
103
103
  }
104
- .rp-slider__rail[data-v-f21fa11c], .rp-slider__bar[data-v-f21fa11c] {
104
+ .rp-slider__rail[data-v-0fbfb274], .rp-slider__bar[data-v-0fbfb274] {
105
105
  position: absolute;
106
106
  top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-track-height)) / 2);
107
107
  left: 0;
@@ -111,7 +111,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
111
111
  pointer-events: none;
112
112
  border-radius: var(--rp-radius-full);
113
113
  }
114
- .rp-slider__track-layer[data-v-f21fa11c] {
114
+ .rp-slider__track-layer[data-v-0fbfb274] {
115
115
  position: absolute;
116
116
  top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-track-height)) / 2);
117
117
  right: calc(var(--_rp-slider-thumb-size) / 2);
@@ -119,27 +119,28 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
119
119
  height: var(--_rp-slider-track-height);
120
120
  pointer-events: none;
121
121
  }
122
- .rp-slider__rail[data-v-f21fa11c] {
122
+ .rp-slider__rail[data-v-0fbfb274] {
123
123
  z-index: 0;
124
124
  background: var(--_rp-slider-track-bg);
125
125
  }
126
- .rp-slider__track-underlay[data-v-f21fa11c] {
126
+ .rp-slider__track-underlay[data-v-0fbfb274] {
127
127
  z-index: 1;
128
128
  }
129
- .rp-slider__bar[data-v-f21fa11c] {
129
+ .rp-slider__bar[data-v-0fbfb274] {
130
130
  z-index: 2;
131
131
  background: linear-gradient(to right, var(--_rp-slider-color) 0 var(--_rp-slider-fill-position), transparent var(--_rp-slider-fill-position) 100%);
132
132
  }
133
- .rp-slider__track-overlay[data-v-f21fa11c] {
133
+ .rp-slider__track-overlay[data-v-0fbfb274] {
134
134
  z-index: 2;
135
135
  }
136
- .rp-slider__track[data-v-f21fa11c] {
136
+ .rp-slider__track[data-v-0fbfb274] {
137
137
  height: var(--_rp-slider-hit-size);
138
+ touch-action: none;
138
139
  }
139
- .rp-slider--marks-with-labels .rp-slider__track[data-v-f21fa11c] {
140
+ .rp-slider--marks-with-labels .rp-slider__track[data-v-0fbfb274] {
140
141
  padding-bottom: calc(var(--_rp-slider-font-size) * var(--rp-line-height-md) + var(--rp-spacing-2));
141
142
  }
142
- .rp-slider__native[data-v-f21fa11c] {
143
+ .rp-slider__native[data-v-0fbfb274] {
143
144
  position: relative;
144
145
  z-index: 3;
145
146
  display: block;
@@ -153,7 +154,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
153
154
  cursor: pointer;
154
155
  outline: none;
155
156
  }
156
- .rp-slider__marks[data-v-f21fa11c] {
157
+ .rp-slider__marks[data-v-0fbfb274] {
157
158
  position: absolute;
158
159
  z-index: 2;
159
160
  top: 0;
@@ -162,7 +163,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
162
163
  height: var(--_rp-slider-thumb-size);
163
164
  pointer-events: none;
164
165
  }
165
- .rp-slider__mark[data-v-f21fa11c] {
166
+ .rp-slider__mark[data-v-0fbfb274] {
166
167
  position: absolute;
167
168
  top: 0;
168
169
  left: var(--_rp-slider-mark-position);
@@ -175,7 +176,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
175
176
  line-height: var(--rp-line-height-md);
176
177
  transform: translateX(-50%);
177
178
  }
178
- .rp-slider__mark-dot[data-v-f21fa11c] {
179
+ .rp-slider__mark-dot[data-v-0fbfb274] {
179
180
  width: var(--_rp-slider-mark-size);
180
181
  height: var(--_rp-slider-mark-size);
181
182
  margin-top: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2);
@@ -184,7 +185,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
184
185
  box-shadow: 0 0 0 var(--rp-border-width-thin) transparent;
185
186
  transition: box-shadow var(--rp-transition-fast);
186
187
  }
187
- .rp-slider__mark-label[data-v-f21fa11c] {
188
+ .rp-slider__mark-label[data-v-0fbfb274] {
188
189
  max-width: 100%;
189
190
  margin-top: calc((var(--_rp-slider-thumb-size) - var(--_rp-slider-mark-size)) / 2 + var(--rp-spacing-1));
190
191
  overflow-wrap: anywhere;
@@ -193,16 +194,16 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
193
194
  text-align: center;
194
195
  font-variant-numeric: tabular-nums;
195
196
  }
196
- .rp-slider__mark--filled .rp-slider__mark-dot[data-v-f21fa11c] {
197
+ .rp-slider__mark--filled .rp-slider__mark-dot[data-v-0fbfb274] {
197
198
  box-shadow: 0 0 0 var(--rp-border-width-thin) var(--_rp-slider-mark-ring-color);
198
199
  }
199
- .rp-slider__mark--filled .rp-slider__mark-label[data-v-f21fa11c] {
200
+ .rp-slider__mark--filled .rp-slider__mark-label[data-v-0fbfb274] {
200
201
  color: var(--_rp-slider-mark-filled-label-color);
201
202
  }
202
- .rp-slider__marks[data-v-f21fa11c] {
203
+ .rp-slider__marks[data-v-0fbfb274] {
203
204
  top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
204
205
  }
205
- .rp-slider__thumb[data-v-f21fa11c] {
206
+ .rp-slider__thumb[data-v-0fbfb274] {
206
207
  position: absolute;
207
208
  z-index: 4;
208
209
  top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
@@ -211,7 +212,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
211
212
  height: var(--_rp-slider-thumb-size);
212
213
  pointer-events: none;
213
214
  }
214
- .rp-slider__thumb-content[data-v-f21fa11c] {
215
+ .rp-slider__thumb-content[data-v-0fbfb274] {
215
216
  position: absolute;
216
217
  top: 50%;
217
218
  left: var(--_rp-slider-percent);
@@ -231,11 +232,11 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
231
232
  transform: translate(-50%, -50%);
232
233
  transition: opacity var(--rp-transition-fast), border-color var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
233
234
  }
234
- .rp-slider__thumb-content[data-v-f21fa11c] svg {
235
+ .rp-slider__thumb-content[data-v-0fbfb274] svg {
235
236
  width: 60%;
236
237
  height: 60%;
237
238
  }
238
- .rp-slider__travel[data-v-f21fa11c] {
239
+ .rp-slider__travel[data-v-0fbfb274] {
239
240
  position: absolute;
240
241
  top: 0;
241
242
  right: calc(var(--_rp-slider-thumb-size) / 2);
@@ -243,7 +244,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
243
244
  height: var(--_rp-slider-hit-size);
244
245
  pointer-events: none;
245
246
  }
246
- .rp-slider__tooltip[data-v-f21fa11c] {
247
+ .rp-slider__tooltip[data-v-0fbfb274] {
247
248
  position: absolute;
248
249
  z-index: 5;
249
250
  top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
@@ -253,7 +254,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
253
254
  pointer-events: none;
254
255
  translate: -50% 0;
255
256
  }
256
- .rp-slider__tooltip-anchor[data-v-f21fa11c] {
257
+ .rp-slider__tooltip-anchor[data-v-0fbfb274] {
257
258
  display: block;
258
259
  width: 100%;
259
260
  height: 100%;
@@ -265,25 +266,25 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
265
266
  white-space: nowrap;
266
267
  font-variant-numeric: tabular-nums;
267
268
  }
268
- .rp-slider__native[data-v-f21fa11c]:disabled {
269
+ .rp-slider__native[data-v-0fbfb274]:disabled {
269
270
  cursor: not-allowed;
270
271
  }
271
- .rp-slider__native[data-v-f21fa11c]::-webkit-slider-runnable-track {
272
+ .rp-slider__native[data-v-0fbfb274]::-webkit-slider-runnable-track {
272
273
  height: var(--_rp-slider-hit-size);
273
274
  border-radius: var(--rp-radius-full);
274
275
  background: transparent;
275
276
  }
276
- .rp-slider__native[data-v-f21fa11c]::-moz-range-track {
277
+ .rp-slider__native[data-v-0fbfb274]::-moz-range-track {
277
278
  height: var(--_rp-slider-hit-size);
278
279
  border-radius: var(--rp-radius-full);
279
280
  background: transparent;
280
281
  }
281
- .rp-slider__native[data-v-f21fa11c]::-moz-range-progress {
282
+ .rp-slider__native[data-v-0fbfb274]::-moz-range-progress {
282
283
  height: var(--_rp-slider-hit-size);
283
284
  border-radius: var(--rp-radius-full);
284
285
  background: transparent;
285
286
  }
286
- .rp-slider__native[data-v-f21fa11c]::-webkit-slider-thumb {
287
+ .rp-slider__native[data-v-0fbfb274]::-webkit-slider-thumb {
287
288
  width: var(--_rp-slider-thumb-size);
288
289
  height: var(--_rp-slider-thumb-size);
289
290
  margin-top: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
@@ -294,7 +295,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
294
295
  border: 0;
295
296
  border-radius: var(--rp-radius-full);
296
297
  }
297
- .rp-slider__native[data-v-f21fa11c]::-moz-range-thumb {
298
+ .rp-slider__native[data-v-0fbfb274]::-moz-range-thumb {
298
299
  width: var(--_rp-slider-thumb-size);
299
300
  height: var(--_rp-slider-thumb-size);
300
301
  box-sizing: border-box;
@@ -303,37 +304,37 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
303
304
  border: 0;
304
305
  border-radius: var(--rp-radius-full);
305
306
  }
306
- .rp-slider--vertical[data-v-f21fa11c] {
307
+ .rp-slider--vertical[data-v-0fbfb274] {
307
308
  width: max-content;
308
309
  min-width: 0;
309
310
  max-width: none;
310
311
  justify-items: center;
311
312
  }
312
- .rp-slider--vertical .rp-slider__header[data-v-f21fa11c] {
313
+ .rp-slider--vertical .rp-slider__header[data-v-0fbfb274] {
313
314
  width: max-content;
314
315
  max-width: 12rem;
315
316
  justify-content: space-between;
316
317
  gap: var(--rp-spacing-3);
317
318
  text-align: center;
318
319
  }
319
- .rp-slider--vertical .rp-slider__value[data-v-f21fa11c] {
320
+ .rp-slider--vertical .rp-slider__value[data-v-0fbfb274] {
320
321
  min-width: 3ch;
321
322
  text-align: right;
322
323
  }
323
- .rp-slider--vertical .rp-slider__track[data-v-f21fa11c] {
324
+ .rp-slider--vertical .rp-slider__track[data-v-0fbfb274] {
324
325
  width: var(--_rp-slider-hit-size);
325
326
  height: var(--_rp-slider-track-length);
326
327
  min-width: 0;
327
328
  min-height: var(--_rp-slider-track-length);
328
329
  justify-self: center;
329
330
  }
330
- .rp-slider--vertical .rp-slider__rail[data-v-f21fa11c], .rp-slider--vertical .rp-slider__bar[data-v-f21fa11c] {
331
+ .rp-slider--vertical .rp-slider__rail[data-v-0fbfb274], .rp-slider--vertical .rp-slider__bar[data-v-0fbfb274] {
331
332
  top: 0;
332
333
  left: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-track-height)) / 2);
333
334
  width: var(--_rp-slider-track-height);
334
335
  height: 100%;
335
336
  }
336
- .rp-slider--vertical .rp-slider__track-layer[data-v-f21fa11c] {
337
+ .rp-slider--vertical .rp-slider__track-layer[data-v-0fbfb274] {
337
338
  top: calc(var(--_rp-slider-thumb-size) / 2);
338
339
  right: auto;
339
340
  bottom: calc(var(--_rp-slider-thumb-size) / 2);
@@ -341,14 +342,14 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
341
342
  width: var(--_rp-slider-track-height);
342
343
  height: auto;
343
344
  }
344
- .rp-slider--vertical .rp-slider__bar[data-v-f21fa11c] {
345
+ .rp-slider--vertical .rp-slider__bar[data-v-0fbfb274] {
345
346
  background: linear-gradient(to top, var(--_rp-slider-color) 0 var(--_rp-slider-fill-position), transparent var(--_rp-slider-fill-position) 100%);
346
347
  }
347
- .rp-slider--vertical.rp-slider--marks-with-labels .rp-slider__track[data-v-f21fa11c] {
348
+ .rp-slider--vertical.rp-slider--marks-with-labels .rp-slider__track[data-v-0fbfb274] {
348
349
  padding-right: calc(var(--_rp-slider-font-size) * var(--rp-line-height-md) + var(--rp-spacing-2));
349
350
  padding-bottom: 0;
350
351
  }
351
- .rp-slider--vertical .rp-slider__native[data-v-f21fa11c] {
352
+ .rp-slider--vertical .rp-slider__native[data-v-0fbfb274] {
352
353
  width: var(--_rp-slider-hit-size);
353
354
  min-width: 0;
354
355
  height: 100%;
@@ -356,7 +357,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
356
357
  direction: rtl;
357
358
  writing-mode: vertical-lr;
358
359
  }
359
- .rp-slider--vertical .rp-slider__marks[data-v-f21fa11c] {
360
+ .rp-slider--vertical .rp-slider__marks[data-v-0fbfb274] {
360
361
  top: calc(var(--_rp-slider-thumb-size) / 2);
361
362
  right: auto;
362
363
  bottom: calc(var(--_rp-slider-thumb-size) / 2);
@@ -364,24 +365,24 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
364
365
  width: var(--_rp-slider-hit-size);
365
366
  height: auto;
366
367
  }
367
- .rp-slider--vertical .rp-slider__mark[data-v-f21fa11c] {
368
+ .rp-slider--vertical .rp-slider__mark[data-v-0fbfb274] {
368
369
  top: calc(100% - var(--_rp-slider-mark-position));
369
370
  left: 0;
370
371
  flex-direction: row;
371
372
  align-items: center;
372
373
  transform: translateY(-50%);
373
374
  }
374
- .rp-slider--vertical .rp-slider__mark-dot[data-v-f21fa11c] {
375
+ .rp-slider--vertical .rp-slider__mark-dot[data-v-0fbfb274] {
375
376
  flex: 0 0 auto;
376
377
  margin-top: 0;
377
378
  margin-left: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-mark-size)) / 2);
378
379
  }
379
- .rp-slider--vertical .rp-slider__mark-label[data-v-f21fa11c] {
380
+ .rp-slider--vertical .rp-slider__mark-label[data-v-0fbfb274] {
380
381
  margin-top: 0;
381
382
  margin-left: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-mark-size)) / 2 + var(--rp-spacing-1));
382
383
  text-align: left;
383
384
  }
384
- .rp-slider--vertical .rp-slider__thumb[data-v-f21fa11c] {
385
+ .rp-slider--vertical .rp-slider__thumb[data-v-0fbfb274] {
385
386
  top: calc(var(--_rp-slider-thumb-size) / 2);
386
387
  right: auto;
387
388
  bottom: calc(var(--_rp-slider-thumb-size) / 2);
@@ -389,11 +390,11 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
389
390
  width: var(--_rp-slider-thumb-size);
390
391
  height: auto;
391
392
  }
392
- .rp-slider--vertical .rp-slider__thumb-content[data-v-f21fa11c] {
393
+ .rp-slider--vertical .rp-slider__thumb-content[data-v-0fbfb274] {
393
394
  top: calc(100% - var(--_rp-slider-percent));
394
395
  left: 50%;
395
396
  }
396
- .rp-slider--vertical .rp-slider__travel[data-v-f21fa11c] {
397
+ .rp-slider--vertical .rp-slider__travel[data-v-0fbfb274] {
397
398
  top: calc(var(--_rp-slider-thumb-size) / 2);
398
399
  right: auto;
399
400
  bottom: calc(var(--_rp-slider-thumb-size) / 2);
@@ -401,69 +402,77 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
401
402
  width: var(--_rp-slider-hit-size);
402
403
  height: auto;
403
404
  }
404
- .rp-slider--vertical .rp-slider__tooltip[data-v-f21fa11c] {
405
+ .rp-slider--vertical .rp-slider__tooltip[data-v-0fbfb274] {
405
406
  top: calc(100% - var(--_rp-slider-tooltip-fill-position));
406
407
  left: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
407
408
  translate: 0 -50%;
408
409
  }
409
- .rp-slider--vertical .rp-slider__native[data-v-f21fa11c]::-webkit-slider-runnable-track {
410
+ .rp-slider--vertical .rp-slider__native[data-v-0fbfb274]::-webkit-slider-runnable-track {
410
411
  width: var(--_rp-slider-hit-size);
411
412
  height: 100%;
412
413
  background: transparent;
413
414
  }
414
- .rp-slider--vertical .rp-slider__native[data-v-f21fa11c]::-moz-range-track {
415
+ .rp-slider--vertical .rp-slider__native[data-v-0fbfb274]::-moz-range-track {
415
416
  width: var(--_rp-slider-hit-size);
416
417
  height: 100%;
417
418
  }
418
- .rp-slider--vertical .rp-slider__native[data-v-f21fa11c]::-moz-range-progress {
419
+ .rp-slider--vertical .rp-slider__native[data-v-0fbfb274]::-moz-range-progress {
419
420
  width: var(--_rp-slider-hit-size);
420
421
  }
421
- .rp-slider--vertical .rp-slider__native[data-v-f21fa11c]::-webkit-slider-thumb {
422
+ .rp-slider--vertical .rp-slider__native[data-v-0fbfb274]::-webkit-slider-thumb {
422
423
  margin-top: 0;
423
424
  margin-left: calc((var(--_rp-slider-hit-size) - var(--_rp-slider-thumb-size)) / 2);
424
425
  }
425
- .rp-slider--thumb-hidden .rp-slider__thumb-content[data-v-f21fa11c], .rp-slider--thumb-interaction .rp-slider__thumb-content[data-v-f21fa11c] {
426
+ .rp-slider--thumb-interaction:not(.rp-slider--vertical) .rp-slider__thumb[data-v-0fbfb274], .rp-slider--thumb-interaction:not(.rp-slider--vertical) .rp-slider__travel[data-v-0fbfb274], .rp-slider--thumb-interaction:not(.rp-slider--vertical) .rp-slider__marks[data-v-0fbfb274] {
427
+ right: 0;
428
+ left: 0;
429
+ }
430
+ .rp-slider--vertical.rp-slider--thumb-interaction .rp-slider__thumb[data-v-0fbfb274], .rp-slider--vertical.rp-slider--thumb-interaction .rp-slider__travel[data-v-0fbfb274], .rp-slider--vertical.rp-slider--thumb-interaction .rp-slider__marks[data-v-0fbfb274] {
431
+ top: 0;
432
+ bottom: 0;
433
+ }
434
+ .rp-slider--thumb-hidden .rp-slider__thumb-content[data-v-0fbfb274], .rp-slider--thumb-interaction .rp-slider__thumb-content[data-v-0fbfb274] {
426
435
  opacity: 0;
427
436
  }
428
- .rp-slider--thumb-interaction:not([data-disabled])[data-track-hovered] .rp-slider__thumb-content[data-v-f21fa11c], .rp-slider--thumb-interaction:not([data-disabled])[data-dragging] .rp-slider__thumb-content[data-v-f21fa11c], .rp-slider--thumb-interaction .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-f21fa11c] {
437
+ .rp-slider--thumb-interaction:not([data-disabled])[data-track-hovered] .rp-slider__thumb-content[data-v-0fbfb274], .rp-slider--thumb-interaction:not([data-disabled])[data-dragging] .rp-slider__thumb-content[data-v-0fbfb274], .rp-slider--thumb-interaction .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-0fbfb274] {
429
438
  opacity: 1;
430
439
  }
431
- .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-f21fa11c] {
440
+ .rp-slider__native:focus-visible ~ .rp-slider__thumb .rp-slider__thumb-content[data-v-0fbfb274] {
432
441
  box-shadow: var(--rp-shadow-sm), 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
433
442
  }
434
- .rp-slider--thumb-hidden .rp-slider__native[data-v-f21fa11c]:focus-visible {
443
+ .rp-slider--thumb-hidden .rp-slider__native[data-v-0fbfb274]:focus-visible {
435
444
  border-radius: var(--rp-radius-full);
436
445
  box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
437
446
  }
438
- .rp-slider--size-xs[data-v-f21fa11c] {
447
+ .rp-slider--size-xs[data-v-0fbfb274] {
439
448
  --_rp-slider-default-track-height: 4px;
440
449
  --_rp-slider-default-thumb-size: 8px;
441
450
  --_rp-slider-default-thumb-border-width: 4px;
442
451
  --_rp-slider-font-size: var(--rp-font-size-xs);
443
452
  --_rp-slider-default-mark-size: 4px;
444
453
  }
445
- .rp-slider--size-sm[data-v-f21fa11c] {
454
+ .rp-slider--size-sm[data-v-0fbfb274] {
446
455
  --_rp-slider-default-track-height: 6px;
447
456
  --_rp-slider-default-thumb-size: 12px;
448
457
  --_rp-slider-default-thumb-border-width: 3px;
449
458
  --_rp-slider-font-size: var(--rp-font-size-sm);
450
459
  --_rp-slider-default-mark-size: 4px;
451
460
  }
452
- .rp-slider--size-md[data-v-f21fa11c] {
461
+ .rp-slider--size-md[data-v-0fbfb274] {
453
462
  --_rp-slider-default-track-height: 8px;
454
463
  --_rp-slider-default-thumb-size: 16px;
455
464
  --_rp-slider-default-thumb-border-width: 4px;
456
465
  --_rp-slider-font-size: var(--rp-font-size-md);
457
466
  --_rp-slider-default-mark-size: 4px;
458
467
  }
459
- .rp-slider--size-lg[data-v-f21fa11c] {
468
+ .rp-slider--size-lg[data-v-0fbfb274] {
460
469
  --_rp-slider-default-track-height: 10px;
461
470
  --_rp-slider-default-thumb-size: 20px;
462
471
  --_rp-slider-default-thumb-border-width: 5px;
463
472
  --_rp-slider-font-size: var(--rp-font-size-lg);
464
473
  --_rp-slider-default-mark-size: 5px;
465
474
  }
466
- .rp-slider--size-xl[data-v-f21fa11c] {
475
+ .rp-slider--size-xl[data-v-0fbfb274] {
467
476
  --_rp-slider-default-track-height: 12px;
468
477
  --_rp-slider-default-thumb-size: 24px;
469
478
  --_rp-slider-default-thumb-border-width: 6px;
@@ -484,7 +493,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
484
493
  --_rp-tooltip-bg: var(--rp-color-bright);
485
494
  --_rp-tooltip-fg: var(--rp-color-default);
486
495
  position: absolute;
487
- z-index: 1000;
496
+ z-index: var(--rp-z-index-tooltip);
488
497
  box-sizing: border-box;
489
498
  width: max-content;
490
499
  max-width: min(18rem, 100vw - var(--rp-spacing-6));
@@ -763,7 +772,7 @@ html.dark .rp-slider[data-v-f21fa11c], [data-rp-color-scheme=dark] .rp-slider[da
763
772
  font-size: var(--_rp-range-slider-font-size);
764
773
  line-height: var(--rp-line-height-md);
765
774
  }
766
- html.dark .rp-range-slider[data-v-e27ae1af], [data-rp-color-scheme=dark] .rp-range-slider[data-v-e27ae1af] {
775
+ [data-scheme=dark] .rp-range-slider[data-v-e27ae1af] {
767
776
  --_rp-range-slider-thumb-bg: var(--_rp-range-slider-color);
768
777
  --_rp-range-slider-thumb-border: var(--rp-color-control-thumb-bg);
769
778
  }