@cloud-ru/ds-scroll 1.0.3-preview-a2208aeb.0 → 1.0.3-preview-94b5bdf7.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 (16) hide show
  1. package/dist/cjs/Scroll.js +10 -4
  2. package/dist/cjs/constants.d.ts +2 -0
  3. package/dist/cjs/constants.js +3 -1
  4. package/dist/cjs/style.css +8 -14
  5. package/dist/cjs/styles.module.css +8 -14
  6. package/dist/esm/Scroll.js +11 -5
  7. package/dist/esm/constants.d.ts +2 -0
  8. package/dist/esm/constants.js +2 -0
  9. package/dist/esm/style.css +8 -14
  10. package/dist/esm/styles.module.css +8 -14
  11. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  12. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  13. package/package.json +2 -2
  14. package/src/Scroll.tsx +12 -4
  15. package/src/constants.ts +3 -0
  16. package/src/styles.module.scss +29 -3
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,6 +106,14 @@ 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
+ },
109
117
  scrollbars: {
110
118
  autoHide: barHideStrategy,
111
119
  autoHideDelay: constants_1.BAR_AUTO_HIDE_DELAY_MS,
@@ -113,9 +121,7 @@ exports.Scroll = (0, react_1.forwardRef)(function Scroll({ children, className,
113
121
  },
114
122
  }, events: {
115
123
  initialized: onInitialized,
116
- scroll: (_instance, event) => {
117
- onScroll(event);
118
- },
124
+ scroll: onScroll,
119
125
  updated: () => {
120
126
  injectStateLayers();
121
127
  onContentSizeChanged();
package/dist/cjs/constants.d.ts CHANGED
@@ -20,3 +20,5 @@ 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.AUTOSCROLL_ENABLE_LIMIT = exports.BAR_AUTO_HIDE_DELAY_MS = exports.AUTOSCROLL_TO = exports.RESIZE = exports.BAR_HIDE_STRATEGY = exports.SIZE = void 0;
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;
4
4
  exports.SIZE = {
5
5
  S: 's',
6
6
  M: 'm',
@@ -26,3 +26,5 @@ 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,7 +37,6 @@
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));
41
40
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
42
41
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
43
42
  }
@@ -47,7 +46,6 @@
47
46
  overflow:hidden;
48
47
  }
49
48
  :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));
51
49
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
52
50
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
53
51
  }
@@ -67,7 +65,6 @@
67
65
  overflow:hidden;
68
66
  }
69
67
  :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));
71
68
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
72
69
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
73
70
  }
@@ -77,7 +74,6 @@
77
74
  overflow:hidden;
78
75
  }
79
76
  :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));
81
77
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
82
78
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
83
79
  }
@@ -94,8 +90,7 @@
94
90
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
95
91
  pointer-events:initial;
96
92
  position:relative;
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;
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)));
99
94
  opacity:1;
100
95
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
101
96
  }
@@ -116,7 +111,7 @@
116
111
  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)));
117
112
  }
118
113
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
120
115
  }
121
116
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
122
117
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -141,7 +136,7 @@
141
136
  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)));
142
137
  }
143
138
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
145
140
  }
146
141
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
147
142
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -168,7 +163,7 @@
168
163
  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)));
169
164
  }
170
165
  .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]{
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)));
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))));
172
167
  }
173
168
  .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]{
174
169
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -197,8 +192,7 @@
197
192
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
198
193
  pointer-events:initial;
199
194
  position:relative;
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;
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)));
202
196
  opacity:1;
203
197
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
204
198
  }
@@ -219,7 +213,7 @@
219
213
  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)));
220
214
  }
221
215
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
223
217
  }
224
218
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
225
219
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -244,7 +238,7 @@
244
238
  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)));
245
239
  }
246
240
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
248
242
  }
249
243
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
250
244
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -271,7 +265,7 @@
271
265
  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)));
272
266
  }
273
267
  .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]{
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)));
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))));
275
269
  }
276
270
  .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]{
277
271
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/cjs/styles.module.css CHANGED
@@ -37,7 +37,6 @@
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));
41
40
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
42
41
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
43
42
  }
@@ -47,7 +46,6 @@
47
46
  overflow:hidden;
48
47
  }
49
48
  :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));
51
49
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
52
50
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
53
51
  }
@@ -67,7 +65,6 @@
67
65
  overflow:hidden;
68
66
  }
69
67
  :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));
71
68
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
72
69
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
73
70
  }
@@ -77,7 +74,6 @@
77
74
  overflow:hidden;
78
75
  }
79
76
  :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));
81
77
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
82
78
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
83
79
  }
@@ -94,8 +90,7 @@
94
90
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
95
91
  pointer-events:initial;
96
92
  position:relative;
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;
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)));
99
94
  opacity:1;
100
95
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
101
96
  }
@@ -116,7 +111,7 @@
116
111
  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)));
117
112
  }
118
113
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
120
115
  }
121
116
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
122
117
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -141,7 +136,7 @@
141
136
  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)));
142
137
  }
143
138
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
145
140
  }
146
141
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
147
142
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -168,7 +163,7 @@
168
163
  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)));
169
164
  }
170
165
  .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]{
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)));
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))));
172
167
  }
173
168
  .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]{
174
169
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -197,8 +192,7 @@
197
192
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
198
193
  pointer-events:initial;
199
194
  position:relative;
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;
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)));
202
196
  opacity:1;
