@rescui/switcher 0.10.4 → 0.10.5-RUI-226-Update-card-cn-6e43cc89.60

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 (9) hide show
  1. package/lib/index.css +143 -87
  2. package/lib/public-api.p.css +28 -16
  3. package/lib/public-api.pcss +28 -16
  4. package/lib/switcher.d.ts +3 -1
  5. package/lib/switcher.js +29 -10
  6. package/lib/switcher.p.module.css.js +18 -17
  7. package/lib/vertical-switcher.js +27 -9
  8. package/lib/vertical-switcher.p.module.css.js +19 -18
  9. package/package.json +8 -7
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_1jlttj3_6{
1
+ ._themeLight_1ehnp4f_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_1jlttj3_9{
4
+ ._themeDark_1ehnp4f_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_1jlttj3_13{
7
+ ._sizeXS_1ehnp4f_13{
8
8
  --_rs-switcher-border-radius:4px;
9
9
  --_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
10
10
  --_rs-switcher-option-padding:2px 12px;
@@ -14,8 +14,8 @@
14
14
  --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
15
15
  --_rs-switcher-icon-margin-vertical:2px;
16
16
  }
17
- ._sizeXS_1jlttj3_13 [data-rs-internal='switcher__option']{
18
- --_rs-typography-letter-spacing:0.0045em;
17
+ ._sizeXS_1ehnp4f_13 [data-rs-internal='switcher__option']{
18
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
21
21
  --_rs-typography-font-family:var(
@@ -48,7 +48,7 @@
48
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
49
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
50
  }
51
- ._sizeS_1jlttj3_16{
51
+ ._sizeS_1ehnp4f_16{
52
52
  --_rs-switcher-border-radius:16px;
53
53
  --_rs-switcher-compact-border-radius:4px;
54
54
  --_rs-switcher-option-padding:6px 16px;
@@ -58,8 +58,8 @@
58
58
  --_rs-switcher-compact-icon-offset:4px;
59
59
  --_rs-switcher-icon-margin-vertical:0px;
60
60
  }
61
- ._sizeS_1jlttj3_16 [data-rs-internal='switcher__option']{
62
- --_rs-typography-letter-spacing:0.0045em;
61
+ ._sizeS_1ehnp4f_16 [data-rs-internal='switcher__option']{
62
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
63
63
  --_rs-typography-text-transform:initial;
64
64
  --_rs-typography-font-variant-numeric:initial;
65
65
  --_rs-typography-font-family:var(
@@ -92,7 +92,7 @@
92
92
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
93
93
  --_rs-typography-link-border-bottom-width-from-text:1px;
94
94
  }
95
- ._sizeM_1jlttj3_19{
95
+ ._sizeM_1ehnp4f_19{
96
96
  --_rs-switcher-border-radius:20px;
97
97
  --_rs-switcher-compact-border-radius:8px;
98
98
  --_rs-switcher-option-padding:8px 24px;
@@ -102,8 +102,8 @@
102
102
  --_rs-switcher-compact-icon-offset:8px;
103
103
  --_rs-switcher-icon-margin-vertical:0px;
104
104
  }
105
- ._sizeM_1jlttj3_19 [data-rs-internal='switcher__option']{
106
- --_rs-typography-letter-spacing:0.0015em;
105
+ ._sizeM_1ehnp4f_19 [data-rs-internal='switcher__option']{
106
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
107
107
  --_rs-typography-text-transform:initial;
108
108
  --_rs-typography-font-variant-numeric:initial;
109
109
  --_rs-typography-font-family:var(
@@ -131,17 +131,20 @@
131
131
  --_rs-typography-text-auto-offset:16px;
132
132
  --_rs-typography-ul-list-li-padding-left:22px;
133
133
  --_rs-typography-ol-list-li-padding-left:26px;
134
- --_rs-typography-list-li-margin-top-from-text:16px;
134
+ --_rs-typography-list-li-margin-top-from-text:var(
135
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
136
+ 16px
137
+ );
135
138
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
136
139
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
137
140
  --_rs-typography-link-border-bottom-width-from-text:1px;
138
141
  }
139
142
  @media screen and (max-width: 640px){
140
- ._sizeM_1jlttj3_19 [data-rs-internal='switcher__option']{
141
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ ._sizeM_1ehnp4f_19 [data-rs-internal='switcher__option']{
144
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
142
145
  }
143
146
  }
144
- ._sizeL_1jlttj3_22{
147
+ ._sizeL_1ehnp4f_22{
145
148
  --_rs-switcher-border-radius:26px;
146
149
  --_rs-switcher-compact-border-radius:12px;
147
150
  --_rs-switcher-option-padding:12px 32px;
@@ -151,8 +154,8 @@
151
154
  --_rs-switcher-compact-icon-offset:12px;
152
155
  --_rs-switcher-icon-margin-vertical:0px;
153
156
  }
154
- ._sizeL_1jlttj3_22 [data-rs-internal='switcher__option']{
155
- --_rs-typography-letter-spacing:normal;
157
+ ._sizeL_1ehnp4f_22 [data-rs-internal='switcher__option']{
158
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
156
159
  --_rs-typography-text-transform:initial;
157
160
  --_rs-typography-font-variant-numeric:initial;
158
161
  --_rs-typography-font-family:var(
@@ -180,28 +183,31 @@
180
183
  --_rs-typography-text-auto-offset:32px;
181
184
  --_rs-typography-ul-list-li-padding-left:26px;
182
185
  --_rs-typography-ol-list-li-padding-left:32px;
183
- --_rs-typography-list-li-margin-top-from-text:24px;
186
+ --_rs-typography-list-li-margin-top-from-text:var(
187
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
188
+ 24px
189
+ );
184
190
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
185
191
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
186
192
  --_rs-typography-link-border-bottom-width-from-text:1px;
187
193
  }
188
194
  @media screen and (max-width: 640px){
189
- ._sizeL_1jlttj3_22 [data-rs-internal='switcher__option']{
190
- --_rs-typography-list-li-margin-top-from-text:16px;
195
+ ._sizeL_1ehnp4f_22 [data-rs-internal='switcher__option']{
196
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
191
197
  }
192
198
  }
193
- ._modeClassic_1jlttj3_26{
199
+ ._modeClassic_1ehnp4f_26{
194
200
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
195
201
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
196
202
  }
197
- ._modeRock_1jlttj3_29{
203
+ ._modeRock_1ehnp4f_29{
198
204
  --_rs-switcher-option-hover-background:rgba(
199
205
  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),
200
206
  0.1
201
207
  );
202
208
  --_rs-switcher-mark-border-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));
203
209
  }
204
- ._compact_1jlttj3_33{
210
+ ._compact_1ehnp4f_33{
205
211
  --_rs-switcher-border-radius-from-compact:var(
206
212
  --_rs-switcher-compact-border-radius
207
213
  );
@@ -212,7 +218,7 @@
212
218
  --_rs-switcher-compact-icon-offset
213
219
  );
214
220
  }
215
- ._switcher_1jlttj3_37{
221
+ ._switcher_1ehnp4f_37{
216
222
  --_rs-theme-dark:var(
217
223
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
218
224
  var(--rs-theme-dark, 0)
@@ -222,7 +228,7 @@
222
228
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
223
229
  }
224
230
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
225
- ._switcher_1jlttj3_37{
231
+ ._switcher_1ehnp4f_37{
226
232
  --_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)));
227
233
  --_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)));
228
234
  --_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)));
@@ -231,7 +237,7 @@
231
237
  }
232
238
  }
233
239
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
234
- ._switcher_1jlttj3_37{
240
+ ._switcher_1ehnp4f_37{
235
241
  --_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);
236
242
  --_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));
237
243
  --_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));
@@ -239,7 +245,7 @@
239
245
  --_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));
240
246
  }
241
247
  }
242
- ._switcher_1jlttj3_37 {
248
+ ._switcher_1ehnp4f_37 {
243
249
 
244
250
  position:relative;
245
251
 
@@ -255,16 +261,16 @@
255
261
  background:transparent;
256
262
  box-shadow:inset 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), 0.3) 0 0 0 1px;
257
263
  }
