diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
new file mode 100644
index 00000000..c6a6e6db
--- /dev/null
+++ b/COMPONENT_INDEX.md
@@ -0,0 +1,5167 @@
+# Component Index
+
+> 143 components exported from carbon-components-svelte 0.9.4
+
+- Accordion
+ - [AccordionSkeleton](#accordionskeleton)
+ - [Accordion](#accordion)
+ - [AccordionItem](#accordionitem)
+- Breadcrumb
+ - [BreadcrumbSkeleton](#breadcrumbskeleton)
+ - [Breadcrumb](#breadcrumb)
+ - [BreadcrumbItem](#breadcrumbitem)
+- Button
+ - [ButtonSkeleton](#buttonskeleton)
+ - [Button](#button)
+ - [ButtonSet](#buttonset)
+- Checkbox
+ - [CheckboxSkeleton](#checkboxskeleton)
+ - [Checkbox](#checkbox)
+- CodeSnippet
+ - [CodeSnippetSkeleton](#codesnippetskeleton)
+ - [CodeSnippet](#codesnippet)
+- [ComboBox](#combobox)
+- ComposedModal
+ - [ComposedModal](#composedmodal)
+ - [ModalBody](#modalbody)
+ - [ModalFooter](#modalfooter)
+ - [ModalHeader](#modalheader)
+- ContentSwitcher
+ - [ContentSwitcher](#contentswitcher)
+ - [Switch](#switch)
+- [Copy](#copy)
+- [CopyButton](#copybutton)
+- DataTable
+ - [DataTable](#datatable)
+ - [Table](#table)
+ - [TableBody](#tablebody)
+ - [TableCell](#tablecell)
+ - [TableContainer](#tablecontainer)
+ - [TableHead](#tablehead)
+ - [TableHeader](#tableheader)
+ - [TableRow](#tablerow)
+- [DataTableSkeleton](#datatableskeleton)
+- DatePicker
+ - [DatePicker](#datepicker)
+ - [DatePickerInput](#datepickerinput)
+- Dropdown
+ - [DropdownSkeleton](#dropdownskeleton)
+ - [Dropdown](#dropdown)
+- FileUploader
+ - [FileUploader](#fileuploader)
+ - [FileUploaderButton](#fileuploaderbutton)
+ - [FileUploaderDropContainer](#fileuploaderdropcontainer)
+ - [FileUploaderItem](#fileuploaderitem)
+ - [Filename](#filename)
+- [Form](#form)
+- [FormGroup](#formgroup)
+- [FormItem](#formitem)
+- [FormLabel](#formlabel)
+- Grid
+ - [Column](#column)
+ - [Grid](#grid)
+ - [Row](#row)
+- Icon
+ - [IconSkeleton](#iconskeleton)
+ - [Icon](#icon)
+- [InlineLoading](#inlineloading)
+- [Link](#link)
+- ListBox
+ - [ListBox](#listbox)
+ - [ListBoxField](#listboxfield)
+ - [ListBoxMenu](#listboxmenu)
+ - [ListBoxMenuIcon](#listboxmenuicon)
+ - [ListBoxMenuItem](#listboxmenuitem)
+ - [ListBoxSelection](#listboxselection)
+- [ListItem](#listitem)
+- [Loading](#loading)
+- [Modal](#modal)
+- [MultiSelect](#multiselect)
+- Notification
+ - [InlineNotification](#inlinenotification)
+ - [NotificationActionButton](#notificationactionbutton)
+ - [NotificationButton](#notificationbutton)
+ - [NotificationIcon](#notificationicon)
+ - [NotificationTextDetails](#notificationtextdetails)
+ - [ToastNotification](#toastnotification)
+- NumberInput
+ - [NumberInputSkeleton](#numberinputskeleton)
+ - [NumberInput](#numberinput)
+- [OrderedList](#orderedlist)
+- OverflowMenu
+ - [OverflowMenu](#overflowmenu)
+ - [OverflowMenuItem](#overflowmenuitem)
+- Pagination
+ - [PaginationSkeleton](#paginationskeleton)
+ - [Pagination](#pagination)
+- [PaginationNav](#paginationnav)
+- ProgressIndicator
+ - [ProgressIndicatorSkeleton](#progressindicatorskeleton)
+ - [ProgressIndicator](#progressindicator)
+ - [ProgressStep](#progressstep)
+- RadioButton
+ - [RadioButtonSkeleton](#radiobuttonskeleton)
+ - [RadioButton](#radiobutton)
+- [RadioButtonGroup](#radiobuttongroup)
+- Search
+ - [SearchSkeleton](#searchskeleton)
+ - [Search](#search)
+- Select
+ - [SelectSkeleton](#selectskeleton)
+ - [Select](#select)
+ - [SelectItem](#selectitem)
+ - [SelectItemGroup](#selectitemgroup)
+- [SkeletonPlaceholder](#skeletonplaceholder)
+- [SkeletonText](#skeletontext)
+- Slider
+ - [SliderSkeleton](#sliderskeleton)
+ - [Slider](#slider)
+- StructuredList
+ - [StructuredListSkeleton](#structuredlistskeleton)
+ - [StructuredList](#structuredlist)
+ - [StructuredListBody](#structuredlistbody)
+ - [StructuredListCell](#structuredlistcell)
+ - [StructuredListHead](#structuredlisthead)
+ - [StructuredListInput](#structuredlistinput)
+ - [StructuredListRow](#structuredlistrow)
+- Tabs
+ - [Tab](#tab)
+ - [TabContent](#tabcontent)
+ - [Tabs](#tabs)
+ - [TabsSkeleton](#tabsskeleton)
+- Tag
+ - [TagSkeleton](#tagskeleton)
+ - [Tag](#tag)
+- TextArea
+ - [TextAreaSkeleton](#textareaskeleton)
+ - [TextArea](#textarea)
+- TextInput
+ - [PasswordInput](#passwordinput)
+ - [TextInputSkeleton](#textinputskeleton)
+ - [TextInput](#textinput)
+- Tile
+ - [ClickableTile](#clickabletile)
+ - [ExpandableTile](#expandabletile)
+ - [RadioTile](#radiotile)
+ - [SelectableTile](#selectabletile)
+ - [Tile](#tile)
+ - [TileGroup](#tilegroup)
+- TimePicker
+ - [TimePicker](#timepicker)
+ - [TimePickerSelect](#timepickerselect)
+- Toggle
+ - [ToggleSkeleton](#toggleskeleton)
+ - [Toggle](#toggle)
+- ToggleSmall
+ - [ToggleSmallSkeleton](#togglesmallskeleton)
+ - [ToggleSmall](#togglesmall)
+- [Tooltip](#tooltip)
+- [TooltipDefinition](#tooltipdefinition)
+- [TooltipIcon](#tooltipicon)
+- UIShell
+ - [Content](#content)
+ - [Header](#header)
+ - [HeaderAction](#headeraction)
+ - [HeaderActionLink](#headeractionlink)
+ - [HeaderActionSearch](#headeractionsearch)
+ - [HeaderNav](#headernav)
+ - [HeaderNavItem](#headernavitem)
+ - [HeaderNavMenu](#headernavmenu)
+ - [HeaderPanelDivider](#headerpaneldivider)
+ - [HeaderPanelLink](#headerpanellink)
+ - [HeaderPanelLinks](#headerpanellinks)
+ - [HeaderUtilities](#headerutilities)
+ - [SideNav](#sidenav)
+ - [SideNavItems](#sidenavitems)
+ - [SideNavLink](#sidenavlink)
+ - [SideNavMenu](#sidenavmenu)
+ - [SideNavMenuItem](#sidenavmenuitem)
+ - [SkipToContent](#skiptocontent)
+- [UnorderedList](#unorderedlist)
+
+---
+
+## Accordion
+
+### Import path
+
+```js
+import { Accordion } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :-------------------------------- | :------------ |
+| align | "start" | "end" | "end" |
+| skeleton | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## AccordionItem
+
+### Import path
+
+```js
+import { AccordionItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------- | :---------------- |
+| title | string | "title" |
+| open | boolean | false |
+| iconDescription | string | "Expand/Collapse" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:animationend`
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## AccordionSkeleton
+
+### Import path
+
+```js
+import { AccordionSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| count | number | 4 |
+| open | boolean | true |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Breadcrumb
+
+### Import path
+
+```js
+import { Breadcrumb } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------- | :------------ |
+| noTrailingSlash | boolean | false |
+| skeleton | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## BreadcrumbItem
+
+### Import path
+
+```js
+import { BreadcrumbItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :------------------- | :------------ |
+| href | string | -- |
+| isCurrentPage | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## BreadcrumbSkeleton
+
+### Import path
+
+```js
+import { BreadcrumbSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------- | :------------ |
+| noTrailingSlash | boolean | false |
+| count | number | 3 |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Button
+
+### Import path
+
+```js
+import { Button } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :----------------------------------------------------------------------------------------- | :------------ |
+| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
+| size | "default" | "field" | "small" | "default" |
+| hasIconOnly | boolean | false |
+| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- |
+| iconDescription | string | -- |
+| tooltipAlignment | "start" | "center" | "end" | -- |
+| tooltipPosition | "top" | "right" | "bottom" | "left" | -- |
+| as | boolean | false |
+| skeleton | boolean | false |
+| disabled | boolean | false |
+| href | string | -- |
+| tabindex | string | "0" |
+| type | string | "button" |
+| ref | null | HTMLAnchorElement | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ButtonSet
+
+### Import path
+
+```js
+import { ButtonSet } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ButtonSkeleton
+
+### Import path
+
+```js
+import { ButtonSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| href | string | -- |
+| small | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Checkbox
+
+### Import path
+
+```js
+import { Checkbox } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :---------------------------------------- | :------------ |
+| checked | boolean | false |
+| indeterminate | boolean | false |
+| skeleton | boolean | false |
+| readonly | boolean | false |
+| disabled | boolean | false |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| name | string | "" |
+| title | string | -- |
+| id | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+
+### Dispatched events
+
+- `on:check`
+
+---
+
+## CheckboxSkeleton
+
+### Import path
+
+```js
+import { CheckboxSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ClickableTile
+
+### Import path
+
+```js
+import { ClickableTile } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| clicked | boolean | false |
+| light | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:keydown`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## CodeSnippet
+
+### Import path
+
+```js
+import { CodeSnippet } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------------- | :--------------------------------------------------- | :------------ |
+| type | "single" | "inline" | "multi" | "single" |
+| code | string | -- |
+| expanded | boolean | false |
+| hideCopyButton | boolean | false |
+| light | boolean | false |
+| skeleton | boolean | false |
+| copyButtonDescription | string | -- |
+| copyLabel | string | -- |
+| feedback | string | "Copied!" |
+| feedbackTimeout | number | 2000 |
+| showLessText | string | "Show less" |
+| showMoreText | string | "Show more" |
+| showMoreLess | boolean | false |
+| id | string | -- |
+| ref | null | HTMLPreElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:animationend`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## CodeSnippetSkeleton
+
+### Import path
+
+```js
+import { CodeSnippetSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :--------------------------------------------------- | :------------ |
+| type | "single" | "inline" | "multi" | "single" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Column
+
+### Import path
+
+```js
+import { Column } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `Column` type definitions
+
+type ColumnSize = boolean | number;
+
+interface ColumnSizeDescriptor {
+ span?: ColumnSize;
+ offset: number;
+}
+
+type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
+```
+
+| Prop name | Type | Default value |
+| :------------ | :------------------------------------------------------------------------------------------------- | :------------ |
+| as | boolean | false |
+| noGutter | boolean | false |
+| noGutterLeft | boolean | false |
+| noGutterRight | boolean | false |
+| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- |
+| sm | ColumnBreakpoint | -- |
+| md | ColumnBreakpoint | -- |
+| lg | ColumnBreakpoint | -- |
+| xlg | ColumnBreakpoint | -- |
+| max | ColumnBreakpoint | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ComboBox
+
+### Import path
+
+```js
+import { ComboBox } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `ComboBox` type definitions
+
+interface ComboBoxItem {
+ id: string;
+ text: string;
+}
+```
+
+| Prop name | Type | Default value |
+| :--------------- | :---------------------------------------------------------- | :------------ |
+| items | ComboBoxItem[] | -- |
+| itemToString | (item: ComboBoxItem) => string | -- |
+| selectedIndex | number | -- |
+| value | string | "" |
+| size | "sm" | "xl" | -- |
+| disabled | boolean | false |
+| titleText | string | "" |
+| placeholder | string | "" |
+| helperText | string | "" |
+| invalidText | string | "" |
+| invalid | boolean | false |
+| light | boolean | false |
+| open | boolean | false |
+| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- |
+| translateWithId | (id: any) => string | -- |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:keydown`
+- `on:focus`
+- `on:blur`
+- `on:clear`
+
+### Dispatched events
+
+- `on:select`
+
+---
+
+## ComposedModal
+
+### Import path
+
+```js
+import { ComposedModal } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------------- | :---------------------------------------- | :--------------------------- |
+| size | "xs" | "sm" | "lg" | -- |
+| open | boolean | false |
+| danger | boolean | false |
+| containerClass | string | "" |
+| selectorPrimaryFocus | string | "[data-modal-primary-focus]" |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:transitionend`
+
+### Dispatched events
+
+- `on:submit`
+- `on:close`
+- `on:open`
+
+---
+
+## Content
+
+### Import path
+
+```js
+import { Content } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------- |
+| id | string | "main-content" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ContentSwitcher
+
+### Import path
+
+```js
+import { ContentSwitcher } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :------------------- | :------------ |
+| selectedIndex | number | 0 |
+| light | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## Copy
+
+### Import path
+
+```js
+import { Copy } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :----------------------------------------- | :------------ |
+| feedback | string | "Copied!" |
+| feedbackTimeout | number | 2000 |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:animationend`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## CopyButton
+
+### Import path
+
+```js
+import { CopyButton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------ | :------------------ |
+| iconDescription | string | "Copy to clipboard" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:animationend`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## DataTable
+
+### Import path
+
+```js
+import { DataTable } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :-------------------------------------------------- | :------------ |
+| headers | {key: string; value: string;} | -- |
+| rows | Object[] | -- |
+| size | "compact" | "short" | "tall" | -- |
+| title | string | "" |
+| description | string | "" |
+| zebra | boolean | false |
+| sortable | boolean | false |
+| stickyHeader | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:click`
+- `on:click:header`
+- `on:click:row`
+- `on:click:cell`
+
+---
+
+## DataTableSkeleton
+
+### Import path
+
+```js
+import { DataTableSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :-------------------- | :------------ |
+| columns | number | 5 |
+| rows | number | 5 |
+| compact | boolean | false |
+| zebra | boolean | false |
+| headers | string[] | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## DatePicker
+
+### Import path
+
+```js
+import { DatePicker } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------- | :--------------------------------------------------- | :------------ |
+| datePickerType | "simple" | "single" | "range" | "simple" |
+| value | string | "" |
+| appendTo | HTMLElement | -- |
+| dateFormat | string | "m/d/Y" |
+| maxDate | null | string | Date | null |
+| minDate | null | string | Date | null |
+| locale | string | "en" |
+| short | boolean | false |
+| light | boolean | false |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## DatePickerInput
+
+### Import path
+
+```js
+import { DatePickerInput } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :---------------------------------------- | :----------------------------- |
+| size | "sm" | "xl" | -- |
+| type | string | "text" |
+| placeholder | string | "" |
+| pattern | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" |
+| disabled | boolean | false |
+| iconDescription | string | "" |
+| id | string | -- |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| name | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:input`
+- `on:keydown`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Dropdown
+
+### Import path
+
+```js
+import { Dropdown } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `Dropdown` type definitions
+
+type DropdownItemId = string;
+
+type DropdownItemText = string;
+
+interface DropdownItem {
+ id: DropdownItemId;
+ text: DropdownItemText;
+}
+```
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------------------------------ | :------------ |
+| items | DropdownItem[] | -- |
+| itemToString | (item: DropdownItem) => string | -- |
+| selectedIndex | number | -- |
+| type | "default" | "inline" | "default" |
+| size | "sm" | "lg" | "xl" | -- |
+| open | boolean | false |
+| inline | boolean | false |
+| light | boolean | false |
+| disabled | boolean | false |
+| titleText | string | "" |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| helperText | string | "" |
+| label | string | -- |
+| translateWithId | (id: any) => string | -- |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## DropdownSkeleton
+
+### Import path
+
+```js
+import { DropdownSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| inline | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ExpandableTile
+
+### Import path
+
+```js
+import { ExpandableTile } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------------- | :----------------------------------- | :-------------------------- |
+| expanded | boolean | false |
+| light | boolean | false |
+| tileMaxHeight | number | 0 |
+| tilePadding | number | 0 |
+| tileCollapsedIconText | string | "Interact to expand Tile" |
+| tileExpandedIconText | string | "Interact to collapse Tile" |
+| tabindex | string | "0" |
+| id | string | -- |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+- `...`
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:keypress`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## FileUploader
+
+### Import path
+
+```js
+import { FileUploader } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- |
+| status | "uploading" | "edit" | "complete" | "uploading" |
+| accept | string[] | -- |
+| files | string[] | -- |
+| multiple | boolean | false |
+| clearFiles (`constant`) | () => any | -- |
+| labelDescription | string | "" |
+| labelTitle | string | "" |
+| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
+| buttonLabel | string | "" |
+| iconDescription | string | "Provide icon description" |
+| name | string | "" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:keydown`
+
+### Dispatched events
+
+- `on:add`
+- `on:remove`
+
+---
+
+## FileUploaderButton
+
+### Import path
+
+```js
+import { FileUploaderButton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------------ | :----------------------------------------------------------------------------------------- | :------------ |
+| accept | string[] | -- |
+| multiple | boolean | false |
+| disabled | boolean | false |
+| disableLabelChanges | boolean | false |
+| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
+| labelText | string | "Add file" |
+| role | string | "button" |
+| tabindex | string | "0" |
+| id | string | -- |
+| name | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:keydown`
+- `on:change`
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## FileUploaderDropContainer
+
+### Import path
+
+```js
+import { FileUploaderDropContainer } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `FileUploaderDropContainer` type definitions
+
+type Files = string[];
+```
+
+| Prop name | Type | Default value |
+| :------------ | :---------------------------------------- | :------------ |
+| accept | string[] | -- |
+| multiple | boolean | false |
+| validateFiles | (files: Files) => Files | -- |
+| labelText | string | "Add file" |
+| role | string | "button" |
+| disabled | boolean | false |
+| tabindex | string | "0" |
+| id | string | -- |
+| name | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### 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";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------------------------------------------- | :------------ |
+| status | "uploading" | "edit" | "complete" | "uploading" |
+| iconDescription | string | "" |
+| invalid | boolean | false |
+| errorSubject | string | "" |
+| errorBody | string | "" |
+| id | string | -- |
+| name | string | "" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:delete`
+
+---
+
+## Filename
+
+### Import path
+
+```js
+import { Filename } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------------------------------------------- | :------------ |
+| status | "uploading" | "edit" | "complete" | "uploading" |
+| iconDescription | string | "" |
+| invalid | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Form
+
+### Import path
+
+```js
+import { Form } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:submit`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## FormGroup
+
+### Import path
+
+```js
+import { FormGroup } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :------------------- | :------------ |
+| invalid | boolean | false |
+| message | boolean | false |
+| messageText | string | "" |
+| legendText | string | "" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## FormItem
+
+### Import path
+
+```js
+import { FormItem } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## FormLabel
+
+### Import path
+
+```js
+import { FormLabel } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :------------ | :------------------- | :------------ |
+| as | boolean | false |
+| condensed | boolean | false |
+| narrow | boolean | false |
+| fullWidth | boolean | false |
+| noGutter | boolean | false |
+| noGutterLeft | boolean | false |
+| noGutterRight | boolean | false |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :---------------- | :------------------- | :------------ |
+| expandedByDefault | boolean | true |
+| isSideNavOpen | boolean | false |
+| uiShellAriaLabel | string | -- |
+| href | string | -- |
+| company | string | -- |
+| platformName | string | -- |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ |
+| isOpen | boolean | false |
+| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- |
+| text | string | -- |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+- `on:close`
+
+---
+
+## HeaderActionLink
+
+### Import path
+
+```js
+import { HeaderActionLink } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ |
+| linkIsActive | boolean | false |
+| href | string | -- |
+| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- |
+
+### 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 |
+| :------------- | :------------------- | :------------ |
+| searchIsActive | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:focusInputSearch`
+- `on:focusOutInputSearch`
+- `on:inputSearch`
+
+---
+
+## HeaderNav
+
+### Import path
+
+```js
+import { HeaderNav } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| ariaLabel | string | -- |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :-------- | :------------------ | :------------ |
+| href | string | -- |
+| text | string | -- |
+
+### 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 |
+| :-------------- | :------------------- | :---------------- |
+| expanded | boolean | false |
+| href | string | "/" |
+| text | string | -- |
+| iconDescription | string | "Expand/Collapse" |
+
+### Slots
+
+- `...`
+
+### 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
+
+- `...`
+
+### 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 |
+| :-------- | :------------------ | :------------ |
+| href | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## HeaderPanelLinks
+
+### Import path
+
+```js
+import { HeaderPanelLinks } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### 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
+
+- `...`
+
+### 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 |
+| :-------- | :------------------------------------------------------------------ | :------------ |
+| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- |
+| skeleton | boolean | false |
+
+### 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 |
+| :-------- | :------------------ | :------------ |
+| size | number | 16 |
+
+### 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 |
+| :-------------- | :----------------------------------------------------------------------- | :------------ |
+| status | "active" | "inactive" | "finished" | "error" | "active" |
+| description | string | -- |
+| iconDescription | string | -- |
+| successDelay | number | 1500 |
+
+### 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 |
+| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| notificationType | "toast" | "inline" | "inline" |
+| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
+| lowContrast | boolean | false |
+| role | string | "alert" |
+| title | string | "Title" |
+| subtitle | string | "" |
+| hideCloseButton | boolean | false |
+| iconDescription | string | "Closes notification" |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :-------- | :--------------------------------------------------------------------- | :------------ |
+| inline | boolean | false |
+| disabled | boolean | false |
+| ref | null | HTMLAnchorElement | HTMLParagraphElement | null |
+
+### Slots
+
+- `...`
+
+### 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 |
+| :---------- | :------------------------------------- | :------------ |
+| size | "sm" | "xl" | -- |
+| type | "default" | "inline" | "default" |
+| open | boolean | false |
+| light | boolean | false |
+| disabled | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:keydown`
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ListBoxField
+
+### Import path
+
+```js
+import { ListBoxField } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `ListBoxField` type definitions
+
+type ListBoxFieldTranslationId = "close" | "open";
+```
+
+| Prop name | Type | Default value |
+| :-------------------------- | :----------------------------------------------------- | :------------------------------- |
+| disabled | boolean | false |
+| role | string | "combobox" |
+| tabindex | string | "-1" |
+| translationIds (`constant`) | { close: "close"; open: "open"; } | { close: "close", open: "open" } |
+| translateWithId | (id: ListBoxFieldTranslationId) => string | -- |
+| id | string | -- |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+- `...`
+
+### 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";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ListBoxMenuIcon
+
+### Import path
+
+```js
+import { ListBoxMenuIcon } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `ListBoxMenuIcon` type definitions
+
+type ListBoxMenuIconTranslationId = "close" | "open";
+```
+
+| Prop name | Type | Default value |
+| :-------------------------- | :-------------------------------------------------------- | :------------------------------- |
+| open | boolean | false |
+| translationIds (`constant`) | { close: "close"; open: "open" } | { close: "close", open: "open" } |
+| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ListBoxMenuItem
+
+### Import path
+
+```js
+import { ListBoxMenuItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :------------------- | :------------ |
+| active | boolean | false |
+| highlighted | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ListBoxSelection
+
+### Import path
+
+```js
+import { ListBoxSelection } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `ListBoxSelection` type definitions
+
+type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
+```
+
+| Prop name | Type | Default value |
+| :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- |
+| selectionCount | any | -- |
+| disabled | boolean | false |
+| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | { clearAll: "clearAll", clearSelection: "clearSelection", } |
+| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:clear`
+
+---
+
+## ListItem
+
+### Import path
+
+```js
+import { ListItem } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Loading
+
+### Import path
+
+```js
+import { Loading } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :------------------- | :------------------------- |
+| small | boolean | false |
+| active | boolean | true |
+| withOverlay | boolean | true |
+| description | string | "Active loading indicator" |
+| id | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Modal
+
+### Import path
+
+```js
+import { Modal } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------------- | :---------------------------------------- | :--------------------------- |
+| size | "xs" | "sm" | "lg" | -- |
+| open | boolean | false |
+| danger | boolean | false |
+| passiveModal | boolean | false |
+| modalHeading | string | -- |
+| modalLabel | string | -- |
+| modalAriaLabel | string | -- |
+| iconDescription | string | "Close the modal" |
+| hasForm | boolean | false |
+| hasScrollingContent | boolean | false |
+| primaryButtonText | string | "" |
+| primaryButtonDisabled | boolean | false |
+| shouldSubmitOnEnter | boolean | true |
+| secondaryButtonText | string | "" |
+| selectorPrimaryFocus | string | "[data-modal-primary-focus]" |
+| id | string | -- |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:keydown`
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:submit`
+- `on:click:button--secondary`
+- `on:close`
+- `on:open`
+
+---
+
+## ModalBody
+
+### Import path
+
+```js
+import { ModalBody } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------------ | :------------------- | :------------ |
+| hasForm | boolean | false |
+| hasScrollingContent | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ModalFooter
+
+### Import path
+
+```js
+import { ModalFooter } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------------- | :------------------- | :------------ |
+| primaryButtonText | string | "" |
+| primaryButtonDisabled | boolean | false |
+| primaryClass | string | -- |
+| secondaryButtonText | string | "" |
+| secondaryClass | string | -- |
+| danger | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ModalHeader
+
+### Import path
+
+```js
+import { ModalHeader } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------ | :------------ |
+| title | string | "" |
+| label | string | "" |
+| labelClass | string | "" |
+| titleClass | string | "" |
+| closeClass | string | "" |
+| closeIconClass | string | "" |
+| iconDescription | string | "Close" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## MultiSelect
+
+### Import path
+
+```js
+import { MultiSelect } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `MultiSelect` type definitions
+
+type MultiSelectItemId = string;
+
+type MultiSelectItemText = string;
+
+interface MultiSelectItem {
+ id: MultiSelectItemId;
+ text: MultiSelectItemText;
+}
+```
+
+| Prop name | Type | Default value |
+| :---------------- | :----------------------------------------------------------------------- | :----------------- |
+| items | MultiSelectItem[] | -- |
+| itemToString | (item: MultiSelectItem) => string | -- |
+| selectedIds | MultiSelectItemId[] | -- |
+| value | string | "" |
+| size | "sm" | "lg" | "xl" | -- |
+| type | "default" | "inline" | "default" |
+| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" |
+| disabled | boolean | false |
+| filterable | boolean | false |
+| filterItem | (item: MultiSelectItem, value: string) => string | -- |
+| open | boolean | false |
+| light | boolean | false |
+| locale | string | "en" |
+| placeholder | string | "" |
+| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- |
+| translateWithId | (id: any) => string | -- |
+| titleText | string | "" |
+| useTitleInItem | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| helperText | string | "" |
+| label | string | "" |
+| id | string | -- |
+| name | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:keydown`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## NotificationActionButton
+
+### Import path
+
+```js
+import { NotificationActionButton } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## NotificationButton
+
+### Import path
+
+```js
+import { NotificationButton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :------------------------------------------------------------------ | :------------ |
+| notificationType | "toast" | "inline" | "toast" |
+| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- |
+| title | string | -- |
+| iconDescription | string | "Close icon" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## NotificationIcon
+
+### Import path
+
+```js
+import { NotificationIcon } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
+| notificationType | "toast" | "inline" | "toast" |
+| iconDescription | string | "Closes notification" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## NotificationTextDetails
+
+### Import path
+
+```js
+import { NotificationTextDetails } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :----------------------------------- | :------------ |
+| notificationType | "toast" | "inline" | "toast" |
+| title | string | "Title" |
+| subtitle | string | "" |
+| caption | string | "Caption" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## NumberInput
+
+### Import path
+
+```js
+import { NumberInput } from "carbon-components-svelte";
+```
+
+### Props
+
+```ts
+// `NumberInput` type definitions
+
+type NumberInputTranslationId = "increment" | "decrement";
+```
+
+| Prop name | Type | Default value |
+| :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- |
+| size | "sm" | "xl" | -- |
+| value | string | "" |
+| step | number | 1 |
+| max | number | -- |
+| min | number | -- |
+| light | boolean | false |
+| readonly | boolean | false |
+| mobile | boolean | false |
+| allowEmpty | boolean | false |
+| disabled | boolean | false |
+| iconDescription | string | "" |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| helperText | string | "" |
+| label | string | "" |
+| hideLabel | boolean | false |
+| translateWithId | (id: NumberInputTranslationId) => string | -- |
+| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:input`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## NumberInputSkeleton
+
+### Import path
+
+```js
+import { NumberInputSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| hideLabel | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## OrderedList
+
+### Import path
+
+```js
+import { OrderedList } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| nested | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## OverflowMenu
+
+### Import path
+
+```js
+import { OverflowMenu } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :------------------------------------------------------------------ | :------------------------------- |
+| direction | "top" | "bottom" | "bottom" |
+| open | boolean | false |
+| light | boolean | false |
+| flipped | boolean | false |
+| menuOptionsClass | string | -- |
+| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- |
+| iconClass | string | -- |
+| iconDescription | string | "Open and close list of options" |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+- `on:close`
+
+---
+
+## OverflowMenuItem
+
+### Import path
+
+```js
+import { OverflowMenuItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :------------------------------------------------------------------ | :------------- |
+| text | string | "Provide text" |
+| href | string | "" |
+| primaryFocus | boolean | false |
+| disabled | boolean | false |
+| hasDivider | boolean | false |
+| danger | boolean | false |
+| requireTitle | boolean | true |
+| id | string | -- |
+| ref | null | HTMLAnchorElement | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Pagination
+
+### Import path
+
+```js
+import { Pagination } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------------- | :--------------------------------------------------------------- | :---------------- |
+| page | number | 1 |
+| totalItems | number | 0 |
+| disabled | boolean | false |
+| forwardText | string | "Next page" |
+| backwardText | string | "Previous page" |
+| itemsPerPageText | string | "Items per page:" |
+| itemText | (min: number, max: number) => string | -- |
+| itemRangeText | (min: number, max: number, total: number) => string | -- |
+| pageInputDisabled | boolean | false |
+| pageSize | number | 10 |
+| pageSizes | number[] | -- |
+| pagesUnknown | boolean | false |
+| pageText | (page: number) => string | -- |
+| pageRangeText | (current: number, total: number) => string | -- |
+| id | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:update`
+
+---
+
+## PaginationNav
+
+### Import path
+
+```js
+import { PaginationNav } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :------------------- | :-------------- |
+| page | number | 0 |
+| total | number | 10 |
+| shown | number | 10 |
+| loop | boolean | false |
+| forwardText | string | "Next page" |
+| backwardText | string | "Previous page" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:click:button--previous`
+- `on:click:button--next`
+- `on:change`
+
+---
+
+## PaginationSkeleton
+
+### Import path
+
+```js
+import { PaginationSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## PasswordInput
+
+### Import path
+
+```js
+import { PasswordInput } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------------- | :-------------------------------------------------------------- | :-------------- |
+| size | "sm" | "xl" | -- |
+| value | string | "" |
+| type | string | "password" |
+| placeholder | string | "" |
+| hidePasswordLabel | string | "Hide password" |
+| showPasswordLabel | string | "Show password" |
+| tooltipAlignment | "start" | "center" | "end" | -- |
+| tooltipPosition | "top" | "right" | "bottom" | "left" | -- |
+| light | boolean | false |
+| disabled | boolean | false |
+| helperText | string | "" |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### 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.
+
+---
+
+## ProgressIndicator
+
+### Import path
+
+```js
+import { ProgressIndicator } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :------------------- | :------------ |
+| currentIndex | number | 0 |
+| vertical | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## ProgressIndicatorSkeleton
+
+### Import path
+
+```js
+import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| vertical | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ProgressStep
+
+### Import path
+
+```js
+import { ProgressStep } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------- | :------------------- | :------------ |
+| complete | boolean | false |
+| current | boolean | false |
+| disabled | boolean | false |
+| invalid | boolean | false |
+| description | string | "" |
+| label | string | "" |
+| secondaryLabel | string | "" |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## RadioButton
+
+### Import path
+
+```js
+import { RadioButton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :---------------------------------------- | :------------ |
+| value | string | "" |
+| checked | boolean | false |
+| disabled | boolean | false |
+| labelPosition | "right" | "left" | "right" |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| id | string | -- |
+| name | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:change`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## RadioButtonGroup
+
+### Import path
+
+```js
+import { RadioButtonGroup } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :------------------------------------------ | :------------ |
+| selected | string | -- |
+| disabled | boolean | false |
+| labelPosition | "right" | "left" | "right" |
+| orientation | "horizontal" | "vertical" | "horizontal" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## RadioButtonSkeleton
+
+### Import path
+
+```js
+import { RadioButtonSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## RadioTile
+
+### Import path
+
+```js
+import { RadioTile } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------- | :--------------- |
+| checked | boolean | false |
+| light | boolean | false |
+| value | string | "" |
+| tabindex | string | "0" |
+| iconDescription | string | "Tile checkmark" |
+| id | string | -- |
+| name | string | "" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:change`
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Row
+
+### Import path
+
+```js
+import { Row } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------ | :------------------- | :------------ |
+| as | boolean | false |
+| condensed | boolean | false |
+| narrow | boolean | false |
+| noGutter | boolean | false |
+| noGutterLeft | boolean | false |
+| noGutterRight | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Search
+
+### Import path
+
+```js
+import { Search } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------------- | :---------------------------------------- | :------------------- |
+| small | boolean | false |
+| size | "sm" | "lg" | -- |
+| skeleton | boolean | false |
+| light | boolean | false |
+| value | string | "" |
+| type | string | "text" |
+| placeholder | string | "Search..." |
+| autocomplete | "on" | "off" | "off" |
+| autofocus | boolean | false |
+| closeButtonLabelText | string | "Clear search input" |
+| labelText | string | "" |
+| id | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:input`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SearchSkeleton
+
+### Import path
+
+```js
+import { SearchSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| small | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Select
+
+### Import path
+
+```js
+import { Select } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :----------------------------------------- | :------------ |
+| selected | string | -- |
+| size | "sm" | "xl" | -- |
+| inline | boolean | false |
+| light | boolean | false |
+| disabled | boolean | false |
+| id | string | -- |
+| name | string | -- |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| helperText | string | "" |
+| noLabel | boolean | false |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| ref | null | HTMLSelectElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:blur`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## SelectItem
+
+### Import path
+
+```js
+import { SelectItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| value | string | "" |
+| text | string | "" |
+| hidden | boolean | false |
+| disabled | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SelectItemGroup
+
+### Import path
+
+```js
+import { SelectItemGroup } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :-------------- |
+| disabled | boolean | false |
+| label | string | "Provide label" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SelectSkeleton
+
+### Import path
+
+```js
+import { SelectSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| hideLabel | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SelectableTile
+
+### Import path
+
+```js
+import { SelectableTile } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :---------------------------------------- | :--------------- |
+| selected | boolean | false |
+| light | boolean | false |
+| title | string | "title" |
+| value | string | "value" |
+| tabindex | string | "0" |
+| iconDescription | string | "Tile checkmark" |
+| id | string | -- |
+| name | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SideNav
+
+### Import path
+
+```js
+import { SideNav } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| fixed | boolean | false |
+| ariaLabel | string | -- |
+| isOpen | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SideNavItems
+
+### Import path
+
+```js
+import { SideNavItems } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SideNavLink
+
+### Import path
+
+```js
+import { SideNavLink } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ |
+| isSelected | boolean | false |
+| href | string | -- |
+| text | string | -- |
+| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SideNavMenu
+
+### Import path
+
+```js
+import { SideNavMenu } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ |
+| expanded | boolean | false |
+| text | string | -- |
+| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SideNavMenuItem
+
+### Import path
+
+```js
+import { SideNavMenuItem } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------- | :------------------- | :------------ |
+| isSelected | boolean | -- |
+| href | string | -- |
+| text | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SkeletonPlaceholder
+
+### Import path
+
+```js
+import { SkeletonPlaceholder } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SkeletonText
+
+### Import path
+
+```js
+import { SkeletonText } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| lines | number | 3 |
+| heading | boolean | false |
+| paragraph | boolean | false |
+| width | string | "100%" |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## SkipToContent
+
+### Import path
+
+```js
+import { SkipToContent } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :-------------- |
+| href | string | "#main-content" |
+| tabindex | string | "0" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Slider
+
+### Import path
+
+```js
+import { Slider } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :------------- | :----------------------------------- | :------------ |
+| value | string | "" |
+| max | number | 100 |
+| maxLabel | string | "" |
+| min | number | 0 |
+| minLabel | string | "" |
+| step | number | 1 |
+| stepMultiplier | number | 4 |
+| required | boolean | false |
+| inputType | string | "number" |
+| disabled | boolean | false |
+| light | boolean | false |
+| hideTextInput | boolean | false |
+| id | string | -- |
+| invalid | boolean | false |
+| labelText | string | "" |
+| name | string | "" |
+| ref | null | HTMLElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## SliderSkeleton
+
+### Import path
+
+```js
+import { SliderSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| hideLabel | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredList
+
+### Import path
+
+```js
+import { StructuredList } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| selected | string | -- |
+| border | boolean | false |
+| selection | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## StructuredListBody
+
+### Import path
+
+```js
+import { StructuredListBody } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredListCell
+
+### Import path
+
+```js
+import { StructuredListCell } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| head | boolean | false |
+| noWrap | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredListHead
+
+### Import path
+
+```js
+import { StructuredListHead } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredListInput
+
+### Import path
+
+```js
+import { StructuredListInput } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :---------------------------------------- | :------------ |
+| checked | boolean | false |
+| title | string | "title" |
+| value | string | "value" |
+| id | string | -- |
+| name | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredListRow
+
+### Import path
+
+```js
+import { StructuredListRow } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| head | boolean | false |
+| label | boolean | false |
+| tabindex | string | "0" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## StructuredListSkeleton
+
+### Import path
+
+```js
+import { StructuredListSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| rows | number | 5 |
+| border | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Switch
+
+### Import path
+
+```js
+import { Switch } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :----------------------------------------- | :------------- |
+| text | string | "Provide text" |
+| selected | boolean | false |
+| disabled | boolean | false |
+| id | string | -- |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:keydown`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Tab
+
+### Import path
+
+```js
+import { Tab } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :----------------------------------------- | :------------ |
+| label | string | "" |
+| href | string | "#" |
+| disabled | boolean | false |
+| tabindex | string | "0" |
+| id | string | -- |
+| ref | null | HTMLAnchorElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TabContent
+
+### Import path
+
+```js
+import { TabContent } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Table
+
+### Import path
+
+```js
+import { Table } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :-------------------------------------------------- | :------------ |
+| size | "compact" | "short" | "tall" | -- |
+| zebra | boolean | false |
+| useStaticWidth | boolean | false |
+| shouldShowBorder | boolean | false |
+| sortable | boolean | false |
+| stickyHeader | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableBody
+
+### Import path
+
+```js
+import { TableBody } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableCell
+
+### Import path
+
+```js
+import { TableCell } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableContainer
+
+### Import path
+
+```js
+import { TableContainer } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :----------- | :------------------- | :------------ |
+| title | string | "" |
+| description | string | "" |
+| stickyHeader | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableHead
+
+### Import path
+
+```js
+import { TableHead } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableHeader
+
+### Import path
+
+```js
+import { TableHeader } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------------ | :------------ |
+| scope | string | "col" |
+| translateWithId | () => string | -- |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:click`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TableRow
+
+### Import path
+
+```js
+import { TableRow } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------- | :------------------- | :------------ |
+| isSelected | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Tabs
+
+### Import path
+
+```js
+import { Tabs } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :---------------------------------------- | :------------------ |
+| selected | number | 0 |
+| type | "default" | "container" | "default" |
+| iconDescription | string | "Show menu options" |
+| triggerHref | string | "#" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:keypress`
+- `on:click`
+
+### Dispatched events
+
+- `on:change`
+
+---
+
+## TabsSkeleton
+
+### Import path
+
+```js
+import { TabsSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| count | number | 4 |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Tag
+
+### Import path
+
+```js
+import { Tag } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
+| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- |
+| filter | boolean | false |
+| disabled | boolean | false |
+| skeleton | boolean | false |
+| title | string | "Clear filter" |
+| id | string | -- |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TagSkeleton
+
+### Import path
+
+```js
+import { TagSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+No exported props.
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TextArea
+
+### Import path
+
+```js
+import { TextArea } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :------------------------------------------- | :------------ |
+| value | string | "" |
+| placeholder | string | "" |
+| cols | number | 50 |
+| rows | number | 4 |
+| light | boolean | false |
+| disabled | boolean | false |
+| helperText | string | "" |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLTextAreaElement | null |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:input`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TextAreaSkeleton
+
+### Import path
+
+```js
+import { TextAreaSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| hideLabel | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TextInput
+
+### Import path
+
+```js
+import { TextInput } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :---------------------------------------- | :------------ |
+| size | "sm" | "xl" | -- |
+| value | string | "" |
+| type | string | "" |
+| placeholder | string | "" |
+| light | boolean | false |
+| disabled | boolean | false |
+| helperText | string | "" |
+| id | string | -- |
+| name | string | -- |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| ref | null | HTMLInputElement | null |
+
+### 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.
+
+---
+
+## TextInputSkeleton
+
+### Import path
+
+```js
+import { TextInputSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| hideLabel | boolean | false |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Tile
+
+### Import path
+
+```js
+import { Tile } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| light | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TileGroup
+
+### Import path
+
+```js
+import { TileGroup } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| selected | string | -- |
+| disabled | boolean | false |
+| legend | string | "" |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+- `on:select`
+
+---
+
+## TimePicker
+
+### Import path
+
+```js
+import { TimePicker } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :---------------------------------------- | :------------ |
+| value | string | "" |
+| type | string | "text" |
+| placeholder | string | "hh=mm" |
+| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" |
+| maxlength | number | 5 |
+| light | boolean | false |
+| disabled | boolean | false |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| invalid | boolean | false |
+| invalidText | string | "" |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLInputElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:input`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TimePickerSelect
+
+### Import path
+
+```js
+import { TimePickerSelect } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :----------------------------------------- | :--------------------- |
+| value | string | "" |
+| disabled | boolean | false |
+| iconDescription | string | "Open list of options" |
+| labelText | string | "" |
+| hideLabel | boolean | false |
+| id | string | -- |
+| name | string | -- |
+| ref | null | HTMLSelectElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToastNotification
+
+### Import path
+
+```js
+import { ToastNotification } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
+| notificationType | "toast" | "inline" | "toast" |
+| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
+| lowContrast | boolean | false |
+| timeout | number | 0 |
+| role | string | "alert" |
+| title | string | "Title" |
+| subtitle | string | "" |
+| caption | string | "Caption" |
+| iconDescription | string | "Closes notification" |
+| hideCloseButton | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+- `on:close`
+
+---
+
+## Toggle
+
+### Import path
+
+```js
+import { Toggle } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| toggled | boolean | false |
+| disabled | boolean | false |
+| labelA | string | "Off" |
+| labelB | string | "On" |
+| labelText | string | "" |
+| id | string | -- |
+| name | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:keyup`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToggleSkeleton
+
+### Import path
+
+```js
+import { ToggleSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| labelText | string | "" |
+| id | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToggleSmall
+
+### Import path
+
+```js
+import { ToggleSmall } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| toggled | boolean | false |
+| disabled | boolean | false |
+| labelA | string | "Off" |
+| labelB | string | "On" |
+| labelText | string | "" |
+| id | string | -- |
+| name | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:change`
+- `on:keyup`
+- `on:focus`
+- `on:blur`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## ToggleSmallSkeleton
+
+### Import path
+
+```js
+import { ToggleSmallSkeleton } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------ | :------------ |
+| labelText | string | "" |
+| id | string | -- |
+
+### Slots
+
+No slots.
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## Tooltip
+
+### Import path
+
+```js
+import { Tooltip } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------------- | :------------------------------------------------------------------ | :------------ |
+| direction | "top" | "right" | "bottom" | "left" | "bottom" |
+| open | boolean | false |
+| hideIcon | boolean | false |
+| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- |
+| iconDescription | string | "" |
+| iconName | string | "" |
+| tabindex | string | "0" |
+| tooltipId | string | -- |
+| triggerId | string | -- |
+| triggerText | string | "" |
+| ref | null | HTMLElement | null |
+| refTooltip | null | HTMLElement | null |
+| refIcon | null | HTMLElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+No forwarded events.
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TooltipDefinition
+
+### Import path
+
+```js
+import { TooltipDefinition } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :------------------------------------------------ | :------------ |
+| tooltipText | string | "" |
+| align | "start" | "center" | "end" | "center" |
+| direction | "top" | "bottom" | "bottom" |
+| id | string | -- |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:focus`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## TooltipIcon
+
+### Import path
+
+```js
+import { TooltipIcon } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :---------- | :-------------------------------------------------------------- | :------------ |
+| tooltipText | string | "" |
+| align | "start" | "center" | "end" | "center" |
+| direction | "top" | "right" | "bottom" | "left" | "bottom" |
+| id | string | -- |
+| ref | null | HTMLButtonElement | null |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+- `on:focus`
+
+### Dispatched events
+
+No dispatched events.
+
+---
+
+## UnorderedList
+
+### Import path
+
+```js
+import { UnorderedList } from "carbon-components-svelte";
+```
+
+### Props
+
+| Prop name | Type | Default value |
+| :-------- | :------------------- | :------------ |
+| nested | boolean | false |
+
+### Slots
+
+- `...`
+
+### Forwarded events
+
+- `on:click`
+- `on:mouseover`
+- `on:mouseenter`
+- `on:mouseleave`
+
+### Dispatched events
+
+No dispatched events.
+
+---
diff --git a/README.md b/README.md
index 4c8dfbe3..279a4487 100644
--- a/README.md
+++ b/README.md
@@ -30,3939 +30,13 @@ yarn add -D carbon-components-svelte
```
+### TypeScript support
+
+This library ships with TypeScript definitions ([types/index.d.ts](types/index.d.ts)).
+
## Components
-> 147 components exported from "carbon-components-svelte"
-
-- Accordion
- - [AccordionSkeleton](#accordionskeleton)
- - [Accordion](#accordion)
- - [AccordionItem](#accordionitem)
-- Breadcrumb
- - [BreadcrumbSkeleton](#breadcrumbskeleton)
- - [Breadcrumb](#breadcrumb)
- - [BreadcrumbItem](#breadcrumbitem)
-- Button
- - [ButtonSkeleton](#buttonskeleton)
- - [Button](#button)
-- Checkbox
- - [CheckboxSkeleton](#checkboxskeleton)
- - [Checkbox](#checkbox)
-- CodeSnippet
- - [CodeSnippetSkeleton](#codesnippetskeleton)
- - [CodeSnippet](#codesnippet)
-- [ComboBox](#combobox)
-- ComposedModal
- - [ComposedModal](#composedmodal)
- - [ModalBody](#modalbody)
- - [ModalFooter](#modalfooter)
- - [ModalHeader](#modalheader)
-- ContentSwitcher
- - [ContentSwitcher](#contentswitcher)
- - [Switch](#switch)
-- [Copy](#copy)
-- [CopyButton](#copybutton)
-- DataTable
- - [DataTable](#datatable)
- - [Table](#table)
- - [TableBody](#tablebody)
- - [TableCell](#tablecell)
- - [TableContainer](#tablecontainer)
- - [TableHead](#tablehead)
- - [TableHeader](#tableheader)
- - [TableRow](#tablerow)
-- [DataTableSkeleton](#datatableskeleton)
-- DatePicker
- - [DatePickerSkeleton](#datepickerskeleton)
- - [DatePicker](#datepicker)
- - [DatePickerInput](#datepickerinput)
-- Dropdown
- - [DropdownSkeleton](#dropdownskeleton)
- - [Dropdown](#dropdown)
-- FileUploader
- - [FileUploaderSkeleton](#fileuploaderskeleton)
- - [FileUploader](#fileuploader)
- - [FileUploaderButton](#fileuploaderbutton)
- - [FileUploaderDropContainer](#fileuploaderdropcontainer)
- - [FileUploaderItem](#fileuploaderitem)
- - [Filename](#filename)
-- [Form](#form)
-- [FormGroup](#formgroup)
-- [FormItem](#formitem)
-- [FormLabel](#formlabel)
-- Grid
- - [Column](#column)
- - [Grid](#grid)
- - [Row](#row)
-- Icon
- - [IconSkeleton](#iconskeleton)
- - [Icon](#icon)
-- [InlineLoading](#inlineloading)
-- [Link](#link)
-- ListBox
- - [ListBox](#listbox)
- - [ListBoxField](#listboxfield)
- - [ListBoxMenu](#listboxmenu)
- - [ListBoxMenuIcon](#listboxmenuicon)
- - [ListBoxMenuItem](#listboxmenuitem)
- - [ListBoxSelection](#listboxselection)
-- [ListItem](#listitem)
-- [Loading](#loading)
-- [Modal](#modal)
-- [MultiSelect](#multiselect)
-- Notification
- - [InlineNotification](#inlinenotification)
- - [NotificationActionButton](#notificationactionbutton)
- - [NotificationButton](#notificationbutton)
- - [NotificationIcon](#notificationicon)
- - [NotificationTextDetails](#notificationtextdetails)
- - [ToastNotification](#toastnotification)
-- NumberInput
- - [NumberInputSkeleton](#numberinputskeleton)
- - [NumberInput](#numberinput)
-- [OrderedList](#orderedlist)
-- OverflowMenu
- - [OverflowMenu](#overflowmenu)
- - [OverflowMenuItem](#overflowmenuitem)
-- Pagination
- - [PaginationSkeleton](#paginationskeleton)
- - [Pagination](#pagination)
-- PaginationNav
- - [PaginationItem](#paginationitem)
- - [PaginationNav](#paginationnav)
- - [PaginationOverflow](#paginationoverflow)
-- ProgressIndicator
- - [ProgressIndicatorSkeleton](#progressindicatorskeleton)
- - [ProgressIndicator](#progressindicator)
- - [ProgressStep](#progressstep)
-- RadioButton
- - [RadioButtonSkeleton](#radiobuttonskeleton)
- - [RadioButton](#radiobutton)
-- [RadioButtonGroup](#radiobuttongroup)
-- Search
- - [SearchSkeleton](#searchskeleton)
- - [Search](#search)
-- Select
- - [SelectSkeleton](#selectskeleton)
- - [Select](#select)
- - [SelectItem](#selectitem)
- - [SelectItemGroup](#selectitemgroup)
-- [SkeletonPlaceholder](#skeletonplaceholder)
-- [SkeletonText](#skeletontext)
-- Slider
- - [SliderSkeleton](#sliderskeleton)
- - [Slider](#slider)
-- StructuredList
- - [StructuredListSkeleton](#structuredlistskeleton)
- - [StructuredList](#structuredlist)
- - [StructuredListBody](#structuredlistbody)
- - [StructuredListCell](#structuredlistcell)
- - [StructuredListHead](#structuredlisthead)
- - [StructuredListInput](#structuredlistinput)
- - [StructuredListRow](#structuredlistrow)
-- Tabs
- - [Tab](#tab)
- - [TabContent](#tabcontent)
- - [Tabs](#tabs)
- - [TabsSkeleton](#tabsskeleton)
-- Tag
- - [TagSkeleton](#tagskeleton)
- - [Tag](#tag)
-- TextArea
- - [TextAreaSkeleton](#textareaskeleton)
- - [TextArea](#textarea)
-- TextInput
- - [PasswordInput](#passwordinput)
- - [TextInputSkeleton](#textinputskeleton)
- - [TextInput](#textinput)
-- Tile
- - [ClickableTile](#clickabletile)
- - [ExpandableTile](#expandabletile)
- - [RadioTile](#radiotile)
- - [SelectableTile](#selectabletile)
- - [Tile](#tile)
- - [TileGroup](#tilegroup)
-- TimePicker
- - [TimePicker](#timepicker)
- - [TimePickerSelect](#timepickerselect)
-- Toggle
- - [ToggleSkeleton](#toggleskeleton)
- - [Toggle](#toggle)
-- ToggleSmall
- - [ToggleSmallSkeleton](#togglesmallskeleton)
- - [ToggleSmall](#togglesmall)
-- [Tooltip](#tooltip)
-- [TooltipDefinition](#tooltipdefinition)
-- [TooltipIcon](#tooltipicon)
-- UIShell
- - [Content](#content)
- - [SkipToContent](#skiptocontent)
- - [Header](#header)
- - [HeaderAction](#headeraction)
- - [HeaderActionLink](#headeractionlink)
- - [HeaderActionSearch](#headeractionsearch)
- - [HeaderNav](#headernav)
- - [HeaderNavItem](#headernavitem)
- - [HeaderNavMenu](#headernavmenu)
- - [HeaderPanelDivider](#headerpaneldivider)
- - [HeaderPanelLink](#headerpanellink)
- - [HeaderPanelLinks](#headerpanellinks)
- - [HeaderUtilities](#headerutilities)
- - [HamburgerMenu](#hamburgermenu)
- - [SideNav](#sidenav)
- - [SideNavItems](#sidenavitems)
- - [SideNavLink](#sidenavlink)
- - [SideNavMenu](#sidenavmenu)
- - [SideNavMenuItem](#sidenavmenuitem)
-- [UnorderedList](#unorderedlist)
-
-## Component Index
-
-### AccordionSkeleton
-
-Usage
-
-**Component Group:** Accordion
-
-**Import Path**
-
-```js
-import { AccordionSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| count | number | 4 |
-| open | boolean | true |
-
-Usage
-
-**Component Group:** Accordion
-
-**Import Path**
-
-```js
-import { Accordion } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :-------------------------------- | :------ |
-| align | "start" | "end" | "end" |
-| skeleton | boolean | false |
-
-Usage
-
-**Component Group:** Accordion
-
-**Import Path**
-
-```js
-import { AccordionItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------- | :---------------- |
-| title | string | "title" |
-| open | boolean | false |
-| iconDescription | string | "Expand/Collapse" |
-
-Usage
-
-**Component Group:** Breadcrumb
-
-**Import Path**
-
-```js
-import { BreadcrumbSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------- | :------ |
-| noTrailingSlash | boolean | false |
-| count | number | 3 |
-
-Usage
-
-**Component Group:** Breadcrumb
-
-**Import Path**
-
-```js
-import { Breadcrumb } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------- | :------ |
-| noTrailingSlash | boolean | false |
-| skeleton | boolean | false |
-
-Usage
-
-**Component Group:** Breadcrumb
-
-**Import Path**
-
-```js
-import { BreadcrumbItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------- | :------ |
-| href | string | - |
-| isCurrentPage | boolean | false |
-
-Usage
-
-**Component Group:** Button
-
-**Import Path**
-
-```js
-import { ButtonSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| href | string | - |
-| small | boolean | false |
-
-Usage
-
-**Component Group:** Button
-
-**Import Path**
-
-```js
-import { Button } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :----------------------------------------------------------------------------------------- | :-------- |
-| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
-| size | "default" | "field" | "small" | "default" |
-| hasIconOnly | boolean | false |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - |
-| iconDescription | string | - |
-| tooltipAlignment | "start" | "center" | "end" | - |
-| tooltipPosition | "top" | "right" | "bottom" | "left" | - |
-| as | boolean | false |
-| skeleton | boolean | false |
-| disabled | boolean | false |
-| href | string | - |
-| tabindex | string | "0" |
-| type | string | "button" |
-| ref | null | HTMLAnchorElement | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** Checkbox
-
-**Import Path**
-
-```js
-import { CheckboxSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Checkbox
-
-**Import Path**
-
-```js
-import { Checkbox } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :---------------------------------------- | :------ |
-| checked | boolean | false |
-| indeterminate | boolean | false |
-| skeleton | boolean | false |
-| readonly | boolean | false |
-| disabled | boolean | false |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| name | string | "" |
-| title | string | - |
-| id | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** CodeSnippet
-
-**Import Path**
-
-```js
-import { CodeSnippetSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :--------------------------------------------------- | :------- |
-| type | "single" | "inline" | "multi" | "single" |
-
-Usage
-
-**Component Group:** CodeSnippet
-
-**Import Path**
-
-```js
-import { CodeSnippet } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------------- | :--------------------------------------------------- | :---------- |
-| type | "single" | "inline" | "multi" | "single" |
-| code | string | - |
-| expanded | boolean | false |
-| light | boolean | false |
-| skeleton | boolean | false |
-| copyButtonDescription | string | - |
-| copyLabel | string | - |
-| feedback | string | "Copied!" |
-| feedbackTimeout | number | 2000 |
-| showLessText | string | "Show more" |
-| showMoreLess | boolean | false |
-| id | string | - |
-| ref | null | HTMLPreElement | null |
-
-Usage
-
-**Component Group:** ComboBox
-
-**Import Path**
-
-```js
-import { ComboBox } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :---------------------------------------------------------- | :----------------------------- |
-| items | ComboBoxItem[] | [] |
-| itemToString | (item: ComboBoxItem) => string | (item: ComboBoxItem) => string |
-| selectedIndex | number | -1 |
-| value | string | "" |
-| size | "sm" | "xl" | - |
-| disabled | boolean | false |
-| titleText | string | "" |
-| placeholder | string | "" |
-| helperText | string | "" |
-| invalidText | string | "" |
-| invalid | boolean | false |
-| light | boolean | false |
-| open | boolean | false |
-| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | () => true |
-| translateWithId | (id: any) => string | - |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** ComposedModal
-
-**Import Path**
-
-```js
-import { ComposedModal } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------------- | :---------------------------------------- | :--------------------------- |
-| size | "xs" | "sm" | "lg" | - |
-| open | boolean | false |
-| danger | boolean | false |
-| containerClass | string | "" |
-| selectorPrimaryFocus | string | "[data-modal-primary-focus]" |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** ComposedModal
-
-**Import Path**
-
-```js
-import { ModalBody } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------------ | :------------------- | :------ |
-| hasForm | boolean | false |
-| hasScrollingContent | boolean | false |
-
-Usage
-
-**Component Group:** ComposedModal
-
-**Import Path**
-
-```js
-import { ModalFooter } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------------- | :------------------- | :------ |
-| primaryButtonText | string | "" |
-| primaryButtonDisabled | boolean | false |
-| primaryClass | string | - |
-| secondaryButtonText | string | "" |
-| secondaryClass | string | - |
-| danger | boolean | false |
-
-Usage
-
-**Component Group:** ComposedModal
-
-**Import Path**
-
-```js
-import { ModalHeader } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------ | :------ |
-| title | string | "" |
-| label | string | "" |
-| labelClass | string | "" |
-| titleClass | string | "" |
-| closeClass | string | "" |
-| closeIconClass | string | "" |
-| iconDescription | string | "Close" |
-
-Usage
-
-**Component Group:** ContentSwitcher
-
-**Import Path**
-
-```js
-import { ContentSwitcher } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------- | :------ |
-| selectedIndex | number | 0 |
-| light | boolean | false |
-
-Usage
-
-**Component Group:** ContentSwitcher
-
-**Import Path**
-
-```js
-import { Switch } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :----------------------------------------- | :------------- |
-| text | string | "Provide text" |
-| selected | boolean | false |
-| disabled | boolean | false |
-| id | string | - |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** Copy
-
-**Import Path**
-
-```js
-import { Copy } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :----------------------------------------- | :-------- |
-| feedback | string | "Copied!" |
-| feedbackTimeout | number | 2000 |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** CopyButton
-
-**Import Path**
-
-```js
-import { CopyButton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------ | :------------------ |
-| iconDescription | string | "Copy to clipboard" |
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { DataTable } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :-------------------------------------------------- | :------ |
-| headers | {key: string; value: string;} | [] |
-| rows | Object[] | [] |
-| size | "compact" | "short" | "tall" | - |
-| title | string | "" |
-| description | string | "" |
-| zebra | boolean | false |
-| sortable | boolean | false |
-| stickyHeader | boolean | false |
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { Table } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :-------------------------------------------------- | :------ |
-| size | "compact" | "short" | "tall" | - |
-| zebra | boolean | false |
-| useStaticWidth | boolean | false |
-| shouldShowBorder | boolean | false |
-| sortable | boolean | false |
-| stickyHeader | boolean | false |
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableBody } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableCell } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableContainer } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :------------------- | :------ |
-| title | string | "" |
-| description | string | "" |
-| stickyHeader | boolean | false |
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableHead } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableHeader } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------------ | :------- |
-| scope | string | "col" |
-| translateWithId | () => string | () => "" |
-| id | string | - |
-
-Usage
-
-**Component Group:** DataTable
-
-**Import Path**
-
-```js
-import { TableRow } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------- | :------------------- | :------ |
-| isSelected | boolean | false |
-
-Usage
-
-**Component Group:** DataTableSkeleton
-
-**Import Path**
-
-```js
-import { DataTableSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :-------------------- | :------ |
-| columns | number | 5 |
-| rows | number | 5 |
-| compact | boolean | false |
-| zebra | boolean | false |
-| headers | string[] | [] |
-
-Usage
-
-**Component Group:** DatePicker
-
-**Import Path**
-
-```js
-import { DatePickerSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| range | boolean | false |
-| id | string | - |
-
-Usage
-
-**Component Group:** DatePicker
-
-**Import Path**
-
-```js
-import { DatePicker } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------- | :--------------------------------------------------- | :------------ |
-| datePickerType | "simple" | "single" | "range" | "simple" |
-| value | string | "" |
-| appendTo | HTMLElement | document.body |
-| dateFormat | string | "m/d/Y" |
-| maxDate | null | string | Date | null |
-| minDate | null | string | Date | null |
-| locale | string | "en" |
-| short | boolean | false |
-| light | boolean | false |
-| id | string | - |
-
-Usage
-
-**Component Group:** DatePicker
-
-**Import Path**
-
-```js
-import { DatePickerInput } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :---------------------------------------- | :------ |
-| size | "sm" | "xl" | - |
-| type | string | "text" |
-| placeholder | string | "" |
-| iconDescription | string | "" |
-| id | string | - |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** Dropdown
-
-**Import Path**
-
-```js
-import { DropdownSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| inline | boolean | false |
-
-Usage
-
-**Component Group:** Dropdown
-
-**Import Path**
-
-```js
-import { Dropdown } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------------------------------ | :--------------------------------------- |
-| items | DropdownItem[] | [] |
-| itemToString | (item: DropdownItem) => string | (item: DropdownItem) => DropdownItemText | DropdownItemId |
-| selectedIndex | number | -1 |
-| type | "default" | "inline" | "default" |
-| size | "sm" | "lg" | "xl" | - |
-| open | boolean | false |
-| inline | boolean | false |
-| light | boolean | false |
-| disabled | boolean | false |
-| titleText | string | "" |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| helperText | string | "" |
-| label | string | - |
-| translateWithId | (id: any) => string | - |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { FileUploaderSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { FileUploader } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :----------------------------------------------------------------------------------------- | :---------- |
-| status | "uploading" | "edit" | "complete" | "uploading" |
-| accept | string[] | [] |
-| files | string[] | [] |
-| multiple | boolean | false |
-| clearFiles | () => any | () => void |
-| labelDescription | string | "" |
-| labelTitle | string | "" |
-| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
-| buttonLabel | string | "" |
-| iconDescription | string | "" |
-| name | string | - |
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { FileUploaderButton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------------ | :----------------------------------------------------------------------------------------- | :--------- |
-| accept | string[] | [] |
-| multiple | boolean | false |
-| disabled | boolean | false |
-| disableLabelChanges | boolean | false |
-| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" |
-| labelText | string | "Add file" |
-| role | string | "button" |
-| tabindex | string | "0" |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { FileUploaderDropContainer } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :---------------------------------------- | :---------------------- |
-| accept | string[] | [] |
-| multiple | boolean | false |
-| validateFiles | (files: Files) => Files | (files: Files) => Files |
-| labelText | string | "Add file" |
-| role | string | "button" |
-| disabled | boolean | false |
-| tabindex | string | "0" |
-| id | string | - |
-| name | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { FileUploaderItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------------------------------------------- | :---------- |
-| status | "uploading" | "edit" | "complete" | "uploading" |
-| iconDescription | string | "" |
-| invalid | boolean | false |
-| errorSubject | string | "" |
-| errorBody | string | "" |
-| id | string | - |
-| name | string | "" |
-
-Usage
-
-**Component Group:** FileUploader
-
-**Import Path**
-
-```js
-import { Filename } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------------------------------------------- | :---------- |
-| status | "uploading" | "edit" | "complete" | "uploading" |
-| iconDescription | string | "" |
-| invalid | boolean | false |
-
-Usage
-
-**Component Group:** Form
-
-**Import Path**
-
-```js
-import { Form } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** FormGroup
-
-**Import Path**
-
-```js
-import { FormGroup } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| invalid | boolean | false |
-
-Usage
-
-**Component Group:** FormItem
-
-**Import Path**
-
-```js
-import { FormItem } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** FormLabel
-
-**Import Path**
-
-```js
-import { FormLabel } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| id | string | - |
-
-Usage
-
-**Component Group:** Grid
-
-**Import Path**
-
-```js
-import { Column } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------------------------------------------------------------------------------------- | :------ |
-| as | boolean | false |
-| noGutter | boolean | false |
-| noGutterLeft | boolean | false |
-| noGutterRight | boolean | false |
-| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | - |
-| sm | ColumnBreakpoint | - |
-| md | ColumnBreakpoint | - |
-| lg | ColumnBreakpoint | - |
-| xlg | ColumnBreakpoint | - |
-| max | ColumnBreakpoint | - |
-
-Usage
-
-**Component Group:** Grid
-
-**Import Path**
-
-```js
-import { Grid } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------- | :------ |
-| as | boolean | false |
-| condensed | boolean | false |
-| narrow | boolean | false |
-| fullWidth | boolean | false |
-| noGutter | boolean | false |
-| noGutterLeft | boolean | false |
-| noGutterRight | boolean | false |
-
-Usage
-
-**Component Group:** Grid
-
-**Import Path**
-
-```js
-import { Row } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------- | :------ |
-| as | boolean | false |
-| condensed | boolean | false |
-| narrow | boolean | false |
-| noGutter | boolean | false |
-| noGutterLeft | boolean | false |
-| noGutterRight | boolean | false |
-
-Usage
-
-**Component Group:** Icon
-
-**Import Path**
-
-```js
-import { IconSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| size | number | 16 |
-
-Usage
-
-**Component Group:** Icon
-
-**Import Path**
-
-```js
-import { Icon } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------------------------------------------------------ | :------ |
-| render | typeof import("carbon-icons-svelte/lib/Add16").default | - |
-| skeleton | boolean | false |
-
-Usage
-
-**Component Group:** InlineLoading
-
-**Import Path**
-
-```js
-import { InlineLoading } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :----------------------------------------------------------------------- | :---------------- |
-| status | "active" | "inactive" | "finished" | "error" | "active" |
-| description | string | - |
-| iconDescription | string | "Expand/Collapse" |
-| successDelay | number | 1500 |
-
-Usage
-
-**Component Group:** Link
-
-**Import Path**
-
-```js
-import { Link } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :--------------------------------------------------------------------- | :------ |
-| inline | boolean | false |
-| disabled | boolean | false |
-| ref | null | HTMLAnchorElement | HTMLParagraphElement | null |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBox } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :------------------------------------- | :-------- |
-| size | "sm" | "xl" | - |
-| type | "default" | "inline" | "default" |
-| open | boolean | false |
-| light | boolean | false |
-| disable | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "" |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBoxField } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :----------------------------------------------------- | :------------- |
-| disabled | boolean | false |
-| role | string | "combobox" |
-| tabindex | string | "-1" |
-| translateWithId | (id: ListBoxFieldTranslationId) => string | (id) => string |
-| id | string | - |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBoxMenu } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| id | string | - |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBoxMenuIcon } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :-------------------------------------------------------- | :------------- |
-| open | boolean | false |
-| translateWithId | (id: ListBoxMenuIconTranslationId) => string | (id) => string |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBoxMenuItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :------------------- | :------ |
-| active | boolean | false |
-| highlighted | boolean | false |
-
-Usage
-
-**Component Group:** ListBox
-
-**Import Path**
-
-```js
-import { ListBoxSelection } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :--------------------------------------------------------- | :------------- |
-| selectionCount | any | - |
-| disabled | boolean | false |
-| translateWithId | (id: ListBoxSelectionTranslationId) => string | (id) => string |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** ListItem
-
-**Import Path**
-
-```js
-import { ListItem } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Loading
-
-**Import Path**
-
-```js
-import { Loading } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :------------------- | :------------------------- |
-| small | boolean | false |
-| active | boolean | true |
-| withOverlay | boolean | false |
-| description | string | "Active loading indicator" |
-| id | string | - |
-
-Usage
-
-**Component Group:** Modal
-
-**Import Path**
-
-```js
-import { Modal } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------------- | :---------------------------------------- | :--------------------------- |
-| size | "xs" | "sm" | "lg" | - |
-| open | boolean | false |
-| danger | boolean | false |
-| passiveModal | boolean | false |
-| modalHeading | string | - |
-| modalLabel | string | - |
-| modalAriaLabel | string | - |
-| iconDescription | string | "Close the modal" |
-| hasForm | boolean | false |
-| hasScrollingContent | boolean | false |
-| primaryButtonText | string | "" |
-| primaryButtonDisabled | boolean | false |
-| shouldSubmitOnEnter | boolean | true |
-| secondaryButtonText | string | "" |
-| selectorPrimaryFocus | string | "[data-modal-primary-focus]" |
-| id | string | - |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** MultiSelect
-
-**Import Path**
-
-```js
-import { MultiSelect } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------------- | :----------------------------------------------------------------------- | :---------------------------------------------------------- |
-| items | MultiSelectItem[] | [] |
-| itemToString | (item: MultiSelectItem) => string | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId |
-| selectedIds | MultiSelectItemId[] | [] |
-| value | string | "" |
-| size | "sm" | "lg" | "xl" | - |
-| type | "default" | "inline" | "default" |
-| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" |
-| disabled | boolean | false |
-| filterable | boolean | false |
-| filterItem | (item: MultiSelectItem, value: string) => string | (item: MultiSelectItem, value: string) => string |
-| open | boolean | false |
-| light | boolean | false |
-| locale | string | "en" |
-| placeholder | string | "" |
-| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem |
-| translateWithId | (id: any) => string | - |
-| titleText | string | "" |
-| useTitleInItem | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| helperText | string | "" |
-| label | string | - |
-| id | string | - |
-| name | string | - |
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { InlineNotification } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
-| notificationType | "toast" | "inline" | "toast" |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
-| lowContrast | boolean | false |
-| role | string | "alert" |
-| title | string | "Title" |
-| subtitle | string | "" |
-| hideCloseButton | boolean | false |
-| iconDescription | string | "Closes notification" |
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { NotificationActionButton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { NotificationButton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------------------------------------------------------ | :----------- |
-| notificationType | "toast" | "inline" | "toast" |
-| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | - |
-| iconDescription | string | "Close icon" |
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { NotificationIcon } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
-| notificationType | "toast" | "inline" | "toast" |
-| iconDescription | string | "Closes notification" |
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { NotificationTextDetails } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :----------------------------------- | :-------- |
-| notificationType | "toast" | "inline" | "toast" |
-| title | string | "Title" |
-| subtitle | string | "" |
-| caption | string | "Caption" |
-
-Usage
-
-**Component Group:** Notification
-
-**Import Path**
-
-```js
-import { ToastNotification } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
-| notificationType | "toast" | "inline" | "toast" |
-| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" |
-| lowContrast | boolean | false |
-| timeout | number | 0 |
-| role | string | "alert" |
-| title | string | "Title" |
-| subtitle | string | "" |
-| caption | string | "Caption" |
-| iconDescription | string | "Closes notification" |
-| hideCloseButton | boolean | false |
-
-Usage
-
-**Component Group:** NumberInput
-
-**Import Path**
-
-```js
-import { NumberInputSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| hideLabel | boolean | false |
-
-Usage
-
-**Component Group:** NumberInput
-
-**Import Path**
-
-```js
-import { NumberInput } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :---------------------------------------------------- | :--------------------------------------- |
-| size | "sm" | "xl" | - |
-| value | string | "" |
-| step | number | 1 |
-| max | number | - |
-| min | number | - |
-| light | boolean | false |
-| readonly | boolean | false |
-| mobile | boolean | false |
-| allowEmpty | boolean | false |
-| disabled | boolean | false |
-| iconDescription | string | "" |
-| invalid | boolean | false |
-| invalidText | string | "Provide invalidText" |
-| helperText | string | "" |
-| label | string | "" |
-| hideLabel | boolean | false |
-| translateWithId | (id: NumberInputTranslationId) => string | (id: NumberInputTranslationId) => string |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** OrderedList
-
-**Import Path**
-
-```js
-import { OrderedList } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| nested | boolean | false |
-
-Usage
-
-**Component Group:** OverflowMenu
-
-**Import Path**
-
-```js
-import { OverflowMenu } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------------------------------------------------------ | :------------------------------- |
-| direction | "top" | "bottom" | "bottom" |
-| open | boolean | false |
-| light | boolean | false |
-| flipped | boolean | false |
-| menuOptionsClass | string | - |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - |
-| iconClass | string | - |
-| iconDescription | string | "Open and close list of options" |
-| id | string | - |
-
-Usage
-
-**Component Group:** OverflowMenu
-
-**Import Path**
-
-```js
-import { OverflowMenuItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :------------------------------------------------------------------ | :------------- |
-| text | string | "Provide text" |
-| href | string | "" |
-| primaryFocus | boolean | false |
-| disabled | boolean | false |
-| hasDivider | boolean | false |
-| danger | boolean | false |
-| requireTitle | boolean | false |
-| id | string | - |
-| ref | null | HTMLAnchorElement | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** Pagination
-
-**Import Path**
-
-```js
-import { PaginationSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Pagination
-
-**Import Path**
-
-```js
-import { Pagination } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------------- | :--------------------------------------------------------------- | :-------------------------------------------------- |
-| page | number | 1 |
-| total | number | 0 |
-| disabled | boolean | false |
-| forwardText | string | "Next page" |
-| backwardText | string | "Previous page" |
-| itemsPerPageText | string | "Items per page:" |
-| itemText | (min: number, max: number) => string | (min: number, max: number) => string |
-| itemRangeText | (min: number, max: number, total: number) => string | (min: number, max: number, total: number) => string |
-| pageInputDisabled | boolean | false |
-| pageSize | number | 10 |
-| pageSizes | number[] | [10] |
-| pagesUnknown | boolean | false |
-| pageText | (page: number) => string | (current: number) => string |
-| pageRangeText | (current: number, total: number) => string | (current: number, total: number) => string |
-| id | string | - |
-
-Usage
-
-**Component Group:** PaginationNav
-
-**Import Path**
-
-```js
-import { PaginationItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| page | number | 0 |
-| active | boolean | false |
-
-Usage
-
-**Component Group:** PaginationNav
-
-**Import Path**
-
-```js
-import { PaginationNav } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :------------------- | :---------- |
-| page | number | 0 |
-| total | number | 10 |
-| shown | number | 10 |
-| loop | boolean | false |
-| forwardText | string | "Next page" |
-| backwardText | string | "Next page" |
-
-Usage
-
-**Component Group:** PaginationNav
-
-**Import Path**
-
-```js
-import { PaginationOverflow } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| fromIndex | number | 0 |
-| count | number | 0 |
-
-Usage
-
-**Component Group:** ProgressIndicator
-
-**Import Path**
-
-```js
-import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** ProgressIndicator
-
-**Import Path**
-
-```js
-import { ProgressIndicator } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :------------------ | :------ |
-| currentIndex | number | 0 |
-
-Usage
-
-**Component Group:** ProgressIndicator
-
-**Import Path**
-
-```js
-import { ProgressStep } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------- | :------------------- | :------ |
-| complete | boolean | false |
-| current | boolean | false |
-| disabled | boolean | false |
-| invalid | boolean | false |
-| descripton | string | "" |
-| label | string | "" |
-| secondaryLabel | string | "" |
-| id | string | - |
-
-Usage
-
-**Component Group:** RadioButton
-
-**Import Path**
-
-```js
-import { RadioButtonSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** RadioButton
-
-**Import Path**
-
-```js
-import { RadioButton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :---------------------------------------- | :------ |
-| value | string | "" |
-| checked | boolean | false |
-| disabled | boolean | false |
-| labelPosition | "right" | "left" | "right" |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| id | string | - |
-| name | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** RadioButtonGroup
-
-**Import Path**
-
-```js
-import { RadioButtonGroup } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------ | :------------------------------------------ | :----------- |
-| selected | string | - |
-| disabled | boolean | false |
-| labelPosition | "right" | "left" | "right" |
-| orientation | "horizontal" | "vertical" | "horizontal" |
-
-Usage
-
-**Component Group:** Search
-
-**Import Path**
-
-```js
-import { SearchSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| small | boolean | false |
-
-Usage
-
-**Component Group:** Search
-
-**Import Path**
-
-```js
-import { Search } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------------- | :---------------------------------------- | :------------------- |
-| small | boolean | false |
-| size | "sm" | "lg" | - |
-| skeleton | boolean | false |
-| light | boolean | false |
-| value | string | "text" |
-| type | string | "text" |
-| placeholder | string | "Search..." |
-| autocomplete | "on" | "off" | "off" |
-| autofocus | boolean | false |
-| closeButtonLabelText | string | "Clear search input" |
-| labelText | string | "" |
-| id | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** Select
-
-**Import Path**
-
-```js
-import { SelectSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| hideLabel | boolean | false |
-
-Usage
-
-**Component Group:** Select
-
-**Import Path**
-
-```js
-import { Select } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :----------------------------------------- | :------ |
-| selected | string | - |
-| size | "sm" | "xl" | - |
-| inline | boolean | false |
-| light | boolean | false |
-| disabled | boolean | false |
-| id | string | - |
-| name | string | - |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| helperText | string | "" |
-| noLabel | boolean | false |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| ref | null | HTMLSelectElement | null |
-
-Usage
-
-**Component Group:** Select
-
-**Import Path**
-
-```js
-import { SelectItem } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Select
-
-**Import Path**
-
-```js
-import { SelectItemGroup } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :-------------- |
-| disabled | boolean | false |
-| label | string | "Provide label" |
-
-Usage
-
-**Component Group:** SkeletonPlaceholder
-
-**Import Path**
-
-```js
-import { SkeletonPlaceholder } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** SkeletonText
-
-**Import Path**
-
-```js
-import { SkeletonText } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| lines | number | 3 |
-| heading | boolean | false |
-| paragraph | boolean | false |
-| width | string | "100%" |
-
-Usage
-
-**Component Group:** Slider
-
-**Import Path**
-
-```js
-import { SliderSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| hideLabel | boolean | false |
-
-Usage
-
-**Component Group:** Slider
-
-**Import Path**
-
-```js
-import { Slider } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :----------------------------------- | :------ |
-| id | string | - |
-| invalid | boolean | false |
-| labelText | string | "" |
-| light | boolean | false |
-| name | string | "" |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| rows | number | 5 |
-| border | boolean | false |
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredList } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| selected | string | - |
-| border | boolean | false |
-| selection | boolean | false |
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListBody } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListCell } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| head | boolean | false |
-| noWrap | boolean | false |
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListHead } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListInput } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :---------------------------------------- | :------ |
-| checked | boolean | false |
-| title | string | "title" |
-| value | string | "value" |
-| id | string | - |
-| name | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** StructuredList
-
-**Import Path**
-
-```js
-import { StructuredListRow } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| head | boolean | false |
-| label | boolean | false |
-| tabindex | string | "0" |
-
-Usage
-
-**Component Group:** Tabs
-
-**Import Path**
-
-```js
-import { Tab } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :----------------------------------------- | :------ |
-| label | string | "" |
-| href | string | "#" |
-| disabled | boolean | false |
-| tabindex | string | "0" |
-| id | string | - |
-| ref | null | HTMLAnchorElement | null |
-
-Usage
-
-**Component Group:** Tabs
-
-**Import Path**
-
-```js
-import { TabContent } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| id | string | - |
-
-Usage
-
-**Component Group:** Tabs
-
-**Import Path**
-
-```js
-import { Tabs } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :---------------------------------------- | :---------------- |
-| selected | number | 0 |
-| type | "default" | "container" | "default" |
-| iconDescription | string | "Expand/Collapse" |
-| triggerHref | string | "#" |
-
-Usage
-
-**Component Group:** Tabs
-
-**Import Path**
-
-```js
-import { TabsSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| count | number | 4 |
-
-Usage
-
-**Component Group:** Tag
-
-**Import Path**
-
-```js
-import { TagSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** Tag
-
-**Import Path**
-
-```js
-import { Tag } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
-| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | - |
-| filter | boolean | false |
-| disabled | boolean | false |
-| skeleton | boolean | false |
-| title | string | "Clear filter" |
-| id | string | - |
-
-Usage
-
-**Component Group:** TextArea
-
-**Import Path**
-
-```js
-import { TextAreaSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| hideLabel | boolean | false |
-
-Usage
-
-**Component Group:** TextArea
-
-**Import Path**
-
-```js
-import { TextArea } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :------------------------------------------- | :------ |
-| value | string | "" |
-| placeholder | string | "" |
-| cols | number | 50 |
-| rows | number | 4 |
-| light | boolean | false |
-| disabled | boolean | false |
-| helperText | string | "" |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLTextAreaElement | null |
-
-Usage
-
-**Component Group:** TextInput
-
-**Import Path**
-
-```js
-import { PasswordInput } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------------- | :-------------------------------------------------------------- | :-------------- |
-| size | "sm" | "xl" | - |
-| value | string | "" |
-| type | string | "password" |
-| placeholder | string | "" |
-| hidePasswordLabel | string | "Hide password" |
-| showPasswordLabel | string | "Show password" |
-| tooltipAlignment | "start" | "center" | "end" | "center" |
-| tooltipPosition | "top" | "right" | "bottom" | "left" | "bottom" |
-| light | boolean | false |
-| disabled | boolean | false |
-| helperText | string | "" |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** TextInput
-
-**Import Path**
-
-```js
-import { TextInputSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| hideLabel | boolean | false |
-
-Usage
-
-**Component Group:** TextInput
-
-**Import Path**
-
-```js
-import { TextInput } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :---------------------------------------- | :------ |
-| size | "sm" | "xl" | - |
-| value | string | "" |
-| type | string | "" |
-| placeholder | string | "" |
-| light | boolean | false |
-| disabled | boolean | false |
-| helperText | string | "" |
-| id | string | - |
-| name | string | - |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { ClickableTile } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| clicked | boolean | false |
-| light | boolean | false |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { ExpandableTile } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------------- | :----------------------------------- | :-------------------------- |
-| expanded | boolean | false |
-| light | boolean | false |
-| tileMaxHeight | number | 0 |
-| tilePadding | number | 0 |
-| tileCollapsedIconText | string | "Interact to expand Tile" |
-| tileExpandedIconText | string | "Interact to collapse Tile" |
-| tabindex | string | "0" |
-| id | string | - |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { RadioTile } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------- | :--------------- |
-| checked | boolean | false |
-| light | boolean | false |
-| value | string | "" |
-| tabindex | string | "0" |
-| iconDescription | string | "Tile checkmark" |
-| id | string | - |
-| name | string | "" |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { SelectableTile } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :---------------------------------------- | :--------------- |
-| selected | boolean | false |
-| light | boolean | false |
-| title | string | "title" |
-| value | string | "value" |
-| tabindex | string | "0" |
-| iconDescription | string | "Tile checkmark" |
-| id | string | - |
-| name | string | "" |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { Tile } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| light | boolean | false |
-
-Usage
-
-**Component Group:** Tile
-
-**Import Path**
-
-```js
-import { TileGroup } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| selected | string | - |
-| disabled | boolean | false |
-| legend | string | - |
-
-Usage
-
-**Component Group:** TimePicker
-
-**Import Path**
-
-```js
-import { TimePicker } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :---------------------------------------- | :--------------------- |
-| value | string | "" |
-| type | string | "text" |
-| placeholder | string | "hh=mm" |
-| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" |
-| maxLength | number | 5 |
-| light | boolean | false |
-| disabled | boolean | false |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| invalid | boolean | false |
-| invalidText | string | "Invalid time format." |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLInputElement | null |
-
-Usage
-
-**Component Group:** TimePicker
-
-**Import Path**
-
-```js
-import { TimePickerSelect } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :----------------------------------------- | :---------------- |
-| value | string | "" |
-| disabled | boolean | false |
-| iconDescription | string | "Expand/Collapse" |
-| labelText | string | "" |
-| hideLabel | boolean | false |
-| id | string | - |
-| name | string | - |
-| ref | null | HTMLSelectElement | null |
-
-Usage
-
-**Component Group:** Toggle
-
-**Import Path**
-
-```js
-import { ToggleSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| labelText | string | "" |
-| id | string | - |
-
-Usage
-
-**Component Group:** Toggle
-
-**Import Path**
-
-```js
-import { Toggle } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| toggled | boolean | false |
-| disabled | boolean | false |
-| labelA | string | "Off" |
-| labelB | string | "On" |
-| labelText | string | "" |
-| id | string | - |
-| name | string | - |
-
-Usage
-
-**Component Group:** ToggleSmall
-
-**Import Path**
-
-```js
-import { ToggleSmallSkeleton } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| labelText | string | "" |
-| id | string | - |
-
-Usage
-
-**Component Group:** ToggleSmall
-
-**Import Path**
-
-```js
-import { ToggleSmall } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| toggled | boolean | false |
-| disabled | boolean | false |
-| labelA | string | "Off" |
-| labelB | string | "On" |
-| labelText | string | "" |
-| id | string | - |
-| name | string | - |
-
-Usage
-
-**Component Group:** Tooltip
-
-**Import Path**
-
-```js
-import { Tooltip } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------------------------------------------------------ | :------------ |
-| direction | "top" | "right" | "bottom" | "left" | "bottom" |
-| open | boolean | false |
-| hideIcon | boolean | false |
-| icon | typeof import("carbon-icons-svelte/lib/Add16").default | Information16 |
-| iconDescription | string | "" |
-| iconName | string | "" |
-| tabindex | string | "0" |
-| tooltipId | string | - |
-| triggerId | string | - |
-| triggerText | string | "" |
-| ref | null | HTMLElement | null |
-
-Usage
-
-**Component Group:** TooltipDefinition
-
-**Import Path**
-
-```js
-import { TooltipDefinition } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :------------------------------------------------ | :------- |
-| tooltipText | string | "" |
-| align | "start" | "center" | "end" | "center" |
-| direction | "top" | "bottom" | "bottom" |
-| id | string | - |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** TooltipIcon
-
-**Import Path**
-
-```js
-import { TooltipIcon } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :---------- | :-------------------------------------------------------------- | :------- |
-| tooltipText | string | "" |
-| align | "start" | "center" | "end" | "center" |
-| direction | "top" | "right" | "bottom" | "left" | "bottom" |
-| id | string | - |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { Content } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------------- |
-| id | string | "main-content" |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SkipToContent } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :-------------- |
-| href | string | "#main-content" |
-| tabindex | string | "0" |
-
-Usage
-
-**Component Group:** UnorderedList
-
-**Import Path**
-
-```js
-import { UnorderedList } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| nested | boolean | false |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { Header } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------------- | :------------------- | :------ |
-| isSideNavOpen | boolean | false |
-| uiShellAriaLabel | string | - |
-| href | string | - |
-| company | string | - |
-| platformName | string | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderAction } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :-------------------------------------------------------------------------------------------------- | :------ |
-| isOpen | boolean | false |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
-| text | string | - |
-| ref | null | HTMLButtonElement | null |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderActionLink } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :----------- | :-------------------------------------------------------------------------------------------------- | :------ |
-| linkIsActive | boolean | false |
-| href | string | - |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderActionSearch } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :------------- | :------------------- | :------ |
-| searchIsActive | boolean | false |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderNav } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| ariaLabel | string | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderNavItem } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| href | string | - |
-| text | string | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderNavMenu } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------------- | :------------------- | :---------------- |
-| expanded | boolean | false |
-| href | string | "/" |
-| text | string | - |
-| iconDescription | string | "Expand/Collapse" |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderPanelDivider } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderPanelLink } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------ | :------ |
-| href | string | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderPanelLinks } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HeaderUtilities } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { HamburgerMenu } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| ariaLabel | string | - |
-| isOpen | boolean | false |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SideNav } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :------------------- | :------ |
-| ariaLabel | string | - |
-| isOpen | boolean | false |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SideNavItems } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SideNavLink } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :--------- | :-------------------------------------------------------------------------------------------------- | :------ |
-| isSelected | boolean | false |
-| href | string | - |
-| text | string | - |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SideNavMenu } from "carbon-components-svelte";
-```
-
-**API**
-
-| Prop name | Type | Default |
-| :-------- | :-------------------------------------------------------------------------------------------------- | :------ |
-| expanded | boolean | - |
-| text | string | - |
-| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - |
-
-Usage
-
-**Component Group:** UIShell
-
-**Import Path**
-
-```js
-import { SideNavMenuItem } from "carbon-components-svelte";
-```
-
-**API**
-
-No exported props.
-
-${type.replace(/\|/g, "|")}`;
+
+const HEADER_PROPS = "| Prop name | Type | Default value |\n| :- | :- | :- |\n";
+
+/**
+ * Use library component metadata to generate component documentation in markdown format.
+ * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components
+ * @param {Map} groups
+ * @param {{name: string; version: string; homepage: string;}} pkg
+ */
+export function generateIndex(components, groups, pkg) {
+ let code = `# Component Index\n\n`;
+
+ code += `> ${components.size} components exported from ${pkg.name} ${pkg.version}\n\n`;
+
+ groups.forEach((group, component_group) => {
+ if (group.length > 1) {
+ code += `- ${component_group}\n`;
+ group.forEach((component) => {
+ code += ` - ${toMdLink(component)}\n`;
+ });
+ } else {
+ code += `- ${toMdLink(component_group)}\n`;
+ }
+ });
+
+ code += "---\n";
+
+ components.forEach((component, moduleName) => {
+ const {
+ typedefs,
+ component: { exported_props, slots, forwarded_events, dispatched_events },
+ } = component;
+
+ code += `## ${moduleName}\n\n`;
+ code += `### Import path\n\n`;
+ code += `\`\`\`js\nimport { ${moduleName} } from "${pkg.name}";\n\`\`\`\n\n`;
+
+ code += "### Props\n\n";
+
+ if (exported_props.size > 0) {
+ if (typedefs.length > 0) {
+ let definitions = "";
+
+ typedefs.forEach(({ name, type }) => {
+ const typedef = type.startsWith("{")
+ ? `interface ${name} ${type}`
+ : `type ${name} = ${type};`;
+
+ definitions += `${typedef}\n\n`;
+ });
+
+ code += `\`\`\`ts\n// \`${moduleName}\` type definitions\n\n${definitions}\n\`\`\`\n\n`;
+ }
+
+ code += HEADER_PROPS;
+
+ exported_props.forEach((prop, name) => {
+ code += `| ${name}${
+ prop.kind === "const" ? " (`constant`)" : ""
+ } | ${formatType(prop.type)} | ${prop.value || "--"}|\n`;
+ });
+ } else {
+ code += "No exported props.\n\n";
+ }
+
+ code += "### Slots\n\n";
+
+ if (slots.size > 0) {
+ if (slots.get("default")) {
+ code += "- `...`\n";
+ } else {
+ slots.forEach((slot, name) => {
+ if (slot.default) return;
+ code += `- \`...\`\n`;
+ });
+ }
+ } else {
+ code += "No slots.\n\n";
+ }
+
+ code += "### Forwarded events\n\n";
+
+ if (forwarded_events.size > 0) {
+ forwarded_events.forEach((event, name) => {
+ code += `- \`on:${name}\`\n`;
+ });
+ } else {
+ code += "No forwarded events.\n\n";
+ }
+
+ code += "### Dispatched events\n\n";
+
+ if (dispatched_events.size > 0) {
+ dispatched_events.forEach((event, name) => {
+ code += `- \`on:${name}\`\n`;
+ });
+ } else {
+ code += "No dispatched events.\n\n";
+ }
+
+ code += "---\n";
+ });
+
+ return { code };
+}
diff --git a/scripts/rollup/generate-types.js b/scripts/rollup/generate-types.js
new file mode 100644
index 00000000..9c0c796d
--- /dev/null
+++ b/scripts/rollup/generate-types.js
@@ -0,0 +1,82 @@
+/**
+ * Use library component metadata to generate TypeScript definitions.
+ * @param {Map; slots: Map; } typedefs: {name: string; type: string;}[] }>} components
+ * @param {{name: string; version: string; homepage: string;}} pkg
+ */
+export function generateTypes(components, pkg) {
+ let code = `
+ // Type definitions for ${pkg.name} ${pkg.version}
+ // Project: ${pkg.homepage}
+
+ export class CarbonSvelteComponent {
+ $$prop_def: {};
+
+ $$slot_def: {};
+
+ // stub all \`on:{eventname}\` directives
+ $on(eventname: string, handler: (e: Event) => any): () => void;
+ }\n\n`;
+
+ components.forEach((component, moduleName) => {
+ let $$prop_def = "";
+ let $$slot_def = "";
+
+ component.typedefs.forEach(({ name, type }) => {
+ const typedef = type.startsWith("{")
+ ? `interface ${name} ${type}`
+ : `type ${name} = ${type};`;
+ code += typedef + "\n\n";
+ });
+
+ component.component.exported_props.forEach((prop, name) => {
+ $$prop_def += "/**\n";
+
+ prop.description.split("\n").forEach((line) => {
+ $$prop_def += "* " + line + "\n";
+ });
+
+ if (prop.kind === "const") {
+ $$prop_def += "* @constant\n";
+ }
+
+ if (prop.value !== undefined) {
+ $$prop_def += "* @default " + prop.value + "\n";
+ }
+
+ $$prop_def += "*/\n";
+
+ let value = "undefined";
+
+ if (prop.type) {
+ value = prop.type;
+ }
+
+ $$prop_def += name + "?: " + value + ";" + "\n\n";
+ });
+
+ component.component.slots.forEach((slot, slot_name) => {
+ let value = "";
+
+ slot.attributes.forEach((attribute) => {
+ if (attribute.name !== "name") {
+ value += attribute.name + ": any;";
+ }
+ });
+
+ if (slot.default) {
+ $$slot_def += "default: {" + value + "};" + "\n";
+ } else {
+ $$slot_def += JSON.stringify(slot_name) + ": {" + value + "};" + "\n";
+ }
+ });
+
+ code += `
+ export class ${moduleName} extends CarbonSvelteComponent {
+ ${!!$$prop_def ? "$$prop_def: {" + $$prop_def + "}\n" : ""}
+
+ ${!!$$slot_def ? "$$slot_def: {" + $$slot_def + "}\n" : ""}
+ }\n\n`;
+ });
+
+ return { code };
+}
diff --git a/scripts/rollup/parse-component.js b/scripts/rollup/parse-component.js
new file mode 100644
index 00000000..1379b5e0
--- /dev/null
+++ b/scripts/rollup/parse-component.js
@@ -0,0 +1,134 @@
+import { parse, walk } from "svelte/compiler";
+import commentParser from "comment-parser";
+
+/**
+ * Parse Svelte component for metadata using the Svelte compiler
+ * @param {string} source - raw Svelte component code
+ * @param {{ component: string; onTypeDef: (tag: { type: "typedef"; tag: string; name: string; }) => void;}} hooks
+ */
+export function parseComponent(source, hooks) {
+ const exported_props = new Map();
+ const slots = new Map();
+ const forwarded_events = new Map();
+ const dispatched_events = new Map();
+
+ let hasDispatchedEvents = false;
+ let dispatcher_name = null;
+ let callee = [];
+
+ walk(parse(source), {
+ enter(node, parent, prop) {
+ switch (node.type) {
+ case "CallExpression":
+ if (hasDispatchedEvents) {
+ if (node.callee.name === "createEventDispatcher") {
+ dispatcher_name = parent.id.name;
+ }
+ }
+ break;
+ case "Identifier":
+ if (node.name === "createEventDispatcher") {
+ hasDispatchedEvents = true;
+ }
+
+ if (prop === "callee") {
+ callee.push({ name: node.name, parent });
+ }
+ break;
+ case "ExportNamedDeclaration":
+ const { id, init } = node.declaration.declarations[0];
+
+ let value = undefined;
+ let type = undefined;
+ let kind = node.declaration.kind;
+ let description = null;
+
+ if (init != null) {
+ if (init.type === "ObjectExpression") {
+ value = source.slice(init.start, init.end).replace(/\n/g, " ");
+ type = value;
+ } else {
+ value = init.raw;
+ }
+ }
+
+ const general_comments = commentParser(source);
+
+ general_comments.forEach((comment) => {
+ comment.tags.forEach((tag) => {
+ if (tag.tag === "typedef") hooks.onTypeDef(tag);
+ });
+ });
+
+ if (node.leadingComments) {
+ const comment = commentParser(
+ "/*" + node.leadingComments[0].value + "*/"
+ );
+
+ description = comment[0].description;
+
+ type = comment[0].tags[comment[0].tags.length - 1].type;
+ } else {
+ throw Error(
+ `[${hooks.component}] property \`${id.name}\` should be annotated.`
+ );
+ }
+
+ exported_props.set(id.name, { kind, value, type, description });
+ break;
+ case "Slot":
+ let slot_name = null;
+
+ const slot_attributes = [];
+
+ node.attributes.forEach((attribute) => {
+ if (attribute.name === "name") {
+ slot_name = attribute.value[0].raw;
+ } else {
+ slot_attributes.push(attribute);
+ }
+ });
+
+ let default_value = "";
+
+ node.children.forEach((child) => {
+ default_value += `${source.slice(child.start, child.end)}\n`;
+ });
+
+ slots.set(slot_name == null ? "default" : slot_name, {
+ attributes: node.attributes,
+ children: node.children,
+ default: slot_name == null,
+ default_value,
+ });
+ break;
+ case "EventHandler":
+ if (node.expression == null) {
+ forwarded_events.set(node.name, node);
+ }
+ break;
+ }
+ },
+ });
+
+ if (hasDispatchedEvents) {
+ callee.forEach((node) => {
+ if (node.name === dispatcher_name) {
+ const [name, detail] = node.parent.arguments;
+
+ if (name.value !== undefined) {
+ dispatched_events.set(name.value, {
+ detail: detail ? source.slice(detail.start, detail.end) : undefined,
+ });
+ }
+ }
+ });
+ }
+
+ return {
+ exported_props,
+ slots,
+ forwarded_events,
+ dispatched_events,
+ };
+}
diff --git a/scripts/rollup/plugin-generate-docs.js b/scripts/rollup/plugin-generate-docs.js
new file mode 100644
index 00000000..2e87ac10
--- /dev/null
+++ b/scripts/rollup/plugin-generate-docs.js
@@ -0,0 +1,74 @@
+import fs from "fs";
+import path from "path";
+import pkg from "../../package.json";
+import { format } from "prettier";
+import { parseComponent } from "./parse-component";
+import { generateTypes } from "./generate-types";
+import { generateIndex } from "./generate-index";
+
+/**
+ * Rollup plugin to generate library TypeScript definitions and documentation.
+ */
+function pluginGenerateDocs() {
+ const groups = new Map();
+ const components = new Map();
+
+ return {
+ name: "generate-docs",
+ async generateBundle(options, bundle) {
+ for (const filename in bundle) {
+ const chunkOrAsset = bundle[filename];
+
+ if (chunkOrAsset.type !== "asset" && chunkOrAsset.isEntry) {
+ chunkOrAsset.exports.forEach((exportee) => {
+ components.set(exportee, {});
+ });
+
+ const shared_types = new Set();
+
+ Object.keys(chunkOrAsset.modules)
+ .sort()
+ .forEach(async (filename) => {
+ const { dir, ext, name } = path.parse(filename);
+ const moduleName = name.replace(/\./g, "");
+
+ if (ext === ".svelte" && components.has(moduleName)) {
+ const group = dir.split("src/").pop().split("/")[0];
+
+ if (groups.has(group)) {
+ groups.set(group, [...groups.get(group), moduleName]);
+ } else {
+ groups.set(group, [moduleName]);
+ }
+
+ const typedefs = [];
+ const source = fs.readFileSync(filename, "utf-8");
+ const component = parseComponent(source, {
+ component: moduleName,
+ onTypeDef: (tag) => {
+ if (shared_types.has(tag.name)) return;
+ shared_types.add(tag.name);
+ typedefs.push(tag);
+ },
+ });
+
+ components.set(moduleName, { typedefs, component });
+ }
+ });
+ }
+ }
+ },
+ writeBundle() {
+ const { code: types } = generateTypes(components, pkg);
+ fs.writeFileSync(pkg.types, format(types, { parser: "typescript" }));
+
+ const { code: index } = generateIndex(components, groups, pkg);
+ fs.writeFileSync(
+ "./COMPONENT_INDEX.md",
+ format(index, { parser: "markdown" })
+ );
+ },
+ };
+}
+
+export default pluginGenerateDocs;
diff --git a/src/Checkbox/Checkbox.Story.svelte b/src/Checkbox/Checkbox.Story.svelte
index 6c795847..aa24e490 100644
--- a/src/Checkbox/Checkbox.Story.svelte
+++ b/src/Checkbox/Checkbox.Story.svelte
@@ -9,14 +9,14 @@
indeterminate,
disabled,
hideLabel,
- wrapperClassName
+ wrapperClassName,
} = $$props;
const checkboxProps = {
labelText,
indeterminate,
disabled,
hideLabel,
- wrapperClassName
+ wrapperClassName,
};
let checked = true;
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index b6737180..9f92fe21 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -1,8 +1,4 @@
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index c3fb01d2..47708ef4 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -16,7 +16,17 @@
* @type {string} [placeholder=""]
*/
export let placeholder = "";
+
+ /**
+ * Specify the Regular Expression for the input value
+ * @type {string} [placeholder="\\d{1,2}\\/\\d{1,2}\\/\\d{4}"]
+ */
export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
+
+ /**
+ * Set to `true` to disable the input
+ * @type {boolean} [disabled=false]
+ */
export let disabled = false;
/**
@@ -30,7 +40,17 @@
* @type {string} [id]
*/
export let id = "ccs-" + Math.random().toString(36);
+
+ /**
+ * Specify the label text
+ * @type {string} [labelText=""]
+ */
export let labelText = "";
+
+ /**
+ * Set to `true` to visually hide the label text
+ * @type {boolean} [hideLabel=false]
+ */
export let hideLabel = false;
/**
@@ -45,6 +65,10 @@
*/
export let invalidText = "";
+ /**
+ * Set a name for the input element
+ * @type {string} [name=""]
+ */
export let name = undefined;
/**
diff --git a/src/Dropdown/Dropdown.Story.svelte b/src/Dropdown/Dropdown.Story.svelte
index cdadcd22..26bcb5c6 100644
--- a/src/Dropdown/Dropdown.Story.svelte
+++ b/src/Dropdown/Dropdown.Story.svelte
@@ -9,7 +9,7 @@
{ id: "option-0", text: "Option 1" },
{ id: "option-1", text: "Option 2" },
{ id: "option-2", text: "Option 3" },
- { id: "option-3", text: "Option 4" }
+ { id: "option-3", text: "Option 4" },
];
$: selectedIndex = -1;
diff --git a/src/Dropdown/Dropdown.svelte b/src/Dropdown/Dropdown.svelte
index 9cc881ba..6b980b0c 100644
--- a/src/Dropdown/Dropdown.svelte
+++ b/src/Dropdown/Dropdown.svelte
@@ -1,10 +1,4 @@