@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.2

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 (383) hide show
  1. package/all.css +568 -7401
  2. package/all.layered.css +575 -7407
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +6 -2
  6. package/base.layered.css +6 -2
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +6 -2
  10. package/recipes/action-button.css +327 -316
  11. package/recipes/action-button.d.ts +14 -3
  12. package/recipes/action-button.layered.css +188 -529
  13. package/recipes/action-button.layered.mjs +117 -4
  14. package/recipes/action-button.mjs +117 -4
  15. package/recipes/bottom-sheet-handle.css +2 -6
  16. package/recipes/bottom-sheet-handle.layered.css +1 -6
  17. package/recipes/bottom-sheet.css +15 -107
  18. package/recipes/bottom-sheet.layered.css +7 -111
  19. package/recipes/bottom-sheet.layered.mjs +1 -0
  20. package/recipes/bottom-sheet.mjs +1 -0
  21. package/recipes/checkbox-group.d.ts +2 -1
  22. package/recipes/checkbox-group.layered.mjs +3 -0
  23. package/recipes/checkbox-group.mjs +3 -0
  24. package/recipes/checkbox.css +17 -22
  25. package/recipes/checkbox.d.ts +5 -1
  26. package/recipes/checkbox.layered.css +13 -18
  27. package/recipes/checkbox.layered.mjs +8 -3
  28. package/recipes/checkbox.mjs +8 -3
  29. package/recipes/checkmark.css +95 -73
  30. package/recipes/checkmark.d.ts +18 -2
  31. package/recipes/checkmark.layered.css +80 -67
  32. package/recipes/checkmark.layered.mjs +151 -17
  33. package/recipes/checkmark.mjs +151 -17
  34. package/recipes/progress-circle.css +25 -0
  35. package/recipes/progress-circle.d.ts +2 -2
  36. package/recipes/progress-circle.mjs +2 -2
  37. package/recipes/radio-group.d.ts +2 -1
  38. package/recipes/radio-group.layered.mjs +3 -0
  39. package/recipes/radio-group.mjs +3 -0
  40. package/recipes/radio.css +17 -22
  41. package/recipes/radio.d.ts +5 -1
  42. package/recipes/radio.layered.css +13 -18
  43. package/recipes/radio.layered.mjs +8 -3
  44. package/recipes/radio.mjs +8 -3
  45. package/recipes/radiomark.css +61 -47
  46. package/recipes/radiomark.d.ts +14 -2
  47. package/recipes/radiomark.layered.css +55 -43
  48. package/recipes/radiomark.layered.mjs +79 -6
  49. package/recipes/radiomark.mjs +79 -6
  50. package/recipes/switch.css +13 -19
  51. package/recipes/switch.d.ts +4 -0
  52. package/recipes/switch.layered.css +6 -12
  53. package/recipes/switch.layered.mjs +6 -1
  54. package/recipes/switch.mjs +6 -1
  55. package/recipes/switchmark.css +35 -36
  56. package/recipes/switchmark.d.ts +9 -1
  57. package/recipes/switchmark.layered.css +34 -35
  58. package/recipes/switchmark.layered.mjs +43 -2
  59. package/recipes/switchmark.mjs +43 -2
  60. package/recipes/tag-group-item.css +11 -53
  61. package/recipes/tag-group-item.layered.css +3 -54
  62. package/recipes/tag-group.css +11 -27
  63. package/recipes/tag-group.d.ts +0 -4
  64. package/recipes/tag-group.layered.css +10 -31
  65. package/recipes/tag-group.layered.mjs +2 -20
  66. package/recipes/tag-group.mjs +2 -20
  67. package/vars/component/checkmark.d.ts +0 -2
  68. package/vars/component/content-placeholder.d.ts +1 -1
  69. package/vars/component/content-placeholder.mjs +1 -1
  70. package/vars/component/index.d.ts +2 -0
  71. package/vars/component/index.mjs +2 -0
  72. package/vars/component/menu-sheet.d.ts +1 -0
  73. package/vars/component/menu-sheet.mjs +1 -0
  74. package/vars/component/notification-badge.d.ts +5 -4
  75. package/vars/component/notification-badge.mjs +3 -2
  76. package/vars/component/radiomark.d.ts +0 -3
  77. package/vars/component/switchmark.d.ts +0 -3
  78. package/vars/component/top-navigation-icon-button.d.ts +36 -0
  79. package/vars/component/top-navigation-icon-button.mjs +36 -0
  80. package/vars/component/top-navigation-text-button.d.ts +52 -0
  81. package/vars/component/top-navigation-text-button.mjs +51 -0
  82. package/vars/component/top-navigation.d.ts +47 -25
  83. package/vars/component/top-navigation.mjs +39 -25
  84. package/recipes/action-chip.css +0 -78
  85. package/recipes/action-chip.d.ts +0 -29
  86. package/recipes/action-chip.layered.css +0 -118
  87. package/recipes/action-chip.layered.mjs +0 -71
  88. package/recipes/action-chip.mjs +0 -71
  89. package/recipes/action-sheet-item.css +0 -30
  90. package/recipes/action-sheet-item.d.ts +0 -25
  91. package/recipes/action-sheet-item.layered.css +0 -38
  92. package/recipes/action-sheet-item.layered.mjs +0 -49
  93. package/recipes/action-sheet-item.mjs +0 -49
  94. package/recipes/action-sheet.css +0 -117
  95. package/recipes/action-sheet.d.ts +0 -21
  96. package/recipes/action-sheet.layered.css +0 -132
  97. package/recipes/action-sheet.layered.mjs +0 -60
  98. package/recipes/action-sheet.mjs +0 -60
  99. package/recipes/app-bar-main.css +0 -169
  100. package/recipes/app-bar-main.d.ts +0 -36
  101. package/recipes/app-bar-main.layered.css +0 -164
  102. package/recipes/app-bar-main.layered.mjs +0 -63
  103. package/recipes/app-bar-main.mjs +0 -63
  104. package/recipes/app-bar.css +0 -375
  105. package/recipes/app-bar.d.ts +0 -36
  106. package/recipes/app-bar.layered.css +0 -385
  107. package/recipes/app-bar.layered.mjs +0 -74
  108. package/recipes/app-bar.mjs +0 -74
  109. package/recipes/app-screen.css +0 -314
  110. package/recipes/app-screen.d.ts +0 -44
  111. package/recipes/app-screen.layered.css +0 -322
  112. package/recipes/app-screen.layered.mjs +0 -98
  113. package/recipes/app-screen.mjs +0 -98
  114. package/recipes/article.css +0 -0
  115. package/recipes/article.d.ts +0 -22
  116. package/recipes/article.layered.css +0 -1
  117. package/recipes/article.layered.mjs +0 -43
  118. package/recipes/article.mjs +0 -43
  119. package/recipes/aspect-ratio.css +0 -22
  120. package/recipes/aspect-ratio.d.ts +0 -22
  121. package/recipes/aspect-ratio.layered.css +0 -24
  122. package/recipes/aspect-ratio.layered.mjs +0 -43
  123. package/recipes/aspect-ratio.mjs +0 -43
  124. package/recipes/avatar-stack.css +0 -79
  125. package/recipes/avatar-stack.d.ts +0 -24
  126. package/recipes/avatar-stack.layered.css +0 -102
  127. package/recipes/avatar-stack.layered.mjs +0 -51
  128. package/recipes/avatar-stack.mjs +0 -51
  129. package/recipes/avatar.css +0 -168
  130. package/recipes/avatar.d.ts +0 -28
  131. package/recipes/avatar.layered.css +0 -201
  132. package/recipes/avatar.layered.mjs +0 -66
  133. package/recipes/avatar.mjs +0 -66
  134. package/recipes/badge.css +0 -112
  135. package/recipes/badge.d.ts +0 -32
  136. package/recipes/badge.layered.css +0 -134
  137. package/recipes/badge.layered.mjs +0 -131
  138. package/recipes/badge.mjs +0 -131
  139. package/recipes/callout.css +0 -159
  140. package/recipes/callout.d.ts +0 -24
  141. package/recipes/callout.layered.css +0 -148
  142. package/recipes/callout.layered.mjs +0 -63
  143. package/recipes/callout.mjs +0 -63
  144. package/recipes/chip-tabs.css +0 -150
  145. package/recipes/chip-tabs.d.ts +0 -36
  146. package/recipes/chip-tabs.layered.css +0 -186
  147. package/recipes/chip-tabs.layered.mjs +0 -75
  148. package/recipes/chip-tabs.mjs +0 -75
  149. package/recipes/chip.css +0 -184
  150. package/recipes/chip.d.ts +0 -32
  151. package/recipes/chip.layered.css +0 -207
  152. package/recipes/chip.layered.mjs +0 -80
  153. package/recipes/chip.mjs +0 -80
  154. package/recipes/content-placeholder.css +0 -19
  155. package/recipes/content-placeholder.d.ts +0 -24
  156. package/recipes/content-placeholder.layered.css +0 -22
  157. package/recipes/content-placeholder.layered.mjs +0 -53
  158. package/recipes/content-placeholder.mjs +0 -53
  159. package/recipes/contextual-floating-button.css +0 -123
  160. package/recipes/contextual-floating-button.d.ts +0 -29
  161. package/recipes/contextual-floating-button.layered.css +0 -190
  162. package/recipes/contextual-floating-button.layered.mjs +0 -54
  163. package/recipes/contextual-floating-button.mjs +0 -54
  164. package/recipes/control-chip.css +0 -97
  165. package/recipes/control-chip.d.ts +0 -29
  166. package/recipes/control-chip.layered.css +0 -147
  167. package/recipes/control-chip.layered.mjs +0 -71
  168. package/recipes/control-chip.mjs +0 -71
  169. package/recipes/dialog.css +0 -101
  170. package/recipes/dialog.d.ts +0 -24
  171. package/recipes/dialog.layered.css +0 -113
  172. package/recipes/dialog.layered.mjs +0 -66
  173. package/recipes/dialog.mjs +0 -66
  174. package/recipes/extended-action-sheet-item.css +0 -39
  175. package/recipes/extended-action-sheet-item.d.ts +0 -25
  176. package/recipes/extended-action-sheet-item.layered.css +0 -55
  177. package/recipes/extended-action-sheet-item.layered.mjs +0 -49
  178. package/recipes/extended-action-sheet-item.mjs +0 -49
  179. package/recipes/extended-action-sheet.css +0 -116
  180. package/recipes/extended-action-sheet.d.ts +0 -21
  181. package/recipes/extended-action-sheet.layered.css +0 -131
  182. package/recipes/extended-action-sheet.layered.mjs +0 -64
  183. package/recipes/extended-action-sheet.mjs +0 -64
  184. package/recipes/extended-fab.css +0 -65
  185. package/recipes/extended-fab.d.ts +0 -29
  186. package/recipes/extended-fab.layered.css +0 -84
  187. package/recipes/extended-fab.layered.mjs +0 -54
  188. package/recipes/extended-fab.mjs +0 -54
  189. package/recipes/fab.css +0 -24
  190. package/recipes/fab.d.ts +0 -22
  191. package/recipes/fab.layered.css +0 -36
  192. package/recipes/fab.layered.mjs +0 -43
  193. package/recipes/fab.mjs +0 -43
  194. package/recipes/field-label.css +0 -27
  195. package/recipes/field-label.d.ts +0 -24
  196. package/recipes/field-label.layered.css +0 -33
  197. package/recipes/field-label.layered.mjs +0 -47
  198. package/recipes/field-label.mjs +0 -47
  199. package/recipes/field.css +0 -66
  200. package/recipes/field.d.ts +0 -21
  201. package/recipes/field.layered.css +0 -77
  202. package/recipes/field.layered.mjs +0 -60
  203. package/recipes/field.mjs +0 -60
  204. package/recipes/floating-action-button.css +0 -63
  205. package/recipes/floating-action-button.d.ts +0 -24
  206. package/recipes/floating-action-button.layered.css +0 -71
  207. package/recipes/floating-action-button.layered.mjs +0 -47
  208. package/recipes/floating-action-button.mjs +0 -47
  209. package/recipes/help-bubble.css +0 -80
  210. package/recipes/help-bubble.d.ts +0 -21
  211. package/recipes/help-bubble.layered.css +0 -92
  212. package/recipes/help-bubble.layered.mjs +0 -60
  213. package/recipes/help-bubble.mjs +0 -60
  214. package/recipes/identity-placeholder.css +0 -15
  215. package/recipes/identity-placeholder.d.ts +0 -24
  216. package/recipes/identity-placeholder.layered.css +0 -18
  217. package/recipes/identity-placeholder.layered.mjs +0 -43
  218. package/recipes/identity-placeholder.mjs +0 -43
  219. package/recipes/image-frame-icon.css +0 -7
  220. package/recipes/image-frame-icon.d.ts +0 -22
  221. package/recipes/image-frame-icon.layered.css +0 -11
  222. package/recipes/image-frame-icon.layered.mjs +0 -43
  223. package/recipes/image-frame-icon.mjs +0 -43
  224. package/recipes/image-frame-indicator.css +0 -16
  225. package/recipes/image-frame-indicator.d.ts +0 -22
  226. package/recipes/image-frame-indicator.layered.css +0 -20
  227. package/recipes/image-frame-indicator.layered.mjs +0 -43
  228. package/recipes/image-frame-indicator.mjs +0 -43
  229. package/recipes/image-frame-reaction-button.css +0 -44
  230. package/recipes/image-frame-reaction-button.d.ts +0 -21
  231. package/recipes/image-frame-reaction-button.layered.css +0 -50
  232. package/recipes/image-frame-reaction-button.layered.mjs +0 -40
  233. package/recipes/image-frame-reaction-button.mjs +0 -40
  234. package/recipes/image-frame.css +0 -28
  235. package/recipes/image-frame.d.ts +0 -28
  236. package/recipes/image-frame.layered.css +0 -34
  237. package/recipes/image-frame.layered.mjs +0 -52
  238. package/recipes/image-frame.mjs +0 -52
  239. package/recipes/inline-banner.css +0 -163
  240. package/recipes/inline-banner.d.ts +0 -24
  241. package/recipes/inline-banner.layered.css +0 -142
  242. package/recipes/inline-banner.layered.mjs +0 -64
  243. package/recipes/inline-banner.mjs +0 -64
  244. package/recipes/input-button.css +0 -120
  245. package/recipes/input-button.d.ts +0 -21
  246. package/recipes/input-button.layered.css +0 -135
  247. package/recipes/input-button.layered.mjs +0 -64
  248. package/recipes/input-button.mjs +0 -64
  249. package/recipes/link-content.css +0 -45
  250. package/recipes/link-content.d.ts +0 -29
  251. package/recipes/link-content.layered.css +0 -72
  252. package/recipes/link-content.layered.mjs +0 -55
  253. package/recipes/link-content.mjs +0 -55
  254. package/recipes/list-header.css +0 -22
  255. package/recipes/list-header.d.ts +0 -25
  256. package/recipes/list-header.layered.css +0 -28
  257. package/recipes/list-header.layered.mjs +0 -49
  258. package/recipes/list-header.mjs +0 -49
  259. package/recipes/list-item.css +0 -108
  260. package/recipes/list-item.d.ts +0 -24
  261. package/recipes/list-item.layered.css +0 -124
  262. package/recipes/list-item.layered.mjs +0 -59
  263. package/recipes/list-item.mjs +0 -59
  264. package/recipes/manner-temp-badge.css +0 -76
  265. package/recipes/manner-temp-badge.d.ts +0 -25
  266. package/recipes/manner-temp-badge.layered.css +0 -100
  267. package/recipes/manner-temp-badge.layered.mjs +0 -57
  268. package/recipes/manner-temp-badge.mjs +0 -57
  269. package/recipes/manner-temp.css +0 -50
  270. package/recipes/manner-temp.d.ts +0 -25
  271. package/recipes/manner-temp.layered.css +0 -71
  272. package/recipes/manner-temp.layered.mjs +0 -57
  273. package/recipes/manner-temp.mjs +0 -57
  274. package/recipes/menu-sheet-item.css +0 -67
  275. package/recipes/menu-sheet-item.d.ts +0 -28
  276. package/recipes/menu-sheet-item.layered.css +0 -83
  277. package/recipes/menu-sheet-item.layered.mjs +0 -56
  278. package/recipes/menu-sheet-item.mjs +0 -56
  279. package/recipes/menu-sheet.css +0 -135
  280. package/recipes/menu-sheet.d.ts +0 -24
  281. package/recipes/menu-sheet.layered.css +0 -151
  282. package/recipes/menu-sheet.layered.mjs +0 -74
  283. package/recipes/menu-sheet.mjs +0 -74
  284. package/recipes/notification-badge-positioner.css +0 -28
  285. package/recipes/notification-badge-positioner.d.ts +0 -29
  286. package/recipes/notification-badge-positioner.layered.css +0 -27
  287. package/recipes/notification-badge-positioner.layered.mjs +0 -71
  288. package/recipes/notification-badge-positioner.mjs +0 -71
  289. package/recipes/notification-badge.css +0 -27
  290. package/recipes/notification-badge.d.ts +0 -25
  291. package/recipes/notification-badge.layered.css +0 -34
  292. package/recipes/notification-badge.layered.mjs +0 -49
  293. package/recipes/notification-badge.mjs +0 -49
  294. package/recipes/page-banner.css +0 -260
  295. package/recipes/page-banner.d.ts +0 -28
  296. package/recipes/page-banner.layered.css +0 -235
  297. package/recipes/page-banner.layered.mjs +0 -117
  298. package/recipes/page-banner.mjs +0 -117
  299. package/recipes/pull-to-refresh.css +0 -15
  300. package/recipes/pull-to-refresh.d.ts +0 -21
  301. package/recipes/pull-to-refresh.layered.css +0 -19
  302. package/recipes/pull-to-refresh.layered.mjs +0 -36
  303. package/recipes/pull-to-refresh.mjs +0 -36
  304. package/recipes/reaction-button.css +0 -115
  305. package/recipes/reaction-button.d.ts +0 -25
  306. package/recipes/reaction-button.layered.css +0 -173
  307. package/recipes/reaction-button.layered.mjs +0 -49
  308. package/recipes/reaction-button.mjs +0 -49
  309. package/recipes/scroll-fog.css +0 -11
  310. package/recipes/scroll-fog.d.ts +0 -25
  311. package/recipes/scroll-fog.layered.css +0 -19
  312. package/recipes/scroll-fog.layered.mjs +0 -48
  313. package/recipes/scroll-fog.mjs +0 -48
  314. package/recipes/segmented-control.css +0 -59
  315. package/recipes/segmented-control.d.ts +0 -21
  316. package/recipes/segmented-control.layered.css +0 -67
  317. package/recipes/segmented-control.layered.mjs +0 -40
  318. package/recipes/segmented-control.mjs +0 -40
  319. package/recipes/select-box-group.css +0 -10
  320. package/recipes/select-box-group.d.ts +0 -22
  321. package/recipes/select-box-group.layered.css +0 -13
  322. package/recipes/select-box-group.layered.mjs +0 -43
  323. package/recipes/select-box-group.mjs +0 -43
  324. package/recipes/select-box.css +0 -111
  325. package/recipes/select-box.d.ts +0 -24
  326. package/recipes/select-box.layered.css +0 -130
  327. package/recipes/select-box.layered.mjs +0 -63
  328. package/recipes/select-box.mjs +0 -63
  329. package/recipes/selectBoxCheckmark.css +0 -30
  330. package/recipes/selectBoxCheckmark.d.ts +0 -21
  331. package/recipes/selectBoxCheckmark.layered.css +0 -36
  332. package/recipes/selectBoxCheckmark.layered.mjs +0 -36
  333. package/recipes/selectBoxCheckmark.mjs +0 -36
  334. package/recipes/skeleton.css +0 -46
  335. package/recipes/skeleton.d.ts +0 -29
  336. package/recipes/skeleton.layered.css +0 -63
  337. package/recipes/skeleton.layered.mjs +0 -56
  338. package/recipes/skeleton.mjs +0 -56
  339. package/recipes/slider-marker.css +0 -55
  340. package/recipes/slider-marker.d.ts +0 -25
  341. package/recipes/slider-marker.layered.css +0 -73
  342. package/recipes/slider-marker.layered.mjs +0 -50
  343. package/recipes/slider-marker.mjs +0 -50
  344. package/recipes/slider-tick.css +0 -21
  345. package/recipes/slider-tick.d.ts +0 -25
  346. package/recipes/slider-tick.layered.css +0 -32
  347. package/recipes/slider-tick.layered.mjs +0 -49
  348. package/recipes/slider-tick.mjs +0 -49
  349. package/recipes/slider.css +0 -177
  350. package/recipes/slider.d.ts +0 -21
  351. package/recipes/slider.layered.css +0 -209
  352. package/recipes/slider.layered.mjs +0 -68
  353. package/recipes/slider.mjs +0 -68
  354. package/recipes/snackbar-region.css +0 -20
  355. package/recipes/snackbar-region.d.ts +0 -22
  356. package/recipes/snackbar-region.layered.css +0 -29
  357. package/recipes/snackbar-region.layered.mjs +0 -43
  358. package/recipes/snackbar-region.mjs +0 -43
  359. package/recipes/snackbar.css +0 -83
  360. package/recipes/snackbar.d.ts +0 -24
  361. package/recipes/snackbar.layered.css +0 -94
  362. package/recipes/snackbar.layered.mjs +0 -56
  363. package/recipes/snackbar.mjs +0 -56
  364. package/recipes/tabs.css +0 -157
  365. package/recipes/tabs.d.ts +0 -36
  366. package/recipes/tabs.layered.css +0 -184
  367. package/recipes/tabs.layered.mjs +0 -78
  368. package/recipes/tabs.mjs +0 -78
  369. package/recipes/text-input.css +0 -198
  370. package/recipes/text-input.d.ts +0 -28
  371. package/recipes/text-input.layered.css +0 -212
  372. package/recipes/text-input.layered.mjs +0 -73
  373. package/recipes/text-input.mjs +0 -73
  374. package/recipes/text.css +0 -558
  375. package/recipes/text.d.ts +0 -33
  376. package/recipes/text.layered.css +0 -371
  377. package/recipes/text.layered.mjs +0 -110
  378. package/recipes/text.mjs +0 -110
  379. package/recipes/toggle-button.css +0 -167
  380. package/recipes/toggle-button.d.ts +0 -29
  381. package/recipes/toggle-button.layered.css +0 -239
  382. package/recipes/toggle-button.layered.mjs +0 -54
  383. package/recipes/toggle-button.mjs +0 -54
