@seed-design/css 1.2.2 → 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 (216) hide show
  1. package/all.css +1033 -192
  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 +9 -1
  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.css +0 -2
  29. package/recipes/aspect-ratio.layered.css +26 -0
  30. package/recipes/aspect-ratio.layered.mjs +22 -0
  31. package/recipes/avatar-stack.layered.css +94 -0
  32. package/recipes/avatar-stack.layered.mjs +50 -0
  33. package/recipes/avatar.layered.css +222 -0
  34. package/recipes/avatar.layered.mjs +65 -0
  35. package/recipes/badge.layered.css +140 -0
  36. package/recipes/badge.layered.mjs +131 -0
  37. package/recipes/bottom-sheet-handle.css +9 -2
  38. package/recipes/bottom-sheet-handle.layered.css +36 -0
  39. package/recipes/bottom-sheet-handle.layered.mjs +36 -0
  40. package/recipes/bottom-sheet.css +14 -3
  41. package/recipes/bottom-sheet.layered.css +224 -0
  42. package/recipes/bottom-sheet.layered.mjs +75 -0
  43. package/recipes/callout.css +77 -12
  44. package/recipes/callout.layered.css +242 -0
  45. package/recipes/callout.layered.mjs +63 -0
  46. package/recipes/checkbox-group.layered.css +7 -0
  47. package/recipes/checkbox-group.layered.mjs +22 -0
  48. package/recipes/checkbox.layered.css +54 -0
  49. package/recipes/checkbox.layered.mjs +48 -0
  50. package/recipes/checkmark.css +61 -13
  51. package/recipes/checkmark.layered.css +187 -0
  52. package/recipes/checkmark.layered.mjs +86 -0
  53. package/recipes/chip-tabs.css +62 -14
  54. package/recipes/chip-tabs.layered.css +254 -0
  55. package/recipes/chip-tabs.layered.mjs +75 -0
  56. package/recipes/chip.css +60 -15
  57. package/recipes/chip.layered.css +272 -0
  58. package/recipes/chip.layered.mjs +80 -0
  59. package/recipes/contextual-floating-button.css +24 -7
  60. package/recipes/contextual-floating-button.layered.css +130 -0
  61. package/recipes/contextual-floating-button.layered.mjs +34 -0
  62. package/recipes/control-chip.layered.css +99 -0
  63. package/recipes/control-chip.layered.mjs +51 -0
  64. package/recipes/dialog.layered.css +111 -0
  65. package/recipes/dialog.layered.mjs +66 -0
  66. package/recipes/extended-action-sheet-item.layered.css +38 -0
  67. package/recipes/extended-action-sheet-item.layered.mjs +29 -0
  68. package/recipes/extended-action-sheet.layered.css +132 -0
  69. package/recipes/extended-action-sheet.layered.mjs +64 -0
  70. package/recipes/extended-fab.layered.css +79 -0
  71. package/recipes/extended-fab.layered.mjs +34 -0
  72. package/recipes/fab.layered.css +37 -0
  73. package/recipes/fab.layered.mjs +22 -0
  74. package/recipes/field-label.layered.css +35 -0
  75. package/recipes/field-label.layered.mjs +47 -0
  76. package/recipes/field.layered.css +81 -0
  77. package/recipes/field.layered.mjs +60 -0
  78. package/recipes/floating-action-button.css +15 -5
  79. package/recipes/floating-action-button.layered.css +101 -0
  80. package/recipes/floating-action-button.layered.mjs +47 -0
  81. package/recipes/help-bubble.css +8 -0
  82. package/recipes/help-bubble.layered.css +104 -0
  83. package/recipes/help-bubble.layered.mjs +60 -0
  84. package/recipes/identity-placeholder.css +2 -2
  85. package/recipes/identity-placeholder.d.ts +1 -1
  86. package/recipes/identity-placeholder.layered.css +22 -0
  87. package/recipes/identity-placeholder.layered.mjs +43 -0
  88. package/recipes/identity-placeholder.mjs +2 -1
  89. package/recipes/image-frame-icon.layered.css +8 -0
  90. package/recipes/image-frame-icon.layered.mjs +22 -0
  91. package/recipes/image-frame-indicator.layered.css +18 -0
  92. package/recipes/image-frame-indicator.layered.mjs +22 -0
  93. package/recipes/image-frame-reaction-button.css +9 -1
  94. package/recipes/image-frame-reaction-button.layered.css +43 -0
  95. package/recipes/image-frame-reaction-button.layered.mjs +22 -0
  96. package/recipes/image-frame.layered.css +28 -0
  97. package/recipes/image-frame.layered.mjs +34 -0
  98. package/recipes/inline-banner.layered.css +161 -0
  99. package/recipes/inline-banner.layered.mjs +64 -0
  100. package/recipes/input-button.css +27 -5
  101. package/recipes/input-button.layered.css +167 -0
  102. package/recipes/input-button.layered.mjs +64 -0
  103. package/recipes/link-content.layered.css +48 -0
  104. package/recipes/link-content.layered.mjs +35 -0
  105. package/recipes/list-header.layered.css +26 -0
  106. package/recipes/list-header.layered.mjs +29 -0
  107. package/recipes/list-item.css +63 -17
  108. package/recipes/list-item.layered.css +187 -0
  109. package/recipes/list-item.layered.mjs +59 -0
  110. package/recipes/manner-temp-badge.layered.css +72 -0
  111. package/recipes/manner-temp-badge.layered.mjs +37 -0
  112. package/recipes/manner-temp.layered.css +57 -0
  113. package/recipes/manner-temp.layered.mjs +37 -0
  114. package/recipes/menu-sheet-item.css +24 -3
  115. package/recipes/menu-sheet-item.layered.css +102 -0
  116. package/recipes/menu-sheet-item.layered.mjs +56 -0
  117. package/recipes/menu-sheet.css +18 -3
  118. package/recipes/menu-sheet.layered.css +167 -0
  119. package/recipes/menu-sheet.layered.mjs +74 -0
  120. package/recipes/notification-badge-positioner.layered.css +35 -0
  121. package/recipes/notification-badge-positioner.layered.mjs +51 -0
  122. package/recipes/notification-badge.layered.css +33 -0
  123. package/recipes/notification-badge.layered.mjs +29 -0
  124. package/recipes/page-banner.css +122 -22
  125. package/recipes/page-banner.layered.css +361 -0
  126. package/recipes/page-banner.layered.mjs +117 -0
  127. package/recipes/progress-circle.layered.css +52 -0
  128. package/recipes/progress-circle.layered.mjs +55 -0
  129. package/recipes/pull-to-refresh.layered.css +19 -0
  130. package/recipes/pull-to-refresh.layered.mjs +36 -0
  131. package/recipes/radio-group.layered.css +7 -0
  132. package/recipes/radio-group.layered.mjs +22 -0
  133. package/recipes/radio.layered.css +54 -0
  134. package/recipes/radio.layered.mjs +48 -0
  135. package/recipes/radiomark.css +34 -7
  136. package/recipes/radiomark.layered.css +132 -0
  137. package/recipes/radiomark.layered.mjs +48 -0
  138. package/recipes/reaction-button.css +24 -7
  139. package/recipes/reaction-button.layered.css +124 -0
  140. package/recipes/reaction-button.layered.mjs +29 -0
  141. package/recipes/scroll-fog.layered.css +27 -0
  142. package/recipes/scroll-fog.layered.mjs +28 -0
  143. package/recipes/segmented-control.css +31 -5
  144. package/recipes/segmented-control.layered.css +108 -0
  145. package/recipes/segmented-control.layered.mjs +40 -0
  146. package/recipes/select-box-group.layered.css +13 -0
  147. package/recipes/select-box-group.layered.mjs +22 -0
  148. package/recipes/select-box.css +19 -3
  149. package/recipes/select-box.layered.css +148 -0
  150. package/recipes/select-box.layered.mjs +63 -0
  151. package/recipes/selectBoxCheckmark.css +9 -2
  152. package/recipes/selectBoxCheckmark.layered.css +42 -0
  153. package/recipes/selectBoxCheckmark.layered.mjs +36 -0
  154. package/recipes/skeleton.layered.css +56 -0
  155. package/recipes/skeleton.layered.mjs +36 -0
  156. package/recipes/slider-marker.layered.css +54 -0
  157. package/recipes/slider-marker.layered.mjs +30 -0
  158. package/recipes/slider-tick.layered.css +25 -0
  159. package/recipes/slider-tick.layered.mjs +29 -0
  160. package/recipes/slider.css +41 -16
  161. package/recipes/slider.layered.css +238 -0
  162. package/recipes/slider.layered.mjs +68 -0
  163. package/recipes/snackbar-region.layered.css +18 -0
  164. package/recipes/snackbar-region.layered.mjs +22 -0
  165. package/recipes/snackbar.css +20 -1
  166. package/recipes/snackbar.layered.css +126 -0
  167. package/recipes/snackbar.layered.mjs +56 -0
  168. package/recipes/switch.layered.css +62 -0
  169. package/recipes/switch.layered.mjs +44 -0
  170. package/recipes/switchmark.css +9 -1
  171. package/recipes/switchmark.layered.css +100 -0
  172. package/recipes/switchmark.layered.mjs +49 -0
  173. package/recipes/tabs.css +9 -0
  174. package/recipes/tabs.layered.css +211 -0
  175. package/recipes/tabs.layered.mjs +78 -0
  176. package/recipes/tag-group-item.layered.css +98 -0
  177. package/recipes/tag-group-item.layered.mjs +55 -0
  178. package/recipes/tag-group.layered.css +58 -0
  179. package/recipes/tag-group.layered.mjs +62 -0
  180. package/recipes/text-input.css +1 -0
  181. package/recipes/text-input.layered.css +236 -0
  182. package/recipes/text-input.layered.mjs +73 -0
  183. package/recipes/text.layered.css +364 -0
  184. package/recipes/text.layered.mjs +90 -0
  185. package/recipes/toggle-button.css +42 -11
  186. package/recipes/toggle-button.layered.css +183 -0
  187. package/recipes/toggle-button.layered.mjs +34 -0
  188. package/vars/color/stroke.d.ts +2 -1
  189. package/vars/color/stroke.mjs +2 -1
  190. package/vars/component/action-button.d.ts +61 -61
  191. package/vars/component/bottom-sheet.d.ts +3 -3
  192. package/vars/component/bottom-sheet.mjs +3 -3
  193. package/vars/component/callout.d.ts +7 -7
  194. package/vars/component/chip-tab.d.ts +2 -1
  195. package/vars/component/chip-tab.mjs +2 -1
  196. package/vars/component/contextual-floating-button.d.ts +2 -2
  197. package/vars/component/identity-placeholder.d.ts +2 -2
  198. package/vars/component/identity-placeholder.mjs +2 -2
  199. package/vars/component/image-frame-floater.d.ts +1 -1
  200. package/vars/component/image-frame.d.ts +11 -17
  201. package/vars/component/image-frame.mjs +7 -12
  202. package/vars/component/index.d.ts +1 -0
  203. package/vars/component/index.mjs +1 -0
  204. package/vars/component/input-button.d.ts +1 -1
  205. package/vars/component/list-item.d.ts +1 -1
  206. package/vars/component/list-item.mjs +1 -1
  207. package/vars/component/segmented-control-indicator.d.ts +24 -0
  208. package/vars/component/segmented-control-indicator.mjs +24 -0
  209. package/vars/component/segmented-control-item.d.ts +3 -11
  210. package/vars/component/segmented-control-item.mjs +3 -11
  211. package/vars/component/segmented-control.d.ts +0 -8
  212. package/vars/component/segmented-control.mjs +0 -8
  213. package/vars/component/select-box.d.ts +1 -1
  214. package/vars/component/slider.d.ts +14 -10
  215. package/vars/component/slider.mjs +11 -10
  216. package/vars/component/text-input.d.ts +1 -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]) {
@@ -1373,8 +1436,6 @@
1373
1436
 
1374
1437
  .seed-aspect-ratio {
1375
1438
  --seed-aspect-ratio-padding: 75%;
1376
- position: relative;
1377
- overflow: hidden;
1378
1439
  }
1379
1440
 
1380
1441
  .seed-aspect-ratio:before {
@@ -1430,6 +1491,10 @@
1430
1491
  }
1431
1492
 
1432
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);
1433
1498
  background: none;
