mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(types): loosen icon prop type to any

Browse source
This commit is contained in:
Eric Liu 2025-02-02 19:33:19 -08:00
commit 21c3de527d
42 changed files with 202 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

272
COMPONENT_INDEX.md
View file

@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`) |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
| tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
| tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | No | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `&lt;span slot="labelText"&gt;...&lt;/span&gt;`) |
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `&lt;span slot="shortcutText"&gt;...&lt;/span&gt;`) |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />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 | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | No | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `&lt;span slot="labelText"&gt;...&lt;/span&gt;`) |
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `&lt;span slot="shortcutText"&gt;...&lt;/span&gt;`) |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />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 | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
| iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) |
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
| iconMenu | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` |
| iconClose | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` |
### Slots
@ -1619,8 +1619,8 @@ None.
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` |
| closeIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., `&lt;div slot="text"&gt;...&lt;/div&gt;`) |
| transition | No | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
@ -1646,12 +1646,12 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -1669,11 +1669,11 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -1966,15 +1966,15 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | <code>undefined</code> | Specify the size of the link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the href value |
| inline | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render<br />`inline` must be `false` |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the modal |
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the top-level HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the modal |
| size | No | <code>let</code> | No | <code>"xs" &#124; "sm" &#124; "lg"</code> | <code>undefined</code> | Set the size of the modal |
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
| alert | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable alert mode |
| passiveModal | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the passive variant |
| modalHeading | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
| modalLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
| modalAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the modal |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close the modal"</code> | Specify the ARIA label for the close icon |
| hasForm | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements |
| hasScrollingContent | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
| shouldSubmitOnEnter | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| selectorPrimaryFocus | No | <code>let</code> | No | <code>string</code> | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal |
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the modal from closing when clicking outside |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | 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 | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the primary button icon |
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the primary button text |
| primaryButtonIcon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the primary button icon |
| primaryButtonDisabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the primary button |
| primaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the primary button |
| secondaryButtonText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the secondary button text |
| secondaryButtons | No | <code>let</code> | No | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code> | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| secondaryClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify a class for the secondary button |
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | 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 | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
| notificationType | No | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
| title | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the title of the icon |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| menuRef | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | No | <code>let</code> | Yes | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the menu options class |
| iconClass | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the icon class |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | No | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
| size | No | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| placeholder | No | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | No | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | 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 | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -3392,12 +3392,12 @@ None.
### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -4011,7 +4011,7 @@ None.
| interactive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| title | No | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
### Slots
@ -4575,7 +4575,7 @@ None.
| align | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
@ -4658,7 +4658,7 @@ None.
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render |
| icon | No | <code>let</code> | No | <code>any</code> | <code>undefined</code> | Specify the icon to render |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the icon |
@ -4691,7 +4691,7 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
disabled?: boolean;
nodes?: TreeNode[];
}

42
docs/src/COMPONENT_API.json
View file

@ -624,7 +624,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render\nAlternatively, use the named slot \"icon\" (e.g., `<Icon slot=\"icon\" size=\"{20}\" />`)",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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<any>",
"type": "any",
"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 `<Menu size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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 `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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 `<Switcher size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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 `<Close size={20} />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -9712,7 +9712,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render.\nDefaults to `<OverflowMenuVertical />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -12032,7 +12032,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render.\nDefaults to `<Search />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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<any>",
"type": "any",
"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 `<Information />`",
"type": "typeof import(\"svelte\").SvelteComponent<any>",
"type": "any",
"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<any>",
"type": "any",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@ -17956,9 +17956,9 @@
"ts": "type TreeNodeId = string | number;\n"
},
{
"type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent<any>; disabled?: boolean; nodes?: TreeNode[]; }",
"type": "{ id: TreeNodeId; text: any; icon?: any; disabled?: boolean; nodes?: TreeNode[]; }",
"name": "TreeNode",
"ts": "interface TreeNode {\n id: TreeNodeId;\n text: any;\n icon?: typeof import(\"svelte\").SvelteComponent<any>;\n disabled?: boolean;\n nodes?: TreeNode[];\n}\n"
"ts": "interface TreeNode {\n id: TreeNodeId;\n text: any;\n icon?: any;\n disabled?: boolean;\n nodes?: TreeNode[];\n}\n"
}
],
"generics": null,