@@ -1,24 +0,0 @@
1
- declare interface CalloutVariant {
2
- /**
3
- * @default "neutral"
4
- */
5
- tone: "neutral" | "informative" | "positive" | "warning" | "critical" | "magic";
6
- }
7
-
8
- declare type CalloutVariantMap = {
9
- [key in keyof CalloutVariant]: Array<CalloutVariant[key]>;
10
- };
11
-
12
- export declare type CalloutVariantProps = Partial<CalloutVariant>;
13
-
14
- export declare type CalloutSlotName = "root" | "content" | "title" | "description" | "link" | "closeButton";
15
-
16
- export declare const calloutVariantMap: CalloutVariantMap;
17
-
18
- export declare const callout: ((
19
- props?: CalloutVariantProps,
20
- ) => Record<CalloutSlotName, string>) & {
21
- splitVariantProps: <T extends CalloutVariantProps>(
22
- props: T,
23
- ) => [CalloutVariantProps, Omit<T, keyof CalloutVariantProps>];
24
- }
@@ -1,148 +0,0 @@
1
- @layer seed-components {
2
- .seed-callout__root {
3
- font-family: inherit;
4
- font-size: unset;
5
- text-align: start;
6
- width: 100%;
7
- min-height: 50px;
8
- padding-left: var(--seed-dimension-x3_5);
9
- padding-right: var(--seed-dimension-x3_5);
10
- padding-top: var(--seed-dimension-x3_5);
11
- padding-bottom: var(--seed-dimension-x3_5);
12
- align-items: center;
13
- gap: var(--seed-dimension-x3);
14
- border-radius: var(--seed-radius-r2_5);
15
- --seed-prefix-icon-size: var(--seed-dimension-x4);
16
- --seed-suffix-icon-size: var(--seed-dimension-x4);
17
- border: none;
18
- display: flex;
19
- }
20
-
21
- .seed-callout__content {
22
- line-height: var(--seed-line-height-t4);
23
- margin-right: auto;
24
- }
25
-
26
- .seed-callout__title {
27
- font-size: var(--seed-font-size-t4);
28
- line-height: var(--seed-line-height-t4);
29
- font-weight: var(--seed-font-weight-bold);
30
- }
31
-
32
- .seed-callout__description {
33
- font-size: var(--seed-font-size-t4);
34
- line-height: var(--seed-line-height-t4);
35
- font-weight: var(--seed-font-weight-regular);
36
- }
37
-
38
- .seed-callout__link {
39
- font-family: inherit;
40
- font-size: var(--seed-font-size-t4);
41
- line-height: var(--seed-line-height-t4);
42
- font-weight: var(--seed-font-weight-regular);
43
- border-radius: var(--seed-radius-r1);
44
- background-color: #0000;
45
- border: none;
46
- padding: 0;
47
- display: inline-block;
48
- }
49
-
50
- .seed-callout__closeButton {
51
- width: var(--seed-dimension-x10);
52
- height: var(--seed-dimension-x10);
53
- margin: calc((var(--seed-dimension-x10) - var(--seed-dimension-x4)) * -.5);
54
- border-radius: var(--seed-radius-r2_5);
55
- background-color: #0000;
56
- border: none;
57
- flex-grow: 0;
58
- flex-shrink: 0;
59
- justify-content: center;
60
- align-items: center;
61
- padding: 0;
62
- display: flex;
63
- }
64
-
65
- .seed-callout__root--tone_neutral {
66
- background-color: var(--seed-color-bg-neutral-weak);
67
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
68
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
69
- }
70
-
71
- .seed-callout__root--tone_neutralbutton:active, .seed-callout__root--tone_neutrala:active {
72
- background-color: var(--seed-color-bg-neutral-weak-pressed);
73
- }
74
-
75
- .seed-callout__title--tone_neutral, .seed-callout__description--tone_neutral, .seed-callout__link--tone_neutral {
76
- color: var(--seed-color-fg-neutral);
77
- }
78
-
79
- .seed-callout__root--tone_informative {
80
- background-color: var(--seed-color-bg-informative-weak);
81
- --seed-prefix-icon-color: var(--seed-color-fg-informative-contrast);
82
- --seed-suffix-icon-color: var(--seed-color-fg-informative-contrast);
83
- }
84
-
85
- .seed-callout__root--tone_informativebutton:active, .seed-callout__root--tone_informativea:active {
86
- background-color: var(--seed-color-bg-informative-weak-pressed);
87
- }
88
-
89
- .seed-callout__title--tone_informative, .seed-callout__description--tone_informative, .seed-callout__link--tone_informative {
90
- color: var(--seed-color-fg-informative-contrast);
91
- }
92
-
93
- .seed-callout__root--tone_positive {
94
- background-color: var(--seed-color-bg-positive-weak);
95
- --seed-prefix-icon-color: var(--seed-color-fg-positive-contrast);
96
- --seed-suffix-icon-color: var(--seed-color-fg-positive-contrast);
97
- }
98
-
99
- .seed-callout__root--tone_positivebutton:active, .seed-callout__root--tone_positivea:active {
100
- background-color: var(--seed-color-bg-positive-weak-pressed);
101
- }
102
-
103
- .seed-callout__title--tone_positive, .seed-callout__description--tone_positive, .seed-callout__link--tone_positive {
104
- color: var(--seed-color-fg-positive-contrast);
105
- }
106
-
107
- .seed-callout__root--tone_warning {
108
- background-color: var(--seed-color-bg-warning-weak);
109
- --seed-prefix-icon-color: var(--seed-color-fg-warning-contrast);
110
- --seed-suffix-icon-color: var(--seed-color-fg-warning-contrast);
111
- }
112
-
113
- .seed-callout__root--tone_warningbutton:active, .seed-callout__root--tone_warninga:active {
114
- background-color: var(--seed-color-bg-warning-weak-pressed);
115
- }
116
-
117
- .seed-callout__title--tone_warning, .seed-callout__description--tone_warning, .seed-callout__link--tone_warning {
118
- color: var(--seed-color-fg-warning-contrast);
119
- }
120
-
121
- .seed-callout__root--tone_critical {
122
- background-color: var(--seed-color-bg-critical-weak);
123
- --seed-prefix-icon-color: var(--seed-color-fg-critical-contrast);
124
- --seed-suffix-icon-color: var(--seed-color-fg-critical-contrast);
125
- }
126
-
127
- .seed-callout__root--tone_criticalbutton:active, .seed-callout__root--tone_criticala:active {
128
- background-color: var(--seed-color-bg-critical-weak-pressed);
129
- }
130
-
131
- .seed-callout__title--tone_critical, .seed-callout__description--tone_critical, .seed-callout__link--tone_critical {
132
- color: var(--seed-color-fg-critical-contrast);
133
- }
134
-
135
- .seed-callout__root--tone_magic {
136
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic));
137
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
138
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
139
- }
140
-
141
- .seed-callout__root--tone_magicbutton:active, .seed-callout__root--tone_magica:active {
142
- background-image: linear-gradient(88deg, var(--seed-gradient-glow-magic-pressed));
143
- }
144
-
145
- .seed-callout__title--tone_magic, .seed-callout__description--tone_magic, .seed-callout__link--tone_magic {
146
- color: var(--seed-color-fg-neutral);
147
- }
148
- }
@@ -1,63 +0,0 @@
1
- import './callout.layered.css';
2
- import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
-
4
- const calloutSlotNames = [
5
- [
6
- "root",
7
- "seed-callout__root"
8
- ],
9
- [
10
- "content",
11
- "seed-callout__content"
12
- ],
13
- [
14
- "title",
15
- "seed-callout__title"
16
- ],
17
- [
18
- "description",
19
- "seed-callout__description"
20
- ],
21
- [
22
- "link",
23
- "seed-callout__link"
24
- ],
25
- [
26
- "closeButton",
27
- "seed-callout__closeButton"
28
- ]
29
- ];
30
-
31
- const defaultVariant = {
32
- "tone": "neutral"
33
- };
34
-
35
- const compoundVariants = [];
36
-
37
- export const calloutVariantMap = {
38
- "tone": [
39
- "neutral",
40
- "informative",
41
- "positive",
42
- "warning",
43
- "critical",
44
- "magic"
45
- ]
46
- };
47
-
48
- export const calloutVariantKeys = Object.keys(calloutVariantMap);
49
-
50
- export function callout(props) {
51
- return Object.fromEntries(
52
- calloutSlotNames.map(([slot, className]) => {
53
- return [
54
- slot,
55
- createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
56
- ];
57
- }),
58
- );
59
- }
60
-
61
- Object.assign(callout, { splitVariantProps: (props) => splitVariantProps(props, calloutVariantMap) });
62
-
63
- // @recipe(seed): callout
@@ -1,63 +0,0 @@
1
- import './callout.css';
2
- import { createClassName, mergeVariants, splitVariantProps } from "./shared.mjs";
3
-
4
- const calloutSlotNames = [
5
- [
6
- "root",
7
- "seed-callout__root"
8
- ],
9
- [
10
- "content",
11
- "seed-callout__content"
12
- ],
13
- [
14
- "title",
15
- "seed-callout__title"
16
- ],
17
- [
18
- "description",
19
- "seed-callout__description"
20
- ],
21
- [
22
- "link",
23
- "seed-callout__link"
24
- ],
25
- [
26
- "closeButton",
27
- "seed-callout__closeButton"
28
- ]
29
- ];
30
-
31
- const defaultVariant = {
32
- "tone": "neutral"
33
- };
34
-
35
- const compoundVariants = [];
36
-
37
- export const calloutVariantMap = {
38
- "tone": [
39
- "neutral",
40
- "informative",
41
- "positive",
42
- "warning",
43
- "critical",
44
- "magic"
45
- ]
46
- };
47
-
48
- export const calloutVariantKeys = Object.keys(calloutVariantMap);
49
-
50
- export function callout(props) {
51
- return Object.fromEntries(
52
- calloutSlotNames.map(([slot, className]) => {
53
- return [
54
- slot,
55
- createClassName(className, mergeVariants(defaultVariant, props), compoundVariants),
56
- ];
57
- }),
58
- );
59
- }
60
-
61
- Object.assign(callout, { splitVariantProps: (props) => splitVariantProps(props, calloutVariantMap) });
62
-
63
- // @recipe(seed): callout
@@ -1,150 +0,0 @@
1
- .seed-chip-tabs__root {
2
- position: relative;
3
- }
4
- .seed-chip-tabs__list {
5
- display: flex;
6
- position: relative;
7
- flex-wrap: nowrap;
8
- align-items: stretch;
9
- align-content: stretch;
10
- overflow-x: auto;
11
- padding: 0px var(--seed-dimension-x4);
12
- }
13
- .seed-chip-tabs__carousel {
14
- display: block;
15
- overflow: hidden;
16
- }
17
- .seed-chip-tabs__carouselCamera {
18
- display: flex;
19
- }
20
- .seed-chip-tabs__carouselCamera.seed-chip-tabs__carouselCamera--auto-height_true {
21
- align-items: flex-start;
22
- }
23
- .seed-chip-tabs__content {
24
- flex: 0 0 100%;
25
- min-width: 0;
26
- transform: translate3d(0, 0, 0);
27
- overflow-y: auto;
28
- overflow-x: hidden;
29
- }
30
- .seed-chip-tabs__content:not([data-carousel]):not([aria-selected=true]):not([data-selected]) {
31
- display: none;
32
- }
33
- .seed-chip-tabs__trigger {
34
- display: flex;
35
- justify-content: center;
36
- align-items: center;
37
- border: none;
38
- font-family: inherit;
39
- border-radius: var(--seed-radius-full);
40
- padding-top: var(--seed-dimension-x2);
41
- padding-bottom: var(--seed-dimension-x2);
42
- font-weight: var(--seed-font-weight-medium);
43
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
44
- }
45
- .seed-chip-tabs__list--size_medium {
46
- gap: 8px;
47
- }
48
- .seed-chip-tabs__trigger--size_medium {
49
- min-height: 36px;
50
- font-size: var(--seed-font-size-t4);
51
- padding-left: var(--seed-dimension-x3_5);
52
- padding-right: var(--seed-dimension-x3_5);
53
- }
54
- .seed-chip-tabs__list--size_large {
55
- gap: 8px;
56
- }
57
- .seed-chip-tabs__trigger--size_large {
58
- min-height: 40px;
59
- font-size: var(--seed-font-size-t4);
60
- padding-left: var(--seed-dimension-x4);
61
- padding-right: var(--seed-dimension-x4);
62
- }
63
- .seed-chip-tabs__trigger--variant_neutralSolid {
64
- background-color: var(--seed-color-bg-neutral-weak-alpha);
65
- color: var(--seed-color-fg-neutral);
66
- }
67
- .seed-chip-tabs__trigger--variant_neutralSolid[aria-selected=true], .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--selected_true {
68
- background-color: var(--seed-color-bg-neutral-inverted);
69
- color: var(--seed-color-fg-neutral-inverted);
70
- }
71
- .seed-chip-tabs__trigger--variant_neutralSolid:active {
72
- background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
73
- }
74
- .seed-chip-tabs__trigger--variant_neutralSolid[aria-selected=true]:active, .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--selected_true:active {
75
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
76
- }
77
- .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true {
78
- color: var(--seed-color-fg-disabled);
79
- }
80
- .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true[aria-selected=true], .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true[data-selected] {
81
- background-color: var(--seed-color-bg-disabled);
82
- color: var(--seed-color-fg-disabled);
83
- }
84
- .seed-chip-tabs__trigger--variant_neutralOutline {
85
- background-color: var(--seed-color-bg-transparent);
86
- border: 1px solid var(--seed-color-stroke-neutral-muted);
87
- color: var(--seed-color-fg-neutral);
88
- }
89
- .seed-chip-tabs__trigger--variant_neutralOutline[aria-selected=true], .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--selected_true {
90
- background-color: var(--seed-color-bg-neutral-inverted);
91
- border-color: transparent;
92
- color: var(--seed-color-fg-neutral-inverted);
93
- }
94
- .seed-chip-tabs__trigger--variant_neutralOutline:active {
95
- background-color: var(--seed-color-bg-transparent-pressed);
96
- }
97
- .seed-chip-tabs__trigger--variant_neutralOutline[aria-selected=true]:active, .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--selected_true:active {
98
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
99
- }
100
- .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true {
101
- color: var(--seed-color-fg-disabled);
102
- }
103
- .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true[aria-selected=true], .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true[data-selected] {
104
- background-color: var(--seed-color-bg-disabled);
105
- color: var(--seed-color-fg-disabled);
106
- }
107
- .seed-chip-tabs__trigger--variant_brandSolid {
108
- background-color: var(--seed-color-bg-neutral-weak);
109
- color: var(--seed-color-fg-neutral-muted);
110
- }
111
- .seed-chip-tabs__trigger--variant_brandSolid[aria-selected=true], .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--selected_true {
112
- background-color: var(--seed-color-bg-brand-solid);
113
- color: var(--seed-color-palette-static-white);
114
- }
115
- .seed-chip-tabs__trigger--variant_brandSolid:active {
116
- background-color: var(--seed-color-bg-neutral-weak-pressed);
117
- }
118
- .seed-chip-tabs__trigger--variant_brandSolid[aria-selected=true]:active, .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--selected_true:active {
119
- background-color: var(--seed-color-bg-brand-solid-pressed);
120
- }
121
- .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true {
122
- background-color: var(--seed-color-bg-disabled);
123
- color: var(--seed-color-fg-disabled);
124
- }
125
- .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true[aria-selected=true], .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true[data-selected] {
126
- background-color: var(--seed-color-bg-disabled);
127
- }
128
- .seed-chip-tabs__root--contentLayout_fill {
129
- display: flex;
130
- flex-direction: column;
131
- height: 100%;
132
- }
133
- .seed-chip-tabs__carousel--contentLayout_fill {
134
- flex: 1;
135
- }
136
- .seed-chip-tabs__carouselCamera--contentLayout_fill {
137
- height: 100%;
138
- align-items: stretch;
139
- }
140
- .seed-chip-tabs__root--contentLayout_hug {
141
- display: block;
142
- }
143
- .seed-chip-tabs__root--stickyList_true {
144
- position: relative;
145
- }
146
- .seed-chip-tabs__list--stickyList_true {
147
- position: sticky;
148
- top: 0;
149
- z-index: 1;
150
- }
@@ -1,36 +0,0 @@
1
- declare interface ChipTabsVariant {
2
- /**
3
- * @default "medium"
4
- */
5
- size: "medium" | "large";
6
- /**
7
- * @default "neutralSolid"
8
- */
9
- variant: "neutralSolid" | "neutralOutline" | "brandSolid";
10
- /**
11
- * @default "hug"
12
- */
13
- contentLayout: "fill" | "hug";
14
- /**
15
- * @default false
16
- */
17
- stickyList: boolean;
18
- }
19
-
20
- declare type ChipTabsVariantMap = {
21
- [key in keyof ChipTabsVariant]: Array<ChipTabsVariant[key]>;
22
- };
23
-
24
- export declare type ChipTabsVariantProps = Partial<ChipTabsVariant>;
25
-
26
- export declare type ChipTabsSlotName = "root" | "list" | "carousel" | "carouselCamera" | "content" | "trigger";
27
-
28
- export declare const chipTabsVariantMap: ChipTabsVariantMap;
29
-
30
- export declare const chipTabs: ((
31
- props?: ChipTabsVariantProps,
32
- ) => Record<ChipTabsSlotName, string>) & {
33
- splitVariantProps: <T extends ChipTabsVariantProps>(
34
- props: T,
35
- ) => [ChipTabsVariantProps, Omit<T, keyof ChipTabsVariantProps>];
36
- }
@@ -1,186 +0,0 @@
1
- @layer seed-components {
2
- .seed-chip-tabs__root {
3
- position: relative;
4
- }
5
-
6
- .seed-chip-tabs__list {
7
- padding: 0px var(--seed-dimension-x4);
8
- flex-wrap: nowrap;
9
- align-content: stretch;
10
- align-items: stretch;
11
- display: flex;
12
- position: relative;
13
- overflow-x: auto;
14
- }
15
-
16
- .seed-chip-tabs__carousel {
17
- display: block;
18
- overflow: hidden;
19
- }
20
-
21
- .seed-chip-tabs__carouselCamera {
22
- display: flex;
23
- }
24
-
25
- .seed-chip-tabs__carouselCamera.seed-chip-tabs__carouselCamera--auto-height_true {
26
- align-items: flex-start;
27
- }
28
-
29
- .seed-chip-tabs__content {
30
- flex: 0 0 100%;
31
- min-width: 0;
32
- overflow: hidden auto;
33
- transform: translate3d(0, 0, 0);
34
- }
35
-
36
- .seed-chip-tabs__content:not([data-carousel]):not([aria-selected="true"]):not([data-selected]) {
37
- display: none;
38
- }
39
-
40
- .seed-chip-tabs__trigger {
41
- border-radius: var(--seed-radius-full);
42
- padding-top: var(--seed-dimension-x2);
43
- padding-bottom: var(--seed-dimension-x2);
44
- font-family: inherit;
45
- font-weight: var(--seed-font-weight-medium);
46
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
47
- border: none;
48
- justify-content: center;
49
- align-items: center;
50
- display: flex;
51
- }
52
-
53
- .seed-chip-tabs__list--size_medium {
54
- gap: 8px;
55
- }
56
-
57
- .seed-chip-tabs__trigger--size_medium {
58
- min-height: 36px;
59
- font-size: var(--seed-font-size-t4);
60
- padding-left: var(--seed-dimension-x3_5);
61
- padding-right: var(--seed-dimension-x3_5);
62
- }
63
-
64
- .seed-chip-tabs__list--size_large {
65
- gap: 8px;
66
- }
67
-
68
- .seed-chip-tabs__trigger--size_large {
69
- min-height: 40px;
70
- font-size: var(--seed-font-size-t4);
71
- padding-left: var(--seed-dimension-x4);
72
- padding-right: var(--seed-dimension-x4);
73
- }
74
-
75
- .seed-chip-tabs__trigger--variant_neutralSolid {
76
- background-color: var(--seed-color-bg-neutral-weak-alpha);
77
- color: var(--seed-color-fg-neutral);
78
- }
79
-
80
- .seed-chip-tabs__trigger--variant_neutralSolid[aria-selected="true"], .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--selected_true {
81
- background-color: var(--seed-color-bg-neutral-inverted);
82
- color: var(--seed-color-fg-neutral-inverted);
83
- }
84
-
85
- .seed-chip-tabs__trigger--variant_neutralSolid:active {
86
- background-color: var(--seed-color-bg-neutral-weak-alpha-pressed);
87
- }
88
-
89
- .seed-chip-tabs__trigger--variant_neutralSolid[aria-selected="true"]:active, .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--selected_true:active {
90
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
91
- }
92
-
93
- .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true {
94
- color: var(--seed-color-fg-disabled);
95
- }
96
-
97
- .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true[aria-selected="true"], .seed-chip-tabs__trigger--variant_neutralSolid.seed-chip-tabs__trigger--disabled_true.seed-chip-tabs__trigger--selected_true {
98
- background-color: var(--seed-color-bg-disabled);
99
- color: var(--seed-color-fg-disabled);
100
- }
101
-
102
- .seed-chip-tabs__trigger--variant_neutralOutline {
103
- background-color: var(--seed-color-bg-transparent);
104
- border: 1px solid var(--seed-color-stroke-neutral-muted);
105
- color: var(--seed-color-fg-neutral);
106
- }
107
-
108
- .seed-chip-tabs__trigger--variant_neutralOutline[aria-selected="true"], .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--selected_true {
109
- background-color: var(--seed-color-bg-neutral-inverted);
110
- color: var(--seed-color-fg-neutral-inverted);
111
- border-color: #0000;
112
- }
113
-
114
- .seed-chip-tabs__trigger--variant_neutralOutline:active {
115
- background-color: var(--seed-color-bg-transparent-pressed);
116
- }
117
-
118
- .seed-chip-tabs__trigger--variant_neutralOutline[aria-selected="true"]:active, .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--selected_true:active {
119
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
120
- }
121
-
122
- .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true {
123
- color: var(--seed-color-fg-disabled);
124
- }
125
-
126
- .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true[aria-selected="true"], .seed-chip-tabs__trigger--variant_neutralOutline.seed-chip-tabs__trigger--disabled_true.seed-chip-tabs__trigger--selected_true {
127
- background-color: var(--seed-color-bg-disabled);
128
- color: var(--seed-color-fg-disabled);
129
- }
130
-
131
- .seed-chip-tabs__trigger--variant_brandSolid {
132
- background-color: var(--seed-color-bg-neutral-weak);
133
- color: var(--seed-color-fg-neutral-muted);
134
- }
135
-
136
- .seed-chip-tabs__trigger--variant_brandSolid[aria-selected="true"], .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--selected_true {
137
- background-color: var(--seed-color-bg-brand-solid);
138
- color: var(--seed-color-palette-static-white);
139
- }
140
-
141
- .seed-chip-tabs__trigger--variant_brandSolid:active {
142
- background-color: var(--seed-color-bg-neutral-weak-pressed);
143
- }
144
-
145
- .seed-chip-tabs__trigger--variant_brandSolid[aria-selected="true"]:active, .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--selected_true:active {
146
- background-color: var(--seed-color-bg-brand-solid-pressed);
147
- }
148
-
149
- .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true {
150
- background-color: var(--seed-color-bg-disabled);
151
- color: var(--seed-color-fg-disabled);
152
- }
153
-
154
- .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true[aria-selected="true"], .seed-chip-tabs__trigger--variant_brandSolid.seed-chip-tabs__trigger--disabled_true.seed-chip-tabs__trigger--selected_true {
155
- background-color: var(--seed-color-bg-disabled);
156
- }
157
-
158
- .seed-chip-tabs__root--contentLayout_fill {
159
- flex-direction: column;
160
- height: 100%;
161
- display: flex;
162
- }
163
-
164
- .seed-chip-tabs__carousel--contentLayout_fill {
165
- flex: 1;
166
- }
167
-
168
- .seed-chip-tabs__carouselCamera--contentLayout_fill {
169
- align-items: stretch;
170
- height: 100%;
171
- }
172
-
173
- .seed-chip-tabs__root--contentLayout_hug {
174
- display: block;
175
- }
176
-
177
- .seed-chip-tabs__root--stickyList_true {
178
- position: relative;
179
- }
180
-
181
- .seed-chip-tabs__list--stickyList_true {
182
- z-index: 1;
183
- position: sticky;
184
- top: 0;
185
- }
186
- }