@seed-design/css 2.8.3 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (369) hide show
  1. package/README.md +2 -2
  2. package/all.css +853 -1409
  3. package/all.layered.css +853 -1409
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/base.css +51 -4
  7. package/base.layered.css +51 -4
  8. package/base.layered.min.css +1 -1
  9. package/base.min.css +1 -1
  10. package/package.json +8 -11
  11. package/recipes/accordion.css +3 -0
  12. package/recipes/accordion.layered.css +4 -0
  13. package/recipes/action-button.css +19 -19
  14. package/recipes/action-button.layered.css +19 -19
  15. package/recipes/alert-dialog.css +101 -0
  16. package/recipes/alert-dialog.d.ts +24 -0
  17. package/recipes/alert-dialog.layered.css +114 -0
  18. package/recipes/alert-dialog.layered.mjs +66 -0
  19. package/recipes/alert-dialog.mjs +66 -0
  20. package/recipes/app-bar-main.css +2 -1
  21. package/recipes/app-bar-main.layered.css +2 -1
  22. package/recipes/app-bar.css +5 -3
  23. package/recipes/app-bar.layered.css +5 -3
  24. package/recipes/app-screen.css +5 -1
  25. package/recipes/app-screen.layered.css +6 -6
  26. package/recipes/badge.css +83 -27
  27. package/recipes/badge.d.ts +1 -1
  28. package/recipes/badge.layered.css +63 -8
  29. package/recipes/badge.layered.mjs +8 -0
  30. package/recipes/badge.mjs +8 -0
  31. package/recipes/checkmark.css +5 -5
  32. package/recipes/checkmark.layered.css +5 -5
  33. package/recipes/chip-tabs.css +8 -8
  34. package/recipes/chip-tabs.layered.css +8 -8
  35. package/recipes/chip.css +10 -10
  36. package/recipes/chip.layered.css +10 -10
  37. package/recipes/contextual-floating-button.css +8 -8
  38. package/recipes/contextual-floating-button.layered.css +8 -8
  39. package/recipes/date-picker.css +29 -16
  40. package/recipes/date-picker.d.ts +1 -1
  41. package/recipes/date-picker.layered.css +34 -15
  42. package/recipes/date-picker.layered.mjs +6 -14
  43. package/recipes/date-picker.mjs +6 -14
  44. package/recipes/dialog.css +206 -46
  45. package/recipes/dialog.d.ts +3 -3
  46. package/recipes/dialog.layered.css +228 -46
  47. package/recipes/dialog.layered.mjs +12 -7
  48. package/recipes/dialog.mjs +12 -7
  49. package/recipes/floating-action-button.css +2 -2
  50. package/recipes/floating-action-button.layered.css +2 -2
  51. package/recipes/help-bubble.css +9 -6
  52. package/recipes/help-bubble.layered.css +10 -6
  53. package/recipes/menu-item.css +3 -0
  54. package/recipes/menu-item.layered.css +4 -0
  55. package/recipes/menu-sheet-item.css +3 -0
  56. package/recipes/menu-sheet-item.layered.css +4 -0
  57. package/recipes/notification-badge.css +1 -1
  58. package/recipes/notification-badge.layered.css +1 -1
  59. package/recipes/page-banner.css +32 -29
  60. package/recipes/page-banner.layered.css +23 -19
  61. package/recipes/pagination-page-item.css +4 -4
  62. package/recipes/pagination-page-item.layered.css +4 -4
  63. package/recipes/{content-dialog.css → popover.css} +77 -104
  64. package/recipes/popover.d.ts +21 -0
  65. package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
  66. package/recipes/popover.layered.mjs +60 -0
  67. package/recipes/popover.mjs +60 -0
  68. package/recipes/radiomark.css +5 -5
  69. package/recipes/radiomark.layered.css +5 -5
  70. package/recipes/segmented-control.css +3 -0
  71. package/recipes/segmented-control.layered.css +4 -0
  72. package/recipes/select-box.css +4 -0
  73. package/recipes/select-box.layered.css +5 -0
  74. package/recipes/select-item.css +3 -0
  75. package/recipes/select-item.layered.css +4 -0
  76. package/recipes/select-trigger.css +3 -0
  77. package/recipes/select-trigger.layered.css +4 -0
  78. package/recipes/side-panel.css +0 -33
  79. package/recipes/side-panel.layered.css +0 -33
  80. package/recipes/slider-tick.css +1 -1
  81. package/recipes/slider-tick.layered.css +1 -1
  82. package/recipes/slider.css +4 -4
  83. package/recipes/slider.layered.css +4 -4
  84. package/recipes/snackbar.css +2 -2
  85. package/recipes/snackbar.layered.css +2 -2
  86. package/recipes/switchmark.css +2 -2
  87. package/recipes/switchmark.layered.css +2 -2
  88. package/recipes/time-picker.css +2 -5
  89. package/recipes/time-picker.d.ts +1 -1
  90. package/recipes/time-picker.layered.css +2 -3
  91. package/recipes/time-picker.layered.mjs +0 -12
  92. package/recipes/time-picker.mjs +0 -12
  93. package/recipes/toggle-button.css +4 -4
  94. package/recipes/toggle-button.layered.css +4 -4
  95. package/recipes/wheel-picker.css +42 -3
  96. package/recipes/wheel-picker.d.ts +5 -2
  97. package/recipes/wheel-picker.layered.css +47 -3
  98. package/recipes/wheel-picker.layered.mjs +13 -2
  99. package/recipes/wheel-picker.mjs +13 -2
  100. package/vars/color/bg.d.ts +8 -4
  101. package/vars/color/bg.mjs +3 -1
  102. package/vars/color/fg.d.ts +13 -1
  103. package/vars/color/fg.mjs +6 -0
  104. package/vars/component/index.d.ts +1 -104
  105. package/vars/component/index.mjs +1 -104
  106. package/recipes/action-chip.css +0 -75
  107. package/recipes/action-chip.d.ts +0 -26
  108. package/recipes/action-chip.layered.css +0 -84
  109. package/recipes/action-chip.layered.mjs +0 -51
  110. package/recipes/action-chip.mjs +0 -51
  111. package/recipes/action-sheet-item.css +0 -32
  112. package/recipes/action-sheet-item.d.ts +0 -22
  113. package/recipes/action-sheet-item.layered.css +0 -38
  114. package/recipes/action-sheet-item.layered.mjs +0 -29
  115. package/recipes/action-sheet-item.mjs +0 -29
  116. package/recipes/action-sheet.css +0 -125
  117. package/recipes/action-sheet.d.ts +0 -21
  118. package/recipes/action-sheet.layered.css +0 -134
  119. package/recipes/action-sheet.layered.mjs +0 -60
  120. package/recipes/action-sheet.mjs +0 -60
  121. package/recipes/content-dialog.d.ts +0 -24
  122. package/recipes/content-dialog.layered.mjs +0 -71
  123. package/recipes/content-dialog.mjs +0 -71
  124. package/recipes/control-chip.css +0 -88
  125. package/recipes/control-chip.d.ts +0 -26
  126. package/recipes/control-chip.layered.css +0 -99
  127. package/recipes/control-chip.layered.mjs +0 -51
  128. package/recipes/control-chip.mjs +0 -51
  129. package/recipes/extended-action-sheet-item.css +0 -31
  130. package/recipes/extended-action-sheet-item.d.ts +0 -22
  131. package/recipes/extended-action-sheet-item.layered.css +0 -38
  132. package/recipes/extended-action-sheet-item.layered.mjs +0 -29
  133. package/recipes/extended-action-sheet-item.mjs +0 -29
  134. package/recipes/extended-action-sheet.css +0 -123
  135. package/recipes/extended-action-sheet.d.ts +0 -21
  136. package/recipes/extended-action-sheet.layered.css +0 -132
  137. package/recipes/extended-action-sheet.layered.mjs +0 -64
  138. package/recipes/extended-action-sheet.mjs +0 -64
  139. package/recipes/extended-fab.css +0 -66
  140. package/recipes/extended-fab.d.ts +0 -26
  141. package/recipes/extended-fab.layered.css +0 -79
  142. package/recipes/extended-fab.layered.mjs +0 -34
  143. package/recipes/extended-fab.mjs +0 -34
  144. package/recipes/fab.css +0 -31
  145. package/recipes/fab.d.ts +0 -19
  146. package/recipes/fab.layered.css +0 -37
  147. package/recipes/fab.layered.mjs +0 -22
  148. package/recipes/fab.mjs +0 -22
  149. package/recipes/inline-banner.css +0 -180
  150. package/recipes/inline-banner.d.ts +0 -24
  151. package/recipes/inline-banner.layered.css +0 -161
  152. package/recipes/inline-banner.layered.mjs +0 -64
  153. package/recipes/inline-banner.mjs +0 -64
  154. package/recipes/link-content.css +0 -41
  155. package/recipes/link-content.d.ts +0 -26
  156. package/recipes/link-content.layered.css +0 -48
  157. package/recipes/link-content.layered.mjs +0 -35
  158. package/recipes/link-content.mjs +0 -35
  159. package/recipes/wheel-picker-public.css +0 -124
  160. package/recipes/wheel-picker-public.d.ts +0 -24
  161. package/recipes/wheel-picker-public.layered.css +0 -144
  162. package/recipes/wheel-picker-public.layered.mjs +0 -63
  163. package/recipes/wheel-picker-public.mjs +0 -63
  164. package/vars/component/accordion-item.d.ts +0 -132
  165. package/vars/component/accordion-item.mjs +0 -126
  166. package/vars/component/accordion.d.ts +0 -22
  167. package/vars/component/accordion.mjs +0 -16
  168. package/vars/component/action-button.d.ts +0 -660
  169. package/vars/component/action-button.mjs +0 -541
  170. package/vars/component/action-chip.d.ts +0 -132
  171. package/vars/component/action-chip.mjs +0 -132
  172. package/vars/component/action-sheet-close-button.d.ts +0 -23
  173. package/vars/component/action-sheet-close-button.mjs +0 -23
  174. package/vars/component/action-sheet-item.d.ts +0 -36
  175. package/vars/component/action-sheet-item.mjs +0 -36
  176. package/vars/component/action-sheet.d.ts +0 -46
  177. package/vars/component/action-sheet.mjs +0 -46
  178. package/vars/component/alert-dialog.d.ts +0 -52
  179. package/vars/component/alert-dialog.mjs +0 -52
  180. package/vars/component/attachment-input-dropzone.d.ts +0 -32
  181. package/vars/component/attachment-input-dropzone.mjs +0 -30
  182. package/vars/component/attachment-input-item-action-button.d.ts +0 -37
  183. package/vars/component/attachment-input-item-action-button.mjs +0 -37
  184. package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
  185. package/vars/component/attachment-input-item-remove-button.mjs +0 -28
  186. package/vars/component/attachment-input-item.d.ts +0 -103
  187. package/vars/component/attachment-input-item.mjs +0 -102
  188. package/vars/component/attachment-input-trigger.d.ts +0 -46
  189. package/vars/component/attachment-input-trigger.mjs +0 -46
  190. package/vars/component/attachment-input.d.ts +0 -14
  191. package/vars/component/attachment-input.mjs +0 -12
  192. package/vars/component/avatar-stack.d.ts +0 -110
  193. package/vars/component/avatar-stack.mjs +0 -110
  194. package/vars/component/avatar.d.ts +0 -204
  195. package/vars/component/avatar.mjs +0 -162
  196. package/vars/component/badge.d.ts +0 -316
  197. package/vars/component/badge.mjs +0 -236
  198. package/vars/component/bottom-sheet-close-button.d.ts +0 -21
  199. package/vars/component/bottom-sheet-close-button.mjs +0 -21
  200. package/vars/component/bottom-sheet-handle.d.ts +0 -24
  201. package/vars/component/bottom-sheet-handle.mjs +0 -24
  202. package/vars/component/bottom-sheet.d.ts +0 -86
  203. package/vars/component/bottom-sheet.mjs +0 -86
  204. package/vars/component/callout-close-button.d.ts +0 -81
  205. package/vars/component/callout-close-button.mjs +0 -63
  206. package/vars/component/callout.d.ts +0 -232
  207. package/vars/component/callout.mjs +0 -200
  208. package/vars/component/checkbox-group.d.ts +0 -9
  209. package/vars/component/checkbox-group.mjs +0 -9
  210. package/vars/component/checkbox.d.ts +0 -56
  211. package/vars/component/checkbox.mjs +0 -53
  212. package/vars/component/checkmark.d.ts +0 -195
  213. package/vars/component/checkmark.mjs +0 -165
  214. package/vars/component/chip-tablist.d.ts +0 -24
  215. package/vars/component/chip-tablist.mjs +0 -24
  216. package/vars/component/chip.d.ts +0 -321
  217. package/vars/component/chip.mjs +0 -303
  218. package/vars/component/content-placeholder.d.ts +0 -28
  219. package/vars/component/content-placeholder.mjs +0 -27
  220. package/vars/component/contextual-floating-button.d.ts +0 -144
  221. package/vars/component/contextual-floating-button.mjs +0 -132
  222. package/vars/component/control-chip.d.ts +0 -158
  223. package/vars/component/control-chip.mjs +0 -158
  224. package/vars/component/date-picker.d.ts +0 -103
  225. package/vars/component/date-picker.mjs +0 -103
  226. package/vars/component/dialog-close-button.d.ts +0 -24
  227. package/vars/component/dialog-close-button.mjs +0 -24
  228. package/vars/component/dialog.d.ts +0 -91
  229. package/vars/component/dialog.mjs +0 -83
  230. package/vars/component/divider.d.ts +0 -9
  231. package/vars/component/divider.mjs +0 -9
  232. package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
  233. package/vars/component/extended-action-sheet-close-button.mjs +0 -24
  234. package/vars/component/extended-action-sheet-item.d.ts +0 -46
  235. package/vars/component/extended-action-sheet-item.mjs +0 -46
  236. package/vars/component/extended-action-sheet.d.ts +0 -55
  237. package/vars/component/extended-action-sheet.mjs +0 -55
  238. package/vars/component/extended-fab.d.ts +0 -88
  239. package/vars/component/extended-fab.mjs +0 -82
  240. package/vars/component/fab.d.ts +0 -21
  241. package/vars/component/fab.mjs +0 -21
  242. package/vars/component/field-label.d.ts +0 -25
  243. package/vars/component/field-label.mjs +0 -25
  244. package/vars/component/field.d.ts +0 -78
  245. package/vars/component/field.mjs +0 -72
  246. package/vars/component/floating-action-button.d.ts +0 -60
  247. package/vars/component/floating-action-button.mjs +0 -54
  248. package/vars/component/help-bubble.d.ts +0 -55
  249. package/vars/component/help-bubble.mjs +0 -52
  250. package/vars/component/identity-placeholder.d.ts +0 -12
  251. package/vars/component/identity-placeholder.mjs +0 -12
  252. package/vars/component/image-frame-floater.d.ts +0 -10
  253. package/vars/component/image-frame-floater.mjs +0 -9
  254. package/vars/component/image-frame-indicator.d.ts +0 -20
  255. package/vars/component/image-frame-indicator.mjs +0 -18
  256. package/vars/component/image-frame-reaction-button.d.ts +0 -60
  257. package/vars/component/image-frame-reaction-button.mjs +0 -51
  258. package/vars/component/image-frame.d.ts +0 -27
  259. package/vars/component/image-frame.mjs +0 -18
  260. package/vars/component/inline-banner.d.ts +0 -191
  261. package/vars/component/inline-banner.mjs +0 -191
  262. package/vars/component/input-button.d.ts +0 -162
  263. package/vars/component/input-button.mjs +0 -155
  264. package/vars/component/link-content.d.ts +0 -58
  265. package/vars/component/link-content.mjs +0 -58
  266. package/vars/component/list-header.d.ts +0 -29
  267. package/vars/component/list-header.mjs +0 -29
  268. package/vars/component/list-item.d.ts +0 -85
  269. package/vars/component/list-item.mjs +0 -84
  270. package/vars/component/manner-temp-badge.d.ts +0 -117
  271. package/vars/component/manner-temp-badge.mjs +0 -117
  272. package/vars/component/manner-temp.d.ts +0 -88
  273. package/vars/component/manner-temp.mjs +0 -88
  274. package/vars/component/menu-item.d.ts +0 -129
  275. package/vars/component/menu-item.mjs +0 -117
  276. package/vars/component/menu-sheet-close-button.d.ts +0 -24
  277. package/vars/component/menu-sheet-close-button.mjs +0 -24
  278. package/vars/component/menu-sheet-item.d.ts +0 -69
  279. package/vars/component/menu-sheet-item.mjs +0 -57
  280. package/vars/component/menu-sheet.d.ts +0 -56
  281. package/vars/component/menu-sheet.mjs +0 -56
  282. package/vars/component/menu.d.ts +0 -68
  283. package/vars/component/menu.mjs +0 -60
  284. package/vars/component/notification-badge.d.ts +0 -48
  285. package/vars/component/notification-badge.mjs +0 -42
  286. package/vars/component/page-banner-close-button.d.ts +0 -133
  287. package/vars/component/page-banner-close-button.mjs +0 -99
  288. package/vars/component/page-banner.d.ts +0 -385
  289. package/vars/component/page-banner.mjs +0 -339
  290. package/vars/component/pagination-button.d.ts +0 -33
  291. package/vars/component/pagination-button.mjs +0 -33
  292. package/vars/component/pagination-page-item.d.ts +0 -54
  293. package/vars/component/pagination-page-item.mjs +0 -54
  294. package/vars/component/progress-circle.d.ts +0 -88
  295. package/vars/component/progress-circle.mjs +0 -67
  296. package/vars/component/quantity-picker-button.d.ts +0 -78
  297. package/vars/component/quantity-picker-button.mjs +0 -78
  298. package/vars/component/quantity-picker.d.ts +0 -80
  299. package/vars/component/quantity-picker.mjs +0 -80
  300. package/vars/component/radio-group.d.ts +0 -9
  301. package/vars/component/radio-group.mjs +0 -9
  302. package/vars/component/radio.d.ts +0 -56
  303. package/vars/component/radio.mjs +0 -53
  304. package/vars/component/radiomark.d.ts +0 -117
  305. package/vars/component/radiomark.mjs +0 -117
  306. package/vars/component/reaction-button.d.ts +0 -136
  307. package/vars/component/reaction-button.mjs +0 -136
  308. package/vars/component/scroll-fog.d.ts +0 -78
  309. package/vars/component/scroll-fog.mjs +0 -78
  310. package/vars/component/segmented-control-indicator.d.ts +0 -24
  311. package/vars/component/segmented-control-indicator.mjs +0 -24
  312. package/vars/component/segmented-control-item.d.ts +0 -41
  313. package/vars/component/segmented-control-item.mjs +0 -41
  314. package/vars/component/segmented-control.d.ts +0 -11
  315. package/vars/component/segmented-control.mjs +0 -11
  316. package/vars/component/select-box-checkmark.d.ts +0 -40
  317. package/vars/component/select-box-checkmark.mjs +0 -40
  318. package/vars/component/select-box-group.d.ts +0 -10
  319. package/vars/component/select-box-group.mjs +0 -10
  320. package/vars/component/select-box.d.ts +0 -107
  321. package/vars/component/select-box.mjs +0 -102
  322. package/vars/component/select-item.d.ts +0 -101
  323. package/vars/component/select-item.mjs +0 -95
  324. package/vars/component/select-trigger.d.ts +0 -127
  325. package/vars/component/select-trigger.mjs +0 -120
  326. package/vars/component/select.d.ts +0 -62
  327. package/vars/component/select.mjs +0 -54
  328. package/vars/component/side-panel-close-button.d.ts +0 -24
  329. package/vars/component/side-panel-close-button.mjs +0 -24
  330. package/vars/component/side-panel.d.ts +0 -97
  331. package/vars/component/side-panel.mjs +0 -85
  332. package/vars/component/skeleton.d.ts +0 -80
  333. package/vars/component/skeleton.mjs +0 -62
  334. package/vars/component/slider-thumb.d.ts +0 -25
  335. package/vars/component/slider-thumb.mjs +0 -25
  336. package/vars/component/slider-tick.d.ts +0 -23
  337. package/vars/component/slider-tick.mjs +0 -23
  338. package/vars/component/slider.d.ts +0 -81
  339. package/vars/component/slider.mjs +0 -78
  340. package/vars/component/snackbar.d.ts +0 -65
  341. package/vars/component/snackbar.mjs +0 -65
  342. package/vars/component/switch.d.ts +0 -56
  343. package/vars/component/switch.mjs +0 -53
  344. package/vars/component/switchmark.d.ts +0 -114
  345. package/vars/component/switchmark.mjs +0 -112
  346. package/vars/component/tab.d.ts +0 -47
  347. package/vars/component/tab.mjs +0 -47
  348. package/vars/component/tablist.d.ts +0 -51
  349. package/vars/component/tablist.mjs +0 -51
  350. package/vars/component/tag-group-item.d.ts +0 -122
  351. package/vars/component/tag-group-item.mjs +0 -122
  352. package/vars/component/tag-group.d.ts +0 -34
  353. package/vars/component/tag-group.mjs +0 -34
  354. package/vars/component/text-button.d.ts +0 -23
  355. package/vars/component/text-button.mjs +0 -23
  356. package/vars/component/text-input.d.ts +0 -292
  357. package/vars/component/text-input.mjs +0 -263
  358. package/vars/component/time-picker.d.ts +0 -27
  359. package/vars/component/time-picker.mjs +0 -27
  360. package/vars/component/toggle-button.d.ts +0 -213
  361. package/vars/component/toggle-button.mjs +0 -207
  362. package/vars/component/top-navigation-icon-button.d.ts +0 -45
  363. package/vars/component/top-navigation-icon-button.mjs +0 -45
  364. package/vars/component/top-navigation-text-button.d.ts +0 -61
  365. package/vars/component/top-navigation-text-button.mjs +0 -60
  366. package/vars/component/top-navigation.d.ts +0 -121
  367. package/vars/component/top-navigation.mjs +0 -112
  368. package/vars/component/wheel-picker.d.ts +0 -72
  369. package/vars/component/wheel-picker.mjs +0 -72