1434
1499
  border: none;
1435
1500
  justify-content: center;
@@ -1439,6 +1504,11 @@
1439
1504
  display: flex;
1440
1505
  }
1441
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
+
1442
1512
  .seed-app-bar__icon {
1443
1513
  flex-shrink: 0;
1444
1514
  display: inline-block;
@@ -1671,7 +1741,7 @@
1671
1741
  }
1672
1742
 
1673
1743
  .seed-app-bar__root--tone_layer:before {
1674
- background-color: var(--seed-color-bg-layer-default);
1744
+ background: var(--seed-box-background, var(--seed-color-bg-layer-default));
1675
1745
  }
1676
1746
 
1677
1747
  .seed-app-bar__icon--tone_layer {
@@ -2785,10 +2855,23 @@
2785
2855
 
2786
2856
  .seed-bottom-sheet__closeButton:after {
2787
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);
2788
2861
  position: absolute;
2789
2862
  inset: -8px;
2790
2863
  }
2791
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
+
2792
2875
  .seed-bottom-sheet__header--headerAlign_left {
2793
2876
  justify-content: flex-start;
2794
2877
  }
@@ -2800,7 +2883,7 @@
2800
2883
 
2801
2884
  .seed-bottom-sheet__title--headerAlign_left[data-show-close-button] {
2802
2885
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
2803
- padding-right: 50px;
2886
+ padding-right: 56px;
2804
2887
  }
