@seed-design/css 1.2.3 → 1.2.4

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 (205) hide show
  1. package/all.css +1012 -172
  2. package/all.layered.css +9070 -0
  3. package/all.layered.min.css +1 -0
  4. package/all.min.css +1 -1
  5. package/base.css +4 -0
  6. package/base.layered.css +858 -0
  7. package/base.layered.min.css +1 -0
  8. package/base.min.css +1 -1
  9. package/package.json +11 -2
  10. package/recipes/action-button.css +69 -17
  11. package/recipes/action-button.layered.css +421 -0
  12. package/recipes/action-button.layered.mjs +79 -0
  13. package/recipes/action-chip.layered.css +84 -0
  14. package/recipes/action-chip.layered.mjs +51 -0
  15. package/recipes/action-sheet-item.layered.css +38 -0
  16. package/recipes/action-sheet-item.layered.mjs +29 -0
  17. package/recipes/action-sheet.layered.css +134 -0
  18. package/recipes/action-sheet.layered.mjs +60 -0
  19. package/recipes/app-bar-main.layered.css +165 -0
  20. package/recipes/app-bar-main.layered.mjs +63 -0
  21. package/recipes/app-bar.css +8 -0
  22. package/recipes/app-bar.layered.css +302 -0
  23. package/recipes/app-bar.layered.mjs +70 -0
  24. package/recipes/app-screen.layered.css +332 -0
  25. package/recipes/app-screen.layered.mjs +98 -0
  26. package/recipes/article.layered.css +12 -0
  27. package/recipes/article.layered.mjs +22 -0
  28. package/recipes/aspect-ratio.layered.css +26 -0
  29. package/recipes/aspect-ratio.layered.mjs +22 -0
  30. package/recipes/avatar-stack.layered.css +94 -0
  31. package/recipes/avatar-stack.layered.mjs +50 -0
  32. package/recipes/avatar.layered.css +222 -0
  33. package/recipes/avatar.layered.mjs +65 -0
  34. package/recipes/badge.layered.css +140 -0
  35. package/recipes/badge.layered.mjs +131 -0
  36. package/recipes/bottom-sheet-handle.css +9 -2
  37. package/recipes/bottom-sheet-handle.layered.css +36 -0
  38. package/recipes/bottom-sheet-handle.layered.mjs +36 -0
  39. package/recipes/bottom-sheet.css +11 -0
  40. package/recipes/bottom-sheet.layered.css +224 -0
  41. package/recipes/bottom-sheet.layered.mjs +75 -0
  42. package/recipes/callout.css +77 -12
  43. package/recipes/callout.layered.css +242 -0
  44. package/recipes/callout.layered.mjs +63 -0
  45. package/recipes/checkbox-group.layered.css +7 -0
  46. package/recipes/checkbox-group.layered.mjs +22 -0
  47. package/recipes/checkbox.layered.css +54 -0
  48. package/recipes/checkbox.layered.mjs +48 -0
  49. package/recipes/checkmark.css +61 -13
  50. package/recipes/checkmark.layered.css +187 -0
  51. package/recipes/checkmark.layered.mjs +86 -0
  52. package/recipes/chip-tabs.css +62 -14
  53. package/recipes/chip-tabs.layered.css +254 -0
  54. package/recipes/chip-tabs.layered.mjs +75 -0
  55. package/recipes/chip.css +60 -15
  56. package/recipes/chip.layered.css +272 -0
  57. package/recipes/chip.layered.mjs +80 -0
  58. package/recipes/contextual-floating-button.css +24 -7
  59. package/recipes/contextual-floating-button.layered.css +130 -0
  60. package/recipes/contextual-floating-button.layered.mjs +34 -0
  61. package/recipes/control-chip.layered.css +99 -0
  62. package/recipes/control-chip.layered.mjs +51 -0
  63. package/recipes/dialog.layered.css +111 -0
  64. package/recipes/dialog.layered.mjs +66 -0
  65. package/recipes/extended-action-sheet-item.layered.css +38 -0
  66. package/recipes/extended-action-sheet-item.layered.mjs +29 -0
  67. package/recipes/extended-action-sheet.layered.css +132 -0
  68. package/recipes/extended-action-sheet.layered.mjs +64 -0
  69. package/recipes/extended-fab.layered.css +79 -0
  70. package/recipes/extended-fab.layered.mjs +34 -0
  71. package/recipes/fab.layered.css +37 -0
  72. package/recipes/fab.layered.mjs +22 -0
  73. package/recipes/field-label.layered.css +35 -0
  74. package/recipes/field-label.layered.mjs +47 -0
  75. package/recipes/field.layered.css +81 -0
  76. package/recipes/field.layered.mjs +60 -0
  77. package/recipes/floating-action-button.css +15 -5
  78. package/recipes/floating-action-button.layered.css +101 -0
  79. package/recipes/floating-action-button.layered.mjs +47 -0
  80. package/recipes/help-bubble.css +8 -0
  81. package/recipes/help-bubble.layered.css +104 -0
  82. package/recipes/help-bubble.layered.mjs +60 -0
  83. package/recipes/identity-placeholder.css +2 -2
  84. package/recipes/identity-placeholder.d.ts +1 -1
  85. package/recipes/identity-placeholder.layered.css +22 -0
  86. package/recipes/identity-placeholder.layered.mjs +43 -0
  87. package/recipes/identity-placeholder.mjs +2 -1
  88. package/recipes/image-frame-icon.layered.css +8 -0
  89. package/recipes/image-frame-icon.layered.mjs +22 -0
  90. package/recipes/image-frame-indicator.layered.css +18 -0
  91. package/recipes/image-frame-indicator.layered.mjs +22 -0
  92. package/recipes/image-frame-reaction-button.css +9 -1
  93. package/recipes/image-frame-reaction-button.layered.css +43 -0
  94. package/recipes/image-frame-reaction-button.layered.mjs +22 -0
  95. package/recipes/image-frame.layered.css +28 -0
  96. package/recipes/image-frame.layered.mjs +34 -0
  97. package/recipes/inline-banner.layered.css +161 -0
  98. package/recipes/inline-banner.layered.mjs +64 -0
  99. package/recipes/input-button.css +27 -5
  100. package/recipes/input-button.layered.css +167 -0
  101. package/recipes/input-button.layered.mjs +64 -0
  102. package/recipes/link-content.layered.css +48 -0
  103. package/recipes/link-content.layered.mjs +35 -0
  104. package/recipes/list-header.layered.css +26 -0
  105. package/recipes/list-header.layered.mjs +29 -0
  106. package/recipes/list-item.css +63 -17
  107. package/recipes/list-item.layered.css +187 -0
  108. package/recipes/list-item.layered.mjs +59 -0
  109. package/recipes/manner-temp-badge.layered.css +72 -0
  110. package/recipes/manner-temp-badge.layered.mjs +37 -0
  111. package/recipes/manner-temp.layered.css +57 -0
  112. package/recipes/manner-temp.layered.mjs +37 -0
  113. package/recipes/menu-sheet-item.css +24 -3
  114. package/recipes/menu-sheet-item.layered.css +102 -0
  115. package/recipes/menu-sheet-item.layered.mjs +56 -0
  116. package/recipes/menu-sheet.css +18 -3
  117. package/recipes/menu-sheet.layered.css +167 -0
  118. package/recipes/menu-sheet.layered.mjs +74 -0
  119. package/recipes/notification-badge-positioner.layered.css +35 -0
  120. package/recipes/notification-badge-positioner.layered.mjs +51 -0
  121. package/recipes/notification-badge.layered.css +33 -0
  122. package/recipes/notification-badge.layered.mjs +29 -0
  123. package/recipes/page-banner.css +122 -22
  124. package/recipes/page-banner.layered.css +361 -0
  125. package/recipes/page-banner.layered.mjs +117 -0
  126. package/recipes/progress-circle.layered.css +52 -0
  127. package/recipes/progress-circle.layered.mjs +55 -0
  128. package/recipes/pull-to-refresh.layered.css +19 -0
  129. package/recipes/pull-to-refresh.layered.mjs +36 -0
  130. package/recipes/radio-group.layered.css +7 -0
  131. package/recipes/radio-group.layered.mjs +22 -0
  132. package/recipes/radio.layered.css +54 -0
  133. package/recipes/radio.layered.mjs +48 -0
  134. package/recipes/radiomark.css +34 -7
  135. package/recipes/radiomark.layered.css +132 -0
  136. package/recipes/radiomark.layered.mjs +48 -0
  137. package/recipes/reaction-button.css +24 -7
  138. package/recipes/reaction-button.layered.css +124 -0
  139. package/recipes/reaction-button.layered.mjs +29 -0
  140. package/recipes/scroll-fog.layered.css +27 -0
  141. package/recipes/scroll-fog.layered.mjs +28 -0
  142. package/recipes/segmented-control.css +31 -7
  143. package/recipes/segmented-control.layered.css +108 -0
  144. package/recipes/segmented-control.layered.mjs +40 -0
  145. package/recipes/select-box-group.layered.css +13 -0
  146. package/recipes/select-box-group.layered.mjs +22 -0
  147. package/recipes/select-box.css +19 -3
  148. package/recipes/select-box.layered.css +148 -0
  149. package/recipes/select-box.layered.mjs +63 -0
  150. package/recipes/selectBoxCheckmark.css +9 -2
  151. package/recipes/selectBoxCheckmark.layered.css +42 -0
  152. package/recipes/selectBoxCheckmark.layered.mjs +36 -0
  153. package/recipes/skeleton.layered.css +56 -0
  154. package/recipes/skeleton.layered.mjs +36 -0
  155. package/recipes/slider-marker.layered.css +54 -0
  156. package/recipes/slider-marker.layered.mjs +30 -0
  157. package/recipes/slider-tick.layered.css +25 -0
  158. package/recipes/slider-tick.layered.mjs +29 -0
  159. package/recipes/slider.css +25 -1
  160. package/recipes/slider.layered.css +238 -0
  161. package/recipes/slider.layered.mjs +68 -0
  162. package/recipes/snackbar-region.layered.css +18 -0
  163. package/recipes/snackbar-region.layered.mjs +22 -0
  164. package/recipes/snackbar.css +20 -1
  165. package/recipes/snackbar.layered.css +126 -0
  166. package/recipes/snackbar.layered.mjs +56 -0
  167. package/recipes/switch.layered.css +62 -0
  168. package/recipes/switch.layered.mjs +44 -0
  169. package/recipes/switchmark.css +9 -1
  170. package/recipes/switchmark.layered.css +100 -0
  171. package/recipes/switchmark.layered.mjs +49 -0
  172. package/recipes/tabs.css +9 -0
  173. package/recipes/tabs.layered.css +211 -0
  174. package/recipes/tabs.layered.mjs +78 -0
  175. package/recipes/tag-group-item.layered.css +98 -0
  176. package/recipes/tag-group-item.layered.mjs +55 -0
  177. package/recipes/tag-group.layered.css +58 -0
  178. package/recipes/tag-group.layered.mjs +62 -0
  179. package/recipes/text-input.css +1 -0
  180. package/recipes/text-input.layered.css +236 -0
  181. package/recipes/text-input.layered.mjs +73 -0
  182. package/recipes/text.layered.css +364 -0
  183. package/recipes/text.layered.mjs +90 -0
  184. package/recipes/toggle-button.css +42 -11
  185. package/recipes/toggle-button.layered.css +183 -0
  186. package/recipes/toggle-button.layered.mjs +34 -0
  187. package/vars/color/stroke.d.ts +2 -1
  188. package/vars/color/stroke.mjs +2 -1
  189. package/vars/component/identity-placeholder.d.ts +2 -2
  190. package/vars/component/identity-placeholder.mjs +2 -2
  191. package/vars/component/image-frame-floater.d.ts +1 -1
  192. package/vars/component/image-frame.d.ts +11 -17
  193. package/vars/component/image-frame.mjs +7 -12
  194. package/vars/component/index.d.ts +1 -0
  195. package/vars/component/index.mjs +1 -0
  196. package/vars/component/list-item.d.ts +1 -1
  197. package/vars/component/list-item.mjs +1 -1
  198. package/vars/component/segmented-control-indicator.d.ts +24 -0
  199. package/vars/component/segmented-control-indicator.mjs +24 -0
  200. package/vars/component/segmented-control-item.d.ts +3 -11
  201. package/vars/component/segmented-control-item.mjs +3 -11
  202. package/vars/component/segmented-control.d.ts +0 -8
  203. package/vars/component/segmented-control.mjs +0 -8
  204. package/vars/component/slider.d.ts +3 -1
  205. package/vars/component/slider.mjs +3 -1