package/all.css CHANGED
@@ -1,12 +1,16 @@
1
1
  :root {
2
2
  --seed-safe-area-top: 0px;
3
3
  --seed-safe-area-bottom: 0px;
4
+ --seed-safe-area-left: 0px;
5
+ --seed-safe-area-right: 0px;
4
6
  }
5
7
 
6
8
  @supports (left: constant(safe-area-inset-left)) {
7
9
  :root {
8
10
  --seed-safe-area-top: constant(safe-area-inset-top);
9
11
  --seed-safe-area-bottom: constant(safe-area-inset-bottom);
12
+ --seed-safe-area-left: constant(safe-area-inset-left);
13
+ --seed-safe-area-right: constant(safe-area-inset-right);
10
14
  }
11
15
  }
12
16
 
@@ -14,6 +18,8 @@
14
18
  :root {
15
19
  --seed-safe-area-top: env(safe-area-inset-top);
16
20
  --seed-safe-area-bottom: env(safe-area-inset-bottom);
21
+ --seed-safe-area-left: env(safe-area-inset-left);
22
+ --seed-safe-area-right: env(safe-area-inset-right);
17
23
  }
18
24
  }
19
25
 
@@ -396,6 +402,7 @@
396
402
  --seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
397
403
  --seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
398
404
  --seed-feedback-scale: var(--seed-dynamic-scale, 1);
405
+ --seed-content-scale: 1;
399
406
  scale: 1;
400
407
  }
401
408
 
@@ -405,6 +412,30 @@
405
412
  }
406
413
  }
407
414
 
415
+ .seed-content-scale {
416
+ display: inherit;
417
+ flex-direction: inherit;
418
+ flex-wrap: inherit;
419
+ align-items: inherit;
420
+ align-content: inherit;
421
+ justify-content: inherit;
422
+ justify-items: inherit;
423
+ gap: inherit;
424
+ grid-template-columns: inherit;
425
+ grid-template-rows: inherit;
426
+ grid-template-areas: inherit;
427
+ grid-auto-flow: inherit;
428
+ grid-auto-columns: inherit;
429
+ grid-auto-rows: inherit;
430
+ min-width: 0;
431
+ min-height: 0;
432
+ scale: var(--seed-content-scale);
433
+ transition: var(--seed-feedback-scale-transition);
434
+ flex: auto;
435
+ grid-area: 1 / 1 / -1 / -1;
436
+ place-self: stretch stretch;
437
+ }
438
+
408
439
  :root, [data-seed-color-mode="system"] {
409
440
  --lightningcss-light: initial;
410
441
  --lightningcss-dark: ;
@@ -655,6 +686,12 @@
655
686
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
656
687
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
657
688
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
689
+ --seed-color-fg-on-brand-solid: var(--seed-color-palette-static-white);
690
+ --seed-color-fg-on-critical-solid: var(--seed-color-palette-static-white);
691
+ --seed-color-fg-on-informative-solid: var(--seed-color-palette-static-white);
692
+ --seed-color-fg-on-neutral-solid: var(--seed-color-palette-gray-00);
693
+ --seed-color-fg-on-positive-solid: var(--seed-color-palette-static-white);
694
+ --seed-color-fg-on-warning-solid: var(--seed-color-palette-static-black-alpha-900);
658
695
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
659
696
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
660
697
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
@@ -676,15 +713,17 @@
676
713
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-200);
677
714
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-00);
678
715
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
679
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-100);
680
716
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
681
717
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
682
718
  --seed-color-bg-magic-weak: #f9f2ee;
683
719
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
684
720
  --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
685
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
721
+ --seed-color-bg-neutral-muted: var(--seed-color-palette-gray-100);
722
+ --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-900);
723
+ --seed-color-bg-neutral-solid-pressed: var(--seed-color-palette-gray-800);
686
724
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
687
725
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
726
+ --seed-color-bg-neutral-subtle: var(--seed-color-palette-gray-00);
688
727
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
689
728
  --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-black-alpha-200);
690
729
  --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-black-alpha-300);
@@ -867,6 +906,12 @@
867
906
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
868
907
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
869
908
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
909
+ --seed-color-fg-on-brand-solid: var(--seed-color-palette-static-white);
910
+ --seed-color-fg-on-critical-solid: var(--seed-color-palette-static-white);
911
+ --seed-color-fg-on-informative-solid: var(--seed-color-palette-static-white);
912
+ --seed-color-fg-on-neutral-solid: var(--seed-color-palette-gray-100);
913
+ --seed-color-fg-on-positive-solid: var(--seed-color-palette-static-white);
914
+ --seed-color-fg-on-warning-solid: var(--seed-color-palette-static-black-alpha-900);
870
915
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
871
916
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
872
917
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
@@ -888,15 +933,17 @@
888
933
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-00);
889
934
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-100);
890
935
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
891
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-200);
892
936
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
893
937
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
894
938
  --seed-color-bg-magic-weak: #201f1f;
895
939
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
896
940
  --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
897
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
941
+ --seed-color-bg-neutral-muted: var(--seed-color-palette-gray-200);
942
+ --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
943
+ --seed-color-bg-neutral-solid-pressed: var(--seed-color-palette-gray-800);
898
944
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
899
945
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
946
+ --seed-color-bg-neutral-subtle: var(--seed-color-palette-gray-100);
900
947
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
901
948
  --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-white-alpha-200);
902
949
  --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-white-alpha-300);
@@ -1027,6 +1074,10 @@
1027
1074
  cursor: not-allowed;
1028
1075
  }
1029
1076
 
1077
+ .seed-accordion__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1078
+ --seed-content-scale: var(--seed-feedback-scale);
1079
+ }
1080
+
1030
1081
  .seed-accordion__prefix {
1031
1082
  --seed-icon-color: var(--seed-color-fg-neutral);
1032
1083
  flex-shrink: 0;
@@ -1365,13 +1416,13 @@
1365
1416
 
1366
1417
  .seed-action-button--variant_brandSolid {
1367
1418
  background: var(--seed-color-bg-brand-solid);
1368
- color: var(--seed-color-palette-static-white);
1419
+ color: var(--seed-color-fg-on-brand-solid);
1369
1420
  font-weight: var(--seed-font-weight-bold);
1370
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1371
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1372
- --seed-icon-color: var(--seed-color-palette-static-white);
1421
+ --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
1422
+ --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
1423
+ --seed-icon-color: var(--seed-color-fg-on-brand-solid);
1373
1424
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1374
- --range-color: var(--seed-color-palette-static-white);
1425
+ --range-color: var(--seed-color-fg-on-brand-solid);
1375
1426
  }
1376
1427
 
1377
1428
  @media (hover: hover) and (pointer: fine) {
@@ -1399,25 +1450,25 @@
1399
1450
  }
1400
1451
 
1401
1452
  .seed-action-button--variant_neutralSolid {
1402
- background: var(--seed-color-bg-neutral-inverted);
1403
- color: var(--seed-color-fg-neutral-inverted);
1453
+ background: var(--seed-color-bg-neutral-solid);
1454
+ color: var(--seed-color-fg-on-neutral-solid);
1404
1455
  font-weight: var(--seed-font-weight-bold);
1405
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
1406
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
1407
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
1456
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
1457
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
1458
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
1408
1459
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1409
- --range-color: var(--seed-color-palette-static-white);
1460
+ --range-color: var(--seed-color-fg-on-neutral-solid);
1410
1461
  }
1411
1462
 
1412
1463
  @media (hover: hover) and (pointer: fine) {
1413
1464
  .seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
1414
- background: var(--seed-color-bg-neutral-inverted-pressed);
1465
+ background: var(--seed-color-bg-neutral-solid-pressed);
1415
1466
  }
1416
1467
  }
1417
1468
 
1418
1469
  @media not all and (hover: hover) and (pointer: fine) {
1419
1470
  .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
1420
- background: var(--seed-color-bg-neutral-inverted-pressed);
1471
+ background: var(--seed-color-bg-neutral-solid-pressed);
1421
1472
  }
1422
1473
  }
1423
1474
 
@@ -1430,7 +1481,7 @@
1430
1481
  }
1431
1482
 
1432
1483
  .seed-action-button--variant_neutralSolid[data-loading] {
1433
- background: var(--seed-color-bg-neutral-inverted-pressed);
1484
+ background: var(--seed-color-bg-neutral-solid-pressed);
1434
1485
  }
1435
1486
 
