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

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
package/recipes/radio-group.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  declare interface RadioGroupVariant {
2
2
 
3
3
  disabled?: boolean;
4
- loading?: boolean;}
4
+ loading?: boolean;
5
+ checked?: boolean;}
5
6
 
6
7
  declare type RadioGroupVariantMap = {
7
8
  [key in keyof RadioGroupVariant]: Array<RadioGroupVariant[key]>;
package/recipes/radio-group.layered.mjs CHANGED
@@ -22,6 +22,9 @@ export const radioGroupVariantMap = {
22
22
  ],
23
23
  "loading": [
24
24
  true
25
+ ],
26
+ "checked": [
27
+ true
25
28
  ]
26
29
  };
27
30
 
package/recipes/radio-group.mjs CHANGED
@@ -22,6 +22,9 @@ export const radioGroupVariantMap = {
22
22
  ],
23
23
  "loading": [
24
24
  true
25
+ ],
26
+ "checked": [
27
+ true
25
28
  ]
26
29
  };
27
30
 
package/recipes/radio.css CHANGED
@@ -1,37 +1,32 @@
1
1
  .seed-radio__root {
2
- display: inline-flex;
3
- align-items: flex-start;
2
+ display: flex;
3
+ align-items: center;
4
4
  position: relative;
5
- max-width: 100%;
6
- gap: var(--seed-dimension-x2);
5
+ gap: var(--seed-dimension-x2)
7
6
  }
8
7
  .seed-radio__label {
9
- color: var(--seed-color-fg-neutral);
10
- }
11
- .seed-radio__label.seed-radio__label--disabled_true {
12
- color: var(--seed-color-fg-disabled);
8
+ color: var(--seed-color-fg-neutral)
13
9
  }
14
10
  .seed-radio__label--weight_regular {
15
- font-weight: var(--seed-font-weight-regular);
11
+ font-weight: var(--seed-font-weight-regular)
16
12
  }
17
13
  .seed-radio__label--weight_bold {
18
- font-weight: var(--seed-font-weight-bold);
14
+ font-weight: var(--seed-font-weight-bold)
15
+ }
16
+ .seed-radio__root--size_medium {
17
+ min-height: var(--seed-dimension-x8)
18
+ }
19
+ .seed-radio__label--size_medium {
20
+ font-size: var(--seed-font-size-t4);
21
+ line-height: var(--seed-line-height-t4)
19
22
  }
20
23
  .seed-radio__root--size_large {
21
- min-height: var(--seed-dimension-x9);
22
- --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
24
+ min-height: var(--seed-dimension-x9)
23
25
  }
24
26
  .seed-radio__label--size_large {
25
27
  font-size: var(--seed-font-size-t5);
26
- line-height: var(--seed-line-height-t5);
27
- margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
28
- }
29
- .seed-radio__root--size_medium {
30
- min-height: var(--seed-dimension-x8);
31
- --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
28
+ line-height: var(--seed-line-height-t5)
32
29
  }