package/all.css CHANGED
@@ -236,10 +236,12 @@
236
236
 
237
237
  [data-seed-color-mode="light-only"] {
238
238
  color-scheme: light;
239
+ color-scheme: light only;
239
240
  }
240
241
 
241
242
  [data-seed-color-mode="dark-only"] {
242
243
  color-scheme: dark;
244
+ color-scheme: dark only;
243
245
  }
244
246
 
245
247
  :root {
@@ -504,6 +506,7 @@
504
506
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
505
507
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
506
508
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
509
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
507
510
  --seed-color-manner-temp-l1-bg: #f1f2f3;
508
511
  --seed-color-manner-temp-l1-text: #757b85;
509
512
  --seed-color-manner-temp-l10-bg: #ffebee;
@@ -714,6 +717,7 @@
714
717
  --seed-color-stroke-positive-weak: var(--seed-color-palette-green-300);
715
718
  --seed-color-stroke-warning-solid: var(--seed-color-palette-yellow-700);
716
719
  --seed-color-stroke-warning-weak: var(--seed-color-palette-yellow-300);
720
+ --seed-color-stroke-focus-ring: var(--seed-color-palette-blue-600);
717
721
  --seed-color-manner-temp-l1-bg: #292929;
718
722
  --seed-color-manner-temp-l1-text: #b8b8b9;
719
723
  --seed-color-manner-temp-l10-bg: #34040a;
@@ -786,6 +790,8 @@
786
790
  margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
787
791
  margin-left: calc(var(--seed-box-bleed-left) * -1);
788
792
  margin-right: calc(var(--seed-box-bleed-right) * -1);
793
+ outline: var(--seed-dimension-x0_5) solid transparent;
794
+ outline-offset: var(--seed-dimension-x0_5);
789
795
  border: none;
790
796
  justify-content: center;
791
797
  align-items: center;
@@ -795,8 +801,9 @@
795
801
  position: relative;
796
802
  }
797
803
 
798
- .seed-action-button:is(:focus, [data-focus]) {
799
- outline: none;
804
+ .seed-action-button:is(:focus-visible, [data-focus-visible]) {
805
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
806
+ outline-offset: var(--seed-dimension-x0_5);
800
807
  }
801
808
 
802
809
  .seed-action-button:is(:disabled, [disabled], [data-disabled]) {
@@ -804,7 +811,7 @@
804
811
  }
805
812
 
806
813
  .seed-action-button {
807
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
814
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
808
815
  }
809
816
 
810
817
  .seed-action-button--variant_brandSolid {
@@ -818,8 +825,16 @@
818
825
  --range-color: var(--seed-color-palette-static-white);
819
826
  }
820
827
 
821
- .seed-action-button--variant_brandSolid:is(:active, [data-active]) {
822
- background: var(--seed-color-bg-brand-solid-pressed);
828
+ @media (hover: hover) {
829
+ .seed-action-button--variant_brandSolid:is(:hover, [data-hover]) {
830
+ background: var(--seed-color-bg-brand-solid-pressed);
831
+ }
832
+ }
833
+
834
+ @media (hover: none) {
835
+ .seed-action-button--variant_brandSolid:is(:active, [data-active]) {
836
+ background: var(--seed-color-bg-brand-solid-pressed);
837
+ }
823
838
  }
824
839
 
825
840
  .seed-action-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -845,8 +860,16 @@
845
860
  --range-color: var(--seed-color-palette-static-white);
846
861
  }
847
862
 
848
- .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
849
- background: var(--seed-color-bg-neutral-inverted-pressed);
863
+ @media (hover: hover) {
864
+ .seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
865
+ background: var(--seed-color-bg-neutral-inverted-pressed);
866
+ }
867
+ }
868
+
869
+ @media (hover: none) {
870
+ .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
871
+ background: var(--seed-color-bg-neutral-inverted-pressed);
872
+ }
850
873
  }
851
874
 
852
875
  .seed-action-button--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -872,8 +895,16 @@
872
895
  --range-color: var(--seed-color-fg-neutral);
873
896
  }
874
897
 
875
- .seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
876
- background: var(--seed-color-bg-neutral-weak-pressed);
898
+ @media (hover: hover) {
899
+ .seed-action-button--variant_neutralWeak:is(:hover, [data-hover]) {
900
+ background: var(--seed-color-bg-neutral-weak-pressed);
901
+ }
902
+ }
903
+
904
+ @media (hover: none) {
905
+ .seed-action-button--variant_neutralWeak:is(:active, [data-active]) {
906
+ background: var(--seed-color-bg-neutral-weak-pressed);
907
+ }
877
908
  }
878
909
 
879
910
  .seed-action-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {
@@ -899,8 +930,16 @@
899
930
  --range-color: var(--seed-color-palette-static-white);
900
931
  }
901
932
 
902
- .seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
903
- background: var(--seed-color-bg-critical-solid-pressed);
933
+ @media (hover: hover) {
934
+ .seed-action-button--variant_criticalSolid:is(:hover, [data-hover]) {
935
+ background: var(--seed-color-bg-critical-solid-pressed);
936
+ }
937
+ }
938
+
939
+ @media (hover: none) {
940
+ .seed-action-button--variant_criticalSolid:is(:active, [data-active]) {
941
+ background: var(--seed-color-bg-critical-solid-pressed);
942
+ }
904
943
  }
905
944
 
906
945
  .seed-action-button--variant_criticalSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -929,8 +968,16 @@
929
968
  --range-color: var(--seed-color-bg-brand-solid);
930
969
  }
931
970
 
932
- .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
933
- background: var(--seed-color-bg-transparent-pressed);
971
+ @media (hover: hover) {
972
+ .seed-action-button--variant_brandOutline:is(:hover, [data-hover]) {
973
+ background: var(--seed-color-bg-transparent-pressed);
974
+ }
975
+ }
976
+
977
+ @media (hover: none) {
978
+ .seed-action-button--variant_brandOutline:is(:active, [data-active]) {
979
+ background: var(--seed-color-bg-transparent-pressed);
980
+ }
934
981
  }
935
982
 
936
983
  .seed-action-button--variant_brandOutline:is(:disabled, [disabled], [data-disabled]) {
@@ -960,8 +1007,16 @@
960
1007
  --range-color: var(--seed-color-fg-neutral);
961
1008
  }
962
1009
 
963
- .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
964
- background: var(--seed-color-bg-transparent-pressed);
1010
+ @media (hover: hover) {
1011
+ .seed-action-button--variant_neutralOutline:is(:hover, [data-hover]) {
1012
+ background: var(--seed-color-bg-transparent-pressed);
1013
+ }
1014
+ }
1015
+
1016
+ @media (hover: none) {
1017
+ .seed-action-button--variant_neutralOutline:is(:active, [data-active]) {
1018
+ background: var(--seed-color-bg-transparent-pressed);
1019
+ }
965
1020
  }
966
1021
 
967
1022
  .seed-action-button--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
@@ -990,8 +1045,16 @@
990
1045
  background: #fff0;
991
1046
  }
992
1047
 
993
- .seed-action-button--variant_ghost:is(:active, [data-active]) {
994
- background: var(--seed-color-bg-transparent-pressed);
1048
+ @media (hover: hover) {
1049
+ .seed-action-button--variant_ghost:is(:hover, [data-hover]) {
1050
+ background: var(--seed-color-bg-transparent-pressed);
1051
+ }
1052
+ }
1053
+
1054
+ @media (hover: none) {
1055
+ .seed-action-button--variant_ghost:is(:active, [data-active]) {
1056
+ background: var(--seed-color-bg-transparent-pressed);
1057
+ }
995
1058
  }
996
1059
 
997
1060
  .seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
@@ -1428,6 +1491,10 @@
1428
1491
  }
1429
1492
 
1430
1493
  .seed-app-bar__iconButton {
1494
+ border-radius: var(--seed-radius-r1);
1495
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
1496
+ outline: var(--seed-dimension-x0_5) solid transparent;
1497
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
1431
1498
  background: none;
1432
1499
  border: none;
1433
1500
  justify-content: center;
@@ -1437,6 +1504,11 @@
1437
1504
  display: flex;
1438
1505
  }
1439
1506
 
1507
+ .seed-app-bar__iconButton:is(:focus-visible, [data-focus-visible]) {
1508
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
1509
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
1510
+ }
1511
+
1440
1512
  .seed-app-bar__icon {
1441
1513
  flex-shrink: 0;
1442
1514
  display: inline-block;
@@ -2783,10 +2855,23 @@
2783
2855
 
2784
2856
  .seed-bottom-sheet__closeButton:after {
2785
2857
  content: "";
2858
+ outline: var(--seed-dimension-x0_5) solid transparent;
2859
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2860
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
2786
2861
  position: absolute;
2787
2862
  inset: -8px;
2788
2863
  }
2789
2864
 
2865
+ .seed-bottom-sheet__closeButton:is(:focus, [data-focus]) {
2866
+ outline: none;
2867
+ }
2868
+
2869
+ .seed-bottom-sheet__closeButton:is(:focus-visible, [data-focus-visible]):after {
2870
+ border-radius: var(--seed-radius-r1);
2871
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
2872
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2873
+ }
2874
+
2790
2875
  .seed-bottom-sheet__header--headerAlign_left {
2791
2876
  justify-content: flex-start;
2792
2877
  }
@@ -2870,8 +2955,16 @@
2870
2955
  transform: translateX(-50%);
2871
2956
  }
2872
2957
 
2873
- .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
2874
- background-color: var(--seed-color-palette-gray-500);
2958
+ @media (hover: hover) {
2959
+ .seed-bottom-sheet-handle__root:is(:hover, [data-hover]) {
2960
+ background-color: var(--seed-color-palette-gray-500);
2961
+ }
2962
+ }
2963
+
2964
+ @media (hover: none) {
2965
+ .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
2966
+ background-color: var(--seed-color-palette-gray-500);
2967
+ }
2875
2968
  }
