@rescui/tab-list 0.13.12 → 0.14.1

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 (11) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/index.css +82 -72
  3. package/lib/parts/separator.p.module.css.js +3 -3
  4. package/lib/parts/tab-list.p.module.css.js +16 -15
  5. package/lib/parts/use-indicator.d.ts +6 -3
  6. package/lib/parts/use-indicator.js +28 -15
  7. package/lib/parts/with-scroll-arrows.p.module.css.js +11 -11
  8. package/lib/public-api.p.css +10 -4
  9. package/lib/public-api.pcss +10 -4
  10. package/lib/tab-list.js +6 -3
  11. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_4o5r48_4",
3
- "sizeXS": "_sizeXS_4o5r48_14",
4
- "sizeS": "_sizeS_4o5r48_18",
5
- "sizeM": "_sizeM_4o5r48_22",
6
- "sizeL": "_sizeL_4o5r48_26",
7
- "light": "_light_4o5r48_30",
8
- "dark": "_dark_4o5r48_34"
2
+ "icon": "_icon_gxmcf_4",
3
+ "sizeXS": "_sizeXS_gxmcf_14",
4
+ "sizeS": "_sizeS_gxmcf_18",
5
+ "sizeM": "_sizeM_gxmcf_22",
6
+ "sizeL": "_sizeL_gxmcf_26",
7
+ "light": "_light_gxmcf_30",
8
+ "dark": "_dark_gxmcf_34"
9
9
  };
