@svelte-atoms/core 1.0.0-alpha.25 → 1.0.0-alpha.27

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 (354) hide show
  1. package/README.md +645 -645
  2. package/dist/components/accordion/accordion-root.svelte +61 -79
  3. package/dist/components/accordion/accordion-root.svelte.d.ts +2 -15
  4. package/dist/components/accordion/index.d.ts +2 -1
  5. package/dist/components/accordion/index.js +2 -1
  6. package/dist/components/accordion/item/accordion-item-body.svelte +42 -52
  7. package/dist/components/accordion/item/accordion-item-body.svelte.d.ts +2 -8
  8. package/dist/components/accordion/item/accordion-item-header.svelte +50 -56
  9. package/dist/components/accordion/item/accordion-item-header.svelte.d.ts +3 -20
  10. package/dist/components/accordion/item/accordion-item-indicator.svelte +50 -59
  11. package/dist/components/accordion/item/accordion-item-indicator.svelte.d.ts +2 -8
  12. package/dist/components/accordion/item/accordion-item-root.svelte +65 -79
  13. package/dist/components/accordion/item/accordion-item-root.svelte.d.ts +2 -12
  14. package/dist/components/accordion/item/index.d.ts +1 -0
  15. package/dist/components/accordion/item/types.d.ts +52 -0
  16. package/dist/components/accordion/item/types.js +1 -0
  17. package/dist/components/accordion/types.d.ts +21 -0
  18. package/dist/components/accordion/types.js +1 -0
  19. package/dist/components/alert/alert-actions.svelte +42 -52
  20. package/dist/components/alert/alert-actions.svelte.d.ts +3 -30
  21. package/dist/components/alert/alert-close-button.svelte +72 -79
  22. package/dist/components/alert/alert-close-button.svelte.d.ts +8 -35
  23. package/dist/components/alert/alert-content.svelte +42 -52
  24. package/dist/components/alert/alert-content.svelte.d.ts +3 -30
  25. package/dist/components/alert/alert-description.svelte +41 -51
  26. package/dist/components/alert/alert-description.svelte.d.ts +7 -10
  27. package/dist/components/alert/alert-icon.svelte +46 -56
  28. package/dist/components/alert/alert-icon.svelte.d.ts +2 -8
  29. package/dist/components/alert/alert-root.svelte +102 -118
  30. package/dist/components/alert/alert-root.svelte.d.ts +2 -13
  31. package/dist/components/alert/alert-title.svelte +41 -51
  32. package/dist/components/alert/alert-title.svelte.d.ts +2 -8
  33. package/dist/components/alert/index.d.ts +1 -0
  34. package/dist/components/alert/index.js +1 -0
  35. package/dist/components/alert/types.d.ts +85 -0
  36. package/dist/components/alert/types.js +1 -0
  37. package/dist/components/atom/html-atom.svelte +201 -217
  38. package/dist/components/atom/html-atom.svelte.d.ts +2 -22
  39. package/dist/components/atom/types.d.ts +7 -2
  40. package/dist/components/avatar/types.d.ts +7 -2
  41. package/dist/components/badge/badge.svelte +1 -1
  42. package/dist/components/badge/types.d.ts +7 -2
  43. package/dist/components/breadcrumb/breadcrumb-item.svelte +1 -1
  44. package/dist/components/breadcrumb/breadcrumb-root.svelte +1 -1
  45. package/dist/components/breadcrumb/breadcrumb-separator.svelte +1 -1
  46. package/dist/components/button/button.stories.svelte +57 -57
  47. package/dist/components/button/button.svelte +1 -1
  48. package/dist/components/button/button.svelte.d.ts +4 -1
  49. package/dist/components/button/index.d.ts +1 -0
  50. package/dist/components/button/index.js +1 -0
  51. package/dist/components/button/types.d.ts +8 -3
  52. package/dist/components/card/card-body.svelte +39 -45
  53. package/dist/components/card/card-body.svelte.d.ts +7 -4
  54. package/dist/components/card/card-description.svelte +41 -48
  55. package/dist/components/card/card-description.svelte.d.ts +7 -7
  56. package/dist/components/card/card-footer.svelte +41 -48
  57. package/dist/components/card/card-footer.svelte.d.ts +7 -4
  58. package/dist/components/card/card-header.svelte +41 -48
  59. package/dist/components/card/card-header.svelte.d.ts +7 -4
  60. package/dist/components/card/card-media.svelte +41 -48
  61. package/dist/components/card/card-media.svelte.d.ts +7 -4
  62. package/dist/components/card/card-root.svelte +91 -91
  63. package/dist/components/card/card-root.svelte.d.ts +1 -1
  64. package/dist/components/card/card-subtitle.svelte +41 -48
  65. package/dist/components/card/card-subtitle.svelte.d.ts +12 -9
  66. package/dist/components/card/card-title.svelte +45 -48
  67. package/dist/components/card/card-title.svelte.d.ts +12 -9
  68. package/dist/components/card/index.d.ts +1 -0
  69. package/dist/components/card/index.js +1 -0
  70. package/dist/components/card/types.d.ts +57 -2
  71. package/dist/components/checkbox/checkbox.svelte +39 -28
  72. package/dist/components/checkbox/types.d.ts +7 -2
  73. package/dist/components/collapsible/collapsible-body.svelte +39 -52
  74. package/dist/components/collapsible/collapsible-body.svelte.d.ts +2 -9
  75. package/dist/components/collapsible/collapsible-header.svelte +39 -52
  76. package/dist/components/collapsible/collapsible-header.svelte.d.ts +2 -9
  77. package/dist/components/collapsible/collapsible-indicator.svelte +50 -65
  78. package/dist/components/collapsible/collapsible-indicator.svelte.d.ts +3 -10
  79. package/dist/components/collapsible/collapsible-root.svelte +66 -85
  80. package/dist/components/collapsible/collapsible-root.svelte.d.ts +2 -14
  81. package/dist/components/collapsible/index.d.ts +1 -0
  82. package/dist/components/collapsible/index.js +1 -0
  83. package/dist/components/collapsible/types.d.ts +54 -0
  84. package/dist/components/collapsible/types.js +1 -0
  85. package/dist/components/combobox/atoms.d.ts +5 -1
  86. package/dist/components/combobox/atoms.js +5 -1
  87. package/dist/components/combobox/{combobox-input.svelte → combobox-control.svelte} +3 -3
  88. package/dist/components/combobox/{combobox-input.svelte.d.ts → combobox-control.svelte.d.ts} +3 -3
  89. package/dist/components/combobox/combobox-root.svelte +65 -68
  90. package/dist/components/combobox/combobox-root.svelte.d.ts +5 -18
  91. package/dist/components/combobox/combobox-trigger.svelte +1 -1
  92. package/dist/components/combobox/compobox-item.svelte +1 -1
  93. package/dist/components/combobox/index.d.ts +1 -0
  94. package/dist/components/combobox/index.js +1 -0
  95. package/dist/components/combobox/types.d.ts +25 -0
  96. package/dist/components/combobox/types.js +1 -0
  97. package/dist/components/container/container.svelte +1 -1
  98. package/dist/components/container/types.d.ts +7 -2
  99. package/dist/components/contextmenu/types.d.ts +8 -0
  100. package/dist/components/contextmenu/types.js +1 -0
  101. package/dist/components/datagrid/datagrid-body.svelte +37 -44
  102. package/dist/components/datagrid/datagrid-body.svelte.d.ts +17 -20
  103. package/dist/components/datagrid/datagrid-checkbox.svelte +101 -108
  104. package/dist/components/datagrid/datagrid-checkbox.svelte.d.ts +4 -6
  105. package/dist/components/datagrid/datagrid-footer.svelte +34 -34
  106. package/dist/components/datagrid/datagrid-footer.svelte.d.ts +1 -1
  107. package/dist/components/datagrid/datagrid-header.svelte +49 -49
  108. package/dist/components/datagrid/datagrid-header.svelte.d.ts +1 -1
  109. package/dist/components/datagrid/datagrid-root.svelte +59 -59
  110. package/dist/components/datagrid/datagrid-root.svelte.d.ts +1 -1
  111. package/dist/components/datagrid/datagrid.stories.svelte +75 -75
  112. package/dist/components/datagrid/td/datagrid-td.svelte +66 -80
  113. package/dist/components/datagrid/td/datagrid-td.svelte.d.ts +7 -16
  114. package/dist/components/datagrid/th/datagrid-th-sort-icon.svelte +1 -1
  115. package/dist/components/datagrid/th/datagrid-th.svelte +106 -127
  116. package/dist/components/datagrid/th/datagrid-th.svelte.d.ts +2 -20
  117. package/dist/components/datagrid/tr/bond.svelte.d.ts +3 -1
  118. package/dist/components/datagrid/tr/bond.svelte.js +4 -2
  119. package/dist/components/datagrid/tr/datagrid-tr.svelte +88 -103
  120. package/dist/components/datagrid/tr/datagrid-tr.svelte.d.ts +2 -18
  121. package/dist/components/datagrid/types.d.ts +85 -37
  122. package/dist/components/dialog/dialog-body.svelte +39 -45
  123. package/dist/components/dialog/dialog-body.svelte.d.ts +2 -2
  124. package/dist/components/dialog/dialog-close-button.svelte +58 -61
  125. package/dist/components/dialog/dialog-close-button.svelte.d.ts +7 -7
  126. package/dist/components/dialog/dialog-content.svelte +62 -71
  127. package/dist/components/dialog/dialog-content.svelte.d.ts +2 -2
  128. package/dist/components/dialog/dialog-description.svelte +40 -46
  129. package/dist/components/dialog/dialog-description.svelte.d.ts +2 -2
  130. package/dist/components/dialog/dialog-footer.svelte +39 -45
  131. package/dist/components/dialog/dialog-footer.svelte.d.ts +2 -2
  132. package/dist/components/dialog/dialog-header.svelte +39 -45
  133. package/dist/components/dialog/dialog-header.svelte.d.ts +2 -2
  134. package/dist/components/dialog/dialog-root.svelte +110 -120
  135. package/dist/components/dialog/dialog-root.svelte.d.ts +2 -10
  136. package/dist/components/dialog/dialog-title.svelte +41 -47
  137. package/dist/components/dialog/dialog-title.svelte.d.ts +7 -7
  138. package/dist/components/dialog/index.d.ts +1 -0
  139. package/dist/components/dialog/index.js +1 -0
  140. package/dist/components/dialog/types.d.ts +67 -0
  141. package/dist/components/dialog/types.js +1 -0
  142. package/dist/components/divider/types.d.ts +10 -0
  143. package/dist/components/divider/types.js +1 -0
  144. package/dist/components/drawer/drawer-backdrop.svelte +38 -47
  145. package/dist/components/drawer/drawer-backdrop.svelte.d.ts +3 -26
  146. package/dist/components/drawer/drawer-body.svelte +42 -56
  147. package/dist/components/drawer/drawer-body.svelte.d.ts +3 -16
  148. package/dist/components/drawer/drawer-content.svelte +42 -55
  149. package/dist/components/drawer/drawer-content.svelte.d.ts +3 -14
  150. package/dist/components/drawer/drawer-description.svelte +44 -57
  151. package/dist/components/drawer/drawer-description.svelte.d.ts +3 -14
  152. package/dist/components/drawer/drawer-footer.svelte +41 -54
  153. package/dist/components/drawer/drawer-footer.svelte.d.ts +3 -14
  154. package/dist/components/drawer/drawer-header.svelte +43 -56
  155. package/dist/components/drawer/drawer-header.svelte.d.ts +3 -14
  156. package/dist/components/drawer/drawer-root.svelte +93 -113
  157. package/dist/components/drawer/drawer-root.svelte.d.ts +3 -31
  158. package/dist/components/drawer/drawer-title.svelte +44 -57
  159. package/dist/components/drawer/drawer-title.svelte.d.ts +3 -14
  160. package/dist/components/drawer/index.d.ts +1 -0
  161. package/dist/components/drawer/index.js +1 -0
  162. package/dist/components/drawer/types.d.ts +86 -0
  163. package/dist/components/drawer/types.js +1 -0
  164. package/dist/components/dropdown/dropdown-placeholder.svelte +1 -1
  165. package/dist/components/dropdown/dropdown-query.svelte +54 -53
  166. package/dist/components/dropdown/dropdown-query.svelte.d.ts +11 -10
  167. package/dist/components/dropdown/dropdown-root.svelte +59 -59
  168. package/dist/components/dropdown/dropdown-trigger.svelte +41 -52
  169. package/dist/components/dropdown/dropdown-trigger.svelte.d.ts +1 -8
  170. package/dist/components/dropdown/dropdown-value.svelte +60 -62
  171. package/dist/components/dropdown/index.d.ts +1 -0
  172. package/dist/components/dropdown/index.js +1 -0
  173. package/dist/components/dropdown/item/bond.svelte.d.ts +4 -0
  174. package/dist/components/dropdown/item/bond.svelte.js +9 -0
  175. package/dist/components/dropdown/item/dropdown-item.svelte +10 -6
  176. package/dist/components/dropdown/types.d.ts +37 -0
  177. package/dist/components/dropdown/types.js +1 -0
  178. package/dist/components/element/html-element.svelte.d.ts +2 -14
  179. package/dist/components/element/svg-element.svelte.d.ts +2 -14
  180. package/dist/components/element/types.d.ts +14 -7
  181. package/dist/components/form/field/bond.svelte.d.ts +8 -0
  182. package/dist/components/form/field/bond.svelte.js +13 -1
  183. package/dist/components/form/field/field-control.svelte +48 -58
  184. package/dist/components/form/field/field-control.svelte.d.ts +5 -19
  185. package/dist/components/form/field/field-label.svelte +24 -31
  186. package/dist/components/form/field/field-label.svelte.d.ts +1 -2
  187. package/dist/components/form/field/field-root.svelte +59 -88
  188. package/dist/components/form/field/field-root.svelte.d.ts +5 -20
  189. package/dist/components/form/form.stories.svelte +3 -3
  190. package/dist/components/form/index.d.ts +1 -0
  191. package/dist/components/form/index.js +1 -0
  192. package/dist/components/form/types.d.ts +76 -0
  193. package/dist/components/form/types.js +1 -0
  194. package/dist/components/icon/icon.svelte +44 -55
  195. package/dist/components/icon/icon.svelte.d.ts +4 -29
  196. package/dist/components/icon/types.d.ts +11 -7
  197. package/dist/components/input/atoms.d.ts +5 -1
  198. package/dist/components/input/atoms.js +5 -1
  199. package/dist/components/input/index.d.ts +1 -0
  200. package/dist/components/input/index.js +1 -0
  201. package/dist/components/input/{input-value.svelte → input-control.svelte} +14 -24
  202. package/dist/components/input/input-control.svelte.d.ts +26 -0
  203. package/dist/components/input/input-icon.svelte +1 -1
  204. package/dist/components/input/input-icon.svelte.d.ts +1 -1
  205. package/dist/components/input/input-placeholder.svelte +54 -56
  206. package/dist/components/input/input-placeholder.svelte.d.ts +2 -19
  207. package/dist/components/input/input-root.svelte +5 -12
  208. package/dist/components/input/input-root.svelte.d.ts +3 -20
  209. package/dist/components/input/input.stories.svelte +2 -2
  210. package/dist/components/input/types.d.ts +33 -0
  211. package/dist/components/input/types.js +1 -0
  212. package/dist/components/label/index.d.ts +1 -0
  213. package/dist/components/label/index.js +1 -0
  214. package/dist/components/label/label.svelte +25 -41
  215. package/dist/components/label/label.svelte.d.ts +3 -27
  216. package/dist/components/label/types.d.ts +11 -0
  217. package/dist/components/label/types.js +1 -0
  218. package/dist/components/layer/layer-inner.svelte.d.ts +2 -19
  219. package/dist/components/layer/layer-root.svelte.d.ts +2 -19
  220. package/dist/components/layer/types.d.ts +11 -0
  221. package/dist/components/layer/types.js +1 -0
  222. package/dist/components/link/types.d.ts +8 -0
  223. package/dist/components/link/types.js +1 -0
  224. package/dist/components/list/list-group.svelte +1 -1
  225. package/dist/components/list/list-item.svelte +1 -1
  226. package/dist/components/list/list-root.svelte +6 -1
  227. package/dist/components/list/list-title.svelte +1 -1
  228. package/dist/components/list/types.d.ts +8 -0
  229. package/dist/components/list/types.js +1 -0
  230. package/dist/components/menu/index.d.ts +1 -0
  231. package/dist/components/menu/index.js +1 -0
  232. package/dist/components/menu/menu-list.svelte +1 -1
  233. package/dist/components/menu/types.d.ts +15 -0
  234. package/dist/components/menu/types.js +1 -0
  235. package/dist/components/popover/bond.svelte.d.ts +2 -0
  236. package/dist/components/popover/bond.svelte.js +1 -1
  237. package/dist/components/popover/index.d.ts +1 -0
  238. package/dist/components/popover/index.js +1 -0
  239. package/dist/components/popover/popover-arrow.svelte +111 -117
  240. package/dist/components/popover/popover-arrow.svelte.d.ts +3 -20
  241. package/dist/components/popover/popover-content.svelte +139 -147
  242. package/dist/components/popover/popover-content.svelte.d.ts +3 -17
  243. package/dist/components/popover/popover-indicator.svelte +1 -1
  244. package/dist/components/popover/popover-root.svelte +4 -18
  245. package/dist/components/popover/popover-root.svelte.d.ts +1 -15
  246. package/dist/components/popover/popover-trigger.svelte +3 -12
  247. package/dist/components/popover/popover-trigger.svelte.d.ts +2 -8
  248. package/dist/components/popover/types.d.ts +61 -0
  249. package/dist/components/popover/types.js +1 -0
  250. package/dist/components/portal/active-portal.svelte +8 -2
  251. package/dist/components/portal/active-portal.svelte.d.ts +2 -2
  252. package/dist/components/portal/index.d.ts +1 -0
  253. package/dist/components/portal/index.js +1 -0
  254. package/dist/components/portal/portal-inner.svelte +1 -1
  255. package/dist/components/portal/portal-inner.svelte.d.ts +2 -19
  256. package/dist/components/portal/portal-root.svelte +83 -88
  257. package/dist/components/portal/portal-root.svelte.d.ts +2 -22
  258. package/dist/components/portal/teleport.svelte +50 -49
  259. package/dist/components/portal/teleport.svelte.d.ts +5 -23
  260. package/dist/components/portal/types.d.ts +39 -0
  261. package/dist/components/portal/types.js +1 -0
  262. package/dist/components/radio/radio-group.stories.svelte +4 -4
  263. package/dist/components/radio/radio.svelte +109 -109
  264. package/dist/components/radio/radio.svelte.d.ts +14 -36
  265. package/dist/components/root/root.css +24 -66
  266. package/dist/components/root/root.svelte +121 -121
  267. package/dist/components/root/types.d.ts +8 -0
  268. package/dist/components/root/types.js +1 -0
  269. package/dist/components/scrollable/index.d.ts +1 -0
  270. package/dist/components/scrollable/index.js +1 -0
  271. package/dist/components/scrollable/scrollable-container.svelte +82 -89
  272. package/dist/components/scrollable/scrollable-container.svelte.d.ts +2 -6
  273. package/dist/components/scrollable/scrollable-content.svelte +41 -51
  274. package/dist/components/scrollable/scrollable-content.svelte.d.ts +1 -6
  275. package/dist/components/scrollable/scrollable-root.svelte +100 -120
  276. package/dist/components/scrollable/scrollable-root.svelte.d.ts +3 -19
  277. package/dist/components/scrollable/scrollable-thumb.svelte +75 -86
  278. package/dist/components/scrollable/scrollable-thumb.svelte.d.ts +1 -7
  279. package/dist/components/scrollable/scrollable-track.svelte +59 -70
  280. package/dist/components/scrollable/scrollable-track.svelte.d.ts +1 -7
  281. package/dist/components/scrollable/types.d.ts +62 -0
  282. package/dist/components/scrollable/types.js +1 -0
  283. package/dist/components/sidebar/index.d.ts +1 -0
  284. package/dist/components/sidebar/index.js +1 -0
  285. package/dist/components/sidebar/sidebar-content.svelte +2 -16
  286. package/dist/components/sidebar/sidebar-content.svelte.d.ts +2 -9
  287. package/dist/components/sidebar/sidebar-root.svelte +4 -23
  288. package/dist/components/sidebar/sidebar-root.svelte.d.ts +2 -13
  289. package/dist/components/sidebar/types.d.ts +30 -0
  290. package/dist/components/sidebar/types.js +1 -0
  291. package/dist/components/stack/stack-item.svelte +5 -1
  292. package/dist/components/stack/stack-root.svelte +5 -1
  293. package/dist/components/stack/stack-root.svelte.d.ts +2 -19
  294. package/dist/components/stack/types.d.ts +12 -0
  295. package/dist/components/stack/types.js +1 -0
  296. package/dist/components/tabs/index.d.ts +1 -0
  297. package/dist/components/tabs/index.js +1 -0
  298. package/dist/components/tabs/tab/tab-body.svelte +52 -61
  299. package/dist/components/tabs/tab/tab-body.svelte.d.ts +2 -8
  300. package/dist/components/tabs/tab/tab-description.svelte +41 -50
  301. package/dist/components/tabs/tab/tab-description.svelte.d.ts +2 -8
  302. package/dist/components/tabs/tab/tab-header.svelte +71 -81
  303. package/dist/components/tabs/tab/tab-header.svelte.d.ts +2 -11
  304. package/dist/components/tabs/tab/tab-root.svelte +86 -81
  305. package/dist/components/tabs/tabs-body.svelte +1 -1
  306. package/dist/components/tabs/tabs-header.svelte +1 -1
  307. package/dist/components/tabs/tabs-root.svelte +1 -1
  308. package/dist/components/tabs/types.d.ts +55 -0
  309. package/dist/components/tabs/types.js +1 -0
  310. package/dist/components/textarea/index.d.ts +1 -0
  311. package/dist/components/textarea/index.js +1 -0
  312. package/dist/components/textarea/textarea-input.svelte +2 -1
  313. package/dist/components/textarea/types.d.ts +28 -0
  314. package/dist/components/textarea/types.js +1 -0
  315. package/dist/components/toast/index.d.ts +1 -0
  316. package/dist/components/toast/index.js +1 -0
  317. package/dist/components/toast/toast-description.svelte +38 -44
  318. package/dist/components/toast/toast-description.svelte.d.ts +8 -34
  319. package/dist/components/toast/toast-root.svelte +61 -74
  320. package/dist/components/toast/toast-root.svelte.d.ts +4 -43
  321. package/dist/components/toast/toast-title.svelte +35 -43
  322. package/dist/components/toast/toast-title.svelte.d.ts +2 -34
  323. package/dist/components/toast/types.d.ts +40 -0
  324. package/dist/components/toast/types.js +1 -0
  325. package/dist/components/tooltip/types.d.ts +13 -0
  326. package/dist/components/tooltip/types.js +1 -0
  327. package/dist/components/tree/index.d.ts +1 -0
  328. package/dist/components/tree/index.js +1 -0
  329. package/dist/components/tree/tree-body.svelte +39 -50
  330. package/dist/components/tree/tree-body.svelte.d.ts +2 -10
  331. package/dist/components/tree/tree-header.svelte +54 -66
  332. package/dist/components/tree/tree-header.svelte.d.ts +3 -29
  333. package/dist/components/tree/tree-indicator.svelte +40 -50
  334. package/dist/components/tree/tree-indicator.svelte.d.ts +3 -9
  335. package/dist/components/tree/tree-root.svelte +65 -80
  336. package/dist/components/tree/tree-root.svelte.d.ts +2 -12
  337. package/dist/components/tree/types.d.ts +59 -0
  338. package/dist/components/tree/types.js +1 -0
  339. package/dist/components/virtual/types.d.ts +23 -0
  340. package/dist/components/virtual/types.js +1 -0
  341. package/dist/components/virtual/virtual-root.svelte +239 -258
  342. package/dist/components/virtual/virtual-root.svelte.d.ts +1 -18
  343. package/dist/context/preset.svelte.d.ts +1 -1
  344. package/llm/composition.md +395 -395
  345. package/llm/crafting.md +838 -838
  346. package/llm/motion.md +970 -970
  347. package/llm/philosophy.md +23 -23
  348. package/llm/preset-variant-integration.md +516 -516
  349. package/llm/preset.md +383 -383
  350. package/llm/styling.md +216 -216
  351. package/llm/usage.md +46 -46
  352. package/llm/variants.md +712 -712
  353. package/package.json +437 -437
  354. package/dist/components/input/input-value.svelte.d.ts +0 -19
