zabi-components 8.0.0 → 9.0.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 (456) hide show
  1. package/CHANGELOG.md +2935 -0
  2. package/README.md +243 -10
  3. package/THEME.md +162 -332
  4. package/THEMING.md +1419 -259
  5. package/dist/atoms/ActionPanel.svelte +15 -5
  6. package/dist/atoms/Avatar.svelte +120 -0
  7. package/dist/atoms/Avatar.svelte.d.ts +46 -0
  8. package/dist/atoms/Badge.svelte +71 -13
  9. package/dist/atoms/Badge.svelte.d.ts +8 -2
  10. package/dist/atoms/Block.svelte +74 -0
  11. package/dist/atoms/Block.svelte.d.ts +29 -0
  12. package/dist/atoms/Button.svelte +217 -30
  13. package/dist/atoms/Button.svelte.d.ts +33 -4
  14. package/dist/atoms/Card.svelte +182 -26
  15. package/dist/atoms/Card.svelte.d.ts +55 -3
  16. package/dist/atoms/CardHeader.svelte +16 -4
  17. package/dist/atoms/Checkbox.svelte +81 -21
  18. package/dist/atoms/Checkbox.svelte.d.ts +31 -2
  19. package/dist/atoms/Chip.svelte +351 -0
  20. package/dist/atoms/Chip.svelte.d.ts +57 -0
  21. package/dist/atoms/CodeBlock.svelte +20 -2
  22. package/dist/atoms/CodeBlock.svelte.d.ts +4 -0
  23. package/dist/atoms/CodeField.svelte +385 -0
  24. package/dist/atoms/CodeField.svelte.d.ts +61 -0
  25. package/dist/atoms/ColorPicker.svelte +260 -49
  26. package/dist/atoms/ColorPicker.svelte.d.ts +3 -0
  27. package/dist/atoms/Container.svelte +16 -8
  28. package/dist/atoms/DateField.svelte +145 -0
  29. package/dist/atoms/DateField.svelte.d.ts +81 -0
  30. package/dist/atoms/FieldMessages.svelte +69 -0
  31. package/dist/atoms/FieldMessages.svelte.d.ts +23 -0
  32. package/dist/atoms/FloatingActionButton.svelte +176 -0
  33. package/dist/atoms/FloatingActionButton.svelte.d.ts +51 -0
  34. package/dist/atoms/Heading.svelte +63 -5
  35. package/dist/atoms/Heading.svelte.d.ts +14 -0
  36. package/dist/atoms/IconButton.svelte +294 -26
  37. package/dist/atoms/IconButton.svelte.d.ts +62 -4
  38. package/dist/atoms/Input.svelte +259 -53
  39. package/dist/atoms/Input.svelte.d.ts +33 -2
  40. package/dist/atoms/List.svelte +5 -1
  41. package/dist/atoms/ListItem.svelte +70 -13
  42. package/dist/atoms/ListItem.svelte.d.ts +11 -0
  43. package/dist/atoms/PickerField.svelte +239 -0
  44. package/dist/atoms/PickerField.svelte.d.ts +67 -0
  45. package/dist/atoms/Progress.svelte +99 -19
  46. package/dist/atoms/Progress.svelte.d.ts +15 -1
  47. package/dist/atoms/Radio.svelte +51 -3
  48. package/dist/atoms/Radio.svelte.d.ts +30 -2
  49. package/dist/atoms/Rating.svelte +620 -0
  50. package/dist/atoms/Rating.svelte.d.ts +77 -0
  51. package/dist/atoms/Select.svelte +438 -98
  52. package/dist/atoms/Select.svelte.d.ts +61 -3
  53. package/dist/atoms/SelectionControl.svelte +193 -23
  54. package/dist/atoms/SelectionControl.svelte.d.ts +29 -3
  55. package/dist/atoms/Skeleton.svelte +114 -18
  56. package/dist/atoms/Skeleton.svelte.d.ts +30 -3
  57. package/dist/atoms/SkeletonGroup.svelte +43 -0
  58. package/dist/atoms/SkeletonGroup.svelte.d.ts +20 -0
  59. package/dist/atoms/Slider.svelte +344 -0
  60. package/dist/atoms/Slider.svelte.d.ts +40 -0
  61. package/dist/atoms/Sparkline.svelte +109 -0
  62. package/dist/atoms/Sparkline.svelte.d.ts +27 -0
  63. package/dist/atoms/SpeechBubble.svelte +187 -0
  64. package/dist/atoms/SpeechBubble.svelte.d.ts +33 -0
  65. package/dist/atoms/Spinner.svelte +57 -0
  66. package/dist/atoms/Spinner.svelte.d.ts +19 -0
  67. package/dist/atoms/Stat.svelte +72 -0
  68. package/dist/atoms/Stat.svelte.d.ts +19 -0
  69. package/dist/atoms/Table.svelte +151 -6
  70. package/dist/atoms/Table.svelte.d.ts +15 -3
  71. package/dist/atoms/TemporalField.svelte +472 -0
  72. package/dist/atoms/TemporalField.svelte.d.ts +48 -0
  73. package/dist/atoms/Text.svelte +23 -11
  74. package/dist/atoms/Text.svelte.d.ts +6 -3
  75. package/dist/atoms/Textarea.svelte +150 -44
  76. package/dist/atoms/Textarea.svelte.d.ts +35 -2
  77. package/dist/atoms/ThemeToggle.svelte +223 -44
  78. package/dist/atoms/ThemeToggle.svelte.d.ts +26 -3
  79. package/dist/atoms/TimeColumn.svelte +150 -0
  80. package/dist/atoms/TimeColumn.svelte.d.ts +25 -0
  81. package/dist/atoms/TimeField.svelte +151 -0
  82. package/dist/atoms/TimeField.svelte.d.ts +85 -0
  83. package/dist/atoms/Toast.svelte +22 -8
  84. package/dist/atoms/Toast.svelte.d.ts +2 -0
  85. package/dist/atoms/Toggle.svelte +98 -14
  86. package/dist/atoms/Toggle.svelte.d.ts +26 -2
  87. package/dist/atoms/Tooltip.svelte +528 -24
  88. package/dist/atoms/Tooltip.svelte.d.ts +18 -0
  89. package/dist/atoms/ZabiStringsProvider.svelte +45 -0
  90. package/dist/atoms/ZabiStringsProvider.svelte.d.ts +27 -0
  91. package/dist/atoms/index.d.ts +38 -0
  92. package/dist/atoms/index.js +29 -0
  93. package/dist/atoms/selection-control.styles.d.ts +47 -5
  94. package/dist/atoms/selection-control.styles.js +52 -10
  95. package/dist/components/atoms/index.d.ts +38 -0
  96. package/dist/components/atoms/index.d.ts.map +1 -1
  97. package/dist/components/atoms/selection-control.styles.d.ts +47 -5
  98. package/dist/components/atoms/selection-control.styles.d.ts.map +1 -1
  99. package/dist/components/index.d.ts +104 -2
  100. package/dist/components/index.d.ts.map +1 -1
  101. package/dist/components/map.d.ts +11 -0
  102. package/dist/components/map.d.ts.map +1 -0
  103. package/dist/components/molecules/index.d.ts +51 -0
  104. package/dist/components/molecules/index.d.ts.map +1 -1
  105. package/dist/components/molecules/toast-store.d.ts +83 -7
  106. package/dist/components/molecules/toast-store.d.ts.map +1 -1
  107. package/dist/components/organisms/index.d.ts +10 -0
  108. package/dist/components/organisms/index.d.ts.map +1 -1
  109. package/dist/components/types/variants.d.ts +24 -1
  110. package/dist/components/types/variants.d.ts.map +1 -1
  111. package/dist/components/util/app-shell.d.ts +79 -0
  112. package/dist/components/util/app-shell.d.ts.map +1 -0
  113. package/dist/components/util/avatar.d.ts +39 -0
  114. package/dist/components/util/avatar.d.ts.map +1 -0
  115. package/dist/components/util/bottom-sheet.d.ts +30 -0
  116. package/dist/components/util/bottom-sheet.d.ts.map +1 -0
  117. package/dist/components/util/bottom-tab-bar.d.ts +41 -0
  118. package/dist/components/util/bottom-tab-bar.d.ts.map +1 -0
  119. package/dist/components/util/calendar.d.ts +56 -0
  120. package/dist/components/util/calendar.d.ts.map +1 -0
  121. package/dist/components/util/chart.d.ts +140 -0
  122. package/dist/components/util/chart.d.ts.map +1 -0
  123. package/dist/components/util/chip.d.ts +66 -0
  124. package/dist/components/util/chip.d.ts.map +1 -0
  125. package/dist/components/util/cn.d.ts.map +1 -1
  126. package/dist/components/util/code-field.d.ts +63 -0
  127. package/dist/components/util/code-field.d.ts.map +1 -0
  128. package/dist/components/util/collapsible.d.ts +64 -0
  129. package/dist/components/util/collapsible.d.ts.map +1 -0
  130. package/dist/components/util/confirm-dialog.d.ts +12 -0
  131. package/dist/components/util/confirm-dialog.d.ts.map +1 -0
  132. package/dist/components/util/date.d.ts +96 -0
  133. package/dist/components/util/date.d.ts.map +1 -0
  134. package/dist/components/util/display-voice.d.ts +10 -0
  135. package/dist/components/util/display-voice.d.ts.map +1 -0
  136. package/dist/components/util/drawer.d.ts +13 -0
  137. package/dist/components/util/drawer.d.ts.map +1 -0
  138. package/dist/components/util/dropdown.d.ts +47 -0
  139. package/dist/components/util/dropdown.d.ts.map +1 -0
  140. package/dist/components/util/field-control.d.ts +30 -0
  141. package/dist/components/util/field-control.d.ts.map +1 -0
  142. package/dist/components/util/field.d.ts +45 -0
  143. package/dist/components/util/field.d.ts.map +1 -0
  144. package/dist/components/util/fit-in-viewport.d.ts +201 -0
  145. package/dist/components/util/fit-in-viewport.d.ts.map +1 -0
  146. package/dist/components/util/focus-utils.d.ts +77 -2
  147. package/dist/components/util/focus-utils.d.ts.map +1 -1
  148. package/dist/components/util/hydration.d.ts +45 -0
  149. package/dist/components/util/hydration.d.ts.map +1 -0
  150. package/dist/components/util/keyboard-inset.d.ts +18 -0
  151. package/dist/components/util/keyboard-inset.d.ts.map +1 -0
  152. package/dist/components/util/map-view.d.ts +144 -0
  153. package/dist/components/util/map-view.d.ts.map +1 -0
  154. package/dist/components/util/media-grid.d.ts +51 -0
  155. package/dist/components/util/media-grid.d.ts.map +1 -0
  156. package/dist/components/util/media.d.ts +6 -0
  157. package/dist/components/util/media.d.ts.map +1 -0
  158. package/dist/components/util/overlay-chrome.d.ts +53 -0
  159. package/dist/components/util/overlay-chrome.d.ts.map +1 -0
  160. package/dist/components/util/overlay.d.ts +72 -0
  161. package/dist/components/util/overlay.d.ts.map +1 -0
  162. package/dist/components/util/photo.d.ts +234 -0
  163. package/dist/components/util/photo.d.ts.map +1 -0
  164. package/dist/components/util/portal.d.ts +23 -0
  165. package/dist/components/util/portal.d.ts.map +1 -0
  166. package/dist/components/util/progress.d.ts +19 -0
  167. package/dist/components/util/progress.d.ts.map +1 -0
  168. package/dist/components/util/pull-to-refresh.d.ts +27 -0
  169. package/dist/components/util/pull-to-refresh.d.ts.map +1 -0
  170. package/dist/components/util/radio-keys.d.ts +25 -0
  171. package/dist/components/util/radio-keys.d.ts.map +1 -0
  172. package/dist/components/util/rating.d.ts +23 -0
  173. package/dist/components/util/rating.d.ts.map +1 -0
  174. package/dist/components/util/ready-made-strings.d.ts +77 -0
  175. package/dist/components/util/ready-made-strings.d.ts.map +1 -0
  176. package/dist/components/util/scroll-edge.d.ts +33 -0
  177. package/dist/components/util/scroll-edge.d.ts.map +1 -0
  178. package/dist/components/util/scroll-padding.d.ts +20 -0
  179. package/dist/components/util/scroll-padding.d.ts.map +1 -0
  180. package/dist/components/util/segmented-control.d.ts +16 -0
  181. package/dist/components/util/segmented-control.d.ts.map +1 -0
  182. package/dist/components/util/select.d.ts +41 -0
  183. package/dist/components/util/select.d.ts.map +1 -0
  184. package/dist/components/util/sheet-drag.d.ts +84 -0
  185. package/dist/components/util/sheet-drag.d.ts.map +1 -0
  186. package/dist/components/util/sidebar.d.ts +63 -0
  187. package/dist/components/util/sidebar.d.ts.map +1 -0
  188. package/dist/components/util/skeleton.d.ts +15 -0
  189. package/dist/components/util/skeleton.d.ts.map +1 -0
  190. package/dist/components/util/sliding-indicator.d.ts +25 -0
  191. package/dist/components/util/sliding-indicator.d.ts.map +1 -0
  192. package/dist/components/util/sortable-list.d.ts +65 -0
  193. package/dist/components/util/sortable-list.d.ts.map +1 -0
  194. package/dist/components/util/stepper.d.ts +40 -0
  195. package/dist/components/util/stepper.d.ts.map +1 -0
  196. package/dist/components/util/swipeable-list-item.d.ts +36 -0
  197. package/dist/components/util/swipeable-list-item.d.ts.map +1 -0
  198. package/dist/components/util/temporal-field.d.ts +89 -0
  199. package/dist/components/util/temporal-field.d.ts.map +1 -0
  200. package/dist/components/util/theme-mode.d.ts +80 -0
  201. package/dist/components/util/theme-mode.d.ts.map +1 -0
  202. package/dist/components/util/toaster.d.ts +133 -0
  203. package/dist/components/util/toaster.d.ts.map +1 -0
  204. package/dist/components/util/tone-surface.d.ts +34 -0
  205. package/dist/components/util/tone-surface.d.ts.map +1 -0
  206. package/dist/components/util/tooltip.d.ts +10 -0
  207. package/dist/components/util/tooltip.d.ts.map +1 -0
  208. package/dist/components/util/top-navbar.d.ts +35 -0
  209. package/dist/components/util/top-navbar.d.ts.map +1 -0
  210. package/dist/components/util/touch-target.d.ts +31 -0
  211. package/dist/components/util/touch-target.d.ts.map +1 -0
  212. package/dist/components/util/zabi-strings.d.ts +142 -0
  213. package/dist/components/util/zabi-strings.d.ts.map +1 -0
  214. package/dist/create-theme/cli.js +173 -0
  215. package/dist/create-theme/index.d.ts +190 -0
  216. package/dist/create-theme/index.js +1034 -0
  217. package/dist/create-theme/lib/ramp-math.js +128 -0
  218. package/dist/create-theme/lib/resolve.js +238 -0
  219. package/dist/create-theme/theme-data.js +2644 -0
  220. package/dist/index.d.ts +104 -2
  221. package/dist/index.js +75 -2
  222. package/dist/map.d.ts +10 -0
  223. package/dist/map.js +9 -0
  224. package/dist/molecules/Alert.svelte +63 -16
  225. package/dist/molecules/Alert.svelte.d.ts +14 -1
  226. package/dist/molecules/AppBar.svelte +674 -0
  227. package/dist/molecules/AppBar.svelte.d.ts +131 -0
  228. package/dist/molecules/AvatarGroup.svelte +116 -0
  229. package/dist/molecules/AvatarGroup.svelte.d.ts +40 -0
  230. package/dist/molecules/BarChart.svelte +381 -0
  231. package/dist/molecules/BarChart.svelte.d.ts +45 -0
  232. package/dist/molecules/BottomSheet.svelte +608 -0
  233. package/dist/molecules/BottomSheet.svelte.d.ts +109 -0
  234. package/dist/molecules/BottomTabBar.svelte +403 -0
  235. package/dist/molecules/BottomTabBar.svelte.d.ts +98 -0
  236. package/dist/molecules/Calendar.svelte +597 -0
  237. package/dist/molecules/Calendar.svelte.d.ts +72 -0
  238. package/dist/molecules/ChipGroup.svelte +325 -0
  239. package/dist/molecules/ChipGroup.svelte.d.ts +41 -0
  240. package/dist/molecules/Collapsible.svelte +347 -0
  241. package/dist/molecules/Collapsible.svelte.d.ts +61 -0
  242. package/dist/molecules/CollapsibleGroup.svelte +136 -0
  243. package/dist/molecules/CollapsibleGroup.svelte.d.ts +14 -0
  244. package/dist/molecules/ComponentDemo.svelte +16 -4
  245. package/dist/molecules/ComponentDemo.svelte.d.ts +3 -0
  246. package/dist/molecules/ConfirmDialog.svelte +257 -0
  247. package/dist/molecules/ConfirmDialog.svelte.d.ts +58 -0
  248. package/dist/molecules/ContactForm.svelte +34 -17
  249. package/dist/molecules/ContactForm.svelte.d.ts +8 -0
  250. package/dist/molecules/Drawer.svelte +415 -0
  251. package/dist/molecules/Drawer.svelte.d.ts +55 -0
  252. package/dist/molecules/Dropdown.svelte +517 -48
  253. package/dist/molecules/Dropdown.svelte.d.ts +47 -6
  254. package/dist/molecules/DropdownItem.svelte +122 -0
  255. package/dist/molecules/DropdownItem.svelte.d.ts +28 -0
  256. package/dist/molecules/EmptyState.svelte +55 -10
  257. package/dist/molecules/EmptyState.svelte.d.ts +8 -0
  258. package/dist/molecules/FormField.svelte +9 -1
  259. package/dist/molecules/FormField.svelte.d.ts +2 -0
  260. package/dist/molecules/Header.svelte +1 -1
  261. package/dist/molecules/ImageUpload.svelte +492 -69
  262. package/dist/molecules/ImageUpload.svelte.d.ts +82 -2
  263. package/dist/molecules/LineChart.svelte +459 -0
  264. package/dist/molecules/LineChart.svelte.d.ts +53 -0
  265. package/dist/molecules/MapView.svelte +565 -0
  266. package/dist/molecules/MapView.svelte.d.ts +88 -0
  267. package/dist/molecules/MediaGrid.svelte +527 -0
  268. package/dist/molecules/MediaGrid.svelte.d.ts +77 -0
  269. package/dist/molecules/Modal.svelte +293 -72
  270. package/dist/molecules/Modal.svelte.d.ts +51 -2
  271. package/dist/molecules/NavigationMenuContent.svelte +58 -1
  272. package/dist/molecules/NavigationMenuItem.svelte +0 -1
  273. package/dist/molecules/NavigationMenuLink.svelte +1 -1
  274. package/dist/molecules/NavigationMenuList.svelte +10 -3
  275. package/dist/molecules/NavigationMenuTrigger.svelte +2 -2
  276. package/dist/molecules/Page.svelte +32 -2
  277. package/dist/molecules/Page.svelte.d.ts +11 -0
  278. package/dist/molecules/PhotoGrid.svelte +523 -0
  279. package/dist/molecules/PhotoGrid.svelte.d.ts +73 -0
  280. package/dist/molecules/PhotoViewer.svelte +1213 -0
  281. package/dist/molecules/PhotoViewer.svelte.d.ts +74 -0
  282. package/dist/molecules/PieChart.svelte +421 -0
  283. package/dist/molecules/PieChart.svelte.d.ts +51 -0
  284. package/dist/molecules/PropsTable.svelte +22 -10
  285. package/dist/molecules/PropsTable.svelte.d.ts +3 -0
  286. package/dist/molecules/PullToRefresh.svelte +263 -0
  287. package/dist/molecules/PullToRefresh.svelte.d.ts +52 -0
  288. package/dist/molecules/RadioGroup.svelte +72 -18
  289. package/dist/molecules/RadioGroup.svelte.d.ts +19 -3
  290. package/dist/molecules/Section.svelte +1 -1
  291. package/dist/molecules/SegmentedControl.svelte +456 -0
  292. package/dist/molecules/SegmentedControl.svelte.d.ts +40 -0
  293. package/dist/molecules/SidebarBrandHeader.svelte +11 -1
  294. package/dist/molecules/SidebarBrandHeader.svelte.d.ts +3 -0
  295. package/dist/molecules/SidebarFooter.svelte +30 -7
  296. package/dist/molecules/SidebarFooter.svelte.d.ts +3 -0
  297. package/dist/molecules/SidebarNavSection.svelte +1 -1
  298. package/dist/molecules/SlideUp.svelte +220 -61
  299. package/dist/molecules/SlideUp.svelte.d.ts +26 -0
  300. package/dist/molecules/SortableList.svelte +633 -0
  301. package/dist/molecules/SortableList.svelte.d.ts +69 -0
  302. package/dist/molecules/Stepper.svelte +562 -0
  303. package/dist/molecules/Stepper.svelte.d.ts +39 -0
  304. package/dist/molecules/StickyActionBar.svelte +250 -0
  305. package/dist/molecules/StickyActionBar.svelte.d.ts +78 -0
  306. package/dist/molecules/SwipeableListItem.svelte +334 -0
  307. package/dist/molecules/SwipeableListItem.svelte.d.ts +54 -0
  308. package/dist/molecules/Tabs.svelte +310 -9
  309. package/dist/molecules/Tabs.svelte.d.ts +7 -0
  310. package/dist/molecules/Toaster.svelte +514 -5
  311. package/dist/molecules/Toaster.svelte.d.ts +153 -2
  312. package/dist/molecules/ToasterToast.svelte +495 -77
  313. package/dist/molecules/ToasterToast.svelte.d.ts +15 -0
  314. package/dist/molecules/UnsavedChangesBar.svelte +223 -0
  315. package/dist/molecules/UnsavedChangesBar.svelte.d.ts +43 -0
  316. package/dist/molecules/index.d.ts +51 -0
  317. package/dist/molecules/index.js +31 -0
  318. package/dist/molecules/toast-store.d.ts +83 -7
  319. package/dist/molecules/toast-store.js +25 -1
  320. package/dist/organisms/AppNavigation.svelte +440 -0
  321. package/dist/organisms/AppNavigation.svelte.d.ts +72 -0
  322. package/dist/organisms/AppShell.svelte +696 -0
  323. package/dist/organisms/AppShell.svelte.d.ts +157 -0
  324. package/dist/organisms/AppShellHeaderPart.svelte +163 -0
  325. package/dist/organisms/AppShellHeaderPart.svelte.d.ts +57 -0
  326. package/dist/organisms/SidebarAccountPanel.svelte +107 -12
  327. package/dist/organisms/SidebarAccountPanel.svelte.d.ts +19 -0
  328. package/dist/organisms/SidebarNavigation.svelte +111 -43
  329. package/dist/organisms/SidebarNavigation.svelte.d.ts +29 -1
  330. package/dist/organisms/SidebarPanel.svelte +34 -17
  331. package/dist/organisms/SidebarPanel.svelte.d.ts +1 -0
  332. package/dist/organisms/SidebarShell.svelte +164 -14
  333. package/dist/organisms/SidebarShell.svelte.d.ts +56 -2
  334. package/dist/organisms/TopNavbar.svelte +353 -39
  335. package/dist/organisms/TopNavbar.svelte.d.ts +47 -0
  336. package/dist/organisms/TopNavbarSheetContent.svelte +145 -0
  337. package/dist/organisms/TopNavbarSheetContent.svelte.d.ts +24 -0
  338. package/dist/organisms/index.d.ts +10 -0
  339. package/dist/organisms/index.js +7 -0
  340. package/dist/types/components.d.ts +21 -1
  341. package/dist/types/components.d.ts.map +1 -1
  342. package/dist/types/index.d.ts +1093 -26
  343. package/dist/types/index.d.ts.map +1 -1
  344. package/dist/types/variants.ts +28 -1
  345. package/dist/util/app-shell.d.ts +78 -0
  346. package/dist/util/app-shell.js +97 -0
  347. package/dist/util/avatar.d.ts +38 -0
  348. package/dist/util/avatar.js +52 -0
  349. package/dist/util/bottom-sheet.d.ts +29 -0
  350. package/dist/util/bottom-sheet.js +43 -0
  351. package/dist/util/bottom-tab-bar.d.ts +40 -0
  352. package/dist/util/bottom-tab-bar.js +54 -0
  353. package/dist/util/calendar.d.ts +55 -0
  354. package/dist/util/calendar.js +74 -0
  355. package/dist/util/chart.d.ts +139 -0
  356. package/dist/util/chart.js +305 -0
  357. package/dist/util/chip.d.ts +65 -0
  358. package/dist/util/chip.js +58 -0
  359. package/dist/util/cn.js +28 -2
  360. package/dist/util/code-field.d.ts +62 -0
  361. package/dist/util/code-field.js +112 -0
  362. package/dist/util/collapsible.d.ts +63 -0
  363. package/dist/util/collapsible.js +23 -0
  364. package/dist/util/confirm-dialog.d.ts +11 -0
  365. package/dist/util/confirm-dialog.js +2 -0
  366. package/dist/util/date.d.ts +95 -0
  367. package/dist/util/date.js +237 -0
  368. package/dist/util/display-voice.d.ts +9 -0
  369. package/dist/util/display-voice.js +9 -0
  370. package/dist/util/drawer.d.ts +12 -0
  371. package/dist/util/drawer.js +7 -0
  372. package/dist/util/dropdown.d.ts +46 -0
  373. package/dist/util/dropdown.js +21 -0
  374. package/dist/util/field-control.d.ts +29 -0
  375. package/dist/util/field-control.js +32 -0
  376. package/dist/util/field.d.ts +44 -0
  377. package/dist/util/field.js +38 -0
  378. package/dist/util/fit-in-viewport.d.ts +200 -0
  379. package/dist/util/fit-in-viewport.js +399 -0
  380. package/dist/util/focus-utils.d.ts +77 -2
  381. package/dist/util/focus-utils.js +186 -9
  382. package/dist/util/hydration.d.ts +44 -0
  383. package/dist/util/hydration.js +58 -0
  384. package/dist/util/keyboard-inset.d.ts +17 -0
  385. package/dist/util/keyboard-inset.js +53 -0
  386. package/dist/util/map-view.d.ts +143 -0
  387. package/dist/util/map-view.js +121 -0
  388. package/dist/util/media-grid.d.ts +50 -0
  389. package/dist/util/media-grid.js +81 -0
  390. package/dist/util/media.d.ts +5 -0
  391. package/dist/util/media.js +10 -0
  392. package/dist/util/overlay-chrome.d.ts +52 -0
  393. package/dist/util/overlay-chrome.js +56 -0
  394. package/dist/util/overlay.d.ts +71 -0
  395. package/dist/util/overlay.js +240 -0
  396. package/dist/util/photo.d.ts +233 -0
  397. package/dist/util/photo.js +209 -0
  398. package/dist/util/portal.d.ts +22 -0
  399. package/dist/util/portal.js +50 -0
  400. package/dist/util/progress.d.ts +18 -0
  401. package/dist/util/progress.js +17 -0
  402. package/dist/util/pull-to-refresh.d.ts +26 -0
  403. package/dist/util/pull-to-refresh.js +30 -0
  404. package/dist/util/radio-keys.d.ts +24 -0
  405. package/dist/util/radio-keys.js +49 -0
  406. package/dist/util/rating.d.ts +22 -0
  407. package/dist/util/rating.js +26 -0
  408. package/dist/util/ready-made-strings.d.ts +76 -0
  409. package/dist/util/ready-made-strings.js +67 -0
  410. package/dist/util/scroll-edge.d.ts +32 -0
  411. package/dist/util/scroll-edge.js +87 -0
  412. package/dist/util/scroll-padding.d.ts +19 -0
  413. package/dist/util/scroll-padding.js +44 -0
  414. package/dist/util/segmented-control.d.ts +15 -0
  415. package/dist/util/segmented-control.js +1 -0
  416. package/dist/util/select.d.ts +40 -0
  417. package/dist/util/select.js +63 -0
  418. package/dist/util/sheet-drag.d.ts +83 -0
  419. package/dist/util/sheet-drag.js +311 -0
  420. package/dist/util/sidebar.d.ts +62 -0
  421. package/dist/util/sidebar.js +38 -0
  422. package/dist/util/skeleton.d.ts +14 -0
  423. package/dist/util/skeleton.js +22 -0
  424. package/dist/util/sliding-indicator.d.ts +24 -0
  425. package/dist/util/sliding-indicator.js +44 -0
  426. package/dist/util/sortable-list.d.ts +64 -0
  427. package/dist/util/sortable-list.js +53 -0
  428. package/dist/util/stepper.d.ts +39 -0
  429. package/dist/util/stepper.js +38 -0
  430. package/dist/util/swipeable-list-item.d.ts +35 -0
  431. package/dist/util/swipeable-list-item.js +32 -0
  432. package/dist/util/temporal-field.d.ts +88 -0
  433. package/dist/util/temporal-field.js +136 -0
  434. package/dist/util/theme-mode.d.ts +79 -0
  435. package/dist/util/theme-mode.js +121 -0
  436. package/dist/util/toaster.d.ts +132 -0
  437. package/dist/util/toaster.js +130 -0
  438. package/dist/util/tone-surface.d.ts +33 -0
  439. package/dist/util/tone-surface.js +35 -0
  440. package/dist/util/tooltip.d.ts +9 -0
  441. package/dist/util/tooltip.js +18 -0
  442. package/dist/util/top-navbar.d.ts +34 -0
  443. package/dist/util/top-navbar.js +28 -0
  444. package/dist/util/touch-target.d.ts +30 -0
  445. package/dist/util/touch-target.js +30 -0
  446. package/dist/util/zabi-strings.d.ts +141 -0
  447. package/dist/util/zabi-strings.js +105 -0
  448. package/dist/zabi-components-colors.css +11 -2
  449. package/dist/zabi-components-theme-dark-only.css +870 -258
  450. package/dist/zabi-components-theme-dark.css +870 -258
  451. package/dist/zabi-components-theme-only.css +2419 -368
  452. package/dist/zabi-components-theme.css +2419 -368
  453. package/dist/zabi-components.css +6032 -711
  454. package/docs/lucide-icons.md +40 -17
  455. package/docs/theme-imports.md +81 -11
  456. package/package.json +45 -8
