@seed-design/css 0.0.3 → 0.0.5

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 (62) hide show
  1. package/README.md +2 -0
  2. package/all.css +232 -215
  3. package/all.min.css +1 -1
  4. package/package.json +2 -1
  5. package/recipes/action-button.css +42 -40
  6. package/recipes/action-button.d.ts +1 -3
  7. package/recipes/action-button.mjs +4 -14
  8. package/recipes/action-chip.css +12 -10
  9. package/recipes/action-chip.d.ts +1 -3
  10. package/recipes/action-chip.mjs +4 -14
  11. package/recipes/action-sheet-item.css +5 -5
  12. package/recipes/action-sheet-item.d.ts +1 -3
  13. package/recipes/action-sheet-item.mjs +4 -14
  14. package/recipes/badge.css +31 -33
  15. package/recipes/badge.d.ts +1 -7
  16. package/recipes/badge.mjs +4 -27
  17. package/recipes/control-chip.css +14 -12
  18. package/recipes/control-chip.d.ts +1 -3
  19. package/recipes/control-chip.mjs +4 -14
  20. package/recipes/extended-action-sheet-item.css +6 -6
  21. package/recipes/extended-action-sheet-item.d.ts +1 -3
  22. package/recipes/extended-action-sheet-item.mjs +4 -14
  23. package/recipes/extended-fab.css +12 -12
  24. package/recipes/extended-fab.d.ts +1 -3
  25. package/recipes/extended-fab.mjs +4 -14
  26. package/recipes/fab.css +5 -5
  27. package/recipes/fab.d.ts +1 -3
  28. package/recipes/fab.mjs +4 -14
  29. package/recipes/help-bubble.css +2 -2
  30. package/recipes/link-content.css +9 -6
  31. package/recipes/link-content.d.ts +1 -3
  32. package/recipes/link-content.mjs +4 -14
  33. package/recipes/manner-temp-badge.css +7 -7
  34. package/recipes/manner-temp-badge.d.ts +1 -3
  35. package/recipes/manner-temp-badge.mjs +4 -14
  36. package/recipes/reaction-button.css +17 -17
  37. package/recipes/reaction-button.d.ts +1 -3
  38. package/recipes/reaction-button.mjs +4 -14
  39. package/recipes/select-box-group.css +1 -1
  40. package/recipes/select-box-group.d.ts +1 -3
  41. package/recipes/select-box-group.mjs +4 -14
  42. package/recipes/skeleton.css +6 -6
  43. package/recipes/skeleton.d.ts +1 -3
  44. package/recipes/skeleton.mjs +4 -14
  45. package/recipes/snackbar-region.css +1 -1
  46. package/recipes/snackbar-region.d.ts +1 -3
  47. package/recipes/snackbar-region.mjs +4 -14
  48. package/recipes/text.css +46 -26
  49. package/recipes/text.d.ts +2 -4
  50. package/recipes/text.mjs +8 -14
  51. package/recipes/toggle-button.css +24 -24
  52. package/recipes/toggle-button.d.ts +1 -3
  53. package/recipes/toggle-button.mjs +4 -14
  54. package/recipes/visually-hidden.css +1 -1
  55. package/recipes/visually-hidden.d.ts +1 -3
  56. package/recipes/visually-hidden.mjs +4 -14
  57. package/vars/component/badge.d.ts +7 -26
  58. package/vars/component/badge.mjs +7 -26
  59. package/vars/component/help-bubble.d.ts +4 -1
  60. package/vars/component/help-bubble.mjs +4 -1
  61. package/vars/component/typography.d.ts +36 -0
  62. package/vars/component/typography.mjs +36 -0
package/all.css CHANGED
@@ -753,7 +753,7 @@
753
753
  box-shadow: 0 0 0 4px var(--seed-color-bg-layer-default);
754
754
  }
755
755
 
