mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(types): loosen icon prop type to allow any Svelte component #806 (#853)

Browse source 
* feat(types): loosen type for Carbon icons #806

* Add closeIcon option and remove stopPropagation on:click in HeaderAction (#840)

* Remove stopPropagation on:click

Remove stopPropagation on:click helps when you have more then one acction to switch between actions tabs

* fix bug for default icon

* add closeIcon attribute to HeaderAction

* feat(types): loosen type for Carbon icons #806

* chore: update TreeView, HeaderAction icon types

Co-authored-by: Daniel Miedzik <daniel.miedzik@gmail.com>
This commit is contained in:
Eric Liu 2021-10-15 16:40:23 -07:00 • committed by GitHub
commit b21600c9d6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
39 changed files with 169 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

214
COMPONENT_INDEX.md
View file

@ -388,7 +388,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | <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 | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon | | iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
| tooltipAlignment | <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 />`hasIconOnly` must be set to `true` | | tooltipAlignment | <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 />`hasIconOnly` must be set to `true` |
| tooltipPosition | <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 | | tooltipPosition | <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 |
@ -839,18 +839,18 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | | :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
| selectable | <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` | | selectable | <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 | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant | | selected | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text | | icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text |
| indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label | | indented | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option | | kind | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
| labelText | <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;) | | labelText | <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 | <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;) | | shortcutText | <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 | <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 | | id | <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 ### Slots
@ -1566,19 +1566,19 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav | | isSideNavOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the side nav |
| expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default | | expandedByDefault | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header | | uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name | | company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| platformName | <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;) | | platformName | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu | | persistentHamburgerMenu | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | <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 | | expansionBreakpoint | <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 | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` | | iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20` |
| iconClose | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` | | iconClose | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20` |
### Slots ### Slots
@ -1608,14 +1608,14 @@ export interface HeaderActionSlideTransition {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | | :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel | | isOpen | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| closeIcon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the close icon from `carbon-icons-svelte` to render | | closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the close icon from `carbon-icons-svelte` to render |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition | | transition | <code>let</code> | No | <code>false &#124; HeaderActionSlideTransition</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition |
### Slots ### Slots
@ -1635,12 +1635,12 @@ export interface HeaderActionSlideTransition {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | | :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state | | linkIsActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active state |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots
@ -1674,11 +1674,11 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- | | :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant | | isActive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the active variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
### Slots ### Slots
@ -1883,10 +1883,10 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | | :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| render | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | render | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
### Slots ### Slots
@ -2018,7 +2018,7 @@ None.
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link | | size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value | | href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant | | inline | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the checkbox |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles | | visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
@ -2478,12 +2478,12 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- | | :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
| notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification | | notificationType | <code>let</code> | No | <code>"toast" &#124; "inline"</code> | <code>"toast"</code> | Set the type of notification |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon | | title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Close icon"</code> | Specify the ARIA label for the icon |
### Slots ### Slots
@ -2662,20 +2662,20 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element | | menuRef | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | <code>let</code> | Yes | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu | | size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Specify the size of the overflow menu |
| direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button | | flipped | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to flip the menu relative to the button |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class | | menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class | | iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon class |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon | | iconDescription | <code>let</code> | No | <code>string</code> | <code>"Open and close list of options"</code> | Specify the ARIA label for the icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
### Slots ### Slots
@ -3145,26 +3145,26 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | | :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input | | value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the value of the search input |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- | | small | <code>let</code> | No | <code>boolean</code> | <code>false</code> | -- |
| size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input | | size | <code>let</code> | No | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code> | Specify the size of the search input |
| searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element | | searchClass | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the class name passed to the outer div element |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the search input |
| expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant | | expandable | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the expandable variant |
| type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input | | type | <code>let</code> | No | <code>string</code> | <code>"text"</code> | Specify the `type` attribute of the search input |
| placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input | | placeholder | <code>let</code> | No | <code>string</code> | <code>"Search..."</code> | Specify the `placeholder` attribute of the search input |
| autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute | | autocomplete | <code>let</code> | No | <code>"on" &#124; "off"</code> | <code>"off"</code> | Specify the `autocomplete` attribute |
| autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text | | closeButtonLabelText | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots ### Slots
@ -3403,13 +3403,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | | :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link | | isSelected | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to select the current link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute | | href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots
@ -3425,12 +3425,12 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | | :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML button element |
| expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state | | expanded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text | | text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
### Slots ### Slots
@ -4039,7 +4039,7 @@ None.
| interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` | | interactive | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a `button` element instead of a `div` |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag | | title | <code>let</code> | No | <code>string</code> | <code>"Clear filter"</code> | Set the title for the close button in a filterable tag |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag |
### Slots ### Slots
@ -4635,7 +4635,7 @@ None.
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon | | align | <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 | <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 | | direction | <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 | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
| iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button | | iconDescription | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute | | iconName | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex | | tabindex | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
@ -4713,7 +4713,7 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot | | tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon | <code>let</code> | No | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | -- | Specify the icon from `carbon-icons-svelte` to render | | icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon from `carbon-icons-svelte` to render |
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon | | disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tooltip icon |
| align | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon | | align | <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 | <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 | | direction | <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 |
@ -4746,7 +4746,7 @@ export type TreeNodeId = string | number;
export interface TreeNode { export interface TreeNode {
id: TreeNodeId; id: TreeNodeId;
text: string; text: string;
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean; disabled?: boolean;
expanded?: boolean; expanded?: boolean;
} }

40
docs/src/COMPONENT_API.json
View file

@ -490,7 +490,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -1943,7 +1943,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text", "description": "Specify the icon from `carbon-icons-svelte` to render\nIcon is rendered to the left of the label text",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4323,7 +4323,7 @@
"name": "iconMenu", "name": "iconMenu",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`", "description": "Specify the icon from `carbon-icons-svelte` to render for the closed state\nDefaults to `Menu20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4333,7 +4333,7 @@
"name": "iconClose", "name": "iconClose",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`", "description": "Specify the icon from `carbon-icons-svelte` to render for the opened state\nDefaults to `Close20`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4373,7 +4373,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4383,7 +4383,7 @@
"name": "closeIcon", "name": "closeIcon",
"kind": "let", "kind": "let",
"description": "Specify the close icon from `carbon-icons-svelte` to render", "description": "Specify the close icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4473,7 +4473,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4543,7 +4543,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon to render", "description": "Specify the icon to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -4871,7 +4871,7 @@
"name": "render", "name": "render",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -5244,7 +5244,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`", "description": "Specify the icon from `carbon-icons-svelte` to render\n`inline` must be `false`",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -6710,7 +6710,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -7294,7 +7294,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -9066,7 +9066,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -9726,7 +9726,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -9778,7 +9778,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -11112,7 +11112,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -12761,7 +12761,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)", "description": "Specify the icon from `carbon-icons-svelte` to render for the tooltip button\nIcon size must be 16px (e.g., `Add16`, `Task16`)",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -13007,7 +13007,7 @@
"name": "icon", "name": "icon",
"kind": "let", "kind": "let",
"description": "Specify the icon from `carbon-icons-svelte` to render", "description": "Specify the icon from `carbon-icons-svelte` to render",
"type": "typeof import(\"carbon-icons-svelte\").CarbonIcon", "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"constant": false, "constant": false,
@ -13252,9 +13252,9 @@
"ts": "type TreeNodeId = string | number" "ts": "type TreeNodeId = string | number"
}, },
{ {
"type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }", "type": "{ id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }",
"name": "TreeNode", "name": "TreeNode",
"ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"carbon-icons-svelte\").CarbonIcon; disabled?: boolean; expanded?: boolean; }" "ts": "interface TreeNode { id: TreeNodeId; text: string; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; expanded?: boolean; }"
} }
], ],
"rest_props": { "type": "Element", "name": "ul" } "rest_props": { "type": "Element", "name": "ul" }