package/dist/atoms/ActionPanel.svelte CHANGED
@@ -49,15 +49,25 @@
49
49
  );
50
50
 
51
51
  const baseClasses =
52
- "group focus-ring focus-ring--muted block rounded-container border border-border bg-card p-6 text-left transition-colors duration-150 hover:border-border-medium hover:bg-surface-hover active:scale-[0.99] active:bg-surface-active";
52
+ "group focus-ring focus-ring--muted block rounded-container border border-border bg-card p-6 text-left transition-colors duration-150";
53
53
 
54
- const disabledClasses =
55
- "opacity-50 cursor-not-allowed pointer-events-none hover:border-border hover:bg-card active:scale-100";
54
+ /**
55
+ * The hover and pressed tints are translucent, so they are drawn as a
56
+ * background image over the card fill rather than in place of it: swapping
57
+ * `bg-card` for a tint would let the page show through the panel. (A
58
+ * `hover:bg-*` beside `bg-card` also never applies; see THEMING.md, state
59
+ * variants.)
60
+ */
61
+ const interactiveClasses =
62
+ "cursor-pointer bg-linear-to-b from-transparent to-transparent hover:border-border-medium hover:from-surface-hover hover:to-surface-hover active:scale-[0.99] active:from-surface-active active:to-surface-active";
63
+
64
+ const disabledClasses = "opacity-50 cursor-not-allowed pointer-events-none";
56
65
 