2876
2969
 
2877
2970
  .seed-bottom-sheet-handle__touchArea {
@@ -2909,6 +3002,14 @@
2909
3002
 
2910
3003
  .seed-callout__root:is(button, a) {
2911
3004
  cursor: pointer;
3005
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3006
+ outline: var(--seed-dimension-x0_5) solid transparent;
3007
+ outline-offset: var(--seed-dimension-x0_5);
3008
+ }
3009
+
3010
+ .seed-callout__root:is(button, a):is(:focus-visible, [data-focus-visible]) {
3011
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3012
+ outline-offset: var(--seed-dimension-x0_5);
2912
3013
  }
2913
3014
 
2914
3015
  .seed-callout__content {
@@ -2945,6 +3046,10 @@
2945
3046
  line-height: var(--seed-line-height-t4);
2946
3047
  font-weight: var(--seed-font-weight-regular);
2947
3048
  text-underline-offset: 2px;
3049
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3050
+ border-radius: var(--seed-radius-r1);
3051
+ outline: var(--seed-dimension-x0_5) solid transparent;
3052
+ outline-offset: var(--seed-dimension-x0_5);
2948
3053
  background-color: #0000;
2949
3054
  border: none;
2950
3055
  padding: 0;
@@ -2952,11 +3057,20 @@
2952
3057
  display: inline-block;
2953
3058
  }
2954
3059
 
3060
+ .seed-callout__link:is(:focus-visible, [data-focus-visible]) {
3061
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3062
+ outline-offset: var(--seed-dimension-x0_5);
3063
+ }
3064
+
2955
3065
  .seed-callout__closeButton {
2956
3066
  cursor: pointer;
2957
3067
  width: var(--seed-dimension-x10);
2958
3068
  height: var(--seed-dimension-x10);
2959
3069
  margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
3070
+ border-radius: var(--seed-radius-r2_5);
3071
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3072
+ outline: var(--seed-dimension-x0_5) solid transparent;
3073
+ outline-offset: var(--seed-dimension-x0_5);
2960
3074
  background-color: #0000;
2961
3075
  border: none;
2962
3076
  flex-grow: 0;
@@ -2967,14 +3081,27 @@
2967
3081
  display: flex;
2968
3082
  }
2969
3083
 
3084
+ .seed-callout__closeButton:is(:focus-visible, [data-focus-visible]) {
3085
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3086
+ outline-offset: var(--seed-dimension-x0_5);
3087
+ }
3088
+
2970
3089
  .seed-callout__root--tone_neutral {
2971
3090
  background-color: var(--seed-color-bg-neutral-weak);
2972
3091
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2973
3092
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
2974
3093
  }
2975
3094
 
2976
- .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
2977
- background-color: var(--seed-color-bg-neutral-weak-pressed);
3095
+ @media (hover: hover) {
3096
+ .seed-callout__root--tone_neutral:is(button, a):is(:hover, [data-hover]) {
3097
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
3098
+ }
3099
+ }
3100
+
3101
+ @media (hover: none) {
3102
+ .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
3103
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
3104
+ }
2978
3105
  }
2979
3106
 
2980
3107
  .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
@@ -2987,8 +3114,16 @@
2987
3114
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
2988
3115
  }
2989
3116
 
2990
- .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
2991
- background-color: var(--seed-color-bg-informative-weak-pressed);
3117
+ @media (hover: hover) {
3118
+ .seed-callout__root--tone_informative:is(button, a):is(:hover, [data-hover]) {
3119
+ background-color: var(--seed-color-bg-informative-weak-pressed);
3120
+ }
3121
+ }
3122
+
3123
+ @media (hover: none) {
3124
+ .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
3125
+ background-color: var(--seed-color-bg-informative-weak-pressed);
3126
+ }
2992
3127
  }
2993
3128
 
2994
3129
  .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
@@ -3001,8 +3136,16 @@
3001
3136
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3002
3137
  }
3003
3138
 
3004
- .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
3005
- background-color: var(--seed-color-bg-positive-weak-pressed);
3139
+ @media (hover: hover) {
3140
+ .seed-callout__root--tone_positive:is(button, a):is(:hover, [data-hover]) {
3141
+ background-color: var(--seed-color-bg-positive-weak-pressed);
3142
+ }
3143
+ }
3144
+
3145
+ @media (hover: none) {
3146
+ .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
3147
+ background-color: var(--seed-color-bg-positive-weak-pressed);
3148
+ }
3006
3149
  }
3007
3150
 
3008
3151
  .seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
@@ -3015,8 +3158,16 @@
3015
3158
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3016
3159
  }
3017
3160
 
3018
- .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
3019
- background-color: var(--seed-color-bg-warning-weak-pressed);
3161
+ @media (hover: hover) {
3162
+ .seed-callout__root--tone_warning:is(button, a):is(:hover, [data-hover]) {
3163
+ background-color: var(--seed-color-bg-warning-weak-pressed);
3164
+ }
3165
+ }
3166
+
3167
+ @media (hover: none) {
3168
+ .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
3169
+ background-color: var(--seed-color-bg-warning-weak-pressed);
3170
+ }
3020
3171
  }
3021
3172
 
3022
3173
  .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
@@ -3029,8 +3180,16 @@
3029
3180
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3030
3181
  }
3031
3182
 
3032
- .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
3033
- background-color: var(--seed-color-bg-critical-weak-pressed);
3183
+ @media (hover: hover) {
3184
+ .seed-callout__root--tone_critical:is(button, a):is(:hover, [data-hover]) {
3185
+ background-color: var(--seed-color-bg-critical-weak-pressed);
3186
+ }
3187
+ }
3188
+
3189
+ @media (hover: none) {
3190
+ .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
3191
+ background-color: var(--seed-color-bg-critical-weak-pressed);
3192
+ }
3034
3193
  }
3035
3194
 
3036
3195
  .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
@@ -3043,8 +3202,16 @@
3043
3202
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3044
3203
  }
3045
3204
 
3046
- .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
3047
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3205
+ @media (hover: hover) {
3206
+ .seed-callout__root--tone_magic:is(button, a):is(:hover, [data-hover]) {
3207
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3208
+ }
3209
+ }
3210
+
3211
+ @media (hover: none) {
3212
+ .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
3213
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
3214
+ }
3048
3215
  }
3049
3216
 
3050
3217
  .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
@@ -3113,11 +3280,18 @@
3113
3280
  .seed-checkmark__root {
3114
3281
  box-sizing: border-box;
3115
3282
  margin-top: var(--checkmark-margin-top, 0);
3116
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
3283
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3284
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
3285
+ outline-offset: var(--seed-dimension-x0_5);
3117
3286
  flex: none;
3118
3287
  position: relative;
3119
3288
  }
3120
3289
 
3290
+ .seed-checkmark__root:is(:focus-visible, [data-focus-visible]) {
3291
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
3292
+ outline-offset: var(--seed-dimension-x0_5);
3293
+ }
3294
+
3121
3295
  .seed-checkmark__icon {
3122
3296
  content: "";
3123
3297
  text-align: center;
@@ -3138,8 +3312,16 @@
3138
3312
  border-width: 0;
3139
3313
  }
3140
3314
 
3141
- .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3142
- background: var(--seed-color-bg-transparent-pressed);
3315
+ @media (hover: hover) {
3316
+ .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
3317
+ background: var(--seed-color-bg-transparent-pressed);
3318
+ }
3319
+ }
3320
+
3321
+ @media (hover: none) {
3322
+ .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3323
+ background: var(--seed-color-bg-transparent-pressed);
3324
+ }
3143
3325
  }
3144
3326
 
3145
3327
  .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
@@ -3155,8 +3337,16 @@
3155
3337
  color: var(--seed-color-fg-disabled);
3156
3338
  }
3157
3339
 
3158
- .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3159
- background: var(--seed-color-bg-transparent-pressed);
3340
+ @media (hover: hover) {
3341
+ .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
3342
+ background: var(--seed-color-bg-transparent-pressed);
3343
+ }
3344
+ }
3345
+
3346
+ @media (hover: none) {
3347
+ .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3348
+ background: var(--seed-color-bg-transparent-pressed);
3349
+ }
3160
3350
  }
3161
3351
 
3162
3352
  .seed-checkmark__icon--variant_ghost {
@@ -3185,8 +3375,16 @@
3185
3375
  background: var(--seed-color-bg-neutral-inverted);
3186
3376
  }
3187
3377
 
3188
- .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3189
- background: var(--seed-color-bg-neutral-inverted-pressed);
3378
+ @media (hover: hover) {
3379
+ .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3380
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3381
+ }
3382
+ }
3383
+
3384
+ @media (hover: none) {
3385
+ .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3386
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3387
+ }
3190
3388
  }
3191
3389
 
3192
3390
  .seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3197,24 +3395,48 @@
3197
3395
  background: var(--seed-color-bg-brand-solid);
3198
3396
  }
3199
3397
 
3200
- .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3201
- background: var(--seed-color-bg-brand-solid-pressed);
3398
+ @media (hover: hover) {
3399
+ .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3400
+ background: var(--seed-color-bg-brand-solid-pressed);
3401
+ }
3402
+ }
3403
+
3404
+ @media (hover: none) {
3405
+ .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3406
+ background: var(--seed-color-bg-brand-solid-pressed);
3407
+ }
3202
3408
  }
3203
3409
 
3204
3410
  .seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3205
3411
  color: var(--seed-color-palette-static-white);
3206
3412
  }
3207
3413
 
3208
- .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3209
- background: var(--seed-color-palette-gray-200);
3414
+ @media (hover: hover) {
3415
+ .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3416
+ background: var(--seed-color-palette-gray-200);
3417
+ }
3418
+ }
3419
+
3420
+ @media (hover: none) {
3421
+ .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3422
+ background: var(--seed-color-palette-gray-200);
3423
+ }
3210
3424
  }
3211
3425
 
3212
3426
  .seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3213
3427
  color: var(--seed-color-fg-neutral);
3214
3428
  }
3215
3429
 
3216
- .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3217
- background: var(--seed-color-palette-carrot-200);
3430
+ @media (hover: hover) {
3431
+ .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3432
+ background: var(--seed-color-palette-carrot-200);
3433
+ }
3434
+ }
3435
+
3436
+ @media (hover: none) {
3437
+ .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3438
+ background: var(--seed-color-palette-carrot-200);
3439
+ }
3218
3440
  }
3219
3441
 
3220
3442
  .seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3252,19 +3474,22 @@
3252
3474
  border-radius: var(--seed-radius-full);
3253
3475
  transition-duration: var(--seed-duration-color-transition);
3254
3476
  transition-timing-function: var(--seed-timing-function-easing);
3477
+ outline: var(--seed-dimension-x0_5) solid transparent;
3478
+ outline-offset: var(--seed-dimension-x0_5);
3255
3479
  border: none;
3256
3480
  flex-shrink: 0;
3257
3481
  justify-content: center;
3258
3482
  align-items: center;
3259
3483
  font-family: inherit;
