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`
@@ -1086,7 +1093,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input |
+| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
| type | No | let | No | string | "text" | Specify the input type |
| placeholder | No | let | No | string | "" | Specify the input placeholder text |
| pattern | No | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value |
@@ -1167,7 +1174,7 @@ export interface DropdownItem {
| itemToString | No | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
| type | No | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the dropdown field |
+| size | No | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
| 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 dropdown |
| titleText | No | let | No | string | "" | Specify the title text |
@@ -1367,7 +1374,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| size | No | let | No | "sm" | "md" | "lg" | "lg" | Specify the size of button skeleton |
+| size | No | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton |
| iconDescription | No | let | No | string | "" | Specify the ARIA label used for the status icons |
| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
| errorSubject | No | let | No | string | "" | Specify the error subject text |
@@ -1577,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 @@ -1610,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
@@ -1641,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
@@ -1664,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
@@ -1835,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
@@ -1963,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
@@ -1995,7 +2002,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the list box |
+| size | No | let | No | "sm" | "xl" | undefined | Set the size of the list box |
| type | No | let | No | "default" | "inline" | "default" | Set the type of the list box |
| open | No | let | No | boolean | false | Set to `true` to open the list box |
| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
@@ -2151,9 +2158,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| clear | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| clear | dispatched | KeyboardEvent | MouseEvent |
## `ListItem`
@@ -2221,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
@@ -2292,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
@@ -2369,16 +2376,16 @@ export interface MultiSelectItem {
| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
| value | No | let | Yes | string | "" | Specify the multiselect value |
| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
-| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items |
+| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox |
+| 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 | +| 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 |
@@ -2412,6 +2419,7 @@ export interface MultiSelectItem {
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
+| input | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
| paste | forwarded | -- |
@@ -2441,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
@@ -2493,7 +2501,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| value | No | let | Yes | null | number | null | Specify the input value.Use `null` to denote "no value" | -| size | No |
let | No | "sm" | "lg" | undefined | Set the size of the input |
+| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
| step | No | let | No | number | 1 | Specify the step increment |
| max | No | let | No | number | undefined | Specify the maximum value |
| min | No | let | No | number | undefined | Specify the minimum value |
@@ -2608,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" | "lg" | 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
@@ -2659,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
@@ -2674,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
@@ -2760,7 +2769,7 @@ None.
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| type | No | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility |
| value | No | let | Yes | number | string | "" | Specify the input value |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the input |
+| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input |
| placeholder | No | let | No | string | "" | Specify the placeholder text |
| hidePasswordLabel | No | let | No | string | "Hide password" | Specify the hide password label text |
| showPasswordLabel | No | let | No | string | "Show password" | Specify the show password label text |
@@ -2827,24 +2836,6 @@ None.
| :------------ | :--------- | :------------------------------------ |
| click:outside | dispatched | { target: HTMLElement; } |
-## `PopoverContent`
-
-### Props
-
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---- | ----------------- | ----------- |
-| className | No | let | No | -- | null | -- |
-
-### Slots
-
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| -- | Yes | -- | -- |
-
-### Events
-
-None.
-
## `ProgressBar`
### Props
@@ -2937,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
@@ -2978,6 +2969,8 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
@@ -3079,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
@@ -3120,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" | "md" | "lg" | "md" | 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
@@ -3170,7 +3163,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
-| size | No | let | No | "sm" | "md" | "lg" | "md" | Specify the size of the search input |
+| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
### Slots
@@ -3193,7 +3186,7 @@ None.
| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
| selected | No | let | Yes | string | number | undefined | Specify the selected item value |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the select input |
+| size | No | let | No | "sm" | "xl" | undefined | Set the size of the select input |
| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
| 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 select element |
@@ -3230,14 +3223,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ----------------------------------------- |
-| value | No | let | No | string | number | "" | Specify the option value |
-| text | No | let | No | string | "" | Specify the option text |
-| hidden | No | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
-| class | No | let | No | string | undefined | Specify the class of the `option` element |
-| style | No | let | No | string | undefined | Specify the style of the `option` element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| value | No | let | No | string | number | "" | Specify the option value |
+| text | No | let | No | string | undefined | Specify the option textIf not specified, the value will be used as the text. | +| hidden | No |
let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
@@ -3382,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
@@ -3407,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
@@ -3548,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`
@@ -3596,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`
@@ -3967,11 +3961,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | -------------------------------------------- |
-| selected | No | let | Yes | number | 0 | Specify the selected tab index |
-| contained | No | let | No | boolean | false | Set to `true` for tabs to be contained |
-| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
+| selected | No | let | Yes | number | 0 | Specify the selected tab index |
+| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs |
+| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width |
+| iconDescription | No | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon |
+| triggerHref | No | let | No | string | "#" | Specify the tab trigger href attribute |
### Slots
@@ -3982,9 +3978,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
## `TabsSkeleton`
@@ -4021,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
@@ -4069,9 +4067,9 @@ 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 | undefined | Specify the number of cols |
+| cols | No | let | No | number | 50 | Specify the number of cols |
| rows | No | let | No | number | 4 | Specify the number of rows |
| maxCount | No | let | No | number | undefined | Specify the max character count |
| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
@@ -4132,65 +4130,56 @@ 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 |
-| value | No | let | Yes | null | number | string | "" | Specify the input value`value` will be set to `null` if `typeof value === "number"` and `value` is empty | -| size | No |
let | No | "sm" | "md" | "lg" | "md" | Set the size of the input |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variantFor use on $ui-01 backgrounds only. Don't use this to make tile background color same as container background color
The light prop for `TextInput` has been deprecated in favor of the new `Layer` Layer component. It will be removed in the next major release
@deprecated | -| disabled | No |
let | No | boolean | false | Set to `true` to disable the input |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| counter | No | let | No | boolean | false | Set to `true` to enable display the character counter. Requires `maxCount` to be set. |
-| maxCount | No | let | No | number | undefined | Specify the maximum number of characters/words allowedThis is needed in order for `counter` to display | -| 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 |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
-| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
-| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
-| labelAttributes | No | let | No | import('svelte/elements').HTMLLabelAttributes | {} | Set HTML attributes on the `label` element |
-| inputAttributes | No | let | No | import('svelte/elements').HTMLInputAttributes | {} | Set HTML attributes on 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 |
+| value | No | let | Yes | null | number | string | "" | Specify the input value.`value` will be set to `null` if type="number"
and the value is empty. | +| size | No |
let | No | "sm" | "xl" | undefined | Set the size of the input |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| 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 input |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| 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 |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
### Slots
-| Slot name | Default | Props | Fallback |
-| :---------- | :------ | :---- | :------------------------- |
-| helperText | No | -- | {helperText} |
-| invalidText | No | -- | {invalidText} |
-| labelText | No | -- | {labelText} |
-| warnText | No | -- | {warnText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
### Events
-| Event name | Type | Detail |
-| :----------- | :-------- | :----- |
-| click | forwarded | -- |
-| pointerup | forwarded | -- |
-| pointerover | forwarded | -- |
-| pointerenter | forwarded | -- |
-| pointerleave | forwarded | -- |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| keydown | forwarded | -- |
-| keyup | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
-| paste | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------- |
+| change | dispatched | null | number | string |
+| input | dispatched | null | number | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
## `TextInputSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------ | ---------------------------------------------------------- |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
-| divAttributes | No | let | No | import('svelte/elements').HTMLDivAttributes | {} | Specify the div HTML attributes for the skeleton container |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -4198,33 +4187,32 @@ None.
### Events
-| Event name | Type | Detail |
-| :----------- | :-------- | :----- |
-| click | forwarded | -- |
-| pointerup | forwarded | -- |
-| pointerover | forwarded | -- |
-| pointerenter | forwarded | -- |
-| pointerleave | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `Theme`
### Types
```ts
-export type CarbonTheme = "white" | "g10" | "g90" | "g100";
+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
@@ -4293,7 +4281,7 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100";
| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| value | No | let | Yes | string | "" | Specify the input value |
-| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the input |
+| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the input |
| placeholder | No | let | No | string | "hh:mm" | Specify the input placeholder text |
| pattern | No | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element |
| maxlength | No | let | No | number | 5 | Specify the `maxlength` input attribute |
@@ -4400,22 +4388,24 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ----------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
-| size | No | let | No | "md" | "sm" | "md" | Specify the toggle size |
-| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input |
-| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state |
-| labelB | No | let | No | string | "On" | Specify the label for the toggled state |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
+| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size |
+| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input |
+| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state |
+| labelB | No | let | No | string | "On" | Specify the label for the toggled state |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------- |
+| labelA | No | -- | {labelA} |
+| labelB | No | -- | {labelB} |
| labelText | No | -- | {labelText} |
### Events
@@ -4432,6 +4422,31 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100";
| focus | forwarded | -- |
| blur | forwarded | -- |
+## `ToggleSkeleton`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
+| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
## `Toolbar`
### Props
@@ -4544,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`
@@ -4568,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 |
@@ -4578,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
@@ -4651,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 |
@@ -4659,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
@@ -4684,28 +4699,28 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
text: any;
- icon?: typeof import("svelte").SvelteComponentlet | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
-| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | -| children | No |
let | No | Array | [] | Provide an array of children nodes to render |
-| size | No | let | No | "xs" | "sm" | "sm" | Specify the TreeView size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | -| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | -| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No |
let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | +| nodes | No |
let | No | Array | [] | Provide an array of nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | +| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | ### Slots diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 49abba20..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 `npm run build:docs`](#run-npm-run-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 >=18) -- [npm](https://docs.npmjs.com/cli) (bundled with Node.js) +- [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,10 +26,9 @@ git remote -v ### Install -Install the project dependencies: +Install the project dependencies. ```sh -# carbon-components-svelte/ npm install ``` @@ -50,22 +36,16 @@ npm install 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/ npm link ``` -Go into the `docs` folder: +Then, go into `docs` and link the package. ```sh cd docs -``` - -Link `"carbon-components-svelte"`: - -```sh npm link "carbon-components-svelte" npm install ``` @@ -90,7 +70,7 @@ In the `docs` folder, run: 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 @@ -139,7 +119,6 @@ export { Run the following command to re-generate TypeScript definitions and documentation. ```sh -# carbon-components-svelte/ npm run build:docs ``` @@ -171,15 +150,7 @@ The workflow is automatically triggered when pushing a tag that begins with `v` However, maintainers must perform a few things in preparation for a release. - - -While performing a prerelease: - -1. manually bump `package.json`'s `version` key to your target version. -2. ensure the `--first-release` flag is passed to the `standard-version` command. -3. Run `npm run release` then continue below. - -For regular releases, while on `master` and the branch is clean, run `npm run release`. This command will: +Locally, while on `master` and the branch is clean, run `npm run release`. This command will: - Bump the semantic version in `package.json` - Generate notes in `CHANGELOG.md` diff --git a/README.md b/README.md index 224fcb5c..9433ba03 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ Design systems facilitate design and development through reuse, consistency, and The Carbon Svelte portfolio also includes: -- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,200+ Carbon icons as Svelte components -- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,100+ Carbon pictograms as Svelte components -- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3 +- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components +- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components +- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3 - **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon ## [Documentation](https://svelte.carbondesignsystem.com) @@ -28,27 +28,29 @@ 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 ### Styling -Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports four themes (2 light, 2 dark). +Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark). - **white.css**: Default Carbon theme (light) - **g10.css**: Gray 10 theme (light) +- **g80.css**: Gray 80 theme (dark) - **g90.css**: Gray 90 theme (dark) - **g100.css**: Gray 100 theme (dark) - **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) @@ -59,6 +61,7 @@ The compiled CSS is generated from the following `.scss` files: - [css/white.scss](css/white.scss) - [css/g10.scss](css/g10.scss) +- [css/g80.scss](css/g80.scss) - [css/g90.scss](css/g90.scss) - [css/g100.scss](css/g100.scss) - [css/all.scss](css/all.scss) @@ -72,6 +75,9 @@ import "carbon-components-svelte/css/white.css"; // Gray 10 theme import "carbon-components-svelte/css/g10.css"; +// Gray 80 theme +import "carbon-components-svelte/css/g80.css"; + // Gray 90 theme import "carbon-components-svelte/css/g90.css"; @@ -82,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,
@@ -4941,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",
@@ -4980,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",
@@ -8307,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",
@@ -8360,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,
@@ -8372,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,
@@ -8444,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,
@@ -8456,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,
@@ -8482,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",
@@ -8599,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",
@@ -8623,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",
@@ -8639,7 +10425,7 @@
"name": "size",
"kind": "let",
"description": "Set the size of the input",
- "type": "\"sm\" | \"lg\"",
+ "type": "\"sm\" | \"xl\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
@@ -8896,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",
@@ -9001,37 +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" }
- },
- {
- "moduleName": "PopoverContent",
- "filePath": "src/Popover/PopoverContent.svelte",
- "props": [
- {
- "name": "className",
- "kind": "let",
- "value": "null",
- "isFunction": false,
- "isFunctionDeclaration": false,
- "isRequired": false,
- "constant": false,
- "reactive": false
- }
- ],
- "moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
- "events": [],
- "typedefs": [],
- "rest_props": { "type": "Element", "name": "span" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressBar",
@@ -9156,7 +10979,11 @@
],
"events": [],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "ProgressIndicator",
@@ -9212,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",
@@ -9255,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",
@@ -9369,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", @@ -9516,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", @@ -9631,7 +11552,11 @@ ], "moduleExports": [], "slots": [ - { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "__default__", + "default": true, + "slot_props": "{}" + }, { "name": "legendText", "default": false, @@ -9640,14 +11565,38 @@ } ], "events": [ - { "type": "dispatched", "name": "change", "detail": "string | number" }, - { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" } + { + "type": "dispatched", + "name": "change", + "detail": "string | number" + }, + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonSkeleton", @@ -9656,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", @@ -9777,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:
-
@@ -95,18 +111,29 @@
{type}
{:else if type in typeMap}
-
{/each}
{typeMap[type]}
- {:else if type.startsWith("(")}
- {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/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 13a5526a..14767a46 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -16,7 +16,9 @@
{#if framed}
-
+
{/if}
-
Content loaded in an iframe
+
-
+
{#if multiple}
{#each api_components as component (component.moduleName)}
-
{#if framed}
-
+
{:else}
-
+ copy(text)}>
{@html code}
@@ -47,10 +50,10 @@
diff --git a/docs/src/global.css b/docs/src/global.css
index 1925c3e5..165b2855 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -1,11 +1,20 @@
html[theme="g90"] .code-override {
- border: 1px solid var(--bx-border-subtle-01);
+ border: 1px solid var(--cds-ui-03);
}
+.prose > pre,
.code-override .bx--snippet {
+ /** Docs code snippet is always dark mode */
+ color-scheme: dark;
max-width: none;
}
+.prose > pre {
+ padding: 1rem;
+ margin-bottom: 1rem;
+}
+
+.prose > pre,
.code-override .bx--copy-btn,
.code-override .bx--snippet,
.code-override button.bx--btn.bx--snippet-btn--expand {
@@ -22,10 +31,11 @@ html[theme="g90"] .code-override {
fill: #f4f4f4;
}
+.prose > pre,
.code-override .bx--snippet-container pre {
- font-size: var(--bx-code-02-font-size);
- line-height: var(--bx-code-02-line-height);
- letter-spacing: var(--bx-code-02-letter-spacing);
+ font-size: var(--cds-code-02-font-size);
+ line-height: var(--cds-code-02-line-height);
+ letter-spacing: var(--cds-code-02-letter-spacing);
cursor: text;
}
@@ -43,6 +53,18 @@ html[theme="g90"] .code-override {
color: #6ea6ff;
}
+/* Override syntax highlighting for light theme inline code .*/
+[theme="white"] .code-override-inline .token,
+[theme="g10"] .code-override-inline .token {
+ color: var(--cds-text-01, #161616);
+}
+
+/** Gray 80 is the "lighted" dark theme. Ensure the background is dark. */
+[theme="g80"] .code-override-inline {
+ background-color: #262626;
+}
+
+.token.builtin,
.token.attr-name {
color: #3ddbd9; /* teal 30 */
}
@@ -118,7 +140,7 @@ html[theme="g90"] .code-override {
}
.prose .toc {
- margin-bottom: var(--bx-spacing-05);
+ margin-bottom: var(--cds-layout-01);
}
.table {
@@ -126,9 +148,9 @@ html[theme="g90"] .code-override {
max-height: calc(100vh - 3rem);
top: 3rem;
margin-top: -3rem;
- padding-top: var(--bx-spacing-05);
- padding-bottom: var(--bx-spacing-05);
- padding-left: var(--bx-spacing-08);
+ padding-top: var(--cds-spacing-05);
+ padding-bottom: var(--cds-spacing-05);
+ padding-left: var(--cds-spacing-08);
overflow-y: auto;
}
@@ -149,7 +171,7 @@ html[theme="g90"] .code-override {
.preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] {
- outline: 1px solid var(--bx-interactive);
+ outline: 1px solid var(--cds-interactive-04);
}
[data-outline] {
@@ -157,7 +179,7 @@ html[theme="g90"] .code-override {
}
[data-outline] ~ [data-outline] {
- margin-top: var(--bx-spacing-08);
+ margin-top: var(--cds-spacing-08);
}
#select-theme {
@@ -169,46 +191,46 @@ html[theme="g90"] .code-override {
}
.prose .toc {
- margin-bottom: var(--bx-spacing-05);
+ margin-bottom: var(--cds-layout-01);
}
.code-01 {
- font-size: var(--bx-code-01-font-size);
- font-weight: var(--bx-code-01-font-weight);
- letter-spacing: var(--bx-code-01-letter-spacing);
- line-height: var(--bx-code-01-line-height);
+ font-size: var(--cds-code-01-font-size);
+ font-weight: var(--cds-code-01-font-weight);
+ letter-spacing: var(--cds-code-01-letter-spacing);
+ line-height: var(--cds-code-01-line-height);
}
-.body-compact-01 {
- font-size: var(--bx-body-compact-01-font-size);
- font-weight: var(--bx-body-compact-01-font-weight);
- letter-spacing: var(--bx-body-compact-01-letter-spacing);
- line-height: var(--bx-body-compact-01-line-height);
+.body-short-01 {
+ font-size: var(--cds-body-short-01-font-size);
+ font-weight: var(--cds-body-short-01-font-weight);
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
+ line-height: var(--cds-body-short-01-line-height);
}
.bx--col > h1 {
- font-size: var(--bx-fluid-heading-05-font-size);
- font-weight: var(--bx-fluid-heading-05-font-weight);
- letter-spacing: var(--bx-fluid-heading-05-letter-spacing);
- line-height: var(--bx-fluid-heading-05-line-height);
- margin-bottom: var(--bx-spacing-05);
+ font-size: var(--cds-expressive-heading-05-font-size);
+ font-weight: var(--cds-expressive-heading-05-font-weight);
+ letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+ line-height: var(--cds-expressive-heading-05-line-height);
+ margin-bottom: var(--cds-layout-01);
}
.big-paragraph {
- font-size: var(--bx-fluid-heading-03-font-size);
- font-weight: var(--bx-fluid-heading-03-font-weight);
- letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
- line-height: var(--bx-fluid-heading-03-line-height);
- margin-top: var(--bx-spacing-07);
- margin-bottom: var(--bx-spacing-12);
+ font-size: var(--cds-expressive-heading-03-font-size);
+ font-weight: var(--cds-expressive-heading-03-font-weight);
+ letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+ line-height: var(--cds-expressive-heading-03-line-height);
+ margin-top: var(--cds-layout-03);
+ margin-bottom: var(--cds-layout-06);
}
.big-link,
.bx--col > .big-paragraph > code {
- font-size: var(--bx-fluid-heading-03-font-size);
- font-weight: var(--bx-fluid-heading-03-font-weight);
- letter-spacing: var(--bx-fluid-heading-03-letter-spacing);
- line-height: var(--bx-fluid-heading-03-line-height);
+ font-size: var(--cds-expressive-heading-03-font-size);
+ font-weight: var(--cds-expressive-heading-03-font-weight);
+ letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+ line-height: var(--cds-expressive-heading-03-line-height);
}
.bx--col > p {
@@ -216,32 +238,32 @@ html[theme="g90"] .code-override {
}
.bx--col > p > code {
- font-size: var(--bx-code-02-font-size);
- font-weight: var(--bx-code-02-font-weight);
- line-height: var(--bx-code-02-line-height);
- letter-spacing: var(--bx-code-02-letter-spacing);
- background-color: var(--bx-layer-accent-01);
+ font-size: var(--cds-code-02-font-size);
+ font-weight: var(--cds-code-02-font-weight);
+ line-height: var(--cds-code-02-line-height);
+ letter-spacing: var(--cds-code-02-letter-spacing);
+ background-color: var(--cds-ui-03);
border-radius: 0.25rem;
- padding: 0 var(--bx-spacing-02);
+ padding: 0 var(--cds-spacing-02);
}
[class*="bx--col"] > h2,
.bx--tab-content > h2 {
- font-size: var(--bx-fluid-heading-04-font-size);
- font-weight: var(--bx-fluid-heading-04-font-weight);
- letter-spacing: var(--bx-fluid-heading-04-letter-spacing);
- line-height: var(--bx-fluid-heading-04-line-height);
- padding-top: var(--bx-spacing-07);
- margin-bottom: var(--bx-spacing-05);
+ font-size: var(--cds-expressive-heading-04-font-size);
+ font-weight: var(--cds-expressive-heading-04-font-weight);
+ letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
+ line-height: var(--cds-expressive-heading-04-line-height);
+ padding-top: var(--cds-layout-03);
+ margin-bottom: var(--cds-layout-01);
}
.bx--col > h4 {
- font-size: var(--bx-fluid-heading-02-font-size);
- font-weight: var(--bx-fluid-heading-02-font-weight);
- letter-spacing: var(--bx-fluid-heading-02-letter-spacing);
- line-height: var(--bx-fluid-heading-02-line-height);
- padding-top: var(--bx-spacing-09);
- margin-bottom: var(--bx-spacing-05);
+ font-size: var(--cds-expressive-heading-02-font-size);
+ font-weight: var(--cds-expressive-heading-02-font-weight);
+ letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
+ line-height: var(--cds-expressive-heading-02-line-height);
+ padding-top: var(--cds-layout-04);
+ margin-bottom: var(--cds-layout-01);
}
.bx--col > h2,
@@ -252,5 +274,5 @@ html[theme="g90"] .code-override {
}
.bx--col > p {
- margin-bottom: var(--bx-spacing-06);
+ margin-bottom: var(--cds-layout-02);
}
diff --git a/docs/src/index.js b/docs/src/index.js
index d95d8e46..67d5f68b 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,5 +1,5 @@
import App from "./App.svelte";
-import "carbon-components-svelte/css/all.css";
+import "../../css/all.css";
import "./global.css";
const app = new App({ target: document.body });
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index fafdc502..77844c98 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -29,7 +29,7 @@
// TODO: `find` is not supported in IE
$: api_components = components.map((i) =>
- COMPONENT_API.components.find((_) => _.moduleName === i)
+ COMPONENT_API.components.find((_) => _.moduleName === i),
);
$: multiple = api_components.length > 1;
@@ -37,7 +37,7 @@
const searchParams = new URLSearchParams(window.location.search);
const current_theme = searchParams.get("theme");
- if (["white", "g10", "g90", "g100"].includes(current_theme)) {
+ if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
theme.set(current_theme);
}
});
@@ -62,7 +62,7 @@
// TODO: [refactor] read from package.json value
$: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
- multiple
+ multiple,
)}`;
@@ -83,10 +83,11 @@
id="select-theme"
inline
labelText="Theme"
- bind:selected="{$theme}"
+ bind:selected={$theme}
>
+
+
+
+
+
+
+
-
+
Carbon Components Svelte
+
Carbon Svelte portfolio
-
+
{#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
{child.title}
{#if deprecated.includes(child.title)}
diff --git a/docs/src/pages/components/Accordion.svx b/docs/src/pages/components/Accordion.svx
index 62f5ec90..a42735db 100644
--- a/docs/src/pages/components/Accordion.svx
+++ b/docs/src/pages/components/Accordion.svx
@@ -10,8 +10,15 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
import Preview from "../../components/Preview.svelte";
+`Accordion` creates a vertically stacked list of expandable sections that show or hide content. It supports custom titles, different sizes, and various states including disabled and skeleton loading.
+
## Default
+Use the `Accordion` and `AccordionItem` components to compose a collapsible list of
+items.
+
+By default, the chevron icon is on the right side of the accordion item.
+
{#each api_components as component (component.moduleName)}
-
{/each}
{:else}
- Examples
404
Page not found.
- Return home
+ Return home
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 17ca12ef..c88eb2bb 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -52,7 +52,7 @@
$: isMobile = innerWidth < 1056;
$: components = $layout.children.filter(
- (child) => child.title === "components"
+ (child) => child.title === "components",
)[0];
$beforeUrlChange(() => {
@@ -65,7 +65,7 @@
v{process.env.VERSION || ""}
@@ -111,17 +153,17 @@
bind:value
bind:active
placeholder="Search"
- results="{results}"
- on:select="{(e) => {
+ {results}
+ on:select={(e) => {
$goto(e.detail.selectedResult.href);
- }}"
+ }}
/>
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -27,6 +34,10 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
## Left-aligned chevron
+The chevron icon can be aligned to the left side of the accordion item by setting
+the `align` prop to "start". This provides an alternative visual style while
+maintaining the same functionality.
+
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -42,6 +53,9 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
## Custom title slot
+Customize the title content by using the `title` slot instead of the `title` prop.
+This allows for more complex title layouts with multiple elements.
+
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -84,13 +101,19 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
## Programmatic example
-This example demonstrates how a list of items can be programmatically expanded and collapsed.
+This example demonstrates how to programmatically control the accordion items using
+the `bind:open` directive. Expand and collapse items based on user
+interactions or application state.
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -120,6 +147,9 @@ This example demonstrates how a list of items can be programmatically expanded a
## Disabled
+Set the `disabled` prop on the `Accordion` component to disable all items at once.
+This prevents users from expanding or collapsing any items in the accordion.
+
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -135,6 +165,10 @@ This example demonstrates how a list of items can be programmatically expanded a
## Disabled (item)
+Individual accordion items can be disabled by setting the `disabled` prop on
+specific `AccordionItem` components. This allows for more granular control over
+which items are interactive.
+
Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
@@ -150,25 +184,45 @@ This example demonstrates how a list of items can be programmatically expanded a
## Skeleton
+The skeleton state provides a loading placeholder for the accordion. It displays a
+simplified version of the component while content is being loaded.
+
- You must provide an iconDescription for the button tooltip.
+ Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
- You must provide an iconDescription for the button tooltip.
+ Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
- Expressive styles only work with the default, "lg", and "xl" button sizes.
+ Use expressive styles with default, "lg", or "xl" button sizes.
- If using bind:group, bind:checked will only support one-way binding.
+ When using bind:group, bind:checked only supports one-way binding.
@@ -43,15 +55,19 @@ components: ["ContentSwitcher", "Switch"]
-## Large size
+## Extra-large size
-Every
-headers object must have a unique "key" property.Every
+ rows object must have a unique "id" property.
+ This component is keyed for performance.
+
+ Every headers object must have a unique "key" property.
+
Every rows object must have a unique "id" property.
+ Custom column widths do not work with a sticky header.
@@ -340,9 +337,7 @@ A [table-layout: fixed](https://developer.mozilla.org/en-US/docs/Web/CSS/table-l
## Sticky header
-Set `stickyHeader` to `true` for the header to be fixed in place.
-
-A maximum height will applied to the datatable to force a scrollbar.
+Set `stickyHeader` to `true` to fix the header in place. This adds a maximum height to force scrolling.
@@ -21,25 +17,27 @@ Specify [flatpickr options](https://flatpickr.js.org/options/) through the `flat
## Single
-By default, the `flatpickr` option `static` is set to `true` so that the calendar is positioned inside the wrapper and next to the input element. This is required for the calendar position to work inside a [Modal](/components/Modal).
-
-Set `flatpickrProps.static` to `false` to opt out of this behavior.
+Set `datePickerType` to `"single"` for single date selection.
Every
@@ -15,25 +17,33 @@ components: ["Dropdown", "DropdownSkeleton"]
## Default
+Use the `Dropdown` component to create a select input with a dropdown menu. Each item
+must have a unique `id` property.
+
items object must have a unique "id" property.
@@ -25,7 +33,8 @@ It's unexpanded by default.
## Custom tile heights
-Set a custom height for the tiles on the "above" and "below" slots.
+Set custom heights for the tile content using CSS. This is useful when you need to
+control the exact dimensions of the visible and hidden content.
Above the fold content here
@@ -34,6 +43,9 @@ Set a custom height for the tiles on the "above" and "below" slots.
## Expanded
+Display the tile in its expanded state by default by setting the `expanded` prop to
+`true`.
+
Above the fold content here
Below the fold content here
@@ -41,6 +53,9 @@ Set a custom height for the tiles on the "above" and "below" slots.
## Light variant
+Use the light variant for expandable tiles on dark backgrounds by setting the
+`light` prop to `true`.
+
Above the fold content here
Below the fold content here
@@ -48,6 +63,9 @@ Set a custom height for the tiles on the "above" and "below" slots.
## With icon labels
+Customize the expand/collapse button labels using the `tileExpandedLabel` and
+`tileCollapsedLabel` props.
+
Above the fold content here
Below the fold content here
@@ -55,10 +73,12 @@ Set a custom height for the tiles on the "above" and "below" slots.
## With interactive content
-For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
+Handle interactive content within the tile by preventing event propagation. This
+ensures that clicks on interactive elements don't trigger the tile's expand/collapse
+behavior.
+
console.log("Hello world")}>
Native element
diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index e080668f..37e30df5 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -7,23 +7,28 @@ components: ["FileUploaderButton", "FileUploader", "FileUploaderDropContainer",
import Preview from "../../components/Preview.svelte";
+The `FileUploader` components provide a complete solution for file uploads, including
+a button trigger, drag-and-drop container, and file list display. The components
+support various states, file validation, and customization options.
+
## File uploader (button-only)
-By default, the file uploader only accepts one file.
-
-Set `multiple` to `true` for multiple files to be accepted.
+Create a simple file upload button using `FileUploaderButton`. By default, it
+accepts a single file. Set `multiple` to `true` to allow multiple file selection.