@cloud-ru/ds-scroll 1.0.3-preview-d90ac2be.0 → 1.0.3

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 (17) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/Scroll.js +4 -10
  3. package/dist/cjs/constants.d.ts +0 -2
  4. package/dist/cjs/constants.js +1 -3
  5. package/dist/cjs/style.css +14 -8
  6. package/dist/cjs/styles.module.css +14 -8
  7. package/dist/esm/Scroll.js +5 -11
  8. package/dist/esm/constants.d.ts +0 -2
  9. package/dist/esm/constants.js +0 -2
  10. package/dist/esm/style.css +14 -8
  11. package/dist/esm/styles.module.css +14 -8
  12. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  13. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  14. package/package.json +3 -3
  15. package/src/Scroll.tsx +4 -12
  16. package/src/constants.ts +0 -3
  17. package/src/styles.module.scss +3 -29
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 1.0.3 (2026-09-25)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **FF-9083:** align component sizes, typography and focus rings with Snack UI Kit tokens ([9307f2e](https://github.com/cloud-ru-tech/snack-v2/commit/9307f2e80ef14c139340283af248ba7a14de8a11))
11
+
6
12
  ## 1.0.2 (2026-08-27)
7
13
 
8
14
  ### Bug Fixes
package/dist/cjs/Scroll.js CHANGED
@@ -81,7 +81,7 @@ exports.Scroll = (0, react_1.forwardRef)(function Scroll({ children, className,
81
81
  injectStateLayers();
82
82
  setOverlayScrollbarInited(true);
83
83
  }, [injectStateLayers]);
84
- const onScroll = (0, react_1.useCallback)((_, event) => {
84
+ const onScroll = (0, react_1.useCallback)((event) => {
85
85
  onScrollProp?.(event);
86
86
  if (autoscrollTo) {
87
87
  syncPositions();
@@ -106,14 +106,6 @@ exports.Scroll = (0, react_1.forwardRef)(function Scroll({ children, className,
106
106
  return ((0, jsx_runtime_1.jsx)(overlayscrollbars_react_1.OverlayScrollbarsComponent, { ...rest, ref: overlayScrollbarsRef, "data-size": size, "data-untouchable-scrollbars": untouchableScrollbars || undefined, className: (0, classnames_1.default)(className, styles_module_scss_1.default.scroll, 'osThemeSnack'), style: { resize }, options: {
107
107
  paddingAbsolute,
108
108
  overflow,
109
- update: {
110
- debounce: {
111
- mutation: [constants_1.CONTENT_UPDATE_DEBOUNCE_MS, constants_1.CONTENT_UPDATE_MAX_WAIT_MS],
112
- resize: [constants_1.CONTENT_UPDATE_DEBOUNCE_MS, constants_1.CONTENT_UPDATE_MAX_WAIT_MS],
113
- event: [constants_1.CONTENT_UPDATE_DEBOUNCE_MS, constants_1.CONTENT_UPDATE_MAX_WAIT_MS],
114
- env: [constants_1.CONTENT_UPDATE_DEBOUNCE_MS, constants_1.CONTENT_UPDATE_MAX_WAIT_MS],
115
- },
116
- },
117
109
  scrollbars: {
118
110
  autoHide: barHideStrategy,
119
111
  autoHideDelay: constants_1.BAR_AUTO_HIDE_DELAY_MS,
@@ -121,7 +113,9 @@ exports.Scroll = (0, react_1.forwardRef)(function Scroll({ children, className,
121
113
  },
122
114
  }, events: {
123
115
  initialized: onInitialized,
124
- scroll: onScroll,
116
+ scroll: (_instance, event) => {
117
+ onScroll(event);
118
+ },
125
119
  updated: () => {
126
120
  injectStateLayers();
127
121
  onContentSizeChanged();
package/dist/cjs/constants.d.ts CHANGED
@@ -20,5 +20,3 @@ export declare const AUTOSCROLL_TO: {
20
20
  };
21
21
  export declare const BAR_AUTO_HIDE_DELAY_MS = 100;
22
22
  export declare const AUTOSCROLL_ENABLE_LIMIT = 2;
23
- export declare const CONTENT_UPDATE_DEBOUNCE_MS = 50;
24
- export declare const CONTENT_UPDATE_MAX_WAIT_MS = 300;
package/dist/cjs/constants.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CONTENT_UPDATE_MAX_WAIT_MS = exports.CONTENT_UPDATE_DEBOUNCE_MS = exports.AUTOSCROLL_ENABLE_LIMIT = exports.BAR_AUTO_HIDE_DELAY_MS = exports.AUTOSCROLL_TO = exports.RESIZE = exports.BAR_HIDE_STRATEGY = exports.SIZE = void 0;
3
+ exports.AUTOSCROLL_ENABLE_LIMIT = exports.BAR_AUTO_HIDE_DELAY_MS = exports.AUTOSCROLL_TO = exports.RESIZE = exports.BAR_HIDE_STRATEGY = exports.SIZE = void 0;
4
4
  exports.SIZE = {
5
5
  S: 's',
6
6
  M: 'm',
@@ -26,5 +26,3 @@ exports.BAR_AUTO_HIDE_DELAY_MS = 100;
26
26
  * Значение отступа до края контейнера при котором считается что контейнер проскролен до конца вниз или вправо, в пикселях.
27
27
  */
28
28
  exports.AUTOSCROLL_ENABLE_LIMIT = 2;
29
- exports.CONTENT_UPDATE_DEBOUNCE_MS = 50;
30
- exports.CONTENT_UPDATE_MAX_WAIT_MS = 300;
package/dist/cjs/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/cjs/styles.module.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/Scroll.js CHANGED
@@ -5,7 +5,7 @@ import cn from 'classnames';
5
5
  import { OverlayScrollbars } from 'overlayscrollbars';
6
6
  import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
7
7
  import { forwardRef, useCallback, useImperativeHandle, useRef, useState } from 'react';
8
- import { AUTOSCROLL_ENABLE_LIMIT, AUTOSCROLL_TO, BAR_AUTO_HIDE_DELAY_MS, BAR_HIDE_STRATEGY, CONTENT_UPDATE_DEBOUNCE_MS, CONTENT_UPDATE_MAX_WAIT_MS, RESIZE, SIZE, } from './constants.js';
8
+ import { AUTOSCROLL_ENABLE_LIMIT, AUTOSCROLL_TO, BAR_AUTO_HIDE_DELAY_MS, BAR_HIDE_STRATEGY, RESIZE, SIZE, } from './constants.js';
9
9
  import styles from './styles.module.css';
10
10
  /**
11
11
  * Установить nonce атрибут для инлайн стилей.
@@ -75,7 +75,7 @@ export const Scroll = forwardRef(function Scroll({ children, className, onScroll
75
75
  injectStateLayers();
76
76
  setOverlayScrollbarInited(true);
77
77
  }, [injectStateLayers]);
78
- const onScroll = useCallback((_, event) => {
78
+ const onScroll = useCallback((event) => {
79
79
  onScrollProp?.(event);
80
80
  if (autoscrollTo) {
81
81
  syncPositions();
@@ -100,14 +100,6 @@ export const Scroll = forwardRef(function Scroll({ children, className, onScroll
100
100
  return (_jsx(OverlayScrollbarsComponent, { ...rest, ref: overlayScrollbarsRef, "data-size": size, "data-untouchable-scrollbars": untouchableScrollbars || undefined, className: cn(className, styles.scroll, 'osThemeSnack'), style: { resize }, options: {
101
101
  paddingAbsolute,
102
102
  overflow,
103
- update: {
104
- debounce: {
105
- mutation: [CONTENT_UPDATE_DEBOUNCE_MS, CONTENT_UPDATE_MAX_WAIT_MS],
106
- resize: [CONTENT_UPDATE_DEBOUNCE_MS, CONTENT_UPDATE_MAX_WAIT_MS],
107
- event: [CONTENT_UPDATE_DEBOUNCE_MS, CONTENT_UPDATE_MAX_WAIT_MS],
108
- env: [CONTENT_UPDATE_DEBOUNCE_MS, CONTENT_UPDATE_MAX_WAIT_MS],
109
- },
110
- },
111
103
  scrollbars: {
112
104
  autoHide: barHideStrategy,
113
105
  autoHideDelay: BAR_AUTO_HIDE_DELAY_MS,
@@ -115,7 +107,9 @@ export const Scroll = forwardRef(function Scroll({ children, className, onScroll
115
107
  },
116
108
  }, events: {
117
109
  initialized: onInitialized,
118
- scroll: onScroll,
110
+ scroll: (_instance, event) => {
111
+ onScroll(event);
112
+ },
119
113
  updated: () => {
120
114
  injectStateLayers();
121
115
  onContentSizeChanged();
package/dist/esm/constants.d.ts CHANGED
@@ -20,5 +20,3 @@ export declare const AUTOSCROLL_TO: {
20
20
  };
21
21
  export declare const BAR_AUTO_HIDE_DELAY_MS = 100;
22
22
  export declare const AUTOSCROLL_ENABLE_LIMIT = 2;
23
- export declare const CONTENT_UPDATE_DEBOUNCE_MS = 50;
24
- export declare const CONTENT_UPDATE_MAX_WAIT_MS = 300;
package/dist/esm/constants.js CHANGED
@@ -23,5 +23,3 @@ export const BAR_AUTO_HIDE_DELAY_MS = 100;
23
23
  * Значение отступа до края контейнера при котором считается что контейнер проскролен до конца вниз или вправо, в пикселях.
24
24
  */
25
25
  export const AUTOSCROLL_ENABLE_LIMIT = 2;
26
- export const CONTENT_UPDATE_DEBOUNCE_MS = 50;
27
- export const CONTENT_UPDATE_MAX_WAIT_MS = 300;
package/dist/esm/style.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/styles.module.css CHANGED
@@ -37,6 +37,7 @@
37
37
  overflow:hidden;
38
38
  }
39
39
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
40
41
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
42
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
43
  }
@@ -46,6 +47,7 @@
46
47
  overflow:hidden;
47
48
  }
48
49
  :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
50
+ border-width:var(--sn-scroll-anatomy-slider-size-s-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
49
51
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
52
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
53
  }
@@ -65,6 +67,7 @@
65
67
  overflow:hidden;
66
68
  }
67
69
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
70
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
68
71
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
72
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
73
  }
@@ -74,6 +77,7 @@
74
77
  overflow:hidden;
75
78
  }
76
79
  :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
80
+ border-width:var(--sn-scroll-anatomy-slider-size-m-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px));
77
81
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
82
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
83
  }
@@ -90,7 +94,8 @@
90
94
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
95
  pointer-events:initial;
92
96
  position:relative;
93
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
97
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
98
+ border-style:solid;
94
99
  opacity:1;
95
100
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
96
101
  }
@@ -111,7 +116,7 @@
111
116
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
112
117
  }
113
118
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
114
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
119
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
115
120
  }
116
121
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
117
122
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -136,7 +141,7 @@
136
141
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
137
142
  }
138
143
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
139
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
144
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
140
145
  }
141
146
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
142
147
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -163,7 +168,7 @@
163
168
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
164
169
  }
165
170
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
166
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
171
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
167
172
  }
168
173
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
169
174
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -192,7 +197,8 @@
192
197
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
193
198
  pointer-events:initial;
194
199
  position:relative;
195
- border:var(--sn-primitive-strokeWeight-strokeThin, 0.5px) solid var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
200
+ border-color:var(--sn-theme-color-invertNeutral-decorTransparent, var(--sn-brand-color-neutral-transparentInverted-forLightMode, rgba(166, 170, 191, 0.0588235294)));
201
+ border-style:solid;
196
202
  opacity:1;
197
203
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
198
204
  }
@@ -213,7 +219,7 @@
213
219
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
214
220
  }
215
221
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
216
- background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
222
+ background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
217
223
  }
218
224
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
219
225
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -238,7 +244,7 @@
238
244
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
239
245
  }
240
246
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
241
- background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
247
+ background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
242
248
  }
243
249
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
244
250
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -265,7 +271,7 @@
265
271
  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
266
272
  }
267
273
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
268
- background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
274
+ background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, rgba(56, 159, 116, 0.3019607843)));
269
275
  }
270
276
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
271
277
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));