3260
3484
  line-height: 1;
3261
- transition-property: background-color, color, border-color, box-shadow;
3485
+ transition-property: background-color, color, border-color, box-shadow, outline-color;
3262
3486
  display: inline-flex;
3263
3487
  position: relative;
3264
3488
  }
3265
3489
 
3266
- .seed-chip__root:is(:focus, [data-focus]) {
3267
- outline: none;
3490
+ .seed-chip__root:is(:focus-visible, [data-focus-visible]) {
3491
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3492
+ outline-offset: var(--seed-dimension-x0_5);
3268
3493
  }
3269
3494
 
3270
3495
  .seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
@@ -3311,12 +3536,28 @@
3311
3536
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3312
3537
  }
3313
3538
 
3314
- .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3315
- background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3539
+ @media (hover: hover) {
3540
+ .seed-chip__root--variant_solid:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3541
+ background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3542
+ }
3316
3543
  }
3317
3544
 
3318
- .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3319
- background: var(--seed-color-bg-neutral-inverted-pressed);
3545
+ @media (hover: none) {
3546
+ .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3547
+ background: var(--seed-color-bg-neutral-weak-alpha-pressed);
3548
+ }
3549
+ }
3550
+
3551
+ @media (hover: hover) {
3552
+ .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3553
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3554
+ }
3555
+ }
3556
+
3557
+ @media (hover: none) {
3558
+ .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3559
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3560
+ }
3320
3561
  }
3321
3562
 
3322
3563
  .seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
@@ -3341,8 +3582,16 @@
3341
3582
  --seed-icon-color: var(--seed-color-fg-neutral);
3342
3583
  }
3343
3584
 
3344
- .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3345
- background: var(--seed-color-bg-transparent-pressed);
3585
+ @media (hover: hover) {
3586
+ .seed-chip__root--variant_outlineStrong:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3587
+ background: var(--seed-color-bg-transparent-pressed);
3588
+ }
3589
+ }
3590
+
3591
+ @media (hover: none) {
3592
+ .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3593
+ background: var(--seed-color-bg-transparent-pressed);
3594
+ }
3346
3595
  }
3347
3596
 
3348
3597
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
@@ -3350,8 +3599,16 @@
3350
3599
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3351
3600
  }
3352
3601
 
3353
- .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3354
- background: var(--seed-color-bg-neutral-inverted-pressed);
3602
+ @media (hover: hover) {
3603
+ .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3604
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3605
+ }
3606
+ }
3607
+
3608
+ @media (hover: none) {
3609
+ .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3610
+ background: var(--seed-color-bg-neutral-inverted-pressed);
3611
+ }
3355
3612
  }
3356
3613
 
3357
3614
  .seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
@@ -3376,8 +3633,16 @@
3376
3633
  --seed-icon-color: var(--seed-color-fg-neutral);
3377
3634
  }
3378
3635
 
3379
- .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3380
- background: var(--seed-color-bg-transparent-pressed);
3636
+ @media (hover: hover) {
3637
+ .seed-chip__root--variant_outlineWeak:is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3638
+ background: var(--seed-color-bg-transparent-pressed);
3639
+ }
3640
+ }
3641
+
3642
+ @media (hover: none) {
3643
+ .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3644
+ background: var(--seed-color-bg-transparent-pressed);
3645
+ }
3381
3646
  }
3382
3647
 
3383
3648
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
@@ -3385,8 +3650,16 @@
3385
3650
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
3386
3651
  }
3387
3652
 
3388
- .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3389
- background: var(--seed-color-bg-neutral-weak-pressed);
3653
+ @media (hover: hover) {
3654
+ .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3655
+ background: var(--seed-color-bg-neutral-weak-pressed);
3656
+ }
3657
+ }
3658
+
3659
+ @media (hover: none) {
3660
+ .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3661
+ background: var(--seed-color-bg-neutral-weak-pressed);
3662
+ }
3390
3663
  }
3391
3664
 
3392
3665
  .seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
@@ -3515,13 +3788,20 @@
3515
3788
  padding-bottom: var(--seed-dimension-x2);
3516
3789
  font-family: inherit;
3517
3790
  font-weight: var(--seed-font-weight-medium);
3518
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
3791
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3792
+ outline: var(--seed-dimension-x0_5) solid transparent;
3793
+ outline-offset: var(--seed-dimension-x0_5);
3519
3794
  border: none;
3520
3795
  justify-content: center;
3521
3796
  align-items: center;
3522
3797
  display: flex;
3523
3798
  }
3524
3799
 
3800
+ .seed-chip-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
3801
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
3802
+ outline-offset: var(--seed-dimension-x0_5);
3803
+ }
3804
+
3525
3805
  .seed-chip-tabs__list--size_medium {
3526
3806
  gap: 8px;
3527
3807
  }
@@ -3554,12 +3834,28 @@
3554
3834
  color: var(--seed-color-fg-neutral-inverted);
3555
3835
  }
3556
3836
 
3557
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3558
- background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3837
+ @media (hover: hover) {
3838
+ .seed-chip-tabs__trigger--variant_neutralSolid:is(:hover, [data-hover]) {
3839
+ background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3840
+ }
3841
+ }
3842
+
3843
+ @media (hover: none) {
3844
+ .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3845
+ background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
3846
+ }
3847
+ }
3848
+
3849
+ @media (hover: hover) {
3850
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
3851
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3852
+ }
3559
3853
  }
3560
3854
 
3561
- .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3562
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
3855
+ @media (hover: none) {
3856
+ .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3857
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3858
+ }
3563
3859
  }
3564
3860
 
3565
3861
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -3584,12 +3880,28 @@
3584
3880
  border-color: #0000;
3585
3881
  }
3586
3882
 
3587
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
3588
- background-color: var(--seed-color-bg-transparent-pressed);
3883
+ @media (hover: hover) {
3884
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:hover, [data-hover]) {
3885
+ background-color: var(--seed-color-bg-transparent-pressed);
3886
+ }
3887
+ }
3888
+
3889
+ @media (hover: none) {
3890
+ .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
3891
+ background-color: var(--seed-color-bg-transparent-pressed);
3892
+ }
3893
+ }
3894
+
3895
+ @media (hover: hover) {
3896
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
3897
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3898
+ }
3589
3899
  }
3590
3900
 
3591
- .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3592
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
3901
+ @media (hover: none) {
3902
+ .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3903
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
3904
+ }
3593
3905
  }
3594
3906
 
3595
3907
  .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
@@ -3612,12 +3924,28 @@
3612
3924
  color: var(--seed-color-palette-static-white);
3613
3925
  }
3614
3926
 
3615
- .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
3616
- background-color: var(--seed-color-bg-neutral-weak-pressed);
3927
+ @media (hover: hover) {
3928
+ .seed-chip-tabs__trigger--variant_brandSolid:is(:hover, [data-hover]) {
3929
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
3930
+ }
3931
+ }
3932
+
3933
+ @media (hover: none) {
3934
+ .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
3935
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
3936
+ }
3617
3937
  }
3618
3938
 
3619
- .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3620
- background-color: var(--seed-color-bg-brand-solid-pressed);
3939
+ @media (hover: hover) {
3940
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
3941
+ background-color: var(--seed-color-bg-brand-solid-pressed);
3942
+ }
3943
+ }
3944
+
3945
+ @media (hover: none) {
3946
+ .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3947
+ background-color: var(--seed-color-bg-brand-solid-pressed);
3948
+ }
3621
3949
  }
3622
3950
 
3623
3951
  .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -3665,6 +3993,8 @@
3665
3993
  text-transform: none;
3666
3994
  -webkit-font-smoothing: antialiased;
3667
3995
  -moz-osx-font-smoothing: grayscale;
3996
+ outline: var(--seed-dimension-x0_5) solid transparent;
3997
+ outline-offset: var(--seed-dimension-x0_5);
3668
3998
  border: none;
3669
3999
  justify-content: center;
3670
4000
  align-items: center;
@@ -3673,8 +4003,9 @@
3673
4003
  display: inline-flex;
3674
4004
  }
3675
4005
 
3676
- .seed-contextual-floating-button:is(:focus, [data-focus]) {
3677
- outline: none;
4006
+ .seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
4007
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4008
+ outline-offset: var(--seed-dimension-x0_5);
3678
4009
  }
3679
4010
 
3680
4011
  .seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
@@ -3702,7 +4033,7 @@
3702
4033
  --seed-icon-size: 22px;
3703
4034
  --size: 16px;
3704
4035
  --thickness: 2px;
3705
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
4036
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
3706
4037
  }
3707
4038
 
3708
4039
  .seed-contextual-floating-button--variant_solid {
@@ -3714,8 +4045,16 @@
3714
4045
  --range-color: var(--seed-color-fg-neutral-inverted);
3715
4046
  }
3716
4047
 
3717
- .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
3718
- background: var(--seed-color-bg-neutral-inverted-pressed);
4048
+ @media (hover: hover) {
4049
+ .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
4050
+ background: var(--seed-color-bg-neutral-inverted-pressed);
4051
+ }
4052
+ }
4053
+
4054
+ @media (hover: none) {
4055
+ .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
4056
+ background: var(--seed-color-bg-neutral-inverted-pressed);
4057
+ }
3719
4058
  }
3720
4059
 
3721
4060
  .seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
@@ -3738,8 +4077,16 @@
3738
4077
  --range-color: var(--seed-color-fg-neutral);
3739
4078
  }
3740
4079
 
3741
- .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
3742
- background: var(--seed-color-bg-layer-floating-pressed);
4080
+ @media (hover: hover) {
4081
+ .seed-contextual-floating-button--variant_layer:is(:hover, [data-hover]) {
4082
+ background: var(--seed-color-bg-layer-floating-pressed);
4083
+ }
4084
+ }
4085
+
4086
+ @media (hover: none) {
4087
+ .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
4088
+ background: var(--seed-color-bg-layer-floating-pressed);
4089
+ }
3743
4090
  }
3744
4091
 
3745
4092
  .seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
@@ -4379,6 +4726,8 @@
4379
4726
  text-transform: none;
4380
4727
  -webkit-font-smoothing: antialiased;
4381
4728
  -moz-osx-font-smoothing: grayscale;
4729
+ outline: var(--seed-dimension-x0_5) solid transparent;
4730
+ outline-offset: var(--seed-dimension-x0_5);
4382
4731
  border: none;
4383
4732
  justify-content: center;
4384
4733
  align-items: center;
@@ -4387,8 +4736,9 @@
4387
4736
  display: inline-flex;
4388
4737
  }
4389
4738
 
4390
- .seed-floating-action-button__root:is(:focus, [data-focus]) {
4391
- outline: none;
4739
+ .seed-floating-action-button__root:is(:focus-visible, [data-focus-visible]) {
4740
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4741
+ outline-offset: var(--seed-dimension-x0_5);
4392
4742
  }
4393
4743
 
4394
4744
  .seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
@@ -4403,13 +4753,21 @@
4403
4753
  font-size: var(--seed-font-size-t5);
4404
4754
  line-height: var(--seed-line-height-t5);
4405
4755
  font-weight: var(--seed-font-weight-bold);
4406
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing);
4756
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), max-width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing), padding var(--seed-duration-d4) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4407
4757
  position: relative;
