carbon-components-svelte 0.85.4 → 0.86.1

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 (376) hide show
  1. package/README.md +1 -1
  2. package/package.json +4 -5
  3. package/src/Accordion/Accordion.svelte +7 -7
  4. package/src/Accordion/AccordionItem.svelte +20 -20
  5. package/src/Accordion/AccordionSkeleton.svelte +12 -12
  6. package/src/AspectRatio/AspectRatio.svelte +11 -11
  7. package/src/Breadcrumb/Breadcrumb.svelte +3 -3
  8. package/src/Breadcrumb/BreadcrumbItem.svelte +8 -8
  9. package/src/Breadcrumb/BreadcrumbSkeleton.svelte +5 -5
  10. package/src/Breakpoint/Breakpoint.svelte +1 -1
  11. package/src/Breakpoint/breakpointObserver.d.ts +1 -1
  12. package/src/Breakpoint/breakpointObserver.js +6 -6
  13. package/src/Breakpoint/index.d.ts +1 -0
  14. package/src/Button/Button.svelte +14 -14
  15. package/src/Button/ButtonSet.svelte +2 -2
  16. package/src/Button/ButtonSkeleton.svelte +14 -14
  17. package/src/Checkbox/Checkbox.svelte +18 -18
  18. package/src/Checkbox/CheckboxSkeleton.svelte +4 -5
  19. package/src/Checkbox/InlineCheckbox.svelte +12 -11
  20. package/src/CodeSnippet/CodeSnippet.svelte +59 -59
  21. package/src/CodeSnippet/CodeSnippetSkeleton.svelte +5 -5
  22. package/src/ComboBox/ComboBox.svelte +71 -79
  23. package/src/ComposedModal/ComposedModal.svelte +23 -23
  24. package/src/ComposedModal/ModalBody.svelte +6 -6
  25. package/src/ComposedModal/ModalFooter.svelte +14 -14
  26. package/src/ComposedModal/ModalHeader.svelte +12 -12
  27. package/src/ContentSwitcher/ContentSwitcher.svelte +3 -3
  28. package/src/ContentSwitcher/Switch.svelte +14 -14
  29. package/src/ContextMenu/ContextMenu.svelte +23 -23
  30. package/src/ContextMenu/ContextMenuDivider.svelte +1 -1
  31. package/src/ContextMenu/ContextMenuGroup.svelte +1 -1
  32. package/src/ContextMenu/ContextMenuOption.svelte +45 -45
  33. package/src/ContextMenu/ContextMenuRadioGroup.svelte +1 -1
  34. package/src/CopyButton/CopyButton.svelte +18 -18
  35. package/src/DataTable/DataTable.svelte +165 -121
  36. package/src/DataTable/DataTableSkeleton.svelte +19 -18
  37. package/src/DataTable/DataTableTypes.d.ts +18 -0
  38. package/src/DataTable/Table.svelte +21 -21
  39. package/src/DataTable/TableContainer.svelte +6 -6
  40. package/src/DataTable/TableHeader.svelte +13 -18
  41. package/src/DataTable/Toolbar.svelte +5 -5
  42. package/src/DataTable/ToolbarBatchActions.svelte +7 -7
  43. package/src/DataTable/ToolbarContent.svelte +1 -1
  44. package/src/DataTable/ToolbarMenu.svelte +3 -4
  45. package/src/DataTable/ToolbarSearch.svelte +8 -30
  46. package/src/DatePicker/DatePicker.svelte +18 -18
  47. package/src/DatePicker/DatePickerInput.svelte +40 -40
  48. package/src/DatePicker/DatePickerSkeleton.svelte +10 -10
  49. package/src/Dropdown/Dropdown.svelte +58 -58
  50. package/src/Dropdown/DropdownSkeleton.svelte +7 -7
  51. package/src/FileUploader/FileUploader.svelte +29 -27
  52. package/src/FileUploader/FileUploaderButton.svelte +32 -32
  53. package/src/FileUploader/FileUploaderDropContainer.svelte +34 -34
  54. package/src/FileUploader/FileUploaderItem.svelte +20 -20
  55. package/src/FileUploader/FileUploaderSkeleton.svelte +1 -1
  56. package/src/FileUploader/Filename.svelte +6 -6
  57. package/src/Form/Form.svelte +2 -2
  58. package/src/FormGroup/FormGroup.svelte +7 -7
  59. package/src/FormItem/FormItem.svelte +1 -1
  60. package/src/FormLabel/FormLabel.svelte +2 -2
  61. package/src/Grid/Column.svelte +1 -1
  62. package/src/Grid/Grid.svelte +1 -1
  63. package/src/Grid/Row.svelte +1 -1
  64. package/src/ImageLoader/ImageLoader.svelte +7 -7
  65. package/src/InlineLoading/InlineLoading.svelte +8 -8
  66. package/src/Link/Link.svelte +18 -18
  67. package/src/Link/OutboundLink.svelte +1 -1
  68. package/src/ListBox/ListBox.svelte +14 -14
  69. package/src/ListBox/ListBoxField.svelte +9 -11
  70. package/src/ListBox/ListBoxMenu.svelte +2 -2
  71. package/src/ListBox/ListBoxMenuIcon.svelte +3 -3
  72. package/src/ListBox/ListBoxMenuItem.svelte +6 -10
  73. package/src/ListBox/ListBoxSelection.svelte +32 -32
  74. package/src/ListItem/ListItem.svelte +1 -1
  75. package/src/Loading/Loading.svelte +24 -20
  76. package/src/Modal/Modal.svelte +68 -68
  77. package/src/MultiSelect/MultiSelect.svelte +126 -127
  78. package/src/Notification/InlineNotification.svelte +20 -20
  79. package/src/Notification/NotificationButton.svelte +7 -7
  80. package/src/Notification/NotificationIcon.svelte +3 -3
  81. package/src/Notification/ToastNotification.svelte +19 -19
  82. package/src/NumberInput/NumberInput.svelte +52 -52
  83. package/src/NumberInput/NumberInputSkeleton.svelte +3 -3
  84. package/src/OrderedList/OrderedList.svelte +4 -4
  85. package/src/OverflowMenu/OverflowMenu.svelte +36 -36
  86. package/src/OverflowMenu/OverflowMenuItem.svelte +21 -21
  87. package/src/Pagination/Pagination.svelte +31 -31
  88. package/src/Pagination/PaginationSkeleton.svelte +4 -7
  89. package/src/PaginationNav/PaginationItem.svelte +6 -6
  90. package/src/PaginationNav/PaginationNav.svelte +54 -54
  91. package/src/PaginationNav/PaginationOverflow.svelte +15 -15
  92. package/src/Popover/Popover.svelte +24 -24
  93. package/src/ProgressBar/ProgressBar.svelte +22 -22
  94. package/src/ProgressIndicator/ProgressIndicator.svelte +5 -5
  95. package/src/ProgressIndicator/ProgressIndicatorSkeleton.svelte +9 -9
  96. package/src/ProgressIndicator/ProgressStep.svelte +26 -26
  97. package/src/RadioButton/RadioButton.svelte +16 -16
  98. package/src/RadioButton/RadioButtonSkeleton.svelte +3 -4
  99. package/src/RadioButtonGroup/RadioButtonGroup.svelte +8 -8
  100. package/src/RecursiveList/RecursiveList.svelte +8 -8
  101. package/src/RecursiveList/RecursiveListItem.svelte +1 -1
  102. package/src/Search/Search.svelte +42 -42
  103. package/src/Search/SearchSkeleton.svelte +6 -6
  104. package/src/Select/Select.svelte +45 -45
  105. package/src/Select/SelectItem.svelte +7 -7
  106. package/src/Select/SelectItemGroup.svelte +1 -6
  107. package/src/Select/SelectSkeleton.svelte +4 -4
  108. package/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte +1 -1
  109. package/src/SkeletonText/SkeletonText.svelte +6 -6
  110. package/src/Slider/Slider.svelte +49 -49
  111. package/src/Slider/SliderSkeleton.svelte +9 -9
  112. package/src/StructuredList/StructuredList.svelte +4 -4
  113. package/src/StructuredList/StructuredListBody.svelte +1 -1
  114. package/src/StructuredList/StructuredListCell.svelte +4 -4
  115. package/src/StructuredList/StructuredListHead.svelte +1 -1
  116. package/src/StructuredList/StructuredListInput.svelte +9 -9
  117. package/src/StructuredList/StructuredListRow.svelte +5 -5
  118. package/src/StructuredList/StructuredListSkeleton.svelte +13 -13
  119. package/src/Tabs/Tab.svelte +18 -18
  120. package/src/Tabs/TabContent.svelte +5 -5
  121. package/src/Tabs/Tabs.svelte +18 -18
  122. package/src/Tabs/TabsSkeleton.svelte +7 -7
  123. package/src/Tag/Tag.svelte +68 -68
  124. package/src/Tag/TagSkeleton.svelte +5 -4
  125. package/src/TextArea/TextArea.svelte +27 -29
  126. package/src/TextArea/TextAreaSkeleton.svelte +3 -3
  127. package/src/TextInput/PasswordInput.svelte +75 -75
  128. package/src/TextInput/TextInput.svelte +61 -61
  129. package/src/TextInput/TextInputSkeleton.svelte +3 -3
  130. package/src/Theme/Theme.svelte +9 -9
  131. package/src/Tile/ClickableTile.svelte +7 -7
  132. package/src/Tile/ExpandableTile.svelte +17 -17
  133. package/src/Tile/RadioTile.svelte +23 -23
  134. package/src/Tile/SelectableTile.svelte +23 -23
  135. package/src/Tile/Tile.svelte +2 -2
  136. package/src/Tile/TileGroup.svelte +2 -2
  137. package/src/TimePicker/TimePicker.svelte +25 -25
  138. package/src/TimePicker/TimePickerSelect.svelte +13 -17
  139. package/src/Toggle/Toggle.svelte +20 -20
  140. package/src/Toggle/ToggleSkeleton.svelte +14 -14
  141. package/src/Tooltip/Tooltip.svelte +33 -33
  142. package/src/Tooltip/TooltipFooter.svelte +1 -1
  143. package/src/TooltipDefinition/TooltipDefinition.svelte +22 -22
  144. package/src/TooltipIcon/TooltipIcon.svelte +23 -23
  145. package/src/TreeView/TreeView.svelte +33 -35
  146. package/src/TreeView/TreeViewNode.svelte +24 -24
  147. package/src/TreeView/TreeViewNodeList.svelte +45 -45
  148. package/src/Truncate/Truncate.svelte +2 -2
  149. package/src/Truncate/truncate.d.ts +1 -1
  150. package/src/UIShell/Content.svelte +3 -3
  151. package/src/UIShell/HamburgerMenu.svelte +8 -8
  152. package/src/UIShell/Header.svelte +7 -11
  153. package/src/UIShell/HeaderAction.svelte +18 -18
  154. package/src/UIShell/HeaderActionLink.svelte +6 -6
  155. package/src/UIShell/HeaderGlobalAction.svelte +2 -2
  156. package/src/UIShell/HeaderNav.svelte +2 -2
  157. package/src/UIShell/HeaderNavItem.svelte +8 -8
  158. package/src/UIShell/HeaderNavMenu.svelte +23 -23
  159. package/src/UIShell/HeaderPanelDivider.svelte +2 -2
  160. package/src/UIShell/HeaderPanelLink.svelte +5 -5
  161. package/src/UIShell/HeaderPanelLinks.svelte +1 -1
  162. package/src/UIShell/HeaderSearch.svelte +49 -47
  163. package/src/UIShell/HeaderUtilities.svelte +1 -1
  164. package/src/UIShell/SideNav.svelte +16 -16
  165. package/src/UIShell/SideNavDivider.svelte +1 -1
  166. package/src/UIShell/SideNavItems.svelte +1 -1
  167. package/src/UIShell/SideNavLink.svelte +11 -11
  168. package/src/UIShell/SideNavMenu.svelte +14 -14
  169. package/src/UIShell/SideNavMenuItem.svelte +6 -6
  170. package/src/UIShell/SkipToContent.svelte +1 -7
  171. package/src/UnorderedList/UnorderedList.svelte +3 -3
  172. package/src/icons/Add.svelte +2 -2
  173. package/src/icons/ArrowUp.svelte +2 -2
  174. package/src/icons/ArrowsVertical.svelte +2 -2
  175. package/src/icons/Calendar.svelte +2 -2
  176. package/src/icons/CaretDown.svelte +2 -2
  177. package/src/icons/CaretLeft.svelte +2 -2
  178. package/src/icons/CaretRight.svelte +2 -2
  179. package/src/icons/Checkmark.svelte +2 -2
  180. package/src/icons/CheckmarkFilled.svelte +4 -3
  181. package/src/icons/CheckmarkOutline.svelte +2 -2
  182. package/src/icons/ChevronDown.svelte +2 -2
  183. package/src/icons/ChevronRight.svelte +2 -2
  184. package/src/icons/CircleDash.svelte +2 -2
  185. package/src/icons/Close.svelte +2 -2
  186. package/src/icons/Copy.svelte +2 -2
  187. package/src/icons/EditOff.svelte +2 -2
  188. package/src/icons/ErrorFilled.svelte +4 -3
  189. package/src/icons/IconSearch.svelte +2 -2
  190. package/src/icons/Incomplete.svelte +2 -2
  191. package/src/icons/Information.svelte +2 -2
  192. package/src/icons/InformationFilled.svelte +4 -3
  193. package/src/icons/InformationSquareFilled.svelte +4 -3
  194. package/src/icons/Launch.svelte +2 -2
  195. package/src/icons/Menu.svelte +2 -2
  196. package/src/icons/OverflowMenuHorizontal.svelte +2 -2
  197. package/src/icons/OverflowMenuVertical.svelte +2 -2
  198. package/src/icons/Settings.svelte +2 -2
  199. package/src/icons/Subtract.svelte +2 -2
  200. package/src/icons/Switcher.svelte +2 -2
  201. package/src/icons/View.svelte +2 -2
  202. package/src/icons/ViewOff.svelte +2 -2
  203. package/src/icons/Warning.svelte +2 -2
  204. package/src/icons/WarningAltFilled.svelte +4 -3
  205. package/src/icons/WarningFilled.svelte +4 -3
  206. package/types/Accordion/Accordion.svelte.d.ts +2 -2
  207. package/types/Accordion/AccordionItem.svelte.d.ts +5 -3
  208. package/types/Accordion/AccordionSkeleton.svelte.d.ts +5 -3
  209. package/types/AspectRatio/AspectRatio.svelte.d.ts +5 -3
  210. package/types/Breadcrumb/Breadcrumb.svelte.d.ts +2 -2
  211. package/types/Breadcrumb/BreadcrumbItem.svelte.d.ts +5 -3
  212. package/types/Breadcrumb/BreadcrumbSkeleton.svelte.d.ts +5 -3
  213. package/types/Breakpoint/Breakpoint.svelte.d.ts +2 -2
  214. package/types/Breakpoint/breakpointObserver.d.ts +1 -1
  215. package/types/Breakpoint/index.d.ts +1 -0
  216. package/types/Button/Button.svelte.d.ts +5 -3
  217. package/types/Button/ButtonSet.svelte.d.ts +5 -3
  218. package/types/Button/ButtonSkeleton.svelte.d.ts +5 -3
  219. package/types/Checkbox/Checkbox.svelte.d.ts +5 -3
  220. package/types/Checkbox/CheckboxSkeleton.svelte.d.ts +5 -3
  221. package/types/CodeSnippet/CodeSnippet.svelte.d.ts +2 -2
  222. package/types/CodeSnippet/CodeSnippetSkeleton.svelte.d.ts +5 -3
  223. package/types/ComboBox/ComboBox.svelte.d.ts +6 -4
  224. package/types/ComposedModal/ComposedModal.svelte.d.ts +5 -3
  225. package/types/ComposedModal/ModalBody.svelte.d.ts +5 -3
  226. package/types/ComposedModal/ModalFooter.svelte.d.ts +5 -3
  227. package/types/ComposedModal/ModalHeader.svelte.d.ts +5 -3
  228. package/types/ContentSwitcher/ContentSwitcher.svelte.d.ts +5 -3
  229. package/types/ContentSwitcher/Switch.svelte.d.ts +5 -3
  230. package/types/ContextMenu/ContextMenu.svelte.d.ts +5 -3
  231. package/types/ContextMenu/ContextMenuDivider.svelte.d.ts +1 -1
  232. package/types/ContextMenu/ContextMenuGroup.svelte.d.ts +2 -2
  233. package/types/ContextMenu/ContextMenuOption.svelte.d.ts +5 -3
  234. package/types/ContextMenu/ContextMenuRadioGroup.svelte.d.ts +2 -2
  235. package/types/CopyButton/CopyButton.svelte.d.ts +5 -3
  236. package/types/DataTable/DataTable.svelte.d.ts +39 -37
  237. package/types/DataTable/DataTableSkeleton.svelte.d.ts +5 -3
  238. package/types/DataTable/DataTableTypes.d.ts +18 -0
  239. package/types/DataTable/Table.svelte.d.ts +5 -3
  240. package/types/DataTable/TableBody.svelte.d.ts +5 -3
  241. package/types/DataTable/TableCell.svelte.d.ts +5 -3
  242. package/types/DataTable/TableContainer.svelte.d.ts +5 -3
  243. package/types/DataTable/TableHead.svelte.d.ts +5 -3
  244. package/types/DataTable/TableHeader.svelte.d.ts +5 -3
  245. package/types/DataTable/TableRow.svelte.d.ts +5 -3
  246. package/types/DataTable/Toolbar.svelte.d.ts +5 -3
  247. package/types/DataTable/ToolbarBatchActions.svelte.d.ts +5 -3
  248. package/types/DataTable/ToolbarContent.svelte.d.ts +1 -1
  249. package/types/DataTable/ToolbarMenu.svelte.d.ts +1 -1
  250. package/types/DataTable/ToolbarMenuItem.svelte.d.ts +1 -1
  251. package/types/DataTable/ToolbarSearch.svelte.d.ts +6 -4
  252. package/types/DatePicker/DatePicker.svelte.d.ts +5 -3
  253. package/types/DatePicker/DatePickerInput.svelte.d.ts +5 -3
  254. package/types/DatePicker/DatePickerSkeleton.svelte.d.ts +5 -3
  255. package/types/Dropdown/Dropdown.svelte.d.ts +6 -4
  256. package/types/Dropdown/DropdownSkeleton.svelte.d.ts +5 -3
  257. package/types/FileUploader/FileUploader.svelte.d.ts +5 -3
  258. package/types/FileUploader/FileUploaderButton.svelte.d.ts +5 -3
  259. package/types/FileUploader/FileUploaderDropContainer.svelte.d.ts +6 -3
  260. package/types/FileUploader/FileUploaderItem.svelte.d.ts +5 -3
  261. package/types/FileUploader/FileUploaderSkeleton.svelte.d.ts +5 -3
  262. package/types/FileUploader/Filename.svelte.d.ts +5 -3
  263. package/types/FluidForm/FluidForm.svelte.d.ts +5 -3
  264. package/types/Form/Form.svelte.d.ts +5 -3
  265. package/types/FormGroup/FormGroup.svelte.d.ts +5 -3
  266. package/types/FormItem/FormItem.svelte.d.ts +5 -3
  267. package/types/FormLabel/FormLabel.svelte.d.ts +5 -3
  268. package/types/Grid/Column.svelte.d.ts +5 -3
  269. package/types/Grid/Grid.svelte.d.ts +5 -3
  270. package/types/Grid/Row.svelte.d.ts +5 -3
  271. package/types/ImageLoader/ImageLoader.svelte.d.ts +5 -3
  272. package/types/InlineLoading/InlineLoading.svelte.d.ts +5 -3
  273. package/types/Link/Link.svelte.d.ts +5 -3
  274. package/types/Link/OutboundLink.svelte.d.ts +1 -1
  275. package/types/ListBox/ListBox.svelte.d.ts +5 -3
  276. package/types/ListBox/ListBoxField.svelte.d.ts +5 -3
  277. package/types/ListBox/ListBoxMenu.svelte.d.ts +5 -3
  278. package/types/ListBox/ListBoxMenuIcon.svelte.d.ts +5 -3
  279. package/types/ListBox/ListBoxMenuItem.svelte.d.ts +5 -3
  280. package/types/ListBox/ListBoxSelection.svelte.d.ts +5 -3
  281. package/types/ListItem/ListItem.svelte.d.ts +5 -3
  282. package/types/Loading/Loading.svelte.d.ts +5 -3
  283. package/types/LocalStorage/LocalStorage.svelte.d.ts +2 -2
  284. package/types/Modal/Modal.svelte.d.ts +5 -3
  285. package/types/MultiSelect/MultiSelect.svelte.d.ts +7 -5
  286. package/types/Notification/InlineNotification.svelte.d.ts +5 -3
  287. package/types/Notification/NotificationActionButton.svelte.d.ts +1 -1
  288. package/types/Notification/NotificationButton.svelte.d.ts +5 -3
  289. package/types/Notification/NotificationIcon.svelte.d.ts +2 -2
  290. package/types/Notification/ToastNotification.svelte.d.ts +5 -3
  291. package/types/NumberInput/NumberInput.svelte.d.ts +5 -3
  292. package/types/NumberInput/NumberInputSkeleton.svelte.d.ts +5 -3
  293. package/types/OrderedList/OrderedList.svelte.d.ts +5 -3
  294. package/types/OverflowMenu/OverflowMenu.svelte.d.ts +5 -3
  295. package/types/OverflowMenu/OverflowMenuItem.svelte.d.ts +5 -3
  296. package/types/Pagination/Pagination.svelte.d.ts +5 -3
  297. package/types/Pagination/PaginationSkeleton.svelte.d.ts +5 -3
  298. package/types/PaginationNav/PaginationNav.svelte.d.ts +5 -3
  299. package/types/Popover/Popover.svelte.d.ts +5 -3
  300. package/types/ProgressBar/ProgressBar.svelte.d.ts +5 -3
  301. package/types/ProgressIndicator/ProgressIndicator.svelte.d.ts +5 -3
  302. package/types/ProgressIndicator/ProgressIndicatorSkeleton.svelte.d.ts +6 -3
  303. package/types/ProgressIndicator/ProgressStep.svelte.d.ts +5 -3
  304. package/types/RadioButton/RadioButton.svelte.d.ts +5 -3
  305. package/types/RadioButton/RadioButtonSkeleton.svelte.d.ts +5 -3
  306. package/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts +5 -3
  307. package/types/RecursiveList/RecursiveList.svelte.d.ts +7 -5
  308. package/types/Search/Search.svelte.d.ts +5 -3
  309. package/types/Search/SearchSkeleton.svelte.d.ts +5 -3
  310. package/types/Select/Select.svelte.d.ts +5 -3
  311. package/types/Select/SelectItem.svelte.d.ts +2 -2
  312. package/types/Select/SelectItemGroup.svelte.d.ts +5 -3
  313. package/types/Select/SelectSkeleton.svelte.d.ts +5 -3
  314. package/types/SkeletonPlaceholder/SkeletonPlaceholder.svelte.d.ts +5 -3
  315. package/types/SkeletonText/SkeletonText.svelte.d.ts +5 -3
  316. package/types/Slider/Slider.svelte.d.ts +5 -3
  317. package/types/Slider/SliderSkeleton.svelte.d.ts +5 -3
  318. package/types/StructuredList/StructuredList.svelte.d.ts +5 -3
  319. package/types/StructuredList/StructuredListBody.svelte.d.ts +5 -3
  320. package/types/StructuredList/StructuredListCell.svelte.d.ts +5 -3
  321. package/types/StructuredList/StructuredListHead.svelte.d.ts +5 -3
  322. package/types/StructuredList/StructuredListInput.svelte.d.ts +5 -3
  323. package/types/StructuredList/StructuredListRow.svelte.d.ts +5 -3
  324. package/types/StructuredList/StructuredListSkeleton.svelte.d.ts +6 -3
  325. package/types/Tabs/Tab.svelte.d.ts +5 -3
  326. package/types/Tabs/TabContent.svelte.d.ts +5 -3
  327. package/types/Tabs/Tabs.svelte.d.ts +5 -3
  328. package/types/Tabs/TabsSkeleton.svelte.d.ts +5 -3
  329. package/types/Tag/Tag.svelte.d.ts +5 -3
  330. package/types/Tag/TagSkeleton.svelte.d.ts +5 -3
  331. package/types/TextArea/TextArea.svelte.d.ts +5 -3
  332. package/types/TextArea/TextAreaSkeleton.svelte.d.ts +5 -3
  333. package/types/TextInput/PasswordInput.svelte.d.ts +5 -3
  334. package/types/TextInput/TextInput.svelte.d.ts +5 -3
  335. package/types/TextInput/TextInputSkeleton.svelte.d.ts +5 -3
  336. package/types/Theme/Theme.svelte.d.ts +2 -2
  337. package/types/Tile/ClickableTile.svelte.d.ts +5 -3
  338. package/types/Tile/ExpandableTile.svelte.d.ts +5 -3
  339. package/types/Tile/RadioTile.svelte.d.ts +5 -3
  340. package/types/Tile/SelectableTile.svelte.d.ts +5 -3
  341. package/types/Tile/Tile.svelte.d.ts +5 -3
  342. package/types/Tile/TileGroup.svelte.d.ts +5 -3
  343. package/types/TimePicker/TimePicker.svelte.d.ts +5 -3
  344. package/types/TimePicker/TimePickerSelect.svelte.d.ts +5 -3
  345. package/types/Toggle/Toggle.svelte.d.ts +5 -3
  346. package/types/Toggle/ToggleSkeleton.svelte.d.ts +5 -3
  347. package/types/Tooltip/Tooltip.svelte.d.ts +5 -3
  348. package/types/Tooltip/TooltipFooter.svelte.d.ts +2 -2
  349. package/types/TooltipDefinition/TooltipDefinition.svelte.d.ts +5 -3
  350. package/types/TooltipIcon/TooltipIcon.svelte.d.ts +5 -3
  351. package/types/TreeView/TreeView.svelte.d.ts +8 -6
  352. package/types/Truncate/Truncate.svelte.d.ts +5 -3
  353. package/types/Truncate/truncate.d.ts +1 -1
  354. package/types/UIShell/Content.svelte.d.ts +5 -3
  355. package/types/UIShell/Header.svelte.d.ts +5 -3
  356. package/types/UIShell/HeaderAction.svelte.d.ts +5 -3
  357. package/types/UIShell/HeaderActionLink.svelte.d.ts +5 -3
  358. package/types/UIShell/HeaderGlobalAction.svelte.d.ts +2 -2
  359. package/types/UIShell/HeaderNav.svelte.d.ts +5 -3
  360. package/types/UIShell/HeaderNavItem.svelte.d.ts +5 -3
  361. package/types/UIShell/HeaderNavMenu.svelte.d.ts +5 -3
  362. package/types/UIShell/HeaderPanelDivider.svelte.d.ts +1 -1
  363. package/types/UIShell/HeaderPanelLink.svelte.d.ts +5 -3
  364. package/types/UIShell/HeaderPanelLinks.svelte.d.ts +1 -1
  365. package/types/UIShell/HeaderSearch.svelte.d.ts +5 -3
  366. package/types/UIShell/HeaderUtilities.svelte.d.ts +1 -1
  367. package/types/UIShell/SideNav.svelte.d.ts +5 -3
  368. package/types/UIShell/SideNavDivider.svelte.d.ts +5 -3
  369. package/types/UIShell/SideNavItems.svelte.d.ts +1 -1
  370. package/types/UIShell/SideNavLink.svelte.d.ts +5 -3
  371. package/types/UIShell/SideNavMenu.svelte.d.ts +5 -3
  372. package/types/UIShell/SideNavMenuItem.svelte.d.ts +5 -3
  373. package/types/UIShell/SkipToContent.svelte.d.ts +5 -3
  374. package/types/UnorderedList/UnorderedList.svelte.d.ts +5 -3
  375. package/lib/index.js +0 -1
  376. package/lib/index.mjs +0 -71128