package/llm/philosophy.md CHANGED
@@ -1,23 +1,23 @@
1
- The Atomic Svelte philosophy is centered around creating a modular, composable UI library that treats components as fundamental building blocks. Here are the core principles:
2
-
3
- # 🧱 Atomic Architecture
4
-
5
- The philosophy is built around the concept of "atoms" - self-contained, reusable UI components that encapsulate their own state and DOM management. Think of it like chemistry: components are the basic elements that can be combined to create more complex molecules (UI patterns).
6
-
7
- # Core Structure
8
-
9
- Atoms: The smallest composable UI pieces - fundamental building blocks
10
- Bonds: The logic that holds atoms together and enables synchronization between them
11
- Protons, Neutrons, Electrons: Functions that can be attached to atoms to add incremental functionality
12
-
13
- # Key Philosophy Points
14
-
15
- 🔗 Context-Driven Communication: Components communicate through Svelte's context API, enabling powerful parent-child relationships without prop drilling.
16
-
17
- - ♿ Accessibility First: Every component includes proper ARIA attributes, keyboard navigation, and focus management out of the box.
18
- - 🎨 Headless & Stylable: Components are headless by default, giving you complete control over styling while providing sensible defaults.
19
- - ⚡ Reactive by Design: Leverages Svelte's fine-grained reactivity system for optimal performance and smooth user interactions.
20
- - 🔧 Highly Extensible: Easily extend components with custom behaviors, animations, and styling while maintaining core functionality.
21
- - 🎯 Type Safety: Fully written in TypeScript with comprehensive type definitions for a robust development experience.
22
-
23
- The philosophy treats the library as "raw material" - providing low-level, customizable, scalable UI components that teams can use to build their own custom design systems rather than prescriptive, opinionated components. This approach gives developers maximum flexibility while ensuring consistency and accessibility across their applications.
1
+ The Atomic Svelte philosophy is centered around creating a modular, composable UI library that treats components as fundamental building blocks. Here are the core principles:
2
+
3
+ # 🧱 Atomic Architecture
4
+
5
+ The philosophy is built around the concept of "atoms" - self-contained, reusable UI components that encapsulate their own state and DOM management. Think of it like chemistry: components are the basic elements that can be combined to create more complex molecules (UI patterns).
6
+
7
+ # Core Structure
8
+
9
+ Atoms: The smallest composable UI pieces - fundamental building blocks
10
+ Bonds: The logic that holds atoms together and enables synchronization between them
11
+ Protons, Neutrons, Electrons: Functions that can be attached to atoms to add incremental functionality
12
+
13
+ # Key Philosophy Points
14
+
15
+ 🔗 Context-Driven Communication: Components communicate through Svelte's context API, enabling powerful parent-child relationships without prop drilling.
16
+
17
+ - ♿ Accessibility First: Every component includes proper ARIA attributes, keyboard navigation, and focus management out of the box.
18
+ - 🎨 Headless & Stylable: Components are headless by default, giving you complete control over styling while providing sensible defaults.
19
+ - ⚡ Reactive by Design: Leverages Svelte's fine-grained reactivity system for optimal performance and smooth user interactions.
20
+ - 🔧 Highly Extensible: Easily extend components with custom behaviors, animations, and styling while maintaining core functionality.
21
+ - 🎯 Type Safety: Fully written in TypeScript with comprehensive type definitions for a robust development experience.
22
+
23
+ The philosophy treats the library as "raw material" - providing low-level, customizable, scalable UI components that teams can use to build their own custom design systems rather than prescriptive, opinionated components. This approach gives developers maximum flexibility while ensuring consistency and accessibility across their applications.