4408
4758
  overflow: hidden;
4409
4759
  }
4410
4760
 
4411
- .seed-floating-action-button__root:is(:active, [data-active]) {
4412
- background: var(--seed-color-bg-brand-solid-pressed);
4761
+ @media (hover: hover) {
4762
+ .seed-floating-action-button__root:is(:hover, [data-hover]) {
4763
+ background: var(--seed-color-bg-brand-solid-pressed);
4764
+ }
4765
+ }
4766
+
4767
+ @media (hover: none) {
4768
+ .seed-floating-action-button__root:is(:active, [data-active]) {
4769
+ background: var(--seed-color-bg-brand-solid-pressed);
4770
+ }
4413
4771
  }
4414
4772
 
4415
4773
  .seed-floating-action-button__icon {
@@ -4549,6 +4907,10 @@
4549
4907
  color: var(--seed-color-fg-neutral-inverted);
4550
4908
  --seed-icon-size: var(--seed-dimension-x3_5);
4551
4909
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
4910
+ border-radius: var(--seed-radius-r3);
4911
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4912
+ outline: var(--seed-dimension-x0_5) solid transparent;
4913
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4552
4914
  background: none;
4553
4915
  border: none;
4554
4916
  justify-content: center;
@@ -4556,10 +4918,15 @@
4556
4918
  display: flex;
4557
4919
  }
4558
4920
 
4921
+ .seed-help-bubble__closeButton:is(:focus-visible, [data-focus-visible]) {
4922
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4923
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4924
+ }
4925
+
4559
4926
  .seed-identity-placeholder__root {
4560
4927
  box-sizing: border-box;
4561
4928
  vertical-align: top;
4562
- background-color: var(--seed-color-palette-gray-400);
4929
+ background-color: var(--seed-color-palette-gray-500);
4563
4930
  justify-content: center;
4564
4931
  align-items: center;
4565
4932
  width: 100%;
@@ -4570,9 +4937,9 @@
4570
4937
 
4571
4938
  .seed-identity-placeholder__image {
4572
4939
  object-fit: cover;
4573
- fill: #f7f8fa;
4574
4940
  width: 100%;
4575
4941
  height: 100%;
4942
+ fill: var(--seed-color-palette-static-white-alpha-800);
4576
4943
  display: block;
4577
4944
  overflow: hidden;
4578
4945
  }
@@ -4650,13 +5017,22 @@
4650
5017
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
4651
5018
  bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
4652
5019
  left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
5020
+ outline: var(--seed-dimension-x0_5) solid transparent;
5021
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5022
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4653
5023
  position: absolute;
4654
5024
  }
4655
5025
 
4656
- .seed-image-frame-reaction-button:focus {
5026
+ .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
4657
5027
  outline: none;
4658
5028
  }
4659
5029
 
5030
+ .seed-image-frame-reaction-button:is(:focus-visible, [data-focus-visible]):before {
5031
+ border-radius: var(--seed-radius-r1);
5032
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5033
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5034
+ }
5035
+
4660
5036
  .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
4661
5037
  --seed-icon-color: var(--seed-color-bg-transparent);
4662
5038
  }
@@ -4840,7 +5216,7 @@
4840
5216
  border-radius: var(--seed-radius-r3);
4841
5217
  background-color: var(--seed-color-bg-transparent);
4842
5218
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
4843
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
5219
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4844
5220
  border: none;
4845
5221
  padding: 0;
4846
5222
  position: absolute;
@@ -4862,8 +5238,16 @@
4862
5238
  background-color: var(--seed-color-bg-disabled);
4863
5239
  }
4864
5240
 
4865
- .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
4866
- background-color: var(--seed-color-bg-transparent-pressed);
5241
+ @media (hover: hover) {
5242
+ .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:hover, [data-hover]) {
5243
+ background-color: var(--seed-color-bg-transparent-pressed);
5244
+ }
5245
+ }
5246
+
5247
+ @media (hover: none) {
5248
+ .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
5249
+ background-color: var(--seed-color-bg-transparent-pressed);
5250
+ }
4867
5251
  }
4868
5252
 
4869
5253
  .seed-input-button__button[data-readonly]:not([data-disabled]) {
@@ -4871,8 +5255,14 @@
4871
5255
  background-color: var(--seed-color-bg-disabled);
4872
5256
  }
4873
5257
 
4874
- .seed-input-button__button:is(:focus, [data-focus]) {
4875
- outline: none;
5258
+ .seed-input-button__button {
5259
+ outline: var(--seed-dimension-x0_5) solid transparent;
5260
+ outline-offset: var(--seed-dimension-x0_5);
5261
+ }
5262
+
5263
+ .seed-input-button__button:is(:focus-visible, [data-focus-visible]) {
5264
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5265
+ outline-offset: var(--seed-dimension-x0_5);
4876
5266
  }
4877
5267
 
4878
5268
  .seed-input-button__button:is(:invalid, [data-invalid]):after {
@@ -4954,13 +5344,25 @@
4954
5344
 
4955
5345
  .seed-input-button__clearButton {
4956
5346
  cursor: pointer;
4957
- --seed-icon-size: 22px;
4958
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
5347
+ border-radius: var(--seed-radius-full);
5348
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5349
+ outline: var(--seed-dimension-x0_5) solid transparent;
5350
+ outline-offset: var(--seed-dimension-x0_5);
4959
5351
  background-color: #0000;
4960
5352
  border: none;
4961
5353
  padding: 0;
4962
5354
  }
4963
5355
 
5356
+ .seed-input-button__clearButton:is(:focus-visible, [data-focus-visible]) {
5357
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5358
+ outline-offset: var(--seed-dimension-x0_5);
5359
+ }
5360
+
5361
+ .seed-input-button__clearButton {
5362
+ --seed-icon-size: 22px;
5363
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
5364
+ }
5365
+
4964
5366
  .seed-link-content {
4965
5367
  cursor: pointer;
4966
5368
  box-sizing: border-box;
@@ -5054,6 +5456,7 @@
5054
5456
  .seed-list-item__prefix {
5055
5457
  --seed-box-padding-right: var(--seed-dimension-x3);
5056
5458
  padding-right: var(--seed-box-padding-right);
5459
+ --seed-focus-ring: none;
5057
5460
  --seed-icon-size: 22px;
5058
5461
  --seed-icon-color: var(--seed-color-fg-neutral);
5059
5462
  flex-shrink: 0;
@@ -5071,6 +5474,7 @@
5071
5474
  --seed-box-gap: var(--seed-dimension-x1);
5072
5475
  align-items: center;
5073
5476
  gap: var(--seed-box-gap);
5477
+ --seed-focus-ring: none;
5074
5478
  font-size: var(--seed-font-size-t5);
5075
5479
  line-height: var(--seed-line-height-t5);
5076
5480
  font-weight: var(--seed-font-weight-regular);
@@ -5104,10 +5508,22 @@
5104
5508
 
5105
5509
  .seed-list-item__content:after {
5106
5510
  content: "";
5511
+ outline: var(--seed-dimension-x0_5) solid transparent;
5512
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5513
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5107
5514
  position: absolute;
5108
5515
  inset: 0;
5109
5516
  }
5110
5517
 
5518
+ .seed-list-item__content:is(:focus, [data-focus]) {
5519
+ outline: none;
5520
+ }
5521
+
5522
+ .seed-list-item__content:is(:focus-visible, [data-focus-visible]):after {
5523
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5524
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5525
+ }
5526
+
5111
5527
  .seed-list-item__content:before {
5112
5528
  content: "";
5113
5529
  z-index: -1;
@@ -5118,17 +5534,46 @@
5118
5534
  inset: 0;
5119
5535
  }
5120
5536
 
5121
- .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before, .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5122
- background-color: var(--seed-color-bg-transparent-pressed);
5123
- left: var(--seed-dimension-x1_5);
5124
- right: var(--seed-dimension-x1_5);
5125
- border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
5537
+ @media (hover: hover) {
5538
+ .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5539
+ background-color: var(--seed-color-bg-transparent-pressed);
5540
+ left: var(--seed-dimension-x1_5);
5541
+ right: var(--seed-dimension-x1_5);
5542
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
5543
+ }
5544
+ }
5545
+
5546
+ @media (hover: none) {
5547
+ .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5548
+ background-color: var(--seed-color-bg-transparent-pressed);
5549
+ left: var(--seed-dimension-x1_5);
5550
+ right: var(--seed-dimension-x1_5);
5551
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
5552
+ }
5553
+ }
5554
+
5555
+ @media (hover: hover) {
5556
+ .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
5557
+ background-color: var(--seed-color-bg-transparent-pressed);
5558
+ left: var(--seed-dimension-x1_5);
5559
+ right: var(--seed-dimension-x1_5);
5560
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
5561
+ }
5562
+ }
5563
+
5564
+ @media (hover: none) {
5565
+ .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5566
+ background-color: var(--seed-color-bg-transparent-pressed);
5567
+ left: var(--seed-dimension-x1_5);
5568
+ right: var(--seed-dimension-x1_5);
5569
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
5570
+ }
5126
5571
  }
5127
5572
 
5128
5573
  .seed-list-item__title {
5129
5574
  font-size: var(--seed-font-size-t5);
5130
5575
  line-height: var(--seed-line-height-t5);
5131
- font-weight: var(--seed-font-weight-medium);
5576
+ font-weight: var(--seed-font-weight-regular);
5132
5577
  color: var(--seed-color-fg-neutral);
5133
5578
  flex-shrink: 0;
5134
5579
  }
@@ -5152,8 +5597,28 @@
5152
5597
  background-color: var(--seed-color-bg-brand-weak);
5153
5598
  }
5154
5599
 
5155
- .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before, .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5156
- background-color: var(--seed-color-bg-brand-weak-pressed);
5600
+ @media (hover: hover) {
5601
+ .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]):before {
5602
+ background-color: var(--seed-color-bg-brand-weak-pressed);
5603
+ }
5604
+ }
5605
+
5606
+ @media (hover: none) {
5607
+ .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
5608
+ background-color: var(--seed-color-bg-brand-weak-pressed);
5609
+ }
5610
+ }
5611
+
5612
+ @media (hover: hover) {
5613
+ .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-hover]:before {
5614
+ background-color: var(--seed-color-bg-brand-weak-pressed);
5615
+ }
5616
+ }
5617
+
5618
+ @media (hover: none) {
5619
+ .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
5620
+ background-color: var(--seed-color-bg-brand-weak-pressed);
5621
+ }
5157
5622
  }
5158
5623
 
5159
5624
  .seed-manner-temp {
@@ -5378,15 +5843,33 @@
5378
5843
  font-size: var(--seed-font-size-t5);
5379
5844
  line-height: var(--seed-line-height-t5);
5380
5845
  font-weight: var(--seed-font-weight-medium);
5846
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5381
5847
  border: none;
5382
- outline: none;
5383
5848
  justify-content: center;
5384
5849
  align-items: center;
5385
5850
  display: flex;
5386
5851
  }
5387
5852
 
