zabi-components 7.0.2 → 8.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (433) hide show
  1. package/CHANGELOG.md +1924 -0
  2. package/README.md +287 -11
  3. package/THEME.md +149 -332
  4. package/THEMING.md +1329 -163
  5. package/dist/atoms/ActionPanel.svelte +24 -9
  6. package/dist/atoms/ActionPanel.svelte.d.ts +2 -0
  7. package/dist/atoms/Avatar.svelte +104 -0
  8. package/dist/atoms/Avatar.svelte.d.ts +34 -0
  9. package/dist/atoms/Badge.svelte +124 -58
  10. package/dist/atoms/Badge.svelte.d.ts +17 -5
  11. package/dist/atoms/Button.svelte +212 -62
  12. package/dist/atoms/Button.svelte.d.ts +33 -2
  13. package/dist/atoms/Card.svelte +31 -28
  14. package/dist/atoms/Card.svelte.d.ts +5 -2
  15. package/dist/atoms/CardContent.svelte +10 -2
  16. package/dist/atoms/CardContent.svelte.d.ts +2 -0
  17. package/dist/atoms/CardFooter.svelte +10 -2
  18. package/dist/atoms/CardFooter.svelte.d.ts +2 -0
  19. package/dist/atoms/CardHeader.svelte +26 -6
  20. package/dist/atoms/CardHeader.svelte.d.ts +2 -0
  21. package/dist/atoms/Checkbox.svelte +52 -21
  22. package/dist/atoms/Checkbox.svelte.d.ts +6 -2
  23. package/dist/atoms/CodeBlock.svelte +35 -9
  24. package/dist/atoms/CodeBlock.svelte.d.ts +13 -3
  25. package/dist/atoms/ColorPicker.svelte +272 -52
  26. package/dist/atoms/ColorPicker.svelte.d.ts +6 -1
  27. package/dist/atoms/Container.svelte +17 -10
  28. package/dist/atoms/DateField.svelte +107 -0
  29. package/dist/atoms/DateField.svelte.d.ts +53 -0
  30. package/dist/atoms/Divider.svelte +4 -4
  31. package/dist/atoms/FeatureCard.svelte +4 -3
  32. package/dist/atoms/FieldMessages.svelte +69 -0
  33. package/dist/atoms/FieldMessages.svelte.d.ts +23 -0
  34. package/dist/atoms/FloatingActionButton.svelte +174 -0
  35. package/dist/atoms/FloatingActionButton.svelte.d.ts +51 -0
  36. package/dist/atoms/Heading.svelte +93 -32
  37. package/dist/atoms/Heading.svelte.d.ts +24 -4
  38. package/dist/atoms/IconButton.svelte +242 -53
  39. package/dist/atoms/IconButton.svelte.d.ts +49 -4
  40. package/dist/atoms/Input.svelte +267 -74
  41. package/dist/atoms/Input.svelte.d.ts +32 -2
  42. package/dist/atoms/List.svelte +13 -2
  43. package/dist/atoms/List.svelte.d.ts +2 -0
  44. package/dist/atoms/ListItem.svelte +44 -11
  45. package/dist/atoms/ListItem.svelte.d.ts +5 -0
  46. package/dist/atoms/ListItemLeading.svelte +4 -2
  47. package/dist/atoms/ListItemLeading.svelte.d.ts +1 -1
  48. package/dist/atoms/OptimizedImage.svelte +11 -2
  49. package/dist/atoms/OptimizedImage.svelte.d.ts +2 -0
  50. package/dist/atoms/Progress.svelte +31 -9
  51. package/dist/atoms/Progress.svelte.d.ts +6 -0
  52. package/dist/atoms/Radio.svelte +23 -3
  53. package/dist/atoms/Radio.svelte.d.ts +6 -2
  54. package/dist/atoms/Rating.svelte +494 -0
  55. package/dist/atoms/Rating.svelte.d.ts +56 -0
  56. package/dist/atoms/Select.svelte +475 -135
  57. package/dist/atoms/Select.svelte.d.ts +52 -2
  58. package/dist/atoms/SelectionControl.svelte +99 -18
  59. package/dist/atoms/SelectionControl.svelte.d.ts +6 -3
  60. package/dist/atoms/Skeleton.svelte +5 -3
  61. package/dist/atoms/Slider.svelte +309 -0
  62. package/dist/atoms/Slider.svelte.d.ts +40 -0
  63. package/dist/atoms/Spinner.svelte +57 -0
  64. package/dist/atoms/Spinner.svelte.d.ts +19 -0
  65. package/dist/atoms/Table.svelte +152 -6
  66. package/dist/atoms/Table.svelte.d.ts +15 -3
  67. package/dist/atoms/TemporalField.svelte +140 -0
  68. package/dist/atoms/TemporalField.svelte.d.ts +32 -0
  69. package/dist/atoms/Text.svelte +56 -15
  70. package/dist/atoms/Text.svelte.d.ts +13 -4
  71. package/dist/atoms/Textarea.svelte +57 -45
  72. package/dist/atoms/Textarea.svelte.d.ts +14 -2
  73. package/dist/atoms/ThemeToggle.svelte +238 -56
  74. package/dist/atoms/ThemeToggle.svelte.d.ts +28 -3
  75. package/dist/atoms/TimeField.svelte +108 -0
  76. package/dist/atoms/TimeField.svelte.d.ts +54 -0
  77. package/dist/atoms/Toast.svelte +25 -10
  78. package/dist/atoms/Toast.svelte.d.ts +2 -0
  79. package/dist/atoms/Toggle.svelte +60 -19
  80. package/dist/atoms/Toggle.svelte.d.ts +18 -2
  81. package/dist/atoms/Tooltip.svelte +583 -40
  82. package/dist/atoms/Tooltip.svelte.d.ts +26 -0
  83. package/dist/atoms/ZabiStringsProvider.svelte +45 -0
  84. package/dist/atoms/ZabiStringsProvider.svelte.d.ts +27 -0
  85. package/dist/atoms/index.d.ts +17 -0
  86. package/dist/atoms/index.js +12 -0
  87. package/dist/atoms/selection-control.styles.d.ts +36 -5
  88. package/dist/atoms/selection-control.styles.js +40 -9
  89. package/dist/components/atoms/index.d.ts +17 -0
  90. package/dist/components/atoms/index.d.ts.map +1 -1
  91. package/dist/components/atoms/selection-control.styles.d.ts +36 -5
  92. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -1
  93. package/dist/components/index.d.ts +83 -3
  94. package/dist/components/index.d.ts.map +1 -1
  95. package/dist/components/molecules/index.d.ts +46 -0
  96. package/dist/components/molecules/index.d.ts.map +1 -1
  97. package/dist/components/molecules/toast-store.d.ts +53 -7
  98. package/dist/components/molecules/toast-store.d.ts.map +1 -1
  99. package/dist/components/organisms/index.d.ts +6 -0
  100. package/dist/components/organisms/index.d.ts.map +1 -1
  101. package/dist/components/types/variants.d.ts +15 -1
  102. package/dist/components/types/variants.d.ts.map +1 -1
  103. package/dist/components/util/app-shell.d.ts +28 -0
  104. package/dist/components/util/app-shell.d.ts.map +1 -0
  105. package/dist/components/util/avatar.d.ts +36 -0
  106. package/dist/components/util/avatar.d.ts.map +1 -0
  107. package/dist/components/util/bottom-sheet.d.ts +30 -0
  108. package/dist/components/util/bottom-sheet.d.ts.map +1 -0
  109. package/dist/components/util/bottom-tab-bar.d.ts +35 -0
  110. package/dist/components/util/bottom-tab-bar.d.ts.map +1 -0
  111. package/dist/components/util/calendar.d.ts +56 -0
  112. package/dist/components/util/calendar.d.ts.map +1 -0
  113. package/dist/components/util/cn.d.ts +8 -0
  114. package/dist/components/util/cn.d.ts.map +1 -0
  115. package/dist/components/util/collapsible.d.ts +58 -0
  116. package/dist/components/util/collapsible.d.ts.map +1 -0
  117. package/dist/components/util/confirm-dialog.d.ts +12 -0
  118. package/dist/components/util/confirm-dialog.d.ts.map +1 -0
  119. package/dist/components/util/date.d.ts +96 -0
  120. package/dist/components/util/date.d.ts.map +1 -0
  121. package/dist/components/util/drawer.d.ts +13 -0
  122. package/dist/components/util/drawer.d.ts.map +1 -0
  123. package/dist/components/util/dropdown.d.ts +47 -0
  124. package/dist/components/util/dropdown.d.ts.map +1 -0
  125. package/dist/components/util/field.d.ts +39 -0
  126. package/dist/components/util/field.d.ts.map +1 -0
  127. package/dist/components/util/fit-in-viewport.d.ts +201 -0
  128. package/dist/components/util/fit-in-viewport.d.ts.map +1 -0
  129. package/dist/components/util/focus-utils.d.ts +75 -2
  130. package/dist/components/util/focus-utils.d.ts.map +1 -1
  131. package/dist/components/util/hydration.d.ts +45 -0
  132. package/dist/components/util/hydration.d.ts.map +1 -0
  133. package/dist/components/util/keyboard-inset.d.ts +18 -0
  134. package/dist/components/util/keyboard-inset.d.ts.map +1 -0
  135. package/dist/components/util/media-grid.d.ts +51 -0
  136. package/dist/components/util/media-grid.d.ts.map +1 -0
  137. package/dist/components/util/media.d.ts +6 -0
  138. package/dist/components/util/media.d.ts.map +1 -0
  139. package/dist/components/util/overlay-chrome.d.ts +53 -0
  140. package/dist/components/util/overlay-chrome.d.ts.map +1 -0
  141. package/dist/components/util/overlay.d.ts +72 -0
  142. package/dist/components/util/overlay.d.ts.map +1 -0
  143. package/dist/components/util/photo.d.ts +215 -0
  144. package/dist/components/util/photo.d.ts.map +1 -0
  145. package/dist/components/util/portal.d.ts +23 -0
  146. package/dist/components/util/portal.d.ts.map +1 -0
  147. package/dist/components/util/pull-to-refresh.d.ts +27 -0
  148. package/dist/components/util/pull-to-refresh.d.ts.map +1 -0
  149. package/dist/components/util/radio-keys.d.ts +25 -0
  150. package/dist/components/util/radio-keys.d.ts.map +1 -0
  151. package/dist/components/util/rating.d.ts +23 -0
  152. package/dist/components/util/rating.d.ts.map +1 -0
  153. package/dist/components/util/ready-made-strings.d.ts +77 -0
  154. package/dist/components/util/ready-made-strings.d.ts.map +1 -0
  155. package/dist/components/util/scroll-padding.d.ts +20 -0
  156. package/dist/components/util/scroll-padding.d.ts.map +1 -0
  157. package/dist/components/util/segmented-control.d.ts +16 -0
  158. package/dist/components/util/segmented-control.d.ts.map +1 -0
  159. package/dist/components/util/select.d.ts +41 -0
  160. package/dist/components/util/select.d.ts.map +1 -0
  161. package/dist/components/util/sheet-drag.d.ts +60 -0
  162. package/dist/components/util/sheet-drag.d.ts.map +1 -0
  163. package/dist/components/util/sidebar.d.ts +63 -0
  164. package/dist/components/util/sidebar.d.ts.map +1 -0
  165. package/dist/components/util/sortable-list.d.ts +65 -0
  166. package/dist/components/util/sortable-list.d.ts.map +1 -0
  167. package/dist/components/util/ssr-safe.d.ts +4 -4
  168. package/dist/components/util/ssr-safe.d.ts.map +1 -1
  169. package/dist/components/util/stepper.d.ts +40 -0
  170. package/dist/components/util/stepper.d.ts.map +1 -0
  171. package/dist/components/util/swipeable-list-item.d.ts +36 -0
  172. package/dist/components/util/swipeable-list-item.d.ts.map +1 -0
  173. package/dist/components/util/theme-mode.d.ts +80 -0
  174. package/dist/components/util/theme-mode.d.ts.map +1 -0
  175. package/dist/components/util/toaster.d.ts +93 -0
  176. package/dist/components/util/toaster.d.ts.map +1 -0
  177. package/dist/components/util/tooltip.d.ts +10 -0
  178. package/dist/components/util/tooltip.d.ts.map +1 -0
  179. package/dist/components/util/top-navbar.d.ts +11 -0
  180. package/dist/components/util/top-navbar.d.ts.map +1 -0
  181. package/dist/components/util/touch-target.d.ts +31 -0
  182. package/dist/components/util/touch-target.d.ts.map +1 -0
  183. package/dist/components/util/zabi-strings.d.ts +133 -0
  184. package/dist/components/util/zabi-strings.d.ts.map +1 -0
  185. package/dist/create-theme/cli.js +169 -0
  186. package/dist/create-theme/index.d.ts +176 -0
  187. package/dist/create-theme/index.js +817 -0
  188. package/dist/create-theme/lib/ramp-math.js +128 -0
  189. package/dist/create-theme/lib/resolve.js +141 -0
  190. package/dist/create-theme/theme-data.js +1116 -0
  191. package/dist/index.d.ts +83 -3
  192. package/dist/index.js +60 -8
  193. package/dist/molecules/Alert.svelte +73 -66
  194. package/dist/molecules/Alert.svelte.d.ts +9 -1
  195. package/dist/molecules/AppBar.svelte +415 -0
  196. package/dist/molecules/AppBar.svelte.d.ts +69 -0
  197. package/dist/molecules/AvatarGroup.svelte +116 -0
  198. package/dist/molecules/AvatarGroup.svelte.d.ts +40 -0
  199. package/dist/molecules/BottomSheet.svelte +540 -0
  200. package/dist/molecules/BottomSheet.svelte.d.ts +93 -0
  201. package/dist/molecules/BottomTabBar.svelte +297 -0
  202. package/dist/molecules/BottomTabBar.svelte.d.ts +64 -0
  203. package/dist/molecules/Calendar.svelte +597 -0
  204. package/dist/molecules/Calendar.svelte.d.ts +72 -0
  205. package/dist/molecules/Collapsible.svelte +243 -0
  206. package/dist/molecules/Collapsible.svelte.d.ts +44 -0
  207. package/dist/molecules/CollapsibleGroup.svelte +126 -0
  208. package/dist/molecules/CollapsibleGroup.svelte.d.ts +14 -0
  209. package/dist/molecules/ComponentDemo.svelte +25 -5
  210. package/dist/molecules/ComponentDemo.svelte.d.ts +5 -0
  211. package/dist/molecules/ConfirmDialog.svelte +253 -0
  212. package/dist/molecules/ConfirmDialog.svelte.d.ts +55 -0
  213. package/dist/molecules/ContactForm.svelte +46 -19
  214. package/dist/molecules/ContactForm.svelte.d.ts +10 -0
  215. package/dist/molecules/Drawer.svelte +394 -0
  216. package/dist/molecules/Drawer.svelte.d.ts +55 -0
  217. package/dist/molecules/Dropdown.svelte +540 -50
  218. package/dist/molecules/Dropdown.svelte.d.ts +49 -6
  219. package/dist/molecules/DropdownItem.svelte +122 -0
  220. package/dist/molecules/DropdownItem.svelte.d.ts +28 -0
  221. package/dist/molecules/EmptyState.svelte +56 -10
  222. package/dist/molecules/EmptyState.svelte.d.ts +8 -0
  223. package/dist/molecules/Form.svelte +25 -14
  224. package/dist/molecules/Form.svelte.d.ts +13 -5
  225. package/dist/molecules/FormField.svelte +11 -2
  226. package/dist/molecules/FormField.svelte.d.ts +2 -0
  227. package/dist/molecules/Header.svelte +13 -3
  228. package/dist/molecules/Header.svelte.d.ts +2 -0
  229. package/dist/molecules/ImageUpload.svelte +422 -70
  230. package/dist/molecules/ImageUpload.svelte.d.ts +61 -5
  231. package/dist/molecules/MediaGrid.svelte +527 -0
  232. package/dist/molecules/MediaGrid.svelte.d.ts +77 -0
  233. package/dist/molecules/Modal.svelte +340 -45
  234. package/dist/molecules/Modal.svelte.d.ts +59 -7
  235. package/dist/molecules/NavigationMenu.svelte +15 -3
  236. package/dist/molecules/NavigationMenu.svelte.d.ts +4 -0
  237. package/dist/molecules/NavigationMenuContent.svelte +91 -36
  238. package/dist/molecules/NavigationMenuContent.svelte.d.ts +2 -0
  239. package/dist/molecules/NavigationMenuItem.svelte +10 -3
  240. package/dist/molecules/NavigationMenuItem.svelte.d.ts +2 -0
  241. package/dist/molecules/NavigationMenuLink.svelte +10 -2
  242. package/dist/molecules/NavigationMenuLink.svelte.d.ts +2 -0
  243. package/dist/molecules/NavigationMenuList.svelte +19 -4
  244. package/dist/molecules/NavigationMenuList.svelte.d.ts +2 -0
  245. package/dist/molecules/NavigationMenuTrigger.svelte +16 -3
  246. package/dist/molecules/NavigationMenuTrigger.svelte.d.ts +2 -0
  247. package/dist/molecules/Page.svelte +38 -2
  248. package/dist/molecules/Page.svelte.d.ts +13 -0
  249. package/dist/molecules/PhotoGrid.svelte +433 -0
  250. package/dist/molecules/PhotoGrid.svelte.d.ts +62 -0
  251. package/dist/molecules/PhotoViewer.svelte +1116 -0
  252. package/dist/molecules/PhotoViewer.svelte.d.ts +56 -0
  253. package/dist/molecules/PropsTable.svelte +26 -11
  254. package/dist/molecules/PropsTable.svelte.d.ts +5 -0
  255. package/dist/molecules/PullToRefresh.svelte +263 -0
  256. package/dist/molecules/PullToRefresh.svelte.d.ts +52 -0
  257. package/dist/molecules/RadioGroup.svelte +57 -15
  258. package/dist/molecules/RadioGroup.svelte.d.ts +16 -3
  259. package/dist/molecules/Section.svelte +13 -5
  260. package/dist/molecules/Section.svelte.d.ts +3 -1
  261. package/dist/molecules/SegmentedControl.svelte +323 -0
  262. package/dist/molecules/SegmentedControl.svelte.d.ts +34 -0
  263. package/dist/molecules/SidebarBrandHeader.svelte +24 -5
  264. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +5 -0
  265. package/dist/molecules/SidebarFooter.svelte +39 -8
  266. package/dist/molecules/SidebarFooter.svelte.d.ts +5 -0
  267. package/dist/molecules/SidebarNavSection.svelte +12 -4
  268. package/dist/molecules/SidebarNavSection.svelte.d.ts +2 -0
  269. package/dist/molecules/SlideUp.svelte +253 -30
  270. package/dist/molecules/SlideUp.svelte.d.ts +31 -4
  271. package/dist/molecules/SortableList.svelte +632 -0
  272. package/dist/molecules/SortableList.svelte.d.ts +69 -0
  273. package/dist/molecules/Stepper.svelte +548 -0
  274. package/dist/molecules/Stepper.svelte.d.ts +39 -0
  275. package/dist/molecules/StickyActionBar.svelte +191 -0
  276. package/dist/molecules/StickyActionBar.svelte.d.ts +65 -0
  277. package/dist/molecules/SwipeableListItem.svelte +334 -0
  278. package/dist/molecules/SwipeableListItem.svelte.d.ts +54 -0
  279. package/dist/molecules/Tabs.svelte +254 -24
  280. package/dist/molecules/Tabs.svelte.d.ts +15 -4
  281. package/dist/molecules/Toaster.svelte +352 -6
  282. package/dist/molecules/Toaster.svelte.d.ts +95 -2
  283. package/dist/molecules/ToasterToast.svelte +279 -62
  284. package/dist/molecules/ToasterToast.svelte.d.ts +11 -0
  285. package/dist/molecules/UnsavedChangesBar.svelte +212 -0
  286. package/dist/molecules/UnsavedChangesBar.svelte.d.ts +43 -0
  287. package/dist/molecules/index.d.ts +46 -0
  288. package/dist/molecules/index.js +27 -0
  289. package/dist/molecules/toast-store.d.ts +53 -7
  290. package/dist/molecules/toast-store.js +21 -0
  291. package/dist/organisms/AppShell.svelte +196 -0
  292. package/dist/organisms/AppShell.svelte.d.ts +61 -0
  293. package/dist/organisms/SidebarAccountPanel.svelte +111 -12
  294. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +21 -0
  295. package/dist/organisms/SidebarNavigation.svelte +193 -69
  296. package/dist/organisms/SidebarNavigation.svelte.d.ts +31 -1
  297. package/dist/organisms/SidebarPanel.svelte +45 -16
  298. package/dist/organisms/SidebarPanel.svelte.d.ts +2 -0
  299. package/dist/organisms/SidebarShell.svelte +263 -0
  300. package/dist/organisms/SidebarShell.svelte.d.ts +106 -0
  301. package/dist/organisms/TopNavbar.svelte +329 -33
  302. package/dist/organisms/TopNavbar.svelte.d.ts +28 -0
  303. package/dist/organisms/index.d.ts +6 -0
  304. package/dist/organisms/index.js +4 -0
  305. package/dist/routes/lib/variant-utils.d.ts +26 -0
  306. package/dist/routes/lib/{variant-utils.ts → variant-utils.js} +15 -46
  307. package/dist/types/components.d.ts +4 -0
  308. package/dist/types/components.d.ts.map +1 -1
  309. package/dist/types/events.js +1 -0
  310. package/dist/types/index.d.ts +605 -25
  311. package/dist/types/index.d.ts.map +1 -1
  312. package/dist/types/index.js +3 -0
  313. package/dist/types/variants.ts +17 -1
  314. package/dist/util/app-shell.d.ts +27 -0
  315. package/dist/util/app-shell.js +72 -0
  316. package/dist/util/avatar.d.ts +35 -0
  317. package/dist/util/avatar.js +52 -0
  318. package/dist/util/bottom-sheet.d.ts +29 -0
  319. package/dist/util/bottom-sheet.js +43 -0
  320. package/dist/util/bottom-tab-bar.d.ts +34 -0
  321. package/dist/util/bottom-tab-bar.js +54 -0
  322. package/dist/util/calendar.d.ts +55 -0
  323. package/dist/util/calendar.js +74 -0
  324. package/dist/util/cn.d.ts +7 -0
  325. package/dist/util/cn.js +48 -0
  326. package/dist/util/collapsible.d.ts +57 -0
  327. package/dist/util/collapsible.js +23 -0
  328. package/dist/util/confirm-dialog.d.ts +11 -0
  329. package/dist/util/confirm-dialog.js +2 -0
  330. package/dist/util/date.d.ts +95 -0
  331. package/dist/util/date.js +237 -0
  332. package/dist/util/drawer.d.ts +12 -0
  333. package/dist/util/drawer.js +7 -0
  334. package/dist/util/dropdown.d.ts +46 -0
  335. package/dist/util/dropdown.js +21 -0
  336. package/dist/util/field.d.ts +38 -0
  337. package/dist/util/field.js +38 -0
  338. package/dist/util/fit-in-viewport.d.ts +200 -0
  339. package/dist/util/fit-in-viewport.js +399 -0
  340. package/dist/util/focus-utils.d.ts +75 -2
  341. package/dist/util/focus-utils.js +182 -9
  342. package/dist/util/hydration.d.ts +44 -0
  343. package/dist/util/hydration.js +58 -0
  344. package/dist/util/keyboard-inset.d.ts +17 -0
  345. package/dist/util/keyboard-inset.js +53 -0
  346. package/dist/util/media-grid.d.ts +50 -0
  347. package/dist/util/media-grid.js +81 -0
  348. package/dist/util/media.d.ts +5 -0
  349. package/dist/util/media.js +10 -0
  350. package/dist/util/overlay-chrome.d.ts +52 -0
  351. package/dist/util/overlay-chrome.js +56 -0
  352. package/dist/util/overlay.d.ts +71 -0
  353. package/dist/util/overlay.js +240 -0
  354. package/dist/util/photo.d.ts +214 -0
  355. package/dist/util/photo.js +206 -0
  356. package/dist/util/portal.d.ts +22 -0
  357. package/dist/util/portal.js +50 -0
  358. package/dist/util/pull-to-refresh.d.ts +26 -0
  359. package/dist/util/pull-to-refresh.js +30 -0
  360. package/dist/util/radio-keys.d.ts +24 -0
  361. package/dist/util/radio-keys.js +49 -0
  362. package/dist/util/rating.d.ts +22 -0
  363. package/dist/util/rating.js +26 -0
  364. package/dist/util/ready-made-strings.d.ts +76 -0
  365. package/dist/util/ready-made-strings.js +67 -0
  366. package/dist/util/scroll-padding.d.ts +19 -0
  367. package/dist/util/scroll-padding.js +44 -0
  368. package/dist/util/segmented-control.d.ts +15 -0
  369. package/dist/util/segmented-control.js +1 -0
  370. package/dist/util/select.d.ts +40 -0
  371. package/dist/util/select.js +63 -0
  372. package/dist/util/sheet-drag.d.ts +59 -0
  373. package/dist/util/sheet-drag.js +241 -0
  374. package/dist/util/sidebar.d.ts +62 -0
  375. package/dist/util/sidebar.js +38 -0
  376. package/dist/util/sortable-list.d.ts +64 -0
  377. package/dist/util/sortable-list.js +53 -0
  378. package/dist/util/ssr-safe.d.ts +4 -4
  379. package/dist/util/stepper.d.ts +39 -0
  380. package/dist/util/stepper.js +38 -0
  381. package/dist/util/swipeable-list-item.d.ts +35 -0
  382. package/dist/util/swipeable-list-item.js +32 -0
  383. package/dist/util/theme-mode.d.ts +79 -0
  384. package/dist/util/theme-mode.js +121 -0
  385. package/dist/util/toaster.d.ts +92 -0
  386. package/dist/util/toaster.js +75 -0
  387. package/dist/util/tooltip.d.ts +9 -0
  388. package/dist/util/tooltip.js +18 -0
  389. package/dist/util/top-navbar.d.ts +10 -0
  390. package/dist/util/top-navbar.js +5 -0
  391. package/dist/util/touch-target.d.ts +30 -0
  392. package/dist/util/touch-target.js +30 -0
  393. package/dist/util/zabi-strings.d.ts +132 -0
  394. package/dist/util/zabi-strings.js +105 -0
  395. package/dist/zabi-components-colors.css +5 -2
  396. package/dist/zabi-components-theme-dark-only.css +574 -225
  397. package/dist/zabi-components-theme-dark.css +574 -225
  398. package/dist/zabi-components-theme-only.css +1680 -317
  399. package/dist/zabi-components-theme.css +1680 -317
  400. package/dist/zabi-components.css +4473 -1158
  401. package/docs/lucide-icons.md +41 -16
  402. package/docs/theme-imports.md +81 -11
  403. package/package.json +51 -29
  404. package/dist/lib/layout-width-tokens.d.ts +0 -17
  405. package/dist/lib/layout-width-tokens.d.ts.map +0 -1
  406. package/dist/lib/showcase/component-docs/Button.d.ts +0 -3
  407. package/dist/lib/showcase/component-docs/Button.d.ts.map +0 -1
  408. package/dist/lib/showcase/component-docs/Input.d.ts +0 -3
  409. package/dist/lib/showcase/component-docs/Input.d.ts.map +0 -1
  410. package/dist/lib/showcase/component-docs/List.d.ts +0 -3
  411. package/dist/lib/showcase/component-docs/List.d.ts.map +0 -1
  412. package/dist/lib/showcase/component-docs/Modal.d.ts +0 -3
  413. package/dist/lib/showcase/component-docs/Modal.d.ts.map +0 -1
  414. package/dist/lib/showcase/component-docs/Radio.d.ts +0 -3
  415. package/dist/lib/showcase/component-docs/Radio.d.ts.map +0 -1
  416. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts +0 -3
  417. package/dist/lib/showcase/component-docs/SidebarNavigation.d.ts.map +0 -1
  418. package/dist/lib/showcase/component-docs/Skeleton.d.ts +0 -3
  419. package/dist/lib/showcase/component-docs/Skeleton.d.ts.map +0 -1
  420. package/dist/lib/showcase/component-docs/_shared.d.ts +0 -12
  421. package/dist/lib/showcase/component-docs/_shared.d.ts.map +0 -1
  422. package/dist/lib/showcase/component-docs/index.d.ts +0 -4
  423. package/dist/lib/showcase/component-docs/index.d.ts.map +0 -1
  424. package/dist/lib/showcase/components-catalog.d.ts +0 -3
  425. package/dist/lib/showcase/components-catalog.d.ts.map +0 -1
  426. package/dist/lib/showcase/components-showcase-constants.d.ts +0 -89
  427. package/dist/lib/showcase/components-showcase-constants.d.ts.map +0 -1
  428. package/dist/lib/showcase/docs-sidebar-helpers.d.ts +0 -15
  429. package/dist/lib/showcase/docs-sidebar-helpers.d.ts.map +0 -1
  430. package/dist/routes/lib/focus-utils.d.ts +0 -12
  431. package/dist/routes/lib/focus-utils.ts +0 -110
  432. package/dist/routes/lib/ssr-safe.ts +0 -58
  433. package/scripts/fix-lucide-svelte-icon-dts.js +0 -35
