+
+ {:else}
+
+
+ {/if}
+ 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: 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?: 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 | 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
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `DatePicker`
+
+### Props
+
+| 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 + +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | + +### Events + +| Event name | Type | Detail | +| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- | +| change | dispatched |
string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `DatePickerInput`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
+
+## `DatePickerSkeleton`
+
+### Props
+
+| 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
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `Dropdown`
+
+### Types
+
+```ts
+export type DropdownItemId = any;
+
+export type DropdownItemText = string;
+
+export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
+ disabled?: boolean;
}
```
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------------------------------ | :------------ | :--------------------------------------------- |
-| items | DropdownItem[] | `[]` | Set the dropdown items. |
-| itemToString | (item: DropdownItem) => string | -- | Override the display of a dropdown item. |
-| selectedIndex | number | -- | Specify the selected item index. |
-| type | "default" | "inline" | `"default"` | Specify the type of dropdown. |
-| size | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field. |
-| open | boolean | `false` | Set to `true` to open the dropdown. |
-| inline | boolean | `false` | Set to `true` to use the inline variant. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the dropdown. |
-| titleText | string | `""` | Specify the title text. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| helperText | string | `""` | Specify the helper text. |
-| label | string | -- | Specify the list box label. |
-| translateWithId | (id: any) => string | -- | Override the default translation ids. |
-| id | string | -- | Set an id for the list box component. |
-| name | string | -- | Specify a name attribute for the list box. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. |
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :--------------------------------------------------- | :-------------------------------- |
+| -- | Yes | { item: DropdownItem; index: number; } | {itemToString(item)} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------------------------------------------------------------- |
+| select | dispatched | { selectedId: DropdownItemId, selectedItem: DropdownItem } |
-### Dispatched events
-
-- `on:select`
-
----
-
-## DropdownSkeleton
-
-### Import path
-
-```js
-import { DropdownSkeleton } from "carbon-components-svelte";
-```
+## `DropdownSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------------- |
-| inline | 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
-No slots.
+None.
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ExpandableTile
-
-### Import path
-
-```js
-import { ExpandableTile } from "carbon-components-svelte";
-```
+## `ExpandableTile`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------------- | :----------------------------------- | :---------------------------- | :----------------------------------------------------- |
-| expanded | boolean | `false` | Set to `true` to expand the tile. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| tileMaxHeight | number | `0` | Specify the max height of the tile (number of pixels). |
-| tilePadding | number | `0` | Specify the padding of the tile (number of pixels). |
-| tileCollapsedIconText | string | `"Interact to expand Tile"` | Specify the icon text of the collapsed tile. |
-| tileExpandedIconText | string | `"Interact to collapse Tile"` | Specify the icon text of the expanded tile. |
-| tabindex | string | `"0"` | Specify the tabindex. |
-| id | string | -- | Set an id for the top-level div element. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the input HTML 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
-- **"above"**: `...
`
-- **"below"**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| above | No | -- | -- |
+| below | No | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:keypress`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keypress | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## FileUploader
-
-### Import path
-
-```js
-import { FileUploader } from "carbon-components-svelte";
-```
+## `FileUploader`
### Props
-| Prop name | Type | Default value | Description |
-| :---------------------- | :----------------------------------------------------------------------------------------- | :--------------------------- | :--------------------------------------------------------------------- |
-| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. |
-| accept | string[] | `[]` | Specify the accepted file types. |
-| files | string[] | `[]` | Obtain the uploaded file names. |
-| multiple | boolean | `false` | Set to `true` to allow multiple files. |
-| clearFiles (`constant`) | () => any | -- | Override the default behavior of clearing the array of uploaded files. |
-| labelDescription | string | `""` | Specify the label description. |
-| labelTitle | string | `""` | Specify the label title. |
-| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. |
-| buttonLabel | string | `""` | Specify the button label. |
-| iconDescription | string | `"Provide icon description"` | Specify the ARIA label used for the status icons. |
-| name | 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :--------------- | :------ | :---- | :------------------------------ |
+| labelDescription | No | -- | {labelDescription} |
+| labelTitle | No | -- | {labelTitle} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:keydown`
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| add | dispatched | ReadonlyArray |
+| remove | dispatched | ReadonlyArray |
+| change | dispatched | ReadonlyArray |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
-### Dispatched events
-
-- `on:add`
-- `on:remove`
-
----
-
-## FileUploaderButton
-
-### Import path
-
-```js
-import { FileUploaderButton } from "carbon-components-svelte";
-```
+## `FileUploaderButton`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- |
-| accept | string[] | `[]` | Specify the accepted file types. |
-| multiple | boolean | `false` | Set to `true` to allow multiple files. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| disableLabelChanges | boolean | `false` | Set to `true` to disable label changes. |
-| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | `"primary"` | Specify the kind of file uploader button. |
-| labelText | string | `"Add file"` | Specify the label text. |
-| role | string | `"button"` | Specify the label role. |
-| tabindex | string | `"0"` | Specify `tabindex` attribute. |
-| id | string | -- | Set an id for the input element. |
-| name | string | `""` | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML 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 |
+| 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Forwarded events
+### Events
-- `on:keydown`
-- `on:change`
-- `on:click`
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| change | dispatched | ReadonlyArray |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## FileUploaderDropContainer
-
-### Import path
-
-```js
-import { FileUploaderDropContainer } from "carbon-components-svelte";
-```
+## `FileUploaderDropContainer`
### Props
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------- |
+| add | dispatched | ReadonlyArray |
+| change | dispatched | ReadonlyArray |
+| dragover | forwarded | -- |
+| dragleave | forwarded | -- |
+| drop | forwarded | -- |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
+
+## `FileUploaderItem`
+
+### Props
+
+| 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
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| delete | dispatched | string |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `FileUploaderSkeleton`
+
+### Props
+
+None.
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `Filename`
+
+### Props
+
+| 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
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
+
+## `FluidForm`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| submit | forwarded | -- |
+
+## `Form`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- |
+| ref | No | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| submit | forwarded | -- |
+
+## `FormGroup`
+
+### Props
+
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `FormItem`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `FormLabel`
+
+### Props
+
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `Grid`
+
+### Props
+
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------- | :------- |
+| -- | Yes | { props: { class: string; [key: string]: any; } } | -- |
+
+### Events
+
+None.
+
+## `Header`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| company | No | let | No | string | undefined | Specify the company name.Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| platformName | No |
let | No | string | "" | Specify the platform name.Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | +| persistentHamburgerMenu | No |
let | No | boolean | false | Set to `true` to persist the hamburger menu |
+| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | +| iconMenu | No |
let | No | any | undefined | Specify the icon to render for the closed state.Defaults to `<Menu size={20} />` | +| iconClose | No |
let | No | any | undefined | Specify the icon to render for the opened state.Defaults to `<Close size={20} />` | + +### Slots + +| Slot name | Default | Props | Fallback | +| :-------------- | :------ | :---- | :--------------------------- | +| -- | Yes | -- | -- | +| company | No | -- |
{company} |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+
+## `HeaderAction`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
+| icon | No | let | No | any | undefined | Specify the icon to render when the action panel is closed.Defaults to `<Switcher size={20} />` | +| closeIcon | No |
let | No | any | undefined | Specify the icon to render when the action panel is open.Defaults to `<Close size={20} />` | +| text | No |
let | No | string | undefined | Specify the text displayed next to the icon.Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| iconDescription | No |
let | No | string | undefined | Specify an icon tooltip. The tooltip will not be displayedif either the `text` prop or a named slot="text" is used | +| tooltipAlignment | No |
let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.Only applies when `iconDescription` is provided | +| transition | No |
let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).Set to `false` to disable the transition | +| preventCloseOnClickOutside | No |
let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
+| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| open | dispatched | null |
+| close | dispatched | null |
+| click | forwarded | -- |
+
+## `HeaderActionLink`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+| icon | No | let | No | any | undefined | Specify the icon to render |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------------------------------------------ |
+| icon | No | -- | <svelte:component this={icon} size={20} /> |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+
+## `HeaderGlobalAction`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | No | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | No | let | No | any | undefined | Specify the icon to render |
+
+### Slots
+
+None.
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+
+## `HeaderNav`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
+## `HeaderNavItem`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | {text} |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+
+## `HeaderNavMenu`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+
+## `HeaderPanelDivider`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
+## `HeaderPanelLink`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
+| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | No | let | No | string | undefined | Specify the `href` attribute |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+
+## `HeaderPanelLinks`
+
+### Props
+
+None.
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
+## `HeaderSearch`
+
+### Types
+
```ts
-// `FileUploaderDropContainer` type definitions
-
-type Files = string[];
-```
-
-| Prop name | Type | Default value | Description |
-| :------------ | :---------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- |
-| accept | string[] | `[]` | Specify the accepted file types. |
-| multiple | boolean | `false` | Set to `true` to allow multiple files. |
-| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files. |
-| labelText | string | `"Add file"` | Specify the label text. |
-| role | string | `"button"` | Specify the `role` attribute of the drop container. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| tabindex | string | `"0"` | Specify `tabindex` attribute. |
-| id | string | -- | Set an id for the input element. |
-| name | string | `""` | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:dragover`
-- `on:dragleave`
-- `on:drop`
-- `on:keydown`
-- `on:change`
-- `on:click`
-
-### Dispatched events
-
-- `on:add`
-
----
-
-## FileUploaderItem
-
-### Import path
-
-```js
-import { FileUploaderItem } from "carbon-components-svelte";
+export interface HeaderSearchResult {
+ href: string;
+ text: string;
+ description?: string;
+}
```
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ |
-| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file uploader status. |
-| iconDescription | string | `""` | Specify the ARIA label used for the status icons. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| errorSubject | string | `""` | Specify the error subject text. |
-| errorBody | string | `""` | Specify the error body text. |
-| id | string | -- | Set an id for the top-level element. |
-| name | string | `""` | Specify the file uploader name. |
+| 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description={true}
>– {result.description}</span
>{/if} |
-### Forwarded events
+### Events
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------------------------------------------------------------------------------------- |
+| active | dispatched | null |
+| inactive | dispatched | null |
+| clear | dispatched | null |
+| select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
-### Dispatched events
-
-- `on:delete`
-
----
-
-## FileUploaderSkeleton
-
-### Import path
-
-```js
-import { FileUploaderSkeleton } from "carbon-components-svelte";
-```
+## `HeaderUtilities`
### Props
-No exported props.
+None.
### Slots
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+None.
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Filename
-
-### Import path
-
-```js
-import { Filename } from "carbon-components-svelte";
-```
+## `ImageLoader`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------------------------------------------- | :------------ | :------------------------------------------------ |
-| status | "uploading" | "edit" | "complete" | `"uploading"` | Specify the file name status. |
-| iconDescription | string | `""` | Specify the ARIA label used for the status icons. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
+| 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| error | No | -- | -- |
+| loading | No | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:keydown`
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| load | dispatched | null |
+| error | dispatched | null |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## FluidForm
-
-### Import path
-
-```js
-import { FluidForm } from "carbon-components-svelte";
-```
+## `InlineLoading`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
+| description | No | let | No | string | undefined | Set the loading description |
+| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.Defaults to the `status` prop for the "error" and "finished" states | +| successDelay | No |
let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
-- **default**: `...
`
+None.
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| success | dispatched | null |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Form
-
-### Import path
-
-```js
-import { Form } from "carbon-components-svelte";
-```
+## `InlineNotification`
### Props
-No exported props.
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------- |
+| -- | Yes | -- | -- |
+| actions | No | -- | -- |
+| subtitle | No | -- | {subtitle} |
+| title | No | -- | {title} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:submit`
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| close | dispatched | { timeout: boolean } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## FormGroup
-
-### Import path
-
-```js
-import { FormGroup } from "carbon-components-svelte";
-```
+## `Link`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------- | :------------ | :------------------------------------------ |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| message | boolean | `false` | Set to `true` to render a form requirement. |
-| messageText | string | `""` | Specify the message text. |
-| legendText | string | `""` | Specify the legend text. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## FormItem
-
-### Import path
-
-```js
-import { FormItem } from "carbon-components-svelte";
-```
+## `ListBox`
### Props
-No exported props.
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
-### Dispatched events
+## `ListBoxField`
-No dispatched events.
-
----
-
-## FormLabel
-
-### Import path
-
-```js
-import { FormLabel } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :----------------------------------------- |
-| id | string | -- | Set an id to be used by the label element. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Grid
-
-### Import path
-
-```js
-import { Grid } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>). |
-| condensed | boolean | `false` | Set to `true` to use the condensed variant. |
-| narrow | boolean | `false` | Set to `true` to use the narrow variant. |
-| fullWidth | boolean | `false` | Set to `true` to use the fullWidth variant. |
-| noGutter | boolean | `false` | Set to `true` to remove the gutter. |
-| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. |
-| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Header
-
-### Import path
-
-```js
-import { Header } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :---------------- | :----------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------- |
-| expandedByDefault | boolean | `true` | Set to `false` to hide the side nav by default. |
-| isSideNavOpen | boolean | `false` | Set to `true` to open the side nav. |
-| uiShellAriaLabel | string | -- | Specify the ARIA label for the header. |
-| href | string | -- | Specify the `href` attribute. |
-| company | string | -- | Specify the company name. |
-| platformName | string | `""` | Specify the platform name. Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>). |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
-
-### Slots
-
-- **default**: `...
`
-- **"skip-to-content"**: `...
`
-- **"platform"**: `...
`
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderAction
-
-### Import path
-
-```js
-import { HeaderAction } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- |
-| isOpen | boolean | `false` | Set to `true` to open the panel. |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. |
-| text | string | -- | Specify the text. Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>). |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. |
-
-### Slots
-
-- **default**: `...
`
-- **"text"**: `...
`
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-- `on:close`
-
----
-
-## HeaderActionLink
-
-### Import path
-
-```js
-import { HeaderActionLink } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
-| linkIsActive | boolean | `false` | Set to `true` to use the active state. |
-| href | string | -- | Specify the `href` attribute. |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderActionSearch
-
-### Import path
-
-```js
-import { HeaderActionSearch } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :------------- | :------------------- | :------------ | :--------------------------------- |
-| searchIsActive | boolean | `false` | Set to `true` to focus the search. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-- `on:focusInputSearch`
-- `on:focusOutInputSearch`
-- `on:inputSearch`
-
----
-
-## HeaderGlobalAction
-
-### Import path
-
-```js
-import { HeaderGlobalAction } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------- |
-| isActive | boolean | `false` | Set to `true` to use the active variant. |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon to render. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button element. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderNav
-
-### Import path
-
-```js
-import { HeaderNav } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :---------------------------------- |
-| ariaLabel | string | -- | Specify the ARIA label for the nav. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderNavItem
-
-### Import path
-
-```js
-import { HeaderNavItem } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
-| href | string | -- | Specify the `href` attribute. |
-| text | string | -- | Specify the text. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keyup`
-- `on:keydown`
-- `on:focus`
-- `on:blur`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderNavMenu
-
-### Import path
-
-```js
-import { HeaderNavMenu } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------------- | :----------------------------------------- | :------------------ | :--------------------------------------------- |
-| expanded | boolean | `false` | Set to `true` to toggle the expanded state. |
-| href | string | `"/"` | Specify the `href` attribute. |
-| text | string | -- | Specify the text. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
-| iconDescription | string | `"Expand/Collapse"` | Specify the ARIA label for the chevron icon. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:keydown`
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keyup`
-- `on:focus`
-- `on:blur`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderPanelDivider
-
-### Import path
-
-```js
-import { HeaderPanelDivider } from "carbon-components-svelte";
-```
-
-### Props
-
-No exported props.
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderPanelLink
-
-### Import path
-
-```js
-import { HeaderPanelLink } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
-| href | string | -- | Specify the `href` attribute. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderPanelLinks
-
-### Import path
-
-```js
-import { HeaderPanelLinks } from "carbon-components-svelte";
-```
-
-### Props
-
-No exported props.
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## HeaderUtilities
-
-### Import path
-
-```js
-import { HeaderUtilities } from "carbon-components-svelte";
-```
-
-### Props
-
-No exported props.
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Icon
-
-### Import path
-
-```js
-import { Icon } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------------------------------------------------------ | :------------ | :------------------------------------------------------------------------------------------------------ |
-| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`). |
-| skeleton | boolean | `false` | Set to `true` to display the skeleton state. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## IconSkeleton
-
-### Import path
-
-```js
-import { IconSkeleton } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------ |
-| size | number | `16` | Set the size of the icon. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## InlineLoading
-
-### Import path
-
-```js
-import { InlineLoading } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------------- | :----------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------- |
-| status | "active" | "inactive" | "finished" | "error" | `"active"` | Set the loading status. |
-| description | string | -- | Set the loading description. |
-| iconDescription | string | -- | Specify the ARIA label for the loading icon. |
-| successDelay | number | `1500` | Specify the timeout delay (ms) after `status` is set to "success". |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-- `on:success`
-
----
-
-## InlineNotification
-
-### Import path
-
-```js
-import { InlineNotification } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- |
-| notificationType | "toast" | "inline" | `"inline"` | Set the type of notification. |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. |
-| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. |
-| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. |
-| role | string | `"alert"` | Set the `role` attribute. |
-| title | string | `"Title"` | Specify the title text. |
-| subtitle | string | `""` | Specify the subtitle text. |
-| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. |
-| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. |
-
-### Slots
-
-- **default**: `...
`
-- **"actions"**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-- `on:close`
-
----
-
-## Link
-
-### Import path
-
-```js
-import { Link } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :-------- | :--------------------------------------------------------------------- | :------------ | :------------------------------------------------ |
-| href | string | -- | Specify the href value. |
-| inline | boolean | `false` | Set to `true` to use the inline variant. |
-| disabled | boolean | `false` | Set to `true` to disable the checkbox. |
-| visited | boolean | `false` | Set to `true` to allow visited styles. |
-| ref | null | HTMLAnchorElement | HTMLParagraphElement | `null` | Obtain a reference to the top-level HTML element. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBox
-
-### Import path
-
-```js
-import { ListBox } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------------------------- | :------------ | :------------------------------------------ |
-| size | "sm" | "xl" | -- | Set the size of the list box. |
-| type | "default" | "inline" | `"default"` | Set the type of the list box. |
-| open | boolean | `false` | Set to `true` to open the list box. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the list box. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:keydown`
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBoxField
-
-### Import path
-
-```js
-import { ListBoxField } from "carbon-components-svelte";
-```
-
-### Props
+### Types
```ts
-// `ListBoxField` type definitions
-
-type ListBoxFieldTranslationId = "close" | "open";
-```
-
-| Prop name | Type | Default value | Description |
-| :-------------------------- | :----------------------------------------------------- | :--------------------------------- | :------------------------------------------------ |
-| disabled | boolean | `false` | Set to `true` to disable the list box field. |
-| role | string | `"combobox"` | Specify the role attribute. |
-| tabindex | string | `"-1"` | Specify the tabindex. |
-| translationIds (`constant`) | { close: "close"; open: "open"; } | `{ close: "close", open: "open" }` | Default translation ids. |
-| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | Override the default translation ids. |
-| id | string | -- | Set an id for the top-level element. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
-- `on:blur`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBoxMenu
-
-### Import path
-
-```js
-import { ListBoxMenu } from "carbon-components-svelte";
+export type ListBoxFieldTranslationId = "close" | "open";
```
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :-------------------------------------- | :------------ | :-------------------------------------------- |
-| id | string | -- | Set an id for the top-level element. |
-| ref | null | HTMLDivElement | `null` | Obtain a reference to the input HTML 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:scroll`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBoxMenuIcon
-
-### Import path
-
-```js
-import { ListBoxMenuIcon } from "carbon-components-svelte";
-```
+## `ListBoxMenu`
### Props
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| scroll | forwarded | -- |
+
+## `ListBoxMenuIcon`
+
+### Types
+
```ts
-// `ListBoxMenuIcon` type definitions
-
-type ListBoxMenuIconTranslationId = "close" | "open";
-```
-
-| Prop name | Type | Default value | Description |
-| :-------------------------- | :-------------------------------------------------------- | :--------------------------------- | :-------------------------------------------- |
-| open | boolean | `false` | Set to `true` to open the list box menu icon. |
-| translationIds (`constant`) | { close: "close"; open: "open" } | `{ close: "close", open: "open" }` | Default translation ids. |
-| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | Override the default translation ids. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBoxMenuItem
-
-### Import path
-
-```js
-import { ListBoxMenuItem } from "carbon-components-svelte";
+export type ListBoxMenuIconTranslationId = "close" | "open";
```
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------- | :------------ | :--------------------------------------------- |
-| active | boolean | `false` | Set to `true` to enable the active state. |
-| highlighted | boolean | `false` | Set to `true` to enable the highlighted state. |
+| 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
-- **default**: `...
`
+None.
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ListBoxSelection
-
-### Import path
-
-```js
-import { ListBoxSelection } from "carbon-components-svelte";
-```
+## `ListBoxMenuItem`
### Props
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+
+## `ListBoxSelection`
+
+### Types
+
```ts
-// `ListBoxSelection` type definitions
-
-type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
-```
-
-| Prop name | Type | Default value | Description |
-| :-------------------------- | :---------------------------------------------------------------------- | :------------------------------------------------------------ | :------------------------------------------------ |
-| selectionCount | any | -- | Specify the number of selected items. |
-| disabled | boolean | `false` | Set to `true` to disable the list box selection. |
-| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | `{ clearAll: "clearAll", clearSelection: "clearSelection", }` | Default translation ids. |
-| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | Override the default translation ids. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML element. |
-
-### Slots
-
-No slots.
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-- `on:clear`
-
----
-
-## ListItem
-
-### Import path
-
-```js
-import { ListItem } from "carbon-components-svelte";
+export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
```
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| 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
-- **default**: `...
`
+None.
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| clear | dispatched | KeyboardEvent | MouseEvent |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Loading
-
-### Import path
-
-```js
-import { Loading } from "carbon-components-svelte";
-```
+## `ListItem`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------- | :--------------------------- | :------------------------------------------ |
-| small | boolean | `false` | Set to `true` to use the small variant. |
-| active | boolean | `true` | Set to `false` to disable the active state. |
-| withOverlay | boolean | `true` | Set to `false` to disable the overlay. |
-| description | string | `"Active loading indicator"` | Specify the label description. |
-| id | string | -- | Set an id for the label element. |
+None.
### Slots
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Modal
-
-### Import path
-
-```js
-import { Modal } from "carbon-components-svelte";
-```
+## `Loading`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------------- | :---------------------------------------- | :----------------------------- | :-------------------------------------------------------------------------- |
-| size | "xs" | "sm" | "lg" | -- | Set the size of the modal. |
-| open | boolean | `false` | Set to `true` to open the modal. |
-| danger | boolean | `false` | Set to `true` to use the danger variant. |
-| alert | boolean | `false` | Set to `true` to enable alert mode. |
-| passiveModal | boolean | `false` | Set to `true` to use the passive variant. |
-| modalHeading | string | -- | Specify the modal heading. |
-| modalLabel | string | -- | Specify the modal label. |
-| modalAriaLabel | string | -- | Specify the ARIA label for the modal. |
-| iconDescription | string | `"Close the modal"` | Specify the ARIA label for the close icon. |
-| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. |
-| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. |
-| primaryButtonText | string | `""` | Specify the primary button text. |
-| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. |
-| shouldSubmitOnEnter | boolean | `true` | Set to `true` for the primary button to be triggered when pressing "Enter". |
-| secondaryButtonText | string | `""` | Specify the secondary button text. |
-| selectorPrimaryFocus | string | `"[data-modal-primary-focus]"` | Specify a selector to be focused when opening the modal. |
-| preventCloseOnClickOutside | boolean | `false` | Set to `true` to prevent the modal from closing when clicking outside. |
-| id | string | -- | Set an id for the top-level element. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the top-level HTML 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
-- **default**: `...
`
-- **"label"**: `...
`
-- **"heading"**: `...
`
+None.
-### Forwarded events
+### Events
-- `on:keydown`
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+None.
-### Dispatched events
-
-- `on:submit`
-- `on:click:button--secondary`
-- `on:close`
-- `on:open`
-
----
-
-## ModalBody
-
-### Import path
-
-```js
-import { ModalBody } from "carbon-components-svelte";
-```
+## `LocalStorage`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------ | :------------------- | :------------ | :----------------------------------------------------- |
-| hasForm | boolean | `false` | Set to `true` if the modal contains form elements. |
-| hasScrollingContent | boolean | `false` | Set to `true` if the modal contains scrolling content. |
+| 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
-- **default**: `...
`
+None.
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------- |
+| save | dispatched | null |
+| update | dispatched | { prevValue: any; value: any; } |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ModalFooter
-
-### Import path
-
-```js
-import { ModalFooter } from "carbon-components-svelte";
-```
+## `Modal`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------------- | :------------------- | :------------ | :------------------------------------------- |
-| primaryButtonText | string | `""` | Specify the primary button text. |
-| primaryButtonDisabled | boolean | `false` | Set to `true` to disable the primary button. |
-| primaryClass | string | -- | Specify a class for the primary button. |
-| secondaryButtonText | string | `""` | Specify the secondary button text. |
-| secondaryClass | string | -- | Specify a class for the secondary button. |
-| danger | boolean | `false` | Set to `true` to use the danger variant. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| heading | No | -- | {modalHeading} |
+| label | No | -- | {modalLabel} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :---------------------- | :--------- | :------------------------------ |
+| transitionend | dispatched | { open: boolean; } |
+| click:button--secondary | dispatched | { text: string; } |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| submit | dispatched | null |
+| click:button--primary | dispatched | null |
+| close | dispatched | null |
+| open | dispatched | null |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ModalHeader
-
-### Import path
-
-```js
-import { ModalHeader } from "carbon-components-svelte";
-```
+## `ModalBody`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------ | :------------ | :----------------------------------------- |
-| title | string | `""` | Specify the modal title. |
-| label | string | `""` | Specify the modal label. |
-| labelClass | string | `""` | Specify the label class. |
-| titleClass | string | `""` | Specify the title class. |
-| closeClass | string | `""` | Specify the close class. |
-| closeIconClass | string | `""` | Specify the close icon class. |
-| iconDescription | string | `"Close"` | Specify the ARIA label for the close icon. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
+None.
-### Dispatched events
-
-No dispatched events.
-
----
-
-## MultiSelect
-
-### Import path
-
-```js
-import { MultiSelect } from "carbon-components-svelte";
-```
+## `ModalFooter`
### Props
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| primaryButtonText | No | let | No | string | "" | Specify the primary button text |
+| primaryButtonIcon | No | let | No | any | undefined | Specify the primary button icon |
+| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryClass | No | let | No | string | undefined | Specify a class for the primary button |
+| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modalsupersedes `secondaryButtonText` | +| secondaryClass | No |
let | No | string | undefined | Specify a class for the secondary button |
+| danger | No | let | No | boolean | false | Set to `true` to use the danger variant |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :---------------------- | :--------- | :----------------------------- |
+| click:button--secondary | dispatched | { text: string; } |
+
+## `ModalHeader`
+
+### Props
+
+| 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
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+
+## `MultiSelect`
+
+### Types
+
```ts
-// `MultiSelect` type definitions
+export type MultiSelectItemId = any;
-type MultiSelectItemId = string;
+export type MultiSelectItemText = string;
-type MultiSelectItemText = string;
-
-interface MultiSelectItem {
+export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
+ disabled?: boolean;
}
```
-| Prop name | Type | Default value | Description |
-| :---------------- | :----------------------------------------------------------------------- | :------------------- | :--------------------------------------------------------------------------------- |
-| items | MultiSelectItem[] | `[]` | Set the multiselect items. |
-| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item. |
-| selectedIds | MultiSelectItemId[] | `[]` | Set the selected ids. |
-| value | string | `""` | Specify the multiselect value. |
-| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox. |
-| type | "default" | "inline" | `"default"` | Specify the type of multiselect. |
-| selectionFeedback | "top" | "fixed" | "top-after-reopen" | `"top-after-reopen"` | Specify the selection feedback after selecting items. |
-| disabled | boolean | `false` | Set to `true` to disable the dropdown. |
-| filterable | boolean | `false` | Set to `true` to filter items. |
-| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic. The default filtering is an exact string comparison. |
-| open | boolean | `false` | Set to `true` to open the dropdown. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| locale | string | `"en"` | Specify the locale. |
-| placeholder | string | `""` | Specify the placeholder text. |
-| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic. The default sorting compare the item text value. |
-| translateWithId | (id: any) => string | -- | Override the default translation ids. |
-| titleText | string | `""` | Specify the title text. |
-| useTitleInItem | boolean | `false` | Set to `true` to pass the item to `itemToString` in the checkbox. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| helperText | string | `""` | Specify the helper text. |
-| label | string | `""` | Specify the list box label. |
-| id | string | -- | Set an id for the list box component. |
-| name | string | -- | Specify a name attribute for the select. |
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
+| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
+| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
+| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | No | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
+| items | No | let | No | ReadonlyArray | [] | Set the multiselect items |
+| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
+| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
+| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | No | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | No | let | No | (item: MultiSelectItem, value: string) => boolean | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logicThe default filtering is an exact string comparison | +| light | No |
let | No | boolean | false | Set to `true` to enable the light variant |
+| locale | No | let | No | string | "en" | Specify the locale |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logicThe default sorting compare the item text value | +| translateWithId | No |
let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No |
let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No |
let | No | string | "" | Specify the title text |
+| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the select |
### Slots
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
+| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
+| titleText | No | -- | {titleText} |
-### Forwarded events
+### Events
-- `on:keydown`
-- `on:focus`
-- `on:blur`
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
+| select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } |
+| clear | dispatched | null |
+| blur | dispatched | FocusEvent | CustomEvent |
+| keydown | forwarded | -- |
+| input | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| paste | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## NotificationActionButton
-
-### Import path
-
-```js
-import { NotificationActionButton } from "carbon-components-svelte";
-```
+## `NotificationActionButton`
### Props
-No exported props.
+None.
### Slots
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## NotificationButton
-
-### Import path
-
-```js
-import { NotificationButton } from "carbon-components-svelte";
-```
+## `NotificationButton`
### Props
-| Prop name | Type | Default value | Description |
-| :--------------- | :------------------------------------------------------------------ | :------------- | :----------------------------------------------------- |
-| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. |
-| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. |
-| title | string | -- | Specify the title of the icon. |
-| iconDescription | 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
-No slots.
+None.
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## NotificationIcon
-
-### Import path
-
-```js
-import { NotificationIcon } from "carbon-components-svelte";
-```
+## `NotificationIcon`
### Props
-| Prop name | Type | Default value | Description |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :------------------------------------- |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification icon. |
-| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. |
-| iconDescription | 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
-No slots.
+None.
-### Forwarded events
+### Events
-No forwarded events.
+None.
-### Dispatched events
+## `NumberInput`
-No dispatched events.
-
----
-
-## NotificationTextDetails
-
-### Import path
-
-```js
-import { NotificationTextDetails } from "carbon-components-svelte";
-```
-
-### Props
-
-| Prop name | Type | Default value | Description |
-| :--------------- | :----------------------------------- | :------------ | :---------------------------- |
-| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. |
-| title | string | `"Title"` | Specify the title text. |
-| subtitle | string | `""` | Specify the subtitle text. |
-| caption | string | `"Caption"` | Specify the caption text. |
-
-### Slots
-
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
-
-## NumberInput
-
-### Import path
-
-```js
-import { NumberInput } from "carbon-components-svelte";
-```
-
-### Props
+### Types
```ts
-// `NumberInput` type definitions
-
-type NumberInputTranslationId = "increment" | "decrement";
+export type NumberInputTranslationId = "increment" | "decrement";
```
-| Prop name | Type | Default value | Description |
-| :-------------------------- | :-------------------------------------------------------------- | :---------------------------------------------------- | :---------------------------------------------- |
-| size | "sm" | "xl" | -- | Set the size of the input. |
-| value | string | `""` | Specify the input value. |
-| step | number | `1` | Specify the step increment. |
-| max | number | -- | Specify the maximum value. |
-| min | number | -- | Specify the minimum value. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| readonly | boolean | `false` | Set to `true` for the input to be read-only. |
-| mobile | boolean | `false` | Set to `true` to enable the mobile variant. |
-| allowEmpty | boolean | `false` | Set to `true` to allow for an empty value. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| iconDescription | string | `""` | Specify the ARIA label for the increment icons. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| helperText | string | `""` | Specify the helper text. |
-| label | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| translateWithId | (id: NumberInputTranslationId) => string | -- | Override the default translation ids. |
-| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | `{ increment: "increment", decrement: "decrement", }` | Default translation ids. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
-
-### Slots
-
-- **"label"**: `...
`
-
-### Forwarded events
+### Props
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on: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 |
-### Dispatched events
+### Slots
-- `on:change`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------- |
+| label | No | -- | {label} |
----
+### Events
-## NumberInputSkeleton
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------ |
+| change | dispatched | null | number |
+| input | dispatched | null | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
-### Import path
-
-```js
-import { NumberInputSkeleton } from "carbon-components-svelte";
-```
+## `NumberInputSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------ |
-| hideLabel | 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## OrderedList
-
-### Import path
-
-```js
-import { OrderedList } from "carbon-components-svelte";
-```
+## `OrderedList`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------------- |
-| nested | boolean | `false` | Set to `true` to use the nested variant. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## OverflowMenu
-
-### Import path
-
-```js
-import { OverflowMenu } from "carbon-components-svelte";
-```
+## `OutboundLink`
### Props
-| Prop name | Type | Default value | Description |
-| :--------------- | :------------------------------------------------------------------ | :--------------------------------- | :----------------------------------------------------------------- |
-| direction | "top" | "bottom" | `"bottom"` | Specify the direction of the overflow menu relative to the button. |
-| open | boolean | `false` | Set to `true` to open the menu. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| flipped | boolean | `false` | Set to `true` to flip the menu relative to the button. |
-| menuOptionsClass | string | -- | Specify the menu options class. |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. |
-| iconClass | string | -- | Specify the icon class. |
-| iconDescription | string | `"Open and close list of options"` | Specify the ARIA label for the icon. |
-| id | string | -- | Set an id for the button element. |
-| buttonRef | null | HTMLButtonElement | `null` | Obtain a reference to the trigger button element. |
-| menuRef | null | HTMLUListElement | `null` | Obtain a reference to the overflow menu element. |
+None.
### Slots
-- **default**: `...
`
-- **"menu"**: `...
`
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-- `on:close`
-
----
-
-## OverflowMenuItem
-
-### Import path
-
-```js
-import { OverflowMenuItem } from "carbon-components-svelte";
-```
+## `OverflowMenu`
### Props
-| Prop name | Type | Default value | Description |
-| :----------- | :------------------------------------------------------------------ | :--------------- | :------------------------------------------------------------------------------- |
-| text | string | `"Provide text"` | Specify the item text. Alternatively, use the default slot for a custom element. |
-| href | string | `""` | Specify the `href` attribute if the item is a link. |
-| primaryFocus | boolean | `false` | Set to `true` if the item should be focused when opening the menu. |
-| disabled | boolean | `false` | Set to `true` to disable the item. |
-| hasDivider | boolean | `false` | Set to `true` to include a divider. |
-| danger | boolean | `false` | Set to `true` to use the danger variant. |
-| requireTitle | boolean | `true` | Set to `false` to omit the button `title` attribute. |
-| id | string | -- | Set an id for the top-level element. |
-| ref | null | HTMLAnchorElement | HTMLButtonElement | `null` | Obtain a reference to the HTML 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:keydown`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component
this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------------------- |
+| close | dispatched | null | { index: number; text: string; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
----
-
-## Pagination
-
-### Import path
-
-```js
-import { Pagination } from "carbon-components-svelte";
-```
+## `OverflowMenuItem`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------------- | :--------------------------------------------------------------- | :------------------ | :------------------------------------------------ |
-| page | number | `1` | Specify the current page index. |
-| totalItems | number | `0` | Specify the total number of items. |
-| disabled | boolean | `false` | Set to `true` to disable the pagination. |
-| forwardText | string | `"Next page"` | Specify the forward button text. |
-| backwardText | string | `"Previous page"` | Specify the backward button text. |
-| itemsPerPageText | string | `"Items per page:"` | Specify the items per page text. |
-| itemText | (min: number, max: number) => string | -- | Override the item text. |
-| itemRangeText | (min: number, max: number, total: number) => string | -- | Override the item range text. |
-| pageInputDisabled | boolean | `false` | Set to `true` to disable the page input. |
-| pageSizeInputDisabled | boolean | `false` | Set to `true` to disable the page size input. |
-| pageSize | number | `10` | Specify the number of items to display in a page. |
-| pageSizes | number[] | `[10]` | Specify the available page sizes. |
-| pagesUnknown | boolean | `false` | Set to `true` if the number of pages is unknown. |
-| pageText | (page: number) => string | -- | Override the page text. |
-| pageRangeText | (current: number, total: number) => string | -- | Override the page range text. |
-| id | string | -- | 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
-No slots.
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- |
+| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content={true}>
{text}
</div> |
-- `on:update`
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
-## PaginationNav
-
-### Import path
-
-```js
-import { PaginationNav } from "carbon-components-svelte";
-```
+## `Pagination`
### Props
-| Prop name | Type | Default value | Description |
-| :----------- | :------------------- | :---------------- | :----------------------------------------- |
-| page | number | `0` | Specify the current page index. |
-| total | number | `10` | Specify the total number of pages. |
-| shown | number | `10` | Specify the total number of pages to show. |
-| loop | boolean | `false` | Set to `true` to loop the navigation. |
-| forwardText | string | `"Next page"` | Specify the forward button text. |
-| backwardText | string | `"Previous page"` | Specify the backward button text. |
+| 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
-No slots.
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-- `on:click:button--previous`
-- `on:click:button--next`
-- `on:change`
+None.
----
+### Events
-## PaginationSkeleton
+| 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; } |
-### Import path
-
-```js
-import { PaginationSkeleton } from "carbon-components-svelte";
-```
+## `PaginationNav`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| total | No | let | No | number | 10 | Specify the total number of pages |
+| shown | No | let | No | number | 10 | Specify the total number of pages to show |
+| loop | No | let | No | boolean | false | Set to `true` to loop the navigation |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "outside" | "inside" | "bottom" | Set the position of the tooltip relative to the pagination buttons. |
### Slots
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
+None.
-## PasswordInput
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------------------- | :--------- | :----------------------------- |
+| change | dispatched | { page: number; } |
+| click:button--previous | dispatched | { page: number; } |
+| click:button--next | dispatched | { page: number; } |
-```js
-import { PasswordInput } from "carbon-components-svelte";
-```
+## `PaginationSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :---------------- | :-------------------------------------------------------------- | :---------------- | :----------------------------------------------------- |
-| size | "sm" | "xl" | -- | Set the size of the input. |
-| value | string | `""` | Specify the input value. |
-| type | string | `"password"` | Specify the input type. |
-| placeholder | string | `""` | Specify the placeholder text. |
-| hidePasswordLabel | string | `"Hide password"` | Specify the hide password label text. |
-| showPasswordLabel | string | `"Show password"` | Specify the show password label text. |
-| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. |
-| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| helperText | string | `""` | Specify the helper text. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the text for the invalid state. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
+None.
### Slots
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:input`
-- `on:keydown`
-- `on:focus`
-- `on:blur`
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## ProgressIndicator
-
-### Import path
-
-```js
-import { ProgressIndicator } from "carbon-components-svelte";
-```
+## `PasswordInput`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------- | :------------------- | :------------ | :---------------------------------------------------------------------------------------------- |
-| currentIndex | number | `0` | Specify the current step index. |
-| vertical | boolean | `false` | Set to `true` to use the vertical variant. |
-| spaceEqually | boolean | `false` | Set to `true` to specify whether the progress steps should be split equally in size in the div. |
-| preventChangeOnClick | boolean | `false` | Set to `true` to prevent updating `currentIndex`. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
-### Dispatched events
-
-- `on:change`
-
----
-
-## ProgressIndicatorSkeleton
-
-### Import path
-
-```js
-import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
-```
+## `Popover`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------- |
-| vertical | boolean | `false` | Set to `true` to use the vertical variant. |
-| count | number | `4` | Specify the number of steps to render. |
+| 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
-No slots.
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :------------ | :--------- | :------------------------------------ |
+| click:outside | dispatched | { target: HTMLElement; } |
-No dispatched events.
-
----
-
-## ProgressStep
-
-### Import path
-
-```js
-import { ProgressStep } from "carbon-components-svelte";
-```
+## `ProgressBar`
### Props
-| Prop name | Type | Default value | Description |
-| :------------- | :------------------- | :------------ | :------------------------------------------ |
-| complete | boolean | `false` | Set to `true` for the complete variant. |
-| current | boolean | `false` | Set to `true` to use the current variant. |
-| disabled | boolean | `false` | Set to `true` to disable the progress step. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| description | string | `""` | Specify the step description. |
-| label | string | `""` | Specify the step label. |
-| secondaryLabel | string | `""` | Specify the step secondary label. |
-| id | string | -- | Set an id for the top-level 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Dispatched events
+### Events
-No dispatched events.
+None.
----
-
-## RadioButton
-
-### Import path
-
-```js
-import { RadioButton } from "carbon-components-svelte";
-```
+## `ProgressIndicator`
### Props
-| Prop name | Type | Default value | Description |
-| :------------ | :---------------------------------------- | :------------ | :----------------------------------------------- |
-| value | string | `""` | Specify the value of the radio button. |
-| checked | boolean | `false` | Set to `true` to check the radio button. |
-| disabled | boolean | `false` | Set to `true` to disable the radio button. |
-| labelPosition | "right" | "left" | `"right"` | Specify the label position. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| id | string | -- | Set an id for the input element. |
-| name | string | `""` | Specify a name attribute for the checkbox input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:change`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## RadioButtonGroup
-
-### Import path
-
-```js
-import { RadioButtonGroup } from "carbon-components-svelte";
-```
+## `ProgressIndicatorSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :------------ | :------------------------------------------ | :------------- | :-------------------------------------------- |
-| selected | string | -- | Set the selected radio button value. |
-| disabled | boolean | `false` | Set to `true` to disable the radio buttons. |
-| labelPosition | "right" | "left" | `"right"` | Specify the label position. |
-| orientation | "horizontal" | "vertical" | `"horizontal"` | Specify the orientation of the radio buttons. |
-| id | string | -- | Set an id for the container div element. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-- `on:change`
+None.
----
+### Events
-## RadioButtonSkeleton
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Import path
-
-```js
-import { RadioButtonSkeleton } from "carbon-components-svelte";
-```
+## `ProgressStep`
### Props
-No exported props.
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> |
-## RadioTile
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
-```js
-import { RadioTile } from "carbon-components-svelte";
-```
+## `RadioButton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------- | :----------------- | :-------------------------------------------------------- |
-| checked | boolean | `false` | Set to `true` to check the tile. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| value | string | `""` | Specify the value of the radio input. |
-| tabindex | string | `"0"` | Specify the tabindex. |
-| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the radio tile checkmark icon. |
-| id | string | -- | Set an id for the input element. |
-| name | 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 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:change`
-- `on:keydown`
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| change | forwarded | -- |
-## Row
-
-### Import path
-
-```js
-import { Row } from "carbon-components-svelte";
-```
+## `RadioButtonGroup`
### Props
-| Prop name | Type | Default value | Description |
-| :------------ | :------------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| as | boolean | `false` | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>). |
-| condensed | boolean | `false` | Set to `true` to use the condensed variant. |
-| narrow | boolean | `false` | Set to `true` to use the narrow variant. |
-| noGutter | boolean | `false` | Set to `true` to remove the gutter. |
-| noGutterLeft | boolean | `false` | Set to `true` to remove the left gutter. |
-| noGutterRight | boolean | `false` | Set to `true` to remove the right gutter. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :--------- | :------ | :---- | :------------------------ |
+| -- | Yes | -- | -- |
+| legendText | No | -- | {legendText} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| change | dispatched | string | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## Search
-
-### Import path
-
-```js
-import { Search } from "carbon-components-svelte";
-```
+## `RadioButtonSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------- | :---------------------------------------- | :--------------------- | :------------------------------------------------------- |
-| small | boolean | `false` | . |
-| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search input. |
-| skeleton | boolean | `false` | Set to `true` to display the skeleton state. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the search input. |
-| value | string | `""` | Specify the value of the search input. |
-| type | string | `"text"` | Specify the `type` attribute of the search input. |
-| placeholder | string | `"Search..."` | Specify the `placeholder` attribute of the search input. |
-| autocomplete | "on" | "off" | `"off"` | Specify the `autocomplete` attribute. |
-| autofocus | boolean | `false` | Set to `true` to auto focus the search element. |
-| closeButtonLabelText | string | `"Clear search input"` | Specify the close button label text. |
-| labelText | string | `""` | Specify the label text. |
-| id | string | -- | Set an id for the input element. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
+None.
### Slots
-No slots.
-
-### Forwarded events
+None.
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:input`
-- `on:focus`
-- `on:blur`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-- `on:clear`
-
----
-
-## SearchSkeleton
-
-### Import path
-
-```js
-import { SearchSkeleton } from "carbon-components-svelte";
-```
+## `RadioTile`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :---------------------------------------- | :------------ | :------------------------------------ |
-| small | boolean | `false` | . |
-| size | "sm" | "lg" | "xl" | `"xl"` | Specify the size of the search 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| change | forwarded | -- |
+| keydown | forwarded | -- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
----
+## `RecursiveList`
-## Select
+### Types
-### Import path
-
-```js
-import { Select } from "carbon-components-svelte";
+```ts
+export interface RecursiveListNode {
+ text?: string;
+ href?: string;
+ html?: string;
+}
```
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :----------------------------------------- | :------------ | :----------------------------------------------- |
-| selected | string | -- | Specify the selected item value. |
-| size | "sm" | "xl" | -- | Set the size of the select input. |
-| inline | boolean | `false` | Set to `true` to use the inline variant. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the select element. |
-| id | string | -- | Set an id for the select element. |
-| name | string | -- | Specify a name attribute for the select element. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| helperText | string | `""` | Specify the helper text. |
-| noLabel | boolean | `false` | Set to `true` to not render a label. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:blur`
-
-### Dispatched events
+None.
-- `on:change`
+### Events
----
+None.
-## SelectItem
-
-### Import path
-
-```js
-import { SelectItem } from "carbon-components-svelte";
-```
+## `Row`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------- |
-| value | string | `""` | Specify the option value. |
-| text | string | `""` | Specify the option text. |
-| hidden | boolean | `false` | Set to `true` to hide the option. |
-| disabled | boolean | `false` | Set to `true` to disable the option. |
+| 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
-No slots.
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------- | :------- |
+| -- | Yes | { props: { class: string; [key: string]: any; } } | -- |
-No forwarded events.
+### Events
-### Dispatched events
+None.
-No dispatched events.
-
----
-
-## SelectItemGroup
-
-### Import path
-
-```js
-import { SelectItemGroup } from "carbon-components-svelte";
-```
+## `Search`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :---------------- | :--------------------------------------------------- |
-| disabled | boolean | `false` | Set to `true` to disable the optgroup element. |
-| label | string | `"Provide label"` | Specify the label attribute of the optgroup 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| expand | dispatched | null |
+| collapse | dispatched | null |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| paste | forwarded | -- |
+| clear | dispatched | null |
----
-
-## SelectSkeleton
-
-### Import path
-
-```js
-import { SelectSkeleton } from "carbon-components-svelte";
-```
+## `SearchSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------ |
-| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## SelectableTile
-
-### Import path
-
-```js
-import { SelectableTile } from "carbon-components-svelte";
-```
+## `Select`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :---------------------------------------- | :----------------- | :------------------------------------------------------------- |
-| selected | boolean | `false` | Set to `true` to select the tile. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| title | string | `"title"` | Specify the title of the selectable tile. |
-| value | string | `"value"` | Specify the value of the selectable tile. |
-| tabindex | string | `"0"` | Specify the tabindex. |
-| iconDescription | string | `"Tile checkmark"` | Specify the ARIA label for the selectable tile checkmark icon. |
-| id | string | -- | Set an id for the input element. |
-| name | string | `""` | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML 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 |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
-
-### Dispatched events
-
-No dispatched events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| -- | Yes | -- | -- |
+| labelText | No | -- | {labelText} |
----
+### Events
-## SideNav
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| update | dispatched | string | number |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
-### Import path
-
-```js
-import { SideNav } from "carbon-components-svelte";
-```
+## `SelectItem`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------------ |
-| fixed | boolean | `false` | Set to `true` to use the fixed variant. |
-| ariaLabel | string | -- | Specify the ARIA label for the nav. |
-| isOpen | boolean | `false` | Set to `true` to toggle the expanded state. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
+None.
-## SideNavItems
+### Events
-### Import path
+None.
-```js
-import { SideNavItems } from "carbon-components-svelte";
-```
+## `SelectItemGroup`
### Props
-No exported props.
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+None.
-## SideNavLink
-
-### Import path
-
-```js
-import { SideNavLink } from "carbon-components-svelte";
-```
+## `SelectSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
-| isSelected | boolean | `false` | Set to `true` to select the current link. |
-| href | string | -- | Specify the `href` attribute. |
-| text | string | -- | Specify the text. |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
-No slots.
+None.
-### Forwarded events
+### Events
-- `on:click`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## SideNavMenu
-
-### Import path
-
-```js
-import { SideNavMenu } from "carbon-components-svelte";
-```
+## `SelectableTile`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------- |
-| expanded | boolean | `false` | Set to `true` to toggle the expanded state. |
-| text | string | -- | Specify the text. |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the HTML button 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 |
+| 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
-- **default**: `...
`
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
+| deselect | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
-No dispatched events.
-
----
-
-## SideNavMenuItem
-
-### Import path
-
-```js
-import { SideNavMenuItem } from "carbon-components-svelte";
-```
+## `SideNav`
### Props
-| Prop name | Type | Default value | Description |
-| :--------- | :----------------------------------------- | :------------ | :--------------------------------------------- |
-| isSelected | boolean | -- | Set to `true` to select the item. |
-| href | string | -- | Specify the `href` attribute. |
-| text | string | -- | Specify the item text. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
+| 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 -No slots. - -### Forwarded events - -- `on:click` +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------- | +| -- | Yes | -- | -- | -### Dispatched events +### Events -No dispatched events. +| Event name | Type | Detail | +| :------------ | :--------- | :---------------- | +| open | dispatched |
null |
+| close | dispatched | null |
+| click:overlay | dispatched | null |
----
-
-## SkeletonPlaceholder
-
-### Import path
-
-```js
-import { SkeletonPlaceholder } from "carbon-components-svelte";
-```
+## `SideNavDivider`
### Props
-No exported props.
+None.
### Slots
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+None.
-## SkeletonText
-
-### Import path
-
-```js
-import { SkeletonText } from "carbon-components-svelte";
-```
+## `SideNavItems`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------------- |
-| lines | number | `3` | Specify the number of lines to render. |
-| heading | boolean | `false` | Set to `true` to use the heading size variant. |
-| paragraph | boolean | `false` | Set to `true` to use the paragraph size variant. |
-| width | string | `"100%"` | Specify the width of the text (% or px). |
+None.
### Slots
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
----
+### Events
-## SkipToContent
+None.
-### Import path
-
-```js
-import { SkipToContent } from "carbon-components-svelte";
-```
+## `SideNavLink`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :---------------- | :---------------------------- |
-| href | string | `"#main-content"` | Specify the `href` attribute. |
-| tabindex | string | `"0"` | Specify the tabindex. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-
-### Dispatched events
-
-No dispatched events.
-
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | {text} |
+| icon | No | -- | <svelte:component this={icon} /> |
-## Slider
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
-```js
-import { Slider } from "carbon-components-svelte";
-```
+## `SideNavMenu`
### Props
-| Prop name | Type | Default value | Description |
-| :------------- | :----------------------------------- | :------------ | :------------------------------------------ |
-| value | number | `0` | Specify the value of the slider. |
-| max | number | `100` | Set the maximum slider value. |
-| maxLabel | string | `""` | Specify the label for the max value. |
-| min | number | `0` | Set the minimum slider value. |
-| minLabel | string | `""` | Specify the label for the min value. |
-| step | number | `1` | Set the step value. |
-| stepMultiplier | number | `4` | Set the step multiplier value. |
-| required | boolean | `false` | Set to `true` to require a value. |
-| inputType | string | `"number"` | Specify the input type. |
-| disabled | boolean | `false` | Set to `true` to disable the slider. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| hideTextInput | boolean | `false` | Set to `true` to hide the text input. |
-| id | string | -- | Set an id for the slider div element. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| labelText | string | `""` | Specify the label text. |
-| name | string | `""` | Set a name for the slider element. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the HTML element. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
-- `on:change`
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
-## SliderSkeleton
-
-### Import path
-
-```js
-import { SliderSkeleton } from "carbon-components-svelte";
-```
+## `SideNavMenuItem`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------ |
-| hideLabel | boolean | `false` | Set to `true` to hide the label 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | {text} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## StructuredList
-
-### Import path
-
-```js
-import { StructuredList } from "carbon-components-svelte";
-```
+## `SkeletonPlaceholder`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :---------------------------------------------- |
-| selected | string | -- | Specify the selected structured list row value. |
-| border | boolean | `false` | Set to `true` to use the bordered variant. |
-| selection | boolean | `false` | Set to `true` to use the selection variant. |
+None.
### Slots
-- **default**: `...
`
-
-### Forwarded events
+None.
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-- `on:change`
-
----
-
-## StructuredListBody
-
-### Import path
-
-```js
-import { StructuredListBody } from "carbon-components-svelte";
-```
+## `SkeletonText`
### Props
-No exported props.
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+None.
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
----
-
-## StructuredListCell
-
-### Import path
-
-```js
-import { StructuredListCell } from "carbon-components-svelte";
-```
+## `SkipToContent`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------- |
-| head | boolean | `false` | Set to `true` to use as a header. |
-| noWrap | boolean | `false` | Set to `true` to prevent wrapping. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :-------------------------------- |
+| -- | Yes | -- | Skip to main content |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
-## StructuredListHead
-
-### Import path
-
-```js
-import { StructuredListHead } from "carbon-components-svelte";
-```
+## `Slider`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element |
+| value | No | let | Yes | number | 0 | Specify the value of the slider |
+| max | No | let | No | number | 100 | Set the maximum slider value |
+| maxLabel | No | let | No | string | "" | Specify the label for the max value |
+| min | No | let | No | number | 0 | Set the minimum slider value |
+| minLabel | No | let | No | string | "" | Specify the label for the min value |
+| step | No | let | No | number | 1 | Set the step value |
+| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value |
+| required | No | let | No | boolean | false | Set to `true` to require a value |
+| inputType | No | let | No | string | "number" | Specify the input type |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the slider |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input |
+| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to spanthe full width of its containing element. | +| id | No |
let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| labelText | No | let | No | string | "" | Specify the label text.Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | +| hideLabel | No |
let | No | boolean | false | Set to `true` to visually hide the label text |
+| name | No | let | No | string | "" | Set a name for the slider element |
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
----
+### Events
-## StructuredListInput
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| input | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Import path
-
-```js
-import { StructuredListInput } from "carbon-components-svelte";
-```
+## `SliderSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :---------------------------------------- | :------------ | :-------------------------------------------- |
-| checked | boolean | `false` | Set to `true` to check the input. |
-| title | string | `"title"` | Specify the title of the input. |
-| value | string | `"value"` | Specify the value of the input. |
-| id | string | -- | Set an id for the input element. |
-| name | string | `""` | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
-No slots.
-
-### Forwarded events
-
-No forwarded events.
+None.
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
----
-
-## StructuredListRow
-
-### Import path
-
-```js
-import { StructuredListRow } from "carbon-components-svelte";
-```
+## `StructuredList`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------ |
-| head | boolean | `false` | Set to `true` to use as a header. |
-| label | boolean | `false` | Set to `true` to render a label slot. |
-| tabindex | string | `"0"` | Specify the tabindex. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## StructuredListSkeleton
-
-### Import path
-
-```js
-import { StructuredListSkeleton } from "carbon-components-svelte";
-```
+## `StructuredListBody`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------- |
-| rows | number | `5` | Specify the number of rows. |
-| border | boolean | `false` | Set to `true` to use the bordered variant. |
+None.
### Slots
-No slots.
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-No dispatched events.
-
----
-
-## Switch
-
-### Import path
-
-```js
-import { Switch } from "carbon-components-svelte";
-```
+## `StructuredListCell`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- |
-| text | string | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). |
-| selected | boolean | `false` | Set to `true` for the switch to be selected. |
-| disabled | boolean | `false` | Set to `true` to disable the switch. |
-| id | string | -- | Set an id for the button element. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:keydown`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
----
-
-## Tab
-
-### Import path
-
-```js
-import { Tab } from "carbon-components-svelte";
-```
+## `StructuredListHead`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- |
-| label | string | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). |
-| href | string | `"#"` | Specify the href attribute. |
-| disabled | boolean | `false` | Set to `true` to disable the tab. |
-| tabindex | string | `"0"` | Specify the tabindex. |
-| id | string | -- | Set an id for the top-level element. |
-| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the anchor HTML element. |
+None.
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## TabContent
-
-### Import path
-
-```js
-import { TabContent } from "carbon-components-svelte";
-```
+## `StructuredListInput`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :----------------------------------- |
-| id | string | -- | Set an id for the top-level 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 |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
+None.
----
+### Events
-## Table
+None.
-### Import path
-
-```js
-import { Table } from "carbon-components-svelte";
-```
+## `StructuredListRow`
### Props
-| Prop name | Type | Default value | Description |
-| :--------------- | :-------------------------------------------------- | :------------ | :--------------------------------------- |
-| size | "compact" | "short" | "tall" | -- | Set the size of the table. |
-| zebra | boolean | `false` | Set to `true` to use zebra styles. |
-| useStaticWidth | boolean | `false` | Set to `true` to use static width. |
-| shouldShowBorder | boolean | `false` | Set to `true` for the bordered variant. |
-| sortable | boolean | `false` | Set to `true` for the sortable variant. |
-| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
-
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-## TableBody
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
-```js
-import { TableBody } from "carbon-components-svelte";
-```
+## `StructuredListSkeleton`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
+| rows | No | let | No | number | 5 | Specify the number of rows |
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## TableCell
-
-### Import path
-
-```js
-import { TableCell } from "carbon-components-svelte";
-```
+## `Switch`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
+| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
+| text | No | let | No | string | "Provide text" | Specify the switch text.Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | +| disabled | No |
let | No | boolean | false | Set to `true` to disable the switch |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
### Slots
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | {text} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## TableContainer
-
-### Import path
-
-```js
-import { TableContainer } from "carbon-components-svelte";
-```
+## `Tab`
### Props
-| Prop name | Type | Default value | Description |
-| :----------- | :------------------- | :------------ | :----------------------------------------- |
-| title | string | `""` | Specify the title of the data table. |
-| description | string | `""` | Specify the description of the data table. |
-| stickyHeader | boolean | `false` | Set to `true` to enable a sticky header. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------- |
+| -- | Yes | -- | {label} |
-No forwarded events.
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-No dispatched events.
-
----
-
-## TableHead
-
-### Import path
-
-```js
-import { TableHead } from "carbon-components-svelte";
-```
+## `TabContent`
### Props
-No exported props.
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Dispatched events
+### Events
-No dispatched events.
+None.
----
-
-## TableHeader
-
-### Import path
-
-```js
-import { TableHeader } from "carbon-components-svelte";
-```
+## `Table`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------------ | :------------ | :------------------------------------ |
-| scope | string | `"col"` | Specify the `scope` attribute. |
-| translateWithId | () => string | -- | Override the default id translations. |
-| id | string | -- | Set an id for the top-level element. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:click`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+None.
-## TableRow
-
-### Import path
-
-```js
-import { TableRow } from "carbon-components-svelte";
-```
+## `TableBody`
### Props
-No exported props.
+None.
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
----
+### Events
-## Tabs
+None.
-### Import path
-
-```js
-import { Tabs } from "carbon-components-svelte";
-```
+## `TableCell`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :---------------------------------------- | :-------------------- | :------------------------------------------- |
-| selected | number | `0` | Specify the selected tab index. |
-| type | "default" | "container" | `"default"` | Specify the type of tabs. |
-| iconDescription | string | `"Show menu options"` | Specify the ARIA label for the chevron icon. |
-| triggerHref | string | `"#"` | Specify the tab trigger href attribute. |
+None.
### Slots
-- **default**: `...
`
-- **"content"**: `...
`
-
-### Forwarded events
-
-- `on:keypress`
-- `on:click`
-
-### Dispatched events
-
-- `on:change`
-
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-## TabsSkeleton
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-```js
-import { TabsSkeleton } from "carbon-components-svelte";
-```
+## `TableContainer`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------------------ |
-| count | number | `4` | Specify the number of tabs to render. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+None.
-## Tag
-
-### Import path
-
-```js
-import { Tag } from "carbon-components-svelte";
-```
+## `TableHead`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------- | :------------------------------------------------------ |
-| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag. |
-| filter | boolean | `false` | Set to `true` to use filterable variant. |
-| disabled | boolean | `false` | Set to `true` to disable a filterable tag. |
-| skeleton | boolean | `false` | Set to `true` to display the skeleton state. |
-| title | string | `"Clear filter"` | Set the title for the close button in a filterable tag. |
-| id | string | -- | Set an id for the filterable tag. |
+None.
### Slots
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## TagSkeleton
-
-### Import path
-
-```js
-import { TagSkeleton } from "carbon-components-svelte";
-```
+## `TableHeader`
### Props
-No exported props.
+| 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
-No slots.
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| click | forwarded | -- |
-No dispatched events.
-
----
-
-## TextArea
-
-### Import path
-
-```js
-import { TextArea } from "carbon-components-svelte";
-```
+## `TableRow`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------------------------------- | :------------ | :----------------------------------------------- |
-| value | string | `""` | Specify the textarea value. |
-| placeholder | string | `""` | Specify the placeholder text. |
-| cols | number | `50` | Specify the number of cols. |
-| rows | number | `4` | Specify the number of rows. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| helperText | string | `""` | Specify the helper text. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the text for the invalid state. |
-| id | string | -- | Set an id for the textarea element. |
-| name | string | -- | Specify a name attribute for the input. |
-| ref | null | HTMLTextAreaElement | `null` | Obtain a reference to the textarea HTML element. |
+None.
### Slots
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:input`
-- `on:focus`
-- `on:blur`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
----
-
-## TextAreaSkeleton
-
-### Import path
-
-```js
-import { TextAreaSkeleton } from "carbon-components-svelte";
-```
+## `Tabs`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------------------- |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+| content | No | -- | -- |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| keypress | forwarded | -- |
+| click | forwarded | -- |
-## TextInput
-
-### Import path
-
-```js
-import { TextInput } from "carbon-components-svelte";
-```
+## `TabsSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
-| size | "sm" | "xl" | -- | Set the size of the input. |
-| value | string | `""` | Specify the input value. |
-| type | string | `""` | Specify the input type. |
-| placeholder | string | `""` | Specify the placeholder text. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| helperText | string | `""` | Specify the helper text. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the input. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| warn | boolean | `false` | Set to `true` to indicate an warning state. |
-| warnText | string | `""` | Specify the warning state text. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
-| required | boolean | `false` | Set to `true` to mark the field as required. |
-| inline | boolean | `false` | Set to `true` to use inline version. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:input`
-- `on:keydown`
-- `on:focus`
-- `on:blur`
-
-### Dispatched events
-
-No dispatched events.
+None.
----
+### Events
-## TextInputSkeleton
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Import path
-
-```js
-import { TextInputSkeleton } from "carbon-components-svelte";
-```
+## `Tag`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------ |
-| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
-
-No dispatched events.
-
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- |
+| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- |
+| icon | No | -- | <svelte:component this={icon} /> |
-## Tile
+### Events
-### Import path
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| close | dispatched | null |
-```js
-import { Tile } from "carbon-components-svelte";
-```
+## `TagSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------- |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ----------- |
+| size | No | let | No | "sm" | "default" | "default" | -- |
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+None.
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## TileGroup
-
-### Import path
-
-```js
-import { TileGroup } from "carbon-components-svelte";
-```
+## `TextArea`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------------- |
-| selected | string | -- | Specify the selected tile value. |
-| disabled | boolean | `false` | Set to `true` to disable the tile group. |
-| legend | string | `""` | Specify the legend text. |
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
-### Dispatched events
-
-- `on:select`
-
----
-
-## TimePicker
-
-### Import path
-
-```js
-import { TimePicker } from "carbon-components-svelte";
-```
+## `TextAreaSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
-| value | string | `""` | Specify the input value. |
-| type | string | `"text"` | Specify the input type. |
-| placeholder | string | `"hh=mm"` | Specify the input placeholder text. |
-| pattern | string | `"(1[012] | [1-9]):[0-5][0-9](\\s)?"` | Specify the `pattern` attribute for the input element. |
-| maxlength | number | `5` | Specify the `maxlength` input attribute. |
-| light | boolean | `false` | Set to `true` to enable the light variant. |
-| disabled | boolean | `false` | Set to `true` to disable the input. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
-| invalid | boolean | `false` | Set to `true` to indicate an invalid state. |
-| invalidText | string | `""` | Specify the invalid state text. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the input. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML element. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
+None.
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:input`
-- `on:focus`
-- `on:blur`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-No dispatched events.
-
----
-
-## TimePickerSelect
-
-### Import path
-
-```js
-import { TimePickerSelect } from "carbon-components-svelte";
-```
+## `TextInput`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :----------------------------------------- | :----------------------- | :----------------------------------------------- |
-| value | string | `""` | Specify the select value. |
-| disabled | boolean | `false` | Set to `true` to disable the select. |
-| iconDescription | string | `"Open list of options"` | Specify the ARIA label for the chevron icon. |
-| labelText | string | `""` | Specify the label text. |
-| hideLabel | boolean | `true` | . |
-| id | string | -- | Set an id for the select element. |
-| name | string | -- | Specify a name attribute for the select element. |
-| ref | null | HTMLSelectElement | `null` | Obtain a reference to the select HTML element. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | No | let | Yes | null | number | string | "" | Specify the input value.`value` will be set to `null` if type="number"
and the value is empty. | +| size | No |
let | No | "sm" | "xl" | undefined | Set the size of the input |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| required | No | let | No | boolean | false | Set to `true` to mark the field as required |
+| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant |
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------- |
+| change | dispatched | null | number | string |
+| input | dispatched | null | number | string |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
----
-
-## ToastNotification
-
-### Import path
-
-```js
-import { ToastNotification } from "carbon-components-svelte";
-```
+## `TextInputSkeleton`
### Props
-| Prop name | Type | Default value | Description |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :---------------------- | :----------------------------------------------------------------------- |
-| notificationType | "toast" | "inline" | `"toast"` | Set the type of notification. |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | `"error"` | Specify the kind of notification. |
-| lowContrast | boolean | `false` | Set to `true` to use the low contrast variant. |
-| timeout | number | `0` | Set the timeout duration (ms) to hide the notification after opening it. |
-| role | string | `"alert"` | Set the `role` attribute. |
-| title | string | `"Title"` | Specify the title text. |
-| subtitle | string | `""` | Specify the subtitle text. |
-| caption | string | `"Caption"` | Specify the caption text. |
-| iconDescription | string | `"Closes notification"` | Specify the ARIA label for the icon. |
-| hideCloseButton | boolean | `false` | Set to `true` to hide the close button. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
+| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
-- **default**: `...
`
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+None.
-- `on:close`
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-## Toggle
+## `Theme`
-### Import path
+### Types
-```js
-import { Toggle } from "carbon-components-svelte";
+```ts
+export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
```
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------------- |
-| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. |
-| disabled | boolean | `false` | Set to `true` to disable checkbox input. |
-| labelA | string | `"Off"` | Specify the label for the untoggled state. |
-| labelB | string | `"On"` | Specify the label for the toggled state. |
-| labelText | string | `""` | Specify the label text. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the checkbox input. |
+| 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
-No slots.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :------------------------------------ | :------- |
+| -- | Yes | { theme: CarbonTheme; } | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:keyup`
-- `on:focus`
-- `on:blur`
+| Event name | Type | Detail |
+| :--------- | :--------- | :----------------------------------- |
+| update | dispatched | { theme: CarbonTheme; } |
-### Dispatched events
-
-No dispatched events.
-
----
-
-## ToggleSkeleton
-
-### Import path
-
-```js
-import { ToggleSkeleton } from "carbon-components-svelte";
-```
+## `Tile`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------------- |
-| labelText | string | `""` | Specify the label text. |
-| id | string | -- | Set an id for the input element. |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
### Slots
-No slots.
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-No dispatched events.
-
----
-
-## ToggleSmall
-
-### Import path
-
-```js
-import { ToggleSmall } from "carbon-components-svelte";
-```
+## `TileGroup`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------------------- |
-| toggled | boolean | `false` | Set to `true` to toggle the checkbox input. |
-| disabled | boolean | `false` | Set to `true` to disable checkbox input. |
-| labelA | string | `"Off"` | Specify the label for the untoggled state. |
-| labelB | string | `"On"` | Specify the label for the toggled state. |
-| labelText | string | `""` | Specify the label text. |
-| id | string | -- | Set an id for the input element. |
-| name | string | -- | Specify a name attribute for the checkbox input. |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:change`
-- `on:keyup`
-- `on:focus`
-- `on:blur`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Dispatched events
+### Events
-No dispatched events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| select | dispatched | string |
----
-
-## ToggleSmallSkeleton
-
-### Import path
-
-```js
-import { ToggleSmallSkeleton } from "carbon-components-svelte";
-```
+## `TimePicker`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------------- |
-| labelText | string | `""` | Specify the label text. |
-| id | string | -- | 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 |
+| 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
-No slots.
-
-### Forwarded events
-
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| -- | Yes | -- | -- |
+| labelText | No | -- | {labelText} |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| paste | forwarded | -- |
-## Toolbar
-
-### Import path
-
-```js
-import { Toolbar } from "carbon-components-svelte";
-```
+## `TimePickerSelect`
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :--------------------------------- | :------------ | :------------------------ |
-| size | "sm" | "default" | `"default"` | Specify the toolbar size. |
+| 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
-- **default**: `...
`
-
-### Forwarded events
-
-No forwarded events.
-
-### Dispatched events
-
-No dispatched events.
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| -- | Yes | -- | -- |
+| labelText | No | -- | {labelText} |
----
+### Events
-## ToolbarBatchActions
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Import path
-
-```js
-import { ToolbarBatchActions } from "carbon-components-svelte";
-```
+## `ToastNotification`
### Props
-| Prop name | Type | Default value | Description |
-| :------------------ | :--------------------------------------------- | :------------ | :-------------------------------------- |
-| formatTotalSelected | (totalSelected: number) => string | -- | Override the total items selected text. |
+| 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 -- **default**: `
...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------- |
+| -- | Yes | -- | -- |
+| caption | No | -- | {caption} |
+| subtitle | No | -- | {subtitle} |
+| title | No | -- | {title} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------- |
+| close | dispatched | { timeout: boolean } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
+## `Toggle`
-No dispatched events.
+### Props
----
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
+| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input |
+| size | No | let | No | "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 |
-## ToolbarContent
+### Slots
-### Import path
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelA | No | -- | {labelA} |
+| labelB | No | -- | {labelB} |
+| labelText | No | -- | {labelText} |
-```js
-import { ToolbarContent } from "carbon-components-svelte";
-```
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :--------------------------------- |
+| toggle | dispatched | { toggled: boolean; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+
+## `ToggleSkeleton`
### Props
-No exported props.
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
+| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :----------------------- |
+| labelText | No | -- | {labelText} |
-### Forwarded events
+### Events
-No forwarded events.
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
-### Dispatched events
+## `Toolbar`
-No dispatched events.
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ |
+| size | No | let | No | "sm" | "default" | "default" | Specify the toolbar size |
----
+### Slots
-## ToolbarMenu
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Import path
+### Events
-```js
-import { ToolbarMenu } from "carbon-components-svelte";
-```
+None.
+
+## `ToolbarBatchActions`
### Props
-No exported props.
+| 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
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------ |
+| -- | Yes | -- | -- |
+| cancel | No | -- | Cancel |
+
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| cancel | dispatched | null |
-### Forwarded events
+## `ToolbarContent`
-No forwarded events.
+### Props
-### Dispatched events
+None.
-No dispatched events.
+### Slots
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-## ToolbarMenuItem
+### Events
-### Import path
+None.
-```js
-import { ToolbarMenuItem } from "carbon-components-svelte";
-```
+## `ToolbarMenu`
### Props
-No exported props.
+None.
### Slots
-- **default**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Forwarded events
+### Events
-- `on:click`
-- `on:keydown`
+None.
-### Dispatched events
+## `ToolbarMenuItem`
-No dispatched events.
+### Props
----
+None.
-## ToolbarSearch
+### Slots
-### Import path
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-```js
-import { ToolbarSearch } from "carbon-components-svelte";
-```
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| keydown | forwarded | -- |
+
+## `ToolbarSearch`
### Props
-| Prop name | Type | Default value | Description |
-| :--------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
-| value | string | `""` | Specify the value of the search input. |
-| expanded | boolean | `false` | Set to `true` to expand the search bar. |
-| persistent | boolean | `false` | Set to `true` to keep the search bar expanded. |
-| tabindex | string | `"0"` | Specify the tabindex. |
-| ref | null | HTMLInputElement | `null` | Obtain a reference to the input HTML 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 |
+| 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
-No slots.
+None.
-### Forwarded events
+### Events
-- `on:change`
-- `on:input`
-- `on:focus`
-- `on:blur`
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| clear | dispatched | null |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
+| keyup | forwarded | -- |
+| keydown | forwarded | -- |
+| paste | forwarded | -- |
-### Dispatched events
+## `Tooltip`
-No dispatched events.
+### Props
----
+| 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 |
-## Tooltip
+### Slots
-### Import path
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :------------------------------------------------------------------ |
+| -- | Yes | -- | -- |
+| icon | No | -- | <svelte:component this={icon} name={iconName} /> |
+| triggerText | No | -- | {triggerText} |
-```js
-import { Tooltip } from "carbon-components-svelte";
-```
+### Events
+
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| open | dispatched | null |
+| close | dispatched | null |
+| click | forwarded | -- |
+| mousedown | forwarded | -- |
+
+## `TooltipDefinition`
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------------------------------- |
-| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the button. |
-| open | boolean | `false` | Set to `true` to open the tooltip. |
-| hideIcon | boolean | `false` | Set to `true` to hide the tooltip icon. |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`). |
-| iconDescription | string | `""` | Specify the ARIA label for the tooltip button. |
-| iconName | string | `""` | Specify the icon name attribute. |
-| tabindex | string | `"0"` | Set the button tabindex. |
-| tooltipId | string | -- | Set an id for the tooltip. |
-| triggerId | string | -- | Set an id for the tooltip button. |
-| triggerText | string | `""` | Set the tooltip button text. |
-| ref | null | HTMLElement | `null` | Obtain a reference to the trigger text HTML element. |
-| refTooltip | null | HTMLElement | `null` | Obtain a reference to the tooltip HTML element. |
-| refIcon | null | HTMLElement | `null` | Obtain a reference to the icon HTML 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
-- **default**: `...
`
-- **"triggerText"**: `...
`
-- **"icon"**: `...
`
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------- |
+| -- | Yes | -- | -- |
+| tooltip | No | -- | {tooltipText} |
+
+### Events
-### Forwarded events
+| Event name | Type | Detail |
+| :--------- | :--------- | :---------------- |
+| open | dispatched | null |
+| close | dispatched | null |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| focus | forwarded | -- |
-No forwarded events.
+## `TooltipFooter`
-### Dispatched events
+### Props
+
+| 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 |
-No dispatched events.
+### Slots
----
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-## TooltipDefinition
+### Events
-### Import path
+None.
-```js
-import { TooltipDefinition } from "carbon-components-svelte";
-```
+## `TooltipIcon`
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :------------------------------------------------ | :------------ | :----------------------------------------------------- |
-| tooltipText | string | `""` | Specify the tooltip text. |
-| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. |
-| direction | "top" | "bottom" | `"bottom"` | Set the direction of the tooltip relative to the icon. |
-| id | string | -- | Set an id for the tooltip div element. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML 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
-- **default**: `...
`
-- **"tooltip"**: `...
`
+| Slot name | Default | Props | Fallback |
+| :---------- | :------ | :---- | :-------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this={icon} /> |
+| tooltipText | No | -- | {tooltipText} |
-### Forwarded events
+### Events
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:focus`
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| focus | forwarded | -- |
-### Dispatched events
+## `TreeView`
-No dispatched events.
+### Types
----
+```ts
+export type TreeNodeId = string | number;
-## TooltipIcon
-
-### Import path
-
-```js
-import { TooltipIcon } from "carbon-components-svelte";
+export interface TreeNode {
+ id: TreeNodeId;
+ text: any;
+ icon?: any;
+ disabled?: boolean;
+ nodes?: TreeNode[];
+}
```
### Props
-| Prop name | Type | Default value | Description |
-| :---------- | :-------------------------------------------------------------- | :------------ | :----------------------------------------------------- |
-| tooltipText | string | `""` | Specify the tooltip text. |
-| align | "start" | "center" | "end" | `"center"` | Set the alignment of the tooltip relative to the icon. |
-| direction | "top" | "right" | "bottom" | "left" | `"bottom"` | Set the direction of the tooltip relative to the icon. |
-| id | string | -- | Set an id for the span element. |
-| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. |
+| 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 -- **default**: `
...
`
-
-### Forwarded events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
+| -- | Yes | { node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } | {node.text} |
+| labelText | No | -- | {labelText} |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
-- `on:focus`
+### Events
-### Dispatched events
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------------------------------------------------ |
+| select | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
+| toggle | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
+| focus | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } |
+| keydown | forwarded | -- |
-No dispatched events.
+## `Truncate`
----
+### Props
-## UnorderedList
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
+| clamp | No | let | No | "end" | "front" | "end" | -- |
-### Import path
+### Slots
-```js
-import { UnorderedList } from "carbon-components-svelte";
-```
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-### Props
+### Events
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :--------------------------------------- |
-| nested | boolean | `false` | Set to `true` to use the nested variant. |
+None.
-### Slots
+## `UnorderedList`
-- **default**: `...
`
+### Props
-### Forwarded events
+| 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 |
-- `on:click`
-- `on:mouseover`
-- `on:mouseenter`
-- `on:mouseleave`
+### Slots
-### Dispatched events
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
-No dispatched events.
+### Events
----
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9b759e9c..7a4e1cdf 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,13 +1,11 @@
# Contributing
-Note: before submitting a pull request (PR), it is recommended to first [file an issue](https://github.com/IBM/carbon-components-svelte/issues).
+Before submitting a pull request (PR), consider [filing an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues) to gain clarity and direction.
## Prerequisites
-This project requires Node.js (version 12 or greater) and Yarn (version 1 or greater).
-
-- [Node.js](https://nodejs.org/en/download/package-manager/)
-- [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
@@ -21,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.
@@ -65,15 +56,21 @@ If linked correctly, any change to a component in the `src` folder should be ref
## Development workflow
+Create a topic branch from `master`. Keep your PR focused and branch up-to-date with upstream `master`.
+
+```sh
+git checkout -b new-feature
+```
+
Preview changes to components from the `src` folder in the documentation website located in `docs/`.
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
@@ -83,8 +80,8 @@ Each component should adopt the following structure:
src/Component
│
└───Component.svelte // main component
-└───Component.Skeleton.svelte // Skeleton component (if any)
-└───index.js // export components (e.g. `Component.svelte`, `Component.Skeleton.svelte`)
+└───ComponentSkeleton.svelte // Skeleton component (if applicable)
+└───index.js // export components
```
### Editing a component
@@ -93,15 +90,15 @@ If adding or editing an exported component prop, be sure to annotate its value u
```js
/**
- * Set to `true` to disable the tab
- * @type {boolean} [disabled=false]
+ * Specify the size of the component
+ * @type {"sm" | "default" | "lg"}
*/
-export let disabled = false;
+export let size = "default";
```
### Creating a component
-First, [submit an issue](https://github.com/IBM/carbon-components-svelte/issues).
+First, [submit an issue](https://github.com/carbon-design-system/carbon-components-svelte/issues).
If creating a new component, don't forget it from `src/index.js`:
@@ -117,23 +114,14 @@ export {
} from "./ComposedModal";
```
-### Build
+### Run `npm run build:docs`
-Verify that you can build the library by running the following command at the project root:
+Run the following command to re-generate TypeScript definitions and documentation.
```sh
-# carbon-components-svelte/
-yarn prepack
+npm run build:docs
```
-This does several things:
-
-- uses `node-sass` to pre-compile CSS StyleSheets in the `css` folder
-- uses Rollup to bundle the Svelte components in `src` in ESM/UMD formats; emitted to `lib`
-- uses a Rollup plugin to:
- - generate component documentation in Markdown format (`COMPONENT_INDEX.md`)
- - generate TypeScript definitions (`types/index.d.ts`)
-
## Submit a Pull Request
### Sync Your Fork
@@ -149,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 `
+
+
+
+
-## [Documentation](http://ibm.biz/carbon-svelte)
+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.
-## Getting started
+Design systems facilitate design and development through reuse, consistency, and extensibility.
-Install `carbon-components-svelte` as a development dependency.
+The Carbon Svelte portfolio also includes:
-```bash
-yarn add -D carbon-components-svelte
-# OR
-npm i -D carbon-components-svelte
+- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,500+ Carbon icons as Svelte components
+- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,300+ Carbon pictograms as Svelte components
+- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3
+- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon
+
+## [Documentation](https://svelte.carbondesignsystem.com)
+
+Other forms of documentation are auto-generated:
+
+- **[TypeScript definitions](types)**: Component TypeScript definitions
+- **[Component Index](COMPONENT_INDEX.md)**: Component API in Markdown format
+- **[Component API](docs/src/COMPONENT_API.json)**: Component API in JSON format
+
+## Installation
+
+```sh
+# npm
+npm i carbon-components-svelte
+
+# pnpm
+pnpm i carbon-components-svelte
+
+# Yarn
+yarn add carbon-components-svelte
+
+# Bun
+bun add carbon-components-svelte
```
## Usage
-The quickest way to get started is to customize a template from the [examples](examples/) folder.
+### Styling
-Example set-ups demonstrate usage with popular application bundlers and frameworks. They feature a mix of Single-page Applications (SPA), Server-side rendering (SSR) and statically exported approaches.
+Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).
-- **[examples/rollup](examples/rollup/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup)
-- **[examples/rollup-typescript](examples/rollup-typescript/)**: SPA bundled using [Rollup](https://github.com/rollup/rollup) with TypeScript support
-- **[examples/routify](examples/routify/)**: SPA + static export using [Routify](https://github.com/roxiness/routify)
-- **[examples/sapper](examples/sapper/)**: SSR + static export using [Sapper](https://github.com/sveltejs/sapper)
-- **[examples/svite](examples/svite/)**: SPA developed with Svite, bundled with [Rollup](https://github.com/rollup/rollup)
-- **[examples/webpack](examples/webpack/)**: SPA bundled with [webpack](https://github.com/webpack/webpack)
+- **white.css**: Default Carbon theme (light)
+- **g10.css**: Gray 10 theme (light)
+- **g80.css**: Gray 80 theme (dark)
+- **g90.css**: Gray 90 theme (dark)
+- **g100.css**: Gray 100 theme (dark)
+- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
-### Scaffolding
+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.
-Each example is published in a dedicated branch of the same name.
+The compiled CSS is generated from the following `.scss` files:
-Use [degit](https://github.com/Rich-Harris/degit) to scaffold a new project:
+- [css/white.scss](css/white.scss)
+- [css/g10.scss](css/g10.scss)
+- [css/g80.scss](css/g80.scss)
+- [css/g90.scss](css/g90.scss)
+- [css/g100.scss](css/g100.scss)
+- [css/all.scss](css/all.scss)
-For example, to use the `svite` template, run the following commands:
+#### CSS StyleSheet
-```sh
-npx degit ibm/carbon-components-svelte#svite svelte-app
-cd svelte-app
-yarn install
+```js
+// White theme
+import "carbon-components-svelte/css/white.css";
+
+// Gray 10 theme
+import "carbon-components-svelte/css/g10.css";
+
+// Gray 80 theme
+import "carbon-components-svelte/css/g80.css";
+
+// Gray 90 theme
+import "carbon-components-svelte/css/g90.css";
+
+// Gray 100 theme
+import "carbon-components-svelte/css/g100.css";
+
+// All themes
+import "carbon-components-svelte/css/all.css";
+```
+
+### SCSS
+
+The most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.
+
+Refer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/v10/docs/guides/sass.md) for documentation.
+
+### Dynamic theming
+
+Use the "all.css" StyleSheet for dynamic, client-side theming.
+
+```js
+import "carbon-components-svelte/css/all.css";
+```
+
+Update the theme by setting the `theme` attribute on the `html` element. The default `theme` is `"white"`.
+
+```html
+
+
+
+ ...
+
+
+```
+
+Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.
+
+```html
+
```
### Importing components
-Import components from `carbon-components-svelte` in the `script` tag of your Svelte file.
+Import components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.
```html
@@ -68,60 +142,126 @@ Import components from `carbon-components-svelte` in the `script` tag of your Sv
**Refer to [COMPONENT_INDEX.md](COMPONENT_INDEX.md) for component API documentation.**
-### Precompiled CSS StyleSheets
+## Preprocessors & Plugins
-`carbon-components-svelte` includes precompiled CSS StyleSheets for each Carbon theme:
+[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.
-- **white.css**: Default Carbon theme (light)
-- **g10.css**: Gray 10 theme (light)
-- **g90.css**: Gray 90 theme (dark)
-- **g100.css**: Gray 100 theme (dark)
-- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables
+> [!NOTE]
+> Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.
-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.
+```sh
+# npm
+npm i -D carbon-preprocess-svelte
-The [examples](examples/) use `all.css` for dynamic theming through CSS variables.
+# pnpm
+pnpm i -D carbon-preprocess-svelte
-Because the CSS is precompiled, it includes all Carbon design styles. One method to optimize the CSS is to ship only the CSS that is used. This can be accomplished using [PurgeCSS](https://github.com/FullHuman/purgecss) with a Carbon style extractor (WIP).
+# Yarn
+yarn add -D carbon-preprocess-svelte
+
+# Bun
+bun add -D carbon-preprocess-svelte
+```
+
+### `optimizeImports`
+
+`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.
+
+The preprocessor optimizes imports from the following packages:
+
+- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)
+- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)
+- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)
+
+**Before & After**
+
+```diff
+- import { Button } from "carbon-components-svelte";
++ import Button from "carbon-components-svelte/src/Button/Button.svelte";
+
+- import { Add } from "carbon-icons-svelte";
++ import Add from "carbon-icons-svelte/lib/Add.svelte";
+
+- import { Airplane } from "carbon-pictograms-svelte";
++ import Airplane from "carbon-pictograms-svelte/lib/Airplane.svelte";
+```
#### Usage
-##### `svelte-preprocess`
-
-The easiest way to import a StyleSheet is with [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
+See [examples](examples) for full configurations.
```js
-const svelteOptions = {
- preprocess: require("svelte-preprocess")(),
+// svelte.config.js
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+export default {
+ preprocess: [optimizeImports()],
};
```
-```html
-
-
+Any other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.
+
+For example, `vitePreprocess` should precede `optimizeImports`.
+
+```diff
+// svelte.config.js
++ import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+import { optimizeImports } from "carbon-preprocess-svelte";
+
+export default {
+ preprocess: [
++ vitePreprocess(),
+ optimizeImports()
+ ],
+};
```
-##### JavaScript import
+### `optimizeCss`
-Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
+`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).
+
+`carbon-components-svelte@0.85.0` or greater is required.
+
+```diff
+$ vite build
+
+Optimized index-CU4gbKFa.css
+- Before: 606.26 kB
++ After: 53.22 kB (-91.22%)
+
+dist/index.html 0.34 kB │ gzip: 0.24 kB
+dist/assets/index-CU4gbKFa.css 53.22 kB │ gzip: 6.91 kB
+dist/assets/index-Ceijs3eO.js 53.65 kB │ gzip: 15.88 kB
+```
+
+> [!NOTE]
+> This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.
+
+#### Usage
+
+See [examples](examples) for full configurations.
```js
-import "carbon-components-svelte/css/all.css";
-import App from "./App.svelte";
+// vite.config.js
+import { sveltekit } from "@sveltejs/kit/vite";
+import { optimizeCss } from "carbon-preprocess-svelte";
+import { defineConfig } from "vite";
-const app = new App({ target: document.body });
-
-export default app;
+export default defineConfig({
+ plugins: [sveltekit(), optimizeCss()],
+});
```
-See [webpack.config.js](examples/webpack/webpack.config.js) in [examples/webpack](examples/webpack).
+## Examples
-### TypeScript support
+- [examples/rollup](examples/rollup/)
+- [examples/sveltekit](examples/sveltekit/)
+- [examples/vite](examples/vite/)
+- [examples/webpack](examples/webpack/)
-The component library ships with TypeScript definitions ([types/index.d.ts](types/index.d.ts)).
+## TypeScript support
+
+[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).
## Contributing
@@ -133,7 +273,13 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
[Apache 2.0](LICENSE)
-[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue
+[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626&style=for-the-badge
[npm-url]: https://npmjs.com/package/carbon-components-svelte
-[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master
-[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte
+
+## 
...
`)",
+ "type": "string",
+ "value": "\"title\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "open",
+ "kind": "let",
+ "description": "Set to `true` to open the first accordion item",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "disabled",
+ "kind": "let",
+ "description": "Set to `true` to disable the accordion item",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "iconDescription",
+ "kind": "let",
+ "description": "Specify the ARIA label for the accordion item chevron icon",
+ "type": "string",
+ "value": "\"Expand/Collapse\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ },
+ {
+ "name": "title",
+ "default": false,
+ "fallback": "{title}",
+ "slot_props": "{}"
+ }
+ ],
+ "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"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
+ },
+ {
+ "moduleName": "AccordionSkeleton",
+ "filePath": "src/Accordion/AccordionSkeleton.svelte",
+ "props": [
+ {
+ "name": "count",
+ "kind": "let",
+ "description": "Specify the number of accordion items to render",
+ "type": "number",
+ "value": "4",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "align",
+ "kind": "let",
+ "description": "Specify alignment of accordion item chevron icon",
+ "type": "\"start\" | \"end\"",
+ "value": "\"end\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "size",
+ "kind": "let",
+ "description": "Specify the size of the accordion",
+ "type": "\"sm\" | \"xl\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "open",
+ "kind": "let",
+ "description": "Set to `false` to close the first accordion item",
+ "type": "boolean",
+ "value": "true",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "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"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "ul"
+ }
+ },
+ {
+ "moduleName": "AspectRatio",
+ "filePath": "src/AspectRatio/AspectRatio.svelte",
+ "props": [
+ {
+ "name": "ratio",
+ "kind": "let",
+ "description": "Specify the aspect ratio",
+ "type": "\"2x1\" | \"2x3\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
+ "value": "\"2x1\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
+ "events": [],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
+ },
+ {
+ "moduleName": "Breadcrumb",
+ "filePath": "src/Breadcrumb/Breadcrumb.svelte",
+ "props": [
+ {
+ "name": "noTrailingSlash",
+ "kind": "let",
+ "description": "Set to `true` to hide the breadcrumb trailing slash",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "skeleton",
+ "kind": "let",
+ "description": "Set to `true` to display skeleton state",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "slot_props": "{}"
+ }
+ ],
+ "events": [
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "BreadcrumbSkeleton"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseover",
+ "element": "BreadcrumbSkeleton"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseenter",
+ "element": "BreadcrumbSkeleton"
+ },
+ {
+ "type": "forwarded",
+ "name": "mouseleave",
+ "element": "BreadcrumbSkeleton"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "InlineComponent",
+ "name": "BreadcrumbSkeleton"
+ },
+ "extends": {
+ "interface": "BreadcrumbSkeletonProps",
+ "import": "\"./BreadcrumbSkeleton.svelte\""
+ }
+ },
+ {
+ "moduleName": "BreadcrumbItem",
+ "filePath": "src/Breadcrumb/BreadcrumbItem.svelte",
+ "props": [
+ {
+ "name": "href",
+ "kind": "let",
+ "description": "Set the `href` to use an anchor link",
+ "type": "string",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "isCurrentPage",
+ "kind": "let",
+ "description": "Set to `true` if the breadcrumb item represents the current page",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "moduleExports": [],
+ "slots": [
+ {
+ "name": "__default__",
+ "default": true,
+ "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"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
+ },
+ {
+ "moduleName": "BreadcrumbSkeleton",
+ "filePath": "src/Breadcrumb/BreadcrumbSkeleton.svelte",
+ "props": [
+ {
+ "name": "noTrailingSlash",
+ "kind": "let",
+ "description": "Set to `true` to hide the breadcrumb trailing slash",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "count",
+ "kind": "let",
+ "description": "Specify the number of breadcrumb items to render",
+ "type": "number",
+ "value": "3",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ }
+ ],
+ "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"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "div"
+ }
+ },
+ {
+ "moduleName": "Breakpoint",
+ "filePath": "src/Breakpoint/Breakpoint.svelte",
+ "props": [
+ {
+ "name": "size",
+ "kind": "let",
+ "description": "Determine the current Carbon grid breakpoint size",
+ "type": "BreakpointSize",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "sizes",
+ "kind": "let",
+ "description": "Carbon grid sizes as an object",
+ "type": "Record...
`)",
+ "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
+ },
+ {
+ "name": "ref",
+ "kind": "let",
+ "description": "Obtain a reference to the button HTML element",
+ "type": "null | HTMLButtonElement",
+ "value": "null",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "transition",
+ "kind": "let",
+ "description": "Customize the panel transition (i.e., `transition:slide`).\nSet to `false` to disable the transition",
+ "type": "false | import(\"svelte/transition\").SlideParams",
+ "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": "closeIcon",
+ "default": false,
+ "fallback": "\n {text}\n
",
+ "slot_props": "{}"
+ }
+ ],
+ "events": [
+ {
+ "type": "forwarded",
+ "name": "click",
+ "element": "a"
+ },
+ {
+ "type": "forwarded",
+ "name": "keydown",
+ "element": "a"
+ }
+ ],
+ "typedefs": [],
+ "generics": null,
+ "rest_props": {
+ "type": "Element",
+ "name": "li"
+ }
+ },
+ {
+ "moduleName": "Pagination",
+ "filePath": "src/Pagination/Pagination.svelte",
+ "props": [
+ {
+ "name": "page",
+ "kind": "let",
+ "description": "Specify the current page index",
+ "type": "number",
+ "value": "1",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "totalItems",
+ "kind": "let",
+ "description": "Specify the total number of items",
+ "type": "number",
+ "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
+ },
+ {
+ "name": "disabled",
+ "kind": "let",
+ "description": "Set to `true` to disable the pagination",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "forwardText",
+ "kind": "let",
+ "description": "Specify the forward button text",
+ "type": "string",
+ "value": "\"Next page\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "backwardText",
+ "kind": "let",
+ "description": "Specify the backward button text",
+ "type": "string",
+ "value": "\"Previous page\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "itemsPerPageText",
+ "kind": "let",
+ "description": "Specify the items per page text",
+ "type": "string",
+ "value": "\"Items per page:\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "itemText",
+ "kind": "let",
+ "description": "Override the item text",
+ "type": "(min: number, max: number) => string",
+ "value": "(min, max) =>\n `${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
+ "isFunction": true,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "itemRangeText",
+ "kind": "let",
+ "description": "Override the item range text",
+ "type": "(min: number, max: number, total: number) => string",
+ "value": "(\n min,\n max,\n total,\n) =>\n `${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? \"\" : \"s\"}`",
+ "isFunction": true,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "pageInputDisabled",
+ "kind": "let",
+ "description": "Set to `true` to disable the page input",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "pageSizeInputDisabled",
+ "kind": "let",
+ "description": "Set to `true` to disable the page size input",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "pageSize",
+ "kind": "let",
+ "description": "Specify the number of items to display in a page",
+ "type": "number",
+ "value": "10",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "isRequired": false,
+ "constant": false,
+ "reactive": true
+ },
+ {
+ "name": "pageSizes",
+ "kind": "let",
+ "description": "Specify the available page sizes",
+ "type": "ReadonlyArray{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" + } + ], + "typedefs": [], + "generics": null, + "rest_props": { + "type": "Element", + "name": "li" + } + }, + { + "moduleName": "RadioButton", + "filePath": "src/RadioButton/RadioButton.svelte", + "props": [ + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio button", + "type": "string | number", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the radio button", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the radio button", + "type": "boolean", + "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 + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "labelText", + "kind": "let", + "description": "Specify the label text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLabel", + "kind": "let", + "description": "Set to `true` to visually hide the label text", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "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 radio button input", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "ref", + "kind": "let", + "description": "Obtain a reference to the input HTML element", + "type": "null | HTMLInputElement", + "value": "null", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + } + ], + "moduleExports": [], + "slots": [ + { + "name": "labelText", + "default": false, + "fallback": "{labelText}", + "slot_props": "{}" + } + ], + "events": [ + { + "type": "forwarded", + "name": "focus", + "element": "input" + }, + { + "type": "forwarded", + "name": "blur", + "element": "input" + }, + { + "type": "forwarded", + "name": "change", + "element": "input" + } + ], + "typedefs": [], + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } + }, + { + "moduleName": "RadioButtonGroup", + "filePath": "src/RadioButtonGroup/RadioButtonGroup.svelte", + "props": [ + { + "name": "selected", + "kind": "let", + "description": "Set the selected radio button value", + "type": "string | number", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the radio buttons", + "type": "boolean", + "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 + }, + { + "name": "legendText", + "kind": "let", + "description": "Specify the legend text", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "hideLegend", + "kind": "let", + "description": "Set to `true` to visually hide the legend", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "labelPosition", + "kind": "let", + "description": "Specify the label position", + "type": "\"right\" | \"left\"", + "value": "\"right\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "orientation", + "kind": "let", + "description": "Specify the orientation of the radio buttons", + "type": "\"horizontal\" | \"vertical\"", + "value": "\"horizontal\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the container div element", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "slots": [ + { + "name": "__default__", + "default": true, + "slot_props": "{}" + }, + { + "name": "legendText", + "default": false, + "fallback": "{legendText}", + "slot_props": "{}" + } + ], + "events": [ + { + "type": "dispatched", + "name": "change", + "detail": "string | number" + }, + { + "type": "forwarded", + "name": "click", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseover", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseenter", + "element": "div" + }, + { + "type": "forwarded", + "name": "mouseleave", + "element": "div" + } + ], + "typedefs": [], + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } + }, + { + "moduleName": "RadioButtonSkeleton", + "filePath": "src/RadioButton/RadioButtonSkeleton.svelte", + "props": [], + "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" + } + ], + "typedefs": [], + "generics": null, + "rest_props": { + "type": "Element", + "name": "div" + } + }, + { + "moduleName": "RadioTile", + "filePath": "src/Tile/RadioTile.svelte", + "props": [ + { + "name": "checked", + "kind": "let", + "description": "Set to `true` to check the tile", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": true + }, + { + "name": "light", + "kind": "let", + "description": "Set to `true` to enable the light variant", + "type": "boolean", + "value": "false", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "disabled", + "kind": "let", + "description": "Set to `true` to disable the tile", + "type": "boolean", + "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 + }, + { + "name": "value", + "kind": "let", + "description": "Specify the value of the radio input", + "type": "string", + "value": "\"\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "tabindex", + "kind": "let", + "description": "Specify the tabindex", + "type": "string", + "value": "\"0\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "iconDescription", + "kind": "let", + "description": "Specify the ARIA label for the radio tile checkmark icon", + "type": "string", + "value": "\"Tile checkmark\"", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + }, + { + "name": "id", + "kind": "let", + "description": "Set an id for the input element", + "type": "string", + "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 radio tile input", + "type": "string", + "isFunction": false, + "isFunctionDeclaration": false, + "isRequired": false, + "constant": false, + "reactive": false + } + ], + "moduleExports": [], + "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" + } + ], + "typedefs": [], + "generics": null, + "rest_props": { + "type": "Element", + "name": "label" + } + }, + { + "moduleName": "RecursiveList", + "filePath": "src/RecursiveList/RecursiveList.svelte", + "props": [ + { + "name": "nodes", + "kind": "let", + "description": "Specify the nodes to render", + "type": "Array...
)"
- }
- ],
- [
- "open",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to open the first accordion item"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the accordion item"
- }
- ],
- [
- "iconDescription",
- {
- "kind": "let",
- "value": "\"Expand/Collapse\"",
- "type": "string",
- "description": "Specify the ARIA label for the accordion item chevron icon"
- }
- ]
- ],
- "slots": [
- [
- "title",
- {
- "attributes": [
- {
- "start": 2004,
- "end": 2016,
- "type": "Attribute",
- "name": "name",
- "value": [
- {
- "start": 2010,
- "end": 2015,
- "type": "Text",
- "raw": "title",
- "data": "title"
- }
- ]
- }
- ],
- "children": [
- {
- "start": 2017,
- "end": 2024,
- "type": "MustacheTag",
- "expression": {
- "type": "Identifier",
- "start": 2018,
- "end": 2023,
- "loc": {
- "start": {
- "line": 84,
- "column": 26
- },
- "end": {
- "line": 84,
- "column": 31
- }
- },
- "name": "title"
- }
- }
- ],
- "default": false,
- "default_value": "{title}\n"
- }
- ],
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "animationend",
- {
- "start": 1325,
- "end": 1340,
- "type": "EventHandler",
- "name": "animationend",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "click",
- {
- "start": 1561,
- "end": 1569,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 1678,
- "end": 1690,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 1695,
- "end": 1708,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 1713,
- "end": 1726,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "keydown",
- {
- "start": 1731,
- "end": 1741,
- "type": "EventHandler",
- "name": "keydown",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "AccordionSkeleton": {
- "moduleName": "AccordionSkeleton",
- "props": [
- [
- "count",
- {
- "kind": "let",
- "value": "4",
- "type": "number",
- "description": "Specify the number of accordion items to render"
- }
- ],
- [
- "align",
- {
- "kind": "let",
- "value": "\"end\"",
- "type": "\"start\" | \"end\"",
- "description": "Specify alignment of accordion item chevron icon"
- }
- ],
- [
- "size",
- {
- "kind": "let",
- "type": "\"sm\" | \"xl\"",
- "description": "Specify the size of the accordion"
- }
- ],
- [
- "open",
- {
- "kind": "let",
- "value": "true",
- "type": "boolean",
- "description": "Set to `false` to close the first accordion item"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 822,
- "end": 830,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 833,
- "end": 845,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 848,
- "end": 861,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 864,
- "end": 877,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "AspectRatio": {
- "moduleName": "AspectRatio",
- "props": [
- [
- "ratio",
- {
- "kind": "let",
- "value": "\"2x1\"",
- "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
- "description": "Specify the aspect ratio"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [],
- "dispatched_events": []
- },
- "Breadcrumb": {
- "moduleName": "Breadcrumb",
- "props": [
- [
- "noTrailingSlash",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to hide the breadcrumb trailing slash"
- }
- ],
- [
- "skeleton",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to display skeleton state"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 602,
- "end": 610,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 615,
- "end": 627,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 632,
- "end": 645,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 650,
- "end": 663,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "BreadcrumbItem": {
- "moduleName": "BreadcrumbItem",
- "props": [
- [
- "href",
- {
- "kind": "let",
- "type": "string",
- "description": "Set the `href` to use an anchor link"
- }
- ],
- [
- "isCurrentPage",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` if the breadcrumb item represents the current page"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [
- {
- "start": 682,
- "end": 758,
- "type": "Attribute",
- "name": "props",
- "value": [
- {
- "start": 689,
- "end": 757,
- "type": "MustacheTag",
- "expression": {
- "type": "ObjectExpression",
- "start": 690,
- "end": 756,
- "loc": {
- "start": {
- "line": 32,
- "column": 14
- },
- "end": {
- "line": 32,
- "column": 80
- }
- },
- "properties": [
- {
- "type": "Property",
- "start": 692,
- "end": 735,
- "loc": {
- "start": {
- "line": 32,
- "column": 16
- },
- "end": {
- "line": 32,
- "column": 59
- }
- },
- "method": false,
- "shorthand": false,
- "computed": false,
- "key": {
- "type": "Literal",
- "start": 692,
- "end": 706,
- "loc": {
- "start": {
- "line": 32,
- "column": 16
- },
- "end": {
- "line": 32,
- "column": 30
- }
- },
- "value": "aria-current",
- "raw": "'aria-current'"
- },
- "value": {
- "type": "MemberExpression",
- "start": 708,
- "end": 735,
- "loc": {
- "start": {
- "line": 32,
- "column": 32
- },
- "end": {
- "line": 32,
- "column": 59
- }
- },
- "object": {
- "type": "Identifier",
- "start": 708,
- "end": 719,
- "loc": {
- "start": {
- "line": 32,
- "column": 32
- },
- "end": {
- "line": 32,
- "column": 43
- }
- },
- "name": "$$restProps"
- },
- "property": {
- "type": "Literal",
- "start": 720,
- "end": 734,
- "loc": {
- "start": {
- "line": 32,
- "column": 44
- },
- "end": {
- "line": 32,
- "column": 58
- }
- },
- "value": "aria-current",
- "raw": "'aria-current'"
- },
- "computed": true,
- "optional": false
- },
- "kind": "init"
- },
- {
- "type": "Property",
- "start": 737,
- "end": 754,
- "loc": {
- "start": {
- "line": 32,
- "column": 61
- },
- "end": {
- "line": 32,
- "column": 78
- }
- },
- "method": false,
- "shorthand": false,
- "computed": false,
- "key": {
- "type": "Identifier",
- "start": 737,
- "end": 742,
- "loc": {
- "start": {
- "line": 32,
- "column": 61
- },
- "end": {
- "line": 32,
- "column": 66
- }
- },
- "name": "class"
- },
- "value": {
- "type": "Literal",
- "start": 744,
- "end": 754,
- "loc": {
- "start": {
- "line": 32,
- "column": 68
- },
- "end": {
- "line": 32,
- "column": 78
- }
- },
- "value": "bx--link",
- "raw": "'bx--link'"
- },
- "kind": "init"
- }
- ]
- }
- }
- ]
- }
- ],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 488,
- "end": 496,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 499,
- "end": 511,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 514,
- "end": 527,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 530,
- "end": 543,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "BreadcrumbSkeleton": {
- "moduleName": "BreadcrumbSkeleton",
- "props": [
- [
- "noTrailingSlash",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to hide the breadcrumb trailing slash"
- }
- ],
- [
- "count",
- {
- "kind": "let",
- "value": "3",
- "type": "number",
- "description": "Specify the number of breadcrumb items to render"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 443,
- "end": 451,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 454,
- "end": 466,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 469,
- "end": 482,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 485,
- "end": 498,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "Button": {
- "moduleName": "Button",
- "props": [
- [
- "kind",
- {
- "kind": "let",
- "value": "\"primary\"",
- "type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\"",
- "description": "Specify the kind of button"
- }
- ],
- [
- "size",
- {
- "kind": "let",
- "value": "\"default\"",
- "type": "\"default\" | \"field\" | \"small\"",
- "description": "Specify the size of button"
- }
- ],
- [
- "hasIconOnly",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` for the icon-only variant"
- }
- ],
- [
- "icon",
- {
- "kind": "let",
- "type": "typeof import(\"carbon-icons-svelte/lib/Add16\").default",
- "description": "Specify the icon from `carbon-icons-svelte` to render"
- }
- ],
- [
- "iconDescription",
- {
- "kind": "let",
- "type": "string",
- "description": "Specify the ARIA label for the button icon"
- }
- ],
- [
- "tooltipAlignment",
- {
- "kind": "let",
- "type": "\"start\" | \"center\" | \"end\"",
- "description": "Set the alignment of the tooltip relative to the icon\n`hasIconOnly` must be set to `true`"
- }
- ],
- [
- "tooltipPosition",
- {
- "kind": "let",
- "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
- "description": "Set the position of the tooltip relative to the icon"
- }
- ],
- [
- "as",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g. )"
- }
- ],
- [
- "skeleton",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to display the skeleton state"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the button"
- }
- ],
- [
- "href",
- {
- "kind": "let",
- "type": "string",
- "description": "Set the `href` to use an anchor link"
- }
- ],
- [
- "tabindex",
- {
- "kind": "let",
- "value": "\"0\"",
- "type": "string",
- "description": "Specify the tabindex"
- }
- ],
- [
- "type",
- {
- "kind": "let",
- "value": "\"button\"",
- "type": "string",
- "description": "Specify the `type` attribute for the button element"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLAnchorElement | HTMLButtonElement",
- "description": "Obtain a reference to the HTML element"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 3947,
- "end": 3955,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 3962,
- "end": 3974,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 3981,
- "end": 3994,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 4001,
- "end": 4014,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "ButtonSet": {
- "moduleName": "ButtonSet",
- "props": [
- [
- "stacked",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to stack the buttons vertically"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [],
- "dispatched_events": []
- },
- "ButtonSkeleton": {
- "moduleName": "ButtonSkeleton",
- "props": [
- [
- "href",
- {
- "kind": "let",
- "type": "string",
- "description": "Set the `href` to use an anchor link"
- }
- ],
- [
- "size",
- {
- "kind": "let",
- "value": "\"default\"",
- "type": "\"default\" | \"field\" | \"small\"",
- "description": "Specify the size of button skeleton"
- }
- ],
- [
- "small",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the small variant"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 990,
- "end": 998,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 1003,
- "end": 1015,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 1020,
- "end": 1033,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 1038,
- "end": 1051,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "Checkbox": {
- "moduleName": "Checkbox",
- "props": [
- [
- "checked",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Specify whether the checkbox is checked"
- }
- ],
- [
- "indeterminate",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Specify whether the checkbox is indeterminate"
- }
- ],
- [
- "skeleton",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to display the skeleton state"
- }
- ],
- [
- "readonly",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` for the checkbox to be read-only"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the checkbox"
- }
- ],
- [
- "labelText",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the label text"
- }
- ],
- [
- "hideLabel",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to visually hide the label text"
- }
- ],
- [
- "name",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Set a name for the input element"
- }
- ],
- [
- "title",
- {
- "kind": "let",
- "type": "string",
- "description": "Specify the title attribute for the label element"
- }
- ],
- [
- "id",
- {
- "kind": "let",
- "type": "string",
- "description": "Set an id for the input label"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLInputElement",
- "description": "Obtain a reference to the input HTML element"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 1845,
- "end": 1853,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 1858,
- "end": 1870,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 1875,
- "end": 1888,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 1893,
- "end": 1906,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "change",
- {
- "start": 2164,
- "end": 2173,
- "type": "EventHandler",
- "name": "change",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": [
- [
- "check",
- {
- "detail": "checked"
- }
- ]
- ]
- },
- "CheckboxSkeleton": {
- "moduleName": "CheckboxSkeleton",
- "props": [],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 131,
- "end": 139,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 142,
- "end": 154,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 157,
- "end": 170,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 173,
- "end": 186,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "ClickableTile": {
- "moduleName": "ClickableTile",
- "props": [
- [
- "clicked",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to click the tile"
- }
- ],
- [
- "light",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to enable the light variant"
- }
- ],
- [
- "href",
- {
- "kind": "let",
- "type": "string",
- "description": "Set the `href`"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 652,
- "end": 660,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "keydown",
- {
- "start": 714,
- "end": 724,
- "type": "EventHandler",
- "name": "keydown",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 837,
- "end": 849,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 852,
- "end": 865,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 868,
- "end": 881,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "CodeSnippet": {
- "moduleName": "CodeSnippet",
- "props": [
- [
- "type",
- {
- "kind": "let",
- "value": "\"single\"",
- "type": "\"single\" | \"inline\" | \"multi\"",
- "description": "Set the type of code snippet"
- }
- ],
- [
- "code",
- {
- "kind": "let",
- "type": "string",
- "description": "Set the code snippet text\nAlternatively, use the default slot (e.g. ...
)"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLButtonElement",
- "description": "Obtain a reference to the button HTML element"
- }
- ]
- ],
- "slots": [
- [
- "text",
- {
- "attributes": [
- {
- "start": 1781,
- "end": 1792,
- "type": "Attribute",
- "name": "name",
- "value": [
- {
- "start": 1787,
- "end": 1791,
- "type": "Text",
- "raw": "text",
- "data": "text"
- }
- ]
- }
- ],
- "children": [
- {
- "start": 1793,
- "end": 1800,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- },
- {
- "start": 1800,
- "end": 1834,
- "type": "IfBlock",
- "expression": {
- "type": "Identifier",
- "start": 1805,
- "end": 1809,
- "loc": {
- "start": {
- "line": 79,
- "column": 11
- },
- "end": {
- "line": 79,
- "column": 15
- }
- },
- "name": "text"
- },
- "children": [
- {
- "start": 1810,
- "end": 1829,
- "type": "Element",
- "name": "span",
- "attributes": [],
- "children": [
- {
- "start": 1816,
- "end": 1822,
- "type": "MustacheTag",
- "expression": {
- "type": "Identifier",
- "start": 1817,
- "end": 1821,
- "loc": {
- "start": {
- "line": 79,
- "column": 23
- },
- "end": {
- "line": 79,
- "column": 27
- }
- },
- "name": "text"
- }
- }
- ]
- }
- ]
- },
- {
- "start": 1834,
- "end": 1839,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- }
- ],
- "default": false,
- "default_value": "\n \n{#if text}{text}{/if}\n\n \n"
- }
- ],
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 1577,
- "end": 1585,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": [["close", {}]]
- },
- "HeaderActionLink": {
- "moduleName": "HeaderActionLink",
- "props": [
- [
- "linkIsActive",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the active state"
- }
- ],
- [
- "href",
- {
- "kind": "let",
- "type": "string",
- "description": "Specify the `href` attribute"
- }
- ],
- [
- "icon",
- {
- "kind": "let",
- "type": "{ render: typeof import(\"carbon-icons-svelte/lib/Add16\").default; skeleton: boolean; }",
- "description": "Specify the icon props"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLAnchorElement",
- "description": "Obtain a reference to the HTML anchor element"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [],
- "dispatched_events": []
- },
- "HeaderActionSearch": {
- "moduleName": "HeaderActionSearch",
- "props": [
- [
- "searchIsActive",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to focus the search"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [],
- "dispatched_events": [
- ["focusInputSearch", {}],
- ["focusOutInputSearch", {}],
- [
- "inputSearch",
- {
- "detail": "params"
- }
- ]
- ]
- },
- "HeaderGlobalAction": {
- "moduleName": "HeaderGlobalAction",
- "props": [
- [
- "isActive",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the active variant"
- }
- ],
- [
- "icon",
- {
- "kind": "let",
- "type": "typeof import(\"carbon-icons-svelte/lib/Add16\").default",
- "description": "Specify the icon to render"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLButtonElement",
- "description": "Obtain a reference to the HTML button element"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [
- {
- "start": 603,
- "end": 608,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- },
- {
- "start": 608,
- "end": 642,
- "type": "InlineComponent",
- "name": "svelte:component",
- "attributes": [],
- "children": [],
- "expression": {
- "type": "Identifier",
- "start": 633,
- "end": 637,
- "loc": {
- "start": {
- "line": 30,
- "column": 29
- },
- "end": {
- "line": 30,
- "column": 33
- }
- },
- "name": "icon"
- }
- },
- {
- "start": 642,
- "end": 645,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- }
- ],
- "default": true,
- "default_value": "\n \n\n {text}\n
\n\n \n"
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 2656,
- "end": 2664,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "keydown",
- {
- "start": 2726,
- "end": 2736,
- "type": "EventHandler",
- "name": "keydown",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "Pagination": {
- "moduleName": "Pagination",
- "props": [
- [
- "page",
- {
- "kind": "let",
- "value": "1",
- "type": "number",
- "description": "Specify the current page index"
- }
- ],
- [
- "totalItems",
- {
- "kind": "let",
- "value": "0",
- "type": "number",
- "description": "Specify the total number of items"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the pagination"
- }
- ],
- [
- "forwardText",
- {
- "kind": "let",
- "value": "\"Next page\"",
- "type": "string",
- "description": "Specify the forward button text"
- }
- ],
- [
- "backwardText",
- {
- "kind": "let",
- "value": "\"Previous page\"",
- "type": "string",
- "description": "Specify the backward button text"
- }
- ],
- [
- "itemsPerPageText",
- {
- "kind": "let",
- "value": "\"Items per page:\"",
- "type": "string",
- "description": "Specify the items per page text"
- }
- ],
- [
- "itemText",
- {
- "kind": "let",
- "type": "(min: number, max: number) => string",
- "description": "Override the item text"
- }
- ],
- [
- "itemRangeText",
- {
- "kind": "let",
- "type": "(min: number, max: number, total: number) => string",
- "description": "Override the item range text"
- }
- ],
- [
- "pageInputDisabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the page input"
- }
- ],
- [
- "pageSizeInputDisabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the page size input"
- }
- ],
- [
- "pageSize",
- {
- "kind": "let",
- "value": "10",
- "type": "number",
- "description": "Specify the number of items to display in a page"
- }
- ],
- [
- "pageSizes",
- {
- "kind": "let",
- "value": "[10]",
- "type": "number[]",
- "description": "Specify the available page sizes"
- }
- ],
- [
- "pagesUnknown",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` if the number of pages is unknown"
- }
- ],
- [
- "pageText",
- {
- "kind": "let",
- "type": "(page: number) => string",
- "description": "Override the page text"
- }
- ],
- [
- "pageRangeText",
- {
- "kind": "let",
- "type": "(current: number, total: number) => string",
- "description": "Override the page range text"
- }
- ],
- [
- "id",
- {
- "kind": "let",
- "type": "string",
- "description": "Set an id for the top-level element"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [],
- "dispatched_events": [
- [
- "update",
- {
- "detail": "{ pageSize, page }"
- }
- ]
- ]
- },
- "PaginationNav": {
- "moduleName": "PaginationNav",
- "props": [
- [
- "page",
- {
- "kind": "let",
- "value": "0",
- "type": "number",
- "description": "Specify the current page index"
- }
- ],
- [
- "total",
- {
- "kind": "let",
- "value": "10",
- "type": "number",
- "description": "Specify the total number of pages"
- }
- ],
- [
- "shown",
- {
- "kind": "let",
- "value": "10",
- "type": "number",
- "description": "Specify the total number of pages to show"
- }
- ],
- [
- "loop",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to loop the navigation"
- }
- ],
- [
- "forwardText",
- {
- "kind": "let",
- "value": "\"Next page\"",
- "type": "string",
- "description": "Specify the forward button text"
- }
- ],
- [
- "backwardText",
- {
- "kind": "let",
- "value": "\"Previous page\"",
- "type": "string",
- "description": "Specify the backward button text"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [],
- "dispatched_events": [
- [
- "click:button--previous",
- {
- "detail": "{ page }"
- }
- ],
- [
- "click:button--next",
- {
- "detail": "{ page }"
- }
- ],
- [
- "change",
- {
- "detail": "{ page }"
- }
- ]
- ]
- },
- "PaginationSkeleton": {
- "moduleName": "PaginationSkeleton",
- "props": [],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 158,
- "end": 166,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 169,
- "end": 181,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 184,
- "end": 197,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 200,
- "end": 213,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "PasswordInput": {
- "moduleName": "PasswordInput",
- "props": [
- [
- "size",
- {
- "kind": "let",
- "type": "\"sm\" | \"xl\"",
- "description": "Set the size of the input"
- }
- ],
- [
- "value",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the input value"
- }
- ],
- [
- "type",
- {
- "kind": "let",
- "value": "\"password\"",
- "type": "string",
- "description": "Specify the input type"
- }
- ],
- [
- "placeholder",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the placeholder text"
- }
- ],
- [
- "hidePasswordLabel",
- {
- "kind": "let",
- "value": "\"Hide password\"",
- "type": "string",
- "description": "Specify the hide password label text"
- }
- ],
- [
- "showPasswordLabel",
- {
- "kind": "let",
- "value": "\"Show password\"",
- "type": "string",
- "description": "Specify the show password label text"
- }
- ],
- [
- "tooltipAlignment",
- {
- "kind": "let",
- "type": "\"start\" | \"center\" | \"end\"",
- "description": "Set the alignment of the tooltip relative to the icon"
- }
- ],
- [
- "tooltipPosition",
- {
- "kind": "let",
- "type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
- "description": "Set the position of the tooltip relative to the icon"
- }
- ],
- [
- "light",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to enable the light variant"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the input"
- }
- ],
- [
- "helperText",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the helper text"
- }
- ],
- [
- "labelText",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the label text"
- }
- ],
- [
- "hideLabel",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to visually hide the label text"
- }
- ],
- [
- "invalid",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to indicate an invalid state"
- }
- ],
- [
- "invalidText",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the text for the invalid state"
- }
- ],
- [
- "id",
- {
- "kind": "let",
- "type": "string",
- "description": "Set an id for the input element"
- }
- ],
- [
- "name",
- {
- "kind": "let",
- "type": "string",
- "description": "Specify a name attribute for the input"
- }
- ],
- [
- "ref",
- {
- "kind": "let",
- "value": "null",
- "type": "null | HTMLInputElement",
- "description": "Obtain a reference to the input HTML element"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 2848,
- "end": 2856,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 2859,
- "end": 2871,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 2874,
- "end": 2887,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 2890,
- "end": 2903,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "change",
- {
- "start": 3856,
- "end": 3865,
- "type": "EventHandler",
- "name": "change",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "input",
- {
- "start": 3872,
- "end": 3880,
- "type": "EventHandler",
- "name": "input",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "keydown",
- {
- "start": 3962,
- "end": 3972,
- "type": "EventHandler",
- "name": "keydown",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "focus",
- {
- "start": 3979,
- "end": 3987,
- "type": "EventHandler",
- "name": "focus",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "blur",
- {
- "start": 3994,
- "end": 4001,
- "type": "EventHandler",
- "name": "blur",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "ProgressIndicator": {
- "moduleName": "ProgressIndicator",
- "props": [
- [
- "currentIndex",
- {
- "kind": "let",
- "value": "0",
- "type": "number",
- "description": "Specify the current step index"
- }
- ],
- [
- "vertical",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the vertical variant"
- }
- ],
- [
- "spaceEqually",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to specify whether the progress steps should be split equally in size in the div"
- }
- ],
- [
- "preventChangeOnClick",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to prevent updating `currentIndex`"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [],
- "children": [],
- "default": true,
- "default_value": ""
- }
- ]
- ],
- "forwarded_events": [
- [
- "click",
- {
- "start": 1639,
- "end": 1647,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 1650,
- "end": 1662,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 1665,
- "end": 1678,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 1681,
- "end": 1694,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": [
- [
- "change",
- {
- "detail": "index"
- }
- ]
- ]
- },
- "ProgressIndicatorSkeleton": {
- "moduleName": "ProgressIndicatorSkeleton",
- "props": [
- [
- "vertical",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the vertical variant"
- }
- ],
- [
- "count",
- {
- "kind": "let",
- "value": "4",
- "type": "number",
- "description": "Specify the number of steps to render"
- }
- ]
- ],
- "slots": [],
- "forwarded_events": [
- [
- "click",
- {
- "start": 387,
- "end": 395,
- "type": "EventHandler",
- "name": "click",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseover",
- {
- "start": 398,
- "end": 410,
- "type": "EventHandler",
- "name": "mouseover",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseenter",
- {
- "start": 413,
- "end": 426,
- "type": "EventHandler",
- "name": "mouseenter",
- "modifiers": [],
- "expression": null
- }
- ],
- [
- "mouseleave",
- {
- "start": 429,
- "end": 442,
- "type": "EventHandler",
- "name": "mouseleave",
- "modifiers": [],
- "expression": null
- }
- ]
- ],
- "dispatched_events": []
- },
- "ProgressStep": {
- "moduleName": "ProgressStep",
- "props": [
- [
- "complete",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` for the complete variant"
- }
- ],
- [
- "current",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to use the current variant"
- }
- ],
- [
- "disabled",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to disable the progress step"
- }
- ],
- [
- "invalid",
- {
- "kind": "let",
- "value": "false",
- "type": "boolean",
- "description": "Set to `true` to indicate an invalid state"
- }
- ],
- [
- "description",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the step description"
- }
- ],
- [
- "label",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the step label"
- }
- ],
- [
- "secondaryLabel",
- {
- "kind": "let",
- "value": "\"\"",
- "type": "string",
- "description": "Specify the step secondary label"
- }
- ],
- [
- "id",
- {
- "kind": "let",
- "type": "string",
- "description": "Set an id for the top-level element"
- }
- ]
- ],
- "slots": [
- [
- "default",
- {
- "attributes": [
- {
- "start": 2759,
- "end": 2800,
- "type": "Attribute",
- "name": "props",
- "value": [
- {
- "start": 2766,
- "end": 2799,
- "type": "MustacheTag",
- "expression": {
- "type": "ObjectExpression",
- "start": 2767,
- "end": 2798,
- "loc": {
- "start": {
- "line": 114,
- "column": 18
- },
- "end": {
- "line": 114,
- "column": 49
- }
- },
- "properties": [
- {
- "type": "Property",
- "start": 2769,
- "end": 2796,
- "loc": {
- "start": {
- "line": 114,
- "column": 20
- },
- "end": {
- "line": 114,
- "column": 47
- }
- },
- "method": false,
- "shorthand": false,
- "computed": false,
- "key": {
- "type": "Identifier",
- "start": 2769,
- "end": 2774,
- "loc": {
- "start": {
- "line": 114,
- "column": 20
- },
- "end": {
- "line": 114,
- "column": 25
- }
- },
- "name": "class"
- },
- "value": {
- "type": "Literal",
- "start": 2776,
- "end": 2796,
- "loc": {
- "start": {
- "line": 114,
- "column": 27
- },
- "end": {
- "line": 114,
- "column": 47
- }
- },
- "value": "bx--progress-label",
- "raw": "'bx--progress-label'"
- },
- "kind": "init"
- }
- ]
- }
- }
- ]
- }
- ],
- "children": [
- {
- "start": 2801,
- "end": 2808,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- },
- {
- "start": 2808,
- "end": 2856,
- "type": "Element",
- "name": "p",
- "attributes": [
- {
- "start": 2811,
- "end": 2844,
- "type": "Class",
- "name": "bx--progress-label",
- "modifiers": [],
- "expression": {
- "type": "Literal",
- "start": 2838,
- "end": 2842,
- "loc": {
- "start": {
- "line": 115,
- "column": 36
- },
- "end": {
- "line": 115,
- "column": 40
- }
- },
- "value": true,
- "raw": "true"
- }
- }
- ],
- "children": [
- {
- "start": 2845,
- "end": 2852,
- "type": "MustacheTag",
- "expression": {
- "type": "Identifier",
- "start": 2846,
- "end": 2851,
- "loc": {
- "start": {
- "line": 115,
- "column": 44
- },
- "end": {
- "line": 115,
- "column": 49
- }
- },
- "name": "label"
- }
- }
- ]
- },
- {
- "start": 2856,
- "end": 2861,
- "type": "Text",
- "raw": "\n ",
- "data": "\n "
- }
- ],
- "default": true,
- "default_value": "\n \n{label}
\n\n \n" - } - ] - ], - "forwarded_events": [ - [ - "click", - { - "start": 1911, - "end": 1919, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": null - } - ], - [ - "mouseover", - { - "start": 2015, - "end": 2027, - "type": "EventHandler", - "name": "mouseover", - "modifiers": [], - "expression": null - } - ], - [ - "mouseenter", - { - "start": 2032, - "end": 2045, - "type": "EventHandler", - "name": "mouseenter", - "modifiers": [], - "expression": null - } - ], - [ - "mouseleave", - { - "start": 2050, - "end": 2063, - "type": "EventHandler", - "name": "mouseleave", - "modifiers": [], - "expression": null - } - ], - [ - "keydown", - { - "start": 2068, - "end": 2078, - "type": "EventHandler", - "name": "keydown", - "modifiers": [], - "expression": null - } - ] - ], - "dispatched_events": [] - }, - "RadioButton": { - "moduleName": "RadioButton", - "props": [ - [ - "value", - { - "kind": "let", - "value": "\"\"", - "type": "string", - "description": "Specify the value of the radio button" - } - ], - [ - "checked", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to check the radio button" - } - ], - [ - "disabled", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to disable the radio button" - } - ], - [ - "labelPosition", - { - "kind": "let", - "value": "\"right\"", - "type": "\"right\" | \"left\"", - "description": "Specify the label position" - } - ], - [ - "labelText", - { - "kind": "let", - "value": "\"\"", - "type": "string", - "description": "Specify the label text" - } - ], - [ - "hideLabel", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to visually hide the label text" - } - ], - [ - "id", - { - "kind": "let", - "type": "string", - "description": "Set an id for the input element" - } - ], - [ - "name", - { - "kind": "let", - "value": "\"\"", - "type": "string", - "description": "Specify a name attribute for the checkbox input" - } - ], - [ - "ref", - { - "kind": "let", - "value": "null", - "type": "null | HTMLInputElement", - "description": "Obtain a reference to the input HTML element" - } - ] - ], - "slots": [], - "forwarded_events": [ - [ - "change", - { - "start": 1814, - "end": 1823, - "type": "EventHandler", - "name": "change", - "modifiers": [], - "expression": null - } - ] - ], - "dispatched_events": [] - }, - "RadioButtonGroup": { - "moduleName": "RadioButtonGroup", - "props": [ - [ - "selected", - { - "kind": "let", - "type": "string", - "description": "Set the selected radio button value" - } - ], - [ - "disabled", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to disable the radio buttons" - } - ], - [ - "labelPosition", - { - "kind": "let", - "value": "\"right\"", - "type": "\"right\" | \"left\"", - "description": "Specify the label position" - } - ], - [ - "orientation", - { - "kind": "let", - "value": "\"horizontal\"", - "type": "\"horizontal\" | \"vertical\"", - "description": "Specify the orientation of the radio buttons" - } - ], - [ - "id", - { - "kind": "let", - "type": "string", - "description": "Set an id for the container div element" - } - ] - ], - "slots": [ - [ - "default", - { - "attributes": [], - "children": [], - "default": true, - "default_value": "" - } - ] - ], - "forwarded_events": [ - [ - "click", - { - "start": 1244, - "end": 1252, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": null - } - ], - [ - "mouseover", - { - "start": 1255, - "end": 1267, - "type": "EventHandler", - "name": "mouseover", - "modifiers": [], - "expression": null - } - ], - [ - "mouseenter", - { - "start": 1270, - "end": 1283, - "type": "EventHandler", - "name": "mouseenter", - "modifiers": [], - "expression": null - } - ], - [ - "mouseleave", - { - "start": 1286, - "end": 1299, - "type": "EventHandler", - "name": "mouseleave", - "modifiers": [], - "expression": null - } - ] - ], - "dispatched_events": [ - [ - "change", - { - "detail": "$selectedValue" - } - ] - ] - }, - "RadioButtonSkeleton": { - "moduleName": "RadioButtonSkeleton", - "props": [], - "slots": [], - "forwarded_events": [ - [ - "click", - { - "start": 68, - "end": 76, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": null - } - ], - [ - "mouseover", - { - "start": 79, - "end": 91, - "type": "EventHandler", - "name": "mouseover", - "modifiers": [], - "expression": null - } - ], - [ - "mouseenter", - { - "start": 94, - "end": 107, - "type": "EventHandler", - "name": "mouseenter", - "modifiers": [], - "expression": null - } - ], - [ - "mouseleave", - { - "start": 110, - "end": 123, - "type": "EventHandler", - "name": "mouseleave", - "modifiers": [], - "expression": null - } - ] - ], - "dispatched_events": [] - }, - "RadioTile": { - "moduleName": "RadioTile", - "props": [ - [ - "checked", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to check the tile" - } - ], - [ - "light", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to enable the light variant" - } - ], - [ - "value", - { - "kind": "let", - "value": "\"\"", - "type": "string", - "description": "Specify the value of the radio input" - } - ], - [ - "tabindex", - { - "kind": "let", - "value": "\"0\"", - "type": "string", - "description": "Specify the tabindex" - } - ], - [ - "iconDescription", - { - "kind": "let", - "value": "\"Tile checkmark\"", - "type": "string", - "description": "Specify the ARIA label for the radio tile checkmark icon" - } - ], - [ - "id", - { - "kind": "let", - "type": "string", - "description": "Set an id for the input element" - } - ], - [ - "name", - { - "kind": "let", - "value": "\"\"", - "type": "string", - "description": "Specify a name attribute for the input" - } - ] - ], - "slots": [ - [ - "default", - { - "attributes": [], - "children": [], - "default": true, - "default_value": "" - } - ] - ], - "forwarded_events": [ - [ - "change", - { - "start": 1295, - "end": 1304, - "type": "EventHandler", - "name": "change", - "modifiers": [], - "expression": null - } - ], - [ - "keydown", - { - "start": 1354, - "end": 1364, - "type": "EventHandler", - "name": "keydown", - "modifiers": [], - "expression": null - } - ], - [ - "click", - { - "start": 1678, - "end": 1686, - "type": "EventHandler", - "name": "click", - "modifiers": [], - "expression": null - } - ], - [ - "mouseover", - { - "start": 1689, - "end": 1701, - "type": "EventHandler", - "name": "mouseover", - "modifiers": [], - "expression": null - } - ], - [ - "mouseenter", - { - "start": 1704, - "end": 1717, - "type": "EventHandler", - "name": "mouseenter", - "modifiers": [], - "expression": null - } - ], - [ - "mouseleave", - { - "start": 1720, - "end": 1733, - "type": "EventHandler", - "name": "mouseleave", - "modifiers": [], - "expression": null - } - ] - ], - "dispatched_events": [] - }, - "Row": { - "moduleName": "Row", - "props": [ - [ - "as", - { - "kind": "let", - "value": "false", - "type": "boolean", - "description": "Set to `true` to render a custom HTML element\nProps are destructured as `props` in the default slot (e.g.
+ Source code:
+
Props
+ +{#if component.props.length > 0} +
+
+
+
+ Prop name
+ Type
+ Description
+
+
+
+ {#each component.props.sort((a, b) => {
+ // 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)}
+
+
+ Required
+ {/if}
+
+
+ {#each (prop.type || "").split(" | ") as type, i (type)}
+
+
+ {#if prop.description}
+ {#each prop.description.split("\n") as line}
+
+
+ {/each}
+
+
+
+{:else}
+
+
+ Reactive
+
+
+ {/if}
+ {#if prop.isRequired}
+
+ {#if type.startsWith("HTML")}
+
+ {type}
+
+ {:else if type in typeMap}
+
+ {/each}
+
+ {@html line
+ .replace(/\/g, ">")
+ .replace(/`(.*?)`/g, "
+ {/each}
+ {/if}
+ $1")}.
+
+ Default value
+
+
+ {#if prop.value === undefined}
+ undefined
+ {:else}
+
+ No props.
+{/if} + +Typedefs
+ +{#if component.typedefs.length > 0} +
+ t.ts).join("\n")}
+ />
+
+{:else}
+ No typedefs.
+{/if} + +Slots
+{#if component.slots.length > 0} +No slots.
+{/if} + +Forwarded events
+{#if forwarded_events.length > 0} +No forwarded events.
+{/if} + +Dispatched events
+ +{#if dispatched_events.length > 0} + {@const hasDescription = dispatched_events.find((el) => el.description)} +No dispatched events.
+{/if} + +$$restProps
+ +
+ {#if component.rest_props}
+
+
-
-{component.moduleName}
+ spreads
+ $$restProps
+ to the
+ {#if component.rest_props.type === "Element"}
+ {component.rest_props.name}
+ element.
+ {:else}{component.rest_props.name} component.{/if}
+ {:else}This component does not spread restProps{/if}
+Props
- -{#if component.props.length > 0} -
-
-
-
- Prop name
- Type
- Default value
- Description
-
-
-
- {#each component.props as prop}
-
-
-
-
- {#each prop[1].type.split(' | ') as type, i (type)}
-
-
-
-
- {#each prop[1].description.split('\n') as line}
-
-
- {/each}
-
-
-
-{:else}
-
- {#if type.startsWith('typeof')}
-
- Carbon Svelte icon
-
- {:else if type.startsWith('HTML')}
-
- {type}
-
- {/each}
- {typeMap[type]}
- {:else if type.startsWith('(')}
- {type}
- {:else}
- {prop[1].value}
- {line}.
- {/each}
- No props.
-{/if} -Slots
-{#if component.slots.length > 0} -No slots.
-{/if} - -Forwarded events
-{#if component.forwarded_events.length > 0} -No forwarded events.
-{/if} - -Dispatched events
- -{#if component.dispatched_events.length > 0} -No dispatched events.
-{/if} diff --git a/docs/src/components/Footer.svelte b/docs/src/components/Footer.svelte deleted file mode 100644 index c74fe3b7..00000000 --- a/docs/src/components/Footer.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - - - - diff --git a/docs/src/components/InlineSnippet.svelte b/docs/src/components/InlineSnippet.svelte index de3f4d50..b908e575 100644 --- a/docs/src/components/InlineSnippet.svelte +++ b/docs/src/components/InlineSnippet.svelte @@ -1,22 +1,16 @@ +
+ copy(text)} />
+
+
-
-
-
diff --git a/docs/src/components/Preview.svelte b/docs/src/components/Preview.svelte
index 80e9c01a..14767a46 100644
--- a/docs/src/components/Preview.svelte
+++ b/docs/src/components/Preview.svelte
@@ -4,109 +4,67 @@
export let src = "";
export let framed = false;
- import { CodeSnippet, Button } from "carbon-components-svelte";
- import Launch16 from "carbon-icons-svelte/lib/Launch16";
import copy from "clipboard-copy";
+ import { CodeSnippet, Button } from "carbon-components-svelte";
+ import Launch from "carbon-icons-svelte/lib/Launch.svelte";
import { url } from "@sveltech/routify";
import { theme } from "../store";
$: themedSrcUrl = $url(`${src}?theme=${$theme}`);
-
-
-
- {#if framed}
-
diff --git a/docs/src/components/PreviewTypeScript.svelte b/docs/src/components/PreviewTypeScript.svelte
new file mode 100644
index 00000000..78e0aa21
--- /dev/null
+++ b/docs/src/components/PreviewTypeScript.svelte
@@ -0,0 +1,29 @@
+
+
+{#if type === "multi"}
+
-
- {/if}
-
- Content loaded in an iframe
-
-
-
- {#if framed}
-
- {:else}
-
-
-
- {@html code}
-
-
-
+
+ {@html highlightedCode}
+
+
+{/if}
+
+{#if type === "inline"}
+
+
+
+
+
+
+
-
-
+
+
+
+
+ {title}
+ {#if subtitle} +{subtitle}
+ {/if}
+
-
-
-
-
-
diff --git a/docs/src/global.css b/docs/src/global.css
new file mode 100644
index 00000000..165b2855
--- /dev/null
+++ b/docs/src/global.css
@@ -0,0 +1,278 @@
+html[theme="g90"] .code-override {
+ border: 1px solid var(--cds-ui-03);
+}
+
+.prose > pre,
+.code-override .bx--snippet {
+ /** Docs code snippet is always dark mode */
+ color-scheme: dark;
+ max-width: none;
+}
+
+.prose > pre {
+ padding: 1rem;
+ margin-bottom: 1rem;
+}
+
+.prose > pre,
+.code-override .bx--copy-btn,
+.code-override .bx--snippet,
+.code-override button.bx--btn.bx--snippet-btn--expand {
+ background-color: #262626;
+ color: #f4f4f4;
+}
+
+.code-override .bx--copy-btn:hover,
+.code-override button.bx--btn.bx--snippet-btn--expand:hover {
+ background-color: #393939;
+}
+
+.code-override .bx--snippet__icon {
+ fill: #f4f4f4;
+}
+
+.prose > pre,
+.code-override .bx--snippet-container pre {
+ font-size: var(--cds-code-02-font-size);
+ line-height: var(--cds-code-02-line-height);
+ letter-spacing: var(--cds-code-02-letter-spacing);
+ cursor: text;
+}
+
+.code-override .bx--snippet--multi .bx--snippet-container pre {
+ overflow-x: auto;
+}
+
+/* Addig this to the layout grid fixes overstretching. */
+.fix-overflow {
+ min-width: 0;
+}
+
+.token.tag,
+.token.operator {
+ color: #6ea6ff;
+}
+
+/* Override syntax highlighting for light theme inline code .*/
+[theme="white"] .code-override-inline .token,
+[theme="g10"] .code-override-inline .token {
+ color: var(--cds-text-01, #161616);
+}
+
+/** Gray 80 is the "lighted" dark theme. Ensure the background is dark. */
+[theme="g80"] .code-override-inline {
+ background-color: #262626;
+}
+
+.token.builtin,
+.token.attr-name {
+ color: #3ddbd9; /* teal 30 */
+}
+
+.token.function {
+ color: #9ef0f0;
+}
+
+.token.token.language-javascript,
+.token.attr-value {
+ color: #d4bbff; /* purple 30 */
+}
+
+.token.keyword {
+ color: #bb8eff;
+}
+
+.token.punctuation {
+ color: #a8a8a8; /* gray 40 */
+}
+
+.token.script .token.language-javascript {
+ color: #3ddbd9; /* teal 30 */
+}
+
+.token.string {
+ color: #fa75a6;
+}
+
+.token.boolean {
+ color: #bb8eff;
+}
+
+.token.number {
+ color: #a7f0ba;
+}
+
+.token.comment {
+ color: #bebebe;
+}
+
+.override-tabs a.bx--tabs__nav-link,
+.override-tabs a.bx--tabs__nav-link:focus,
+.override-tabs a.bx--tabs__nav-link:active {
+ width: auto !important;
+}
+
+#select-theme {
+ width: auto;
+}
+
+/*
+ * Main content needs to supersede z-index of SideNav but not that of the Header.
+ * UI Shell Header shares the same z-index.
+ */
+[aria-label="Navigation"] {
+ z-index: calc(8000 + 2);
+}
+
+[aria-label="Navigation"] ~ [data-components] {
+ z-index: calc(8000 + 1);
+}
+
+@media (max-width: 65.98rem) {
+ [aria-label="Navigation"] ~ [data-components] {
+ z-index: 1;
+ }
+}
+
+.prose > p > .bx--link {
+ font-size: inherit;
+ text-decoration: underline;
+}
+
+.prose .toc {
+ margin-bottom: var(--cds-layout-01);
+}
+
+.table {
+ position: sticky;
+ max-height: calc(100vh - 3rem);
+ top: 3rem;
+ margin-top: -3rem;
+ padding-top: var(--cds-spacing-05);
+ padding-bottom: var(--cds-spacing-05);
+ padding-left: var(--cds-spacing-08);
+ overflow-y: auto;
+}
+
+[data-components] {
+ position: relative;
+ display: flex;
+}
+
+[data-components] .bx--grid {
+ width: 100%;
+}
+
+@media (max-width: 1056px) {
+ .table {
+ display: none;
+ }
+}
+
+.preview-viewer > .bx--aspect-ratio,
+.preview-viewer [data-outline] {
+ outline: 1px solid var(--cds-interactive-04);
+}
+
+[data-outline] {
+ position: relative;
+}
+
+[data-outline] ~ [data-outline] {
+ margin-top: var(--cds-spacing-08);
+}
+
+#select-theme {
+ width: auto;
+}
+
+.prose > p > .bx--link {
+ font-size: inherit;
+}
+
+.prose .toc {
+ margin-bottom: var(--cds-layout-01);
+}
+
+.code-01 {
+ font-size: var(--cds-code-01-font-size);
+ font-weight: var(--cds-code-01-font-weight);
+ letter-spacing: var(--cds-code-01-letter-spacing);
+ line-height: var(--cds-code-01-line-height);
+}
+
+.body-short-01 {
+ font-size: var(--cds-body-short-01-font-size);
+ font-weight: var(--cds-body-short-01-font-weight);
+ letter-spacing: var(--cds-body-short-01-letter-spacing);
+ line-height: var(--cds-body-short-01-line-height);
+}
+
+.bx--col > h1 {
+ font-size: var(--cds-expressive-heading-05-font-size);
+ font-weight: var(--cds-expressive-heading-05-font-weight);
+ letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+ line-height: var(--cds-expressive-heading-05-line-height);
+ margin-bottom: var(--cds-layout-01);
+}
+
+.big-paragraph {
+ font-size: var(--cds-expressive-heading-03-font-size);
+ font-weight: var(--cds-expressive-heading-03-font-weight);
+ letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+ line-height: var(--cds-expressive-heading-03-line-height);
+ margin-top: var(--cds-layout-03);
+ margin-bottom: var(--cds-layout-06);
+}
+
+.big-link,
+.bx--col > .big-paragraph > code {
+ font-size: var(--cds-expressive-heading-03-font-size);
+ font-weight: var(--cds-expressive-heading-03-font-weight);
+ letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+ line-height: var(--cds-expressive-heading-03-line-height);
+}
+
+.bx--col > p {
+ max-width: 44rem;
+}
+
+.bx--col > p > code {
+ font-size: var(--cds-code-02-font-size);
+ font-weight: var(--cds-code-02-font-weight);
+ line-height: var(--cds-code-02-line-height);
+ letter-spacing: var(--cds-code-02-letter-spacing);
+ background-color: var(--cds-ui-03);
+ border-radius: 0.25rem;
+ padding: 0 var(--cds-spacing-02);
+}
+
+[class*="bx--col"] > h2,
+.bx--tab-content > h2 {
+ font-size: var(--cds-expressive-heading-04-font-size);
+ font-weight: var(--cds-expressive-heading-04-font-weight);
+ letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
+ line-height: var(--cds-expressive-heading-04-line-height);
+ padding-top: var(--cds-layout-03);
+ margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h4 {
+ font-size: var(--cds-expressive-heading-02-font-size);
+ font-weight: var(--cds-expressive-heading-02-font-weight);
+ letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
+ line-height: var(--cds-expressive-heading-02-line-height);
+ padding-top: var(--cds-layout-04);
+ margin-bottom: var(--cds-layout-01);
+}
+
+.bx--col > h2,
+.bx--tab-content > h2,
+.bx--col > h3,
+.bx--col > h4 {
+ scroll-margin-top: 3rem;
+}
+
+.bx--col > p {
+ margin-bottom: var(--cds-layout-02);
+}
diff --git a/docs/src/index.js b/docs/src/index.js
index aba70f6a..67d5f68b 100644
--- a/docs/src/index.js
+++ b/docs/src/index.js
@@ -1,4 +1,6 @@
import App from "./App.svelte";
+import "../../css/all.css";
+import "./global.css";
const app = new App({ target: document.body });
diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 9d323448..77844c98 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -12,111 +12,69 @@
Tabs,
Tab,
TabContent,
- StructuredList,
- StructuredListHead,
- StructuredListRow,
- StructuredListCell,
- StructuredListBody,
} from "carbon-components-svelte";
- import Code16 from "carbon-icons-svelte/lib/Code16";
+ import Code from "carbon-icons-svelte/lib/Code.svelte";
import { page, metatags } from "@sveltech/routify";
import { onMount } from "svelte";
import { theme } from "../store";
import ComponentApi from "../components/ComponentApi.svelte";
- import API from "../PUBLIC_API.json";
+ import COMPONENT_API from "../COMPONENT_API.json";
export let component = $page.title;
export let components = [component];
- export let source = "";
export let unreleased = false;
export let unstable = false;
metatags.title = $page.title;
- $: api = components.map((_) => API.components[_]).filter(Boolean);
- $: multiple = api.length > 1;
+ // TODO: `find` is not supported in IE
+ $: api_components = components.map((i) =>
+ COMPONENT_API.components.find((_) => _.moduleName === i),
+ );
+ $: multiple = api_components.length > 1;
onMount(() => {
- const currentTheme = window.location.search.split("?theme=")[1];
+ const searchParams = new URLSearchParams(window.location.search);
+ const current_theme = searchParams.get("theme");
- if (["white", "g10", "g90", "g100"].includes(currentTheme)) {
- theme.set(currentTheme);
+ if (["white", "g10", "g80", "g90", "g100"].includes(current_theme)) {
+ theme.set(current_theme);
}
});
+ function formatSourceURL(multiple) {
+ const filePath = api_components[0]?.filePath ?? "";
+
+ if (multiple) {
+ /**
+ * Link to folder for doc with multiple components.
+ * @example "src/Breadcrumb"
+ */
+ return filePath.split("/").slice(0, -1).join("/");
+ }
+
+ /**
+ * Else, link to the component source.
+ * @example "src/Tile/ClickableTile.svelte"
+ */
+ return filePath;
+ }
+
// TODO: [refactor] read from package.json value
- $: sourceCode = `https://github.com/IBM/carbon-components-svelte/tree/master/src/${
- source || `${$page.title}/${$page.title}.svelte`
- }`;
+ $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
+ multiple,
+ )}`;
-
+
-
-
-
-
- {title}
- {#if subtitle} -{subtitle}
- {/if}
- {component}
@@ -125,10 +83,11 @@ id="select-theme" inline labelText="Theme" - bind:selected="{$theme}" + bind:selected={$theme} >
-
- Table of Contents
+Examples
Usage
Component API
- Component API documentation is + API documentation is - auto-generated + auto-generated by sveld. - from a build script.
- {#each api as component, i (component.moduleName)}
+ {#each api_components as component (component.moduleName)}
-
{/each}
-
Table of Contents
+Examples
{component}
- -
-
- Table of Contents
-
-
- Table of Contents
-404
Page not found.
- Return home
+ Return home
+
+
-
- Carbon Components Svelte
- v{process.env.VERSION || ''}
+
+ Carbon Components Svelte v{process.env.VERSION || ""}
-
+
+
Natural Language Classifier
AI / Machine Learning
- Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.
+
+
Natural Language Understanding
AI / Machine Learning
- Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.
+
+
Language Translator
AI / Machine Learning
- Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.
+ Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
+
+
+ Provide an iconDescription for accessibility. This text will be used as the button's tooltip and screen reader label.
+
+
+ Use expressive styles with default, "lg", or "xl" button sizes.
+
++ + + + + +
+ + + + + + +## Skeleton + +Set `skeleton` to show a loading state. + + + - \ No newline at end of file + + +## Programmatic focus + +Bind to the `ref` prop to access the button element for programmatic focus. + +
+ When using bind:group, bind:checked only supports one-way binding.
+
++
Every
+items object must have a unique "id" property.
-
-
+ This component is keyed for performance.
+
+ Every headers object must have a unique "key" property.
+
+Every rows object must have a unique "id" property.
+ Custom column widths do not work with a sticky header.
+
-
+
- {JSON.stringify(row, null, 2)}
-
- {JSON.stringify(row, null, 2)}
+ {JSON.stringify(row, null, 2)}
+ {JSON.stringify(row, null, 2)}
+ {JSON.stringify(row, null, 2)}
+
-
+
- {JSON.stringify(row, null, 2)}
-
- {JSON.stringify(row, null, 2)}
+
+ If using Rollup, specify inlineDynamicImports: true in your rollup.config.js.
+
+Every
+
+
+## Default
+
+Use the `Dropdown` component to create a select input with a dropdown menu. Each item
+must have a unique `id` property.
+
+items object must have a unique "id" property.
+
+
+
+
+ Above the fold content here
+
+ +
+
+ More above the fold content
+
+ Below the fold content here
+Above the fold content here
Below the fold content here
Above the fold content here
- Below the fold content here
+ Above the fold content here
+ Below the fold content here
Above the fold content here
- Below the fold content here
-Above the fold content here
+ Below the fold content here
+
+
+## With icon labels
+
+Customize the expand/collapse button labels using the `tileExpandedLabel` and
+`tileCollapsedLabel` props.
+
+Above the fold content here
+ Below the fold content here
+Below the fold content here
+
- Learn more
-
+## Prevent default close behavior
+
+The component is controlled, allowing you to prevent the default close behavior using `e.preventDefault()`.
+
+
Visit the
- Carbon Design System.
+
+ Carbon Design System
+ .
-### Disabled
+## Link with icon
-Carbon Design System
+Add icons to links for better visual context. Note that `inline` must be `false` when using icons.
-### Visited styles
+
+ Visit the
+
+ Carbon Design System
+ .
+
-Carbon Design System
\ No newline at end of file
+## Size variants
+
+The component supports different sizes to match your design needs:
+
+
+ Large link
+
++ + Default link + +
+ + Small link + + +## Disabled state + +Disabled links render as plain text while maintaining accessibility. + + + Disabled link + + +## Visited styles + +Show visited state styling for links. + + + Visited link + \ No newline at end of file diff --git a/docs/src/pages/components/Loading.svx b/docs/src/pages/components/Loading.svx index 7a1870b1..c064043f 100644 --- a/docs/src/pages/components/Loading.svx +++ b/docs/src/pages/components/Loading.svx @@ -1,16 +1,28 @@ +--- +components: ["Loading"] +--- + -### Default (with overlay) +The `Loading` component provides a full-screen or inline loading indicator. It's ideal for showing progress during page loads or data fetching operations. + +## Default + +Display a loading indicator with a semi-transparent overlay that covers the entire viewport.
Every
+items object must have a unique "id" property.
+ Consider using the RecursiveList component for rendering tree structured data.
+
+Custom trigger
+ Parent
+
+
+
+
+## Relative position
+
+Set `relative` to `true` to position the popover relative to its parent element.
+
+Content
+
+ Parent
+
+
+
+
+## Close on outside click
+
+Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.
+
+Content
+
+ Parent
+ {console.log('on:click:outside')}}>
+
+
+
+## Popover alignment
+
+Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
+
+The default `align` value is `"top"`.
+
+Content
+
+ Parent
+
+
+
+top-left
+
+ Parent
+
+
+
+top-right
+
+ Parent
+
+
+
+bottom
+
+ Parent
+
+
+
+bottom-left
+
+ Parent
+
+
+
+bottom-right
+
+ Parent
+
+
+
+left
+
+ Parent
+
+
+
+left-bottom
+
+ Parent
+
+
+
+left-right
+
+ Parent
+
+
+
+right
+
+ Parent
+
+
+
+right-bottom
+
+ Parent
+
+
+
+
+## With caret
+
+Add a caret indicator to the popover using the `caret` prop.
+
+right-top
+
+ Parent
+
+
+
+
+## Custom caret alignment
+
+By default, the caret is aligned "top". Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
+
+Content
+
+ Parent
+
+
+
+
+## Light variant
+
+Enable the light variant for use on dark backgrounds.
+
+Content
+
+ Parent
+
+
+
+
+## High contrast variant
+
+Enable the high contrast variant for improved visibility.
+
+Content
+
+ Parent
+
+
+
+
+## External element
+
+Use the `open` prop to manage state with an external element, like a button.
+
+Content
+
+ Storage tier (disk)
+
+
+
+ + Storage tiers may vary based on geolocation. +
+
+ In version 0.86.0, the children prop was renamed to nodes for Svelte 5 compatibility.
+
+
+ HTML content provided via the
+html prop is not sanitized.
+