diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6a61ff97a3..bef2e0ca40 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -379,7 +379,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button |
| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon |
| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons |
| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
@@ -841,18 +841,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element |
-| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` |
-| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant |
-| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text |
-| indented | No | let | Yes | boolean | false | Set to `true` to indent the label |
-| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option |
-| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state |
-| labelText | No | let | No | string | "" | Specify the label text
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
-| shortcutText | No | let | No | string | "" | Specify the shortcut text
Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element |
+| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` |
+| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant |
+| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text |
+| indented | No | let | Yes | boolean | false | Set to `true` to indent the label |
+| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option |
+| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state |
+| labelText | No | let | No | string | "" | Specify the label text
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) |
+| shortcutText | No | let | No | string | "" | Specify the shortcut text
Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
### Slots
@@ -1568,19 +1568,19 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
-| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
-| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 |
-| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` |
-| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| company | No | let | No | string | undefined | Specify the company name.
Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) |
+| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) |
+| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu |
+| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 |
+| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` |
+| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` |
### Slots
@@ -1605,8 +1605,8 @@ None.
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` |
-| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` |
+| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` |
| text | No | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition |
| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
@@ -1632,12 +1632,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -1653,11 +1653,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -1958,7 +1958,7 @@ None.
| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
| href | No | let | No | string | undefined | Specify the href value |
| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` |
| disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox |
| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
@@ -2211,29 +2211,29 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| alert | No | let | No | boolean | false | Set to `true` to enable alert mode |
-| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant |
-| modalHeading | No | let | No | string | undefined | Specify the modal heading |
-| modalLabel | No | let | No | string | undefined | Specify the modal label |
-| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal |
-| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
-| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" |
-| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
-| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
-| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
+| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| alert | No | let | No | boolean | false | Set to `true` to enable alert mode |
+| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant |
+| modalHeading | No | let | No | string | undefined | Specify the modal heading |
+| modalLabel | No | let | No | string | undefined | Specify the modal label |
+| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal |
+| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
+| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
+| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
+| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
+| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
+| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" |
+| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
+| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
+| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2282,16 +2282,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
-| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
-| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
+| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
+| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
+| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
+| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
### Slots
@@ -2431,12 +2431,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------- | ----------------------------------- |
-| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
-| title | No | let | No | string | undefined | Specify the title of the icon |
-| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- |
+| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| title | No | let | No | string | undefined | Specify the title of the icon |
+| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
### Slots
@@ -2598,20 +2598,20 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
-| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
-| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
-| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` |
-| open | No | let | Yes | boolean | false | Set to `true` to open the menu |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
-| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
-| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
-| iconClass | No | let | No | string | undefined | Specify the icon class |
-| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
+| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
+| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
+| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` |
+| open | No | let | Yes | boolean | false | Set to `true` to open the menu |
+| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
+| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
+| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
+| iconClass | No | let | No | string | undefined | Specify the icon class |
+| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
@@ -3089,24 +3089,24 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
-| value | No | let | Yes | any | "" | Specify the value of the search input |
-| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
-| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
-| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
-| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
-| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
-| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
-| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
+| value | No | let | Yes | any | "" | Specify the value of the search input |
+| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
+| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
+| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
+| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
+| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
+| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
+| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
+| labelText | No | let | No | string | "" | Specify the label text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
@@ -3349,13 +3349,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -3374,12 +3374,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -3991,7 +3991,7 @@ None.
| interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
| title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
@@ -4553,7 +4553,7 @@ None.
| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` |
| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button |
| iconName | No | let | No | string | "" | Specify the icon name attribute |
| tabindex | No | let | No | string | "0" | Set the button tabindex |
@@ -4636,7 +4636,7 @@ None.
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| tooltipText | No | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon |
| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
@@ -4669,7 +4669,7 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
- icon?: typeof import("svelte").SvelteComponent;
+ icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean;
children?: TreeNode[];
}
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d6ab73f479..6675e6550b 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -501,7 +501,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -2117,7 +2117,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render\nIcon is rendered to the left of the label text",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -4811,7 +4811,7 @@
"name": "iconMenu",
"kind": "let",
"description": "Specify the icon to render for the closed state.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -4822,7 +4822,7 @@
"name": "iconClose",
"kind": "let",
"description": "Specify the icon to render for the opened state.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -4871,7 +4871,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render when the action panel is closed.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -4882,7 +4882,7 @@
"name": "closeIcon",
"kind": "let",
"description": "Specify the icon to render when the action panel is open.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -4998,7 +4998,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -5051,7 +5051,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -5755,7 +5755,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render\n`inline` must be `false`",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -6574,7 +6574,7 @@
"name": "primaryButtonIcon",
"kind": "let",
"description": "Specify the primary button icon",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -6765,7 +6765,7 @@
"name": "primaryButtonIcon",
"kind": "let",
"description": "Specify the primary button icon",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -7461,7 +7461,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8029,7 +8029,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10013,7 +10013,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render.\nDefaults to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10739,7 +10739,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10809,7 +10809,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -12287,7 +12287,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -14039,7 +14039,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render for the tooltip button.\nDefault to ``",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -14321,7 +14321,7 @@
"name": "icon",
"kind": "let",
"description": "Specify the icon to render",
- "type": "typeof import(\"svelte\").SvelteComponent",
+ "type": "typeof import(\"svelte\").SvelteComponent",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -14585,9 +14585,9 @@
"ts": "type TreeNodeId = string | number"
},
{
- "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
+ "type": "{ id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }",
"name": "TreeNode",
- "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
+ "ts": "interface TreeNode { id: TreeNodeId; text: any; icon?: typeof import(\"svelte\").SvelteComponent; disabled?: boolean; children?: TreeNode[]; }"
}
],
"rest_props": { "type": "Element", "name": "ul" }
diff --git a/package.json b/package.json
index a75e34e20c..0382f9e0ef 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
"@tsconfig/svelte": "^4.0.1",
"autoprefixer": "^10.4.8",
"carbon-components": "10.57.0",
- "carbon-icons-svelte": "^11.2.0",
+ "carbon-icons-svelte": "^12.1.0",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
@@ -39,8 +39,8 @@
"sass": "^1.49.11",
"standard-version": "^9.5.0",
"sveld": "^0.18.1",
- "svelte": "^3.58.0",
- "svelte-check": "^3.4.3",
+ "svelte": "^4.1.0",
+ "svelte-check": "^3.4.6",
"typescript": "^4.7.4"
},
"standard-version": {
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index 727e71f995..37e054e9aa 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -27,7 +27,7 @@
/**
* Specify the icon to render
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
diff --git a/src/ComposedModal/ModalFooter.svelte b/src/ComposedModal/ModalFooter.svelte
index bb6ca7d497..a90be39742 100644
--- a/src/ComposedModal/ModalFooter.svelte
+++ b/src/ComposedModal/ModalFooter.svelte
@@ -8,7 +8,7 @@
/**
* Specify the primary button icon
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let primaryButtonIcon = undefined;
diff --git a/src/ContextMenu/ContextMenuOption.svelte b/src/ContextMenu/ContextMenuOption.svelte
index 4a5f9800f3..8baf43bcfb 100644
--- a/src/ContextMenu/ContextMenuOption.svelte
+++ b/src/ContextMenu/ContextMenuOption.svelte
@@ -14,7 +14,7 @@
/**
* Specify the icon to render
* Icon is rendered to the left of the label text
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
diff --git a/src/Link/Link.svelte b/src/Link/Link.svelte
index 9a5f60eec6..fc680c3e20 100644
--- a/src/Link/Link.svelte
+++ b/src/Link/Link.svelte
@@ -19,7 +19,7 @@
/**
* Specify the icon to render
* `inline` must be `false`
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index a75e6aa670..4ce6d848d1 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -57,7 +57,7 @@
/**
* Specify the primary button icon
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let primaryButtonIcon = undefined;
diff --git a/src/Notification/NotificationButton.svelte b/src/Notification/NotificationButton.svelte
index b25647b77b..308563bfce 100644
--- a/src/Notification/NotificationButton.svelte
+++ b/src/Notification/NotificationButton.svelte
@@ -7,7 +7,7 @@
/**
* Specify the icon to render
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Close;
diff --git a/src/OverflowMenu/OverflowMenu.svelte b/src/OverflowMenu/OverflowMenu.svelte
index ac7eb8969d..fbc331fd56 100644
--- a/src/OverflowMenu/OverflowMenu.svelte
+++ b/src/OverflowMenu/OverflowMenu.svelte
@@ -33,7 +33,7 @@
/**
* Specify the icon to render.
* Defaults to ``
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = OverflowMenuVertical;
diff --git a/src/Search/Search.svelte b/src/Search/Search.svelte
index a396ada47d..0f62df8843 100644
--- a/src/Search/Search.svelte
+++ b/src/Search/Search.svelte
@@ -56,7 +56,7 @@
/**
* Specify the icon to render.
* Defaults to ``
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = IconSearch;
diff --git a/src/Tag/Tag.svelte b/src/Tag/Tag.svelte
index 3e6fc0a387..84ebbc5e5a 100644
--- a/src/Tag/Tag.svelte
+++ b/src/Tag/Tag.svelte
@@ -27,7 +27,7 @@
/**
* Specify the icon to render
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
diff --git a/src/Tooltip/Tooltip.svelte b/src/Tooltip/Tooltip.svelte
index 596f73ab7b..0b1aa7e9db 100644
--- a/src/Tooltip/Tooltip.svelte
+++ b/src/Tooltip/Tooltip.svelte
@@ -31,7 +31,7 @@
/**
* Specify the icon to render for the tooltip button.
* Default to ``
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = Information;
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index bfcc1170f0..8eac1faa5b 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -7,7 +7,7 @@
/**
* Specify the icon to render
- * @type {typeof import("svelte").SvelteComponent}
+ * @type {typeof import("svelte").SvelteComponent}
*/
export let icon = undefined;
diff --git a/src/TreeView/TreeView.svelte b/src/TreeView/TreeView.svelte
index c1aaaa4276..fa25b8a0f7 100644
--- a/src/TreeView/TreeView.svelte
+++ b/src/TreeView/TreeView.svelte
@@ -1,7 +1,7 @@