5388
- .seed-menu-sheet__closeButton:is(:active, [data-active]) {
5389
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5853
+ @media (hover: hover) {
5854
+ .seed-menu-sheet__closeButton:is(:hover, [data-hover]) {
5855
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
5856
+ }
5857
+ }
5858
+
5859
+ @media (hover: none) {
5860
+ .seed-menu-sheet__closeButton:is(:active, [data-active]) {
5861
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
5862
+ }
5863
+ }
5864
+
5865
+ .seed-menu-sheet__closeButton {
5866
+ outline: var(--seed-dimension-x0_5) solid transparent;
5867
+ outline-offset: var(--seed-dimension-x0_5);
5868
+ }
5869
+
5870
+ .seed-menu-sheet__closeButton:is(:focus-visible, [data-focus-visible]) {
5871
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5872
+ outline-offset: var(--seed-dimension-x0_5);
5390
5873
  }
5391
5874
 
5392
5875
  .seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
@@ -5442,20 +5925,45 @@
5442
5925
  gap: var(--seed-dimension-x3_5);
5443
5926
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
5444
5927
  border: none;
5445
- outline: none;
5446
5928
  margin: 0;
5447
5929
  font-family: inherit;
5448
5930
  display: flex;
5449
5931
  }
5450
5932
 
5451
- .seed-menu-sheet-item__root:is(:active, [data-active]) {
5452
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5933
+ @media (hover: hover) {
5934
+ .seed-menu-sheet-item__root:is(:hover, [data-hover]) {
5935
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
5936
+ }
5937
+ }
5938
+
5939
+ @media (hover: none) {
5940
+ .seed-menu-sheet-item__root:is(:active, [data-active]) {
5941
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
5942
+ }
5943
+ }
5944
+
5945
+ .seed-menu-sheet-item__root:first-child {
5946
+ border-top-left-radius: var(--seed-radius-r4);
5947
+ border-top-right-radius: var(--seed-radius-r4);
5453
5948
  }
5454
5949
 
5455
5950
  .seed-menu-sheet-item__root:last-child {
5951
+ border-bottom-left-radius: var(--seed-radius-r4);
5952
+ border-bottom-right-radius: var(--seed-radius-r4);
5456
5953
  box-shadow: none;
5457
5954
  }
5458
5955
 
5956
+ .seed-menu-sheet-item__root {
5957
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5958
+ outline: var(--seed-dimension-x0_5) solid transparent;
5959
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5960
+ }
5961
+
5962
+ .seed-menu-sheet-item__root:is(:focus-visible, [data-focus-visible]) {
5963
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5964
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5965
+ }
5966
+
5459
5967
  .seed-menu-sheet-item__root {
5460
5968
  --seed-prefix-icon-size: 22px;
5461
5969
  }
@@ -5599,6 +6107,14 @@
5599
6107
 
5600
6108
  .seed-page-banner__root:is(button) {
5601
6109
  cursor: pointer;
6110
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6111
+ outline: var(--seed-dimension-x0_5) solid transparent;
6112
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6113
+ }
6114
+
6115
+ .seed-page-banner__root:is(button):is(:focus-visible, [data-focus-visible]) {
6116
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6117
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5602
6118
  }
5603
6119
 
5604
6120
  .seed-page-banner__content {
@@ -5641,12 +6157,21 @@
5641
6157
  font-size: var(--seed-font-size-t3);
5642
6158
  line-height: var(--seed-line-height-t3);
5643
6159
  font-weight: var(--seed-font-weight-bold);
6160
+ border-radius: var(--seed-radius-r1);
6161
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6162
+ outline: var(--seed-dimension-x0_5) solid transparent;
6163
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5644
6164
  background-color: #0000;
5645
6165
  border: none;
5646
6166
  align-items: center;
5647
6167
  display: flex;
5648
6168
  }
5649
6169
 
6170
+ .seed-page-banner__button:is(:focus-visible, [data-focus-visible]) {
6171
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6172
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6173
+ }
6174
+
5650
6175
  .seed-page-banner__closeButton {
5651
6176
  width: var(--seed-dimension-x10);
5652
6177
  height: var(--seed-dimension-x10);
@@ -5654,6 +6179,10 @@
5654
6179
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
5655
6180
  --seed-suffix-icon-margin-left: initial;
5656
6181
  cursor: pointer;
6182
+ border-radius: var(--seed-radius-r1);
6183
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6184
+ outline: var(--seed-dimension-x0_5) solid transparent;
6185
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5657
6186
  background-color: #0000;
5658
6187
  border: none;
5659
6188
  flex-grow: 0;
@@ -5665,14 +6194,27 @@
5665
6194
  display: flex;
5666
6195
  }
5667
6196
 
6197
+ .seed-page-banner__closeButton:is(:focus-visible, [data-focus-visible]) {
6198
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6199
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6200
+ }
6201
+
5668
6202
  .seed-page-banner__root--tone_neutral-variant_weak {
5669
6203
  background-color: var(--seed-color-bg-neutral-weak);
5670
6204
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5671
6205
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
5672
6206
  }
5673
6207
 
5674
- .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
5675
- background-color: var(--seed-color-bg-neutral-weak-pressed);
6208
+ @media (hover: hover) {
6209
+ .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:hover, [data-hover]) {
6210
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
6211
+ }
6212
+ }
6213
+
6214
+ @media (hover: none) {
6215
+ .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
6216
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
6217
+ }
5676
6218
  }
5677
6219
 
5678
6220
  .seed-page-banner__title--tone_neutral-variant_weak, .seed-page-banner__description--tone_neutral-variant_weak, .seed-page-banner__button--tone_neutral-variant_weak {
@@ -5685,8 +6227,16 @@
5685
6227
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
5686
6228
  }
5687
6229
 
5688
- .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
5689
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
6230
+ @media (hover: hover) {
6231
+ .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
6232
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
6233
+ }
6234
+ }
6235
+
6236
+ @media (hover: none) {
6237
+ .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
6238
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
6239
+ }
5690
6240
  }
5691
6241
 
5692
6242
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
@@ -5699,8 +6249,16 @@
5699
6249
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
5700
6250
  }
5701
6251
 
5702
- .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
5703
- background-color: var(--seed-color-bg-informative-weak-pressed);
6252
+ @media (hover: hover) {
6253
+ .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:hover, [data-hover]) {
6254
+ background-color: var(--seed-color-bg-informative-weak-pressed);
6255
+ }
6256
+ }
6257
+
6258
+ @media (hover: none) {
6259
+ .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
6260
+ background-color: var(--seed-color-bg-informative-weak-pressed);
6261
+ }
5704
6262
  }
5705
6263
 
5706
6264
  .seed-page-banner__title--tone_informative-variant_weak, .seed-page-banner__description--tone_informative-variant_weak, .seed-page-banner__button--tone_informative-variant_weak {
@@ -5713,8 +6271,16 @@
5713
6271
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5714
6272
  }
5715
6273
 
5716
- .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
5717
- background-color: var(--seed-color-bg-informative-solid-pressed);
6274
+ @media (hover: hover) {
6275
+ .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
6276
+ background-color: var(--seed-color-bg-informative-solid-pressed);
6277
+ }
6278
+ }
6279
+
6280
+ @media (hover: none) {
6281
+ .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
6282
+ background-color: var(--seed-color-bg-informative-solid-pressed);
6283
+ }
5718
6284
  }
5719
6285
 
5720
6286
  .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
@@ -5727,8 +6293,16 @@
5727
6293
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
5728
6294
  }
5729
6295
 
5730
- .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
5731
- background-color: var(--seed-color-bg-positive-weak-pressed);
6296
+ @media (hover: hover) {
6297
+ .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:hover, [data-hover]) {
6298
+ background-color: var(--seed-color-bg-positive-weak-pressed);
6299
+ }
6300
+ }
6301
+
6302
+ @media (hover: none) {
6303
+ .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
6304
+ background-color: var(--seed-color-bg-positive-weak-pressed);
6305
+ }
5732
6306
  }
5733
6307
 
5734
6308
  .seed-page-banner__title--tone_positive-variant_weak, .seed-page-banner__description--tone_positive-variant_weak, .seed-page-banner__button--tone_positive-variant_weak {
@@ -5741,8 +6315,16 @@
5741
6315
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5742
6316
  }
5743
6317
 
5744
- .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
5745
- background-color: var(--seed-color-bg-positive-solid-pressed);
6318
+ @media (hover: hover) {
6319
+ .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
6320
+ background-color: var(--seed-color-bg-positive-solid-pressed);
6321
+ }
6322
+ }
6323
+
6324
+ @media (hover: none) {
6325
+ .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
6326
+ background-color: var(--seed-color-bg-positive-solid-pressed);
6327
+ }
5746
6328
  }
5747
6329
 
5748
6330
  .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
@@ -5755,8 +6337,16 @@
5755
6337
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
5756
6338
  }
5757
6339
 
5758
- .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
5759
- background-color: var(--seed-color-bg-warning-weak-pressed);
6340
+ @media (hover: hover) {
6341
+ .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:hover, [data-hover]) {
6342
+ background-color: var(--seed-color-bg-warning-weak-pressed);
6343
+ }
6344
+ }
6345
+
6346
+ @media (hover: none) {
6347
+ .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
6348
+ background-color: var(--seed-color-bg-warning-weak-pressed);
6349
+ }
5760
6350
  }
5761
6351
 
5762
6352
  .seed-page-banner__title--tone_warning-variant_weak, .seed-page-banner__description--tone_warning-variant_weak, .seed-page-banner__button--tone_warning-variant_weak {
@@ -5769,8 +6359,16 @@
5769
6359
  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
5770
6360
  }
5771
6361
 
5772
- .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
5773
- background-color: var(--seed-color-bg-warning-solid-pressed);
6362
+ @media (hover: hover) {
6363
+ .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
6364
+ background-color: var(--seed-color-bg-warning-solid-pressed);
6365
+ }
6366
+ }
6367
+
6368
+ @media (hover: none) {
6369
+ .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
6370
+ background-color: var(--seed-color-bg-warning-solid-pressed);
6371
+ }
5774
6372
  }
5775
6373
 
5776
6374
  .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
@@ -5783,8 +6381,16 @@
5783
6381
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
5784
6382
  }
5785
6383
 
5786
- .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
5787
- background-color: var(--seed-color-bg-critical-weak-pressed);
6384
+ @media (hover: hover) {
6385
+ .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:hover, [data-hover]) {
6386
+ background-color: var(--seed-color-bg-critical-weak-pressed);
6387
+ }
6388
+ }
6389
+
6390
+ @media (hover: none) {
6391
+ .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
6392
+ background-color: var(--seed-color-bg-critical-weak-pressed);
6393
+ }
5788
6394
  }
5789
6395
 
5790
6396
  .seed-page-banner__title--tone_critical-variant_weak, .seed-page-banner__description--tone_critical-variant_weak, .seed-page-banner__button--tone_critical-variant_weak {
@@ -5797,8 +6403,16 @@
5797
6403
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5798
6404
  }
5799
6405
 
5800
- .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
5801
- background-color: var(--seed-color-bg-critical-solid-pressed);
6406
+ @media (hover: hover) {
6407
+ .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
6408
+ background-color: var(--seed-color-bg-critical-solid-pressed);
6409
+ }
6410
+ }
6411
+
6412
+ @media (hover: none) {
6413
+ .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
6414
+ background-color: var(--seed-color-bg-critical-solid-pressed);
6415
+ }
5802
6416
  }
