let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
-| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | No |
let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
-| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | -| sortDirection | No |
let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
-| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by |
-| headers | No | let | No | ReadonlyArray | [] | Specify the data table headers |
-| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | -| size | No |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
-| title | No | let | No | string | "" | Specify the title of the data table |
-| description | No | let | No | string | "" | Specify the description of the data table |
-| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles |
-| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
-| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
-| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
-| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
-| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
-| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
-| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
-| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
-| page | No | let | No | number | 0 | Set to `number` to set current page |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
+| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No |
let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
+| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No |
let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
+| sortKey | No | let | Yes | DataTableKey|
| null | Specify the header key to sort by |
+| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers |
+| rows | No | let | No | ReadonlyArray|
| [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | +| size | No |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
+| title | No | let | No | string | "" | Specify the title of the data table |
+| description | No | let | No | string | "" | Specify the description of the data table |
+| inputName | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify a name attribute for the input elementsin a selectable data table (radio or checkbox).
When the table is inside a form, this name will
be included in the form data on submit. | +| zebra | No |
let | No | boolean | false | Set to `true` to use zebra styles |
+| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
+| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
+| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
+| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
+| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
+| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
+| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
+| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
+| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
+| page | No | let | No | number | 0 | Set to `number` to set current page |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value, row) : cell.value} |
-| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
-| description | No | -- | {description} |
-| expanded-row | No | { row: DataTableRow; } | -- |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| cell | No | { row: Row; cell: DataTableCell; rowIndex: number; cellIndex: number; }
| {cell.display ? cell.display(cell.value, row) : cell.value} |
+| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
+| description | No | -- | {description} |
+| expanded-row | No | { row: Row; } | -- |
+| title | No | -- | {title} |
### Events
-| Event name | Type | Detail |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } |
-| click:header--expand | dispatched | { expanded: boolean; } |
-| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
-| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
-| click:row | dispatched | DataTableRow |
-| mouseenter:row | dispatched | DataTableRow |
-| mouseleave:row | dispatched | DataTableRow |
-| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } |
-| click:row--select | dispatched | { selected: boolean; row: DataTableRow; } |
-| click:cell | dispatched | DataTableCell |
+| Event name | Type | Detail |
+| :------------------- | :--------- | :----------------------------------------------------------------------------------------------------------- |
+| click | dispatched | { header?: DataTableHeader; row?: Row; cell?: DataTableCell; }
|
+| click:header--expand | dispatched | { expanded: boolean; } |
+| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" }
|
+| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } |
+| click:row | dispatched | Row |
+| mouseenter:row | dispatched | Row |
+| mouseleave:row | dispatched | Row |
+| click:row--expand | dispatched | { expanded: boolean; row: Row; } |
+| click:row--select | dispatched | { selected: boolean; row: Row; } |
+| click:cell | dispatched | DataTableCell|
|
## `DataTableSkeleton`
@@ -1573,19 +1584,19 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| company | No | let | No | string | undefined | Specify the company name.Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | -| platformName | No |
let | No | string | "" | Specify the platform name.Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | -| persistentHamburgerMenu | No |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | -| iconMenu | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | -| iconClose | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No |
let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| company | No | let | No | string | undefined | Specify the company name.Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| platformName | No |
let | No | string | "" | Specify the platform name.Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | +| persistentHamburgerMenu | No |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
+| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | +| iconMenu | No |
let | No | any | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | +| iconClose | No |
let | No | any | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | ### Slots @@ -1606,24 +1617,26 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | No |
let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | -| closeIcon | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | -| text | No |
let | No | string | undefined | Specify the text.Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | -| transition | No |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | -| preventCloseOnClickOutside | No |
let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
+| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | +| closeIcon | No |
let | No | any | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | +| text | No |
let | No | string | undefined | Specify the text displayed next to the icon.Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| iconDescription | No |
let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayedif either the `text` prop or a named slot="text" is used | +| tooltipAlignment | No |
let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.Only applies when `iconDescription` is provided | +| transition | No |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | +| preventCloseOnClickOutside | No |
let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
-| text | No | -- | {#if text}<span>{text}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
+| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} |
### Events
@@ -1637,18 +1650,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| icon | No | let | No | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------ |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
### Events
@@ -1660,17 +1673,15 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | No | let | No | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> |
+None.
### Events
@@ -1831,9 +1842,9 @@ export interface HeaderSearchResult {
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description={true}
>– {result.description}</span
>{/if} |
### Events
@@ -1959,22 +1970,22 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
-| href | No | let | No | string | undefined | Specify the href value |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render`inline` must be `false` | -| disabled | No |
let | No | boolean | false | Set to `true` to disable the checkbox |
-| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the top-level HTML element |
+| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link |
+| href | No | let | No | string | undefined | Specify the href value |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| icon | No | let | No | any | undefined | Specify the icon to render`inline` must be `false` | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the checkbox |
+| visited | No | let | No | boolean | false | Set to `true` to allow visited styles |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -2147,9 +2158,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| clear | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| clear | dispatched | KeyboardEvent | MouseEvent |
## `ListItem`
@@ -2217,29 +2228,29 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
-| alert | No | let | No | boolean | false | Set to `true` to enable alert mode |
-| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant |
-| modalHeading | No | let | No | string | undefined | Specify the modal heading |
-| modalLabel | No | let | No | string | undefined | Specify the modal label |
-| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal |
-| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
-| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" eventsto be dispatched when pressing "Enter" | -| secondaryButtonText | No |
let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | -| selectorPrimaryFocus | No |
let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
-| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the modal |
+| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| alert | No | let | No | boolean | false | Set to `true` to enable alert mode |
+| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant |
+| modalHeading | No | let | No | string | undefined | Specify the modal heading |
+| modalLabel | No | let | No | string | undefined | Specify the modal label |
+| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal |
+| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
+| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements |
+| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
+| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
+| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryButtonIcon | No | let | No | any | undefined | Specify the primary button icon |
+| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" eventsto be dispatched when pressing "Enter" | +| secondaryButtonText | No |
let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | +| selectorPrimaryFocus | No |
let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
+| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2288,16 +2299,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
-| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
-| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
-| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | -| secondaryClass | No |
let | No | string | undefined | Specify a class for the secondary button |
-| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
+| primaryButtonIcon | No | let | No | any | undefined | Specify the primary button icon |
+| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
+| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | +| secondaryClass | No |
let | No | string | undefined | Specify a class for the secondary button |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
### Slots
@@ -2365,7 +2376,7 @@ export interface MultiSelectItem {
| 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 |
+| 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 |
@@ -2374,7 +2385,7 @@ export interface MultiSelectItem {
| 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 | +| 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 |
@@ -2408,6 +2419,7 @@ export interface MultiSelectItem {
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
+| input | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
@@ -2437,12 +2449,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- |
-| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
-| title | No | let | No | string | undefined | Specify the title of the icon |
-| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
+| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| icon | No | let | No | any | undefined | Specify the icon to render |
+| title | No | let | No | string | undefined | Specify the title of the icon |
+| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon |
### Slots
@@ -2604,27 +2616,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 | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<OverflowMenuVertical />` | -| open | No |
let | Yes | boolean | false | Set to `true` to open the menu |
-| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
-| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
-| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
-| iconClass | No | let | No | string | undefined | Specify the icon class |
-| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
+| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
+| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
+| icon | No | let | Yes | any | undefined | Specify the icon to render.Defaults to `<OverflowMenuVertical />` | +| open | No |
let | Yes | boolean | false | Set to `true` to open the menu |
+| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
+| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
+| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
+| iconClass | No | let | No | string | undefined | Specify the icon class |
+| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component
this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
### Events
@@ -2655,9 +2667,9 @@ None.
### 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
@@ -2670,24 +2682,25 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
-| page | No | let | Yes | number | 1 | Specify the current page index |
-| totalItems | No | let | No | number | 0 | Specify the total number of items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
-| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
-| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text |
-| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text |
-| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
-| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
-| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
-| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
-| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
-| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| totalItems | No | let | No | number | 0 | Specify the total number of items |
+| pageWindow | No | let | No | number | 1000 | If `totalItems` is a large number, it can affect therendering performance of this component since its value
is used to calculate the number of pages in the native
select dropdown. This value creates a small window of
pages rendered around the current page. By default,
a maximum of 1000 select items are rendered. | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the pagination |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
+| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item text |
+| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\` | Override the item range text |
+| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
+| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
+| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
+| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
+| pageText | No | let | No | (page: number) => string | (page) => \`page ${page.toLocaleString()}\` | Override the page text |
+| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\` | Override the page range text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2915,9 +2928,9 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
-| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> |
### Events
@@ -2956,6 +2969,8 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
@@ -3057,10 +3072,10 @@ export interface RecursiveListNode {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
-| children | No | let | No | Array | [] | Specify the children to render |
-| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
+| nodes | No | let | No | Array | [] | Specify the nodes to render |
+| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render |
### Slots
@@ -3098,24 +3113,24 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
-| value | No | let | Yes | any | "" | Specify the value of the search input |
-| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
-| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
-| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
-| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
-| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
-| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
-| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
-| labelText | No | let | No | string | "" | Specify the label text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<Search />` | -| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input |
+| value | No | let | Yes | any | "" | Specify the value of the search input |
+| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element |
+| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the search input |
+| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant |
+| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
+| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
+| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element |
+| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text |
+| labelText | No | let | No | string | "" | Specify the label text |
+| icon | No | let | No | any | undefined | Specify the icon to render.Defaults to `<Search />` | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
@@ -3208,14 +3223,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | "" | Specify the option text |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
-| 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 | undefined | Specify the option textIf not specified, the value will be used as the text. | +| hidden | No |
let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
@@ -3360,20 +3375,20 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | No | let | No | boolean | false | Set to `true` to select the current link |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | {text} |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | {text} |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -3385,19 +3400,19 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| text | No | let | No | string | undefined | Specify the text |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| text | No | let | No | string | undefined | Specify the text |
+| icon | No | let | No | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -3526,13 +3541,14 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| input | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `SliderSkeleton`
@@ -3574,13 +3590,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `StructuredListBody`
@@ -3962,11 +3978,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| keypress | forwarded | -- |
-| click | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
## `TabsSkeleton`
@@ -4003,15 +4019,15 @@ None.
| interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
| title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| icon | No | let | No | any | undefined | Specify the icon to render |
| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
-| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
### Events
@@ -4051,7 +4067,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
-| value | No | let | Yes | string | "" | Specify the textarea value |
+| value | No | let | Yes | null | string | "" | Specify the textarea value. |
| placeholder | No | let | No | string | "" | Specify the placeholder text |
| cols | No | let | No | number | 50 | Specify the number of cols |
| rows | No | let | No | number | 4 | Specify the number of rows |
@@ -4188,15 +4204,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
-| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | No |
let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
-| persistKey | No | let | No | string | "theme" | Specify the local storage key |
-| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
-| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
-| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
+| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No |
let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
+| persistKey | No | let | No | string | "theme" | Specify the local storage key |
+| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
+| toggle | No | let | No | import("../Toggle/Toggle.svelte").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
+| select | No | let | No | import("../Select/Select.svelte").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
### Slots
@@ -4543,16 +4559,16 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| clear | forwarded | -- |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| keyup | forwarded | -- |
-| keydown | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| clear | dispatched | null |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
## `Tooltip`
@@ -4567,7 +4583,7 @@ None.
| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon |
-| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | +| icon | No |
let | No | any | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | | iconDescription | No |
let | No | string | "" | Specify the ARIA label for the tooltip button |
| iconName | No | let | No | string | "" | Specify the icon name attribute |
| tabindex | No | let | No | string | "0" | Set the button tabindex |
@@ -4577,11 +4593,11 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :---------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> |
-| triggerText | No | -- | {triggerText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :------------------------------------------------------------------ |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} name={iconName} /> |
+| triggerText | No | -- | {triggerText} |
### Events
@@ -4650,7 +4666,7 @@ None.
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| tooltipText | No | let | No | string | "" | Specify the tooltip text.Alternatively, use the "tooltipText" slot | -| icon | No |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| icon | No | let | No | any | undefined | Specify the icon to render |
| disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon |
| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
@@ -4658,10 +4674,10 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" /> |
-| tooltipText | No | -- | {tooltipText} |
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this={icon} /> |
+| tooltipText | No | -- | {tooltipText} |
### Events
@@ -4683,28 +4699,28 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
- icon?: typeof import("svelte").SvelteComponentlet | 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 | -| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of children) { 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 out of the loop if the node is found. 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 | +| nodes | No |
let | No | Array | [] | Provide an array of nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | +| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | ### Slots diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e82d4f2f..7a4e1cdf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,23 +2,10 @@ 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 >=12) -- [Yarn](https://classic.yarnpkg.com/en/docs/install) +- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=20) +- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm) ## Project set-up @@ -39,35 +26,28 @@ git remote -v ### Install -Install the project dependencies: +Install the project dependencies. ```sh -# carbon-components-svelte/ -yarn install +npm install ``` ## Documentation set-up Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally. -First, create a symbolic link at the root of the project folder: +First, create a symbolic link at the root of the project: ```sh -# carbon-components-svelte/ -yarn link +npm link ``` -Go into the `docs` folder: +Then, go into `docs` and link the package. ```sh cd docs -``` - -Link `"carbon-components-svelte"`: - -```sh -yarn link "carbon-components-svelte" -yarn install +npm link "carbon-components-svelte" +npm install ``` If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site. @@ -87,10 +67,10 @@ Preview changes to components from the `src` folder in the documentation website In the `docs` folder, run: ```sh -yarn dev +npm run dev ``` -The site should be served at `http://localhost:3000/` (or the next available port). +The site should be served at http://localhost:5173/ (or the next available port). ### Component Format @@ -134,13 +114,12 @@ export { } from "./ComposedModal"; ``` -### Run `yarn build:docs` +### Run `npm run build:docs` Run the following command to re-generate TypeScript definitions and documentation. ```sh -# carbon-components-svelte/ -yarn build:docs +npm run build:docs ``` ## Submit a Pull Request @@ -171,11 +150,11 @@ The workflow is automatically triggered when pushing a tag that begins with `v` However, maintainers must perform a few things in preparation for a release. -Locally, while on `master` and the branch is clean, run `yarn release`. This command will: +Locally, while on `master` and the branch is clean, run `npm run release`. This command will: - Bump the semantic version in `package.json` - Generate notes in `CHANGELOG.md` -- Run `yarn build:docs` to update the generated documentation +- Run `npm run build:docs` to update the generated documentation This command will not create a commit nor tag. Afterwards, perform the following manually: diff --git a/README.md b/README.md index 350c0028..9433ba03 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ 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,200+ Carbon icons as Svelte components -- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components -- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 +- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components +- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components +- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon ## [Documentation](https://svelte.carbondesignsystem.com) @@ -28,17 +28,18 @@ 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 -D carbon-components-svelte +npm i carbon-components-svelte # pnpm -pnpm i -D carbon-components-svelte +pnpm i carbon-components-svelte + +# Yarn +yarn add carbon-components-svelte + +# Bun +bun add carbon-components-svelte ``` ## Usage @@ -87,37 +88,6 @@ 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 text displayed next to the icon.\nAlternatively, use the named slot \"text\" (e.g., `...
`)",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
@@ -4937,6 +5902,29 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "iconDescription",
+ "kind": "let",
+ "description": "Specify an icon tooltip. The tooltip will not be displayed\nif either the `text` prop or a named slot=\"text\" is used",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "tooltipAlignment",
+ "kind": "let",
+ "description": "Set the alignment of the tooltip relative to the icon.\nOnly applies when `iconDescription` is provided",
+ "type": "\"start\" | \"center\" | \"end\"",
+ "value": "\"center\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "ref",
"kind": "let",
@@ -4976,33 +5964,53 @@
],
"moduleExports": [],
"slots": [
- { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
{
"name": "closeIcon",
"default": false,
- "fallback": "\n {text}\n
",
+ "fallback": "\n {text}\n
",
"slot_props": "{}"
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "a" },
- { "type": "forwarded", "name": "keydown", "element": "a" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "a"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "a"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "Pagination",
@@ -8303,6 +10053,18 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "pageWindow",
+ "kind": "let",
+ "description": "If `totalItems` is a large number, it can affect the\nrendering performance of this component since its value\nis used to calculate the number of pages in the native\nselect dropdown. This value creates a small window of\npages rendered around the current page. By default,\na maximum of 1000 select items are rendered.",
+ "type": "number",
+ "value": "1000",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "disabled",
"kind": "let",
@@ -8356,7 +10118,7 @@
"kind": "let",
"description": "Override the item text",
"type": "(min: number, max: number) => string",
- "value": "(min, max) => `${min}–${max} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8368,7 +10130,7 @@
"kind": "let",
"description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string",
- "value": "(min, max, total) => `${min}–${max} of ${total} item${max === 1 ? \"\" : \"s\"}`",
+ "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8440,7 +10202,7 @@
"kind": "let",
"description": "Override the page text",
"type": "(page: number) => string",
- "value": "(page) => `page ${page}`",
+ "value": "(page) => `page ${page.toLocaleString()}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8452,7 +10214,7 @@
"kind": "let",
"description": "Override the page range text",
"type": "(current: number, total: number) => string",
- "value": "(current, total) => `of ${total} page${total === 1 ? \"\" : \"s\"}`",
+ "value": "(\n current,\n total,\n) =>\n `of ${total.toLocaleString()} page${total === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8478,27 +10240,31 @@
{
"type": "dispatched",
"name": "change",
- "detail": "{ page?: number; pageSize?: number }",
+ "detail": "{\n page?: number;\n pageSize?: number;\n}",
"description": "Dispatched after any user interaction"
},
{
"type": "dispatched",
"name": "click:button--previous",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
},
{
"type": "dispatched",
"name": "click:button--next",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
},
{
"type": "dispatched",
"name": "update",
- "detail": "{ pageSize: number; page: number; }"
+ "detail": "{\n pageSize: number;\n page: number;\n}"
}
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "PaginationNav",
@@ -8595,22 +10361,26 @@
{
"type": "dispatched",
"name": "change",
- "detail": "{ page: number; }",
+ "detail": "{ page: number }",
"description": "fires after every user interaction"
},
{
"type": "dispatched",
"name": "click:button--previous",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
},
{
"type": "dispatched",
"name": "click:button--next",
- "detail": "{ page: number; }"
+ "detail": "{ page: number }"
}
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "nav" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "nav"
+ }
},
{
"moduleName": "PaginationSkeleton",
@@ -8619,13 +10389,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "PasswordInput",
@@ -8892,20 +10682,68 @@
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" },
- { "type": "forwarded", "name": "change", "element": "input" },
- { "type": "forwarded", "name": "input", "element": "input" },
- { "type": "forwarded", "name": "keydown", "element": "input" },
- { "type": "forwarded", "name": "keyup", "element": "input" },
- { "type": "forwarded", "name": "focus", "element": "input" },
- { "type": "forwarded", "name": "blur", "element": "input" },
- { "type": "forwarded", "name": "paste", "element": "input" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "change",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "input",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "keyup",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "focus",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "blur",
+ "element": "input"
+ },
+ {
+ "type": "forwarded",
+ "name": "paste",
+ "element": "input"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "input" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "input"
+ }
},
{
"moduleName": "Popover",
@@ -8997,16 +10835,26 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
{
"type": "dispatched",
"name": "click:outside",
- "detail": "{ target: HTMLElement; }"
+ "detail": "{\n target: HTMLElement;\n}"
}
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressBar",
@@ -9131,7 +10979,11 @@
],
"events": [],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressIndicator",
@@ -9187,16 +11039,46 @@
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
- { "type": "dispatched", "name": "change", "detail": "number" },
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "dispatched",
+ "name": "change",
+ "detail": "number"
+ },
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "ProgressIndicatorSkeleton",
@@ -9230,13 +11112,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "ProgressStep",
@@ -9344,19 +11246,43 @@
{
"name": "__default__",
"default": true,
- "fallback": "{label}
", - "slot_props": "{ props: { class: 'bx--progress-label' } }" + "fallback": "{label}
", + "slot_props": "{\n props: {\n class: \"bx--progress-label\";\n };\n}" } ], "events": [ - { "type": "forwarded", "name": "click", "element": "button" }, - { "type": "forwarded", "name": "mouseover", "element": "button" }, - { "type": "forwarded", "name": "mouseenter", "element": "button" }, - { "type": "forwarded", "name": "mouseleave", "element": "button" }, - { "type": "forwarded", "name": "keydown", "element": "button" } + { + "type": "forwarded", + "name": "click", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "button" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "button" + }, + { + "type": "forwarded", + "name": "keydown", + "element": "button" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "li" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "li" + } }, { "moduleName": "RadioButton", @@ -9491,9 +11417,29 @@ "slot_props": "{}" } ], - "events": [{ "type": "forwarded", "name": "change", "element": "input" }], + "events": [ + { + "type": "forwarded", + "name": "focus", + "element": "input" + }, + { + "type": "forwarded", + "name": "blur", + "element": "input" + }, + { + "type": "forwarded", + "name": "change", + "element": "input" + } + ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonGroup", @@ -9606,7 +11552,11 @@ ], "moduleExports": [], "slots": [ - { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "__default__", + "default": true, + "slot_props": "{}" + }, { "name": "legendText", "default": false, @@ -9615,14 +11565,38 @@ } ], "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": "dispatched", + "name": "change", + "detail": "string | number" + }, + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonSkeleton", @@ -9631,13 +11605,33 @@ "moduleExports": [], "slots": [], "events": [ - { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" } + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioTile", @@ -9752,27 +11746,61 @@ } ], "moduleExports": [], - "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{}" + } + ], "events": [ - { "type": "forwarded", "name": "change", "element": "input" }, - { "type": "forwarded", "name": "keydown", "element": "input" }, - { "type": "forwarded", "name": "click", "element": "label" }, - { "type": "forwarded", "name": "mouseover", "element": "label" }, - { "type": "forwarded", "name": "mouseenter", "element": "label" }, - { "type": "forwarded", "name": "mouseleave", "element": "label" } + { + "type": "forwarded", + "name": "change", + "element": "input" + }, + { + "type": "forwarded", + "name": "keydown", + "element": "input" + }, + { + "type": "forwarded", + "name": "click", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "label" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "label" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "label" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "label" + } }, { "moduleName": "RecursiveList", "filePath": "src/RecursiveList/RecursiveList.svelte", "props": [ { - "name": "children", + "name": "nodes", "kind": "let", - "description": "Specify the children to render", - "type": "Array
Source code:
-
{typeMap[type]}
- {:else if type.startsWith("(")}
-
{/each}
{type}
+
+
{:else}
-
+
{/if}
{prop.value}$1")}.
{/each}
- {:else}
- No description available.
{/if}
+
+ Default value
+
+
+ {#if prop.value === undefined}
+ undefined
+ {:else}
+
Typedefs
{#if component.typedefs.length > 0} -
+ t.ts).join("\n")}
+ />
+
{:else}
No typedefs.
{/if}Slots
{#if component.slots.length > 0} -No slots.
{/if} @@ -173,7 +237,7 @@event.detail type{event.detail}
+
- copy(text)} />
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 5c1848ee..496d0f16 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -31,7 +31,9 @@
import { getContext, afterUpdate } from "svelte";
- const { focusedId, add, update, change } = getContext("OverflowMenu");
+ const { focusedId, add, update, change, items } = getContext("OverflowMenu");
+
+ $: item = $items.find((_) => _.id === id);
add({ id, text, primaryFocus, disabled });
@@ -54,57 +56,59 @@
+
{text}
{:else}