2
src/Button/Button.svelte
View file

@ -33,7 +33,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/ContextMenu/ContextMenuOption.svelte
View file

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

2
src/Icon/Icon.svelte
View file

@ -12,7 +12,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let render = undefined; export let render = undefined;

2
src/Link/Link.svelte
View file

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

2
src/Notification/NotificationButton.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Close20; export let icon = Close20;

2
src/OverflowMenu/OverflowMenu.svelte
View file

@ -32,7 +32,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = OverflowMenuVertical16; export let icon = OverflowMenuVertical16;

2
src/Search/Search.svelte
View file

@ -60,7 +60,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Search16; export let icon = Search16;

2
src/Tag/Tag.svelte
View file

@ -27,7 +27,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/Tooltip/Tooltip.svelte
View file

@ -26,7 +26,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`) * Icon size must be 16px (e.g., `Add16`, `Task16`)
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = Information16; export let icon = Information16;

2
src/TooltipIcon/TooltipIcon.svelte
View file

@ -7,7 +7,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/TreeView/TreeView.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* @typedef {string | number} TreeNodeId * @typedef {string | number} TreeNodeId
* @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("carbon-icons-svelte").CarbonIcon; disabled?: boolean; expanded?: boolean; }} TreeNode * @typedef {{ id: TreeNodeId; text: string; icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; expanded?: boolean; }} TreeNode
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} select * @event {TreeNode & { expanded: boolean; leaf: boolean; }} select
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle * @event {TreeNode & { expanded: boolean; leaf: boolean; }} toggle
* @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus * @event {TreeNode & { expanded: boolean; leaf: boolean; }} focus

2
src/TreeView/TreeViewNode.svelte
View file

@ -45,7 +45,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/TreeView/TreeViewNodeList.svelte
View file

@ -16,7 +16,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

4
src/UIShell/GlobalHeader/Header.svelte
View file

@ -49,14 +49,14 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the closed state * Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20` * Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconMenu = Menu20; export let iconMenu = Menu20;
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the opened state * Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20` * Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconClose = Close20; export let iconClose = Close20;

4
src/UIShell/GlobalHeader/HeaderAction.svelte
View file

@ -8,13 +8,13 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = AppSwitcher20; export let icon = AppSwitcher20;
/** /**
* Specify the close icon from `carbon-icons-svelte` to render * Specify the close icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let closeIcon = Close20; export let closeIcon = Close20;

2
src/UIShell/GlobalHeader/HeaderActionLink.svelte
View file

@ -10,7 +10,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/UIShell/HeaderGlobalAction.svelte
View file

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

4
src/UIShell/SideNav/HamburgerMenu.svelte
View file

@ -11,14 +11,14 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the closed state * Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20` * Defaults to `Menu20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconMenu = Menu20; export let iconMenu = Menu20;
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the opened state * Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20` * Defaults to `Close20`
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let iconClose = Close20; export let iconClose = Close20;