1436
1487
  .seed-action-button--variant_neutralWeak {
@@ -1470,13 +1521,13 @@
1470
1521
 
1471
1522
  .seed-action-button--variant_criticalSolid {
1472
1523
  background: var(--seed-color-bg-critical-solid);
1473
- color: var(--seed-color-palette-static-white);
1524
+ color: var(--seed-color-fg-on-critical-solid);
1474
1525
  font-weight: var(--seed-font-weight-bold);
1475
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1476
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1477
- --seed-icon-color: var(--seed-color-palette-static-white);
1526
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
1527
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
1528
+ --seed-icon-color: var(--seed-color-fg-on-critical-solid);
1478
1529
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1479
- --range-color: var(--seed-color-palette-static-white);
1530
+ --range-color: var(--seed-color-fg-on-critical-solid);
1480
1531
  }
1481
1532
 
1482
1533
  @media (hover: hover) and (pointer: fine) {
@@ -1730,257 +1781,117 @@
1730
1781
  --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1731
1782
  }
1732
1783
 
1733
- .seed-action-chip {
1734
- box-sizing: border-box;
1735
- cursor: pointer;
1736
- text-transform: none;
1737
- text-align: start;
1738
- white-space: nowrap;
1739
- -webkit-font-smoothing: antialiased;
1740
- -moz-osx-font-smoothing: grayscale;
1741
- font-family: inherit;
1742
- line-height: 1;
1743
- font-weight: var(--seed-font-weight-medium);
1744
- border-radius: var(--seed-radius-full);
1745
- background: var(--seed-color-bg-neutral-weak);
1746
- color: var(--seed-color-fg-neutral);
1747
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
1748
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
1749
- --seed-icon-color: var(--seed-color-fg-neutral);
1750
- --seed-count-font-weight: var(--seed-font-weight-medium);
1751
- --seed-count-color: var(--seed-color-fg-neutral-muted);
1752
- border: none;
1753
- flex-shrink: 0;
1754
- justify-content: center;
1755
- align-items: center;
1756
- display: inline-flex;
1757
- }
1758
-
1759
- .seed-action-chip:is(:active, [data-active]) {
1760
- background: var(--seed-color-bg-neutral-weak-pressed);
1761
- }
1762
-
1763
- .seed-action-chip:is(:focus, [data-focus]) {
1764
- outline: none;
1765
- }
1766
-
1767
- .seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
1768
- background: var(--seed-color-bg-disabled);
1769
- color: var(--seed-color-fg-disabled);
1770
- cursor: not-allowed;
1771
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1772
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1773
- --seed-icon-color: var(--seed-color-fg-disabled);
1774
- }
1775
-
1776
- .seed-action-chip--size_medium {
1777
- min-height: var(--seed-dimension-x9);
1778
- padding-block: var(--seed-dimension-x2);
1779
- gap: var(--seed-dimension-x1);
1780
- font-size: var(--seed-font-size-t4);
1781
- line-height: var(--seed-line-height-t4);
1782
- --seed-count-font-size: var(--seed-font-size-t4);
1783
- --seed-prefix-icon-size: var(--seed-dimension-x4);
1784
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1785
- --seed-icon-size: var(--seed-dimension-x4);
1786
- }
1787
-
1788
- .seed-action-chip--size_small {
1789
- min-height: var(--seed-dimension-x8);
1790
- padding-block: var(--seed-dimension-x1_5);
1791
- gap: var(--seed-dimension-x1);
1792
- font-size: var(--seed-font-size-t4);
1793
- line-height: var(--seed-line-height-t4);
1794
- --seed-count-font-size: var(--seed-font-size-t4);
1795
- --seed-prefix-icon-size: var(--seed-dimension-x4);
1796
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
1797
- --seed-icon-size: var(--seed-dimension-x4);
1798
- }
1799
-
1800
- .seed-action-chip--size_medium-layout_withText {
1801
- padding-inline: var(--seed-dimension-x3_5);
1802
- }
1803
-
1804
- .seed-action-chip--size_medium-layout_iconOnly {
1805
- min-width: var(--seed-dimension-x9);
1806
- }
1807
-
1808
- .seed-action-chip--size_small-layout_withText {
1809
- padding-inline: var(--seed-dimension-x3);
1810
- }
1811
-
1812
- .seed-action-chip--size_small-layout_iconOnly {
1813
- min-width: var(--seed-dimension-x8);
1814
- }
1815
-
1816
- .seed-action-sheet__positioner {
1784
+ .seed-alert-dialog__positioner {
1817
1785
  overscroll-behavior-y: none;
1818
- --sheet-z-index: 2;
1819
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1786
+ --dialog-z-index: 2;
1787
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1820
1788
  justify-content: center;
1821
- align-items: flex-end;
1789
+ align-items: center;
1822
1790
  display: flex;
1823
1791
  position: fixed;
1824
1792
  inset: 0;
1825
1793
  }
1826
1794
 
1827
- .seed-action-sheet__backdrop {
1795
+ .seed-alert-dialog__backdrop {
1828
1796
  background: var(--seed-color-bg-overlay);
1829
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1797
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1830
1798
  position: fixed;
1831
1799
  inset: 0;
1832
1800
  }
1833
1801
 
1834
- .seed-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
1835
- animation: seed-exit;
1836
- animation-timing-function: var(--seed-timing-function-exit);
1837
- animation-duration: var(--seed-duration-d2);
1838
- --seed-exit-translate-x: 0;
1839
- --seed-exit-translate-y: 0;
1840
- --seed-exit-opacity: 0;
1841
- --seed-exit-scale: 1;
1842
- animation-fill-mode: forwards;
1843
- }
1844
-
1845
- .seed-action-sheet__backdrop:is([data-state="open"], [data-open]) {
1846
- animation: seed-enter;
1847
- animation-timing-function: var(--seed-timing-function-enter);
1848
- animation-duration: var(--seed-duration-d2);
1849
- --seed-enter-translate-x: 0;
1850
- --seed-enter-translate-y: 0;
1851
- --seed-enter-opacity: 0;
1852
- --seed-enter-scale: 1;
1853
- }
1854
-
1855
- .seed-action-sheet__content {
1802
+ .seed-alert-dialog__content {
1856
1803
  box-sizing: border-box;
1857
1804
  word-break: break-all;
1858
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
1805
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
1859
1806
  background: var(--seed-color-bg-layer-floating);
1860
- border-top-left-radius: var(--seed-radius-r5);
1861
- border-top-right-radius: var(--seed-radius-r5);
1807
+ max-width: 272px;
1808
+ margin: auto var(--seed-dimension-x8);
1809
+ border-radius: var(--seed-radius-r5);
1810
+ outline: none;
1862
1811
  flex-direction: column;
1863
1812
  flex: 1;
1864
1813
  display: flex;
1865
1814
  position: relative;
1866
- overflow: hidden;
1867
- }
1868
-
1869
- .seed-action-sheet__content:not(:is([data-state="open"], [data-open])) {
1870
- animation: seed-exit;
1871
- animation-timing-function: var(--seed-timing-function-exit);
1872
- animation-duration: var(--seed-duration-d4);
1873
- --seed-exit-translate-x: 0;
1874
- --seed-exit-translate-y: 100%;
1875
- --seed-exit-opacity: 1;
1876
- --seed-exit-scale: 1;
1877
- animation-fill-mode: forwards;
1878
1815
  }
1879
1816
 
1880
- .seed-action-sheet__content:is([data-state="open"], [data-open]) {
1881
- animation: seed-enter;
1882
- animation-timing-function: var(--seed-timing-function-enter-expressive);
1883
- animation-duration: var(--seed-duration-d6);
1884
- --seed-enter-translate-x: 0;
1885
- --seed-enter-translate-y: 100%;
1886
- --seed-enter-opacity: 1;
1887
- --seed-enter-scale: 1;
1817
+ .seed-alert-dialog__content:is(:focus, [data-focus]) {
1818
+ outline: none;
1888
1819
  }
1889
1820
 
1890
- .seed-action-sheet__header {
1891
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1892
- padding-block: var(--seed-dimension-x3_5);
1893
- align-items: center;
1894
- gap: var(--seed-dimension-x1);
1821
+ .seed-alert-dialog__header {
1822
+ padding-inline: var(--seed-dimension-x5);
1823
+ padding-top: var(--seed-dimension-x5);
1824
+ gap: var(--seed-dimension-x1_5);
1895
1825
  flex-direction: column;
1896
1826
  display: flex;
1897
- position: relative;
1898
- }
1899
-
1900
- .seed-action-sheet__header:after {
1901
- content: "";
1902
- left: var(--seed-dimension-spacing-x-global-gutter);
1903
- right: var(--seed-dimension-spacing-x-global-gutter);
1904
- background: var(--seed-color-stroke-neutral-muted);
1905
- height: 1px;
1906
- display: block;
1907
- position: absolute;
1908
- bottom: 0;
1909
1827
  }
1910
1828
 
1911
- .seed-action-sheet__title {
1912
- color: var(--seed-color-fg-neutral-muted);
1913
- font-size: var(--seed-font-size-t4);
1914
- line-height: var(--seed-line-height-t4);
1829
+ .seed-alert-dialog__title {
1830
+ color: var(--seed-color-fg-neutral);
1831
+ font-size: var(--seed-font-size-t7);
1832
+ line-height: var(--seed-line-height-t7);
1915
1833
  font-weight: var(--seed-font-weight-bold);
1834
+ margin: 0;
1916
1835
  }
1917
1836
 
1918
- .seed-action-sheet__description {
1919
- color: var(--seed-color-fg-neutral-muted);
1920
- font-size: var(--seed-font-size-t3);
1921
- line-height: var(--seed-line-height-t3);
1922
- font-weight: var(--seed-font-weight-regular);
1923
- }
1924
-
1925
- .seed-action-sheet__list {
1926
- flex-direction: column;
1927
- align-items: stretch;
1928
- display: flex;
1929
- }
1930
-
1931
- .seed-action-sheet__closeButton {
1932
- background-color: var(--seed-color-bg-layer-floating);
1933
- min-height: 50px;
1934
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1935
- padding-block: var(--seed-dimension-x3_5);
1837
+ .seed-alert-dialog__description {
1936
1838
  color: var(--seed-color-fg-neutral);
1937
1839
  font-size: var(--seed-font-size-t5);
1938
1840
  line-height: var(--seed-line-height-t5);
1939
- font-weight: var(--seed-font-weight-bold);
1940
- justify-content: center;
1941
- align-items: center;
1942
- display: flex;
1943
- }
1944
-
1945
- .seed-action-sheet__closeButton:is(:active, [data-active]) {
1946
- background-color: var(--seed-color-bg-layer-floating-pressed);
1841
+ font-weight: var(--seed-font-weight-regular);
1842
+ white-space: pre-wrap;
1843
+ margin: 0;
1947
1844
  }
1948
1845
 
1949
- .seed-action-sheet-item {
1950
- background-color: var(--seed-color-bg-layer-floating);
1951
- min-height: 50px;
1952
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
1953
- padding-block: var(--seed-dimension-x3_5);
1954
- font-size: var(--seed-font-size-t5);
1955
- line-height: var(--seed-line-height-t5);
1956
- font-weight: var(--seed-font-weight-regular);
1957
- justify-content: center;
1958
- align-items: center;
1846
+ .seed-alert-dialog__footer {
1847
+ padding-inline: var(--seed-dimension-x5);
1848
+ padding-top: var(--seed-dimension-x4);
1849
+ padding-bottom: var(--seed-dimension-x5);
1850
+ flex-direction: column;
1851
+ align-items: stretch;
1959
1852
  display: flex;
1960
- position: relative;
1961
1853
  }
1962
1854
 
1963
- .seed-action-sheet-item:is(:active, [data-active]) {
1964
- background-color: var(--seed-color-bg-layer-floating-pressed);
1855
+ .seed-alert-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
1856
+ animation: seed-enter;
1857
+ animation-timing-function: var(--seed-timing-function-enter);
1858
+ animation-duration: var(--seed-duration-d2);
1859
+ --seed-enter-translate-x: 0;
1860
+ --seed-enter-translate-y: 0;
1861
+ --seed-enter-opacity: 0;
1862
+ --seed-enter-scale: 1;
1965
1863
  }
1966
1864
 
1967
- .seed-action-sheet-item:after {
1968
- content: "";
1969
- left: var(--seed-dimension-spacing-x-global-gutter);
1970
- right: var(--seed-dimension-spacing-x-global-gutter);
1971
- background: var(--seed-color-stroke-neutral-muted);
1972
- height: 1px;
1973
- display: block;
1974
- position: absolute;
1975
- bottom: 0;
1865
+ .seed-alert-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
1866
+ animation: seed-exit;
1867
+ animation-timing-function: var(--seed-timing-function-exit);
1868
+ animation-duration: var(--seed-duration-d2);
1869
+ --seed-exit-translate-x: 0;
1870
+ --seed-exit-translate-y: 0;
1871
+ --seed-exit-opacity: 0;
1872
+ --seed-exit-scale: 1;
1873
+ animation-fill-mode: forwards;
1976
1874
  }
1977
1875
 
1978
- .seed-action-sheet-item--tone_neutral {
1979
- color: var(--seed-color-fg-neutral);
1876
+ .seed-alert-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
1877
+ animation: seed-enter;
1878
+ animation-timing-function: var(--seed-timing-function-enter-expressive);
1879
+ animation-duration: var(--seed-duration-d4);
1880
+ --seed-enter-translate-x: 0;
1881
+ --seed-enter-translate-y: 0;
1882
+ --seed-enter-opacity: 0;
1883
+ --seed-enter-scale: 1.3;
1980
1884
  }
1981
1885
 
1982
- .seed-action-sheet-item--tone_critical {
1983
- color: var(--seed-color-fg-critical);
1886
+ .seed-alert-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
1887
+ animation: seed-exit;
1888
+ animation-timing-function: var(--seed-timing-function-exit);
1889
+ animation-duration: var(--seed-duration-d2);
1890
+ --seed-exit-translate-x: 0;
1891
+ --seed-exit-translate-y: 0;
1892
+ --seed-exit-opacity: 0;
1893
+ --seed-exit-scale: 1;
1894
+ animation-fill-mode: forwards;
1984
1895
  }
1985
1896
 
1986
1897
  .seed-aspect-ratio {
@@ -2063,8 +1974,9 @@
2063
1974
  }
2064
1975
 
2065
1976
  .seed-app-bar__root--theme_cupertino {
2066
- height: calc(44px + var(--seed-safe-area-top));
2067
- padding-inline: var(--seed-dimension-x4);
1977
+ height: calc(56px + var(--seed-safe-area-top));
1978
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
1979
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2068
1980
  padding-top: var(--seed-safe-area-top);
2069
1981
  }
2070
1982
 
@@ -2088,7 +2000,8 @@
2088
2000
 
2089
2001
  .seed-app-bar__root--theme_android {
2090
2002
  height: calc(56px + var(--seed-safe-area-top));
2091
- padding-inline: var(--seed-dimension-x4);
2003
+ padding-left: calc(var(--seed-dimension-x4) + var(--seed-safe-area-left));
2004
+ padding-right: calc(var(--seed-dimension-x4) + var(--seed-safe-area-right));
2092
2005
  padding-top: var(--seed-safe-area-top);
2093
2006
  }
2094
2007
 
@@ -2162,7 +2075,8 @@
2162
2075
  text-align: center;
2163
2076
  top: var(--seed-safe-area-top);
2164
2077
  bottom: 0;
2165
- padding-inline: var(--centered-title-padding-x, 0);
2078
+ padding-left: calc(var(--seed-safe-area-left) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-left) - var(--seed-dimension-x4)))), 0px));
2079
+ padding-right: calc(var(--seed-safe-area-right) + max(calc(var(--seed-dimension-x4) + var(--app-bar-area-extent, calc(var(--centered-title-padding-x, 0px) - var(--seed-safe-area-right) - var(--seed-dimension-x4)))), 0px));
2166
2080
  pointer-events: none;
2167
2081
  justify-content: center;
2168
2082
  align-items: center;
@@ -2212,9 +2126,11 @@
2212
2126
  .seed-app-screen__layer {
2213
2127
  z-index: var(--z-index-layer);
2214
2128
  box-sizing: border-box;
2215
- -webkit-overflow-scrolling: touch;
2216
2129
  width: 100%;
2217
2130
  height: 100%;
2131
+ padding-left: var(--seed-safe-area-left);
2132
+ padding-right: var(--seed-safe-area-right);
2133
+ -webkit-overflow-scrolling: touch;
2218
2134
  position: absolute;
2219
2135
  inset-inline: 0;
2220
2136
  overflow-y: scroll;
@@ -2240,11 +2156,7 @@
2240
2156
  inset-inline: 0;
2241
2157
  }
2242
2158
 
2243
- .seed-app-screen__root--theme_cupertino {
2244
- --app-bar-height: 44px;
2245
- }
2246
-
2247
- .seed-app-screen__root--theme_android {
2159
+ .seed-app-screen__root--theme_cupertino, .seed-app-screen__root--theme_android {
2248
2160
  --app-bar-height: 56px;
2249
2161
  }
2250
2162
 
@@ -2311,6 +2223,8 @@
2311
2223
  content: "";
2312
2224
  inset-inline: 0;
2313
2225
  margin-bottom: calc(-1 * (66px + 400px + var(--seed-safe-area-top)));
2226
+ margin-left: calc(-1 * var(--seed-safe-area-left));
2227
+ margin-right: calc(-1 * var(--seed-safe-area-right));
2314
2228
  height: calc(66px + 400px + var(--seed-safe-area-top));
2315
2229
  pointer-events: none;
2316
2230
  z-index: 1;
@@ -2709,36 +2623,91 @@
2709
2623
  -webkit-font-smoothing: antialiased;
2710
2624
  -moz-osx-font-smoothing: grayscale;
2711
2625
  align-items: center;
2626
+ min-width: 0;
2712
2627
  text-decoration: none;
2713
2628
  display: inline-flex;
2629
+ overflow: hidden;
2630
+ }
2631
+
2632
+ .seed-badge__prefix {
2633
+ color: inherit;
2634
+ --seed-icon-size: 100%;
2635
+ --seed-icon-color: currentColor;
2636
+ flex-shrink: 0;
2637
+ justify-content: center;
2638
+ align-items: center;
2639
+ display: inline-flex;
2714
2640
  }
2715
2641
 
2716
2642
  .seed-badge__label {
2717
2643
  text-overflow: ellipsis;
2718
2644
  white-space: nowrap;
2645
+ flex-shrink: 1;
2646
+ min-width: 0;
2719
2647
  overflow: hidden;
2720
2648
  }
2721
2649
 
2722
- .seed-badge__root--size_medium {
2723
- max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
2650
+ .seed-badge__action {
2651
+ border-radius: inherit;
2652
+ color: inherit;
2653
+ cursor: pointer;
2654
+ --seed-icon-size: 100%;
2655
+ --seed-icon-color: currentColor;
2656
+ background-color: #0000;
2657
+ border: none;
2658
+ flex-shrink: 0;
2659
+ justify-content: center;
2660
+ align-items: center;
2661
+ padding: 0;
2662
+ font-family: inherit;
2663
+ display: inline-flex;
2664
+ }
2665
+
2666
+ .seed-badge__action:is(:active, [data-active]) {
2667
+ scale: var(--seed-feedback-scale);
2668
+ }
2669
+
2670
+ .seed-badge__action {
2671
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
2672
+ outline: var(--seed-dimension-x0_5) solid transparent;
2673
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2674
+ }
2675
+
2676
+ .seed-badge__action:is(:focus-visible, [data-focus-visible]) {
2677
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
2678
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2679
+ }
2680
+
2681
+ .seed-badge__root--size_medium {
2724
2682
  min-height: var(--seed-dimension-x5);
2725
2683
  padding-inline: var(--seed-dimension-x1_5);
2726
2684
  padding-block: var(--seed-dimension-x0_5);
2727
2685
  border-radius: var(--seed-radius-r1);
2686
+ gap: var(--seed-dimension-x0_5);
2728
2687
  font-size: var(--seed-font-size-t1);
2729
2688
  line-height: var(--seed-line-height-t1);
2730
2689
  }
2731
2690
 
2691
+ .seed-badge__prefix--size_medium, .seed-badge__action--size_medium {
2692
+ width: var(--seed-dimension-x3);
2693
+ height: var(--seed-dimension-x3);
2694
+ }
2695
+
2732
2696
  .seed-badge__root--size_large {
2733
- max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
2734
2697
  min-height: var(--seed-dimension-x6);
2735
2698
  padding-inline: var(--seed-dimension-x2);
2736
2699
  padding-block: var(--seed-dimension-x1);
2737
2700
  border-radius: var(--seed-radius-r1_5);
2701
+ gap: var(--seed-dimension-x0_5);
2738
2702
  font-size: var(--seed-font-size-t2);
2739
2703
  line-height: var(--seed-line-height-t2);
2740
2704
  }
2741
2705
 
2706
+ .seed-badge__prefix--size_large, .seed-badge__action--size_large {
2707
+ width: var(--seed-dimension-x3_5);
2708
+ height: var(--seed-dimension-x3_5);
2709
+ }
2710
+
2742
2711
  .seed-badge__root--variant_weak {
2743
2712
  font-weight: var(--seed-font-weight-medium);
2744
2713
  }
@@ -2754,7 +2723,7 @@
2754
2723
 
2755
2724
  .seed-badge__root--tone_neutral-variant_solid {
2756
2725
  background-color: var(--seed-color-palette-gray-800);
2757
- color: var(--seed-color-fg-neutral-inverted);
2726
+ color: var(--seed-color-fg-on-neutral-solid);
2758
2727
  }
2759
2728
 
2760
2729
  .seed-badge__root--tone_neutral-variant_outline {
@@ -2769,7 +2738,7 @@
2769
2738
 
2770
2739
  .seed-badge__root--tone_brand-variant_solid {
2771
2740
  background-color: var(--seed-color-bg-brand-solid);
2772
- color: var(--seed-color-palette-static-white);
2741
+ color: var(--seed-color-fg-on-brand-solid);
2773
2742
  }
2774
2743
 
2775
2744
  .seed-badge__root--tone_brand-variant_outline {
@@ -2784,7 +2753,7 @@
2784
2753
 
2785
2754
  .seed-badge__root--tone_informative-variant_solid {
2786
2755
  background-color: var(--seed-color-bg-informative-solid);
2787
- color: var(--seed-color-palette-static-white);
2756
+ color: var(--seed-color-fg-on-informative-solid);
2788
2757
  }
2789
2758
 
2790
2759
  .seed-badge__root--tone_informative-variant_outline {
@@ -2799,7 +2768,7 @@
2799
2768
 
2800
2769
  .seed-badge__root--tone_positive-variant_solid {
2801
2770
  background-color: var(--seed-color-bg-positive-solid);
2802
- color: var(--seed-color-palette-static-white);
2771
+ color: var(--seed-color-fg-on-positive-solid);
2803
2772
  }
2804
2773
 
2805
2774
  .seed-badge__root--tone_positive-variant_outline {
@@ -2814,7 +2783,7 @@
2814
2783
 
2815
2784
  .seed-badge__root--tone_warning-variant_solid {
2816
2785
  background-color: var(--seed-color-bg-warning-solid);
2817
- color: var(--seed-color-palette-static-black-alpha-900);
2786
+ color: var(--seed-color-fg-on-warning-solid);
2818
2787
  }
2819
2788
 
2820
2789
  .seed-badge__root--tone_warning-variant_outline {
@@ -2829,7 +2798,7 @@
2829
2798
 
2830
2799
  .seed-badge__root--tone_critical-variant_solid {
2831
2800
  background-color: var(--seed-color-bg-critical-solid);
2832
- color: var(--seed-color-palette-static-white);
2801
+ color: var(--seed-color-fg-on-critical-solid);
2833
2802
  }
2834
2803
 
2835
2804
  .seed-badge__root--tone_critical-variant_outline {
@@ -3577,23 +3546,23 @@
3577
3546
  }
3578
3547
 
3579
3548
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3580
- background: var(--seed-color-bg-neutral-inverted);
3549
+ background: var(--seed-color-bg-neutral-solid);
3581
3550
  }
3582
3551
 
3583
3552
  @media (hover: hover) and (pointer: fine) {
3584
3553
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3585
- background: var(--seed-color-bg-neutral-inverted-pressed);
3554
+ background: var(--seed-color-bg-neutral-solid-pressed);
3586
3555
  }
3587
3556
  }
3588
3557
 
3589
3558
  @media not all and (hover: hover) and (pointer: fine) {
3590
3559
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3591
- background: var(--seed-color-bg-neutral-inverted-pressed);
3560
+ background: var(--seed-color-bg-neutral-solid-pressed);
3592
3561
  }
3593
3562
  }
3594
3563
 
3595
3564
  .seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3596
- color: var(--seed-color-fg-neutral-inverted);
3565
+ color: var(--seed-color-fg-on-neutral-solid);
3597
3566
  }
3598
3567
 
3599
3568
  .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3613,7 +3582,7 @@
3613
3582
  }
3614
3583
 
3615
3584
  .seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3616
- color: var(--seed-color-palette-static-white);
3585
+ color: var(--seed-color-fg-on-brand-solid);
3617
3586
  }
3618
3587
 
3619
3588
  @media (hover: hover) and (pointer: fine) {
@@ -3741,8 +3710,8 @@
3741
3710
 
3742
3711
  .seed-chip__root--variant_solid:is(:checked, [data-checked]) {
3743
3712
  box-shadow: none;
3744
- background: var(--seed-color-bg-neutral-inverted);
3745
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3713
+ background: var(--seed-color-bg-neutral-solid);
3714
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
3746
3715
  }
3747
3716
 
3748
3717
  @media (hover: hover) and (pointer: fine) {
@@ -3759,13 +3728,13 @@
3759
3728
 
3760
3729
  @media (hover: hover) and (pointer: fine) {
3761
3730
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3762
- background: var(--seed-color-bg-neutral-inverted-pressed);
3731
+ background: var(--seed-color-bg-neutral-solid-pressed);
3763
3732
  }
3764
3733
  }
3765
3734
 
3766
3735
  @media not all and (hover: hover) and (pointer: fine) {
3767
3736
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3768
- background: var(--seed-color-bg-neutral-inverted-pressed);
3737
+ background: var(--seed-color-bg-neutral-solid-pressed);
3769
3738
  }
3770
3739
  }
3771
3740
 
@@ -3778,7 +3747,7 @@
3778
3747
  }
3779
3748
 
3780
3749
  .seed-chip__label--variant_solid:is(:checked, [data-checked]) {
3781
- color: var(--seed-color-fg-neutral-inverted);
3750
+ color: var(--seed-color-fg-on-neutral-solid);
3782
3751
  }
3783
3752
 
3784
3753
  .seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid {
@@ -3804,19 +3773,19 @@
3804
3773
  }
3805
3774
 
3806
3775
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
3807
- background: var(--seed-color-bg-neutral-inverted);
3808
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3776
+ background: var(--seed-color-bg-neutral-solid);
3777
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
3809
3778
  }
