let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
-| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | No |
let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
-| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | -| sortDirection | No |
let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
-| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by |
-| headers | No | let | No | ReadonlyArray | [] | Specify the data table headers |
-| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | -| size | No |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
-| title | No | let | No | string | "" | Specify the title of the data table |
-| description | No | let | No | string | "" | Specify the description of the data table |
-| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles |
-| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
-| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
-| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
-| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
-| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
-| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
-| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
-| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
-| page | No | let | No | number | 0 | Set to `number` to set current page |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
+| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No |
let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
+| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No |
let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
+| sortKey | No | let | Yes | DataTableKey|
| null | Specify the header key to sort by |
+| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers |
+| rows | No | let | No | ReadonlyArray|
| [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | +| size | No |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
+| title | No | let | No | string | "" | Specify the title of the data table |
+| description | No | let | No | string | "" | Specify the description of the data table |
+| inputName | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify a name attribute for the input elementsin a selectable data table (radio or checkbox).
When the table is inside a form, this name will
be included in the form data on submit. | +| zebra | No |
let | No | boolean | false | Set to `true` to use zebra styles |
+| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
+| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
+| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
+| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
+| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
+| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
+| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
+| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
+| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
+| page | No | let | No | number | 0 | Set to `number` to set current page |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
-| -- | Yes | -- | -- |
-| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value) : cell.value} |
-| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
-| description | No | -- | {description} |
-| expanded-row | No | { row: DataTableRow; } | -- |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| cell | No | { row: Row; cell: DataTableCell; rowIndex: number; cellIndex: number; }
| {cell.display ? cell.display(cell.value, row) : cell.value} |
+| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
+| description | No | -- | {description} |
+| expanded-row | No | { row: Row; } | -- |
+| title | No | -- | {title} |
### Events
-| Event name | Type | Detail |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } |
-| click:header--expand | dispatched | { expanded: boolean; } |
-| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
-| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
-| click:row | dispatched | DataTableRow |
-| mouseenter:row | dispatched | DataTableRow |
-| mouseleave:row | dispatched | DataTableRow |
-| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } |
-| click:row--select | dispatched | { selected: boolean; row: DataTableRow; } |
-| click:cell | dispatched | DataTableCell |
+| Event name | Type | Detail |
+| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
+| click | dispatched | { header?: DataTableHeader; row?: Row; cell?: DataTableCell; }
|
+| click:header--expand | dispatched | { expanded: boolean; } |
+| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }
|
+| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
+| click:row | dispatched | Row |
+| mouseenter:row | dispatched | Row |
+| mouseleave:row | dispatched | Row |
+| click:row--expand | dispatched | { expanded: boolean; row: Row; } |
+| click:row--select | dispatched | { selected: boolean; row: Row; } |
+| click:cell | dispatched | DataTableCell|
|
## `DataTableSkeleton`
@@ -1249,24 +1261,28 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------- |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
-| labelDescription | No | let | No | string | "" | Specify the label description |
-| labelTitle | No | let | No | string | "" | Specify the label title |
-| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
-| buttonLabel | No | let | No | string | "" | Specify the button label |
-| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
-| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
+| labelTitle | No | let | No | string | "" | Specify the label title.Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No |
let | No | string | "" | Specify the label description.Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No |
let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
+| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
+| buttonLabel | No | let | No | string | "" | Specify the button label |
+| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
+| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :--------------- | :------ | :---- | :------------------------------ |
+| labelDescription | No | -- | {labelDescription} |
+| labelTitle | No | -- | {labelTitle} |
### Events
@@ -1285,20 +1301,21 @@ 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 |
-| labelText | No | let | Yes | string | "Add file" | Specify the label text |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| disableLabelChanges | No | let | No | boolean | false | Set to `true` to disable label changes |
-| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
-| role | No | let | No | string | "button" | Specify the label role |
-| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| labelText | No | let | Yes | string | "Add file" | Specify the label text |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| disableLabelChanges | No | let | No | boolean | false | Set to `true` to disable label changes |
+| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
+| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
+| role | No | let | No | string | "button" | Specify the label role |
+| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -1567,27 +1584,28 @@ 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 |
-| platformName | No | let | No | string | "" | Specify the platform nameAlternatively, 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 hidden1056 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 | any | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | +| iconClose | No |
let | No | any | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | ### Slots -| Slot name | Default | Props | Fallback | -| :-------------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| platform | No | -- |
{platformName} |
-| skip-to-content | No | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------------- | :------ | :---- | :--------------------------- |
+| -- | Yes | -- | -- |
+| company | No | -- | {company} |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
### Events
@@ -1599,23 +1617,26 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | -| closeIcon | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | -| text | No |
let | No | string | undefined | Specify the textAlternatively, 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 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No |
let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
+| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | +| closeIcon | No |
let | No | any | 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 displayed next to the icon.Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| iconDescription | No |
let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayedif either the `text` prop or a named slot="text" is used | +| tooltipAlignment | No |
let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.Only applies when `iconDescription` is provided | +| transition | No |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | +| preventCloseOnClickOutside | No |
let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
-| text | No | -- | {#if text}<span>{text}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
+| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} |
### Events
@@ -1629,38 +1650,38 @@ 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 | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------ |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
### Events
-None.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
## `HeaderGlobalAction`
### 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 | 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 | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> |
+None.
### Events
@@ -1697,7 +1718,9 @@ None.
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | {text} |
### Events
@@ -1819,9 +1842,9 @@ export interface HeaderSearchResult {
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description={true}
>– {result.description}</span
>{/if} |
### Events
@@ -1887,12 +1910,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | ----------------------------------------------------------------- |
-| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
-| description | No | let | No | string | undefined | Set the loading description |
-| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the loading icon |
-| successDelay | No | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
+| description | No | let | No | string | undefined | Set the loading description |
+| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.Defaults to the `status` prop for the "error" and "finished" states | +| successDelay | No |
let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
@@ -1912,16 +1935,17 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | No | let | No | string | "alert" | Set the `role` attribute |
-| title | No | let | No | string | "" | Specify the title text |
-| subtitle | No | let | No | string | "" | Specify the subtitle text |
-| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
-| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | No | let | No | string | "alert" | Set the `role` attribute |
+| title | No | let | No | string | "" | Specify the title text |
+| subtitle | No | let | No | string | "" | Specify the subtitle text |
+| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
+| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
+| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
### Slots
@@ -1946,22 +1970,22 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
-| href | No | let | No | string | undefined | Specify the href value |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render`inline` must be `false` | -| disabled | No |
let | No | boolean | false | Set to `true` to disable the checkbox |
-| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element |
+| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
+| href | No | let | No | string | undefined | Specify the href value |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| icon | No | let | No | any | undefined | Specify the icon to render`inline` must be `false` | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the checkbox |
+| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -2134,9 +2158,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| clear | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| clear | dispatched | KeyboardEvent | MouseEvent |
## `ListItem`
@@ -2163,13 +2187,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
-| small | No | let | No | boolean | false | Set to `true` to use the small variant |
-| active | No | let | No | boolean | true | Set to `false` to disable the active state |
-| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay |
-| description | No | let | No | string | "Active loading indicator" | Specify the label description |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
+| small | No | let | No | boolean | false | Set to `true` to use the small variant |
+| active | No | let | No | boolean | true | Set to `false` to disable the active state |
+| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay |
+| description | No | let | No | string | "loading" | Specify the description to describe the loading state |
### Slots
@@ -2205,29 +2228,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" eventsto 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 modalsupersedes `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 | any | undefined | Specify the primary button icon |
+| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" eventsto 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 modalsupersedes `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
@@ -2276,16 +2299,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 modalsupersedes `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 | any | 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 modalsupersedes `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
@@ -2343,49 +2366,50 @@ export interface MultiSelectItem {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
-| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
-| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
-| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
-| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| value | No | let | Yes | string | "" | Specify the multiselect value |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
-| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items |
-| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input |
-| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
-| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
-| filterable | No | let | No | boolean | false | Set to `true` to filter items |
-| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | -| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
-| locale | No | let | No | string | "en" | Specify the locale |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | -| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | -| titleText | No |
let | No | string | "" | Specify the title text |
-| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the list box label |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the select |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
+| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
+| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
+| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | No | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
+| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
+| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
+| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
+| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | No | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | No | let | No | (item: MultiSelectItem, value: string) => boolean | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | +| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
+| locale | No | let | No | string | "en" | Specify the locale |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | +| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No |
let | No | string | "" | Specify the title text |
+| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the select |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
+| titleText | No | -- | {titleText} |
### Events
@@ -2395,6 +2419,7 @@ export interface MultiSelectItem {
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
+| input | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
@@ -2424,12 +2449,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 | any | 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
@@ -2448,11 +2473,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
-| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- |
+| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
+| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| iconDescription | Yes | let | No | -- | undefined | Specify the ARIA label for the icon |
### Slots
@@ -2591,60 +2616,60 @@ 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 | any | 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
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component
this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------- |
-| close | dispatched | { index: number; text: string; } |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------------------- |
+| close | dispatched | null | { index: number; text: string; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `OverflowMenuItem`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
-| text | No | let | No | string | "Provide text" | Specify the item textAlternatively, use the default slot for a custom element | -| href | No |
let | No | string | "" | Specify the `href` attribute if the item is a link |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the item |
-| hasDivider | No | let | No | boolean | false | Set to `true` to include a divider |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
-| 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 | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
+| primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
+| text | No | let | No | string | "Provide text" | Specify the item text.Alternatively, use the default slot | +| href | No |
let | No | string | "" | Specify the `href` attribute if the item is a link |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the item |
+| hasDivider | No | let | No | boolean | false | Set to `true` to include a divider |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content={true}>
{text}
</div> |
### Events
@@ -2657,24 +2682,25 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
-| page | No | let | Yes | number | 1 | Specify the current page index |
-| totalItems | No | let | No | number | 0 | Specify the total number of items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
-| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
-| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text |
-| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text |
-| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
-| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
-| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
-| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
-| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
-| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
-| 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 |
+| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| totalItems | No | let | No | number | 0 | Specify the total number of items |
+| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect therendering performance of this component since its value
is used to calculate the number of pages in the native
select dropdown. This value creates a small window of
pages rendered around the current page. By default,
a maximum of 1000 select items are rendered. | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the pagination |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
+| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item text |
+| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item range text |
+| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
+| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
+| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
+| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
+| pageText | No | let | No | (page: number) => string | (page) => \`page ${page.toLocaleString()}\` | Override the page text |
+| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\` | Override the page range text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2682,24 +2708,26 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------------------- | :--------- | :----------------------------------------------- |
-| update | dispatched | { pageSize: number; page: number; } |
-| click:button--previous | dispatched | { page: number; } |
-| click:button--next | dispatched | { page: number; } |
+| Event name | Type | Detail |
+| :--------------------- | :--------- | :------------------------------------------------ |
+| change | dispatched | { page?: number; pageSize?: number } |
+| click:button--previous | dispatched | { page: number; } |
+| click:button--next | dispatched | { page: number; } |
+| update | dispatched | { pageSize: number; page: number; } |
## `PaginationNav`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | ----------------------------------------- |
-| page | No | let | Yes | number | 0 | Specify the current page index |
-| total | No | let | No | number | 10 | Specify the total number of pages |
-| shown | No | let | No | number | 10 | Specify the total number of pages to show |
-| loop | No | let | No | boolean | false | Set to `true` to loop the navigation |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| total | No | let | No | number | 10 | Specify the total number of pages |
+| shown | No | let | No | number | 10 | Specify the total number of pages to show |
+| loop | No | let | No | boolean | false | Set to `true` to loop the navigation |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "outside" | "inside" | "bottom" | Set the position of the tooltip relative to the pagination buttons. |
### Slots
@@ -2804,9 +2832,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :---------------- |
-| click:outside | dispatched | null |
+| Event name | Type | Detail |
+| :------------ | :--------- | :------------------------------------ |
+| click:outside | dispatched | { target: HTMLElement; } |
## `ProgressBar`
@@ -2817,6 +2845,7 @@ None.
| value | No | let | No | number | undefined | Specify the current value |
| max | No | let | No | number | 100 | Specify the maximum value |
| kind | No | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar |
+| status | No | let | No | "active" | "finished" | "error" | "active" | Specify the status |
| size | No | let | No | "sm" | "md" | "md" | Specify the size |
| labelText | No | let | No | string | "" | Specify the label text |
| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
@@ -2899,9 +2928,9 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
-| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> |
### Events
@@ -2921,14 +2950,14 @@ None.
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| checked | No | let | Yes | boolean | false | Set to `true` to check the radio button |
-| value | No | let | No | string | "" | Specify the value of the radio button |
+| value | No | let | No | string | number | "" | Specify the value of the radio button |
| disabled | No | let | No | boolean | false | Set to `true` to disable the radio button |
| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
| labelText | No | let | No | string | "" | Specify the label text |
| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the radio button input |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button input |
### Slots
@@ -2940,21 +2969,25 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------- |
-| selected | No | let | Yes | string | undefined | Set the selected radio button value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
-| legendText | No | let | No | string | "" | Specify the legend text |
-| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend |
-| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
-| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
-| id | No | let | No | string | undefined | Set an id for the container div element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
+| selected | No | let | Yes | string | number | undefined | Set the selected radio button value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
+| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
+| legendText | No | let | No | string | "" | Specify the legend text |
+| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend |
+| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
+| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
+| id | No | let | No | string | undefined | Set an id for the container div element |
### Slots
@@ -2965,13 +2998,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| change | dispatched | string | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `RadioButtonSkeleton`
@@ -3001,11 +3034,12 @@ None.
| checked | No | let | Yes | boolean | false | Set to `true` to check the tile |
| 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 tile |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
| value | No | let | No | string | "" | Specify the value of the radio input |
| tabindex | No | let | No | string | "0" | Specify the tabindex |
| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | "" | Specify a name attribute for the input |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio tile input |
### Slots
@@ -3038,10 +3072,10 @@ export interface RecursiveListNode {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
-| children | No | let | No | Array | [] | Specify the children to render |
-| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
+| nodes | No | let | No | Array | [] | Specify the nodes to render |
+| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render |
### Slots
@@ -3079,24 +3113,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 | any | 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
@@ -3179,7 +3213,8 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :-------------------------------- |
-| change | dispatched | string | number |
+| update | dispatched | string | number |
+| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
@@ -3188,12 +3223,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | "" | Specify the option text |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| value | No | let | No | string | number | "" | Specify the option value |
+| text | No | let | No | string | undefined | Specify the option textIf not specified, the value will be used as the text. | +| hidden | No |
let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
@@ -3268,25 +3305,27 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
+| deselect | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `SideNav`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| fixed | No | let | No | boolean | false | Set to `true` to use the fixed variant |
-| rail | No | let | No | boolean | false | Set to `true` to use the rail variant |
-| ariaLabel | No | let | No | string | undefined | Specify the ARIA label for the nav |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | No |
let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| fixed | No | let | No | boolean | false | Set to `true` to use the fixed variant |
+| rail | No | let | No | boolean | false | Set to `true` to use the rail variant |
+| ariaLabel | No | let | No | string | undefined | Specify the ARIA label for the nav |
+| 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 | ### Slots @@ -3336,20 +3375,20 @@ 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 | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | {text} |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | {text} |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -3361,19 +3400,19 @@ 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 | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -3472,26 +3511,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| value | No | let | Yes | number | 0 | Specify the value of the slider |
-| max | No | let | No | number | 100 | Set the maximum slider value |
-| maxLabel | No | let | No | string | "" | Specify the label for the max value |
-| min | No | let | No | number | 0 | Set the minimum slider value |
-| minLabel | No | let | No | string | "" | Specify the label for the min value |
-| step | No | let | No | number | 1 | Set the step value |
-| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
-| required | No | let | No | boolean | false | Set to `true` to require a value |
-| inputType | No | let | No | string | "number" | Specify the input type |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
-| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to spanthe full width of its containing element. | -| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| labelText | No | let | No | string | "" | Specify the label text |
-| name | No | let | No | string | "" | Set a name for the slider element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| value | No | let | Yes | number | 0 | Specify the value of the slider |
+| max | No | let | No | number | 100 | Set the maximum slider value |
+| maxLabel | No | let | No | string | "" | Specify the label for the max value |
+| min | No | let | No | number | 0 | Set the minimum slider value |
+| minLabel | No | let | No | string | "" | Specify the label for the min value |
+| step | No | let | No | number | 1 | Set the step value |
+| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
+| required | No | let | No | boolean | false | Set to `true` to require a value |
+| inputType | No | let | No | string | "number" | Specify the input type |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to spanthe full width of its containing element. | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| labelText | No | let | No | string | "" | Specify the label text.Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | +| hideLabel | No |
let | No | boolean | false | Set to `true` to visually hide the label text |
+| name | No | let | No | string | "" | Set a name for the slider element |
### Slots
@@ -3501,13 +3541,14 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| input | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `SliderSkeleton`
@@ -3549,13 +3590,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `StructuredListBody`
@@ -3695,13 +3736,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
-| text | No | let | No | string | "Provide text" | Specify the switch textAlternatively, use the "text" slot (e.g., <span slot="text">...</span>) | -| disabled | No |
let | No | boolean | false | Set to `true` to disable the switch |
-| 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 |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
+| text | No | let | No | string | "Provide text" | Specify the switch text.Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the switch |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
@@ -3723,14 +3764,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
-| label | No | let | No | string | "" | Specify the tab labelAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | -| href | No |
let | No | string | "#" | Specify the href attribute |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tab |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| 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 | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
+| label | No | let | No | string | "" | Specify the tab label.Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) | +| href | No |
let | No | string | "#" | Specify the href attribute |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tab |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3937,11 +3978,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| keypress | forwarded | -- |
-| click | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
## `TabsSkeleton`
@@ -3978,15 +4019,15 @@ 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 | any | undefined | Specify the icon to render |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
-| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -4026,7 +4067,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
-| value | No | let | Yes | string | "" | Specify the textarea value |
+| value | No | let | Yes | null | string | "" | Specify the textarea value. |
| placeholder | No | let | No | string | "" | Specify the placeholder text |
| cols | No | let | No | number | 50 | Specify the number of cols |
| rows | No | let | No | number | 4 | Specify the number of rows |
@@ -4163,15 +4204,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
-| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No |
let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
-| persistKey | No | let | No | string | "theme" | Specify the local storage key |
-| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
-| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
-| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
+| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No |
let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
+| persistKey | No | let | No | string | "theme" | Specify the local storage key |
+| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
+| toggle | No | let | No | import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
+| select | No | let | No | import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
### Slots
@@ -4212,11 +4253,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- |
-| selected | No | let | Yes | string | undefined | Specify the selected tile value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group |
-| legend | No | let | No | string | "" | Specify the legend text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
+| selected | No | let | Yes | string | undefined | Specify the selected tile value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group |
+| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
+| legend | No | let | No | string | "" | Specify the legend text |
### Slots
@@ -4226,9 +4269,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| select | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
## `TimePicker`
@@ -4308,18 +4351,19 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------- |
-| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | No | let | No | string | "alert" | Set the `role` attribute |
-| title | No | let | No | string | "" | Specify the title text |
-| subtitle | No | let | No | string | "" | Specify the subtitle text |
-| caption | No | let | No | string | "" | Specify the caption text |
-| iconDescription | No | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
-| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
-| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to spanthe full width of its containing element. | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- | +| kind | No |
let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | No | let | No | string | "alert" | Set the `role` attribute |
+| title | No | let | No | string | "" | Specify the title text |
+| subtitle | No | let | No | string | "" | Specify the subtitle text |
+| caption | No | let | No | string | "" | Specify the caption text |
+| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
+| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
+| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to spanthe full width of its containing element. | ### Slots @@ -4501,6 +4545,7 @@ None. | Prop name | Required | Kind | Reactive | Type | Default value | Description | | :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ref | No |
let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| filteredRowIds | No | let | Yes | ReadonlyArray | [] | The filtered row ids |
| expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar |
| value | No | let | Yes | number | string | "" | Specify the value of the search input |
| persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded |
@@ -4514,13 +4559,16 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| clear | forwarded | -- |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| clear | dispatched | null |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
## `Tooltip`
@@ -4535,7 +4583,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 | any | 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 |
@@ -4545,11 +4593,11 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :---------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> |
-| triggerText | No | -- | {triggerText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :------------------------------------------------------------------ |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} name={iconName} /> |
+| triggerText | No | -- | {triggerText} |
### Events
@@ -4618,7 +4666,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 | any | 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 |
@@ -4626,10 +4674,10 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" /> |
-| tooltipText | No | -- | {tooltipText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this={icon} /> |
+| tooltipText | No | -- | {tooltipText} |
### Events
@@ -4650,34 +4698,36 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
- text: string;
- icon?: typeof import("svelte").SvelteComponent;
+ text: any;
+ icon?: any;
disabled?: boolean;
- expanded?: boolean;
+ nodes?: TreeNode[];
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
-| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | -| children | No |
let | No | Array | [] | Provide an array of children nodes to render |
-| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | -| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No |
let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | +| nodes | No |
let | No | Array | [] | Provide an array of nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | +| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- |
{labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
+| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
+| labelText | No | -- | {labelText} |
### Events
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2810f2cc..7a4e1cdf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,8 +4,8 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
## Prerequisites
-- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=20)
+- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm)
## Project set-up
@@ -19,42 +19,35 @@ cd carbon-components-svelte
Set the original repository as the upstream:
```sh
-git remote add upstream git@github.com:IBM/carbon-components-svelte.git
+git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
# verify that the upstream is added
git remote -v
```
### Install
-Install the project dependencies:
+Install the project dependencies.
```sh
-# carbon-components-svelte/
-yarn install
+npm install
```
## Documentation set-up
Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.
-First, create a symbolic link at the root of the project folder:
+First, create a symbolic link at the root of the project:
```sh
-# carbon-components-svelte/
-yarn link
+npm link
```
-Go into the `docs` folder:
+Then, go into `docs` and link the package.
```sh
cd docs
-```
-
-Link `"carbon-components-svelte"`:
-
-```sh
-yarn link "carbon-components-svelte"
-yarn install
+npm link "carbon-components-svelte"
+npm install
```
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@@ -74,10 +67,10 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run:
```sh
-yarn dev
+npm run dev
```
-The site should be served at `http://localhost:3000/` (or the next available port).
+The site should be served at http://localhost:5173/ (or the next available port).
### Component Format
@@ -121,13 +114,12 @@ export {
} from "./ComposedModal";
```
-### Run `yarn build:docs`
+### Run `npm run build:docs`
Run the following command to re-generate TypeScript definitions and documentation.
```sh
-# carbon-components-svelte/
-yarn build:docs
+npm run build:docs
```
## Submit a Pull Request
@@ -145,3 +137,51 @@ git merge upstream/master
### Submit a PR
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `
+
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
@@ -10,16 +13,12 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
-## [Documentation](https://carbon-components-svelte.onrender.com)
-
-The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
-
-[](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
+## [Documentation](https://svelte.carbondesignsystem.com)
Other forms of documentation are auto-generated:
@@ -29,19 +28,18 @@ Other forms of documentation are auto-generated:
## Installation
-Install `carbon-components-svelte` as a development dependency.
-
-A minimum Svelte version of 3.48.0 is required to use this library.
-
```sh
-# Yarn
-yarn add -D carbon-components-svelte
-
# npm
-npm i -D carbon-components-svelte
+npm i carbon-components-svelte
# pnpm
-pnpm i -D carbon-components-svelte
+pnpm i carbon-components-svelte
+
+# Yarn
+yarn add carbon-components-svelte
+
+# Bun
+bun add carbon-components-svelte
```
## Usage
@@ -57,7 +55,7 @@ Before importing components, you will need to first apply Carbon component style
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
The compiled CSS is generated from the following `.scss` files:
@@ -90,42 +88,11 @@ import "carbon-components-svelte/css/g100.css";
import "carbon-components-svelte/css/all.css";
```
-#### CDN
-
-An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
-
-This is best suited for rapid prototyping.
-
-##### HTML
-
-```html
-
-
-
-
-
-
-```
-
-##### `svelte:head`
-
-```html
-
...
)",
+ "description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `...
`)",
"type": "string",
"value": "\"title\"",
"isFunction": false,
@@ -139,7 +149,11 @@
],
"moduleExports": [],
"slots": [
- { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
{
"name": "title",
"default": false,
@@ -148,15 +162,43 @@
}
],
"events": [
- { "type": "forwarded", "name": "animationend", "element": "li" },
- { "type": "forwarded", "name": "click", "element": "button" },
- { "type": "forwarded", "name": "mouseover", "element": "button" },
- { "type": "forwarded", "name": "mouseenter", "element": "button" },
- { "type": "forwarded", "name": "mouseleave", "element": "button" },
- { "type": "forwarded", "name": "keydown", "element": "button" }
+ {
+ "type": "forwarded",
+ "name": "animationend",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "button"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "AccordionSkeleton",
@@ -213,13 +255,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "AspectRatio",
@@ -239,10 +301,20 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "Breadcrumb",
@@ -274,7 +346,13 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
{
"type": "forwarded",
@@ -298,7 +376,11 @@
}
],
"typedefs": [],
- "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
+ "generics": null,
+ "rest_props": {
+ "type": "InlineComponent",
+ "name": "BreadcrumbSkeleton"
+ },
"extends": {
"interface": "BreadcrumbSkeletonProps",
"import": "\"./BreadcrumbSkeleton.svelte\""
@@ -337,17 +419,37 @@
{
"name": "__default__",
"default": true,
- "slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
+ "slot_props": "{\n props?: {\n [\"aria-current\"]?: string;\n class: \"bx--link\";\n };\n}"
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "li" },
- { "type": "forwarded", "name": "mouseover", "element": "li" },
- { "type": "forwarded", "name": "mouseenter", "element": "li" },
- { "type": "forwarded", "name": "mouseleave", "element": "li" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "li"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "BreadcrumbSkeleton",
@@ -381,13 +483,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "Breakpoint",
@@ -409,7 +531,7 @@
"kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record...
)",
+ "description": "Specify the text displayed next to the icon.\nAlternatively, use the named slot \"text\" (e.g., `...
`)",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -4888,6 +5902,29 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "iconDescription",
+ "kind": "let",
+ "description": "Specify an icon tooltip. The tooltip will not be displayed\nif either the `text` prop or a named slot=\"text\" is used",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "tooltipAlignment",
+ "kind": "let",
+ "description": "Set the alignment of the tooltip relative to the icon.\nOnly applies when `iconDescription` is provided",
+ "type": "\"start\" | \"center\" | \"end\"",
+ "value": "\"center\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "ref",
"kind": "let",
@@ -4911,37 +5948,69 @@
"isRequired": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "preventCloseOnClickOutside",
+ "kind": "let",
+ "description": "Set to `true` to prevent the panel from closing when clicking outside",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
"slots": [
- { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
{
"name": "closeIcon",
"default": false,
- "fallback": "\n {text}\n
",
+ "fallback": "\n {text}\n
",
"slot_props": "{}"
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "a" },
- { "type": "forwarded", "name": "keydown", "element": "a" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "a"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "a"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "Pagination",
@@ -8231,6 +10053,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "pageWindow",
+ "kind": "let",
+ "description": "If `totalItems` is a large number, it can affect the\nrendering performance of this component since its value\nis used to calculate the number of pages in the native\nselect dropdown. This value creates a small window of\npages rendered around the current page. By default,\na maximum of 1000 select items are rendered.",
+ "type": "number",
+ "value": "1000",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "disabled",
"kind": "let",
@@ -8284,7 +10118,7 @@
"kind": "let",
"description": "Override the item text",
"type": "(min: number, max: number) => string",
- "value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8296,7 +10130,7 @@
"kind": "let",
"description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string",
- "value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8368,7 +10202,7 @@
"kind": "let",
"description": "Override the page text",
"type": "(page: number) => string",
- "value": "(page) => `page ${page}`",
+ "value": "(page) => `page ${page.toLocaleString()}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8380,7 +10214,7 @@
"kind": "let",
"description": "Override the page range text",
"type": "(current: number, total: number) => string",
- "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`",
+ "value": "(\n current,\n total,\n) =>\n `of ${total.toLocaleString()} page${total === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8405,22 +10239,32 @@
"events": [
{
"type": "dispatched",
- "name": "update",
- "detail": "{ pageSize: number; page: number; }"
+ "name": "change",
+ "detail": "{\n page?: number;\n pageSize?: number;\n}",
+ "description": "Dispatched after any user interaction"
},
{
"type": "dispatched",
"name": "click:button--previous",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
},
{
"type": "dispatched",
"name": "click:button--next",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
+ },
+ {
+ "type": "dispatched",
+ "name": "update",
+ "detail": "{\n pageSize: number;\n page: number;\n}"
}
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "PaginationNav",
@@ -8431,7 +10275,7 @@
"kind": "let",
"description": "Specify the current page index",
"type": "number",
- "value": "0",
+ "value": "1",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8497,6 +10341,18 @@
"isRequired": false,
"constant": false,
"reactive": false
+ },
+ {
+ "name": "tooltipPosition",
+ "kind": "let",
+ "description": "Set the position of the tooltip relative to the pagination buttons.",
+ "type": "\"top\" | \"right\" | \"bottom\" | \"left\" | \"outside\" | \"inside\"",
+ "value": "\"bottom\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
}
],
"moduleExports": [],
@@ -8505,21 +10361,26 @@
{
"type": "dispatched",
"name": "change",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }",
+ "description": "fires after every user interaction"
},
{
"type": "dispatched",
"name": "click:button--previous",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
},
{
"type": "dispatched",
"name": "click:button--next",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
}
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "nav" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "nav"
+ }
},
{
"moduleName": "PaginationSkeleton",
@@ -8528,13 +10389,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "PasswordInput",
@@ -8801,20 +10682,68 @@
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" },
- { "type": "forwarded", "name": "change", "element": "input" },
- { "type": "forwarded", "name": "input", "element": "input" },
- { "type": "forwarded", "name": "keydown", "element": "input" },
- { "type": "forwarded", "name": "keyup", "element": "input" },
- { "type": "forwarded", "name": "focus", "element": "input" },
- { "type": "forwarded", "name": "blur", "element": "input" },
- { "type": "forwarded", "name": "paste", "element": "input" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "change",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "input",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "keyup",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "focus",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "blur",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "paste",
+ "element": "input"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "input" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "input"
+ }
},
{
"moduleName": "Popover",
@@ -8906,12 +10835,26 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
- { "type": "dispatched", "name": "click:outside", "detail": "null" }
+ {
+ "type": "dispatched",
+ "name": "click:outside",
+ "detail": "{\n target: HTMLElement;\n}"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressBar",
@@ -8952,6 +10895,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "status",
+ "kind": "let",
+ "description": "Specify the status",
+ "type": "\"active\" | \"finished\" | \"error\"",
+ "value": "\"active\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "size",
"kind": "let",
@@ -9024,7 +10979,11 @@
],
"events": [],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressIndicator",
@@ -9080,16 +11039,46 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
- { "type": "dispatched", "name": "change", "detail": "number" },
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "dispatched",
+ "name": "change",
+ "detail": "number"
+ },
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "ProgressIndicatorSkeleton",
@@ -9123,13 +11112,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "ProgressStep",
@@ -9237,19 +11246,43 @@
{
"name": "__default__",
"default": true,
- "fallback": "{label}
", - "slot_props": "{ props: { class: 'bx--progress-label' } }" + "fallback": "{label}
", + "slot_props": "{\n props: {\n class: \"bx--progress-label\";\n };\n}" } ], "events": [ - { "type": "forwarded", "name": "click", "element": "button" }, - { "type": "forwarded", "name": "mouseover", "element": "button" }, - { "type": "forwarded", "name": "mouseenter", "element": "button" }, - { "type": "forwarded", "name": "mouseleave", "element": "button" }, - { "type": "forwarded", "name": "keydown", "element": "button" } + { + "type": "forwarded", + "name": "click", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "button" + }, + { + "type": "forwarded", + "name": "keydown", + "element": "button" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "li" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "li" + } }, { "moduleName": "RadioButton", @@ -9259,7 +11292,7 @@ "name": "value", "kind": "let", "description": "Specify the value of the radio button", - "type": "string", + "type": "string | number", "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, @@ -9356,7 +11389,6 @@ "kind": "let", "description": "Specify a name attribute for the radio button input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9385,9 +11417,29 @@ "slot_props": "{}" } ], - "events": [{ "type": "forwarded", "name": "change", "element": "input" }], + "events": [ + { + "type": "forwarded", + "name": "focus", + "element": "input" + }, + { + "type": "forwarded", + "name": "blur", + "element": "input" + }, + { + "type": "forwarded", + "name": "change", + "element": "input" + } + ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonGroup", @@ -9397,7 +11449,7 @@ "name": "selected", "kind": "let", "description": "Set the selected radio button value", - "type": "string", + "type": "string | number", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9416,6 +11468,28 @@ "constant": false, "reactive": false }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to require the selection of a radio button", + "type": "boolean", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the radio button inputs", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "legendText", "kind": "let", @@ -9478,7 +11552,11 @@ ], "moduleExports": [], "slots": [ - { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "__default__", + "default": true, + "slot_props": "{}" + }, { "name": "legendText", "default": false, @@ -9487,14 +11565,38 @@ } ], "events": [ - { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "change" } + { + "type": "dispatched", + "name": "change", + "detail": "string | number" + }, + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonSkeleton", @@ -9503,13 +11605,33 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" } + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioTile", @@ -9551,6 +11673,18 @@ "constant": false, "reactive": false }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, { "name": "value", "kind": "let", @@ -9602,9 +11736,8 @@ { "name": "name", "kind": "let", - "description": "Specify a name attribute for the input", + "description": "Specify a name attribute for the radio tile input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9613,27 +11746,61 @@ } ], "moduleExports": [], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{}" + } + ], "events": [ - { "type": "forwarded", "name": "change", "element": "input" }, - { "type": "forwarded", "name": "keydown", "element": "input" }, - { "type": "forwarded", "name": "click", "element": "label" }, - { "type": "forwarded", "name": "mouseover", "element": "label" }, - { "type": "forwarded", "name": "mouseenter", "element": "label" }, - { "type": "forwarded", "name": "mouseleave", "element": "label" } + { + "type": "forwarded", + "name": "change", + "element": "input" + }, + { + "type": "forwarded", + "name": "keydown", + "element": "input" + }, + { + "type": "forwarded", + "name": "click", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "label" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "label" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "label" + } }, { "moduleName": "RecursiveList", "filePath": "src/RecursiveList/RecursiveList.svelte", "props": [ { - "name": "children", + "name": "nodes", "kind": "let", - "description": "Specify the children to render", - "type": "Array
Source code:
-
{type}
+
{/each}
+
{:else}
-
+
{/if}
{prop.value}$1")}.
{/each}
- {:else}
- No description available.
{/if}
+
+ Default value
+
+
+ {#if prop.value === undefined}
+ undefined
+ {:else}
+
Typedefs
{#if component.typedefs.length > 0} -
+ t.ts).join("\n")}
+ />
+
{:else}
No typedefs.
{/if}Slots
{#if component.slots.length > 0} -No slots.
{/if} @@ -166,11 +232,37 @@Dispatched events
{#if dispatched_events.length > 0} -No dispatched events.
{/if} @@ -193,6 +285,7 @@ diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte index 136fe90b..b908e575 100644 --- a/docs/src/components/InlineSnippet.svelte +++ b/docs/src/components/InlineSnippet.svelte @@ -6,7 +6,7 @@
- copy(text)} />
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 813fac70..496d0f16 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -1,7 +1,7 @@
-
-
+
+
{#if !pageSizeInputDisabled}
@@ -109,26 +135,29 @@
hideLabel
noLabel
inline
- bind:selected="{pageSize}"
+ on:update={(event) => {
+ dispatch("change", { pageSize: event.detail });
+ }}
+ bind:selected={pageSize}
>
{#each pageSizes as size, i (size)}
-
-
+
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index af910477..f3838074 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -3,24 +3,22 @@
+
{#if !pageInputDisabled}
-
+
{#if pagesUnknown}
{pageText(page)}
{:else}{pageRangeText(page, totalPages)}{/if}
@@ -152,31 +184,33 @@
kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
- icon="{CaretLeft}"
- iconDescription="{backwardText}"
- disabled="{backButtonDisabled}"
+ icon={CaretLeft}
+ iconDescription={backwardText}
+ disabled={backButtonDisabled}
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
? 'bx--pagination__button--no-index'
: ''}"
- on:click="{() => {
+ on:click={() => {
page--;
- dispatch('click:button--previous', { page });
- }}"
+ dispatch("click:button--previous", { page });
+ dispatch("change", { page });
+ }}
/>
-
+
+
+
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 83a36046..889a899e 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -1,20 +1,21 @@
-