2805
2888
 
2806
2889
  .seed-bottom-sheet__header--headerAlign_center {
@@ -2814,8 +2897,8 @@
2814
2897
  }
2815
2898
 
2816
2899
  .seed-bottom-sheet__title--headerAlign_center[data-show-close-button] {
2817
- padding-left: 60px;
2818
- padding-right: 60px;
2900
+ padding-left: 56px;
2901
+ padding-right: 56px;
2819
2902
  }
2820
2903
 
2821
2904
  .seed-bottom-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open])[data-snap-points="false"]:not([data-animation-done="true"]) {
@@ -2872,8 +2955,16 @@
2872
2955
  transform: translateX(-50%);
2873
2956
  }
2874
2957
 
2875
- .seed-bottom-sheet-handle__root:is(:active, [data-active]) {
2876
- 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
+ }
2877
2968
  }
2878
2969
 
2879
2970
  .seed-bottom-sheet-handle__touchArea {
@@ -2911,6 +3002,14 @@
2911
3002
 
2912
3003
  .seed-callout__root:is(button, a) {
2913
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);
2914
3013
  }
2915
3014
 
2916
3015
  .seed-callout__content {
@@ -2947,6 +3046,10 @@
2947
3046
  line-height: var(--seed-line-height-t4);
2948
3047
  font-weight: var(--seed-font-weight-regular);
2949
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);
2950
3053
  background-color: #0000;
2951
3054
  border: none;
2952
3055
  padding: 0;
@@ -2954,11 +3057,20 @@
2954
3057
  display: inline-block;
2955
3058
  }
2956
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
+
2957
3065
  .seed-callout__closeButton {
2958
3066
  cursor: pointer;
2959
3067
  width: var(--seed-dimension-x10);
2960
3068
  height: var(--seed-dimension-x10);
2961
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);
2962
3074
  background-color: #0000;
2963
3075
  border: none;
2964
3076
  flex-grow: 0;
@@ -2969,14 +3081,27 @@
2969
3081
  display: flex;
2970
3082
  }
2971
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
+
2972
3089
  .seed-callout__root--tone_neutral {
2973
3090
  background-color: var(--seed-color-bg-neutral-weak);
2974
3091
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2975
3092
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
2976
3093
  }
2977
3094
 
2978
- .seed-callout__root--tone_neutral:is(button, a):is(:active, [data-active]) {
2979
- 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
+ }
2980
3105
  }
2981
3106
 
2982
3107
  .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
@@ -2989,8 +3114,16 @@
2989
3114
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
2990
3115
  }
2991
3116
 
2992
- .seed-callout__root--tone_informative:is(button, a):is(:active, [data-active]) {
2993
- 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
+ }
2994
3127
  }
2995
3128
 
2996
3129
  .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
@@ -3003,8 +3136,16 @@
3003
3136
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
3004
3137
  }
3005
3138
 
3006
- .seed-callout__root--tone_positive:is(button, a):is(:active, [data-active]) {
3007
- 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
+ }
3008
3149
  }
3009
3150
 
3010
3151
  .seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
@@ -3017,8 +3158,16 @@
3017
3158
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
3018
3159
  }
3019
3160
 
3020
- .seed-callout__root--tone_warning:is(button, a):is(:active, [data-active]) {
3021
- 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
+ }
3022
3171
  }
3023
3172
 
3024
3173
  .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
@@ -3031,8 +3180,16 @@
3031
3180
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
3032
3181
  }
3033
3182
 
3034
- .seed-callout__root--tone_critical:is(button, a):is(:active, [data-active]) {
3035
- 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
+ }
3036
3193
  }
3037
3194
 
3038
3195
  .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
@@ -3045,8 +3202,16 @@
3045
3202
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
3046
3203
  }
3047
3204
 
3048
- .seed-callout__root--tone_magic:is(button, a):is(:active, [data-active]) {
3049
- 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
+ }
3050
3215
  }
3051
3216
 
3052
3217
  .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
@@ -3115,11 +3280,18 @@
3115
3280
  .seed-checkmark__root {
3116
3281
  box-sizing: border-box;
3117
3282
  margin-top: var(--checkmark-margin-top, 0);
3118
- 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);
3119
3286
  flex: none;
3120
3287
  position: relative;
3121
3288
  }
3122
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
+
3123
3295
  .seed-checkmark__icon {
3124
3296
  content: "";
3125
3297
  text-align: center;
@@ -3140,8 +3312,16 @@
3140
3312
  border-width: 0;
3141
3313
  }
3142
3314
 
3143
- .seed-checkmark__root--variant_square:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3144
- 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
+ }
3145
3325
  }
3146
3326
 
3147
3327
  .seed-checkmark__root--variant_square:is(:disabled, [disabled], [data-disabled]) {
@@ -3157,8 +3337,16 @@
3157
3337
  color: var(--seed-color-fg-disabled);
3158
3338
  }
3159
3339
 
3160
- .seed-checkmark__root--variant_ghost:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
3161
- 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
+ }
3162
3350
  }
3163
3351
 
3164
3352
  .seed-checkmark__icon--variant_ghost {
@@ -3187,8 +3375,16 @@
3187
3375
  background: var(--seed-color-bg-neutral-inverted);
3188
3376
  }
3189
3377
 
3190
- .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3191
- 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
+ }
3192
3388
  }
3193
3389
 
3194
3390
  .seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3199,24 +3395,48 @@
3199
3395
  background: var(--seed-color-bg-brand-solid);
3200
3396
  }
3201
3397
 
3202
- .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3203
- 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
+ }
3204
3408
  }
3205
3409
 
3206
3410
  .seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3207
3411
  color: var(--seed-color-palette-static-white);
3208
3412
  }
3209
3413
 
3210
- .seed-checkmark__root--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3211
- 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
+ }
3212
3424
  }
3213
3425
 
3214
3426
  .seed-checkmark__icon--variant_ghost-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3215
3427
  color: var(--seed-color-fg-neutral);
3216
3428
  }
3217
3429
 
3218
- .seed-checkmark__root--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3219
- 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
+ }
3220
3440
  }
3221
3441
 
3222
3442
  .seed-checkmark__icon--variant_ghost-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3254,19 +3474,22 @@
3254
3474
  border-radius: var(--seed-radius-full);
3255
3475
  transition-duration: var(--seed-duration-color-transition);