3810
3779
 
3811
3780
  @media (hover: hover) and (pointer: fine) {
3812
3781
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
3813
- background: var(--seed-color-bg-neutral-inverted-pressed);
3782
+ background: var(--seed-color-bg-neutral-solid-pressed);
3814
3783
  }
3815
3784
  }
3816
3785
 
3817
3786
  @media not all and (hover: hover) and (pointer: fine) {
3818
3787
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
3819
- background: var(--seed-color-bg-neutral-inverted-pressed);
3788
+ background: var(--seed-color-bg-neutral-solid-pressed);
3820
3789
  }
3821
3790
  }
3822
3791
 
@@ -3829,7 +3798,7 @@
3829
3798
  }
3830
3799
 
3831
3800
  .seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
3832
- color: var(--seed-color-fg-neutral-inverted);
3801
+ color: var(--seed-color-fg-on-neutral-solid);
3833
3802
  }
3834
3803
 
3835
3804
  .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong {
@@ -4054,8 +4023,8 @@
4054
4023
  }
4055
4024
 
4056
4025
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]) {
4057
- background-color: var(--seed-color-bg-neutral-inverted);
4058
- color: var(--seed-color-fg-neutral-inverted);
4026
+ background-color: var(--seed-color-bg-neutral-solid);
4027
+ color: var(--seed-color-fg-on-neutral-solid);
4059
4028
  }
4060
4029
 
4061
4030
  @media (hover: hover) and (pointer: fine) {
@@ -4072,13 +4041,13 @@
4072
4041
 
4073
4042
  @media (hover: hover) and (pointer: fine) {
4074
4043
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4075
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4044
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4076
4045
  }
4077
4046
  }
4078
4047
 
4079
4048
  @media not all and (hover: hover) and (pointer: fine) {
4080
4049
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4081
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4050
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4082
4051
  }
4083
4052
  }
4084
4053
 
@@ -4094,8 +4063,8 @@
4094
4063
  }
4095
4064
 
4096
4065
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]) {
4097
- background-color: var(--seed-color-bg-neutral-inverted);
4098
- color: var(--seed-color-fg-neutral-inverted);
4066
+ background-color: var(--seed-color-bg-neutral-solid);
4067
+ color: var(--seed-color-fg-on-neutral-solid);
4099
4068
  border-color: #0000;
4100
4069
  }
4101
4070
 
@@ -4113,13 +4082,13 @@
4113
4082
 
4114
4083
  @media (hover: hover) and (pointer: fine) {
4115
4084
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4116
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4085
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4117
4086
  }
4118
4087
  }
4119
4088
 
4120
4089
  @media not all and (hover: hover) and (pointer: fine) {
4121
4090
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4122
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4091
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4123
4092
  }
4124
4093
  }
4125
4094
 
@@ -4157,249 +4126,6 @@
4157
4126
  top: 0;
4158
4127
  }
4159
4128
 
4160
- .seed-content-dialog__positioner {
4161
- overscroll-behavior-y: none;
4162
- --dialog-z-index: 2;
4163
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4164
- justify-content: center;
4165
- align-items: center;
4166
- display: flex;
4167
- position: fixed;
4168
- inset: 0;
4169
- }
4170
-
4171
- .seed-content-dialog__backdrop {
4172
- background: var(--seed-color-bg-overlay);
4173
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4174
- position: fixed;
4175
- inset: 0;
4176
- }
4177
-
4178
- .seed-content-dialog__backdrop:is([data-state="open"], [data-open]) {
4179
- animation: seed-enter;
4180
- animation-timing-function: var(--seed-timing-function-enter);
4181
- animation-duration: var(--seed-duration-d2);
4182
- --seed-enter-translate-x: 0;
4183
- --seed-enter-translate-y: 0;
4184
- --seed-enter-opacity: 0;
4185
- --seed-enter-scale: 1;
4186
- }
4187
-
4188
- .seed-content-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
4189
- animation: seed-exit;
4190
- animation-timing-function: var(--seed-timing-function-exit);
4191
- animation-duration: var(--seed-duration-d2);
4192
- --seed-exit-translate-x: 0;
4193
- --seed-exit-translate-y: 0;
4194
- --seed-exit-opacity: 0;
4195
- --seed-exit-scale: 1;
4196
- animation-fill-mode: forwards;
4197
- }
4198
-
4199
- .seed-content-dialog__content {
4200
- box-sizing: border-box;
4201
- word-break: break-all;
4202
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4203
- background: var(--seed-color-bg-layer-floating);
4204
- border-radius: var(--seed-radius-r5);
4205
- --content-dialog-default-width: calc(.9 * 100vw);
4206
- --content-dialog-default-max-width: calc(.9 * 100%);
4207
- --seed-box-width-base: var(--content-dialog-default-width);
4208
- --seed-box-width-sm: var(--seed-box-width-base, initial);
4209
- --seed-box-width-md: var(--seed-box-width-sm, initial);
4210
- --seed-box-width-lg: var(--seed-box-width-md, initial);
4211
- --seed-box-width-xl: var(--seed-box-width-lg, initial);
4212
- --seed-box-width: var(--seed-box-width-base, initial);
4213
- --seed-box-max-width-base: var(--content-dialog-default-max-width);
4214
- --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
4215
- --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
4216
- --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4217
- --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4218
- --seed-box-max-width: var(--seed-box-max-width-base, initial);
4219
- width: var(--seed-box-width);
4220
- max-width: var(--seed-box-max-width);
4221
- max-height: 80vh;
4222
- outline: none;
4223
- flex-direction: column;
4224
- flex: none;
4225
- max-height: 80dvh;
4226
- display: flex;
4227
- position: relative;
4228
- }
4229
-
4230
- @media (min-width: 768px) {
4231
- .seed-content-dialog__content {
4232
- --content-dialog-default-width: var(--content-dialog-size-width);
4233
- --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4234
- }
4235
- }
4236
-
4237
- .seed-content-dialog__content:is([data-state="open"], [data-open]) {
4238
- animation: seed-enter;
4239
- animation-timing-function: var(--seed-timing-function-enter-expressive);
4240
- animation-duration: var(--seed-duration-d4);
4241
- --seed-enter-translate-x: 0;
4242
- --seed-enter-translate-y: 0;
4243
- --seed-enter-opacity: 0;
4244
- --seed-enter-scale: 1.3;
4245
- }
4246
-
4247
- .seed-content-dialog__content:not(:is([data-state="open"], [data-open])) {
4248
- animation: seed-exit;
4249
- animation-timing-function: var(--seed-timing-function-exit);
4250
- animation-duration: var(--seed-duration-d2);
4251
- --seed-exit-translate-x: 0;
4252
- --seed-exit-translate-y: 0;
4253
- --seed-exit-opacity: 0;
4254
- --seed-exit-scale: 1;
4255
- animation-fill-mode: forwards;
4256
- }
4257
-
4258
- .seed-content-dialog__header {
4259
- gap: var(--seed-dimension-x1_5);
4260
- padding-inline: var(--seed-dimension-x6);
4261
- padding-top: var(--seed-dimension-x6);
4262
- padding-bottom: var(--seed-dimension-x4);
4263
- flex-direction: column;
4264
- flex-shrink: 0;
4265
- display: flex;
4266
- }
4267
-
4268
- .seed-content-dialog__header[data-show-close-button] {
4269
- padding-right: calc(var(--seed-dimension-x6) + 22px + var(--seed-dimension-x1_5));
4270
- }
4271
-
4272
- .seed-content-dialog__body {
4273
- box-sizing: border-box;
4274
- --seed-box-padding-x-base: var(--seed-dimension-x6);
4275
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
4276
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
4277
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
4278
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
4279
- --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
4280
- --seed-box-min-height-base: 0;
4281
- --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
4282
- --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
4283
- --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
4284
- --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
4285
- --seed-box-min-height: var(--seed-box-min-height-base, initial);
4286
- --seed-box-max-height-base: none;
4287
- --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
4288
- --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
4289
- --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
4290
- --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
4291
- --seed-box-max-height: var(--seed-box-max-height-base, initial);
4292
- --seed-box-justify-content: initial;
4293
- --seed-box-align-items: initial;
4294
- padding-inline: var(--seed-box-padding-x);
4295
- min-height: var(--seed-box-min-height);
4296
- max-height: var(--seed-box-max-height);
4297
- justify-content: var(--seed-box-justify-content);
4298
- align-items: var(--seed-box-align-items);
4299
- transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
4300
- flex-direction: column;
4301
- flex: 1;
4302
- display: flex;
4303
- overflow-y: auto;
4304
- }
4305
-
4306
- .seed-content-dialog__body[data-scrolled]:not(:first-child) {
4307
- box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
4308
- }
4309
-
4310
- .seed-content-dialog__body[data-overflow] {
4311
- padding-bottom: var(--seed-dimension-x12);
4312
- -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4313
- mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4314
- -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4315
- }
4316
-
4317
- .seed-content-dialog__body {
4318
- outline: var(--seed-dimension-x0_5) solid transparent;
4319
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4320
- }
4321
-
4322
- .seed-content-dialog__body:is(:focus-visible, [data-focus-visible]) {
4323
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4324
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4325
- }
4326
-
4327
- .seed-content-dialog__title {
4328
- color: var(--seed-color-fg-neutral);
4329
- font-size: var(--seed-font-size-t8);
4330
- line-height: var(--seed-line-height-t8);
4331
- font-weight: var(--seed-font-weight-bold);
4332
- margin: 0;
4333
- }
4334
-
4335
- .seed-content-dialog__description {
4336
- color: var(--seed-color-fg-neutral-muted);
4337
- font-size: var(--seed-font-size-t5);
4338
- line-height: var(--seed-line-height-t5);
4339
- font-weight: var(--seed-font-weight-regular);
4340
- white-space: pre-wrap;
4341
- margin: 0;
4342
- }
4343
-
4344
- .seed-content-dialog__footer {
4345
- padding-inline: var(--seed-dimension-x6);
4346
- padding-top: var(--seed-dimension-x4);
4347
- padding-bottom: var(--seed-dimension-x6);
4348
- flex-direction: column;
4349
- flex-shrink: 0;
4350
- align-items: stretch;
4351
- display: flex;
4352
- }
4353
-
4354
- .seed-content-dialog__closeButton {
4355
- top: var(--seed-dimension-x7);
4356
- right: var(--seed-dimension-x6);
4357
- background: var(--seed-color-bg-transparent);
4358
- border-radius: var(--seed-radius-r3);
4359
- cursor: pointer;
4360
- transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4361
- --seed-icon-size: 22px;
4362
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4363
- outline: var(--seed-dimension-x0_5) solid transparent;
4364
- outline-offset: var(--seed-dimension-x0_5);
4365
- border: none;
4366
- justify-content: center;
4367
- align-items: center;
4368
- margin: -15px;
4369
- padding: 15px;
4370
- display: flex;
4371
- position: absolute;
4372
- }
4373
-
4374
- .seed-content-dialog__closeButton:is(:focus-visible, [data-focus-visible]) {
4375
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4376
- outline-offset: var(--seed-dimension-x0_5);
4377
- }
4378
-
4379
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
4380
- scale: var(--seed-feedback-scale);
4381
- }
4382
-
4383
- @media (hover: hover) and (pointer: fine) {
4384
- .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
4385
- background: var(--seed-color-bg-transparent-pressed);
4386
- }
4387
- }
4388
-
4389
- @media not all and (hover: hover) and (pointer: fine) {
4390
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
4391
- background: var(--seed-color-bg-transparent-pressed);
4392
- }
4393
- }
4394
-
4395
- .seed-content-dialog__content--size_medium {
4396
- --content-dialog-size-width: 480px;
4397
- }
4398
-
4399
- .seed-content-dialog__content--size_large {
4400
- --content-dialog-size-width: 800px;
4401
- }
4402
-
4403
4129
  .seed-content-placeholder__root {
4404
4130
  box-sizing: border-box;
4405
4131
  vertical-align: top;
@@ -4483,23 +4209,23 @@
4483
4209
  }
4484
4210
 
4485
4211
  .seed-contextual-floating-button--variant_solid {
4486
- background: var(--seed-color-bg-neutral-inverted);
4487
- color: var(--seed-color-fg-neutral-inverted);
4488
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
4489
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
4212
+ background: var(--seed-color-bg-neutral-solid);
4213
+ color: var(--seed-color-fg-on-neutral-solid);
4214
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
4215
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
4490
4216
  --track-color: var(--seed-color-palette-gray-700);
4491
- --range-color: var(--seed-color-fg-neutral-inverted);
4217
+ --range-color: var(--seed-color-fg-on-neutral-solid);
4492
4218
  }
4493
4219
 
4494
4220
  @media (hover: hover) and (pointer: fine) {
4495
4221
  .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
4496
- background: var(--seed-color-bg-neutral-inverted-pressed);
4222
+ background: var(--seed-color-bg-neutral-solid-pressed);
4497
4223
  }
4498
4224
  }
4499
4225
 
4500
4226
  @media not all and (hover: hover) and (pointer: fine) {
4501
4227
  .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
4502
- background: var(--seed-color-bg-neutral-inverted-pressed);
4228
+ background: var(--seed-color-bg-neutral-solid-pressed);
4503
4229
  }
4504
4230
  }
4505
4231
 
@@ -4511,7 +4237,7 @@
4511
4237
  }
4512
4238
 
4513
4239
  .seed-contextual-floating-button--variant_solid[data-loading] {
4514
- background: var(--seed-color-bg-neutral-inverted-pressed);
4240
+ background: var(--seed-color-bg-neutral-solid-pressed);
4515
4241
  }
4516
4242
 
4517
4243
  .seed-contextual-floating-button--variant_layer {
@@ -4560,105 +4286,7 @@
4560
4286
  height: 44px;
4561
4287
  }
4562
4288
 
4563
- .seed-control-chip {
4564
- box-sizing: border-box;
4565
- cursor: pointer;
4566
- text-transform: none;
4567
- text-align: start;
4568
- white-space: nowrap;
4569
- -webkit-font-smoothing: antialiased;
4570
- -moz-osx-font-smoothing: grayscale;
4571
- border-radius: var(--seed-radius-full);
4572
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
4573
- color: var(--seed-color-fg-neutral);
4574
- line-height: 1;
4575
- font-weight: var(--seed-font-weight-medium);
4576
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
4577
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
4578
- --seed-icon-color: var(--seed-color-fg-neutral);
4579
- --seed-count-font-weight: var(--seed-font-weight-medium);
4580
- --seed-count-color: var(--seed-color-fg-neutral-muted);
4581
- border: none;
4582
- flex-shrink: 0;
4583
- justify-content: center;
4584
- align-items: center;
4585
- display: inline-flex;
4586
- position: relative;
4587
- }
4588
-
4589
- .seed-control-chip:is(:focus, [data-focus]) {
4590
- outline: none;
4591
- }
4592
-
4593
- .seed-control-chip:is(:active, [data-active]) {
4594
- background: var(--seed-color-bg-layer-default-pressed);
4595
- }
4596
-
4597
- .seed-control-chip:is(:checked, [data-checked]) {
4598
- box-shadow: none;
4599
- background: var(--seed-color-bg-neutral-solid-muted);
4600
- color: var(--seed-color-palette-static-white);
4601
- font-weight: var(--seed-font-weight-bold);
4602
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
4603
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
4604
- --seed-icon-color: var(--seed-color-palette-static-white);
4605
- --seed-count-color: var(--seed-color-palette-static-white-alpha-800);
4606
- }
4607
-
4608
- .seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) {
4609
- background: var(--seed-color-bg-neutral-solid-muted-pressed);
4610
- }
4611
-
4612
- .seed-control-chip:is(:disabled, [disabled], [data-disabled]) {
4613
- cursor: not-allowed;
4614
- background: var(--seed-color-bg-disabled);
4615
- color: var(--seed-color-fg-disabled);
4616
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
4617
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
4618
- --seed-icon-color: var(--seed-color-fg-disabled);
4619
- }
4620
-
4621
- .seed-control-chip--size_medium {
4622
- min-height: var(--seed-dimension-x9);
4623
- padding-block: var(--seed-dimension-x2);
4624
- gap: var(--seed-dimension-x1);
4625
- font-size: var(--seed-font-size-t4);
4626
- line-height: var(--seed-line-height-t4);
4627
- --seed-prefix-icon-size: var(--seed-dimension-x4);
4628
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
4629
- --seed-icon-size: var(--seed-dimension-x4);
4630
- --seed-count-font-size: var(--seed-font-size-t4);
4631
- }
4632
-
4633
- .seed-control-chip--size_small {
4634
- min-height: var(--seed-dimension-x8);
4635
- padding-block: var(--seed-dimension-x1_5);
4636
- gap: var(--seed-dimension-x1);
4637
- font-size: var(--seed-font-size-t4);
4638
- line-height: var(--seed-line-height-t4);
4639
- --seed-prefix-icon-size: var(--seed-dimension-x4);
4640
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
4641
- --seed-icon-size: var(--seed-dimension-x4);
4642
- --seed-count-font-size: var(--seed-font-size-t4);
4643
- }
4644
-
4645
- .seed-control-chip--size_medium-layout_withText {
4646
- padding-inline: var(--seed-dimension-x3_5);
4647
- }
4648
-
4649
- .seed-control-chip--size_medium-layout_iconOnly {
4650
- min-width: var(--seed-dimension-x9);
4651
- }
4652
-
4653
- .seed-control-chip--size_small-layout_withText {
4654
- padding-inline: var(--seed-dimension-x3);
4655
- }
4656
-
4657
- .seed-control-chip--size_small-layout_iconOnly {
4658
- min-width: var(--seed-dimension-x8);
4659
- }
4660
-
4661
- .seed-date-picker__root {
4289
+ .seed-date-picker__root {
4662
4290
  box-sizing: border-box;
4663
4291
  --seed-box-height-base: auto;
4664
4292
  --seed-box-height-sm: var(--seed-box-height-base, initial);
@@ -4743,6 +4371,10 @@
4743
4371
  display: inline-flex;
4744
4372
  }
4745
4373
 
4374
+ .seed-date-picker__headerChevron[data-expanded] {
4375
+ transform: rotate(180deg);
4376
+ }
4377
+
4746
4378
  .seed-date-picker__navigation {
4747
4379
  flex-shrink: 0;
4748
4380
  align-items: center;
@@ -4931,11 +4563,11 @@
4931
4563
  }
4932
4564
 
4933
4565
  .seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]):before {
4934
- background-color: var(--seed-color-bg-neutral-inverted);
4566
+ background-color: var(--seed-color-bg-neutral-solid);
4935
4567
  }
4936
4568
 
4937
4569
  .seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]) {
4938
- color: var(--seed-color-fg-neutral-inverted);
4570
+ color: var(--seed-color-fg-on-neutral-solid);
4939
4571
  }
4940
4572
 