57
66
  const panelClasses = $derived(
58
- cn(baseClasses, isDisabled ? disabledClasses : "", className),
67
+ cn(baseClasses, isDisabled ? disabledClasses : interactiveClasses, className),
59
68
  );
60
69
 
70
+
61
71
  function handleKeydown(event: KeyboardEvent) {
62
72
  if (isDisabled) return;
63
73
  if (!href && onclick && (event.key === "Enter" || event.key === " ")) {
@@ -83,7 +93,7 @@
83
93
  {/if}
84
94
  {#if loading}
85
95
  <span
86
- class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-description border-t-transparent opacity-70"
96
+ class="inline-block size-5 shrink-0 animate-spin rounded-full border-2 border-description border-t-transparent opacity-70 motion-reduce:animate-pulse"
87
97
  aria-hidden="true"
88
98
  ></span>
89
99
  {/if}
package/dist/atoms/Avatar.svelte ADDED
@@ -0,0 +1,120 @@
1
+ <script lang="ts">
2
+ import User from "@lucide/svelte/icons/user";
3
+ import { untrack, type Snippet } from "svelte";
4
+ import type { HTMLAttributes } from "svelte/elements";
5
+ import { initialsOf, type AvatarSize } from "../util/avatar.js";
6
+ import { cn } from "../util/cn.js";
7
+
8
+ /**
9
+ * A round picture of a person, which falls back to their initials.
10
+ *
11
+ * It is one image with one name, the person's: the picture, the initials
12
+ * and the icon inside are presentational. Not interactive: put it in a
13
+ * link or a button of your own.
14
+ *
15
+ * A picture that is not an address (an inline drawing that reads the
16
+ * page's tokens) goes in as children and fills the circle in place of the
17
+ * initials and `src`.
18
+ *
19
+ * Other attributes (`id`, `data-*`, ...) land on the root element.
20
+ */
21
+ type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
22
+ /** The person's name: the accessible name, and where the initials come from. */
23
+ name: string;
24
+ /** Address of the picture. Without it, or when it fails to load, the initials show. */
25
+ src?: string;
26
+ /** Diameter: 24, 32 and 48px. It does not grow with the text size. */
27
+ size?: "sm" | "md" | "lg";
28
+ /**
29
+ * Accessible name, when it should differ from `name`. `alt=""` makes
30
+ * the avatar decorative: for a name that is printed beside it.
31
+ */
32
+ alt?: string;
33
+ /**
34
+ * Language the initials are upper-cased in ("tr" turns "i" into "İ").
35
+ * The page's own (`<html lang>`) by default, which the server cannot
36
+ * read: pass it where that matters.
37
+ */
38
+ locale?: string;
39
+ /**
40
+ * The picture, drawn inside the circle at the avatar's size: an inline
41
+ * SVG, say. It takes the place of `src` and the initials, is
42
+ * presentational (the name is still `name`), and is clipped to the
43
+ * circle.
44
+ */
45
+ children?: Snippet;
46
+ /** Extra classes for the root element. */
47
+ class?: string;
48
+ };
49
+
50
+ let {
51
+ name,
52
+ src,
53
+ size = "md",
54
+ alt,
55
+ locale,
56
+ children,
57
+ class: className = "",
58
+ ...restProps
59
+ }: Props = $props();
60
+
61
+ const pageLocale = typeof document !== "undefined" ? document.documentElement.lang : "";
62
+ const initials = $derived(initialsOf(name, locale || pageLocale));
63
+ const label = $derived(alt ?? name);
64
+
65
+ /** The address that did not load. Another address gets its own try. */
66
+ let failedSrc = $state<string>();
67
+ const failed = $derived(!!src && failedSrc === src);
68
+
69
+ /** A picture that had already failed before the page hydrated fired its `error` to nobody. */
70
+ function settled(image: HTMLImageElement) {
71
+ if (image.complete && image.naturalWidth === 0) untrack(() => (failedSrc = src));
72
+ }
73
+
74
+ // The circle and the type in it are in px: a face in a row of people is
75
+ // the same size whatever the text size is, and the initials stay inside.
76
+ const SIZES: Record<AvatarSize, string> = {
77
+ sm: "size-[24px] text-[10px]",
78
+ md: "size-[32px] text-[12px]",
79
+ lg: "size-[48px] text-[16px]",
80
+ };
81
+ </script>
82
+
83
+ <!-- The subtle primary pair, as a selected pill tab has: held to 4.5:1 in both
84
+ themes by scripts/contrast-pairs.js. The border is for forced colours, where
85
+ the fill is gone and a transparent border is drawn. -->
86
+ <span
87
+ class={cn(
88
+ "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill border border-transparent bg-action-primary-subtle align-middle leading-none font-semibold text-link select-none",
89
+ SIZES[size] ?? SIZES.md,
90
+ className,
91
+ )}
92
+ data-avatar
93
+ data-size={size}
94
+ role={label ? "img" : undefined}
95
+ aria-label={label || undefined}
96
+ aria-hidden={label ? undefined : "true"}
97
+ {...restProps}
98
+ >
99
+ <!-- Under the picture from the start, in the server's markup too: nothing
100
+ moves when the picture arrives, or when it does not. -->
101
+ {#if children}
102
+ <span class="absolute inset-0 flex items-center justify-center" aria-hidden="true" data-avatar-picture>
103
+ {@render children()}
104
+ </span>
105
+ {:else if initials}
106
+ <span aria-hidden="true" data-avatar-initials>{initials}</span>
107
+ {:else}
108
+ <User class="size-[60%]" aria-hidden="true" />
109
+ {/if}
110
+ {#if !children && src && !failed}
111
+ <img
112
+ {src}
113
+ alt=""
114
+ class="absolute inset-0 size-full object-cover"
115
+ draggable="false"
116
+ onerror={() => (failedSrc = src)}
117
+ {@attach settled}
118
+ />
119
+ {/if}
120
+ </span>
package/dist/atoms/Avatar.svelte.d.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { type Snippet } from "svelte";
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+ /**
4
+ * A round picture of a person, which falls back to their initials.
5
+ *
6
+ * It is one image with one name, the person's: the picture, the initials
7
+ * and the icon inside are presentational. Not interactive: put it in a
8
+ * link or a button of your own.
9
+ *
10
+ * A picture that is not an address (an inline drawing that reads the
11
+ * page's tokens) goes in as children and fills the circle in place of the
12
+ * initials and `src`.
13
+ *
14
+ * Other attributes (`id`, `data-*`, ...) land on the root element.
15
+ */
16
+ type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "role" | "aria-label"> & {
17
+ /** The person's name: the accessible name, and where the initials come from. */
18
+ name: string;
19
+ /** Address of the picture. Without it, or when it fails to load, the initials show. */
20
+ src?: string;
21
+ /** Diameter: 24, 32 and 48px. It does not grow with the text size. */
22
+ size?: "sm" | "md" | "lg";
23
+ /**
24
+ * Accessible name, when it should differ from `name`. `alt=""` makes
25
+ * the avatar decorative: for a name that is printed beside it.
26
+ */
27
+ alt?: string;
28
+ /**
29
+ * Language the initials are upper-cased in ("tr" turns "i" into "İ").
30
+ * The page's own (`<html lang>`) by default, which the server cannot
31
+ * read: pass it where that matters.
32
+ */
33
+ locale?: string;
34
+ /**
35
+ * The picture, drawn inside the circle at the avatar's size: an inline
36
+ * SVG, say. It takes the place of `src` and the initials, is
37
+ * presentational (the name is still `name`), and is clipped to the
38
+ * circle.
39
+ */
40
+ children?: Snippet;
41
+ /** Extra classes for the root element. */
42
+ class?: string;
43
+ };
44
+ declare const Avatar: import("svelte").Component<Props, {}, "">;
45
+ type Avatar = ReturnType<typeof Avatar>;
46
+ export default Avatar;
package/dist/atoms/Badge.svelte CHANGED
@@ -1,10 +1,14 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from "svelte";
3
3
  import type { HTMLAttributes } from "svelte/elements";
4
- import { Check, TriangleAlert, X, Info, Zap } from "@lucide/svelte";
4
+ import Check from "@lucide/svelte/icons/check";
5
+ import TriangleAlert from "@lucide/svelte/icons/triangle-alert";
6
+ import X from "@lucide/svelte/icons/x";
7
+ import Info from "@lucide/svelte/icons/info";
8
+ import Zap from "@lucide/svelte/icons/zap";
5
9
  import { cn } from "../util/cn.js";
6
10
  import type {
7
- ExtendedSemanticVariant,
11
+ BadgeVariant,
8
12
  SizeVariant,
9
13
  } from "../types/variants.js";
10
14
 
@@ -16,9 +20,15 @@
16
20
  type BadgeEmphasis = "subtle" | "solid";
17
21
 
18
22
  type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
19
- variant?: ExtendedSemanticVariant;
23
+ variant?: BadgeVariant;
20
24
  size?: SizeVariant;
21
25
  emphasis?: BadgeEmphasis;
26
+ /**
27
+ * Draws the family's edge on a subtle badge. Off by default: the fill
28
+ * and the text already carry it, and a same-hue outline on every badge
29
+ * is one more line per row. Solid badges never have one.
30
+ */
31
+ bordered?: boolean;
22
32
  /** Label text. Ignored when `children` is provided. */
23
33
  text?: string;
24
34
  showIcon?: boolean;
@@ -30,6 +40,7 @@
30
40
  variant = "default",
31
41
  size = "md",
32
42
  emphasis = "subtle",
43
+ bordered = false,
33
44
  text = "",
34
45
  showIcon = false,
35
46
  class: className = "",
@@ -37,10 +48,27 @@
37
48
  ...restProps
38
49
  }: Props = $props();
39
50
 
51
+ /**
52
+ * 20, 24 and 28px tall for a label on one line, as a minimum: a label that
53
+ * does not fit wraps and the badge grows. It used to be a fixed height
54
+ * with `whitespace-nowrap`, and a long label beside a flexible name made
55
+ * the page wider than a phone at 200% text.
56
+ *
57
+ * The vertical padding is what is left of the height after one line of
58
+ * text and the 1px border on each side (16 + 2 + 2, 16 + 6 + 2 and
59
+ * 20 + 6 + 2), so a one-line badge is exactly as tall as it was. The
60
+ * border box stays when the border is not drawn (transparent), so
61
+ * `bordered` does not move the badge by a pixel.
62
+ *
63
+ * The corner is half of that one-line height, not the pill radius: for
64
+ * one line that is the same full round end, and a badge of two lines
65
+ * keeps the same corner and becomes a rounded rectangle, where a pill
66
+ * radius would have turned it into a lozenge with its text in the curve.
67
+ */
40
68
  const sizeClass = $derived.by(() => {
41
- if (size === "sm") return { box: "h-5 px-2 gap-1 text-xs", icon: 12 };
42
- if (size === "lg") return { box: "h-7 px-3 gap-2 text-sm", icon: 16 };
43
- return { box: "h-6 px-2 gap-1 text-xs", icon: 14 };
69
+ if (size === "sm") return { box: "min-h-5 py-px px-2 gap-1 text-xs rounded-[0.625rem]", icon: 12 };
70
+ if (size === "lg") return { box: "min-h-7 py-[3px] px-3 gap-2 text-sm rounded-[0.875rem]", icon: 16 };
71
+ return { box: "min-h-6 py-[3px] px-2 gap-1 text-xs rounded-[0.75rem]", icon: 14 };
44
72
  });
45
73
 
46
74
  /**
@@ -48,41 +76,71 @@
48
76
  * every variant reads at the same weight. Subtle is 100/200/800 (8.2:1),
49
77
  * solid is 600 with its `-text` foreground (4.9:1). Before the ramps were
50
78
  * calibrated, a solid warning badge sat at 2.15:1 and energetic at 1.97:1.
79
+ *
80
+ * A subtle badge has a transparent edge unless `bordered` is set, which
81
+ * puts the family's `-border` step back (the 8.1 look). The class is
82
+ * written out for each case so Tailwind can see it.
83
+ *
84
+ * The neutral subtle badge reads `--zabi-badge-neutral-fill` and
85
+ * `--zabi-badge-neutral-text` (src/app.css) in front of the neutral
86
+ * tokens: set on any ancestor or in the theme, they move this badge and
87
+ * no other reader of `--color-neutral-subtle` or `--color-neutral-text`.
51
88
  */
52
89
  const variantClass = $derived.by(() => {
53
90
  const solid = emphasis === "solid";
91
+ const edge = (drawn: string) => (bordered ? drawn : "border-transparent");
54
92
  switch (variant) {
55
93
  case "success":
56
94
  return solid
57
95
  ? "bg-success text-card border-transparent"
58
- : "bg-success-subtle text-success-text border-success-border";
96
+ : `bg-success-subtle text-success-text ${edge("border-success-border")}`;
59
97
  case "warning":
60
98
  return solid
61
99
  ? "bg-warning text-card border-transparent"
62
- : "bg-warning-subtle text-warning-text border-warning-border";
100
+ : `bg-warning-subtle text-warning-text ${edge("border-warning-border")}`;
63
101
  case "error":
64
102
  return solid
65
103
  ? "bg-error text-card border-transparent"
66
- : "bg-error-subtle text-error-text border-error-border";
104
+ : `bg-error-subtle text-error-text ${edge("border-error-border")}`;
67
105
  case "info":
68
106
  return solid
69
107
  ? "bg-info text-card border-transparent"
70
- : "bg-info-subtle text-info-text border-info-border";
108
+ : `bg-info-subtle text-info-text ${edge("border-info-border")}`;
71
109
  case "energetic":
72
110
  return solid
73
111
  ? "bg-energetic text-card border-transparent"
74
- : "bg-energetic-subtle text-energetic-text border-energetic-border";
112
+ : `bg-energetic-subtle text-energetic-text ${edge("border-energetic-border")}`;
113
+ // The app's second brand colour. Its solid label is the "on accent"
114
+ // role, not the card surface: an app with a light accent (a
115
+ // yellow) sets a dark label there, and white would be unreadable.
116
+ case "accent":
117
+ return solid
118
+ ? "bg-accent text-on-accent border-transparent"
119
+ : `bg-accent-subtle text-accent-text ${edge("border-accent-border")}`;
120
+ // The primary brand colour, for the neutral-but-branded label
121
+ // ("Member"). Subtle text is the link role, guarded on this fill
122
+ // as the label of a selected pill tab; solid carries the label
123
+ // of the primary fill. The colour is read from the token, not
124
+ // through `text-link`: that class darkens on hover and while
125
+ // pressed, and a badge is not a link.
126
+ case "brand":
127
+ return solid
128
+ ? "bg-action-primary text-action-primary border-transparent"
129
+ : `bg-action-primary-subtle text-(color:--color-link) ${edge("border-action-primary-border")}`;
75
130
  case "neutral":
76
131
  case "default":
77
132
  default:
78
133
  return solid
79
134
  ? "bg-neutral text-card border-transparent"
80
- : "bg-neutral-subtle text-neutral-text border-neutral-border";
135
+ : `bg-badge-neutral text-badge-neutral ${edge("border-neutral-border")}`;
81
136
  }
82
137
  });
83
138
 
84
139
  const badgeClasses = $derived(
85
- cn(`inline-flex items-center justify-center whitespace-nowrap rounded-pill border font-medium ${sizeClass.box} ${variantClass} ${className}`),
140
+ // Never wider than what it is in, and its words break onto the next
141
+ // line before they push anything out; a word longer than the line
142
+ // breaks inside. The icon stays centred beside the lines.
143
+ cn(`inline-flex [max-inline-size:100%] min-w-0 items-center justify-center border font-medium [overflow-wrap:anywhere] ${sizeClass.box} ${variantClass} ${className}`),
86
144
  );
87
145
 
88
146
  /** One outline icon family, so the variants don't look like a rummage. */
package/dist/atoms/Badge.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type { Snippet } from "svelte";
2
2
  import type { HTMLAttributes } from "svelte/elements";
3
- import type { ExtendedSemanticVariant, SizeVariant } from "../types/variants.js";
3
+ import type { BadgeVariant, SizeVariant } from "../types/variants.js";
4
4
  /**
5
5
  * `subtle` is the default because a page full of saturated fills is noise —
6
6
  * a badge is a label, not a button. `solid` is there for the one badge on
@@ -8,9 +8,15 @@ import type { ExtendedSemanticVariant, SizeVariant } from "../types/variants.js"
8
8
  */
9
9
  type BadgeEmphasis = "subtle" | "solid";
10
10
  type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class"> & {
11
- variant?: ExtendedSemanticVariant;
11
+ variant?: BadgeVariant;
12
12
  size?: SizeVariant;
13
13
  emphasis?: BadgeEmphasis;
14
+ /**
15
+ * Draws the family's edge on a subtle badge. Off by default: the fill
16
+ * and the text already carry it, and a same-hue outline on every badge
17
+ * is one more line per row. Solid badges never have one.
18
+ */
19
+ bordered?: boolean;
14
20
  /** Label text. Ignored when `children` is provided. */
15
21
  text?: string;
16
22
  showIcon?: boolean;
package/dist/atoms/Block.svelte ADDED
@@ -0,0 +1,74 @@
1
+ <script lang="ts">
2
+ import type { Snippet } from "svelte";
3
+ import type { HTMLAttributes } from "svelte/elements";
4
+ import type { SurfaceTone } from "../types/variants.js";
5
+
6
+ import { cn } from "../util/cn.js";
7
+ import { toneSurface } from "../util/tone-surface.js";
8
+
9
+ type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
10
+ /**
11
+ * The block's fill: `neutral` (the default, the card surface), `tint`,
12
+ * `brand` or `accent`. On `brand` and `accent` the text, links, controls
13
+ * and focus rings inside take the fill's label colour.
14
+ */
15
+ tone?: SurfaceTone;
16
+ /** A fill the app chooses, any CSS colour. Wins over `tone`. The app must check the contrast of `fill` and `onFill`. */
17
+ fill?: string;
18
+ /** The label colour on `fill`, any CSS colour. */
19
+ onFill?: string;
20
+ /** Inner space: `none`, `sm` (16 / 16), `md` (16 inline, 24 block; the default) or `lg` (24 inline, 32 block). */
21
+ padding?: "none" | "sm" | "md" | "lg";
22
+ /** The element: `div` by default; a landmark (`section` needs a name, `aria-label` or `aria-labelledby`). */
23
+ as?: "div" | "section" | "header" | "footer" | "article" | "aside";
24
+ /**
25
+ * A Block is full width and square-cornered, and does not break out of
26
+ * a padded parent by itself: put it outside the padded container, or
27
+ * give it a negative inline margin here (for example `-mx-4`).
28
+ */
29
+ class?: string;
30
+ children?: Snippet;
31
+ };
32
+
33
+ let {
34
+ tone = "neutral",
35
+ fill,
36
+ onFill,
37
+ padding = "md",
38
+ as = "div",
39
+ class: classProp = "",
40
+ style: styleProp,
41
+ children,
42
+ ...restProps
43
+ }: Props = $props();
44
+
45
+ const surface = $derived(toneSurface({ tone, fill, onFill }));
46
+
47
+ const paddingClass = $derived(
48
+ padding === "none" ? "" : padding === "sm" ? "px-4 py-4" : padding === "lg" ? "px-6 py-8" : "px-4 py-6",
49
+ );
50
+
51
+ const classes = $derived(
52
+ cn("block w-full rounded-none border-none shadow-none", surface.filled ? surface.classes : "bg-card", paddingClass, classProp),
53
+ );
54
+
55
+ const style = $derived(
56
+ [surface.style, typeof styleProp === "string" ? styleProp : undefined].filter(Boolean).join("; ") || undefined,
57
+ );
58
+ </script>
59
+
60
+ <!-- One branch per element, not a dynamic element: hydration takes a dynamic
61
+ element out and puts it back (see Heading). -->
62
+ {#if as === "section"}
63
+ <section class={classes} {style} {...restProps}>{@render children?.()}</section>
64
+ {:else if as === "header"}
65
+ <header class={classes} {style} {...restProps}>{@render children?.()}</header>
66
+ {:else if as === "footer"}
67
+ <footer class={classes} {style} {...restProps}>{@render children?.()}</footer>
68
+ {:else if as === "article"}
69
+ <article class={classes} {style} {...restProps}>{@render children?.()}</article>
70
+ {:else if as === "aside"}
71
+ <aside class={classes} {style} {...restProps}>{@render children?.()}</aside>
72
+ {:else}
73
+ <div class={classes} {style} {...restProps}>{@render children?.()}</div>
74
+ {/if}
package/dist/atoms/Block.svelte.d.ts ADDED
@@ -0,0 +1,29 @@
1
+ import type { Snippet } from "svelte";
2
+ import type { HTMLAttributes } from "svelte/elements";
3
+ import type { SurfaceTone } from "../types/variants.js";
4
+ type Props = Omit<HTMLAttributes<HTMLElement>, "class"> & {
5
+ /**
6
+ * The block's fill: `neutral` (the default, the card surface), `tint`,
7
+ * `brand` or `accent`. On `brand` and `accent` the text, links, controls
8
+ * and focus rings inside take the fill's label colour.
9
+ */
10
+ tone?: SurfaceTone;
11
+ /** A fill the app chooses, any CSS colour. Wins over `tone`. The app must check the contrast of `fill` and `onFill`. */
12
+ fill?: string;
13
+ /** The label colour on `fill`, any CSS colour. */
14
+ onFill?: string;
15
+ /** Inner space: `none`, `sm` (16 / 16), `md` (16 inline, 24 block; the default) or `lg` (24 inline, 32 block). */
16
+ padding?: "none" | "sm" | "md" | "lg";
17
+ /** The element: `div` by default; a landmark (`section` needs a name, `aria-label` or `aria-labelledby`). */
18
+ as?: "div" | "section" | "header" | "footer" | "article" | "aside";
19
+ /**
20
+ * A Block is full width and square-cornered, and does not break out of
21
+ * a padded parent by itself: put it outside the padded container, or
22
+ * give it a negative inline margin here (for example `-mx-4`).
23
+ */
24
+ class?: string;
25
+ children?: Snippet;
26
+ };
27
+ declare const Block: import("svelte").Component<Props, {}, "">;
28
+ type Block = ReturnType<typeof Block>;
29
+ export default Block;