2
src/Button/Button.svelte
View file

@ -29,7 +29,7 @@
* Specify the icon to render
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
*
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/ComposedModal/ModalFooter.svelte
View file

@ -8,7 +8,7 @@
/**
* Specify the primary button icon
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let primaryButtonIcon = undefined;

2
src/ContextMenu/ContextMenuOption.svelte
View file

@ -14,7 +14,7 @@
/**
* Specify the icon to render
* Icon is rendered to the left of the label text
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/Link/Link.svelte
View file

@ -17,7 +17,7 @@
/**
* Specify the icon to render
* `inline` must be `false`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/Modal/Modal.svelte
View file

@ -57,7 +57,7 @@
/**
* Specify the primary button icon
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let primaryButtonIcon = undefined;

2
src/Notification/NotificationButton.svelte
View file

@ -7,7 +7,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = Close;

2
src/OverflowMenu/OverflowMenu.svelte
View file

@ -33,7 +33,7 @@
/**
* Specify the icon to render.
* Defaults to `<OverflowMenuVertical />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = OverflowMenuVertical;

2
src/Search/Search.svelte
View file

@ -56,7 +56,7 @@
/**
* Specify the icon to render.
* Defaults to `<Search />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = IconSearch;

2
src/Tag/Tag.svelte
View file

@ -27,7 +27,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/Tooltip/Tooltip.svelte
View file

@ -31,7 +31,7 @@
/**
* Specify the icon to render for the tooltip button.
* Default to `<Information />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = Information;

2
src/TooltipIcon/TooltipIcon.svelte
View file

@ -7,7 +7,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/TreeView/TreeView.svelte
View file

@ -29,7 +29,7 @@
<script>
/**
* @typedef {string | number} TreeNodeId
* @typedef {{ id: TreeNodeId; text: any; icon?: typeof import("svelte").SvelteComponent<any>; disabled?: boolean; nodes?: TreeNode[]; }} TreeNode
* @typedef {{ id: TreeNodeId; text: any; icon?: any; disabled?: boolean; nodes?: TreeNode[]; }} TreeNode
* @slot {{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } }}
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle

2
src/TreeView/TreeViewNode.svelte
View file

@ -46,7 +46,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/TreeView/TreeViewNodeList.svelte
View file

@ -16,7 +16,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

4
src/UIShell/HamburgerMenu.svelte
View file

@ -11,14 +11,14 @@
/**
* Specify the icon to render for the closed state.
* Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let iconMenu = Menu;
/**
* Specify the icon to render for the opened state.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let iconClose = Close;

4
src/UIShell/Header.svelte
View file

@ -51,14 +51,14 @@
/**
* Specify the icon to render for the closed state.
* Defaults to `<Menu size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let iconMenu = Menu;
/**
* Specify the icon to render for the opened state.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let iconClose = Close;

4
src/UIShell/HeaderAction.svelte
View file

@ -10,14 +10,14 @@
/**
* Specify the icon to render when the action panel is closed.
* Defaults to `<Switcher size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = Switcher;
/**
* Specify the icon to render when the action panel is open.
* Defaults to `<Close size={20} />`
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let closeIcon = Close;

2
src/UIShell/HeaderActionLink.svelte
View file

@ -10,7 +10,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/UIShell/HeaderGlobalAction.svelte
View file

@ -8,7 +8,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/UIShell/SideNavLink.svelte
View file

@ -16,7 +16,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

2
src/UIShell/SideNavMenu.svelte
View file

@ -10,7 +10,7 @@
/**
* Specify the icon to render
* @type {typeof import("svelte").SvelteComponent<any>}
* @type {any}
*/
export let icon = undefined;

1
tsconfig.json
View file