10
10
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_4o5r48_4{
1
+ ._icon_gxmcf_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_4o5r48_4{
11
+ ._icon_gxmcf_4{
12
12
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
13
13
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
14
14
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_4o5r48_4{
20
+ ._icon_gxmcf_4{
21
21
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
22
22
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
23
23
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -25,30 +25,30 @@
25
25
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
26
26
  }
27
27
  }
28
- ._icon_4o5r48_4{
28
+ ._icon_gxmcf_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_4o5r48_14{
35
+ ._sizeXS_gxmcf_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_4o5r48_18{
38
+ ._sizeS_gxmcf_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_4o5r48_22{
41
+ ._sizeM_gxmcf_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_4o5r48_26{
44
+ ._sizeL_gxmcf_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_4o5r48_30{
47
+ ._light_gxmcf_30{
48
48
  --rs-theme-dark:0;
49
49
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
50
50
  }
51
- ._dark_4o5r48_34{
51
+ ._dark_gxmcf_34{
52
52
  --rs-theme-dark:1;
53
53
  --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
54
54
  }
@@ -60,18 +60,18 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_gayz_7{
63
+ ._light_1a8uzt_7{
64
64
  --rs-theme-dark:0;
65
65
  }
66
- ._dark_gayz_10{
66
+ ._dark_1a8uzt_10{
67
67
  --rs-theme-dark:1;
68
68
  }
69
- ._sizeM_gayz_14{
69
+ ._sizeM_1a8uzt_14{
70
70
  --_rs-tab-list-tab-vertical-padding:8px;
71
71
  --_rs-tab-list-icon-size:24px;
72
72
  --_rs-tab-list-icon-offset:4px;
73
73
  }
74
- ._sizeM_gayz_14 [data-rs-internal='tab-list__tab']{
74
+ ._sizeM_1a8uzt_14 [data-rs-internal='tab-list__tab']{
75
75
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
76
76
  --_rs-typography-text-transform:initial;
77
77
  --_rs-typography-font-variant-numeric:initial;
@@ -100,22 +100,25 @@
100
100
  --_rs-typography-text-auto-offset:16px;
101
101
  --_rs-typography-ul-list-li-padding-left:22px;
102
102
  --_rs-typography-ol-list-li-padding-left:26px;
103
- --_rs-typography-list-li-margin-top-from-text:16px;
103
+ --_rs-typography-list-li-margin-top-from-text:var(
104
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
105
+ 16px
106
+ );
104
107
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
105
108
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
106
109
  --_rs-typography-link-border-bottom-width-from-text:1px;
107
110
  }
108
111
  @media screen and (max-width: 640px){
109
- ._sizeM_gayz_14 [data-rs-internal='tab-list__tab']{
110
- --_rs-typography-list-li-margin-top-from-text:12px;
112
+ ._sizeM_1a8uzt_14 [data-rs-internal='tab-list__tab']{
113
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
111
114
  }
112
115
  }
113
- ._sizeL_gayz_17{
116
+ ._sizeL_1a8uzt_17{
114
117
  --_rs-tab-list-tab-vertical-padding:12px;
115
118
  --_rs-tab-list-icon-size:28px;
116
119
  --_rs-tab-list-icon-offset:8px;
117
120
  }
118
- ._sizeL_gayz_17 [data-rs-internal='tab-list__tab']{
121
+ ._sizeL_1a8uzt_17 [data-rs-internal='tab-list__tab']{
119
122
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
120
123
  --_rs-typography-text-transform:initial;
121
124
  --_rs-typography-font-variant-numeric:initial;
@@ -144,34 +147,37 @@
144
147
  --_rs-typography-text-auto-offset:32px;
145
148
  --_rs-typography-ul-list-li-padding-left:26px;
146
149
  --_rs-typography-ol-list-li-padding-left:32px;
147
- --_rs-typography-list-li-margin-top-from-text:24px;
150
+ --_rs-typography-list-li-margin-top-from-text:var(
151
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
152
+ 24px
153
+ );
148
154
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
149
155
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
150
156
  --_rs-typography-link-border-bottom-width-from-text:1px;
151
157
  }
152
158
  @media screen and (max-width: 640px){
153
- ._sizeL_gayz_17 [data-rs-internal='tab-list__tab']{
154
- --_rs-typography-list-li-margin-top-from-text:16px;
159
+ ._sizeL_1a8uzt_17 [data-rs-internal='tab-list__tab']{
160
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
155
161
  }
156
162
  }
157
- ._classic_gayz_21{
163
+ ._classic_1a8uzt_21{
158
164
  --_rs-tab-list-indicator-background:var(--_rs-color-primary);
159
165
  }
160
- ._rock_gayz_24{
166
+ ._rock_1a8uzt_24{
161
167
  --_rs-tab-list-indicator-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
162
168
  }
163
- ._sparse_gayz_28{
169
+ ._sparse_1a8uzt_28{
164
170
  --_rs-tab-list-tab-margin-left-or-initial:32px;
165
171
  }
166
172
  @media screen and (max-width: 640px){
167
- ._sparse_gayz_28{
173
+ ._sparse_1a8uzt_28{
168
174
  --_rs-tab-list-tab-margin-left-or-initial:24px;
169
175
  }
170
176
  }
171
- ._short_gayz_32{
177
+ ._short_1a8uzt_32{
172
178
  --_rs-tab-list-tab-box-shadow:inset 0 -1px 0 rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1));
173
179
  }
174
- ._tabsContainer_gayz_36{
180
+ ._tabsContainer_1a8uzt_36{
175
181
  --_rs-theme-dark:var(
176
182
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
177
183
  var(--rs-theme-dark, 0)
@@ -181,7 +187,7 @@
181
187
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
182
188
  }
183
189
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
184
- ._tabsContainer_gayz_36{
190
+ ._tabsContainer_1a8uzt_36{
185
191
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
186
192
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
187
193
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -190,7 +196,7 @@
190
196
  }
191
197
  }
192
198
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
193
- ._tabsContainer_gayz_36{
199
+ ._tabsContainer_1a8uzt_36{
194
200
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
195
201
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
196
202
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -198,15 +204,15 @@
198
204
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
199
205
  }
200
206
  }
201
- ._tabsContainer_gayz_36 {
207
+ ._tabsContainer_1a8uzt_36 {
202
208
  --_rs-tab-list-tab-base-margin-left:24px;
203
209
  }
204
210
  @media screen and (max-width: 640px){
205
- ._tabsContainer_gayz_36{
211
+ ._tabsContainer_1a8uzt_36{
206
212
  --_rs-tab-list-tab-base-margin-left:16px;
207
213
  }
208
214
  }
209
- ._tabsContainer_gayz_36 {
215
+ ._tabsContainer_1a8uzt_36 {
210
216
  --_rs-tab-list-tab-margin-left:var(
211
217
  --_rs-tab-list-tab-margin-left-or-initial,
212
218
  var(--_rs-tab-list-tab-base-margin-left)
@@ -216,7 +222,7 @@
216
222
 
217
223
  display:flex;
218
224
  }
219
- ._indicator_gayz_46{
225
+ ._indicator_1a8uzt_46{
220
226
  position:absolute;
221
227
  z-index:3;
222
228
  bottom:0;
@@ -229,13 +235,16 @@
229
235
  transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
230
236
  will-change:left, width;
231
237
  }
232
- ._iconLeft_gayz_61{
238
+ ._isIndicatorHidden_1a8uzt_60 ._indicator_1a8uzt_46{
239
+ display:none;
240
+ }
241
+ ._iconLeft_1a8uzt_65{
233
242
  --_rs-tab-list-tab-flex-direction:row;
234
243
  }
235
- ._iconRight_gayz_64{
244
+ ._iconRight_1a8uzt_68{
236
245
  --_rs-tab-list-tab-flex-direction:row-reverse;
237
246
  }
238
- ._tab_gayz_36{
247
+ ._tab_1a8uzt_36{
239
248
  --_rs-theme-dark:var(
240
249
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
250
  var(--rs-theme-dark, 0)
@@ -245,7 +254,7 @@
245
254
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
255
  }
247
256
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._tab_gayz_36{
257
+ ._tab_1a8uzt_36{
249
258
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
250
259
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
251
260
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -254,7 +263,7 @@
254
263
  }
255
264
  }
256
265
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._tab_gayz_36{
266
+ ._tab_1a8uzt_36{
258
267
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
259
268
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
260
269
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -262,7 +271,7 @@
262
271
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
263
272
  }
264
273
  }
265
- ._tab_gayz_36 {
274
+ ._tab_1a8uzt_36 {
266
275
  letter-spacing:var(
267
276
  --rs-text-base-letter-spacing,
268
277
  var(--_rs-typography-letter-spacing)
@@ -306,22 +315,23 @@
306
315
  -moz-osx-font-smoothing:inherit;
307
316
  -webkit-appearance:none;
308
317
  }
309
- ._tab_gayz_36::-moz-focus-inner{
318
+ ._tab_1a8uzt_36::-moz-focus-inner{
310
319
  padding:0;
311
320
 
312
321
  border:none;
313
322
  }
314
- ._tab_gayz_36:hover,
315
- ._tab_gayz_36:active,
316
- ._tab_gayz_36:focus{
323
+ ._tab_1a8uzt_36:hover,
324
+ ._tab_1a8uzt_36:active,
325
+ ._tab_1a8uzt_36:focus{
317
326
  outline:none;
318
327
 
319
328
  text-decoration:none;
320
329
  }
321
- ._tab_gayz_36:after{
330
+ ._tab_1a8uzt_36:after{
322
331
  position:absolute;
323
332
  bottom:0;
324
333
  left:0;
334
+ right:0;
325
335
 
326
336
  width:100%;
327
337
  height:0;
@@ -330,18 +340,18 @@
330
340
 
331
341
  background-color:transparent;
332
342
  }
333
- ._tab_gayz_36:focus[data-focus-method='key']:after{
343
+ ._tab_1a8uzt_36:focus[data-focus-method='key']:after{
334
344
  opacity:0;
335
345
  }
336
- ._tab_gayz_36:hover{
346
+ ._tab_1a8uzt_36:hover{
337
347
  color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
338
348
  }
339
- ._tab_gayz_36:hover:after{
349
+ ._tab_1a8uzt_36:hover:after{
340
350
  height:1px;
341
351
 
342
352
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
343
353
  }
344
- ._tab_gayz_36._selected_gayz_154{
354
+ ._tab_1a8uzt_36._selected_1a8uzt_159{
345
355
  z-index:1;
346
356
 
347
357
  cursor:default;
@@ -350,20 +360,20 @@
350
360
 
351
361
  transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
352
362
  }
353
- ._tab_gayz_36._selected_gayz_154:after{
363
+ ._tab_1a8uzt_36._selected_1a8uzt_159:after{
354
364
  height:2px;
355
365
 
356
366
  background-color:var(--_rs-tab-list-indicator-background);
357
367
 
358
368
  transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
359
369
  }
360
- ._tab_gayz_36:focus[data-focus-method='key']{
370
+ ._tab_1a8uzt_36:focus[data-focus-method='key']{
361
371
  box-shadow:inset var(--_rs-color-primary-dim) 0 -4px 0 0, inset var(--_rs-color-primary-dim) 0 4px 0 0, var(--_rs-color-primary-dim) -4px 0 0 0, var(--_rs-color-primary-dim) 4px 0 0 0;
362
372
  }
363
- ._tab_gayz_36:first-child{
373
+ ._tab_1a8uzt_36:first-child{
364
374
  margin-left:0;
365
375
  }
366
- ._tab_gayz_36 ._icon_gayz_61{
376
+ ._tab_1a8uzt_36 ._icon_1a8uzt_65{
367
377
  flex:0 0;
368
378
  flex-basis:auto;
369
379
 
@@ -371,13 +381,13 @@
371
381
  height:var(--_rs-tab-list-icon-size);
372
382
  }
373
383
 
374
- ._light_hz4pwo_9{
384
+ ._light_173795r_9{
375
385
  --rs-theme-dark:0;
376
386
  }
377
- ._dark_hz4pwo_12{
387
+ ._dark_173795r_12{
378
388
  --rs-theme-dark:1;
379
389
  }
380
- ._wrapper_hz4pwo_16{
390
+ ._wrapper_173795r_16{
381
391
  --_rs-theme-dark:var(
382
392
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
383
393
  var(--rs-theme-dark, 0)
@@ -389,14 +399,14 @@
389
399
 
390
400
  display:flex;
391
401
  }
392
- ._scrollable_hz4pwo_23{
402
+ ._scrollable_173795r_23{
393
403
  display:flex;
394
404
  overflow-x:scroll;
395
405
 
396
406
  margin:-4px;
397
407
  padding:4px;
398
408
  }
399
- ._scrollable_hz4pwo_23::after{
409
+ ._scrollable_173795r_23::after{
400
410
  display:block;
401
411
 
402
412
  height:100%;
@@ -405,15 +415,15 @@
405
415
 
406
416
  content:'';
407
417
  }
408
- ._scrollable_hz4pwo_23 {
418
+ ._scrollable_173795r_23 {
409
419
 
410
420
  -ms-overflow-style:none;
411
421
  scrollbar-width:none;
412
422
  }
413
- ._scrollable_hz4pwo_23::-webkit-scrollbar{
423
+ ._scrollable_173795r_23::-webkit-scrollbar{
414
424
  display:none;
415
425
  }
416
- ._arrow_hz4pwo_52{
426
+ ._arrow_173795r_52{
417
427
  position:absolute;
418
428
  z-index:2;
419
429
  top:50%;
@@ -433,20 +443,20 @@
433
443
  transition:opacity 0.15s ease-out;
434
444
  transform:translateY(-50%);
435
445
  }
436
- ._arrow_hz4pwo_52._shown_hz4pwo_72{
446
+ ._arrow_173795r_52._shown_173795r_72{
437
447
  opacity:1;
438
448
 
439
449
  pointer-events:auto;
440
450
 
441
451
  transition:opacity 0.15s ease-in;
442
452
  }
443
- ._arrow_hz4pwo_52._arrowLeft_hz4pwo_80{
453
+ ._arrow_173795r_52._arrowLeft_173795r_80{
444
454
  left:-5px;
445
455
  }
446
- ._arrow_hz4pwo_52._arrowRight_hz4pwo_85{
456
+ ._arrow_173795r_52._arrowRight_173795r_85{
447
457
  right:-5px;
448
458
  }
449
- ._withLeftArrow_hz4pwo_91{
459
+ ._withLeftArrow_173795r_91{
450
460
  -webkit-mask-image:linear-gradient(
451
461
  to right,
452
462
  rgba(0, 0, 0, 0) 0%,
@@ -460,7 +470,7 @@
460
470
  black 56px
461
471
  );
462
472
  }
463
- ._withRightArrow_hz4pwo_100{
473
+ ._withRightArrow_173795r_100{
464
474
  -webkit-mask-image:linear-gradient(
465
475
  to left,
466
476
  rgba(0, 0, 0, 0) 0%,
@@ -474,7 +484,7 @@
474
484
  black 56px
475
485
  );
476
486
  }
477
- ._withLeftArrow_hz4pwo_91._withRightArrow_hz4pwo_100{
487
+ ._withLeftArrow_173795r_91._withRightArrow_173795r_100{
478
488
  -webkit-mask-image:linear-gradient(
479
489
  to right,
480
490
  rgba(0, 0, 0, 0) 0%,
@@ -494,17 +504,17 @@
494
504
  rgba(0, 0, 0, 0) 100%
495
505
  );
496
506
  }
497
- ._arrowButton_hz4pwo_121{
507
+ ._arrowButton_173795r_121{
498
508
  cursor:pointer;
499
509
  }
500
510
 
501
- ._light_1qlix8w_4{
511
+ ._light_1k58sef_4{
502
512
  --rs-theme-dark:0;
503
513
  }
504
- ._dark_1qlix8w_7{
514
+ ._dark_1k58sef_7{
505
515
  --rs-theme-dark:1;
506
516
  }
507
- ._separator_1qlix8w_11{
517
+ ._separator_1k58sef_11{
508
518
  --_rs-theme-dark:var(
509
519
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
510
520
  var(--rs-theme-dark, 0)
@@ -518,7 +528,7 @@
518
528
 
519
529
  width:100%;
520
530
  }
521
- ._separator_1qlix8w_11:after{
531
+ ._separator_1k58sef_11:after{
522
532
  position:absolute;
523
533
  right:0;
524
534
  bottom:0;
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "light": "_light_1qlix8w_4",
3
- "dark": "_dark_1qlix8w_7",
4
- "separator": "_separator_1qlix8w_11"
2
+ "light": "_light_1k58sef_4",
3
+ "dark": "_dark_1k58sef_7",
4
+ "separator": "_separator_1k58sef_11"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,18 +1,19 @@
1
1
  var styles = {
2
- "light": "_light_gayz_7",
3
- "dark": "_dark_gayz_10",
4
- "sizeM": "_sizeM_gayz_14",
5
- "sizeL": "_sizeL_gayz_17",
6
- "classic": "_classic_gayz_21",
7
- "rock": "_rock_gayz_24",
8
- "sparse": "_sparse_gayz_28",
9
- "short": "_short_gayz_32",
10
- "tabsContainer": "_tabsContainer_gayz_36",
11
- "indicator": "_indicator_gayz_46",
12
- "iconLeft": "_iconLeft_gayz_61",
13
- "iconRight": "_iconRight_gayz_64",
14
- "tab": "_tab_gayz_36",
15
- "selected": "_selected_gayz_154",
16
- "icon": "_icon_gayz_61"
2
+ "light": "_light_1a8uzt_7",
3
+ "dark": "_dark_1a8uzt_10",
4
+ "sizeM": "_sizeM_1a8uzt_14",
5
+ "sizeL": "_sizeL_1a8uzt_17",
6
+ "classic": "_classic_1a8uzt_21",
7
+ "rock": "_rock_1a8uzt_24",
8
+ "sparse": "_sparse_1a8uzt_28",
9
+ "short": "_short_1a8uzt_32",
10
+ "tabsContainer": "_tabsContainer_1a8uzt_36",
11
+ "indicator": "_indicator_1a8uzt_46",
12
+ "isIndicatorHidden": "_isIndicatorHidden_1a8uzt_60",
13
+ "iconLeft": "_iconLeft_1a8uzt_65",
14
+ "iconRight": "_iconRight_1a8uzt_68",
15
+ "tab": "_tab_1a8uzt_36",
16
+ "selected": "_selected_1a8uzt_159",
17
+ "icon": "_icon_1a8uzt_65"
17
18
  };
18
19
  export { styles as default };
package/lib/parts/use-indicator.d.ts CHANGED
@@ -4,7 +4,10 @@ export declare const useIndicator: ({ activeNodeRef, containerRef, triggers }: {
4
4
  containerRef: MutableRefObject<HTMLDivElement>;
5
5
  triggers: unknown[];
6
6
  }) => {
7
- left: number | string;
8
- width: number | string;
9
- transitionDuration?: string;
7
+ indicator: {
8
+ left: number | string;
9
+ width: number | string;
10
+ transitionDuration?: string;
11
+ };
12
+ isIndicatorHidden: boolean;
10
13
  };
package/lib/parts/use-indicator.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useState, useEffect } from 'react';
1
+ import { useState, useRef, useEffect } from 'react';
2
2
  import { useResizeObserver } from '@rescui/use-resize-observer';
3
3
 
4
4
  function calculateIndicator(activeNodeRef, parentNode) {
@@ -22,30 +22,43 @@ const useIndicator = _ref => {
22
22
  left: 0,
23
23
  width: 0
24
24
  });
25
- const [isSSR, setIsSSR] = useState(true); // Catch the resize of the container which is happening when the fonts downloads for example
25
+ const firstIndicatorUpdate = useRef(true); // Catch the resize of the container which is happening when the fonts downloads for example
26
+
27
+ const updateIndicator = function () {
28
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
26
29
 
27
- const onResize = () => {
28
30
  if (!activeNodeRef.current || !containerRef.current) {
29
31
  return;
30
32
  }
31
33
 
32
- if (isSSR) {
33
- setIsSSR(false);
34
- setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
35
- transitionDuration: '0ms'
36
- });
37
- return;
34
+ let isTransitionEnabled;
35
+
36
+ if (firstIndicatorUpdate.current) {
37
+ firstIndicatorUpdate.current = false;
38
+ isTransitionEnabled = false;
39
+ } else {
40
+ isTransitionEnabled = isValueChanged;
38
41
  }
39
42
 
40
- setIndicator(calculateIndicator(activeNodeRef.current, containerRef.current));
41
- };
43
+ setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
44
+ transitionDuration: !isTransitionEnabled ? '0s' : null
45
+ });
46
+ }; // Trigger it on value change for example
47
+
42
48
 
43
- useResizeObserver(containerRef, onResize, {
49
+ useEffect(() => updateIndicator(true), triggers); // Or changing container size
50
+
51
+ useResizeObserver(containerRef, () => updateIndicator(false), {
44
52
  ignoreFirstCall: true
45
- }); // Also trigger it on value change for example
53
+ }); // Or changing active element size
46
54
 
47
- useEffect(onResize, triggers);
48
- return indicator;
55
+ useResizeObserver(activeNodeRef.current, () => updateIndicator(false), {
56
+ ignoreFirstCall: true
57
+ });
58
+ return {
59
+ indicator,
60
+ isIndicatorHidden: firstIndicatorUpdate.current
61
+ };
49
62
  };
50
63
 
51
64
  export { useIndicator };
package/lib/parts/with-scroll-arrows.p.module.css.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "light": "_light_hz4pwo_9",
3
- "dark": "_dark_hz4pwo_12",
4
- "wrapper": "_wrapper_hz4pwo_16",
5
- "scrollable": "_scrollable_hz4pwo_23",
6
- "arrow": "_arrow_hz4pwo_52",
7
- "shown": "_shown_hz4pwo_72",
8
- "arrowLeft": "_arrowLeft_hz4pwo_80",
9
- "arrowRight": "_arrowRight_hz4pwo_85",
10
- "withLeftArrow": "_withLeftArrow_hz4pwo_91",
11
- "withRightArrow": "_withRightArrow_hz4pwo_100",
12
- "arrowButton": "_arrowButton_hz4pwo_121"
2
+ "light": "_light_173795r_9",
3
+ "dark": "_dark_173795r_12",
4
+ "wrapper": "_wrapper_173795r_16",
5
+ "scrollable": "_scrollable_173795r_23",
6
+ "arrow": "_arrow_173795r_52",
7
+ "shown": "_shown_173795r_72",
8
+ "arrowLeft": "_arrowLeft_173795r_80",
9
+ "arrowRight": "_arrowRight_173795r_85",
10
+ "withLeftArrow": "_withLeftArrow_173795r_91",
11
+ "withRightArrow": "_withRightArrow_173795r_100",
12
+ "arrowButton": "_arrowButton_173795r_121"
13
13
  };
14
14
  export { styles as default };
package/lib/public-api.p.css CHANGED
@@ -33,14 +33,17 @@
33
33
  --_rs-typography-text-auto-offset:16px;
34
34
  --_rs-typography-ul-list-li-padding-left:22px;
35
35
  --_rs-typography-ol-list-li-padding-left:26px;
36
- --_rs-typography-list-li-margin-top-from-text:16px;
36
+ --_rs-typography-list-li-margin-top-from-text:var(
37
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
38
+ 16px
39
+ );
37
40
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
38
41
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
39
42
  --_rs-typography-link-border-bottom-width-from-text:1px;
40
43
  }
41
44
  @media screen and (max-width: 640px){
42
45
  &:not(html) [data-rs-internal='tab-list__tab']{
43
- --_rs-typography-list-li-margin-top-from-text:12px;
46
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
44
47
  }
45
48
  }
46
49
  }
@@ -79,14 +82,17 @@
79
82
  --_rs-typography-text-auto-offset:32px;
80
83
  --_rs-typography-ul-list-li-padding-left:26px;
81
84
  --_rs-typography-ol-list-li-padding-left:32px;
82
- --_rs-typography-list-li-margin-top-from-text:24px;
85
+ --_rs-typography-list-li-margin-top-from-text:var(
86
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
87
+ 24px
88
+ );
83
89
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
84
90
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
85
91
  --_rs-typography-link-border-bottom-width-from-text:1px;
86
92
  }
87
93
  @media screen and (max-width: 640px){
88
94
  &:not(html) [data-rs-internal='tab-list__tab']{
89
- --_rs-typography-list-li-margin-top-from-text:16px;
95
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
90
96
  }
91
97
  }
92
98
  }
package/lib/public-api.pcss CHANGED
@@ -33,14 +33,17 @@
33
33
  --_rs-typography-text-auto-offset:16px;
34
34
  --_rs-typography-ul-list-li-padding-left:22px;
35
35
  --_rs-typography-ol-list-li-padding-left:26px;
36
- --_rs-typography-list-li-margin-top-from-text:16px;
36
+ --_rs-typography-list-li-margin-top-from-text:var(
37
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
38
+ 16px
39
+ );
37
40
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
38
41
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
39
42
  --_rs-typography-link-border-bottom-width-from-text:1px;
40
43
  }
41
44
  @media screen and (max-width: 640px){
42
45
  &:not(html) [data-rs-internal='tab-list__tab']{
43
- --_rs-typography-list-li-margin-top-from-text:12px;
46
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
44
47
  }
45
48
  }
46
49
  }
@@ -79,14 +82,17 @@
79
82
  --_rs-typography-text-auto-offset:32px;
80
83
  --_rs-typography-ul-list-li-padding-left:26px;
81
84
  --_rs-typography-ol-list-li-padding-left:32px;
82
- --_rs-typography-list-li-margin-top-from-text:24px;
85
+ --_rs-typography-list-li-margin-top-from-text:var(
86
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
87
+ 24px
88
+ );
83
89
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
84
90
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
85
91
  --_rs-typography-link-border-bottom-width-from-text:1px;
86
92
  }
87
93
  @media screen and (max-width: 640px){
88
94
  &:not(html) [data-rs-internal='tab-list__tab']{
89
- --_rs-typography-list-li-margin-top-from-text:16px;
95
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
90
96
  }
91
97
  }
92
98
  }
package/lib/tab-list.js CHANGED
@@ -27,10 +27,13 @@ const InnerTabList = _ref => {
27
27
  containerRef,
28
28
  ['data-e2e']: e2eId
29
29
  } = _ref;
30
- const indicator = useIndicator({
30
+ const {
31
+ indicator,
32
+ isIndicatorHidden
33
+ } = useIndicator({
31
34
  activeNodeRef,
32
35
  containerRef,
33
- triggers: [value, children]
36
+ triggers: [value]
34
37
  });
35
38
  return /*#__PURE__*/React.createElement(TabListContext.Provider, {
36
39
  value: {
@@ -38,7 +41,7 @@ const InnerTabList = _ref => {
38
41
  selectedId
39
42
  }
40
43
  }, /*#__PURE__*/React.createElement("div", {
41
- className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, className),
44
+ className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden, className),
42
45
  "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
43
46
  "data-test": 'tab-list',
44
47
  ref: containerRef
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.13.12",
3
+ "version": "0.14.1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/button": "^0.21.0",
19
+ "@rescui/button": "^0.21.1",
20
20
  "@rescui/use-resize-observer": "^0.2.6",
21
21
  "classnames": "^2.2.6"
22
22
  },
@@ -29,7 +29,7 @@
29
29
  "@rescui/colors": "^0.2.7",
30
30
  "@rescui/postcss-preset-library": "^0.2.2",
31
31
  "@rescui/scripts": "^0.3.5",
32
- "@rescui/typography": "^0.21.1",
32
+ "@rescui/typography": "^0.22.0",
33
33
  "@rescui/visual-regression": "^0.1.2"
34
34
  },
35
35
  "scripts": {
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "d7450a0d420331e1321802ca50b2a12dfb974a4e"
40
+ "gitHead": "71902b643c074d76514a26a5ee2feecc75d41347"
41
41
  }