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/atoms/IconButton.svelte CHANGED
@@ -1,11 +1,58 @@
1
1
  <script lang="ts">
2
- import type { Snippet } from "svelte";
3
- import type { HTMLButtonAttributes } from "svelte/elements";
2
+ import { tick, untrack, type Snippet } from "svelte";
3
+ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
4
4
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
5
+ import { cn } from "../util/cn.js";
5
6
 
7
+ /** The shared scale plus `xs`, which only the icon button has. */
8
+ type IconButtonSize = SizeVariant | "xs";
9
+
10
+ /**
11
+ * One type for the button and the link, not a union of the two elements'
12
+ * attributes: that union is too large for TypeScript to carry through a
13
+ * wrapper such as a Storybook `Meta`. Event handlers are typed for the
14
+ * button; on a link they are called with the same event.
15
+ */
6
16
  type Props = Omit<HTMLButtonAttributes, "class"> & {
17
+ /**
18
+ * Where the link goes. Makes this an `<a>` that looks the same;
19
+ * without it, it is a `<button>`. A link cannot be disabled: while
20
+ * `disabled` or `loading` it has no `href`, is `aria-disabled` and
21
+ * does nothing when pressed. A link is not
22
+ * a toggle: `pressed` is ignored.
23
+ */
24
+ href?: string;
25
+ /** With `href`: where the link opens. */
26
+ target?: HTMLAnchorAttributes["target"];
27
+ /** With `href`: the link's relationship, such as `noopener`. */
28
+ rel?: HTMLAnchorAttributes["rel"];
29
+ /** With `href`: download the address instead of opening it. */
30
+ download?: HTMLAnchorAttributes["download"];
31
+ hreflang?: HTMLAnchorAttributes["hreflang"];
32
+ referrerpolicy?: HTMLAnchorAttributes["referrerpolicy"];
33
+ ping?: HTMLAnchorAttributes["ping"];
7
34
  variant?: ButtonVariant;
8
- size?: SizeVariant;
35
+ /**
36
+ * `xs` is a 24px box for dense, pointer-first layouts (card headers,
37
+ * table rows). That is the WCAG 2.2 minimum target size and no more:
38
+ * where the primary input is touch, use `sm` or larger.
39
+ */
40
+ size?: IconButtonSize;
41
+ /**
42
+ * Colour intent for the `ghost` and `outline` variants: `danger` is
43
+ * the quiet destructive button (inline delete). Other variants ignore it.
44
+ */
45
+ tone?: "default" | "danger";
46
+ /**
47
+ * Makes this a toggle button. When defined (true or false) it renders
48
+ * `aria-pressed` and a click flips it; bind it, or pass it one-way and
49
+ * update your own state in `onclick`. Call `event.preventDefault()` in
50
+ * `onclick` to keep the current state: do that whenever the parent
51
+ * updates later (after a request, say) or may refuse the change, or the
52
+ * button shows a state the parent does not have. Leave undefined for a
53
+ * plain button.
54
+ */
55
+ pressed?: boolean;
9
56
  loading?: boolean;
10
57
  /** Required for icon-only usage (no visible text). */
11
58
  label?: string;
@@ -16,9 +63,12 @@
16
63
  let {
17
64
  variant = "primary",
18
65
  size = "md",
66
+ tone = "default",
67
+ pressed = $bindable(),
19
68
  disabled = false,
20
69
  loading = false,
21
- type = "button",
70
+ type,
71
+ href,
22
72
  label = "",
23
73
  class: className = "",
24
74
  onclick,
@@ -26,70 +76,209 @@
26
76
  ...restProps
27
77
  }: Props = $props();
28
78
 
29
- const isDisabled = $derived(disabled || loading);
79
+ const isDisabled = $derived(!!disabled || loading);
80
+ /**
81
+ * Loading without `disabled`: unavailable, and still where focus is.
82
+ *
83
+ * `disabled` on a button, or no `href` on a link, makes the element
84
+ * unfocusable, and the browser then drops focus on `<body>`: whoever
85
+ * pressed Save with the keyboard was at the top of the page when the
86
+ * save came back. So a loading control says it the ARIA way
87
+ * (`aria-disabled`, `aria-busy`), stays a Tab stop, and swallows the
88
+ * press. `disabled` is the platform's: out of the Tab order.
89
+ */
90
+ const isBusy = $derived(loading && !disabled);
91
+ const isLink = $derived(href !== undefined && href !== null);
92
+ const isToggle = $derived(pressed !== undefined && !isLink);
30
93
 
31
- const sizeClass = $derived.by(() => {
32
- if (size === "sm") {
33
- return {
34
- padding: "p-2",
35
- radius: "rounded-md",
36
- spinner: "size-4",
37
- };
38
- } else if (size === "lg") {
39
- return {
40
- padding: "p-3",
41
- radius: "rounded-xl",
42
- spinner: "size-6",
43
- };
44
- } else {
45
- return {
46
- padding: "p-2.5",
47
- radius: "rounded-lg",
48
- spinner: "size-5",
49
- };
94
+ /**
95
+ * A loading link has no `href`, so it is a Tab stop only by `tabindex`.
96
+ * The browser takes focus from an element the moment it stops being
97
+ * focusable, so the two attributes must never both be missing: the
98
+ * `tabindex` goes on before the `href` comes off (their order in the
99
+ * markup), and when loading ends it stays until the `href` is back, one
100
+ * update longer.
101
+ */
102
+ let keepsTabStop = $state(false);
103
+ $effect.pre(() => {
104
+ if (isBusy) {
105
+ keepsTabStop = true;
106
+ } else if (untrack(() => keepsTabStop)) {
107
+ void tick().then(() => (keepsTabStop = false));
108
+ }
109
+ });
110
+
111
+ /** A disabled link has no `href`, but a pointer can still press it. */
112
+ function handleLinkClick(event: MouseEvent) {
113
+ if (isDisabled) {
114
+ event.preventDefault();
115
+ event.stopPropagation();
116
+ return;
50
117
  }
118
+ (onclick as ((event: MouseEvent) => void) | null | undefined)?.(event);
119
+ }
120
+
121
+ function handleClick(
122
+ event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement },
123
+ ) {
124
+ // A loading button is not `disabled`, so the press reaches it: it
125
+ // ends here, toggles nothing and submits nothing.
126
+ if (isBusy) {
127
+ event.preventDefault();
128
+ event.stopPropagation();
129
+ return;
130
+ }
131
+ // Read before the handler runs: a parent that flips its own state in
132
+ // `onclick` has already moved `pressed` by the time it returns.
133
+ const next = !pressed;
134
+ onclick?.(event);
135
+ if (isToggle && !event.defaultPrevented) pressed = next;
136
+ }
137
+
138
+ /**
139
+ * Square, on the same height scale as Button / Input / Select, so an icon
140
+ * button sits flush in a toolbar beside a text button of the same size.
141
+ * Previously these were 8–16px shorter than their own Button.
142
+ *
143
+ * On a coarse pointer `sm` and `md` are 44 by 44px, as Button, Input and
144
+ * Select are 44px tall there, so the toolbar still lines up and the box
145
+ * itself is the touch target. `lg` is 48px already.
146
+ *
147
+ * `xs` sits below that scale on purpose: no text control is 24px. Its
148
+ * target is the box itself on every pointer type. An invisible larger hit
149
+ * area was tried and removed: on touch it covered the visible edge of the
150
+ * neighbouring button, so a tap there fired the wrong one.
151
+ */
152
+ const sizeClass = $derived.by(() => {
153
+ if (size === "xs") return { box: "size-6", spinner: "size-3" };
154
+ if (size === "sm") return { box: "size-8 pointer-coarse:min-h-11 pointer-coarse:min-w-11", spinner: "size-3.5" };
155
+ if (size === "lg") return { box: "size-12", spinner: "size-5" };
156
+ return { box: "size-10 pointer-coarse:min-h-11 pointer-coarse:min-w-11", spinner: "size-4" };
51
157
  });
52
158
 
159
+ const disabledClass =
160
+ "disabled:bg-action-disabled disabled:text-action-disabled-text disabled:border-transparent disabled:shadow-none disabled:cursor-not-allowed disabled:active:scale-100";
161
+
162
+ const isDangerTone = $derived(
163
+ tone === "danger" && (variant === "ghost" || variant === "outline"),
164
+ );
165
+
53
166
  const variantClass = $derived.by(() => {
54
- return variant === "primary"
55
- ? "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]"
56
- : variant === "secondary"
57
- ? "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98]"
58
- : variant === "danger"
59
- ? "bg-action-danger text-inverse hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] focus-ring--danger"
60
- : variant === "ghost"
61
- ? "bg-transparent text-headline hover:bg-base-100 active:bg-base-200 active:scale-[0.98] focus-ring--muted disabled:text-disabled"
62
- : variant === "outline"
63
- ? "bg-transparent border-2 border-action-primary text-headline hover:bg-action-secondary hover:text-action-primary active:bg-action-primary-active active:text-action-primary active:scale-[0.98] disabled:border-disabled disabled:text-disabled"
64
- : variant === "link"
65
- ? "text-brand-700 active:text-brand-700 hover:underline disabled:text-disabled disabled:no-underline"
66
- : "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98]";
167
+ if (isDangerTone) {
168
+ const fill =
169
+ "text-error hover:bg-action-danger-subtle active:bg-action-danger-subtle-hover active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--danger";
170
+ return variant === "outline"
171
+ ? `bg-transparent border border-error-border hover:border-error ${fill}`
172
+ : `bg-transparent ${fill}`;
173
+ }
174
+ switch (variant) {
175
+ case "secondary":
176
+ return "bg-action-secondary text-headline hover:bg-action-secondary-hover active:bg-action-secondary-active active:scale-[0.98] motion-reduce:active:scale-100";
177
+ case "danger":
178
+ return "bg-action-danger text-action-danger-text hover:bg-action-danger-hover active:bg-action-danger-active active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--danger";
179
+ case "ghost":
180
+ return "bg-transparent text-headline hover:bg-surface-hover active:bg-surface-active active:scale-[0.98] motion-reduce:active:scale-100 focus-ring--muted";
181
+ case "outline":
182
+ return "bg-transparent border border-border text-headline hover:bg-surface-hover hover:border-border-medium active:bg-surface-active active:scale-[0.98] motion-reduce:active:scale-100";
183
+ case "link":
184
+ return "bg-transparent text-link hover:text-link-hover focus-ring--muted";
185
+ case "accent":
186
+ return "bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active active:scale-[0.98] motion-reduce:active:scale-100";
187
+ case "primary":
188
+ default:
189
+ return "bg-action-primary text-action-primary hover:bg-action-primary-hover active:bg-action-primary-active active:scale-[0.98] motion-reduce:active:scale-100";
190
+ }
67
191
  });
68
192
 
69
- const buttonClasses = $derived.by(() => {
70
- const sizeStyles = sizeClass;
71
- const baseClasses =
72
- "inline-flex focus-ring items-center justify-center transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed disabled:active:scale-100";
193
+ /**
194
+ * Held down, a toggled-on ghost or danger-tone button goes one step past its
195
+ * hover fill (the `-subtle-active` roles): with a mouse the hover fill is
196
+ * already showing, so the same fill would not show the press. The solid
197
+ * variants have no further step and keep their fill.
198
+ *
199
+ * Pressed holds a fill that hover cannot reach and adds an inset outline in
200
+ * the text colour, so the state is a shape as well as a colour. It is an
201
+ * outline, not a ring: `.focus-ring` owns `box-shadow`, and an outline also
202
+ * survives forced-colors mode.
203
+ */
204
+ const pressedClass = $derived.by(() => {
205
+ if (!pressed) return "";
206
+ const outline = "outline-2 -outline-offset-2 outline-current";
207
+ if (isDangerTone) {
208
+ return `bg-action-danger-subtle hover:bg-action-danger-subtle-hover active:bg-action-danger-subtle-active ${outline}`;
209
+ }
210
+ switch (variant) {
211
+ case "secondary":
212
+ return `bg-action-secondary-active hover:bg-action-secondary-active ${outline}`;
213
+ case "danger":
214
+ return `bg-action-danger-active hover:bg-action-danger-active ${outline}`;
215
+ case "ghost":
216
+ case "outline":
217
+ case "link":
218
+ return `bg-action-primary-subtle text-link hover:bg-action-primary-subtle-hover active:bg-action-primary-subtle-active ${outline}`;
219
+ case "accent":
220
+ return `bg-accent-active hover:bg-accent-active ${outline}`;
221
+ case "primary":
222
+ default:
223
+ return `bg-action-primary-active hover:bg-action-primary-active ${outline}`;
224
+ }
225
+ });
73
226
 
74
- return `${baseClasses} ${sizeStyles.padding} ${sizeStyles.radius} ${variantClass} ${className}`.trim();
227
+ const buttonClasses = $derived.by(() => {
228
+ const base =
229
+ "inline-flex focus-ring items-center justify-center rounded-control shrink-0 transition-colors duration-150 cursor-pointer select-none";
230
+ // `disabled:` does not match an `<a>`: a disabled link wears the
231
+ // disabled pair itself, in place of its variant. So does a loading
232
+ // button, which is not `:disabled` (it keeps focus): with the
233
+ // variant's classes left out, none of its hover or pressed fills can
234
+ // show. The box is a fixed square, so the border changes no size.
235
+ const state =
236
+ isDisabled && (isLink || isBusy)
237
+ ? "bg-(--color-action-disabled) text-action-disabled-text border border-transparent cursor-not-allowed"
238
+ : `${variantClass} ${isLink ? "" : pressedClass} ${disabledClass}`;
239
+ return cn(`${base} ${sizeClass.box} ${state} ${className}`);
75
240
  });
76
241
  </script>
77
242
 
78
- <button
79
- {type}
80
- class={buttonClasses}
81
- disabled={isDisabled}
82
- aria-busy={loading ? "true" : undefined}
83
- {onclick}
84
- aria-label={label || undefined}
85
- {...restProps}
86
- >
243
+ {#snippet content()}
87
244
  {#if loading}
88
245
  <span
89
- class="inline-block {sizeClass.spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80"
246
+ class="inline-block {sizeClass.spinner} shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-80 motion-reduce:animate-pulse"
90
247
  aria-hidden="true"
91
248
  ></span>
92
249
  {:else if children}
93
250
  {@render children()}
94
251
  {/if}
95
- </button>
252
+ {/snippet}
253
+
254
+ {#if isLink}
255
+ <!-- A loading link is given its Tab stop back, so focus stays on it:
256
+ `tabindex` is written before `href` is taken away, in that order. -->
257
+ <a
258
+ tabindex={isBusy || keepsTabStop ? 0 : undefined}
259
+ href={isDisabled ? undefined : href}
260
+ class={buttonClasses}
261
+ role={isDisabled ? "link" : undefined}
262
+ aria-disabled={isDisabled ? "true" : undefined}
263
+ aria-busy={loading ? "true" : undefined}
264
+ aria-label={label || undefined}
265
+ {...(restProps as unknown as HTMLAnchorAttributes)}
266
+ onclick={handleLinkClick}
267
+ >
268
+ {@render content()}
269
+ </a>
270
+ {:else}
271
+ <button
272
+ type={type ?? "button"}
273
+ class={buttonClasses}
274
+ disabled={!!disabled}
275
+ aria-disabled={isBusy ? "true" : undefined}
276
+ aria-busy={loading ? "true" : undefined}
277
+ aria-pressed={pressed}
278
+ onclick={handleClick}
279
+ aria-label={label || undefined}
280
+ {...restProps}
281
+ >
282
+ {@render content()}
283
+ </button>
284
+ {/if}
package/dist/atoms/IconButton.svelte.d.ts CHANGED
@@ -1,15 +1,60 @@
1
- import type { Snippet } from "svelte";
2
- import type { HTMLButtonAttributes } from "svelte/elements";
1
+ import { type Snippet } from "svelte";
2
+ import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
3
3
  import type { ButtonVariant, SizeVariant } from "../types/variants.js";
4
+ /** The shared scale plus `xs`, which only the icon button has. */
5
+ type IconButtonSize = SizeVariant | "xs";
6
+ /**
7
+ * One type for the button and the link, not a union of the two elements'
8
+ * attributes: that union is too large for TypeScript to carry through a
9
+ * wrapper such as a Storybook `Meta`. Event handlers are typed for the
10
+ * button; on a link they are called with the same event.
11
+ */
4
12
  type Props = Omit<HTMLButtonAttributes, "class"> & {
13
+ /**
14
+ * Where the link goes. Makes this an `<a>` that looks the same;
15
+ * without it, it is a `<button>`. A link cannot be disabled: while
16
+ * `disabled` or `loading` it has no `href`, is `aria-disabled` and
17
+ * does nothing when pressed. A link is not
18
+ * a toggle: `pressed` is ignored.
19
+ */
20
+ href?: string;
21
+ /** With `href`: where the link opens. */
22
+ target?: HTMLAnchorAttributes["target"];
23
+ /** With `href`: the link's relationship, such as `noopener`. */
24
+ rel?: HTMLAnchorAttributes["rel"];
25
+ /** With `href`: download the address instead of opening it. */
26
+ download?: HTMLAnchorAttributes["download"];
27
+ hreflang?: HTMLAnchorAttributes["hreflang"];
28
+ referrerpolicy?: HTMLAnchorAttributes["referrerpolicy"];
29
+ ping?: HTMLAnchorAttributes["ping"];
5
30
  variant?: ButtonVariant;
6
- size?: SizeVariant;
31
+ /**
32
+ * `xs` is a 24px box for dense, pointer-first layouts (card headers,
33
+ * table rows). That is the WCAG 2.2 minimum target size and no more:
34
+ * where the primary input is touch, use `sm` or larger.
35
+ */
36
+ size?: IconButtonSize;
37
+ /**
38
+ * Colour intent for the `ghost` and `outline` variants: `danger` is
39
+ * the quiet destructive button (inline delete). Other variants ignore it.
40
+ */
41
+ tone?: "default" | "danger";
42
+ /**
43
+ * Makes this a toggle button. When defined (true or false) it renders
44
+ * `aria-pressed` and a click flips it; bind it, or pass it one-way and
45
+ * update your own state in `onclick`. Call `event.preventDefault()` in
46
+ * `onclick` to keep the current state: do that whenever the parent
47
+ * updates later (after a request, say) or may refuse the change, or the
48
+ * button shows a state the parent does not have. Leave undefined for a
49
+ * plain button.
50
+ */
51
+ pressed?: boolean;
7
52
  loading?: boolean;
8
53
  /** Required for icon-only usage (no visible text). */
9
54
  label?: string;
10
55
  class?: string;
11
56
  children?: Snippet;
12
57
  };
13
- declare const IconButton: import("svelte").Component<Props, {}, "">;
58
+ declare const IconButton: import("svelte").Component<Props, {}, "pressed">;
14
59
  type IconButton = ReturnType<typeof IconButton>;
15
60
  export default IconButton;