package/dist/molecules/ConfirmDialog.svelte ADDED
@@ -0,0 +1,253 @@
1
+ <script lang="ts">
2
+ import { zabiCommonStrings } from "../util/zabi-strings.js";
3
+ import { untrack, type Snippet } from "svelte";
4
+ import Info from "@lucide/svelte/icons/info";
5
+ import OctagonAlert from "@lucide/svelte/icons/octagon-alert";
6
+ import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
7
+ import Button from "../atoms/Button.svelte";
8
+ import Modal from "./Modal.svelte";
9
+ import { cn } from "../util/cn.js";
10
+ import { generateId } from "../util/ssr-safe.js";
11
+ import type {
12
+ ConfirmDialogCancelReason,
13
+ ConfirmDialogResult,
14
+ ConfirmDialogVariant,
15
+ } from "../util/confirm-dialog.js";
16
+
17
+ interface Props {
18
+ /** Whether the dialog is shown; supports `bind:open`. */
19
+ open?: boolean;
20
+ /** The question, as the dialog's heading and accessible name. */
21
+ title: string;
22
+ /** What will happen. It is the dialog's accessible description. */
23
+ message?: string;
24
+ /** `danger` makes the confirm button the danger button. Each variant has its own icon. */
25
+ variant?: ConfirmDialogVariant;
26
+ confirmLabel?: string;
27
+ cancelLabel?: string;
28
+ /**
29
+ * The confirm button shows its loading state, cancel is disabled and
30
+ * the dialog cannot be dismissed. Set by the dialog itself while a
31
+ * promise from `onconfirm` is pending.
32
+ */
33
+ loading?: boolean;
34
+ /**
35
+ * Announced to assistive technology, once, when the loading state
36
+ * starts. Not shown: the spinner on the confirm button is the visual.
37
+ */
38
+ loadingLabel?: string;
39
+ /**
40
+ * Called when the confirm button is activated. The dialog then closes,
41
+ * unless this returns (or resolves to) `false`, throws or rejects.
42
+ */
43
+ onconfirm?: () => ConfirmDialogResult;
44
+ /** Called when the user backs out: cancel, Escape or the backdrop. */
45
+ oncancel?: (detail: { reason: ConfirmDialogCancelReason }) => void;
46
+ /**
47
+ * Called when the promise from `onconfirm` rejects; the dialog stays
48
+ * open. Without it the error goes to the global error handler.
49
+ */
50
+ onerror?: (error: unknown) => void;
51
+ /**
52
+ * Render in `document.body`, so a transformed or clipped ancestor
53
+ * cannot trap the dialog; pass `false` to render in place. The theme
54
+ * class belongs on `<html>` or `<body>`; set lower, it does not reach
55
+ * a portalled dialog.
56
+ */
57
+ portal?: boolean;
58
+ /** On the dialog panel (testing, analytics). */
59
+ "data-testid"?: string;
60
+ /** Extra classes for the dialog panel. */
61
+ class?: string;
62
+ /** Richer content below the message. */
63
+ children?: Snippet;
64
+ }
65
+
66
+ let {
67
+ open = $bindable<Exclude<Props["open"], undefined>>(),
68
+ title,
69
+ message = "",
70
+ variant = "info",
71
+ confirmLabel: confirmLabelGiven,
72
+ cancelLabel: cancelLabelGiven,
73
+ loading = false,
74
+ loadingLabel = "Working…",
75
+ onconfirm,
76
+ oncancel,
77
+ onerror,
78
+ portal = true,
79
+ "data-testid": dataTestId = undefined,
80
+ class: className = "",
81
+ children,
82
+ }: Props = $props();
83
+
84
+ // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
85
+ // one that has a fallback (`props_invalid_value`), and a page that throws
86
+ // while it hydrates never becomes interactive. The default is applied
87
+ // here instead: at once, for the server and the first render, and again
88
+ // whenever a parent hands back `undefined`.
89
+ const applyDefaults = () => {
90
+ if (open === undefined) open = false;
91
+ };
92
+ applyDefaults();
93
+ $effect.pre(applyDefaults);
94
+
95
+ /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
96
+ const common = zabiCommonStrings();
97
+ const confirmLabel = $derived(confirmLabelGiven ?? common().confirm);
98
+ const cancelLabel = $derived(cancelLabelGiven ?? common().cancel);
99
+
100
+ const messageId = generateId("confirm-dialog-message");
101
+
102
+ /** True while a promise returned by `onconfirm` is pending. */
103
+ let pending = $state(false);
104
+ const busy = $derived(loading || pending);
105
+
106
+ let bodyElement: HTMLDivElement | undefined = $state();
107
+
108
+ const Icon = $derived(
109
+ variant === "danger"
110
+ ? OctagonAlert
111
+ : variant === "warning"
112
+ ? TriangleAlert
113
+ : Info,
114
+ );
115
+ const iconClass = $derived(
116
+ variant === "danger"
117
+ ? "text-error-text"
118
+ : variant === "warning"
119
+ ? "text-warning-text"
120
+ : "text-info-text",
121
+ );
122
+
123
+ function cancel(reason: ConfirmDialogCancelReason) {
124
+ if (busy) return;
125
+ open = false;
126
+ oncancel?.({ reason });
127
+ }
128
+
129
+ async function confirm() {
130
+ if (busy) return;
131
+ // A synchronous throw is the caller's bug: it propagates, and the
132
+ // dialog stays open.
133
+ let result = onconfirm?.();
134
+ if (result instanceof Promise) {
135
+ pending = true;
136
+ try {
137
+ result = await result;
138
+ } catch (error) {
139
+ // Stay open so the caller can show what went wrong. Never
140
+ // swallowed: with no `onerror` it is reported like any other
141
+ // uncaught error.
142
+ if (onerror) onerror(error);
143
+ else if (typeof reportError === "function") reportError(error);
144
+ else console.error(error);
145
+ return;
146
+ } finally {
147
+ pending = false;
148
+ }
149
+ }
150
+ if (result !== false) open = false;
151
+ }
152
+
153
+ /**
154
+ * While busy, the confirm button is loading and stays focusable, so focus
155
+ * that is on it is left there. Cancel is disabled, and a disabled button
156
+ * drops focus on `<body>`: focus that was on it is held on the dialog
157
+ * panel instead, and handed to the confirm button if the dialog is still
158
+ * open afterwards (a rejected confirm).
159
+ */
160
+ let wasBusy = false;
161
+ $effect(() => {
162
+ const now = busy;
163
+ const panel = bodyElement?.closest<HTMLElement>('[role="alertdialog"]');
164
+ untrack(() => {
165
+ if (!panel) {
166
+ wasBusy = false;
167
+ return;
168
+ }
169
+ const active = document.activeElement;
170
+ if (now && !wasBusy) {
171
+ const dropped = !active || active === document.body;
172
+ const disabled = panel.contains(active) && (active as HTMLButtonElement).disabled;
173
+ if (dropped || disabled) panel.focus();
174
+ } else if (!now && wasBusy) {
175
+ if (active === panel || active === document.body) {
176
+ panel
177
+ .querySelector<HTMLElement>("[data-confirm-dialog-confirm]")
178
+ ?.focus();
179
+ }
180
+ }
181
+ wasBusy = now;
182
+ });
183
+ });
184
+ </script>
185
+
186
+ <!--
187
+ An alertdialog: it interrupts to ask for a response. No close button: Cancel
188
+ is the way out, it is the first control, and so it takes the initial focus
189
+ for every variant. The message is rendered here, beside the icon, so the
190
+ description is wired here too; Modal puts these attributes on its panel.
191
+
192
+ `outline-none`: the panel holds focus while loading. It is not a control,
193
+ and the browser's focus outline around the whole dialog says nothing.
194
+
195
+ No `aria-busy` on the panel: assistive technology may hold back changes
196
+ inside a busy element, and the status message below is such a change. The
197
+ confirm button carries `aria-busy` itself.
198
+ -->
199
+ <Modal
200
+ bind:isOpen={open}
201
+ {title}
202
+ role="alertdialog"
203
+ size="sm"
204
+ showClose={false}
205
+ {portal}
206
+ dismissible={!busy}
207
+ onclose={({ reason }) => oncancel?.({ reason })}
208
+ data-testid={dataTestId}
209
+ class={cn("outline-none", className)}
210
+ aria-describedby={messageId}
211
+ data-variant={variant}
212
+ >
213
+ <div bind:this={bodyElement} class="flex items-start gap-3">
214
+ <span class={cn("mt-0.5 shrink-0", iconClass)}>
215
+ <Icon size={20} aria-hidden="true" />
216
+ </span>
217
+ <!-- The message alone is the description; richer content is read
218
+ in place. With no message, the content is all there is to describe. -->
219
+ <div
220
+ id={message ? undefined : messageId}
221
+ class="min-w-0 flex-1 space-y-2 text-sm text-body"
222
+ >
223
+ {#if message}
224
+ <p id={messageId}>{message}</p>
225
+ {/if}
226
+ {@render children?.()}
227
+ </div>
228
+ <!-- Always in the dialog, so the text appearing is the change that
229
+ gets announced; it changes only when loading starts or ends. -->
230
+ <span class="sr-only" role="status" aria-live="polite">
231
+ {busy ? loadingLabel : ""}
232
+ </span>
233
+ </div>
234
+
235
+ {#snippet footer()}
236
+ <Button
237
+ variant="outline"
238
+ disabled={busy}
239
+ onclick={() => cancel("cancel-button")}
240
+ data-confirm-dialog-cancel=""
241
+ >
242
+ {cancelLabel}
243
+ </Button>
244
+ <Button
245
+ variant={variant === "danger" ? "danger" : "primary"}
246
+ loading={busy}
247
+ onclick={confirm}
248
+ data-confirm-dialog-confirm=""
249
+ >
250
+ {confirmLabel}
251
+ </Button>
252
+ {/snippet}
253
+ </Modal>
package/dist/molecules/ConfirmDialog.svelte.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import { type Snippet } from "svelte";
2
+ import type { ConfirmDialogCancelReason, ConfirmDialogResult, ConfirmDialogVariant } from "../util/confirm-dialog.js";
3
+ interface Props {
4
+ /** Whether the dialog is shown; supports `bind:open`. */
5
+ open?: boolean;
6
+ /** The question, as the dialog's heading and accessible name. */
7
+ title: string;
8
+ /** What will happen. It is the dialog's accessible description. */
9
+ message?: string;
10
+ /** `danger` makes the confirm button the danger button. Each variant has its own icon. */
11
+ variant?: ConfirmDialogVariant;
12
+ confirmLabel?: string;
13
+ cancelLabel?: string;
14
+ /**
15
+ * The confirm button shows its loading state, cancel is disabled and
16
+ * the dialog cannot be dismissed. Set by the dialog itself while a
17
+ * promise from `onconfirm` is pending.
18
+ */
19
+ loading?: boolean;
20
+ /**
21
+ * Announced to assistive technology, once, when the loading state
22
+ * starts. Not shown: the spinner on the confirm button is the visual.
23
+ */
24
+ loadingLabel?: string;
25
+ /**
26
+ * Called when the confirm button is activated. The dialog then closes,
27
+ * unless this returns (or resolves to) `false`, throws or rejects.
28
+ */
29
+ onconfirm?: () => ConfirmDialogResult;
30
+ /** Called when the user backs out: cancel, Escape or the backdrop. */
31
+ oncancel?: (detail: {
32
+ reason: ConfirmDialogCancelReason;
33
+ }) => void;
34
+ /**
35
+ * Called when the promise from `onconfirm` rejects; the dialog stays
36
+ * open. Without it the error goes to the global error handler.
37
+ */
38
+ onerror?: (error: unknown) => void;
39
+ /**
40
+ * Render in `document.body`, so a transformed or clipped ancestor
41
+ * cannot trap the dialog; pass `false` to render in place. The theme
42
+ * class belongs on `<html>` or `<body>`; set lower, it does not reach
43
+ * a portalled dialog.
44
+ */
45
+ portal?: boolean;
46
+ /** On the dialog panel (testing, analytics). */
47
+ "data-testid"?: string;
48
+ /** Extra classes for the dialog panel. */
49
+ class?: string;
50
+ /** Richer content below the message. */
51
+ children?: Snippet;
52
+ }
53
+ declare const ConfirmDialog: import("svelte").Component<Props, {}, "open">;
54
+ type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
55
+ export default ConfirmDialog;
package/dist/molecules/ContactForm.svelte CHANGED
@@ -1,4 +1,6 @@
1
1
  <script lang="ts">
2
+ import { mergeStrings } from "../util/ready-made-strings.js";
3
+ import { zabiStringsFor } from "../util/zabi-strings.js";
2
4
  import Form from "./Form.svelte";
3
5
  import Input from "../atoms/Input.svelte";
4
6
  import Textarea from "../atoms/Textarea.svelte";
@@ -8,17 +10,41 @@
8
10
  import CardHeader from "../atoms/CardHeader.svelte";
9
11
  import CardContent from "../atoms/CardContent.svelte";
10
12
  import type { ContactFormData } from "../types/page.types";
13
+ import { cn } from "../util/cn.js";
14
+ import {
15
+ DEFAULT_CONTACT_FORM_STRINGS,
16
+ type ContactFormStrings,
17
+ } from "../util/ready-made-strings.js";
11
18
 
19
+ /**
20
+ * A ready-made contact form, in English. An app in another language
21
+ * passes every text through `strings`, or builds its own form from
22
+ * `Form`, `FormField` and the fields.
23
+ */
12
24
  interface Props {
25
+ class?: string;
26
+ /** @deprecated use `class`. */
13
27
  className?: string;
28
+ /** Every label, placeholder, error and the heading, for another language. */
29
+ strings?: Partial<ContactFormStrings>;
14
30
  onsubmit?: (event: SubmitEvent) => void;
15
31
  }
16
32
 
17
33
  let {
18
- className = "",
34
+ class: classAttr = "",
35
+ className: legacyClass = "",
36
+ strings,
19
37
  onsubmit,
20
38
  }: Props = $props();
21
39
 
40
+ /** The app-wide words for this component, from a `ZabiStringsProvider` above it, if there is one. */
41
+ const provided = zabiStringsFor("contactForm");
42
+ const text = $derived(mergeStrings(DEFAULT_CONTACT_FORM_STRINGS, provided(), strings));
43
+
44
+ /** `class` is the public prop; `className` is a deprecated alias.
45
+ * Both are merged here so existing call sites keep working. */
46
+ const className = $derived(cn(`${classAttr} ${legacyClass}`));
47
+
22
48
  let formData = $state<ContactFormData>({
23
49
  name: "",
24
50
  email: "",
@@ -33,17 +59,17 @@
33
59
  const nextErrors: Partial<Record<keyof ContactFormData, string>> = {};
34
60
 
35
61
  if (!data.name.trim()) {
36
- nextErrors.name = "Please enter your name.";
62
+ nextErrors.name = text.nameRequired;
37
63
  }
38
64
 
39
65
  if (!data.email.trim()) {
40
- nextErrors.email = "Please enter your email address.";
66
+ nextErrors.email = text.emailRequired;
41
67
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
42
- nextErrors.email = "Please enter a valid email address.";
68
+ nextErrors.email = text.emailInvalid;
43
69
  }
44
70
 
45
71
  if (!(data.message || "").trim()) {
46
- nextErrors.message = "Please enter a message.";
72
+ nextErrors.message = text.messageRequired;
47
73
  }
48
74
 
49
75
  fieldErrors = nextErrors;
@@ -60,8 +86,9 @@
60
86
  };
61
87
 
62
88
  if (!validate(data)) {
63
- formErrorMessage =
64
- "We could not submit your request. Fix the highlighted fields and try again.";
89
+ // Block native submission so the page does not reload and wipe the errors.
90
+ event.preventDefault();
91
+ formErrorMessage = text.errorMessage;
65
92
  return;
66
93
  }
67
94
 
@@ -74,25 +101,25 @@
74
101
 
75
102
  <div class={className}>
76
103
  <Card size="md" fullWidth={true}>
77
- <CardHeader title="Get in Touch" />
104
+ <CardHeader title={text.heading} />
78
105
  <CardContent>
79
106
  <Form onsubmit={handleFormSubmit} className="space-y-4">
80
107
  {#if formErrorMessage}
81
108
  <div
82
- class="rounded-lg border border-error px-4 py-3 text-sm text-error"
109
+ class="rounded-control border border-error px-4 py-3 text-sm text-error"
83
110
  role="alert"
84
111
  >
85
- <p class="font-medium">Something went wrong</p>
112
+ <p class="font-medium">{text.errorTitle}</p>
86
113
  <p>{formErrorMessage}</p>
87
- <p class="mt-1">Recovery action: review your inputs and resubmit.</p>
114
+ <p class="mt-1">{text.errorRecovery}</p>
88
115
  </div>
89
116
  {/if}
90
117
  <div class="space-y-4">
91
118
  <Input
92
119
  type="text"
93
120
  name="name"
94
- label="Name"
95
- placeholder="Enter your name"
121
+ label={text.nameLabel}
122
+ placeholder={text.namePlaceholder}
96
123
  value={formData.name}
97
124
  oninput={(e) =>
98
125
  (formData.name = (e.target as HTMLInputElement).value)}
@@ -102,8 +129,8 @@
102
129
  <Input
103
130
  type="email"
104
131
  name="email"
105
- label="Email"
106
- placeholder="Enter your email"
132
+ label={text.emailLabel}
133
+ placeholder={text.emailPlaceholder}
107
134
  value={formData.email}
108
135
  oninput={(e) =>
109
136
  (formData.email = (e.target as HTMLInputElement).value)}
@@ -112,8 +139,8 @@
112
139
  />
113
140
  <Textarea
114
141
  name="message"
115
- label="Message"
116
- placeholder="Enter your message"
142
+ label={text.messageLabel}
143
+ placeholder={text.messagePlaceholder}
117
144
  rows={4}
118
145
  value={formData.message}
119
146
  oninput={(e) =>
@@ -125,7 +152,7 @@
125
152
  />
126
153
  <Checkbox
127
154
  name="subscribe"
128
- label="Subscribe to updates"
155
+ label={text.subscribeLabel}
129
156
  checked={formData.subscribe}
130
157
  onchange={(e) =>
131
158
  (formData.subscribe = (
@@ -135,7 +162,7 @@
135
162
  </div>
136
163
  <div class="pt-4">
137
164
  <Button type="submit" variant="primary" size="md">
138
- Send Message
165
+ {text.submit}
139
166
  </Button>
140
167
  </div>
141
168
  </Form>
package/dist/molecules/ContactForm.svelte.d.ts CHANGED
@@ -1,5 +1,15 @@
1
+ import { type ContactFormStrings } from "../util/ready-made-strings.js";
2
+ /**
3
+ * A ready-made contact form, in English. An app in another language
4
+ * passes every text through `strings`, or builds its own form from
5
+ * `Form`, `FormField` and the fields.
6
+ */
1
7
  interface Props {
8
+ class?: string;
9
+ /** @deprecated use `class`. */
2
10
  className?: string;
11
+ /** Every label, placeholder, error and the heading, for another language. */
12
+ strings?: Partial<ContactFormStrings>;
3
13
  onsubmit?: (event: SubmitEvent) => void;
4
14
  }
5
15
  declare const ContactForm: import("svelte").Component<Props, {}, "">;