@rescui/switcher 0.9.8 → 0.10.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.
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_es4omi_6{
1
+ ._themeLight_3s9oe6_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_es4omi_9{
4
+ ._themeDark_3s9oe6_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_es4omi_13{
7
+ ._sizeXS_3s9oe6_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,7 +14,7 @@
14
14
  --_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
15
15
  --_rs-switcher-icon-margin-vertical:2px;
16
16
  }
17
- ._sizeXS_es4omi_13 [data-rs-internal='switcher__option']{
17
+ ._sizeXS_3s9oe6_13 [data-rs-internal='switcher__option']{
18
18
  --_rs-typography-letter-spacing:0.0045em;
19
19
  --_rs-typography-text-transform:initial;
20
20
  --_rs-typography-font-variant-numeric:initial;
@@ -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_es4omi_16{
51
+ ._sizeS_3s9oe6_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,7 +58,7 @@
58
58
  --_rs-switcher-compact-icon-offset:4px;
59
59
  --_rs-switcher-icon-margin-vertical:0px;
60
60
  }
61
- ._sizeS_es4omi_16 [data-rs-internal='switcher__option']{
61
+ ._sizeS_3s9oe6_16 [data-rs-internal='switcher__option']{
62
62
  --_rs-typography-letter-spacing:0.0045em;
63
63
  --_rs-typography-text-transform:initial;
64
64
  --_rs-typography-font-variant-numeric:initial;
@@ -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_es4omi_19{
95
+ ._sizeM_3s9oe6_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,7 +102,7 @@
102
102
  --_rs-switcher-compact-icon-offset:8px;
103
103
  --_rs-switcher-icon-margin-vertical:0px;
104
104
  }
105
- ._sizeM_es4omi_19 [data-rs-internal='switcher__option']{
105
+ ._sizeM_3s9oe6_19 [data-rs-internal='switcher__option']{
106
106
  --_rs-typography-letter-spacing:0.0015em;
107
107
  --_rs-typography-text-transform:initial;
108
108
  --_rs-typography-font-variant-numeric:initial;
@@ -137,11 +137,11 @@
137
137
  --_rs-typography-link-border-bottom-width-from-text:1px;
138
138
  }
139
139
  @media screen and (max-width: 640px){
140
- ._sizeM_es4omi_19 [data-rs-internal='switcher__option']{
140
+ ._sizeM_3s9oe6_19 [data-rs-internal='switcher__option']{
141
141
  --_rs-typography-list-li-margin-top-from-text:12px;
142
142
  }
143
143
  }
144
- ._sizeL_es4omi_22{
144
+ ._sizeL_3s9oe6_22{
145
145
  --_rs-switcher-border-radius:26px;
146
146
  --_rs-switcher-compact-border-radius:12px;
147
147
  --_rs-switcher-option-padding:12px 32px;
@@ -151,7 +151,7 @@
151
151
  --_rs-switcher-compact-icon-offset:12px;
152
152
  --_rs-switcher-icon-margin-vertical:0px;
153
153
  }
154
- ._sizeL_es4omi_22 [data-rs-internal='switcher__option']{
154
+ ._sizeL_3s9oe6_22 [data-rs-internal='switcher__option']{
155
155
  --_rs-typography-letter-spacing:normal;
156
156
  --_rs-typography-text-transform:initial;
157
157
  --_rs-typography-font-variant-numeric:initial;
@@ -186,27 +186,33 @@
186
186
  --_rs-typography-link-border-bottom-width-from-text:1px;
187
187
  }
188
188
  @media screen and (max-width: 640px){
189
- ._sizeL_es4omi_22 [data-rs-internal='switcher__option']{
189
+ ._sizeL_3s9oe6_22 [data-rs-internal='switcher__option']{
190
190
  --_rs-typography-list-li-margin-top-from-text:16px;
191
191
  }
192
192
  }
193
- ._modeClassic_es4omi_26{
193
+ ._modeClassic_3s9oe6_26{
194
194
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
195
195
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
196
196
  }
197
- ._modeRock_es4omi_29{
197
+ ._modeRock_3s9oe6_29{
198
198
  --_rs-switcher-option-hover-background:rgba(
199
199
  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
200
  0.1
201
201
  );
202
202
  --_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
203
  }
204
- ._compact_es4omi_33{
205
- --_rs-switcher-border-radius-from-compact:var(--_rs-switcher-compact-border-radius);
206
- --_rs-switcher-option-padding-from-compact:var(--_rs-switcher-compact-option-padding);
207
- --_rs-switcher-icon-offset-from-compact:var(--_rs-switcher-compact-icon-offset);
204
+ ._compact_3s9oe6_33{
205
+ --_rs-switcher-border-radius-from-compact:var(
206
+ --_rs-switcher-compact-border-radius
207
+ );
208
+ --_rs-switcher-option-padding-from-compact:var(
209
+ --_rs-switcher-compact-option-padding
210
+ );
211
+ --_rs-switcher-icon-offset-from-compact:var(
212
+ --_rs-switcher-compact-icon-offset
213
+ );
208
214
  }
209
- ._switcher_es4omi_37{
215
+ ._switcher_3s9oe6_37{
210
216
  --_rs-theme-dark:var(
211
217
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
212
218
  var(--rs-theme-dark, 0)
@@ -216,7 +222,7 @@
216
222
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
217
223
  }
218
224
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
219
- ._switcher_es4omi_37{
225
+ ._switcher_3s9oe6_37{
220
226
  --_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)));
221
227
  --_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)));
222
228
  --_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)));
@@ -225,7 +231,7 @@
225
231
  }
226
232
  }
227
233
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
228
- ._switcher_es4omi_37{
234
+ ._switcher_3s9oe6_37{
229
235
  --_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);
230
236
  --_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));
231
237
  --_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));
@@ -233,7 +239,7 @@
233
239
  --_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));
234
240
  }
235
241
  }