package/README.md CHANGED
@@ -105,7 +105,7 @@ import "carbon-components-svelte/css/all.css";
105
105
  Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
106
106
 
107
107
  ```html
108
- <!DOCTYPE html>
108
+ <!doctype html>
109
109
  <html lang="en" theme="g10">
110
110
  <body>
111
111
  ...
package/package.json CHANGED
@@ -1,9 +1,12 @@
1
1
  {
2
2
  "name": "carbon-components-svelte",
3
- "version": "0.85.4",
3
+ "version": "0.86.1",
4
4
  "license": "Apache-2.0",
5
5
  "description": "Svelte implementation of the Carbon Design System",
6
+ "type": "module",
6
7
  "svelte": "./src/index.js",
8
+ "main": "./src/index.js",
9
+ "types": "./types/index.d.ts",
7
10
  "exports": {
8
11
  ".": {
9
12
  "types": "./types/index.d.ts",
@@ -23,9 +26,6 @@
23
26
  "import": "./src/*.js"
24
27
  }
25
28
  },
26
- "main": "./lib/index.js",
27
- "module": "./lib/index.mjs",
28
- "types": "./types/index.d.ts",
29
29
  "sideEffects": [
30
30
  "css/*.css"
31
31
  ],
@@ -50,7 +50,6 @@
50
50
  "carbon design system"
51
51
  ],
52
52
  "files": [
53
- "lib",
54
53
  "src",
55
54
  "types",
56
55
  "css",
package/src/Accordion/Accordion.svelte CHANGED
@@ -34,8 +34,8 @@
34
34
  {#if skeleton}
35
35
  <AccordionSkeleton
36
36
  {...$$restProps}
37
- align="{align}"
38
- size="{size}"
37
+ {align}
38
+ {size}
39
39
  on:click
40
40
  on:mouseover
41
41
  on:mouseenter
@@ -44,11 +44,11 @@
44
44
  {:else}
45
45
  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
46
46
  <ul
47
- class:bx--accordion="{true}"
48
- class:bx--accordion--start="{align === 'start'}"
49
- class:bx--accordion--end="{align === 'end'}"
50
- class:bx--accordion--sm="{size === 'sm'}"
51
- class:bx--accordion--xl="{size === 'xl'}"
47
+ class:bx--accordion={true}
48
+ class:bx--accordion--start={align === "start"}
49
+ class:bx--accordion--end={align === "end"}
50
+ class:bx--accordion--sm={size === "sm"}
51
+ class:bx--accordion--xl={size === "xl"}
52
52
  {...$$restProps}
53
53
  on:click
54
54
  on:mouseover
package/src/Accordion/AccordionItem.svelte CHANGED
@@ -36,44 +36,44 @@
36
36
 
37
37
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
38
38
  <li
39
- class:bx--accordion__item="{true}"
40
- class:bx--accordion__item--active="{open}"
41
- class:bx--accordion__item--disabled="{disabled}"
42
- class:bx--accordion__item--expanding="{animation === 'expanding'}"
43
- class:bx--accordion__item--collapsing="{animation === 'collapsing'}"
39
+ class:bx--accordion__item={true}
40
+ class:bx--accordion__item--active={open}
41
+ class:bx--accordion__item--disabled={disabled}
42
+ class:bx--accordion__item--expanding={animation === "expanding"}
43
+ class:bx--accordion__item--collapsing={animation === "collapsing"}
44
44
  {...$$restProps}
45
45
  on:animationend
46
- on:animationend="{() => {
46
+ on:animationend={() => {
47
47
  animation = undefined;
48
- }}"
48
+ }}
49
49
  >
50
50
  <button
51
51
  type="button"
52
- class:bx--accordion__heading="{true}"
53
- title="{iconDescription}"
54
- aria-expanded="{open}"
55
- disabled="{disabled}"
52
+ class:bx--accordion__heading={true}
53
+ title={iconDescription}
54
+ aria-expanded={open}
55
+ {disabled}
56
56
  on:click
57
- on:click="{() => {
57
+ on:click={() => {
58
58
  open = !open;
59
- animation = open ? 'expanding' : 'collapsing';
60
- }}"
59
+ animation = open ? "expanding" : "collapsing";
60
+ }}
61
61
  on:mouseover
62
62
  on:mouseenter
63
63
  on:mouseleave
64
64
  on:keydown
65
- on:keydown="{({ key }) => {
66
- if (open && key === 'Escape') {
65
+ on:keydown={({ key }) => {
66
+ if (open && key === "Escape") {
67
67
  open = false;
68
68
  }
69
- }}"
69
+ }}
70
70
  >
71
- <ChevronRight class="bx--accordion__arrow" aria-label="{iconDescription}" />
72
- <div class:bx--accordion__title="{true}">
71
+ <ChevronRight class="bx--accordion__arrow" aria-label={iconDescription} />
72
+ <div class:bx--accordion__title={true}>
73
73
  <slot name="title">{title}</slot>
74
74
  </div>
75
75
  </button>
76
- <div class:bx--accordion__content="{true}">
76
+ <div class:bx--accordion__content={true}>
77
77
  <slot />
78
78
  </div>
79
79
  </li>
package/src/Accordion/AccordionSkeleton.svelte CHANGED
@@ -24,12 +24,12 @@
24
24
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
25
25
  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
26
26
  <ul
27
- class:bx--skeleton="{true}"
28
- class:bx--accordion="{true}"
29
- class:bx--accordion--start="{align === 'start'}"
30
- class:bx--accordion--end="{align === 'end'}"
31
- class:bx--accordion--sm="{size === 'sm'}"
32
- class:bx--accordion--xl="{size === 'xl'}"
27
+ class:bx--skeleton={true}
28
+ class:bx--accordion={true}
29
+ class:bx--accordion--start={align === "start"}
30
+ class:bx--accordion--end={align === "end"}
31
+ class:bx--accordion--sm={size === "sm"}
32
+ class:bx--accordion--xl={size === "xl"}
33
33
  {...$$restProps}
34
34
  on:click
35
35
  on:mouseover
@@ -38,14 +38,14 @@
38
38
  >
39
39
  {#if open}
40
40
  <li
41
- class:bx--accordion__item="{true}"
42
- class:bx--accordion__item--active="{true}"
41
+ class:bx--accordion__item={true}
42
+ class:bx--accordion__item--active={true}
43
43
  >
44
- <span class:bx--accordion__heading="{true}">
44
+ <span class:bx--accordion__heading={true}>
45
45
  <ChevronRight class="bx--accordion__arrow" />
46
46
  <SkeletonText class="bx--accordion__title" />
47
47
  </span>
48
- <div class:bx--accordion__content="{true}">
48
+ <div class:bx--accordion__content={true}>
49
49
  <SkeletonText width="90%" />
50
50
  <SkeletonText width="80%" />
51
51
  <SkeletonText width="95%" />
@@ -53,8 +53,8 @@
53
53
  </li>
54
54
  {/if}
55
55
  {#each Array.from({ length: open ? count - 1 : count }, (_, i) => i) as item (item)}
56
- <li class:bx--accordion__item="{true}">
57
- <span class:bx--accordion__heading="{true}">
56
+ <li class:bx--accordion__item={true}>
57
+ <span class:bx--accordion__heading={true}>
58
58
  <ChevronRight class="bx--accordion__arrow" />
59
59
  <SkeletonText class="bx--accordion__title" />
60
60
  </span>
package/src/AspectRatio/AspectRatio.svelte CHANGED
@@ -7,19 +7,19 @@
7
7
  </script>
8
8
 
9
9
  <div
10
- class:bx--aspect-ratio="{true}"
11
- class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
12
- class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
13
- class:bx--aspect-ratio--16x9="{ratio === '16x9'}"
14
- class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
15
- class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
16
- class:bx--aspect-ratio--3x4="{ratio === '3x4'}"
17
- class:bx--aspect-ratio--3x2="{ratio === '3x2'}"
18
- class:bx--aspect-ratio--9x16="{ratio === '9x16'}"
19
- class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
10
+ class:bx--aspect-ratio={true}
11
+ class:bx--aspect-ratio--2x1={ratio === "2x1"}
12
+ class:bx--aspect-ratio--2x3={ratio === "2x3"}
13
+ class:bx--aspect-ratio--16x9={ratio === "16x9"}
14
+ class:bx--aspect-ratio--4x3={ratio === "4x3"}
15
+ class:bx--aspect-ratio--1x1={ratio === "1x1"}
16
+ class:bx--aspect-ratio--3x4={ratio === "3x4"}
17
+ class:bx--aspect-ratio--3x2={ratio === "3x2"}
18
+ class:bx--aspect-ratio--9x16={ratio === "9x16"}
19
+ class:bx--aspect-ratio--1x2={ratio === "1x2"}
20
20
  {...$$restProps}
21
21
  >
22
- <div class:bx--aspect-ratio--object="{true}">
22
+ <div class:bx--aspect-ratio--object={true}>
23
23
  <slot />
24
24
  </div>
25
25
  </div>
package/src/Breadcrumb/Breadcrumb.svelte CHANGED
@@ -13,7 +13,7 @@
13
13
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
14
14
  {#if skeleton}
15
15
  <BreadcrumbSkeleton
16
- noTrailingSlash="{noTrailingSlash}"
16
+ {noTrailingSlash}
17
17
  {...$$restProps}
18
18
  on:click
19
19
  on:mouseover
@@ -31,8 +31,8 @@
31
31
  on:mouseleave
32
32
  >
33
33
  <ol
34
- class:bx--breadcrumb="{true}"
35
- class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
34
+ class:bx--breadcrumb={true}
35
+ class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
36
36
  >
37
37
  <slot />
38
38
  </ol>
package/src/Breadcrumb/BreadcrumbItem.svelte CHANGED
@@ -22,9 +22,9 @@
22
22
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
23
23
  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
24
24
  <li
25
- class:bx--breadcrumb-item="{true}"
26
- class:bx--breadcrumb-item--current="{isCurrentPage &&
27
- $$restProps['aria-current'] !== 'page'}"
25
+ class:bx--breadcrumb-item={true}
26
+ class:bx--breadcrumb-item--current={isCurrentPage &&
27
+ $$restProps["aria-current"] !== "page"}
28
28
  {...$$restProps}
29
29
  on:click
30
30
  on:mouseover
@@ -32,15 +32,15 @@
32
32
  on:mouseleave
33
33
  >
34
34
  {#if href}
35
- <Link href="{href}" aria-current="{$$restProps['aria-current']}">
35
+ <Link {href} aria-current={$$restProps["aria-current"]}>
36
36
  <slot />
37
37
  </Link>
38
38
  {:else}
39
39
  <slot
40
- props="{{
41
- 'aria-current': $$restProps['aria-current'],
42
- class: 'bx--link',
43
- }}"
40
+ props={{
41
+ "aria-current": $$restProps["aria-current"],
42
+ class: "bx--link",
43
+ }}
44
44
  />
45
45
  {/if}
46
46
  </li>
package/src/Breadcrumb/BreadcrumbSkeleton.svelte CHANGED
@@ -9,9 +9,9 @@
9
9
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
10
10
  <!-- svelte-ignore a11y-no-static-element-interactions -->
11
11
  <div
12
- class:bx--skeleton="{true}"
13
- class:bx--breadcrumb="{true}"
14
- class:bx--breadcrumb--no-trailing-slash="{noTrailingSlash}"
12
+ class:bx--skeleton={true}
13
+ class:bx--breadcrumb={true}
14
+ class:bx--breadcrumb--no-trailing-slash={noTrailingSlash}
15
15
  {...$$restProps}
16
16
  on:click
17
17
  on:mouseover
@@ -19,8 +19,8 @@
19
19
  on:mouseleave
20
20
  >
21
21
  {#each Array.from({ length: count }, (_, i) => i) as item (item)}
22
- <div class:bx--breadcrumb-item="{true}">
23
- <span class:bx--link="{true}">&nbsp;</span>
22
+ <div class:bx--breadcrumb-item={true}>
23
+ <span class:bx--link={true}>&nbsp;</span>
24
24
  </div>
25
25
  {/each}
26
26
  </div>
package/src/Breakpoint/Breakpoint.svelte CHANGED
@@ -44,4 +44,4 @@
44
44
  dispatch("change", { size, breakpointValue: breakpoints[size] });
45
45
  </script>
46
46
 
47
- <slot size="{size}" sizes="{sizes}" />
47
+ <slot {size} {sizes} />
package/src/Breakpoint/breakpointObserver.d.ts CHANGED
@@ -9,7 +9,7 @@ export function breakpointObserver(): {
9
9
  subscribe: (
10
10
  this: void,
11
11
  run: Subscriber<any>,
12
- invalidate?: (value?: any) => void
12
+ invalidate?: (value?: any) => void,
13
13
  ) => Unsubscriber;
14
14
  /**
15
15
  * Returns a store readable store that returns whether the current
package/src/Breakpoint/breakpointObserver.js CHANGED
@@ -14,19 +14,19 @@ export function breakpointObserver() {
14
14
  const match = {
15
15
  sm: window.matchMedia(`(max-width: ${breakpoints.md}px)`),
16
16
  md: window.matchMedia(
17
- `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`
17
+ `(min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px)`,
18
18
  ),
19
19
  lg: window.matchMedia(
20
- `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`
20
+ `(min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xlg}px)`,
21
21
  ),
22
22
  xlg: window.matchMedia(
23
- `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`
23
+ `(min-width: ${breakpoints.xlg}px) and (max-width: ${breakpoints.max}px)`,
24
24
  ),
25
25
  max: window.matchMedia(`(min-width: ${breakpoints.max}px)`),
26
26
  };
27
27
  const matchers = Object.entries(match);
28
28
  const sizeByMedia = Object.fromEntries(
29
- matchers.map(([size, queryList]) => [queryList.media, size])
29
+ matchers.map(([size, queryList]) => [queryList.media, size]),
30
30
  );
31
31
 
32
32
  const size = matchers.find(([size, queryList]) => queryList.matches)[0];
@@ -39,12 +39,12 @@ export function breakpointObserver() {
39
39
  }
40
40
 
41
41
  matchers.forEach(([size, queryList]) =>
42
- queryList.addEventListener("change", handleChange)
42
+ queryList.addEventListener("change", handleChange),
43
43
  );
44
44
 
45
45
  return () => {
46
46
  matchers.forEach(([size, queryList]) =>
47
- queryList.removeEventListener("change", handleChange)
47
+ queryList.removeEventListener("change", handleChange),
48
48
  );
49
49
  };
50
50
  });
package/src/Breakpoint/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ // @ts-nocheck `Breakpoint` is auto-generated by `sveld`.
1
2
  export { default as Breakpoint } from "./Breakpoint.svelte";
2
3
  export { breakpointObserver } from "./breakpointObserver";
3
4
  export { breakpoints } from "./breakpoints";
package/src/Button/Button.svelte CHANGED
@@ -136,10 +136,10 @@
136
136
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
137
137
  {#if skeleton}
138
138
  <ButtonSkeleton
139
- href="{href}"
140
- size="{size}"
139
+ {href}
140
+ {size}
141
141
  {...$$restProps}
142
- style="{hasIconOnly && 'width: 3rem;'}"
142
+ style={hasIconOnly && "width: 3rem;"}
143
143
  on:click
144
144
  on:focus
145
145
  on:blur
@@ -148,12 +148,12 @@
148
148
  on:mouseleave
149
149
  />
150
150
  {:else if as}
151
- <slot props="{buttonProps}" />
151
+ <slot props={buttonProps} />
152
152
  {:else if href && !disabled}
153
153
  <!-- svelte-ignore a11y-missing-attribute -->
154
154
  <!-- svelte-ignore a11y-no-static-element-interactions -->
155
155
  <a
156
- bind:this="{ref}"
156
+ bind:this={ref}
157
157
  {...buttonProps}
158
158
  on:click
159
159
  on:focus
@@ -163,26 +163,26 @@
163
163
  on:mouseleave
164
164
  >
165
165
  {#if hasIconOnly}
166
- <span class:bx--assistive-text="{true}">{iconDescription}</span>
166
+ <span class:bx--assistive-text={true}>{iconDescription}</span>
167
167
  {/if}
168
168
  <slot />
169
169
  {#if $$slots.icon}
170
170
  <slot
171
171
  name="icon"
172
- style="{hasIconOnly ? 'margin-left: 0' : undefined}"
172
+ style={hasIconOnly ? "margin-left: 0" : undefined}
173
173
  {...iconProps}
174
174
  />
175
175
  {:else if icon}
176
176
  <svelte:component
177
- this="{icon}"
178
- style="{hasIconOnly ? 'margin-left: 0' : undefined}"
177
+ this={icon}
178
+ style={hasIconOnly ? "margin-left: 0" : undefined}
179
179
  {...iconProps}
180
180
  />
181
181
  {/if}
182
182
  </a>
183
183
  {:else}
184
184
  <button
185
- bind:this="{ref}"
185
+ bind:this={ref}
186
186
  {...buttonProps}
187
187
  on:click
188
188
  on:focus
@@ -192,19 +192,19 @@
192
192
  on:mouseleave
193
193
  >
194
194
  {#if hasIconOnly}
195
- <span class:bx--assistive-text="{true}">{iconDescription}</span>
195
+ <span class:bx--assistive-text={true}>{iconDescription}</span>
196
196
  {/if}
197
197
  <slot />
198
198
  {#if $$slots.icon}
199
199
  <slot
200
200
  name="icon"
201
- style="{hasIconOnly ? 'margin-left: 0' : undefined}"
201
+ style={hasIconOnly ? "margin-left: 0" : undefined}
202
202
  {...iconProps}
203
203
  />
204
204
  {:else if icon}
205
205
  <svelte:component
206
- this="{icon}"
207
- style="{hasIconOnly ? 'margin-left: 0' : undefined}"
206
+ this={icon}
207
+ style={hasIconOnly ? "margin-left: 0" : undefined}
208
208
  {...iconProps}
209
209
  />
210
210
  {/if}
package/src/Button/ButtonSet.svelte CHANGED
@@ -4,8 +4,8 @@
4
4
  </script>
5
5
 
6
6
  <div
7
- class:bx--btn-set="{true}"
8
- class:bx--btn-set--stacked="{stacked}"
7
+ class:bx--btn-set={true}
8
+ class:bx--btn-set--stacked={stacked}
9
9
  {...$$restProps}
10
10
  >
11
11
  <slot />
package/src/Button/ButtonSkeleton.svelte CHANGED
@@ -15,15 +15,15 @@
15
15
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
16
16
  {#if href}
17
17
  <a
18
- href="{href}"
19
- rel="{$$restProps.target === '_blank' ? 'noopener noreferrer' : undefined}"
18
+ {href}
19
+ rel={$$restProps.target === "_blank" ? "noopener noreferrer" : undefined}
20
20
  role="button"
21
- class:bx--skeleton="{true}"
22
- class:bx--btn="{true}"
23
- class:bx--btn--field="{size === 'field'}"
24
- class:bx--btn--sm="{size === 'small'}"
25
- class:bx--btn--lg="{size === 'lg'}"
26
- class:bx--btn--xl="{size === 'xl'}"
21
+ class:bx--skeleton={true}
22
+ class:bx--btn={true}
23
+ class:bx--btn--field={size === "field"}
24
+ class:bx--btn--sm={size === "small"}
25
+ class:bx--btn--lg={size === "lg"}
26
+ class:bx--btn--xl={size === "xl"}
27
27
  {...$$restProps}
28
28
  on:click
29
29
  on:focus
@@ -37,12 +37,12 @@
37
37
  {:else}
38
38
  <!-- svelte-ignore a11y-no-static-element-interactions -->
39
39
  <div
40
- class:bx--skeleton="{true}"
41
- class:bx--btn="{true}"
42
- class:bx--btn--field="{size === 'field'}"
43
- class:bx--btn--sm="{size === 'small'}"
44
- class:bx--btn--lg="{size === 'lg'}"
45
- class:bx--btn--xl="{size === 'xl'}"
40
+ class:bx--skeleton={true}
41
+ class:bx--btn={true}
42
+ class:bx--btn--field={size === "field"}
43
+ class:bx--btn--sm={size === "small"}
44
+ class:bx--btn--lg={size === "lg"}
45
+ class:bx--btn--xl={size === "xl"}
46
46
  {...$$restProps}
47
47
  on:click
48
48
  on:focus
package/src/Checkbox/Checkbox.svelte CHANGED
@@ -82,8 +82,8 @@
82
82
  {:else}
83
83
  <!-- svelte-ignore a11y-no-static-element-interactions -->
84
84
  <div
85
- class:bx--form-item="{true}"
86
- class:bx--checkbox-wrapper="{true}"
85
+ class:bx--form-item={true}
86
+ class:bx--checkbox-wrapper={true}
87
87
  {...$$restProps}
88
88
  on:click
89
89
  on:mouseover
@@ -91,18 +91,18 @@
91
91
  on:mouseleave
92
92
  >
93
93
  <input
94
- bind:this="{ref}"
94
+ bind:this={ref}
95
95
  type="checkbox"
96
- value="{value}"
97
- checked="{checked}"
98
- disabled="{disabled}"
99
- id="{id}"
100
- indeterminate="{indeterminate}"
101
- name="{name}"
102
- required="{required}"
103
- readonly="{readonly}"
104
- class:bx--checkbox="{true}"
105
- on:change="{() => {
96
+ {value}
97
+ {checked}
98
+ {disabled}
99
+ {id}
100
+ bind:indeterminate
101
+ {name}
102
+ {required}
103
+ {readonly}
104
+ class:bx--checkbox={true}
105
+ on:change={() => {
106
106
  if (useGroup) {
107
107
  group = group.includes(value)
108
108
  ? group.filter((_value) => _value !== value)
@@ -110,16 +110,16 @@
110
110
  } else {
111
111
  checked = !checked;
112
112
  }
113
- }}"
113
+ }}
114
114
  on:change
115
115
  on:focus
116
116
  on:blur
117
117
  />
118
- <label for="{id}" title="{title}" class:bx--checkbox-label="{true}">
118
+ <label for={id} {title} class:bx--checkbox-label={true}>
119
119
  <span
120
- bind:this="{refLabel}"
121
- class:bx--checkbox-label-text="{true}"
122
- class:bx--visually-hidden="{hideLabel}"
120
+ bind:this={refLabel}
121
+ class:bx--checkbox-label-text={true}
122
+ class:bx--visually-hidden={hideLabel}
123
123
  >
124
124
  <slot name="labelText">
125
125
  {labelText}
package/src/Checkbox/CheckboxSkeleton.svelte CHANGED
@@ -1,15 +1,14 @@
1
1
  <!-- svelte-ignore a11y-mouse-events-have-key-events -->
2
2
  <!-- svelte-ignore a11y-no-static-element-interactions -->
3
3
  <div
4
- class:bx--form-item="{true}"
5
- class:bx--checkbox-wrapper="{true}"
6
- class:bx--checkbox-label="{true}"
4
+ class:bx--form-item={true}
5
+ class:bx--checkbox-wrapper={true}
6
+ class:bx--checkbox-label={true}
7
7
  {...$$restProps}
8
8
  on:click
9
9
  on:mouseover
10
10
  on:mouseenter
11
11
  on:mouseleave
12
12
  >
13
- <span class:bx--checkbox-label-text="{true}" class:bx--skeleton="{true}"
14
- ></span>
13
+ <span class:bx--checkbox-label-text={true} class:bx--skeleton={true}></span>
15
14
  </div>
package/src/Checkbox/InlineCheckbox.svelte CHANGED
@@ -18,23 +18,24 @@
18
18
  export let ref = null;
19
19
  </script>
20
20
 
21
- <div class:bx--checkbox--inline="{true}">
21
+ <div class:bx--checkbox--inline={true}>
22
22
  <input
23
- bind:this="{ref}"
23
+ bind:this={ref}
24
24
  type="checkbox"
25
- class:bx--checkbox="{true}"
26
- checked="{indeterminate ? false : checked}"
27
- indeterminate="{indeterminate}"
28
- id="{id}"
25
+ class:bx--checkbox={true}
26
+ checked={indeterminate ? false : checked}
27
+ bind:indeterminate
28
+ {id}
29
29
  {...$$restProps}
30
- aria-checked="{indeterminate ? undefined : checked}"
30
+ aria-checked={indeterminate ? undefined : checked}
31
31
  on:change
32
32
  on:focus
33
33
  on:blur
34
34
  />
35
35
  <label
36
- for="{id}"
37
- title="{title}"
38
- aria-label="{$$props['aria-label']}"
39
- class:bx--checkbox-label="{true}"></label>
36
+ for={id}
37
+ {title}
38
+ aria-label={$$props["aria-label"]}
39
+ class:bx--checkbox-label={true}
40
+ ></label>
40
41
  </div>