From 2f026f792ad94f468b890a6d5ab36cc2642dacf2 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Wed, 19 Jul 2023 09:44:56 -0700 Subject: [PATCH] feat(typescript)!: support svelte 4 (#1773) Closes #1753 The minimum Svelte version required for TypeScript users is now 3.55. --- COMPONENT_INDEX.md | 256 +++++++++--------- docs/src/COMPONENT_API.json | 42 +-- package.json | 6 +- src/Button/Button.svelte | 2 +- src/ComposedModal/ModalFooter.svelte | 2 +- src/ContextMenu/ContextMenuOption.svelte | 2 +- src/Link/Link.svelte | 2 +- src/Modal/Modal.svelte | 2 +- src/Notification/NotificationButton.svelte | 2 +- src/OverflowMenu/OverflowMenu.svelte | 2 +- src/Search/Search.svelte | 2 +- src/Tag/Tag.svelte | 2 +- src/Tooltip/Tooltip.svelte | 2 +- src/TooltipIcon/TooltipIcon.svelte | 2 +- src/TreeView/TreeView.svelte | 2 +- src/TreeView/TreeViewNode.svelte | 2 +- src/TreeView/TreeViewNodeList.svelte | 2 +- src/UIShell/HamburgerMenu.svelte | 4 +- src/UIShell/Header.svelte | 4 +- src/UIShell/HeaderAction.svelte | 4 +- src/UIShell/HeaderActionLink.svelte | 2 +- src/UIShell/HeaderGlobalAction.svelte | 2 +- src/UIShell/SideNavLink.svelte | 2 +- src/UIShell/SideNavMenu.svelte | 2 +- tests/Form.test.svelte | 4 +- tests/Search.test.svelte | 2 +- types/Accordion/Accordion.svelte.d.ts | 1 - types/Accordion/AccordionItem.svelte.d.ts | 7 +- types/Accordion/AccordionSkeleton.svelte.d.ts | 7 +- types/AspectRatio/AspectRatio.svelte.d.ts | 9 +- types/Breadcrumb/Breadcrumb.svelte.d.ts | 1 - types/Breadcrumb/BreadcrumbItem.svelte.d.ts | 7 +- .../Breadcrumb/BreadcrumbSkeleton.svelte.d.ts | 7 +- types/Breakpoint/Breakpoint.svelte.d.ts | 1 - types/Button/Button.svelte.d.ts | 15 +- types/Button/ButtonSet.svelte.d.ts | 9 +- types/Button/ButtonSkeleton.svelte.d.ts | 7 +- types/Checkbox/Checkbox.svelte.d.ts | 7 +- types/Checkbox/CheckboxSkeleton.svelte.d.ts | 7 +- types/CodeSnippet/CodeSnippet.svelte.d.ts | 1 - .../CodeSnippetSkeleton.svelte.d.ts | 7 +- types/ComboBox/ComboBox.svelte.d.ts | 7 +- types/ComposedModal/ComposedModal.svelte.d.ts | 7 +- types/ComposedModal/ModalBody.svelte.d.ts | 9 +- types/ComposedModal/ModalFooter.svelte.d.ts | 9 +- types/ComposedModal/ModalHeader.svelte.d.ts | 7 +- .../ContentSwitcher.svelte.d.ts | 7 +- types/ContentSwitcher/Switch.svelte.d.ts | 7 +- types/ContextMenu/ContextMenu.svelte.d.ts | 7 +- .../ContextMenuDivider.svelte.d.ts | 3 +- .../ContextMenu/ContextMenuGroup.svelte.d.ts | 3 +- .../ContextMenu/ContextMenuOption.svelte.d.ts | 9 +- .../ContextMenuRadioGroup.svelte.d.ts | 3 +- types/CopyButton/CopyButton.svelte.d.ts | 7 +- types/DataTable/DataTable.svelte.d.ts | 7 +- types/DataTable/DataTableSkeleton.svelte.d.ts | 9 +- types/DataTable/Table.svelte.d.ts | 9 +- types/DataTable/TableBody.svelte.d.ts | 9 +- types/DataTable/TableCell.svelte.d.ts | 7 +- types/DataTable/TableContainer.svelte.d.ts | 9 +- types/DataTable/TableHead.svelte.d.ts | 7 +- types/DataTable/TableHeader.svelte.d.ts | 7 +- types/DataTable/TableRow.svelte.d.ts | 7 +- types/DataTable/Toolbar.svelte.d.ts | 9 +- .../DataTable/ToolbarBatchActions.svelte.d.ts | 7 +- types/DataTable/ToolbarContent.svelte.d.ts | 3 +- types/DataTable/ToolbarMenu.svelte.d.ts | 3 +- types/DataTable/ToolbarMenuItem.svelte.d.ts | 1 - types/DataTable/ToolbarSearch.svelte.d.ts | 7 +- types/DatePicker/DatePicker.svelte.d.ts | 7 +- types/DatePicker/DatePickerInput.svelte.d.ts | 7 +- .../DatePicker/DatePickerSkeleton.svelte.d.ts | 7 +- types/Dropdown/Dropdown.svelte.d.ts | 7 +- types/Dropdown/DropdownSkeleton.svelte.d.ts | 7 +- types/FileUploader/FileUploader.svelte.d.ts | 7 +- .../FileUploaderButton.svelte.d.ts | 7 +- .../FileUploaderDropContainer.svelte.d.ts | 7 +- .../FileUploader/FileUploaderItem.svelte.d.ts | 7 +- .../FileUploaderSkeleton.svelte.d.ts | 7 +- types/FileUploader/Filename.svelte.d.ts | 11 +- types/FluidForm/FluidForm.svelte.d.ts | 7 +- types/Form/Form.svelte.d.ts | 7 +- types/FormGroup/FormGroup.svelte.d.ts | 7 +- types/FormItem/FormItem.svelte.d.ts | 7 +- types/FormLabel/FormLabel.svelte.d.ts | 7 +- types/Grid/Column.svelte.d.ts | 9 +- types/Grid/Grid.svelte.d.ts | 9 +- types/Grid/Row.svelte.d.ts | 9 +- types/ImageLoader/ImageLoader.svelte.d.ts | 7 +- types/InlineLoading/InlineLoading.svelte.d.ts | 7 +- types/Link/Link.svelte.d.ts | 10 +- types/Link/OutboundLink.svelte.d.ts | 1 - types/ListBox/ListBox.svelte.d.ts | 7 +- types/ListBox/ListBoxField.svelte.d.ts | 7 +- types/ListBox/ListBoxMenu.svelte.d.ts | 7 +- types/ListBox/ListBoxMenuIcon.svelte.d.ts | 7 +- types/ListBox/ListBoxMenuItem.svelte.d.ts | 7 +- types/ListBox/ListBoxSelection.svelte.d.ts | 7 +- types/ListItem/ListItem.svelte.d.ts | 7 +- types/Loading/Loading.svelte.d.ts | 9 +- types/LocalStorage/LocalStorage.svelte.d.ts | 1 - types/Modal/Modal.svelte.d.ts | 9 +- types/MultiSelect/MultiSelect.svelte.d.ts | 7 +- .../InlineNotification.svelte.d.ts | 7 +- .../NotificationActionButton.svelte.d.ts | 1 - .../NotificationButton.svelte.d.ts | 9 +- .../Notification/NotificationIcon.svelte.d.ts | 3 +- .../ToastNotification.svelte.d.ts | 7 +- types/NumberInput/NumberInput.svelte.d.ts | 7 +- .../NumberInputSkeleton.svelte.d.ts | 7 +- types/OrderedList/OrderedList.svelte.d.ts | 7 +- types/OverflowMenu/OverflowMenu.svelte.d.ts | 9 +- .../OverflowMenu/OverflowMenuItem.svelte.d.ts | 7 +- types/Pagination/Pagination.svelte.d.ts | 7 +- .../Pagination/PaginationSkeleton.svelte.d.ts | 7 +- types/PaginationNav/PaginationNav.svelte.d.ts | 7 +- types/Popover/Popover.svelte.d.ts | 7 +- types/ProgressBar/ProgressBar.svelte.d.ts | 9 +- .../ProgressIndicator.svelte.d.ts | 7 +- .../ProgressIndicatorSkeleton.svelte.d.ts | 7 +- .../ProgressStep.svelte.d.ts | 7 +- types/RadioButton/RadioButton.svelte.d.ts | 7 +- .../RadioButtonSkeleton.svelte.d.ts | 7 +- .../RadioButtonGroup.svelte.d.ts | 7 +- types/RecursiveList/RecursiveList.svelte.d.ts | 10 +- types/Search/Search.svelte.d.ts | 9 +- types/Search/SearchSkeleton.svelte.d.ts | 7 +- types/Select/Select.svelte.d.ts | 7 +- types/Select/SelectItem.svelte.d.ts | 3 +- types/Select/SelectItemGroup.svelte.d.ts | 9 +- types/Select/SelectSkeleton.svelte.d.ts | 7 +- .../SkeletonPlaceholder.svelte.d.ts | 7 +- types/SkeletonText/SkeletonText.svelte.d.ts | 7 +- types/Slider/Slider.svelte.d.ts | 7 +- types/Slider/SliderSkeleton.svelte.d.ts | 7 +- .../StructuredList/StructuredList.svelte.d.ts | 7 +- .../StructuredListBody.svelte.d.ts | 7 +- .../StructuredListCell.svelte.d.ts | 7 +- .../StructuredListHead.svelte.d.ts | 7 +- .../StructuredListInput.svelte.d.ts | 9 +- .../StructuredListRow.svelte.d.ts | 7 +- .../StructuredListSkeleton.svelte.d.ts | 7 +- types/Tabs/Tab.svelte.d.ts | 7 +- types/Tabs/TabContent.svelte.d.ts | 9 +- types/Tabs/Tabs.svelte.d.ts | 7 +- types/Tabs/TabsSkeleton.svelte.d.ts | 7 +- types/Tag/Tag.svelte.d.ts | 10 +- types/Tag/TagSkeleton.svelte.d.ts | 7 +- types/TextArea/TextArea.svelte.d.ts | 7 +- types/TextArea/TextAreaSkeleton.svelte.d.ts | 7 +- types/TextInput/PasswordInput.svelte.d.ts | 7 +- types/TextInput/TextInput.svelte.d.ts | 7 +- types/TextInput/TextInputSkeleton.svelte.d.ts | 7 +- types/Theme/Theme.svelte.d.ts | 1 - types/Tile/ClickableTile.svelte.d.ts | 8 +- types/Tile/ExpandableTile.svelte.d.ts | 7 +- types/Tile/RadioTile.svelte.d.ts | 7 +- types/Tile/SelectableTile.svelte.d.ts | 7 +- types/Tile/Tile.svelte.d.ts | 7 +- types/Tile/TileGroup.svelte.d.ts | 7 +- types/TimePicker/TimePicker.svelte.d.ts | 7 +- types/TimePicker/TimePickerSelect.svelte.d.ts | 7 +- types/Toggle/Toggle.svelte.d.ts | 7 +- types/Toggle/ToggleSkeleton.svelte.d.ts | 7 +- types/Tooltip/Tooltip.svelte.d.ts | 9 +- types/Tooltip/TooltipFooter.svelte.d.ts | 3 +- .../TooltipDefinition.svelte.d.ts | 7 +- types/TooltipIcon/TooltipIcon.svelte.d.ts | 9 +- types/TreeView/TreeView.svelte.d.ts | 9 +- types/Truncate/Truncate.svelte.d.ts | 9 +- types/UIShell/Content.svelte.d.ts | 9 +- types/UIShell/Header.svelte.d.ts | 11 +- types/UIShell/HeaderAction.svelte.d.ts | 11 +- types/UIShell/HeaderActionLink.svelte.d.ts | 11 +- types/UIShell/HeaderGlobalAction.svelte.d.ts | 9 +- types/UIShell/HeaderNav.svelte.d.ts | 9 +- types/UIShell/HeaderNavItem.svelte.d.ts | 7 +- types/UIShell/HeaderNavMenu.svelte.d.ts | 7 +- types/UIShell/HeaderPanelDivider.svelte.d.ts | 3 +- types/UIShell/HeaderPanelLink.svelte.d.ts | 7 +- types/UIShell/HeaderPanelLinks.svelte.d.ts | 3 +- types/UIShell/HeaderSearch.svelte.d.ts | 7 +- types/UIShell/HeaderUtilities.svelte.d.ts | 3 +- types/UIShell/SideNav.svelte.d.ts | 7 +- types/UIShell/SideNavDivider.svelte.d.ts | 9 +- types/UIShell/SideNavItems.svelte.d.ts | 3 +- types/UIShell/SideNavLink.svelte.d.ts | 9 +- types/UIShell/SideNavMenu.svelte.d.ts | 9 +- types/UIShell/SideNavMenuItem.svelte.d.ts | 7 +- types/UIShell/SkipToContent.svelte.d.ts | 7 +- types/UnorderedList/UnorderedList.svelte.d.ts | 7 +- yarn.lock | 144 ++++++++-- 192 files changed, 941 insertions(+), 712 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 6a61ff97a3..bef2e0ca40 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; | size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | | expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | | isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | | iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | | tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | | tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | @@ -841,18 +841,18 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | -| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | -| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | -| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | -| indented | No | let | Yes | boolean | false | Set to `true` to indent the label | -| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | -| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | -| labelText | No | let | No | string | "" | Specify the label text
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) | -| shortcutText | No | let | No | string | "" | Specify the shortcut text
Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | +| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | +| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | +| indented | No | let | Yes | boolean | false | Set to `true` to indent the label | +| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | +| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | +| labelText | No | let | No | string | "" | Specify the label text
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) | +| shortcutText | No | let | No | string | "" | Specify the shortcut text
Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | ### Slots @@ -1568,19 +1568,19 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | -| href | No | let | No | string | undefined | Specify the `href` attribute | -| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | -| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | -| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | -| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | -| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | -| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | +| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | +| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | +| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | ### Slots @@ -1605,8 +1605,8 @@ None. | :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | -| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | +| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | | text | No | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | | transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | | preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | @@ -1632,12 +1632,12 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state | -| href | No | let | No | string | undefined | Specify the `href` attribute | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots @@ -1653,11 +1653,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| isActive | No | let | No | boolean | false | Set to `true` to use the active variant | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| isActive | No | let | No | boolean | false | Set to `true` to use the active variant | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots @@ -1958,7 +1958,7 @@ None. | size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link | | href | No | let | No | string | undefined | Specify the href value | | inline | No | let | No | boolean | false | Set to `true` to use the inline variant | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` | | disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox | | visited | No | let | No | boolean | false | Set to `true` to allow visited styles | @@ -2211,29 +2211,29 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the modal | -| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal | -| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | -| alert | No | let | No | boolean | false | Set to `true` to enable alert mode | -| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant | -| modalHeading | No | let | No | string | undefined | Specify the modal heading | -| modalLabel | No | let | No | string | undefined | Specify the modal label | -| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal | -| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | -| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements | -| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content | -| primaryButtonText | No | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | -| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | -| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" | -| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | -| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | -| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | -| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the modal | +| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | +| alert | No | let | No | boolean | false | Set to `true` to enable alert mode | +| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant | +| modalHeading | No | let | No | string | undefined | Specify the modal heading | +| modalLabel | No | let | No | string | undefined | Specify the modal label | +| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal | +| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | +| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content | +| primaryButtonText | No | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" | +| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2282,16 +2282,16 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | -| primaryButtonText | No | let | No | string | "" | Specify the primary button text | -| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | -| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | -| primaryClass | No | let | No | string | undefined | Specify a class for the primary button | -| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | -| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | -| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button | -| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | +| primaryButtonText | No | let | No | string | "" | Specify the primary button text | +| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | No | let | No | string | undefined | Specify a class for the primary button | +| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots @@ -2431,12 +2431,12 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------- | ----------------------------------- | -| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| title | No | let | No | string | undefined | Specify the title of the icon | -| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- | +| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| title | No | let | No | string | undefined | Specify the title of the icon | +| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon | ### Slots @@ -2598,20 +2598,20 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | -| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | -| open | No | let | Yes | boolean | false | Set to `true` to open the menu | -| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | -| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | -| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | -| iconClass | No | let | No | string | undefined | Specify the icon class | -| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | +| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | +| open | No | let | Yes | boolean | false | Set to `true` to open the menu | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | +| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | +| iconClass | No | let | No | string | undefined | Specify the icon class | +| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3089,24 +3089,24 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | -| value | No | let | Yes | any | "" | Specify the value of the search input | -| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | No | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | -| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | No | let | No | string | "" | Specify the label text | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | +| value | No | let | Yes | any | "" | Specify the value of the search input | +| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | +| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | No | let | No | string | "" | Specify the label text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -3349,13 +3349,13 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | No | let | No | boolean | false | Set to `true` to select the current link | -| href | No | let | No | string | undefined | Specify the `href` attribute | -| text | No | let | No | string | undefined | Specify the text | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | No | let | No | boolean | false | Set to `true` to select the current link | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| text | No | let | No | string | undefined | Specify the text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots @@ -3374,12 +3374,12 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| text | No | let | No | string | undefined | Specify the text | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| text | No | let | No | string | undefined | Specify the text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots @@ -3991,7 +3991,7 @@ None. | interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` | | skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | | title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots @@ -4553,7 +4553,7 @@ None. | align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | | hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | | iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | | iconName | No | let | No | string | "" | Specify the icon name attribute | | tabindex | No | let | No | string | "0" | Set the button tabindex | @@ -4636,7 +4636,7 @@ None. | :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | tooltipText | No | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | | disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon | | align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | @@ -4669,7 +4669,7 @@ export type TreeNodeId = string | number; export interface TreeNode { id: TreeNodeId; text: any; - icon?: typeof import("svelte").SvelteComponent; + icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; children?: TreeNode[]; } diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index d6ab73f479..6675e6550b 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -501,7 +501,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -2117,7 +2117,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render\nIcon is rendered to the left of the label text", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -4811,7 +4811,7 @@ "name": "iconMenu", "kind": "let", "description": "Specify the icon to render for the closed state.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -4822,7 +4822,7 @@ "name": "iconClose", "kind": "let", "description": "Specify the icon to render for the opened state.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -4871,7 +4871,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render when the action panel is closed.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -4882,7 +4882,7 @@ "name": "closeIcon", "kind": "let", "description": "Specify the icon to render when the action panel is open.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -4998,7 +4998,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5051,7 +5051,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5755,7 +5755,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render\n`inline` must be `false`", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -6574,7 +6574,7 @@ "name": "primaryButtonIcon", "kind": "let", "description": "Specify the primary button icon", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -6765,7 +6765,7 @@ "name": "primaryButtonIcon", "kind": "let", "description": "Specify the primary button icon", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7461,7 +7461,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -8029,7 +8029,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -10013,7 +10013,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -10739,7 +10739,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -10809,7 +10809,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12287,7 +12287,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -14039,7 +14039,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render for the tooltip button.\nDefault to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -14321,7 +14321,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -14585,9 +14585,9 @@ "ts": "type TreeNodeId = string | number" }, { - "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }", + "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }", "name": "TreeNode", - "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }" + "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }" } ], "rest_props": { "type": "Element", "name": "ul" } diff --git a/package.json b/package.json index a75e34e20c..0382f9e0ef 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@tsconfig/svelte": "^4.0.1", "autoprefixer": "^10.4.8", "carbon-components": "10.57.0", - "carbon-icons-svelte": "^11.2.0", + "carbon-icons-svelte": "^12.1.0", "postcss": "^8.4.16", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.7.0", @@ -39,8 +39,8 @@ "sass": "^1.49.11", "standard-version": "^9.5.0", "sveld": "^0.18.1", - "svelte": "^3.58.0", - "svelte-check": "^3.4.3", + "svelte": "^4.1.0", + "svelte-check": "^3.4.6", "typescript": "^4.7.4" }, "standard-version": { diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 727e71f995..37e054e9aa 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -27,7 +27,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = undefined; diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte index bb6ca7d497..a90be39742 100644 --- a/src/ComposedModal/ModalFooter.svelte +++ b/src/ComposedModal/ModalFooter.svelte @@ -8,7 +8,7 @@ /** * Specify the primary button icon - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let primaryButtonIcon = undefined; diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte index 4a5f9800f3..8baf43bcfb 100644 --- a/src/ContextMenu/ContextMenuOption.svelte +++ b/src/ContextMenu/ContextMenuOption.svelte @@ -14,7 +14,7 @@ /** * Specify the icon to render * Icon is rendered to the left of the label text - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = undefined; diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte index 9a5f60eec6..fc680c3e20 100644 --- a/src/Link/Link.svelte +++ b/src/Link/Link.svelte @@ -19,7 +19,7 @@ /** * Specify the icon to render * `inline` must be `false` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = undefined; diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index a75e6aa670..4ce6d848d1 100644 --- a/src/Modal/Modal.svelte +++ b/src/Modal/Modal.svelte @@ -57,7 +57,7 @@ /** * Specify the primary button icon - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let primaryButtonIcon = undefined; diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte index b25647b77b..308563bfce 100644 --- a/src/Notification/NotificationButton.svelte +++ b/src/Notification/NotificationButton.svelte @@ -7,7 +7,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = Close; diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index ac7eb8969d..fbc331fd56 100644 --- a/src/OverflowMenu/OverflowMenu.svelte +++ b/src/OverflowMenu/OverflowMenu.svelte @@ -33,7 +33,7 @@ /** * Specify the icon to render. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = OverflowMenuVertical; diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index a396ada47d..0f62df8843 100644 --- a/src/Search/Search.svelte +++ b/src/Search/Search.svelte @@ -56,7 +56,7 @@ /** * Specify the icon to render. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = IconSearch; diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index 3e6fc0a387..84ebbc5e5a 100644 --- a/src/Tag/Tag.svelte +++ b/src/Tag/Tag.svelte @@ -27,7 +27,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = undefined; diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index 596f73ab7b..0b1aa7e9db 100644 --- a/src/Tooltip/Tooltip.svelte +++ b/src/Tooltip/Tooltip.svelte @@ -31,7 +31,7 @@ /** * Specify the icon to render for the tooltip button. * Default to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = Information; diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index bfcc1170f0..8eac1faa5b 100644 --- a/src/TooltipIcon/TooltipIcon.svelte +++ b/src/TooltipIcon/TooltipIcon.svelte @@ -7,7 +7,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent} */ export let icon = undefined; diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte index c1aaaa4276..fa25b8a0f7 100644 --- a/src/TreeView/TreeView.svelte +++ b/src/TreeView/TreeView.svelte @@ -1,7 +1,7 @@