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
@@ -2355,43 +2366,43 @@ export interface MultiSelectItem {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
-| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
-| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
-| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
-| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| value | No | let | Yes | string | "" | Specify the multiselect value |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
-| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items |
-| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input |
-| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
-| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
-| filterable | No | let | No | boolean | false | Set to `true` to filter items |
-| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | -| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
-| locale | No | let | No | string | "en" | Specify the locale |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | -| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | -| titleText | No |
let | No | string | "" | Specify the title text |
-| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the list box label |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the select |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
+| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
+| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
+| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | No | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
+| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
+| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
+| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
+| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | No | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | No | let | No | (item: MultiSelectItem, value: string) => boolean | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | +| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
+| locale | No | let | No | string | "en" | Specify the locale |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | +| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No |
let | No | string | "" | Specify the title text |
+| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the select |
### Slots
@@ -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
@@ -2937,7 +2950,7 @@ None.
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| checked | No | let | Yes | boolean | false | Set to `true` to check the radio button |
-| value | No | let | No | string | "" | Specify the value of the radio button |
+| value | No | let | No | string | number | "" | Specify the value of the radio button |
| disabled | No | let | No | boolean | false | Set to `true` to disable the radio button |
| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
@@ -2956,6 +2969,8 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
@@ -2964,7 +2979,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
-| selected | No | let | Yes | string | undefined | Set the selected radio button value |
+| selected | No | let | Yes | string | number | undefined | Set the selected radio button value |
| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
@@ -2983,13 +2998,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| change | dispatched | string | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `RadioButtonSkeleton`
@@ -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,12 +3223,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | "" | Specify the option text |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| value | No | let | No | string | number | "" | Specify the option value |
+| text | No | let | No | string | undefined | Specify the option textIf not specified, the value will be used as the text. | +| hidden | No |
let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
@@ -3358,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
@@ -3383,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
@@ -3524,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`
@@ -3572,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`
@@ -3960,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`
@@ -4001,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
@@ -4049,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 |
@@ -4186,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
@@ -4541,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`
@@ -4565,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 |
@@ -4575,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
@@ -4648,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 |
@@ -4656,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
@@ -4681,33 +4699,35 @@ 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 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No |
let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | +| nodes | No |
let | No | Array | [] | Provide an array of nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | +| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- |
{labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
+| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
+| labelText | No | -- | {labelText} |
### Events
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index befc6bb8..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
@@ -165,27 +144,44 @@ The following items only apply to project maintainers.
### Release
-Locally, while on `master` and the branch is clean, run `yarn release`. This command will:
+This library is published to NPM with [provenance](https://docs.npmjs.com/generating-provenance-statements) via a [GitHub workflow](https://github.com/carbon-design-system/carbon-components-svelte/blob/master/.github/workflows/release.yml).
-- Build library and docs
-- Bump package.json version
-- Add notes to Changelog
+The workflow is automatically triggered when pushing a tag that begins with `v` (e.g., `v0.81.1`).
+
+However, maintainers must perform a few things in preparation for a release.
+
+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 `npm run build:docs` to update the generated documentation
This command will not create a commit nor tag. Afterwards, perform the following manually:
```sh
-# 1. Stage prepared files for a commit
-git add .
+# 1. Commit the changes using the new version as the commit message.
+git commit -am "v0.81.1"
-# 2. Commit based on the current version, either manually or with jq
-git commit -m "v$(jq -r '.version' package.json)"
+# 2. Create a tag.
+git tag v0.81.1
-# 3. Create a tag based on the current version, either manually or with `jq`:
-git tag "v$(jq -r '.version' package.json)"
-
-# 4. Push branch and tag, then publish
-git push origin master [tag]
-yarn publish
-
-# 5. Generate release notes on GitHub, and comment on issues and pull requests
+# 3. Push the tag to the remote.
+# This will trigger the `release.yml` workflow to publish a new package to NPM (with provenance).
+git push origin v0.81.1
+```
+
+If all goes as expected, the [`release.yml` workflow](https://github.com/carbon-design-system/carbon-components-svelte/actions/workflows/release.yml) should trigger a new run and publish the new version to NPM.
+
+### Post-release checklist
+
+After confirming that the new release is published to NPM, perform the following:
+
+1. Create a [new release](https://github.com/carbon-design-system/carbon-components-svelte/releases/new) on GitHub. Click "Generate release notes" to automatically list changes by commit with the relevant Pull Request and author metadata. You may manually remove notes that are not relevant to the release (e.g., CI changes).
+
+2. Publish the release as the latest release.
+
+3. As good practice, visit the Pull Request and/or issue for each commit and manually confirm that it's been released. This is helpful for future readers to understand what version includes the new feature or fix.
+
+```md
+Released in [v0.81.1](https://github.com/carbon-design-system/carbon-components-svelte/releases/tag/v0.81.1).
```
diff --git a/README.md b/README.md
index af066fbc..9433ba03 100644
--- a/README.md
+++ b/README.md
@@ -13,12 +13,12 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,000+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,000+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
-## [Documentation](https://carbon-components-svelte.onrender.com)
+## [Documentation](https://svelte.carbondesignsystem.com)
Other forms of documentation are auto-generated:
@@ -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", @@ -9366,7 +11292,7 @@ "name": "value", "kind": "let", "description": "Specify the value of the radio button", - "type": "string", + "type": "string | number", "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, @@ -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", @@ -9503,7 +11449,7 @@ "name": "selected", "kind": "let", "description": "Set the selected radio button value", - "type": "string", + "type": "string | number", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -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" }, - { "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}