4941
4573
  @media (hover: hover) and (pointer: fine) {
@@ -4952,13 +4584,13 @@
4952
4584
 
4953
4585
  @media (hover: hover) and (pointer: fine) {
4954
4586
  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not([data-in-range]):before {
4955
- background-color: var(--seed-color-bg-neutral-inverted);
4587
+ background-color: var(--seed-color-bg-neutral-solid);
4956
4588
  }
4957
4589
  }
4958
4590
 
4959
4591
  @media not all and (hover: hover) and (pointer: fine) {
4960
4592
  .seed-date-picker__dateButton:not(:is(:disabled, [disabled], [data-disabled])):not([data-range-start-readonly]):is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not([data-in-range]):before {
4961
- background-color: var(--seed-color-bg-neutral-inverted);
4593
+ background-color: var(--seed-color-bg-neutral-solid);
4962
4594
  }
4963
4595
  }
4964
4596
 
@@ -5083,33 +4715,44 @@
5083
4715
  overflow: hidden;
5084
4716
  }
5085
4717
 
4718
+ .seed-date-picker__wheelPositioner {
4719
+ z-index: 3;
4720
+ outline: none;
4721
+ }
4722
+
4723
+ .seed-date-picker__wheelPopover {
4724
+ border-radius: var(--seed-radius-r3);
4725
+ background-color: var(--seed-color-bg-layer-floating);
4726
+ width: 240px;
4727
+ box-shadow: var(--seed-shadow-s3);
4728
+ overflow: hidden;
4729
+ }
4730
+
4731
+ .seed-date-picker__wheelPopover:is(:focus, [data-focus]) {
4732
+ outline: none;
4733
+ }
4734
+
5086
4735
  .seed-date-picker__wheelView {
4736
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
4737
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
5087
4738
  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
5088
4739
  width: 100%;
5089
4740
  }
5090
4741
 
5091
- .seed-date-picker__wheelSelectionIndicator {
5092
- border-radius: var(--seed-radius-r2);
4742
+ .seed-date-picker__wheelView [data-wheel-picker-indicator] {
5093
4743
  background-color: var(--seed-color-bg-neutral-weak);
5094
4744
  }
5095
4745
 
5096
4746
  .seed-date-picker__yearColumn {
5097
4747
  --seed-wheel-picker-item-justify-content: flex-end;
5098
4748
  flex: 0 0 120px;
4749
+ min-width: 120px;
5099
4750
  }
5100
4751
 
5101
4752
  .seed-date-picker__monthColumn {
5102
4753
  --seed-wheel-picker-item-justify-content: flex-start;
5103
4754
  flex: 0 0 96px;
5104
- }
5105
-
5106
- .seed-date-picker__wheelItem {
5107
- --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
5108
- --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
5109
- padding-inline: var(--seed-dimension-x4);
5110
- font-size: var(--seed-font-size-t10-static);
5111
- line-height: var(--seed-line-height-t10-static);
5112
- font-weight: var(--seed-font-weight-medium);
4755
+ min-width: 96px;
5113
4756
  }
5114
4757
 
5115
4758
  .seed-date-picker__liveRegion {
@@ -5142,6 +4785,10 @@
5142
4785
  height: 24px;
5143
4786
  }
5144
4787
 
4788
+ .seed-date-picker__wheelView--visibleRange_week [data-wheel-picker-indicator] {
4789
+ inset-inline: 0;
4790
+ }
4791
+
5145
4792
  .seed-dialog__positioner {
5146
4793
  overscroll-behavior-y: none;
5147
4794
  --dialog-z-index: 2;
@@ -5160,60 +4807,7 @@
5160
4807
  inset: 0;
5161
4808
  }
5162
4809
 
5163
- .seed-dialog__content {
5164
- box-sizing: border-box;
5165
- word-break: break-all;
5166
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5167
- background: var(--seed-color-bg-layer-floating);
5168
- max-width: 272px;
5169
- margin: auto var(--seed-dimension-x8);
5170
- border-radius: var(--seed-radius-r5);
5171
- outline: none;
5172
- flex-direction: column;
5173
- flex: 1;
5174
- display: flex;
5175
- position: relative;
5176
- }
5177
-
5178
- .seed-dialog__content:is(:focus, [data-focus]) {
5179
- outline: none;
5180
- }
5181
-
5182
- .seed-dialog__header {
5183
- padding-inline: var(--seed-dimension-x5);
5184
- padding-top: var(--seed-dimension-x5);
5185
- gap: var(--seed-dimension-x1_5);
5186
- flex-direction: column;
5187
- display: flex;
5188
- }
5189
-
5190
- .seed-dialog__title {
5191
- color: var(--seed-color-fg-neutral);
5192
- font-size: var(--seed-font-size-t7);
5193
- line-height: var(--seed-line-height-t7);
5194
- font-weight: var(--seed-font-weight-bold);
5195
- margin: 0;
5196
- }
5197
-
5198
- .seed-dialog__description {
5199
- color: var(--seed-color-fg-neutral);
5200
- font-size: var(--seed-font-size-t5);
5201
- line-height: var(--seed-line-height-t5);
5202
- font-weight: var(--seed-font-weight-regular);
5203
- white-space: pre-wrap;
5204
- margin: 0;
5205
- }
5206
-
5207
- .seed-dialog__footer {
5208
- padding-inline: var(--seed-dimension-x5);
5209
- padding-top: var(--seed-dimension-x4);
5210
- padding-bottom: var(--seed-dimension-x5);
5211
- flex-direction: column;
5212
- align-items: stretch;
5213
- display: flex;
5214
- }
5215
-
5216
- .seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
4810
+ .seed-dialog__backdrop:is([data-state="open"], [data-open]) {
5217
4811
  animation: seed-enter;
5218
4812
  animation-timing-function: var(--seed-timing-function-enter);
5219
4813
  animation-duration: var(--seed-duration-d2);
@@ -5223,7 +4817,7 @@
5223
4817
  --seed-enter-scale: 1;
5224
4818
  }
5225
4819
 
5226
- .seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
4820
+ .seed-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
5227
4821
  animation: seed-exit;
5228
4822
  animation-timing-function: var(--seed-timing-function-exit);
5229
4823
  animation-duration: var(--seed-duration-d2);
@@ -5234,7 +4828,45 @@
5234
4828
  animation-fill-mode: forwards;
5235
4829
  }
5236
4830
 
5237
- .seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
4831
+ .seed-dialog__content {
4832
+ box-sizing: border-box;
4833
+ word-break: break-all;
4834
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4835
+ background: var(--seed-color-bg-layer-floating);
4836
+ border-radius: var(--seed-radius-r5);
4837
+ --dialog-default-width: calc(.9 * 100vw);
4838
+ --dialog-default-max-width: calc(.9 * 100%);
4839
+ --seed-box-width-base: var(--dialog-default-width);
4840
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
4841
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
4842
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
4843
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
4844
+ --seed-box-width: var(--seed-box-width-base, initial);
4845
+ --seed-box-max-width-base: var(--dialog-default-max-width);
4846
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
4847
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
4848
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4849
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4850
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
4851
+ width: var(--seed-box-width);
4852
+ max-width: var(--seed-box-max-width);
4853
+ max-height: 80vh;
4854
+ outline: none;
4855
+ flex-direction: column;
4856
+ flex: none;
4857
+ max-height: 80dvh;
4858
+ display: flex;
4859
+ position: relative;
4860
+ }
4861
+
4862
+ @media (min-width: 768px) {
4863
+ .seed-dialog__content {
4864
+ --dialog-default-width: var(--dialog-size-width);
4865
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4866
+ }
4867
+ }
4868
+
4869
+ .seed-dialog__content:is([data-state="open"], [data-open]) {
5238
4870
  animation: seed-enter;
5239
4871
  animation-timing-function: var(--seed-timing-function-enter-expressive);
5240
4872
  animation-duration: var(--seed-duration-d4);
@@ -5244,7 +4876,7 @@
5244
4876
  --seed-enter-scale: 1.3;
5245
4877
  }
5246
4878
 
5247
- .seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
4879
+ .seed-dialog__content:not(:is([data-state="open"], [data-open])) {
5248
4880
  animation: seed-exit;
5249
4881
  animation-timing-function: var(--seed-timing-function-exit);
5250
4882
  animation-duration: var(--seed-duration-d2);
@@ -5255,286 +4887,149 @@
5255
4887
  animation-fill-mode: forwards;
5256
4888
  }
5257
4889
 