33
- .seed-radio__label--size_medium {
34
- font-size: var(--seed-font-size-t4);
35
- line-height: var(--seed-line-height-t4);
36
- margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
30
+ .seed-radio__label--disabled_true {
31
+ color: var(--seed-color-fg-disabled)
37
32
  }
package/recipes/radio.d.ts CHANGED
@@ -6,7 +6,11 @@ declare interface RadioVariant {
6
6
  /**
7
7
  * @default "medium"
8
8
  */
9
- size: "large" | "medium";
9
+ size: "medium" | "large";
10
+ /**
11
+ * @default false
12
+ */
13
+ disabled: boolean;
10
14
  }
11
15
 
12
16
  declare type RadioVariantMap = {
package/recipes/radio.layered.css CHANGED
@@ -1,9 +1,8 @@
1
1
  @layer seed-components {
2
2
  .seed-radio__root {
3
- align-items: flex-start;
3
+ align-items: center;
4
4
  gap: var(--seed-dimension-x2);
5
- max-width: 100%;
6
- display: inline-flex;
5
+ display: flex;
7
6
  position: relative;
8
7
  }
9
8
 
@@ -11,10 +10,6 @@
11
10
  color: var(--seed-color-fg-neutral);
12
11
  }
13
12
 
14
- .seed-radio__label.seed-radio__label--disabled_true {
15
- color: var(--seed-color-fg-disabled);
16
- }
17
-
18
13
  .seed-radio__label--weight_regular {
19
14
  font-weight: var(--seed-font-weight-regular);
20
15
  }
@@ -23,25 +18,25 @@
23
18
  font-weight: var(--seed-font-weight-bold);
24
19
  }
25
20
 
21
+ .seed-radio__root--size_medium {
22
+ min-height: var(--seed-dimension-x8);
23
+ }
24
+
25
+ .seed-radio__label--size_medium {
26
+ font-size: var(--seed-font-size-t4);
27
+ line-height: var(--seed-line-height-t4);
28
+ }
29
+
26
30
  .seed-radio__root--size_large {
27
31
  min-height: var(--seed-dimension-x9);
28
- --radiomark-margin-top: calc((var(--seed-dimension-x9) - var(--seed-dimension-x6)) / 2);
29
32
  }
30
33
 
31
34
  .seed-radio__label--size_large {
32
35
  font-size: var(--seed-font-size-t5);
33
36
  line-height: var(--seed-line-height-t5);
34
- margin-top: calc(var(--seed-dimension-x9) / 2 - var(--seed-line-height-t5) / 2);
35
- }
36
-
37
- .seed-radio__root--size_medium {
38
- min-height: var(--seed-dimension-x8);
39
- --radiomark-margin-top: calc((var(--seed-dimension-x8) - var(--seed-dimension-x5)) / 2);
40
37
  }
41
38
 
42
- .seed-radio__label--size_medium {
43
- font-size: var(--seed-font-size-t4);
44
- line-height: var(--seed-line-height-t4);
45
- margin-top: calc(var(--seed-dimension-x8) / 2 - var(--seed-line-height-t4) / 2);
39
+ .seed-radio__label--disabled_true {
40
+ color: var(--seed-color-fg-disabled);
46
41
  }
47
42
  }
package/recipes/radio.layered.mjs CHANGED
@@ -13,8 +13,9 @@ const radioSlotNames = [
13
13
  ];
14
14
 
15
15
  const defaultVariant = {
16
+ "weight": "regular",
16
17
  "size": "medium",
17
- "weight": "regular"
18
+ "disabled": false
18
19
  };
19
20
 
20
21
  const compoundVariants = [];
@@ -25,8 +26,12 @@ export const radioVariantMap = {
25
26
  "bold"
26
27
  ],
27
28
  "size": [
28
- "large",
29
- "medium"
29
+ "medium",
30
+ "large"
31
+ ],
32
+ "disabled": [
33
+ true,
34
+ false
30
35
  ]
31
36
  };
32
37
 
package/recipes/radio.mjs CHANGED
@@ -13,8 +13,9 @@ const radioSlotNames = [
13
13
  ];
14
14
 
15
15
  const defaultVariant = {
16
+ "weight": "regular",
16
17
  "size": "medium",
17
- "weight": "regular"
18
+ "disabled": false
18
19
  };
19
20
 
20
21
  const compoundVariants = [];
@@ -25,8 +26,12 @@ export const radioVariantMap = {
25
26
  "bold"
26
27
  ],
27
28
  "size": [
28
- "large",
29
- "medium"
29
+ "medium",
30
+ "large"
31
+ ],
32
+ "disabled": [
33
+ true,
34
+ false
30
35
  ]
31
36
  };
32
37
 
package/recipes/radiomark.css CHANGED
@@ -1,79 +1,93 @@
1
1
  .seed-radiomark__root {
2
- border-style: solid;
3
2
  position: relative;
4
3
  display: flex;
5
4
  align-items: center;
6
5
  justify-content: center;
7
6
  flex: none;
8
7
  border-width: 1px;
8
+ border-style: solid;
9
9
  border-color: var(--seed-color-stroke-neutral-weak);
10
10
  border-radius: var(--seed-radius-full);
11
- margin-top: var(--radiomark-margin-top, 0);
12
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
11
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
13
12
  }