3256
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);
3257
3479
  border: none;
3258
3480
  flex-shrink: 0;
3259
3481
  justify-content: center;
3260
3482
  align-items: center;
3261
3483
  font-family: inherit;
3262
3484
  line-height: 1;
3263
- transition-property: background-color, color, border-color, box-shadow;
3485
+ transition-property: background-color, color, border-color, box-shadow, outline-color;
3264
3486
  display: inline-flex;
3265
3487
  position: relative;
3266
3488
  }
3267
3489
 
3268
- .seed-chip__root:is(:focus, [data-focus]) {
3269
- 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);
3270
3493
  }
3271
3494
 
3272
3495
  .seed-chip__root:is(:disabled, [disabled], [data-disabled]) {
@@ -3313,12 +3536,28 @@
3313
3536
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3314
3537
  }
3315
3538
 
3316
- .seed-chip__root--variant_solid:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3317
- 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
+ }
3318
3543
  }
3319
3544
 
3320
- .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3321
- 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
+ }
3322
3561
  }
3323
3562
 
3324
3563
  .seed-chip__root--variant_solid:is(:disabled, [disabled], [data-disabled]) {
@@ -3343,8 +3582,16 @@
3343
3582
  --seed-icon-color: var(--seed-color-fg-neutral);
3344
3583
  }
3345
3584
 
3346
- .seed-chip__root--variant_outlineStrong:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3347
- 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
+ }
3348
3595
  }
3349
3596
 
3350
3597
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
@@ -3352,8 +3599,16 @@
3352
3599
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3353
3600
  }
3354
3601
 
3355
- .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3356
- 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
+ }
3357
3612
  }
3358
3613
 
3359
3614
  .seed-chip__root--variant_outlineStrong:is(:disabled, [disabled], [data-disabled]) {
@@ -3378,8 +3633,16 @@
3378
3633
  --seed-icon-color: var(--seed-color-fg-neutral);
3379
3634
  }
3380
3635
 
3381
- .seed-chip__root--variant_outlineWeak:is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3382
- 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
+ }
3383
3646
  }
3384
3647
 
3385
3648
  .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]) {
@@ -3387,8 +3650,16 @@
3387
3650
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-contrast);
3388
3651
  }
3389
3652
 
3390
- .seed-chip__root--variant_outlineWeak:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3391
- 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
+ }
3392
3663
  }
3393
3664
 
3394
3665
  .seed-chip__root--variant_outlineWeak:is(:disabled, [disabled], [data-disabled]) {
@@ -3517,13 +3788,20 @@
3517
3788
  padding-bottom: var(--seed-dimension-x2);
3518
3789
  font-family: inherit;
3519
3790
  font-weight: var(--seed-font-weight-medium);
3520
- 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);
3521
3794
  border: none;
3522
3795
  justify-content: center;
3523
3796
  align-items: center;
3524
3797
  display: flex;
3525
3798
  }
3526
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
+
3527
3805
  .seed-chip-tabs__list--size_medium {
3528
3806
  gap: 8px;
3529
3807
  }
@@ -3556,12 +3834,28 @@
3556
3834
  color: var(--seed-color-fg-neutral-inverted);
3557
3835
  }
3558
3836
 
3559
- .seed-chip-tabs__trigger--variant_neutralSolid:is(:active, [data-active]) {
3560
- 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
+ }
3561
3841
  }
3562
3842
 
3563
- .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3564
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
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
+ }
3853
+ }
3854
+
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
+ }
3565
3859
  }
3566
3860
 
3567
3861
  .seed-chip-tabs__trigger--variant_neutralSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -3586,12 +3880,28 @@
3586
3880
  border-color: #0000;
3587
3881
  }
3588
3882
 
3589
- .seed-chip-tabs__trigger--variant_neutralOutline:is(:active, [data-active]) {
3590
- 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
+ }
3591
3887
  }
3592
3888
 
3593
- .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3594
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
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
+ }
3899
+ }
3900
+
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
+ }
3595
3905
  }
3596
3906
 
3597
3907
  .seed-chip-tabs__trigger--variant_neutralOutline:is(:disabled, [disabled], [data-disabled]) {
@@ -3614,12 +3924,28 @@
3614
3924
  color: var(--seed-color-palette-static-white);
3615
3925
  }
3616
3926
 
3617
- .seed-chip-tabs__trigger--variant_brandSolid:is(:active, [data-active]) {
3618
- 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
+ }
3619
3931
  }
3620
3932
 
3621
- .seed-chip-tabs__trigger--variant_brandSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
3622
- background-color: var(--seed-color-bg-brand-solid-pressed);
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
+ }
3937
+ }
3938
+
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
+ }
3623
3949
  }
3624
3950
 
3625
3951
  .seed-chip-tabs__trigger--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -3667,6 +3993,8 @@
3667
3993
  text-transform: none;
3668
3994
  -webkit-font-smoothing: antialiased;
3669
3995
  -moz-osx-font-smoothing: grayscale;
3996
+ outline: var(--seed-dimension-x0_5) solid transparent;
3997
+ outline-offset: var(--seed-dimension-x0_5);
3670
3998
  border: none;
3671
3999
  justify-content: center;
3672
4000
  align-items: center;
@@ -3675,8 +4003,9 @@
3675
4003
  display: inline-flex;
3676
4004
  }
3677
4005
 
3678
- .seed-contextual-floating-button:is(:focus, [data-focus]) {
3679
- 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);
3680
4009
  }
3681
4010
 
3682
4011
  .seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
@@ -3704,7 +4033,7 @@
3704
4033
  --seed-icon-size: 22px;
3705
4034
  --size: 16px;
3706
4035
  --thickness: 2px;
3707
- 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);
3708
4037
  }
3709
4038
 
3710
4039
  .seed-contextual-floating-button--variant_solid {
@@ -3716,8 +4045,16 @@
3716
4045
  --range-color: var(--seed-color-fg-neutral-inverted);
3717
4046
  }
3718
4047
 
3719
- .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
3720
- 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
+ }
3721
4058
  }
3722
4059
 
3723
4060
  .seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
@@ -3740,8 +4077,16 @@
3740
4077
  --range-color: var(--seed-color-fg-neutral);
3741
4078
  }
3742
4079
 
3743
- .seed-contextual-floating-button--variant_layer:is(:active, [data-active]) {
3744
- 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
+ }
3745
4090
  }
3746
4091
 
3747
4092
  .seed-contextual-floating-button--variant_layer:is(:disabled, [disabled], [data-disabled]) {
@@ -4381,6 +4726,8 @@
4381
4726
  text-transform: none;
4382
4727
  -webkit-font-smoothing: antialiased;
4383
4728
  -moz-osx-font-smoothing: grayscale;
4729
+ outline: var(--seed-dimension-x0_5) solid transparent;
4730
+ outline-offset: var(--seed-dimension-x0_5);
4384
4731
  border: none;
4385
4732
  justify-content: center;
4386
4733
  align-items: center;
@@ -4389,8 +4736,9 @@
4389
4736
  display: inline-flex;
4390
4737
  }