5258
- .seed-extended-action-sheet__positioner {
5259
- overscroll-behavior-y: none;
5260
- --sheet-z-index: 2;
5261
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5262
- justify-content: center;
5263
- align-items: flex-end;
5264
- display: flex;
5265
- position: fixed;
5266
- inset: 0;
5267
- }
5268
-
5269
- .seed-extended-action-sheet__backdrop {
5270
- background: var(--seed-color-bg-overlay);
5271
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5272
- position: fixed;
5273
- inset: 0;
5274
- }
5275
-
5276
- .seed-extended-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
5277
- animation: seed-exit;
5278
- animation-timing-function: var(--seed-timing-function-exit);
5279
- animation-duration: var(--seed-duration-d2);
5280
- --seed-exit-translate-x: 0;
5281
- --seed-exit-translate-y: 0;
5282
- --seed-exit-opacity: 0;
5283
- --seed-exit-scale: 1;
5284
- animation-fill-mode: forwards;
5285
- }
5286
-
5287
- .seed-extended-action-sheet__backdrop:is([data-state="open"], [data-open]) {
5288
- animation: seed-enter;
5289
- animation-timing-function: var(--seed-timing-function-enter);
5290
- animation-duration: var(--seed-duration-d2);
5291
- --seed-enter-translate-x: 0;
5292
- --seed-enter-translate-y: 0;
5293
- --seed-enter-opacity: 0;
5294
- --seed-enter-scale: 1;
5295
- }
5296
-
5297
- .seed-extended-action-sheet__content {
5298
- box-sizing: border-box;
5299
- word-break: break-all;
5300
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5301
- background: var(--seed-color-bg-layer-floating);
5302
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
5303
- padding-block: var(--seed-dimension-x4);
5304
- border-top-left-radius: var(--seed-radius-r5);
5305
- border-top-right-radius: var(--seed-radius-r5);
5306
- flex-direction: column;
5307
- flex: 1;
5308
- display: flex;
5309
- position: relative;
5310
- }
5311
-
5312
- .seed-extended-action-sheet__content:not(:is([data-state="open"], [data-open])) {
5313
- animation: seed-exit;
5314
- animation-timing-function: var(--seed-timing-function-exit);
5315
- animation-duration: var(--seed-duration-d4);
5316
- --seed-exit-translate-x: 0;
5317
- --seed-exit-translate-y: 100%;
5318
- --seed-exit-opacity: 1;
5319
- --seed-exit-scale: 1;
5320
- animation-fill-mode: forwards;
5321
- }
5322
-
5323
- .seed-extended-action-sheet__content:is([data-state="open"], [data-open]) {
5324
- animation: seed-enter;
5325
- animation-timing-function: var(--seed-timing-function-enter-expressive);
5326
- animation-duration: var(--seed-duration-d6);
5327
- --seed-enter-translate-x: 0;
5328
- --seed-enter-translate-y: 100%;
5329
- --seed-enter-opacity: 1;
5330
- --seed-enter-scale: 1;
5331
- }
5332
-
5333
- .seed-extended-action-sheet__header {
5334
- align-items: center;
5335
- gap: var(--seed-dimension-x1);
4890
+ .seed-dialog__header {
4891
+ gap: var(--seed-dimension-x1_5);
4892
+ padding-inline: var(--seed-dimension-x6);
4893
+ padding-top: var(--seed-dimension-x6);
5336
4894
  padding-bottom: var(--seed-dimension-x4);
5337
4895
  flex-direction: column;
4896
+ flex-shrink: 0;
5338
4897
  display: flex;
5339
4898
  }
5340
4899
 
5341
- .seed-extended-action-sheet__title {
5342
- color: var(--seed-color-fg-neutral);
5343
- font-size: var(--seed-font-size-t6);
5344
- line-height: var(--seed-line-height-t6);
5345
- font-weight: var(--seed-font-weight-bold);
5346
- }
5347
-
5348
- .seed-extended-action-sheet__list {
5349
- align-items: stretch;
5350
- gap: var(--seed-dimension-x2_5);
5351
- flex-direction: column;
5352
- display: flex;
5353
- }
5354
-
5355
- .seed-extended-action-sheet__group {
5356
- border-radius: var(--seed-radius-r4);
5357
- flex-direction: column;
5358
- align-items: stretch;
5359
- display: flex;
5360
- overflow: hidden;
5361
- }
5362
-
5363
- .seed-extended-action-sheet__footer {
5364
- padding-top: var(--seed-dimension-x2_5);
5365
- flex-direction: column;
5366
- align-items: stretch;
5367
- display: flex;
5368
- }
5369
-
5370
- .seed-extended-action-sheet__closeButton {
5371
- background-color: var(--seed-color-bg-neutral-weak);
5372
- min-height: 52px;
5373
- padding-inline: var(--seed-dimension-x5);
5374
- padding-block: var(--seed-dimension-x3_5);
5375
- border-radius: var(--seed-radius-r3);
5376
- color: var(--seed-color-fg-neutral);
5377
- font-size: var(--seed-font-size-t5);
5378
- line-height: var(--seed-line-height-t5);
5379
- font-weight: var(--seed-font-weight-medium);
5380
- justify-content: center;
5381
- align-items: center;
5382
- display: flex;
5383
- }
5384
-
5385
- .seed-extended-action-sheet__closeButton:is(:active, [data-active]) {
5386
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5387
- }
5388
-
5389
- .seed-extended-action-sheet-item {
5390
- background-color: var(--seed-color-bg-neutral-weak);
5391
- min-height: 52px;
5392
- padding-inline: var(--seed-dimension-x4);
5393
- padding-block: var(--seed-dimension-x3_5);
5394
- justify-content: flex-start;
5395
- align-items: center;
5396
- gap: var(--seed-dimension-x3_5);
5397
- box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
5398
- font-size: var(--seed-font-size-t5);
5399
- line-height: var(--seed-line-height-t5);
5400
- font-weight: var(--seed-font-weight-regular);
5401
- display: flex;
5402
- }
5403
-
5404
- .seed-extended-action-sheet-item:is(:active, [data-active]) {
5405
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5406
- }
5407
-
5408
- .seed-extended-action-sheet-item:last-child {
5409
- box-shadow: none;
5410
- }
5411
-
5412
- .seed-extended-action-sheet-item {
5413
- --seed-prefix-icon-size: 22px;
5414
- }
5415
-
5416
- .seed-extended-action-sheet-item--tone_neutral {
5417
- color: var(--seed-color-fg-neutral);
5418
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5419
- }
5420
-
5421
- .seed-extended-action-sheet-item--tone_critical {
5422
- color: var(--seed-color-fg-critical);
5423
- --seed-prefix-icon-color: var(--seed-color-fg-critical);
4900
+ .seed-dialog__header[data-show-close-button] {
4901
+ padding-right: calc(var(--seed-dimension-x6) + 22px + var(--seed-dimension-x1_5));
5424
4902
  }
5425
4903
 
5426
- .seed-extended-fab {
4904
+ .seed-dialog__body {
5427
4905
  box-sizing: border-box;
5428
- cursor: pointer;
5429
- text-transform: none;
5430
- white-space: nowrap;
5431
- vertical-align: middle;
5432
- -webkit-font-smoothing: antialiased;
5433
- -moz-osx-font-smoothing: grayscale;
5434
- border: none;
5435
- flex-shrink: 0;
5436
- justify-content: center;
5437
- align-items: center;
5438
- font-family: inherit;
5439
- text-decoration: none;
5440
- display: inline-flex;
5441
- }
5442
-
5443
- .seed-extended-fab:is(:focus, [data-focus]) {
5444
- outline: none;
5445
- }
5446
-
5447
- .seed-extended-fab:is(:disabled, [disabled], [data-disabled]) {
5448
- cursor: not-allowed;
4906
+ --seed-box-padding-x-base: var(--seed-dimension-x6);
4907
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
4908
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
4909
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
4910
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
4911
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
4912
+ --seed-box-min-height-base: 0;
4913
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
4914
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
4915
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
4916
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
4917
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
4918
+ --seed-box-max-height-base: none;
4919
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
4920
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
4921
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
4922
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
4923
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
4924
+ --seed-box-justify-content: initial;
4925
+ --seed-box-align-items: initial;
4926
+ padding-inline: var(--seed-box-padding-x);
4927
+ min-height: var(--seed-box-min-height);
4928
+ max-height: var(--seed-box-max-height);
4929
+ justify-content: var(--seed-box-justify-content);
4930
+ align-items: var(--seed-box-align-items);
4931
+ transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
4932
+ flex-direction: column;
4933
+ flex: 1;
4934
+ display: flex;
4935
+ overflow-y: auto;
5449
4936
  }
5450
4937
 
5451
- .seed-extended-fab {
5452
- border-radius: var(--seed-radius-full);
5453
- box-shadow: 0 2px 6px #00000026;
4938
+ .seed-dialog__body[data-scrolled]:not(:first-child) {
4939
+ box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
5454
4940
  }
5455
4941
 
5456
- .seed-extended-fab--variant_neutralSolid {
5457
- background: var(--seed-color-bg-neutral-inverted);
5458
- color: var(--seed-color-fg-neutral-inverted);
4942
+ .seed-dialog__body[data-overflow] {
4943
+ padding-bottom: var(--seed-dimension-x12);
4944
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4945
+ mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4946
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
5459
4947
  }
5460
4948
 
5461
- .seed-extended-fab--variant_neutralSolid:is(:active, [data-active]) {
5462
- background: var(--seed-color-bg-neutral-inverted-pressed);
4949
+ .seed-dialog__body {
4950
+ outline: var(--seed-dimension-x0_5) solid transparent;
4951
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5463
4952
  }
5464
4953
 
5465
- .seed-extended-fab--variant_neutralSolid {
5466
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
4954
+ .seed-dialog__body:is(:focus-visible, [data-focus-visible]) {
4955
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4956
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5467
4957
  }
5468
4958
 
5469
- .seed-extended-fab--variant_layerFloating {
5470
- background: var(--seed-color-bg-layer-floating);
4959
+ .seed-dialog__title {
5471
4960
  color: var(--seed-color-fg-neutral);
4961
+ font-size: var(--seed-font-size-t8);
4962
+ line-height: var(--seed-line-height-t8);
4963
+ font-weight: var(--seed-font-weight-bold);
4964
+ margin: 0;
5472
4965
  }
5473
4966
 
5474
- .seed-extended-fab--variant_layerFloating:is(:active, [data-active]) {
5475
- background: var(--seed-color-bg-layer-floating-pressed);
5476
- }
5477
-
5478
- .seed-extended-fab--variant_layerFloating {
5479
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5480
- }
5481
-
5482
- .seed-extended-fab--size_small {
5483
- padding-inline: var(--seed-dimension-x3_5);
5484
- padding-block: var(--seed-dimension-x2_5);
5485
- gap: var(--seed-dimension-x1);
5486
- min-height: 40px;
5487
- font-size: var(--seed-font-size-t4);
5488
- line-height: var(--seed-line-height-t4);
5489
- font-weight: var(--seed-font-weight-medium);
5490
- --seed-prefix-icon-size: 16px;
5491
- }
5492
-
5493
- .seed-extended-fab--size_medium {
5494
- padding-inline: var(--seed-dimension-x4);
5495
- padding-block: var(--seed-dimension-x3);
5496
- gap: var(--seed-dimension-x1);
5497
- min-height: 48px;
4967
+ .seed-dialog__description {
4968
+ color: var(--seed-color-fg-neutral-muted);
5498
4969
  font-size: var(--seed-font-size-t5);
5499
4970
  line-height: var(--seed-line-height-t5);
5500
- font-weight: var(--seed-font-weight-bold);
5501
- --seed-prefix-icon-size: 16px;
4971
+ font-weight: var(--seed-font-weight-regular);
4972
+ white-space: pre-wrap;
4973
+ margin: 0;
5502
4974
  }
5503
4975
 
5504
- .seed-fab {
5505
- box-sizing: border-box;
4976
+ .seed-dialog__footer {
4977
+ padding-inline: var(--seed-dimension-x6);
4978
+ padding-top: var(--seed-dimension-x4);
4979
+ padding-bottom: var(--seed-dimension-x6);
4980
+ flex-direction: column;
4981
+ flex-shrink: 0;
4982
+ align-items: stretch;
4983
+ display: flex;
4984
+ }
4985
+
4986
+ .seed-dialog__closeButton {
4987
+ top: var(--seed-dimension-x7);
4988
+ right: var(--seed-dimension-x6);
4989
+ background: var(--seed-color-bg-transparent);
4990
+ border-radius: var(--seed-radius-r3);
5506
4991
  cursor: pointer;
5507
- text-transform: none;
5508
- -webkit-font-smoothing: antialiased;
5509
- -moz-osx-font-smoothing: grayscale;
4992
+ transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
4993
+ --seed-icon-size: 22px;
4994
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4995
+ outline: var(--seed-dimension-x0_5) solid transparent;
4996
+ outline-offset: var(--seed-dimension-x0_5);
5510
4997
  border: none;
5511
4998
  justify-content: center;
5512
4999
  align-items: center;
5513
- font-family: inherit;
5514
- text-decoration: none;
5515
- display: inline-flex;
5000
+ margin: -15px;
5001
+ padding: 15px;
5002
+ display: flex;
5003
+ position: absolute;
5516
5004
  }
5517
5005
 
5518
- .seed-fab:is(:focus, [data-focus]) {
5519
- outline: none;
5006
+ .seed-dialog__closeButton:is(:focus-visible, [data-focus-visible]) {
5007
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5008
+ outline-offset: var(--seed-dimension-x0_5);
5520
5009
  }
5521
5010
 
5522
- .seed-fab:is(:disabled, [disabled], [data-disabled]) {
5523
- cursor: not-allowed;
5011
+ .seed-dialog__closeButton:is(:active, [data-active]) {
5012
+ scale: var(--seed-feedback-scale);
5524
5013
  }
5525
5014
 
5526
- .seed-fab {
5527
- background: var(--seed-color-bg-layer-floating);
5528
- border-radius: var(--seed-radius-full);
5529
- --seed-icon-size: 22px;
5530
- --seed-icon-color: var(--seed-color-fg-neutral);
5531
- width: 44px;
5532
- height: 44px;
5533
- box-shadow: 0 2px 6px #00000026;
5015
+ @media (hover: hover) and (pointer: fine) {
5016
+ .seed-dialog__closeButton:is(:hover, [data-hover]) {
5017
+ background: var(--seed-color-bg-transparent-pressed);
5018
+ }
5534
5019
  }
5535
5020
 
5536
- .seed-fab:is(:active, [data-active]) {
5537
- background: var(--seed-color-bg-layer-floating-pressed);
5021
+ @media not all and (hover: hover) and (pointer: fine) {
5022
+ .seed-dialog__closeButton:is(:active, [data-active]) {
5023
+ background: var(--seed-color-bg-transparent-pressed);
5024
+ }
5025
+ }
5026
+
5027
+ .seed-dialog__content--size_medium {
5028
+ --dialog-size-width: 480px;
5029
+ }
5030
+
5031
+ .seed-dialog__content--size_large {
5032
+ --dialog-size-width: 800px;
5538
5033
  }
5539
5034
 
5540
5035
  .seed-field__root {
@@ -6144,7 +5639,7 @@
6144
5639
  background: var(--seed-color-bg-brand-solid);
6145
5640
  border-radius: var(--seed-radius-full);
6146
5641
  box-shadow: var(--seed-shadow-s3);
6147
- color: var(--seed-color-palette-static-white);
5642
+ color: var(--seed-color-fg-on-brand-solid);
6148
5643
  font-size: var(--seed-font-size-t5);
6149
5644
  line-height: var(--seed-line-height-t5);
6150
5645
  font-weight: var(--seed-font-weight-bold);
@@ -6173,7 +5668,7 @@
6173
5668
  }
6174
5669
 
6175
5670
  .seed-floating-action-button__icon {
6176
- color: var(--seed-color-palette-static-white);
5671
+ color: var(--seed-color-fg-on-brand-solid);
6177
5672
  transition: margin-right var(--seed-duration-d4) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
6178
5673
  flex-shrink: 0;
6179
5674
  justify-content: center;
@@ -6280,7 +5775,7 @@
6280
5775
 
6281
5776
  .seed-help-bubble__content {
6282
5777
  box-sizing: border-box;
6283
- background: var(--seed-color-bg-neutral-inverted);
5778
+ background: var(--seed-color-bg-neutral-solid);
6284
5779
  padding-inline: var(--seed-dimension-x3);
6285
5780
  padding-block: var(--seed-dimension-x2_5);
6286
5781
  border-radius: var(--seed-radius-r3);
@@ -6324,13 +5819,17 @@
6324
5819
  display: none !important;
6325
5820
  }
6326
5821
 
5822
+ .seed-help-bubble__content:is(:focus, [data-focus]) {
5823
+ outline: none;
5824
+ }
5825
+
6327
5826
  .seed-help-bubble__arrow {
6328
5827
  width: 12px;
6329
5828
  height: 12px;
6330
5829
  }
6331
5830
 
6332
5831
  .seed-help-bubble__arrowTip {
6333
- fill: var(--seed-color-bg-neutral-inverted);
5832
+ fill: var(--seed-color-bg-neutral-solid);
6334
5833
  width: 12px;
6335
5834
  height: 8px;
6336
5835
  display: block;
@@ -6346,7 +5845,7 @@
6346
5845
  }
6347
5846
 
6348
5847
  .seed-help-bubble__title {
6349
- color: var(--seed-color-fg-neutral-inverted);
5848
+ color: var(--seed-color-fg-on-neutral-solid);
6350
5849
  font-size: var(--seed-font-size-t3);
6351
5850
  font-weight: var(--seed-font-weight-bold);
6352
5851
  line-height: var(--seed-line-height-t3);
@@ -6354,7 +5853,7 @@
6354
5853
  }
6355
5854
 
6356
5855
  .seed-help-bubble__description {
6357
- color: var(--seed-color-fg-neutral-inverted);
5856
+ color: var(--seed-color-fg-on-neutral-solid);
6358
5857
  font-size: var(--seed-font-size-t3);
6359
5858
  font-weight: var(--seed-font-weight-regular);
6360
5859
  line-height: var(--seed-line-height-t3);
@@ -6367,9 +5866,9 @@
6367
5866
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
6368
5867
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
6369
5868
  margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
6370
- color: var(--seed-color-fg-neutral-inverted);
5869
+ color: var(--seed-color-fg-on-neutral-solid);
6371
5870
  --seed-icon-size: var(--seed-dimension-x3_5);
6372
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
5871
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
6373
5872
  border-radius: var(--seed-radius-r3);
6374
5873
  background: none;
6375
5874
  border: none;
@@ -6537,168 +6036,8 @@
6537
6036
  pointer-events: none;
6538
6037
  filter: drop-shadow(0 2px 2px #00000026);
6539
6038
  margin: auto;
6540
- position: absolute;
6541
- inset: 0;
6542
- }
6543
-
6544
- .seed-inline-banner__root {
6545
- box-sizing: border-box;
6546
- -webkit-font-smoothing: antialiased;
6547
- -moz-osx-font-smoothing: grayscale;
6548
- text-align: start;
6549
- width: 100%;
6550
- min-height: var(--seed-dimension-x10);
6551
- padding-inline: var(--seed-dimension-x4);
6552
- padding-block: var(--seed-dimension-x2_5);
6553
- --seed-prefix-icon-size: var(--seed-dimension-x4);
6554
- --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
6555
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
6556
- --seed-suffix-icon-size: var(--seed-dimension-x4);
6557
- --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
6558
- --seed-suffix-icon-align-self: center;
6559
- border: none;
6560
- align-items: flex-start;
6561
- font-family: inherit;
6562
- display: flex;
6563
- }
6564
-
6565
- .seed-inline-banner__root:is(button) {
6566
- cursor: pointer;
6567
- }
6568
-
6569
- .seed-inline-banner__content {
6570
- margin-inline-end: auto;
6571
- }
6572
-
6573
- .seed-inline-banner__title {
6574
- font-size: var(--seed-font-size-t4);
6575
- line-height: var(--seed-line-height-t4);
6576
- font-weight: var(--seed-font-weight-bold);
6577
- flex-shrink: 0;
6578
- }
6579
-
6580
- .seed-inline-banner__title:after {
6581
- content: " ";
6582
- white-space: pre;
6583
- }
6584
-
6585
- .seed-inline-banner__description {
6586
- font-size: var(--seed-font-size-t4);
6587
- line-height: var(--seed-line-height-t4);
6588
- font-weight: var(--seed-font-weight-medium);
6589
- }
6590
-
6591
- .seed-inline-banner__link {
6592
- cursor: pointer;
6593
- margin-block: auto;
6594
- margin-left: var(--seed-dimension-x4);
6595
- font-family: inherit;
6596
- font-size: var(--seed-font-size-t2);
6597
- line-height: var(--seed-line-height-t2);
6598
- font-weight: var(--seed-font-weight-regular);
6599
- text-underline-offset: 2px;
6600
- background-color: #0000;
6601
- border: none;
6602
- flex-grow: 0;
6603
- flex-shrink: 0;
6604
- align-items: center;
6605
- text-decoration: underline;
6606
- display: flex;
6607
- }
6608
-
6609
- .seed-inline-banner__closeButton {
6610
- width: var(--seed-dimension-x10);
6611
- height: var(--seed-dimension-x10);
6612
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
6613
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
6614
- --seed-suffix-icon-margin-left: initial;
6615
- cursor: pointer;
6616
- background-color: #0000;
6617
- border: none;
6618
- flex-grow: 0;
6619
- flex-shrink: 0;
6620
- justify-content: center;
6621
- align-self: center;
6622
- align-items: center;
6623
- padding: 0;
6624
- display: flex;
6625
- }
6626
-
6627
- .seed-inline-banner__root--variant_neutralWeak {
6628
- background-color: var(--seed-color-bg-neutral-weak);
6629
- color: var(--seed-color-fg-neutral);
6630
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
6631
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6632
- }
6633
-
6634
- .seed-inline-banner__title--variant_neutralWeak, .seed-inline-banner__description--variant_neutralWeak, .seed-inline-banner__link--variant_neutralWeak {
6635
- color: var(--seed-color-fg-neutral);
6636
- }
6637
-
6638
- .seed-inline-banner__root--variant_positiveWeak {
6639
- background-color: var(--seed-color-bg-positive-weak);
6640
- color: var(--seed-color-fg-positive-contrast);
6641
- --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
6642
- --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
6643
- }
6644
-
6645
- .seed-inline-banner__title--variant_positiveWeak, .seed-inline-banner__description--variant_positiveWeak, .seed-inline-banner__link--variant_positiveWeak {
6646
- color: var(--seed-color-fg-positive-contrast);
6647
- }
6648
-
6649
- .seed-inline-banner__root--variant_informativeWeak {
6650
- background-color: var(--seed-color-bg-informative-weak);
6651
- color: var(--seed-color-fg-informative-contrast);
6652
- --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
6653
- --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
6654
- }
6655
-
6656
- .seed-inline-banner__title--variant_informativeWeak, .seed-inline-banner__description--variant_informativeWeak, .seed-inline-banner__link--variant_informativeWeak {
6657
- color: var(--seed-color-fg-informative-contrast);
6658
- }
6659
-
6660
- .seed-inline-banner__root--variant_warningWeak {
6661
- background-color: var(--seed-color-bg-warning-weak);
6662
- color: var(--seed-color-fg-warning-contrast);
6663
- --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
6664
- --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
6665
- }
6666
-
6667
- .seed-inline-banner__title--variant_warningWeak, .seed-inline-banner__description--variant_warningWeak, .seed-inline-banner__link--variant_warningWeak {
6668
- color: var(--seed-color-fg-warning-contrast);
6669
- }
6670
-
6671
- .seed-inline-banner__root--variant_warningSolid {
6672
- background-color: var(--seed-color-bg-warning-solid);
6673
- color: var(--seed-color-fg-neutral);
6674
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
6675
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6676
- }
6677
-
6678
- .seed-inline-banner__title--variant_warningSolid, .seed-inline-banner__description--variant_warningSolid, .seed-inline-banner__link--variant_warningSolid {
6679
- color: var(--seed-color-fg-neutral);
6680
- }
6681
-
6682
- .seed-inline-banner__root--variant_criticalWeak {
6683
- background-color: var(--seed-color-bg-critical-weak);
6684
- color: var(--seed-color-fg-critical-contrast);
6685
- --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
6686
- --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
6687
- }
6688
-
6689
- .seed-inline-banner__title--variant_criticalWeak, .seed-inline-banner__description--variant_criticalWeak, .seed-inline-banner__link--variant_criticalWeak {
6690
- color: var(--seed-color-fg-critical-contrast);
6691
- }
6692
-
6693
- .seed-inline-banner__root--variant_criticalSolid {
6694
- background-color: var(--seed-color-bg-critical-solid);
6695
- color: var(--seed-color-palette-static-white);
6696
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
6697
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
6698
- }
6699
-
6700
- .seed-inline-banner__title--variant_criticalSolid, .seed-inline-banner__description--variant_criticalSolid, .seed-inline-banner__link--variant_criticalSolid {
6701
- color: var(--seed-color-palette-static-white);
6039
+ position: absolute;
6040
+ inset: 0;
6702
6041
  }
6703
6042
 
6704
6043
  .seed-input-button__root {
@@ -7069,53 +6408,6 @@
7069
6408
  }
7070
6409
  }
7071
6410
 
7072
- .seed-link-content {
7073
- cursor: pointer;
7074
- box-sizing: border-box;
7075
- -webkit-font-smoothing: antialiased;
7076
- -moz-osx-font-smoothing: grayscale;
7077
- text-align: center;
7078
- color: var(--seed-box-color);
7079
- --seed-suffix-icon-color: var(--seed-box-color);
7080
- background-color: #0000;
7081
- border: none;
7082
- outline: none;
7083
- align-items: center;
7084
- padding-block: 0;
7085
- padding-inline: 0;
7086
- font-family: inherit;
7087
- display: inline-flex;
7088
- }
7089
-
7090
- .seed-link-content--weight_bold {
7091
- font-weight: var(--seed-font-weight-bold);
7092
- }
7093
-
7094
- .seed-link-content--weight_regular {
7095
- font-weight: var(--seed-font-weight-regular);
7096
- }
7097
-
7098
- .seed-link-content--size_t6 {
7099
- font-size: var(--seed-font-size-t6);
7100
- line-height: var(--seed-line-height-t6);
7101
- gap: var(--seed-dimension-x0_5);
7102
- --seed-suffix-icon-size: var(--seed-dimension-x4);
7103
- }
7104
-
7105
- .seed-link-content--size_t5 {
7106
- font-size: var(--seed-font-size-t5);
7107
- line-height: var(--seed-line-height-t5);
7108
- gap: var(--seed-dimension-x0_5);
7109
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7110
- }
7111
-
7112
- .seed-link-content--size_t4 {
7113
- font-size: var(--seed-font-size-t4);
7114
- line-height: var(--seed-line-height-t4);
7115
- gap: var(--seed-dimension-x0_5);
7116
- --seed-suffix-icon-size: var(--seed-dimension-x3);
7117
- }
7118
-
7119
6411
  .seed-list-header {
7120
6412
  align-items: center;
7121
6413
  gap: var(--seed-dimension-x2_5);
@@ -7655,6 +6947,10 @@
7655
6947
  }
7656
6948
  }
7657
6949
 
6950
+ .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
6951
+ --seed-content-scale: var(--seed-feedback-scale);
6952
+ }
6953
+
7658
6954
  .seed-menu-item__root:is(:focus-visible, [data-focus-visible]):after {
7659
6955
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7660
6956
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8004,6 +7300,10 @@
8004
7300
  }
8005
7301
  }
8006
7302
 
7303
+ .seed-menu-sheet-item__root:is(:active, [data-active]) {
7304
+ --seed-content-scale: var(--seed-feedback-scale);
7305
+ }
7306
+
8007
7307
  .seed-menu-sheet-item__root:first-child {
8008
7308
  border-top-left-radius: var(--seed-radius-r4);
8009
7309
  border-top-right-radius: var(--seed-radius-r4);
@@ -8084,7 +7384,7 @@
8084
7384
  -webkit-font-smoothing: antialiased;
8085
7385
  -moz-osx-font-smoothing: grayscale;
8086
7386
  background-color: var(--seed-color-bg-brand-solid);
8087
- color: var(--seed-color-palette-static-white);
7387
+ color: var(--seed-color-fg-on-brand-solid);
8088
7388
  justify-content: center;
8089
7389
  align-items: center;
8090
7390
  text-decoration: none;
@@ -8176,6 +7476,10 @@
8176
7476
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8177
7477
  }
8178
7478
 
7479
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
7480
+ --seed-content-scale: var(--seed-feedback-scale);
7481
+ }
7482
+
8179
7483
  .seed-page-banner__content {
8180
7484
  justify-content: space-between;
8181
7485
  align-items: center;
@@ -8312,29 +7616,29 @@
8312
7616
  }
8313
7617
 
8314
7618
  .seed-page-banner__root--tone_neutral-variant_solid {
8315
- background-color: var(--seed-color-bg-neutral-inverted);
8316
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
8317
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
7619
+ background-color: var(--seed-color-bg-neutral-solid);
7620
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
7621
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
8318
7622
  }
8319
7623
 
8320
7624
  @media (hover: hover) and (pointer: fine) {
8321
7625
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
8322
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
7626
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8323
7627
  }
8324
7628
  }
8325
7629
 
8326
7630
  @media not all and (hover: hover) and (pointer: fine) {
8327
7631
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
8328
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
7632
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8329
7633
  }
8330
7634
  }
8331
7635
 
8332
7636
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
8333
- color: var(--seed-color-fg-neutral-inverted);
7637
+ color: var(--seed-color-fg-on-neutral-solid);
8334
7638
  }
8335
7639
 
8336
7640
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
8337
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
7641
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
8338
7642
  }
8339
7643
 
8340
7644
  .seed-page-banner__root--tone_informative-variant_weak {
@@ -8365,8 +7669,8 @@
8365
7669
 
8366
7670
  .seed-page-banner__root--tone_informative-variant_solid {
8367
7671
  background-color: var(--seed-color-bg-informative-solid);
8368
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8369
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7672
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
7673
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
8370
7674
  }
8371
7675
 
8372
7676
  @media (hover: hover) and (pointer: fine) {
@@ -8382,7 +7686,7 @@
8382
7686
  }
8383
7687
 
8384
7688
  .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
8385
- color: var(--seed-color-palette-static-white);
7689
+ color: var(--seed-color-fg-on-informative-solid);
8386
7690
  }
8387
7691
 
8388
7692
  .seed-page-banner__closeButton--tone_informative-variant_solid {
@@ -8417,8 +7721,8 @@
8417
7721
 
8418
7722
  .seed-page-banner__root--tone_positive-variant_solid {
8419
7723
  background-color: var(--seed-color-bg-positive-solid);
8420
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8421
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7724
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
7725
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
8422
7726
  }
8423
7727
 
8424
7728
  @media (hover: hover) and (pointer: fine) {
@@ -8434,7 +7738,7 @@
8434
7738
  }
8435
7739
 
8436
7740
  .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
8437
- color: var(--seed-color-palette-static-white);
7741
+ color: var(--seed-color-fg-on-positive-solid);
8438
7742
  }
8439
7743
 
8440
7744
  .seed-page-banner__closeButton--tone_positive-variant_solid {
@@ -8469,8 +7773,8 @@
8469
7773
 
8470
7774
  .seed-page-banner__root--tone_warning-variant_solid {
8471
7775
  background-color: var(--seed-color-bg-warning-solid);
8472
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8473
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
7776
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
7777
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
8474
7778
  }
8475
7779
 
8476
7780
  @media (hover: hover) and (pointer: fine) {
@@ -8486,7 +7790,7 @@
8486
7790
  }
8487
7791
 
8488
7792
  .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
8489
- color: var(--seed-color-palette-static-black-alpha-900);
7793
+ color: var(--seed-color-fg-on-warning-solid);
8490
7794
  }
8491
7795
 
8492
7796
  .seed-page-banner__closeButton--tone_warning-variant_solid {
@@ -8521,8 +7825,8 @@
8521
7825
 
8522
7826
  .seed-page-banner__root--tone_critical-variant_solid {
8523
7827
  background-color: var(--seed-color-bg-critical-solid);
8524
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8525
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7828
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
7829
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
8526
7830
  }
8527
7831
 
8528
7832
  @media (hover: hover) and (pointer: fine) {
@@ -8538,7 +7842,7 @@
8538
7842
  }
8539
7843
 
8540
7844
  .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
8541
- color: var(--seed-color-palette-static-white);
7845
+ color: var(--seed-color-fg-on-critical-solid);
8542
7846
  }
8543
7847
 
8544
7848
  .seed-page-banner__closeButton--tone_critical-variant_solid {
@@ -8726,47 +8030,255 @@
8726
8030
  scale: var(--seed-scale-s97);
8727
8031
  }
8728
8032
 
8729
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8730
- color: var(--seed-color-fg-neutral-inverted);
8033
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8034
+ color: var(--seed-color-fg-on-neutral-solid);
8035
+ }
8036
+
8037
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8038
+ background-color: var(--seed-color-bg-neutral-solid);
8039
+ }
8040
+
8041
+ @media (hover: hover) and (pointer: fine) {
8042
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8043
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8044
+ }
8045
+ }
8046
+
8047
+ @media not all and (hover: hover) and (pointer: fine) {
8048
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8049
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8050
+ }
8051
+ }
8052
+
8053
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8054
+ cursor: not-allowed;
8055
+ color: var(--seed-color-fg-disabled);
8056
+ }
8057
+
8058
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8059
+ background-color: var(--seed-color-bg-transparent);
8060
+ }
8061
+
8062
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8063
+ color: var(--seed-color-fg-disabled);
8064
+ }
8065
+
8066
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8067
+ background-color: var(--seed-color-bg-disabled);
8068
+ }
8069
+
8070
+ .seed-pagination-page-item {
8071
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8072
+ }
8073
+
8074
+ .seed-popover__positioner {
8075
+ --popover-z-index: 99999;
8076
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
8077
+ max-width: var(--seed-popover-available-width, none);
8078
+ outline: none;
8079
+ }
8080
+
8081
+ .seed-popover__content {
8082
+ box-sizing: border-box;
8083
+ background: var(--seed-color-bg-layer-floating);
8084
+ border-radius: var(--seed-radius-r5);
8085
+ box-shadow: var(--seed-shadow-s3);
8086
+ --seed-box-width-base: auto;
8087
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
8088
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
8089
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
8090
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
8091
+ --seed-box-width: var(--seed-box-width-base, initial);
8092
+ --seed-box-max-width-base: min(480px, var(--seed-popover-available-width, 480px));
8093
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
8094
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
8095
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
8096
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
8097
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
8098
+ width: var(--seed-box-width);
8099
+ min-width: min(320px, var(--seed-popover-available-width, 320px));
8100
+ max-width: var(--seed-box-max-width);
8101
+ max-height: min(600px, var(--seed-popover-available-height, 600px));
8102
+ transform-origin: var(--seed-popover-transform-origin);
8103
+ flex-direction: column;
8104
+ display: flex;
8105
+ position: relative;
8106
+ }
8107
+
8108
+ .seed-popover__content:is([data-state="open"], [data-open]) {
8109
+ animation: seed-enter;
8110
+ animation-timing-function: var(--seed-timing-function-enter);
8111
+ animation-duration: var(--seed-duration-d3);
8112
+ --seed-enter-translate-x: 0;
8113
+ --seed-enter-translate-y: 0;
8114
+ --seed-enter-opacity: 0;
8115
+ --seed-enter-scale: .95;
8116
+ }
8117
+
8118
+ .seed-popover__content:not(:is([data-state="open"], [data-open])) {
8119
+ animation: seed-exit;
8120
+ animation-timing-function: var(--seed-timing-function-exit);
8121
+ animation-duration: var(--seed-duration-d2);
8122
+ --seed-exit-translate-x: 0;
8123
+ --seed-exit-translate-y: 0;
8124
+ --seed-exit-opacity: 0;
8125
+ --seed-exit-scale: .95;
8126
+ animation-fill-mode: forwards;
8127
+ }
8128
+
8129
+ .seed-popover__content:is([hidden], [data-hidden]) {
8130
+ display: none !important;
8131
+ }
8132
+
8133
+ .seed-popover__content:is(:focus, [data-focus]) {
8134
+ outline: none;
8135
+ }
8136
+
8137
+ .seed-popover__header {
8138
+ box-sizing: border-box;
8139
+ gap: var(--seed-dimension-x1_5);
8140
+ padding-inline: var(--seed-dimension-x6);
8141
+ padding-top: var(--seed-dimension-x6);
8142
+ padding-bottom: var(--seed-dimension-x4);
8143
+ flex-direction: column;
8144
+ flex-shrink: 0;
8145
+ display: flex;
8146
+ }
8147
+
8148
+ .seed-popover__header[data-show-close-button] {
8149
+ padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
8150
+ }
8151
+
8152
+ .seed-popover__title {
8153
+ color: var(--seed-color-fg-neutral);
8154
+ font-size: var(--seed-font-size-t7);
8155
+ line-height: var(--seed-line-height-t7);
8156
+ font-weight: var(--seed-font-weight-bold);
8157
+ word-break: keep-all;
8158
+ margin: 0;
8159
+ }
8160
+
8161
+ .seed-popover__description {
8162
+ color: var(--seed-color-fg-neutral-muted);
8163
+ font-size: var(--seed-font-size-t4);
8164
+ line-height: var(--seed-line-height-t4);
8165
+ font-weight: var(--seed-font-weight-regular);
8166
+ white-space: pre-wrap;
8167
+ margin: 0;
8168
+ }
8169
+
8170
+ .seed-popover__body {
8171
+ box-sizing: border-box;
8172
+ --seed-box-padding-x-base: var(--seed-dimension-x6);
8173
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
8174
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
8175
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
8176
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
8177
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
8178
+ --seed-box-height-base: auto;
8179
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
8180
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
8181
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
8182
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
8183
+ --seed-box-height: var(--seed-box-height-base, initial);
8184
+ --seed-box-min-height-base: 0;
8185
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
8186
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
8187
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
8188
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
8189
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
8190
+ --seed-box-max-height-base: none;
8191
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
8192
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
8193
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
8194
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
8195
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
8196
+ --seed-box-justify-content: initial;
8197
+ --seed-box-align-items: initial;
8198
+ padding-inline: var(--seed-box-padding-x);
8199
+ height: var(--seed-box-height);
8200
+ min-height: var(--seed-box-min-height);
8201
+ max-height: var(--seed-box-max-height);
8202
+ justify-content: var(--seed-box-justify-content);
8203
+ align-items: var(--seed-box-align-items);
8204
+ transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8205
+ flex-direction: column;
8206
+ flex: 1;
8207
+ display: flex;
8208
+ overflow-y: auto;
8209
+ }
8210
+
8211
+ .seed-popover__body[data-scrolled]:not(:first-child) {
8212
+ box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
8213
+ }
8214
+
8215
+ .seed-popover__body[data-overflow] {
8216
+ padding-bottom: var(--seed-dimension-x12);
8217
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8218
+ mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8219
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8220
+ }
8221
+
8222
+ .seed-popover__body {
8223
+ outline: var(--seed-dimension-x0_5) solid transparent;
8224
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8225
+ }
8226
+
8227
+ .seed-popover__body:is(:focus-visible, [data-focus-visible]) {
8228
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8229
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8230
+ }
8231
+
8232
+ .seed-popover__footer {
8233
+ padding-inline: var(--seed-dimension-x6);
8234
+ padding-top: var(--seed-dimension-x4);
8235
+ padding-bottom: var(--seed-dimension-x6);
8236
+ flex-direction: column;
8237
+ flex-shrink: 0;
8238
+ display: flex;
8239
+ }
8240
+
8241
+ .seed-popover__closeButton {
8242
+ background: var(--seed-color-bg-transparent);
8243
+ border-radius: var(--seed-radius-r3);
8244
+ cursor: pointer;
8245
+ transition: background var(--seed-duration-color-transition) var(--seed-timing-function-easing), scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8246
+ --seed-icon-size: 22px;
8247
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
8248
+ outline: var(--seed-dimension-x0_5) solid transparent;
8249
+ outline-offset: var(--seed-dimension-x0_5);
8250
+ border: none;
8251
+ justify-content: center;
8252
+ align-items: center;
8253
+ margin: -15px;
8254
+ padding: 15px;
8255
+ display: flex;
8256
+ position: absolute;
8257
+ top: 27px;
8258
+ right: 24px;
8259
+ }
8260
+
8261
+ .seed-popover__closeButton:is(:focus-visible, [data-focus-visible]) {
8262
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8263
+ outline-offset: var(--seed-dimension-x0_5);
8731
8264
  }