5803
6417
 
5804
6418
  .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
@@ -5811,8 +6425,16 @@
5811
6425
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
5812
6426
  }
5813
6427
 
5814
- .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
5815
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
6428
+ @media (hover: hover) {
6429
+ .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:hover, [data-hover]) {
6430
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
6431
+ }
6432
+ }
6433
+
6434
+ @media (hover: none) {
6435
+ .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
6436
+ background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
6437
+ }
5816
6438
  }
5817
6439
 
5818
6440
  .seed-page-banner__title--tone_magic-variant_weak, .seed-page-banner__description--tone_magic-variant_weak, .seed-page-banner__button--tone_magic-variant_weak {
@@ -5954,7 +6576,9 @@
5954
6576
  border-color: var(--seed-color-stroke-neutral-weak);
5955
6577
  border-radius: var(--seed-radius-full);
5956
6578
  margin-top: var(--radiomark-margin-top, 0);
5957
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
6579
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6580
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
6581
+ outline-offset: var(--seed-dimension-x0_5);
5958
6582
  flex: none;
5959
6583
  justify-content: center;
5960
6584
  align-items: center;
@@ -5962,8 +6586,16 @@
5962
6586
  position: relative;
5963
6587
  }
5964
6588
 
5965
- .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5966
- background-color: var(--seed-color-bg-transparent-pressed);
6589
+ @media (hover: hover) {
6590
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
6591
+ background-color: var(--seed-color-bg-transparent-pressed);
6592
+ }
6593
+ }
6594
+
6595
+ @media (hover: none) {
6596
+ .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6597
+ background-color: var(--seed-color-bg-transparent-pressed);
6598
+ }
5967
6599
  }
5968
6600
 
5969
6601
  .seed-radiomark__root:is(:checked, [data-checked]) {
@@ -5980,6 +6612,11 @@
5980
6612
  border-color: var(--seed-color-palette-gray-300);
5981
6613
  }
5982
6614
 
6615
+ .seed-radiomark__root:is(:focus-visible, [data-focus-visible]) {
6616
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
6617
+ outline-offset: var(--seed-dimension-x0_5);
6618
+ }
6619
+
5983
6620
  .seed-radiomark__icon {
5984
6621
  border-radius: var(--seed-radius-full);
5985
6622
  display: none;
@@ -5997,8 +6634,16 @@
5997
6634
  background-color: var(--seed-color-bg-neutral-inverted);
5998
6635
  }
5999
6636
 
6000
- .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6001
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
6637
+ @media (hover: hover) {
6638
+ .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
6639
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
6640
+ }
6641
+ }
6642
+
6643
+ @media (hover: none) {
6644
+ .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6645
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
6646
+ }
6002
6647
  }
6003
6648
 
6004
6649
  .seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
@@ -6009,8 +6654,16 @@
6009
6654
  background-color: var(--seed-color-bg-brand-solid);
6010
6655
  }
6011
6656
 
6012
- .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6013
- background-color: var(--seed-color-bg-brand-solid-pressed);
6657
+ @media (hover: hover) {
6658
+ .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
6659
+ background-color: var(--seed-color-bg-brand-solid-pressed);
6660
+ }
6661
+ }
6662
+
6663
+ @media (hover: none) {
6664
+ .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6665
+ background-color: var(--seed-color-bg-brand-solid-pressed);
6666
+ }
6014
6667
  }
6015
6668
 
6016
6669
  .seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
@@ -6055,6 +6708,8 @@
6055
6708
  vertical-align: middle;
6056
6709
  -webkit-font-smoothing: antialiased;
6057
6710
  -moz-osx-font-smoothing: grayscale;
6711
+ outline: var(--seed-dimension-x0_5) solid transparent;
6712
+ outline-offset: var(--seed-dimension-x0_5);
6058
6713
  border: none;
6059
6714
  flex-shrink: 0;
6060
6715
  justify-content: center;
@@ -6065,12 +6720,13 @@
6065
6720
  position: relative;
6066
6721
  }
6067
6722
 
6068
- .seed-reaction-button:is(:focus, [data-focus]) {
6069
- outline: none;
6723
+ .seed-reaction-button:is(:focus-visible, [data-focus-visible]) {
6724
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6725
+ outline-offset: var(--seed-dimension-x0_5);
6070
6726
  }
6071
6727
 
6072
6728
  .seed-reaction-button {
6073
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
6729
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6074
6730
  background: var(--seed-color-bg-transparent);
6075
6731
  font-weight: var(--seed-font-weight-medium);
6076
6732
  color: var(--seed-color-fg-neutral);
@@ -6081,8 +6737,16 @@
6081
6737
  --seed-count-color: var(--seed-color-fg-neutral);
6082
6738
  }
6083
6739
 
6084
- .seed-reaction-button:is(:active, [data-active]) {
6085
- background: var(--seed-color-bg-transparent-pressed);
6740
+ @media (hover: hover) {
6741
+ .seed-reaction-button:is(:hover, [data-hover]) {
6742
+ background: var(--seed-color-bg-transparent-pressed);
6743
+ }
6744
+ }
6745
+
6746
+ @media (hover: none) {
6747
+ .seed-reaction-button:is(:active, [data-active]) {
6748
+ background: var(--seed-color-bg-transparent-pressed);
6749
+ }
6086
6750
  }
6087
6751
 
6088
6752
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
@@ -6093,8 +6757,16 @@
6093
6757
  --seed-count-color: var(--seed-color-fg-brand);
6094
6758
  }
6095
6759
 
6096
- .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
6097
- background: var(--seed-color-bg-transparent-pressed);
6760
+ @media (hover: hover) {
6761
+ .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
6762
+ background: var(--seed-color-bg-transparent-pressed);
6763
+ }
6764
+ }
6765
+
6766
+ @media (hover: none) {
6767
+ .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
6768
+ background: var(--seed-color-bg-transparent-pressed);
6769
+ }
6098
6770
  }
6099
6771
 
6100
6772
  .seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
@@ -6228,7 +6900,7 @@
6228
6900
  font-size: var(--seed-font-size-t5);
6229
6901
  line-height: var(--seed-line-height-t5);
6230
6902
  color: var(--seed-color-fg-neutral-subtle);
6231
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
6903
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color var(--seed-duration-color-transition) var(--seed-timing-function-easing), box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6232
6904
  display: flex;
6233
6905
  }
6234
6906
 
@@ -6236,6 +6908,16 @@
6236
6908
  color: var(--seed-color-fg-neutral);
6237
6909
  }
6238
6910
 
6911
+ .seed-segmented-control__item {
6912
+ outline: var(--seed-dimension-x0_5) solid transparent;
6913
+ outline-offset: var(--seed-dimension-x0_5);
6914
+ }
6915
+
6916
+ .seed-segmented-control__item:is(:focus-visible, [data-focus-visible]) {
6917
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
6918
+ outline-offset: var(--seed-dimension-x0_5);
6919
+ }
6920
+
6239
6921
  .seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
6240
6922
  cursor: not-allowed;
6241
6923
  color: var(--seed-color-fg-disabled);
@@ -6246,14 +6928,32 @@
6246
6928
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6247
6929
  }
6248
6930
 
6249
- .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6250
- background-color: var(--seed-color-palette-gray-100);
6251
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6931
+ @media (hover: hover) {
6932
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
6933
+ background-color: var(--seed-color-palette-gray-100);
6934
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6935
+ }
6252
6936
  }
6253
6937
 
6254
- .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
6255
- background-color: var(--seed-color-bg-neutral-weak-pressed);
6256
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6938
+ @media (hover: none) {
6939
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6940
+ background-color: var(--seed-color-palette-gray-100);
6941
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6942
+ }
6943
+ }
6944
+
6945
+ @media (hover: hover) {
6946
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:hover, [data-hover]) {
6947
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
6948
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6949
+ }
6950
+ }
6951
+
6952
+ @media (hover: none) {
6953
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
6954
+ background-color: var(--seed-color-bg-neutral-weak-pressed);
6955
+ box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6956
+ }
6257
6957
  }
6258
6958
 
6259
6959
  .seed-select-box__root {
@@ -6261,7 +6961,7 @@
6261
6961
  border-radius: var(--seed-radius-r3);
6262
6962
  background-color: var(--seed-color-bg-transparent);
6263
6963
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6264
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
6964
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6265
6965
  flex-direction: column;
6266
6966
  display: flex;
6267
6967
  position: relative;
@@ -6278,8 +6978,16 @@
6278
6978
  inset: 0;
6279
6979
  }
6280
6980
 
6281
- .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6282
- background-color: var(--seed-color-bg-transparent-pressed);
6981
+ @media (hover: hover) {
6982
+ .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
6983
+ background-color: var(--seed-color-bg-transparent-pressed);
6984
+ }
6985
+ }
6986
+
6987
+ @media (hover: none) {
6988
+ .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6989
+ background-color: var(--seed-color-bg-transparent-pressed);
6990
+ }
6283
6991
  }
6284
6992
 
6285
6993
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
@@ -6296,9 +7004,20 @@
6296
7004
  box-shadow: inset 0 0 0 2px var(--seed-color-stroke-neutral-muted);
6297
7005
  }
6298
7006
 
7007
+ .seed-select-box__root {
7008
+ outline: var(--seed-dimension-x0_5) solid transparent;
7009
+ outline-offset: var(--seed-dimension-x0_5);
7010
+ }
7011
+
7012
+ .seed-select-box__root:is(:focus-visible, [data-focus-visible]) {
7013
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7014
+ outline-offset: var(--seed-dimension-x0_5);
7015
+ }
7016
+
6299
7017
  .seed-select-box__trigger {
6300
7018
  justify-content: space-between;
6301
7019
  gap: var(--seed-dimension-x1_5);
7020
+ --seed-focus-ring: none;
6302
7021
  flex-grow: 1;
6303
7022
  display: flex;
6304
7023
  }
@@ -6405,8 +7124,16 @@
6405
7124
  inset: 0;
6406
7125
  }
6407
7126
 
6408
- .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6409
- color: var(--seed-color-fg-neutral-subtle);
7127
+ @media (hover: hover) {
7128
+ .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:hover, [data-hover]) {
7129
+ color: var(--seed-color-fg-neutral-subtle);
7130
+ }
7131
+ }
7132
+
7133
+ @media (hover: none) {
7134
+ .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
7135
+ color: var(--seed-color-fg-neutral-subtle);
7136
+ }
6410
7137
  }
6411
7138
 
6412
7139
  .seed-selectBoxCheckmark__icon:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]) {
@@ -6494,6 +7221,14 @@
6494
7221
  display: flex;
6495
7222
  }
6496
7223
 
