From e07c74d62e008bd866b6c2a01d8f1af2de038bc0 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 2 Feb 2025 19:33:19 -0800 Subject: [PATCH] fix(types): extend `icon` prop type to support `Component` --- COMPONENT_INDEX.md | 330 +++++++++--------- docs/src/COMPONENT_API.json | 38 +- 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/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 +- types/Button/Button.svelte.d.ts | 4 +- types/ComposedModal/ModalFooter.svelte.d.ts | 4 +- .../ContextMenu/ContextMenuOption.svelte.d.ts | 4 +- types/Link/Link.svelte.d.ts | 4 +- types/Modal/Modal.svelte.d.ts | 4 +- .../NotificationButton.svelte.d.ts | 4 +- types/OverflowMenu/OverflowMenu.svelte.d.ts | 4 +- types/Search/Search.svelte.d.ts | 4 +- types/Tag/Tag.svelte.d.ts | 4 +- types/Tooltip/Tooltip.svelte.d.ts | 4 +- types/TooltipIcon/TooltipIcon.svelte.d.ts | 4 +- types/UIShell/Header.svelte.d.ts | 8 +- types/UIShell/HeaderAction.svelte.d.ts | 8 +- types/UIShell/HeaderActionLink.svelte.d.ts | 4 +- types/UIShell/HeaderGlobalAction.svelte.d.ts | 4 +- types/UIShell/SideNavLink.svelte.d.ts | 4 +- types/UIShell/SideNavMenu.svelte.d.ts | 4 +- 39 files changed, 264 insertions(+), 226 deletions(-) diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index cebad2053e..845056f06b 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
Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) | +| icon | No | let | No | typeof import("svelte").SvelteComponent | import("svelte").Component | undefined | Specify the icon to render
Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) | | 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 | @@ -847,18 +847,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 | import("svelte").Component | 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 @@ -1582,19 +1582,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 | import("svelte").Component | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | +| iconClose | No | let | No | typeof import("svelte").SvelteComponent | import("svelte").Component | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | ### Slots @@ -1615,15 +1615,15 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| 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} />` | -| 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 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | +| 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 | import("svelte").Component | 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 | import("svelte").Component | 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 | ### Slots @@ -1646,12 +1646,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 | import("svelte").Component | undefined | Specify the icon to render | ### Slots @@ -1669,11 +1669,11 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | No | let | Yes | 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 | 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 | import("svelte").Component | undefined | Specify the icon to render | ### Slots @@ -1966,15 +1966,15 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element | -| 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` | -| 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 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element | +| 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 | import("svelte").Component | 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 | ### Slots @@ -2224,29 +2224,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 | import("svelte").Component | 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 @@ -2295,16 +2295,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 | import("svelte").Component | 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 @@ -2444,12 +2444,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 | import("svelte").Component | 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 @@ -2611,20 +2611,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 | import("svelte").Component | 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 @@ -3105,24 +3105,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 | import("svelte").Component | 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 @@ -3367,13 +3367,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 | import("svelte").Component | undefined | Specify the icon to render | ### Slots @@ -3392,12 +3392,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 | import("svelte").Component | undefined | Specify the icon to render | ### Slots @@ -4011,7 +4011,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 | import("svelte").Component | undefined | Specify the icon to render | | id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots @@ -4566,22 +4566,22 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | -| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | -| 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 />` | -| 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 | -| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | No | let | No | string | "" | Set the tooltip button text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | +| 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 | import("svelte").Component | 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 | +| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | No | let | No | string | "" | Set the tooltip button text | ### Slots @@ -4654,15 +4654,15 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | -| 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 | -| 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 | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | +| 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 | import("svelte").Component | 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 | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index c6ceb31d19..6cae824ab4 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -624,7 +624,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., ``)", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -2570,7 +2570,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5771,7 +5771,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5782,7 +5782,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5849,7 +5849,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5860,7 +5860,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -5996,7 +5996,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -6059,7 +6059,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7007,7 +7007,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -7987,7 +7987,7 @@ "name": "primaryButtonIcon", "kind": "let", "description": "Specify the primary button icon", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -8228,7 +8228,7 @@ "name": "primaryButtonIcon", "kind": "let", "description": "Specify the primary button icon", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9000,7 +9000,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9712,7 +9712,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12032,7 +12032,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render.\nDefaults to ``", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -12974,7 +12974,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -13054,7 +13054,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -15061,7 +15061,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -17297,7 +17297,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 | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -17646,7 +17646,7 @@ "name": "icon", "kind": "let", "description": "Specify the icon to render", - "type": "typeof import(\"svelte\").SvelteComponent", + "type": "typeof import(\"svelte\").SvelteComponent | import(\"svelte\").Component", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index c4858687ac..8ffc500a9a 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -29,7 +29,7 @@ * Specify the icon to render * Alternatively, use the named slot "icon" (e.g., ``) * - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte index b51936c1f2..2986415818 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 | import("svelte").Component} */ export let primaryButtonIcon = undefined; diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte index f827727707..1dbdca9ee4 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 | import("svelte").Component} */ export let icon = undefined; diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte index 4bdf386c41..0f01953195 100644 --- a/src/Link/Link.svelte +++ b/src/Link/Link.svelte @@ -17,7 +17,7 @@ /** * Specify the icon to render * `inline` must be `false` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte index e41bcce8e8..1717804ec4 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 | import("svelte").Component} */ export let primaryButtonIcon = undefined; diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte index 4d937a1dc6..e3b9938c19 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 | import("svelte").Component} */ export let icon = Close; diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte index 49a822711a..128767b616 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 | import("svelte").Component} */ export let icon = OverflowMenuVertical; diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte index aebdfd3f45..e520c2372b 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 | import("svelte").Component} */ export let icon = IconSearch; diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte index b75bda6ae8..870ee0180b 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 | import("svelte").Component} */ export let icon = undefined; diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte index b1f4a42df7..81787c43b2 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 | import("svelte").Component} */ export let icon = Information; diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte index 719da9c076..2c3b2c4535 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 | import("svelte").Component} */ export let icon = undefined; diff --git a/src/TreeView/TreeViewNode.svelte b/src/TreeView/TreeViewNode.svelte index f6aa55b418..0c43189036 100644 --- a/src/TreeView/TreeViewNode.svelte +++ b/src/TreeView/TreeViewNode.svelte @@ -46,7 +46,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/TreeView/TreeViewNodeList.svelte b/src/TreeView/TreeViewNodeList.svelte index 9b4edef6c2..13e98e134a 100644 --- a/src/TreeView/TreeViewNodeList.svelte +++ b/src/TreeView/TreeViewNodeList.svelte @@ -16,7 +16,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/UIShell/HamburgerMenu.svelte b/src/UIShell/HamburgerMenu.svelte index 671c80c4ae..b95133e3b2 100644 --- a/src/UIShell/HamburgerMenu.svelte +++ b/src/UIShell/HamburgerMenu.svelte @@ -11,14 +11,14 @@ /** * Specify the icon to render for the closed state. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let iconMenu = Menu; /** * Specify the icon to render for the opened state. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let iconClose = Close; diff --git a/src/UIShell/Header.svelte b/src/UIShell/Header.svelte index bee1677386..3aa8f8b459 100644 --- a/src/UIShell/Header.svelte +++ b/src/UIShell/Header.svelte @@ -51,14 +51,14 @@ /** * Specify the icon to render for the closed state. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let iconMenu = Menu; /** * Specify the icon to render for the opened state. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let iconClose = Close; diff --git a/src/UIShell/HeaderAction.svelte b/src/UIShell/HeaderAction.svelte index b6b49676bc..c27c1cef43 100644 --- a/src/UIShell/HeaderAction.svelte +++ b/src/UIShell/HeaderAction.svelte @@ -10,14 +10,14 @@ /** * Specify the icon to render when the action panel is closed. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = Switcher; /** * Specify the icon to render when the action panel is open. * Defaults to `` - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let closeIcon = Close; diff --git a/src/UIShell/HeaderActionLink.svelte b/src/UIShell/HeaderActionLink.svelte index b83e69df16..717d53a571 100644 --- a/src/UIShell/HeaderActionLink.svelte +++ b/src/UIShell/HeaderActionLink.svelte @@ -10,7 +10,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/UIShell/HeaderGlobalAction.svelte b/src/UIShell/HeaderGlobalAction.svelte index 2cf674f28f..41ec828f0e 100644 --- a/src/UIShell/HeaderGlobalAction.svelte +++ b/src/UIShell/HeaderGlobalAction.svelte @@ -8,7 +8,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/UIShell/SideNavLink.svelte b/src/UIShell/SideNavLink.svelte index c7df3b4589..2634e7d366 100644 --- a/src/UIShell/SideNavLink.svelte +++ b/src/UIShell/SideNavLink.svelte @@ -16,7 +16,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/src/UIShell/SideNavMenu.svelte b/src/UIShell/SideNavMenu.svelte index 92dc24b93e..316449e9ad 100644 --- a/src/UIShell/SideNavMenu.svelte +++ b/src/UIShell/SideNavMenu.svelte @@ -10,7 +10,7 @@ /** * Specify the icon to render - * @type {typeof import("svelte").SvelteComponent} + * @type {typeof import("svelte").SvelteComponent | import("svelte").Component} */ export let icon = undefined; diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts index 4fcd840395..9763713985 100644 --- a/types/Button/Button.svelte.d.ts +++ b/types/Button/Button.svelte.d.ts @@ -44,7 +44,9 @@ type $Props = { * Alternatively, use the named slot "icon" (e.g., ``) * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the ARIA label for the button icon diff --git a/types/ComposedModal/ModalFooter.svelte.d.ts b/types/ComposedModal/ModalFooter.svelte.d.ts index 3b60ed95ec..5851cb9a61 100644 --- a/types/ComposedModal/ModalFooter.svelte.d.ts +++ b/types/ComposedModal/ModalFooter.svelte.d.ts @@ -14,7 +14,9 @@ type $Props = { * Specify the primary button icon * @default undefined */ - primaryButtonIcon?: typeof import("svelte").SvelteComponent; + primaryButtonIcon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set to `true` to disable the primary button diff --git a/types/ContextMenu/ContextMenuOption.svelte.d.ts b/types/ContextMenu/ContextMenuOption.svelte.d.ts index 69913d8fe6..38fd4f3b2b 100644 --- a/types/ContextMenu/ContextMenuOption.svelte.d.ts +++ b/types/ContextMenu/ContextMenuOption.svelte.d.ts @@ -27,7 +27,9 @@ type $Props = { * Icon is rendered to the left of the label text * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the label text. diff --git a/types/Link/Link.svelte.d.ts b/types/Link/Link.svelte.d.ts index 87f6668c00..de2f3803ae 100644 --- a/types/Link/Link.svelte.d.ts +++ b/types/Link/Link.svelte.d.ts @@ -27,7 +27,9 @@ type $Props = { * `inline` must be `false` * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set to `true` to disable the checkbox diff --git a/types/Modal/Modal.svelte.d.ts b/types/Modal/Modal.svelte.d.ts index 620d50fa14..a4852b51d4 100644 --- a/types/Modal/Modal.svelte.d.ts +++ b/types/Modal/Modal.svelte.d.ts @@ -86,7 +86,9 @@ type $Props = { * Specify the primary button icon * @default undefined */ - primaryButtonIcon?: typeof import("svelte").SvelteComponent; + primaryButtonIcon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set to `true` for the "submit" and "click:button--primary" events diff --git a/types/Notification/NotificationButton.svelte.d.ts b/types/Notification/NotificationButton.svelte.d.ts index e19f4aeb02..db8f9447de 100644 --- a/types/Notification/NotificationButton.svelte.d.ts +++ b/types/Notification/NotificationButton.svelte.d.ts @@ -14,7 +14,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the title of the icon diff --git a/types/OverflowMenu/OverflowMenu.svelte.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts index 7a6426b8d8..eda356e011 100644 --- a/types/OverflowMenu/OverflowMenu.svelte.d.ts +++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts @@ -45,7 +45,9 @@ type $Props = { * Defaults to `` * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the icon class diff --git a/types/Search/Search.svelte.d.ts b/types/Search/Search.svelte.d.ts index 8ed90611d5..19548b13ca 100644 --- a/types/Search/Search.svelte.d.ts +++ b/types/Search/Search.svelte.d.ts @@ -87,7 +87,9 @@ type $Props = { * Defaults to `` * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set an id for the input element diff --git a/types/Tag/Tag.svelte.d.ts b/types/Tag/Tag.svelte.d.ts index 615f5b303a..d3fa4e7c6b 100644 --- a/types/Tag/Tag.svelte.d.ts +++ b/types/Tag/Tag.svelte.d.ts @@ -61,7 +61,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set an id for the filterable tag diff --git a/types/Tooltip/Tooltip.svelte.d.ts b/types/Tooltip/Tooltip.svelte.d.ts index 3a68e7dca0..2469442636 100644 --- a/types/Tooltip/Tooltip.svelte.d.ts +++ b/types/Tooltip/Tooltip.svelte.d.ts @@ -33,7 +33,9 @@ type $Props = { * Default to `` * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the ARIA label for the tooltip button diff --git a/types/TooltipIcon/TooltipIcon.svelte.d.ts b/types/TooltipIcon/TooltipIcon.svelte.d.ts index 2788b83977..cc81f78211 100644 --- a/types/TooltipIcon/TooltipIcon.svelte.d.ts +++ b/types/TooltipIcon/TooltipIcon.svelte.d.ts @@ -15,7 +15,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Set to `true` to disable the tooltip icon diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts index bc527005c0..34c8d8310e 100644 --- a/types/UIShell/Header.svelte.d.ts +++ b/types/UIShell/Header.svelte.d.ts @@ -72,14 +72,18 @@ type $Props = { * Defaults to `` * @default undefined */ - iconMenu?: typeof import("svelte").SvelteComponent; + iconMenu?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the icon to render for the opened state. * Defaults to `` * @default undefined */ - iconClose?: typeof import("svelte").SvelteComponent; + iconClose?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; [key: `data-${string}`]: any; }; diff --git a/types/UIShell/HeaderAction.svelte.d.ts b/types/UIShell/HeaderAction.svelte.d.ts index 7ef308faa6..67a1f71a98 100644 --- a/types/UIShell/HeaderAction.svelte.d.ts +++ b/types/UIShell/HeaderAction.svelte.d.ts @@ -15,14 +15,18 @@ type $Props = { * Defaults to `` * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the icon to render when the action panel is open. * Defaults to `` * @default undefined */ - closeIcon?: typeof import("svelte").SvelteComponent; + closeIcon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Specify the text. diff --git a/types/UIShell/HeaderActionLink.svelte.d.ts b/types/UIShell/HeaderActionLink.svelte.d.ts index 1d1031e6b0..82f3c8f701 100644 --- a/types/UIShell/HeaderActionLink.svelte.d.ts +++ b/types/UIShell/HeaderActionLink.svelte.d.ts @@ -20,7 +20,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Obtain a reference to the HTML anchor element diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts index b483f09c75..b9e61d4757 100644 --- a/types/UIShell/HeaderGlobalAction.svelte.d.ts +++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts @@ -12,7 +12,9 @@ export type HeaderGlobalActionProps = ButtonProps & { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Obtain a reference to the HTML button element diff --git a/types/UIShell/SideNavLink.svelte.d.ts b/types/UIShell/SideNavLink.svelte.d.ts index 3230a91096..e93f4cc6c4 100644 --- a/types/UIShell/SideNavLink.svelte.d.ts +++ b/types/UIShell/SideNavLink.svelte.d.ts @@ -26,7 +26,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Obtain a reference to the HTML anchor element diff --git a/types/UIShell/SideNavMenu.svelte.d.ts b/types/UIShell/SideNavMenu.svelte.d.ts index df3a300add..ea8360d4fe 100644 --- a/types/UIShell/SideNavMenu.svelte.d.ts +++ b/types/UIShell/SideNavMenu.svelte.d.ts @@ -20,7 +20,9 @@ type $Props = { * Specify the icon to render * @default undefined */ - icon?: typeof import("svelte").SvelteComponent; + icon?: + | typeof import("svelte").SvelteComponent + | import("svelte").Component; /** * Obtain a reference to the HTML button element