2
src/UIShell/SideNav/SideNavLink.svelte
View file

@ -16,7 +16,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

2
src/UIShell/SideNav/SideNavMenu.svelte
View file

@ -10,7 +10,7 @@
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* @type {typeof import("carbon-icons-svelte").CarbonIcon} * @type {typeof import("svelte").SvelteComponent}
*/ */
export let icon = undefined; export let icon = undefined;

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

@ -47,7 +47,7 @@ export interface ButtonProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the ARIA label for the button icon * Specify the ARIA label for the button icon

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

@ -25,7 +25,7 @@ export interface ContextMenuOptionProps
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* Icon is rendered to the left of the label text * Icon is rendered to the left of the label text
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the label text * Specify the label text

2
types/Icon/Icon.d.ts vendored
View file

@ -8,7 +8,7 @@ export interface IconProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
render?: typeof import("carbon-icons-svelte").CarbonIcon; render?: typeof import("svelte").SvelteComponent;
/** /**
* Set to `true` to display the skeleton state * Set to `true` to display the skeleton state

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

@ -23,7 +23,7 @@ export interface LinkProps
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
* `inline` must be `false` * `inline` must be `false`
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Set to `true` to disable the checkbox * Set to `true` to disable the checkbox

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

@ -12,7 +12,7 @@ export interface NotificationButtonProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the title of the icon * Specify the title of the icon

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

@ -40,7 +40,7 @@ export interface OverflowMenuProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon class * Specify the icon class

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

@ -94,7 +94,7 @@ export interface SearchProps {
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Set an id for the input element * Set an id for the input element

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

@ -58,7 +58,7 @@ export interface TagProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Set an id for the filterable tag * Set an id for the filterable tag

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

@ -31,7 +31,7 @@ export interface TooltipProps
* Specify the icon from `carbon-icons-svelte` to render for the tooltip button * Specify the icon from `carbon-icons-svelte` to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`) * Icon size must be 16px (e.g., `Add16`, `Task16`)
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the ARIA label for the tooltip button * Specify the ARIA label for the tooltip button

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

@ -13,7 +13,7 @@ export interface TooltipIconProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Set to `true` to disable the tooltip icon * Set to `true` to disable the tooltip icon

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

@ -6,7 +6,7 @@ export type TreeNodeId = string | number;
export interface TreeNode { export interface TreeNode {
id: TreeNodeId; id: TreeNodeId;
text: string; text: string;
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean; disabled?: boolean;
expanded?: boolean; expanded?: boolean;
} }

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

@ -65,13 +65,13 @@ export interface HeaderProps
* Specify the icon from `carbon-icons-svelte` to render for the closed state * Specify the icon from `carbon-icons-svelte` to render for the closed state
* Defaults to `Menu20` * Defaults to `Menu20`
*/ */
iconMenu?: typeof import("carbon-icons-svelte").CarbonIcon; iconMenu?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon from `carbon-icons-svelte` to render for the opened state * Specify the icon from `carbon-icons-svelte` to render for the opened state
* Defaults to `Close20` * Defaults to `Close20`
*/ */
iconClose?: typeof import("carbon-icons-svelte").CarbonIcon; iconClose?: typeof import("svelte").SvelteComponent;
} }
export default class Header extends SvelteComponentTyped< export default class Header extends SvelteComponentTyped<

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

@ -18,12 +18,12 @@ export interface HeaderActionProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the close icon from `carbon-icons-svelte` to render * Specify the close icon from `carbon-icons-svelte` to render
*/ */
closeIcon?: typeof import("carbon-icons-svelte").CarbonIcon; closeIcon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the text * Specify the text

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

@ -17,7 +17,7 @@ export interface HeaderActionLinkProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Obtain a reference to the HTML anchor element * Obtain a reference to the HTML anchor element

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

@ -12,7 +12,7 @@ export interface HeaderGlobalActionProps
/** /**
* Specify the icon to render * Specify the icon to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Obtain a reference to the HTML button element * Obtain a reference to the HTML button element

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

@ -22,7 +22,7 @@ export interface SideNavLinkProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Obtain a reference to the HTML anchor element * Obtain a reference to the HTML anchor element

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

@ -17,7 +17,7 @@ export interface SideNavMenuProps
/** /**
* Specify the icon from `carbon-icons-svelte` to render * Specify the icon from `carbon-icons-svelte` to render
*/ */
icon?: typeof import("carbon-icons-svelte").CarbonIcon; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Obtain a reference to the HTML button element * Obtain a reference to the HTML button element