14
- .seed-radiomark__root:not([data-disabled]):active {
15
- background-color: var(--seed-color-bg-transparent-pressed);
13
+ .seed-radiomark__icon {
14
+ border-radius: var(--seed-radius-full)
16
15
  }
17
- .seed-radiomark__root.seed-radiomark__root--checked_true {
18
- border-width: 0px;
16
+ .seed-radiomark__root--size_medium {
17
+ width: var(--seed-dimension-x5);
18
+ height: var(--seed-dimension-x5)
19
19
  }
20
- .seed-radiomark__root.seed-radiomark__root--disabled_true {
21
- background-color: var(--seed-color-palette-gray-300);
20
+ .seed-radiomark__icon--size_medium {
21
+ width: var(--seed-dimension-x2);
22
+ height: var(--seed-dimension-x2)
22
23
  }
23
- .seed-radiomark__root.seed-radiomark__root--disabled_true[data-checked] {
24
- background-color: var(--seed-color-bg-transparent);
25
- border-width: 1px;
26
- border-color: var(--seed-color-palette-gray-300);
24
+ .seed-radiomark__root--size_large {
25
+ width: var(--seed-dimension-x6);
26
+ height: var(--seed-dimension-x6)
27
27
  }
28
- .seed-radiomark__icon {
29
- display: none;
30
- border-radius: var(--seed-radius-full);
28
+ .seed-radiomark__icon--size_large {
29
+ width: var(--seed-dimension-x2_5);
30
+ height: var(--seed-dimension-x2_5)
31
31
  }
32
- .seed-radiomark__icon.seed-radiomark__icon--checked_true {
33
- display: block;
32
+ .seed-radiomark__icon--checked_false {
33
+ opacity: 0
34
34
  }
35
- .seed-radiomark__icon.seed-radiomark__icon--disabled_true[data-checked] {
36
- color: var(--seed-color-palette-gray-300);
35
+ .seed-radiomark__root--tone_brand-checked_true-disabled_false {
36
+ background-color: var(--seed-color-bg-brand-solid);
37
+ border-width: 0px;
38
+ border-color: #00000000
37
39
  }
38
- .seed-radiomark__root--tone_neutral.seed-radiomark__root--checked_true {
39
- background-color: var(--seed-color-bg-neutral-inverted);
40
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
41
+ color: var(--seed-color-palette-static-white);
42
+ background-color: var(--seed-color-palette-static-white)
40
43
  }
41
- .seed-radiomark__root--tone_neutral:not(.seed-radiomark__root--disabled_true)[data-checked]:active {
42
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
44
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
45
+ background-color: var(--seed-color-bg-neutral-inverted);
46
+ border-width: 0px;
47
+ border-color: #00000000
43
48
  }
44
- .seed-radiomark__icon--tone_neutral.seed-radiomark__icon--checked_true {
49
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
45
50
  color: var(--seed-color-fg-neutral-inverted);
51
+ background-color: var(--seed-color-fg-neutral-inverted)
46
52
  }
47
- .seed-radiomark__root--tone_brand.seed-radiomark__root--checked_true {
48
- background-color: var(--seed-color-bg-brand-solid);
53
+ .seed-radiomark__root--tone_brand-checked_false-disabled_true {
54
+ background-color: var(--seed-color-palette-gray-300)
49
55
  }
50
- .seed-radiomark__root--tone_brand:not(.seed-radiomark__root--disabled_true)[data-checked]:active {
51
- background-color: var(--seed-color-bg-brand-solid-pressed);
56
+ .seed-radiomark__root--tone_neutral-checked_false-disabled_true {
57
+ background-color: var(--seed-color-palette-gray-300)
52
58
  }
53
- .seed-radiomark__icon--tone_brand.seed-radiomark__icon--checked_true {
54
- color: var(--seed-color-palette-static-white);
59
+ .seed-radiomark__root--tone_brand-checked_true-disabled_true {
60
+ background-color: var(--seed-color-bg-transparent);
61
+ border-width: 1px;
62
+ border-color: var(--seed-color-palette-gray-300)
55
63
  }
56
- .seed-radiomark__root--size_large {
57
- width: var(--seed-dimension-x6);
58
- height: var(--seed-dimension-x6);
64
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_true {
65
+ color: var(--seed-color-palette-gray-300);
66
+ background-color: var(--seed-color-palette-gray-300)
59
67
  }
60
- .seed-radiomark__icon--size_large {
68
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_true {
69
+ background-color: var(--seed-color-bg-transparent);
70
+ border-width: 1px;
71
+ border-color: var(--seed-color-palette-gray-300)
72
+ }
73
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_true {
74
+ color: var(--seed-color-palette-gray-300);
75
+ background-color: var(--seed-color-palette-gray-300)
76
+ }
77
+ .seed-radiomark__icon--size_medium-checked_true-disabled_true {
61
78
  width: var(--seed-dimension-x2_5);
62
- height: var(--seed-dimension-x2_5);
79
+ height: var(--seed-dimension-x2_5)
63
80
  }
64
- .seed-radiomark__icon--size_large.seed-radiomark__icon--disabled_true {
81
+ .seed-radiomark__icon--size_large-checked_true-disabled_true {
65
82
  width: var(--seed-dimension-x3);
66
- height: var(--seed-dimension-x3);
83
+ height: var(--seed-dimension-x3)
67
84
  }
68
- .seed-radiomark__root--size_medium {
69
- width: var(--seed-dimension-x5);
70
- height: var(--seed-dimension-x5);
85
+ .seed-radiomark__root--pressed_true-checked_false-disabled_false {
86
+ background-color: var(--seed-color-bg-transparent-pressed)
71
87
  }
72
- .seed-radiomark__icon--size_medium {
73
- width: var(--seed-dimension-x2);
74
- height: var(--seed-dimension-x2);
88
+ .seed-radiomark__root--tone_brand-pressed_true-checked_true-disabled_false {
89
+ background-color: var(--seed-color-bg-brand-solid-pressed)
75
90
  }
76
- .seed-radiomark__icon--size_medium.seed-radiomark__icon--disabled_true {
77
- width: var(--seed-dimension-x2_5);
78
- height: var(--seed-dimension-x2_5);
91
+ .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
92
+ background-color: var(--seed-color-bg-neutral-inverted-pressed)
79
93
  }
package/recipes/radiomark.d.ts CHANGED
@@ -2,11 +2,23 @@ declare interface RadiomarkVariant {
2
2
  /**
3
3
  * @default "brand"
4
4
  */
5
- tone: "neutral" | "brand";
5
+ tone: "brand" | "neutral";
6
6
  /**
7
7
  * @default "medium"
8
8
  */
9
- size: "large" | "medium";
9
+ size: "medium" | "large";
10
+ /**
11
+ * @default false
12
+ */
13
+ checked: boolean;
14
+ /**
15
+ * @default false
16
+ */
17
+ disabled: boolean;
18
+ /**
19
+ * @default false
20
+ */
21
+ pressed: boolean;
10
22
  }
11
23
 
12
24
  declare type RadiomarkVariantMap = {
package/recipes/radiomark.layered.css CHANGED
@@ -4,7 +4,6 @@
4
4
  border-width: 1px;
5
5
  border-color: var(--seed-color-stroke-neutral-weak);
6
6
  border-radius: var(--seed-radius-full);
7
- margin-top: var(--radiomark-margin-top, 0);
8
7
  transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
9
8
  flex: none;
10
9
  justify-content: center;
@@ -13,88 +12,101 @@
13
12
  position: relative;
14
13
  }
15
14
 
16
- .seed-radiomark__root:not([data-disabled]):active {
17
- background-color: var(--seed-color-bg-transparent-pressed);
15
+ .seed-radiomark__icon {
16
+ border-radius: var(--seed-radius-full);
18
17
  }
19
18
 
20
- .seed-radiomark__root.seed-radiomark__root--checked_true {
21
- border-width: 0;
19
+ .seed-radiomark__root--size_medium {
20
+ width: var(--seed-dimension-x5);
21
+ height: var(--seed-dimension-x5);
22
22
  }
23
23
 
24
- .seed-radiomark__root.seed-radiomark__root--disabled_true {
25
- background-color: var(--seed-color-palette-gray-300);
24
+ .seed-radiomark__icon--size_medium {
25
+ width: var(--seed-dimension-x2);
26
+ height: var(--seed-dimension-x2);
26
27
  }
27
28
 
28
- .seed-radiomark__root.seed-radiomark__root--disabled_true.seed-radiomark__root--checked_true {
29
- background-color: var(--seed-color-bg-transparent);
30
- border-width: 1px;
31
- border-color: var(--seed-color-palette-gray-300);
29
+ .seed-radiomark__root--size_large {
30
+ width: var(--seed-dimension-x6);
31
+ height: var(--seed-dimension-x6);
32
32
  }
33
33
 
34
- .seed-radiomark__icon {
35
- border-radius: var(--seed-radius-full);
36
- display: none;
34
+ .seed-radiomark__icon--size_large {
35
+ width: var(--seed-dimension-x2_5);
36
+ height: var(--seed-dimension-x2_5);
37
37
  }
38
38
 
39
- .seed-radiomark__icon.seed-radiomark__icon--checked_true {
40
- display: block;
39
+ .seed-radiomark__icon--checked_false {
40
+ opacity: 0;
41
41
  }
42
42
 
43
- .seed-radiomark__icon.seed-radiomark__icon--disabled_true.seed-radiomark__icon--checked_true {
44
- color: var(--seed-color-palette-gray-300);
43
+ .seed-radiomark__root--tone_brand-checked_true-disabled_false {
44
+ background-color: var(--seed-color-bg-brand-solid);
45
+ border-width: 0;
46
+ border-color: #0000;
45
47
  }
46
48
 
47
- .seed-radiomark__root--tone_neutral.seed-radiomark__root--checked_true {
48
- background-color: var(--seed-color-bg-neutral-inverted);
49
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_false {
50
+ color: var(--seed-color-palette-static-white);
51
+ background-color: var(--seed-color-palette-static-white);
49
52
  }
50
53
 
51
- .seed-radiomark__root--tone_neutral:not(.seed-radiomark__root--disabled_true).seed-radiomark__root--checked_true:active {
52
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
54
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_false {
55
+ background-color: var(--seed-color-bg-neutral-inverted);
56
+ border-width: 0;
57
+ border-color: #0000;
53
58
  }
54
59
 
55
- .seed-radiomark__icon--tone_neutral.seed-radiomark__icon--checked_true {
60
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_false {
56
61
  color: var(--seed-color-fg-neutral-inverted);
62
+ background-color: var(--seed-color-fg-neutral-inverted);
57
63
  }
58
64
 
59
- .seed-radiomark__root--tone_brand.seed-radiomark__root--checked_true {
60
- background-color: var(--seed-color-bg-brand-solid);
65
+ .seed-radiomark__root--tone_brand-checked_false-disabled_true, .seed-radiomark__root--tone_neutral-checked_false-disabled_true {
66
+ background-color: var(--seed-color-palette-gray-300);
61
67
  }
62
68
 
63
- .seed-radiomark__root--tone_brand:not(.seed-radiomark__root--disabled_true).seed-radiomark__root--checked_true:active {
64
- background-color: var(--seed-color-bg-brand-solid-pressed);
69
+ .seed-radiomark__root--tone_brand-checked_true-disabled_true {
70
+ background-color: var(--seed-color-bg-transparent);
71
+ border-width: 1px;
72
+ border-color: var(--seed-color-palette-gray-300);
65
73
  }
66
74
 
67
- .seed-radiomark__icon--tone_brand.seed-radiomark__icon--checked_true {
68
- color: var(--seed-color-palette-static-white);
75
+ .seed-radiomark__icon--tone_brand-checked_true-disabled_true {
76
+ color: var(--seed-color-palette-gray-300);
77
+ background-color: var(--seed-color-palette-gray-300);
69
78
  }
70
79
 
71
- .seed-radiomark__root--size_large {
72
- width: var(--seed-dimension-x6);
73
- height: var(--seed-dimension-x6);
80
+ .seed-radiomark__root--tone_neutral-checked_true-disabled_true {
81
+ background-color: var(--seed-color-bg-transparent);
82
+ border-width: 1px;
83
+ border-color: var(--seed-color-palette-gray-300);
74
84
  }
75
85
 
76
- .seed-radiomark__icon--size_large {
86
+ .seed-radiomark__icon--tone_neutral-checked_true-disabled_true {
87
+ color: var(--seed-color-palette-gray-300);
88
+ background-color: var(--seed-color-palette-gray-300);
89
+ }
90
+
91
+ .seed-radiomark__icon--size_medium-checked_true-disabled_true {
77
92
  width: var(--seed-dimension-x2_5);
78
93
  height: var(--seed-dimension-x2_5);
79
94
  }
80
95
 
81
- .seed-radiomark__icon--size_large.seed-radiomark__icon--disabled_true {
96
+ .seed-radiomark__icon--size_large-checked_true-disabled_true {
82
97
  width: var(--seed-dimension-x3);
83
98
  height: var(--seed-dimension-x3);
84
99
  }
85
100
 
86
- .seed-radiomark__root--size_medium {
87
- width: var(--seed-dimension-x5);
88
- height: var(--seed-dimension-x5);
101
+ .seed-radiomark__root--pressed_true-checked_false-disabled_false {
102
+ background-color: var(--seed-color-bg-transparent-pressed);
89
103
  }
90
104
 
91
- .seed-radiomark__icon--size_medium {
92
- width: var(--seed-dimension-x2);
93
- height: var(--seed-dimension-x2);
105
+ .seed-radiomark__root--tone_brand-pressed_true-checked_true-disabled_false {
106
+ background-color: var(--seed-color-bg-brand-solid-pressed);
94
107
  }
95
108
 
96
- .seed-radiomark__icon--size_medium.seed-radiomark__icon--disabled_true {
97
- width: var(--seed-dimension-x2_5);
98
- height: var(--seed-dimension-x2_5);
109
+ .seed-radiomark__root--tone_neutral-pressed_true-checked_true-disabled_false {
110
+ background-color: var(--seed-color-bg-neutral-inverted-pressed);
99
111
  }
100
112
  }
package/recipes/radiomark.layered.mjs CHANGED
@@ -14,19 +14,92 @@ const radiomarkSlotNames = [
14
14
 
15
15
  const defaultVariant = {
16
16
  "tone": "brand",
17
- "size": "medium"
17
+ "size": "medium",
18
+ "checked": false,
19
+ "disabled": false,
20
+ "pressed": false
18
21
  };
19
22
 
20
- const compoundVariants = [];
23
+ const compoundVariants = [
24
+ {
25
+ "tone": "brand",
26
+ "checked": true,
27
+ "disabled": false
28
+ },
29
+ {
30
+ "tone": "neutral",
31
+ "checked": true,
32
+ "disabled": false
33
+ },
34
+ {
35
+ "tone": "brand",
36
+ "checked": false,
37
+ "disabled": true
38
+ },
39
+ {
40
+ "tone": "neutral",
41
+ "checked": false,
42
+ "disabled": true
43
+ },
44
+ {
45
+ "tone": "brand",
46
+ "checked": true,
47
+ "disabled": true
48
+ },
49
+ {
50
+ "tone": "neutral",
51
+ "checked": true,
52
+ "disabled": true
53
+ },
54
+ {
55
+ "size": "medium",
56
+ "checked": true,
57
+ "disabled": true
58
+ },
59
+ {
60
+ "size": "large",
61
+ "checked": true,
62
+ "disabled": true
63
+ },
64
+ {
65
+ "pressed": true,
66
+ "checked": false,
67
+ "disabled": false
68
+ },
69
+ {
70
+ "tone": "brand",
71
+ "pressed": true,
72
+ "checked": true,
73
+ "disabled": false
74
+ },
75
+ {
76
+ "tone": "neutral",
77
+ "pressed": true,
78
+ "checked": true,
79
+ "disabled": false
80
+ }
81
+ ];
21
82
 
22
83
  export const radiomarkVariantMap = {
23
84
  "tone": [
24
- "neutral",
25
- "brand"
85
+ "brand",
86
+ "neutral"
26
87
  ],
27
88
  "size": [
28
- "large",
29
- "medium"
89
+ "medium",
90
+ "large"
91
+ ],
92
+ "checked": [
93
+ true,
94
+ false
95
+ ],
96
+ "disabled": [
97
+ true,
98
+ false
99
+ ],
100
+ "pressed": [
101
+ true,
102
+ false
30
103
  ]
31
104
  };
32
105