8732
8265
 
8733
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8734
- background-color: var(--seed-color-bg-neutral-inverted);
8266
+ .seed-popover__closeButton:is(:active, [data-active]) {
8267
+ scale: var(--seed-feedback-scale);
8735
8268
  }
8736
8269
 
8737
8270
  @media (hover: hover) and (pointer: fine) {
8738
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8739
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8271
+ .seed-popover__closeButton:is(:hover, [data-hover]) {
8272
+ background: var(--seed-color-bg-transparent-pressed);
8740
8273
  }
8741
8274
  }
8742
8275
 
8743
8276
  @media not all and (hover: hover) and (pointer: fine) {
8744
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8745
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8277
+ .seed-popover__closeButton:is(:active, [data-active]) {
8278
+ background: var(--seed-color-bg-transparent-pressed);
8746
8279
  }
8747
8280
  }
8748
8281
 
8749
- .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8750
- cursor: not-allowed;
8751
- color: var(--seed-color-fg-disabled);
8752
- }
8753
-
8754
- .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8755
- background-color: var(--seed-color-bg-transparent);
8756
- }
8757
-
8758
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8759
- color: var(--seed-color-fg-disabled);
8760
- }
8761
-
8762
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8763
- background-color: var(--seed-color-bg-disabled);
8764
- }
8765
-
8766
- .seed-pagination-page-item {
8767
- transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8768
- }
8769
-
8770
8282
  .seed-progress-circle__root {
8771
8283
  box-sizing: border-box;
8772
8284
  display: inline-flex;
@@ -9249,23 +8761,23 @@
9249
8761
  }
9250
8762
 
9251
8763
  .seed-radiomark__root--tone_neutral:is(:checked, [data-checked]) {
9252
- background-color: var(--seed-color-bg-neutral-inverted);
8764
+ background-color: var(--seed-color-bg-neutral-solid);
9253
8765
  }
9254
8766
 
9255
8767
  @media (hover: hover) and (pointer: fine) {
9256
8768
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
9257
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8769
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
9258
8770
  }
9259
8771
  }
9260
8772
 
9261
8773
  @media not all and (hover: hover) and (pointer: fine) {
9262
8774
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
9263
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8775
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
9264
8776
  }
9265
8777
  }
9266
8778
 
9267
8779
  .seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
9268
- color: var(--seed-color-fg-neutral-inverted);
8780
+ color: var(--seed-color-fg-on-neutral-solid);
9269
8781
  }
9270
8782
 
9271
8783
  .seed-radiomark__root--tone_brand:is(:checked, [data-checked]) {
@@ -9285,7 +8797,7 @@
9285
8797
  }
9286
8798
 
9287
8799
  .seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
9288
- color: var(--seed-color-palette-static-white);
8800
+ color: var(--seed-color-fg-on-brand-solid);
9289
8801
  }
9290
8802
 
9291
8803
  .seed-radiomark__root--size_large {
@@ -9572,6 +9084,10 @@
9572
9084
  }
9573
9085
  }
9574
9086
 
9087
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9088
+ --seed-content-scale: var(--seed-feedback-scale);
9089
+ }
9090
+
9575
9091
  .seed-select__positioner {
9576
9092
  --select-z-index: 99999;
9577
9093
  z-index: calc(var(--select-z-index) + var(--z-index-offset, 0));
@@ -9722,6 +9238,10 @@
9722
9238
  }
9723
9239
  }
9724
9240
 
9241
+ .seed-select-trigger__root:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
9242
+ --seed-content-scale: var(--seed-feedback-scale);
9243
+ }
9244
+
9725
9245
  .seed-select-trigger__root[data-readonly]:not([data-disabled]) {
9726
9246
  cursor: default;
9727
9247
  background-color: var(--seed-color-bg-disabled);
@@ -9939,6 +9459,10 @@
9939
9459
  inset-inline: var(--seed-dimension-x2);
9940
9460
  }
9941
9461
 
9462
+ .seed-select-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9463
+ --seed-content-scale: var(--seed-feedback-scale);
9464
+ }
9465
+
9942
9466
  .seed-select-item__root:is(:disabled, [disabled], [data-disabled]) {
9943
9467
  cursor: not-allowed;
9944
9468
  }
@@ -10102,6 +9626,7 @@
10102
9626
  background-color: var(--seed-color-bg-transparent);
10103
9627
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
10104
9628
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9629
+ --seed-radiomark-feedback-scale: 1;
10105
9630
  flex-direction: column;
10106
9631
  display: flex;
10107
9632
  position: relative;
@@ -10130,6 +9655,10 @@
10130
9655
  }
10131
9656
  }
10132
9657
 
9658
+ .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9659
+ --seed-content-scale: var(--seed-feedback-scale);
9660
+ }
9661
+
10133
9662
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
10134
9663
  border-width: 2px;
10135
9664
  border-color: var(--seed-color-stroke-neutral-contrast);
@@ -10771,31 +10300,10 @@
10771
10300
  --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
10772
10301
  --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
10773
10302
  --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
10774
- --seed-box-height-base: auto;
10775
- --seed-box-height-sm: var(--seed-box-height-base, initial);
10776
- --seed-box-height-md: var(--seed-box-height-sm, initial);
10777
- --seed-box-height-lg: var(--seed-box-height-md, initial);
10778
- --seed-box-height-xl: var(--seed-box-height-lg, initial);
10779
- --seed-box-height: var(--seed-box-height-base, initial);
10780
- --seed-box-min-height-base: auto;
10781
- --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
10782
- --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
10783
- --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
10784
- --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
10785
- --seed-box-min-height: var(--seed-box-min-height-base, initial);
10786
- --seed-box-max-height-base: none;
10787
- --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
10788
- --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
10789
- --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
10790
- --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
10791
- --seed-box-max-height: var(--seed-box-max-height-base, initial);
10792
10303
  --seed-box-justify-content: initial;
10793
10304
  --seed-box-align-items: initial;
10794
10305
  padding-inline: var(--seed-box-padding-x);
10795
10306
  padding-bottom: var(--seed-dimension-x12);
10796
- height: var(--seed-box-height);
10797
- min-height: var(--seed-box-min-height);
10798
- max-height: var(--seed-box-max-height);
10799
10307
  justify-content: var(--seed-box-justify-content);
10800
10308
  align-items: var(--seed-box-align-items);
10801
10309
  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
@@ -11040,7 +10548,7 @@
11040
10548
 
11041
10549
  .seed-slider__thumb:after {
11042
10550
  content: "";
11043
- background-color: var(--seed-color-bg-neutral-inverted);
10551
+ background-color: var(--seed-color-bg-neutral-solid);
11044
10552
  border-radius: var(--seed-radius-full);
11045
10553
  outline: var(--seed-dimension-x0_5) solid transparent;
11046
10554
  outline-offset: var(--seed-dimension-x0_5);
@@ -11082,11 +10590,11 @@
11082
10590
  box-sizing: border-box;
11083
10591
  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
11084
10592
  will-change: left, right;
11085
- background: var(--seed-color-bg-neutral-inverted);
10593
+ background: var(--seed-color-bg-neutral-solid);
11086
10594
  padding-inline: var(--seed-dimension-x2);
11087
10595
  padding-block: var(--seed-dimension-x1);
11088
10596
  border-radius: var(--seed-radius-r1_5);
11089
- color: var(--seed-color-fg-neutral-inverted);
10597
+ color: var(--seed-color-fg-on-neutral-solid);
11090
10598
  font-size: var(--seed-font-size-t3);
11091
10599
  line-height: var(--seed-line-height-t3);
11092
10600
  font-weight: var(--seed-font-weight-medium);
@@ -11185,7 +10693,7 @@
11185
10693
  }
11186
10694
 
11187
10695
  .seed-slider__valueIndicatorArrowTip {
11188
- fill: var(--seed-color-bg-neutral-inverted);
10696
+ fill: var(--seed-color-bg-neutral-solid);
11189
10697
  width: var(--seed-dimension-x2);
11190
10698
  height: var(--seed-dimension-x1_5);
11191
10699
  display: block;
@@ -11244,7 +10752,7 @@
11244
10752
  }
11245
10753
 