4391
4738
 
4392
- .seed-floating-action-button__root:is(:focus, [data-focus]) {
4393
- 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);
4394
4742
  }
4395
4743
 
4396
4744
  .seed-floating-action-button__root:is(:disabled, [disabled], [data-disabled]) {
@@ -4405,13 +4753,21 @@
4405
4753
  font-size: var(--seed-font-size-t5);
4406
4754
  line-height: var(--seed-line-height-t5);
4407
4755
  font-weight: var(--seed-font-weight-bold);
4408
- 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);
4409
4757
  position: relative;
4410
4758
  overflow: hidden;
4411
4759
  }
4412
4760
 
4413
- .seed-floating-action-button__root:is(:active, [data-active]) {
4414
- 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
+ }
4415
4771
  }
4416
4772
 
4417
4773
  .seed-floating-action-button__icon {
@@ -4551,6 +4907,10 @@
4551
4907
  color: var(--seed-color-fg-neutral-inverted);
4552
4908
  --seed-icon-size: var(--seed-dimension-x3_5);
4553
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);
4554
4914
  background: none;
4555
4915
  border: none;
4556
4916
  justify-content: center;
@@ -4558,10 +4918,15 @@
4558
4918
  display: flex;
4559
4919
  }
4560
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
+
4561
4926
  .seed-identity-placeholder__root {
4562
4927
  box-sizing: border-box;
4563
4928
  vertical-align: top;
4564
- background-color: var(--seed-color-palette-gray-400);
4929
+ background-color: var(--seed-color-palette-gray-500);
4565
4930
  justify-content: center;
4566
4931
  align-items: center;
4567
4932
  width: 100%;
@@ -4572,9 +4937,9 @@
4572
4937
 
4573
4938
  .seed-identity-placeholder__image {
4574
4939
  object-fit: cover;
4575
- fill: #f7f8fa;
4576
4940
  width: 100%;
4577
4941
  height: 100%;
4942
+ fill: var(--seed-color-palette-static-white-alpha-800);
4578
4943
  display: block;
4579
4944
  overflow: hidden;
4580
4945
  }
@@ -4652,13 +5017,22 @@
4652
5017
  right: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
4653
5018
  bottom: calc((var(--seed-dimension-x10) - var(--seed-dimension-x6)) / 2 * -1);
4654
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);
4655
5023
  position: absolute;
4656
5024
  }
4657
5025
 
4658
- .seed-image-frame-reaction-button:focus {
5026
+ .seed-image-frame-reaction-button:is(:focus, [data-focus]) {
4659
5027
  outline: none;
4660
5028
  }
4661
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
+
4662
5036
  .seed-image-frame-reaction-button:is([aria-pressed="true"], [data-pressed]) {
4663
5037
  --seed-icon-color: var(--seed-color-bg-transparent);
4664
5038
  }
@@ -4842,7 +5216,7 @@
4842
5216
  border-radius: var(--seed-radius-r3);
4843
5217
  background-color: var(--seed-color-bg-transparent);
4844
5218
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
4845
- 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);
4846
5220
  border: none;
4847
5221
  padding: 0;
4848
5222
  position: absolute;
@@ -4864,8 +5238,16 @@
4864
5238
  background-color: var(--seed-color-bg-disabled);
4865
5239
  }
4866
5240
 
4867
- .seed-input-button__button:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
4868
- 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
+ }
4869
5251
  }
4870
5252
 
4871
5253
  .seed-input-button__button[data-readonly]:not([data-disabled]) {
@@ -4873,8 +5255,14 @@
4873
5255
  background-color: var(--seed-color-bg-disabled);
4874
5256
  }
4875
5257
 
4876
- .seed-input-button__button:is(:focus, [data-focus]) {
4877
- 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);
4878
5266
  }
4879
5267
 
4880
5268
  .seed-input-button__button:is(:invalid, [data-invalid]):after {
@@ -4956,13 +5344,25 @@
4956
5344
 
4957
5345
  .seed-input-button__clearButton {
4958
5346
  cursor: pointer;
4959
- --seed-icon-size: 22px;
4960
- --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);
4961
5351
  background-color: #0000;
4962
5352
  border: none;
4963
5353
  padding: 0;
4964
5354
  }
4965
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
+
4966
5366
  .seed-link-content {
4967
5367
  cursor: pointer;
4968
5368
  box-sizing: border-box;
@@ -5056,6 +5456,7 @@
5056
5456
  .seed-list-item__prefix {
5057
5457
  --seed-box-padding-right: var(--seed-dimension-x3);
5058
5458
  padding-right: var(--seed-box-padding-right);
5459
+ --seed-focus-ring: none;
5059
5460
  --seed-icon-size: 22px;
5060
5461
  --seed-icon-color: var(--seed-color-fg-neutral);
5061
5462
  flex-shrink: 0;
@@ -5073,6 +5474,7 @@
5073
5474
  --seed-box-gap: var(--seed-dimension-x1);
5074
5475
  align-items: center;
5075
5476
  gap: var(--seed-box-gap);
5477
+ --seed-focus-ring: none;
5076
5478
  font-size: var(--seed-font-size-t5);
5077
5479
  line-height: var(--seed-line-height-t5);
5078
5480
  font-weight: var(--seed-font-weight-regular);
@@ -5106,10 +5508,22 @@
5106
5508
 
5107
5509
  .seed-list-item__content:after {
5108
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);
5109
5514
  position: absolute;
5110
5515
  inset: 0;
5111
5516
  }
5112
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
+
5113
5527
  .seed-list-item__content:before {
5114
5528
  content: "";
5115
5529
  z-index: -1;
@@ -5120,17 +5534,46 @@
5120
5534
  inset: 0;
5121
5535
  }
5122
5536
 
5123
- .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 {
5124
- background-color: var(--seed-color-bg-transparent-pressed);
5125
- left: var(--seed-dimension-x1_5);
5126
- right: var(--seed-dimension-x1_5);
5127
- 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
+ }
5128
5571
  }
5129
5572
 
5130
5573
  .seed-list-item__title {
5131
5574
  font-size: var(--seed-font-size-t5);
5132
5575
  line-height: var(--seed-line-height-t5);
5133
- font-weight: var(--seed-font-weight-medium);
5576
+ font-weight: var(--seed-font-weight-regular);
5134
5577
  color: var(--seed-color-fg-neutral);
5135
5578
  flex-shrink: 0;
5136
5579
  }