236
- ._switcher_es4omi_37 {
242
+ ._switcher_3s9oe6_37 {
237
243
 
238
244
  position:relative;
239
245
 
@@ -253,22 +259,20 @@
253
259
  );
254
260
 
255
261
  background:transparent;
256
- -webkit-box-shadow:inset rgba(
257
- 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),
258
- calc(0.4 + var(--_rs-theme-dark-coefficient)*0.1)
259
- ) 0 0 0 1px;
260
- box-shadow:inset rgba(
261
- 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),
262
- calc(0.4 + var(--_rs-theme-dark-coefficient)*0.1)
263
- ) 0 0 0 1px;
264
- }
265
- ._alignIconLeft_es4omi_61{
262
+ -webkit-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;
263
+ 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;
264
+ }
265
+ ._switcher_3s9oe6_37._disabled_3s9oe6_55{
266
+ -webkit-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;
267
+ 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;
268
+ }
269
+ ._alignIconLeft_3s9oe6_60{
266
270
  --_rs-switcher-option-flex-direction:row;
267
271
  }
268
- ._alignIconRight_es4omi_64{
272
+ ._alignIconRight_3s9oe6_63{
269
273
  --_rs-switcher-option-flex-direction:row-reverse;
270
274
  }
271
- ._option_es4omi_68{
275
+ ._option_3s9oe6_67{
272
276
  letter-spacing:var(
273
277
  --rs-text-base-letter-spacing,
274
278
  var(--_rs-typography-letter-spacing)
@@ -335,35 +339,38 @@
335
339
  -moz-appearance:none;
336
340
  appearance:none;
337
341
  }
338
- ._disabled_es4omi_104 ._option_es4omi_68{
342
+ ._disabled_3s9oe6_55 ._option_3s9oe6_67{
339
343
  cursor:not-allowed;
340
344
  pointer-events:none;
341
345
  }
342
- ._option_es4omi_68:focus[data-focus-method='key']{
346
+ ._option_3s9oe6_67:focus[data-focus-method='key']{
343
347
  -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
344
348
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
345
349
  }
346
- ._option_es4omi_68:hover{
347
- background:var(--_rs-switcher-option-hover-background);
350
+ @media (hover: hover){
351
+ ._option_3s9oe6_67:hover{
352
+ background:var(--_rs-switcher-option-hover-background);
353
+ }
348
354
  }
349
- ._option_es4omi_68._selected_es4omi_117:active{
355
+ ._option_3s9oe6_67._selected_3s9oe6_118:active{
350
356
  background:transparent;
351
357
  }
352
- ._option_es4omi_68._selected_es4omi_117:hover,
353
- ._option_es4omi_68._selected_es4omi_117:active{
358
+ ._option_3s9oe6_67._selected_3s9oe6_118:hover,
359
+ ._option_3s9oe6_67._selected_3s9oe6_118:active{
354
360
  cursor:default;
355
361
  }
356
- ._disabled_es4omi_104 ._option_es4omi_68,
357
- ._disabled_es4omi_104 ._option_es4omi_68._selected_es4omi_117{
362
+ ._disabled_3s9oe6_55 ._option_3s9oe6_67,
363
+ ._disabled_3s9oe6_55 ._option_3s9oe6_67._selected_3s9oe6_118{
364
+ color:var(
365
+ --rs-color-pale,
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)
367
+ );
368
+
358
369
  cursor:default;
359
370
 
360
- color:rgba(
361
- 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),
362
- calc(0.4 - var(--_rs-theme-dark-coefficient)*0.2)
363
- );
364
371
  background:transparent;
365
372
  }
366
- ._option_es4omi_68 ._icon_es4omi_138{
373
+ ._option_3s9oe6_67 ._icon_3s9oe6_137{
367
374
  -webkit-box-flex:0;
368
375
  -ms-flex:0 0 auto;
369
376
  flex:0 0 auto;
@@ -376,7 +383,7 @@
376
383
  margin-top:var(--_rs-switcher-icon-margin-vertical);
377
384
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
378
385
  }
379
- ._mark_es4omi_151{
386
+ ._mark_3s9oe6_150{
380
387
  position:absolute;
381
388
  top:0;
382
389
  bottom:0;
@@ -398,9 +405,409 @@
398
405
 
399
406
  transition:all 0.2s;
400
407
  }
401
- ._disabled_es4omi_104 ._mark_es4omi_151{
402
- border:solid 2px rgba(
403
- 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),
404
- calc(0.4 - var(--_rs-theme-dark-coefficient)*0.2)
405
- );
408
+ ._disabled_3s9oe6_55 ._mark_3s9oe6_150{
409
+ 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);
410
+ }
411
+
412
+ ._themeLight_1mttwcn_6{
413
+ --rs-theme-dark:0;
414
+ }
415
+ ._themeDark_1mttwcn_9{
416
+ --rs-theme-dark:1;
417
+ }
418
+ ._sizeXS_1mttwcn_13{
419
+ --_rs-switcher-vertical-border-radius:4px;
420
+ --_rs-switcher-vertical-option-vertical-padding:2px;
421
+ --_rs-switcher-vertical-option-horizontal-padding:8px;
422
+ --_rs-switcher-vertical-icon-size:16px;
423
+ --_rs-switcher-vertical-icon-offset:4px;
424
+ --_rs-switcher-vertical-icon-margin-vertical:2px;
425
+ }
426
+ ._sizeXS_1mttwcn_13 [data-rs-internal='vertical-switcher__option']{
427
+ --_rs-typography-letter-spacing:0.0045em;
428
+ --_rs-typography-text-transform:initial;
429
+ --_rs-typography-font-variant-numeric:initial;
430
+ --_rs-typography-font-family:var(
431
+ --rs-font-family-ui,
432
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
433
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
434
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
435
+ );
436
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
437
+ --_rs-typography-font-weight:var(
438
+ --rs-font-weight-regular,
439
+ 400
440
+ );
441
+ --_rs-typography-line-height:var(
442
+ --rs-text-3-line-height,
443
+ 20px
444
+ );
445
+ --_rs-typography-base-color:var(
446
+ --_rs-typography-hardness-color,
447
+ var(
448
+ --rs-color-average,
449
+ 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.7)
450
+ )
451
+ );
452
+ --_rs-typography-text-auto-offset:8px;
453
+ --_rs-typography-ul-list-li-padding-left:28px;
454
+ --_rs-typography-ol-list-li-padding-left:21px;
455
+ --_rs-typography-list-li-margin-top-from-text:8px;
456
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
457
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
458
+ --_rs-typography-link-border-bottom-width-from-text:1px;
459
+ }
460
+ ._sizeS_1mttwcn_16{
461
+ --_rs-switcher-vertical-border-radius:4px;
462
+ --_rs-switcher-vertical-option-vertical-padding:6px;
463
+ --_rs-switcher-vertical-option-horizontal-padding:12px;
464
+ --_rs-switcher-vertical-icon-size:20px;
465
+ --_rs-switcher-vertical-icon-offset:4px;
466
+ --_rs-switcher-vertical-icon-margin-vertical:0px;
467
+ }
468
+ ._sizeS_1mttwcn_16 [data-rs-internal='vertical-switcher__option']{
469
+ --_rs-typography-letter-spacing:0.0045em;
470
+ --_rs-typography-text-transform:initial;
471
+ --_rs-typography-font-variant-numeric:initial;
472
+ --_rs-typography-font-family:var(
473
+ --rs-font-family-ui,
474
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
475
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
476
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
477
+ );
478
+ --_rs-typography-font-size:var(--rs-text-3-font-size, 13px);
479
+ --_rs-typography-font-weight:var(
480
+ --rs-font-weight-regular,
481
+ 400
482
+ );
483
+ --_rs-typography-line-height:var(
484
+ --rs-text-3-line-height,
485
+ 20px
486
+ );
487
+ --_rs-typography-base-color:var(
488
+ --_rs-typography-hardness-color,
489
+ var(
490
+ --rs-color-average,
491
+ 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.7)
492
+ )
493
+ );
494
+ --_rs-typography-text-auto-offset:8px;
495
+ --_rs-typography-ul-list-li-padding-left:28px;
496
+ --_rs-typography-ol-list-li-padding-left:21px;
497
+ --_rs-typography-list-li-margin-top-from-text:8px;
498
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
499
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
500
+ --_rs-typography-link-border-bottom-width-from-text:1px;
501
+ }
502
+ ._sizeM_1mttwcn_19{
503
+ --_rs-switcher-vertical-border-radius:8px;
504
+ --_rs-switcher-vertical-option-vertical-padding:8px;
505
+ --_rs-switcher-vertical-option-horizontal-padding:16px;
506
+ --_rs-switcher-vertical-icon-size:24px;
507
+ --_rs-switcher-vertical-icon-offset:8px;
508
+ --_rs-switcher-vertical-icon-margin-vertical:0px;
509
+ }
510
+ ._sizeM_1mttwcn_19 [data-rs-internal='vertical-switcher__option']{
511
+ --_rs-typography-letter-spacing:0.0015em;
512
+ --_rs-typography-text-transform:initial;
513
+ --_rs-typography-font-variant-numeric:initial;
514
+ --_rs-typography-font-family:var(
515
+ --rs-font-family-ui,
516
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
517
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
518
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
519
+ );
520
+ --_rs-typography-font-size:var(--rs-text-2-font-size, 16px);
521
+ --_rs-typography-font-weight:var(
522
+ --rs-font-weight-regular,
523
+ 400
524
+ );
525
+ --_rs-typography-line-height:var(
526
+ --rs-text-2-line-height,
527
+ 24px
528
+ );
529
+ --_rs-typography-base-color:var(
530
+ --_rs-typography-hardness-color,
531
+ var(
532
+ --rs-color-average,
533
+ 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.7)
534
+ )
535
+ );
536
+ --_rs-typography-text-auto-offset:16px;
537
+ --_rs-typography-ul-list-li-padding-left:22px;
538
+ --_rs-typography-ol-list-li-padding-left:26px;
539
+ --_rs-typography-list-li-margin-top-from-text:16px;
540
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
541
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
542
+ --_rs-typography-link-border-bottom-width-from-text:1px;
543
+ }
544
+ @media screen and (max-width: 640px){
545
+ ._sizeM_1mttwcn_19 [data-rs-internal='vertical-switcher__option']{
546
+ --_rs-typography-list-li-margin-top-from-text:12px;
547
+ }
548
+ }
549
+ ._sizeL_1mttwcn_22{
550
+ --_rs-switcher-vertical-border-radius:12px;
551
+ --_rs-switcher-vertical-option-vertical-padding:12px;
552
+ --_rs-switcher-vertical-option-horizontal-padding:24px;
553
+ --_rs-switcher-vertical-icon-size:28px;
554
+ --_rs-switcher-vertical-icon-offset:12px;
555
+ --_rs-switcher-vertical-icon-margin-vertical:0px;
556
+ }
557
+ ._sizeL_1mttwcn_22 [data-rs-internal='vertical-switcher__option']{
558
+ --_rs-typography-letter-spacing:normal;
559
+ --_rs-typography-text-transform:initial;
560
+ --_rs-typography-font-variant-numeric:initial;
561
+ --_rs-typography-font-family:var(
562
+ --rs-font-family-ui,
563
+ var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system,
564
+ BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
565
+ 'Droid Sans', 'Helvetica Neue', Arial, sans-serif)
566
+ );
567
+ --_rs-typography-font-size:var(--rs-text-1-font-size, 20px);
568
+ --_rs-typography-font-weight:var(
569
+ --rs-font-weight-regular,
570
+ 400
571
+ );
572
+ --_rs-typography-line-height:var(
573
+ --rs-text-1-line-height,
574
+ 28px
575
+ );
576
+ --_rs-typography-base-color:var(
577
+ --_rs-typography-hardness-color,
578
+ var(
579
+ --rs-color-average,
580
+ 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.7)
581
+ )
582
+ );
583
+ --_rs-typography-text-auto-offset:32px;
584
+ --_rs-typography-ul-list-li-padding-left:26px;
585
+ --_rs-typography-ol-list-li-padding-left:32px;
586
+ --_rs-typography-list-li-margin-top-from-text:24px;
587
+ --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
588
+ --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
589
+ --_rs-typography-link-border-bottom-width-from-text:1px;
590
+ }
591
+ @media screen and (max-width: 640px){
592
+ ._sizeL_1mttwcn_22 [data-rs-internal='vertical-switcher__option']{
593
+ --_rs-typography-list-li-margin-top-from-text:16px;
594
+ }
595
+ }
596
+ ._modeClassic_1mttwcn_26{
597
+ --_rs-switcher-vertical-option-hover-background:var(
598
+ --_rs-color-primary-t-fog
599
+ );
600
+ --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
601
+ }
602
+ ._modeRock_1mttwcn_29{
603
+ --_rs-switcher-vertical-option-hover-background:rgba(
604
+ 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),
605
+ 0.1
606
+ );
607
+ --_rs-switcher-vertical-mark-border-color:rgb(
608
+ 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)
609
+ );
610
+ }
611
+ ._verticalSwitcher_1mttwcn_33{
612
+ --_rs-theme-dark:var(
613
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
614
+ var(--rs-theme-dark, 0)
615
+ );
616
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
617
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
618
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
619
+ }
620
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
621
+ ._verticalSwitcher_1mttwcn_33{
622
+ --_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)));
623
+ --_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)));
624
+ --_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)));
625
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
626
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
627
+ }
628
+ }
629
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
630
+ ._verticalSwitcher_1mttwcn_33{
631
+ --_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);
632
+ --_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));
633
+ --_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));
634
+ --_rs-color-primary-t-dim: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, 0.8);
635
+ --_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));
636
+ }
637
+ }
638
+ ._verticalSwitcher_1mttwcn_33 {
639
+
640
+ position:relative;
641
+
642
+ display:-webkit-inline-box;
643
+
644
+ display:-ms-inline-flexbox;
645
+
646
+ display:inline-flex;
647
+ -webkit-box-orient:vertical;
648
+ -webkit-box-direction:normal;
649
+ -ms-flex-direction:column;
650
+ flex-direction:column;
651
+ -webkit-box-align:start;
652
+ -ms-flex-align:start;
653
+ align-items:flex-start;
654
+
655
+ -webkit-box-sizing:border-box;
656
+
657
+ box-sizing:border-box;
658
+
659
+ border-radius:var(--_rs-switcher-vertical-border-radius);
660
+
661
+ background:transparent;
662
+ -webkit-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;
663
+ 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;
664
+ }
665
+ ._verticalSwitcher_1mttwcn_33._disabled_1mttwcn_50{
666
+ -webkit-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;
667
+ 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;
668
+ }
669
+ ._alignIconLeft_1mttwcn_55{
670
+ --_rs-switcher-vertical-option-flex-direction:row;
671
+ }
672
+ ._alignIconRight_1mttwcn_58{
673
+ --_rs-switcher-vertical-option-flex-direction:row-reverse;
674
+ }
675
+ ._option_1mttwcn_62{
676
+ letter-spacing:var(
677
+ --rs-text-base-letter-spacing,
678
+ var(--_rs-typography-letter-spacing)
679
+ );
680
+ text-transform:var(--_rs-typography-text-transform);
681
+ font-family:var(--_rs-typography-font-family);
682
+ font-size:var(--_rs-typography-font-size);
683
+ font-weight:var(--_rs-typography-font-weight);
684
+ line-height:var(--_rs-typography-line-height);
685
+ font-variant-numeric:var(--_rs-typography-font-variant-numeric);
686
+ -webkit-font-feature-settings:'kern', 'liga', 'calt';
687
+ font-feature-settings:'kern', 'liga', 'calt';
688
+ color:var(
689
+ --rs-color-hard,
690
+ 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))
691
+ );
692
+
693
+ position:relative;
694
+ z-index:1;
695
+
696
+ display:-webkit-inline-box;
697
+
698
+ display:-ms-inline-flexbox;
699
+
700
+ display:inline-flex;
701
+ -webkit-box-flex:1;
702
+ -ms-flex:1 1 auto;
703
+ flex:1 1 auto;
704
+ -ms-flex-wrap:nowrap;
705
+ flex-wrap:nowrap;
706
+ -webkit-box-orient:vertical;
707
+ -webkit-box-direction:normal;
708
+ -ms-flex-direction:var(--_rs-switcher-vertical-option-flex-direction);
709
+ flex-direction:var(--_rs-switcher-vertical-option-flex-direction);
710
+ -webkit-box-pack:start;
711
+ -ms-flex-pack:start;
712
+ justify-content:flex-start;
713
+ -webkit-box-align:start;
714
+ -ms-flex-align:start;
715
+ align-items:flex-start;
716
+
717
+ -webkit-box-sizing:border-box;
718
+
719
+ box-sizing:border-box;
720
+ width:100%;
721
+ margin:0;
722
+ padding:var(--_rs-switcher-vertical-option-vertical-padding) var(--_rs-switcher-vertical-option-horizontal-padding);
723
+
724
+ border:none;
725
+ border-radius:var(--_rs-switcher-vertical-border-radius);
726
+ outline:none;
727
+
728
+ cursor:pointer;
729
+
730
+ background:transparent;
731
+ gap:var(--_rs-switcher-vertical-icon-offset);
732
+ -webkit-appearance:none;
733
+ -moz-appearance:none;
734
+ appearance:none;
735
+ }
736
+ ._disabled_1mttwcn_50 ._option_1mttwcn_62{
737
+ cursor:not-allowed;
738
+ pointer-events:none;
739
+ }
740
+ ._option_1mttwcn_62:focus[data-focus-method='key']{
741
+ -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
742
+ box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
743
+ }
744
+ @media (hover: hover){
745
+ ._option_1mttwcn_62:hover{
746
+ background:var(--_rs-switcher-vertical-option-hover-background);
747
+ }
748
+ }
749
+ ._option_1mttwcn_62._selected_1mttwcn_107:active{
750
+ background:transparent;
751
+ }
752
+ ._option_1mttwcn_62._selected_1mttwcn_107:hover,
753
+ ._option_1mttwcn_62._selected_1mttwcn_107:active{
754
+ cursor:default;
755
+ }
756
+ ._disabled_1mttwcn_50 ._option_1mttwcn_62,
757
+ ._disabled_1mttwcn_50 ._option_1mttwcn_62._selected_1mttwcn_107{
758
+ color:var(
759
+ --rs-color-pale,
760
+ 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)
761
+ );
762
+
763
+ cursor:default;
764
+
765
+ background:transparent;
766
+ }
767
+ ._option_1mttwcn_62 ._optionLabel_1mttwcn_126{
768
+ -webkit-box-flex:1;
769
+ -ms-flex:1 1 auto;
770
+ flex:1 1 auto;
771
+
772
+ text-align:left;
773
+ }
774
+ ._option_1mttwcn_62 ._icon_1mttwcn_132{
775
+ -webkit-box-flex:0;
776
+ -ms-flex:0 0 auto;
777
+ flex:0 0 auto;
778
+
779
+ width:auto;
780
+ height:var(--_rs-switcher-vertical-icon-size);
781
+
782
+ margin-top:var(--_rs-switcher-vertical-icon-margin-vertical);
783
+ margin-bottom:var(--_rs-switcher-vertical-icon-margin-vertical);
784
+
785
+ fill:currentColor;
786
+ }
787
+ ._option_1mttwcn_62 ._fakeIcon_1mttwcn_143{
788
+ display:inline-block;
789
+
790
+ width:var(--_rs-switcher-vertical-icon-size);
791
+ }
792
+ ._mark_1mttwcn_150{
793
+ position:absolute;
794
+ right:0;
795
+ left:0;
796
+
797
+ display:inline-block;
798
+
799
+ -webkit-box-sizing:border-box;
800
+
801
+ box-sizing:border-box;
802
+
803
+ border:solid 2px var(--_rs-switcher-vertical-mark-border-color);
804
+
805
+ border-radius:var(--_rs-switcher-vertical-border-radius);
806
+
807
+ -webkit-transition:all 0.2s;
808
+
809
+ transition:all 0.2s;
810
+ }
811
+ ._disabled_1mttwcn_50 ._mark_1mttwcn_150{
812
+ 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);
406
813
  }
package/lib/index.d.ts CHANGED
@@ -6,3 +6,5 @@ declare const DefaultSwitcher: typeof Switcher;
6
6
  export default DefaultSwitcher;
7
7
  export { Switcher } from './switcher';
8
8
  export type { SwitcherProps } from './switcher';
9
+ export { VerticalSwitcher } from './vertical-switcher';
10
+ export type { VerticalSwitcherProps } from './vertical-switcher';
package/lib/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import './index.css';
2
2
  import { Switcher } from './switcher.js';
3
3
  export { Switcher } from './switcher.js';
4
+ export { VerticalSwitcher } from './vertical-switcher.js';
4
5
  /**
5
6
  * @deprecated use named import instead
6
7
  */