11246
10754
  .seed-slider-tick {
11247
- background-color: var(--seed-color-fg-neutral-inverted);
10755
+ background-color: var(--seed-color-fg-on-neutral-solid);
11248
10756
  height: 100%;
11249
10757
  position: absolute;
11250
10758
  top: 50%;
@@ -11269,7 +10777,7 @@
11269
10777
 
11270
10778
  .seed-snackbar__root {
11271
10779
  box-sizing: border-box;
11272
- background: var(--seed-color-bg-neutral-inverted);
10780
+ background: var(--seed-color-bg-neutral-solid);
11273
10781
  border-radius: var(--seed-radius-r2);
11274
10782
  width: 100%;
11275
10783
  max-width: 464px;
@@ -11319,7 +10827,7 @@
11319
10827
  }
11320
10828
 
11321
10829
  .seed-snackbar__message {
11322
- color: var(--seed-color-fg-neutral-inverted);
10830
+ color: var(--seed-color-fg-on-neutral-solid);
11323
10831
  font-size: var(--seed-font-size-t4);
11324
10832
  line-height: var(--seed-line-height-t4);
11325
10833
  font-weight: var(--seed-font-weight-regular);
@@ -11507,7 +11015,7 @@
11507
11015
  }
11508
11016
 
11509
11017
  .seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
11510
- background: var(--seed-color-bg-neutral-inverted);
11018
+ background: var(--seed-color-bg-neutral-solid);
11511
11019
  }
11512
11020
 
11513
11021
  .seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
@@ -11515,7 +11023,7 @@
11515
11023
  }
11516
11024
 
11517
11025
  .seed-switchmark__thumb--tone_neutral {
11518
- background: var(--seed-color-fg-neutral-inverted);
11026
+ background: var(--seed-color-fg-on-neutral-solid);
11519
11027
  }
11520
11028
 
11521
11029
  .seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
@@ -13170,14 +12678,14 @@
13170
12678
  }
13171
12679
 
13172
12680
  .seed-time-picker__root {
12681
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13173
12682
  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
13174
12683
  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
13175
12684
  width: 100%;
13176
12685
  height: 220px;
13177
12686
  }
13178
12687
 
13179
- .seed-time-picker__selectionIndicator {
13180
- border-radius: var(--seed-radius-r2);
12688
+ .seed-time-picker__root [data-wheel-picker-indicator] {
13181
12689
  background-color: var(--seed-color-bg-neutral-weak);
13182
12690
  }
13183
12691
 
@@ -13213,7 +12721,6 @@
13213
12721
  }
13214
12722
 
13215
12723
  .seed-time-picker__item {
13216
- --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13217
12724
  padding-inline: var(--seed-dimension-x4);
13218
12725
  font-size: var(--seed-font-size-t10-static);
13219
12726
  line-height: var(--seed-line-height-t10-static);
@@ -13261,9 +12768,9 @@
13261
12768
 
13262
12769
  .seed-toggle-button--variant_brandSolid {
13263
12770
  background: var(--seed-color-bg-brand-solid);
13264
- color: var(--seed-color-palette-static-white);
12771
+ color: var(--seed-color-fg-on-brand-solid);
13265
12772
  --track-color: var(--seed-color-palette-static-white-alpha-300);
13266
- --range-color: var(--seed-color-palette-static-white);
12773
+ --range-color: var(--seed-color-fg-on-brand-solid);
13267
12774
  }
13268
12775
 
13269
12776
  @media (hover: hover) and (pointer: fine) {
@@ -13315,8 +12822,8 @@
13315
12822
  }
13316
12823
 
13317
12824
  .seed-toggle-button--variant_brandSolid {
13318
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
13319
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
12825
+ --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
12826
+ --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
13320
12827
  }
13321
12828
 
13322
12829
  .seed-toggle-button--variant_neutralWeak {
@@ -13404,7 +12911,11 @@
13404
12911
  }
13405
12912
 
13406
12913
  .seed-wheel-picker__root {
13407
- height: var(--seed-wheel-picker-viewport-size);
12914
+ background-color: var(--seed-color-bg-layer-floating);
12915
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
12916
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
12917
+ --seed-wheel-picker-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-scroll-fog-max-height));
12918
+ width: 100%;
13408
12919
  position: relative;
13409
12920
  overflow: hidden;
13410
12921
  }
@@ -13418,6 +12929,7 @@
13418
12929
 
13419
12930
  .seed-wheel-picker__columns {
13420
12931
  justify-content: center;
12932
+ width: 100%;
13421
12933
  height: 100%;
13422
12934
  display: flex;
13423
12935
  }
@@ -13435,11 +12947,14 @@
13435
12947
  height: 100%;
13436
12948
  padding-block: var(--seed-wheel-picker-center-offset);
13437
12949
  outline: none;
12950
+ flex: none;
13438
12951
  overflow: hidden auto;
13439
12952
  }
13440
12953
 
13441
- .seed-wheel-picker__column[data-disabled] {
12954
+ .seed-wheel-picker__column:is(:disabled, [disabled], [data-disabled]) {
13442
12955
  cursor: default;
12956
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
12957
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
13443
12958
  overflow-y: hidden;
13444
12959
  }
13445
12960
 
@@ -13463,7 +12978,7 @@
13463
12978
  .seed-wheel-picker__column :is([aria-selected="true"], [data-selected]) {
13464
12979
  outline: var(--seed-dimension-x0_5) solid transparent;
13465
12980
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13466
- border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
12981
+ border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
13467
12982
  }
13468
12983
 
13469
12984
  .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
@@ -13496,114 +13011,7 @@
13496
13011
  background-clip: text;
13497
13012
  }
13498
13013
 
13499
- .seed-wheel-picker__selectionIndicator {
13500
- z-index: 0;
13501
- inset-inline: var(--seed-dimension-x4);
13502
- height: var(--seed-wheel-picker-item-size);
13503
- pointer-events: none;
13504
- position: absolute;
13505
- top: 50%;
13506
- transform: translateY(-50%);
13507
- }
13508
-
13509
- .seed-wheel-picker-public__root {
13510
- background-color: var(--seed-color-bg-layer-floating);
13511
- --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13512
- --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13513
- --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13514
- width: 100%;
13515
- position: relative;
13516
- overflow: hidden;
13517
- }
13518
-
13519
- .seed-wheel-picker-public__scrollFog {
13520
- z-index: 1;
13521
- height: 100%;
13522
- position: relative;
13523
- overflow: hidden;
13524
- }
13525
-
13526
- .seed-wheel-picker-public__columns {
13527
- justify-content: center;
13528
- width: 100%;
13529
- height: 100%;
13530
- display: flex;
13531
- }
13532
-
13533
- .seed-wheel-picker-public__column {
13534
- box-sizing: border-box;
13535
- overscroll-behavior-x: none;
13536
- overscroll-behavior-y: contain;
13537
- scroll-snap-type: y mandatory;
13538
- scrollbar-width: none;
13539
- -ms-overflow-style: none;
13540
- touch-action: pan-y;
13541
- cursor: grab;
13542
- width: max-content;
13543
- height: 100%;
13544
- padding-block: var(--seed-wheel-picker-public-center-offset);
13545
- outline: none;
13546
- flex: none;
13547
- overflow: hidden auto;
13548
- }
13549
-
13550
- .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13551
- cursor: default;
13552
- --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13553
- --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13554
- overflow-y: hidden;
13555
- }
13556
-
13557
- .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13558
- cursor: grabbing;
13559
- scroll-snap-type: none;
13560
- }
13561
-
13562
- .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13563
- scroll-snap-type: none;
13564
- }
13565
-
13566
- .seed-wheel-picker-public__column::-webkit-scrollbar {
13567
- display: none;
13568
- }
13569
-
13570
- .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13571
- outline: var(--seed-dimension-x0_5) solid transparent;
13572
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13573
- border-radius: var(--seed-radius-r2);
13574
- }
13575
-
13576
- .seed-wheel-picker-public__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
13577
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13578
- }
13579
-
13580
- .seed-wheel-picker-public__column.seed-wheel-picker-public__column:is(:focus-visible, [data-focus-visible]):not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
13581
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13582
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13583
- }
13584
-
13585
- .seed-wheel-picker-public__item {
13586
- height: var(--seed-wheel-picker-public-item-size);
13587
- min-height: var(--seed-wheel-picker-public-item-size);
13588
- color: var(--seed-wheel-picker-public-item-color);
13589
- scroll-snap-align: center;
13590
- -webkit-user-select: none;
13591
- user-select: none;
13592
- outline-color: #0000;
13593
- justify-content: center;
13594
- align-items: center;
13595
- display: flex;
13596
- }
13597
-
13598
- .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13599
- color: #0000;
13600
- background-image: linear-gradient(to bottom, var(--seed-wheel-picker-public-item-color) 0%, var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-start), var(--seed-wheel-picker-public-selected-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) var(--seed-wheel-picker-indicator-overlap-end), var(--seed-wheel-picker-public-item-color) 100%);
13601
- -webkit-text-fill-color: transparent;
13602
- -webkit-background-clip: text;
13603
- background-clip: text;
13604
- }
13605
-
13606
- .seed-wheel-picker-public__itemLabel {
13014
+ .seed-wheel-picker__itemLabel {
13607
13015
  box-sizing: border-box;
13608
13016
  height: 100%;
13609
13017
  padding-inline: var(--seed-dimension-x4);
@@ -13615,11 +13023,11 @@
13615
13023
  display: flex;
13616
13024
  }
13617
13025
 
13618
- .seed-wheel-picker-public__selectionIndicator {
13026
+ .seed-wheel-picker__selectionIndicator {
13619
13027
  z-index: 0;
13620
13028
  inset-inline: var(--seed-dimension-x4);
13621
- height: var(--seed-wheel-picker-public-item-size);
13622
- border-radius: var(--seed-radius-r2);
13029
+ height: var(--seed-wheel-picker-item-size);
13030
+ border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
13623
13031
  background-color: var(--seed-color-bg-neutral-weak);
13624
13032
  pointer-events: none;
13625
13033
  position: absolute;
@@ -13627,24 +13035,24 @@
13627
13035
  transform: translateY(-50%);
13628
13036
  }
13629
13037
 
13630
- .seed-wheel-picker-public__root--size_small {
13631
- height: var(--seed-wheel-picker-public-viewport-size, 180px);
13632
- --seed-wheel-picker-public-item-size: 36px;
13633
- --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13038
+ .seed-wheel-picker__root--size_small {
13039
+ height: var(--seed-wheel-picker-viewport-size, 180px);
13040
+ --seed-wheel-picker-item-size: 36px;
13041
+ --seed-wheel-picker-scroll-fog-max-height: 108px;
13634
13042
  }
13635
13043
 
13636
- .seed-wheel-picker-public__itemLabel--size_small {
13044
+ .seed-wheel-picker__itemLabel--size_small {
13637
13045
  font-size: var(--seed-font-size-t7-static);
13638
13046
  line-height: var(--seed-line-height-t7-static);
13639
13047
  }
13640
13048
 
13641
- .seed-wheel-picker-public__root--size_medium {
13642
- height: var(--seed-wheel-picker-public-viewport-size, 220px);
13643
- --seed-wheel-picker-public-item-size: 44px;
13644
- --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13049
+ .seed-wheel-picker__root--size_medium {
13050
+ height: var(--seed-wheel-picker-viewport-size, 220px);
13051
+ --seed-wheel-picker-item-size: 44px;
13052
+ --seed-wheel-picker-scroll-fog-max-height: 132px;
13645
13053
  }
13646
13054
 
13647
- .seed-wheel-picker-public__itemLabel--size_medium {
13055
+ .seed-wheel-picker__itemLabel--size_medium {
13648
13056
  font-size: var(--seed-font-size-t10-static);
13649
13057
  line-height: var(--seed-line-height-t10-static);
13650
13058
  }
@@ -13797,23 +13205,23 @@
13797
13205
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13798
13206
  }
13799
13207
 
13800
- .seed-content-dialog__content {
13208
+ .seed-date-picker__root {
13209
+ --seed-box-height: var(--seed-box-height-sm, initial);
13210
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13211
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13212
+ }
13213
+
13214
+ .seed-dialog__content {
13801
13215
  --seed-box-width: var(--seed-box-width-sm, initial);
13802
13216
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13803
13217
  }
13804
13218
 
13805
- .seed-content-dialog__body {
13219
+ .seed-dialog__body {
13806
13220
  --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13807
13221
  --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13808
13222
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13809
13223
  }
13810
13224
 
13811
- .seed-date-picker__root {
13812
- --seed-box-height: var(--seed-box-height-sm, initial);
13813
- --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13814
- --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13815
- }
13816
-
13817
13225
  .seed-help-bubble__content {
13818
13226
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13819
13227
  }
@@ -13831,18 +13239,27 @@
13831
13239
  --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
13832
13240
  }
13833
13241
 
13834
- .seed-side-panel__content {
13242
+ .seed-popover__content {
13835
13243
  --seed-box-width: var(--seed-box-width-sm, initial);
13836
13244
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13837
13245
  }
13838
13246
 
13839
- .seed-side-panel__body {
13247
+ .seed-popover__body {
13840
13248
  --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13841
13249
  --seed-box-height: var(--seed-box-height-sm, initial);
13842
13250
  --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13843
13251
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13844
13252
  }
13845
13253
 
13254
+ .seed-side-panel__content {
13255
+ --seed-box-width: var(--seed-box-width-sm, initial);
13256
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13257
+ }
13258
+
13259
+ .seed-side-panel__body {
13260
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13261
+ }
13262
+
13846
13263
  .seed-skeleton {
13847
13264
  --seed-box-width: var(--seed-box-width-sm, initial);
13848
13265
  --seed-box-height: var(--seed-box-height-sm, initial);
@@ -13899,23 +13316,23 @@
13899
13316
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13900
13317
  }
13901
13318
 
13902
- .seed-content-dialog__content {
13319
+ .seed-date-picker__root {
13320
+ --seed-box-height: var(--seed-box-height-md, initial);
13321
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
13322
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
13323
+ }
13324
+
13325
+ .seed-dialog__content {
13903
13326
  --seed-box-width: var(--seed-box-width-md, initial);
13904
13327
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13905
13328
  }
13906
13329
 
13907
- .seed-content-dialog__body {
13330
+ .seed-dialog__body {
13908
13331
  --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
13909
13332
  --seed-box-min-height: var(--seed-box-min-height-md, initial);
13910
13333
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13911
13334
  }
13912
13335
 
13913
- .seed-date-picker__root {
13914
- --seed-box-height: var(--seed-box-height-md, initial);
13915
- --seed-box-min-height: var(--seed-box-min-height-md, initial);
13916
- --seed-box-max-height: var(--seed-box-max-height-md, initial);
13917
- }
13918
-
13919
13336
  .seed-help-bubble__content {
13920
13337
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13921
13338
  }
@@ -13933,18 +13350,27 @@
13933
13350
  --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
13934
13351
  }
13935
13352
 
13936
- .seed-side-panel__content {
13353
+ .seed-popover__content {
13937
13354
  --seed-box-width: var(--seed-box-width-md, initial);
13938
13355
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13939
13356
  }
13940
13357
 
13941
- .seed-side-panel__body {
13358
+ .seed-popover__body {
13942
13359
  --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
13943
13360
  --seed-box-height: var(--seed-box-height-md, initial);
13944
13361
  --seed-box-min-height: var(--seed-box-min-height-md, initial);
13945
13362
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13946
13363
  }
13947
13364
 
13365
+ .seed-side-panel__content {
13366
+ --seed-box-width: var(--seed-box-width-md, initial);
13367
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
13368
+ }
13369
+
13370
+ .seed-side-panel__body {
13371
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
13372
+ }
13373
+
13948
13374
  .seed-skeleton {
13949
13375
  --seed-box-width: var(--seed-box-width-md, initial);
13950
13376
  --seed-box-height: var(--seed-box-height-md, initial);
@@ -14001,23 +13427,23 @@
14001
13427
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14002
13428
  }
14003
13429
 
14004
- .seed-content-dialog__content {
13430
+ .seed-date-picker__root {
13431
+ --seed-box-height: var(--seed-box-height-lg, initial);
13432
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
13433
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13434
+ }
13435
+
13436
+ .seed-dialog__content {
14005
13437
  --seed-box-width: var(--seed-box-width-lg, initial);
14006
13438
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14007
13439
  }
14008
13440
 
14009
- .seed-content-dialog__body {
13441
+ .seed-dialog__body {
14010
13442
  --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
14011
13443
  --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14012
13444
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14013
13445
  }
14014
13446
 
14015
- .seed-date-picker__root {
14016
- --seed-box-height: var(--seed-box-height-lg, initial);
14017
- --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14018
- --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14019
- }
14020
-
14021
13447
  .seed-help-bubble__content {
14022
13448
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14023
13449
  }
@@ -14035,18 +13461,27 @@
14035
13461
  --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
14036
13462
  }
14037
13463
 
14038
- .seed-side-panel__content {
13464
+ .seed-popover__content {
14039
13465
  --seed-box-width: var(--seed-box-width-lg, initial);
14040
13466
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14041
13467
  }
14042
13468
 
14043
- .seed-side-panel__body {
13469
+ .seed-popover__body {
14044
13470
  --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
14045
13471
  --seed-box-height: var(--seed-box-height-lg, initial);
14046
13472
  --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14047
13473
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14048
13474
  }
14049
13475
 
13476
+ .seed-side-panel__content {
13477
+ --seed-box-width: var(--seed-box-width-lg, initial);
13478
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
13479
+ }
13480
+
13481
+ .seed-side-panel__body {
13482
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
13483
+ }
13484
+
14050
13485
  .seed-skeleton {
14051
13486
  --seed-box-width: var(--seed-box-width-lg, initial);
14052
13487
  --seed-box-height: var(--seed-box-height-lg, initial);
@@ -14103,23 +13538,23 @@
14103
13538
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14104
13539
  }
14105
13540
 
14106
- .seed-content-dialog__content {
13541
+ .seed-date-picker__root {
13542
+ --seed-box-height: var(--seed-box-height-xl, initial);
13543
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
13544
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
13545
+ }
13546
+
13547
+ .seed-dialog__content {
14107
13548
  --seed-box-width: var(--seed-box-width-xl, initial);
14108
13549
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14109
13550
  }
14110
13551
 
14111
- .seed-content-dialog__body {
13552
+ .seed-dialog__body {
14112
13553
  --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
14113
13554
  --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14114
13555
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14115
13556
  }
14116
13557
 
14117
- .seed-date-picker__root {
14118
- --seed-box-height: var(--seed-box-height-xl, initial);
14119
- --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14120
- --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14121
- }
14122
-
14123
13558
  .seed-help-bubble__content {
14124
13559
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14125
13560
  }
@@ -14137,18 +13572,27 @@
14137
13572
  --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
14138
13573
  }
14139
13574
 
14140
- .seed-side-panel__content {
13575
+ .seed-popover__content {
14141
13576
  --seed-box-width: var(--seed-box-width-xl, initial);
14142
13577
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14143
13578
  }
14144
13579
 
14145
- .seed-side-panel__body {
13580
+ .seed-popover__body {
14146
13581
  --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
14147
13582
  --seed-box-height: var(--seed-box-height-xl, initial);
14148
13583
  --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14149
13584
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14150
13585
  }
14151
13586
 
13587
+ .seed-side-panel__content {
13588
+ --seed-box-width: var(--seed-box-width-xl, initial);
13589
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
13590
+ }
13591
+
13592
+ .seed-side-panel__body {
13593
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
13594
+ }
13595
+
14152
13596
  .seed-skeleton {
14153
13597
  --seed-box-width: var(--seed-box-width-xl, initial);
14154
13598
  --seed-box-height: var(--seed-box-height-xl, initial);