@@ -5154,8 +5597,28 @@
5154
5597
  background-color: var(--seed-color-bg-brand-weak);
5155
5598
  }
5156
5599
 
5157
- .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 {
5158
- 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
+ }
5159
5622
  }
5160
5623
 
5161
5624
  .seed-manner-temp {
@@ -5380,15 +5843,33 @@
5380
5843
  font-size: var(--seed-font-size-t5);
5381
5844
  line-height: var(--seed-line-height-t5);
5382
5845
  font-weight: var(--seed-font-weight-medium);
5846
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
5383
5847
  border: none;
5384
- outline: none;
5385
5848
  justify-content: center;
5386
5849
  align-items: center;
5387
5850
  display: flex;
5388
5851
  }
5389
5852
 
5390
- .seed-menu-sheet__closeButton:is(:active, [data-active]) {
5391
- 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);
5392
5873
  }
5393
5874
 
5394
5875
  .seed-menu-sheet__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
@@ -5444,20 +5925,45 @@
5444
5925
  gap: var(--seed-dimension-x3_5);
5445
5926
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
5446
5927
  border: none;
5447
- outline: none;
5448
5928
  margin: 0;
5449
5929
  font-family: inherit;
5450
5930
  display: flex;
5451
5931
  }
5452
5932
 
5453
- .seed-menu-sheet-item__root:is(:active, [data-active]) {
5454
- 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);
5455
5948
  }
5456
5949
 
5457
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);
5458
5953
  box-shadow: none;
5459
5954
  }
5460
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
+
5461
5967
  .seed-menu-sheet-item__root {
5462
5968
  --seed-prefix-icon-size: 22px;
5463
5969
  }
@@ -5601,6 +6107,14 @@
5601
6107
 
5602
6108
  .seed-page-banner__root:is(button) {
5603
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);
5604
6118
  }
5605
6119
 
5606
6120
  .seed-page-banner__content {
@@ -5643,12 +6157,21 @@
5643
6157
  font-size: var(--seed-font-size-t3);
5644
6158
  line-height: var(--seed-line-height-t3);
5645
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);
5646
6164
  background-color: #0000;
5647
6165
  border: none;
5648
6166
  align-items: center;
5649
6167
  display: flex;
5650
6168
  }
5651
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
+
5652
6175
  .seed-page-banner__closeButton {
5653
6176
  width: var(--seed-dimension-x10);
5654
6177
  height: var(--seed-dimension-x10);
@@ -5656,6 +6179,10 @@
5656
6179
  margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x2));
5657
6180
  --seed-suffix-icon-margin-left: initial;
5658
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);
5659
6186
  background-color: #0000;
5660
6187
  border: none;
5661
6188
  flex-grow: 0;
@@ -5667,14 +6194,27 @@
5667
6194
  display: flex;
5668
6195
  }
5669
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
+
5670
6202
  .seed-page-banner__root--tone_neutral-variant_weak {
5671
6203
  background-color: var(--seed-color-bg-neutral-weak);
5672
6204
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5673
6205
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
5674
6206
  }
5675
6207
 
5676
- .seed-page-banner__root--tone_neutral-variant_weak:is(button):is(:active, [data-active]) {
5677
- 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
+ }
5678
6218
  }
5679
6219
 
5680
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 {
@@ -5687,8 +6227,16 @@
5687
6227
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
5688
6228
  }
5689
6229
 
5690
- .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
5691
- 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
+ }
5692
6240
  }
5693
6241
 
5694
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 {
@@ -5701,8 +6249,16 @@
5701
6249
  --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
5702
6250
  }
5703
6251
 
5704
- .seed-page-banner__root--tone_informative-variant_weak:is(button):is(:active, [data-active]) {
5705
- 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
+ }
5706
6262
  }
5707
6263
 
5708
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 {
@@ -5715,8 +6271,16 @@
5715
6271
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5716
6272
  }
5717
6273
 
5718
- .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:active, [data-active]) {
5719
- 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
+ }
5720
6284
  }
5721
6285
 
5722
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 {
@@ -5729,8 +6293,16 @@
5729
6293
  --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
5730
6294
  }
5731
6295
 
5732
- .seed-page-banner__root--tone_positive-variant_weak:is(button):is(:active, [data-active]) {
5733
- 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
+ }
5734
6306
  }
5735
6307
 
5736
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 {
@@ -5743,8 +6315,16 @@
5743
6315
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5744
6316
  }
5745
6317
 
5746
- .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:active, [data-active]) {
5747
- 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
+ }
5748
6328
  }
5749
6329
 
5750
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 {
@@ -5757,8 +6337,16 @@
5757
6337
  --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
5758
6338
  }
5759
6339
 
5760
- .seed-page-banner__root--tone_warning-variant_weak:is(button):is(:active, [data-active]) {
5761
- 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
+ }
5762
6350
  }
5763
6351
 
5764
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 {
@@ -5771,8 +6359,16 @@
5771
6359
  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
5772
6360
  }
5773
6361
 
5774
- .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:active, [data-active]) {
5775
- 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
+ }
5776
6372
  }
5777
6373
 
5778
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 {
@@ -5785,8 +6381,16 @@
5785
6381
  --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
5786
6382
  }
5787
6383
 
5788
- .seed-page-banner__root--tone_critical-variant_weak:is(button):is(:active, [data-active]) {
5789
- 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
+ }
5790
6394
  }
5791
6395
 
5792
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 {
@@ -5799,8 +6403,16 @@
5799
6403
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
5800
6404
  }
5801
6405
 
5802
- .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:active, [data-active]) {
5803
- 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
+ }
5804
6416
  }
5805
6417
 
5806
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 {
@@ -5813,8 +6425,16 @@
5813
6425
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
5814
6426
  }
5815
6427
 
5816
- .seed-page-banner__root--tone_magic-variant_weak:is(button):is(:active, [data-active]) {
5817
- 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
+ }
5818
6438
  }
5819
6439
 
5820
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 {
@@ -5956,7 +6576,9 @@
5956
6576
  border-color: var(--seed-color-stroke-neutral-weak);
5957
6577
  border-radius: var(--seed-radius-full);
5958
6578
  margin-top: var(--radiomark-margin-top, 0);
5959
- 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);
5960
6582
  flex: none;
5961
6583
  justify-content: center;
5962
6584
  align-items: center;
@@ -5964,8 +6586,16 @@
5964
6586
  position: relative;
5965
6587
  }
5966
6588
 
5967
- .seed-radiomark__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
5968
- 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
+ }
5969
6599
  }
5970
6600
 
5971
6601
  .seed-radiomark__root:is(:checked, [data-checked]) {
@@ -5982,6 +6612,11 @@
5982
6612
  border-color: var(--seed-color-palette-gray-300);
5983
6613
  }
