@cloud-ru/ds-scroll 1.0.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 (32) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/LICENSE +201 -0
  3. package/README.md +179 -0
  4. package/dist/cjs/Scroll.d.ts +107 -0
  5. package/dist/cjs/Scroll.js +124 -0
  6. package/dist/cjs/constants.d.ts +22 -0
  7. package/dist/cjs/constants.js +28 -0
  8. package/dist/cjs/index.d.ts +4 -0
  9. package/dist/cjs/index.js +13 -0
  10. package/dist/cjs/package.json +3 -0
  11. package/dist/cjs/style.css +290 -0
  12. package/dist/cjs/styles.module.css +290 -0
  13. package/dist/cjs/types.d.ts +6 -0
  14. package/dist/cjs/types.js +2 -0
  15. package/dist/esm/Scroll.d.ts +107 -0
  16. package/dist/esm/Scroll.js +118 -0
  17. package/dist/esm/constants.d.ts +22 -0
  18. package/dist/esm/constants.js +25 -0
  19. package/dist/esm/index.d.ts +4 -0
  20. package/dist/esm/index.js +2 -0
  21. package/dist/esm/style.css +290 -0
  22. package/dist/esm/styles.module.css +290 -0
  23. package/dist/esm/types.d.ts +6 -0
  24. package/dist/esm/types.js +1 -0
  25. package/dist/tsconfig.cjs.tsbuildinfo +1 -0
  26. package/dist/tsconfig.esm.tsbuildinfo +1 -0
  27. package/package.json +45 -0
  28. package/src/Scroll.tsx +240 -0
  29. package/src/constants.ts +30 -0
  30. package/src/index.ts +11 -0
  31. package/src/styles.module.scss +163 -0
  32. package/src/types.ts +11 -0