756
- .seed-action-button__root {
756
+ .seed-action-button {
757
757
  box-sizing: border-box;
758
758
  cursor: pointer;
759
759
  text-transform: none;
@@ -768,20 +768,20 @@
768
768
  display: inline-flex;
769
769
  }
770
770
 
771
- .seed-action-button__root:is(:focus, [data-focus]) {
771
+ .seed-action-button:is(:focus, [data-focus]) {
772
772
  outline: none;
773
773
  }
774
774
 
775
- .seed-action-button__root:is(:disabled, [disabled], [data-disabled]) {
775
+ .seed-action-button:is(:disabled, [disabled], [data-disabled]) {
776
776
  cursor: not-allowed;
777
777
  }
778
778
 
779
- .seed-action-button__root {
779
+ .seed-action-button {
780
780
  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
781
781
  font-weight: var(--seed-font-weight-bold);
782
782
  }
783
783
 
784
- .seed-action-button__root--variant_brandSolid {
784
+ .seed-action-button--variant_brandSolid {
785
785
  background: var(--seed-color-bg-brand-solid);
786
786
  color: var(--seed-color-palette-static-white);
787
787
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -791,11 +791,11 @@
791
791
  --range-color: var(--seed-color-palette-static-white);
792
792
  }
793
793
 
794
- .seed-action-button__root--variant_brandSolid:is(:active, [data-active]) {
794
+ .seed-action-button--variant_brandSolid:is(:active, [data-active]) {
795
795
  background: var(--seed-color-bg-brand-solid-pressed);
796
796
  }
797
797
 
798
- .seed-action-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
798
+ .seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
799
799
  background: var(--seed-color-bg-disabled);
800
800
  color: var(--seed-color-fg-disabled);
801
801
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -803,11 +803,11 @@
803
803
  --seed-icon-color: var(--seed-color-fg-disabled);
804
804
  }
805
805
 
806
- .seed-action-button__root--variant_brandSolid[data-loading] {
806
+ .seed-action-button--variant_brandSolid[data-loading] {
807
807
  background: var(--seed-color-bg-brand-solid-pressed);
808
808
  }
809
809
 
810
- .seed-action-button__root--variant_neutralSolid {
810
+ .seed-action-button--variant_neutralSolid {
811
811
  background: var(--seed-color-bg-neutral-inverted);
812
812
  color: var(--seed-color-fg-neutral-inverted);
813
813
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
@@ -817,11 +817,11 @@
817
817
  --range-color: var(--seed-color-palette-static-white);
818
818
  }
819
819
 
820
- .seed-action-button__root--variant_neutralSolid:is(:active, [data-active]) {
820
+ .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
821
821
  background: var(--seed-color-bg-neutral-inverted-pressed);
822
822
  }
823
823
 
824
- .seed-action-button__root--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
824
+ .seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
825
825
  background: var(--seed-color-bg-disabled);
826
826
  color: var(--seed-color-fg-disabled);
827
827
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -829,11 +829,11 @@
829
829
  --seed-icon-color: var(--seed-color-fg-disabled);
830
830
  }
831
831
 
832
- .seed-action-button__root--variant_neutralSolid[data-loading] {
832
+ .seed-action-button--variant_neutralSolid[data-loading] {
833
833
  background: var(--seed-color-bg-neutral-inverted-pressed);
834
834
  }
835
835
 
836
- .seed-action-button__root--variant_neutralWeak {
836
+ .seed-action-button--variant_neutralWeak {
837
837
  background: var(--seed-color-bg-neutral-weak);
838
838
  color: var(--seed-color-fg-neutral);
839
839
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
@@ -843,11 +843,11 @@
843
843
  --range-color: var(--seed-color-fg-neutral);
844
844
  }
845
845
 
846
- .seed-action-button__root--variant_neutralWeak:is(:active, [data-active]) {
846
+ .seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
847
847
  background: var(--seed-color-bg-neutral-weak-pressed);
848
848
  }
849
849
 
850
- .seed-action-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
850
+ .seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
851
851
  background: var(--seed-color-bg-disabled);
852
852
  color: var(--seed-color-fg-disabled);
853
853
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -855,11 +855,11 @@
855
855
  --seed-icon-color: var(--seed-color-fg-disabled);
856
856
  }
857
857
 
858
- .seed-action-button__root--variant_neutralWeak[data-loading] {
858
+ .seed-action-button--variant_neutralWeak[data-loading] {
859
859
  background: var(--seed-color-bg-neutral-weak-pressed);
860
860
  }
861
861
 
862
- .seed-action-button__root--variant_criticalSolid {
862
+ .seed-action-button--variant_criticalSolid {
863
863
  background: var(--seed-color-bg-critical-solid);
864
864
  color: var(--seed-color-palette-static-white);
865
865
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
@@ -869,11 +869,11 @@
869
869
  --range-color: var(--seed-color-palette-static-white);
870
870
  }
871
871
 
872
- .seed-action-button__root--variant_criticalSolid:is(:active, [data-active]) {
872
+ .seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
873
873
  background: var(--seed-color-bg-critical-solid-pressed);
874
874
  }
875
875
 
876
- .seed-action-button__root--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
876
+ .seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
877
877
  background: var(--seed-color-bg-disabled);
878
878
  color: var(--seed-color-fg-disabled);
879
879
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
@@ -881,11 +881,11 @@
881
881
  --seed-icon-color: var(--seed-color-fg-disabled);
882
882
  }
883
883
 
884
- .seed-action-button__root--variant_criticalSolid[data-loading] {
884
+ .seed-action-button--variant_criticalSolid[data-loading] {
885
885
  background: var(--seed-color-bg-critical-solid-pressed);
886
886
  }
887
887
 
888
- .seed-action-button__root--variant_brandOutline {
888
+ .seed-action-button--variant_brandOutline {
889
889
  background: var(--seed-color-bg-layer-default);
890
890
  border-style: solid;
891
891
  border-width: 1px;
@@ -898,11 +898,11 @@
898
898
  --range-color: var(--seed-color-bg-brand-solid);
899
899
  }
900
900
 
901
- .seed-action-button__root--variant_brandOutline:is(:active, [data-active]) {
901
+ .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
902
902
  background: var(--seed-color-bg-layer-default-pressed);
903
903
  }
904
904
 
905
- .seed-action-button__root--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
905
+ .seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
906
906
  background: var(--seed-color-bg-layer-default);
907
907
  border-color: var(--seed-color-stroke-neutral);
908
908
  color: var(--seed-color-fg-disabled);
@@ -911,11 +911,11 @@
911
911
  --seed-icon-color: var(--seed-color-fg-disabled);
912
912
  }
913
913
 
914
- .seed-action-button__root--variant_brandOutline[data-loading] {
914
+ .seed-action-button--variant_brandOutline[data-loading] {
915
915
  background: var(--seed-color-bg-layer-default);
916
916
  }
917
917
 
918
- .seed-action-button__root--variant_neutralOutline {
918
+ .seed-action-button--variant_neutralOutline {
919
919
  background: var(--seed-color-bg-layer-default);
920
920
  border-style: solid;
921
921
  border-width: 1px;
@@ -928,11 +928,11 @@
928
928
  --range-color: var(--seed-color-fg-neutral);
929
929
  }
930
930
 
931
- .seed-action-button__root--variant_neutralOutline:is(:active, [data-active]) {
931
+ .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
932
932
  background: var(--seed-color-bg-layer-default-pressed);
933
933
  }
934
934
 
935
- .seed-action-button__root--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
935
+ .seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
936
936
  background: var(--seed-color-bg-layer-default);
937
937
  border-color: var(--seed-color-stroke-neutral);
938
938
  color: var(--seed-color-fg-disabled);
@@ -941,11 +941,11 @@
941
941
  --seed-icon-color: var(--seed-color-fg-disabled);
942
942
  }
943
943
 
944
- .seed-action-button__root--variant_neutralOutline[data-loading] {
944
+ .seed-action-button--variant_neutralOutline[data-loading] {
945
945
  background: var(--seed-color-bg-layer-default);
946
946
  }
947
947
 
948
- .seed-action-button__root--size_xsmall {
948
+ .seed-action-button--size_xsmall {
949
949
  height: var(--seed-dimension-x8);
950
950
  border-radius: var(--seed-radius-full);
951
951
  --size: 14px;
@@ -955,7 +955,7 @@
955
955
  --seed-icon-size: var(--seed-dimension-x3_5);
956
956
  }
957
957
 
958
- .seed-action-button__root--size_small {
958
+ .seed-action-button--size_small {
959
959
  height: var(--seed-dimension-x9);
960
960
  border-radius: var(--seed-radius-r2);
961
961
  --size: 14px;
@@ -965,7 +965,7 @@
965
965
  --seed-icon-size: var(--seed-dimension-x4);
966
966
  }
967
967
 
968
- .seed-action-button__root--size_medium {
968
+ .seed-action-button--size_medium {
969
969
  height: var(--seed-dimension-x10);
970
970
  border-radius: var(--seed-radius-r2);
971
971
  --size: 16px;
@@ -975,7 +975,7 @@
975
975
  --seed-icon-size: 18px;
976
976
  }
977
977
 
978
- .seed-action-button__root--size_large {
978
+ .seed-action-button--size_large {
979
979
  height: var(--seed-dimension-x13);
980
980
  border-radius: var(--seed-radius-r3);
981
981
  --size: 18px;
@@ -985,98 +985,98 @@
985
985
  --seed-icon-size: 22px;
986
986
  }
987
987
 
988
- .seed-action-button__root--size_xsmall-layout_withText {
988
+ .seed-action-button--size_xsmall-layout_withText {
989
989
  gap: var(--seed-dimension-x1);
990
990
  padding-inline: var(--seed-dimension-x3_5);
991
991
  padding-block: var(--seed-dimension-x1_5);
992
992
  font-size: var(--seed-font-size-t4);
993
993
  }
994
994
 
995
- .seed-action-button__root--size_xsmall-layout_iconOnly {
995
+ .seed-action-button--size_xsmall-layout_iconOnly {
996
996
  min-width: var(--seed-dimension-x8);
997
997
  padding-inline: var(--seed-dimension-x1_5);
998
998
  padding-block: var(--seed-dimension-x1_5);
999
999
  }
1000
1000
 
1001
- .seed-action-button__root--size_small-layout_withText {
1001
+ .seed-action-button--size_small-layout_withText {
1002
1002
  gap: var(--seed-dimension-x1);
1003
1003
  padding-inline: var(--seed-dimension-x3_5);
1004
1004
  padding-block: var(--seed-dimension-x2);
1005
1005
  font-size: var(--seed-font-size-t4);
1006
1006
  }
1007
1007
 
1008
- .seed-action-button__root--size_small-layout_iconOnly {
1008
+ .seed-action-button--size_small-layout_iconOnly {
1009
1009
  min-width: var(--seed-dimension-x9);
1010
1010
  padding-inline: var(--seed-dimension-x2);
1011
1011
  padding-block: var(--seed-dimension-x2);
1012
1012
  }
1013
1013
 
1014
- .seed-action-button__root--size_medium-layout_withText {
1014
+ .seed-action-button--size_medium-layout_withText {
1015
1015
  gap: var(--seed-dimension-x1);
1016
1016
  padding-inline: var(--seed-dimension-x4);
1017
1017
  padding-block: var(--seed-dimension-x2_5);
1018
1018
  font-size: var(--seed-font-size-t4);
1019
1019
  }
1020
1020
 
1021
- .seed-action-button__root--size_medium-layout_iconOnly {
1021
+ .seed-action-button--size_medium-layout_iconOnly {
1022
1022
  min-width: var(--seed-dimension-x10);
1023
1023
  padding-inline: var(--seed-dimension-x2_5);
1024
1024
  padding-block: var(--seed-dimension-x2_5);
1025
1025
  }
1026
1026
 
1027
- .seed-action-button__root--size_large-layout_withText {
1027
+ .seed-action-button--size_large-layout_withText {
1028
1028
  gap: var(--seed-dimension-x2);
1029
1029
  padding-inline: var(--seed-dimension-x5);
1030
1030
  padding-block: var(--seed-dimension-x3_5);
1031
1031
  font-size: var(--seed-font-size-t6);
1032
1032
  }
1033
1033
 
1034
- .seed-action-button__root--size_large-layout_iconOnly {
1034
+ .seed-action-button--size_large-layout_iconOnly {
1035
1035
  min-width: var(--seed-dimension-x13);
1036
1036
  padding-inline: var(--seed-dimension-x3_5);
1037
1037
  padding-block: var(--seed-dimension-x3_5);
1038
1038
  }
1039
1039
 
1040
- .seed-toggle-button__root {
1040
+ .seed-toggle-button {
1041
1041
  box-sizing: border-box;
1042
1042
  cursor: pointer;
1043
1043
  text-transform: none;
1044
1044
  -webkit-font-smoothing: antialiased;
1045
1045
  -moz-osx-font-smoothing: grayscale;
1046
- font-family: inherit;
1047
- font-weight: var(--seed-font-weight-bold);
1048
1046
  border: none;
1049
1047
  flex-shrink: 0;
1050
1048
  justify-content: center;
1051
1049
  align-items: center;
1050
+ font-family: inherit;
1052
1051
  text-decoration: none;
1053
1052
  display: inline-flex;
1054
1053
  }
1055
1054
 
1056
- .seed-toggle-button__root:is(:focus, [data-focus]) {
1055
+ .seed-toggle-button:is(:focus, [data-focus]) {
1057
1056
  outline: none;
1058
1057
  }
1059
1058
 
1060
- .seed-toggle-button__root:is(:disabled, [disabled], [data-disabled]) {
1059
+ .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
1061
1060
  cursor: not-allowed;
1062
1061
  }
1063
1062
 
1064
- .seed-toggle-button__root {
1063
+ .seed-toggle-button {
1065
1064
  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
1065
+ font-weight: var(--seed-font-weight-bold);
1066
1066
  }
1067
1067
 
1068
- .seed-toggle-button__root--variant_brandSolid {
1068
+ .seed-toggle-button--variant_brandSolid {
1069
1069
  background: var(--seed-color-bg-brand-solid);
1070
1070
  color: var(--seed-color-palette-static-white);
1071
1071
  --track-color: var(--seed-color-palette-static-white-alpha-200);
1072
1072
  --range-color: var(--seed-color-palette-static-white);
1073
1073
  }
1074
1074
 
1075
- .seed-toggle-button__root--variant_brandSolid:is(:active, [data-active]) {
1075
+ .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
1076
1076
  background: var(--seed-color-bg-brand-solid-pressed);
1077
1077
  }
1078
1078
 
1079
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
1079
+ .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
1080
1080
  background: var(--seed-color-bg-neutral-weak);
1081
1081
  color: var(--seed-color-fg-neutral);
1082
1082
  --track-color: var(--seed-color-palette-gray-500);
@@ -1085,42 +1085,42 @@
1085
1085
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1086
1086
  }
1087
1087
 
1088
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1088
+ .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1089
1089
  background: var(--seed-color-bg-neutral-weak-pressed);
1090
1090
  }
1091
1091
 
1092
- .seed-toggle-button__root--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
1092
+ .seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
1093
1093
  background: var(--seed-color-bg-disabled);
1094
1094
  color: var(--seed-color-fg-disabled);
1095
1095
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1096
1096
  --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1097
1097
  }
1098
1098
 
1099
- .seed-toggle-button__root--variant_brandSolid[data-loading] {
1099
+ .seed-toggle-button--variant_brandSolid[data-loading] {
1100
1100
  background: var(--seed-color-bg-brand-solid-pressed);
1101
1101
  }
1102
1102
 
1103
- .seed-toggle-button__root--variant_brandSolid:is([aria-pressed="true"], [data-pressed])[data-loading] {
1103
+ .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed])[data-loading] {
1104
1104
  background: var(--seed-color-bg-neutral-weak-pressed);
1105
1105
  }
1106
1106
 
1107
- .seed-toggle-button__root--variant_brandSolid {
1107
+ .seed-toggle-button--variant_brandSolid {
1108
1108
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1109
1109
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1110
1110
  }
1111
1111
 
1112
- .seed-toggle-button__root--variant_neutralWeak {
1112
+ .seed-toggle-button--variant_neutralWeak {
1113
1113
  background: var(--seed-color-bg-neutral-weak);
1114
1114
  color: var(--seed-color-fg-neutral);
1115
1115
  --track-color: var(--seed-color-palette-gray-500);
1116
1116
  --range-color: var(--seed-color-fg-neutral);
1117
1117
  }
1118
1118
 
1119
- .seed-toggle-button__root--variant_neutralWeak:is(:active, [data-active]) {
1119
+ .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
1120
1120
  background: var(--seed-color-bg-neutral-weak-pressed);
1121
1121
  }
1122
1122
 
1123
- .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
1123
+ .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
1124
1124
  background: var(--seed-color-bg-neutral-weak);
1125
1125
  color: var(--seed-color-fg-neutral);
1126
1126
  --track-color: var(--seed-color-palette-gray-500);
@@ -1129,27 +1129,27 @@
1129
1129
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1130
1130
  }
1131
1131
 
1132
- .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1132
+ .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1133
1133
  background: var(--seed-color-bg-neutral-weak-pressed);
1134
1134
  }
1135
1135
 
1136
- .seed-toggle-button__root--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
1136
+ .seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
1137
1137
  background: var(--seed-color-bg-disabled);
1138
1138
  color: var(--seed-color-fg-disabled);
1139
1139
  --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1140
1140
  --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1141
1141
  }
1142
1142
 
1143
- .seed-toggle-button__root--variant_neutralWeak[data-loading], .seed-toggle-button__root--variant_neutralWeak:is([aria-pressed="true"], [data-pressed])[data-loading] {
1143
+ .seed-toggle-button--variant_neutralWeak[data-loading], .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed])[data-loading] {
1144
1144
  background: var(--seed-color-bg-neutral-weak-pressed);
1145
1145
  }
1146
1146
 
1147
- .seed-toggle-button__root--variant_neutralWeak {
1147
+ .seed-toggle-button--variant_neutralWeak {
1148
1148
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1149
1149
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
1150
1150
  }
1151
1151
 
1152
- .seed-toggle-button__root--size_xsmall {
1152
+ .seed-toggle-button--size_xsmall {
1153
1153
  height: var(--seed-dimension-x8);
1154
1154
  border-radius: var(--seed-radius-full);
1155
1155
  gap: var(--seed-dimension-x1);
@@ -1162,7 +1162,7 @@
1162
1162
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1163
1163
  }
1164
1164
 
1165
- .seed-toggle-button__root--size_small {
1165
+ .seed-toggle-button--size_small {
1166
1166
  height: var(--seed-dimension-x9);
1167
1167
  border-radius: var(--seed-radius-full);
1168
1168
  gap: var(--seed-dimension-x1);
@@ -1175,7 +1175,7 @@
1175
1175
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1176
1176
  }
1177
1177
 
1178
- .seed-reaction-button__root {
1178
+ .seed-reaction-button {
1179
1179
  box-sizing: border-box;
1180
1180
  cursor: pointer;
1181
1181
  text-transform: none;
@@ -1190,11 +1190,11 @@
1190
1190
  display: inline-flex;
1191
1191
  }
1192
1192
 
1193
- .seed-reaction-button__root:is(:focus, [data-focus]) {
1193
+ .seed-reaction-button:is(:focus, [data-focus]) {
1194
1194
  outline: none;
1195
1195
  }
1196
1196
 
1197
- .seed-reaction-button__root {
1197
+ .seed-reaction-button {
1198
1198
  transition: background-color var(--seed-duration-d4) var(--seed-timing-function-easing);
1199
1199
  background: var(--seed-color-bg-neutral-weak);
1200
1200
  font-weight: var(--seed-font-weight-medium);
@@ -1206,11 +1206,11 @@
1206
1206
  --seed-count-color: var(--seed-color-fg-neutral);
1207
1207
  }
1208
1208
 
1209
- .seed-reaction-button__root:is(:active, [data-active]) {
1209
+ .seed-reaction-button:is(:active, [data-active]) {
1210
1210
  background: var(--seed-color-bg-neutral-weak-pressed);
1211
1211
  }
1212
1212
 
1213
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed]) {
1213
+ .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
1214
1214
  background: var(--seed-color-bg-layer-default);
1215
1215
  color: var(--seed-color-fg-brand);
1216
1216
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
@@ -1218,11 +1218,11 @@
1218
1218
  --seed-count-color: var(--seed-color-fg-brand);
1219
1219
  }
1220
1220
 
1221
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1221
+ .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
1222
1222
  background: var(--seed-color-bg-layer-default-pressed);
1223
1223
  }
1224
1224
 
1225
- .seed-reaction-button__root:is(:disabled, [disabled], [data-disabled]) {
1225
+ .seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
1226
1226
  cursor: not-allowed;
1227
1227
  background: var(--seed-color-bg-disabled);
1228
1228
  color: var(--seed-color-fg-disabled);
@@ -1231,45 +1231,45 @@
1231
1231
  --seed-count-color: var(--seed-color-fg-disabled);
1232
1232
  }
1233
1233
 
1234
- .seed-reaction-button__root[data-loading] {
1234
+ .seed-reaction-button[data-loading] {
1235
1235
  background: var(--seed-color-bg-neutral-weak-pressed);
1236
1236
  }
1237
1237
 
1238
- .seed-reaction-button__root:is([aria-pressed="true"], [data-pressed])[data-loading] {
1238
+ .seed-reaction-button:is([aria-pressed="true"], [data-pressed])[data-loading] {
1239
1239
  background: var(--seed-color-bg-layer-default-pressed);
1240
1240
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
1241
1241
  --track-color: var(--seed-color-palette-carrot-200);
1242
1242
  --range-color: var(--seed-color-fg-brand);
1243
1243
  }
1244
1244
 
1245
- .seed-reaction-button__root--size_xsmall {
1245
+ .seed-reaction-button--size_xsmall {
1246
1246
  height: var(--seed-dimension-x8);
1247
- border-radius: var(--seed-radius-full);
1248
- gap: var(--seed-dimension-x1);
1249
1247
  padding-inline: var(--seed-dimension-x3);
1250
1248
  padding-block: var(--seed-dimension-x1_5);
1249
+ gap: var(--seed-dimension-x1);
1250
+ border-radius: var(--seed-radius-full);
1251
1251
  font-size: var(--seed-font-size-t3);
1252
1252
  line-height: var(--seed-line-height-t3);
1253
1253
  --size: 14px;
1254
1254
  --thickness: 2px;
1255
- --seed-prefix-icon-size: 18px;
1256
1255
  --seed-count-font-size: var(--seed-font-size-t3);
1257
1256
  --seed-count-line-height: var(--seed-line-height-t3);
1257
+ --seed-prefix-icon-size: 18px;
1258
1258
  }
1259
1259
 
1260
- .seed-reaction-button__root--size_small {
1260
+ .seed-reaction-button--size_small {
1261
1261
  height: var(--seed-dimension-x9);
1262
- border-radius: var(--seed-radius-full);
1263
- gap: var(--seed-dimension-x1);
1264
1262
  padding-inline: var(--seed-dimension-x3_5);
1265
1263
  padding-block: var(--seed-dimension-x2);
1264
+ gap: var(--seed-dimension-x1);
1265
+ border-radius: var(--seed-radius-full);
1266
1266
  font-size: var(--seed-font-size-t3);
1267
1267
  line-height: var(--seed-line-height-t3);
1268
1268
  --size: 14px;
1269
1269
  --thickness: 2px;
1270
- --seed-prefix-icon-size: 18px;
1271
1270
  --seed-count-font-size: var(--seed-font-size-t3);
1272
1271
  --seed-count-line-height: var(--seed-line-height-t3);
1272
+ --seed-prefix-icon-size: 18px;
1273
1273
  }
1274
1274
 
1275
1275
  .seed-bottom-sheet__positioner {
@@ -1549,7 +1549,7 @@
1549
1549
  background-color: var(--seed-color-bg-layer-floating-pressed);
1550
1550
  }
1551
1551
 
1552
- .seed-action-sheet-item__root {
1552
+ .seed-action-sheet-item {
1553
1553
  background-color: var(--seed-color-bg-layer-floating);
1554
1554
  min-height: 50px;
1555
1555
  padding-inline: var(--seed-dimension-spacing-x-global-gutter);
@@ -1563,11 +1563,11 @@
1563
1563
  position: relative;
1564
1564
  }
1565
1565
 
1566
- .seed-action-sheet-item__root:is(:active, [data-active]) {
1566
+ .seed-action-sheet-item:is(:active, [data-active]) {
1567
1567
  background-color: var(--seed-color-bg-layer-floating-pressed);
1568
1568
  }
1569
1569
 
1570
- .seed-action-sheet-item__root:after {
1570
+ .seed-action-sheet-item:after {
1571
1571
  content: "";
1572
1572
  left: var(--seed-dimension-spacing-x-global-gutter);
1573
1573
  right: var(--seed-dimension-spacing-x-global-gutter);
@@ -1578,11 +1578,11 @@
1578
1578
  bottom: 0;
1579
1579
  }
1580
1580
 
1581
- .seed-action-sheet-item__root--tone_neutral {
1581
+ .seed-action-sheet-item--tone_neutral {
1582
1582
  color: var(--seed-color-fg-neutral);
1583
1583
  }
1584
1584
 
1585
- .seed-action-sheet-item__root--tone_critical {
1585
+ .seed-action-sheet-item--tone_critical {
1586
1586
  color: var(--seed-color-fg-critical);
1587
1587
  }
1588
1588
 
@@ -1717,7 +1717,7 @@
1717
1717
  background-color: var(--seed-color-bg-neutral-weak-pressed);
1718
1718
  }
1719
1719
 
1720
- .seed-extended-action-sheet-item__root {
1720
+ .seed-extended-action-sheet-item {
1721
1721
  background-color: var(--seed-color-bg-neutral-weak);
1722
1722
  min-height: 52px;
1723
1723
  padding-inline: var(--seed-dimension-x4);
@@ -1732,29 +1732,29 @@
1732
1732
  display: flex;
1733
1733
  }
1734
1734
 
1735
- .seed-extended-action-sheet-item__root:is(:active, [data-active]) {
1735
+ .seed-extended-action-sheet-item:is(:active, [data-active]) {
1736
1736
  background-color: var(--seed-color-bg-neutral-weak-pressed);
1737
1737
  }
1738
1738
 
1739
- .seed-extended-action-sheet-item__root:last-child {
1739
+ .seed-extended-action-sheet-item:last-child {
1740
1740
  box-shadow: none;
1741
1741
  }
1742
1742
 
1743
- .seed-extended-action-sheet-item__root {
1743
+ .seed-extended-action-sheet-item {
1744
1744
  --seed-prefix-icon-size: 22px;
1745
1745
  }
1746
1746
 
1747
- .seed-extended-action-sheet-item__root--tone_neutral {
1747
+ .seed-extended-action-sheet-item--tone_neutral {
1748
1748
  color: var(--seed-color-fg-neutral);
1749
1749
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1750
1750
  }
1751
1751
 
1752
- .seed-extended-action-sheet-item__root--tone_critical {
1752
+ .seed-extended-action-sheet-item--tone_critical {
1753
1753
  color: var(--seed-color-fg-critical);
1754
1754
  --seed-prefix-icon-color: var(--seed-color-fg-critical);
1755
1755
  }
1756
1756
 
1757
- .seed-fab__root {
1757
+ .seed-fab {
1758
1758
  box-sizing: border-box;
1759
1759
  cursor: pointer;
1760
1760
  text-transform: none;
@@ -1768,15 +1768,15 @@
1768
1768
  display: inline-flex;
1769
1769
  }
1770
1770
 
1771
- .seed-fab__root:is(:focus, [data-focus]) {
1771
+ .seed-fab:is(:focus, [data-focus]) {
1772
1772
  outline: none;
1773
1773
  }
1774
1774
 
1775
- .seed-fab__root:is(:disabled, [disabled], [data-disabled]) {
1775
+ .seed-fab:is(:disabled, [disabled], [data-disabled]) {
1776
1776
  cursor: not-allowed;
1777
1777
  }
1778
1778
 
1779
- .seed-fab__root {
1779
+ .seed-fab {
1780
1780
  background: var(--seed-color-bg-layer-floating);
1781
1781
  border-radius: var(--seed-radius-full);
1782
1782
  --seed-icon-size: 22px;
@@ -1786,11 +1786,11 @@
1786
1786
  box-shadow: 0 2px 6px #00000026;
1787
1787
  }
1788
1788
 
1789
- .seed-fab__root:is(:active, [data-active]) {
1789
+ .seed-fab:is(:active, [data-active]) {
1790
1790
  background: var(--seed-color-bg-layer-floating-pressed);
1791
1791
  }
1792
1792
 
1793
- .seed-extended-fab__root {
1793
+ .seed-extended-fab {
1794
1794
  box-sizing: border-box;
1795
1795
  cursor: pointer;
1796
1796
  text-transform: none;
@@ -1805,46 +1805,46 @@
1805
1805
  display: inline-flex;
1806
1806
  }
1807
1807
 
1808
- .seed-extended-fab__root:is(:focus, [data-focus]) {
1808
+ .seed-extended-fab:is(:focus, [data-focus]) {
1809
1809
  outline: none;
1810
1810
  }
1811
1811
 
1812
- .seed-extended-fab__root:is(:disabled, [disabled], [data-disabled]) {
1812
+ .seed-extended-fab:is(:disabled, [disabled], [data-disabled]) {
1813
1813
  cursor: not-allowed;
1814
1814
  }
1815
1815
 
1816
- .seed-extended-fab__root {
1816
+ .seed-extended-fab {
1817
1817
  border-radius: var(--seed-radius-full);
1818
1818
  box-shadow: 0 2px 6px #00000026;
1819
1819
  }
1820
1820
 
1821
- .seed-extended-fab__root--variant_neutralSolid {
1821
+ .seed-extended-fab--variant_neutralSolid {
1822
1822
  background: var(--seed-color-bg-neutral-inverted);
1823
1823
  color: var(--seed-color-fg-neutral-inverted);
1824
1824
  }
1825
1825
 
1826
- .seed-extended-fab__root--variant_neutralSolid:is(:active, [data-active]) {
1826
+ .seed-extended-fab--variant_neutralSolid:is(:active, [data-active]) {
1827
1827
  background: var(--seed-color-bg-neutral-inverted-pressed);
1828
1828
  }
1829
1829
 
1830
- .seed-extended-fab__root--variant_neutralSolid {
1830
+ .seed-extended-fab--variant_neutralSolid {
1831
1831
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
1832
1832
  }
1833
1833
 
1834
- .seed-extended-fab__root--variant_layerFloating {
1834
+ .seed-extended-fab--variant_layerFloating {
1835
1835
  background: var(--seed-color-bg-layer-floating);
1836
1836
  color: var(--seed-color-fg-neutral);
1837
1837
  }
1838
1838
 
1839
- .seed-extended-fab__root--variant_layerFloating:is(:active, [data-active]) {
1839
+ .seed-extended-fab--variant_layerFloating:is(:active, [data-active]) {
1840
1840
  background: var(--seed-color-bg-layer-floating-pressed);
1841
1841
  }
1842
1842
 
1843
- .seed-extended-fab__root--variant_layerFloating {
1843
+ .seed-extended-fab--variant_layerFloating {
1844
1844
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1845
1845
  }
1846
1846
 
1847
- .seed-extended-fab__root--size_small {
1847
+ .seed-extended-fab--size_small {
1848
1848
  padding-inline: var(--seed-dimension-x3_5);
1849
1849
  padding-block: var(--seed-dimension-x2_5);
1850
1850
  gap: var(--seed-dimension-x1);
@@ -1855,7 +1855,7 @@
1855
1855
  --seed-prefix-icon-size: 16px;
1856
1856
  }
1857
1857
 
1858
- .seed-extended-fab__root--size_medium {
1858
+ .seed-extended-fab--size_medium {
1859
1859
  padding-inline: var(--seed-dimension-x4);
1860
1860
  padding-block: var(--seed-dimension-x3);
1861
1861
  gap: var(--seed-dimension-x1);
@@ -1866,7 +1866,7 @@
1866
1866
  --seed-prefix-icon-size: 16px;
1867
1867
  }
1868
1868
 
1869
- .seed-badge__root {
1869
+ .seed-badge {
1870
1870
  box-sizing: border-box;
1871
1871
  text-transform: none;
1872
1872
  text-align: start;
@@ -1878,113 +1878,103 @@
1878
1878
  display: inline-flex;
1879
1879
  }
1880
1880
 
1881
- .seed-badge__root--size_medium {
1881
+ .seed-badge--size_medium {
1882
1882
  min-height: var(--seed-dimension-x5);
1883
1883
  padding-inline: var(--seed-dimension-x1_5);
1884
1884
  padding-block: var(--seed-dimension-x0_5);
1885
+ border-radius: var(--seed-radius-r1);
1885
1886
  font-size: var(--seed-font-size-t1);
1886
1887
  line-height: var(--seed-line-height-t1);
1887
1888
  }
1888
1889
 
1889
- .seed-badge__root--size_large {
1890
+ .seed-badge--size_large {
1890
1891
  min-height: var(--seed-dimension-x6);
1891
1892
  padding-inline: var(--seed-dimension-x2);
1892
1893
  padding-block: var(--seed-dimension-x1);
1894
+ border-radius: var(--seed-radius-r1_5);
1893
1895
  font-size: var(--seed-font-size-t2);
1894
1896
  line-height: var(--seed-line-height-t2);
1895
1897
  }
1896
1898
 
1897
- .seed-badge__root--shape_pill {
1898
- border-radius: var(--seed-radius-full);
1899
- }
1900
-
1901
- .seed-badge__root--variant_weak {
1899
+ .seed-badge--variant_weak {
1902
1900
  font-weight: var(--seed-font-weight-medium);
1903
1901
  }
1904
1902
 
1905
- .seed-badge__root--variant_solid, .seed-badge__root--variant_outline {
1903
+ .seed-badge--variant_solid, .seed-badge--variant_outline {
1906
1904
  font-weight: var(--seed-font-weight-bold);
1907
1905
  }
1908
1906
 
1909
- .seed-badge__root--shape_rectangle-size_medium {
1910
- border-radius: var(--seed-radius-r1);
1911
- }
1912
-
1913
- .seed-badge__root--shape_rectangle-size_large {
1914
- border-radius: var(--seed-radius-r1_5);
1915
- }
1916
-
1917
- .seed-badge__root--tone_neutral-variant_weak {
1907
+ .seed-badge--tone_neutral-variant_weak {
1918
1908
  background-color: var(--seed-color-bg-neutral-weak);
1919
- color: var(--seed-color-fg-neutral);
1909
+ color: var(--seed-color-fg-neutral-muted);
1920
1910
  }
1921
1911
 
1922
- .seed-badge__root--tone_neutral-variant_solid {
1923
- background-color: var(--seed-color-bg-neutral-inverted);
1912
+ .seed-badge--tone_neutral-variant_solid {
1913
+ background-color: var(--seed-color-palette-gray-800);
1924
1914
  color: var(--seed-color-fg-neutral-inverted);
1925
1915
  }
1926
1916
 
1927
- .seed-badge__root--tone_neutral-variant_outline {
1917
+ .seed-badge--tone_neutral-variant_outline {
1928
1918
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral);
1929
- color: var(--seed-color-fg-neutral);
1919
+ color: var(--seed-color-fg-neutral-muted);
1930
1920
  }
1931
1921
 
1932
- .seed-badge__root--tone_brand-variant_weak {
1922
+ .seed-badge--tone_brand-variant_weak {
1933
1923
  background-color: var(--seed-color-palette-carrot-100);
1934
1924
  color: var(--seed-color-palette-carrot-900);
1935
1925
  }
1936
1926
 
1937
- .seed-badge__root--tone_brand-variant_solid {
1927
+ .seed-badge--tone_brand-variant_solid {
1938
1928
  background-color: var(--seed-color-bg-brand-solid);
1939
1929
  color: var(--seed-color-palette-static-white);
1940
1930
  }
1941
1931
 
1942
- .seed-badge__root--tone_brand-variant_outline {
1932
+ .seed-badge--tone_brand-variant_outline {
1943
1933
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-brand);
1944
1934
  color: var(--seed-color-fg-brand);
1945
1935
  }
1946
1936
 
1947
- .seed-badge__root--tone_informative-variant_weak {
1937
+ .seed-badge--tone_informative-variant_weak {
1948
1938
  background-color: var(--seed-color-bg-informative-weak);
1949
1939
  color: var(--seed-color-fg-informative-contrast);
1950
1940
  }
1951
1941
 
1952
- .seed-badge__root--tone_informative-variant_solid {
1942
+ .seed-badge--tone_informative-variant_solid {
1953
1943
  background-color: var(--seed-color-bg-informative-solid);
1954
1944
  color: var(--seed-color-palette-static-white);
1955
1945
  }
1956
1946
 
1957
- .seed-badge__root--tone_informative-variant_outline {
1947
+ .seed-badge--tone_informative-variant_outline {
1958
1948
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-informative);
1959
1949
  color: var(--seed-color-fg-informative);
1960
1950
  }
1961
1951
 
1962
- .seed-badge__root--tone_positive-variant_weak {
1952
+ .seed-badge--tone_positive-variant_weak {
1963
1953
  background-color: var(--seed-color-bg-positive-weak);
1964
1954
  color: var(--seed-color-fg-positive-contrast);
1965
1955
  }
1966
1956
 
1967
- .seed-badge__root--tone_positive-variant_solid {
1957
+ .seed-badge--tone_positive-variant_solid {
1968
1958
  background-color: var(--seed-color-bg-positive-solid);
1969
1959
  color: var(--seed-color-palette-static-white);
1970
1960
  }
1971
1961
 
1972
- .seed-badge__root--tone_positive-variant_outline {
1962
+ .seed-badge--tone_positive-variant_outline {
1973
1963
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-positive);
1974
1964
  color: var(--seed-color-fg-positive);
1975
1965
  }
1976
1966
 
1977
- .seed-badge__root--tone_critical-variant_weak {
1967
+ .seed-badge--tone_critical-variant_weak {
1978
1968
  background-color: var(--seed-color-bg-critical-weak);
1979
1969
  color: var(--seed-color-fg-critical-contrast);
1980
1970
  }
1981
1971
 
1982
- .seed-badge__root--tone_critical-variant_solid {
1972
+ .seed-badge--tone_critical-variant_solid {
1983
1973
  background-color: var(--seed-color-bg-critical-solid);
1984
1974
  color: var(--seed-color-palette-static-white);
1985
1975
  }
1986
1976
 
1987
- .seed-badge__root--tone_critical-variant_outline {
1977
+ .seed-badge--tone_critical-variant_outline {
1988
1978
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-critical);
1989
1979
  color: var(--seed-color-fg-critical);
1990
1980
  }
@@ -2341,7 +2331,7 @@
2341
2331
  height: 14px;
2342
2332
  }
2343
2333
 
2344
- .seed-action-chip__root {
2334
+ .seed-action-chip {
2345
2335
  box-sizing: border-box;
2346
2336
  cursor: pointer;
2347
2337
  text-transform: none;
@@ -2367,15 +2357,15 @@
2367
2357
  display: inline-flex;
2368
2358
  }
2369
2359
 
2370
- .seed-action-chip__root:is(:active, [data-active]) {
2360
+ .seed-action-chip:is(:active, [data-active]) {
2371
2361
  background: var(--seed-color-bg-neutral-weak-pressed);
2372
2362
  }
2373
2363
 
2374
- .seed-action-chip__root:is(:focus, [data-focus]) {
2364
+ .seed-action-chip:is(:focus, [data-focus]) {
2375
2365
  outline: none;
2376
2366
  }
2377
2367
 
2378
- .seed-action-chip__root:is(:disabled, [disabled], [data-disabled]) {
2368
+ .seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
2379
2369
  background: var(--seed-color-bg-disabled);
2380
2370
  color: var(--seed-color-fg-disabled);
2381
2371
  cursor: not-allowed;
@@ -2384,7 +2374,7 @@
2384
2374
  --seed-icon-color: var(--seed-color-fg-disabled);
2385
2375
  }
2386
2376
 
2387
- .seed-action-chip__root--size_medium {
2377
+ .seed-action-chip--size_medium {
2388
2378
  min-height: var(--seed-dimension-x9);
2389
2379
  padding-block: var(--seed-dimension-x2);
2390
2380
  gap: var(--seed-dimension-x1);
@@ -2395,7 +2385,7 @@
2395
2385
  --seed-icon-size: var(--seed-dimension-x4);
2396
2386
  }
2397
2387
 
2398
- .seed-action-chip__root--size_small {
2388
+ .seed-action-chip--size_small {
2399
2389
  min-height: var(--seed-dimension-x8);
2400
2390
  padding-block: var(--seed-dimension-x1_5);
2401
2391
  gap: var(--seed-dimension-x1);
@@ -2406,23 +2396,23 @@
2406
2396
  --seed-icon-size: var(--seed-dimension-x4);
2407
2397
  }
2408
2398
 
2409
- .seed-action-chip__root--size_medium-layout_withText {
2399
+ .seed-action-chip--size_medium-layout_withText {
2410
2400
  padding-inline: var(--seed-dimension-x3_5);
2411
2401
  }
2412
2402
 
2413
- .seed-action-chip__root--size_medium-layout_iconOnly {
2403
+ .seed-action-chip--size_medium-layout_iconOnly {
2414
2404
  min-width: var(--seed-dimension-x9);
2415
2405
  }
2416
2406
 
2417
- .seed-action-chip__root--size_small-layout_withText {
2407
+ .seed-action-chip--size_small-layout_withText {
2418
2408
  padding-inline: var(--seed-dimension-x3);
2419
2409
  }
2420
2410
 
2421
- .seed-action-chip__root--size_small-layout_iconOnly {
2411
+ .seed-action-chip--size_small-layout_iconOnly {
2422
2412
  min-width: var(--seed-dimension-x8);
2423
2413
  }
2424
2414
 
2425
- .seed-control-chip__root {
2415
+ .seed-control-chip {
2426
2416
  box-sizing: border-box;
2427
2417
  cursor: pointer;
2428
2418
  text-transform: none;
@@ -2447,15 +2437,15 @@
2447
2437
  display: inline-flex;
2448
2438
  }
2449
2439
 
2450
- .seed-control-chip__root:is(:focus, [data-focus]) {
2440
+ .seed-control-chip:is(:focus, [data-focus]) {
2451
2441
  outline: none;
2452
2442
  }
2453
2443
 
2454
- .seed-control-chip__root:is(:active, [data-active]) {
2444
+ .seed-control-chip:is(:active, [data-active]) {
2455
2445
  background: var(--seed-color-bg-layer-default-pressed);
2456
2446
  }
2457
2447
 
2458
- .seed-control-chip__root:is(:checked, [data-checked]) {
2448
+ .seed-control-chip:is(:checked, [data-checked]) {
2459
2449
  box-shadow: none;
2460
2450
  background: var(--seed-color-bg-neutral-solid-muted);
2461
2451
  color: var(--seed-color-palette-static-white);
@@ -2466,11 +2456,11 @@
2466
2456
  --seed-count-color: var(--seed-color-palette-static-white-alpha-800);
2467
2457
  }
2468
2458
 
2469
- .seed-control-chip__root:is(:checked, [data-checked]):is(:active, [data-active]) {
2459
+ .seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) {
2470
2460
  background: var(--seed-color-bg-neutral-solid-muted-pressed);
2471
2461
  }
2472
2462
 
2473
- .seed-control-chip__root:is(:disabled, [disabled], [data-disabled]) {
2463
+ .seed-control-chip:is(:disabled, [disabled], [data-disabled]) {
2474
2464
  cursor: not-allowed;
2475
2465
  background: var(--seed-color-bg-disabled);
2476
2466
  color: var(--seed-color-fg-disabled);
@@ -2479,7 +2469,7 @@
2479
2469
  --seed-icon-color: var(--seed-color-fg-disabled);
2480
2470
  }
2481
2471
 
2482
- .seed-control-chip__root--size_medium {
2472
+ .seed-control-chip--size_medium {
2483
2473
  min-height: var(--seed-dimension-x9);
2484
2474
  padding-block: var(--seed-dimension-x2);
2485
2475
  gap: var(--seed-dimension-x1);
@@ -2490,7 +2480,7 @@
2490
2480
  --seed-count-font-size: var(--seed-font-size-t4);
2491
2481
  }
2492
2482
 
2493
- .seed-control-chip__root--size_small {
2483
+ .seed-control-chip--size_small {
2494
2484
  min-height: var(--seed-dimension-x8);
2495
2485
  padding-block: var(--seed-dimension-x1_5);
2496
2486
  gap: var(--seed-dimension-x1);
@@ -2501,19 +2491,19 @@
2501
2491
  --seed-count-font-size: var(--seed-font-size-t4);
2502
2492
  }
2503
2493
 
2504
- .seed-control-chip__root--size_medium-layout_withText {
2494
+ .seed-control-chip--size_medium-layout_withText {
2505
2495
  padding-inline: var(--seed-dimension-x3_5);
2506
2496
  }
2507
2497
 
2508
- .seed-control-chip__root--size_medium-layout_iconOnly {
2498
+ .seed-control-chip--size_medium-layout_iconOnly {
2509
2499
  min-width: var(--seed-dimension-x9);
2510
2500
  }
2511
2501
 
2512
- .seed-control-chip__root--size_small-layout_withText {
2502
+ .seed-control-chip--size_small-layout_withText {
2513
2503
  padding-inline: var(--seed-dimension-x3);
2514
2504
  }
2515
2505
 
2516
- .seed-control-chip__root--size_small-layout_iconOnly {
2506
+ .seed-control-chip--size_small-layout_iconOnly {
2517
2507
  min-width: var(--seed-dimension-x8);
2518
2508
  }
2519
2509
 
@@ -2658,7 +2648,7 @@
2658
2648
  color: var(--seed-color-fg-magic-contrast);
2659
2649
  }
2660
2650
 
2661
- .seed-manner-temp-badge__root {
2651
+ .seed-manner-temp-badge {
2662
2652
  box-sizing: border-box;
2663
2653
  text-transform: none;
2664
2654
  text-align: start;
@@ -2677,32 +2667,32 @@
2677
2667
  display: inline-flex;
2678
2668
  }
2679
2669
 
2680
- .seed-manner-temp-badge__root--level_l1 {
2670
+ .seed-manner-temp-badge--level_l1 {
2681
2671
  background-color: var(--seed-color-manner-temp-l1-bg);
2682
2672
  color: var(--seed-color-manner-temp-l1-text);
2683
2673
  }
2684
2674
 
2685
- .seed-manner-temp-badge__root--level_l2 {
2675
+ .seed-manner-temp-badge--level_l2 {
2686
2676
  background-color: var(--seed-color-manner-temp-l2-bg);
2687
2677
  color: var(--seed-color-manner-temp-l2-text);
2688
2678
  }
2689
2679
 
2690
- .seed-manner-temp-badge__root--level_l3 {
2680
+ .seed-manner-temp-badge--level_l3 {
2691
2681
  background-color: var(--seed-color-manner-temp-l3-bg);
2692
2682
  color: var(--seed-color-manner-temp-l3-text);
2693
2683
  }
2694
2684
 
2695
- .seed-manner-temp-badge__root--level_l4 {
2685
+ .seed-manner-temp-badge--level_l4 {
2696
2686
  background-color: var(--seed-color-manner-temp-l4-bg);
2697
2687
  color: var(--seed-color-manner-temp-l4-text);
2698
2688
  }
2699
2689
 
2700
- .seed-manner-temp-badge__root--level_l5 {
2690
+ .seed-manner-temp-badge--level_l5 {
2701
2691
  background-color: var(--seed-color-manner-temp-l5-bg);
2702
2692
  color: var(--seed-color-manner-temp-l5-text);
2703
2693
  }
2704
2694
 
2705
- .seed-manner-temp-badge__root--level_l6 {
2695
+ .seed-manner-temp-badge--level_l6 {
2706
2696
  background-color: var(--seed-color-manner-temp-l6-bg);
2707
2697
  color: var(--seed-color-manner-temp-l6-text);
2708
2698
  }
@@ -2769,7 +2759,7 @@
2769
2759
  background-color: var(--seed-color-bg-neutral-weak-pressed);
2770
2760
  }
2771
2761
 
2772
- .seed-select-box-group__root {
2762
+ .seed-select-box-group {
2773
2763
  flex-direction: column;
2774
2764
  width: 100%;
2775
2765
  display: flex;
@@ -3015,8 +3005,8 @@
3015
3005
 
3016
3006
  .seed-help-bubble__arrow {
3017
3007
  fill: var(--seed-color-bg-neutral-solid);
3018
- width: 10px;
3019
- height: 6px;
3008
+ width: 12px;
3009
+ height: 8px;
3020
3010
  }
3021
3011
 
3022
3012
  .seed-help-bubble__title {
@@ -3628,7 +3618,7 @@
3628
3618
  top: 0;
3629
3619
  }
3630
3620
 
3631
- .seed-skeleton__root {
3621
+ .seed-skeleton {
3632
3622
  box-sizing: border-box;
3633
3623
  background: var(--seed-color-palette-gray-200);
3634
3624
  --seed-box-width: initial;
@@ -3639,7 +3629,7 @@
3639
3629
  overflow: hidden;
3640
3630
  }
3641
3631
 
3642
- .seed-skeleton__root:after {
3632
+ .seed-skeleton:after {
3643
3633
  content: "";
3644
3634
  background-image: linear-gradient(90deg, var(--seed-gradient-shimmer));
3645
3635
  width: 100%;
@@ -3653,19 +3643,19 @@
3653
3643
  display: block;
3654
3644
  }
3655
3645
 
3656
- .seed-skeleton__root--radius_0 {
3646
+ .seed-skeleton--radius_0 {
3657
3647
  border-radius: 0;
3658
3648
  }
3659
3649
 
3660
- .seed-skeleton__root--radius_8 {
3650
+ .seed-skeleton--radius_8 {
3661
3651
  border-radius: 8px;
3662
3652
  }
3663
3653
 
3664
- .seed-skeleton__root--radius_16 {
3654
+ .seed-skeleton--radius_16 {
3665
3655
  border-radius: 16px;
3666
3656
  }
3667
3657
 
3668
- .seed-skeleton__root--radius_full {
3658
+ .seed-skeleton--radius_full {
3669
3659
  border-radius: var(--seed-radius-full);
3670
3660
  }
3671
3661
 
@@ -3760,7 +3750,7 @@
3760
3750
  color: var(--seed-color-fg-critical);
3761
3751
  }
3762
3752
 
3763
- .seed-snackbar-region__root {
3753
+ .seed-snackbar-region {
3764
3754
  z-index: 2147483647;
3765
3755
  left: calc(env(safe-area-inset-left, 0px));
3766
3756
  right: calc(env(safe-area-inset-right, 0px));
@@ -3775,7 +3765,7 @@
3775
3765
  display: flex;
3776
3766
  }
3777
3767
 
3778
- .seed-text__root {
3768
+ .seed-text {
3779
3769
  text-align: var(--seed-text-align);
3780
3770
  color: var(--seed-text-color);
3781
3771
  font-size: var(--seed-font-size);
@@ -3790,139 +3780,163 @@
3790
3780
  margin: 0;
3791
3781
  }
3792
3782
 
3793
- .seed-text__root--textStyle_screenTitle {
3783
+ .seed-text--textStyle_screenTitle {
3794
3784
  --seed-font-size: var(--seed-font-size-t10);
3795
3785
  --seed-line-height: var(--seed-line-height-t10);
3796
3786
  --seed-font-weight: var(--seed-font-weight-bold);
3797
3787
  }
3798
3788
 
3799
- .seed-text__root--textStyle_articleBody {
3789
+ .seed-text--textStyle_articleBody {
3800
3790
  --seed-font-size: var(--seed-font-size-t5);
3801
3791
  --seed-line-height: var(--seed-line-height-t6);
3802
3792
  --seed-font-weight: var(--seed-font-weight-regular);
3803
3793
  }
3804
3794
 
3805
- .seed-text__root--textStyle_t1Regular {
3795
+ .seed-text--textStyle_t1Regular {
3806
3796
  --seed-font-size: var(--seed-font-size-t1);
3807
3797
  --seed-line-height: var(--seed-line-height-t1);
3808
3798
  --seed-font-weight: var(--seed-font-weight-regular);
3809
3799
  }
3810
3800
 
3811
- .seed-text__root--textStyle_t1Medium {
3801
+ .seed-text--textStyle_t1Medium {
3812
3802
  --seed-font-size: var(--seed-font-size-t1);
3813
3803
  --seed-line-height: var(--seed-line-height-t1);
3814
3804
  --seed-font-weight: var(--seed-font-weight-medium);
3815
3805
  }
3816
3806
 
3817
- .seed-text__root--textStyle_t1Bold {
3807
+ .seed-text--textStyle_t1Bold {
3818
3808
  --seed-font-size: var(--seed-font-size-t1);
3819
3809
  --seed-line-height: var(--seed-line-height-t1);
3820
3810
  --seed-font-weight: var(--seed-font-weight-bold);
3821
3811
  }
3822
3812
 
3823
- .seed-text__root--textStyle_t2Regular {
3813
+ .seed-text--textStyle_t2Regular {
3824
3814
  --seed-font-size: var(--seed-font-size-t2);
3825
3815
  --seed-line-height: var(--seed-line-height-t2);
3826
3816
  --seed-font-weight: var(--seed-font-weight-regular);
3827
3817
  }
3828
3818
 
3829
- .seed-text__root--textStyle_t2Medium {
3819
+ .seed-text--textStyle_t2Medium {
3830
3820
  --seed-font-size: var(--seed-font-size-t2);
3831
3821
  --seed-line-height: var(--seed-line-height-t2);
3832
3822
  --seed-font-weight: var(--seed-font-weight-medium);
3833
3823
  }
3834
3824
 
3835
- .seed-text__root--textStyle_t2Bold {
3825
+ .seed-text--textStyle_t2Bold {
3836
3826
  --seed-font-size: var(--seed-font-size-t2);
3837
3827
  --seed-line-height: var(--seed-line-height-t2);
3838
3828
  --seed-font-weight: var(--seed-font-weight-bold);
3839
3829
  }
3840
3830
 
3841
- .seed-text__root--textStyle_t3Regular {
3831
+ .seed-text--textStyle_t3Regular {
3842
3832
  --seed-font-size: var(--seed-font-size-t3);
3843
3833
  --seed-line-height: var(--seed-line-height-t3);
3844
3834
  --seed-font-weight: var(--seed-font-weight-regular);
3845
3835
  }
3846
3836
 
3847
- .seed-text__root--textStyle_t3Medium {
3837
+ .seed-text--textStyle_t3Medium {
3848
3838
  --seed-font-size: var(--seed-font-size-t3);
3849
3839
  --seed-line-height: var(--seed-line-height-t3);
3850
3840
  --seed-font-weight: var(--seed-font-weight-medium);
3851
3841
  }
3852
3842
 
3853
- .seed-text__root--textStyle_t3Bold {
3843
+ .seed-text--textStyle_t3Bold {
3854
3844
  --seed-font-size: var(--seed-font-size-t3);
3855
3845
  --seed-line-height: var(--seed-line-height-t3);
3856
3846
  --seed-font-weight: var(--seed-font-weight-bold);
3857
3847
  }
3858
3848
 
3859
- .seed-text__root--textStyle_t4Regular {
3849
+ .seed-text--textStyle_t4Regular {
3860
3850
  --seed-font-size: var(--seed-font-size-t4);
3861
3851
  --seed-line-height: var(--seed-line-height-t4);
3862
3852
  --seed-font-weight: var(--seed-font-weight-regular);
3863
3853
  }
3864
3854
 
3865
- .seed-text__root--textStyle_t4Medium {
3855
+ .seed-text--textStyle_t4Medium {
3866
3856
  --seed-font-size: var(--seed-font-size-t4);
3867
3857
  --seed-line-height: var(--seed-line-height-t4);
3868
3858
  --seed-font-weight: var(--seed-font-weight-medium);
3869
3859
  }
3870
3860
 
3871
- .seed-text__root--textStyle_t4Bold {
3861
+ .seed-text--textStyle_t4Bold {
3872
3862
  --seed-font-size: var(--seed-font-size-t4);
3873
3863
  --seed-line-height: var(--seed-line-height-t4);
3874
3864
  --seed-font-weight: var(--seed-font-weight-bold);
3875
3865
  }
3876
3866
 
3877
- .seed-text__root--textStyle_t5Regular {
3867
+ .seed-text--textStyle_t5Regular {
3878
3868
  --seed-font-size: var(--seed-font-size-t5);
3879
3869
  --seed-line-height: var(--seed-line-height-t5);
3880
3870
  --seed-font-weight: var(--seed-font-weight-regular);
3881
3871
  }
3882
3872
 
3883
- .seed-text__root--textStyle_t5Medium {
3873
+ .seed-text--textStyle_t5Medium {
3884
3874
  --seed-font-size: var(--seed-font-size-t5);
3885
3875
  --seed-line-height: var(--seed-line-height-t5);
3886
3876
  --seed-font-weight: var(--seed-font-weight-medium);
3887
3877
  }
3888
3878
 
3889
- .seed-text__root--textStyle_t5Bold {
3879
+ .seed-text--textStyle_t5Bold {
3890
3880
  --seed-font-size: var(--seed-font-size-t5);
3891
3881
  --seed-line-height: var(--seed-line-height-t5);
3892
3882
  --seed-font-weight: var(--seed-font-weight-bold);
3893
3883
  }
3894
3884
 
3895
- .seed-text__root--textStyle_t6Bold {
3885
+ .seed-text--textStyle_t6Regular {
3886
+ --seed-font-size: var(--seed-font-size-t6);
3887
+ --seed-line-height: var(--seed-line-height-t6);
3888
+ --seed-font-weight: var(--seed-font-weight-regular);
3889
+ }
3890
+
3891
+ .seed-text--textStyle_t6Medium {
3892
+ --seed-font-size: var(--seed-font-size-t6);
3893
+ --seed-line-height: var(--seed-line-height-t6);
3894
+ --seed-font-weight: var(--seed-font-weight-medium);
3895
+ }
3896
+
3897
+ .seed-text--textStyle_t6Bold {
3896
3898
  --seed-font-size: var(--seed-font-size-t6);
3897
3899
  --seed-line-height: var(--seed-line-height-t6);
3898
3900
  --seed-font-weight: var(--seed-font-weight-bold);
3899
3901
  }
3900
3902
 
3901
- .seed-text__root--textStyle_t7Bold {
3903
+ .seed-text--textStyle_t7Regular {
3904
+ --seed-font-size: var(--seed-font-size-t7);
3905
+ --seed-line-height: var(--seed-line-height-t7);
3906
+ --seed-font-weight: var(--seed-font-weight-regular);
3907
+ }
3908
+
3909
+ .seed-text--textStyle_t7Medium {
3910
+ --seed-font-size: var(--seed-font-size-t7);
3911
+ --seed-line-height: var(--seed-line-height-t7);
3912
+ --seed-font-weight: var(--seed-font-weight-medium);
3913
+ }
3914
+
3915
+ .seed-text--textStyle_t7Bold {
3902
3916
  --seed-font-size: var(--seed-font-size-t7);
3903
3917
  --seed-line-height: var(--seed-line-height-t7);
3904
3918
  --seed-font-weight: var(--seed-font-weight-bold);
3905
3919
  }
3906
3920
 
3907
- .seed-text__root--textStyle_t8Bold {
3921
+ .seed-text--textStyle_t8Bold {
3908
3922
  --seed-font-size: var(--seed-font-size-t8);
3909
3923
  --seed-line-height: var(--seed-line-height-t8);
3910
3924
  --seed-font-weight: var(--seed-font-weight-bold);
3911
3925
  }
3912
3926
 
3913
- .seed-text__root--textStyle_t9Bold {
3927
+ .seed-text--textStyle_t9Bold {
3914
3928
  --seed-font-size: var(--seed-font-size-t9);
3915
3929
  --seed-line-height: var(--seed-line-height-t9);
3916
3930
  --seed-font-weight: var(--seed-font-weight-bold);
3917
3931
  }
3918
3932
 
3919
- .seed-text__root--textStyle_t10Bold {
3933
+ .seed-text--textStyle_t10Bold {
3920
3934
  --seed-font-size: var(--seed-font-size-t10);
3921
3935
  --seed-line-height: var(--seed-line-height-t10);
3922
3936
  --seed-font-weight: var(--seed-font-weight-bold);
3923
3937
  }
3924
3938
 
3925
- .seed-text__root--maxLines_none {
3939
+ .seed-text--maxLines_none {
3926
3940
  display: unset;
3927
3941
  overflow: unset;
3928
3942
  min-width: unset;
@@ -3931,7 +3945,7 @@
3931
3945
  -webkit-line-clamp: unset;
3932
3946
  }
3933
3947
 
3934
- .seed-text__root--maxLines_single {
3948
+ .seed-text--maxLines_single {
3935
3949
  text-overflow: ellipsis;
3936
3950
  white-space: nowrap;
3937
3951
  -webkit-line-clamp: var(--seed-max-lines);
@@ -3940,7 +3954,7 @@
3940
3954
  overflow: hidden;
3941
3955
  }
3942
3956
 
3943
- .seed-text__root--maxLines_multi {
3957
+ .seed-text--maxLines_multi {
3944
3958
  text-overflow: ellipsis;
3945
3959
  min-width: 0;
3946
3960
  white-space: initial;
@@ -3950,7 +3964,7 @@
3950
3964
  overflow: hidden;
3951
3965
  }
3952
3966
 
3953
- .seed-link-content__root {
3967
+ .seed-link-content {
3954
3968
  cursor: pointer;
3955
3969
  box-sizing: border-box;
3956
3970
  -webkit-font-smoothing: antialiased;
@@ -3968,29 +3982,32 @@
3968
3982
  display: inline-flex;
3969
3983
  }
3970
3984
 
3971
- .seed-link-content__root--weight_bold {
3985
+ .seed-link-content--weight_bold {
3972
3986
  font-weight: var(--seed-font-weight-bold);
3973
3987
  }
3974
3988
 
3975
- .seed-link-content__root--weight_regular {
3989
+ .seed-link-content--weight_regular {
3976
3990
  font-weight: var(--seed-font-weight-regular);
3977
3991
  }
3978
3992
 
3979
- .seed-link-content__root--size_t6 {
3993
+ .seed-link-content--size_t6 {
3980
3994
  font-size: var(--seed-font-size-t6);
3981
3995
  line-height: var(--seed-line-height-t6);
3996
+ gap: var(--seed-dimension-x0_5);
3982
3997
  --seed-suffix-icon-size: var(--seed-dimension-x4);
3983
3998
  }
3984
3999
 
3985
- .seed-link-content__root--size_t5 {
4000
+ .seed-link-content--size_t5 {
3986
4001
  font-size: var(--seed-font-size-t5);
3987
4002
  line-height: var(--seed-line-height-t5);
4003
+ gap: var(--seed-dimension-x0_5);
3988
4004
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
3989
4005
  }
3990
4006
 
3991
- .seed-link-content__root--size_t4 {
4007
+ .seed-link-content--size_t4 {
3992
4008
  font-size: var(--seed-font-size-t4);
3993
4009
  line-height: var(--seed-line-height-t4);
4010
+ gap: var(--seed-dimension-x0_5);
3994
4011
  --seed-suffix-icon-size: var(--seed-dimension-x3);
3995
4012
  }
3996
4013
 
@@ -4339,7 +4356,7 @@
4339
4356
  line-height: var(--seed-line-height-t2);
4340
4357
  }
4341
4358
 
4342
- .seed-visually-hidden__root {
4359
+ .seed-visually-hidden {
4343
4360
  clip: rect(0 0 0 0);
4344
4361
  white-space: nowrap;
4345
4362
  border: 0;