5984
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
+
5985
6620
  .seed-radiomark__icon {
5986
6621
  border-radius: var(--seed-radius-full);
5987
6622
  display: none;
@@ -5999,8 +6634,16 @@
5999
6634
  background-color: var(--seed-color-bg-neutral-inverted);
6000
6635
  }
6001
6636
 
6002
- .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6003
- 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
+ }
6004
6647
  }
6005
6648
 
6006
6649
  .seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
@@ -6011,8 +6654,16 @@
6011
6654
  background-color: var(--seed-color-bg-brand-solid);
6012
6655
  }
6013
6656
 
6014
- .seed-radiomark__root--tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6015
- 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
+ }
6016
6667
  }
6017
6668
 
6018
6669
  .seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
@@ -6057,6 +6708,8 @@
6057
6708
  vertical-align: middle;
6058
6709
  -webkit-font-smoothing: antialiased;
6059
6710
  -moz-osx-font-smoothing: grayscale;
6711
+ outline: var(--seed-dimension-x0_5) solid transparent;
6712
+ outline-offset: var(--seed-dimension-x0_5);
6060
6713
  border: none;
6061
6714
  flex-shrink: 0;
6062
6715
  justify-content: center;
@@ -6067,12 +6720,13 @@
6067
6720
  position: relative;
6068
6721
  }
6069
6722
 
6070
- .seed-reaction-button:is(:focus, [data-focus]) {
6071
- 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);
6072
6726
  }
6073
6727
 
6074
6728
  .seed-reaction-button {
6075
- 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);
6076
6730
  background: var(--seed-color-bg-transparent);
6077
6731
  font-weight: var(--seed-font-weight-medium);
6078
6732
  color: var(--seed-color-fg-neutral);
@@ -6083,8 +6737,16 @@
6083
6737
  --seed-count-color: var(--seed-color-fg-neutral);
6084
6738
  }
6085
6739
 
6086
- .seed-reaction-button:is(:active, [data-active]) {
6087
- 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
+ }
6088
6750
  }
6089
6751
 
6090
6752
  .seed-reaction-button:is([aria-pressed="true"], [data-pressed]) {
@@ -6095,8 +6757,16 @@
6095
6757
  --seed-count-color: var(--seed-color-fg-brand);
6096
6758
  }
6097
6759
 
6098
- .seed-reaction-button:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
6099
- 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
+ }
6100
6770
  }
6101
6771
 
6102
6772
  .seed-reaction-button:is(:disabled, [disabled], [data-disabled]) {
@@ -6230,7 +6900,7 @@
6230
6900
  font-size: var(--seed-font-size-t5);
6231
6901
  line-height: var(--seed-line-height-t5);
6232
6902
  color: var(--seed-color-fg-neutral-subtle);
6233
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), color 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);
6234
6904
  display: flex;
6235
6905
  }
6236
6906
 
@@ -6238,6 +6908,16 @@
6238
6908
  color: var(--seed-color-fg-neutral);
6239
6909
  }
6240
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
+
6241
6921
  .seed-segmented-control__item:is(:disabled, [disabled], [data-disabled]) {
6242
6922
  cursor: not-allowed;
6243
6923
  color: var(--seed-color-fg-disabled);
@@ -6248,12 +6928,32 @@
6248
6928
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
6249
6929
  }
6250
6930
 
6251
- .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
6252
- background-color: var(--seed-color-palette-gray-100);
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
+ }
6253
6936
  }
6254
6937
 
6255
- .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):not(:is(:checked, [data-checked])):is(:active, [data-active]) {
6256
- background-color: var(--seed-color-bg-neutral-weak-pressed);
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,21 +7335,24 @@
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
- padding-left: var(--seed-dimension-x1_5);
6596
- padding-right: var(--seed-dimension-x1_5);
6597
- padding-top: var(--seed-dimension-x0_5);
6598
- padding-bottom: var(--seed-dimension-x0_5);
6599
- border-radius: var(--seed-radius-r1);
7341
+ padding-left: var(--seed-dimension-x2);
7342
+ padding-right: var(--seed-dimension-x2);
7343
+ padding-top: var(--seed-dimension-x1);
7344
+ padding-bottom: var(--seed-dimension-x1);
7345
+ border-radius: var(--seed-radius-r1_5);
6600
7346
  color: var(--seed-color-fg-neutral-inverted);
6601
- font-size: var(--seed-font-size-t1);
6602
- line-height: var(--seed-line-height-t1);
7347
+ font-size: var(--seed-font-size-t3);
7348
+ line-height: var(--seed-line-height-t3);
6603
7349
  font-weight: var(--seed-font-weight-medium);
6604
7350
  white-space: pre-wrap;
6605
7351
  text-align: center;
7352
+ width: max-content;
7353
+ min-width: calc(var(--seed-dimension-x2) * 2 + var(--seed-dimension-x2));
6606
7354
  flex-direction: column;
6607
7355
  align-items: center;
6608
- width: max-content;
6609
7356
  display: flex;
6610
7357
  position: absolute;
6611
7358
  top: 50%;
@@ -6626,7 +7373,7 @@
6626
7373
  animation-timing-function: var(--seed-timing-function-enter);
6627
7374
  animation-duration: var(--seed-duration-d4);
6628
7375
  --seed-enter-translate-x: -50%;
6629
- --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
7376
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
6630
7377
  --seed-enter-opacity: 0;
6631
7378
  --seed-enter-scale: .9;
6632
7379
  }
@@ -6636,7 +7383,7 @@
6636
7383
  animation-timing-function: var(--seed-timing-function-enter);
6637
7384
  animation-duration: var(--seed-duration-d4);
6638
7385
  --seed-enter-translate-x: 50%;
6639
- --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
7386
+ --seed-enter-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
6640
7387
  --seed-enter-opacity: 0;
6641
7388
  --seed-enter-scale: .9;
6642
7389
  }
@@ -6646,7 +7393,7 @@
6646
7393
  animation-timing-function: var(--seed-timing-function-easing);
6647
7394
  animation-duration: var(--seed-duration-d4);
6648
7395
  --seed-exit-translate-x: -50%;
6649
- --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
7396
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
6650
7397
  --seed-exit-opacity: 0;
6651
7398
  --seed-exit-scale: 1;
6652
7399
  animation-fill-mode: forwards;
@@ -6657,19 +7404,25 @@
6657
7404
  animation-timing-function: var(--seed-timing-function-easing);
6658
7405
  animation-duration: var(--seed-duration-d4);
6659
7406
  --seed-exit-translate-x: 50%;
6660
- --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2);
7407
+ --seed-exit-translate-y: calc(-100% - var(--seed-dimension-x5) / 2 - .3125rem);
6661
7408
  --seed-exit-opacity: 0;
