@volvo-cars/css 0.54.0 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/styles.d.ts CHANGED
@@ -159,12 +159,6 @@ export interface ClassNames {
159
159
  /**
160
160
  * ```css
161
161
  * background-color: #000000a3
162
- * z-index: calc(var(--v-index-overlay) - 1)
163
- * justify-content: center
164
- * align-items: center
165
- * display: flex
166
- * position: fixed
167
- * inset: 0
168
162
  * ``` */ readonly backdrop: 'backdrop';
169
163
  /**
170
164
  * ```css
@@ -240,9 +234,6 @@ export interface ClassNames {
240
234
  * ``` */ readonly block: 'block';
241
235
  /**
242
236
  * ```css
243
- * --stack-gap: var(--v-space-8)
244
- * --stack-gap: var(--v-space-4)
245
- * --stack-gap: var(--v-space-16)
246
237
  * font-size: var(--v-font-16-size)
247
238
  * line-height: var(--v-font-16-lineheight)
248
239
  * ``` */ readonly body16: 'body-16';
@@ -363,44 +354,19 @@ export interface ClassNames {
363
354
  * min-width: max-content
364
355
  * display: inline-flex
365
356
  * position: relative
366
- * opacity: var(--_v-disabled-opacity)
367
357
  * font-size: var(--v-font-16-size)
368
358
  * font-weight: var(--v-font-emphasis-weight)
369
359
  * white-space: nowrap
370
360
  * max-width: 100%
371
361
  * height: 3rem
372
362
  * overflow: hidden
373
- * content: ""
374
- * width: 100%
375
- * height: 40px
376
- * position: absolute
377
- * top: 50%
378
- * transform: translateY(-50%)
379
- * font-size: var(--v-font-12-size)
380
- * height: 2rem
381
363
  * --button-accent-color: var(--v-color-surface-neutral)
382
364
  * --_color: var(--v-color-foreground-inverted)
383
365
  * --_overlay-rate: 0%
384
366
  * color: var(--_color)
385
367
  * background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))
386
- * --button-accent-color: var(--v-color-surface-accent-blue)
387
- * --_color: var(--v-color-always-white)
388
- * --button-accent-color: var(--v-color-surface-feedback-red)
389
- * background: var(--button-accent-color)
390
- * --_overlay-rate: var(--_v-color-mix-strong)
391
- * transform: scale(.95)
392
368
  * padding-inline: min(var(--v-space-32), 8vw)
393
- * border-radius: var(--v-radius-4)
394
- * width: 1.5rem
395
- * height: 1.5rem
396
- * padding-inline: var(--v-space-16)
397
- * width: 1rem
398
- * height: 1rem
399
- * flex: 1 0 40%
400
- * flex: 1 0 40cqw
401
- * --stack-gap: var(--v-space-24)
402
- * --stack-gap: var(--v-space-32)
403
- * --stack-gap: var(--v-space-16)
369
+ * border-radius: var(--v-radius-sm)
404
370
  * ``` */ readonly buttonFilled: 'button-filled';
405
371
  /**
406
372
  * ```css