203
197
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
204
198
  }
@@ -219,7 +213,7 @@
219
213
  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)));
220
214
  }
221
215
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
223
217
  }
224
218
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
225
219
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -244,7 +238,7 @@
244
238
  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)));
245
239
  }
246
240
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
248
242
  }
249
243
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
250
244
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -271,7 +265,7 @@
271
265
  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)));
272
266
  }
273
267
  .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]{
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)));
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))));
275
269
  }
276
270
  .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]{
277
271
  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, RESIZE, SIZE, } from './constants.js';
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';
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,6 +100,14 @@ 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
+ },
103
111
  scrollbars: {
104
112
  autoHide: barHideStrategy,
105
113
  autoHideDelay: BAR_AUTO_HIDE_DELAY_MS,
@@ -107,9 +115,7 @@ export const Scroll = forwardRef(function Scroll({ children, className, onScroll
107
115
  },
108
116
  }, events: {
109
117
  initialized: onInitialized,
110
- scroll: (_instance, event) => {
111
- onScroll(event);
112
- },
118
+ scroll: onScroll,
113
119
  updated: () => {
114
120
  injectStateLayers();
115
121
  onContentSizeChanged();
package/dist/esm/constants.d.ts CHANGED
@@ -20,3 +20,5 @@ 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,3 +23,5 @@ 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,7 +37,6 @@
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));
41
40
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
42
41
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
43
42
  }
@@ -47,7 +46,6 @@
47
46
  overflow:hidden;
48
47
  }
49
48
  :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));
51
49
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
52
50
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
53
51
  }
@@ -67,7 +65,6 @@
67
65
  overflow:hidden;
68
66
  }
69
67
  :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));
71
68
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
72
69
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
73
70
  }
@@ -77,7 +74,6 @@
77
74
  overflow:hidden;
78
75
  }
79
76
  :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));
81
77
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
82
78
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
83
79
  }
@@ -94,8 +90,7 @@
94
90
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
95
91
  pointer-events:initial;
96
92
  position:relative;
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;
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)));
99
94
  opacity:1;
100
95
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
101
96
  }
@@ -116,7 +111,7 @@
116
111
  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)));
117
112
  }
118
113
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
120
115
  }
121
116
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
122
117
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -141,7 +136,7 @@
141
136
  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)));
142
137
  }
143
138
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
145
140
  }
146
141
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
147
142
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -168,7 +163,7 @@
168
163
  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)));
169
164
  }
170
165
  .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]{
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)));
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))));
172
167
  }
173
168
  .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]{
174
169
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -197,8 +192,7 @@
197
192
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
198
193
  pointer-events:initial;
199
194
  position:relative;
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;
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)));
202
196
  opacity:1;
203
197
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
204
198
  }
@@ -219,7 +213,7 @@
219
213
  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)));
220
214
  }
221
215
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
223
217
  }
224
218
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
225
219
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -244,7 +238,7 @@
244
238
  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)));
245
239
  }
246
240
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
248
242
  }
249
243
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
250
244
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -271,7 +265,7 @@
271
265
  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)));
272
266
  }
273
267
  .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]{
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)));
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))));
275
269
  }
276
270
  .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]{
277
271
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
package/dist/esm/styles.module.css CHANGED
@@ -37,7 +37,6 @@
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));
41
40
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
42
41
  width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
43
42
  }
@@ -47,7 +46,6 @@
47
46
  overflow:hidden;
48
47
  }
49
48
  :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));
51
49
  border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
52
50
  height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
53
51
  }
@@ -67,7 +65,6 @@
67
65
  overflow:hidden;
68
66
  }
69
67
  :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));
71
68
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
72
69
  width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
73
70
  }
@@ -77,7 +74,6 @@
77
74
  overflow:hidden;
78
75
  }
79
76
  :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));
81
77
  border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
82
78
  height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
83
79
  }
@@ -94,8 +90,7 @@
94
90
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
95
91
  pointer-events:initial;
96
92
  position:relative;
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;
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)));
99
94
  opacity:1;
100
95
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
101
96
  }
@@ -116,7 +111,7 @@
116
111
  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)));
117
112
  }
118
113
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
120
115
  }
121
116
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
122
117
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -141,7 +136,7 @@
141
136
  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)));
142
137
  }
143
138
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
145
140
  }
146
141
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
147
142
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -168,7 +163,7 @@
168
163
  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)));
169
164
  }
170
165
  .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]{
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)));
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))));
172
167
  }
173
168
  .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]{
174
169
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
@@ -197,8 +192,7 @@
197
192
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
198
193
  pointer-events:initial;
199
194
  position:relative;
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;
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)));
202
196
  opacity:1;
203
197
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
204
198
  }
@@ -219,7 +213,7 @@
219
213
  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)));
220
214
  }
221
215
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
223
217
  }
224
218
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
225
219
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
@@ -244,7 +238,7 @@
244
238
  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)));
245
239
  }
246
240
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
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)));
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))));
248
242
  }
249
243
  .scroll:global(.osThemeSnack) > :global(.os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
250
244
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
@@ -271,7 +265,7 @@
271
265
  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)));
272
266
  }
273
267
  .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]{
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)));
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))));
275
269
  }
276
270
  .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]{
277
271
  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));