6662
7409
  --seed-exit-scale: 1;
6663
7410
  animation-fill-mode: forwards;
6664
7411
  }
6665
7412
 
7413
+ .seed-slider__valueIndicatorRoot[data-dragging] {
7414
+ transition: none;
7415
+ }
7416
+
6666
7417
  .seed-slider__valueIndicatorRoot:not([data-value-indicator-shown]):not([data-indicator-ever-shown]) {
6667
7418
  animation-duration: 0s;
6668
7419
  }
6669
7420
 
6670
7421
  .seed-slider__valueIndicatorArrow {
6671
- width: var(--seed-dimension-x2_5);
6672
- height: var(--seed-dimension-x2_5);
7422
+ width: var(--seed-dimension-x2);
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;
6673
7426
  position: absolute;
6674
7427
  top: 100%;
6675
7428
  }
@@ -6684,10 +7437,14 @@
6684
7437
  transform: translateX(50%);
6685
7438
  }
6686
7439
 
7440
+ .seed-slider__valueIndicatorArrow[data-dragging] {
7441
+ transition: none;
7442
+ }
7443
+
6687
7444
  .seed-slider__valueIndicatorArrowTip {
6688
7445
  fill: var(--seed-color-bg-neutral-inverted);
6689
- width: var(--seed-dimension-x2_5);
6690
- height: 7px;
7446
+ width: var(--seed-dimension-x2);
7447
+ height: var(--seed-dimension-x1_5);
6691
7448
  display: block;
6692
7449
  }
6693
7450
 
@@ -6801,6 +7558,17 @@
6801
7558
  animation-fill-mode: forwards;
6802
7559
  }
6803
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
+
6804
7572
  .seed-snackbar__content {
6805
7573
  padding-left: var(--seed-dimension-x1_5);
6806
7574
  padding-right: var(--seed-dimension-x1_5);
@@ -6838,7 +7606,6 @@
6838
7606
  line-height: var(--seed-line-height-t4);
6839
7607
  font-weight: var(--seed-font-weight-bold);
6840
7608
  border: none;
6841
- outline: none;
6842
7609
  flex-shrink: 0;
6843
7610
  justify-content: center;
6844
7611
  align-items: center;
@@ -6852,12 +7619,25 @@
6852
7619
  top: 50%;
6853
7620
  left: calc(-1 * var(--seed-dimension-x2));
6854
7621
  right: calc(-1 * var(--seed-dimension-x2));
6855
- background: none;
7622
+ outline: var(--seed-dimension-x0_5) solid transparent;
7623
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
6856
7624
  min-height: 44px;
7625
+ transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
7626
+ background: none;
6857
7627
  position: absolute;
6858
7628
  transform: translateY(-50%);
6859
7629
  }
6860
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
+
6861
7641
  .seed-snackbar__prefixIcon--variant_default {
6862
7642
  display: none;
6863
7643
  }
@@ -6953,7 +7733,7 @@
6953
7733
  border-radius: var(--seed-radius-full);
6954
7734
  background: var(--seed-color-palette-gray-600);
6955
7735
  margin: var(--switchmark-margin-top, 0) 0;
6956
- 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);
6957
7737
  display: block;
6958
7738
  position: relative;
6959
7739
  }
@@ -6962,6 +7742,16 @@
6962
7742
  opacity: .38;
6963
7743
  }
6964
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
+
6965
7755
  .seed-switchmark__thumb {
6966
7756
  border-radius: var(--seed-radius-full);
6967
7757
  transition: transform var(--seed-duration-d3) var(--seed-timing-function-easing), background-color var(--seed-duration-d1) var(--seed-timing-function-easing) 20ms;
@@ -7133,6 +7923,17 @@
7133
7923
  bottom: 0;
7134
7924
  }
7135
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
+
7136
7937
  .seed-tabs__list--triggerLayout_fill {
7137
7938
  justify-content: space-around;
7138
7939
  padding-left: 0;
@@ -7807,7 +8608,12 @@
7807
8608
  }
7808
8609
  }
7809
8610
 
7810
- .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 {
7811
8617
  color: var(--seed-color-fg-disabled);
7812
8618
  }
7813
8619
 
@@ -7991,6 +8797,8 @@
7991
8797
  vertical-align: middle;
7992
8798
  -webkit-font-smoothing: antialiased;
7993
8799
  -moz-osx-font-smoothing: grayscale;
8800
+ outline: var(--seed-dimension-x0_5) solid transparent;
8801
+ outline-offset: var(--seed-dimension-x0_5);
7994
8802
  border: none;
7995
8803
  flex-shrink: 0;
7996
8804
  justify-content: center;
@@ -8001,8 +8809,9 @@
8001
8809
  position: relative;
8002
8810
  }
8003
8811
 
8004
- .seed-toggle-button:is(:focus, [data-focus]) {
8005
- 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);
8006
8815
  }
8007
8816
 
8008
8817
  .seed-toggle-button:is(:disabled, [disabled], [data-disabled]) {
@@ -8010,7 +8819,7 @@
8010
8819
  }
8011
8820
 
8012
8821
  .seed-toggle-button {
8013
- 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);
8014
8823
  font-weight: var(--seed-font-weight-bold);
8015
8824
  }
8016
8825
 
@@ -8021,8 +8830,16 @@
8021
8830
  --range-color: var(--seed-color-palette-static-white);
8022
8831
  }
8023
8832
 
8024
- .seed-toggle-button--variant_brandSolid:is(:active, [data-active]) {
8025
- 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
+ }
8026
8843
  }
8027
8844
 
8028
8845
  .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]) {
@@ -8034,8 +8851,16 @@
8034
8851
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8035
8852
  }
8036
8853
 
8037
- .seed-toggle-button--variant_brandSolid:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8038
- 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
+ }
8039
8864
  }
8040
8865
 
8041
8866
  .seed-toggle-button--variant_brandSolid:is(:disabled, [disabled], [data-disabled]) {
@@ -8065,8 +8890,16 @@
8065
8890
  --range-color: var(--seed-color-fg-neutral);
8066
8891
  }
8067
8892
 
8068
- .seed-toggle-button--variant_neutralWeak:is(:active, [data-active]) {
8069
- 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
+ }
8070
8903
  }
8071
8904
 
8072
8905
  .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]) {
@@ -8078,8 +8911,16 @@
8078
8911
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
8079
8912
  }
8080
8913
 
8081
- .seed-toggle-button--variant_neutralWeak:is([aria-pressed="true"], [data-pressed]):is(:active, [data-active]) {
8082
- 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
+ }
8083
8924
  }
8084
8925
 
8085
8926
  .seed-toggle-button--variant_neutralWeak:is(:disabled, [disabled], [data-disabled]) {