258
- ._switcher_1jlttj3_37._disabled_1jlttj3_55{
264
+ ._switcher_1ehnp4f_37._disabled_1ehnp4f_55{
259
265
  box-shadow:inset 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), 0.2) 0 0 0 1px;
260
266
  }
261
- ._alignIconLeft_1jlttj3_60{
267
+ ._alignIconLeft_1ehnp4f_60{
262
268
  --_rs-switcher-option-flex-direction:row;
263
269
  }
264
- ._alignIconRight_1jlttj3_63{
270
+ ._alignIconRight_1ehnp4f_63{
265
271
  --_rs-switcher-option-flex-direction:row-reverse;
266
272
  }
267
- ._option_1jlttj3_67{
273
+ ._option_1ehnp4f_67{
268
274
  letter-spacing:var(
269
275
  --rs-text-base-letter-spacing,
270
276
  var(--_rs-typography-letter-spacing)
@@ -315,27 +321,46 @@
315
321
  -moz-appearance:none;
316
322
  appearance:none;
317
323
  }
318
- ._disabled_1jlttj3_55 ._option_1jlttj3_67{
324
+ ._disabled_1ehnp4f_55 ._option_1ehnp4f_67{
319
325
  cursor:not-allowed;
320
326
  pointer-events:none;
321
327
  }
322
- ._option_1jlttj3_67:focus[data-focus-method='key']{
328
+ ._option_1ehnp4f_67:focus[data-focus-method='key']{
323
329
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
324
330
  }
325
331
  @media (hover: hover){
326
- ._option_1jlttj3_67:hover{
332
+ ._option_1ehnp4f_67:hover{
327
333
  background:var(--_rs-switcher-option-hover-background);
328
334
  }
329
335
  }
330
- ._option_1jlttj3_67._selected_1jlttj3_118:active{
336
+ ._option_1ehnp4f_67._selected_1ehnp4f_118:active{
331
337
  background:transparent;
332
338
  }
333
- ._option_1jlttj3_67._selected_1jlttj3_118:hover,
334
- ._option_1jlttj3_67._selected_1jlttj3_118:active{
339
+ ._option_1ehnp4f_67._selected_1ehnp4f_118:hover,
340
+ ._option_1ehnp4f_67._selected_1ehnp4f_118:active{
335
341
  cursor:default;
336
342
  }
337
- ._disabled_1jlttj3_55 ._option_1jlttj3_67,
338
- ._disabled_1jlttj3_55 ._option_1jlttj3_67._selected_1jlttj3_118{
343
+ ._hiddenMark_1ehnp4f_127 ._option_1ehnp4f_67._selected_1ehnp4f_118::before{
344
+ position:absolute;
345
+ top:0;
346
+ right:0;
347
+ bottom:0;
348
+ left:0;
349
+
350
+ display:inline-block;
351
+
352
+ box-sizing:border-box;
353
+
354
+ border:solid 2px var(--_rs-switcher-mark-border-color);
355
+ border-radius:inherit;
356
+
357
+ content:'';
358
+ }
359
+ ._hiddenMark_1ehnp4f_127._disabled_1ehnp4f_55 ._option_1ehnp4f_67._selected_1ehnp4f_118::before{
360
+ border-color: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), 0.2);
361
+ }
362
+ ._disabled_1ehnp4f_55 ._option_1ehnp4f_67,
363
+ ._disabled_1ehnp4f_55 ._option_1ehnp4f_67._selected_1ehnp4f_118{
339
364
  color:var(
340
365
  --rs-color-pale,
341
366
  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), 0.5)
@@ -345,7 +370,7 @@
345
370
 
346
371
  background:transparent;
347
372
  }
348
- ._option_1jlttj3_67 ._icon_1jlttj3_137{
373
+ ._option_1ehnp4f_67 ._icon_1ehnp4f_158{
349
374
  flex:0 0 auto;
350
375
 
351
376
  width:auto;
@@ -356,7 +381,7 @@
356
381
  margin-top:var(--_rs-switcher-icon-margin-vertical);
357
382
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
358
383
  }
359
- ._mark_1jlttj3_150{
384
+ ._mark_1ehnp4f_171{
360
385
  position:absolute;
361
386
  top:0;
362
387
  bottom:0;
@@ -372,19 +397,22 @@
372
397
  var(--_rs-switcher-border-radius)
373
398
  );
374
399
 
375
- transition:all 0.2s;
400
+ transition:all var(--_rs-switcher-mark-transition-duration);
376
401
  }
377
- ._disabled_1jlttj3_55 ._mark_1jlttj3_150{
402
+ ._disabled_1ehnp4f_55 ._mark_1ehnp4f_171{
378
403
  border-color: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), 0.2);
379
404
  }
405
+ ._hiddenMark_1ehnp4f_127 ._mark_1ehnp4f_171{
406
+ display:none;
407
+ }
380
408
 
381
- ._themeLight_15725ra_6{
409
+ ._themeLight_1gqbuza_6{
382
410
  --rs-theme-dark:0;
383
411
  }
384
- ._themeDark_15725ra_9{
412
+ ._themeDark_1gqbuza_9{
385
413
  --rs-theme-dark:1;
386
414
  }
387
- ._sizeXS_15725ra_13{
415
+ ._sizeXS_1gqbuza_13{
388
416
  --_rs-switcher-vertical-border-radius:4px;
389
417
  --_rs-switcher-vertical-option-vertical-padding:2px;
390
418
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -392,8 +420,8 @@
392
420
  --_rs-switcher-vertical-icon-offset:4px;
393
421
  --_rs-switcher-vertical-icon-margin-vertical:2px;
394
422
  }
395
- ._sizeXS_15725ra_13 [data-rs-internal='vertical-switcher__option']{
396
- --_rs-typography-letter-spacing:0.0045em;
423
+ ._sizeXS_1gqbuza_13 [data-rs-internal='vertical-switcher__option']{
424
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
397
425
  --_rs-typography-text-transform:initial;
398
426
  --_rs-typography-font-variant-numeric:initial;
399
427
  --_rs-typography-font-family:var(
@@ -426,7 +454,7 @@
426
454
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
427
455
  --_rs-typography-link-border-bottom-width-from-text:1px;
428
456
  }
429
- ._sizeS_15725ra_16{
457
+ ._sizeS_1gqbuza_16{
430
458
  --_rs-switcher-vertical-border-radius:4px;
431
459
  --_rs-switcher-vertical-option-vertical-padding:6px;
432
460
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -434,8 +462,8 @@
434
462
  --_rs-switcher-vertical-icon-offset:4px;
435
463
  --_rs-switcher-vertical-icon-margin-vertical:0px;
436
464
  }
437
- ._sizeS_15725ra_16 [data-rs-internal='vertical-switcher__option']{
438
- --_rs-typography-letter-spacing:0.0045em;
465
+ ._sizeS_1gqbuza_16 [data-rs-internal='vertical-switcher__option']{
466
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
439
467
  --_rs-typography-text-transform:initial;
440
468
  --_rs-typography-font-variant-numeric:initial;
441
469
  --_rs-typography-font-family:var(
@@ -468,7 +496,7 @@
468
496
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
469
497
  --_rs-typography-link-border-bottom-width-from-text:1px;
470
498
  }
471
- ._sizeM_15725ra_19{
499
+ ._sizeM_1gqbuza_19{
472
500
  --_rs-switcher-vertical-border-radius:8px;
473
501
  --_rs-switcher-vertical-option-vertical-padding:8px;
474
502
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -476,8 +504,8 @@
476
504
  --_rs-switcher-vertical-icon-offset:8px;
477
505
  --_rs-switcher-vertical-icon-margin-vertical:0px;
478
506
  }
479
- ._sizeM_15725ra_19 [data-rs-internal='vertical-switcher__option']{
480
- --_rs-typography-letter-spacing:0.0015em;
507
+ ._sizeM_1gqbuza_19 [data-rs-internal='vertical-switcher__option']{
508
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
481
509
  --_rs-typography-text-transform:initial;
482
510
  --_rs-typography-font-variant-numeric:initial;
483
511
  --_rs-typography-font-family:var(
@@ -505,17 +533,20 @@
505
533
  --_rs-typography-text-auto-offset:16px;
506
534
  --_rs-typography-ul-list-li-padding-left:22px;
507
535
  --_rs-typography-ol-list-li-padding-left:26px;
508
- --_rs-typography-list-li-margin-top-from-text:16px;
536
+ --_rs-typography-list-li-margin-top-from-text:var(
537
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
538
+ 16px
539
+ );
509
540
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
510
541
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
511
542
  --_rs-typography-link-border-bottom-width-from-text:1px;
512
543
  }
513
544
  @media screen and (max-width: 640px){
514
- ._sizeM_15725ra_19 [data-rs-internal='vertical-switcher__option']{
515
- --_rs-typography-list-li-margin-top-from-text:12px;
545
+ ._sizeM_1gqbuza_19 [data-rs-internal='vertical-switcher__option']{
546
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
516
547
  }
517
548
  }
518
- ._sizeL_15725ra_22{
549
+ ._sizeL_1gqbuza_22{
519
550
  --_rs-switcher-vertical-border-radius:12px;
520
551
  --_rs-switcher-vertical-option-vertical-padding:12px;
521
552
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -523,8 +554,8 @@
523
554
  --_rs-switcher-vertical-icon-offset:12px;
524
555
  --_rs-switcher-vertical-icon-margin-vertical:0px;
525
556
  }
526
- ._sizeL_15725ra_22 [data-rs-internal='vertical-switcher__option']{
527
- --_rs-typography-letter-spacing:normal;
557
+ ._sizeL_1gqbuza_22 [data-rs-internal='vertical-switcher__option']{
558
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
528
559
  --_rs-typography-text-transform:initial;
529
560
  --_rs-typography-font-variant-numeric:initial;
530
561
  --_rs-typography-font-family:var(
@@ -552,23 +583,26 @@
552
583
  --_rs-typography-text-auto-offset:32px;
553
584
  --_rs-typography-ul-list-li-padding-left:26px;
554
585
  --_rs-typography-ol-list-li-padding-left:32px;
555
- --_rs-typography-list-li-margin-top-from-text:24px;
586
+ --_rs-typography-list-li-margin-top-from-text:var(
587
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
588
+ 24px
589
+ );
556
590
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
557
591
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
558
592
  --_rs-typography-link-border-bottom-width-from-text:1px;
559
593
  }
560
594
  @media screen and (max-width: 640px){
561
- ._sizeL_15725ra_22 [data-rs-internal='vertical-switcher__option']{
562
- --_rs-typography-list-li-margin-top-from-text:16px;
595
+ ._sizeL_1gqbuza_22 [data-rs-internal='vertical-switcher__option']{
596
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
563
597
  }
564
598
  }
565
- ._modeClassic_15725ra_26{
599
+ ._modeClassic_1gqbuza_26{
566
600
  --_rs-switcher-vertical-option-hover-background:var(
567
601
  --_rs-color-primary-t-fog
568
602
  );
569
603
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
570
604
  }
571
- ._modeRock_15725ra_29{
605
+ ._modeRock_1gqbuza_29{
572
606
  --_rs-switcher-vertical-option-hover-background:rgba(
573
607
  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),
574
608
  0.1
@@ -577,7 +611,7 @@
577
611
  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)
578
612
  );
579
613
  }
580
- ._verticalSwitcher_15725ra_33{
614
+ ._verticalSwitcher_1gqbuza_33{
581
615
  --_rs-theme-dark:var(
582
616
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
583
617
  var(--rs-theme-dark, 0)
@@ -587,7 +621,7 @@
587
621
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
588
622
  }
589
623
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
590
- ._verticalSwitcher_15725ra_33{
624
+ ._verticalSwitcher_1gqbuza_33{
591
625
  --_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)));
592
626
  --_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)));
593
627
  --_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)));
@@ -596,7 +630,7 @@
596
630
  }
597
631
  }
598
632
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
599
- ._verticalSwitcher_15725ra_33{
633
+ ._verticalSwitcher_1gqbuza_33{
600
634
  --_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);
601
635
  --_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));
602
636
  --_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));
@@ -604,7 +638,7 @@
604
638
  --_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));
605
639
  }
606
640
  }
607
- ._verticalSwitcher_15725ra_33 {
641
+ ._verticalSwitcher_1gqbuza_33 {
608
642
 
609
643
  position:relative;
610
644
 
@@ -619,16 +653,16 @@
619
653
  background:transparent;
620
654
  box-shadow:inset 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), 0.3) 0 0 0 1px;
621
655
  }
622
- ._verticalSwitcher_15725ra_33._disabled_15725ra_50{
656
+ ._verticalSwitcher_1gqbuza_33._disabled_1gqbuza_50{
623
657
  box-shadow:inset 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), 0.2) 0 0 0 1px;
624
658
  }
625
- ._alignIconLeft_15725ra_55{
659
+ ._alignIconLeft_1gqbuza_55{
626
660
  --_rs-switcher-vertical-option-flex-direction:row;
627
661
  }
628
- ._alignIconRight_15725ra_58{
662
+ ._alignIconRight_1gqbuza_58{
629
663
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
630
664
  }
631
- ._option_15725ra_62{
665
+ ._option_1gqbuza_62{
632
666
  letter-spacing:var(
633
667
  --rs-text-base-letter-spacing,
634
668
  var(--_rs-typography-letter-spacing)
@@ -672,27 +706,46 @@
672
706
  -moz-appearance:none;
673
707
  appearance:none;
674
708
  }
675
- ._disabled_15725ra_50 ._option_15725ra_62{
709
+ ._disabled_1gqbuza_50 ._option_1gqbuza_62{
676
710
  cursor:not-allowed;
677
711
  pointer-events:none;
678
712
  }
679
- ._option_15725ra_62:focus[data-focus-method='key']{
713
+ ._option_1gqbuza_62:focus[data-focus-method='key']{
680
714
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
681
715
  }
682
716
  @media (hover: hover){
683
- ._option_15725ra_62:hover{
717
+ ._option_1gqbuza_62:hover{
684
718
  background:var(--_rs-switcher-vertical-option-hover-background);
685
719
  }
686
720
  }
687
- ._option_15725ra_62._selected_15725ra_107:active{
721
+ ._option_1gqbuza_62._selected_1gqbuza_107:active{
688
722
  background:transparent;
689
723
  }
690
- ._option_15725ra_62._selected_15725ra_107:hover,
691
- ._option_15725ra_62._selected_15725ra_107:active{
724
+ ._option_1gqbuza_62._selected_1gqbuza_107:hover,
725
+ ._option_1gqbuza_62._selected_1gqbuza_107:active{
692
726
  cursor:default;
693
727
  }
694
- ._disabled_15725ra_50 ._option_15725ra_62,
695
- ._disabled_15725ra_50 ._option_15725ra_62._selected_15725ra_107{
728
+ ._hiddenMark_1gqbuza_116 ._option_1gqbuza_62._selected_1gqbuza_107::before{
729
+ position:absolute;
730
+ top:0;
731
+ right:0;
732
+ bottom:0;
733
+ left:0;
734
+
735
+ display:inline-block;
736
+
737
+ box-sizing:border-box;
738
+
739
+ border:solid 2px var(--_rs-switcher-vertical-mark-border-color);
740
+ border-radius:inherit;
741
+
742
+ content:'';
743
+ }
744
+ ._hiddenMark_1gqbuza_116._disabled_1gqbuza_50 ._option_1gqbuza_62._selected_1gqbuza_107::before{
745
+ border-color: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), 0.2);
746
+ }
747
+ ._disabled_1gqbuza_50 ._option_1gqbuza_62,
748
+ ._disabled_1gqbuza_50 ._option_1gqbuza_62._selected_1gqbuza_107{
696
749
  color:var(
697
750
  --rs-color-pale,
698
751
  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), 0.5)
@@ -702,12 +755,12 @@
702
755
 
703
756
  background:transparent;
704
757
  }
705
- ._option_15725ra_62 ._optionLabel_15725ra_126{
758
+ ._option_1gqbuza_62 ._optionLabel_1gqbuza_147{
706
759
  flex:1 1 auto;
707
760
 
708
761
  text-align:left;
709
762
  }
710
- ._option_15725ra_62 ._icon_15725ra_132{
763
+ ._option_1gqbuza_62 ._icon_1gqbuza_153{
711
764
  flex:0 0 auto;
712
765
 
713
766
  width:auto;
@@ -718,12 +771,12 @@
718
771
 
719
772
  fill:currentColor;
720
773
  }
721
- ._option_15725ra_62 ._fakeIcon_15725ra_143{
774
+ ._option_1gqbuza_62 ._fakeIcon_1gqbuza_164{
722
775
  display:inline-block;
723
776
 
724
777
  width:var(--_rs-switcher-vertical-icon-size);
725
778
  }
726
- ._mark_15725ra_150{
779
+ ._mark_1gqbuza_171{
727
780
  position:absolute;
728
781
  right:0;
729
782
  left:0;
@@ -736,8 +789,11 @@
736
789
 
737
790
  border-radius:var(--_rs-switcher-vertical-border-radius);
738
791
 
739
- transition:all 0.2s;
792
+ transition:all var(--_rs-switcher-vertical-mark-transition-duration);
740
793
  }
741
- ._disabled_15725ra_50 ._mark_15725ra_150{
794
+ ._disabled_1gqbuza_50 ._mark_1gqbuza_171{
742
795
  border-color: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), 0.2);
743
796
  }
797
+ ._hiddenMark_1gqbuza_116 ._mark_1gqbuza_171{
798
+ display:none;
799
+ }
package/lib/public-api.p.css CHANGED
@@ -10,7 +10,7 @@
10
10
  --_rs-switcher-icon-margin-vertical:2px;
11
11
  }
12
12
  &:not(html) [data-rs-internal='switcher__option']{
13
- --_rs-typography-letter-spacing:0.0045em;
13
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
14
14
  --_rs-typography-text-transform:initial;
15
15
  --_rs-typography-font-variant-numeric:initial;
16
16
  --_rs-typography-font-family:var(
@@ -56,7 +56,7 @@
56
56
  --_rs-switcher-icon-margin-vertical:0px;
57
57
  }
58
58
  &:not(html) [data-rs-internal='switcher__option']{
59
- --_rs-typography-letter-spacing:0.0045em;
59
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
60
60
  --_rs-typography-text-transform:initial;
61
61
  --_rs-typography-font-variant-numeric:initial;
62
62
  --_rs-typography-font-family:var(
@@ -102,7 +102,7 @@
102
102
  --_rs-switcher-icon-margin-vertical:0px;
103
103
  }
104
104
  &:not(html) [data-rs-internal='switcher__option']{
105
- --_rs-typography-letter-spacing:0.0015em;
105
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
106
106
  --_rs-typography-text-transform:initial;
107
107
  --_rs-typography-font-variant-numeric:initial;
108
108
  --_rs-typography-font-family:var(
@@ -130,14 +130,17 @@
130
130
  --_rs-typography-text-auto-offset:16px;
131
131
  --_rs-typography-ul-list-li-padding-left:22px;
132
132
  --_rs-typography-ol-list-li-padding-left:26px;
133
- --_rs-typography-list-li-margin-top-from-text:16px;
133
+ --_rs-typography-list-li-margin-top-from-text:var(
134
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
135
+ 16px
136
+ );
134
137
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
135
138
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
136
139
  --_rs-typography-link-border-bottom-width-from-text:1px;
137
140
  }
138
141
  @media screen and (max-width: 640px){
139
142
  &:not(html) [data-rs-internal='switcher__option']{
140
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
141
144
  }
142
145
  }
143
146
  }
@@ -153,7 +156,7 @@
153
156
  --_rs-switcher-icon-margin-vertical:0px;
154
157
  }
155
158
  &:not(html) [data-rs-internal='switcher__option']{
156
- --_rs-typography-letter-spacing:normal;
159
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
157
160
  --_rs-typography-text-transform:initial;
158
161
  --_rs-typography-font-variant-numeric:initial;
159
162
  --_rs-typography-font-family:var(
@@ -181,14 +184,17 @@
181
184
  --_rs-typography-text-auto-offset:32px;
182
185
  --_rs-typography-ul-list-li-padding-left:26px;
183
186
  --_rs-typography-ol-list-li-padding-left:32px;
184
- --_rs-typography-list-li-margin-top-from-text:24px;
187
+ --_rs-typography-list-li-margin-top-from-text:var(
188
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
189
+ 24px
190
+ );
185
191
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
186
192
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
187
193
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
194
  }
189
195
  @media screen and (max-width: 640px){
190
196
  &:not(html) [data-rs-internal='switcher__option']{
191
- --_rs-typography-list-li-margin-top-from-text:16px;
197
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
192
198
  }
193
199
  }
194
200
  }
@@ -243,7 +249,7 @@
243
249
  --_rs-switcher-vertical-icon-margin-vertical:2px;
244
250
  }
245
251
  &:not(html) [data-rs-internal='vertical-switcher__option']{
246
- --_rs-typography-letter-spacing:0.0045em;
252
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
247
253
  --_rs-typography-text-transform:initial;
248
254
  --_rs-typography-font-variant-numeric:initial;
249
255
  --_rs-typography-font-family:var(
@@ -287,7 +293,7 @@
287
293
  --_rs-switcher-vertical-icon-margin-vertical:0px;
288
294
  }
289
295
  &:not(html) [data-rs-internal='vertical-switcher__option']{
290
- --_rs-typography-letter-spacing:0.0045em;
296
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
291
297
  --_rs-typography-text-transform:initial;
292
298
  --_rs-typography-font-variant-numeric:initial;
293
299
  --_rs-typography-font-family:var(
@@ -331,7 +337,7 @@
331
337
  --_rs-switcher-vertical-icon-margin-vertical:0px;
332
338
  }
333
339
  &:not(html) [data-rs-internal='vertical-switcher__option']{
334
- --_rs-typography-letter-spacing:0.0015em;
340
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
335
341
  --_rs-typography-text-transform:initial;
336
342
  --_rs-typography-font-variant-numeric:initial;
337
343
  --_rs-typography-font-family:var(
@@ -359,14 +365,17 @@
359
365
  --_rs-typography-text-auto-offset:16px;
360
366
  --_rs-typography-ul-list-li-padding-left:22px;
361
367
  --_rs-typography-ol-list-li-padding-left:26px;
362
- --_rs-typography-list-li-margin-top-from-text:16px;
368
+ --_rs-typography-list-li-margin-top-from-text:var(
369
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
370
+ 16px
371
+ );
363
372
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
364
373
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
365
374
  --_rs-typography-link-border-bottom-width-from-text:1px;
366
375
  }
367
376
  @media screen and (max-width: 640px){
368
377
  &:not(html) [data-rs-internal='vertical-switcher__option']{
369
- --_rs-typography-list-li-margin-top-from-text:12px;
378
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
370
379
  }
371
380
  }
372
381
  }
@@ -380,7 +389,7 @@
380
389
  --_rs-switcher-vertical-icon-margin-vertical:0px;
381
390
  }
382
391
  &:not(html) [data-rs-internal='vertical-switcher__option']{
383
- --_rs-typography-letter-spacing:normal;
392
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
384
393
  --_rs-typography-text-transform:initial;
385
394
  --_rs-typography-font-variant-numeric:initial;
386
395
  --_rs-typography-font-family:var(
@@ -408,14 +417,17 @@
408
417
  --_rs-typography-text-auto-offset:32px;
409
418
  --_rs-typography-ul-list-li-padding-left:26px;
410
419
  --_rs-typography-ol-list-li-padding-left:32px;
411
- --_rs-typography-list-li-margin-top-from-text:24px;
420
+ --_rs-typography-list-li-margin-top-from-text:var(
421
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
422
+ 24px
423
+ );
412
424
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
413
425
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
414
426
  --_rs-typography-link-border-bottom-width-from-text:1px;
415
427
  }
416
428
  @media screen and (max-width: 640px){
417
429
  &:not(html) [data-rs-internal='vertical-switcher__option']{
418
- --_rs-typography-list-li-margin-top-from-text:16px;
430
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
419
431
  }
420
432
  }
421
433
  }
package/lib/public-api.pcss CHANGED
@@ -10,7 +10,7 @@
10
10
  --_rs-switcher-icon-margin-vertical:2px;
11
11
  }
12
12
  &:not(html) [data-rs-internal='switcher__option']{
13
- --_rs-typography-letter-spacing:0.0045em;
13
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
14
14
  --_rs-typography-text-transform:initial;
15
15
  --_rs-typography-font-variant-numeric:initial;
16
16
  --_rs-typography-font-family:var(
@@ -56,7 +56,7 @@
56
56
  --_rs-switcher-icon-margin-vertical:0px;
57
57
  }
58
58
  &:not(html) [data-rs-internal='switcher__option']{
59
- --_rs-typography-letter-spacing:0.0045em;
59
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
60
60
  --_rs-typography-text-transform:initial;
61
61
  --_rs-typography-font-variant-numeric:initial;
62
62
  --_rs-typography-font-family:var(
@@ -102,7 +102,7 @@
102
102
  --_rs-switcher-icon-margin-vertical:0px;
103
103
  }
104
104
  &:not(html) [data-rs-internal='switcher__option']{
105
- --_rs-typography-letter-spacing:0.0015em;
105
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
106
106
  --_rs-typography-text-transform:initial;
107
107
  --_rs-typography-font-variant-numeric:initial;
108
108
  --_rs-typography-font-family:var(
@@ -130,14 +130,17 @@
130
130
  --_rs-typography-text-auto-offset:16px;
131
131
  --_rs-typography-ul-list-li-padding-left:22px;
132
132
  --_rs-typography-ol-list-li-padding-left:26px;
133
- --_rs-typography-list-li-margin-top-from-text:16px;
133
+ --_rs-typography-list-li-margin-top-from-text:var(
134
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
135
+ 16px
136
+ );
134
137
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
135
138
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
136
139
  --_rs-typography-link-border-bottom-width-from-text:1px;
137
140
  }
138
141
  @media screen and (max-width: 640px){
139
142
  &:not(html) [data-rs-internal='switcher__option']{
140
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
141
144
  }
142
145
  }
143
146
  }
@@ -153,7 +156,7 @@
153
156
  --_rs-switcher-icon-margin-vertical:0px;
154
157
  }
155
158
  &:not(html) [data-rs-internal='switcher__option']{
156
- --_rs-typography-letter-spacing:normal;
159
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
157
160
  --_rs-typography-text-transform:initial;
158
161
  --_rs-typography-font-variant-numeric:initial;
159
162
  --_rs-typography-font-family:var(
@@ -181,14 +184,17 @@
181
184
  --_rs-typography-text-auto-offset:32px;
182
185
  --_rs-typography-ul-list-li-padding-left:26px;
183
186
  --_rs-typography-ol-list-li-padding-left:32px;
184
- --_rs-typography-list-li-margin-top-from-text:24px;
187
+ --_rs-typography-list-li-margin-top-from-text:var(
188
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
189
+ 24px
190
+ );
185
191
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
186
192
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
187
193
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
194
  }
189
195
  @media screen and (max-width: 640px){
190
196
  &:not(html) [data-rs-internal='switcher__option']{
191
- --_rs-typography-list-li-margin-top-from-text:16px;
197
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
192
198
  }
193
199
  }
194
200
  }
@@ -243,7 +249,7 @@
243
249
  --_rs-switcher-vertical-icon-margin-vertical:2px;
244
250
  }
245
251
  &:not(html) [data-rs-internal='vertical-switcher__option']{
246
- --_rs-typography-letter-spacing:0.0045em;
252
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
247
253
  --_rs-typography-text-transform:initial;
248
254
  --_rs-typography-font-variant-numeric:initial;
249
255
  --_rs-typography-font-family:var(
@@ -287,7 +293,7 @@
287
293
  --_rs-switcher-vertical-icon-margin-vertical:0px;
288
294
  }
289
295
  &:not(html) [data-rs-internal='vertical-switcher__option']{
290
- --_rs-typography-letter-spacing:0.0045em;
296
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
291
297
  --_rs-typography-text-transform:initial;
292
298
  --_rs-typography-font-variant-numeric:initial;
293
299
  --_rs-typography-font-family:var(
@@ -331,7 +337,7 @@
331
337
  --_rs-switcher-vertical-icon-margin-vertical:0px;
332
338
  }
333
339
  &:not(html) [data-rs-internal='vertical-switcher__option']{
334
- --_rs-typography-letter-spacing:0.0015em;
340
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
335
341
  --_rs-typography-text-transform:initial;
336
342
  --_rs-typography-font-variant-numeric:initial;
337
343
  --_rs-typography-font-family:var(
@@ -359,14 +365,17 @@
359
365
  --_rs-typography-text-auto-offset:16px;
360
366
  --_rs-typography-ul-list-li-padding-left:22px;
361
367
  --_rs-typography-ol-list-li-padding-left:26px;
362
- --_rs-typography-list-li-margin-top-from-text:16px;
368
+ --_rs-typography-list-li-margin-top-from-text:var(
369
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
370
+ 16px
371
+ );
363
372
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
364
373
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
365
374
  --_rs-typography-link-border-bottom-width-from-text:1px;
366
375
  }
367
376
  @media screen and (max-width: 640px){
368
377
  &:not(html) [data-rs-internal='vertical-switcher__option']{
369
- --_rs-typography-list-li-margin-top-from-text:12px;
378
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
370
379
  }
371
380
  }
372
381
  }
@@ -380,7 +389,7 @@
380
389
  --_rs-switcher-vertical-icon-margin-vertical:0px;
381
390
  }
382
391
  &:not(html) [data-rs-internal='vertical-switcher__option']{
383
- --_rs-typography-letter-spacing:normal;
392
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
384
393
  --_rs-typography-text-transform:initial;
385
394
  --_rs-typography-font-variant-numeric:initial;
386
395
  --_rs-typography-font-family:var(
@@ -408,14 +417,17 @@
408
417
  --_rs-typography-text-auto-offset:32px;
409
418
  --_rs-typography-ul-list-li-padding-left:26px;
410
419
  --_rs-typography-ol-list-li-padding-left:32px;
411
- --_rs-typography-list-li-margin-top-from-text:24px;
420
+ --_rs-typography-list-li-margin-top-from-text:var(
421
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
422
+ 24px
423
+ );
412
424
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
413
425
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
414
426
  --_rs-typography-link-border-bottom-width-from-text:1px;
415
427
  }
416
428
  @media screen and (max-width: 640px){
417
429
  &:not(html) [data-rs-internal='vertical-switcher__option']{
418
- --_rs-typography-list-li-margin-top-from-text:16px;
430
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
419
431
  }
420
432
  }
421
433
  }
package/lib/switcher.d.ts CHANGED
@@ -28,8 +28,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
28
28
  'data-e2e'?: string;
29
29
  /** **Works only if the `icon` on options is present.** Additional icon position. */
30
30
  iconPosition?: SwitcherOptionIconPosition;
31
+ /** CSS style object */
32
+ style?: React.CSSProperties;
31
33
  }
32
- export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
34
+ export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange, style }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
33
35
  export declare namespace Switcher {
34
36
  var propTypes: {};
35
37
  }
package/lib/switcher.js CHANGED
@@ -4,6 +4,7 @@ import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
6
  import styles from './switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s';
7
8
  const sizeToClass = {
8
9
  l: styles.sizeL,
9
10
  m: styles.sizeM,
@@ -46,7 +47,8 @@ const optionRenderer = (_ref, ref) => {
46
47
  disabled: disabled,
47
48
  className: cn(styles.option, selected && styles.selected)
48
49
  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
49
- className: cn(icon.props.className, styles.icon)
50
+ className: cn(icon.props.className, styles.icon),
51
+ 'data-render-all-sizes': true
50
52
  }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
51
53
  };
52
54
 
@@ -64,7 +66,8 @@ function Switcher(_ref2) {
64
66
  value: switcherValue,
65
67
  mode = 'classic',
66
68
  iconPosition = 'left',
67
- onChange
69
+ onChange,
70
+ style
68
71
  } = _ref2;
69
72
  const refsArray = useRef([]);
70
73
  const containerRef = useRef(null);
@@ -81,10 +84,14 @@ function Switcher(_ref2) {
81
84
  const activeIndex = findIndexByValue(options, switcherValue);
82
85
  const [mark, setMark] = useState({
83
86
  offset: 0,
84
- width: 0
87
+ width: 0,
88
+ hidden: true
85
89
  });
90
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
91
+ const firstMarkUpdate = useRef(true);
86
92
 
87
- const onResize = () => {
93
+ const updateMark = function () {
94
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
88
95
  const activeEl = refsArray.current[activeIndex];
89
96
 
90
97
  if (!activeEl) {
@@ -96,19 +103,30 @@ function Switcher(_ref2) {
96
103
  setMark({
97
104
  // standard activeEl.offsetLeft always return rounded value, so it does not suit us
98
105
  offset: activeElBox.left - parentBox.left,
99
- width: activeElBox.width
106
+ width: activeElBox.width,
107
+ hidden: false
100
108
  });
109
+
110
+ if (firstMarkUpdate.current) {
111
+ firstMarkUpdate.current = false;
112
+ setIsMarkTransitionEnabled(false);
113
+ } else {
114
+ setIsMarkTransitionEnabled(isValueChanged);
115
+ }
101
116
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
102
117
 
103
118
 
104
- useEffect(() => onResize(), [activeIndex]);
105
- useResizeObserver(containerRef, onResize);
119
+ useEffect(() => updateMark(true), [activeIndex]);
120
+ useResizeObserver(containerRef, () => updateMark(false));
106
121
  return /*#__PURE__*/React.createElement("span", {
107
- className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
122
+ className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
108
123
  "data-e2e": e2eId,
109
124
  ref: containerRef,
110
125
  "data-rs-internal": 'switcher',
111
- "data-test": cn(`switcher`, disabled && `switcher-disabled`)
126
+ "data-test": cn(`switcher`, disabled && `switcher-disabled`),
127
+ style: { ...style,
128
+ '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
129
+ }
112
130
  }, options.map((_ref3, index) => {
113
131
  var _options$activeIndex;
114
132
 
@@ -150,6 +168,7 @@ Switcher.propTypes = {
150
168
  theme: PropTypes.oneOf(['light', 'dark']),
151
169
  disabled: PropTypes.bool,
152
170
  iconPosition: PropTypes.oneOf(['left', 'right']),
153
- 'data-e2e': PropTypes.string
171
+ 'data-e2e': PropTypes.string,
172
+ style: PropTypes.object
154
173
  };
155
174
  export { Switcher, Switcher as default };
package/lib/switcher.p.module.css.js CHANGED
@@ -1,20 +1,21 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_1jlttj3_6",
3
- "themeDark": "_themeDark_1jlttj3_9",
4
- "sizeXS": "_sizeXS_1jlttj3_13",
5
- "sizeS": "_sizeS_1jlttj3_16",
6
- "sizeM": "_sizeM_1jlttj3_19",
7
- "sizeL": "_sizeL_1jlttj3_22",
8
- "modeClassic": "_modeClassic_1jlttj3_26",
9
- "modeRock": "_modeRock_1jlttj3_29",
10
- "compact": "_compact_1jlttj3_33",
11
- "switcher": "_switcher_1jlttj3_37",
12
- "disabled": "_disabled_1jlttj3_55",
13
- "alignIconLeft": "_alignIconLeft_1jlttj3_60",
14
- "alignIconRight": "_alignIconRight_1jlttj3_63",
15
- "option": "_option_1jlttj3_67",
16
- "selected": "_selected_1jlttj3_118",
17
- "icon": "_icon_1jlttj3_137",
18
- "mark": "_mark_1jlttj3_150"
2
+ "themeLight": "_themeLight_1ehnp4f_6",
3
+ "themeDark": "_themeDark_1ehnp4f_9",
4
+ "sizeXS": "_sizeXS_1ehnp4f_13",
5
+ "sizeS": "_sizeS_1ehnp4f_16",
6
+ "sizeM": "_sizeM_1ehnp4f_19",
7
+ "sizeL": "_sizeL_1ehnp4f_22",
8
+ "modeClassic": "_modeClassic_1ehnp4f_26",
9
+ "modeRock": "_modeRock_1ehnp4f_29",
10
+ "compact": "_compact_1ehnp4f_33",
11
+ "switcher": "_switcher_1ehnp4f_37",
12
+ "disabled": "_disabled_1ehnp4f_55",
13
+ "alignIconLeft": "_alignIconLeft_1ehnp4f_60",
14
+ "alignIconRight": "_alignIconRight_1ehnp4f_63",
15
+ "option": "_option_1ehnp4f_67",
16
+ "selected": "_selected_1ehnp4f_118",
17
+ "hiddenMark": "_hiddenMark_1ehnp4f_127",
18
+ "icon": "_icon_1ehnp4f_158",
19
+ "mark": "_mark_1ehnp4f_171"
19
20
  };
20
21
  export { styles as default };
package/lib/vertical-switcher.js CHANGED
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
3
3
  import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
- import styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
6
+ import styles from './vertical-switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
7
8
 
8
9
  const noop = () => {};
9
10
 
@@ -102,7 +103,8 @@ function Option(_ref2) {
102
103
  className: cn(styles.option, selected && styles.selected),
103
104
  "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected')
104
105
  }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
105
- className: cn(icon.props.className, styles.icon)
106
+ className: cn(icon.props.className, styles.icon),
107
+ 'data-render-all-sizes': true
106
108
  }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
107
109
  className: styles.optionLabel
108
110
  }, label));
@@ -146,10 +148,14 @@ function VerticalSwitcher(_ref3) {
146
148
  }, []);
147
149
  const [mark, setMark] = useState({
148
150
  offset: 0,
149
- height: 0
151
+ height: 0,
152
+ hidden: true
150
153
  });
154
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
155
+ const firstMarkUpdate = useRef(true);
151
156
 
152
- const onResize = () => {
157
+ const updateMark = function () {
158
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
153
159
  const activeEl = refsArray.current[activeIndex];
154
160
 
155
161
  if (!activeEl) {
@@ -162,20 +168,32 @@ function VerticalSwitcher(_ref3) {
162
168
  setMark({
163
169
  // standard activeEl.offsetTop always return rounded value, so it does not suit us
164
170
  offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
165
- height: activeElBox.height
171
+ height: activeElBox.height,
172
+ hidden: false
166
173
  });
174
+
175
+ if (firstMarkUpdate.current) {
176
+ firstMarkUpdate.current = false;
177
+ setIsMarkTransitionEnabled(false);
178
+ } else {
179
+ setIsMarkTransitionEnabled(isValueChanged);
180
+ }
167
181
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
168
182
 
169
183
 
170
- useEffect(() => onResize(), [activeIndex]);
171
- useResizeObserver(containerRef, onResize);
184
+ useEffect(() => updateMark(true), [activeIndex]);
185
+ useResizeObserver(containerRef, () => updateMark(false), {
186
+ ignoreFirstCall: true
187
+ });
172
188
  return /*#__PURE__*/React.createElement("span", {
173
- className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
189
+ className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
174
190
  "data-e2e": e2eId,
175
191
  ref: containerRef,
176
192
  "data-rs-internal": 'vertical-switcher',
177
193
  "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
178
- style: style
194
+ style: { ...style,
195
+ '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
196
+ }
179
197
  }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
180
198
  value: {
181
199
  switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
package/lib/vertical-switcher.p.module.css.js CHANGED
@@ -1,21 +1,22 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_15725ra_6",
3
- "themeDark": "_themeDark_15725ra_9",
4
- "sizeXS": "_sizeXS_15725ra_13",
5
- "sizeS": "_sizeS_15725ra_16",
6
- "sizeM": "_sizeM_15725ra_19",
7
- "sizeL": "_sizeL_15725ra_22",
8
- "modeClassic": "_modeClassic_15725ra_26",
9
- "modeRock": "_modeRock_15725ra_29",
10
- "verticalSwitcher": "_verticalSwitcher_15725ra_33",
11
- "disabled": "_disabled_15725ra_50",
12
- "alignIconLeft": "_alignIconLeft_15725ra_55",
13
- "alignIconRight": "_alignIconRight_15725ra_58",
14
- "option": "_option_15725ra_62",
15
- "selected": "_selected_15725ra_107",
16
- "optionLabel": "_optionLabel_15725ra_126",
17
- "icon": "_icon_15725ra_132",
18
- "fakeIcon": "_fakeIcon_15725ra_143",
19
- "mark": "_mark_15725ra_150"
2
+ "themeLight": "_themeLight_1gqbuza_6",
3
+ "themeDark": "_themeDark_1gqbuza_9",
4
+ "sizeXS": "_sizeXS_1gqbuza_13",
5
+ "sizeS": "_sizeS_1gqbuza_16",
6
+ "sizeM": "_sizeM_1gqbuza_19",
7
+ "sizeL": "_sizeL_1gqbuza_22",
8
+ "modeClassic": "_modeClassic_1gqbuza_26",
9
+ "modeRock": "_modeRock_1gqbuza_29",
10
+ "verticalSwitcher": "_verticalSwitcher_1gqbuza_33",
11
+ "disabled": "_disabled_1gqbuza_50",
12
+ "alignIconLeft": "_alignIconLeft_1gqbuza_55",
13
+ "alignIconRight": "_alignIconRight_1gqbuza_58",
14
+ "option": "_option_1gqbuza_62",
15
+ "selected": "_selected_1gqbuza_107",
16
+ "hiddenMark": "_hiddenMark_1gqbuza_116",
17
+ "optionLabel": "_optionLabel_1gqbuza_147",
18
+ "icon": "_icon_1gqbuza_153",
19
+ "fakeIcon": "_fakeIcon_1gqbuza_164",
20
+ "mark": "_mark_1gqbuza_171"
20
21
  };
21
22
  export { styles as default };
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@rescui/switcher",
3
- "version": "0.10.4",
3
+ "version": "0.10.5-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "main": "lib/index.js",
8
+ "module": "lib/index.js",
8
9
  "src:main": "src/index.ts",
9
10
  "files": [
10
11
  "lib",
@@ -16,7 +17,7 @@
16
17
  },
17
18
  "dependencies": {
18
19
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/use-resize-observer": "^0.2.5",
20
+ "@rescui/use-resize-observer": "0.2.6-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
20
21
  "classnames": "^2.2.6"
21
22
  },
22
23
  "peerDependencies": {
@@ -25,15 +26,15 @@
25
26
  "react": ">=16.8.0 <19"
26
27
  },
27
28
  "devDependencies": {
28
- "@rescui/colors": "^0.2.6",
29
- "@rescui/icons": "^0.16.12",
30
- "@rescui/scripts": "^0.3.5",
31
- "@rescui/typography": "^0.19.1"
29
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
30
+ "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
31
+ "@rescui/scripts": "0.4.0",
32
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89"
32
33
  },
33
34
  "scripts": {
34
35
  "build": "rescui-scripts build && yarn run build-pcss-api",
35
36
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
36
37
  },
37
38
  "nx": {},
38
- "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
39
+ "gitHead": "6e43cc893fafb22b990273901bc0a070fb15761f"
39
40
  }