let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected |
-| selectable | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds |
let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded |
-| expandable | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | -| headers |
let | No | DataTableHeader[] | [] | Specify the data table headers |
-| rows | let | No | DataTableRow[] | [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | -| size |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
-| title | let | No | string | "" | Specify the title of the data table |
-| description | let | No | string | "" | Specify the description of the data table |
-| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
-| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
-| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion |
-| nonExpandableRowIds | let | No | DataTableRowId[] | [] | Specify the ids for rows that should not be expandable |
-| radio | let | No | boolean | false | Set to `true` for the radio selection variant |
-| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection |
-| nonSelectableRowIds | let | No | DataTableRowId[] | [] | Specify the ids of rows that should not be selectable |
-| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
-| pageSize | let | No | number | 0 | Specify the number of items to display in a page |
-| page | let | No | number | 0 | Set to `number` to set current page |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected |
+| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variantAutomatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No |
let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded |
+| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variantAutomatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No |
let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
+| sortKey | No | let | Yes | DataTableKey|
| null | Specify the header key to sort by |
+| headers | No | let | No | ReadonlyArray> | [] | Specify the data table headers |
+| rows | No | let | No | ReadonlyArray|
| [] | Specify the rows the data table should renderkeys defined in `headers` are used for the row ids | +| size | No |
let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
+| title | No | let | No | string | "" | Specify the title of the data table |
+| description | No | let | No | string | "" | Specify the description of the data table |
+| inputName | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify a name attribute for the input elementsin a selectable data table (radio or checkbox).
When the table is inside a form, this name will
be included in the form data on submit. | +| zebra | No |
let | No | boolean | false | Set to `true` to use zebra styles |
+| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
+| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion |
+| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable |
+| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant |
+| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection |
+| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable |
+| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
+| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
+| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page |
+| page | No | let | No | number | 0 | Set to `number` to set current page |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ |
-| -- | Yes | -- | -- |
-| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value) : cell.value} |
-| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
-| description | No | -- | {description} |
-| expanded-row | No | { row: DataTableRow; } | -- |
-| title | No | -- | {title} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :----------------------------------------------------------------------------------------- | :----------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| cell | No | { row: Row; cell: DataTableCell; rowIndex: number; cellIndex: number; }
| {cell.display ? cell.display(cell.value, row) : cell.value} |
+| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} |
+| description | No | -- | {description} |
+| expanded-row | No | { row: Row; } | -- |
+| title | No | -- | {title} |
### Events
-| Event name | Type | Detail |
-| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
-| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } |
-| click:header--expand | dispatched | { expanded: boolean; } |
-| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } |
-| click:row | dispatched | DataTableRow |
-| mouseenter:row | dispatched | DataTableRow |
-| mouseleave:row | dispatched | DataTableRow |
-| click:row--expand | dispatched | { expanded: 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`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
-| columns | let | No | number | 5 | Specify the number of columnsSuperseded by `headers` if `headers` is a non-empty array | -| rows |
let | No | number | 5 | Specify the number of rows |
-| size | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table |
-| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
-| showHeader | let | No | boolean | true | Set to `false` to hide the header |
-| headers | let | No | string[] | Partial[] | [] | Set the column headersSupersedes `columns` if value is a non-empty array | -| showToolbar |
let | No | boolean | true | Set to `false` to hide the toolbar |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
+| columns | No | let | No | number | 5 | Specify the number of columnsSuperseded by `headers` if `headers` is a non-empty array | +| rows | No |
let | No | number | 5 | Specify the number of rows |
+| size | No | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table |
+| zebra | No | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
+| showHeader | No | let | No | boolean | true | Set to `false` to hide the header |
+| headers | No | let | No | ReadonlyArray> | [] | Set the column headersSupersedes `columns` if value is a non-empty array | +| showToolbar | No |
let | No | boolean | true | Set to `false` to hide the toolbar |
### Slots
@@ -1031,20 +1055,20 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
-| valueTo | let | Yes | string | "" | Specify the date picker end date value (to)Only works with the "range" date picker type | -| valueFrom |
let | Yes | string | "" | Specify the date picker start date value (from)Only works with the "range" date picker type | -| value |
let | Yes | number | string | "" | Specify the date picker input value |
-| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type |
-| dateFormat | let | No | string | "m/d/Y" | Specify the date format |
-| maxDate | let | No | null | string | Date | null | Specify the maximum date |
-| minDate | let | No | null | string | Date | null | Specify the minimum date |
-| locale | let | No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key | "en" | Specify the locale |
-| short | let | No | boolean | false | Set to `true` to use the short variant |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element |
-| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instancehttps://flatpickr.js.org/options | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | +| valueTo | No |
let | Yes | string | "" | Specify the date picker end date value (to)Only works with the "range" date picker type | +| valueFrom | No |
let | Yes | string | "" | Specify the date picker start date value (from)Only works with the "range" date picker type | +| value | No |
let | Yes | number | string | "" | Specify the date picker input value |
+| datePickerType | No | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type |
+| dateFormat | No | let | No | string | "m/d/Y" | Specify the date format |
+| maxDate | No | let | No | null | string | Date | null | Specify the maximum date |
+| minDate | No | let | No | null | string | Date | null | Specify the minimum date |
+| locale | No | let | No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key | "en" | Specify the locale |
+| short | No | let | No | boolean | false | Set to `true` to use the short variant |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element |
+| flatpickrProps | No | let | No | import("flatpickr/dist/types/options").Options | { static: true } | Override the options passed to the Flatpickr instance.@see https://flatpickr.js.org/options | ### Slots @@ -1066,24 +1090,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | -| ref |
let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| type | let | No | string | "text" | Specify the input type |
-| placeholder | let | No | string | "" | Specify the input placeholder text |
-| pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | let | No | string | "" | Specify the helper text |
-| iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| name | let | No | string | undefined | Set a name 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 |
+| 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 |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| iconDescription | No | let | No | string | "" | Specify the ARIA label for the calendar icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| 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 |
+| name | No | let | No | string | undefined | Set a name for the input element |
### Slots
@@ -1099,15 +1123,16 @@ None.
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `DatePickerSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- |
-| range | let | No | boolean | false | Set to `true` to use the range variant |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ----------------------------------------- |
+| range | No | let | No | boolean | false | Set to `true` to use the range variant |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
### Slots
@@ -1134,35 +1159,35 @@ export type DropdownItemText = string;
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
+ disabled?: boolean;
}
```
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| inline | let | Yes | boolean | false | Set to `true` to use the inline variant |
-| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id |
-| items | let | No | DropdownItem[] | [] | Set the dropdown items |
-| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
-| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
-| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
-| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
-| titleText | let | No | string | "" | Specify the title text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| helperText | let | No | string | "" | Specify the helper text |
-| label | let | No | string | undefined | Specify the list box label |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | -| id |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | undefined | Specify a name attribute for the list box |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| selectedId | Yes | let | Yes | DropdownItemId | undefined | Specify the selected item id |
+| items | No | let | No | ReadonlyArray | [] | Set the dropdown items |
+| 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" | "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 |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | undefined | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the list box |
### Slots
@@ -1180,9 +1205,9 @@ export interface DropdownItem {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
-| inline | let | No | boolean | false | Set to `true` to use the inline variant |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------- |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
### Slots
@@ -1201,19 +1226,19 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element |
-| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) |
-| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) |
-| expanded | let | Yes | boolean | false | Set to `true` to expand the tile |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile |
-| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile |
-| tileExpandedLabel | let | No | string | "" | Specify the icon label of the expanded tile |
-| tileCollapsedLabel | let | No | string | "" | Specify the icon label of the collapsed tile |
-| tabindex | let | No | string | "0" | Specify the tabindex |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element |
+| tilePadding | No | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) |
+| tileMaxHeight | No | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) |
+| expanded | No | let | Yes | boolean | false | Set to `true` to expand the tile |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| tileCollapsedIconText | No | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile |
+| tileExpandedIconText | No | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile |
+| tileExpandedLabel | No | let | No | string | "" | Specify the icon label of the expanded tile |
+| tileCollapsedLabel | No | let | No | string | "" | Specify the icon label of the collapsed tile |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element |
### Slots
@@ -1236,56 +1261,61 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | ----------------------------------------------------------- |
-| files | let | Yes | File[] | [] | Obtain a reference to the uploaded files |
-| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| disabled | let | No | boolean | false | Set to `true` to disable the file uploader |
-| accept | let | No | string[] | [] | Specify the accepted file types |
-| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
-| clearFiles | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
-| labelDescription | let | No | string | "" | Specify the label description |
-| labelTitle | let | No | string | "" | Specify the label title |
-| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
-| buttonLabel | let | No | string | "" | Specify the button label |
-| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
-| name | let | No | string | "" | Specify a name attribute for the file button uploader input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
+| labelTitle | No | let | No | string | "" | Specify the label title.Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No |
let | No | string | "" | Specify the label description.Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No |
let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
+| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
+| buttonLabel | No | let | No | string | "" | Specify the button label |
+| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
+| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :--------------- | :------ | :---- | :------------------------------ |
+| labelDescription | No | -- | {labelDescription} |
+| labelTitle | No | -- | {labelTitle} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| add | dispatched | File[] |
-| remove | dispatched | File[] |
-| change | dispatched | File[] |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| add | dispatched | ReadonlyArray |
+| remove | dispatched | ReadonlyArray |
+| change | dispatched | ReadonlyArray |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `FileUploaderButton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| labelText | let | Yes | string | "Add file" | Specify the label text |
-| files | let | Yes | File[] | [] | Obtain a reference to the uploaded files |
-| accept | let | No | string[] | [] | Specify the accepted file types |
-| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes |
-| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button |
-| role | let | No | string | "button" | Specify the label role |
-| tabindex | let | No | string | "0" | Specify `tabindex` attribute |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| labelText | No | let | Yes | string | "Add file" | Specify the label text |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| disableLabelChanges | No | let | No | boolean | false | Set to `true` to disable label changes |
+| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
+| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
+| role | No | let | No | string | "button" | Specify the label role |
+| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -1295,29 +1325,29 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | File[] |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| change | dispatched | ReadonlyArray |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderDropContainer`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| files | let | Yes | File[] | [] | Obtain a reference to the uploaded files |
-| accept | let | No | string[] | [] | Specify the accepted file types |
-| multiple | let | No | boolean | false | Set to `true` to allow multiple files |
-| validateFiles | let | No | (files: File[]) => File[] | (files) => files | Override the default behavior of validating uploaded filesThe default behavior does not validate files | -| labelText |
let | No | string | "Add file" | Specify the label text |
-| role | let | No | string | "button" | Specify the `role` attribute of the drop container |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| tabindex | let | No | string | "0" | Specify `tabindex` attribute |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| validateFiles | No | let | No | (files: ReadonlyArray) => ReadonlyArray | (files) => files | Override the default behavior of validating uploaded files.By default, files are not validated | +| labelText | No |
let | No | string | "Add file" | Specify the label text |
+| role | No | let | No | string | "button" | Specify the `role` attribute of the drop container |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -1327,30 +1357,30 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| add | dispatched | File[] |
-| change | dispatched | File[] |
-| dragover | forwarded | -- |
-| dragleave | forwarded | -- |
-| drop | forwarded | -- |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| add | dispatched | ReadonlyArray |
+| change | dispatched | ReadonlyArray |
+| dragover | forwarded | -- |
+| dragleave | forwarded | -- |
+| drop | forwarded | -- |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderItem`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
-| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton |
-| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| errorSubject | let | No | string | "" | Specify the error subject text |
-| errorBody | let | No | string | "" | Specify the error body text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
-| name | let | No | string | "" | Specify the file uploader name |
+| 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 | "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 |
+| errorBody | No | let | No | string | "" | Specify the error body text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| name | No | let | No | string | "" | Specify the file uploader name |
### Slots
@@ -1388,11 +1418,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
-| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status |
-| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
+| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status |
+| 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 |
### Slots
@@ -1432,9 +1462,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------- | ----------------- | -------------------------------------- |
-| ref | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- |
+| ref | No | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
### Slots
@@ -1457,14 +1487,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
-| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| message | let | No | boolean | false | Set to `true` to render a form requirement |
-| messageText | let | No | string | "" | Specify the message text |
-| legendText | let | No | string | "" | Specify the legend text |
-| legendId | let | No | string | "" | Specify an id for the legend element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
+| noMargin | No | let | No | boolean | false | Set to `true` for to remove the bottom margin |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| message | No | let | No | boolean | false | Set to `true` to render a form requirement |
+| messageText | No | let | No | string | "" | Specify the message text |
+| legendText | No | let | No | string | "" | Specify the legend text |
+| legendId | No | let | No | string | "" | Specify an id for the legend element |
### Slots
@@ -1506,9 +1536,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------------- |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element |
### Slots
@@ -1529,16 +1559,16 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | let | No | boolean | false | Set to `true` to render a custom HTML elementProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | -| condensed |
let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | let | No | boolean | false | Set to `true` to use the narrow variant |
-| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant |
-| noGutter | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | No | let | No | boolean | false | Set to `true` to render a custom HTML elementProps are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | +| condensed | No |
let | No | boolean | false | Set to `true` to use the condensed variant |
+| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
+| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant |
+| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
### Slots
@@ -1554,27 +1584,28 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | let | No | string | undefined | Specify the ARIA label for the header |
-| href | let | No | string | undefined | Specify the `href` attribute |
-| company | let | No | string | undefined | Specify the company name |
-| platformName | let | No | string | "" | Specify the platform nameAlternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | -| persistentHamburgerMenu |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | -| iconMenu |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | -| iconClose |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No |
let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| company | No | let | No | string | undefined | Specify the company name.Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| platformName | No |
let | No | string | "" | Specify the platform name.Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | +| persistentHamburgerMenu | No |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
+| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | +| iconMenu | No |
let | No | any | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | +| iconClose | No |
let | No | any | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | ### Slots -| Slot name | Default | Props | Fallback | -| :-------------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| platform | No | -- |
{platformName} |
-| skip-to-content | No | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------------- | :------ | :---- | :--------------------------- |
+| -- | Yes | -- | -- |
+| company | No | -- | {company} |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
### Events
@@ -1586,67 +1617,71 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :---------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| isOpen | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | -| closeIcon |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | -| text |
let | No | string | undefined | Specify the textAlternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | -| transition |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No |
let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
+| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | +| closeIcon | No |
let | No | any | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | +| text | No |
let | No | string | undefined | Specify the text displayed next to the icon.Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| iconDescription | No |
let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayedif either the `text` prop or a named slot="text" is used | +| tooltipAlignment | No |
let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.Only applies when `iconDescription` is provided | +| transition | No |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | +| preventCloseOnClickOutside | No |
let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :--------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
-| text | No | -- | {#if text}<span>{text}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
+| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| close | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| open | dispatched | null |
+| close | dispatched | null |
+| click | forwarded | -- |
## `HeaderActionLink`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :----------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| linkIsActive | let | No | boolean | false | Set to `true` to use the active state |
-| href | let | No | string | undefined | Specify the `href` attribute |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| icon | No | let | No | any | undefined | Specify the icon to render |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------ |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
### Events
-None.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
## `HeaderGlobalAction`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | 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
@@ -1674,16 +1709,18 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | let | No | string | undefined | Specify the `href` attribute |
-| text | let | No | string | undefined | Specify the text |
-| isSelected | let | No | boolean | false | Set to `true` to select the item |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the text |
+| isSelected | No | let | No | boolean | false | Set to `true` to select the item |
### Slots
-None.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | {text} |
### Events
@@ -1702,12 +1739,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| href | let | No | string | "/" | Specify the `href` attribute |
-| text | let | No | string | undefined | Specify the text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| href | No | let | No | string | "/" | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the text |
### Slots
@@ -1748,10 +1785,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | let | No | string | undefined | Specify the `href` attribute |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
### Slots
@@ -1795,19 +1832,19 @@ export interface HeaderSearchResult {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- |
-| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar |
-| value | let | Yes | string | "" | Specify the search input value |
-| results | let | No | HeaderSearchResult[] | [] | Render a list of search results |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
+| selectedResultIndex | No | let | Yes | number | 0 | Specify the selected result index |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| active | No | let | Yes | boolean | false | Set to `true` to activate and focus the search bar |
+| value | No | let | Yes | string | "" | Specify the search input value |
+| results | No | let | No | ReadonlyArray | [] | Render a list of search results |
### 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
@@ -1822,6 +1859,7 @@ export interface HeaderSearchResult {
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
+| paste | forwarded | -- |
## `HeaderUtilities`
@@ -1843,16 +1881,16 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
-| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded |
-| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
-| src | let | No | string | "" | Specify the image source |
-| alt | let | No | string | "" | Specify the image alt text |
-| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
-| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on loadThe duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage |
const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
+| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded |
+| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
+| src | No | let | No | string | "" | Specify the image source |
+| alt | No | let | No | string | "" | Specify the image alt text |
+| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
+| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on loadThe duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | No |
const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
### Slots
@@ -1872,12 +1910,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------- |
-| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
-| description | let | No | string | undefined | Set the loading description |
-| iconDescription | let | No | string | undefined | Specify the ARIA label for the loading icon |
-| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
+| description | No | let | No | string | undefined | Set the loading description |
+| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.Defaults to the `status` prop for the "error" and "finished" states | +| successDelay | No |
let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
@@ -1885,28 +1923,29 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| success | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| success | dispatched | null |
## `InlineNotification`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
-| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | let | No | string | "alert" | Set the `role` attribute |
-| title | let | No | string | "" | Specify the title text |
-| subtitle | let | No | string | "" | Specify the subtitle text |
-| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button |
-| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- |
+| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | No | let | No | string | "alert" | Set the `role` attribute |
+| title | No | let | No | string | "" | Specify the title text |
+| subtitle | No | let | No | string | "" | Specify the subtitle text |
+| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
+| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
+| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
### Slots
@@ -1931,22 +1970,22 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
-| size | let | No | "sm" | "lg" | undefined | Specify the size of the link |
-| href | let | No | string | undefined | Specify the href value |
-| inline | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render`inline` must be `false` | -| disabled |
let | No | boolean | false | Set to `true` to disable the checkbox |
-| visited | 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
@@ -1961,17 +2000,17 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ |
-| size | let | No | "sm" | "xl" | undefined | Set the size of the list box |
-| type | let | No | "default" | "inline" | "default" | Set the type of the list box |
-| open | let | No | boolean | false | Set to `true` to open the list box |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the list box |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
+| 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 |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the list box |
+| 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 |
### Slots
@@ -1996,15 +2035,15 @@ export type ListBoxFieldTranslationId = "close" | "open";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| disabled | let | No | boolean | false | Set to `true` to disable the list box field |
-| role | let | No | string | "combobox" | Specify the role attribute |
-| tabindex | let | No | string | "-1" | Specify the tabindex |
-| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
-| translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
-| id | 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 |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the list box field |
+| role | No | let | No | string | "combobox" | Specify the role attribute |
+| tabindex | No | let | No | string | "-1" | Specify the tabindex |
+| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
+| translateWithId | No | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2028,10 +2067,10 @@ export type ListBoxFieldTranslationId = "close" | "open";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| id | 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 HTML element |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -2055,11 +2094,11 @@ export type ListBoxMenuIconTranslationId = "close" | "open";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
-| open | let | No | boolean | false | Set to `true` to open the list box menu icon |
-| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
-| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
+| open | No | let | No | boolean | false | Set to `true` to open the list box menu icon |
+| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids |
+| translateWithId | No | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
### Slots
@@ -2075,10 +2114,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
-| active | let | No | boolean | false | Set to `true` to enable the active state |
-| highlighted | let | No | boolean | false | Set to `true` to enable the highlighted state |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
+| active | No | let | No | boolean | false | Set to `true` to enable the active state |
+| highlighted | No | let | No | boolean | false | Set to `true` to enable the highlighted state |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the menu item |
### Slots
@@ -2104,13 +2144,13 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| selectionCount | let | No | number | undefined | Specify the number of selected items |
-| disabled | let | No | boolean | false | Set to `true` to disable the list box selection |
-| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
-| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| 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 |
+| selectionCount | No | let | No | number | undefined | Specify the number of selected items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection |
+| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
+| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
### Slots
@@ -2118,9 +2158,9 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| clear | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| clear | dispatched | KeyboardEvent | MouseEvent |
## `ListItem`
@@ -2147,13 +2187,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
-| small | let | No | boolean | false | Set to `true` to use the small variant |
-| active | let | No | boolean | true | Set to `false` to disable the active state |
-| withOverlay | let | No | boolean | true | Set to `false` to disable the overlay |
-| description | let | No | string | "Active loading indicator" | Specify the label description |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
+| small | No | let | No | boolean | false | Set to `true` to use the small variant |
+| active | No | let | No | boolean | true | Set to `false` to disable the active state |
+| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay |
+| description | No | let | No | string | "loading" | Specify the description to describe the loading state |
### Slots
@@ -2167,12 +2206,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
-| value | let | Yes | any | "" | Provide a value to persist |
-| key | let | No | string | "local-storage-key" | Specify the local storage key |
-| clearItem | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage |
-| clearAll | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
+| value | No | let | Yes | any | "" | Provide a value to persist |
+| key | No | let | No | string | "local-storage-key" | Specify the local storage key |
+| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage |
+| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage |
### Slots
@@ -2189,29 +2228,29 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| open | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
-| danger | let | No | boolean | false | Set to `true` to use the danger variant |
-| alert | let | No | boolean | false | Set to `true` to enable alert mode |
-| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant |
-| modalHeading | let | No | string | undefined | Specify the modal heading |
-| modalLabel | let | No | string | undefined | Specify the modal label |
-| modalAriaLabel | let | No | string | undefined | Specify the ARIA label for the modal |
-| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
-| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
-| primaryButtonText | let | No | string | "" | Specify the primary button text |
-| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryButtonIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" eventsto be dispatched when pressing "Enter" | -| secondaryButtonText |
let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | -| selectorPrimaryFocus |
let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal |
-| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
-| id | 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
@@ -2232,19 +2271,19 @@ None.
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-| submit | dispatched | -- |
-| click:button--primary | dispatched | -- |
-| close | dispatched | -- |
-| open | dispatched | -- |
+| submit | dispatched | null |
+| click:button--primary | dispatched | null |
+| close | dispatched | null |
+| open | dispatched | null |
## `ModalBody`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- |
-| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements |
-| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------- |
+| 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 |
### Slots
@@ -2260,16 +2299,16 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
-| primaryButtonText | let | No | string | "" | Specify the primary button text |
-| primaryButtonIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon |
-| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryClass | let | No | string | undefined | Specify a class for the primary button |
-| secondaryButtonText | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | -| secondaryClass |
let | No | string | undefined | Specify a class for the secondary button |
-| danger | 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
@@ -2287,15 +2326,15 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- |
-| title | let | No | string | "" | Specify the modal title |
-| label | let | No | string | "" | Specify the modal label |
-| labelClass | let | No | string | "" | Specify the label class |
-| titleClass | let | No | string | "" | Specify the title class |
-| closeClass | let | No | string | "" | Specify the close class |
-| closeIconClass | let | No | string | "" | Specify the close icon class |
-| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------- | -------------------- | ----------------------------------------- |
+| title | No | let | No | string | "" | Specify the modal title |
+| label | No | let | No | string | "" | Specify the modal label |
+| labelClass | No | let | No | string | "" | Specify the label class |
+| titleClass | No | let | No | string | "" | Specify the title class |
+| closeClass | No | let | No | string | "" | Specify the close class |
+| closeIconClass | No | let | No | string | "" | Specify the close icon class |
+| iconDescription | No | let | No | string | "Close" | Specify the ARIA label for the close icon |
### Slots
@@ -2321,54 +2360,56 @@ export type MultiSelectItemText = string;
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
+ disabled?: boolean;
}
```
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| highlightedId | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
-| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
-| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
-| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
-| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| value | let | Yes | string | "" | Specify the multiselect value |
-| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids |
-| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items |
-| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| itemToInput | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input |
-| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
-| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
-| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
-| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
-| filterable | let | No | boolean | false | Set to `true` to filter items |
-| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | -| light |
let | No | boolean | false | Set to `true` to enable the light variant |
-| locale | let | No | string | "en" | Specify the locale |
-| placeholder | let | No | string | "" | Specify the placeholder text |
-| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | -| translateWithId |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | -| translateWithIdSelection |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | -| titleText |
let | No | string | "" | Specify the title text |
-| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| helperText | let | No | string | "" | Specify the helper text |
-| label | let | No | string | "" | Specify the list box label |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | undefined | Specify a name attribute for the select |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
+| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
+| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
+| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | No | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
+| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
+| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
+| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
+| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | No | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | No | let | No | (item: MultiSelectItem, value: string) => boolean | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | +| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
+| locale | No | let | No | string | "en" | Specify the locale |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | +| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No |
let | No | string | "" | Specify the title text |
+| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the select |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
+| titleText | No | -- | {titleText} |
### Events
@@ -2378,8 +2419,10 @@ export interface MultiSelectItem {
| clear | dispatched | null |
| blur | dispatched | FocusEvent | CustomEvent |
| keydown | forwarded | -- |
+| input | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
+| paste | forwarded | -- |
## `NotificationActionButton`
@@ -2406,12 +2449,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------- |
-| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
-| title | let | No | string | undefined | Specify the title of the icon |
-| iconDescription | 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
@@ -2430,11 +2473,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- |
-| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
-| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- |
+| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon |
+| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification |
+| iconDescription | Yes | let | No | -- | undefined | Specify the ARIA label for the icon |
### Slots
@@ -2454,31 +2497,31 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | let | Yes | null | number | null | Specify the input value.Use `null` to denote "no value" | -| size |
let | No | "sm" | "xl" | undefined | Set the size of the input |
-| step | let | No | number | 1 | Specify the step increment |
-| max | let | No | number | undefined | Specify the maximum value |
-| min | let | No | number | undefined | Specify the minimum value |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| readonly | let | No | boolean | false | Set to `true` for the input to be read-only |
-| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons |
-| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| helperText | let | No | string | "" | Specify the helper text |
-| label | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
-| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | No | let | Yes | null | number | null | Specify the input value.Use `null` to denote "no value" | +| 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 |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only |
+| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons |
+| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
+| 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 |
### Slots
@@ -2496,16 +2539,19 @@ export type NumberInputTranslationId = "increment" | "decrement";
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `NumberInputSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
-| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -2524,11 +2570,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
-| nested | let | No | boolean | false | Set to `true` to use the nested variant |
-| native | let | No | boolean | false | Set to `true` to use native list styles |
-| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
+| nested | No | let | No | boolean | false | Set to `true` to use the nested variant |
+| native | No | let | No | boolean | false | Set to `true` to use native list styles |
+| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
### Slots
@@ -2570,60 +2616,60 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- |
-| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
-| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
-| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<OverflowMenuVertical />` | -| open |
let | Yes | boolean | false | Set to `true` to open the menu |
-| size | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
-| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
-| menuOptionsClass | let | No | string | undefined | Specify the menu options class |
-| iconClass | let | No | string | undefined | Specify the icon class |
-| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
+| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
+| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
+| icon | No | let | Yes | any | undefined | Specify the icon to render.Defaults to `<OverflowMenuVertical />` | +| open | No |
let | Yes | boolean | false | Set to `true` to open the menu |
+| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
+| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
+| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class |
+| iconClass | No | let | No | string | undefined | Specify the icon class |
+| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component
this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------- |
-| close | dispatched | { index: number; text: string; } |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------------------- |
+| close | dispatched | null | { index: number; text: string; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `OverflowMenuItem`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
-| text | let | No | string | "Provide text" | Specify the item textAlternatively, use the default slot for a custom element | -| href |
let | No | string | "" | Specify the `href` attribute if the item is a link |
-| disabled | let | No | boolean | false | Set to `true` to disable the item |
-| hasDivider | let | No | boolean | false | Set to `true` to include a divider |
-| danger | let | No | boolean | false | Set to `true` to use the danger variant |
-| requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
+| primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu |
+| text | No | let | No | string | "Provide text" | Specify the item text.Alternatively, use the default slot | +| href | No |
let | No | string | "" | Specify the `href` attribute if the item is a link |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the item |
+| hasDivider | No | let | No | boolean | false | Set to `true` to include a divider |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+| requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content={true}>
{text}
</div> |
### Events
@@ -2636,24 +2682,25 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ |
-| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page |
-| page | let | Yes | number | 1 | Specify the current page index |
-| totalItems | let | No | number | 0 | Specify the total number of items |
-| disabled | let | No | boolean | false | Set to `true` to disable the pagination |
-| forwardText | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | let | No | string | "Previous page" | Specify the backward button text |
-| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text |
-| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text |
-| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} items\` | Override the item range text |
-| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input |
-| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input |
-| pageSizes | let | No | number[] | [10] | Specify the available page sizes |
-| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown |
-| pageText | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
-| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
-| id | 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
@@ -2661,24 +2708,26 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------------------- | :--------- | :----------------------------------------------- |
-| update | dispatched | { pageSize: number; page: number; } |
-| click:button--previous | dispatched | { page: number; } |
-| click:button--next | dispatched | { page: number; } |
+| Event name | Type | Detail |
+| :--------------------- | :--------- | :------------------------------------------------ |
+| change | dispatched | { page?: number; pageSize?: number } |
+| click:button--previous | dispatched | { page: number; } |
+| click:button--next | dispatched | { page: number; } |
+| update | dispatched | { pageSize: number; page: number; } |
## `PaginationNav`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :----------- | :--------------- | :------- | :------------------- | ---------------------------- | ----------------------------------------- |
-| page | let | Yes | number | 0 | Specify the current page index |
-| total | let | No | number | 10 | Specify the total number of pages |
-| shown | let | No | number | 10 | Specify the total number of pages to show |
-| loop | let | No | boolean | false | Set to `true` to loop the navigation |
-| forwardText | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | let | No | string | "Previous page" | Specify the backward button text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| total | No | let | No | number | 10 | Specify the total number of pages |
+| shown | No | let | No | number | 10 | Specify the total number of pages to show |
+| loop | No | let | No | boolean | false | Set to `true` to loop the navigation |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "outside" | "inside" | "bottom" | Set the position of the tooltip relative to the pagination buttons. |
### Slots
@@ -2715,29 +2764,29 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility |
-| value | let | Yes | number | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
-| placeholder | let | No | string | "" | Specify the placeholder text |
-| hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text |
-| showPasswordLabel | let | No | string | "Show password" | Specify the show password label text |
-| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | let | No | string | "" | Specify the helper text |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the text for the invalid state |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| inline | let | No | boolean | false | Set to `true` to use inline version |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| 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" | "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 |
+| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
+| 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 |
+| 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 text for the invalid state |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| inline | No | let | No | boolean | false | Set to `true` to use inline version |
+| 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 |
### Slots
@@ -2759,20 +2808,21 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `Popover`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ |
-| open | let | Yes | boolean | false | Set to `true` to display the popover |
-| closeOnOutsideClick | let | No | boolean | false | Set to `true` to close the popover on an outside click |
-| caret | let | No | boolean | false | Set to `true` render a caret |
-| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant |
-| relative | let | No | boolean | false | Set to `true` to use a relative position |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ |
+| open | No | let | Yes | boolean | false | Set to `true` to display the popover |
+| closeOnOutsideClick | No | let | No | boolean | false | Set to `true` to close the popover on an outside click |
+| caret | No | let | No | boolean | false | Set to `true` render a caret |
+| align | No | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| highContrast | No | let | No | boolean | false | Set to `true` to enable the high contrast variant |
+| relative | No | let | No | boolean | false | Set to `true` to use a relative position |
### Slots
@@ -2782,24 +2832,25 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :----- |
-| click:outside | dispatched | -- |
+| Event name | Type | Detail |
+| :------------ | :--------- | :------------------------------------ |
+| click:outside | dispatched | { target: HTMLElement; } |
## `ProgressBar`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value | let | No | number | undefined | Specify the current value |
-| max | let | No | number | 100 | Specify the maximum value |
-| kind | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar |
-| size | let | No | "sm" | "md" | "md" | Specify the size |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| helperText | let | No | string | "" | Specify the helper text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
+| value | No | let | No | number | undefined | Specify the current value |
+| max | No | let | No | number | 100 | Specify the maximum value |
+| kind | No | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar |
+| status | No | let | No | "active" | "finished" | "error" | "active" | Specify the status |
+| size | No | let | No | "sm" | "md" | "md" | Specify the size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element |
### Slots
@@ -2815,12 +2866,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
-| currentIndex | let | Yes | number | 0 | Specify the current step index |
-| vertical | let | No | boolean | false | Set to `true` to use the vertical variant |
-| spaceEqually | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div |
-| preventChangeOnClick | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
+| currentIndex | No | let | Yes | number | 0 | Specify the current step index |
+| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant |
+| spaceEqually | No | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div |
+| preventChangeOnClick | No | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating |
### Slots
@@ -2842,10 +2893,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
-| vertical | let | No | boolean | false | Set to `true` to use the vertical variant |
-| count | let | No | number | 4 | Specify the number of steps to render |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
+| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant |
+| count | No | let | No | number | 4 | Specify the number of steps to render |
### Slots
@@ -2864,22 +2915,22 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
-| current | let | Yes | boolean | false | Set to `true` to use the current variant |
-| complete | let | Yes | boolean | false | Set to `true` for the complete variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the progress step |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| description | let | No | string | "" | Specify the step description |
-| label | let | No | string | "" | Specify the step label |
-| secondaryLabel | let | No | string | "" | Specify the step secondary label |
-| id | 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 |
+| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
+| current | No | let | Yes | boolean | false | Set to `true` to use the current variant |
+| complete | No | let | Yes | boolean | false | Set to `true` for the complete variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the progress step |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| description | No | let | No | string | "" | Specify the step description |
+| label | No | let | No | string | "" | Specify the step label |
+| secondaryLabel | No | let | No | string | "" | Specify the step secondary label |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
-| -- | Yes | { 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
@@ -2895,18 +2946,18 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| checked | let | Yes | boolean | false | Set to `true` to check the radio button |
-| value | let | No | string | "" | Specify the value of the radio button |
-| disabled | let | No | boolean | false | Set to `true` to disable the radio button |
-| required | let | No | boolean | false | Set to `true` to mark the field as required |
-| labelPosition | let | No | "right" | "left" | "right" | Specify the label position |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the radio button input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| checked | No | let | Yes | boolean | false | Set to `true` to check the radio button |
+| value | No | let | No | string | number | "" | Specify the value of the radio button |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the radio button |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button input |
### Slots
@@ -2918,21 +2969,25 @@ None.
| Event name | Type | Detail |
| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
| change | forwarded | -- |
## `RadioButtonGroup`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
-| selected | let | Yes | string | undefined | Set the selected radio button value |
-| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons |
-| legendText | let | No | string | "" | Specify the legend text |
-| hideLegend | let | No | boolean | false | Set to `true` to visually hide the legend |
-| labelPosition | let | No | "right" | "left" | "right" | Specify the label position |
-| orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
-| id | let | No | string | undefined | Set an id for the container div element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
+| selected | No | let | Yes | string | number | undefined | Set the selected radio button value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons |
+| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
+| legendText | No | let | No | string | "" | Specify the legend text |
+| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend |
+| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position |
+| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
+| id | No | let | No | string | undefined | Set an id for the container div element |
### Slots
@@ -2943,13 +2998,13 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| change | dispatched | string | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
## `RadioButtonSkeleton`
@@ -2974,16 +3029,17 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
-| checked | let | Yes | boolean | false | Set to `true` to check the tile |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the tile |
-| value | let | No | string | "" | Specify the value of the radio input |
-| tabindex | let | No | string | "0" | Specify the tabindex |
-| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| checked | No | let | Yes | boolean | false | Set to `true` to check the tile |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tile |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| value | No | let | No | string | "" | Specify the value of the radio input |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio tile input |
### Slots
@@ -3016,10 +3072,10 @@ export interface RecursiveListNode {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
-| children | let | No | Array | [] | Specify the children to render |
-| type | 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
@@ -3033,15 +3089,15 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | let | No | boolean | false | Set to `true` to render a custom HTML elementProps are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | -| condensed |
let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | let | No | boolean | false | Set to `true` to use the narrow variant |
-| noGutter | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | No | let | No | boolean | false | Set to `true` to render a custom HTML elementProps are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | +| condensed | No |
let | No | boolean | false | Set to `true` to use the condensed variant |
+| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
+| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
### Slots
@@ -3057,24 +3113,24 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| expanded | let | Yes | boolean | false | Set to `true to expand the search input |
-| value | let | Yes | any | "" | Specify the value of the search input |
-| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
-| searchClass | let | No | string | "" | Specify the class name passed to the outer div element |
-| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the search input |
-| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant |
-| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input |
-| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute |
-| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element |
-| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text |
-| labelText | let | No | string | "" | Specify the label text |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.Defaults to `<Search />` | -| id |
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
@@ -3098,15 +3154,16 @@ None.
| blur | forwarded | -- |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
-| clear | dispatched | -- |
+| paste | forwarded | -- |
+| clear | dispatched | null |
## `SearchSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :---------------------------------------- | ----------------- | ------------------------------------ |
-| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
+| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
### Slots
@@ -3125,25 +3182,25 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
-| selected | let | Yes | string | undefined | Specify the selected item value |
-| size | let | No | "sm" | "xl" | undefined | Set the size of the select input |
-| inline | let | No | boolean | false | Set to `true` to use the inline variant |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the select element |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | let | No | string | undefined | Specify a name attribute for the select element |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| helperText | let | No | string | "" | Specify the helper text |
-| noLabel | let | No | boolean | false | Set to `true` to not render a label |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| required | let | No | boolean | false | Set to `true` to mark the field as required |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
+| 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" | "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 |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
+| name | No | let | No | string | undefined | Specify a name attribute for the select element |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| noLabel | No | let | No | boolean | false | Set to `true` to not render a label |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
### Slots
@@ -3154,23 +3211,26 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| change | dispatched | string |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| update | dispatched | string | number |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `SelectItem`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- |
-| value | let | No | string | "" | Specify the option value |
-| text | let | No | string | "" | Specify the option text |
-| hidden | let | No | boolean | false | Set to `true` to hide the option |
-| disabled | let | No | boolean | false | Set to `true` to disable the option |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| value | No | let | No | string | number | "" | Specify the option value |
+| text | No | let | No | string | undefined | Specify the option textIf not specified, the value will be used as the text. | +| hidden | No |
let | No | boolean | false | Set to `true` to hide the option |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the option |
+| class | No | let | No | string | undefined | Specify the class of the `option` element |
+| style | No | let | No | string | undefined | Specify the style of the `option` element |
### Slots
@@ -3184,10 +3244,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- |
-| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element |
-| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | --------------------------------------------------- |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the optgroup element |
+| label | No | let | No | string | "Provide label" | Specify the label attribute of the optgroup element |
### Slots
@@ -3203,9 +3263,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
-| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3224,18 +3284,18 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| selected | let | Yes | boolean | false | Set to `true` to select the tile |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the tile |
-| title | let | No | string | "title" | Specify the title of the selectable tile |
-| value | let | No | string | "value" | Specify the value of the selectable tile |
-| tabindex | let | No | string | "0" | Specify the tabindex |
-| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| selected | No | let | Yes | boolean | false | Set to `true` to select the tile |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tile |
+| title | No | let | No | string | "title" | Specify the title of the selectable tile |
+| value | No | let | No | string | "value" | Specify the value of the selectable tile |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3245,25 +3305,27 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
+| deselect | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `SideNav`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| fixed | let | No | boolean | false | Set to `true` to use the fixed variant |
-| rail | let | No | boolean | false | Set to `true` to use the rail variant |
-| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav |
-| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | No |
let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| fixed | No | let | No | boolean | false | Set to `true` to use the fixed variant |
+| rail | No | let | No | boolean | false | Set to `true` to use the rail variant |
+| ariaLabel | No | let | No | string | undefined | Specify the ARIA label for the nav |
+| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | ### Slots @@ -3313,20 +3375,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref |
let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | let | No | boolean | false | Set to `true` to select the current link |
-| href | let | No | string | undefined | Specify the `href` attribute |
-| text | let | No | string | undefined | Specify the text |
-| icon | 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
@@ -3338,19 +3400,19 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| text | let | No | string | undefined | Specify the text |
-| icon | 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
@@ -3362,12 +3424,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | let | No | boolean | false | Set to `true` to select the item |
-| href | let | No | string | undefined | Specify the `href` attribute |
-| text | let | No | string | undefined | Specify the item text |
+| 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 item |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| text | No | let | No | string | undefined | Specify the item text |
### Slots
@@ -3404,12 +3466,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- |
-| lines | let | No | number | 3 | Specify the number of lines to render |
-| heading | let | No | boolean | false | Set to `true` to use the heading size variant |
-| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant |
-| width | let | No | string | "100%" | Specify the width of the text (% or px) |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------- | ----------------------------------------------- |
+| lines | No | let | No | number | 3 | Specify the number of lines to render |
+| heading | No | let | No | boolean | false | Set to `true` to use the heading size variant |
+| paragraph | No | let | No | boolean | false | Set to `true` to use the paragraph size variant |
+| width | No | let | No | string | "100%" | Specify the width of the text (% or px) |
### Slots
@@ -3428,10 +3490,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- |
-| href | let | No | string | "#main-content" | Specify the `href` attribute |
-| tabindex | let | No | string | "0" | Specify the tabindex |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------- | ---------------------------- | ---------------------------- |
+| href | No | let | No | string | "#main-content" | Specify the `href` attribute |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
### Slots
@@ -3449,25 +3511,27 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
-| value | let | Yes | number | 0 | Specify the value of the slider |
-| max | let | No | number | 100 | Set the maximum slider value |
-| maxLabel | let | No | string | "" | Specify the label for the max value |
-| min | let | No | number | 0 | Set the minimum slider value |
-| minLabel | let | No | string | "" | Specify the label for the min value |
-| step | let | No | number | 1 | Set the step value |
-| stepMultiplier | let | No | number | 4 | Set the step multiplier value |
-| required | let | No | boolean | false | Set to `true` to require a value |
-| inputType | let | No | string | "number" | Specify the input type |
-| disabled | let | No | boolean | false | Set to `true` to disable the slider |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| labelText | let | No | string | "" | Specify the label text |
-| name | let | No | string | "" | Set a name for the slider element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| value | No | let | Yes | number | 0 | Specify the value of the slider |
+| max | No | let | No | number | 100 | Set the maximum slider value |
+| maxLabel | No | let | No | string | "" | Specify the label for the max value |
+| min | No | let | No | number | 0 | Set the minimum slider value |
+| minLabel | No | let | No | string | "" | Specify the label for the min value |
+| step | No | let | No | number | 1 | Set the step value |
+| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
+| required | No | let | No | boolean | false | Set to `true` to require a value |
+| inputType | No | let | No | string | "number" | Specify the input type |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to spanthe full width of its containing element. | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| labelText | No | let | No | string | "" | Specify the label text.Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | +| hideLabel | No |
let | No | boolean | false | Set to `true` to visually hide the label text |
+| name | No | let | No | string | "" | Set a name for the slider element |
### Slots
@@ -3477,21 +3541,22 @@ 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`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
-| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3510,12 +3575,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- |
-| selected | let | Yes | string | undefined | Specify the selected structured list row value |
-| condensed | let | No | boolean | false | Set to `true` to use the condensed variant |
-| flush | let | No | boolean | false | Set to `true` to flush the list |
-| selection | let | No | boolean | false | Set to `true` to use the selection variant |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------- |
+| selected | No | let | Yes | string | undefined | Specify the selected structured list row value |
+| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
+| flush | No | let | No | boolean | false | Set to `true` to flush the list |
+| selection | No | let | No | boolean | false | Set to `true` to use the selection variant |
### Slots
@@ -3525,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`
@@ -3558,10 +3623,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
-| head | let | No | boolean | false | Set to `true` to use as a header |
-| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------- |
+| head | No | let | No | boolean | false | Set to `true` to use as a header |
+| noWrap | No | let | No | boolean | false | Set to `true` to prevent wrapping |
### Slots
@@ -3603,14 +3668,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| checked | let | Yes | boolean | false | Set to `true` to check the input |
-| title | let | No | string | "title" | Specify the title of the input |
-| value | let | No | string | "value" | Specify the value of the input |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | "" | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| checked | No | let | Yes | boolean | false | Set to `true` to check the input |
+| title | No | let | No | string | "title" | Specify the title of the input |
+| value | No | let | No | string | "value" | Specify the value of the input |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | "" | Specify a name attribute for the input |
### Slots
@@ -3624,11 +3689,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
-| head | let | No | boolean | false | Set to `true` to use as a header |
-| label | let | No | boolean | false | Set to `true` to render a label slot |
-| tabindex | let | No | string | "0" | Specify the tabindex |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| head | No | let | No | boolean | false | Set to `true` to use as a header |
+| label | No | let | No | boolean | false | Set to `true` to render a label slot |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
### Slots
@@ -3650,9 +3715,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------ | -------------- | -------------------------- |
-| rows | let | No | number | 5 | Specify the number of rows |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
+| rows | No | let | No | number | 5 | Specify the number of rows |
### Slots
@@ -3671,13 +3736,13 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected |
-| text | let | No | string | "Provide text" | Specify the switch textAlternatively, use the "text" slot (e.g., <span slot="text">...</span>) | -| disabled |
let | No | boolean | false | Set to `true` to disable the switch |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
+| text | No | let | No | string | "Provide text" | Specify the switch text.Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the switch |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
@@ -3699,14 +3764,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
-| label | let | No | string | "" | Specify the tab labelAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | -| href |
let | No | string | "#" | Specify the href attribute |
-| disabled | let | No | boolean | false | Set to `true` to disable the tab |
-| tabindex | let | No | string | "0" | Specify the tabindex |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
+| label | No | let | No | string | "" | Specify the tab label.Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) | +| href | No |
let | No | string | "#" | Specify the href attribute |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tab |
+| tabindex | No | let | No | string | "0" | Specify the tabindex |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3727,9 +3792,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- |
-| id | 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 |
+| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------- |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3745,13 +3810,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
-| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table |
-| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
-| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
-| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
-| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
+| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table |
+| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles |
+| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width |
+| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
+| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header |
+| tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element |
### Slots
@@ -3804,12 +3870,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
-| title | let | No | string | "" | Specify the title of the data table |
-| description | let | No | string | "" | Specify the description of the data table |
-| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
+| title | No | let | No | string | "" | Specify the title of the data table |
+| description | No | let | No | string | "" | Specify the description of the data table |
+| 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 |
### Slots
@@ -3846,12 +3912,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
-| disableSorting | let | No | boolean | false | Set to `true` to disable sorting on this specific cell |
-| scope | let | No | string | "col" | Specify the `scope` attribute |
-| translateWithId | let | No | () => string | () => "" | Override the default id translations |
-| id | 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 |
+| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- |
+| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant |
+| sortDirection | No | let | No | "none" | "ascending" | "descending" | "none" | Specify the sort direction |
+| active | No | let | No | boolean | false | Set to `true` if the column sorting |
+| scope | No | let | No | string | "col" | Specify the `scope` attribute |
+| translateWithId | No | let | No | () => string | () => "" | Override the default id translations |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -3893,13 +3961,13 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | -------------------------------------------- |
-| selected | let | Yes | number | 0 | Specify the selected tab index |
-| type | let | No | "default" | "container" | "default" | Specify the type of tabs |
-| autoWidth | let | No | boolean | false | Set to `true` for tabs to have an auto-width |
-| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon |
-| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute |
+| 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
@@ -3910,20 +3978,20 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| keypress | forwarded | -- |
-| click | forwarded | -- |
-| change | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
## `TabsSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
-| count | let | No | number | 4 | Specify the number of tabs to render |
-| type | let | No | "default" | "container" | "default" | Specify the type of tabs |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ---------------------- | ------------------------------------ |
+| count | No | let | No | number | 4 | Specify the number of tabs to render |
+| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs |
### Slots
@@ -3942,42 +4010,42 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag |
-| size | let | No | "sm" | "default" | "default" | -- |
-| filter | let | No | boolean | false | Set to `true` to use filterable variant |
-| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag |
-| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
-| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
-| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
+| type | No | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag |
+| size | No | let | No | "sm" | "default" | "default" | -- |
+| filter | No | let | No | boolean | false | Set to `true` to use filterable variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable a filterable tag |
+| interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
+| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
+| icon | No | let | No | any | undefined | Specify the icon to render |
+| 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
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| close | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| close | dispatched | null |
## `TagSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
-| size | let | No | "sm" | "default" | "default" | -- |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ----------- |
+| size | No | let | No | "sm" | "default" | "default" | -- |
### Slots
@@ -3996,24 +4064,24 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
-| value | let | Yes | string | "" | Specify the textarea value |
-| placeholder | let | No | string | "" | Specify the placeholder text |
-| cols | let | No | number | 50 | Specify the number of cols |
-| rows | let | No | number | 4 | Specify the number of rows |
-| maxCount | let | No | number | undefined | Specify the max character count |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| readonly | let | No | boolean | false | Set to `true` to use the read-only variant |
-| helperText | let | No | string | "" | Specify the helper text |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the text for the invalid state |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element |
-| name | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| ref | No | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element |
+| value | No | let | Yes | null | string | "" | Specify the textarea value. |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| cols | No | let | No | number | 50 | Specify the number of cols |
+| rows | No | let | No | number | 4 | Specify the number of rows |
+| 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 |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| 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 text for the invalid state |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -4035,14 +4103,15 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `TextAreaSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
### Slots
@@ -4061,26 +4130,26 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :-------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | let | Yes | null | number | string | "" | Specify the input value.`value` will be set to `null` if type="number"
and the value is empty. | -| size |
let | No | "sm" | "xl" | undefined | Set the size of the input |
-| placeholder | let | No | string | "" | Specify the placeholder text |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| helperText | let | No | string | "" | Specify the helper text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | undefined | Specify a name attribute for the input |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| required | let | No | boolean | false | Set to `true` to mark the field as required |
-| inline | let | No | boolean | false | Set to `true` to use the inline variant |
-| readonly | let | No | boolean | false | Set to `true` to use the read-only variant |
+| 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
@@ -4102,14 +4171,15 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `TextInputSkeleton`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
-| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -4134,15 +4204,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
-| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokenshttps://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist |
let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
-| persistKey | let | No | string | "theme" | Specify the local storage key |
-| render | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
-| toggle | 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 | 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
@@ -4160,9 +4230,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
### Slots
@@ -4183,11 +4253,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ---------------------- | --------------------------------------- |
-| selected | let | Yes | string | undefined | Specify the selected tile value |
-| disabled | let | No | boolean | false | Set to `true` to disable the tile group |
-| legend | let | No | string | "" | Specify the legend text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
+| selected | No | let | Yes | string | undefined | Specify the selected tile value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group |
+| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button |
+| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs |
+| legend | No | let | No | string | "" | Specify the legend text |
### Slots
@@ -4197,31 +4269,30 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :----- |
-| select | dispatched | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
## `TimePicker`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | let | Yes | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | undefined | Specify the size of the input |
-| type | let | No | string | "text" | Specify the input type |
-| placeholder | let | No | string | "hh:mm" | Specify the input placeholder text |
-| pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element |
-| maxlength | let | No | number | 5 | Specify the `maxlength` input attribute |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the input |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | No | let | Yes | string | "" | Specify the input value |
+| 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 |
+| 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 |
+| 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 |
+| 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 |
### Slots
@@ -4244,20 +4315,21 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
+| paste | forwarded | -- |
## `TimePickerSelect`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
-| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
-| value | let | Yes | number | string | "" | Specify the select value |
-| disabled | let | No | boolean | false | Set to `true` to disable the select |
-| iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon |
-| labelText | let | No | string | "" | Specify the label text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | let | No | string | undefined | Specify a name attribute for the select element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
+| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
+| value | No | let | Yes | number | string | "" | Specify the select value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the select |
+| iconDescription | No | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon |
+| labelText | No | let | No | string | "" | Specify the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
+| name | No | let | No | string | undefined | Specify a name attribute for the select element |
### Slots
@@ -4279,17 +4351,19 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
-| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
-| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant |
-| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
-| role | let | No | string | "alert" | Set the `role` attribute |
-| title | let | No | string | "" | Specify the title text |
-| subtitle | let | No | string | "" | Specify the subtitle text |
-| caption | let | No | string | "" | Specify the caption text |
-| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon |
-| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
+| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification |
+| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant |
+| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it |
+| role | No | let | No | string | "alert" | Set the `role` attribute |
+| title | No | let | No | string | "" | Specify the title text |
+| subtitle | No | let | No | string | "" | Specify the subtitle text |
+| caption | No | let | No | string | "" | Specify the caption text |
+| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon |
+| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button |
+| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to spanthe full width of its containing element. | ### Slots @@ -4314,16 +4388,17 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled |
let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
-| size | let | No | "default" | "sm" | "default" | Specify the toggle size |
-| disabled | let | No | boolean | false | Set to `true` to disable checkbox input |
-| labelA | let | No | string | "Off" | Specify the label for the untoggled state |
-| labelB | let | No | string | "On" | Specify the label for the toggled state |
-| labelText | let | No | string | "" | Specify the label text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | 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
@@ -4351,11 +4426,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- |
-| size | let | No | "default" | "sm" | "default" | Specify the toggle size |
-| labelText | let | No | string | "" | Specify the label text |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| 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
@@ -4376,9 +4451,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ |
-| size | let | No | "sm" | "default" | "default" | Specify the toolbar size |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ |
+| size | No | let | No | "sm" | "default" | "default" | Specify the toolbar size |
### Slots
@@ -4394,9 +4469,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
-| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar |
+| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
### Slots
@@ -4407,7 +4483,9 @@ None.
### Events
-None.
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| cancel | dispatched | null |
## `ToolbarContent`
@@ -4464,15 +4542,16 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar |
-| value | let | Yes | number | string | "" | Specify the value of the search input |
-| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded |
-| disabled | let | No | boolean | false | Set to `true` to disable the search bar |
-| shouldFilterRows | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.
To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | -| tabindex |
let | No | string | "0" | Specify the tabindex |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| filteredRowIds | No | let | Yes | ReadonlyArray | [] | The filtered row ids |
+| expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar |
+| value | No | let | Yes | number | string | "" | Specify the value of the search input |
+| persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the search bar |
+| shouldFilterRows | No | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.
To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | +| tabindex | No |
let | No | string | "0" | Specify the tabindex |
### Slots
@@ -4480,42 +4559,45 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| clear | forwarded | -- |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| clear | dispatched | null |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
## `Tooltip`
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
-| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element |
-| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element |
-| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element |
-| open | let | Yes | boolean | false | Set to `true` to open the tooltip |
-| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
-| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon |
-| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | -| iconDescription |
let | No | string | "" | Specify the ARIA label for the tooltip button |
-| iconName | let | No | string | "" | Specify the icon name attribute |
-| tabindex | let | No | string | "0" | Set the button tabindex |
-| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip |
-| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button |
-| triggerText | let | No | string | "" | Set the tooltip button text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element |
+| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip |
+| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
+| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon |
+| icon | No | let | No | any | undefined | Specify the icon to render for the tooltip button.Default to `<Information />` | +| 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 |
+| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip |
+| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button |
+| triggerText | No | let | No | string | "" | Set the tooltip button text |
### 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
@@ -4530,14 +4612,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| open | let | Yes | boolean | false | Set to `true` to open the tooltip |
-| tooltipText | let | No | string | "" | Specify the tooltip text |
-| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip |
+| tooltipText | No | let | No | string | "" | Specify the tooltip text |
+| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
+| direction | No | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element |
### Slots
@@ -4562,9 +4644,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
-| selectorPrimaryFocus | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------- | :------- | :--------------- | :------- | ------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
+| selectorPrimaryFocus | No | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip |
### Slots
@@ -4580,22 +4662,22 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| tooltipText | let | No | string | "" | Specify the tooltip text.Alternatively, use the "tooltipText" slot | -| icon |
let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
-| disabled | let | No | boolean | false | Set to `true` to disable the tooltip icon |
-| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
-| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| tooltipText | No | let | No | string | "" | Specify the tooltip text.Alternatively, use the "tooltipText" slot | +| icon | No |
let | No | any | undefined | Specify the icon to render |
+| 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 |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element |
### 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
@@ -4616,34 +4698,36 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
- text: string;
- icon?: typeof import("svelte").SvelteComponent;
+ text: any;
+ icon?: any;
disabled?: boolean;
- expanded?: boolean;
+ nodes?: TreeNode[];
}
```
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :-------------------- | :------- | :------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| expandedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be expanded |
-| selectedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be selected |
-| activeId | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | -| children |
let | No | Array | [] | Provide an array of children nodes to render |
-| size | let | No | "default" | "compact" | "default" | Specify the TreeView size |
-| labelText | let | No | string | "" | Specify the label text |
-| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | 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 |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | +| expandedIds | No |
let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idOnly one node can be active | +| nodes | No |
let | No | Array | [] | Provide an array of nodes to render |
+| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) || node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); } | Programmatically expand a subset of nodes.Expands all nodes if no argument is provided | +| collapseNodes | No |
function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.Collapses all nodes if no argument is provided | +| showNode | No |
function | No | (id: TreeNodeId) => void | () => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } } | Programmatically show a node by `id`.The matching node will be expanded, selected, and focused | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- |
{labelText} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
+| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
+| labelText | No | -- | {labelText} |
### Events
@@ -4658,9 +4742,9 @@ export interface TreeNode {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
-| clamp | let | No | "end" | "front" | "end" | -- |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
+| clamp | No | let | No | "end" | "front" | "end" | -- |
### Slots
@@ -4676,10 +4760,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
-| nested | let | No | boolean | false | Set to `true` to use the nested variant |
-| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
+| nested | No | let | No | boolean | false | Set to `true` to use the nested variant |
+| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
### Slots
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 2810f2cc..7a4e1cdf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,8 +4,8 @@ Before submitting a pull request (PR), consider [filing an issue](https://github
## Prerequisites
-- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=12)
-- [Yarn](https://classic.yarnpkg.com/en/docs/install)
+- [Node.js](https://nodejs.org/en/download/package-manager/) (version >=20)
+- [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-installer-to-install-nodejs-and-npm)
## Project set-up
@@ -19,42 +19,35 @@ cd carbon-components-svelte
Set the original repository as the upstream:
```sh
-git remote add upstream git@github.com:IBM/carbon-components-svelte.git
+git remote add upstream git@github.com:carbon-design-system/carbon-components-svelte.git
# verify that the upstream is added
git remote -v
```
### Install
-Install the project dependencies:
+Install the project dependencies.
```sh
-# carbon-components-svelte/
-yarn install
+npm install
```
## Documentation set-up
Component documentation is located in the `docs` folder. The website is built using svite, routify, and MDsveX. You will need to create a symbolic project link in order to see live changes reflected when developing locally.
-First, create a symbolic link at the root of the project folder:
+First, create a symbolic link at the root of the project:
```sh
-# carbon-components-svelte/
-yarn link
+npm link
```
-Go into the `docs` folder:
+Then, go into `docs` and link the package.
```sh
cd docs
-```
-
-Link `"carbon-components-svelte"`:
-
-```sh
-yarn link "carbon-components-svelte"
-yarn install
+npm link "carbon-components-svelte"
+npm install
```
If linked correctly, any change to a component in the `src` folder should be reflected in the `docs` site.
@@ -74,10 +67,10 @@ Preview changes to components from the `src` folder in the documentation website
In the `docs` folder, run:
```sh
-yarn dev
+npm run dev
```
-The site should be served at `http://localhost:3000/` (or the next available port).
+The site should be served at http://localhost:5173/ (or the next available port).
### Component Format
@@ -121,13 +114,12 @@ export {
} from "./ComposedModal";
```
-### Run `yarn build:docs`
+### Run `npm run build:docs`
Run the following command to re-generate TypeScript definitions and documentation.
```sh
-# carbon-components-svelte/
-yarn build:docs
+npm run build:docs
```
## Submit a Pull Request
@@ -145,3 +137,51 @@ git merge upstream/master
### Submit a PR
After you've pushed your changes to remote, submit your PR. Make sure you are comparing `
+
Carbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.
@@ -10,16 +13,12 @@ Design systems facilitate design and development through reuse, consistency, and
The Carbon Svelte portfolio also includes:
-- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 1900+ Carbon icons as Svelte components
-- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 700+ Carbon pictograms as Svelte components
-- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 20+ charts, powered by d3
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
-## [Documentation](https://carbon-components-svelte.onrender.com)
-
-The documentation site is deployed to [Render](https://render.com) as a Static Site. See [render.yaml](render.yaml) for details.
-
-[](https://render.com/deploy?repo=https://github.com/carbon-design-system/carbon-components-svelte)
+## [Documentation](https://svelte.carbondesignsystem.com)
Other forms of documentation are auto-generated:
@@ -29,24 +28,18 @@ Other forms of documentation are auto-generated:
## Installation
-Install `carbon-components-svelte` as a development dependency.
-
-**Yarn**
-
```sh
-yarn add -D carbon-components-svelte
-```
+# npm
+npm i carbon-components-svelte
-**NPM**
+# pnpm
+pnpm i carbon-components-svelte
-```sh
-npm i -D carbon-components-svelte
-```
+# Yarn
+yarn add carbon-components-svelte
-**pnpm**
-
-```sh
-pnpm i -D carbon-components-svelte
+# Bun
+bun add carbon-components-svelte
```
## Usage
@@ -62,7 +55,7 @@ Before importing components, you will need to first apply Carbon component style
- **g100.css**: Gray 100 theme (dark)
- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/master/packages/components) library.
+Each StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.
The compiled CSS is generated from the following `.scss` files:
@@ -95,42 +88,11 @@ import "carbon-components-svelte/css/g100.css";
import "carbon-components-svelte/css/all.css";
```
-#### CDN
-
-An alternative to loading styles is to link an external StyleSheet from a Content Delivery Network (CDN) like [unpkg.com](https://unpkg.com/).
-
-This is best suited for rapid prototyping.
-
-##### HTML
-
-```html
-
-
-
-
-
-
-```
-
-##### `svelte:head`
-
-```html
-
...
)",
+ "description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `...
`)",
"type": "string",
"value": "\"title\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -103,6 +118,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -114,6 +130,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -125,13 +142,18 @@
"value": "\"Expand/Collapse\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [
- { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
{
"name": "title",
"default": false,
@@ -140,15 +162,43 @@
}
],
"events": [
- { "type": "forwarded", "name": "animationend", "element": "li" },
- { "type": "forwarded", "name": "click", "element": "button" },
- { "type": "forwarded", "name": "mouseover", "element": "button" },
- { "type": "forwarded", "name": "mouseenter", "element": "button" },
- { "type": "forwarded", "name": "mouseleave", "element": "button" },
- { "type": "forwarded", "name": "keydown", "element": "button" }
+ {
+ "type": "forwarded",
+ "name": "animationend",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "button"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "button"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "AccordionSkeleton",
@@ -162,6 +212,7 @@
"value": "4",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -173,6 +224,7 @@
"value": "\"end\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -183,6 +235,7 @@
"type": "\"sm\" | \"xl\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -194,6 +247,7 @@
"value": "true",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
@@ -201,13 +255,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "ul" },
- { "type": "forwarded", "name": "mouseover", "element": "ul" },
- { "type": "forwarded", "name": "mouseenter", "element": "ul" },
- { "type": "forwarded", "name": "mouseleave", "element": "ul" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "ul"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "ul"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "ul" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
},
{
"moduleName": "AspectRatio",
@@ -221,15 +295,26 @@
"value": "\"2x1\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "Breadcrumb",
@@ -243,6 +328,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -254,12 +340,19 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
- "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
"events": [
{
"type": "forwarded",
@@ -283,7 +376,11 @@
}
],
"typedefs": [],
- "rest_props": { "type": "InlineComponent", "name": "BreadcrumbSkeleton" },
+ "generics": null,
+ "rest_props": {
+ "type": "InlineComponent",
+ "name": "BreadcrumbSkeleton"
+ },
"extends": {
"interface": "BreadcrumbSkeletonProps",
"import": "\"./BreadcrumbSkeleton.svelte\""
@@ -300,6 +397,7 @@
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -311,6 +409,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
@@ -320,17 +419,37 @@
{
"name": "__default__",
"default": true,
- "slot_props": "{props?: { [\"aria-current\"]?: string; class: \"bx--link\"; }}"
+ "slot_props": "{\n props?: {\n [\"aria-current\"]?: string;\n class: \"bx--link\";\n };\n}"
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "li" },
- { "type": "forwarded", "name": "mouseover", "element": "li" },
- { "type": "forwarded", "name": "mouseenter", "element": "li" },
- { "type": "forwarded", "name": "mouseleave", "element": "li" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "li"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "li"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "BreadcrumbSkeleton",
@@ -344,6 +463,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -355,6 +475,7 @@
"value": "3",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
@@ -362,13 +483,33 @@
"moduleExports": [],
"slots": [],
"events": [
- { "type": "forwarded", "name": "click", "element": "div" },
- { "type": "forwarded", "name": "mouseover", "element": "div" },
- { "type": "forwarded", "name": "mouseenter", "element": "div" },
- { "type": "forwarded", "name": "mouseleave", "element": "div" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "div"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "div"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "div" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
},
{
"moduleName": "Breakpoint",
@@ -381,6 +522,7 @@
"type": "BreakpointSize",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -389,9 +531,10 @@
"kind": "let",
"description": "Carbon grid sizes as an object",
"type": "Record...
)",
+ "description": "Specify the text displayed next to the icon.\nAlternatively, use the named slot \"text\" (e.g., `...
`)",
"type": "string",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
+ "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
},
@@ -4533,6 +5933,7 @@
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -4544,38 +5945,72 @@
"value": "{ duration: 200 }",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "preventCloseOnClickOutside",
+ "kind": "let",
+ "description": "Set to `true` to prevent the panel from closing when clicking outside",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [
- { "name": "__default__", "default": true, "slot_props": "{}" },
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
{
"name": "closeIcon",
"default": false,
- "fallback": "\n {text}\n
",
+ "fallback": "\n {text}\n
",
"slot_props": "{}"
}
],
"events": [
- { "type": "forwarded", "name": "click", "element": "a" },
- { "type": "forwarded", "name": "keydown", "element": "a" }
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "a"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "a"
+ }
],
"typedefs": [],
- "rest_props": { "type": "Element", "name": "li" }
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
},
{
"moduleName": "Pagination",
@@ -7610,6 +10037,7 @@
"value": "1",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -7621,6 +10049,19 @@
"value": "0",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
+ "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
},
@@ -7632,6 +10073,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7643,6 +10085,7 @@
"value": "\"Next page\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7654,6 +10097,7 @@
"value": "\"Previous page\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7665,6 +10109,7 @@
"value": "\"Items per page:\"",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7673,9 +10118,10 @@
"kind": "let",
"description": "Override the item text",
"type": "(min: number, max: number) => string",
- "value": "(min, max) => `${min}–${max} items`",
+ "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
"isFunction": true,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7684,9 +10130,10 @@
"kind": "let",
"description": "Override the item range text",
"type": "(min: number, max: number, total: number) => string",
- "value": "(min, max, total) => `${min}–${max} of ${total} items`",
+ "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,
"constant": false,
"reactive": false
},
@@ -7698,6 +10145,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7709,6 +10157,7 @@
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": false
},
@@ -7720,6 +10169,7 @@
"value": "10",
"isFunction": false,
"isFunctionDeclaration": false,
+ "isRequired": false,
"constant": false,
"reactive": true
},
@@ -7727,10 +10177,11 @@
"name": "pageSizes",
"kind": "let",
"description": "Specify the available page sizes",
- "type": "number[]",
+ "type": "ReadonlyArray{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", @@ -8579,10 +11292,11 @@ "name": "value", "kind": "let", "description": "Specify the value of the radio button", - "type": "string", + "type": "string | number", "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8594,6 +11308,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": true }, @@ -8605,6 +11320,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8616,6 +11332,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8627,6 +11344,7 @@ "value": "\"right\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8638,6 +11356,7 @@ "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8649,6 +11368,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8660,6 +11380,7 @@ "value": "\"ccs-\" + Math.random().toString(36)", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8668,9 +11389,9 @@ "kind": "let", "description": "Specify a name attribute for the radio button input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8682,6 +11403,7 @@ "value": "null", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": true } @@ -8695,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", @@ -8707,9 +11449,10 @@ "name": "selected", "kind": "let", "description": "Set the selected radio button value", - "type": "string", + "type": "string | number", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": true }, @@ -8721,6 +11464,29 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to require the selection of a radio button", + "type": "boolean", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "name", + "kind": "let", + "description": "Specify a name attribute for the radio button inputs", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8732,6 +11498,7 @@ "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8743,6 +11510,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8754,6 +11522,7 @@ "value": "\"right\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8765,6 +11534,7 @@ "value": "\"horizontal\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8775,13 +11545,18 @@ "type": "string", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false } ], "moduleExports": [], "slots": [ - { "name": "__default__", "default": true, "slot_props": "{}" }, + { + "name": "__default__", + "default": true, + "slot_props": "{}" + }, { "name": "legendText", "default": false, @@ -8790,14 +11565,38 @@ } ], "events": [ - { "type": "forwarded", "name": "click", "element": "div" }, - { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "dispatched", "name": "change" } + { + "type": "dispatched", + "name": "change", + "detail": "string | number" + }, + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } ], "typedefs": [], - "rest_props": { "type": "Element", "name": "div" } + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } }, { "moduleName": "RadioButtonSkeleton", @@ -8806,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", @@ -8826,6 +11645,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": true }, @@ -8837,6 +11657,7 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8848,6 +11669,19 @@ "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "required", + "kind": "let", + "description": "Set to `true` to mark the field as required", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8859,6 +11693,7 @@ "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8870,6 +11705,7 @@ "value": "\"0\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8881,6 +11717,7 @@ "value": "\"Tile checkmark\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -8892,46 +11729,82 @@ "value": "\"ccs-\" + Math.random().toString(36)", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, { "name": "name", "kind": "let", - "description": "Specify a name attribute for the input", + "description": "Specify a name attribute for the radio tile input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false } ], "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:
-
Props
+Props
{#if component.props.length > 0}
@@ -55,26 +62,40 @@
Prop name
Type
- Default value
Description
{#each component.props.sort((a, b) => {
- if (a.reactive > b.reactive) return -1;
+ // Sort props so required props are listed first, then reactive props.
+
+ if (a.isRequired !== b.isRequired) {
+ return b.isRequired ? 1 : -1;
+ }
+
+ if (a.reactive !== b.reactive) {
+ return b.reactive ? 1 : -1;
+ }
+
+ return 0;
}) as prop (prop.name)}
-
Reactive
{/if}
+ {#if prop.isRequired}
+ Required
+ {/if}
{#each (prop.type || "").split(" | ") as type, i (type)}
@@ -90,16 +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}
+
No props.
{/if} -Typedefs
+Typedefs
{#if component.typedefs.length > 0} -
+ t.ts).join("\n")}
+ />
+
{:else}
No typedefs.
{/if} -Slots
+Slots
{#if component.slots.length > 0} -No slots.
{/if} -Forwarded events
+Forwarded events
{#if forwarded_events.length > 0}No forwarded events.
{/if} -Dispatched events
+Dispatched events
{#if dispatched_events.length > 0} -No dispatched events.
{/if} -$$restProps
+$$restProps
{#if component.rest_props}
@@ -188,6 +285,7 @@
diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte
index 136fe90b..b908e575 100644
--- a/docs/src/components/InlineSnippet.svelte
+++ b/docs/src/components/InlineSnippet.svelte
@@ -6,7 +6,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/pages/_fallback.svelte b/docs/src/pages/_fallback.svelte
index 29a40603..2bb884c7 100644
--- a/docs/src/pages/_fallback.svelte
+++ b/docs/src/pages/_fallback.svelte
@@ -12,7 +12,7 @@
{
+ const theme = e.detail.theme;
+ document.documentElement.style.setProperty(
+ "color-scheme",
+ ["white", "g10"].includes(theme) ? "light" : "dark",
+ );
+ }}
+>
-
- Carbon Components Svelte
-
+ {
+ $goto(e.detail.selectedResult.href);
+ }}
+ />
+
Carbon Svelte portfolio
-
+
-
- {#each components.children.filter((child) => !deprecated.includes(child.title)) as child, i (child.path)}
-
- {child.title}
- {#if deprecated.includes(child.title)}
-
- Deprecated
-
- {/if}
- {#if new_components.includes(child.title)}
-
- New
-
- {/if}
-
- {/each}
-
-
- {#each recipes.children as child, i (child.path)}
-
- {child.title}
-
- {/each}
-
+ {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)}
+
+ {child.title}
+ {#if deprecated.includes(child.title)}
+
+ Deprecated
+
+ {/if}
+ {#if new_components.includes(child.title)}
+
+ New
+
+ {/if}
+
+ {/each}
diff --git a/src/OverflowMenu/OverflowMenuItem.svelte b/src/OverflowMenu/OverflowMenuItem.svelte
index 813fac70..496d0f16 100644
--- a/src/OverflowMenu/OverflowMenuItem.svelte
+++ b/src/OverflowMenu/OverflowMenuItem.svelte
@@ -1,7 +1,7 @@
-
- copy(text)} />
diff --git a/docs/src/layouts/Recipe.svelte b/docs/src/layouts/Recipe.svelte
deleted file mode 100644
index 1122660a..00000000
--- a/docs/src/layouts/Recipe.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-
-
-{component}
- -
-
- Table of Contents
-
-
- Table of Contents
-404
Page not found.
- Return home
+ Return home
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index 672f44a3..c88eb2bb 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -1,5 +1,11 @@
+
+
+
+
+v{process.env.VERSION || ""}
+
+ Carbon Components Svelte v{process.env.VERSION || ""}
-
-
+
+
{#if !pageSizeInputDisabled}
@@ -118,26 +135,29 @@
hideLabel
noLabel
inline
- bind:selected="{pageSize}"
+ on:update={(event) => {
+ dispatch("change", { pageSize: event.detail });
+ }}
+ bind:selected={pageSize}
>
{#each pageSizes as size, i (size)}
-
-
+
diff --git a/src/Pagination/PaginationSkeleton.svelte b/src/Pagination/PaginationSkeleton.svelte
index af910477..f3838074 100644
--- a/src/Pagination/PaginationSkeleton.svelte
+++ b/src/Pagination/PaginationSkeleton.svelte
@@ -3,24 +3,22 @@
+
{#if !pageInputDisabled}
-
+
{#if pagesUnknown}
{pageText(page)}
{:else}{pageRangeText(page, totalPages)}{/if}
@@ -161,31 +184,33 @@
kind="ghost"
tooltipAlignment="center"
tooltipPosition="top"
- icon="{CaretLeft}"
- iconDescription="{backwardText}"
- disabled="{backButtonDisabled}"
+ icon={CaretLeft}
+ iconDescription={backwardText}
+ disabled={backButtonDisabled}
class="bx--pagination__button bx--pagination__button--backward {backButtonDisabled
? 'bx--pagination__button--no-index'
: ''}"
- on:click="{() => {
+ on:click={() => {
page--;
- dispatch('click:button--previous', { page });
- }}"
+ dispatch("click:button--previous", { page });
+ dispatch("change", { page });
+ }}
/>
-
+
+
+
diff --git a/src/PaginationNav/PaginationItem.svelte b/src/PaginationNav/PaginationItem.svelte
index 83a36046..889a899e 100644
--- a/src/PaginationNav/PaginationItem.svelte
+++ b/src/PaginationNav/PaginationItem.svelte
@@ -1,20 +1,21 @@
-