@seed-design/css 2.9.0 → 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 (363) hide show
  1. package/README.md +2 -2
  2. package/all.css +928 -1493
  3. package/all.layered.css +928 -1493
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/base.css +45 -4
  7. package/base.layered.css +45 -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/badge.css +83 -27
  21. package/recipes/badge.d.ts +1 -1
  22. package/recipes/badge.layered.css +63 -8
  23. package/recipes/badge.layered.mjs +8 -0
  24. package/recipes/badge.mjs +8 -0
  25. package/recipes/checkmark.css +5 -5
  26. package/recipes/checkmark.layered.css +5 -5
  27. package/recipes/chip-tabs.css +8 -8
  28. package/recipes/chip-tabs.layered.css +8 -8
  29. package/recipes/chip.css +10 -10
  30. package/recipes/chip.layered.css +10 -10
  31. package/recipes/contextual-floating-button.css +8 -8
  32. package/recipes/contextual-floating-button.layered.css +8 -8
  33. package/recipes/date-picker.css +29 -16
  34. package/recipes/date-picker.d.ts +1 -1
  35. package/recipes/date-picker.layered.css +34 -15
  36. package/recipes/date-picker.layered.mjs +6 -14
  37. package/recipes/date-picker.mjs +6 -14
  38. package/recipes/dialog.css +206 -46
  39. package/recipes/dialog.d.ts +3 -3
  40. package/recipes/dialog.layered.css +228 -46
  41. package/recipes/dialog.layered.mjs +12 -7
  42. package/recipes/dialog.mjs +12 -7
  43. package/recipes/floating-action-button.css +2 -2
  44. package/recipes/floating-action-button.layered.css +2 -2
  45. package/recipes/help-bubble.css +9 -6
  46. package/recipes/help-bubble.layered.css +10 -6
  47. package/recipes/menu-item.css +3 -0
  48. package/recipes/menu-item.layered.css +4 -0
  49. package/recipes/menu-sheet-item.css +3 -0
  50. package/recipes/menu-sheet-item.layered.css +4 -0
  51. package/recipes/notification-badge.css +1 -1
  52. package/recipes/notification-badge.layered.css +1 -1
  53. package/recipes/page-banner.css +32 -29
  54. package/recipes/page-banner.layered.css +23 -19
  55. package/recipes/pagination-page-item.css +4 -4
  56. package/recipes/pagination-page-item.layered.css +4 -4
  57. package/recipes/{content-dialog.css → popover.css} +77 -104
  58. package/recipes/popover.d.ts +21 -0
  59. package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
  60. package/recipes/popover.layered.mjs +60 -0
  61. package/recipes/popover.mjs +60 -0
  62. package/recipes/radiomark.css +5 -5
  63. package/recipes/radiomark.layered.css +5 -5
  64. package/recipes/segmented-control.css +3 -0
  65. package/recipes/segmented-control.layered.css +4 -0
  66. package/recipes/select-box.css +4 -0
  67. package/recipes/select-box.layered.css +5 -0
  68. package/recipes/select-item.css +3 -0
  69. package/recipes/select-item.layered.css +4 -0
  70. package/recipes/select-trigger.css +3 -0
  71. package/recipes/select-trigger.layered.css +4 -0
  72. package/recipes/side-panel.css +0 -33
  73. package/recipes/side-panel.layered.css +0 -33
  74. package/recipes/slider-tick.css +1 -1
  75. package/recipes/slider-tick.layered.css +1 -1
  76. package/recipes/slider.css +4 -4
  77. package/recipes/slider.layered.css +4 -4
  78. package/recipes/snackbar.css +2 -2
  79. package/recipes/snackbar.layered.css +2 -2
  80. package/recipes/switchmark.css +2 -2
  81. package/recipes/switchmark.layered.css +2 -2
  82. package/recipes/time-picker.css +2 -5
  83. package/recipes/time-picker.d.ts +1 -1
  84. package/recipes/time-picker.layered.css +2 -3
  85. package/recipes/time-picker.layered.mjs +0 -12
  86. package/recipes/time-picker.mjs +0 -12
  87. package/recipes/toggle-button.css +4 -4
  88. package/recipes/toggle-button.layered.css +4 -4
  89. package/recipes/wheel-picker.css +42 -3
  90. package/recipes/wheel-picker.d.ts +5 -2
  91. package/recipes/wheel-picker.layered.css +47 -3
  92. package/recipes/wheel-picker.layered.mjs +13 -2
  93. package/recipes/wheel-picker.mjs +13 -2
  94. package/vars/color/bg.d.ts +8 -4
  95. package/vars/color/bg.mjs +3 -1
  96. package/vars/color/fg.d.ts +13 -1
  97. package/vars/color/fg.mjs +6 -0
  98. package/vars/component/index.d.ts +1 -104
  99. package/vars/component/index.mjs +1 -104
  100. package/recipes/action-chip.css +0 -75
  101. package/recipes/action-chip.d.ts +0 -26
  102. package/recipes/action-chip.layered.css +0 -84
  103. package/recipes/action-chip.layered.mjs +0 -51
  104. package/recipes/action-chip.mjs +0 -51
  105. package/recipes/action-sheet-item.css +0 -32
  106. package/recipes/action-sheet-item.d.ts +0 -22
  107. package/recipes/action-sheet-item.layered.css +0 -38
  108. package/recipes/action-sheet-item.layered.mjs +0 -29
  109. package/recipes/action-sheet-item.mjs +0 -29
  110. package/recipes/action-sheet.css +0 -125
  111. package/recipes/action-sheet.d.ts +0 -21
  112. package/recipes/action-sheet.layered.css +0 -134
  113. package/recipes/action-sheet.layered.mjs +0 -60
  114. package/recipes/action-sheet.mjs +0 -60
  115. package/recipes/content-dialog.d.ts +0 -24
  116. package/recipes/content-dialog.layered.mjs +0 -71
  117. package/recipes/content-dialog.mjs +0 -71
  118. package/recipes/control-chip.css +0 -88
  119. package/recipes/control-chip.d.ts +0 -26
  120. package/recipes/control-chip.layered.css +0 -99
  121. package/recipes/control-chip.layered.mjs +0 -51
  122. package/recipes/control-chip.mjs +0 -51
  123. package/recipes/extended-action-sheet-item.css +0 -31
  124. package/recipes/extended-action-sheet-item.d.ts +0 -22
  125. package/recipes/extended-action-sheet-item.layered.css +0 -38
  126. package/recipes/extended-action-sheet-item.layered.mjs +0 -29
  127. package/recipes/extended-action-sheet-item.mjs +0 -29
  128. package/recipes/extended-action-sheet.css +0 -123
  129. package/recipes/extended-action-sheet.d.ts +0 -21
  130. package/recipes/extended-action-sheet.layered.css +0 -132
  131. package/recipes/extended-action-sheet.layered.mjs +0 -64
  132. package/recipes/extended-action-sheet.mjs +0 -64
  133. package/recipes/extended-fab.css +0 -66
  134. package/recipes/extended-fab.d.ts +0 -26
  135. package/recipes/extended-fab.layered.css +0 -79
  136. package/recipes/extended-fab.layered.mjs +0 -34
  137. package/recipes/extended-fab.mjs +0 -34
  138. package/recipes/fab.css +0 -31
  139. package/recipes/fab.d.ts +0 -19
  140. package/recipes/fab.layered.css +0 -37
  141. package/recipes/fab.layered.mjs +0 -22
  142. package/recipes/fab.mjs +0 -22
  143. package/recipes/inline-banner.css +0 -180
  144. package/recipes/inline-banner.d.ts +0 -24
  145. package/recipes/inline-banner.layered.css +0 -161
  146. package/recipes/inline-banner.layered.mjs +0 -64
  147. package/recipes/inline-banner.mjs +0 -64
  148. package/recipes/link-content.css +0 -41
  149. package/recipes/link-content.d.ts +0 -26
  150. package/recipes/link-content.layered.css +0 -48
  151. package/recipes/link-content.layered.mjs +0 -35
  152. package/recipes/link-content.mjs +0 -35
  153. package/recipes/wheel-picker-public.css +0 -124
  154. package/recipes/wheel-picker-public.d.ts +0 -24
  155. package/recipes/wheel-picker-public.layered.css +0 -144
  156. package/recipes/wheel-picker-public.layered.mjs +0 -63
  157. package/recipes/wheel-picker-public.mjs +0 -63
  158. package/vars/component/accordion-item.d.ts +0 -132
  159. package/vars/component/accordion-item.mjs +0 -126
  160. package/vars/component/accordion.d.ts +0 -22
  161. package/vars/component/accordion.mjs +0 -16
  162. package/vars/component/action-button.d.ts +0 -660
  163. package/vars/component/action-button.mjs +0 -541
  164. package/vars/component/action-chip.d.ts +0 -132
  165. package/vars/component/action-chip.mjs +0 -132
  166. package/vars/component/action-sheet-close-button.d.ts +0 -23
  167. package/vars/component/action-sheet-close-button.mjs +0 -23
  168. package/vars/component/action-sheet-item.d.ts +0 -36
  169. package/vars/component/action-sheet-item.mjs +0 -36
  170. package/vars/component/action-sheet.d.ts +0 -46
  171. package/vars/component/action-sheet.mjs +0 -46
  172. package/vars/component/alert-dialog.d.ts +0 -52
  173. package/vars/component/alert-dialog.mjs +0 -52
  174. package/vars/component/attachment-input-dropzone.d.ts +0 -32
  175. package/vars/component/attachment-input-dropzone.mjs +0 -30
  176. package/vars/component/attachment-input-item-action-button.d.ts +0 -37
  177. package/vars/component/attachment-input-item-action-button.mjs +0 -37
  178. package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
  179. package/vars/component/attachment-input-item-remove-button.mjs +0 -28
  180. package/vars/component/attachment-input-item.d.ts +0 -103
  181. package/vars/component/attachment-input-item.mjs +0 -102
  182. package/vars/component/attachment-input-trigger.d.ts +0 -46
  183. package/vars/component/attachment-input-trigger.mjs +0 -46
  184. package/vars/component/attachment-input.d.ts +0 -14
  185. package/vars/component/attachment-input.mjs +0 -12
  186. package/vars/component/avatar-stack.d.ts +0 -110
  187. package/vars/component/avatar-stack.mjs +0 -110
  188. package/vars/component/avatar.d.ts +0 -204
  189. package/vars/component/avatar.mjs +0 -162
  190. package/vars/component/badge.d.ts +0 -316
  191. package/vars/component/badge.mjs +0 -236
  192. package/vars/component/bottom-sheet-close-button.d.ts +0 -21
  193. package/vars/component/bottom-sheet-close-button.mjs +0 -21
  194. package/vars/component/bottom-sheet-handle.d.ts +0 -24
  195. package/vars/component/bottom-sheet-handle.mjs +0 -24
  196. package/vars/component/bottom-sheet.d.ts +0 -86
  197. package/vars/component/bottom-sheet.mjs +0 -86
  198. package/vars/component/callout-close-button.d.ts +0 -81
  199. package/vars/component/callout-close-button.mjs +0 -63
  200. package/vars/component/callout.d.ts +0 -232
  201. package/vars/component/callout.mjs +0 -200
  202. package/vars/component/checkbox-group.d.ts +0 -9
  203. package/vars/component/checkbox-group.mjs +0 -9
  204. package/vars/component/checkbox.d.ts +0 -56
  205. package/vars/component/checkbox.mjs +0 -53
  206. package/vars/component/checkmark.d.ts +0 -195
  207. package/vars/component/checkmark.mjs +0 -165
  208. package/vars/component/chip-tablist.d.ts +0 -24
  209. package/vars/component/chip-tablist.mjs +0 -24
  210. package/vars/component/chip.d.ts +0 -321
  211. package/vars/component/chip.mjs +0 -303
  212. package/vars/component/content-placeholder.d.ts +0 -28
  213. package/vars/component/content-placeholder.mjs +0 -27
  214. package/vars/component/contextual-floating-button.d.ts +0 -144
  215. package/vars/component/contextual-floating-button.mjs +0 -132
  216. package/vars/component/control-chip.d.ts +0 -158
  217. package/vars/component/control-chip.mjs +0 -158
  218. package/vars/component/date-picker.d.ts +0 -103
  219. package/vars/component/date-picker.mjs +0 -103
  220. package/vars/component/dialog-close-button.d.ts +0 -24
  221. package/vars/component/dialog-close-button.mjs +0 -24
  222. package/vars/component/dialog.d.ts +0 -91
  223. package/vars/component/dialog.mjs +0 -83
  224. package/vars/component/divider.d.ts +0 -9
  225. package/vars/component/divider.mjs +0 -9
  226. package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
  227. package/vars/component/extended-action-sheet-close-button.mjs +0 -24
  228. package/vars/component/extended-action-sheet-item.d.ts +0 -46
  229. package/vars/component/extended-action-sheet-item.mjs +0 -46
  230. package/vars/component/extended-action-sheet.d.ts +0 -55
  231. package/vars/component/extended-action-sheet.mjs +0 -55
  232. package/vars/component/extended-fab.d.ts +0 -88
  233. package/vars/component/extended-fab.mjs +0 -82
  234. package/vars/component/fab.d.ts +0 -21
  235. package/vars/component/fab.mjs +0 -21
  236. package/vars/component/field-label.d.ts +0 -25
  237. package/vars/component/field-label.mjs +0 -25
  238. package/vars/component/field.d.ts +0 -78
  239. package/vars/component/field.mjs +0 -72
  240. package/vars/component/floating-action-button.d.ts +0 -60
  241. package/vars/component/floating-action-button.mjs +0 -54
  242. package/vars/component/help-bubble.d.ts +0 -55
  243. package/vars/component/help-bubble.mjs +0 -52
  244. package/vars/component/identity-placeholder.d.ts +0 -12
  245. package/vars/component/identity-placeholder.mjs +0 -12
  246. package/vars/component/image-frame-floater.d.ts +0 -10
  247. package/vars/component/image-frame-floater.mjs +0 -9
  248. package/vars/component/image-frame-indicator.d.ts +0 -20
  249. package/vars/component/image-frame-indicator.mjs +0 -18
  250. package/vars/component/image-frame-reaction-button.d.ts +0 -60
  251. package/vars/component/image-frame-reaction-button.mjs +0 -51
  252. package/vars/component/image-frame.d.ts +0 -27
  253. package/vars/component/image-frame.mjs +0 -18
  254. package/vars/component/inline-banner.d.ts +0 -191
  255. package/vars/component/inline-banner.mjs +0 -191
  256. package/vars/component/input-button.d.ts +0 -162
  257. package/vars/component/input-button.mjs +0 -155
  258. package/vars/component/link-content.d.ts +0 -58
  259. package/vars/component/link-content.mjs +0 -58
  260. package/vars/component/list-header.d.ts +0 -29
  261. package/vars/component/list-header.mjs +0 -29
  262. package/vars/component/list-item.d.ts +0 -85
  263. package/vars/component/list-item.mjs +0 -84
  264. package/vars/component/manner-temp-badge.d.ts +0 -117
  265. package/vars/component/manner-temp-badge.mjs +0 -117
  266. package/vars/component/manner-temp.d.ts +0 -88
  267. package/vars/component/manner-temp.mjs +0 -88
  268. package/vars/component/menu-item.d.ts +0 -129
  269. package/vars/component/menu-item.mjs +0 -117
  270. package/vars/component/menu-sheet-close-button.d.ts +0 -24
  271. package/vars/component/menu-sheet-close-button.mjs +0 -24
  272. package/vars/component/menu-sheet-item.d.ts +0 -69
  273. package/vars/component/menu-sheet-item.mjs +0 -57
  274. package/vars/component/menu-sheet.d.ts +0 -56
  275. package/vars/component/menu-sheet.mjs +0 -56
  276. package/vars/component/menu.d.ts +0 -68
  277. package/vars/component/menu.mjs +0 -60
  278. package/vars/component/notification-badge.d.ts +0 -48
  279. package/vars/component/notification-badge.mjs +0 -42
  280. package/vars/component/page-banner-close-button.d.ts +0 -133
  281. package/vars/component/page-banner-close-button.mjs +0 -99
  282. package/vars/component/page-banner.d.ts +0 -385
  283. package/vars/component/page-banner.mjs +0 -339
  284. package/vars/component/pagination-button.d.ts +0 -33
  285. package/vars/component/pagination-button.mjs +0 -33
  286. package/vars/component/pagination-page-item.d.ts +0 -54
  287. package/vars/component/pagination-page-item.mjs +0 -54
  288. package/vars/component/progress-circle.d.ts +0 -88
  289. package/vars/component/progress-circle.mjs +0 -67
  290. package/vars/component/quantity-picker-button.d.ts +0 -78
  291. package/vars/component/quantity-picker-button.mjs +0 -78
  292. package/vars/component/quantity-picker.d.ts +0 -80
  293. package/vars/component/quantity-picker.mjs +0 -80
  294. package/vars/component/radio-group.d.ts +0 -9
  295. package/vars/component/radio-group.mjs +0 -9
  296. package/vars/component/radio.d.ts +0 -56
  297. package/vars/component/radio.mjs +0 -53
  298. package/vars/component/radiomark.d.ts +0 -117
  299. package/vars/component/radiomark.mjs +0 -117
  300. package/vars/component/reaction-button.d.ts +0 -136
  301. package/vars/component/reaction-button.mjs +0 -136
  302. package/vars/component/scroll-fog.d.ts +0 -78
  303. package/vars/component/scroll-fog.mjs +0 -78
  304. package/vars/component/segmented-control-indicator.d.ts +0 -24
  305. package/vars/component/segmented-control-indicator.mjs +0 -24
  306. package/vars/component/segmented-control-item.d.ts +0 -41
  307. package/vars/component/segmented-control-item.mjs +0 -41
  308. package/vars/component/segmented-control.d.ts +0 -11
  309. package/vars/component/segmented-control.mjs +0 -11
  310. package/vars/component/select-box-checkmark.d.ts +0 -40
  311. package/vars/component/select-box-checkmark.mjs +0 -40
  312. package/vars/component/select-box-group.d.ts +0 -10
  313. package/vars/component/select-box-group.mjs +0 -10
  314. package/vars/component/select-box.d.ts +0 -107
  315. package/vars/component/select-box.mjs +0 -102
  316. package/vars/component/select-item.d.ts +0 -101
  317. package/vars/component/select-item.mjs +0 -95
  318. package/vars/component/select-trigger.d.ts +0 -127
  319. package/vars/component/select-trigger.mjs +0 -120
  320. package/vars/component/select.d.ts +0 -62
  321. package/vars/component/select.mjs +0 -54
  322. package/vars/component/side-panel-close-button.d.ts +0 -24
  323. package/vars/component/side-panel-close-button.mjs +0 -24
  324. package/vars/component/side-panel.d.ts +0 -97
  325. package/vars/component/side-panel.mjs +0 -85
  326. package/vars/component/skeleton.d.ts +0 -80
  327. package/vars/component/skeleton.mjs +0 -62
  328. package/vars/component/slider-thumb.d.ts +0 -25
  329. package/vars/component/slider-thumb.mjs +0 -25
  330. package/vars/component/slider-tick.d.ts +0 -23
  331. package/vars/component/slider-tick.mjs +0 -23
  332. package/vars/component/slider.d.ts +0 -81
  333. package/vars/component/slider.mjs +0 -78
  334. package/vars/component/snackbar.d.ts +0 -65
  335. package/vars/component/snackbar.mjs +0 -65
  336. package/vars/component/switch.d.ts +0 -56
  337. package/vars/component/switch.mjs +0 -53
  338. package/vars/component/switchmark.d.ts +0 -114
  339. package/vars/component/switchmark.mjs +0 -112
  340. package/vars/component/tab.d.ts +0 -47
  341. package/vars/component/tab.mjs +0 -47
  342. package/vars/component/tablist.d.ts +0 -51
  343. package/vars/component/tablist.mjs +0 -51
  344. package/vars/component/tag-group-item.d.ts +0 -122
  345. package/vars/component/tag-group-item.mjs +0 -122
  346. package/vars/component/tag-group.d.ts +0 -34
  347. package/vars/component/tag-group.mjs +0 -34
  348. package/vars/component/text-button.d.ts +0 -23
  349. package/vars/component/text-button.mjs +0 -23
  350. package/vars/component/text-input.d.ts +0 -292
  351. package/vars/component/text-input.mjs +0 -263
  352. package/vars/component/time-picker.d.ts +0 -27
  353. package/vars/component/time-picker.mjs +0 -27
  354. package/vars/component/toggle-button.d.ts +0 -213
  355. package/vars/component/toggle-button.mjs +0 -207
  356. package/vars/component/top-navigation-icon-button.d.ts +0 -45
  357. package/vars/component/top-navigation-icon-button.mjs +0 -45
  358. package/vars/component/top-navigation-text-button.d.ts +0 -61
  359. package/vars/component/top-navigation-text-button.mjs +0 -60
  360. package/vars/component/top-navigation.d.ts +0 -118
  361. package/vars/component/top-navigation.mjs +0 -109
  362. package/vars/component/wheel-picker.d.ts +0 -72
  363. package/vars/component/wheel-picker.mjs +0 -72
package/all.layered.css CHANGED
@@ -403,6 +403,7 @@
403
403
  --seed-dynamic-scale-basis: max(var(--seed-element-height), var(--seed-element-width) / 4, 24);
404
404
  --seed-dynamic-scale: calc((var(--seed-dynamic-scale-basis) - 2) / var(--seed-dynamic-scale-basis));
405
405
  --seed-feedback-scale: var(--seed-dynamic-scale, 1);
406
+ --seed-content-scale: 1;
406
407
  scale: 1;
407
408
  }
408
409
 
@@ -412,6 +413,30 @@
412
413
  }
413
414
  }
414
415
 
416
+ .seed-content-scale {
417
+ display: inherit;
418
+ flex-direction: inherit;
419
+ flex-wrap: inherit;
420
+ align-items: inherit;
421
+ align-content: inherit;
422
+ justify-content: inherit;
423
+ justify-items: inherit;
424
+ gap: inherit;
425
+ grid-template-columns: inherit;
426
+ grid-template-rows: inherit;
427
+ grid-template-areas: inherit;
428
+ grid-auto-flow: inherit;
429
+ grid-auto-columns: inherit;
430
+ grid-auto-rows: inherit;
431
+ min-width: 0;
432
+ min-height: 0;
433
+ scale: var(--seed-content-scale);
434
+ transition: var(--seed-feedback-scale-transition);
435
+ flex: auto;
436
+ grid-area: 1 / 1 / -1 / -1;
437
+ place-self: stretch stretch;
438
+ }
439
+
415
440
  :root, [data-seed-color-mode="system"] {
416
441
  --lightningcss-light: initial;
417
442
  --lightningcss-dark: ;
@@ -662,6 +687,12 @@
662
687
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-00);
663
688
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
664
689
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
690
+ --seed-color-fg-on-brand-solid: var(--seed-color-palette-static-white);
691
+ --seed-color-fg-on-critical-solid: var(--seed-color-palette-static-white);
692
+ --seed-color-fg-on-informative-solid: var(--seed-color-palette-static-white);
693
+ --seed-color-fg-on-neutral-solid: var(--seed-color-palette-gray-00);
694
+ --seed-color-fg-on-positive-solid: var(--seed-color-palette-static-white);
695
+ --seed-color-fg-on-warning-solid: var(--seed-color-palette-static-black-alpha-900);
665
696
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
666
697
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
667
698
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
@@ -683,15 +714,17 @@
683
714
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-200);
684
715
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-00);
685
716
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-100);
686
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-100);
687
717
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-00);
688
718
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-100);
689
719
  --seed-color-bg-magic-weak: #f9f2ee;
690
720
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-900);
691
721
  --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
692
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
722
+ --seed-color-bg-neutral-muted: var(--seed-color-palette-gray-100);
723
+ --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-900);
724
+ --seed-color-bg-neutral-solid-pressed: var(--seed-color-palette-gray-800);
693
725
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
694
726
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
727
+ --seed-color-bg-neutral-subtle: var(--seed-color-palette-gray-00);
695
728
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-200);
696
729
  --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-black-alpha-200);
697
730
  --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-black-alpha-300);
@@ -874,6 +907,12 @@
874
907
  --seed-color-fg-neutral-inverted: var(--seed-color-palette-gray-100);
875
908
  --seed-color-fg-neutral-muted: var(--seed-color-palette-gray-800);
876
909
  --seed-color-fg-neutral-subtle: var(--seed-color-palette-gray-700);
910
+ --seed-color-fg-on-brand-solid: var(--seed-color-palette-static-white);
911
+ --seed-color-fg-on-critical-solid: var(--seed-color-palette-static-white);
912
+ --seed-color-fg-on-informative-solid: var(--seed-color-palette-static-white);
913
+ --seed-color-fg-on-neutral-solid: var(--seed-color-palette-gray-100);
914
+ --seed-color-fg-on-positive-solid: var(--seed-color-palette-static-white);
915
+ --seed-color-fg-on-warning-solid: var(--seed-color-palette-static-black-alpha-900);
877
916
  --seed-color-fg-placeholder: var(--seed-color-palette-gray-600);
878
917
  --seed-color-fg-positive: var(--seed-color-palette-green-700);
879
918
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
@@ -895,15 +934,17 @@
895
934
  --seed-color-bg-layer-basement: var(--seed-color-palette-gray-00);
896
935
  --seed-color-bg-layer-default: var(--seed-color-palette-gray-100);
897
936
  --seed-color-bg-layer-default-pressed: var(--seed-color-palette-gray-300);
898
- --seed-color-bg-layer-fill: var(--seed-color-palette-gray-200);
899
937
  --seed-color-bg-layer-floating: var(--seed-color-palette-gray-200);
900
938
  --seed-color-bg-layer-floating-pressed: var(--seed-color-palette-gray-300);
901
939
  --seed-color-bg-magic-weak: #201f1f;
902
940
  --seed-color-bg-neutral-inverted: var(--seed-color-palette-gray-1000);
903
941
  --seed-color-bg-neutral-inverted-pressed: var(--seed-color-palette-gray-800);
904
- --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-300);
942
+ --seed-color-bg-neutral-muted: var(--seed-color-palette-gray-200);
943
+ --seed-color-bg-neutral-solid: var(--seed-color-palette-gray-1000);
944
+ --seed-color-bg-neutral-solid-pressed: var(--seed-color-palette-gray-800);
905
945
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
906
946
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
947
+ --seed-color-bg-neutral-subtle: var(--seed-color-palette-gray-100);
907
948
  --seed-color-bg-neutral-weak: var(--seed-color-palette-gray-300);
908
949
  --seed-color-bg-neutral-weak-alpha: var(--seed-color-palette-static-white-alpha-200);
909
950
  --seed-color-bg-neutral-weak-alpha-pressed: var(--seed-color-palette-static-white-alpha-300);
@@ -1282,6 +1323,10 @@
1282
1323
  cursor: not-allowed;
1283
1324
  }
1284
1325
 
1326
+ .seed-accordion__trigger:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
1327
+ --seed-content-scale: var(--seed-feedback-scale);
1328
+ }
1329
+
1285
1330
  .seed-accordion__prefix {
1286
1331
  --seed-icon-color: var(--seed-color-fg-neutral);
1287
1332
  flex-shrink: 0;
@@ -1620,13 +1665,13 @@
1620
1665
 
1621
1666
  .seed-action-button--variant_brandSolid {
1622
1667
  background: var(--seed-color-bg-brand-solid);
1623
- color: var(--seed-color-palette-static-white);
1668
+ color: var(--seed-color-fg-on-brand-solid);
1624
1669
  font-weight: var(--seed-font-weight-bold);
1625
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1626
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1627
- --seed-icon-color: var(--seed-color-palette-static-white);
1670
+ --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
1671
+ --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
1672
+ --seed-icon-color: var(--seed-color-fg-on-brand-solid);
1628
1673
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1629
- --range-color: var(--seed-color-palette-static-white);
1674
+ --range-color: var(--seed-color-fg-on-brand-solid);
1630
1675
  }
1631
1676
 
1632
1677
  @media (hover: hover) and (pointer: fine) {
@@ -1654,25 +1699,25 @@
1654
1699
  }
1655
1700
 
1656
1701
  .seed-action-button--variant_neutralSolid {
1657
- background: var(--seed-color-bg-neutral-inverted);
1658
- color: var(--seed-color-fg-neutral-inverted);
1702
+ background: var(--seed-color-bg-neutral-solid);
1703
+ color: var(--seed-color-fg-on-neutral-solid);
1659
1704
  font-weight: var(--seed-font-weight-bold);
1660
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
1661
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
1662
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
1705
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
1706
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
1707
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
1663
1708
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1664
- --range-color: var(--seed-color-palette-static-white);
1709
+ --range-color: var(--seed-color-fg-on-neutral-solid);
1665
1710
  }
1666
1711
 
1667
1712
  @media (hover: hover) and (pointer: fine) {
1668
1713
  .seed-action-button--variant_neutralSolid:is(:hover, [data-hover]) {
1669
- background: var(--seed-color-bg-neutral-inverted-pressed);
1714
+ background: var(--seed-color-bg-neutral-solid-pressed);
1670
1715
  }
1671
1716
  }
1672
1717
 
1673
1718
  @media not all and (hover: hover) and (pointer: fine) {
1674
1719
  .seed-action-button--variant_neutralSolid:is(:active, [data-active]) {
1675
- background: var(--seed-color-bg-neutral-inverted-pressed);
1720
+ background: var(--seed-color-bg-neutral-solid-pressed);
1676
1721
  }
1677
1722
  }
1678
1723
 
@@ -1685,7 +1730,7 @@
1685
1730
  }
1686
1731
 
1687
1732
  .seed-action-button--variant_neutralSolid[data-loading] {
1688
- background: var(--seed-color-bg-neutral-inverted-pressed);
1733
+ background: var(--seed-color-bg-neutral-solid-pressed);
1689
1734
  }
1690
1735
 
1691
1736
  .seed-action-button--variant_neutralWeak {
@@ -1725,13 +1770,13 @@
1725
1770
 
1726
1771
  .seed-action-button--variant_criticalSolid {
1727
1772
  background: var(--seed-color-bg-critical-solid);
1728
- color: var(--seed-color-palette-static-white);
1773
+ color: var(--seed-color-fg-on-critical-solid);
1729
1774
  font-weight: var(--seed-font-weight-bold);
1730
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
1731
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
1732
- --seed-icon-color: var(--seed-color-palette-static-white);
1775
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
1776
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
1777
+ --seed-icon-color: var(--seed-color-fg-on-critical-solid);
1733
1778
  --track-color: var(--seed-color-palette-static-white-alpha-300);
1734
- --range-color: var(--seed-color-palette-static-white);
1779
+ --range-color: var(--seed-color-fg-on-critical-solid);
1735
1780
  }
1736
1781
 
1737
1782
  @media (hover: hover) and (pointer: fine) {
@@ -1985,257 +2030,117 @@
1985
2030
  --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1986
2031
  }
1987
2032
 
1988
- .seed-action-chip {
1989
- box-sizing: border-box;
1990
- cursor: pointer;
1991
- text-transform: none;
1992
- text-align: start;
1993
- white-space: nowrap;
1994
- -webkit-font-smoothing: antialiased;
1995
- -moz-osx-font-smoothing: grayscale;
1996
- font-family: inherit;
1997
- line-height: 1;
1998
- font-weight: var(--seed-font-weight-medium);
1999
- border-radius: var(--seed-radius-full);
2000
- background: var(--seed-color-bg-neutral-weak);
2001
- color: var(--seed-color-fg-neutral);
2002
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
2003
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
2004
- --seed-icon-color: var(--seed-color-fg-neutral);
2005
- --seed-count-font-weight: var(--seed-font-weight-medium);
2006
- --seed-count-color: var(--seed-color-fg-neutral-muted);
2007
- border: none;
2008
- flex-shrink: 0;
2009
- justify-content: center;
2010
- align-items: center;
2011
- display: inline-flex;
2012
- }
2013
-
2014
- .seed-action-chip:is(:active, [data-active]) {
2015
- background: var(--seed-color-bg-neutral-weak-pressed);
2016
- }
2017
-
2018
- .seed-action-chip:is(:focus, [data-focus]) {
2019
- outline: none;
2020
- }
2021
-
2022
- .seed-action-chip:is(:disabled, [disabled], [data-disabled]) {
2023
- background: var(--seed-color-bg-disabled);
2024
- color: var(--seed-color-fg-disabled);
2025
- cursor: not-allowed;
2026
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
2027
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
2028
- --seed-icon-color: var(--seed-color-fg-disabled);
2029
- }
2030
-
2031
- .seed-action-chip--size_medium {
2032
- min-height: var(--seed-dimension-x9);
2033
- padding-block: var(--seed-dimension-x2);
2034
- gap: var(--seed-dimension-x1);
2035
- font-size: var(--seed-font-size-t4);
2036
- line-height: var(--seed-line-height-t4);
2037
- --seed-count-font-size: var(--seed-font-size-t4);
2038
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2039
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2040
- --seed-icon-size: var(--seed-dimension-x4);
2041
- }
2042
-
2043
- .seed-action-chip--size_small {
2044
- min-height: var(--seed-dimension-x8);
2045
- padding-block: var(--seed-dimension-x1_5);
2046
- gap: var(--seed-dimension-x1);
2047
- font-size: var(--seed-font-size-t4);
2048
- line-height: var(--seed-line-height-t4);
2049
- --seed-count-font-size: var(--seed-font-size-t4);
2050
- --seed-prefix-icon-size: var(--seed-dimension-x4);
2051
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
2052
- --seed-icon-size: var(--seed-dimension-x4);
2053
- }
2054
-
2055
- .seed-action-chip--size_medium-layout_withText {
2056
- padding-inline: var(--seed-dimension-x3_5);
2057
- }
2058
-
2059
- .seed-action-chip--size_medium-layout_iconOnly {
2060
- min-width: var(--seed-dimension-x9);
2061
- }
2062
-
2063
- .seed-action-chip--size_small-layout_withText {
2064
- padding-inline: var(--seed-dimension-x3);
2065
- }
2066
-
2067
- .seed-action-chip--size_small-layout_iconOnly {
2068
- min-width: var(--seed-dimension-x8);
2069
- }
2070
-
2071
- .seed-action-sheet__positioner {
2033
+ .seed-alert-dialog__positioner {
2072
2034
  overscroll-behavior-y: none;
2073
- --sheet-z-index: 2;
2074
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2035
+ --dialog-z-index: 2;
2036
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2075
2037
  justify-content: center;
2076
- align-items: flex-end;
2038
+ align-items: center;
2077
2039
  display: flex;
2078
2040
  position: fixed;
2079
2041
  inset: 0;
2080
2042
  }
2081
2043
 
2082
- .seed-action-sheet__backdrop {
2044
+ .seed-alert-dialog__backdrop {
2083
2045
  background: var(--seed-color-bg-overlay);
2084
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2046
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2085
2047
  position: fixed;
2086
2048
  inset: 0;
2087
2049
  }
2088
2050
 
2089
- .seed-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
2090
- animation: seed-exit;
2091
- animation-timing-function: var(--seed-timing-function-exit);
2092
- animation-duration: var(--seed-duration-d2);
2093
- --seed-exit-translate-x: 0;
2094
- --seed-exit-translate-y: 0;
2095
- --seed-exit-opacity: 0;
2096
- --seed-exit-scale: 1;
2097
- animation-fill-mode: forwards;
2098
- }
2099
-
2100
- .seed-action-sheet__backdrop:is([data-state="open"], [data-open]) {
2101
- animation: seed-enter;
2102
- animation-timing-function: var(--seed-timing-function-enter);
2103
- animation-duration: var(--seed-duration-d2);
2104
- --seed-enter-translate-x: 0;
2105
- --seed-enter-translate-y: 0;
2106
- --seed-enter-opacity: 0;
2107
- --seed-enter-scale: 1;
2108
- }
2109
-
2110
- .seed-action-sheet__content {
2051
+ .seed-alert-dialog__content {
2111
2052
  box-sizing: border-box;
2112
2053
  word-break: break-all;
2113
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
2054
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
2114
2055
  background: var(--seed-color-bg-layer-floating);
2115
- border-top-left-radius: var(--seed-radius-r5);
2116
- border-top-right-radius: var(--seed-radius-r5);
2056
+ max-width: 272px;
2057
+ margin: auto var(--seed-dimension-x8);
2058
+ border-radius: var(--seed-radius-r5);
2059
+ outline: none;
2117
2060
  flex-direction: column;
2118
2061
  flex: 1;
2119
2062
  display: flex;
2120
2063
  position: relative;
2121
- overflow: hidden;
2122
- }
2123
-
2124
- .seed-action-sheet__content:not(:is([data-state="open"], [data-open])) {
2125
- animation: seed-exit;
2126
- animation-timing-function: var(--seed-timing-function-exit);
2127
- animation-duration: var(--seed-duration-d4);
2128
- --seed-exit-translate-x: 0;
2129
- --seed-exit-translate-y: 100%;
2130
- --seed-exit-opacity: 1;
2131
- --seed-exit-scale: 1;
2132
- animation-fill-mode: forwards;
2133
2064
  }
2134
2065
 
2135
- .seed-action-sheet__content:is([data-state="open"], [data-open]) {
2136
- animation: seed-enter;
2137
- animation-timing-function: var(--seed-timing-function-enter-expressive);
2138
- animation-duration: var(--seed-duration-d6);
2139
- --seed-enter-translate-x: 0;
2140
- --seed-enter-translate-y: 100%;
2141
- --seed-enter-opacity: 1;
2142
- --seed-enter-scale: 1;
2066
+ .seed-alert-dialog__content:is(:focus, [data-focus]) {
2067
+ outline: none;
2143
2068
  }
2144
2069
 
2145
- .seed-action-sheet__header {
2146
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
2147
- padding-block: var(--seed-dimension-x3_5);
2148
- align-items: center;
2149
- gap: var(--seed-dimension-x1);
2070
+ .seed-alert-dialog__header {
2071
+ padding-inline: var(--seed-dimension-x5);
2072
+ padding-top: var(--seed-dimension-x5);
2073
+ gap: var(--seed-dimension-x1_5);
2150
2074
  flex-direction: column;
2151
2075
  display: flex;
2152
- position: relative;
2153
- }
2154
-
2155
- .seed-action-sheet__header:after {
2156
- content: "";
2157
- left: var(--seed-dimension-spacing-x-global-gutter);
2158
- right: var(--seed-dimension-spacing-x-global-gutter);
2159
- background: var(--seed-color-stroke-neutral-muted);
2160
- height: 1px;
2161
- display: block;
2162
- position: absolute;
2163
- bottom: 0;
2164
2076
  }
2165
2077
 
2166
- .seed-action-sheet__title {
2167
- color: var(--seed-color-fg-neutral-muted);
2168
- font-size: var(--seed-font-size-t4);
2169
- line-height: var(--seed-line-height-t4);
2078
+ .seed-alert-dialog__title {
2079
+ color: var(--seed-color-fg-neutral);
2080
+ font-size: var(--seed-font-size-t7);
2081
+ line-height: var(--seed-line-height-t7);
2170
2082
  font-weight: var(--seed-font-weight-bold);
2083
+ margin: 0;
2171
2084
  }
2172
2085
 
2173
- .seed-action-sheet__description {
2174
- color: var(--seed-color-fg-neutral-muted);
2175
- font-size: var(--seed-font-size-t3);
2176
- line-height: var(--seed-line-height-t3);
2177
- font-weight: var(--seed-font-weight-regular);
2178
- }
2179
-
2180
- .seed-action-sheet__list {
2181
- flex-direction: column;
2182
- align-items: stretch;
2183
- display: flex;
2184
- }
2185
-
2186
- .seed-action-sheet__closeButton {
2187
- background-color: var(--seed-color-bg-layer-floating);
2188
- min-height: 50px;
2189
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
2190
- padding-block: var(--seed-dimension-x3_5);
2086
+ .seed-alert-dialog__description {
2191
2087
  color: var(--seed-color-fg-neutral);
2192
2088
  font-size: var(--seed-font-size-t5);
2193
2089
  line-height: var(--seed-line-height-t5);
2194
- font-weight: var(--seed-font-weight-bold);
2195
- justify-content: center;
2196
- align-items: center;
2197
- display: flex;
2198
- }
2199
-
2200
- .seed-action-sheet__closeButton:is(:active, [data-active]) {
2201
- background-color: var(--seed-color-bg-layer-floating-pressed);
2090
+ font-weight: var(--seed-font-weight-regular);
2091
+ white-space: pre-wrap;
2092
+ margin: 0;
2202
2093
  }
2203
2094
 
2204
- .seed-action-sheet-item {
2205
- background-color: var(--seed-color-bg-layer-floating);
2206
- min-height: 50px;
2207
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
2208
- padding-block: var(--seed-dimension-x3_5);
2209
- font-size: var(--seed-font-size-t5);
2210
- line-height: var(--seed-line-height-t5);
2211
- font-weight: var(--seed-font-weight-regular);
2212
- justify-content: center;
2213
- align-items: center;
2095
+ .seed-alert-dialog__footer {
2096
+ padding-inline: var(--seed-dimension-x5);
2097
+ padding-top: var(--seed-dimension-x4);
2098
+ padding-bottom: var(--seed-dimension-x5);
2099
+ flex-direction: column;
2100
+ align-items: stretch;
2214
2101
  display: flex;
2215
- position: relative;
2216
2102
  }
2217
2103
 
2218
- .seed-action-sheet-item:is(:active, [data-active]) {
2219
- background-color: var(--seed-color-bg-layer-floating-pressed);
2104
+ .seed-alert-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
2105
+ animation: seed-enter;
2106
+ animation-timing-function: var(--seed-timing-function-enter);
2107
+ animation-duration: var(--seed-duration-d2);
2108
+ --seed-enter-translate-x: 0;
2109
+ --seed-enter-translate-y: 0;
2110
+ --seed-enter-opacity: 0;
2111
+ --seed-enter-scale: 1;
2220
2112
  }
2221
2113
 
2222
- .seed-action-sheet-item:after {
2223
- content: "";
2224
- left: var(--seed-dimension-spacing-x-global-gutter);
2225
- right: var(--seed-dimension-spacing-x-global-gutter);
2226
- background: var(--seed-color-stroke-neutral-muted);
2227
- height: 1px;
2228
- display: block;
2229
- position: absolute;
2230
- bottom: 0;
2114
+ .seed-alert-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
2115
+ animation: seed-exit;
2116
+ animation-timing-function: var(--seed-timing-function-exit);
2117
+ animation-duration: var(--seed-duration-d2);
2118
+ --seed-exit-translate-x: 0;
2119
+ --seed-exit-translate-y: 0;
2120
+ --seed-exit-opacity: 0;
2121
+ --seed-exit-scale: 1;
2122
+ animation-fill-mode: forwards;
2231
2123
  }
2232
2124
 
2233
- .seed-action-sheet-item--tone_neutral {
2234
- color: var(--seed-color-fg-neutral);
2125
+ .seed-alert-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
2126
+ animation: seed-enter;
2127
+ animation-timing-function: var(--seed-timing-function-enter-expressive);
2128
+ animation-duration: var(--seed-duration-d4);
2129
+ --seed-enter-translate-x: 0;
2130
+ --seed-enter-translate-y: 0;
2131
+ --seed-enter-opacity: 0;
2132
+ --seed-enter-scale: 1.3;
2235
2133
  }
2236
2134
 
2237
- .seed-action-sheet-item--tone_critical {
2238
- color: var(--seed-color-fg-critical);
2135
+ .seed-alert-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
2136
+ animation: seed-exit;
2137
+ animation-timing-function: var(--seed-timing-function-exit);
2138
+ animation-duration: var(--seed-duration-d2);
2139
+ --seed-exit-translate-x: 0;
2140
+ --seed-exit-translate-y: 0;
2141
+ --seed-exit-opacity: 0;
2142
+ --seed-exit-scale: 1;
2143
+ animation-fill-mode: forwards;
2239
2144
  }
2240
2145
 
2241
2146
  .seed-aspect-ratio {
@@ -2967,36 +2872,91 @@
2967
2872
  -webkit-font-smoothing: antialiased;
2968
2873
  -moz-osx-font-smoothing: grayscale;
2969
2874
  align-items: center;
2875
+ min-width: 0;
2970
2876
  text-decoration: none;
2971
2877
  display: inline-flex;
2878
+ overflow: hidden;
2879
+ }
2880
+
2881
+ .seed-badge__prefix {
2882
+ color: inherit;
2883
+ --seed-icon-size: 100%;
2884
+ --seed-icon-color: currentColor;
2885
+ flex-shrink: 0;
2886
+ justify-content: center;
2887
+ align-items: center;
2888
+ display: inline-flex;
2972
2889
  }
2973
2890
 
2974
2891
  .seed-badge__label {
2975
2892
  text-overflow: ellipsis;
2976
2893
  white-space: nowrap;
2894
+ flex-shrink: 1;
2895
+ min-width: 0;
2977
2896
  overflow: hidden;
2978
2897
  }
2979
2898
 
2980
- .seed-badge__root--size_medium {
2981
- max-width: clamp(calc(108px * var(--seed-font-size-limit-min)), 7.5rem, calc(108px * var(--seed-font-size-limit-max)));
2982
- min-height: var(--seed-dimension-x5);
2983
- padding-inline: var(--seed-dimension-x1_5);
2984
- padding-block: var(--seed-dimension-x0_5);
2985
- border-radius: var(--seed-radius-r1);
2986
- font-size: var(--seed-font-size-t1);
2987
- line-height: var(--seed-line-height-t1);
2988
- }
2899
+ .seed-badge__action {
2900
+ border-radius: inherit;
2901
+ color: inherit;
2902
+ cursor: pointer;
2903
+ --seed-icon-size: 100%;
2904
+ --seed-icon-color: currentColor;
2905
+ background-color: #0000;
2906
+ border: none;
2907
+ flex-shrink: 0;
2908
+ justify-content: center;
2909
+ align-items: center;
2910
+ padding: 0;
2911
+ font-family: inherit;
2912
+ display: inline-flex;
2913
+ }
2914
+
2915
+ .seed-badge__action:is(:active, [data-active]) {
2916
+ scale: var(--seed-feedback-scale);
2917
+ }
2918
+
2919
+ .seed-badge__action {
2920
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
2921
+ outline: var(--seed-dimension-x0_5) solid transparent;
2922
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2923
+ }
2924
+
2925
+ .seed-badge__action:is(:focus-visible, [data-focus-visible]) {
2926
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
2927
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
2928
+ }
2929
+
2930
+ .seed-badge__root--size_medium {
2931
+ min-height: var(--seed-dimension-x5);
2932
+ padding-inline: var(--seed-dimension-x1_5);
2933
+ padding-block: var(--seed-dimension-x0_5);
2934
+ border-radius: var(--seed-radius-r1);
2935
+ gap: var(--seed-dimension-x0_5);
2936
+ font-size: var(--seed-font-size-t1);
2937
+ line-height: var(--seed-line-height-t1);
2938
+ }
2939
+
2940
+ .seed-badge__prefix--size_medium, .seed-badge__action--size_medium {
2941
+ width: var(--seed-dimension-x3);
2942
+ height: var(--seed-dimension-x3);
2943
+ }
2989
2944
 
2990
2945
  .seed-badge__root--size_large {
2991
- max-width: clamp(calc(120px * var(--seed-font-size-limit-min)), 6.75rem, calc(120px * var(--seed-font-size-limit-max)));
2992
2946
  min-height: var(--seed-dimension-x6);
2993
2947
  padding-inline: var(--seed-dimension-x2);
2994
2948
  padding-block: var(--seed-dimension-x1);
2995
2949
  border-radius: var(--seed-radius-r1_5);
2950
+ gap: var(--seed-dimension-x0_5);
2996
2951
  font-size: var(--seed-font-size-t2);
2997
2952
  line-height: var(--seed-line-height-t2);
2998
2953
  }
2999
2954
 
2955
+ .seed-badge__prefix--size_large, .seed-badge__action--size_large {
2956
+ width: var(--seed-dimension-x3_5);
2957
+ height: var(--seed-dimension-x3_5);
2958
+ }
2959
+
3000
2960
  .seed-badge__root--variant_weak {
3001
2961
  font-weight: var(--seed-font-weight-medium);
3002
2962
  }
@@ -3012,7 +2972,7 @@
3012
2972
 
3013
2973
  .seed-badge__root--tone_neutral-variant_solid {
3014
2974
  background-color: var(--seed-color-palette-gray-800);
3015
- color: var(--seed-color-fg-neutral-inverted);
2975
+ color: var(--seed-color-fg-on-neutral-solid);
3016
2976
  }
3017
2977
 
3018
2978
  .seed-badge__root--tone_neutral-variant_outline {
@@ -3027,7 +2987,7 @@
3027
2987
 
3028
2988
  .seed-badge__root--tone_brand-variant_solid {
3029
2989
  background-color: var(--seed-color-bg-brand-solid);
3030
- color: var(--seed-color-palette-static-white);
2990
+ color: var(--seed-color-fg-on-brand-solid);
3031
2991
  }
3032
2992
 
3033
2993
  .seed-badge__root--tone_brand-variant_outline {
@@ -3042,7 +3002,7 @@
3042
3002
 
3043
3003
  .seed-badge__root--tone_informative-variant_solid {
3044
3004
  background-color: var(--seed-color-bg-informative-solid);
3045
- color: var(--seed-color-palette-static-white);
3005
+ color: var(--seed-color-fg-on-informative-solid);
3046
3006
  }
3047
3007
 
3048
3008
  .seed-badge__root--tone_informative-variant_outline {
@@ -3057,7 +3017,7 @@
3057
3017
 
3058
3018
  .seed-badge__root--tone_positive-variant_solid {
3059
3019
  background-color: var(--seed-color-bg-positive-solid);
3060
- color: var(--seed-color-palette-static-white);
3020
+ color: var(--seed-color-fg-on-positive-solid);
3061
3021
  }
3062
3022
 
3063
3023
  .seed-badge__root--tone_positive-variant_outline {
@@ -3072,7 +3032,7 @@
3072
3032
 
3073
3033
  .seed-badge__root--tone_warning-variant_solid {
3074
3034
  background-color: var(--seed-color-bg-warning-solid);
3075
- color: var(--seed-color-palette-static-black-alpha-900);
3035
+ color: var(--seed-color-fg-on-warning-solid);
3076
3036
  }
3077
3037
 
3078
3038
  .seed-badge__root--tone_warning-variant_outline {
@@ -3087,7 +3047,7 @@
3087
3047
 
3088
3048
  .seed-badge__root--tone_critical-variant_solid {
3089
3049
  background-color: var(--seed-color-bg-critical-solid);
3090
- color: var(--seed-color-palette-static-white);
3050
+ color: var(--seed-color-fg-on-critical-solid);
3091
3051
  }
3092
3052
 
3093
3053
  .seed-badge__root--tone_critical-variant_outline {
@@ -3835,23 +3795,23 @@
3835
3795
  }
3836
3796
 
3837
3797
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3838
- background: var(--seed-color-bg-neutral-inverted);
3798
+ background: var(--seed-color-bg-neutral-solid);
3839
3799
  }
3840
3800
 
3841
3801
  @media (hover: hover) and (pointer: fine) {
3842
3802
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:hover, [data-hover]) {
3843
- background: var(--seed-color-bg-neutral-inverted-pressed);
3803
+ background: var(--seed-color-bg-neutral-solid-pressed);
3844
3804
  }
3845
3805
  }
3846
3806
 
3847
3807
  @media not all and (hover: hover) and (pointer: fine) {
3848
3808
  .seed-checkmark__root--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]):is(:active, [data-active]) {
3849
- background: var(--seed-color-bg-neutral-inverted-pressed);
3809
+ background: var(--seed-color-bg-neutral-solid-pressed);
3850
3810
  }
3851
3811
  }
3852
3812
 
3853
3813
  .seed-checkmark__icon--variant_square-tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3854
- color: var(--seed-color-fg-neutral-inverted);
3814
+ color: var(--seed-color-fg-on-neutral-solid);
3855
3815
  }
3856
3816
 
3857
3817
  .seed-checkmark__root--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
@@ -3871,7 +3831,7 @@
3871
3831
  }
3872
3832
 
3873
3833
  .seed-checkmark__icon--variant_square-tone_brand:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, :indeterminate, [data-checked], [data-indeterminate]) {
3874
- color: var(--seed-color-palette-static-white);
3834
+ color: var(--seed-color-fg-on-brand-solid);
3875
3835
  }
3876
3836
 
3877
3837
  @media (hover: hover) and (pointer: fine) {
@@ -3999,8 +3959,8 @@
3999
3959
 
4000
3960
  .seed-chip__root--variant_solid:is(:checked, [data-checked]) {
4001
3961
  box-shadow: none;
4002
- background: var(--seed-color-bg-neutral-inverted);
4003
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
3962
+ background: var(--seed-color-bg-neutral-solid);
3963
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
4004
3964
  }
4005
3965
 
4006
3966
  @media (hover: hover) and (pointer: fine) {
@@ -4017,13 +3977,13 @@
4017
3977
 
4018
3978
  @media (hover: hover) and (pointer: fine) {
4019
3979
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
4020
- background: var(--seed-color-bg-neutral-inverted-pressed);
3980
+ background: var(--seed-color-bg-neutral-solid-pressed);
4021
3981
  }
4022
3982
  }
4023
3983
 
4024
3984
  @media not all and (hover: hover) and (pointer: fine) {
4025
3985
  .seed-chip__root--variant_solid:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
4026
- background: var(--seed-color-bg-neutral-inverted-pressed);
3986
+ background: var(--seed-color-bg-neutral-solid-pressed);
4027
3987
  }
4028
3988
  }
4029
3989
 
@@ -4036,7 +3996,7 @@
4036
3996
  }
4037
3997
 
4038
3998
  .seed-chip__label--variant_solid:is(:checked, [data-checked]) {
4039
- color: var(--seed-color-fg-neutral-inverted);
3999
+ color: var(--seed-color-fg-on-neutral-solid);
4040
4000
  }
4041
4001
 
4042
4002
  .seed-chip__prefixIcon--variant_solid, .seed-chip__suffixIcon--variant_solid {
@@ -4062,19 +4022,19 @@
4062
4022
  }
4063
4023
 
4064
4024
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]) {
4065
- background: var(--seed-color-bg-neutral-inverted);
4066
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
4025
+ background: var(--seed-color-bg-neutral-solid);
4026
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
4067
4027
  }
4068
4028
 
4069
4029
  @media (hover: hover) and (pointer: fine) {
4070
4030
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])) {
4071
- background: var(--seed-color-bg-neutral-inverted-pressed);
4031
+ background: var(--seed-color-bg-neutral-solid-pressed);
4072
4032
  }
4073
4033
  }
4074
4034
 
4075
4035
  @media not all and (hover: hover) and (pointer: fine) {
4076
4036
  .seed-chip__root--variant_outlineStrong:is(:checked, [data-checked]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])) {
4077
- background: var(--seed-color-bg-neutral-inverted-pressed);
4037
+ background: var(--seed-color-bg-neutral-solid-pressed);
4078
4038
  }
4079
4039
  }
4080
4040
 
@@ -4087,7 +4047,7 @@
4087
4047
  }
4088
4048
 
4089
4049
  .seed-chip__label--variant_outlineStrong:is(:checked, [data-checked]) {
4090
- color: var(--seed-color-fg-neutral-inverted);
4050
+ color: var(--seed-color-fg-on-neutral-solid);
4091
4051
  }
4092
4052
 
4093
4053
  .seed-chip__prefixIcon--variant_outlineStrong, .seed-chip__suffixIcon--variant_outlineStrong {
@@ -4312,8 +4272,8 @@
4312
4272
  }
4313
4273
 
4314
4274
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]) {
4315
- background-color: var(--seed-color-bg-neutral-inverted);
4316
- color: var(--seed-color-fg-neutral-inverted);
4275
+ background-color: var(--seed-color-bg-neutral-solid);
4276
+ color: var(--seed-color-fg-on-neutral-solid);
4317
4277
  }
4318
4278
 
4319
4279
  @media (hover: hover) and (pointer: fine) {
@@ -4330,13 +4290,13 @@
4330
4290
 
4331
4291
  @media (hover: hover) and (pointer: fine) {
4332
4292
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4333
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4293
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4334
4294
  }
4335
4295
  }
4336
4296
 
4337
4297
  @media not all and (hover: hover) and (pointer: fine) {
4338
4298
  .seed-chip-tabs__trigger--variant_neutralSolid:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4339
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4299
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4340
4300
  }
4341
4301
  }
4342
4302
 
@@ -4352,8 +4312,8 @@
4352
4312
  }
4353
4313
 
4354
4314
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]) {
4355
- background-color: var(--seed-color-bg-neutral-inverted);
4356
- color: var(--seed-color-fg-neutral-inverted);
4315
+ background-color: var(--seed-color-bg-neutral-solid);
4316
+ color: var(--seed-color-fg-on-neutral-solid);
4357
4317
  border-color: #0000;
4358
4318
  }
4359
4319
 
@@ -4371,13 +4331,13 @@
4371
4331
 
4372
4332
  @media (hover: hover) and (pointer: fine) {
4373
4333
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]) {
4374
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4334
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4375
4335
  }
4376
4336
  }
4377
4337
 
4378
4338
  @media not all and (hover: hover) and (pointer: fine) {
4379
4339
  .seed-chip-tabs__trigger--variant_neutralOutline:is([aria-selected="true"], [data-selected]):is(:active, [data-active]) {
4380
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
4340
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
4381
4341
  }
4382
4342
  }
4383
4343
 
@@ -4415,370 +4375,127 @@
4415
4375
  top: 0;
4416
4376
  }
4417
4377
 
4418
- .seed-content-dialog__positioner {
4419
- overscroll-behavior-y: none;
4420
- --dialog-z-index: 2;
4421
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4378
+ .seed-content-placeholder__root {
4379
+ box-sizing: border-box;
4380
+ vertical-align: top;
4381
+ background-color: var(--seed-color-palette-gray-200);
4422
4382
  justify-content: center;
4423
4383
  align-items: center;
4424
- display: flex;
4425
- position: fixed;
4426
- inset: 0;
4427
- }
4428
-
4429
- .seed-content-dialog__backdrop {
4430
- background: var(--seed-color-bg-overlay);
4431
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4432
- position: fixed;
4433
- inset: 0;
4434
- }
4435
-
4436
- .seed-content-dialog__backdrop:is([data-state="open"], [data-open]) {
4437
- animation: seed-enter;
4438
- animation-timing-function: var(--seed-timing-function-enter);
4439
- animation-duration: var(--seed-duration-d2);
4440
- --seed-enter-translate-x: 0;
4441
- --seed-enter-translate-y: 0;
4442
- --seed-enter-opacity: 0;
4443
- --seed-enter-scale: 1;
4384
+ width: 100%;
4385
+ height: 100%;
4386
+ display: inline-flex;
4387
+ position: relative;
4388
+ overflow: hidden;
4444
4389
  }
4445
4390
 
4446
- .seed-content-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
4447
- animation: seed-exit;
4448
- animation-timing-function: var(--seed-timing-function-exit);
4449
- animation-duration: var(--seed-duration-d2);
4450
- --seed-exit-translate-x: 0;
4451
- --seed-exit-translate-y: 0;
4452
- --seed-exit-opacity: 0;
4453
- --seed-exit-scale: 1;
4454
- animation-fill-mode: forwards;
4391
+ .seed-content-placeholder__asset {
4392
+ height: 50%;
4393
+ min-width: var(--seed-dimension-x4);
4394
+ aspect-ratio: 1;
4395
+ width: auto;
4396
+ max-width: 160px;
4397
+ color: var(--seed-color-palette-gray-400);
4398
+ fill: currentColor;
4399
+ stroke: currentColor;
4400
+ object-fit: contain;
4401
+ display: block;
4455
4402
  }
4456
4403
 
4457
- .seed-content-dialog__content {
4404
+ .seed-contextual-floating-button {
4458
4405
  box-sizing: border-box;
4459
- word-break: break-all;
4460
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
4461
- background: var(--seed-color-bg-layer-floating);
4462
- border-radius: var(--seed-radius-r5);
4463
- --content-dialog-default-width: calc(.9 * 100vw);
4464
- --content-dialog-default-max-width: calc(.9 * 100%);
4465
- --seed-box-width-base: var(--content-dialog-default-width);
4466
- --seed-box-width-sm: var(--seed-box-width-base, initial);
4467
- --seed-box-width-md: var(--seed-box-width-sm, initial);
4468
- --seed-box-width-lg: var(--seed-box-width-md, initial);
4469
- --seed-box-width-xl: var(--seed-box-width-lg, initial);
4470
- --seed-box-width: var(--seed-box-width-base, initial);
4471
- --seed-box-max-width-base: var(--content-dialog-default-max-width);
4472
- --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
4473
- --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
4474
- --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
4475
- --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
4476
- --seed-box-max-width: var(--seed-box-max-width-base, initial);
4477
- width: var(--seed-box-width);
4478
- max-width: var(--seed-box-max-width);
4479
- max-height: 80vh;
4480
- outline: none;
4481
- flex-direction: column;
4482
- flex: none;
4483
- max-height: 80dvh;
4484
- display: flex;
4485
- position: relative;
4406
+ cursor: pointer;
4407
+ text-transform: none;
4408
+ -webkit-font-smoothing: antialiased;
4409
+ -moz-osx-font-smoothing: grayscale;
4410
+ outline: var(--seed-dimension-x0_5) solid transparent;
4411
+ outline-offset: var(--seed-dimension-x0_5);
4412
+ border: none;
4413
+ justify-content: center;
4414
+ align-items: center;
4415
+ font-family: inherit;
4416
+ text-decoration: none;
4417
+ display: inline-flex;
4486
4418
  }
4487
4419
 
4488
- @media (min-width: 768px) {
4489
- .seed-content-dialog__content {
4490
- --content-dialog-default-width: var(--content-dialog-size-width);
4491
- --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
4492
- }
4420
+ .seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
4421
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4422
+ outline-offset: var(--seed-dimension-x0_5);
4493
4423
  }
4494
4424
 
4495
- .seed-content-dialog__content:is([data-state="open"], [data-open]) {
4496
- animation: seed-enter;
4497
- animation-timing-function: var(--seed-timing-function-enter-expressive);
4498
- animation-duration: var(--seed-duration-d4);
4499
- --seed-enter-translate-x: 0;
4500
- --seed-enter-translate-y: 0;
4501
- --seed-enter-opacity: 0;
4502
- --seed-enter-scale: 1.3;
4425
+ .seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
4426
+ cursor: not-allowed;
4503
4427
  }
4504
4428
 
4505
- .seed-content-dialog__content:not(:is([data-state="open"], [data-open])) {
4506
- animation: seed-exit;
4507
- animation-timing-function: var(--seed-timing-function-exit);
4508
- animation-duration: var(--seed-duration-d2);
4509
- --seed-exit-translate-x: 0;
4510
- --seed-exit-translate-y: 0;
4511
- --seed-exit-opacity: 0;
4512
- --seed-exit-scale: 1;
4513
- animation-fill-mode: forwards;
4429
+ .seed-contextual-floating-button {
4430
+ border-radius: var(--seed-radius-full);
4431
+ box-shadow: var(--seed-shadow-s3);
4432
+ font-size: var(--seed-font-size-t4);
4433
+ line-height: var(--seed-line-height-t4);
4434
+ font-weight: var(--seed-font-weight-medium);
4435
+ --seed-box-z-index: initial;
4436
+ z-index: var(--seed-box-z-index);
4437
+ --seed-box-position: initial;
4438
+ position: var(--seed-box-position);
4439
+ --seed-box-top: initial;
4440
+ --seed-box-right: initial;
4441
+ --seed-box-bottom: initial;
4442
+ --seed-box-left: initial;
4443
+ top: var(--seed-box-top);
4444
+ right: var(--seed-box-right);
4445
+ bottom: var(--seed-box-bottom);
4446
+ left: var(--seed-box-left);
4447
+ --seed-icon-size: 22px;
4448
+ --size: 16px;
4449
+ --thickness: 2px;
4514
4450
  }
4515
4451
 
4516
- .seed-content-dialog__header {
4517
- gap: var(--seed-dimension-x1_5);
4518
- padding-inline: var(--seed-dimension-x6);
4519
- padding-top: var(--seed-dimension-x6);
4520
- padding-bottom: var(--seed-dimension-x4);
4521
- flex-direction: column;
4522
- flex-shrink: 0;
4523
- display: flex;
4452
+ .seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4453
+ scale: var(--seed-feedback-scale);
4524
4454
  }
4525
4455
 
4526
- .seed-content-dialog__header[data-show-close-button] {
4527
- padding-right: calc(var(--seed-dimension-x6) + 22px + var(--seed-dimension-x1_5));
4456
+ .seed-contextual-floating-button {
4457
+ transition: background-color 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);
4528
4458
  }
4529
4459
 
4530
- .seed-content-dialog__body {
4531
- box-sizing: border-box;
4532
- --seed-box-padding-x-base: var(--seed-dimension-x6);
4533
- --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
4534
- --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
4535
- --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
4536
- --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
4537
- --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
4538
- --seed-box-min-height-base: 0;
4539
- --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
4540
- --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
4541
- --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
4542
- --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
4543
- --seed-box-min-height: var(--seed-box-min-height-base, initial);
4544
- --seed-box-max-height-base: none;
4545
- --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
4546
- --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
4547
- --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
4548
- --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
4549
- --seed-box-max-height: var(--seed-box-max-height-base, initial);
4550
- --seed-box-justify-content: initial;
4551
- --seed-box-align-items: initial;
4552
- padding-inline: var(--seed-box-padding-x);
4553
- min-height: var(--seed-box-min-height);
4554
- max-height: var(--seed-box-max-height);
4555
- justify-content: var(--seed-box-justify-content);
4556
- align-items: var(--seed-box-align-items);
4557
- transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
4558
- flex-direction: column;
4559
- flex: 1;
4560
- display: flex;
4561
- overflow-y: auto;
4460
+ .seed-contextual-floating-button--variant_solid {
4461
+ background: var(--seed-color-bg-neutral-solid);
4462
+ color: var(--seed-color-fg-on-neutral-solid);
4463
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
4464
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
4465
+ --track-color: var(--seed-color-palette-gray-700);
4466
+ --range-color: var(--seed-color-fg-on-neutral-solid);
4562
4467
  }
4563
4468
 
4564
- .seed-content-dialog__body[data-scrolled]:not(:first-child) {
4565
- box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
4469
+ @media (hover: hover) and (pointer: fine) {
4470
+ .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
4471
+ background: var(--seed-color-bg-neutral-solid-pressed);
4472
+ }
4566
4473
  }
4567
4474
 
4568
- .seed-content-dialog__body[data-overflow] {
4569
- padding-bottom: var(--seed-dimension-x12);
4570
- -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4571
- mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4572
- -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
4475
+ @media not all and (hover: hover) and (pointer: fine) {
4476
+ .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
4477
+ background: var(--seed-color-bg-neutral-solid-pressed);
4478
+ }
4573
4479
  }
4574
4480
 
4575
- .seed-content-dialog__body {
4576
- outline: var(--seed-dimension-x0_5) solid transparent;
4577
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4481
+ .seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
4482
+ background: var(--seed-color-bg-disabled);
4483
+ color: var(--seed-color-fg-disabled);
4484
+ --seed-prefix-icon-color: var(--seed-color-fg-disabled);
4485
+ --seed-icon-color: var(--seed-color-fg-disabled);
4578
4486
  }
4579
4487
 
4580
- .seed-content-dialog__body:is(:focus-visible, [data-focus-visible]) {
4581
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4582
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
4488
+ .seed-contextual-floating-button--variant_solid[data-loading] {
4489
+ background: var(--seed-color-bg-neutral-solid-pressed);
4583
4490
  }
4584
4491
 
4585
- .seed-content-dialog__title {
4492
+ .seed-contextual-floating-button--variant_layer {
4493
+ background: var(--seed-color-bg-layer-floating);
4586
4494
  color: var(--seed-color-fg-neutral);
4587
- font-size: var(--seed-font-size-t8);
4588
- line-height: var(--seed-line-height-t8);
4589
- font-weight: var(--seed-font-weight-bold);
4590
- margin: 0;
4591
- }
4592
-
4593
- .seed-content-dialog__description {
4594
- color: var(--seed-color-fg-neutral-muted);
4595
- font-size: var(--seed-font-size-t5);
4596
- line-height: var(--seed-line-height-t5);
4597
- font-weight: var(--seed-font-weight-regular);
4598
- white-space: pre-wrap;
4599
- margin: 0;
4600
- }
4601
-
4602
- .seed-content-dialog__footer {
4603
- padding-inline: var(--seed-dimension-x6);
4604
- padding-top: var(--seed-dimension-x4);
4605
- padding-bottom: var(--seed-dimension-x6);
4606
- flex-direction: column;
4607
- flex-shrink: 0;
4608
- align-items: stretch;
4609
- display: flex;
4610
- }
4611
-
4612
- .seed-content-dialog__closeButton {
4613
- top: var(--seed-dimension-x7);
4614
- right: var(--seed-dimension-x6);
4615
- background: var(--seed-color-bg-transparent);
4616
- border-radius: var(--seed-radius-r3);
4617
- cursor: pointer;
4618
- 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);
4619
- --seed-icon-size: 22px;
4620
- --seed-icon-color: var(--seed-color-fg-neutral-subtle);
4621
- outline: var(--seed-dimension-x0_5) solid transparent;
4622
- outline-offset: var(--seed-dimension-x0_5);
4623
- border: none;
4624
- justify-content: center;
4625
- align-items: center;
4626
- margin: -15px;
4627
- padding: 15px;
4628
- display: flex;
4629
- position: absolute;
4630
- }
4631
-
4632
- .seed-content-dialog__closeButton:is(:focus-visible, [data-focus-visible]) {
4633
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4634
- outline-offset: var(--seed-dimension-x0_5);
4635
- }
4636
-
4637
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
4638
- scale: var(--seed-feedback-scale);
4639
- }
4640
-
4641
- @media (hover: hover) and (pointer: fine) {
4642
- .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
4643
- background: var(--seed-color-bg-transparent-pressed);
4644
- }
4645
- }
4646
-
4647
- @media not all and (hover: hover) and (pointer: fine) {
4648
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
4649
- background: var(--seed-color-bg-transparent-pressed);
4650
- }
4651
- }
4652
-
4653
- .seed-content-dialog__content--size_medium {
4654
- --content-dialog-size-width: 480px;
4655
- }
4656
-
4657
- .seed-content-dialog__content--size_large {
4658
- --content-dialog-size-width: 800px;
4659
- }
4660
-
4661
- .seed-content-placeholder__root {
4662
- box-sizing: border-box;
4663
- vertical-align: top;
4664
- background-color: var(--seed-color-palette-gray-200);
4665
- justify-content: center;
4666
- align-items: center;
4667
- width: 100%;
4668
- height: 100%;
4669
- display: inline-flex;
4670
- position: relative;
4671
- overflow: hidden;
4672
- }
4673
-
4674
- .seed-content-placeholder__asset {
4675
- height: 50%;
4676
- min-width: var(--seed-dimension-x4);
4677
- aspect-ratio: 1;
4678
- width: auto;
4679
- max-width: 160px;
4680
- color: var(--seed-color-palette-gray-400);
4681
- fill: currentColor;
4682
- stroke: currentColor;
4683
- object-fit: contain;
4684
- display: block;
4685
- }
4686
-
4687
- .seed-contextual-floating-button {
4688
- box-sizing: border-box;
4689
- cursor: pointer;
4690
- text-transform: none;
4691
- -webkit-font-smoothing: antialiased;
4692
- -moz-osx-font-smoothing: grayscale;
4693
- outline: var(--seed-dimension-x0_5) solid transparent;
4694
- outline-offset: var(--seed-dimension-x0_5);
4695
- border: none;
4696
- justify-content: center;
4697
- align-items: center;
4698
- font-family: inherit;
4699
- text-decoration: none;
4700
- display: inline-flex;
4701
- }
4702
-
4703
- .seed-contextual-floating-button:is(:focus-visible, [data-focus-visible]) {
4704
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
4705
- outline-offset: var(--seed-dimension-x0_5);
4706
- }
4707
-
4708
- .seed-contextual-floating-button:is(:disabled, [disabled], [data-disabled]) {
4709
- cursor: not-allowed;
4710
- }
4711
-
4712
- .seed-contextual-floating-button {
4713
- border-radius: var(--seed-radius-full);
4714
- box-shadow: var(--seed-shadow-s3);
4715
- font-size: var(--seed-font-size-t4);
4716
- line-height: var(--seed-line-height-t4);
4717
- font-weight: var(--seed-font-weight-medium);
4718
- --seed-box-z-index: initial;
4719
- z-index: var(--seed-box-z-index);
4720
- --seed-box-position: initial;
4721
- position: var(--seed-box-position);
4722
- --seed-box-top: initial;
4723
- --seed-box-right: initial;
4724
- --seed-box-bottom: initial;
4725
- --seed-box-left: initial;
4726
- top: var(--seed-box-top);
4727
- right: var(--seed-box-right);
4728
- bottom: var(--seed-box-bottom);
4729
- left: var(--seed-box-left);
4730
- --seed-icon-size: 22px;
4731
- --size: 16px;
4732
- --thickness: 2px;
4733
- }
4734
-
4735
- .seed-contextual-floating-button:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
4736
- scale: var(--seed-feedback-scale);
4737
- }
4738
-
4739
- .seed-contextual-floating-button {
4740
- transition: background-color 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);
4741
- }
4742
-
4743
- .seed-contextual-floating-button--variant_solid {
4744
- background: var(--seed-color-bg-neutral-inverted);
4745
- color: var(--seed-color-fg-neutral-inverted);
4746
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
4747
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
4748
- --track-color: var(--seed-color-palette-gray-700);
4749
- --range-color: var(--seed-color-fg-neutral-inverted);
4750
- }
4751
-
4752
- @media (hover: hover) and (pointer: fine) {
4753
- .seed-contextual-floating-button--variant_solid:is(:hover, [data-hover]) {
4754
- background: var(--seed-color-bg-neutral-inverted-pressed);
4755
- }
4756
- }
4757
-
4758
- @media not all and (hover: hover) and (pointer: fine) {
4759
- .seed-contextual-floating-button--variant_solid:is(:active, [data-active]) {
4760
- background: var(--seed-color-bg-neutral-inverted-pressed);
4761
- }
4762
- }
4763
-
4764
- .seed-contextual-floating-button--variant_solid:is(:disabled, [disabled], [data-disabled]) {
4765
- background: var(--seed-color-bg-disabled);
4766
- color: var(--seed-color-fg-disabled);
4767
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
4768
- --seed-icon-color: var(--seed-color-fg-disabled);
4769
- }
4770
-
4771
- .seed-contextual-floating-button--variant_solid[data-loading] {
4772
- background: var(--seed-color-bg-neutral-inverted-pressed);
4773
- }
4774
-
4775
- .seed-contextual-floating-button--variant_layer {
4776
- background: var(--seed-color-bg-layer-floating);
4777
- color: var(--seed-color-fg-neutral);
4778
- --seed-icon-color: var(--seed-color-fg-neutral);
4779
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
4780
- --track-color: var(--seed-color-palette-gray-500);
4781
- --range-color: var(--seed-color-fg-neutral);
4495
+ --seed-icon-color: var(--seed-color-fg-neutral);
4496
+ --seed-prefix-icon-color: var(--seed-color-fg-neutral);
4497
+ --track-color: var(--seed-color-palette-gray-500);
4498
+ --range-color: var(--seed-color-fg-neutral);
4782
4499
  }
4783
4500
 
4784
4501
  @media (hover: hover) and (pointer: fine) {
@@ -4818,104 +4535,6 @@
4818
4535
  height: 44px;
4819
4536
  }
4820
4537
 
4821
- .seed-control-chip {
4822
- box-sizing: border-box;
4823
- cursor: pointer;
4824
- text-transform: none;
4825
- text-align: start;
4826
- white-space: nowrap;
4827
- -webkit-font-smoothing: antialiased;
4828
- -moz-osx-font-smoothing: grayscale;
4829
- border-radius: var(--seed-radius-full);
4830
- box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-muted);
4831
- color: var(--seed-color-fg-neutral);
4832
- line-height: 1;
4833
- font-weight: var(--seed-font-weight-medium);
4834
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
4835
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
4836
- --seed-icon-color: var(--seed-color-fg-neutral);
4837
- --seed-count-font-weight: var(--seed-font-weight-medium);
4838
- --seed-count-color: var(--seed-color-fg-neutral-muted);
4839
- border: none;
4840
- flex-shrink: 0;
4841
- justify-content: center;
4842
- align-items: center;
4843
- display: inline-flex;
4844
- position: relative;
4845
- }
4846
-
4847
- .seed-control-chip:is(:focus, [data-focus]) {
4848
- outline: none;
4849
- }
4850
-
4851
- .seed-control-chip:is(:active, [data-active]) {
4852
- background: var(--seed-color-bg-layer-default-pressed);
4853
- }
4854
-
4855
- .seed-control-chip:is(:checked, [data-checked]) {
4856
- box-shadow: none;
4857
- background: var(--seed-color-bg-neutral-solid-muted);
4858
- color: var(--seed-color-palette-static-white);
4859
- font-weight: var(--seed-font-weight-bold);
4860
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
4861
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
4862
- --seed-icon-color: var(--seed-color-palette-static-white);
4863
- --seed-count-color: var(--seed-color-palette-static-white-alpha-800);
4864
- }
4865
-
4866
- .seed-control-chip:is(:checked, [data-checked]):is(:active, [data-active]) {
4867
- background: var(--seed-color-bg-neutral-solid-muted-pressed);
4868
- }
4869
-
4870
- .seed-control-chip:is(:disabled, [disabled], [data-disabled]) {
4871
- cursor: not-allowed;
4872
- background: var(--seed-color-bg-disabled);
4873
- color: var(--seed-color-fg-disabled);
4874
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
4875
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
4876
- --seed-icon-color: var(--seed-color-fg-disabled);
4877
- }
4878
-
4879
- .seed-control-chip--size_medium {
4880
- min-height: var(--seed-dimension-x9);
4881
- padding-block: var(--seed-dimension-x2);
4882
- gap: var(--seed-dimension-x1);
4883
- font-size: var(--seed-font-size-t4);
4884
- line-height: var(--seed-line-height-t4);
4885
- --seed-prefix-icon-size: var(--seed-dimension-x4);
4886
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
4887
- --seed-icon-size: var(--seed-dimension-x4);
4888
- --seed-count-font-size: var(--seed-font-size-t4);
4889
- }
4890
-
4891
- .seed-control-chip--size_small {
4892
- min-height: var(--seed-dimension-x8);
4893
- padding-block: var(--seed-dimension-x1_5);
4894
- gap: var(--seed-dimension-x1);
4895
- font-size: var(--seed-font-size-t4);
4896
- line-height: var(--seed-line-height-t4);
4897
- --seed-prefix-icon-size: var(--seed-dimension-x4);
4898
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
4899
- --seed-icon-size: var(--seed-dimension-x4);
4900
- --seed-count-font-size: var(--seed-font-size-t4);
4901
- }
4902
-
4903
- .seed-control-chip--size_medium-layout_withText {
4904
- padding-inline: var(--seed-dimension-x3_5);
4905
- }
4906
-
4907
- .seed-control-chip--size_medium-layout_iconOnly {
4908
- min-width: var(--seed-dimension-x9);
4909
- }
4910
-
4911
- .seed-control-chip--size_small-layout_withText {
4912
- padding-inline: var(--seed-dimension-x3);
4913
- }
4914
-
4915
- .seed-control-chip--size_small-layout_iconOnly {
4916
- min-width: var(--seed-dimension-x8);
4917
- }
4918
-
4919
4538
  .seed-date-picker__root {
4920
4539
  box-sizing: border-box;
4921
4540
  --seed-box-height-base: auto;
@@ -5001,6 +4620,10 @@
5001
4620
  display: inline-flex;
5002
4621
  }
5003
4622
 
4623
+ .seed-date-picker__headerChevron[data-expanded] {
4624
+ transform: rotate(180deg);
4625
+ }
4626
+
5004
4627
  .seed-date-picker__navigation {
5005
4628
  flex-shrink: 0;
5006
4629
  align-items: center;
@@ -5189,11 +4812,11 @@
5189
4812
  }
5190
4813
 
5191
4814
  .seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]):before {
5192
- background-color: var(--seed-color-bg-neutral-inverted);
4815
+ background-color: var(--seed-color-bg-neutral-solid);
5193
4816
  }
5194
4817
 
5195
4818
  .seed-date-picker__dateButton:is([aria-selected="true"], [data-selected]) {
5196
- color: var(--seed-color-fg-neutral-inverted);
4819
+ color: var(--seed-color-fg-on-neutral-solid);
5197
4820
  }
5198
4821
 
5199
4822
  @media (hover: hover) and (pointer: fine) {
@@ -5210,13 +4833,13 @@
5210
4833
 
5211
4834
  @media (hover: hover) and (pointer: fine) {
5212
4835
  .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 {
5213
- background-color: var(--seed-color-bg-neutral-inverted);
4836
+ background-color: var(--seed-color-bg-neutral-solid);
5214
4837
  }
5215
4838
  }
5216
4839
 
5217
4840
  @media not all and (hover: hover) and (pointer: fine) {
5218
4841
  .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 {
5219
- background-color: var(--seed-color-bg-neutral-inverted);
4842
+ background-color: var(--seed-color-bg-neutral-solid);
5220
4843
  }
5221
4844
  }
5222
4845
 
@@ -5341,33 +4964,44 @@
5341
4964
  overflow: hidden;
5342
4965
  }
5343
4966
 
5344
- .seed-date-picker__wheelView {
5345
- --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
5346
- width: 100%;
4967
+ .seed-date-picker__wheelPositioner {
4968
+ z-index: 3;
4969
+ outline: none;
5347
4970
  }
5348
4971
 
5349
- .seed-date-picker__wheelSelectionIndicator {
5350
- border-radius: var(--seed-radius-r2);
5351
- background-color: var(--seed-color-bg-neutral-weak);
5352
- }
4972
+ .seed-date-picker__wheelPopover {
4973
+ border-radius: var(--seed-radius-r3);
4974
+ background-color: var(--seed-color-bg-layer-floating);
4975
+ width: 240px;
4976
+ box-shadow: var(--seed-shadow-s3);
4977
+ overflow: hidden;
4978
+ }
4979
+
4980
+ .seed-date-picker__wheelPopover:is(:focus, [data-focus]) {
4981
+ outline: none;
4982
+ }
4983
+
4984
+ .seed-date-picker__wheelView {
4985
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
4986
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
4987
+ --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
4988
+ width: 100%;
4989
+ }
4990
+
4991
+ .seed-date-picker__wheelView [data-wheel-picker-indicator] {
4992
+ background-color: var(--seed-color-bg-neutral-weak);
4993
+ }
5353
4994
 
5354
4995
  .seed-date-picker__yearColumn {
5355
4996
  --seed-wheel-picker-item-justify-content: flex-end;
5356
4997
  flex: 0 0 120px;
4998
+ min-width: 120px;
5357
4999
  }
5358
5000
 
5359
5001
  .seed-date-picker__monthColumn {
5360
5002
  --seed-wheel-picker-item-justify-content: flex-start;
5361
5003
  flex: 0 0 96px;
5362
- }
5363
-
5364
- .seed-date-picker__wheelItem {
5365
- --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
5366
- --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
5367
- padding-inline: var(--seed-dimension-x4);
5368
- font-size: var(--seed-font-size-t10-static);
5369
- line-height: var(--seed-line-height-t10-static);
5370
- font-weight: var(--seed-font-weight-medium);
5004
+ min-width: 96px;
5371
5005
  }
5372
5006
 
5373
5007
  .seed-date-picker__liveRegion {
@@ -5400,6 +5034,10 @@
5400
5034
  height: 24px;
5401
5035
  }
5402
5036
 
5037
+ .seed-date-picker__wheelView--visibleRange_week [data-wheel-picker-indicator] {
5038
+ inset-inline: 0;
5039
+ }
5040
+
5403
5041
  .seed-dialog__positioner {
5404
5042
  overscroll-behavior-y: none;
5405
5043
  --dialog-z-index: 2;
@@ -5418,60 +5056,7 @@
5418
5056
  inset: 0;
5419
5057
  }
5420
5058
 
5421
- .seed-dialog__content {
5422
- box-sizing: border-box;
5423
- word-break: break-all;
5424
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5425
- background: var(--seed-color-bg-layer-floating);
5426
- max-width: 272px;
5427
- margin: auto var(--seed-dimension-x8);
5428
- border-radius: var(--seed-radius-r5);
5429
- outline: none;
5430
- flex-direction: column;
5431
- flex: 1;
5432
- display: flex;
5433
- position: relative;
5434
- }
5435
-
5436
- .seed-dialog__content:is(:focus, [data-focus]) {
5437
- outline: none;
5438
- }
5439
-
5440
- .seed-dialog__header {
5441
- padding-inline: var(--seed-dimension-x5);
5442
- padding-top: var(--seed-dimension-x5);
5443
- gap: var(--seed-dimension-x1_5);
5444
- flex-direction: column;
5445
- display: flex;
5446
- }
5447
-
5448
- .seed-dialog__title {
5449
- color: var(--seed-color-fg-neutral);
5450
- font-size: var(--seed-font-size-t7);
5451
- line-height: var(--seed-line-height-t7);
5452
- font-weight: var(--seed-font-weight-bold);
5453
- margin: 0;
5454
- }
5455
-
5456
- .seed-dialog__description {
5457
- color: var(--seed-color-fg-neutral);
5458
- font-size: var(--seed-font-size-t5);
5459
- line-height: var(--seed-line-height-t5);
5460
- font-weight: var(--seed-font-weight-regular);
5461
- white-space: pre-wrap;
5462
- margin: 0;
5463
- }
5464
-
5465
- .seed-dialog__footer {
5466
- padding-inline: var(--seed-dimension-x5);
5467
- padding-top: var(--seed-dimension-x4);
5468
- padding-bottom: var(--seed-dimension-x5);
5469
- flex-direction: column;
5470
- align-items: stretch;
5471
- display: flex;
5472
- }
5473
-
5474
- .seed-dialog__backdrop--skipAnimation_false:is([data-state="open"], [data-open]) {
5059
+ .seed-dialog__backdrop:is([data-state="open"], [data-open]) {
5475
5060
  animation: seed-enter;
5476
5061
  animation-timing-function: var(--seed-timing-function-enter);
5477
5062
  animation-duration: var(--seed-duration-d2);
@@ -5481,7 +5066,7 @@
5481
5066
  --seed-enter-scale: 1;
5482
5067
  }
5483
5068
 
5484
- .seed-dialog__backdrop--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
5069
+ .seed-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
5485
5070
  animation: seed-exit;
5486
5071
  animation-timing-function: var(--seed-timing-function-exit);
5487
5072
  animation-duration: var(--seed-duration-d2);
@@ -5492,7 +5077,45 @@
5492
5077
  animation-fill-mode: forwards;
5493
5078
  }
5494
5079
 
5495
- .seed-dialog__content--skipAnimation_false:is([data-state="open"], [data-open]) {
5080
+ .seed-dialog__content {
5081
+ box-sizing: border-box;
5082
+ word-break: break-all;
5083
+ z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
5084
+ background: var(--seed-color-bg-layer-floating);
5085
+ border-radius: var(--seed-radius-r5);
5086
+ --dialog-default-width: calc(.9 * 100vw);
5087
+ --dialog-default-max-width: calc(.9 * 100%);
5088
+ --seed-box-width-base: var(--dialog-default-width);
5089
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
5090
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
5091
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
5092
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
5093
+ --seed-box-width: var(--seed-box-width-base, initial);
5094
+ --seed-box-max-width-base: var(--dialog-default-max-width);
5095
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
5096
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
5097
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
5098
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
5099
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
5100
+ width: var(--seed-box-width);
5101
+ max-width: var(--seed-box-max-width);
5102
+ max-height: 80vh;
5103
+ outline: none;
5104
+ flex-direction: column;
5105
+ flex: none;
5106
+ max-height: 80dvh;
5107
+ display: flex;
5108
+ position: relative;
5109
+ }
5110
+
5111
+ @media (min-width: 768px) {
5112
+ .seed-dialog__content {
5113
+ --dialog-default-width: var(--dialog-size-width);
5114
+ --dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
5115
+ }
5116
+ }
5117
+
5118
+ .seed-dialog__content:is([data-state="open"], [data-open]) {
5496
5119
  animation: seed-enter;
5497
5120
  animation-timing-function: var(--seed-timing-function-enter-expressive);
5498
5121
  animation-duration: var(--seed-duration-d4);
@@ -5502,7 +5125,7 @@
5502
5125
  --seed-enter-scale: 1.3;
5503
5126
  }
5504
5127
 
5505
- .seed-dialog__content--skipAnimation_false:not(:is([data-state="open"], [data-open])) {
5128
+ .seed-dialog__content:not(:is([data-state="open"], [data-open])) {
5506
5129
  animation: seed-exit;
5507
5130
  animation-timing-function: var(--seed-timing-function-exit);
5508
5131
  animation-duration: var(--seed-duration-d2);
@@ -5513,286 +5136,149 @@
5513
5136
  animation-fill-mode: forwards;
5514
5137
  }
5515
5138
 
5516
- .seed-extended-action-sheet__positioner {
5517
- overscroll-behavior-y: none;
5518
- --sheet-z-index: 2;
5519
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5520
- justify-content: center;
5521
- align-items: flex-end;
5522
- display: flex;
5523
- position: fixed;
5524
- inset: 0;
5525
- }
5526
-
5527
- .seed-extended-action-sheet__backdrop {
5528
- background: var(--seed-color-bg-overlay);
5529
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5530
- position: fixed;
5531
- inset: 0;
5532
- }
5533
-
5534
- .seed-extended-action-sheet__backdrop:not(:is([data-state="open"], [data-open])) {
5535
- animation: seed-exit;
5536
- animation-timing-function: var(--seed-timing-function-exit);
5537
- animation-duration: var(--seed-duration-d2);
5538
- --seed-exit-translate-x: 0;
5539
- --seed-exit-translate-y: 0;
5540
- --seed-exit-opacity: 0;
5541
- --seed-exit-scale: 1;
5542
- animation-fill-mode: forwards;
5543
- }
5544
-
5545
- .seed-extended-action-sheet__backdrop:is([data-state="open"], [data-open]) {
5546
- animation: seed-enter;
5547
- animation-timing-function: var(--seed-timing-function-enter);
5548
- animation-duration: var(--seed-duration-d2);
5549
- --seed-enter-translate-x: 0;
5550
- --seed-enter-translate-y: 0;
5551
- --seed-enter-opacity: 0;
5552
- --seed-enter-scale: 1;
5553
- }
5554
-
5555
- .seed-extended-action-sheet__content {
5556
- box-sizing: border-box;
5557
- word-break: break-all;
5558
- z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
5559
- background: var(--seed-color-bg-layer-floating);
5560
- padding-inline: var(--seed-dimension-spacing-x-global-gutter);
5561
- padding-block: var(--seed-dimension-x4);
5562
- border-top-left-radius: var(--seed-radius-r5);
5563
- border-top-right-radius: var(--seed-radius-r5);
5564
- flex-direction: column;
5565
- flex: 1;
5566
- display: flex;
5567
- position: relative;
5568
- }
5569
-
5570
- .seed-extended-action-sheet__content:not(:is([data-state="open"], [data-open])) {
5571
- animation: seed-exit;
5572
- animation-timing-function: var(--seed-timing-function-exit);
5573
- animation-duration: var(--seed-duration-d4);
5574
- --seed-exit-translate-x: 0;
5575
- --seed-exit-translate-y: 100%;
5576
- --seed-exit-opacity: 1;
5577
- --seed-exit-scale: 1;
5578
- animation-fill-mode: forwards;
5579
- }
5580
-
5581
- .seed-extended-action-sheet__content:is([data-state="open"], [data-open]) {
5582
- animation: seed-enter;
5583
- animation-timing-function: var(--seed-timing-function-enter-expressive);
5584
- animation-duration: var(--seed-duration-d6);
5585
- --seed-enter-translate-x: 0;
5586
- --seed-enter-translate-y: 100%;
5587
- --seed-enter-opacity: 1;
5588
- --seed-enter-scale: 1;
5589
- }
5590
-
5591
- .seed-extended-action-sheet__header {
5592
- align-items: center;
5593
- gap: var(--seed-dimension-x1);
5139
+ .seed-dialog__header {
5140
+ gap: var(--seed-dimension-x1_5);
5141
+ padding-inline: var(--seed-dimension-x6);
5142
+ padding-top: var(--seed-dimension-x6);
5594
5143
  padding-bottom: var(--seed-dimension-x4);
5595
5144
  flex-direction: column;
5145
+ flex-shrink: 0;
5596
5146
  display: flex;
5597
5147
  }
5598
5148
 
5599
- .seed-extended-action-sheet__title {
5600
- color: var(--seed-color-fg-neutral);
5601
- font-size: var(--seed-font-size-t6);
5602
- line-height: var(--seed-line-height-t6);
5603
- font-weight: var(--seed-font-weight-bold);
5604
- }
5605
-
5606
- .seed-extended-action-sheet__list {
5607
- align-items: stretch;
5608
- gap: var(--seed-dimension-x2_5);
5609
- flex-direction: column;
5610
- display: flex;
5611
- }
5612
-
5613
- .seed-extended-action-sheet__group {
5614
- border-radius: var(--seed-radius-r4);
5615
- flex-direction: column;
5616
- align-items: stretch;
5617
- display: flex;
5618
- overflow: hidden;
5619
- }
5620
-
5621
- .seed-extended-action-sheet__footer {
5622
- padding-top: var(--seed-dimension-x2_5);
5623
- flex-direction: column;
5624
- align-items: stretch;
5625
- display: flex;
5626
- }
5627
-
5628
- .seed-extended-action-sheet__closeButton {
5629
- background-color: var(--seed-color-bg-neutral-weak);
5630
- min-height: 52px;
5631
- padding-inline: var(--seed-dimension-x5);
5632
- padding-block: var(--seed-dimension-x3_5);
5633
- border-radius: var(--seed-radius-r3);
5634
- color: var(--seed-color-fg-neutral);
5635
- font-size: var(--seed-font-size-t5);
5636
- line-height: var(--seed-line-height-t5);
5637
- font-weight: var(--seed-font-weight-medium);
5638
- justify-content: center;
5639
- align-items: center;
5640
- display: flex;
5641
- }
5642
-
5643
- .seed-extended-action-sheet__closeButton:is(:active, [data-active]) {
5644
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5645
- }
5646
-
5647
- .seed-extended-action-sheet-item {
5648
- background-color: var(--seed-color-bg-neutral-weak);
5649
- min-height: 52px;
5650
- padding-inline: var(--seed-dimension-x4);
5651
- padding-block: var(--seed-dimension-x3_5);
5652
- justify-content: flex-start;
5653
- align-items: center;
5654
- gap: var(--seed-dimension-x3_5);
5655
- box-shadow: inset 0 calc(-1 * 1px) 0 var(--seed-color-stroke-neutral-muted);
5656
- font-size: var(--seed-font-size-t5);
5657
- line-height: var(--seed-line-height-t5);
5658
- font-weight: var(--seed-font-weight-regular);
5659
- display: flex;
5660
- }
5661
-
5662
- .seed-extended-action-sheet-item:is(:active, [data-active]) {
5663
- background-color: var(--seed-color-bg-neutral-weak-pressed);
5664
- }
5665
-
5666
- .seed-extended-action-sheet-item:last-child {
5667
- box-shadow: none;
5668
- }
5669
-
5670
- .seed-extended-action-sheet-item {
5671
- --seed-prefix-icon-size: 22px;
5672
- }
5673
-
5674
- .seed-extended-action-sheet-item--tone_neutral {
5675
- color: var(--seed-color-fg-neutral);
5676
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5677
- }
5678
-
5679
- .seed-extended-action-sheet-item--tone_critical {
5680
- color: var(--seed-color-fg-critical);
5681
- --seed-prefix-icon-color: var(--seed-color-fg-critical);
5149
+ .seed-dialog__header[data-show-close-button] {
5150
+ padding-right: calc(var(--seed-dimension-x6) + 22px + var(--seed-dimension-x1_5));
5682
5151
  }
5683
5152
 
5684
- .seed-extended-fab {
5153
+ .seed-dialog__body {
5685
5154
  box-sizing: border-box;
5686
- cursor: pointer;
5687
- text-transform: none;
5688
- white-space: nowrap;
5689
- vertical-align: middle;
5690
- -webkit-font-smoothing: antialiased;
5691
- -moz-osx-font-smoothing: grayscale;
5692
- border: none;
5693
- flex-shrink: 0;
5694
- justify-content: center;
5695
- align-items: center;
5696
- font-family: inherit;
5697
- text-decoration: none;
5698
- display: inline-flex;
5699
- }
5700
-
5701
- .seed-extended-fab:is(:focus, [data-focus]) {
5702
- outline: none;
5703
- }
5704
-
5705
- .seed-extended-fab:is(:disabled, [disabled], [data-disabled]) {
5706
- cursor: not-allowed;
5155
+ --seed-box-padding-x-base: var(--seed-dimension-x6);
5156
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
5157
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
5158
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
5159
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
5160
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
5161
+ --seed-box-min-height-base: 0;
5162
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
5163
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
5164
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
5165
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
5166
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
5167
+ --seed-box-max-height-base: none;
5168
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
5169
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
5170
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
5171
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
5172
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
5173
+ --seed-box-justify-content: initial;
5174
+ --seed-box-align-items: initial;
5175
+ padding-inline: var(--seed-box-padding-x);
5176
+ min-height: var(--seed-box-min-height);
5177
+ max-height: var(--seed-box-max-height);
5178
+ justify-content: var(--seed-box-justify-content);
5179
+ align-items: var(--seed-box-align-items);
5180
+ transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
5181
+ flex-direction: column;
5182
+ flex: 1;
5183
+ display: flex;
5184
+ overflow-y: auto;
5707
5185
  }
5708
5186
 
5709
- .seed-extended-fab {
5710
- border-radius: var(--seed-radius-full);
5711
- box-shadow: 0 2px 6px #00000026;
5187
+ .seed-dialog__body[data-scrolled]:not(:first-child) {
5188
+ box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
5712
5189
  }
5713
5190
 
5714
- .seed-extended-fab--variant_neutralSolid {
5715
- background: var(--seed-color-bg-neutral-inverted);
5716
- color: var(--seed-color-fg-neutral-inverted);
5191
+ .seed-dialog__body[data-overflow] {
5192
+ padding-bottom: var(--seed-dimension-x12);
5193
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
5194
+ mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
5195
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
5717
5196
  }
5718
5197
 
5719
- .seed-extended-fab--variant_neutralSolid:is(:active, [data-active]) {
5720
- background: var(--seed-color-bg-neutral-inverted-pressed);
5198
+ .seed-dialog__body {
5199
+ outline: var(--seed-dimension-x0_5) solid transparent;
5200
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5721
5201
  }
5722
5202
 
5723
- .seed-extended-fab--variant_neutralSolid {
5724
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
5203
+ .seed-dialog__body:is(:focus-visible, [data-focus-visible]) {
5204
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5205
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
5725
5206
  }
5726
5207
 
5727
- .seed-extended-fab--variant_layerFloating {
5728
- background: var(--seed-color-bg-layer-floating);
5208
+ .seed-dialog__title {
5729
5209
  color: var(--seed-color-fg-neutral);
5210
+ font-size: var(--seed-font-size-t8);
5211
+ line-height: var(--seed-line-height-t8);
5212
+ font-weight: var(--seed-font-weight-bold);
5213
+ margin: 0;
5730
5214
  }
5731
5215
 
5732
- .seed-extended-fab--variant_layerFloating:is(:active, [data-active]) {
5733
- background: var(--seed-color-bg-layer-floating-pressed);
5734
- }
5735
-
5736
- .seed-extended-fab--variant_layerFloating {
5737
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
5738
- }
5739
-
5740
- .seed-extended-fab--size_small {
5741
- padding-inline: var(--seed-dimension-x3_5);
5742
- padding-block: var(--seed-dimension-x2_5);
5743
- gap: var(--seed-dimension-x1);
5744
- min-height: 40px;
5745
- font-size: var(--seed-font-size-t4);
5746
- line-height: var(--seed-line-height-t4);
5747
- font-weight: var(--seed-font-weight-medium);
5748
- --seed-prefix-icon-size: 16px;
5749
- }
5750
-
5751
- .seed-extended-fab--size_medium {
5752
- padding-inline: var(--seed-dimension-x4);
5753
- padding-block: var(--seed-dimension-x3);
5754
- gap: var(--seed-dimension-x1);
5755
- min-height: 48px;
5216
+ .seed-dialog__description {
5217
+ color: var(--seed-color-fg-neutral-muted);
5756
5218
  font-size: var(--seed-font-size-t5);
5757
5219
  line-height: var(--seed-line-height-t5);
5758
- font-weight: var(--seed-font-weight-bold);
5759
- --seed-prefix-icon-size: 16px;
5220
+ font-weight: var(--seed-font-weight-regular);
5221
+ white-space: pre-wrap;
5222
+ margin: 0;
5760
5223
  }
5761
5224
 
5762
- .seed-fab {
5763
- box-sizing: border-box;
5225
+ .seed-dialog__footer {
5226
+ padding-inline: var(--seed-dimension-x6);
5227
+ padding-top: var(--seed-dimension-x4);
5228
+ padding-bottom: var(--seed-dimension-x6);
5229
+ flex-direction: column;
5230
+ flex-shrink: 0;
5231
+ align-items: stretch;
5232
+ display: flex;
5233
+ }
5234
+
5235
+ .seed-dialog__closeButton {
5236
+ top: var(--seed-dimension-x7);
5237
+ right: var(--seed-dimension-x6);
5238
+ background: var(--seed-color-bg-transparent);
5239
+ border-radius: var(--seed-radius-r3);
5764
5240
  cursor: pointer;
5765
- text-transform: none;
5766
- -webkit-font-smoothing: antialiased;
5767
- -moz-osx-font-smoothing: grayscale;
5241
+ 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);
5242
+ --seed-icon-size: 22px;
5243
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
5244
+ outline: var(--seed-dimension-x0_5) solid transparent;
5245
+ outline-offset: var(--seed-dimension-x0_5);
5768
5246
  border: none;
5769
5247
  justify-content: center;
5770
5248
  align-items: center;
5771
- font-family: inherit;
5772
- text-decoration: none;
5773
- display: inline-flex;
5249
+ margin: -15px;
5250
+ padding: 15px;
5251
+ display: flex;
5252
+ position: absolute;
5774
5253
  }
5775
5254
 
5776
- .seed-fab:is(:focus, [data-focus]) {
5777
- outline: none;
5255
+ .seed-dialog__closeButton:is(:focus-visible, [data-focus-visible]) {
5256
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
5257
+ outline-offset: var(--seed-dimension-x0_5);
5778
5258
  }
5779
5259
 
5780
- .seed-fab:is(:disabled, [disabled], [data-disabled]) {
5781
- cursor: not-allowed;
5260
+ .seed-dialog__closeButton:is(:active, [data-active]) {
5261
+ scale: var(--seed-feedback-scale);
5782
5262
  }
5783
5263
 
5784
- .seed-fab {
5785
- background: var(--seed-color-bg-layer-floating);
5786
- border-radius: var(--seed-radius-full);
5787
- --seed-icon-size: 22px;
5788
- --seed-icon-color: var(--seed-color-fg-neutral);
5789
- width: 44px;
5790
- height: 44px;
5791
- box-shadow: 0 2px 6px #00000026;
5264
+ @media (hover: hover) and (pointer: fine) {
5265
+ .seed-dialog__closeButton:is(:hover, [data-hover]) {
5266
+ background: var(--seed-color-bg-transparent-pressed);
5267
+ }
5792
5268
  }
5793
5269
 
5794
- .seed-fab:is(:active, [data-active]) {
5795
- background: var(--seed-color-bg-layer-floating-pressed);
5270
+ @media not all and (hover: hover) and (pointer: fine) {
5271
+ .seed-dialog__closeButton:is(:active, [data-active]) {
5272
+ background: var(--seed-color-bg-transparent-pressed);
5273
+ }
5274
+ }
5275
+
5276
+ .seed-dialog__content--size_medium {
5277
+ --dialog-size-width: 480px;
5278
+ }
5279
+
5280
+ .seed-dialog__content--size_large {
5281
+ --dialog-size-width: 800px;
5796
5282
  }
5797
5283
 
5798
5284
  .seed-field__root {
@@ -6402,7 +5888,7 @@
6402
5888
  background: var(--seed-color-bg-brand-solid);
6403
5889
  border-radius: var(--seed-radius-full);
6404
5890
  box-shadow: var(--seed-shadow-s3);
6405
- color: var(--seed-color-palette-static-white);
5891
+ color: var(--seed-color-fg-on-brand-solid);
6406
5892
  font-size: var(--seed-font-size-t5);
6407
5893
  line-height: var(--seed-line-height-t5);
6408
5894
  font-weight: var(--seed-font-weight-bold);
@@ -6431,7 +5917,7 @@
6431
5917
  }
6432
5918
 
6433
5919
  .seed-floating-action-button__icon {
6434
- color: var(--seed-color-palette-static-white);
5920
+ color: var(--seed-color-fg-on-brand-solid);
6435
5921
  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);
6436
5922
  flex-shrink: 0;
6437
5923
  justify-content: center;
@@ -6538,7 +6024,7 @@
6538
6024
 
6539
6025
  .seed-help-bubble__content {
6540
6026
  box-sizing: border-box;
6541
- background: var(--seed-color-bg-neutral-inverted);
6027
+ background: var(--seed-color-bg-neutral-solid);
6542
6028
  padding-inline: var(--seed-dimension-x3);
6543
6029
  padding-block: var(--seed-dimension-x2_5);
6544
6030
  border-radius: var(--seed-radius-r3);
@@ -6582,13 +6068,17 @@
6582
6068
  display: none !important;
6583
6069
  }
6584
6070
 
6071
+ .seed-help-bubble__content:is(:focus, [data-focus]) {
6072
+ outline: none;
6073
+ }
6074
+
6585
6075
  .seed-help-bubble__arrow {
6586
6076
  width: 12px;
6587
6077
  height: 12px;
6588
6078
  }
6589
6079
 
6590
6080
  .seed-help-bubble__arrowTip {
6591
- fill: var(--seed-color-bg-neutral-inverted);
6081
+ fill: var(--seed-color-bg-neutral-solid);
6592
6082
  width: 12px;
6593
6083
  height: 8px;
6594
6084
  display: block;
@@ -6604,7 +6094,7 @@
6604
6094
  }
6605
6095
 
6606
6096
  .seed-help-bubble__title {
6607
- color: var(--seed-color-fg-neutral-inverted);
6097
+ color: var(--seed-color-fg-on-neutral-solid);
6608
6098
  font-size: var(--seed-font-size-t3);
6609
6099
  font-weight: var(--seed-font-weight-bold);
6610
6100
  line-height: var(--seed-line-height-t3);
@@ -6612,7 +6102,7 @@
6612
6102
  }
6613
6103
 
6614
6104
  .seed-help-bubble__description {
6615
- color: var(--seed-color-fg-neutral-inverted);
6105
+ color: var(--seed-color-fg-on-neutral-solid);
6616
6106
  font-size: var(--seed-font-size-t3);
6617
6107
  font-weight: var(--seed-font-weight-regular);
6618
6108
  line-height: var(--seed-line-height-t3);
@@ -6625,9 +6115,9 @@
6625
6115
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
6626
6116
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
6627
6117
  margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
6628
- color: var(--seed-color-fg-neutral-inverted);
6118
+ color: var(--seed-color-fg-on-neutral-solid);
6629
6119
  --seed-icon-size: var(--seed-dimension-x3_5);
6630
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
6120
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
6631
6121
  border-radius: var(--seed-radius-r3);
6632
6122
  background: none;
6633
6123
  border: none;
@@ -6795,168 +6285,8 @@
6795
6285
  pointer-events: none;
6796
6286
  filter: drop-shadow(0 2px 2px #00000026);
6797
6287
  margin: auto;
6798
- position: absolute;
6799
- inset: 0;
6800
- }
6801
-
6802
- .seed-inline-banner__root {
6803
- box-sizing: border-box;
6804
- -webkit-font-smoothing: antialiased;
6805
- -moz-osx-font-smoothing: grayscale;
6806
- text-align: start;
6807
- width: 100%;
6808
- min-height: var(--seed-dimension-x10);
6809
- padding-inline: var(--seed-dimension-x4);
6810
- padding-block: var(--seed-dimension-x2_5);
6811
- --seed-prefix-icon-size: var(--seed-dimension-x4);
6812
- --seed-prefix-icon-margin-right: var(--seed-dimension-x2);
6813
- --seed-prefix-icon-margin-top: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * .5 - var(--seed-dimension-x2_5));
6814
- --seed-suffix-icon-size: var(--seed-dimension-x4);
6815
- --seed-suffix-icon-margin-left: var(--seed-dimension-x4);
6816
- --seed-suffix-icon-align-self: center;
6817
- border: none;
6818
- align-items: flex-start;
6819
- font-family: inherit;
6820
- display: flex;
6821
- }
6822
-
6823
- .seed-inline-banner__root:is(button) {
6824
- cursor: pointer;
6825
- }
6826
-
6827
- .seed-inline-banner__content {
6828
- margin-inline-end: auto;
6829
- }
6830
-
6831
- .seed-inline-banner__title {
6832
- font-size: var(--seed-font-size-t4);
6833
- line-height: var(--seed-line-height-t4);
6834
- font-weight: var(--seed-font-weight-bold);
6835
- flex-shrink: 0;
6836
- }
6837
-
6838
- .seed-inline-banner__title:after {
6839
- content: " ";
6840
- white-space: pre;
6841
- }
6842
-
6843
- .seed-inline-banner__description {
6844
- font-size: var(--seed-font-size-t4);
6845
- line-height: var(--seed-line-height-t4);
6846
- font-weight: var(--seed-font-weight-medium);
6847
- }
6848
-
6849
- .seed-inline-banner__link {
6850
- cursor: pointer;
6851
- margin-block: auto;
6852
- margin-left: var(--seed-dimension-x4);
6853
- font-family: inherit;
6854
- font-size: var(--seed-font-size-t2);
6855
- line-height: var(--seed-line-height-t2);
6856
- font-weight: var(--seed-font-weight-regular);
6857
- text-underline-offset: 2px;
6858
- background-color: #0000;
6859
- border: none;
6860
- flex-grow: 0;
6861
- flex-shrink: 0;
6862
- align-items: center;
6863
- text-decoration: underline;
6864
- display: flex;
6865
- }
6866
-
6867
- .seed-inline-banner__closeButton {
6868
- width: var(--seed-dimension-x10);
6869
- height: var(--seed-dimension-x10);
6870
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
6871
- margin-left: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5 + var(--seed-dimension-x4));
6872
- --seed-suffix-icon-margin-left: initial;
6873
- cursor: pointer;
6874
- background-color: #0000;
6875
- border: none;
6876
- flex-grow: 0;
6877
- flex-shrink: 0;
6878
- justify-content: center;
6879
- align-self: center;
6880
- align-items: center;
6881
- padding: 0;
6882
- display: flex;
6883
- }
6884
-
6885
- .seed-inline-banner__root--variant_neutralWeak {
6886
- background-color: var(--seed-color-bg-neutral-weak);
6887
- color: var(--seed-color-fg-neutral);
6888
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
6889
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6890
- }
6891
-
6892
- .seed-inline-banner__title--variant_neutralWeak, .seed-inline-banner__description--variant_neutralWeak, .seed-inline-banner__link--variant_neutralWeak {
6893
- color: var(--seed-color-fg-neutral);
6894
- }
6895
-
6896
- .seed-inline-banner__root--variant_positiveWeak {
6897
- background-color: var(--seed-color-bg-positive-weak);
6898
- color: var(--seed-color-fg-positive-contrast);
6899
- --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
6900
- --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
6901
- }
6902
-
6903
- .seed-inline-banner__title--variant_positiveWeak, .seed-inline-banner__description--variant_positiveWeak, .seed-inline-banner__link--variant_positiveWeak {
6904
- color: var(--seed-color-fg-positive-contrast);
6905
- }
6906
-
6907
- .seed-inline-banner__root--variant_informativeWeak {
6908
- background-color: var(--seed-color-bg-informative-weak);
6909
- color: var(--seed-color-fg-informative-contrast);
6910
- --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
6911
- --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
6912
- }
6913
-
6914
- .seed-inline-banner__title--variant_informativeWeak, .seed-inline-banner__description--variant_informativeWeak, .seed-inline-banner__link--variant_informativeWeak {
6915
- color: var(--seed-color-fg-informative-contrast);
6916
- }
6917
-
6918
- .seed-inline-banner__root--variant_warningWeak {
6919
- background-color: var(--seed-color-bg-warning-weak);
6920
- color: var(--seed-color-fg-warning-contrast);
6921
- --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
6922
- --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
6923
- }
6924
-
6925
- .seed-inline-banner__title--variant_warningWeak, .seed-inline-banner__description--variant_warningWeak, .seed-inline-banner__link--variant_warningWeak {
6926
- color: var(--seed-color-fg-warning-contrast);
6927
- }
6928
-
6929
- .seed-inline-banner__root--variant_warningSolid {
6930
- background-color: var(--seed-color-bg-warning-solid);
6931
- color: var(--seed-color-fg-neutral);
6932
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
6933
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
6934
- }
6935
-
6936
- .seed-inline-banner__title--variant_warningSolid, .seed-inline-banner__description--variant_warningSolid, .seed-inline-banner__link--variant_warningSolid {
6937
- color: var(--seed-color-fg-neutral);
6938
- }
6939
-
6940
- .seed-inline-banner__root--variant_criticalWeak {
6941
- background-color: var(--seed-color-bg-critical-weak);
6942
- color: var(--seed-color-fg-critical-contrast);
6943
- --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
6944
- --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
6945
- }
6946
-
6947
- .seed-inline-banner__title--variant_criticalWeak, .seed-inline-banner__description--variant_criticalWeak, .seed-inline-banner__link--variant_criticalWeak {
6948
- color: var(--seed-color-fg-critical-contrast);
6949
- }
6950
-
6951
- .seed-inline-banner__root--variant_criticalSolid {
6952
- background-color: var(--seed-color-bg-critical-solid);
6953
- color: var(--seed-color-palette-static-white);
6954
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
6955
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
6956
- }
6957
-
6958
- .seed-inline-banner__title--variant_criticalSolid, .seed-inline-banner__description--variant_criticalSolid, .seed-inline-banner__link--variant_criticalSolid {
6959
- color: var(--seed-color-palette-static-white);
6288
+ position: absolute;
6289
+ inset: 0;
6960
6290
  }
6961
6291
 
6962
6292
  .seed-input-button__root {
@@ -7327,53 +6657,6 @@
7327
6657
  }
7328
6658
  }
7329
6659
 
7330
- .seed-link-content {
7331
- cursor: pointer;
7332
- box-sizing: border-box;
7333
- -webkit-font-smoothing: antialiased;
7334
- -moz-osx-font-smoothing: grayscale;
7335
- text-align: center;
7336
- color: var(--seed-box-color);
7337
- --seed-suffix-icon-color: var(--seed-box-color);
7338
- background-color: #0000;
7339
- border: none;
7340
- outline: none;
7341
- align-items: center;
7342
- padding-block: 0;
7343
- padding-inline: 0;
7344
- font-family: inherit;
7345
- display: inline-flex;
7346
- }
7347
-
7348
- .seed-link-content--weight_bold {
7349
- font-weight: var(--seed-font-weight-bold);
7350
- }
7351
-
7352
- .seed-link-content--weight_regular {
7353
- font-weight: var(--seed-font-weight-regular);
7354
- }
7355
-
7356
- .seed-link-content--size_t6 {
7357
- font-size: var(--seed-font-size-t6);
7358
- line-height: var(--seed-line-height-t6);
7359
- gap: var(--seed-dimension-x0_5);
7360
- --seed-suffix-icon-size: var(--seed-dimension-x4);
7361
- }
7362
-
7363
- .seed-link-content--size_t5 {
7364
- font-size: var(--seed-font-size-t5);
7365
- line-height: var(--seed-line-height-t5);
7366
- gap: var(--seed-dimension-x0_5);
7367
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
7368
- }
7369
-
7370
- .seed-link-content--size_t4 {
7371
- font-size: var(--seed-font-size-t4);
7372
- line-height: var(--seed-line-height-t4);
7373
- gap: var(--seed-dimension-x0_5);
7374
- --seed-suffix-icon-size: var(--seed-dimension-x3);
7375
- }
7376
-
7377
6660
  .seed-list-header {
7378
6661
  align-items: center;
7379
6662
  gap: var(--seed-dimension-x2_5);
@@ -7913,6 +7196,10 @@
7913
7196
  }
7914
7197
  }
7915
7198
 
7199
+ .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
7200
+ --seed-content-scale: var(--seed-feedback-scale);
7201
+ }
7202
+
7916
7203
  .seed-menu-item__root:is(:focus-visible, [data-focus-visible]):after {
7917
7204
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
7918
7205
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
@@ -8262,6 +7549,10 @@
8262
7549
  }
8263
7550
  }
8264
7551
 
7552
+ .seed-menu-sheet-item__root:is(:active, [data-active]) {
7553
+ --seed-content-scale: var(--seed-feedback-scale);
7554
+ }
7555
+
8265
7556
  .seed-menu-sheet-item__root:first-child {
8266
7557
  border-top-left-radius: var(--seed-radius-r4);
8267
7558
  border-top-right-radius: var(--seed-radius-r4);
@@ -8342,7 +7633,7 @@
8342
7633
  -webkit-font-smoothing: antialiased;
8343
7634
  -moz-osx-font-smoothing: grayscale;
8344
7635
  background-color: var(--seed-color-bg-brand-solid);
8345
- color: var(--seed-color-palette-static-white);
7636
+ color: var(--seed-color-fg-on-brand-solid);
8346
7637
  justify-content: center;
8347
7638
  align-items: center;
8348
7639
  text-decoration: none;
@@ -8434,6 +7725,10 @@
8434
7725
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8435
7726
  }
8436
7727
 
7728
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
7729
+ --seed-content-scale: var(--seed-feedback-scale);
7730
+ }
7731
+
8437
7732
  .seed-page-banner__content {
8438
7733
  justify-content: space-between;
8439
7734
  align-items: center;
@@ -8570,29 +7865,29 @@
8570
7865
  }
8571
7866
 
8572
7867
  .seed-page-banner__root--tone_neutral-variant_solid {
8573
- background-color: var(--seed-color-bg-neutral-inverted);
8574
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
8575
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
7868
+ background-color: var(--seed-color-bg-neutral-solid);
7869
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
7870
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
8576
7871
  }
8577
7872
 
8578
7873
  @media (hover: hover) and (pointer: fine) {
8579
7874
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
8580
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
7875
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8581
7876
  }
8582
7877
  }
8583
7878
 
8584
7879
  @media not all and (hover: hover) and (pointer: fine) {
8585
7880
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
8586
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
7881
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8587
7882
  }
8588
7883
  }
8589
7884
 
8590
7885
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
8591
- color: var(--seed-color-fg-neutral-inverted);
7886
+ color: var(--seed-color-fg-on-neutral-solid);
8592
7887
  }
8593
7888
 
8594
7889
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
8595
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
7890
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
8596
7891
  }
8597
7892
 
8598
7893
  .seed-page-banner__root--tone_informative-variant_weak {
@@ -8623,8 +7918,8 @@
8623
7918
 
8624
7919
  .seed-page-banner__root--tone_informative-variant_solid {
8625
7920
  background-color: var(--seed-color-bg-informative-solid);
8626
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8627
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7921
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
7922
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
8628
7923
  }
8629
7924
 
8630
7925
  @media (hover: hover) and (pointer: fine) {
@@ -8640,7 +7935,7 @@
8640
7935
  }
8641
7936
 
8642
7937
  .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
8643
- color: var(--seed-color-palette-static-white);
7938
+ color: var(--seed-color-fg-on-informative-solid);
8644
7939
  }
8645
7940
 
8646
7941
  .seed-page-banner__closeButton--tone_informative-variant_solid {
@@ -8675,8 +7970,8 @@
8675
7970
 
8676
7971
  .seed-page-banner__root--tone_positive-variant_solid {
8677
7972
  background-color: var(--seed-color-bg-positive-solid);
8678
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8679
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
7973
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
7974
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
8680
7975
  }
8681
7976
 
8682
7977
  @media (hover: hover) and (pointer: fine) {
@@ -8692,7 +7987,7 @@
8692
7987
  }
8693
7988
 
8694
7989
  .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
8695
- color: var(--seed-color-palette-static-white);
7990
+ color: var(--seed-color-fg-on-positive-solid);
8696
7991
  }
8697
7992
 
8698
7993
  .seed-page-banner__closeButton--tone_positive-variant_solid {
@@ -8727,8 +8022,8 @@
8727
8022
 
8728
8023
  .seed-page-banner__root--tone_warning-variant_solid {
8729
8024
  background-color: var(--seed-color-bg-warning-solid);
8730
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8731
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
8025
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
8026
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
8732
8027
  }
8733
8028
 
8734
8029
  @media (hover: hover) and (pointer: fine) {
@@ -8744,7 +8039,7 @@
8744
8039
  }
8745
8040
 
8746
8041
  .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
8747
- color: var(--seed-color-palette-static-black-alpha-900);
8042
+ color: var(--seed-color-fg-on-warning-solid);
8748
8043
  }
8749
8044
 
8750
8045
  .seed-page-banner__closeButton--tone_warning-variant_solid {
@@ -8779,8 +8074,8 @@
8779
8074
 
8780
8075
  .seed-page-banner__root--tone_critical-variant_solid {
8781
8076
  background-color: var(--seed-color-bg-critical-solid);
8782
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
8783
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
8077
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
8078
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
8784
8079
  }
8785
8080
 
8786
8081
  @media (hover: hover) and (pointer: fine) {
@@ -8796,7 +8091,7 @@
8796
8091
  }
8797
8092
 
8798
8093
  .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
8799
- color: var(--seed-color-palette-static-white);
8094
+ color: var(--seed-color-fg-on-critical-solid);
8800
8095
  }
8801
8096
 
8802
8097
  .seed-page-banner__closeButton--tone_critical-variant_solid {
@@ -8984,47 +8279,255 @@
8984
8279
  scale: var(--seed-scale-s97);
8985
8280
  }
8986
8281
 
8987
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8988
- color: var(--seed-color-fg-neutral-inverted);
8282
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
8283
+ color: var(--seed-color-fg-on-neutral-solid);
8284
+ }
8285
+
8286
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8287
+ background-color: var(--seed-color-bg-neutral-solid);
8288
+ }
8289
+
8290
+ @media (hover: hover) and (pointer: fine) {
8291
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8292
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8293
+ }
8294
+ }
8295
+
8296
+ @media not all and (hover: hover) and (pointer: fine) {
8297
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
8298
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
8299
+ }
8300
+ }
8301
+
8302
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
8303
+ cursor: not-allowed;
8304
+ color: var(--seed-color-fg-disabled);
8305
+ }
8306
+
8307
+ .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
8308
+ background-color: var(--seed-color-bg-transparent);
8309
+ }
8310
+
8311
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
8312
+ color: var(--seed-color-fg-disabled);
8313
+ }
8314
+
8315
+ .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
8316
+ background-color: var(--seed-color-bg-disabled);
8317
+ }
8318
+
8319
+ .seed-pagination-page-item {
8320
+ transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
8321
+ }
8322
+
8323
+ .seed-popover__positioner {
8324
+ --popover-z-index: 99999;
8325
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
8326
+ max-width: var(--seed-popover-available-width, none);
8327
+ outline: none;
8328
+ }
8329
+
8330
+ .seed-popover__content {
8331
+ box-sizing: border-box;
8332
+ background: var(--seed-color-bg-layer-floating);
8333
+ border-radius: var(--seed-radius-r5);
8334
+ box-shadow: var(--seed-shadow-s3);
8335
+ --seed-box-width-base: auto;
8336
+ --seed-box-width-sm: var(--seed-box-width-base, initial);
8337
+ --seed-box-width-md: var(--seed-box-width-sm, initial);
8338
+ --seed-box-width-lg: var(--seed-box-width-md, initial);
8339
+ --seed-box-width-xl: var(--seed-box-width-lg, initial);
8340
+ --seed-box-width: var(--seed-box-width-base, initial);
8341
+ --seed-box-max-width-base: min(480px, var(--seed-popover-available-width, 480px));
8342
+ --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
8343
+ --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
8344
+ --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
8345
+ --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
8346
+ --seed-box-max-width: var(--seed-box-max-width-base, initial);
8347
+ width: var(--seed-box-width);
8348
+ min-width: min(320px, var(--seed-popover-available-width, 320px));
8349
+ max-width: var(--seed-box-max-width);
8350
+ max-height: min(600px, var(--seed-popover-available-height, 600px));
8351
+ transform-origin: var(--seed-popover-transform-origin);
8352
+ flex-direction: column;
8353
+ display: flex;
8354
+ position: relative;
8355
+ }
8356
+
8357
+ .seed-popover__content:is([data-state="open"], [data-open]) {
8358
+ animation: seed-enter;
8359
+ animation-timing-function: var(--seed-timing-function-enter);
8360
+ animation-duration: var(--seed-duration-d3);
8361
+ --seed-enter-translate-x: 0;
8362
+ --seed-enter-translate-y: 0;
8363
+ --seed-enter-opacity: 0;
8364
+ --seed-enter-scale: .95;
8365
+ }
8366
+
8367
+ .seed-popover__content:not(:is([data-state="open"], [data-open])) {
8368
+ animation: seed-exit;
8369
+ animation-timing-function: var(--seed-timing-function-exit);
8370
+ animation-duration: var(--seed-duration-d2);
8371
+ --seed-exit-translate-x: 0;
8372
+ --seed-exit-translate-y: 0;
8373
+ --seed-exit-opacity: 0;
8374
+ --seed-exit-scale: .95;
8375
+ animation-fill-mode: forwards;
8376
+ }
8377
+
8378
+ .seed-popover__content:is([hidden], [data-hidden]) {
8379
+ display: none !important;
8380
+ }
8381
+
8382
+ .seed-popover__content:is(:focus, [data-focus]) {
8383
+ outline: none;
8384
+ }
8385
+
8386
+ .seed-popover__header {
8387
+ box-sizing: border-box;
8388
+ gap: var(--seed-dimension-x1_5);
8389
+ padding-inline: var(--seed-dimension-x6);
8390
+ padding-top: var(--seed-dimension-x6);
8391
+ padding-bottom: var(--seed-dimension-x4);
8392
+ flex-direction: column;
8393
+ flex-shrink: 0;
8394
+ display: flex;
8395
+ }
8396
+
8397
+ .seed-popover__header[data-show-close-button] {
8398
+ padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
8399
+ }
8400
+
8401
+ .seed-popover__title {
8402
+ color: var(--seed-color-fg-neutral);
8403
+ font-size: var(--seed-font-size-t7);
8404
+ line-height: var(--seed-line-height-t7);
8405
+ font-weight: var(--seed-font-weight-bold);
8406
+ word-break: keep-all;
8407
+ margin: 0;
8408
+ }
8409
+
8410
+ .seed-popover__description {
8411
+ color: var(--seed-color-fg-neutral-muted);
8412
+ font-size: var(--seed-font-size-t4);
8413
+ line-height: var(--seed-line-height-t4);
8414
+ font-weight: var(--seed-font-weight-regular);
8415
+ white-space: pre-wrap;
8416
+ margin: 0;
8417
+ }
8418
+
8419
+ .seed-popover__body {
8420
+ box-sizing: border-box;
8421
+ --seed-box-padding-x-base: var(--seed-dimension-x6);
8422
+ --seed-box-padding-x-sm: var(--seed-box-padding-x-base, initial);
8423
+ --seed-box-padding-x-md: var(--seed-box-padding-x-sm, initial);
8424
+ --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
8425
+ --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
8426
+ --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
8427
+ --seed-box-height-base: auto;
8428
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
8429
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
8430
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
8431
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
8432
+ --seed-box-height: var(--seed-box-height-base, initial);
8433
+ --seed-box-min-height-base: 0;
8434
+ --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
8435
+ --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
8436
+ --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
8437
+ --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
8438
+ --seed-box-min-height: var(--seed-box-min-height-base, initial);
8439
+ --seed-box-max-height-base: none;
8440
+ --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
8441
+ --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
8442
+ --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
8443
+ --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
8444
+ --seed-box-max-height: var(--seed-box-max-height-base, initial);
8445
+ --seed-box-justify-content: initial;
8446
+ --seed-box-align-items: initial;
8447
+ padding-inline: var(--seed-box-padding-x);
8448
+ height: var(--seed-box-height);
8449
+ min-height: var(--seed-box-min-height);
8450
+ max-height: var(--seed-box-max-height);
8451
+ justify-content: var(--seed-box-justify-content);
8452
+ align-items: var(--seed-box-align-items);
8453
+ transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
8454
+ flex-direction: column;
8455
+ flex: 1;
8456
+ display: flex;
8457
+ overflow-y: auto;
8458
+ }
8459
+
8460
+ .seed-popover__body[data-scrolled]:not(:first-child) {
8461
+ box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
8462
+ }
8463
+
8464
+ .seed-popover__body[data-overflow] {
8465
+ padding-bottom: var(--seed-dimension-x12);
8466
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8467
+ mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8468
+ -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
8469
+ }
8470
+
8471
+ .seed-popover__body {
8472
+ outline: var(--seed-dimension-x0_5) solid transparent;
8473
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8474
+ }
8475
+
8476
+ .seed-popover__body:is(:focus-visible, [data-focus-visible]) {
8477
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8478
+ outline-offset: calc(var(--seed-dimension-x0_5) * -1);
8479
+ }
8480
+
8481
+ .seed-popover__footer {
8482
+ padding-inline: var(--seed-dimension-x6);
8483
+ padding-top: var(--seed-dimension-x4);
8484
+ padding-bottom: var(--seed-dimension-x6);
8485
+ flex-direction: column;
8486
+ flex-shrink: 0;
8487
+ display: flex;
8488
+ }
8489
+
8490
+ .seed-popover__closeButton {
8491
+ background: var(--seed-color-bg-transparent);
8492
+ border-radius: var(--seed-radius-r3);
8493
+ cursor: pointer;
8494
+ 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);
8495
+ --seed-icon-size: 22px;
8496
+ --seed-icon-color: var(--seed-color-fg-neutral-subtle);
8497
+ outline: var(--seed-dimension-x0_5) solid transparent;
8498
+ outline-offset: var(--seed-dimension-x0_5);
8499
+ border: none;
8500
+ justify-content: center;
8501
+ align-items: center;
8502
+ margin: -15px;
8503
+ padding: 15px;
8504
+ display: flex;
8505
+ position: absolute;
8506
+ top: 27px;
8507
+ right: 24px;
8508
+ }
8509
+
8510
+ .seed-popover__closeButton:is(:focus-visible, [data-focus-visible]) {
8511
+ outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
8512
+ outline-offset: var(--seed-dimension-x0_5);
8989
8513
  }
8990
8514
 
8991
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
8992
- background-color: var(--seed-color-bg-neutral-inverted);
8515
+ .seed-popover__closeButton:is(:active, [data-active]) {
8516
+ scale: var(--seed-feedback-scale);
8993
8517
  }
8994
8518
 
8995
8519
  @media (hover: hover) and (pointer: fine) {
8996
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
8997
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8520
+ .seed-popover__closeButton:is(:hover, [data-hover]) {
8521
+ background: var(--seed-color-bg-transparent-pressed);
8998
8522
  }
8999
8523
  }
9000
8524
 
9001
8525
  @media not all and (hover: hover) and (pointer: fine) {
9002
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
9003
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
8526
+ .seed-popover__closeButton:is(:active, [data-active]) {
8527
+ background: var(--seed-color-bg-transparent-pressed);
9004
8528
  }
9005
8529
  }
9006
8530
 
9007
- .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
9008
- cursor: not-allowed;
9009
- color: var(--seed-color-fg-disabled);
9010
- }
9011
-
9012
- .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]):before {
9013
- background-color: var(--seed-color-bg-transparent);
9014
- }
9015
-
9016
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]) {
9017
- color: var(--seed-color-fg-disabled);
9018
- }
9019
-
9020
- .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:disabled, [disabled], [data-disabled]):before {
9021
- background-color: var(--seed-color-bg-disabled);
9022
- }
9023
-
9024
- .seed-pagination-page-item {
9025
- transition: scale var(--seed-duration-pressed-scale) var(--seed-timing-function-pressed-scale), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9026
- }
9027
-
9028
8531
  .seed-progress-circle__root {
9029
8532
  box-sizing: border-box;
9030
8533
  display: inline-flex;
@@ -9507,23 +9010,23 @@
9507
9010
  }
9508
9011
 
9509
9012
  .seed-radiomark__root--tone_neutral:is(:checked, [data-checked]) {
9510
- background-color: var(--seed-color-bg-neutral-inverted);
9013
+ background-color: var(--seed-color-bg-neutral-solid);
9511
9014
  }
9512
9015
 
9513
9016
  @media (hover: hover) and (pointer: fine) {
9514
9017
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:hover, [data-hover]) {
9515
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
9018
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
9516
9019
  }
9517
9020
  }
9518
9021
 
9519
9022
  @media not all and (hover: hover) and (pointer: fine) {
9520
9023
  .seed-radiomark__root--tone_neutral:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):is(:active, [data-active]) {
9521
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
9024
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
9522
9025
  }
9523
9026
  }
9524
9027
 
9525
9028
  .seed-radiomark__icon--tone_neutral:is(:checked, [data-checked]) {
9526
- color: var(--seed-color-fg-neutral-inverted);
9029
+ color: var(--seed-color-fg-on-neutral-solid);
9527
9030
  }
9528
9031
 
9529
9032
  .seed-radiomark__root--tone_brand:is(:checked, [data-checked]) {
@@ -9543,7 +9046,7 @@
9543
9046
  }
9544
9047
 
9545
9048
  .seed-radiomark__icon--tone_brand:is(:checked, [data-checked]) {
9546
- color: var(--seed-color-palette-static-white);
9049
+ color: var(--seed-color-fg-on-brand-solid);
9547
9050
  }
9548
9051
 
9549
9052
  .seed-radiomark__root--size_large {
@@ -9830,6 +9333,10 @@
9830
9333
  }
9831
9334
  }
9832
9335
 
9336
+ .seed-segmented-control__item:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9337
+ --seed-content-scale: var(--seed-feedback-scale);
9338
+ }
9339
+
9833
9340
  .seed-select__positioner {
9834
9341
  --select-z-index: 99999;
9835
9342
  z-index: calc(var(--select-z-index) + var(--z-index-offset, 0));
@@ -9980,6 +9487,10 @@
9980
9487
  }
9981
9488
  }
9982
9489
 
9490
+ .seed-select-trigger__root:not([data-disabled]):not([data-readonly]):is(:active, [data-active]) {
9491
+ --seed-content-scale: var(--seed-feedback-scale);
9492
+ }
9493
+
9983
9494
  .seed-select-trigger__root[data-readonly]:not([data-disabled]) {
9984
9495
  cursor: default;
9985
9496
  background-color: var(--seed-color-bg-disabled);
@@ -10197,6 +9708,10 @@
10197
9708
  inset-inline: var(--seed-dimension-x2);
10198
9709
  }
10199
9710
 
9711
+ .seed-select-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9712
+ --seed-content-scale: var(--seed-feedback-scale);
9713
+ }
9714
+
10200
9715
  .seed-select-item__root:is(:disabled, [disabled], [data-disabled]) {
10201
9716
  cursor: not-allowed;
10202
9717
  }
@@ -10360,6 +9875,7 @@
10360
9875
  background-color: var(--seed-color-bg-transparent);
10361
9876
  box-shadow: inset 0 0 0 1px var(--seed-color-stroke-neutral-weak);
10362
9877
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing), outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
9878
+ --seed-radiomark-feedback-scale: 1;
10363
9879
  flex-direction: column;
10364
9880
  display: flex;
10365
9881
  position: relative;
@@ -10388,6 +9904,10 @@
10388
9904
  }
10389
9905
  }
10390
9906
 
9907
+ .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
9908
+ --seed-content-scale: var(--seed-feedback-scale);
9909
+ }
9910
+
10391
9911
  .seed-select-box__root:not(:is(:disabled, [disabled], [data-disabled])):is(:checked, [data-checked]):after {
10392
9912
  border-width: 2px;
10393
9913
  border-color: var(--seed-color-stroke-neutral-contrast);
@@ -11029,31 +10549,10 @@
11029
10549
  --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
11030
10550
  --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
11031
10551
  --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
11032
- --seed-box-height-base: auto;
11033
- --seed-box-height-sm: var(--seed-box-height-base, initial);
11034
- --seed-box-height-md: var(--seed-box-height-sm, initial);
11035
- --seed-box-height-lg: var(--seed-box-height-md, initial);
11036
- --seed-box-height-xl: var(--seed-box-height-lg, initial);
11037
- --seed-box-height: var(--seed-box-height-base, initial);
11038
- --seed-box-min-height-base: auto;
11039
- --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
11040
- --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
11041
- --seed-box-min-height-lg: var(--seed-box-min-height-md, initial);
11042
- --seed-box-min-height-xl: var(--seed-box-min-height-lg, initial);
11043
- --seed-box-min-height: var(--seed-box-min-height-base, initial);
11044
- --seed-box-max-height-base: none;
11045
- --seed-box-max-height-sm: var(--seed-box-max-height-base, initial);
11046
- --seed-box-max-height-md: var(--seed-box-max-height-sm, initial);
11047
- --seed-box-max-height-lg: var(--seed-box-max-height-md, initial);
11048
- --seed-box-max-height-xl: var(--seed-box-max-height-lg, initial);
11049
- --seed-box-max-height: var(--seed-box-max-height-base, initial);
11050
10552
  --seed-box-justify-content: initial;
11051
10553
  --seed-box-align-items: initial;
11052
10554
  padding-inline: var(--seed-box-padding-x);
11053
10555
  padding-bottom: var(--seed-dimension-x12);
11054
- height: var(--seed-box-height);
11055
- min-height: var(--seed-box-min-height);
11056
- max-height: var(--seed-box-max-height);
11057
10556
  justify-content: var(--seed-box-justify-content);
11058
10557
  align-items: var(--seed-box-align-items);
11059
10558
  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
@@ -11298,7 +10797,7 @@
11298
10797
 
11299
10798
  .seed-slider__thumb:after {
11300
10799
  content: "";
11301
- background-color: var(--seed-color-bg-neutral-inverted);
10800
+ background-color: var(--seed-color-bg-neutral-solid);
11302
10801
  border-radius: var(--seed-radius-full);
11303
10802
  outline: var(--seed-dimension-x0_5) solid transparent;
11304
10803
  outline-offset: var(--seed-dimension-x0_5);
@@ -11340,11 +10839,11 @@
11340
10839
  box-sizing: border-box;
11341
10840
  transition: left var(--seed-duration-d3) var(--seed-timing-function-easing), right var(--seed-duration-d3) var(--seed-timing-function-easing);
11342
10841
  will-change: left, right;
11343
- background: var(--seed-color-bg-neutral-inverted);
10842
+ background: var(--seed-color-bg-neutral-solid);
11344
10843
  padding-inline: var(--seed-dimension-x2);
11345
10844
  padding-block: var(--seed-dimension-x1);
11346
10845
  border-radius: var(--seed-radius-r1_5);
11347
- color: var(--seed-color-fg-neutral-inverted);
10846
+ color: var(--seed-color-fg-on-neutral-solid);
11348
10847
  font-size: var(--seed-font-size-t3);
11349
10848
  line-height: var(--seed-line-height-t3);
11350
10849
  font-weight: var(--seed-font-weight-medium);
@@ -11443,7 +10942,7 @@
11443
10942
  }
11444
10943
 
11445
10944
  .seed-slider__valueIndicatorArrowTip {
11446
- fill: var(--seed-color-bg-neutral-inverted);
10945
+ fill: var(--seed-color-bg-neutral-solid);
11447
10946
  width: var(--seed-dimension-x2);
11448
10947
  height: var(--seed-dimension-x1_5);
11449
10948
  display: block;
@@ -11502,7 +11001,7 @@
11502
11001
  }
11503
11002
 
11504
11003
  .seed-slider-tick {
11505
- background-color: var(--seed-color-fg-neutral-inverted);
11004
+ background-color: var(--seed-color-fg-on-neutral-solid);
11506
11005
  height: 100%;
11507
11006
  position: absolute;
11508
11007
  top: 50%;
@@ -11527,7 +11026,7 @@
11527
11026
 
11528
11027
  .seed-snackbar__root {
11529
11028
  box-sizing: border-box;
11530
- background: var(--seed-color-bg-neutral-inverted);
11029
+ background: var(--seed-color-bg-neutral-solid);
11531
11030
  border-radius: var(--seed-radius-r2);
11532
11031
  width: 100%;
11533
11032
  max-width: 464px;
@@ -11577,7 +11076,7 @@
11577
11076
  }
11578
11077
 
11579
11078
  .seed-snackbar__message {
11580
- color: var(--seed-color-fg-neutral-inverted);
11079
+ color: var(--seed-color-fg-on-neutral-solid);
11581
11080
  font-size: var(--seed-font-size-t4);
11582
11081
  line-height: var(--seed-line-height-t4);
11583
11082
  font-weight: var(--seed-font-weight-regular);
@@ -11765,7 +11264,7 @@
11765
11264
  }
11766
11265
 
11767
11266
  .seed-switchmark__root--tone_neutral:is(:checked, [data-checked]) {
11768
- background: var(--seed-color-bg-neutral-inverted);
11267
+ background: var(--seed-color-bg-neutral-solid);
11769
11268
  }
11770
11269
 
11771
11270
  .seed-switchmark__root--tone_neutral:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked]) {
@@ -11773,7 +11272,7 @@
11773
11272
  }
11774
11273
 
11775
11274
  .seed-switchmark__thumb--tone_neutral {
11776
- background: var(--seed-color-fg-neutral-inverted);
11275
+ background: var(--seed-color-fg-on-neutral-solid);
11777
11276
  }
11778
11277
 
11779
11278
  .seed-switchmark__thumb--tone_neutral:is(:disabled, [disabled], [data-disabled]) {
@@ -13428,14 +12927,14 @@
13428
12927
  }
13429
12928
 
13430
12929
  .seed-time-picker__root {
12930
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13431
12931
  --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
13432
12932
  --seed-wheel-picker-selection-indicator-corner-radius: var(--seed-radius-r2);
13433
12933
  width: 100%;
13434
12934
  height: 220px;
13435
12935
  }
13436
12936
 
13437
- .seed-time-picker__selectionIndicator {
13438
- border-radius: var(--seed-radius-r2);
12937
+ .seed-time-picker__root [data-wheel-picker-indicator] {
13439
12938
  background-color: var(--seed-color-bg-neutral-weak);
13440
12939
  }
13441
12940
 
@@ -13471,7 +12970,6 @@
13471
12970
  }
13472
12971
 
13473
12972
  .seed-time-picker__item {
13474
- --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13475
12973
  padding-inline: var(--seed-dimension-x4);
13476
12974
  font-size: var(--seed-font-size-t10-static);
13477
12975
  line-height: var(--seed-line-height-t10-static);
@@ -13519,9 +13017,9 @@
13519
13017
 
13520
13018
  .seed-toggle-button--variant_brandSolid {
13521
13019
  background: var(--seed-color-bg-brand-solid);
13522
- color: var(--seed-color-palette-static-white);
13020
+ color: var(--seed-color-fg-on-brand-solid);
13523
13021
  --track-color: var(--seed-color-palette-static-white-alpha-300);
13524
- --range-color: var(--seed-color-palette-static-white);
13022
+ --range-color: var(--seed-color-fg-on-brand-solid);
13525
13023
  }
13526
13024
 
13527
13025
  @media (hover: hover) and (pointer: fine) {
@@ -13573,8 +13071,8 @@
13573
13071
  }
13574
13072
 
13575
13073
  .seed-toggle-button--variant_brandSolid {
13576
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
13577
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
13074
+ --seed-prefix-icon-color: var(--seed-color-fg-on-brand-solid);
13075
+ --seed-suffix-icon-color: var(--seed-color-fg-on-brand-solid);
13578
13076
  }
13579
13077
 
13580
13078
  .seed-toggle-button--variant_neutralWeak {
@@ -13662,7 +13160,11 @@
13662
13160
  }
13663
13161
 
13664
13162
  .seed-wheel-picker__root {
13665
- height: var(--seed-wheel-picker-viewport-size);
13163
+ background-color: var(--seed-color-bg-layer-floating);
13164
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13165
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-neutral);
13166
+ --seed-wheel-picker-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-scroll-fog-max-height));
13167
+ width: 100%;
13666
13168
  position: relative;
13667
13169
  overflow: hidden;
13668
13170
  }
@@ -13676,6 +13178,7 @@
13676
13178
 
13677
13179
  .seed-wheel-picker__columns {
13678
13180
  justify-content: center;
13181
+ width: 100%;
13679
13182
  height: 100%;
13680
13183
  display: flex;
13681
13184
  }
@@ -13693,11 +13196,14 @@
13693
13196
  height: 100%;
13694
13197
  padding-block: var(--seed-wheel-picker-center-offset);
13695
13198
  outline: none;
13199
+ flex: none;
13696
13200
  overflow: hidden auto;
13697
13201
  }
13698
13202
 
13699
- .seed-wheel-picker__column[data-disabled] {
13203
+ .seed-wheel-picker__column:is(:disabled, [disabled], [data-disabled]) {
13700
13204
  cursor: default;
13205
+ --seed-wheel-picker-item-color: var(--seed-color-fg-disabled);
13206
+ --seed-wheel-picker-selected-item-color: var(--seed-color-fg-disabled);
13701
13207
  overflow-y: hidden;
13702
13208
  }
13703
13209
 
@@ -13721,7 +13227,7 @@
13721
13227
  .seed-wheel-picker__column :is([aria-selected="true"], [data-selected]) {
13722
13228
  outline: var(--seed-dimension-x0_5) solid transparent;
13723
13229
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13724
- border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, 0);
13230
+ border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
13725
13231
  }
13726
13232
 
13727
13233
  .seed-wheel-picker__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
@@ -13754,114 +13260,7 @@
13754
13260
  background-clip: text;
13755
13261
  }
13756
13262
 
13757
- .seed-wheel-picker__selectionIndicator {
13758
- z-index: 0;
13759
- inset-inline: var(--seed-dimension-x4);
13760
- height: var(--seed-wheel-picker-item-size);
13761
- pointer-events: none;
13762
- position: absolute;
13763
- top: 50%;
13764
- transform: translateY(-50%);
13765
- }
13766
-
13767
- .seed-wheel-picker-public__root {
13768
- background-color: var(--seed-color-bg-layer-floating);
13769
- --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13770
- --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-neutral);
13771
- --seed-wheel-picker-public-scroll-fog-size: min(calc(.4 * 100%), var(--seed-wheel-picker-public-scroll-fog-max-height));
13772
- width: 100%;
13773
- position: relative;
13774
- overflow: hidden;
13775
- }
13776
-
13777
- .seed-wheel-picker-public__scrollFog {
13778
- z-index: 1;
13779
- height: 100%;
13780
- position: relative;
13781
- overflow: hidden;
13782
- }
13783
-
13784
- .seed-wheel-picker-public__columns {
13785
- justify-content: center;
13786
- width: 100%;
13787
- height: 100%;
13788
- display: flex;
13789
- }
13790
-
13791
- .seed-wheel-picker-public__column {
13792
- box-sizing: border-box;
13793
- overscroll-behavior-x: none;
13794
- overscroll-behavior-y: contain;
13795
- scroll-snap-type: y mandatory;
13796
- scrollbar-width: none;
13797
- -ms-overflow-style: none;
13798
- touch-action: pan-y;
13799
- cursor: grab;
13800
- width: max-content;
13801
- height: 100%;
13802
- padding-block: var(--seed-wheel-picker-public-center-offset);
13803
- outline: none;
13804
- flex: none;
13805
- overflow: hidden auto;
13806
- }
13807
-
13808
- .seed-wheel-picker-public__column:is(:disabled, [disabled], [data-disabled]) {
13809
- cursor: default;
13810
- --seed-wheel-picker-public-item-color: var(--seed-color-fg-disabled);
13811
- --seed-wheel-picker-public-selected-item-color: var(--seed-color-fg-disabled);
13812
- overflow-y: hidden;
13813
- }
13814
-
13815
- .seed-wheel-picker-public__column[data-wheel-picker-dragging] {
13816
- cursor: grabbing;
13817
- scroll-snap-type: none;
13818
- }
13819
-
13820
- .seed-wheel-picker-public__column[data-wheel-picker-scrolling] {
13821
- scroll-snap-type: none;
13822
- }
13823
-
13824
- .seed-wheel-picker-public__column::-webkit-scrollbar {
13825
- display: none;
13826
- }
13827
-
13828
- .seed-wheel-picker-public__column :is([aria-selected="true"], [data-selected]) {
13829
- outline: var(--seed-dimension-x0_5) solid transparent;
13830
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13831
- border-radius: var(--seed-radius-r2);
13832
- }
13833
-
13834
- .seed-wheel-picker-public__column:not([data-wheel-picker-pointer-focus]) :is([aria-selected="true"], [data-selected]) {
13835
- transition: outline-color var(--seed-duration-d3) var(--seed-timing-function-easing);
13836
- }
13837
-
13838
- .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]) {
13839
- outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
13840
- outline-offset: calc(var(--seed-dimension-x0_5) * -1);
13841
- }
13842
-
13843
- .seed-wheel-picker-public__item {
13844
- height: var(--seed-wheel-picker-public-item-size);
13845
- min-height: var(--seed-wheel-picker-public-item-size);
13846
- color: var(--seed-wheel-picker-public-item-color);
13847
- scroll-snap-align: center;
13848
- -webkit-user-select: none;
13849
- user-select: none;
13850
- outline-color: #0000;
13851
- justify-content: center;
13852
- align-items: center;
13853
- display: flex;
13854
- }
13855
-
13856
- .seed-wheel-picker-public__item[data-wheel-picker-indicator-overlap] {
13857
- color: #0000;
13858
- 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%);
13859
- -webkit-text-fill-color: transparent;
13860
- -webkit-background-clip: text;
13861
- background-clip: text;
13862
- }
13863
-
13864
- .seed-wheel-picker-public__itemLabel {
13263
+ .seed-wheel-picker__itemLabel {
13865
13264
  box-sizing: border-box;
13866
13265
  height: 100%;
13867
13266
  padding-inline: var(--seed-dimension-x4);
@@ -13873,11 +13272,11 @@
13873
13272
  display: flex;
13874
13273
  }
13875
13274
 
13876
- .seed-wheel-picker-public__selectionIndicator {
13275
+ .seed-wheel-picker__selectionIndicator {
13877
13276
  z-index: 0;
13878
13277
  inset-inline: var(--seed-dimension-x4);
13879
- height: var(--seed-wheel-picker-public-item-size);
13880
- border-radius: var(--seed-radius-r2);
13278
+ height: var(--seed-wheel-picker-item-size);
13279
+ border-radius: var(--seed-wheel-picker-selection-indicator-corner-radius, var(--seed-radius-r2));
13881
13280
  background-color: var(--seed-color-bg-neutral-weak);
13882
13281
  pointer-events: none;
13883
13282
  position: absolute;
@@ -13885,24 +13284,24 @@
13885
13284
  transform: translateY(-50%);
13886
13285
  }
13887
13286
 
13888
- .seed-wheel-picker-public__root--size_small {
13889
- height: var(--seed-wheel-picker-public-viewport-size, 180px);
13890
- --seed-wheel-picker-public-item-size: 36px;
13891
- --seed-wheel-picker-public-scroll-fog-max-height: 108px;
13287
+ .seed-wheel-picker__root--size_small {
13288
+ height: var(--seed-wheel-picker-viewport-size, 180px);
13289
+ --seed-wheel-picker-item-size: 36px;
13290
+ --seed-wheel-picker-scroll-fog-max-height: 108px;
13892
13291
  }
13893
13292
 
13894
- .seed-wheel-picker-public__itemLabel--size_small {
13293
+ .seed-wheel-picker__itemLabel--size_small {
13895
13294
  font-size: var(--seed-font-size-t7-static);
13896
13295
  line-height: var(--seed-line-height-t7-static);
13897
13296
  }
13898
13297
 
13899
- .seed-wheel-picker-public__root--size_medium {
13900
- height: var(--seed-wheel-picker-public-viewport-size, 220px);
13901
- --seed-wheel-picker-public-item-size: 44px;
13902
- --seed-wheel-picker-public-scroll-fog-max-height: 132px;
13298
+ .seed-wheel-picker__root--size_medium {
13299
+ height: var(--seed-wheel-picker-viewport-size, 220px);
13300
+ --seed-wheel-picker-item-size: 44px;
13301
+ --seed-wheel-picker-scroll-fog-max-height: 132px;
13903
13302
  }
13904
13303
 
13905
- .seed-wheel-picker-public__itemLabel--size_medium {
13304
+ .seed-wheel-picker__itemLabel--size_medium {
13906
13305
  font-size: var(--seed-font-size-t10-static);
13907
13306
  line-height: var(--seed-line-height-t10-static);
13908
13307
  }
@@ -13922,23 +13321,23 @@
13922
13321
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13923
13322
  }
13924
13323
 
13925
- .seed-content-dialog__content {
13324
+ .seed-date-picker__root {
13325
+ --seed-box-height: var(--seed-box-height-sm, initial);
13326
+ --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13327
+ --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13328
+ }
13329
+
13330
+ .seed-dialog__content {
13926
13331
  --seed-box-width: var(--seed-box-width-sm, initial);
13927
13332
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13928
13333
  }
13929
13334
 
13930
- .seed-content-dialog__body {
13335
+ .seed-dialog__body {
13931
13336
  --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13932
13337
  --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13933
13338
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13934
13339
  }
13935
13340
 
13936
- .seed-date-picker__root {
13937
- --seed-box-height: var(--seed-box-height-sm, initial);
13938
- --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13939
- --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13940
- }
13941
-
13942
13341
  .seed-help-bubble__content {
13943
13342
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13944
13343
  }
@@ -13956,18 +13355,27 @@
13956
13355
  --seed-box-padding-right: var(--seed-box-padding-right-sm, initial);
13957
13356
  }
13958
13357
 
13959
- .seed-side-panel__content {
13358
+ .seed-popover__content {
13960
13359
  --seed-box-width: var(--seed-box-width-sm, initial);
13961
13360
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13962
13361
  }
13963
13362
 
13964
- .seed-side-panel__body {
13363
+ .seed-popover__body {
13965
13364
  --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13966
13365
  --seed-box-height: var(--seed-box-height-sm, initial);
13967
13366
  --seed-box-min-height: var(--seed-box-min-height-sm, initial);
13968
13367
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
13969
13368
  }
13970
13369
 
13370
+ .seed-side-panel__content {
13371
+ --seed-box-width: var(--seed-box-width-sm, initial);
13372
+ --seed-box-max-width: var(--seed-box-max-width-sm, initial);
13373
+ }
13374
+
13375
+ .seed-side-panel__body {
13376
+ --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
13377
+ }
13378
+
13971
13379
  .seed-skeleton {
13972
13380
  --seed-box-width: var(--seed-box-width-sm, initial);
13973
13381
  --seed-box-height: var(--seed-box-height-sm, initial);
@@ -13989,23 +13397,23 @@
13989
13397
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
13990
13398
  }
13991
13399
 
13992
- .seed-content-dialog__content {
13400
+ .seed-date-picker__root {
13401
+ --seed-box-height: var(--seed-box-height-md, initial);
13402
+ --seed-box-min-height: var(--seed-box-min-height-md, initial);
13403
+ --seed-box-max-height: var(--seed-box-max-height-md, initial);
13404
+ }
13405
+
13406
+ .seed-dialog__content {
13993
13407
  --seed-box-width: var(--seed-box-width-md, initial);
13994
13408
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
13995
13409
  }
13996
13410
 
13997
- .seed-content-dialog__body {
13411
+ .seed-dialog__body {
13998
13412
  --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
13999
13413
  --seed-box-min-height: var(--seed-box-min-height-md, initial);
14000
13414
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
14001
13415
  }
14002
13416
 
14003
- .seed-date-picker__root {
14004
- --seed-box-height: var(--seed-box-height-md, initial);
14005
- --seed-box-min-height: var(--seed-box-min-height-md, initial);
14006
- --seed-box-max-height: var(--seed-box-max-height-md, initial);
14007
- }
14008
-
14009
13417
  .seed-help-bubble__content {
14010
13418
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
14011
13419
  }
@@ -14023,18 +13431,27 @@
14023
13431
  --seed-box-padding-right: var(--seed-box-padding-right-md, initial);
14024
13432
  }
14025
13433
 
14026
- .seed-side-panel__content {
13434
+ .seed-popover__content {
14027
13435
  --seed-box-width: var(--seed-box-width-md, initial);
14028
13436
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
14029
13437
  }
14030
13438
 
14031
- .seed-side-panel__body {
13439
+ .seed-popover__body {
14032
13440
  --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
14033
13441
  --seed-box-height: var(--seed-box-height-md, initial);
14034
13442
  --seed-box-min-height: var(--seed-box-min-height-md, initial);
14035
13443
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
14036
13444
  }
14037
13445
 
13446
+ .seed-side-panel__content {
13447
+ --seed-box-width: var(--seed-box-width-md, initial);
13448
+ --seed-box-max-width: var(--seed-box-max-width-md, initial);
13449
+ }
13450
+
13451
+ .seed-side-panel__body {
13452
+ --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
13453
+ }
13454
+
14038
13455
  .seed-skeleton {
14039
13456
  --seed-box-width: var(--seed-box-width-md, initial);
14040
13457
  --seed-box-height: var(--seed-box-height-md, initial);
@@ -14056,23 +13473,23 @@
14056
13473
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14057
13474
  }
14058
13475
 
14059
- .seed-content-dialog__content {
13476
+ .seed-date-picker__root {
13477
+ --seed-box-height: var(--seed-box-height-lg, initial);
13478
+ --seed-box-min-height: var(--seed-box-min-height-lg, initial);
13479
+ --seed-box-max-height: var(--seed-box-max-height-lg, initial);
13480
+ }
13481
+
13482
+ .seed-dialog__content {
14060
13483
  --seed-box-width: var(--seed-box-width-lg, initial);
14061
13484
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14062
13485
  }
14063
13486
 
14064
- .seed-content-dialog__body {
13487
+ .seed-dialog__body {
14065
13488
  --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
14066
13489
  --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14067
13490
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14068
13491
  }
14069
13492
 
14070
- .seed-date-picker__root {
14071
- --seed-box-height: var(--seed-box-height-lg, initial);
14072
- --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14073
- --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14074
- }
14075
-
14076
13493
  .seed-help-bubble__content {
14077
13494
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14078
13495
  }
@@ -14090,18 +13507,27 @@
14090
13507
  --seed-box-padding-right: var(--seed-box-padding-right-lg, initial);
14091
13508
  }
14092
13509
 
14093
- .seed-side-panel__content {
13510
+ .seed-popover__content {
14094
13511
  --seed-box-width: var(--seed-box-width-lg, initial);
14095
13512
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
14096
13513
  }
14097
13514
 
14098
- .seed-side-panel__body {
13515
+ .seed-popover__body {
14099
13516
  --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
14100
13517
  --seed-box-height: var(--seed-box-height-lg, initial);
14101
13518
  --seed-box-min-height: var(--seed-box-min-height-lg, initial);
14102
13519
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
14103
13520
  }
14104
13521
 
13522
+ .seed-side-panel__content {
13523
+ --seed-box-width: var(--seed-box-width-lg, initial);
13524
+ --seed-box-max-width: var(--seed-box-max-width-lg, initial);
13525
+ }
13526
+
13527
+ .seed-side-panel__body {
13528
+ --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
13529
+ }
13530
+
14105
13531
  .seed-skeleton {
14106
13532
  --seed-box-width: var(--seed-box-width-lg, initial);
14107
13533
  --seed-box-height: var(--seed-box-height-lg, initial);
@@ -14123,23 +13549,23 @@
14123
13549
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14124
13550
  }
14125
13551
 
14126
- .seed-content-dialog__content {
13552
+ .seed-date-picker__root {
13553
+ --seed-box-height: var(--seed-box-height-xl, initial);
13554
+ --seed-box-min-height: var(--seed-box-min-height-xl, initial);
13555
+ --seed-box-max-height: var(--seed-box-max-height-xl, initial);
13556
+ }
13557
+
13558
+ .seed-dialog__content {
14127
13559
  --seed-box-width: var(--seed-box-width-xl, initial);
14128
13560
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14129
13561
  }
14130
13562
 
14131
- .seed-content-dialog__body {
13563
+ .seed-dialog__body {
14132
13564
  --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
14133
13565
  --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14134
13566
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14135
13567
  }
14136
13568
 
14137
- .seed-date-picker__root {
14138
- --seed-box-height: var(--seed-box-height-xl, initial);
14139
- --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14140
- --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14141
- }
14142
-
14143
13569
  .seed-help-bubble__content {
14144
13570
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14145
13571
  }
@@ -14157,18 +13583,27 @@
14157
13583
  --seed-box-padding-right: var(--seed-box-padding-right-xl, initial);
14158
13584
  }
14159
13585
 
14160
- .seed-side-panel__content {
13586
+ .seed-popover__content {
14161
13587
  --seed-box-width: var(--seed-box-width-xl, initial);
14162
13588
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
14163
13589
  }
14164
13590
 
14165
- .seed-side-panel__body {
13591
+ .seed-popover__body {
14166
13592
  --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
14167
13593
  --seed-box-height: var(--seed-box-height-xl, initial);
14168
13594
  --seed-box-min-height: var(--seed-box-min-height-xl, initial);
14169
13595
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
14170
13596
  }
14171
13597
 
13598
+ .seed-side-panel__content {
13599
+ --seed-box-width: var(--seed-box-width-xl, initial);
13600
+ --seed-box-max-width: var(--seed-box-max-width-xl, initial);
13601
+ }
13602
+
13603
+ .seed-side-panel__body {
13604
+ --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
13605
+ }
13606
+
14172
13607
  .seed-skeleton {
14173
13608
  --seed-box-width: var(--seed-box-width-xl, initial);
14174
13609
  --seed-box-height: var(--seed-box-height-xl, initial);