@@ -408,11 +374,6 @@ export interface ClassNames {
408
374
  * flex-wrap: wrap
409
375
  * display: flex
410
376
  * container: button-group / inline-size
411
- * flex: 1 0 40%
412
- * flex: 1 0 40cqw
413
- * --stack-gap: var(--v-space-24)
414
- * --stack-gap: var(--v-space-32)
415
- * --stack-gap: var(--v-space-16)
416
377
  * ``` */ readonly buttonGroup: 'button-group';
417
378
  /**
418
379
  * ```css
@@ -423,41 +384,17 @@ export interface ClassNames {
423
384
  * min-width: max-content
424
385
  * display: inline-flex
425
386
  * position: relative
426
- * opacity: var(--_v-disabled-opacity)
427
387
  * font-size: var(--v-font-16-size)
428
388
  * font-weight: var(--v-font-emphasis-weight)
429
389
  * white-space: nowrap
430
390
  * max-width: 100%
431
391
  * height: 3rem
432
392
  * overflow: hidden
433
- * content: ""
434
- * width: 100%
435
- * height: 40px
436
- * position: absolute
437
- * top: 50%
438
- * transform: translateY(-50%)
439
- * font-size: var(--v-font-12-size)
440
- * height: 2rem
441
393
  * box-shadow: inset 0 0 0 1px var(--button-accent-color)
442
- * color: var(--v-color-foreground-inverted)
443
- * background-color: var(--button-accent-color)
444
- * transform: scale(.95)
445
394
  * padding-inline: min(var(--v-space-32), 8vw)
446
- * border-radius: var(--v-radius-4)
447
- * width: 1.5rem
448
- * height: 1.5rem
449
- * padding-inline: var(--v-space-16)
450
- * width: 1rem
451
- * height: 1rem
395
+ * border-radius: var(--v-radius-sm)
452
396
  * --button-accent-color: var(--v-color-foreground-primary)
453
397
  * color: var(--button-accent-color)
454
- * --button-accent-color: var(--v-color-foreground-accent-blue)
455
- * --button-accent-color: var(--v-color-foreground-feedback-red)
456
- * flex: 1 0 40%
457
- * flex: 1 0 40cqw
458
- * --stack-gap: var(--v-space-24)
459
- * --stack-gap: var(--v-space-32)
460
- * --stack-gap: var(--v-space-16)
461
398
  * ``` */ readonly buttonOutlined: 'button-outlined';
462
399
  /**
463
400
  * ```css
@@ -468,52 +405,15 @@ export interface ClassNames {
468
405
  * min-width: max-content
469
406
  * display: inline-flex
470
407
  * position: relative
471
- * opacity: var(--_v-disabled-opacity)
472
408
  * font-size: var(--v-font-16-size)
473
409
  * font-weight: var(--v-font-emphasis-weight)
474
410
  * white-space: nowrap
475
411
  * max-width: 100%
476
412
  * height: 3rem
477
413
  * overflow: hidden
478
- * content: ""
479
- * width: 100%
480
- * height: 40px
481
- * position: absolute
482
- * top: 50%
483
- * transform: translateY(-50%)
484
- * font-size: var(--v-font-12-size)
485
- * height: 2rem
486
414
  * --button-accent-color: var(--v-color-foreground-primary)
487
415
  * color: var(--button-accent-color)
488
- * --button-accent-color: var(--v-color-foreground-accent-blue)
489
- * --button-accent-color: var(--v-color-foreground-feedback-red)
490
416
  * text-align: start
491
- * --_arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.96' fill-rule='evenodd' d='m2.728 10 4-4-4-4L4 .729 9.273 6 4 11.273l-1.272-1.272Z' clip-rule='evenodd'/%3E%3C/svg%3E")
492
- * mask: var(--_arrow-icon)
493
- * transition: rotate var(--_v-transition-speed-default) ease
494
- * rotate: var(--_arrow-rotation)
495
- * flex-shrink: 0
496
- * width: .75em
497
- * height: .75em
498
- * margin-top: .125rem
499
- * mask-size: cover
500
- * width: .5rem
501
- * height: .5rem
502
- * background-color: currentColor
503
- * margin-inline-start: var(--v-space-4)
504
- * margin-inline-end: var(--v-space-4)
505
- * --_rtl-arrow-rotation: var(--_rtl-toggle) 180deg
506
- * --_arrow-rotation: var(--_rtl-arrow-rotation, 0deg)
507
- * --_rtl-arrow-rotation: var(--_rtl-toggle) 0deg
508
- * --_arrow-rotation: var(--_rtl-arrow-rotation, 180deg)
509
- * --_arrow-rotation: 90deg
510
- * --_arrow-rotation: -90deg
511
- * margin-inline-start: var(--v-space-8)
512
- * text-decoration-line: underline
513
- * flex: 1 0 40%
514
- * flex: 1 0 40cqw
515
- * --stack-gap: var(--v-space-24)
516
- * --stack-gap: var(--v-space-16)
517
417
  * ``` */ readonly buttonText: 'button-text';
518
418
  /**
519
419
  * ```css
@@ -521,16 +421,7 @@ export interface ClassNames {
521
421
  * ``` */ readonly capitalize: 'capitalize';
522
422
  /**
523
423
  * ```css
524
- * background-color: var(--_input-background-color, var(--v-color-background-primary))
525
- * border-radius: var(--v-radius-4)
526
- * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))
527
- * transition: box-shadow var(--v-transition-default)
528
- * place-content: center
529
- * width: 1rem
530
- * height: 1rem
531
- * margin-top: .25em
532
- * display: inline-grid
533
- * position: relative
424
+ *
534
425
  * ``` */ readonly checkbox: 'checkbox';
535
426
  /**
536
427
  * ```css
@@ -541,7 +432,6 @@ export interface ClassNames {
541
432
  * width: 100%
542
433
  * margin-inline: auto
543
434
  * container-type: inline-size
544
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
545
435
  * ``` */ readonly container: 'container';
546
436
  /**
547
437
  * ```css
@@ -552,7 +442,6 @@ export interface ClassNames {
552
442
  * width: 100%
553
443
  * margin-inline: auto
554
444
  * container-type: inline-size
555
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
556
445
  * ``` */ readonly containerLg: 'container-lg';
557
446
  /**
558
447
  * ```css
@@ -562,7 +451,6 @@ export interface ClassNames {
562
451
  * width: 100%
563
452
  * margin-inline: auto
564
453
  * container-type: inline-size
565
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
566
454
  * max-width: min((100vw - var(--v-space-pagemargin) * 2) + var(--_outer-margin), 160rem)
567
455
  * ``` */ readonly containerMax: 'container-max';
568
456
  /**
@@ -574,7 +462,6 @@ export interface ClassNames {
574
462
  * width: 100%
575
463
  * margin-inline: auto
576
464
  * container-type: inline-size
577
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
578
465
  * ``` */ readonly containerMd: 'container-md';
579
466
  /**
580
467
  * ```css
@@ -585,7 +472,6 @@ export interface ClassNames {
585
472
  * width: 100%
586
473
  * margin-inline: auto
587
474
  * container-type: inline-size
588
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
589
475
  * ``` */ readonly containerSm: 'container-sm';
590
476
  /**
591
477
  * ```css
@@ -596,7 +482,6 @@ export interface ClassNames {
596
482
  * width: 100%
597
483
  * margin-inline: auto
598
484
  * container-type: inline-size
599
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
600
485
  * ``` */ readonly containerXl: 'container-xl';
601
486
  /**
602
487
  * ```css
@@ -607,28 +492,10 @@ export interface ClassNames {
607
492
  * width: 100%
608
493
  * margin-inline: auto
609
494
  * container-type: inline-size
610
- * --_outer-margin: calc(var(--v-space-pagemargin) * 2)
611
495
  * ``` */ readonly containerXs: 'container-xs';
612
496
  /**
613
497
  * ```css
614
- * z-index: var(--v-index-overlay)
615
- * padding-block: var(--v-space-48)
616
- * padding-inline: var(--v-space-24)
617
- * margin: auto
618
- * color: var(--v-color-foreground-primary)
619
- * background-color: var(--v-color-background-secondary)
620
- * width: 100%
621
- * max-width: 100%
622
- * height: fit-content
623
- * max-height: calc(100vh + -1 * min(2rem, 20vh))
624
- * margin-bottom: 0
625
- * position: fixed
626
- * inset: 0
627
- * overflow-y: auto
628
- * padding-inline: var(--v-space-48)
629
- * max-width: min(31rem, 100vw - 2rem)
630
- * margin-bottom: auto
631
- * padding-top: 0
498
+ *
632
499
  * ``` */ readonly dialog: 'dialog';
633
500
  /**
634
501
  * ```css
@@ -639,7 +506,6 @@ export interface ClassNames {
639
506
  * display: flex
640
507
  * position: absolute
641
508
  * inset-inline-end: 0
642
- * outline-offset: -2px
643
509
  * ``` */ readonly dialogClose: 'dialog__close';
644
510
  /**
645
511
  * ```css
@@ -718,8 +584,6 @@ export interface ClassNames {
718
584
  * ``` */ readonly fontLight: 'font-light';
719
585
  /**
720
586
  * ```css
721
- * --stack-gap: var(--v-space-4)
722
- * --stack-gap: var(--v-space-16)
723
587
  * font-weight: 500
724
588
  * ``` */ readonly fontMedium: 'font-medium';
725
589
  /**
@@ -892,21 +756,14 @@ export interface ClassNames {
892
756
  /**
893
757
  * ```css
894
758
  * font: var(--v-font-heading-1)
895
- * --stack-gap: var(--v-space-8)
896
- * --stack-gap: calc(var(--v-space-8) + 1em)
897
759
  * ``` */ readonly heading1: 'heading-1';
898
760
  /**
899
761
  * ```css
900
762
  * font: var(--v-font-heading-2)
901
- * --stack-gap: var(--v-space-8)
902
- * --stack-gap: calc(var(--v-space-8) + 1em)
903
763
  * ``` */ readonly heading2: 'heading-2';
904
764
  /**
905
765
  * ```css
906
766
  * font: var(--v-font-heading-3)
907
- * --stack-gap: var(--v-space-8)
908
- * --stack-gap: calc(var(--v-space-8) + 1em)
909
- * --stack-gap: var(--v-space-24)
910
767
  * ``` */ readonly heading3: 'heading-3';
911
768
  /**
912
769
  * ```css
@@ -925,17 +782,12 @@ export interface ClassNames {
925
782
  * min-width: max-content
926
783
  * display: inline-flex
927
784
  * position: relative
928
- * opacity: var(--_v-disabled-opacity)
929
- * transform: scale(.95)
930
785
  * --button-accent-color: var(--v-color-foreground-primary)
931
786
  * color: var(--button-accent-color)
932
- * --button-accent-color: var(--v-color-foreground-accent-blue)
933
- * --button-accent-color: var(--v-color-foreground-feedback-red)
934
787
  * border-radius: var(--v-radius-full)
935
788
  * flex-shrink: 0
936
789
  * width: 2.5rem
937
790
  * height: 2.5rem
938
- * background-color: color-mix(in lab, var(--background-color, var(--v-color-background-primary)), var(--button-accent-color) var(--_v-color-mix-subtle))
939
791
  * ``` */ readonly iconButtonClear: 'icon-button-clear';
940
792
  /**
941
793
  * ```css
@@ -946,18 +798,11 @@ export interface ClassNames {
946
798
  * min-width: max-content
947
799
  * display: inline-flex
948
800
  * position: relative
949
- * opacity: var(--_v-disabled-opacity)
950
801
  * --button-accent-color: var(--v-color-surface-neutral)
951
802
  * --_color: var(--v-color-foreground-inverted)
952
803
  * --_overlay-rate: 0%
953
804
  * color: var(--_color)
954
805
  * background: color-mix(in oklab, var(--button-accent-color), var(--_color) var(--_overlay-rate))
955
- * --button-accent-color: var(--v-color-surface-accent-blue)
956
- * --_color: var(--v-color-always-white)
957
- * --button-accent-color: var(--v-color-surface-feedback-red)
958
- * background: var(--button-accent-color)
959
- * --_overlay-rate: var(--_v-color-mix-strong)
960
- * transform: scale(.95)
961
806
  * border-radius: var(--v-radius-full)
962
807
  * flex-shrink: 0
963
808
  * width: 2.5rem
@@ -972,15 +817,9 @@ export interface ClassNames {
972
817
  * min-width: max-content
973
818
  * display: inline-flex
974
819
  * position: relative
975
- * opacity: var(--_v-disabled-opacity)
976
820
  * box-shadow: inset 0 0 0 1px var(--button-accent-color)
977
- * color: var(--v-color-foreground-inverted)
978
- * background-color: var(--button-accent-color)
979
- * transform: scale(.95)
980
821
  * --button-accent-color: var(--v-color-foreground-primary)
981
822
  * color: var(--button-accent-color)
982
- * --button-accent-color: var(--v-color-foreground-accent-blue)
983
- * --button-accent-color: var(--v-color-foreground-feedback-red)
984
823
  * border-radius: var(--v-radius-full)
985
824
  * flex-shrink: 0
986
825
  * width: 2.5rem
@@ -988,55 +827,11 @@ export interface ClassNames {
988
827
  * ``` */ readonly iconButtonOutlined: 'icon-button-outlined';
989
828
  /**
990
829
  * ```css
991
- * width: var(--_height)
992
- * min-width: var(--_height)
993
- * height: var(--_height)
994
- * min-height: var(--_height)
995
- * vertical-align: middle
996
- * flex-grow: 0
997
- * flex-shrink: 0
998
- * display: inline-block
999
- * --_height: 5rem
1000
- * --_height: 4rem
1001
- * --_height: 3rem
1002
- * --_height: 2.5rem
1003
- * --_height: 2rem
1004
- * --_height: 1.5rem
1005
- * --_height: 1rem
1006
- * --_height: .75rem
1007
- * --_height: .5rem
1008
- * object-position: 0 -999px
1009
- * mask-size: cover
1010
- * mask-repeat: no-repeat
1011
- * mask-image: var(--mask-url, var(--icon-url))
1012
- * background-color: currentColor
1013
- * transform: scaleX(-1)
830
+ *
1014
831
  * ``` */ readonly iconMask: 'icon-mask';
1015
832
  /**
1016
833
  * ```css
1017
- * margin-inline-start: var(--v-space-8)
1018
- * width: var(--_height)
1019
- * min-width: var(--_height)
1020
- * height: var(--_height)
1021
- * min-height: var(--_height)
1022
- * vertical-align: middle
1023
- * flex-grow: 0
1024
- * flex-shrink: 0
1025
- * display: inline-block
1026
- * --_height: 5rem
1027
- * --_height: 4rem
1028
- * --_height: 3rem
1029
- * --_height: 2.5rem
1030
- * --_height: 2rem
1031
- * --_height: 1.5rem
1032
- * --_height: 1rem
1033
- * --_height: .75rem
1034
- * --_height: .5rem
1035
- * --_y-offset: var(--_dark-toggle) 7
1036
- * fill: currentColor
1037
- * object-fit: cover
1038
- * object-position: 0 calc(var(--_y-offset, 0) * -1 * var(--_height, 0))
1039
- * transform: scaleX(-1)
834
+ *
1040
835
  * ``` */ readonly iconSprite: 'icon-sprite';
1041
836
  /**
1042
837
  * ```css
@@ -1051,38 +846,11 @@ export interface ClassNames {
1051
846
  * ``` */ readonly img: 'img';
1052
847
  /**
1053
848
  * ```css
1054
- * padding: var(--v-space-16)
1055
- * background-color: var(--_input-background-color, var(--v-color-background-primary))
1056
- * border-radius: var(--v-radius-4)
1057
- * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))
1058
- * transition: box-shadow var(--v-transition-default)
1059
- * outline: none
1060
- * height: 3rem
1061
- * width: 100%
1062
- * --_bg-pos-x: var(--_rtl-toggle) left
1063
- * background-image: var(--_icon-chevrondown)
1064
- * background-repeat: no-repeat
1065
- * background-position: center var(--_bg-pos-x, right) var(--v-space-16)
1066
- * background-size: 1rem 1rem
849
+ *
1067
850
  * ``` */ readonly input: 'input';
1068
851
  /**
1069
852
  * ```css
1070
853
  * position: relative
1071
- * --_transform-origin: var(--_rtl-toggle) 100%
1072
- * z-index: 1
1073
- * color: var(--v-color-foreground-secondary)
1074
- * pointer-events: none
1075
- * top: 0
1076
- * transition: transform var(--v-transition-default)
1077
- * transform-origin: var(--_transform-origin, 0)
1078
- * position: absolute
1079
- * inset-inline-start: var(--v-space-16)
1080
- * transform: translateY(5px)scale(.75)
1081
- * color: var(--v-color-foreground-feedback-red)
1082
- * height: 3.5rem
1083
- * padding-top: 1.625rem
1084
- * padding-bottom: .625rem
1085
- * --stack-gap: var(--v-space-32)
1086
854
  * ``` */ readonly inputFloatingLabel: 'input-floating-label';
1087
855
  /**
1088
856
  * ```css
@@ -1135,7 +903,6 @@ export interface ClassNames {
1135
903
  * grid-template-columns: 1fr
1136
904
  * margin-inline: auto
1137
905
  * display: grid
1138
- * margin-inline: var(--v-space-pagemargin)
1139
906
  * --_outer-margin: 0px
1140
907
  * grid-template-columns: 1fr 1fr
1141
908
  * ``` */ readonly layout45: 'layout-4-5';
@@ -1157,7 +924,6 @@ export interface ClassNames {
1157
924
  * grid-template-columns: 1fr
1158
925
  * margin-inline: auto
1159
926
  * display: grid
1160
- * margin-inline: var(--v-space-pagemargin)
1161
927
  * --_outer-margin: 0px
1162
928
  * grid-template-columns: 1fr 1fr
1163
929
  * ``` */ readonly layout54: 'layout-5-4';
@@ -1192,9 +958,7 @@ export interface ClassNames {
1192
958
  * ``` */ readonly linkUnderlined: 'link-underlined';
1193
959
  /**
1194
960
  * ```css
1195
- * list-style-type: revert
1196
- * padding-inline-start: 2rem
1197
- * --stack-gap: var(--v-space-8)
961
+ *
1198
962
  * ``` */ readonly list: 'list';
1199
963
  /**
1200
964
  * ```css
@@ -1326,8 +1090,6 @@ export interface ClassNames {
1326
1090
  * ``` */ readonly mbS: 'mb-s';
1327
1091
  /**
1328
1092
  * ```css
1329
- * --stack-gap: var(--v-space-8)
1330
- * --stack-gap: 0rem
1331
1093
  * font-size: var(--v-font-12-size)
1332
1094
  * line-height: var(--v-font-12-lineheight)
1333
1095
  * letter-spacing: .02em
@@ -1956,17 +1718,7 @@ export interface ClassNames {
1956
1718
  * ``` */ readonly pyS: 'py-s';
1957
1719
  /**
1958
1720
  * ```css
1959
- * background-color: var(--_input-background-color, var(--v-color-background-primary))
1960
- * border-radius: var(--v-radius-4)
1961
- * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-foreground-secondary))
1962
- * transition: box-shadow var(--v-transition-default)
1963
- * place-content: center
1964
- * width: 1rem
1965
- * height: 1rem
1966
- * margin-top: .25em
1967
- * display: inline-grid
1968
- * position: relative
1969
- * border-radius: var(--v-radius-full)
1721
+ *
1970
1722
  * ``` */ readonly radio: 'radio';
1971
1723
  /**
1972
1724
  * ```css
@@ -1985,13 +1737,6 @@ export interface ClassNames {
1985
1737
  * column-gap: .25rem
1986
1738
  * margin-block: 2rem
1987
1739
  * display: flex
1988
- * display: none
1989
- * background-color: var(--v-color-ornament-primary)
1990
- * border-radius: 9999px
1991
- * width: .5rem
1992
- * height: .5rem
1993
- * transition: background-color .2s
1994
- * background-color: var(--v-color-surface-neutral)
1995
1740
  * ``` */ readonly reelIndicators: 'reel-indicators';
1996
1741
  /**
1997
1742
  * ```css
@@ -2007,12 +1752,24 @@ export interface ClassNames {
2007
1752
  * ``` */ readonly rotate90: 'rotate-90';
2008
1753
  /**
2009
1754
  * ```css
2010
- * border-radius: var(--v-radius-4)
1755
+ * border-radius: var(--v-radius-sm)
2011
1756
  * ``` */ readonly rounded: 'rounded';
2012
1757
  /**
2013
1758
  * ```css
2014
1759
  * border-radius: var(--v-radius-full)
2015
1760
  * ``` */ readonly roundedFull: 'rounded-full';
1761
+ /**
1762
+ * ```css
1763
+ * border-radius: var(--v-radius-lg)
1764
+ * ``` */ readonly roundedLg: 'rounded-lg';
1765
+ /**
1766
+ * ```css
1767
+ * border-radius: var(--v-radius-md)
1768
+ * ``` */ readonly roundedMd: 'rounded-md';
1769
+ /**
1770
+ * ```css
1771
+ * border-radius: var(--v-radius-sm)
1772
+ * ``` */ readonly roundedSm: 'rounded-sm';
2016
1773
  /**
2017
1774
  * ```css
2018
1775
  * scale: 1
@@ -2077,22 +1834,7 @@ export interface ClassNames {
2077
1834
  * ``` */ readonly snapY: 'snap-y';
2078
1835
  /**
2079
1836
  * ```css
2080
- * width: 1.5rem
2081
- * height: 1.5rem
2082
- * position: absolute
2083
- * width: 1rem
2084
- * height: 1rem
2085
- * contain: strict
2086
- * appearance: none
2087
- * background: none
2088
- * border: 2px solid
2089
- * border-bottom-color: #0000
2090
- * border-radius: 50%
2091
- * width: 2.5rem
2092
- * height: 2.5rem
2093
- * animation: .7s cubic-bezier(.62, .63, 0, .53) infinite rotate
2094
- * display: inline-flex
2095
- * display: none
1837
+ *
2096
1838
  * ``` */ readonly spinner: 'spinner';
2097
1839
  /**
2098
1840
  * ```css
@@ -2108,64 +1850,47 @@ export interface ClassNames {
2108
1850
  * ``` */ readonly srOnly: 'sr-only';
2109
1851
  /**
2110
1852
  * ```css
2111
- * margin-top: var(--stack-gap)
2112
- * --stack-gap: var(--v-space-16)
1853
+ *
2113
1854
  * ``` */ readonly stack16: 'stack-16';
2114
1855
  /**
2115
1856
  * ```css
2116
- * margin-top: var(--stack-gap)
2117
- * --stack-gap: var(--v-space-24)
1857
+ *
2118
1858
  * ``` */ readonly stack24: 'stack-24';
2119
1859
  /**
2120
1860
  * ```css
2121
- * margin-top: var(--stack-gap)
2122
- * --stack-gap: var(--v-space-32)
1861
+ *
2123
1862
  * ``` */ readonly stack32: 'stack-32';
2124
1863
  /**
2125
1864
  * ```css
2126
- * margin-top: var(--stack-gap)
2127
- * --stack-gap: var(--v-space-4)
1865
+ *
2128
1866
  * ``` */ readonly stack4: 'stack-4';
2129
1867
  /**
2130
1868
  * ```css
2131
- * margin-top: var(--stack-gap)
2132
- * --stack-gap: var(--v-space-48)
1869
+ *
2133
1870
  * ``` */ readonly stack48: 'stack-48';
2134
1871
  /**
2135
1872
  * ```css
2136
- * margin-top: var(--stack-gap)
2137
- * --stack-gap: var(--v-space-64)
1873
+ *
2138
1874
  * ``` */ readonly stack64: 'stack-64';
2139
1875
  /**
2140
1876
  * ```css
2141
- * margin-top: var(--stack-gap)
2142
- * --stack-gap: var(--v-space-8)
1877
+ *
2143
1878
  * ``` */ readonly stack8: 'stack-8';
2144
1879
  /**
2145
1880
  * ```css
2146
- * margin-top: var(--stack-gap)
2147
- * --stack-gap: var(--v-space-l)
1881
+ *
2148
1882
  * ``` */ readonly stackL: 'stack-l';
2149
1883
  /**
2150
1884
  * ```css
2151
- * margin-top: var(--stack-gap)
2152
- * --stack-gap: var(--v-space-m)
1885
+ *
2153
1886
  * ``` */ readonly stackM: 'stack-m';
2154
1887
  /**
2155
1888
  * ```css
2156
- * margin-top: var(--stack-gap)
2157
- * --stack-gap: var(--v-space-s)
1889
+ *
2158
1890
  * ``` */ readonly stackS: 'stack-s';
2159
1891
  /**
2160
1892
  * ```css
2161
- * margin-top: var(--stack-gap)
2162
- * --stack-gap: var(--v-space-16)
2163
- * --stack-gap: var(--v-space-8)
2164
- * --stack-gap: var(--v-space-4)
2165
- * --stack-gap: calc(var(--v-space-8) + 1em)
2166
- * --stack-gap: var(--v-space-24)
2167
- * --stack-gap: 0rem
2168
- * --stack-gap: var(--v-space-32)
1893
+ *
2169
1894
  * ``` */ readonly stackText: 'stack-text';
2170
1895
  /**
2171
1896
  * ```css
@@ -2178,8 +1903,6 @@ export interface ClassNames {
2178
1903
  /**
2179
1904
  * ```css
2180
1905
  * font: var(--v-font-statement-3)
2181
- * --stack-gap: var(--v-space-24)
2182
- * --stack-gap: var(--v-space-32)
2183
1906
  * ``` */ readonly statement3: 'statement-3';
2184
1907
  /**
2185
1908
  * ```css
@@ -2188,17 +1911,7 @@ export interface ClassNames {
2188
1911
  * ``` */ readonly statementSignature: 'statement-signature';
2189
1912
  /**
2190
1913
  * ```css
2191
- * --_background-color: var(--v-color-foreground-tertiary)
2192
- * --_indicator-color: var(--v-color-always-white)
2193
- * appearance: none
2194
- * background-color: var(--_background-color)
2195
- * border-radius: var(--v-radius-full)
2196
- * flex-shrink: 0
2197
- * width: 2.5rem
2198
- * height: 1.5rem
2199
- * padding: .125rem
2200
- * transition: background .25s
2201
- * display: inline-flex
1914
+ *
2202
1915
  * ``` */ readonly switch: 'switch';
2203
1916
  /**
2204
1917
  * ```css
@@ -2275,10 +1988,6 @@ export interface ClassNames {
2275
1988
  * ``` */ readonly textStart: 'text-start';
2276
1989
  /**
2277
1990
  * ```css
2278
- * --stack-gap: var(--v-space-8)
2279
- * --stack-gap: var(--v-space-4)
2280
- * --stack-gap: var(--v-space-24)
2281
- * --stack-gap: var(--v-space-16)
2282
1991
  * font-size: var(--v-font-title-20-size)
2283
1992
  * line-height: var(--v-font-title-20-lineheight)
2284
1993
  * font-size: var(--v-font-20-size)
@@ -2286,8 +1995,6 @@ export interface ClassNames {
2286
1995
  * ``` */ readonly title20: 'title-20';
2287
1996
  /**
2288
1997
  * ```css
2289
- * --stack-gap: var(--v-space-4)
2290
- * --stack-gap: var(--v-space-16)
2291
1998
  * font-size: var(--v-font-title-24-size)
2292
1999
  * line-height: var(--v-font-title-24-lineheight)
2293
2000
  * font-size: var(--v-font-24-size)
@@ -2315,44 +2022,15 @@ export interface ClassNames {
2315
2022
  * ``` */ readonly uppercase: 'uppercase';
2316
2023
  /**
2317
2024
  * ```css
2318
- * padding: var(--v-space-16)
2319
- * background-color: var(--_input-background-color, var(--v-color-background-primary))
2320
- * border-radius: var(--v-radius-4)
2321
- * box-shadow: inset 0 0 0 var(--_input-border-size, 1px) var(--_input-border-color, var(--v-color-ornament-primary))
2322
- * transition: box-shadow var(--v-transition-default)
2323
- * outline: none
2324
- * height: 3rem
2325
- * width: 100%
2326
- * --_bg-pos-x: var(--_rtl-toggle) left
2327
- * background-image: var(--_icon-chevrondown)
2328
- * background-repeat: no-repeat
2329
- * background-position: center var(--_bg-pos-x, right) var(--v-space-16)
2330
- * background-size: 1rem 1rem
2025
+ *
2331
2026
  * ``` */ readonly vInput: 'v-input';
2332
2027
  /**
2333
2028
  * ```css
2334
2029
  * position: relative
2335
- * --_transform-origin: var(--_rtl-toggle) 100%
2336
- * z-index: 1
2337
- * color: var(--v-color-foreground-secondary)
2338
- * pointer-events: none
2339
- * top: 0
2340
- * transition: transform var(--v-transition-default)
2341
- * transform-origin: var(--_transform-origin, 0)
2342
- * position: absolute
2343
- * inset-inline-start: var(--v-space-16)
2344
- * transform: translateY(5px)scale(.75)
2345
- * color: var(--v-color-foreground-feedback-red)
2346
- * height: 3.5rem
2347
- * padding-top: 1.625rem
2348
- * padding-bottom: .625rem
2349
- * --stack-gap: var(--v-space-32)
2350
2030
  * ``` */ readonly vInputFloatingLabel: 'v-input-floating-label';
2351
2031
  /**
2352
2032
  * ```css
2353
- * flex-direction: column
2354
- * display: inline-flex
2355
- * margin-top: var(--v-space-8)
2033
+ *
2356
2034
  * ``` */ readonly vLabel: 'v-label';
2357
2035
  /**
2358
2036
  * ```css
@@ -2420,31 +2098,7 @@ export interface ClassNames {
2420
2098
  * ``` */ readonly wXs: 'w-xs';
2421
2099
  /**
2422
2100
  * ```css
2423
- * width: var(--_height)
2424
- * min-width: var(--_height)
2425
- * height: var(--_height)
2426
- * min-height: var(--_height)
2427
- * vertical-align: middle
2428
- * flex-grow: 0
2429
- * flex-shrink: 0
2430
- * display: inline-block
2431
- * --_height: 5rem
2432
- * --_height: 4rem
2433
- * --_height: 3rem
2434
- * --_height: 2.5rem
2435
- * --_height: 2rem
2436
- * --_height: 1.5rem
2437
- * --_height: 1rem
2438
- * --_height: .75rem
2439
- * --_height: .5rem
2440
- * object-position: 0 -999px
2441
- * mask-size: cover
2442
- * mask-repeat: no-repeat
2443
- * width: calc(var(--_height) * 13)
2444
- * min-width: calc(var(--_height) * 13)
2445
- * mask-size: contain
2446
- * mask-image: var(--mask-url, var(--icon-url))
2447
- * background-color: currentColor
2101
+ *
2448
2102
  * ``` */ readonly wordmark: 'wordmark';
2449
2103
  /**
2450
2104
  * ```css