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/molecules/ConfirmDialog.svelte ADDED
@@ -0,0 +1,257 @@
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
+ import type { ButtonVariant } from "../types/variants.js";
17
+
18
+ interface Props {
19
+ /** Whether the dialog is shown; supports `bind:open`. */
20
+ open?: boolean;
21
+ /** The question, as the dialog's heading and accessible name. */
22
+ title: string;
23
+ /** What will happen. It is the dialog's accessible description. */
24
+ message?: string;
25
+ /** `danger` makes the confirm button the danger button. Each variant has its own icon. */
26
+ variant?: ConfirmDialogVariant;
27
+ confirmLabel?: string;
28
+ cancelLabel?: string;
29
+ /** The `Button` variant of the cancel button: `tonal` or `ghost` for an app that has no outline button. */
30
+ cancelVariant?: ButtonVariant;
31
+ /**
32
+ * The confirm button shows its loading state, cancel is disabled and
33
+ * the dialog cannot be dismissed. Set by the dialog itself while a
34
+ * promise from `onconfirm` is pending.
35
+ */
36
+ loading?: boolean;
37
+ /**
38
+ * Announced to assistive technology, once, when the loading state
39
+ * starts. Not shown: the spinner on the confirm button is the visual.
40
+ */
41
+ loadingLabel?: string;
42
+ /**
43
+ * Called when the confirm button is activated. The dialog then closes,
44
+ * unless this returns (or resolves to) `false`, throws or rejects.
45
+ */
46
+ onconfirm?: () => ConfirmDialogResult;
47
+ /** Called when the user backs out: cancel, Escape or the backdrop. */
48
+ oncancel?: (detail: { reason: ConfirmDialogCancelReason }) => void;
49
+ /**
50
+ * Called when the promise from `onconfirm` rejects; the dialog stays
51
+ * open. Without it the error goes to the global error handler.
52
+ */
53
+ onerror?: (error: unknown) => void;
54
+ /**
55
+ * Render in `document.body`, so a transformed or clipped ancestor
56
+ * cannot trap the dialog; pass `false` to render in place. The theme
57
+ * class belongs on `<html>` or `<body>`; set lower, it does not reach
58
+ * a portalled dialog.
59
+ */
60
+ portal?: boolean;
61
+ /** On the dialog panel (testing, analytics). */
62
+ "data-testid"?: string;
63
+ /** Extra classes for the dialog panel. */
64
+ class?: string;
65
+ /** Richer content below the message. */
66
+ children?: Snippet;
67
+ }
68
+
69
+ let {
70
+ open = $bindable<Exclude<Props["open"], undefined>>(),
71
+ title,
72
+ message = "",
73
+ variant = "info",
74
+ confirmLabel: confirmLabelGiven,
75
+ cancelLabel: cancelLabelGiven,
76
+ cancelVariant = "outline",
77
+ loading = false,
78
+ loadingLabel = "Working…",
79
+ onconfirm,
80
+ oncancel,
81
+ onerror,
82
+ portal = true,
83
+ "data-testid": dataTestId = undefined,
84
+ class: className = "",
85
+ children,
86
+ }: Props = $props();
87
+
88
+ // No fallback on a bindable prop: Svelte refuses `bind:…={undefined}` on
89
+ // one that has a fallback (`props_invalid_value`), and a page that throws
90
+ // while it hydrates never becomes interactive. The default is applied
91
+ // here instead: at once, for the server and the first render, and again
92
+ // whenever a parent hands back `undefined`.
93
+ const applyDefaults = () => {
94
+ if (open === undefined) open = false;
95
+ };
96
+ applyDefaults();
97
+ $effect.pre(applyDefaults);
98
+
99
+ /** Words many components share: a `ZabiStringsProvider` above this one may give them; else English. */
100
+ const common = zabiCommonStrings();
101
+ const confirmLabel = $derived(confirmLabelGiven ?? common().confirm);
102
+ const cancelLabel = $derived(cancelLabelGiven ?? common().cancel);
103
+
104
+ const messageId = generateId("confirm-dialog-message");
105
+
106
+ /** True while a promise returned by `onconfirm` is pending. */
107
+ let pending = $state(false);
108
+ const busy = $derived(loading || pending);
109
+
110
+ let bodyElement: HTMLDivElement | undefined = $state();
111
+
112
+ const Icon = $derived(
113
+ variant === "danger"
114
+ ? OctagonAlert
115
+ : variant === "warning"
116
+ ? TriangleAlert
117
+ : Info,
118
+ );
119
+ const iconClass = $derived(
120
+ variant === "danger"
121
+ ? "text-error-text"
122
+ : variant === "warning"
123
+ ? "text-warning-text"
124
+ : "text-info-text",
125
+ );
126
+
127
+ function cancel(reason: ConfirmDialogCancelReason) {
128
+ if (busy) return;
129
+ open = false;
130
+ oncancel?.({ reason });
131
+ }
132
+
133
+ async function confirm() {
134
+ if (busy) return;
135
+ // A synchronous throw is the caller's bug: it propagates, and the
136
+ // dialog stays open.
137
+ let result = onconfirm?.();
138
+ if (result instanceof Promise) {
139
+ pending = true;
140
+ try {
141
+ result = await result;
142
+ } catch (error) {
143
+ // Stay open so the caller can show what went wrong. Never
144
+ // swallowed: with no `onerror` it is reported like any other
145
+ // uncaught error.
146
+ if (onerror) onerror(error);
147
+ else if (typeof reportError === "function") reportError(error);
148
+ else console.error(error);
149
+ return;
150
+ } finally {
151
+ pending = false;
152
+ }
153
+ }
154
+ if (result !== false) open = false;
155
+ }
156
+
157
+ /**
158
+ * While busy, the confirm button is loading and stays focusable, so focus
159
+ * that is on it is left there. Cancel is disabled, and a disabled button
160
+ * drops focus on `<body>`: focus that was on it is held on the dialog
161
+ * panel instead, and handed to the confirm button if the dialog is still
162
+ * open afterwards (a rejected confirm).
163
+ */
164
+ let wasBusy = false;
165
+ $effect(() => {
166
+ const now = busy;
167
+ const panel = bodyElement?.closest<HTMLElement>('[role="alertdialog"]');
168
+ untrack(() => {
169
+ if (!panel) {
170
+ wasBusy = false;
171
+ return;
172
+ }
173
+ const active = document.activeElement;
174
+ if (now && !wasBusy) {
175
+ const dropped = !active || active === document.body;
176
+ const disabled = panel.contains(active) && (active as HTMLButtonElement).disabled;
177
+ if (dropped || disabled) panel.focus();
178
+ } else if (!now && wasBusy) {
179
+ if (active === panel || active === document.body) {
180
+ panel
181
+ .querySelector<HTMLElement>("[data-confirm-dialog-confirm]")
182
+ ?.focus();
183
+ }
184
+ }
185
+ wasBusy = now;
186
+ });
187
+ });
188
+ </script>
189
+
190
+ <!--
191
+ An alertdialog: it interrupts to ask for a response. No close button: Cancel
192
+ is the way out, it is the first control, and so it takes the initial focus
193
+ for every variant. The message is rendered here, beside the icon, so the
194
+ description is wired here too; Modal puts these attributes on its panel.
195
+
196
+ `outline-none`: the panel holds focus while loading. It is not a control,
197
+ and the browser's focus outline around the whole dialog says nothing.
198
+
199
+ No `aria-busy` on the panel: assistive technology may hold back changes
200
+ inside a busy element, and the status message below is such a change. The
201
+ confirm button carries `aria-busy` itself.
202
+ -->
203
+ <Modal
204
+ bind:isOpen={open}
205
+ {title}
206
+ role="alertdialog"
207
+ size="sm"
208
+ showClose={false}
209
+ {portal}
210
+ dismissible={!busy}
211
+ onclose={({ reason }) => oncancel?.({ reason })}
212
+ data-testid={dataTestId}
213
+ class={cn("outline-none", className)}
214
+ aria-describedby={messageId}
215
+ data-variant={variant}
216
+ >
217
+ <div bind:this={bodyElement} class="flex items-start gap-3">
218
+ <span class={cn("mt-0.5 shrink-0", iconClass)}>
219
+ <Icon size={20} aria-hidden="true" />
220
+ </span>
221
+ <!-- The message alone is the description; richer content is read
222
+ in place. With no message, the content is all there is to describe. -->
223
+ <div
224
+ id={message ? undefined : messageId}
225
+ class="min-w-0 flex-1 space-y-2 text-sm text-body"
226
+ >
227
+ {#if message}
228
+ <p id={messageId}>{message}</p>
229
+ {/if}
230
+ {@render children?.()}
231
+ </div>
232
+ <!-- Always in the dialog, so the text appearing is the change that
233
+ gets announced; it changes only when loading starts or ends. -->
234
+ <span class="sr-only" role="status" aria-live="polite">
235
+ {busy ? loadingLabel : ""}
236
+ </span>
237
+ </div>
238
+
239
+ {#snippet footer()}
240
+ <Button
241
+ variant={cancelVariant}
242
+ disabled={busy}
243
+ onclick={() => cancel("cancel-button")}
244
+ data-confirm-dialog-cancel=""
245
+ >
246
+ {cancelLabel}
247
+ </Button>
248
+ <Button
249
+ variant={variant === "danger" ? "danger" : "primary"}
250
+ loading={busy}
251
+ onclick={confirm}
252
+ data-confirm-dialog-confirm=""
253
+ >
254
+ {confirmLabel}
255
+ </Button>
256
+ {/snippet}
257
+ </Modal>
package/dist/molecules/ConfirmDialog.svelte.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ import { type Snippet } from "svelte";
2
+ import type { ConfirmDialogCancelReason, ConfirmDialogResult, ConfirmDialogVariant } from "../util/confirm-dialog.js";
3
+ import type { ButtonVariant } from "../types/variants.js";
4
+ interface Props {
5
+ /** Whether the dialog is shown; supports `bind:open`. */
6
+ open?: boolean;
7
+ /** The question, as the dialog's heading and accessible name. */
8
+ title: string;
9
+ /** What will happen. It is the dialog's accessible description. */
10
+ message?: string;
11
+ /** `danger` makes the confirm button the danger button. Each variant has its own icon. */
12
+ variant?: ConfirmDialogVariant;
13
+ confirmLabel?: string;
14
+ cancelLabel?: string;
15
+ /** The `Button` variant of the cancel button: `tonal` or `ghost` for an app that has no outline button. */
16
+ cancelVariant?: ButtonVariant;
17
+ /**
18
+ * The confirm button shows its loading state, cancel is disabled and
19
+ * the dialog cannot be dismissed. Set by the dialog itself while a
20
+ * promise from `onconfirm` is pending.
21
+ */
22
+ loading?: boolean;
23
+ /**
24
+ * Announced to assistive technology, once, when the loading state
25
+ * starts. Not shown: the spinner on the confirm button is the visual.
26
+ */
27
+ loadingLabel?: string;
28
+ /**
29
+ * Called when the confirm button is activated. The dialog then closes,
30
+ * unless this returns (or resolves to) `false`, throws or rejects.
31
+ */
32
+ onconfirm?: () => ConfirmDialogResult;
33
+ /** Called when the user backs out: cancel, Escape or the backdrop. */
34
+ oncancel?: (detail: {
35
+ reason: ConfirmDialogCancelReason;
36
+ }) => void;
37
+ /**
38
+ * Called when the promise from `onconfirm` rejects; the dialog stays
39
+ * open. Without it the error goes to the global error handler.
40
+ */
41
+ onerror?: (error: unknown) => void;
42
+ /**
43
+ * Render in `document.body`, so a transformed or clipped ancestor
44
+ * cannot trap the dialog; pass `false` to render in place. The theme
45
+ * class belongs on `<html>` or `<body>`; set lower, it does not reach
46
+ * a portalled dialog.
47
+ */
48
+ portal?: boolean;
49
+ /** On the dialog panel (testing, analytics). */
50
+ "data-testid"?: string;
51
+ /** Extra classes for the dialog panel. */
52
+ class?: string;
53
+ /** Richer content below the message. */
54
+ children?: Snippet;
55
+ }
56
+ declare const ConfirmDialog: import("svelte").Component<Props, {}, "open">;
57
+ type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
58
+ 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";
@@ -9,20 +11,36 @@
9
11
  import CardContent from "../atoms/CardContent.svelte";
10
12
  import type { ContactFormData } from "../types/page.types";
11
13
  import { cn } from "../util/cn.js";
14
+ import {
15
+ DEFAULT_CONTACT_FORM_STRINGS,
16
+ type ContactFormStrings,
17
+ } from "../util/ready-made-strings.js";
12
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
+ */
13
24
  interface Props {
14
25
  class?: string;
15
26
  /** @deprecated use `class`. */
16
27
  className?: string;
28
+ /** Every label, placeholder, error and the heading, for another language. */
29
+ strings?: Partial<ContactFormStrings>;
17
30
  onsubmit?: (event: SubmitEvent) => void;
18
31
  }
19
32
 
20
33
  let {
21
34
  class: classAttr = "",
22
35
  className: legacyClass = "",
36
+ strings,
23
37
  onsubmit,
24
38
  }: Props = $props();
25
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
+
26
44
  /** `class` is the public prop; `className` is a deprecated alias.
27
45
  * Both are merged here so existing call sites keep working. */
28
46
  const className = $derived(cn(`${classAttr} ${legacyClass}`));
@@ -41,17 +59,17 @@
41
59
  const nextErrors: Partial<Record<keyof ContactFormData, string>> = {};
42
60
 
43
61
  if (!data.name.trim()) {
44
- nextErrors.name = "Please enter your name.";
62
+ nextErrors.name = text.nameRequired;
45
63
  }
46
64
 
47
65
  if (!data.email.trim()) {
48
- nextErrors.email = "Please enter your email address.";
66
+ nextErrors.email = text.emailRequired;
49
67
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
50
- nextErrors.email = "Please enter a valid email address.";
68
+ nextErrors.email = text.emailInvalid;
51
69
  }
52
70
 
53
71
  if (!(data.message || "").trim()) {
54
- nextErrors.message = "Please enter a message.";
72
+ nextErrors.message = text.messageRequired;
55
73
  }
56
74
 
57
75
  fieldErrors = nextErrors;
@@ -70,8 +88,7 @@
70
88
  if (!validate(data)) {
71
89
  // Block native submission so the page does not reload and wipe the errors.
72
90
  event.preventDefault();
73
- formErrorMessage =
74
- "We could not submit your request. Fix the highlighted fields and try again.";
91
+ formErrorMessage = text.errorMessage;
75
92
  return;
76
93
  }
77
94
 
@@ -84,7 +101,7 @@
84
101
 
85
102
  <div class={className}>
86
103
  <Card size="md" fullWidth={true}>
87
- <CardHeader title="Get in Touch" />
104
+ <CardHeader title={text.heading} />
88
105
  <CardContent>
89
106
  <Form onsubmit={handleFormSubmit} className="space-y-4">
90
107
  {#if formErrorMessage}
@@ -92,17 +109,17 @@
92
109
  class="rounded-control border border-error px-4 py-3 text-sm text-error"
93
110
  role="alert"
94
111
  >
95
- <p class="font-medium">Something went wrong</p>
112
+ <p class="font-medium">{text.errorTitle}</p>
96
113
  <p>{formErrorMessage}</p>
97
- <p class="mt-1">Recovery action: review your inputs and resubmit.</p>
114
+ <p class="mt-1">{text.errorRecovery}</p>
98
115
  </div>
99
116
  {/if}
100
117
  <div class="space-y-4">
101
118
  <Input
102
119
  type="text"
103
120
  name="name"
104
- label="Name"
105
- placeholder="Enter your name"
121
+ label={text.nameLabel}
122
+ placeholder={text.namePlaceholder}
106
123
  value={formData.name}
107
124
  oninput={(e) =>
108
125
  (formData.name = (e.target as HTMLInputElement).value)}
@@ -112,8 +129,8 @@
112
129
  <Input
113
130
  type="email"
114
131
  name="email"
115
- label="Email"
116
- placeholder="Enter your email"
132
+ label={text.emailLabel}
133
+ placeholder={text.emailPlaceholder}
117
134
  value={formData.email}
118
135
  oninput={(e) =>
119
136
  (formData.email = (e.target as HTMLInputElement).value)}
@@ -122,8 +139,8 @@
122
139
  />
123
140
  <Textarea
124
141
  name="message"
125
- label="Message"
126
- placeholder="Enter your message"
142
+ label={text.messageLabel}
143
+ placeholder={text.messagePlaceholder}
127
144
  rows={4}
128
145
  value={formData.message}
129
146
  oninput={(e) =>
@@ -135,7 +152,7 @@
135
152
  />
136
153
  <Checkbox
137
154
  name="subscribe"
138
- label="Subscribe to updates"
155
+ label={text.subscribeLabel}
139
156
  checked={formData.subscribe}
140
157
  onchange={(e) =>
141
158
  (formData.subscribe = (
@@ -145,7 +162,7 @@
145
162
  </div>
146
163
  <div class="pt-4">
147
164
  <Button type="submit" variant="primary" size="md">
148
- Send Message
165
+ {text.submit}
149
166
  </Button>
150
167
  </div>
151
168
  </Form>
package/dist/molecules/ContactForm.svelte.d.ts CHANGED
@@ -1,7 +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 {
2
8
  class?: string;
3
9
  /** @deprecated use `class`. */
4
10
  className?: string;
11
+ /** Every label, placeholder, error and the heading, for another language. */
12
+ strings?: Partial<ContactFormStrings>;
5
13
  onsubmit?: (event: SubmitEvent) => void;
6
14
  }
7
15
  declare const ContactForm: import("svelte").Component<Props, {}, "">;