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 |
+| 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 |
+| 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: 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} |
+| 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} |
### Events
-| 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|
|
+| 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 |
## `DataTableSkeleton`
@@ -1261,28 +1249,24 @@ 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 |
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :--------------- | :------ | :---- | :------------------------------ |
-| labelDescription | No | -- | {labelDescription} |
-| labelTitle | No | -- | {labelTitle} |
+None.
### Events
@@ -1301,21 +1285,20 @@ 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 | 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 |
+| 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 |
### Slots
@@ -1584,28 +1567,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| company | No | let | No | string | undefined | Specify the company name.Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | -| platformName | No |
let | No | string | "" | Specify the platform name.Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | -| persistentHamburgerMenu | No |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | -| iconMenu | No |
let | No | 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} />` | +| 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} />` | ### Slots -| Slot name | Default | Props | Fallback | -| :-------------- | :------ | :---- | :--------------------------- | -| -- | Yes | -- | -- | -| company | No | -- |
{company} |
-| platform | No | -- | {platformName} |
-| skip-to-content | No | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
### Events
@@ -1617,26 +1599,23 @@ 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 | 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 |
+| 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 | ### 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 class:bx--header\_\_action-text={true}>{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>{text}</span>{/if} |
### Events
@@ -1650,38 +1629,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 | any | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
-| 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
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
+None.
## `HeaderGlobalAction`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | No | let | No | any | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> |
### Events
@@ -1718,9 +1697,7 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------ |
-| -- | Yes | -- | {text} |
+None.
### Events
@@ -1842,9 +1819,9 @@ export interface HeaderSearchResult {
### Slots
-| 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} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} |
### Events
@@ -1910,12 +1887,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 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" |
+| 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" |
### Slots
@@ -1970,22 +1947,22 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
-| href | No | let | No | string | undefined | Specify the href value |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | No | let | No | 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 |
+| 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 |
### 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
@@ -2158,9 +2135,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------------------- |
-| clear | dispatched | KeyboardEvent | MouseEvent |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| clear | dispatched | -- |
## `ListItem`
@@ -2187,12 +2164,13 @@ 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 | "loading" | Specify the description to describe the loading state |
+| 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 |
### Slots
@@ -2228,29 +2206,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 | 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 |
+| 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 |
### Slots
@@ -2299,16 +2277,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 | 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 |
+| 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 |
### Slots
@@ -2366,50 +2344,49 @@ 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 | 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 |
+| 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 |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
-| titleText | No | -- | {titleText} |
### Events
@@ -2419,7 +2396,6 @@ export interface MultiSelectItem {
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
-| input | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
@@ -2449,12 +2425,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 | 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 |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------- | ----------------------------------- |
+| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| title | No | let | No | string | undefined | Specify the title of the icon |
+| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
### Slots
@@ -2616,27 +2592,27 @@ 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 | 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 |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
+| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
+| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
+| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<OverflowMenuVertical />` | +| open | No |
let | Yes | boolean | false | Set to `true` to open the menu |
+| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
+| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
+| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
+| iconClass | No | let | No | string | undefined | Specify the icon class |
+| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
-| 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
@@ -2653,23 +2629,23 @@ None.
### 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 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 |
+| 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 |
### 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
@@ -2682,25 +2658,24 @@ 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 |
-| 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 |
+| 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 |
### Slots
@@ -2719,15 +2694,14 @@ None.
### Props
-| 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. |
+| 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 |
### Slots
@@ -2845,7 +2819,6 @@ 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 |
@@ -2928,9 +2901,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
@@ -2950,14 +2923,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 | number | "" | Specify the value of the radio button |
+| value | No | let | No | string | "" | 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 | undefined | Specify a name attribute for the radio button input |
+| name | No | let | No | string | "" | Specify a name attribute for the radio button input |
### Slots
@@ -2969,25 +2942,21 @@ 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 | 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 |
+| 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 |
### Slots
@@ -2998,13 +2967,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------- |
-| change | dispatched | string | number |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `RadioButtonSkeleton`
@@ -3034,12 +3003,11 @@ 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 | undefined | Specify a name attribute for the radio tile input |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3072,10 +3040,10 @@ export interface RecursiveListNode {
### Props
-| 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 |
+| 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 |
### Slots
@@ -3113,24 +3081,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 | 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 |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
+| value | No | let | Yes | any | "" | Specify the value of the search input |
+| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
+| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
+| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
+| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
+| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
+| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
+| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
+| labelText | No | let | No | string | "" | Specify the label text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<Search />` | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
@@ -3223,14 +3191,12 @@ 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 | 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 |
+| 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 |
### Slots
@@ -3305,27 +3271,25 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| select | dispatched | string |
-| deselect | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| 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 hidden.1056 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 hidden1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | ### Slots @@ -3375,20 +3339,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 | any | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
-| 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
@@ -3400,19 +3364,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 | any | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
-| 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
@@ -3511,27 +3475,26 @@ 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.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 |
+| 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 |
### Slots
@@ -3541,14 +3504,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | number |
-| input | dispatched | number |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `SliderSkeleton`
@@ -3590,13 +3552,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | dispatched | -- |
## `StructuredListBody`
@@ -3736,13 +3698,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 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 |
+| 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 |
### Slots
@@ -3764,14 +3726,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 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 |
+| 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 |
### Slots
@@ -3978,11 +3940,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | number |
-| keypress | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
+| change | dispatched | -- |
## `TabsSkeleton`
@@ -4019,15 +3981,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 | any | undefined | Specify the icon to render |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
-| 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
@@ -4067,7 +4029,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 | null | string | "" | Specify the textarea value. |
+| value | No | let | Yes | 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 |
@@ -4204,15 +4166,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.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 |
+| 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 |
### Slots
@@ -4253,13 +4215,11 @@ 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 |
-| 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 |
+| 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 |
### Slots
@@ -4269,9 +4229,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| select | dispatched | string |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| select | dispatched | -- |
## `TimePicker`
@@ -4559,16 +4519,16 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| clear | dispatched | null |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| keyup | forwarded | -- |
-| keydown | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| clear | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
## `Tooltip`
@@ -4583,7 +4543,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 | any | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | +| icon | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | | iconDescription | No |
let | No | string | "" | Specify the ARIA label for the tooltip button |
| iconName | No | let | No | string | "" | Specify the icon name attribute |
| tabindex | No | let | No | string | "0" | Set the button tabindex |
@@ -4593,11 +4553,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
@@ -4666,7 +4626,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 | any | undefined | Specify the icon to render |
+| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon |
| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
@@ -4674,10 +4634,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
@@ -4699,35 +4659,34 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
- icon?: any;
+ icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean;
- nodes?: TreeNode[];
+ expanded?: boolean;
+ children?: 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 | -| 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 | +| 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 | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- | -| -- | Yes |
{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
-| labelText | No | -- | {labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
### Events
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7a4e1cdf..91e58ff9 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,10 +2,23 @@
Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
+- [Prerequisites](#prerequisites)
+- [Project set-up](#project-set-up)
+ - [Install](#install)
+- [Documentation set-up](#documentation-set-up)
+- [Development workflow](#development-workflow)
+ - [Component Format](#component-format)
+ - [Editing a component](#editing-a-component)
+ - [Creating a component](#creating-a-component)
+ - [Run `yarn build:docs`](#run-yarn-builddocs)
+- [Submit a Pull Request](#submit-a-pull-request)
+ - [Sync Your Fork](#sync-your-fork)
+ - [Submit a PR](#submit-a-pr)
+
## Prerequisites
-- [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)
+- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
+- [Yarn](https://classic.yarnpkg.com/en/docs/install)
## Project set-up
@@ -19,35 +32,42 @@ cd carbon-components-svelte
Set the original repository as the upstream:
```sh
-git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
+git remote add upstream git@github.com:IBM/carbon-components-svelte.git
# verify that the upstream is added
git remote -v
```
### Install
-Install the project dependencies.
+Install the project dependencies:
```sh
-npm install
+# carbon-components-svelte/
+yarn 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:
+First, create a symbolic link at the root of the project folder:
```sh
-npm link
+# carbon-components-svelte/
+yarn link
```
-Then, go into `docs` and link the package.
+Go into the `docs` folder:
```sh
cd docs
-npm link "carbon-components-svelte"
-npm install
+```
+
+Link `"carbon-components-svelte"`:
+
+```sh
+yarn link "carbon-components-svelte"
+yarn install
```
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@@ -67,10 +87,10 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run:
```sh
-npm run dev
+yarn dev
```
-The site should be served at http://localhost:5173/ (or the next available port).
+The site should be served at `http://localhost:3000/` (or the next available port).
### Component Format
@@ -114,12 +134,13 @@ export {
} from "./ComposedModal";
```
-### Run `npm run build:docs`
+### Run `yarn build:docs`
Run the following command to re-generate TypeScript definitions and documentation.
```sh
-npm run build:docs
+# carbon-components-svelte/
+yarn build:docs
```
## Submit a Pull Request
@@ -138,50 +159,29 @@ git merge upstream/master
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.
@@ -13,12 +10,16 @@ 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)**: 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 Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,000+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 900+ 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 Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
-## [Documentation](https://svelte.carbondesignsystem.com)
+## [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)
Other forms of documentation are auto-generated:
@@ -28,18 +29,17 @@ Other forms of documentation are auto-generated:
## Installation
+Install `carbon-components-svelte` as a development dependency.
+
```sh
+# Yarn
+yarn add -D carbon-components-svelte
+
# npm
-npm i carbon-components-svelte
+npm i -D carbon-components-svelte
# pnpm
-pnpm i carbon-components-svelte
-
-# Yarn
-yarn add carbon-components-svelte
-
-# Bun
-bun add carbon-components-svelte
+pnpm i -D carbon-components-svelte
```
## Usage
@@ -88,6 +88,37 @@ 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,
@@ -149,11 +139,7 @@
],
"moduleExports": [],
"slots": [
- {
- "name": "__default__",
- "default": true,
- "slot_props": "{}"
- },
+ { "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "title",
"default": false,
@@ -162,43 +148,15 @@
}
],
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "li"
- }
+ "rest_props": { "type": "Element", "name": "li" }
},
{
"moduleName": "AccordionSkeleton",
@@ -255,33 +213,13 @@
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "ul"
- }
+ "rest_props": { "type": "Element", "name": "ul" }
},
{
"moduleName": "AspectRatio",
@@ -301,20 +239,10 @@
}
],
"moduleExports": [],
- "slots": [
- {
- "name": "__default__",
- "default": true,
- "slot_props": "{}"
- }
- ],
+ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Breadcrumb",
@@ -346,13 +274,7 @@
}
],
"moduleExports": [],
- "slots": [
- {
- "name": "__default__",
- "default": true,
- "slot_props": "{}"
- }
- ],
+ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "forwarded",
@@ -376,11 +298,7 @@
}
],
"typedefs": [],
- "generics": null,
- "rest_props": {
- "type": "InlineComponent",
- "name": "BreadcrumbSkeleton"
- },
+ "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
"extends": {
"interface": "BreadcrumbSkeletonProps",
"import": "\"./BreadcrumbSkeleton.svelte\""
@@ -419,37 +337,17 @@
{
"name": "__default__",
"default": true,
- "slot_props": "{\n props?: {\n [\"aria-current\"]?: string;\n class: \"bx--link\";\n };\n}"
+ "slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
}
],
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "li"
- }
+ "rest_props": { "type": "Element", "name": "li" }
},
{
"moduleName": "BreadcrumbSkeleton",
@@ -483,33 +381,13 @@
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "Breakpoint",
@@ -531,7 +409,7 @@
"kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record...
`)",
+ "description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g., ...
)",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -5902,29 +4888,6 @@
"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",
@@ -5948,69 +4911,37 @@
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "li"
- }
+ "rest_props": { "type": "Element", "name": "li" }
},
{
"moduleName": "Pagination",
@@ -10053,18 +8241,6 @@
"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",
@@ -10118,7 +8294,7 @@
"kind": "let",
"description": "Override the item text",
"type": "(min: number, max: number) => string",
- "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10130,7 +8306,7 @@
"kind": "let",
"description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string",
- "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10202,7 +8378,7 @@
"kind": "let",
"description": "Override the page text",
"type": "(page: number) => string",
- "value": "(page) => `page ${page.toLocaleString()}`",
+ "value": "(page) => `page ${page}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10214,7 +8390,7 @@
"kind": "let",
"description": "Override the page range text",
"type": "(current: number, total: number) => string",
- "value": "(\n current,\n total,\n) =>\n `of ${total.toLocaleString()} page${total === 1 ? \"\" : \"s\"}`",
+ "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -10240,31 +8416,27 @@
{
"type": "dispatched",
"name": "change",
- "detail": "{\n page?: number;\n pageSize?: number;\n}",
+ "detail": "{ page?: number; pageSize?: number }",
"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}"
+ "detail": "{ pageSize: number; page: number; }"
}
],
"typedefs": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "PaginationNav",
@@ -10341,18 +8513,6 @@
"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": [],
@@ -10361,26 +8521,22 @@
{
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "nav"
- }
+ "rest_props": { "type": "Element", "name": "nav" }
},
{
"moduleName": "PaginationSkeleton",
@@ -10389,33 +8545,13 @@
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "PasswordInput",
@@ -10682,68 +8818,20 @@
}
],
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "input"
- }
+ "rest_props": { "type": "Element", "name": "input" }
},
{
"moduleName": "Popover",
@@ -10835,26 +8923,16 @@
}
],
"moduleExports": [],
- "slots": [
- {
- "name": "__default__",
- "default": true,
- "slot_props": "{}"
- }
- ],
+ "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [
{
"type": "dispatched",
"name": "click:outside",
- "detail": "{\n target: HTMLElement;\n}"
+ "detail": "{ target: HTMLElement; }"
}
],
"typedefs": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ProgressBar",
@@ -10895,18 +8973,6 @@
"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",
@@ -10979,11 +9045,7 @@
],
"events": [],
"typedefs": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "div"
- }
+ "rest_props": { "type": "Element", "name": "div" }
},
{
"moduleName": "ProgressIndicator",
@@ -11039,46 +9101,16 @@
}
],
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "ul"
- }
+ "rest_props": { "type": "Element", "name": "ul" }
},
{
"moduleName": "ProgressIndicatorSkeleton",
@@ -11112,33 +9144,13 @@
"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": [],
- "generics": null,
- "rest_props": {
- "type": "Element",
- "name": "ul"
- }
+ "rest_props": { "type": "Element", "name": "ul" }
},
{
"moduleName": "ProgressStep",
@@ -11246,43 +9258,19 @@
{
"name": "__default__",
"default": true,
- "fallback": "{label}
", - "slot_props": "{\n props: {\n class: \"bx--progress-label\";\n };\n}" + "fallback": "{label}
", + "slot_props": "{ props: { class: 'bx--progress-label' } }" } ], "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": [], - "generics": null, - "rest_props": { - "type": "Element", - "name": "li" - } + "rest_props": { "type": "Element", "name": "li" } }, { "moduleName": "RadioButton", @@ -11292,7 +9280,7 @@ "name": "value", "kind": "let", "description": "Specify the value of the radio button", - "type": "string | number", + "type": "string", "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, @@ -11389,6 +9377,7 @@ "kind": "let", "description": "Specify a name attribute for the radio button input", "type": "string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -11417,29 +9406,9 @@ "slot_props": "{}" } ], - "events": [ - { - "type": "forwarded", - "name": "focus", - "element": "input" - }, - { - "type": "forwarded", - "name": "blur", - "element": "input" - }, - { - "type": "forwarded", - "name": "change", - "element": "input" - } - ], + "events": [{ "type": "forwarded", "name": "change", "element": "input" }], "typedefs": [], - "generics": null, - "rest_props": { - "type": "Element", - "name": "div" - } + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "RadioButtonGroup", @@ -11449,7 +9418,7 @@ "name": "selected", "kind": "let", "description": "Set the selected radio button value", - "type": "string | number", + "type": "string", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -11468,28 +9437,6 @@ "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", @@ -11552,11 +9499,7 @@ ], "moduleExports": [], "slots": [ - { - "name": "__default__", - "default": true, - "slot_props": "{}" - }, + { "name": "__default__", "default": true, "slot_props": "{}" }, { "name": "legendText", "default": false, @@ -11565,38 +9508,14 @@ } ], "events": [ - { - "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" - } + { "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" } ], "typedefs": [], - "generics": null, - "rest_props": { - "type": "Element", - "name": "div" - } + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "RadioButtonSkeleton", @@ -11605,33 +9524,13 @@ "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": [], - "generics": null, - "rest_props": { - "type": "Element", - "name": "div" - } + "rest_props": { "type": "Element", "name": "div" } }, { "moduleName": "RadioTile", @@ -11673,18 +9572,6 @@ "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", @@ -11736,8 +9623,9 @@ { "name": "name", "kind": "let", - "description": "Specify a name attribute for the radio tile input", + "description": "Specify a name attribute for the input", "type": "string", + "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -11746,61 +9634,27 @@ } ], "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": [], - "generics": null, - "rest_props": { - "type": "Element", - "name": "label" - } + "rest_props": { "type": "Element", "name": "label" } }, { "moduleName": "RecursiveList", "filePath": "src/RecursiveList/RecursiveList.svelte", "props": [ { - "name": "nodes", + "name": "children", "kind": "let", - "description": "Specify the nodes to render", - "type": "Array
Source code:
-
-
+ {typeMap[type]}
+ {:else if type.startsWith("(")}
+ {type}
{:else}
-
-
+ {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")}
- />
-
+ No typedefs.
{/if}Slots
{#if component.slots.length > 0} -No slots.
{/if} @@ -237,7 +173,7 @@event.detail type{event.detail}
- copy(text)} />
+
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 496d0f16..813fac70 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -1,7 +1,7 @@
-
-
+
+
{#if !pageSizeInputDisabled}
@@ -135,29 +110,29 @@
hideLabel
noLabel
inline
- on:update={(event) => {
- dispatch("change", { pageSize: event.detail });
- }}
- bind:selected={pageSize}
+ on:change="{() => {
+ dispatch('change', { pageSize });
+ }}"
+ bind:selected="{pageSize}"
>
{#each pageSizes as size, i (size)}
-
-
+
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index f3838074..af910477 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -3,22 +3,24 @@
-
{#if !pageInputDisabled}
-
+
{#if pagesUnknown}
{pageText(page)}
{:else}{pageRangeText(page, totalPages)}{/if}
@@ -184,33 +159,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("change", { page });
- }}
+ dispatch('click:button--previous', { page });
+ dispatch('change', { page });
+ }}"
/>
-
+
+
+
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 889a899e..4f98c855 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -6,16 +6,15 @@
export let active = false;
-