7224
+ .seed-slider__root[data-dragging] {
7225
+ cursor: grabbing;
7226
+ }
7227
+
7228
+ .seed-slider__root:is(:disabled, [disabled], [data-disabled]) {
7229
+ cursor: not-allowed;
7230
+ }
7231
+
6497
7232
  .seed-slider__control {
6498
7233
  align-items: center;
6499
7234
  height: 26px;
@@ -6562,14 +7297,18 @@
6562
7297
  content: "";
6563
7298
  background-color: var(--seed-color-bg-neutral-inverted);
6564
7299
  border-radius: var(--seed-radius-full);
6565
- transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing);
7300
+ outline: var(--seed-dimension-x0_5) solid transparent;
7301
+ outline-offset: var(--seed-dimension-x0_5);
7302
+ transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6566
7303
  will-change: transform;
7304
+ cursor: grab;
6567
7305
  position: absolute;
6568
7306
  inset: 0;
6569
7307
  }
6570
7308
 
6571
7309
  .seed-slider__thumb:is(:disabled, [disabled], [data-disabled]):after {
6572
7310
  background-color: var(--seed-color-fg-disabled);
7311
+ cursor: not-allowed;
6573
7312
  }
6574
7313
 
6575
7314
  .seed-slider__thumb[data-dragging] {
@@ -6584,6 +7323,11 @@
6584
7323
  outline: none;
6585
7324
  }
6586
7325
 
7326
+ .seed-slider__thumb:is(:focus-visible, [data-focus-visible]):after {
7327
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7328
+ outline-offset: var(--seed-dimension-x0_5);
7329
+ }
7330
+
6587
7331
  .seed-slider__markers {
6588
7332
  height: var(--seed-line-height-t3);
6589
7333
  position: relative;
@@ -6591,6 +7335,8 @@
6591
7335
 
6592
7336
  .seed-slider__valueIndicatorRoot {
6593
7337
  box-sizing: border-box;
7338
+ transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
7339
+ will-change: left, right;
6594
7340
  background: var(--seed-color-bg-neutral-inverted);
6595
7341
  padding-left: var(--seed-dimension-x2);
6596
7342
  padding-right: var(--seed-dimension-x2);
@@ -6664,6 +7410,10 @@
6664
7410
  animation-fill-mode: forwards;
6665
7411
  }
6666
7412
 
7413
+ .seed-slider__valueIndicatorRoot[data-dragging] {
7414
+ transition: none;
7415
+ }
7416
+
6667
7417
  .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
6668
7418
  animation-duration: 0s;
6669
7419
  }
@@ -6671,6 +7421,8 @@
6671
7421
  .seed-slider__valueIndicatorArrow {
6672
7422
  width: var(--seed-dimension-x2);
6673
7423
  height: var(--seed-dimension-x2);
7424
+ transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
7425
+ will-change: left, right;
6674
7426
  position: absolute;
6675
7427
  top: 100%;
6676
7428
  }
@@ -6685,6 +7437,10 @@
6685
7437
  transform: translateX(50%);
6686
7438
  }
6687
7439
 
7440
+ .seed-slider__valueIndicatorArrow[data-dragging] {
7441
+ transition: none;
7442
+ }
7443
+
6688
7444
  .seed-slider__valueIndicatorArrowTip {
6689
7445
  fill: var(--seed-color-bg-neutral-inverted);
6690
7446
  width: var(--seed-dimension-x2);
@@ -6802,6 +7558,17 @@
6802
7558
  animation-fill-mode: forwards;
6803
7559
  }
6804
7560
 
7561
+ .seed-snackbar__root {
7562
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7563
+ outline: var(--seed-dimension-x0_5) solid transparent;
7564
+ outline-offset: var(--seed-dimension-x0_5);
7565
+ }
7566
+
7567
+ .seed-snackbar__root:is(:focus-visible, [data-focus-visible]) {
7568
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7569
+ outline-offset: var(--seed-dimension-x0_5);
7570
+ }
7571
+
6805
7572
  .seed-snackbar__content {
6806
7573
  padding-left: var(--seed-dimension-x1_5);
6807
7574
  padding-right: var(--seed-dimension-x1_5);
@@ -6839,7 +7606,6 @@
6839
7606
  line-height: var(--seed-line-height-t4);
6840
7607
  font-weight: var(--seed-font-weight-bold);
6841
7608
  border: none;
6842
- outline: none;
6843
7609
  flex-shrink: 0;
6844
7610
  justify-content: center;
6845
7611
  align-items: center;
@@ -6853,12 +7619,25 @@
6853
7619
  top: 50%;
6854
7620
  left: calc(-1 * var(--seed-dimension-x2));
6855
7621
  right: calc(-1 * var(--seed-dimension-x2));
6856
- background: none;
7622
+ outline: var(--seed-dimension-x0_5) solid transparent;
7623
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6857
7624
  min-height: 44px;
7625
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7626
+ background: none;
6858
7627
  position: absolute;
6859
7628
  transform: translateY(-50%);
6860
7629
  }
6861
7630
 
7631
+ .seed-snackbar__actionButton:is(:focus, [data-focus]) {
7632
+ outline: none;
7633
+ }
7634
+
7635
+ .seed-snackbar__actionButton:is(:focus-visible, [data-focus-visible]):after {
7636
+ border-radius: var(--seed-radius-r1);
7637
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7638
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
7639
+ }
7640
+
6862
7641
  .seed-snackbar__prefixIcon--variant_default {
6863
7642
  display: none;
6864
7643
  }
@@ -6954,7 +7733,7 @@
6954
7733
  border-radius: var(--seed-radius-full);
6955
7734
  background: var(--seed-color-palette-gray-600);
6956
7735
  margin: var(--switchmark-margin-top, 0) 0;
6957
- transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing);
7736
+ transition: background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms, opacity var(--seed-duration-d1) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
6958
7737
  display: block;
6959
7738
  position: relative;
6960
7739
  }
@@ -6963,6 +7742,16 @@
6963
7742
  opacity: .38;
6964
7743
  }
6965
7744
 
7745
+ .seed-switchmark__root {
7746
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid transparent);
7747
+ outline-offset: var(--seed-dimension-x0_5);
7748
+ }
7749
+
7750
+ .seed-switchmark__root:is(:focus-visible, [data-focus-visible]) {
7751
+ outline: var(--seed-focus-ring, var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring));
7752
+ outline-offset: var(--seed-dimension-x0_5);
7753
+ }
7754
+
6966
7755
  .seed-switchmark__thumb {
6967
7756
  border-radius: var(--seed-radius-full);
6968
7757
  transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
@@ -7134,6 +7923,17 @@
7134
7923
  bottom: 0;
7135
7924
  }
7136
7925
 
7926
+ .seed-tabs__trigger {
7927
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7928
+ outline: var(--seed-dimension-x0_5) solid transparent;
7929
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
7930
+ }
7931
+
7932
+ .seed-tabs__trigger:is(:focus-visible, [data-focus-visible]) {
7933
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7934
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
7935
+ }
7936
+
7137
7937
  .seed-tabs__list--triggerLayout_fill {
7138
7938
  justify-content: space-around;
7139
7939
  padding-left: 0;
@@ -7808,7 +8608,12 @@
7808
8608
  }
7809
8609
  }
7810
8610
 
7811
- .seed-text-input__value:is(:disabled, [disabled], [data-disabled]), .seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
8611
+ .seed-text-input__value:is(:disabled, [disabled], [data-disabled]) {
8612
+ color: var(--seed-color-fg-disabled);
8613
+ cursor: not-allowed;
8614
+ }
8615
+
8616
+ .seed-text-input__value:is(:disabled, [disabled], [data-disabled])::placeholder {
7812
8617
  color: var(--seed-color-fg-disabled);
7813
8618
  }
7814
8619
 
@@ -7992,6 +8797,8 @@
7992
8797
  vertical-align: middle;
7993
8798
  -webkit-font-smoothing: antialiased;
7994
8799
  -moz-osx-font-smoothing: grayscale;
8800
+ outline: var(--seed-dimension-x0_5) solid transparent;
8801
+ outline-offset: var(--seed-dimension-x0_5);
7995
8802
  border: none;
7996
8803
  flex-shrink: 0;
7997
8804
  justify-content: center;
@@ -8002,8 +8809,9 @@
8002
8809
  position: relative;
8003
8810
  }
8004
8811
 
8005
- .seed-toggle-button:is(:focus, [data-focus]) {
8006
- outline: none;
8812
+ .seed-toggle-button:is(:focus-visible, [data-focus-visible]) {
8813
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8814
+ outline-offset: var(--seed-dimension-x0_5);
8007
8815
  }
8008
8816
 
8009
8817
  .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
@@ -8011,7 +8819,7 @@
8011
8819
  }
8012
8820
 
8013
8821
  .seed-toggle-button {
8014
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8822
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8015
8823
  font-weight: var(--seed-font-weight-bold);
8016
8824
  }
8017
8825
 
@@ -8022,8 +8830,16 @@
8022
8830
  --range-color: var(--seed-color-palette-static-white);
8023
8831
  }
8024
8832
 
8025
- .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
8026
- background: var(--seed-color-bg-brand-solid-pressed);
8833
+ @media (hover: hover) {
8834
+ .seed-toggle-button--variant_brandSolid:is(:hover, [data-hover]) {
8835
+ background: var(--seed-color-bg-brand-solid-pressed);
8836
+ }
8837
+ }
8838
+
8839
+ @media (hover: none) {
8840
+ .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
8841
+ background: var(--seed-color-bg-brand-solid-pressed);
8842
+ }
8027
8843
  }
8028
8844
 
8029
8845
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
@@ -8035,8 +8851,16 @@
8035
8851
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8036
8852
  }
8037
8853
 
8038
- .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8039
- background: var(--seed-color-bg-neutral-weak-pressed);
8854
+ @media (hover: hover) {
8855
+ .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
8856
+ background: var(--seed-color-bg-neutral-weak-pressed);
8857
+ }
8858
+ }
8859
+
8860
+ @media (hover: none) {
8861
+ .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8862
+ background: var(--seed-color-bg-neutral-weak-pressed);
8863
+ }
8040
8864
  }
8041
8865
 
8042
8866
  .seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -8066,8 +8890,16 @@
8066
8890
  --range-color: var(--seed-color-fg-neutral);
8067
8891
  }
8068
8892
 
8069
- .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
8070
- background: var(--seed-color-bg-neutral-weak-pressed);
8893
+ @media (hover: hover) {
8894
+ .seed-toggle-button--variant_neutralWeak:is(:hover, [data-hover]) {
8895
+ background: var(--seed-color-bg-neutral-weak-pressed);
8896
+ }
8897
+ }
8898
+
8899
+ @media (hover: none) {
8900
+ .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
8901
+ background: var(--seed-color-bg-neutral-weak-pressed);
8902
+ }
8071
8903
  }
8072
8904
 
8073
8905
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
@@ -8079,8 +8911,16 @@
8079
8911
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8080
8912
  }
8081
8913
 
8082
- .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8083
- background: var(--seed-color-bg-neutral-weak-pressed);
8914
+ @media (hover: hover) {
8915
+ .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:hover, [data-hover]) {
8916
+ background: var(--seed-color-bg-neutral-weak-pressed);
8917
+ }
8918
+ }
8919
+
8920
+ @media (hover: none) {
8921
+ .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8922
+ background: var(--seed-color-bg-neutral-weak-pressed);
8923
+ }
8084
8924
  }
8085
8925
 
8086
8926
  .seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {