@seed-design/css 2.8.3 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (369) hide show
  1. package/README.md +2 -2
  2. package/all.css +853 -1409
  3. package/all.layered.css +853 -1409
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/base.css +51 -4
  7. package/base.layered.css +51 -4
  8. package/base.layered.min.css +1 -1
  9. package/base.min.css +1 -1
  10. package/package.json +8 -11
  11. package/recipes/accordion.css +3 -0
  12. package/recipes/accordion.layered.css +4 -0
  13. package/recipes/action-button.css +19 -19
  14. package/recipes/action-button.layered.css +19 -19
  15. package/recipes/alert-dialog.css +101 -0
  16. package/recipes/alert-dialog.d.ts +24 -0
  17. package/recipes/alert-dialog.layered.css +114 -0
  18. package/recipes/alert-dialog.layered.mjs +66 -0
  19. package/recipes/alert-dialog.mjs +66 -0
  20. package/recipes/app-bar-main.css +2 -1
  21. package/recipes/app-bar-main.layered.css +2 -1
  22. package/recipes/app-bar.css +5 -3
  23. package/recipes/app-bar.layered.css +5 -3
  24. package/recipes/app-screen.css +5 -1
  25. package/recipes/app-screen.layered.css +6 -6
  26. package/recipes/badge.css +83 -27
  27. package/recipes/badge.d.ts +1 -1
  28. package/recipes/badge.layered.css +63 -8
  29. package/recipes/badge.layered.mjs +8 -0
  30. package/recipes/badge.mjs +8 -0
  31. package/recipes/checkmark.css +5 -5
  32. package/recipes/checkmark.layered.css +5 -5
  33. package/recipes/chip-tabs.css +8 -8
  34. package/recipes/chip-tabs.layered.css +8 -8
  35. package/recipes/chip.css +10 -10
  36. package/recipes/chip.layered.css +10 -10
  37. package/recipes/contextual-floating-button.css +8 -8
  38. package/recipes/contextual-floating-button.layered.css +8 -8
  39. package/recipes/date-picker.css +29 -16
  40. package/recipes/date-picker.d.ts +1 -1
  41. package/recipes/date-picker.layered.css +34 -15
  42. package/recipes/date-picker.layered.mjs +6 -14
  43. package/recipes/date-picker.mjs +6 -14
  44. package/recipes/dialog.css +206 -46
  45. package/recipes/dialog.d.ts +3 -3
  46. package/recipes/dialog.layered.css +228 -46
  47. package/recipes/dialog.layered.mjs +12 -7
  48. package/recipes/dialog.mjs +12 -7
  49. package/recipes/floating-action-button.css +2 -2
  50. package/recipes/floating-action-button.layered.css +2 -2
  51. package/recipes/help-bubble.css +9 -6
  52. package/recipes/help-bubble.layered.css +10 -6
  53. package/recipes/menu-item.css +3 -0
  54. package/recipes/menu-item.layered.css +4 -0
  55. package/recipes/menu-sheet-item.css +3 -0
  56. package/recipes/menu-sheet-item.layered.css +4 -0
  57. package/recipes/notification-badge.css +1 -1
  58. package/recipes/notification-badge.layered.css +1 -1
  59. package/recipes/page-banner.css +32 -29
  60. package/recipes/page-banner.layered.css +23 -19
  61. package/recipes/pagination-page-item.css +4 -4
  62. package/recipes/pagination-page-item.layered.css +4 -4
  63. package/recipes/{content-dialog.css → popover.css} +77 -104
  64. package/recipes/popover.d.ts +21 -0
  65. package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
  66. package/recipes/popover.layered.mjs +60 -0
  67. package/recipes/popover.mjs +60 -0
  68. package/recipes/radiomark.css +5 -5
  69. package/recipes/radiomark.layered.css +5 -5
  70. package/recipes/segmented-control.css +3 -0
  71. package/recipes/segmented-control.layered.css +4 -0
  72. package/recipes/select-box.css +4 -0
  73. package/recipes/select-box.layered.css +5 -0
  74. package/recipes/select-item.css +3 -0
  75. package/recipes/select-item.layered.css +4 -0
  76. package/recipes/select-trigger.css +3 -0
  77. package/recipes/select-trigger.layered.css +4 -0
  78. package/recipes/side-panel.css +0 -33
  79. package/recipes/side-panel.layered.css +0 -33
  80. package/recipes/slider-tick.css +1 -1
  81. package/recipes/slider-tick.layered.css +1 -1
  82. package/recipes/slider.css +4 -4
  83. package/recipes/slider.layered.css +4 -4
  84. package/recipes/snackbar.css +2 -2
  85. package/recipes/snackbar.layered.css +2 -2
  86. package/recipes/switchmark.css +2 -2
  87. package/recipes/switchmark.layered.css +2 -2
  88. package/recipes/time-picker.css +2 -5
  89. package/recipes/time-picker.d.ts +1 -1
  90. package/recipes/time-picker.layered.css +2 -3
  91. package/recipes/time-picker.layered.mjs +0 -12
  92. package/recipes/time-picker.mjs +0 -12
  93. package/recipes/toggle-button.css +4 -4
  94. package/recipes/toggle-button.layered.css +4 -4
  95. package/recipes/wheel-picker.css +42 -3
  96. package/recipes/wheel-picker.d.ts +5 -2
  97. package/recipes/wheel-picker.layered.css +47 -3
  98. package/recipes/wheel-picker.layered.mjs +13 -2
  99. package/recipes/wheel-picker.mjs +13 -2
  100. package/vars/color/bg.d.ts +8 -4
  101. package/vars/color/bg.mjs +3 -1
  102. package/vars/color/fg.d.ts +13 -1
  103. package/vars/color/fg.mjs +6 -0
  104. package/vars/component/index.d.ts +1 -104
  105. package/vars/component/index.mjs +1 -104
  106. package/recipes/action-chip.css +0 -75
  107. package/recipes/action-chip.d.ts +0 -26
  108. package/recipes/action-chip.layered.css +0 -84
  109. package/recipes/action-chip.layered.mjs +0 -51
  110. package/recipes/action-chip.mjs +0 -51
  111. package/recipes/action-sheet-item.css +0 -32
  112. package/recipes/action-sheet-item.d.ts +0 -22
  113. package/recipes/action-sheet-item.layered.css +0 -38
  114. package/recipes/action-sheet-item.layered.mjs +0 -29
  115. package/recipes/action-sheet-item.mjs +0 -29
  116. package/recipes/action-sheet.css +0 -125
  117. package/recipes/action-sheet.d.ts +0 -21
  118. package/recipes/action-sheet.layered.css +0 -134
  119. package/recipes/action-sheet.layered.mjs +0 -60
  120. package/recipes/action-sheet.mjs +0 -60
  121. package/recipes/content-dialog.d.ts +0 -24
  122. package/recipes/content-dialog.layered.mjs +0 -71
  123. package/recipes/content-dialog.mjs +0 -71
  124. package/recipes/control-chip.css +0 -88
  125. package/recipes/control-chip.d.ts +0 -26
  126. package/recipes/control-chip.layered.css +0 -99
  127. package/recipes/control-chip.layered.mjs +0 -51
  128. package/recipes/control-chip.mjs +0 -51
  129. package/recipes/extended-action-sheet-item.css +0 -31
  130. package/recipes/extended-action-sheet-item.d.ts +0 -22
  131. package/recipes/extended-action-sheet-item.layered.css +0 -38
  132. package/recipes/extended-action-sheet-item.layered.mjs +0 -29
  133. package/recipes/extended-action-sheet-item.mjs +0 -29
  134. package/recipes/extended-action-sheet.css +0 -123
  135. package/recipes/extended-action-sheet.d.ts +0 -21
  136. package/recipes/extended-action-sheet.layered.css +0 -132
  137. package/recipes/extended-action-sheet.layered.mjs +0 -64
  138. package/recipes/extended-action-sheet.mjs +0 -64
  139. package/recipes/extended-fab.css +0 -66
  140. package/recipes/extended-fab.d.ts +0 -26
  141. package/recipes/extended-fab.layered.css +0 -79
  142. package/recipes/extended-fab.layered.mjs +0 -34
  143. package/recipes/extended-fab.mjs +0 -34
  144. package/recipes/fab.css +0 -31
  145. package/recipes/fab.d.ts +0 -19
  146. package/recipes/fab.layered.css +0 -37
  147. package/recipes/fab.layered.mjs +0 -22
  148. package/recipes/fab.mjs +0 -22
  149. package/recipes/inline-banner.css +0 -180
  150. package/recipes/inline-banner.d.ts +0 -24
  151. package/recipes/inline-banner.layered.css +0 -161
  152. package/recipes/inline-banner.layered.mjs +0 -64
  153. package/recipes/inline-banner.mjs +0 -64
  154. package/recipes/link-content.css +0 -41
  155. package/recipes/link-content.d.ts +0 -26
  156. package/recipes/link-content.layered.css +0 -48
  157. package/recipes/link-content.layered.mjs +0 -35
  158. package/recipes/link-content.mjs +0 -35
  159. package/recipes/wheel-picker-public.css +0 -124
  160. package/recipes/wheel-picker-public.d.ts +0 -24
  161. package/recipes/wheel-picker-public.layered.css +0 -144
  162. package/recipes/wheel-picker-public.layered.mjs +0 -63
  163. package/recipes/wheel-picker-public.mjs +0 -63
  164. package/vars/component/accordion-item.d.ts +0 -132
  165. package/vars/component/accordion-item.mjs +0 -126
  166. package/vars/component/accordion.d.ts +0 -22
  167. package/vars/component/accordion.mjs +0 -16
  168. package/vars/component/action-button.d.ts +0 -660
  169. package/vars/component/action-button.mjs +0 -541
  170. package/vars/component/action-chip.d.ts +0 -132
  171. package/vars/component/action-chip.mjs +0 -132
  172. package/vars/component/action-sheet-close-button.d.ts +0 -23
  173. package/vars/component/action-sheet-close-button.mjs +0 -23
  174. package/vars/component/action-sheet-item.d.ts +0 -36
  175. package/vars/component/action-sheet-item.mjs +0 -36
  176. package/vars/component/action-sheet.d.ts +0 -46
  177. package/vars/component/action-sheet.mjs +0 -46
  178. package/vars/component/alert-dialog.d.ts +0 -52
  179. package/vars/component/alert-dialog.mjs +0 -52
  180. package/vars/component/attachment-input-dropzone.d.ts +0 -32
  181. package/vars/component/attachment-input-dropzone.mjs +0 -30
  182. package/vars/component/attachment-input-item-action-button.d.ts +0 -37
  183. package/vars/component/attachment-input-item-action-button.mjs +0 -37
  184. package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
  185. package/vars/component/attachment-input-item-remove-button.mjs +0 -28
  186. package/vars/component/attachment-input-item.d.ts +0 -103
  187. package/vars/component/attachment-input-item.mjs +0 -102
  188. package/vars/component/attachment-input-trigger.d.ts +0 -46
  189. package/vars/component/attachment-input-trigger.mjs +0 -46
  190. package/vars/component/attachment-input.d.ts +0 -14
  191. package/vars/component/attachment-input.mjs +0 -12
  192. package/vars/component/avatar-stack.d.ts +0 -110
  193. package/vars/component/avatar-stack.mjs +0 -110
  194. package/vars/component/avatar.d.ts +0 -204
  195. package/vars/component/avatar.mjs +0 -162
  196. package/vars/component/badge.d.ts +0 -316
  197. package/vars/component/badge.mjs +0 -236
  198. package/vars/component/bottom-sheet-close-button.d.ts +0 -21
  199. package/vars/component/bottom-sheet-close-button.mjs +0 -21
  200. package/vars/component/bottom-sheet-handle.d.ts +0 -24
  201. package/vars/component/bottom-sheet-handle.mjs +0 -24
  202. package/vars/component/bottom-sheet.d.ts +0 -86
  203. package/vars/component/bottom-sheet.mjs +0 -86
  204. package/vars/component/callout-close-button.d.ts +0 -81
  205. package/vars/component/callout-close-button.mjs +0 -63
  206. package/vars/component/callout.d.ts +0 -232
  207. package/vars/component/callout.mjs +0 -200
  208. package/vars/component/checkbox-group.d.ts +0 -9
  209. package/vars/component/checkbox-group.mjs +0 -9
  210. package/vars/component/checkbox.d.ts +0 -56
  211. package/vars/component/checkbox.mjs +0 -53
  212. package/vars/component/checkmark.d.ts +0 -195
  213. package/vars/component/checkmark.mjs +0 -165
  214. package/vars/component/chip-tablist.d.ts +0 -24
  215. package/vars/component/chip-tablist.mjs +0 -24
  216. package/vars/component/chip.d.ts +0 -321
  217. package/vars/component/chip.mjs +0 -303
  218. package/vars/component/content-placeholder.d.ts +0 -28
  219. package/vars/component/content-placeholder.mjs +0 -27
  220. package/vars/component/contextual-floating-button.d.ts +0 -144
  221. package/vars/component/contextual-floating-button.mjs +0 -132
  222. package/vars/component/control-chip.d.ts +0 -158
  223. package/vars/component/control-chip.mjs +0 -158
  224. package/vars/component/date-picker.d.ts +0 -103
  225. package/vars/component/date-picker.mjs +0 -103
  226. package/vars/component/dialog-close-button.d.ts +0 -24
  227. package/vars/component/dialog-close-button.mjs +0 -24
  228. package/vars/component/dialog.d.ts +0 -91
  229. package/vars/component/dialog.mjs +0 -83
  230. package/vars/component/divider.d.ts +0 -9
  231. package/vars/component/divider.mjs +0 -9
  232. package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
  233. package/vars/component/extended-action-sheet-close-button.mjs +0 -24
  234. package/vars/component/extended-action-sheet-item.d.ts +0 -46
  235. package/vars/component/extended-action-sheet-item.mjs +0 -46
  236. package/vars/component/extended-action-sheet.d.ts +0 -55
  237. package/vars/component/extended-action-sheet.mjs +0 -55
  238. package/vars/component/extended-fab.d.ts +0 -88
  239. package/vars/component/extended-fab.mjs +0 -82
  240. package/vars/component/fab.d.ts +0 -21
  241. package/vars/component/fab.mjs +0 -21
  242. package/vars/component/field-label.d.ts +0 -25
  243. package/vars/component/field-label.mjs +0 -25
  244. package/vars/component/field.d.ts +0 -78
  245. package/vars/component/field.mjs +0 -72
  246. package/vars/component/floating-action-button.d.ts +0 -60
  247. package/vars/component/floating-action-button.mjs +0 -54
  248. package/vars/component/help-bubble.d.ts +0 -55
  249. package/vars/component/help-bubble.mjs +0 -52
  250. package/vars/component/identity-placeholder.d.ts +0 -12
  251. package/vars/component/identity-placeholder.mjs +0 -12
  252. package/vars/component/image-frame-floater.d.ts +0 -10
  253. package/vars/component/image-frame-floater.mjs +0 -9
  254. package/vars/component/image-frame-indicator.d.ts +0 -20
  255. package/vars/component/image-frame-indicator.mjs +0 -18
  256. package/vars/component/image-frame-reaction-button.d.ts +0 -60
  257. package/vars/component/image-frame-reaction-button.mjs +0 -51
  258. package/vars/component/image-frame.d.ts +0 -27
  259. package/vars/component/image-frame.mjs +0 -18
  260. package/vars/component/inline-banner.d.ts +0 -191
  261. package/vars/component/inline-banner.mjs +0 -191
  262. package/vars/component/input-button.d.ts +0 -162
  263. package/vars/component/input-button.mjs +0 -155
  264. package/vars/component/link-content.d.ts +0 -58
  265. package/vars/component/link-content.mjs +0 -58
  266. package/vars/component/list-header.d.ts +0 -29
  267. package/vars/component/list-header.mjs +0 -29
  268. package/vars/component/list-item.d.ts +0 -85
  269. package/vars/component/list-item.mjs +0 -84
  270. package/vars/component/manner-temp-badge.d.ts +0 -117
  271. package/vars/component/manner-temp-badge.mjs +0 -117
  272. package/vars/component/manner-temp.d.ts +0 -88
  273. package/vars/component/manner-temp.mjs +0 -88
  274. package/vars/component/menu-item.d.ts +0 -129
  275. package/vars/component/menu-item.mjs +0 -117
  276. package/vars/component/menu-sheet-close-button.d.ts +0 -24
  277. package/vars/component/menu-sheet-close-button.mjs +0 -24
  278. package/vars/component/menu-sheet-item.d.ts +0 -69
  279. package/vars/component/menu-sheet-item.mjs +0 -57
  280. package/vars/component/menu-sheet.d.ts +0 -56
  281. package/vars/component/menu-sheet.mjs +0 -56
  282. package/vars/component/menu.d.ts +0 -68
  283. package/vars/component/menu.mjs +0 -60
  284. package/vars/component/notification-badge.d.ts +0 -48
  285. package/vars/component/notification-badge.mjs +0 -42
  286. package/vars/component/page-banner-close-button.d.ts +0 -133
  287. package/vars/component/page-banner-close-button.mjs +0 -99
  288. package/vars/component/page-banner.d.ts +0 -385
  289. package/vars/component/page-banner.mjs +0 -339
  290. package/vars/component/pagination-button.d.ts +0 -33
  291. package/vars/component/pagination-button.mjs +0 -33
  292. package/vars/component/pagination-page-item.d.ts +0 -54
  293. package/vars/component/pagination-page-item.mjs +0 -54
  294. package/vars/component/progress-circle.d.ts +0 -88
  295. package/vars/component/progress-circle.mjs +0 -67
  296. package/vars/component/quantity-picker-button.d.ts +0 -78
  297. package/vars/component/quantity-picker-button.mjs +0 -78
  298. package/vars/component/quantity-picker.d.ts +0 -80
  299. package/vars/component/quantity-picker.mjs +0 -80
  300. package/vars/component/radio-group.d.ts +0 -9
  301. package/vars/component/radio-group.mjs +0 -9
  302. package/vars/component/radio.d.ts +0 -56
  303. package/vars/component/radio.mjs +0 -53
  304. package/vars/component/radiomark.d.ts +0 -117
  305. package/vars/component/radiomark.mjs +0 -117
  306. package/vars/component/reaction-button.d.ts +0 -136
  307. package/vars/component/reaction-button.mjs +0 -136
  308. package/vars/component/scroll-fog.d.ts +0 -78
  309. package/vars/component/scroll-fog.mjs +0 -78
  310. package/vars/component/segmented-control-indicator.d.ts +0 -24
  311. package/vars/component/segmented-control-indicator.mjs +0 -24
  312. package/vars/component/segmented-control-item.d.ts +0 -41
  313. package/vars/component/segmented-control-item.mjs +0 -41
  314. package/vars/component/segmented-control.d.ts +0 -11
  315. package/vars/component/segmented-control.mjs +0 -11
  316. package/vars/component/select-box-checkmark.d.ts +0 -40
  317. package/vars/component/select-box-checkmark.mjs +0 -40
  318. package/vars/component/select-box-group.d.ts +0 -10
  319. package/vars/component/select-box-group.mjs +0 -10
  320. package/vars/component/select-box.d.ts +0 -107
  321. package/vars/component/select-box.mjs +0 -102
  322. package/vars/component/select-item.d.ts +0 -101
  323. package/vars/component/select-item.mjs +0 -95
  324. package/vars/component/select-trigger.d.ts +0 -127
  325. package/vars/component/select-trigger.mjs +0 -120
  326. package/vars/component/select.d.ts +0 -62
  327. package/vars/component/select.mjs +0 -54
  328. package/vars/component/side-panel-close-button.d.ts +0 -24
  329. package/vars/component/side-panel-close-button.mjs +0 -24
  330. package/vars/component/side-panel.d.ts +0 -97
  331. package/vars/component/side-panel.mjs +0 -85
  332. package/vars/component/skeleton.d.ts +0 -80
  333. package/vars/component/skeleton.mjs +0 -62
  334. package/vars/component/slider-thumb.d.ts +0 -25
  335. package/vars/component/slider-thumb.mjs +0 -25
  336. package/vars/component/slider-tick.d.ts +0 -23
  337. package/vars/component/slider-tick.mjs +0 -23
  338. package/vars/component/slider.d.ts +0 -81
  339. package/vars/component/slider.mjs +0 -78
  340. package/vars/component/snackbar.d.ts +0 -65
  341. package/vars/component/snackbar.mjs +0 -65
  342. package/vars/component/switch.d.ts +0 -56
  343. package/vars/component/switch.mjs +0 -53
  344. package/vars/component/switchmark.d.ts +0 -114
  345. package/vars/component/switchmark.mjs +0 -112
  346. package/vars/component/tab.d.ts +0 -47
  347. package/vars/component/tab.mjs +0 -47
  348. package/vars/component/tablist.d.ts +0 -51
  349. package/vars/component/tablist.mjs +0 -51
  350. package/vars/component/tag-group-item.d.ts +0 -122
  351. package/vars/component/tag-group-item.mjs +0 -122
  352. package/vars/component/tag-group.d.ts +0 -34
  353. package/vars/component/tag-group.mjs +0 -34
  354. package/vars/component/text-button.d.ts +0 -23
  355. package/vars/component/text-button.mjs +0 -23
  356. package/vars/component/text-input.d.ts +0 -292
  357. package/vars/component/text-input.mjs +0 -263
  358. package/vars/component/time-picker.d.ts +0 -27
  359. package/vars/component/time-picker.mjs +0 -27
  360. package/vars/component/toggle-button.d.ts +0 -213
  361. package/vars/component/toggle-button.mjs +0 -207
  362. package/vars/component/top-navigation-icon-button.d.ts +0 -45
  363. package/vars/component/top-navigation-icon-button.mjs +0 -45
  364. package/vars/component/top-navigation-text-button.d.ts +0 -61
  365. package/vars/component/top-navigation-text-button.mjs +0 -60
  366. package/vars/component/top-navigation.d.ts +0 -121
  367. package/vars/component/top-navigation.mjs +0 -112
  368. package/vars/component/wheel-picker.d.ts +0 -72
  369. package/vars/component/wheel-picker.mjs +0 -72
package/recipes/page-banner.css CHANGED
@@ -29,6 +29,9 @@
29
29
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
30
30
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
31
31
  }
32
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
33
+ --seed-content-scale: var(--seed-feedback-scale);
34
+ }
32
35
  .seed-page-banner__content {
33
36
  display: flex;
34
37
  flex-wrap: wrap;
@@ -151,31 +154,31 @@
151
154
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
152
155
  }
153
156
  .seed-page-banner__root--tone_neutral-variant_solid {
154
- background-color: var(--seed-color-bg-neutral-inverted);
155
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
156
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
157
+ background-color: var(--seed-color-bg-neutral-solid);
158
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
159
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
157
160
  }
158
161
  @media (hover: hover) and (pointer: fine) {
159
162
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
160
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
163
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
161
164
  }
162
165
  }
163
166
  @media not all and (hover: hover) and (pointer: fine) {
164
167
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
165
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
168
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
166
169
  }
167
170
  }
168
171
  .seed-page-banner__title--tone_neutral-variant_solid {
169
- color: var(--seed-color-fg-neutral-inverted);
172
+ color: var(--seed-color-fg-on-neutral-solid);
170
173
  }
171
174
  .seed-page-banner__description--tone_neutral-variant_solid {
172
- color: var(--seed-color-fg-neutral-inverted);
175
+ color: var(--seed-color-fg-on-neutral-solid);
173
176
  }
174
177
  .seed-page-banner__button--tone_neutral-variant_solid {
175
- color: var(--seed-color-fg-neutral-inverted);
178
+ color: var(--seed-color-fg-on-neutral-solid);
176
179
  }
177
180
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
178
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
181
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
179
182
  }
180
183
  .seed-page-banner__root--tone_informative-variant_weak {
181
184
  background-color: var(--seed-color-bg-informative-weak);
@@ -206,8 +209,8 @@
206
209
  }
207
210
  .seed-page-banner__root--tone_informative-variant_solid {
208
211
  background-color: var(--seed-color-bg-informative-solid);
209
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
210
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
212
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
213
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
211
214
  }
212
215
  @media (hover: hover) and (pointer: fine) {
213
216
  .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -220,13 +223,13 @@
220
223
  }
221
224
  }
222
225
  .seed-page-banner__title--tone_informative-variant_solid {
223
- color: var(--seed-color-palette-static-white);
226
+ color: var(--seed-color-fg-on-informative-solid);
224
227
  }
225
228
  .seed-page-banner__description--tone_informative-variant_solid {
226
- color: var(--seed-color-palette-static-white);
229
+ color: var(--seed-color-fg-on-informative-solid);
227
230
  }
228
231
  .seed-page-banner__button--tone_informative-variant_solid {
229
- color: var(--seed-color-palette-static-white);
232
+ color: var(--seed-color-fg-on-informative-solid);
230
233
  }
231
234
  .seed-page-banner__closeButton--tone_informative-variant_solid {
232
235
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
@@ -260,8 +263,8 @@
260
263
  }
261
264
  .seed-page-banner__root--tone_positive-variant_solid {
262
265
  background-color: var(--seed-color-bg-positive-solid);
263
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
264
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
266
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
267
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
265
268
  }
266
269
  @media (hover: hover) and (pointer: fine) {
267
270
  .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -274,13 +277,13 @@
274
277
  }
275
278
  }
276
279
  .seed-page-banner__title--tone_positive-variant_solid {
277
- color: var(--seed-color-palette-static-white);
280
+ color: var(--seed-color-fg-on-positive-solid);
278
281
  }
279
282
  .seed-page-banner__description--tone_positive-variant_solid {
280
- color: var(--seed-color-palette-static-white);
283
+ color: var(--seed-color-fg-on-positive-solid);
281
284
  }
282
285
  .seed-page-banner__button--tone_positive-variant_solid {
283
- color: var(--seed-color-palette-static-white);
286
+ color: var(--seed-color-fg-on-positive-solid);
284
287
  }
285
288
  .seed-page-banner__closeButton--tone_positive-variant_solid {
286
289
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
@@ -314,8 +317,8 @@
314
317
  }
315
318
  .seed-page-banner__root--tone_warning-variant_solid {
316
319
  background-color: var(--seed-color-bg-warning-solid);
317
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
318
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
320
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
321
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
319
322
  }
320
323
  @media (hover: hover) and (pointer: fine) {
321
324
  .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -328,13 +331,13 @@
328
331
  }
329
332
  }
330
333
  .seed-page-banner__title--tone_warning-variant_solid {
331
- color: var(--seed-color-palette-static-black-alpha-900);
334
+ color: var(--seed-color-fg-on-warning-solid);
332
335
  }
333
336
  .seed-page-banner__description--tone_warning-variant_solid {
334
- color: var(--seed-color-palette-static-black-alpha-900);
337
+ color: var(--seed-color-fg-on-warning-solid);
335
338
  }
336
339
  .seed-page-banner__button--tone_warning-variant_solid {
337
- color: var(--seed-color-palette-static-black-alpha-900);
340
+ color: var(--seed-color-fg-on-warning-solid);
338
341
  }
339
342
  .seed-page-banner__closeButton--tone_warning-variant_solid {
340
343
  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -368,8 +371,8 @@
368
371
  }
369
372
  .seed-page-banner__root--tone_critical-variant_solid {
370
373
  background-color: var(--seed-color-bg-critical-solid);
371
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
372
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
374
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
375
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
373
376
  }
374
377
  @media (hover: hover) and (pointer: fine) {
375
378
  .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -382,13 +385,13 @@
382
385
  }
383
386
  }
384
387
  .seed-page-banner__title--tone_critical-variant_solid {
385
- color: var(--seed-color-palette-static-white);
388
+ color: var(--seed-color-fg-on-critical-solid);
386
389
  }
387
390
  .seed-page-banner__description--tone_critical-variant_solid {
388
- color: var(--seed-color-palette-static-white);
391
+ color: var(--seed-color-fg-on-critical-solid);
389
392
  }
390
393
  .seed-page-banner__button--tone_critical-variant_solid {
391
- color: var(--seed-color-palette-static-white);
394
+ color: var(--seed-color-fg-on-critical-solid);
392
395
  }
393
396
  .seed-page-banner__closeButton--tone_critical-variant_solid {
394
397
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
package/recipes/page-banner.layered.css CHANGED
@@ -33,6 +33,10 @@
33
33
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
34
34
  }
35
35
 
36
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
37
+ --seed-content-scale: var(--seed-feedback-scale);
38
+ }
39
+
36
40
  .seed-page-banner__content {
37
41
  justify-content: space-between;
38
42
  align-items: center;
@@ -169,29 +173,29 @@
169
173
  }
170
174
 
171
175
  .seed-page-banner__root--tone_neutral-variant_solid {
172
- background-color: var(--seed-color-bg-neutral-inverted);
173
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
174
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
176
+ background-color: var(--seed-color-bg-neutral-solid);
177
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
178
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
175
179
  }
176
180
 
177
181
  @media (hover: hover) and (pointer: fine) {
178
182
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
179
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
183
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
180
184
  }
181
185
  }
182
186
 
183
187
  @media not all and (hover: hover) and (pointer: fine) {
184
188
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
185
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
189
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
186
190
  }
187
191
  }
188
192
 
189
193
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
190
- color: var(--seed-color-fg-neutral-inverted);
194
+ color: var(--seed-color-fg-on-neutral-solid);
191
195
  }
192
196
 
193
197
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
194
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
198
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
195
199
  }
196
200
 
197
201
  .seed-page-banner__root--tone_informative-variant_weak {
@@ -222,8 +226,8 @@
222
226
 
223
227
  .seed-page-banner__root--tone_informative-variant_solid {
224
228
  background-color: var(--seed-color-bg-informative-solid);
225
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
226
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
229
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
230
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
227
231
  }
228
232
 
229
233
  @media (hover: hover) and (pointer: fine) {
@@ -239,7 +243,7 @@
239
243
  }
240
244
 
241
245
  .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
242
- color: var(--seed-color-palette-static-white);
246
+ color: var(--seed-color-fg-on-informative-solid);
243
247
  }
244
248
 
245
249
  .seed-page-banner__closeButton--tone_informative-variant_solid {
@@ -274,8 +278,8 @@
274
278
 
275
279
  .seed-page-banner__root--tone_positive-variant_solid {
276
280
  background-color: var(--seed-color-bg-positive-solid);
277
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
278
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
281
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
282
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
279
283
  }
280
284
 
281
285
  @media (hover: hover) and (pointer: fine) {
@@ -291,7 +295,7 @@
291
295
  }
292
296
 
293
297
  .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
294
- color: var(--seed-color-palette-static-white);
298
+ color: var(--seed-color-fg-on-positive-solid);
295
299
  }
296
300
 
297
301
  .seed-page-banner__closeButton--tone_positive-variant_solid {
@@ -326,8 +330,8 @@
326
330
 
327
331
  .seed-page-banner__root--tone_warning-variant_solid {
328
332
  background-color: var(--seed-color-bg-warning-solid);
329
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
330
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
333
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
334
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
331
335
  }
332
336
 
333
337
  @media (hover: hover) and (pointer: fine) {
@@ -343,7 +347,7 @@
343
347
  }
344
348
 
345
349
  .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
346
- color: var(--seed-color-palette-static-black-alpha-900);
350
+ color: var(--seed-color-fg-on-warning-solid);
347
351
  }
348
352
 
349
353
  .seed-page-banner__closeButton--tone_warning-variant_solid {
@@ -378,8 +382,8 @@
378
382
 
379
383
  .seed-page-banner__root--tone_critical-variant_solid {
380
384
  background-color: var(--seed-color-bg-critical-solid);
381
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
382
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
385
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
386
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
383
387
  }
384
388
 
385
389
  @media (hover: hover) and (pointer: fine) {
@@ -395,7 +399,7 @@
395
399
  }
396
400
 
397
401
  .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
398
- color: var(--seed-color-palette-static-white);
402
+ color: var(--seed-color-fg-on-critical-solid);
399
403
  }
400
404
 
401
405
  .seed-page-banner__closeButton--tone_critical-variant_solid {
package/recipes/pagination-page-item.css CHANGED
@@ -66,19 +66,19 @@
66
66
  scale: var(--seed-scale-s97);
67
67
  }
68
68
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]) {
69
- color: var(--seed-color-fg-neutral-inverted);
69
+ color: var(--seed-color-fg-on-neutral-solid);
70
70
  }
71
71
  .seed-pagination-page-item:is([aria-selected=true], [data-selected])::before {
72
- background-color: var(--seed-color-bg-neutral-inverted);
72
+ background-color: var(--seed-color-bg-neutral-solid);
73
73
  }
74
74
  @media (hover: hover) and (pointer: fine) {
75
75
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled]))::before {
76
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
76
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
77
77
  }
78
78
  }
79
79
  @media not all and (hover: hover) and (pointer: fine) {
80
80
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled]))::before {
81
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
81
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
82
82
  }
83
83
  }
84
84
  .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
package/recipes/pagination-page-item.layered.css CHANGED
@@ -76,22 +76,22 @@
76
76
  }
77
77
 
78
78
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
79
- color: var(--seed-color-fg-neutral-inverted);
79
+ color: var(--seed-color-fg-on-neutral-solid);
80
80
  }
81
81
 
82
82
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
83
- background-color: var(--seed-color-bg-neutral-inverted);
83
+ background-color: var(--seed-color-bg-neutral-solid);
84
84
  }
85
85
 
86
86
  @media (hover: hover) and (pointer: fine) {
87
87
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
88
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
88
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
89
89
  }
90
90
  }
91
91
 
92
92
  @media not all and (hover: hover) and (pointer: fine) {
93
93
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
94
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
94
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
95
95
  }
96
96
  }
97
97
 
package/recipes/{content-dialog.css → popover.css} RENAMED
@@ -1,84 +1,45 @@
1
- .seed-content-dialog__positioner {
2
- position: fixed;
3
- display: flex;
4
- justify-content: center;
5
- align-items: center;
6
- inset: 0;
7
- overscroll-behavior-y: none;
8
- --dialog-z-index: 2;
9
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
10
- }
11
- .seed-content-dialog__backdrop {
12
- position: fixed;
13
- inset: 0;
14
- background: var(--seed-color-bg-overlay);
15
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
16
- }
17
- .seed-content-dialog__backdrop:is([data-state="open"], [data-open]) {
18
- animation: seed-enter;
19
- animation-timing-function: var(--seed-timing-function-enter);
20
- animation-duration: var(--seed-duration-d2);
21
- --seed-enter-translate-x: 0;
22
- --seed-enter-translate-y: 0;
23
- --seed-enter-opacity: 0;
24
- --seed-enter-scale: 1;
25
- }
26
- .seed-content-dialog__backdrop:not(:is([data-state="open"], [data-open])) {
27
- animation: seed-exit;
28
- animation-timing-function: var(--seed-timing-function-exit);
29
- animation-duration: var(--seed-duration-d2);
30
- animation-fill-mode: forwards;
31
- --seed-exit-translate-x: 0;
32
- --seed-exit-translate-y: 0;
33
- --seed-exit-opacity: 0;
34
- --seed-exit-scale: 1;
1
+ .seed-popover__positioner {
2
+ --popover-z-index: 99999;
3
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4
+ outline: none;
5
+ max-width: var(--seed-popover-available-width, none);
35
6
  }
36
- .seed-content-dialog__content {
7
+ .seed-popover__content {
37
8
  position: relative;
38
- outline: none;
9
+ box-sizing: border-box;
39
10
  display: flex;
40
- flex: 0 0 auto;
41
11
  flex-direction: column;
42
- box-sizing: border-box;
43
- word-break: break-all;
44
- z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
45
12
  background: var(--seed-color-bg-layer-floating);
46
13
  border-radius: var(--seed-radius-r5);
47
- --content-dialog-default-width: calc(0.9 * 100vw);
48
- --content-dialog-default-max-width: calc(0.9 * 100%);
49
- --seed-box-width-base: var(--content-dialog-default-width);
14
+ box-shadow: var(--seed-shadow-s3);
15
+ --seed-box-width-base: auto;
50
16
  --seed-box-width-sm: var(--seed-box-width-base, initial);
51
17
  --seed-box-width-md: var(--seed-box-width-sm, initial);
52
18
  --seed-box-width-lg: var(--seed-box-width-md, initial);
53
19
  --seed-box-width-xl: var(--seed-box-width-lg, initial);
54
20
  --seed-box-width: var(--seed-box-width-base, initial);
55
- --seed-box-max-width-base: var(--content-dialog-default-max-width);
21
+ --seed-box-max-width-base: min(480px, var(--seed-popover-available-width, 480px));
56
22
  --seed-box-max-width-sm: var(--seed-box-max-width-base, initial);
57
23
  --seed-box-max-width-md: var(--seed-box-max-width-sm, initial);
58
24
  --seed-box-max-width-lg: var(--seed-box-max-width-md, initial);
59
25
  --seed-box-max-width-xl: var(--seed-box-max-width-lg, initial);
60
26
  --seed-box-max-width: var(--seed-box-max-width-base, initial);
61
27
  width: var(--seed-box-width);
28
+ min-width: min(320px, var(--seed-popover-available-width, 320px));
62
29
  max-width: var(--seed-box-max-width);
63
- max-height: calc(0.8 * 100vh);
64
- max-height: calc(0.8 * 100dvh);
65
- }
66
- @media (min-width: 768px) {
67
- .seed-content-dialog__content {
68
- --content-dialog-default-width: var(--content-dialog-size-width);
69
- --content-dialog-default-max-width: calc(100vw - 2 * var(--seed-dimension-x5));
70
- }
30
+ max-height: min(600px, var(--seed-popover-available-height, 600px));
31
+ transform-origin: var(--seed-popover-transform-origin);
71
32
  }
72
- .seed-content-dialog__content:is([data-state="open"], [data-open]) {
33
+ .seed-popover__content:is([data-state="open"], [data-open]) {
73
34
  animation: seed-enter;
74
- animation-timing-function: var(--seed-timing-function-enter-expressive);
75
- animation-duration: var(--seed-duration-d4);
35
+ animation-timing-function: var(--seed-timing-function-enter);
36
+ animation-duration: var(--seed-duration-d3);
76
37
  --seed-enter-translate-x: 0;
77
38
  --seed-enter-translate-y: 0;
78
39
  --seed-enter-opacity: 0;
79
- --seed-enter-scale: 1.3;
40
+ --seed-enter-scale: 0.95;
80
41
  }
81
- .seed-content-dialog__content:not(:is([data-state="open"], [data-open])) {
42
+ .seed-popover__content:not(:is([data-state="open"], [data-open])) {
82
43
  animation: seed-exit;
83
44
  animation-timing-function: var(--seed-timing-function-exit);
84
45
  animation-duration: var(--seed-duration-d2);
@@ -86,21 +47,44 @@
86
47
  --seed-exit-translate-x: 0;
87
48
  --seed-exit-translate-y: 0;
88
49
  --seed-exit-opacity: 0;
89
- --seed-exit-scale: 1;
50
+ --seed-exit-scale: 0.95;
51
+ }
52
+ .seed-popover__content:is([hidden], [data-hidden]) {
53
+ display: none !important;
54
+ }
55
+ .seed-popover__content:is(:focus, [data-focus]) {
56
+ outline: none;
90
57
  }
91
- .seed-content-dialog__header {
58
+ .seed-popover__header {
92
59
  display: flex;
93
60
  flex-direction: column;
94
61
  flex-shrink: 0;
62
+ box-sizing: border-box;
95
63
  gap: var(--seed-dimension-x1_5);
96
64
  padding-inline: var(--seed-dimension-x6);
97
65
  padding-top: var(--seed-dimension-x6);
98
66
  padding-bottom: var(--seed-dimension-x4);
99
67
  }
100
- .seed-content-dialog__header[data-show-close-button] {
101
- padding-right: calc(var(--seed-dimension-x6) + 22px + var(--seed-dimension-x1_5));
68
+ .seed-popover__header[data-show-close-button] {
69
+ padding-right: calc(24px + 22px + var(--seed-dimension-x1_5));
102
70
  }
103
- .seed-content-dialog__body {
71
+ .seed-popover__title {
72
+ color: var(--seed-color-fg-neutral);
73
+ font-size: var(--seed-font-size-t7);
74
+ line-height: var(--seed-line-height-t7);
75
+ font-weight: var(--seed-font-weight-bold);
76
+ word-break: keep-all;
77
+ margin: 0;
78
+ }
79
+ .seed-popover__description {
80
+ color: var(--seed-color-fg-neutral-muted);
81
+ font-size: var(--seed-font-size-t4);
82
+ line-height: var(--seed-line-height-t4);
83
+ font-weight: var(--seed-font-weight-regular);
84
+ margin: 0;
85
+ white-space: pre-wrap;
86
+ }
87
+ .seed-popover__body {
104
88
  display: flex;
105
89
  flex-direction: column;
106
90
  box-sizing: border-box;
@@ -112,6 +96,12 @@
112
96
  --seed-box-padding-x-lg: var(--seed-box-padding-x-md, initial);
113
97
  --seed-box-padding-x-xl: var(--seed-box-padding-x-lg, initial);
114
98
  --seed-box-padding-x: var(--seed-box-padding-x-base, initial);
99
+ --seed-box-height-base: auto;
100
+ --seed-box-height-sm: var(--seed-box-height-base, initial);
101
+ --seed-box-height-md: var(--seed-box-height-sm, initial);
102
+ --seed-box-height-lg: var(--seed-box-height-md, initial);
103
+ --seed-box-height-xl: var(--seed-box-height-lg, initial);
104
+ --seed-box-height: var(--seed-box-height-base, initial);
115
105
  --seed-box-min-height-base: 0;
116
106
  --seed-box-min-height-sm: var(--seed-box-min-height-base, initial);
117
107
  --seed-box-min-height-md: var(--seed-box-min-height-sm, initial);
@@ -127,61 +117,46 @@
127
117
  --seed-box-justify-content: initial;
128
118
  --seed-box-align-items: initial;
129
119
  padding-inline: var(--seed-box-padding-x);
120
+ height: var(--seed-box-height);
130
121
  min-height: var(--seed-box-min-height);
131
122
  max-height: var(--seed-box-max-height);
132
123
  justify-content: var(--seed-box-justify-content);
133
124
  align-items: var(--seed-box-align-items);
134
125
  transition: box-shadow var(--seed-duration-color-transition) var(--seed-timing-function-easing);
135
126
  }
136
- .seed-content-dialog__body[data-scrolled]:not(:first-child) {
127
+ .seed-popover__body[data-scrolled]:not(:first-child) {
137
128
  box-shadow: inset 0 1px 0 0 var(--seed-color-stroke-neutral-muted);
138
129
  }
139
- .seed-content-dialog__body[data-overflow] {
130
+ .seed-popover__body[data-overflow] {
140
131
  padding-bottom: var(--seed-dimension-x12);
141
132
  mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
142
133
  -webkit-mask-image: linear-gradient(to top, transparent 0, black var(--seed-dimension-x12));
143
134
  }
144
- .seed-content-dialog__body {
135
+ .seed-popover__body {
145
136
  outline: var(--seed-dimension-x0_5) solid transparent;
146
137
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
147
138
  }
148
- .seed-content-dialog__body:is(:focus-visible, [data-focus-visible]) {
139
+ .seed-popover__body:is(:focus-visible, [data-focus-visible]) {
149
140
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
150
141
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
151
142
  }
152
- .seed-content-dialog__title {
153
- color: var(--seed-color-fg-neutral);
154
- font-size: var(--seed-font-size-t8);
155
- line-height: var(--seed-line-height-t8);
156
- font-weight: var(--seed-font-weight-bold);
157
- margin: 0;
158
- }
159
- .seed-content-dialog__description {
160
- color: var(--seed-color-fg-neutral-muted);
161
- font-size: var(--seed-font-size-t5);
162
- line-height: var(--seed-line-height-t5);
163
- font-weight: var(--seed-font-weight-regular);
164
- margin: 0;
165
- white-space: pre-wrap;
166
- }
167
- .seed-content-dialog__footer {
143
+ .seed-popover__footer {
168
144
  display: flex;
169
145
  flex-direction: column;
170
- align-items: stretch;
171
146
  flex-shrink: 0;
172
147
  padding-inline: var(--seed-dimension-x6);
173
148
  padding-top: var(--seed-dimension-x4);
174
149
  padding-bottom: var(--seed-dimension-x6);
175
150
  }
176
- .seed-content-dialog__closeButton {
151
+ .seed-popover__closeButton {
177
152
  position: absolute;
178
- top: var(--seed-dimension-x7);
179
- right: var(--seed-dimension-x6);
180
153
  display: flex;
181
154
  justify-content: center;
182
155
  align-items: center;
183
156
  border: none;
184
157
  background: var(--seed-color-bg-transparent);
158
+ top: 27px;
159
+ right: 24px;
185
160
  border-radius: var(--seed-radius-r3);
186
161
  padding: calc((52px - 22px) / 2);
187
162
  margin: calc((22px - 52px) / 2);
@@ -192,69 +167,67 @@
192
167
  outline: var(--seed-dimension-x0_5) solid transparent;
193
168
  outline-offset: var(--seed-dimension-x0_5);
194
169
  }
195
- .seed-content-dialog__closeButton:is(:focus-visible, [data-focus-visible]) {
170
+ .seed-popover__closeButton:is(:focus-visible, [data-focus-visible]) {
196
171
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
197
172
  outline-offset: var(--seed-dimension-x0_5);
198
173
  }
199
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
174
+ .seed-popover__closeButton:is(:active, [data-active]) {
200
175
  scale: var(--seed-feedback-scale);
201
176
  }
202
177
  @media (hover: hover) and (pointer: fine) {
203
- .seed-content-dialog__closeButton:is(:hover, [data-hover]) {
178
+ .seed-popover__closeButton:is(:hover, [data-hover]) {
204
179
  background: var(--seed-color-bg-transparent-pressed);
205
180
  }
206
181
  }
207
182
  @media not all and (hover: hover) and (pointer: fine) {
208
- .seed-content-dialog__closeButton:is(:active, [data-active]) {
183
+ .seed-popover__closeButton:is(:active, [data-active]) {
209
184
  background: var(--seed-color-bg-transparent-pressed);
210
185
  }
211
186
  }
212
- .seed-content-dialog__content--size_medium {
213
- --content-dialog-size-width: 480px;
214
- }
215
- .seed-content-dialog__content--size_large {
216
- --content-dialog-size-width: 800px;
217
- }
218
187
  @media (min-width: 480px) {
219
- .seed-content-dialog__content {
188
+ .seed-popover__content {
220
189
  --seed-box-width: var(--seed-box-width-sm, initial);
221
190
  --seed-box-max-width: var(--seed-box-max-width-sm, initial);
222
191
  }
223
- .seed-content-dialog__body {
192
+ .seed-popover__body {
224
193
  --seed-box-padding-x: var(--seed-box-padding-x-sm, initial);
194
+ --seed-box-height: var(--seed-box-height-sm, initial);
225
195
  --seed-box-min-height: var(--seed-box-min-height-sm, initial);
226
196
  --seed-box-max-height: var(--seed-box-max-height-sm, initial);
227
197
  }
228
198
  }
229
199
  @media (min-width: 768px) {
230
- .seed-content-dialog__content {
200
+ .seed-popover__content {
231
201
  --seed-box-width: var(--seed-box-width-md, initial);
232
202
  --seed-box-max-width: var(--seed-box-max-width-md, initial);
233
203
  }
234
- .seed-content-dialog__body {
204
+ .seed-popover__body {
235
205
  --seed-box-padding-x: var(--seed-box-padding-x-md, initial);
206
+ --seed-box-height: var(--seed-box-height-md, initial);
236
207
  --seed-box-min-height: var(--seed-box-min-height-md, initial);
237
208
  --seed-box-max-height: var(--seed-box-max-height-md, initial);
238
209
  }
239
210
  }
240
211
  @media (min-width: 1280px) {
241
- .seed-content-dialog__content {
212
+ .seed-popover__content {
242
213
  --seed-box-width: var(--seed-box-width-lg, initial);
243
214
  --seed-box-max-width: var(--seed-box-max-width-lg, initial);
244
215
  }
245
- .seed-content-dialog__body {
216
+ .seed-popover__body {
246
217
  --seed-box-padding-x: var(--seed-box-padding-x-lg, initial);
218
+ --seed-box-height: var(--seed-box-height-lg, initial);
247
219
  --seed-box-min-height: var(--seed-box-min-height-lg, initial);
248
220
  --seed-box-max-height: var(--seed-box-max-height-lg, initial);
249
221
  }
250
222
  }
251
223
  @media (min-width: 1440px) {
252
- .seed-content-dialog__content {
224
+ .seed-popover__content {
253
225
  --seed-box-width: var(--seed-box-width-xl, initial);
254
226
  --seed-box-max-width: var(--seed-box-max-width-xl, initial);
255
227
  }
256
- .seed-content-dialog__body {
228
+ .seed-popover__body {
257
229
  --seed-box-padding-x: var(--seed-box-padding-x-xl, initial);
230
+ --seed-box-height: var(--seed-box-height-xl, initial);
258
231
  --seed-box-min-height: var(--seed-box-min-height-xl, initial);
259
232
  --seed-box-max-height: var(--seed-box-max-height-xl, initial);
260
233
  }