@ -13,6 +13,7 @@
"noUnusedParameters": true,
"strict": true,
"skipLibCheck": true,
"skipDefaultLibCheck": true,
"paths": {
"carbon-components-svelte": ["./types"],
"carbon-components-svelte/*": ["./types/*"]

2
types/Button/Button.svelte.d.ts vendored
View file

@ -44,7 +44,7 @@ type $Props = {
* Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`)
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the ARIA label for the button icon

2
types/ComposedModal/ModalFooter.svelte.d.ts vendored
View file

@ -14,7 +14,7 @@ type $Props = {
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent<any>;
primaryButtonIcon?: any;
/**
* Set to `true` to disable the primary button

2
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -27,7 +27,7 @@ type $Props = {
* Icon is rendered to the left of the label text
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the label text.

2
types/Link/Link.svelte.d.ts vendored
View file

@ -27,7 +27,7 @@ type $Props = {
* `inline` must be `false`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Set to `true` to disable the checkbox

2
types/Modal/Modal.svelte.d.ts vendored
View file

@ -86,7 +86,7 @@ type $Props = {
* Specify the primary button icon
* @default undefined
*/
primaryButtonIcon?: typeof import("svelte").SvelteComponent<any>;
primaryButtonIcon?: any;
/**
* Set to `true` for the "submit" and "click:button--primary" events

2
types/Notification/NotificationButton.svelte.d.ts vendored
View file

@ -14,7 +14,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the title of the icon

2
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -45,7 +45,7 @@ type $Props = {
* Defaults to `<OverflowMenuVertical />`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the icon class

2
types/Search/Search.svelte.d.ts vendored
View file

@ -87,7 +87,7 @@ type $Props = {
* Defaults to `<Search />`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Set an id for the input element

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -61,7 +61,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Set an id for the filterable tag

2
types/Tooltip/Tooltip.svelte.d.ts vendored
View file

@ -33,7 +33,7 @@ type $Props = {
* Default to `<Information />`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the ARIA label for the tooltip button

2
types/TooltipIcon/TooltipIcon.svelte.d.ts vendored
View file

@ -15,7 +15,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Set to `true` to disable the tooltip icon

2
types/TreeView/TreeView.svelte.d.ts vendored
View file

@ -6,7 +6,7 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
disabled?: boolean;
nodes?: TreeNode[];
}

4
types/UIShell/Header.svelte.d.ts vendored
View file

@ -72,14 +72,14 @@ type $Props = {
* Defaults to `<Menu size={20} />`
* @default undefined
*/
iconMenu?: typeof import("svelte").SvelteComponent<any>;
iconMenu?: any;
/**
* Specify the icon to render for the opened state.
* Defaults to `<Close size={20} />`
* @default undefined
*/
iconClose?: typeof import("svelte").SvelteComponent<any>;
iconClose?: any;
[key: `data-${string}`]: any;
};

4
types/UIShell/HeaderAction.svelte.d.ts vendored
View file

@ -15,14 +15,14 @@ type $Props = {
* Defaults to `<Switcher size={20} />`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Specify the icon to render when the action panel is open.
* Defaults to `<Close size={20} />`
* @default undefined
*/
closeIcon?: typeof import("svelte").SvelteComponent<any>;
closeIcon?: any;
/**
* Specify the text.

2
types/UIShell/HeaderActionLink.svelte.d.ts vendored
View file

@ -20,7 +20,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Obtain a reference to the HTML anchor element

2
types/UIShell/HeaderGlobalAction.svelte.d.ts vendored
View file

@ -12,7 +12,7 @@ export type HeaderGlobalActionProps = ButtonProps & {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Obtain a reference to the HTML button element

2
types/UIShell/SideNavLink.svelte.d.ts vendored
View file

@ -26,7 +26,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Obtain a reference to the HTML anchor element

2
types/UIShell/SideNavMenu.svelte.d.ts vendored
View file

@ -20,7 +20,7 @@ type $Props = {
* Specify the icon to render
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent<any>;
icon?: any;
/**
* Obtain a reference to the HTML button element