package/dist/esm/style.css ADDED
@@ -0,0 +1,290 @@
1
+ @charset "UTF-8";
2
+ .scroll{
3
+ position:relative;
4
+ z-index:0;
5
+ box-sizing:border-box;
6
+ width:100%;
7
+ height:100%;
8
+ }
9
+
10
+ .stateLayer{
11
+ visibility:initial;
12
+ }
13
+ :global(.osThemeSnack .os-scrollbar){
14
+ padding:0;
15
+ }
16
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical){
17
+ pointer-events:none;
18
+ }
19
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track){
20
+ pointer-events:none;
21
+ }
22
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
23
+ pointer-events:none;
24
+ }
25
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal){
26
+ pointer-events:none;
27
+ }
28
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track){
29
+ pointer-events:none;
30
+ }
31
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
32
+ pointer-events:none;
33
+ }
34
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical){
35
+ width:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
36
+ pointer-events:none;
37
+ overflow:hidden;
38
+ }
39
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
+ width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
+ }
43
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal){
44
+ height:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
45
+ pointer-events:none;
46
+ overflow:hidden;
47
+ }
48
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
49
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
+ height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
+ }
52
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-horizontal){
53
+ right:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
54
+ }
55
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
56
+ right:0;
57
+ left:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
58
+ }
59
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-vertical){
60
+ bottom:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
61
+ }
62
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical){
63
+ width:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
64
+ pointer-events:none;
65
+ overflow:hidden;
66
+ }
67
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
68
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
+ width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
+ }
71
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal){
72
+ height:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
73
+ pointer-events:none;
74
+ overflow:hidden;
75
+ }
76
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
77
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
+ height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
+ }
80
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-horizontal){
81
+ right:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
82
+ }
83
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
84
+ right:0;
85
+ left:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
86
+ }
87
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-vertical){
88
+ bottom:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
89
+ }
90
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
+ pointer-events:initial;
92
+ 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)));
94
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
95
+ }
96
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
97
+ transition:background 0.15s;
98
+ }
99
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
100
+ position:absolute;
101
+ inset:0;
102
+ border-radius:inherit;
103
+ }
104
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
105
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
106
+ border-style:solid;
107
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
108
+ }
109
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
110
+ 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)));
111
+ }
112
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
113
+ 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))));
114
+ }
115
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
116
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
117
+ }
118
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
119
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
120
+ }
121
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
122
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
123
+ }
124
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
125
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
126
+ }
127
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
128
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
129
+ }
130
+ @media (hover: hover){
131
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
132
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
133
+ }
134
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
135
+ 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)));
136
+ }
137
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
138
+ 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))));
139
+ }
140
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
141
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
142
+ }
143
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
144
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
145
+ }
146
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
147
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
148
+ }
149
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
150
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
151
+ }
152
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
153
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
154
+ }
155
+ }
156
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
157
+ }
158
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
159
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
160
+ }
161
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
162
+ 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)));
163
+ }
164
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
165
+ 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))));
166
+ }
167
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
168
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
169
+ }
170
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
171
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
172
+ }
173
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
174
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
175
+ }
176
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
177
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
178
+ }
179
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
180
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
181
+ }
182
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
183
+ left:50%;
184
+ translate:-50% 0;
185
+ }
186
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)::before{
187
+ right:-12px;
188
+ left:-12px;
189
+ }
190
+
191
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
192
+ pointer-events:initial;
193
+ position:relative;
194
+ 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)));
195
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
196
+ }
197
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
198
+ transition:background 0.15s;
199
+ }
200
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
201
+ position:absolute;
202
+ inset:0;
203
+ border-radius:inherit;
204
+ }
205
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
206
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
207
+ border-style:solid;
208
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
209
+ }
210
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
211
+ 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)));
212
+ }
213
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
214
+ 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))));
215
+ }
216
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
217
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
218
+ }
219
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
220
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
221
+ }
222
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
223
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
224
+ }
225
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
226
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
227
+ }
228
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
229
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
230
+ }
231
+ @media (hover: hover){
232
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
233
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
234
+ }
235
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
236
+ 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)));
237
+ }
238
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
239
+ 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))));
240
+ }
241
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
242
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
243
+ }
244
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
245
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
246
+ }
247
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
248
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
249
+ }
250
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
251
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
252
+ }
253
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
254
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
255
+ }
256
+ }
257
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
258
+ }
259
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
260
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
261
+ }
262
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
263
+ 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)));
264
+ }
265
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
266
+ 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))));
267
+ }
268
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
269
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
270
+ }
271
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
272
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
273
+ }
274
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
275
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
276
+ }
277
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
278
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
279
+ }
280
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
281
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
282
+ }
283
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
284
+ top:50%;
285
+ translate:0 -50%;
286
+ }
287
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)::before{
288
+ top:-12px;
289
+ bottom:-12px;
290
+ }
package/dist/esm/styles.module.css ADDED
@@ -0,0 +1,290 @@
1
+ @charset "UTF-8";
2
+ .scroll{
3
+ position:relative;
4
+ z-index:0;
5
+ box-sizing:border-box;
6
+ width:100%;
7
+ height:100%;
8
+ }
9
+
10
+ .stateLayer{
11
+ visibility:initial;
12
+ }
13
+ :global(.osThemeSnack .os-scrollbar){
14
+ padding:0;
15
+ }
16
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical){
17
+ pointer-events:none;
18
+ }
19
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track){
20
+ pointer-events:none;
21
+ }
22
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
23
+ pointer-events:none;
24
+ }
25
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal){
26
+ pointer-events:none;
27
+ }
28
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track){
29
+ pointer-events:none;
30
+ }
31
+ :global(.osThemeSnack[data-untouchable-scrollbars] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
32
+ pointer-events:none;
33
+ }
34
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical){
35
+ width:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
36
+ pointer-events:none;
37
+ overflow:hidden;
38
+ }
39
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
40
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
41
+ width:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
42
+ }
43
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal){
44
+ height:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
45
+ pointer-events:none;
46
+ overflow:hidden;
47
+ }
48
+ :global(.osThemeSnack[data-size=s] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
49
+ border-radius:var(--sn-scroll-anatomy-slider-size-s-borderRadius, var(--sn-primitive-dimension-full, 10000px));
50
+ height:var(--sn-scroll-anatomy-slider-size-s-square, var(--sn-primitive-dimension-4, 4px));
51
+ }
52
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-horizontal){
53
+ right:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
54
+ }
55
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
56
+ right:0;
57
+ left:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
58
+ }
59
+ :global(.osThemeSnack[data-size=s].os-host-resize-disabled > .os-scrollbar-vertical){
60
+ bottom:var(--sn-scroll-anatomy-container-size-s-square, var(--sn-primitive-dimension-8, 8px));
61
+ }
62
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical){
63
+ width:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
64
+ pointer-events:none;
65
+ overflow:hidden;
66
+ }
67
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
68
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
69
+ width:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
70
+ }
71
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal){
72
+ height:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
73
+ pointer-events:none;
74
+ overflow:hidden;
75
+ }
76
+ :global(.osThemeSnack[data-size=m] > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
77
+ border-radius:var(--sn-scroll-anatomy-slider-size-m-borderRadius, var(--sn-primitive-dimension-full, 10000px));
78
+ height:var(--sn-scroll-anatomy-slider-size-m-square, var(--sn-primitive-dimension-6, 6px));
79
+ }
80
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-horizontal){
81
+ right:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
82
+ }
83
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled.os-host-rtl > .os-scrollbar-horizontal){
84
+ right:0;
85
+ left:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
86
+ }
87
+ :global(.osThemeSnack[data-size=m].os-host-resize-disabled > .os-scrollbar-vertical){
88
+ bottom:var(--sn-scroll-anatomy-container-size-m-square, var(--sn-primitive-dimension-16, 16px));
89
+ }
90
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
91
+ pointer-events:initial;
92
+ 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)));
94
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
95
+ }
96
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
97
+ transition:background 0.15s;
98
+ }
99
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
100
+ position:absolute;
101
+ inset:0;
102
+ border-radius:inherit;
103
+ }
104
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
105
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
106
+ border-style:solid;
107
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
108
+ }
109
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
110
+ 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)));
111
+ }
112
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
113
+ 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))));
114
+ }
115
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
116
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
117
+ }
118
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
119
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
120
+ }
121
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
122
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
123
+ }
124
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
125
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
126
+ }
127
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
128
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
129
+ }
130
+ @media (hover: hover){
131
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
132
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
133
+ }
134
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
135
+ 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)));
136
+ }
137
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
138
+ 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))));
139
+ }
140
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
141
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
142
+ }
143
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
144
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
145
+ }
146
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
147
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
148
+ }
149
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
150
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
151
+ }
152
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
153
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
154
+ }
155
+ }
156
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
157
+ }
158
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
159
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
160
+ }
161
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
162
+ 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)));
163
+ }
164
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
165
+ 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))));
166
+ }
167
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
168
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
169
+ }
170
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
171
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
172
+ }
173
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
174
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
175
+ }
176
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
177
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
178
+ }
179
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
180
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
181
+ }
182
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle){
183
+ left:50%;
184
+ translate:-50% 0;
185
+ }
186
+ :global(.osThemeSnack > .os-scrollbar-vertical > .os-scrollbar-track > .os-scrollbar-handle)::before{
187
+ right:-12px;
188
+ left:-12px;
189
+ }
190
+
191
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
192
+ pointer-events:initial;
193
+ position:relative;
194
+ 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)));
195
+ background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
196
+ }
197
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
198
+ transition:background 0.15s;
199
+ }
200
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer{
201
+ position:absolute;
202
+ inset:0;
203
+ border-radius:inherit;
204
+ }
205
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=borderOnBackground]{
206
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
207
+ border-style:solid;
208
+ border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
209
+ }
210
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyNeutralOnBackground]{
211
+ 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)));
212
+ }
213
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=activatedOnBackground]{
214
+ 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))));
215
+ }
216
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=versionOnColor]{
217
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
218
+ }
219
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyVersionOnColor]{
220
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
221
+ }
222
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=inversionOnColor]{
223
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
224
+ }
225
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyInversionOnColor]{
226
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
227
+ }
228
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle) .stateLayer[data-state=emptyDarkOnAccent]{
229
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
230
+ }
231
+ @media (hover: hover){
232
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
233
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
234
+ }
235
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
236
+ 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)));
237
+ }
238
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
239
+ 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))));
240
+ }
241
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
242
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
243
+ }
244
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
245
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
246
+ }
247
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
248
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
249
+ }
250
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
251
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
252
+ }
253
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
254
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
255
+ }
256
+ }
257
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
258
+ }
259
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
260
+ border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
261
+ }
262
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
263
+ 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)));
264
+ }
265
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
266
+ 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))));
267
+ }
268
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
269
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
270
+ }
271
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
272
+ background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
273
+ }
274
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
275
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
276
+ }
277
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
278
+ background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
279
+ }
280
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-loading] .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle):active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)[data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
281
+ background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
282
+ }
283
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle){
284
+ top:50%;
285
+ translate:0 -50%;
286
+ }
287
+ :global(.osThemeSnack > .os-scrollbar-horizontal > .os-scrollbar-track > .os-scrollbar-handle)::before{
288
+ top:-12px;
289
+ bottom:-12px;
290
+ }
package/dist/esm/types.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ValueOf } from '@cloud-ru/ds-utils';
2
+ import { AUTOSCROLL_TO, BAR_HIDE_STRATEGY, RESIZE, SIZE } from './constants.js';
3
+ export type Size = ValueOf<typeof SIZE>;
4
+ export type AutoscrollTo = ValueOf<typeof AUTOSCROLL_TO>;
5
+ export type Resize = ValueOf<typeof RESIZE>;
6
+ export type BarHideStrategy = ValueOf<typeof BAR_HIDE_STRATEGY>;
package/dist/esm/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};