# Component Index

> 172 components exported from carbon-components-svelte@0.39.0.

## Components

- [`Accordion`](#accordion)
- [`AccordionItem`](#accordionitem)
- [`AccordionSkeleton`](#accordionskeleton)
- [`AspectRatio`](#aspectratio)
- [`Breadcrumb`](#breadcrumb)
- [`BreadcrumbItem`](#breadcrumbitem)
- [`BreadcrumbSkeleton`](#breadcrumbskeleton)
- [`Breakpoint`](#breakpoint)
- [`Button`](#button)
- [`ButtonSet`](#buttonset)
- [`ButtonSkeleton`](#buttonskeleton)
- [`Checkbox`](#checkbox)
- [`CheckboxSkeleton`](#checkboxskeleton)
- [`ClickableTile`](#clickabletile)
- [`CodeSnippet`](#codesnippet)
- [`CodeSnippetSkeleton`](#codesnippetskeleton)
- [`Column`](#column)
- [`ComboBox`](#combobox)
- [`ComposedModal`](#composedmodal)
- [`Content`](#content)
- [`ContentSwitcher`](#contentswitcher)
- [`ContextMenu`](#contextmenu)
- [`ContextMenuDivider`](#contextmenudivider)
- [`ContextMenuGroup`](#contextmenugroup)
- [`ContextMenuOption`](#contextmenuoption)
- [`ContextMenuRadioGroup`](#contextmenuradiogroup)
- [`Copy`](#copy)
- [`CopyButton`](#copybutton)
- [`DataTable`](#datatable)
- [`DataTableSkeleton`](#datatableskeleton)
- [`DatePicker`](#datepicker)
- [`DatePickerInput`](#datepickerinput)
- [`DatePickerSkeleton`](#datepickerskeleton)
- [`Dropdown`](#dropdown)
- [`DropdownSkeleton`](#dropdownskeleton)
- [`ExpandableTile`](#expandabletile)
- [`FileUploader`](#fileuploader)
- [`FileUploaderButton`](#fileuploaderbutton)
- [`FileUploaderDropContainer`](#fileuploaderdropcontainer)
- [`FileUploaderItem`](#fileuploaderitem)
- [`FileUploaderSkeleton`](#fileuploaderskeleton)
- [`Filename`](#filename)
- [`FluidForm`](#fluidform)
- [`Form`](#form)
- [`FormGroup`](#formgroup)
- [`FormItem`](#formitem)
- [`FormLabel`](#formlabel)
- [`Grid`](#grid)
- [`Header`](#header)
- [`HeaderAction`](#headeraction)
- [`HeaderActionLink`](#headeractionlink)
- [`HeaderActionSearch`](#headeractionsearch)
- [`HeaderGlobalAction`](#headerglobalaction)
- [`HeaderNav`](#headernav)
- [`HeaderNavItem`](#headernavitem)
- [`HeaderNavMenu`](#headernavmenu)
- [`HeaderPanelDivider`](#headerpaneldivider)
- [`HeaderPanelLink`](#headerpanellink)
- [`HeaderPanelLinks`](#headerpanellinks)
- [`HeaderSearch`](#headersearch)
- [`HeaderUtilities`](#headerutilities)
- [`Icon`](#icon)
- [`IconSkeleton`](#iconskeleton)
- [`ImageLoader`](#imageloader)
- [`InlineLoading`](#inlineloading)
- [`InlineNotification`](#inlinenotification)
- [`Link`](#link)
- [`ListBox`](#listbox)
- [`ListBoxField`](#listboxfield)
- [`ListBoxMenu`](#listboxmenu)
- [`ListBoxMenuIcon`](#listboxmenuicon)
- [`ListBoxMenuItem`](#listboxmenuitem)
- [`ListBoxSelection`](#listboxselection)
- [`ListItem`](#listitem)
- [`Loading`](#loading)
- [`LocalStorage`](#localstorage)
- [`Modal`](#modal)
- [`ModalBody`](#modalbody)
- [`ModalFooter`](#modalfooter)
- [`ModalHeader`](#modalheader)
- [`MultiSelect`](#multiselect)
- [`NotificationActionButton`](#notificationactionbutton)
- [`NotificationButton`](#notificationbutton)
- [`NotificationIcon`](#notificationicon)
- [`NotificationTextDetails`](#notificationtextdetails)
- [`NumberInput`](#numberinput)
- [`NumberInputSkeleton`](#numberinputskeleton)
- [`OrderedList`](#orderedlist)
- [`OutboundLink`](#outboundlink)
- [`OverflowMenu`](#overflowmenu)
- [`OverflowMenuItem`](#overflowmenuitem)
- [`Pagination`](#pagination)
- [`PaginationNav`](#paginationnav)
- [`PaginationSkeleton`](#paginationskeleton)
- [`PasswordInput`](#passwordinput)
- [`Popover`](#popover)
- [`ProgressBar`](#progressbar)
- [`ProgressIndicator`](#progressindicator)
- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton)
- [`ProgressStep`](#progressstep)
- [`RadioButton`](#radiobutton)
- [`RadioButtonGroup`](#radiobuttongroup)
- [`RadioButtonSkeleton`](#radiobuttonskeleton)
- [`RadioTile`](#radiotile)
- [`RecursiveList`](#recursivelist)
- [`Row`](#row)
- [`Search`](#search)
- [`SearchSkeleton`](#searchskeleton)
- [`Select`](#select)
- [`SelectItem`](#selectitem)
- [`SelectItemGroup`](#selectitemgroup)
- [`SelectSkeleton`](#selectskeleton)
- [`SelectableTile`](#selectabletile)
- [`SideNav`](#sidenav)
- [`SideNavDivider`](#sidenavdivider)
- [`SideNavItems`](#sidenavitems)
- [`SideNavLink`](#sidenavlink)
- [`SideNavMenu`](#sidenavmenu)
- [`SideNavMenuItem`](#sidenavmenuitem)
- [`SkeletonPlaceholder`](#skeletonplaceholder)
- [`SkeletonText`](#skeletontext)
- [`SkipToContent`](#skiptocontent)
- [`Slider`](#slider)
- [`SliderSkeleton`](#sliderskeleton)
- [`StructuredList`](#structuredlist)
- [`StructuredListBody`](#structuredlistbody)
- [`StructuredListCell`](#structuredlistcell)
- [`StructuredListHead`](#structuredlisthead)
- [`StructuredListInput`](#structuredlistinput)
- [`StructuredListRow`](#structuredlistrow)
- [`StructuredListSkeleton`](#structuredlistskeleton)
- [`Switch`](#switch)
- [`Tab`](#tab)
- [`TabContent`](#tabcontent)
- [`Table`](#table)
- [`TableBody`](#tablebody)
- [`TableCell`](#tablecell)
- [`TableContainer`](#tablecontainer)
- [`TableHead`](#tablehead)
- [`TableHeader`](#tableheader)
- [`TableRow`](#tablerow)
- [`Tabs`](#tabs)
- [`TabsSkeleton`](#tabsskeleton)
- [`Tag`](#tag)
- [`TagSkeleton`](#tagskeleton)
- [`TextArea`](#textarea)
- [`TextAreaSkeleton`](#textareaskeleton)
- [`TextInput`](#textinput)
- [`TextInputSkeleton`](#textinputskeleton)
- [`Theme`](#theme)
- [`Tile`](#tile)
- [`TileGroup`](#tilegroup)
- [`TimePicker`](#timepicker)
- [`TimePickerSelect`](#timepickerselect)
- [`ToastNotification`](#toastnotification)
- [`Toggle`](#toggle)
- [`ToggleSkeleton`](#toggleskeleton)
- [`ToggleSmall`](#togglesmall)
- [`ToggleSmallSkeleton`](#togglesmallskeleton)
- [`Toolbar`](#toolbar)
- [`ToolbarBatchActions`](#toolbarbatchactions)
- [`ToolbarContent`](#toolbarcontent)
- [`ToolbarMenu`](#toolbarmenu)
- [`ToolbarMenuItem`](#toolbarmenuitem)
- [`ToolbarSearch`](#toolbarsearch)
- [`Tooltip`](#tooltip)
- [`TooltipDefinition`](#tooltipdefinition)
- [`TooltipFooter`](#tooltipfooter)
- [`TooltipIcon`](#tooltipicon)
- [`TreeView`](#treeview)
- [`Truncate`](#truncate)
- [`UnorderedList`](#unorderedlist)

---

## `Accordion`

### Props

| Prop name | Kind             | Reactive | Type                              | Default value      | Description                                      |
| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
| align     | <code>let</code> | No       | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size      | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>     | --                 | Specify the size of the accordion                |
| disabled  | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to disable the accordion           |
| skeleton  | <code>let</code> | No       | <code>boolean</code>              | <code>false</code> | Set to `true` to display the skeleton state      |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `AccordionItem`

### Props

| Prop name       | Kind             | Reactive | Type                 | Default value                  | Description                                                                                                                              |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
| disabled        | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to disable the accordion item                                                                                              |
| open            | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to open the first accordion item                                                                                           |
| title           | <code>let</code> | No       | <code>string</code>  | <code>"title"</code>           | Specify the title of the accordion item heading<br />Alternatively, use the "title" slot (e.g., &lt;div slot="title"&gt;...&lt;/div&gt;) |
| iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon                                                                               |

### Slots

| Slot name | Default | Props | Fallback             |
| :-------- | :------ | :---- | :------------------- |
| --        | Yes     | --    | --                   |
| title     | No      | --    | <code>{title}</code> |

### Events

| Event name   | Type      | Detail |
| :----------- | :-------- | :----- |
| animationend | forwarded | --     |
| click        | forwarded | --     |
| mouseover    | forwarded | --     |
| mouseenter   | forwarded | --     |
| mouseleave   | forwarded | --     |
| keydown      | forwarded | --     |

## `AccordionSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                              | Default value      | Description                                      |
| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
| count     | <code>let</code> | No       | <code>number</code>               | <code>4</code>     | Specify the number of accordion items to render  |
| align     | <code>let</code> | No       | <code>"start" &#124; "end"</code> | <code>"end"</code> | Specify alignment of accordion item chevron icon |
| size      | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>     | --                 | Specify the size of the accordion                |
| open      | <code>let</code> | No       | <code>boolean</code>              | <code>true</code>  | Set to `false` to close the first accordion item |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `AspectRatio`

### Props

| Prop name | Kind             | Reactive | Type                                                                                                            | Default value      | Description              |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio     | <code>let</code> | No       | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `Breadcrumb`

### Props

| Prop name       | Kind             | Reactive | Type                 | Default value      | Description                                         |
| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- |
| noTrailingSlash | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the breadcrumb trailing slash |
| skeleton        | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to display skeleton state             |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `BreadcrumbItem`

### Props

| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                                                      |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- |
| href          | <code>let</code> | No       | <code>string</code>  | --                 | Set the `href` to use an anchor link                             |
| isCurrentPage | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` if the breadcrumb item represents the current page |

### Slots

| Slot name | Default | Props                                                                     | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------ | :------- |
| --        | Yes     | <code>{props?: { ["aria-current"]?: string; class: "bx--link"; }} </code> | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `BreadcrumbSkeleton`

### Props

| Prop name       | Kind             | Reactive | Type                 | Default value      | Description                                         |
| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- |
| noTrailingSlash | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the breadcrumb trailing slash |
| count           | <code>let</code> | No       | <code>number</code>  | <code>3</code>     | Specify the number of breadcrumb items to render    |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Breakpoint`

### Types

```ts
export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";

export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
```

### Props

| Prop name   | Kind               | Reactive | Type                                                 | Default value                                                             | Description                                       |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes       | <code>let</code>   | Yes      | <code>Record<BreakpointSize, boolean></code>         | <code>{ sm: false, md: false, lg: false, xlg: false, max: false, }</code> | Carbon grid sizes as an object                    |
| size        | <code>let</code>   | Yes      | <code>BreakpointSize</code>                          | --                                                                        | Determine the current Carbon grid breakpoint size |
| breakpoints | <code>const</code> | No       | <code>Record<BreakpointSize, BreakpointValue></code> | <code>{ sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, }</code>        | Reference the Carbon grid breakpoints             |

### Slots

| Slot name | Default | Props                                                                           | Fallback |
| :-------- | :------ | :------------------------------------------------------------------------------ | :------- |
| --        | Yes     | <code>{ size: BreakpointSize; sizes: Record<BreakpointSize, boolean>; } </code> | --       |

### Events

| Event name | Type       | Detail                                                                   |
| :--------- | :--------- | :----------------------------------------------------------------------- |
| match      | dispatched | <code>{ size: BreakpointSize; breakpointValue: BreakpointValue; }</code> |

## `Button`

### Props

| Prop name        | Kind             | Reactive | Type                                                                                                                                      | Default value          | Description                                                                                                                                                                                   |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref              | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                       | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
| hasIconOnly      | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` for the icon-only variant                                                                                                                                                       |
| kind             | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
| size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code>                                                              | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
| expressive       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
| isSelected       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                              | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
| iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Specify the ARIA label for the button icon                                                                                                                                                    |
| tooltipAlignment | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true`                                                                                                |
| tooltipPosition  | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code>                                                                           | <code>"bottom"</code>  | Set the position of the tooltip relative to the icon                                                                                                                                          |
| as               | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) |
| skeleton         | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to display the skeleton state                                                                                                                                                   |
| disabled         | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to disable the button                                                                                                                                                           |
| href             | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Set the `href` to use an anchor link                                                                                                                                                          |
| tabindex         | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>"0"</code>       | Specify the tabindex                                                                                                                                                                          |
| type             | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>"button"</code>  | Specify the `type` attribute for the button element                                                                                                                                           |

### Slots

| Slot name | Default | Props                                                                                                                                           | Fallback |
| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- |
| --        | Yes     | <code>{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } </code> | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ButtonSet`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| stacked   | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to stack the buttons vertically |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ButtonSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                                                                         | Default value          | Description                          |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| href      | <code>let</code> | No       | <code>string</code>                                                          | --                     | Set the `href` to use an anchor link |
| size      | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button skeleton  |
| small     | <code>let</code> | No       | <code>boolean</code>                                                         | <code>false</code>     | --                                   |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Checkbox`

### Props

| Prop name     | Kind             | Reactive | Type                                      | Default value                                    | Description                                       |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element      |
| checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
| indeterminate | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
| skeleton      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
| readonly      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |
| disabled      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the checkbox             |
| labelText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                            |
| hideLabel     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text     |
| name          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Set a name for the input element                  |
| title         | <code>let</code> | No       | <code>string</code>                       | --                                               | Specify the title attribute for the label element |
| id            | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input label                     |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail               |
| :--------- | :--------- | :------------------- |
| check      | dispatched | <code>boolean</code> |
| click      | forwarded  | --                   |
| mouseover  | forwarded  | --                   |
| mouseenter | forwarded  | --                   |
| mouseleave | forwarded  | --                   |
| change     | forwarded  | --                   |
| blur       | forwarded  | --                   |

## `CheckboxSkeleton`

### Props

None.

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ClickableTile`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| clicked   | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to click the tile           |
| light     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile         |
| href      | <code>let</code> | No       | <code>string</code>  | --                 | Set the `href`                            |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `CodeSnippet`

### Props

| Prop name             | Kind             | Reactive | Type                                                 | Default value                                                                                                     | Description                                                                                                                                                                   |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLPreElement</code>              | <code>null</code>                                                                                                 | Obtain a reference to the pre HTML element                                                                                                                                    |
| showMoreLess          | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to enable the show more/less button                                                                                                                             |
| expanded              | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to expand a multi-line code snippet (type="multi")                                                                                                              |
| type                  | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                                                                                             | Set the type of code snippet                                                                                                                                                  |
| code                  | <code>let</code> | No       | <code>string</code>                                  | --                                                                                                                | Set the code snippet text<br />Alternatively, use the default slot (e.g., &lt;CodeSnippet&gt;{`code`}&lt;/CodeSnippet&gt;)<br />You must use the `code` prop to copy the code |
| copy                  | <code>let</code> | No       | <code>(code: string) => void</code>                  | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text                                                                                |
| hideCopyButton        | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to hide the copy button                                                                                                                                         |
| disabled              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` for the disabled variant<br />Only applies to the "single", "multi" types                                                                                       |
| wrapText              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to wrap the text<br />Note that `type` must be "multi"                                                                                                          |
| light                 | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to enable the light variant                                                                                                                                     |
| skeleton              | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to display the skeleton state                                                                                                                                   |
| copyButtonDescription | <code>let</code> | No       | <code>string</code>                                  | --                                                                                                                | Specify the ARIA label for the copy button icon                                                                                                                               |
| copyLabel             | <code>let</code> | No       | <code>string</code>                                  | --                                                                                                                | Specify the ARIA label of the copy button                                                                                                                                     |
| feedback              | <code>let</code> | No       | <code>string</code>                                  | <code>"Copied!"</code>                                                                                            | Specify the feedback text displayed when clicking the snippet                                                                                                                 |
| feedbackTimeout       | <code>let</code> | No       | <code>number</code>                                  | <code>2000</code>                                                                                                 | Set the timeout duration (ms) to display feedback text                                                                                                                        |
| showLessText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show less"</code>                                                                                          | Specify the show less text<br />`type` must be "multi"                                                                                                                        |
| showMoreText          | <code>let</code> | No       | <code>string</code>                                  | <code>"Show more"</code>                                                                                          | Specify the show more text<br />`type` must be "multi"                                                                                                                        |
| id                    | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code>                                                                  | Set an id for the code element                                                                                                                                                |

### Slots

| Slot name | Default | Props | Fallback            |
| :-------- | :------ | :---- | :------------------ |
| --        | Yes     | --    | <code>{code}</code> |

### Events

| Event name   | Type       | Detail |
| :----------- | :--------- | :----- |
| click        | forwarded  | --     |
| mouseover    | forwarded  | --     |
| mouseenter   | forwarded  | --     |
| mouseleave   | forwarded  | --     |
| animationend | forwarded  | --     |
| copy         | dispatched | --     |

## `CodeSnippetSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                                 | Default value         | Description                  |
| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- |
| type      | <code>let</code> | No       | <code>"single" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Column`

### Types

```ts
export type ColumnSize = boolean | number;

export interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
```

### Props

| Prop name     | Kind             | Reactive | Type                                                                                               | Default value      | Description                                                                                                                                                                                           |
| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Column let:props&gt;&lt;article {...props}&gt;...&lt;/article&gt;&lt;/Column&gt;) |
| noGutter      | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                                    |
| noGutterLeft  | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                               |
| noGutterRight | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                              |
| padding       | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code> | Set to `true` to add top and bottom padding to the column                                                                                                                                             |
| aspectRatio   | <code>let</code> | No       | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | --                 | Specify the aspect ratio of the column                                                                                                                                                                |
| sm            | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the small breakpoint                                                                                                                                                                              |
| md            | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the medium breakpoint                                                                                                                                                                             |
| lg            | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the large breakpoint                                                                                                                                                                              |
| xlg           | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the extra large breakpoint                                                                                                                                                                        |
| max           | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | --                 | Set the maximum breakpoint                                                                                                                                                                            |

### Slots

| Slot name | Default | Props                                                         | Fallback |
| :-------- | :------ | :------------------------------------------------------------ | :------- |
| --        | Yes     | <code>{props: { class: string; [key: string]: any; }} </code> | --       |

### Events

None.

## `ComboBox`

### Types

```ts
export interface ComboBoxItem {
  id: string;
  text: string;
}
```

### Props

| Prop name        | Kind             | Reactive | Type                                                        | Default value                                         | Description                                                              |
| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
| listRef          | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                     | <code>null</code>                                     | Obtain a reference to the list HTML element                              |
| ref              | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                   | <code>null</code>                                     | Obtain a reference to the input HTML element                             |
| open             | <code>let</code> | Yes      | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to open the combobox menu dropdown                         |
| value            | <code>let</code> | Yes      | <code>string</code>                                         | <code>""</code>                                       | Specify the selected combobox value                                      |
| selectedIndex    | <code>let</code> | Yes      | <code>number</code>                                         | <code>-1</code>                                       | Set the selected item by value index                                     |
| items            | <code>let</code> | No       | <code>ComboBoxItem[]</code>                                 | <code>[]</code>                                       | Set the combobox items                                                   |
| itemToString     | <code>let</code> | No       | <code>(item: ComboBoxItem) => string</code>                 | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item                                  |
| direction        | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                          | <code>"bottom"</code>                                 | Specify the direction of the combobox dropdown menu                      |
| size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                               | --                                                    | Set the size of the combobox                                             |
| disabled         | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to disable the combobox                                    |
| titleText        | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the title text of the combobox                                   |
| placeholder      | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the placeholder text                                             |
| helperText       | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the helper text                                                  |
| invalidText      | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the invalid state text                                           |
| invalid          | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to indicate an invalid state                               |
| warn             | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to indicate an warning state                               |
| warnText         | <code>let</code> | No       | <code>string</code>                                         | <code>""</code>                                       | Specify the warning state text                                           |
| light            | <code>let</code> | No       | <code>boolean</code>                                        | <code>false</code>                                    | Set to `true` to enable the light variant                                |
| shouldFilterItem | <code>let</code> | No       | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code>                               | Determine if an item should be filtered given the current combobox value |
| translateWithId  | <code>let</code> | No       | <code>(id: any) => string</code>                            | --                                                    | Override the default translation ids                                     |
| id               | <code>let</code> | No       | <code>string</code>                                         | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component                                     |
| name             | <code>let</code> | No       | <code>string</code>                                         | --                                                    | Specify a name attribute for the input                                   |

### Slots

None.

### Events

| Event name | Type       | Detail                                                                                 |
| :--------- | :--------- | :------------------------------------------------------------------------------------- |
| select     | dispatched | <code>{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }</code> |
| keydown    | forwarded  | --                                                                                     |
| keyup      | forwarded  | --                                                                                     |
| focus      | forwarded  | --                                                                                     |
| blur       | forwarded  | --                                                                                     |
| clear      | forwarded  | --                                                                                     |
| scroll     | forwarded  | --                                                                                     |

## `ComposedModal`

### Props

| Prop name                  | Kind             | Reactive | Type                                      | Default value                             | Description                                                           |
| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
| ref                        | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>   | <code>null</code>                         | Obtain a reference to the top-level HTML element                      |
| open                       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to open the modal                                       |
| size                       | <code>let</code> | No       | <code>"xs" &#124; "sm" &#124; "lg"</code> | --                                        | Set the size of the composed modal                                    |
| danger                     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to use the danger variant                               |
| preventCloseOnClickOutside | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to prevent the modal from closing when clicking outside |
| containerClass             | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                           | Specify a class for the inner modal                                   |
| selectorPrimaryFocus       | <code>let</code> | No       | <code>null &#124; string</code>           | <code>"[data-modal-primary-focus]"</code> | Specify a selector to be focused when opening the modal               |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name            | Type       | Detail                          |
| :-------------------- | :--------- | :------------------------------ |
| transitionend         | dispatched | <code>{ open: boolean; }</code> |
| keydown               | forwarded  | --                              |
| click                 | forwarded  | --                              |
| mouseover             | forwarded  | --                              |
| mouseenter            | forwarded  | --                              |
| mouseleave            | forwarded  | --                              |
| submit                | dispatched | --                              |
| click:button--primary | dispatched | --                              |
| close                 | dispatched | --                              |
| open                  | dispatched | --                              |

## `Content`

### Props

| Prop name | Kind             | Reactive | Type                | Default value               | Description                         |
| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- |
| id        | <code>let</code> | No       | <code>string</code> | <code>"main-content"</code> | Specify the id for the main element |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ContentSwitcher`

### Props

| Prop name     | Kind             | Reactive | Type                          | Default value      | Description                               |
| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- |
| selectedIndex | <code>let</code> | Yes      | <code>number</code>           | <code>0</code>     | Set the selected index of the switch item |
| light         | <code>let</code> | No       | <code>boolean</code>          | <code>false</code> | Set to `true` to enable the light variant |
| size          | <code>let</code> | No       | <code>"sm" &#124; "xl"</code> | --                 | Specify the size of the content switcher  |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>number</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |

## `ContextMenu`

### Props

| Prop name | Kind             | Reactive | Type                                      | Default value      | Description                                                                      |
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code> | <code>null</code>  | Obtain a reference to the unordered list HTML element                            |
| y         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the vertical offset of the menu position                                 |
| x         | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the horizontal offset of the menu position                               |
| open      | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to open the menu<br />Either `x` and `y` must be greater than zero |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| keydown    | forwarded  | --     |
| open       | dispatched | --     |
| close      | dispatched | --     |

## `ContextMenuDivider`

### Props

None.

### Slots

None.

### Events

None.

## `ContextMenuGroup`

### Props

| Prop name   | Kind             | Reactive | Type                  | Default value   | Description            |
| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- |
| selectedIds | <code>let</code> | Yes      | <code>string[]</code> | <code>[]</code> | --                     |
| labelText   | <code>let</code> | No       | <code>string</code>   | <code>""</code> | Specify the label text |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ContextMenuOption`

### Props

| Prop name    | Kind             | Reactive | Type                                                         | Default value                                    | Description                                                                                                                        |
| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLLIElement</code>                       | <code>null</code>                                | Obtain a reference to the list item HTML element                                                                                   |
| selectable   | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true`                            |
| selected     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to use the selected variant                                                                                          |
| icon         | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render<br />Icon is rendered to the left of the label text                          |
| indented     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to indent the label                                                                                                  |
| kind         | <code>let</code> | No       | <code>"default" &#124; "danger"</code>                       | <code>"default"</code>                           | Specify the kind of option                                                                                                         |
| disabled     | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                         |
| labelText    | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text<br />Alternatively, use the "labelText" slot (e.g., &lt;span slot="labelText"&gt;...&lt;/span&gt;)          |
| shortcutText | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the shortcut text<br />Alternatively, use the "shortcutText" slot (e.g., &lt;span slot="shortcutText"&gt;...&lt;/span&gt;) |
| id           | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group                   |

### Slots

| Slot name    | Default | Props | Fallback                    |
| :----------- | :------ | :---- | :-------------------------- |
| --           | Yes     | --    | --                          |
| labelText    | No      | --    | <code>{labelText}</code>    |
| shortcutText | No      | --    | <code>{shortcutText}</code> |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| keydown    | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| click      | dispatched | --     |

## `ContextMenuRadioGroup`

### Props

| Prop name  | Kind             | Reactive | Type                | Default value   | Description                     |
| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- |
| selectedId | <code>let</code> | Yes      | <code>string</code> | <code>""</code> | Set the selected radio group id |
| labelText  | <code>let</code> | No       | <code>string</code> | <code>""</code> | Specify the label text          |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `Copy`

### Props

| Prop name       | Kind             | Reactive | Type                                       | Default value          | Description                                            |
| :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>      | Obtain a reference to the button HTML element          |
| feedback        | <code>let</code> | No       | <code>string</code>                        | <code>"Copied!"</code> | Set the feedback text shown after clicking the button  |
| feedbackTimeout | <code>let</code> | No       | <code>number</code>                        | <code>2000</code>      | Set the timeout duration (ms) to display feedback text |

### Slots

| Slot name | Default | Props | Fallback                                                                           |
| :-------- | :------ | :---- | :--------------------------------------------------------------------------------- |
| --        | Yes     | --    | <code>{#if animation}{feedback &#124;&#124; $$restProps["aria-label"]}{/if}</code> |

### Events

| Event name   | Type      | Detail |
| :----------- | :-------- | :----- |
| click        | forwarded | --     |
| animationend | forwarded | --     |

## `CopyButton`

### Props

| Prop name       | Kind             | Reactive | Type                                | Default value                                                                                                     | Description                                                                                    |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| iconDescription | <code>let</code> | No       | <code>string</code>                 | <code>"Copy to clipboard"</code>                                                                                  | Set the title and ARIA label for the copy button                                               |
| text            | <code>let</code> | No       | <code>string</code>                 | --                                                                                                                | Specify the text to copy                                                                       |
| copy            | <code>let</code> | No       | <code>(text: string) => void</code> | <code>async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } }</code> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |

### Slots

None.

### Events

| Event name   | Type       | Detail |
| :----------- | :--------- | :----- |
| click        | forwarded  | --     |
| animationend | forwarded  | --     |
| copy         | dispatched | --     |

## `DataTable`

### Types

```ts
export type DataTableKey = string;

export type DataTableValue = any;

export interface DataTableEmptyHeader {
  key: DataTableKey;
  empty: boolean;
  display?: (item: Value) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
  columnMenu?: boolean;
}

export interface DataTableNonEmptyHeader {
  key: DataTableKey;
  value: DataTableValue;
  display?: (item: Value) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1);
  columnMenu?: boolean;
}

export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;

export interface DataTableRow {
  id: any;
  [key: string]: DataTableValue;
}

export type DataTableRowId = string;

export interface DataTableCell {
  key: DataTableKey;
  value: DataTableValue;
  display?: (item: Value) => DataTableValue;
}
```

### Props

| Prop name      | Kind             | Reactive | Type                                                                | Default value      | Description                                                                                                         |
| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
| selectedRowIds | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>    | Specify the row ids to be selected                                                                                  |
| selectable     | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the selectable variant<br />Automatically set to `true` if `radio` or `batchSelection` are `true` |
| expandedRowIds | <code>let</code> | Yes      | <code>DataTableRowId[]</code>                                       | <code>[]</code>    | Specify the row ids to be expanded                                                                                  |
| expandable     | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the expandable variant<br />Automatically set to `true` if `batchExpansion` is `true`             |
| rows           | <code>let</code> | Yes      | <code>DataTableRow[]</code>                                         | <code>[]</code>    | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids               |
| headers        | <code>let</code> | No       | <code>DataTableHeader[]</code>                                      | <code>[]</code>    | Specify the data table headers                                                                                      |
| size           | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | --                 | Set the size of the data table                                                                                      |
| title          | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>    | Specify the title of the data table                                                                                 |
| description    | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>    | Specify the description of the data table                                                                           |
| zebra          | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use zebra styles                                                                                   |
| sortable       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the sortable variant                                                                              |
| batchExpansion | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable batch expansion                                                                             |
| radio          | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the radio selection variant                                                                       |
| batchSelection | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable batch selection                                                                             |
| stickyHeader   | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable a sticky header                                                                             |
| useStaticWidth | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use static width                                                                                   |

### Slots

| Slot name    | Default | Props                                                     | Fallback                                                            |
| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ |
| --           | Yes     | --                                                        | --                                                                  |
| cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
| cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>        | <code>{header.value}</code>                                         |
| description  | No      | --                                                        | <code>{description}</code>                                          |
| expanded-row | No      | <code>{ row: DataTableRow; } </code>                      | --                                                                  |
| title        | No      | --                                                        | <code>{title}</code>                                                |

### Events

| Event name           | Type       | Detail                                                                                                  |
| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ |
| click                | dispatched | <code>{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }</code>                    |
| click:header--expand | dispatched | <code>{ expanded: boolean; }</code>                                                                     |
| click:header         | dispatched | <code>{ header: DataTableHeader; sortDirection?: "ascending" &#124; "descending" &#124; "none" }</code> |
| click:row            | dispatched | <code>DataTableRow</code>                                                                               |
| mouseenter:row       | dispatched | <code>DataTableRow</code>                                                                               |
| mouseleave:row       | dispatched | <code>DataTableRow</code>                                                                               |
| click:row--expand    | dispatched | <code>{ expanded: boolean; row: DataTableRow; }</code>                                                  |
| click:cell           | dispatched | <code>DataTableCell</code>                                                                              |

## `DataTableSkeleton`

### Props

| Prop name   | Kind             | Reactive | Type                                                    | Default value      | Description                                                                                  |
| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
| columns     | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>     | Specify the number of columns<br />Superseded by `headers` if `headers` is a non-empty array |
| rows        | <code>let</code> | No       | <code>number</code>                                     | <code>5</code>     | Specify the number of rows                                                                   |
| size        | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code>     | --                 | Set the size of the data table                                                               |
| zebra       | <code>let</code> | No       | <code>boolean</code>                                    | <code>false</code> | Set to `true` to apply zebra styles to the datatable rows                                    |
| showHeader  | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>  | Set to `false` to hide the header                                                            |
| headers     | <code>let</code> | No       | <code>string[] &#124; Partial<DataTableHeader>[]</code> | <code>[]</code>    | Set the column headers<br />Supersedes `columns` if value is a non-empty array               |
| showToolbar | <code>let</code> | No       | <code>boolean</code>                                    | <code>true</code>  | Set to `false` to hide the toolbar                                                           |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `DatePicker`

### Props

| Prop name      | Kind             | Reactive | Type                                                 | Default value                                    | Description                                                                                       |
| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| valueTo        | <code>let</code> | Yes      | <code>string</code>                                  | <code>""</code>                                  | Specify the date picker end date value (to)<br />Only works with the "range" date picker type     |
| valueFrom      | <code>let</code> | Yes      | <code>string</code>                                  | <code>""</code>                                  | Specify the date picker start date value (from)<br />Only works with the "range" date picker type |
| value          | <code>let</code> | Yes      | <code>number &#124; string</code>                    | <code>""</code>                                  | Specify the date picker input value                                                               |
| datePickerType | <code>let</code> | No       | <code>"simple" &#124; "single" &#124; "range"</code> | <code>"simple"</code>                            | Specify the date picker type                                                                      |
| dateFormat     | <code>let</code> | No       | <code>string</code>                                  | <code>"m/d/Y"</code>                             | Specify the date format                                                                           |
| maxDate        | <code>let</code> | No       | <code>null &#124; string &#124; Date</code>          | <code>null</code>                                | Specify the maximum date                                                                          |
| minDate        | <code>let</code> | No       | <code>null &#124; string &#124; Date</code>          | <code>null</code>                                | Specify the minimum date                                                                          |
| locale         | <code>let</code> | No       | <code>string</code>                                  | <code>"en"</code>                                | Specify the locale                                                                                |
| short          | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to use the short variant                                                            |
| light          | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                               | Set to `true` to enable the light variant                                                         |
| id             | <code>let</code> | No       | <code>string</code>                                  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element                                                             |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail                                                                                                                              |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
| change     | dispatched | <code>string &#124; { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string &#124; { from: string; to: string; } }</code> |
| click      | forwarded  | --                                                                                                                                  |
| mouseover  | forwarded  | --                                                                                                                                  |
| mouseenter | forwarded  | --                                                                                                                                  |
| mouseleave | forwarded  | --                                                                                                                                  |

## `DatePickerInput`

### Props

| Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                        |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element       |
| size            | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | --                                               | Set the size of the input                          |
| type            | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                              | Specify the input type                             |
| placeholder     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
| pattern         | <code>let</code> | No       | <code>string</code>                       | <code>"\\d{1,2}\\/\\d{1,2}\\/\\d{4}"</code>      | Specify the Regular Expression for the input value |
| disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                 |
| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the ARIA label for the calendar icon       |
| id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                    |
| labelText       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                             |
| hideLabel       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text      |
| invalid         | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an invalid state         |
| invalidText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the invalid state text                     |
| warn            | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state         |
| warnText        | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                     |
| name            | <code>let</code> | No       | <code>string</code>                       | --                                               | Set a name for the input element                   |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| input      | forwarded | --     |
| keydown    | forwarded | --     |
| keyup      | forwarded | --     |
| blur       | forwarded | --     |

## `DatePickerSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value                                    | Description                               |
| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- |
| range     | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the range variant    |
| id        | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id to be used by the label element |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Dropdown`

### Types

```ts
export type DropdownItemId = string;

export type DropdownItemText = string;

export interface DropdownItem {
  id: DropdownItemId;
  text: DropdownItemText;
}
```

### Props

| Prop name       | Kind             | Reactive | Type                                        | Default value                                         | Description                                   |
| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>  | <code>null</code>                                     | Obtain a reference to the button HTML element |
| inline          | <code>let</code> | Yes      | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to use the inline variant       |
| open            | <code>let</code> | Yes      | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to open the dropdown            |
| selectedIndex   | <code>let</code> | Yes      | <code>number</code>                         | <code>-1</code>                                       | Specify the selected item index               |
| items           | <code>let</code> | No       | <code>DropdownItem[]</code>                 | <code>[]</code>                                       | Set the dropdown items                        |
| itemToString    | <code>let</code> | No       | <code>(item: DropdownItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a dropdown item       |
| type            | <code>let</code> | No       | <code>"default" &#124; "inline"</code>      | <code>"default"</code>                                | Specify the type of dropdown                  |
| direction       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>          | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu    |
| size            | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>   | --                                                    | Specify the size of the dropdown field        |
| light           | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to enable the light variant     |
| disabled        | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to disable the dropdown         |
| titleText       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the title text                        |
| invalid         | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to indicate an invalid state    |
| invalidText     | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the invalid state text                |
| warn            | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to indicate an warning state    |
| warnText        | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the warning state text                |
| helperText      | <code>let</code> | No       | <code>string</code>                         | <code>""</code>                                       | Specify the helper text                       |
| label           | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify the list box label                    |
| hideLabel       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>                                    | Set to `true` to visually hide the label text |
| translateWithId | <code>let</code> | No       | <code>(id: any) => string</code>            | --                                                    | Override the default translation ids          |
| id              | <code>let</code> | No       | <code>string</code>                         | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component          |
| name            | <code>let</code> | No       | <code>string</code>                         | --                                                    | Specify a name attribute for the list box     |

### Slots

None.

### Events

| Event name | Type       | Detail                                                                                         |
| :--------- | :--------- | :--------------------------------------------------------------------------------------------- |
| select     | dispatched | <code>{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }</code> |

## `DropdownSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                             |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| inline    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the inline variant |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ExpandableTile`

### Props

| Prop name             | Kind             | Reactive | Type                                       | Default value                                    | Description                                           |
| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref                   | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the top-level element           |
| tilePadding           | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the padding of the tile (number of pixels)    |
| tileMaxHeight         | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the max height of the tile (number of pixels) |
| expanded              | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to expand the tile                      |
| light                 | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant             |
| tileCollapsedIconText | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
| tileExpandedIconText  | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
| tileExpandedLabel     | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the expanded tile           |
| tileCollapsedLabel    | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the collapsed tile          |
| tabindex              | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                  |
| id                    | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level div element               |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| above     | No      | --    | --       |
| below     | No      | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keypress   | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `FileUploader`

### Props

| Prop name        | Kind               | Reactive | Type                                                                                       | Default value                           | Description                                                           |
| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- |
| files            | <code>let</code>   | Yes      | <code>File[]</code>                                                                        | <code>[]</code>                         | Obtain the uploaded file names                                        |
| status           | <code>let</code>   | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code>                                   | <code>"uploading"</code>                | Specify the file uploader status                                      |
| accept           | <code>let</code>   | No       | <code>string[]</code>                                                                      | <code>[]</code>                         | Specify the accepted file types                                       |
| multiple         | <code>let</code>   | No       | <code>boolean</code>                                                                       | <code>false</code>                      | Set to `true` to allow multiple files                                 |
| clearFiles       | <code>const</code> | No       | <code>() => void</code>                                                                    | <code>() => { files = []; }</code>      | Override the default behavior of clearing the array of uploaded files |
| labelDescription | <code>let</code>   | No       | <code>string</code>                                                                        | <code>""</code>                         | Specify the label description                                         |
| labelTitle       | <code>let</code>   | No       | <code>string</code>                                                                        | <code>""</code>                         | Specify the label title                                               |
| kind             | <code>let</code>   | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | <code>"primary"</code>                  | Specify the kind of file uploader button                              |
| buttonLabel      | <code>let</code>   | No       | <code>string</code>                                                                        | <code>""</code>                         | Specify the button label                                              |
| iconDescription  | <code>let</code>   | No       | <code>string</code>                                                                        | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons                      |
| name             | <code>let</code>   | No       | <code>string</code>                                                                        | <code>""</code>                         | Specify a name attribute for the file button uploader input           |

### Slots

None.

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| add        | dispatched | <code>File[]</code> |
| remove     | dispatched | <code>File[]</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |
| change     | forwarded  | --                  |
| keydown    | forwarded  | --                  |

## `FileUploaderButton`

### Props

| Prop name           | Kind             | Reactive | Type                                                                                       | Default value                                    | Description                                  |
| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
| ref                 | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                  | <code>null</code>                                | Obtain a reference to the input HTML element |
| labelText           | <code>let</code> | Yes      | <code>string</code>                                                                        | <code>"Add file"</code>                          | Specify the label text                       |
| accept              | <code>let</code> | No       | <code>string[]</code>                                                                      | <code>[]</code>                                  | Specify the accepted file types              |
| multiple            | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to allow multiple files        |
| disabled            | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to disable the input           |
| disableLabelChanges | <code>let</code> | No       | <code>boolean</code>                                                                       | <code>false</code>                               | Set to `true` to disable label changes       |
| kind                | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | <code>"primary"</code>                           | Specify the kind of file uploader button     |
| role                | <code>let</code> | No       | <code>string</code>                                                                        | <code>"button"</code>                            | Specify the label role                       |
| tabindex            | <code>let</code> | No       | <code>string</code>                                                                        | <code>"0"</code>                                 | Specify `tabindex` attribute                 |
| id                  | <code>let</code> | No       | <code>string</code>                                                                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element              |
| name                | <code>let</code> | No       | <code>string</code>                                                                        | <code>""</code>                                  | Specify a name attribute for the input       |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| keydown    | forwarded | --     |
| change     | forwarded | --     |
| click      | forwarded | --     |

## `FileUploaderDropContainer`

### Props

| Prop name     | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                  |
| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>  | <code>null</code>                                | Obtain a reference to the input HTML element                                                                 |
| accept        | <code>let</code> | No       | <code>string[]</code>                      | <code>[]</code>                                  | Specify the accepted file types                                                                              |
| multiple      | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to allow multiple files                                                                        |
| validateFiles | <code>let</code> | No       | <code>(files: FileList) => FileList</code> | <code>(files) => files</code>                    | Override the default behavior of validating uploaded files<br />The default behavior does not validate files |
| labelText     | <code>let</code> | No       | <code>string</code>                        | <code>"Add file"</code>                          | Specify the label text                                                                                       |
| role          | <code>let</code> | No       | <code>string</code>                        | <code>"button"</code>                            | Specify the `role` attribute of the drop container                                                           |
| disabled      | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the input                                                                           |
| tabindex      | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify `tabindex` attribute                                                                                 |
| id            | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                              |
| name          | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify a name attribute for the input                                                                       |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail                |
| :--------- | :--------- | :-------------------- |
| add        | dispatched | <code>FileList</code> |
| dragover   | forwarded  | --                    |
| dragleave  | forwarded  | --                    |
| drop       | forwarded  | --                    |
| keydown    | forwarded  | --                    |
| change     | forwarded  | --                    |
| click      | forwarded  | --                    |

## `FileUploaderItem`

### Props

| Prop name       | Kind             | Reactive | Type                                                     | Default value                                    | Description                                      |
| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| status          | <code>let</code> | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code>                         | Specify the file uploader status                 |
| size            | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small"</code>     | <code>"default"</code>                           | Specify the size of button skeleton              |
| iconDescription | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the ARIA label used for the status icons |
| invalid         | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to indicate an invalid state       |
| errorSubject    | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the error subject text                   |
| errorBody       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the error body text                      |
| id              | <code>let</code> | No       | <code>string</code>                                      | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element              |
| name            | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the file uploader name                   |

### Slots

None.

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| delete     | dispatched | <code>string</code> |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |

## `FileUploaderSkeleton`

### Props

None.

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Filename`

### Props

| Prop name       | Kind             | Reactive | Type                                                     | Default value            | Description                                      |
| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ |
| status          | <code>let</code> | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file name status                     |
| iconDescription | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>          | Specify the ARIA label used for the status icons |
| invalid         | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>       | Set to `true` to indicate an invalid state       |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |

## `FluidForm`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| submit     | forwarded | --     |

## `Form`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| submit     | forwarded | --     |

## `FormGroup`

### Props

| Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| noMargin    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| invalid     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state    |
| message     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement    |
| messageText | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                      |
| legendText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                       |
| legendId    | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify an id for the legend element          |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `FormItem`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `FormLabel`

### Props

| Prop name | Kind             | Reactive | Type                | Default value                                    | Description                               |
| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- |
| id        | <code>let</code> | No       | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id to be used by the label element |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Grid`

### Props

| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                     |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) |
| condensed     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                                                                                                                                                      |
| narrow        | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                                                                                                                                                         |
| fullWidth     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant                                                                                                                                                      |
| noGutter      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                              |
| noGutterLeft  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                         |
| noGutterRight | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                        |
| padding       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns                                                                                                                                      |

### Slots

| Slot name | Default | Props                                                           | Fallback |
| :-------- | :------ | :-------------------------------------------------------------- | :------- |
| --        | Yes     | <code>{ props: { class: string; [key: string]: any; } } </code> | --       |

### Events

None.

## `Header`

### Props

| Prop name               | Kind             | Reactive | Type                                                         | Default value      | Description                                                                                                                                                                                                                                                      |
| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref                     | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element                                                                                                                                                                                                                    |
| isSideNavOpen           | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to open the side nav                                                                                                                                                                                                                               |
| expandedByDefault       | <code>let</code> | No       | <code>boolean</code>                                         | <code>true</code>  | Set to `false` to hide the side nav by default                                                                                                                                                                                                                   |
| uiShellAriaLabel        | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the ARIA label for the header                                                                                                                                                                                                                            |
| href                    | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                                                                                                                                                                                                                                     |
| company                 | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the company name                                                                                                                                                                                                                                         |
| platformName            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>    | Specify the platform name<br />Alternatively, use the named slot "platform" (e.g., &lt;span slot="platform"&gt;...&lt;/span&gt;)                                                                                                                                 |
| persistentHamburgerMenu | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                      |
| expansionBreakpoint     | <code>let</code> | No       | <code>number</code>                                          | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |
| iconMenu                | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the closed state<br />Defaults to `Menu20`                                                                                                                                                             |
| iconClose               | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render for the opened state<br />Defaults to `Close20`                                                                                                                                                            |

### Slots

| Slot name       | Default | Props | Fallback                    |
| :-------------- | :------ | :---- | :-------------------------- |
| --              | Yes     | --    | --                          |
| platform        | No      | --    | <code>{platformName}</code> |
| skip-to-content | No      | --    | --                          |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `HeaderAction`

### Types

```ts
export interface HeaderActionSlideTransition {
  delay?: number;
  duration?: number;
  easing?: (t: number) => number;
}
```

### Props

| Prop name  | Kind             | Reactive | Type                                                         | Default value                  | Description                                                                                                   |
| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>              | Obtain a reference to the button HTML element                                                                 |
| isOpen     | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>             | Set to `true` to open the panel                                                                               |
| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                             | Specify the icon from `carbon-icons-svelte` to render                                                         |
| text       | <code>let</code> | No       | <code>string</code>                                          | --                             | Specify the text<br />Alternatively, use the named slot "text" (e.g., &lt;div slot="text"&gt;...&lt;/div&gt;) |
| transition | <code>let</code> | No       | <code>false &#124; HeaderActionSlideTransition</code>        | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`)<br />Set to `false` to disable the transition       |

### Slots

| Slot name | Default | Props | Fallback                                                    |
| :-------- | :------ | :---- | :---------------------------------------------------------- |
| --        | Yes     | --    | --                                                          |
| text      | No      | --    | <code>{#if text}&lt;span&gt;{text}&lt;/span&gt;{/if}</code> |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| close      | dispatched | --     |

## `HeaderActionLink`

### Props

| Prop name    | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
| linkIsActive | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to use the active state                 |
| href         | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
| icon         | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |

### Slots

None.

### Events

None.

## `HeaderActionSearch`

### Props

| Prop name      | Kind             | Reactive | Type                 | Default value      | Description                       |
| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
| searchIsActive | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to focus the search |

### Slots

None.

### Events

| Event name          | Type       | Detail                                                |
| :------------------ | :--------- | :---------------------------------------------------- |
| inputSearch         | dispatched | <code>{ action: "search"; textInput: string; }</code> |
| focusInputSearch    | dispatched | --                                                    |
| focusOutInputSearch | dispatched | --                                                    |

## `HeaderGlobalAction`

### Props

| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                   |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>  | Obtain a reference to the HTML button element |
| isActive  | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to use the active variant       |
| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon to render                    |

### Slots

| Slot name | Default | Props | Fallback                                              |
| :-------- | :------ | :---- | :---------------------------------------------------- |
| --        | Yes     | --    | <code>&lt;svelte:component this="{icon}" /&gt;</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `HeaderNav`

### Props

| Prop name | Kind             | Reactive | Type                | Default value | Description                        |
| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- |
| ariaLabel | <code>let</code> | No       | <code>string</code> | --            | Specify the ARIA label for the nav |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `HeaderNavItem`

### Props

| Prop name  | Kind             | Reactive | Type                                       | Default value      | Description                                   |
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>  | Obtain a reference to the HTML anchor element |
| href       | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the `href` attribute                  |
| text       | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the text                              |
| isSelected | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code> | Set to `true` to select the item              |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keyup      | forwarded | --     |
| keydown    | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `HeaderNavMenu`

### Props

| Prop name | Kind             | Reactive | Type                                       | Default value      | Description                                   |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>  | Obtain a reference to the HTML anchor element |
| expanded  | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code> | Set to `true` to toggle the expanded state    |
| href      | <code>let</code> | No       | <code>string</code>                        | <code>"/"</code>   | Specify the `href` attribute                  |
| text      | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the text                              |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| keydown    | forwarded | --     |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `HeaderPanelDivider`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `HeaderPanelLink`

### Props

| Prop name | Kind             | Reactive | Type                                       | Default value     | Description                                   |
| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the HTML anchor element |
| href      | <code>let</code> | No       | <code>string</code>                        | --                | Specify the `href` attribute                  |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `HeaderPanelLinks`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `HeaderSearch`

### Types

```ts
export interface HeaderSearchResult {
  href: string;
  text: string;
  description?: string;
}
```

### Props

| Prop name           | Kind             | Reactive | Type                                      | Default value      | Description                                        |
| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>     | Specify the selected result index                  |
| ref                 | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>  | Obtain a reference to the input HTML element       |
| active              | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to activate and focus the search bar |
| value               | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>    | Specify the search input value                     |
| results             | <code>let</code> | No       | <code>HeaderSearchResult[]</code>         | <code>[]</code>    | Render a list of search results                    |

### Slots

| Slot name | Default | Props                                                       | Fallback                                                                                                      |
| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
| --        | Yes     | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span&gt;– {result.description}&lt;/span&gt;{/if}</code> |

### Events

| Event name | Type       | Detail                                                                                          |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------- |
| active     | dispatched | <code>any</code>                                                                                |
| inactive   | dispatched | <code>any</code>                                                                                |
| clear      | dispatched | <code>any</code>                                                                                |
| select     | dispatched | <code>{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }</code> |
| change     | forwarded  | --                                                                                              |
| input      | forwarded  | --                                                                                              |
| focus      | forwarded  | --                                                                                              |
| blur       | forwarded  | --                                                                                              |
| keydown    | forwarded  | --                                                                                              |

## `HeaderUtilities`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `Icon`

### Props

| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| render    | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |
| skeleton  | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to display the skeleton state           |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `IconSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                | Default value   | Description              |
| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ |
| size      | <code>let</code> | No       | <code>number</code> | <code>16</code> | Set the size of the icon |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ImageLoader`

### Props

| Prop name | Kind               | Reactive | Type                                                                                                            | Default value                                                                                                                                                                                                                | Description                                                                                                                 |
| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error     | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` if an error occurs when loading the image                                                                     |
| loaded    | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` when the image is loaded                                                                                      |
| loading   | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` when `loaded` is `true` and `error` is false                                                                  |
| src       | <code>let</code>   | No       | <code>string</code>                                                                                             | <code>""</code>                                                                                                                                                                                                              | Specify the image source                                                                                                    |
| alt       | <code>let</code>   | No       | <code>string</code>                                                                                             | <code>""</code>                                                                                                                                                                                                              | Specify the image alt text                                                                                                  |
| ratio     | <code>let</code>   | No       | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | --                                                                                                                                                                                                                           | Specify the aspect ratio for the image wrapper                                                                              |
| fadeIn    | <code>let</code>   | No       | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | <code>const</code> | No       | <code>(url?: string) => void</code>                                                                             | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value                                                                     |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| error     | No      | --    | --       |
| loading   | No      | --    | --       |

### Events

| Event name | Type       | Detail           |
| :--------- | :--------- | :--------------- |
| load       | dispatched | <code>any</code> |
| error      | dispatched | <code>any</code> |

## `InlineLoading`

### Props

| Prop name       | Kind             | Reactive | Type                                                                     | Default value         | Description                                                       |
| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- |
| status          | <code>let</code> | No       | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code> | Set the loading status                                            |
| description     | <code>let</code> | No       | <code>string</code>                                                      | --                    | Set the loading description                                       |
| iconDescription | <code>let</code> | No       | <code>string</code>                                                      | --                    | Specify the ARIA label for the loading icon                       |
| successDelay    | <code>let</code> | No       | <code>number</code>                                                      | <code>1500</code>     | Specify the timeout delay (ms) after `status` is set to "success" |

### Slots

None.

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| mouseover  | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| success    | dispatched | --     |

## `InlineNotification`

### Props

| Prop name       | Kind             | Reactive | Type                                                                                                           | Default value                      | Description                                                             |
| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| kind            | <code>let</code> | No       | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code>               | Specify the kind of notification                                        |
| lowContrast     | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to use the low contrast variant                           |
| timeout         | <code>let</code> | No       | <code>number</code>                                                                                            | <code>0</code>                     | Set the timeout duration (ms) to hide the notification after opening it |
| role            | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"alert"</code>               | Set the `role` attribute                                                |
| title           | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the title text                                                  |
| subtitle        | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the subtitle text                                               |
| hideCloseButton | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to hide the close button                                  |
| iconDescription | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Closes notification"</code> | Specify the ARIA label for the icon                                     |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |
| actions   | No      | --    | --       |

### Events

| Event name | Type       | Detail                            |
| :--------- | :--------- | :-------------------------------- |
| close      | dispatched | <code>{ timeout: boolean }</code> |
| click      | forwarded  | --                                |
| mouseover  | forwarded  | --                                |
| mouseenter | forwarded  | --                                |
| mouseleave | forwarded  | --                                |

## `Link`

### Props

| Prop name | Kind             | Reactive | Type                                                                   | Default value      | Description                                                                         |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | <code>null</code>  | Obtain a reference to the top-level HTML element                                    |
| size      | <code>let</code> | No       | <code>"sm" &#124; "lg"</code>                                          | --                 | Specify the size of the link                                                        |
| href      | <code>let</code> | No       | <code>string</code>                                                    | --                 | Specify the href value                                                              |
| inline    | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to use the inline variant                                             |
| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>           | --                 | Specify the icon from `carbon-icons-svelte` to render<br />`inline` must be `false` |
| disabled  | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to disable the checkbox                                               |
| visited   | <code>let</code> | No       | <code>boolean</code>                                                   | <code>false</code> | Set to `true` to allow visited styles                                               |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ListBox`

### Props

| Prop name   | Kind             | Reactive | Type                                   | Default value          | Description                                |
| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ |
| size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>          | --                     | Set the size of the list box               |
| type        | <code>let</code> | No       | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box               |
| open        | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to open the list box         |
| light       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to enable the light variant  |
| disabled    | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to disable the list box      |
| invalid     | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to indicate an invalid state |
| invalidText | <code>let</code> | No       | <code>string</code>                    | <code>""</code>        | Specify the invalid state text             |
| warn        | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to indicate an warning state |
| warnText    | <code>let</code> | No       | <code>string</code>                    | <code>""</code>        | Specify the warning state text             |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| keydown    | forwarded | --     |
| click      | forwarded | --     |

## `ListBoxField`

### Types

```ts
export type ListBoxFieldTranslationId = "close" | "open";
```

### Props

| Prop name       | Kind               | Reactive | Type                                                   | Default value                                    | Description                                      |
| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
| ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLDivElement</code>                | <code>null</code>                                | Obtain a reference to the top-level HTML element |
| disabled        | <code>let</code>   | No       | <code>boolean</code>                                   | <code>false</code>                               | Set to `true` to disable the list box field      |
| role            | <code>let</code>   | No       | <code>string</code>                                    | <code>"combobox"</code>                          | Specify the role attribute                       |
| tabindex        | <code>let</code>   | No       | <code>string</code>                                    | <code>"-1"</code>                                | Specify the tabindex                             |
| translationIds  | <code>const</code> | No       | <code>{ close: "close", open: "open" }</code>          | <code>{ close: "close", open: "open" }</code>    | Default translation ids                          |
| translateWithId | <code>let</code>   | No       | <code>(id: ListBoxFieldTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code>     | Override the default translation ids             |
| id              | <code>let</code>   | No       | <code>string</code>                                    | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element              |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keydown    | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `ListBoxMenu`

### Props

| Prop name | Kind             | Reactive | Type                                    | Default value                                    | Description                            |
| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the HTML element |
| id        | <code>let</code> | No       | <code>string</code>                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element    |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| scroll     | forwarded | --     |

## `ListBoxMenuIcon`

### Types

```ts
export type ListBoxMenuIconTranslationId = "close" | "open";
```

### Props

| Prop name       | Kind               | Reactive | Type                                                      | Default value                                 | Description                                  |
| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
| open            | <code>let</code>   | No       | <code>boolean</code>                                      | <code>false</code>                            | Set to `true` to open the list box menu icon |
| translationIds  | <code>const</code> | No       | <code>{ close: "close", open: "open" }</code>             | <code>{ close: "close", open: "open" }</code> | Default translation ids                      |
| translateWithId | <code>let</code>   | No       | <code>(id: ListBoxMenuIconTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code>  | Override the default translation ids         |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `ListBoxMenuItem`

### Props

| Prop name   | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| active      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the active state      |
| highlighted | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the highlighted state |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ListBoxSelection`

### Types

```ts
export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
```

### Props

| Prop name       | Kind               | Reactive | Type                                                                     | Default value                                                            | Description                                      |
| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
| ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLDivElement</code>                                  | <code>null</code>                                                        | Obtain a reference to the top-level HTML element |
| selectionCount  | <code>let</code>   | No       | <code>number</code>                                                      | --                                                                       | Specify the number of selected items             |
| disabled        | <code>let</code>   | No       | <code>boolean</code>                                                     | <code>false</code>                                                       | Set to `true` to disable the list box selection  |
| translationIds  | <code>const</code> | No       | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids                          |
| translateWithId | <code>let</code>   | No       | <code>(id: ListBoxSelectionTranslationId) => string</code>               | <code>(id) => defaultTranslations[id]</code>                             | Override the default translation ids             |

### Slots

None.

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| clear      | dispatched | --     |

## `ListItem`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Loading`

### Props

| Prop name   | Kind             | Reactive | Type                 | Default value                                    | Description                                |
| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
| small       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the small variant     |
| active      | <code>let</code> | No       | <code>boolean</code> | <code>true</code>                                | Set to `false` to disable the active state |
| withOverlay | <code>let</code> | No       | <code>boolean</code> | <code>true</code>                                | Set to `false` to disable the overlay      |
| description | <code>let</code> | No       | <code>string</code>  | <code>"Active loading indicator"</code>          | Specify the label description              |
| id          | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the label element            |

### Slots

None.

### Events

None.

## `LocalStorage`

### Props

| Prop name | Kind                  | Reactive | Type                    | Default value                                        | Description                                                     |
| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
| value     | <code>let</code>      | Yes      | <code>any</code>        | <code>""</code>                                      | Provide a value to persist                                      |
| key       | <code>let</code>      | No       | <code>string</code>     | <code>"local-storage-key"</code>                     | Specify the local storage key                                   |
| clearItem | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
| clearAll  | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.clear(); }</code>         | Clear all key values from the browser's local storage           |

### Slots

None.

### Events

| Event name | Type       | Detail                                       |
| :--------- | :--------- | :------------------------------------------- |
| save       | dispatched | <code>any</code>                             |
| update     | dispatched | <code>{ prevValue: any; value: any; }</code> |

## `Modal`

### Props

| Prop name                  | Kind             | Reactive | Type                                                | Default value                                    | Description                                                                                             |
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| ref                        | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>             | <code>null</code>                                | Obtain a reference to the top-level HTML element                                                        |
| open                       | <code>let</code> | Yes      | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to open the modal                                                                         |
| size                       | <code>let</code> | No       | <code>"xs" &#124; "sm" &#124; "lg"</code>           | --                                               | Set the size of the modal                                                                               |
| danger                     | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to use the danger variant                                                                 |
| alert                      | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to enable alert mode                                                                      |
| passiveModal               | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to use the passive variant                                                                |
| modalHeading               | <code>let</code> | No       | <code>string</code>                                 | --                                               | Specify the modal heading                                                                               |
| modalLabel                 | <code>let</code> | No       | <code>string</code>                                 | --                                               | Specify the modal label                                                                                 |
| modalAriaLabel             | <code>let</code> | No       | <code>string</code>                                 | --                                               | Specify the ARIA label for the modal                                                                    |
| iconDescription            | <code>let</code> | No       | <code>string</code>                                 | <code>"Close the modal"</code>                   | Specify the ARIA label for the close icon                                                               |
| hasForm                    | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` if the modal contains form elements                                                       |
| hasScrollingContent        | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` if the modal contains scrolling content                                                   |
| primaryButtonText          | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>                                  | Specify the primary button text                                                                         |
| primaryButtonDisabled      | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to disable the primary button                                                             |
| shouldSubmitOnEnter        | <code>let</code> | No       | <code>boolean</code>                                | <code>true</code>                                | Set to `true` for the primary button to be triggered when pressing "Enter"                              |
| secondaryButtonText        | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>                                  | Specify the secondary button text                                                                       |
| secondaryButtons           | <code>let</code> | No       | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code>                                  | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| selectorPrimaryFocus       | <code>let</code> | No       | <code>string</code>                                 | <code>"[data-modal-primary-focus]"</code>        | Specify a selector to be focused when opening the modal                                                 |
| preventCloseOnClickOutside | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to prevent the modal from closing when clicking outside                                   |
| id                         | <code>let</code> | No       | <code>string</code>                                 | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element                                                                     |

### Slots

| Slot name | Default | Props | Fallback                    |
| :-------- | :------ | :---- | :-------------------------- |
| --        | Yes     | --    | --                          |
| heading   | No      | --    | <code>{modalHeading}</code> |
| label     | No      | --    | <code>{modalLabel}</code>   |

### Events

| Event name              | Type       | Detail                          |
| :---------------------- | :--------- | :------------------------------ |
| transitionend           | dispatched | <code>{ open: boolean; }</code> |
| click:button--secondary | dispatched | <code>{ text: string; }</code>  |
| keydown                 | forwarded  | --                              |
| click                   | forwarded  | --                              |
| mouseover               | forwarded  | --                              |
| mouseenter              | forwarded  | --                              |
| mouseleave              | forwarded  | --                              |
| submit                  | dispatched | --                              |
| click:button--primary   | dispatched | --                              |
| close                   | dispatched | --                              |
| open                    | dispatched | --                              |

## `ModalBody`

### Props

| Prop name           | Kind             | Reactive | Type                 | Default value      | Description                                           |
| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- |
| hasForm             | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements     |
| hasScrollingContent | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains scrolling content |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ModalFooter`

### Props

| Prop name             | Kind             | Reactive | Type                                                | Default value      | Description                                                                                             |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText     | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>    | Specify the primary button text                                                                         |
| primaryButtonDisabled | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code> | Set to `true` to disable the primary button                                                             |
| primaryClass          | <code>let</code> | No       | <code>string</code>                                 | --                 | Specify a class for the primary button                                                                  |
| secondaryButtonText   | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>    | Specify the secondary button text                                                                       |
| secondaryButtons      | <code>let</code> | No       | <code>[{ text: string; }, { text: string; }]</code> | <code>[]</code>    | 2-tuple prop to render two secondary buttons for a 3 button modal<br />supersedes `secondaryButtonText` |
| secondaryClass        | <code>let</code> | No       | <code>string</code>                                 | --                 | Specify a class for the secondary button                                                                |
| danger                | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code> | Set to `true` to use the danger variant                                                                 |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name              | Type       | Detail                         |
| :---------------------- | :--------- | :----------------------------- |
| click:button--secondary | dispatched | <code>{ text: string; }</code> |

## `ModalHeader`

### Props

| Prop name       | Kind             | Reactive | Type                | Default value        | Description                               |
| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- |
| title           | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the modal title                   |
| label           | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the modal label                   |
| labelClass      | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the label class                   |
| titleClass      | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the title class                   |
| closeClass      | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the close class                   |
| closeIconClass  | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the close icon class              |
| iconDescription | <code>let</code> | No       | <code>string</code> | <code>"Close"</code> | Specify the ARIA label for the close icon |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `MultiSelect`

### Types

```ts
export type MultiSelectItemId = string;

export type MultiSelectItemText = string;

export interface MultiSelectItem {
  id: MultiSelectItemId;
  text: MultiSelectItemText;
}
```

### Props

| Prop name         | Kind             | Reactive | Type                                                                                           | Default value                                                                       | Description                                                                           |
| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
| selectionRef      | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the selection element                                           |
| fieldRef          | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the field box element                                           |
| multiSelectRef    | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                        | <code>null</code>                                                                   | Obtain a reference to the outer div element                                           |
| inputRef          | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                      | <code>null</code>                                                                   | Obtain a reference to the input HTML element                                          |
| open              | <code>let</code> | Yes      | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to open the dropdown                                                    |
| value             | <code>let</code> | Yes      | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the multiselect value                                                         |
| selectedIds       | <code>let</code> | Yes      | <code>MultiSelectItemId[]</code>                                                               | <code>[]</code>                                                                     | Set the selected ids                                                                  |
| items             | <code>let</code> | Yes      | <code>MultiSelectItem[]</code>                                                                 | <code>[]</code>                                                                     | Set the multiselect items                                                             |
| itemToString      | <code>let</code> | No       | <code>(item: MultiSelectItem) => string</code>                                                 | <code>(item) => item.text &#124;&#124; item.id</code>                               | Override the display of a multiselect item                                            |
| size              | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                      | --                                                                                  | Set the size of the combobox                                                          |
| type              | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                         | <code>"default"</code>                                                              | Specify the type of multiselect                                                       |
| direction         | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                             | <code>"bottom"</code>                                                               | Specify the direction of the multiselect dropdown menu                                |
| selectionFeedback | <code>let</code> | No       | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code>                                    | <code>"top-after-reopen"</code>                                                     | Specify the selection feedback after selecting items                                  |
| disabled          | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to disable the dropdown                                                 |
| filterable        | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to filter items                                                         |
| filterItem        | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => string</code>                                  | <code>(item, value) => item.text.toLowerCase().includes(value.toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison |
| light             | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to enable the light variant                                             |
| locale            | <code>let</code> | No       | <code>string</code>                                                                            | <code>"en"</code>                                                                   | Specify the locale                                                                    |
| placeholder       | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the placeholder text                                                          |
| sortItem          | <code>let</code> | No       | <code>((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) &#124; (() => void)</code> | <code>(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })</code>      | Override the sorting logic<br />The default sorting compare the item text value       |
| translateWithId   | <code>let</code> | No       | <code>(id: any) => string</code>                                                               | --                                                                                  | Override the default translation ids                                                  |
| titleText         | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the title text                                                                |
| useTitleInItem    | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to pass the item to `itemToString` in the checkbox                      |
| invalid           | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to indicate an invalid state                                            |
| invalidText       | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the invalid state text                                                        |
| warn              | <code>let</code> | No       | <code>boolean</code>                                                                           | <code>false</code>                                                                  | Set to `true` to indicate an warning state                                            |
| warnText          | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the warning state text                                                        |
| helperText        | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the helper text                                                               |
| label             | <code>let</code> | No       | <code>string</code>                                                                            | <code>""</code>                                                                     | Specify the list box label                                                            |
| id                | <code>let</code> | No       | <code>string</code>                                                                            | <code>"ccs-" + Math.random().toString(36)</code>                                    | Set an id for the list box component                                                  |
| name              | <code>let</code> | No       | <code>string</code>                                                                            | --                                                                                  | Specify a name attribute for the select                                               |

### Slots

None.

### Events

| Event name | Type       | Detail                                                                                              |
| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- |
| select     | dispatched | <code>{ selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
| clear      | dispatched | <code>any</code>                                                                                    |
| keydown    | forwarded  | --                                                                                                  |
| keyup      | forwarded  | --                                                                                                  |
| focus      | forwarded  | --                                                                                                  |
| blur       | forwarded  | --                                                                                                  |

## `NotificationActionButton`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `NotificationButton`

### Props

| Prop name        | Kind             | Reactive | Type                                                         | Default value             | Description                                           |
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- |
| notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                         | <code>"toast"</code>      | Set the type of notification                          |
| icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                        | Specify the icon from `carbon-icons-svelte` to render |
| title            | <code>let</code> | No       | <code>string</code>                                          | --                        | Specify the title of the icon                         |
| iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Close icon"</code> | Specify the ARIA label for the icon                   |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `NotificationIcon`

### Props

| Prop name        | Kind             | Reactive | Type                                                                                                           | Default value                      | Description                           |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- |
| kind             | <code>let</code> | No       | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code>               | Specify the kind of notification icon |
| notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                                                                           | <code>"toast"</code>               | Set the type of notification          |
| iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Closes notification"</code> | Specify the ARIA label for the icon   |

### Slots

None.

### Events

None.

## `NotificationTextDetails`

### Props

| Prop name        | Kind             | Reactive | Type                                 | Default value          | Description                  |
| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- |
| notificationType | <code>let</code> | No       | <code>"toast" &#124; "inline"</code> | <code>"toast"</code>   | Set the type of notification |
| title            | <code>let</code> | No       | <code>string</code>                  | <code>"Title"</code>   | Specify the title text       |
| subtitle         | <code>let</code> | No       | <code>string</code>                  | <code>""</code>        | Specify the subtitle text    |
| caption          | <code>let</code> | No       | <code>string</code>                  | <code>"Caption"</code> | Specify the caption text     |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `NumberInput`

### Types

```ts
export type NumberInputTranslationId = "increment" | "decrement";
```

### Props

| Prop name       | Kind               | Reactive | Type                                                            | Default value                                                    | Description                                     |
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
| ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element    |
| value           | <code>let</code>   | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                                  | Specify the input value                         |
| size            | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | --                                                               | Set the size of the input                       |
| step            | <code>let</code>   | No       | <code>number</code>                                             | <code>1</code>                                                   | Specify the step increment                      |
| max             | <code>let</code>   | No       | <code>number</code>                                             | --                                                               | Specify the maximum value                       |
| min             | <code>let</code>   | No       | <code>number</code>                                             | --                                                               | Specify the minimum value                       |
| light           | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the light variant       |
| readonly        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` for the input to be read-only     |
| mobile          | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the mobile variant      |
| allowEmpty      | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to allow for an empty value       |
| disabled        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to disable the input              |
| hideSteppers    | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to hide the input stepper buttons |
| iconDescription | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the ARIA label for the increment icons  |
| invalid         | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an invalid state      |
| invalidText     | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the invalid state text                  |
| warn            | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an warning state      |
| warnText        | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the warning state text                  |
| helperText      | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the helper text                         |
| label           | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the label text                          |
| hideLabel       | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to visually hide the label text   |
| translateWithId | <code>let</code>   | No       | <code>(id: NumberInputTranslationId) => string</code>           | <code>(id) => defaultTranslations[id]</code>                     | Override the default translation ids            |
| translationIds  | <code>const</code> | No       | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids                         |
| id              | <code>let</code>   | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code>                 | Set an id for the input element                 |
| name            | <code>let</code>   | No       | <code>string</code>                                             | --                                                               | Specify a name attribute for the input          |

### Slots

| Slot name | Default | Props | Fallback             |
| :-------- | :------ | :---- | :------------------- |
| label     | No      | --    | <code>{label}</code> |

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>number</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |
| input      | forwarded  | --                  |

## `NumberInputSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `OrderedList`

### Props

| Prop name  | Kind             | Reactive | Type                 | Default value      | Description                                          |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
| native     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles              |
| expressive | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `OutboundLink`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `OverflowMenu`

### Props

| Prop name        | Kind             | Reactive | Type                                                         | Default value                                    | Description                                                       |
| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef          | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                    | <code>null</code>                                | Obtain a reference to the overflow menu element                   |
| buttonRef        | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>                                | Obtain a reference to the trigger button element                  |
| icon             | <code>let</code> | Yes      | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render             |
| open             | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to open the menu                                    |
| size             | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                | --                                               | Specify the size of the overflow menu                             |
| direction        | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                           | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button |
| light            | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the light variant                         |
| flipped          | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to flip the menu relative to the button             |
| menuOptionsClass | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the menu options class                                    |
| iconClass        | <code>let</code> | No       | <code>string</code>                                          | --                                               | Specify the icon class                                            |
| iconDescription  | <code>let</code> | No       | <code>string</code>                                          | <code>"Open and close list of options"</code>    | Specify the ARIA label for the icon                               |
| id               | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                  |

### Slots

| Slot name | Default | Props | Fallback                                                                                                                                                                                   |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| --        | Yes     | --    | --                                                                                                                                                                                         |
| menu      | No      | --    | <code>&lt;svelte:component<br /> this="{icon}"<br /> aria-label="{iconDescription}"<br /> title="{iconDescription}"<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> |

### Events

| Event name | Type       | Detail                                        |
| :--------- | :--------- | :-------------------------------------------- |
| close      | dispatched | <code>{ index: number; text: string; }</code> |
| click      | forwarded  | --                                            |
| mouseover  | forwarded  | --                                            |
| mouseenter | forwarded  | --                                            |
| mouseleave | forwarded  | --                                            |
| keydown    | forwarded  | --                                            |

## `OverflowMenuItem`

### Props

| Prop name    | Kind             | Reactive | Type                                                                | Default value                                    | Description                                                                         |
| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- |
| ref          | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the HTML element                                              |
| primaryFocus | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` if the item should be focused when opening the menu                   |
| text         | <code>let</code> | No       | <code>string</code>                                                 | <code>"Provide text"</code>                      | Specify the item text<br />Alternatively, use the default slot for a custom element |
| href         | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>                                  | Specify the `href` attribute if the item is a link                                  |
| disabled     | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to disable the item                                                   |
| hasDivider   | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to include a divider                                                  |
| danger       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to use the danger variant                                             |
| requireTitle | <code>let</code> | No       | <code>boolean</code>                                                | <code>true</code>                                | Set to `false` to omit the button `title` attribute                                 |
| id           | <code>let</code> | No       | <code>string</code>                                                 | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element                                                 |

### Slots

| Slot name | Default | Props | Fallback                                                                                                            |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
| --        | Yes     | --    | <code>&lt;div class:bx--overflow-menu-options\_\_option-content="{true}"&gt;<br /> {text}<br /> &lt;/div&gt;</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |

## `Pagination`

### Props

| Prop name             | Kind             | Reactive | Type                                                             | Default value                                                                  | Description                                      |
| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ |
| pageSize              | <code>let</code> | Yes      | <code>number</code>                                              | <code>10</code>                                                                | Specify the number of items to display in a page |
| page                  | <code>let</code> | Yes      | <code>number</code>                                              | <code>1</code>                                                                 | Specify the current page index                   |
| totalItems            | <code>let</code> | No       | <code>number</code>                                              | <code>0</code>                                                                 | Specify the total number of items                |
| disabled              | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` to disable the pagination          |
| forwardText           | <code>let</code> | No       | <code>string</code>                                              | <code>"Next page"</code>                                                       | Specify the forward button text                  |
| backwardText          | <code>let</code> | No       | <code>string</code>                                              | <code>"Previous page"</code>                                                   | Specify the backward button text                 |
| itemsPerPageText      | <code>let</code> | No       | <code>string</code>                                              | <code>"Items per page:"</code>                                                 | Specify the items per page text                  |
| itemText              | <code>let</code> | No       | <code>(min: number, max: number) => string</code>                | <code>(min, max) => \`${min}–${max} items\`</code>                             | Override the item text                           |
| itemRangeText         | <code>let</code> | No       | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min}–${max} of ${total} items\`</code>          | Override the item range text                     |
| pageInputDisabled     | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` to disable the page input          |
| pageSizeInputDisabled | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` to disable the page size input     |
| pageSizes             | <code>let</code> | No       | <code>number[]</code>                                            | <code>[10]</code>                                                              | Specify the available page sizes                 |
| pagesUnknown          | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                             | Set to `true` if the number of pages is unknown  |
| pageText              | <code>let</code> | No       | <code>(page: number) => string</code>                            | <code>(page) => \`page ${page}\`</code>                                        | Override the page text                           |
| pageRangeText         | <code>let</code> | No       | <code>(current: number, total: number) => string</code>          | <code>(current, total) => \`of ${total} page${total === 1 ? "" : "s"}\`</code> | Override the page range text                     |
| id                    | <code>let</code> | No       | <code>string</code>                                              | <code>"ccs-" + Math.random().toString(36)</code>                               | Set an id for the top-level element              |

### Slots

None.

### Events

| Event name             | Type       | Detail                                           |
| :--------------------- | :--------- | :----------------------------------------------- |
| update                 | dispatched | <code>{ pageSize: number; page: number; }</code> |
| click:button--previous | dispatched | <code>{ page: number; }</code>                   |
| click:button--next     | dispatched | <code>{ page: number; }</code>                   |

## `PaginationNav`

### Props

| Prop name    | Kind             | Reactive | Type                 | Default value                | Description                               |
| :----------- | :--------------- | :------- | :------------------- | ---------------------------- | ----------------------------------------- |
| page         | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>               | Specify the current page index            |
| total        | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages         |
| shown        | <code>let</code> | No       | <code>number</code>  | <code>10</code>              | Specify the total number of pages to show |
| loop         | <code>let</code> | No       | <code>boolean</code> | <code>false</code>           | Set to `true` to loop the navigation      |
| forwardText  | <code>let</code> | No       | <code>string</code>  | <code>"Next page"</code>     | Specify the forward button text           |
| backwardText | <code>let</code> | No       | <code>string</code>  | <code>"Previous page"</code> | Specify the backward button text          |

### Slots

None.

### Events

| Event name             | Type       | Detail                         |
| :--------------------- | :--------- | :----------------------------- |
| change                 | dispatched | <code>{ page: number; }</code> |
| click:button--previous | dispatched | <code>{ page: number; }</code> |
| click:button--next     | dispatched | <code>{ page: number; }</code> |

## `PaginationSkeleton`

### Props

None.

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `PasswordInput`

### Props

| Prop name         | Kind             | Reactive | Type                                                            | Default value                                    | Description                                           |
| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref               | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                | Obtain a reference to the input HTML element          |
| type              | <code>let</code> | Yes      | <code>"text" &#124; "password"</code>                           | <code>"password"</code>                          | Set to `"text"` to toggle the password visibility     |
| value             | <code>let</code> | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                  | Specify the input value                               |
| size              | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                   | --                                               | Set the size of the input                             |
| placeholder       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the placeholder text                          |
| hidePasswordLabel | <code>let</code> | No       | <code>string</code>                                             | <code>"Hide password"</code>                     | Specify the hide password label text                  |
| showPasswordLabel | <code>let</code> | No       | <code>string</code>                                             | <code>"Show password"</code>                     | Specify the show password label text                  |
| tooltipAlignment  | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
| tooltipPosition   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the position of the tooltip relative to the icon  |
| light             | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to enable the light variant             |
| disabled          | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the input                    |
| helperText        | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the helper text                               |
| labelText         | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the label text                                |
| hideLabel         | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to visually hide the label text         |
| invalid           | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to indicate an invalid state            |
| invalidText       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the text for the invalid state                |
| warn              | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to indicate an warning state            |
| warnText          | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the warning state text                        |
| inline            | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to use inline version                   |
| id                | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                       |
| name              | <code>let</code> | No       | <code>string</code>                                             | --                                               | Specify a name attribute for the input                |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| change     | forwarded | --     |
| input      | forwarded | --     |
| keydown    | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `Popover`

### Props

| Prop name           | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value      | Description                                            |
| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ |
| open                | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to display the popover                   |
| closeOnOutsideClick | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to close the popover on an outside click |
| caret               | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` render a caret                           |
| align               | <code>let</code> | No       | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"top"</code> | Specify the alignment of the caret                     |
| light               | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the light variant              |
| highContrast        | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the high contrast variant      |
| relative            | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to use a relative position               |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name    | Type       | Detail |
| :------------ | :--------- | :----- |
| click:outside | dispatched | --     |

## `ProgressBar`

### Props

| Prop name  | Kind             | Reactive | Type                 | Default value                                    | Description                                   |
| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
| value      | <code>let</code> | No       | <code>number</code>  | --                                               | Specify the current value                     |
| max        | <code>let</code> | No       | <code>number</code>  | <code>100</code>                                 | Specify the maximum value                     |
| labelText  | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the label text                        |
| hideLabel  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to visually hide the label text |
| helperText | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the helper text                       |
| id         | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the progress bar element        |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

None.

## `ProgressIndicator`

### Props

| Prop name            | Kind             | Reactive | Type                 | Default value      | Description                                                                                    |
| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
| currentIndex         | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>     | Specify the current step index                                                                 |
| vertical             | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the vertical variant                                                      |
| spaceEqually         | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to specify whether the progress steps should be split equally in size in the div |
| preventChangeOnClick | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to prevent `currentIndex` from updating                                          |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>number</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |

## `ProgressIndicatorSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| vertical  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the vertical variant |
| count     | <code>let</code> | No       | <code>number</code>  | <code>4</code>     | Specify the number of steps to render     |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ProgressStep`

### Props

| Prop name      | Kind             | Reactive | Type                 | Default value                                    | Description                                |
| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ |
| current        | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the current variant   |
| complete       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` for the complete variant     |
| disabled       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the progress step |
| invalid        | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to indicate an invalid state |
| description    | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step description               |
| label          | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step label                     |
| secondaryLabel | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step secondary label           |
| id             | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element        |

### Slots

| Slot name | Default | Props                                                    | Fallback                                                                  |
| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ |
| --        | Yes     | <code>{ props: { class: 'bx--progress-label' } } </code> | <code>&lt;p class:bx--progress-label="{true}"&gt;{label}&lt;/p&gt;</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keydown    | forwarded | --     |

## `RadioButton`

### Props

| Prop name     | Kind             | Reactive | Type                                      | Default value                                    | Description                                     |
| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref           | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element    |
| checked       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the radio button         |
| value         | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the value of the radio button           |
| disabled      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | et to `true` to disable the radio button        |
| labelPosition | <code>let</code> | No       | <code>"right" &#124; "left"</code>        | <code>"right"</code>                             | Specify the label position                      |
| labelText     | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                          |
| hideLabel     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text   |
| id            | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
| name          | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the checkbox input |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| change     | forwarded | --     |

## `RadioButtonGroup`

### Props

| Prop name     | Kind             | Reactive | Type                                        | Default value             | Description                                  |
| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
| selected      | <code>let</code> | Yes      | <code>string</code>                         | --                        | Set the selected radio button value          |
| disabled      | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons   |
| legendText    | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                      |
| labelPosition | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                   |
| orientation   | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons |
| id            | <code>let</code> | No       | <code>string</code>                         | --                        | Set an id for the container div element      |

### Slots

| Slot name  | Default | Props | Fallback                  |
| :--------- | :------ | :---- | :------------------------ |
| --         | Yes     | --    | --                        |
| legendText | No      | --    | <code>{legendText}</code> |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| mouseover  | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| change     | dispatched | --     |

## `RadioButtonSkeleton`

### Props

None.

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `RadioTile`

### Props

| Prop name       | Kind             | Reactive | Type                 | Default value                                    | Description                                              |
| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| checked         | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
| light           | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
| disabled        | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
| value           | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
| tabindex        | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
| iconDescription | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
| id              | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
| name            | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify a name attribute for the input                   |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| change     | forwarded | --     |
| keydown    | forwarded | --     |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `RecursiveList`

### Types

```ts
export interface RecursiveListNode {
  text?: string;
  href?: string;
  html?: string;
}
```

### Props

| Prop name | Kind             | Reactive | Type                                                                        | Default value            | Description                        |
| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | ---------------------------------- |
| children  | <code>let</code> | No       | <code>Array<RecursiveListNode & { children?: RecursiveListNode[]; }></code> | <code>[]</code>          | Specify the children to render     |
| type      | <code>let</code> | No       | <code>"unordered" &#124; "ordered" &#124; "ordered-native"</code>           | <code>"unordered"</code> | Specify the type of list to render |

### Slots

None.

### Events

None.

## `Row`

### Props

| Prop name     | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                     |
| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Row let:props&gt;&lt;section {...props}&gt;...&lt;/section&gt;&lt;/Row&gt;) |
| condensed     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                                                                                                                                                      |
| narrow        | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                                                                                                                                                         |
| noGutter      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                              |
| noGutterLeft  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                         |
| noGutterRight | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                        |
| padding       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to add top and bottom padding to all columns                                                                                                                                      |

### Slots

| Slot name | Default | Props                                                           | Fallback |
| :-------- | :------ | :-------------------------------------------------------------- | :------- |
| --        | Yes     | <code>{ props: { class: string; [key: string]: any; } } </code> | --       |

### Events

None.

## `Search`

### Props

| Prop name            | Kind             | Reactive | Type                                                         | Default value                                    | Description                                             |
| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- |
| ref                  | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                    | <code>null</code>                                | Obtain a reference to the input HTML element            |
| value                | <code>let</code> | Yes      | <code>string</code>                                          | <code>""</code>                                  | Specify the value of the search input                   |
| expanded             | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code>                               | Set to `true to expand the search input                 |
| small                | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | --                                                      |
| size                 | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                    | <code>"xl"</code>                                | Specify the size of the search input                    |
| searchClass          | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the class name passed to the outer div element  |
| skeleton             | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to display the skeleton state             |
| light                | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the light variant               |
| disabled             | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to disable the search input               |
| expandable           | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to enable the expandable variant          |
| type                 | <code>let</code> | No       | <code>string</code>                                          | <code>"text"</code>                              | Specify the `type` attribute of the search input        |
| placeholder          | <code>let</code> | No       | <code>string</code>                                          | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input |
| autocomplete         | <code>let</code> | No       | <code>"on" &#124; "off"</code>                               | <code>"off"</code>                               | Specify the `autocomplete` attribute                    |
| autofocus            | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code>                               | Set to `true` to auto focus the search element          |
| closeButtonLabelText | <code>let</code> | No       | <code>string</code>                                          | <code>"Clear search input"</code>                | Specify the close button label text                     |
| labelText            | <code>let</code> | No       | <code>string</code>                                          | <code>""</code>                                  | Specify the label text                                  |
| icon                 | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                                               | Specify the icon from `carbon-icons-svelte` to render   |
| id                   | <code>let</code> | No       | <code>string</code>                                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                         |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail           |
| :--------- | :--------- | :--------------- |
| expand     | dispatched | <code>any</code> |
| collapse   | dispatched | <code>any</code> |
| click      | forwarded  | --               |
| mouseover  | forwarded  | --               |
| mouseenter | forwarded  | --               |
| mouseleave | forwarded  | --               |
| change     | forwarded  | --               |
| input      | forwarded  | --               |
| focus      | forwarded  | --               |
| blur       | forwarded  | --               |
| keydown    | forwarded  | --               |
| keyup      | forwarded  | --               |
| clear      | dispatched | --               |

## `SearchSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                                      | Default value      | Description                          |
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ |
| small     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | --                                   |
| size      | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code>  | Specify the size of the search input |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Select`

### Props

| Prop name   | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
| selected    | <code>let</code> | Yes      | <code>string</code>                        | --                                               | Specify the selected item value                 |
| size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>              | --                                               | Set the size of the select input                |
| inline      | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to use the inline variant         |
| light       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant       |
| disabled    | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the select element     |
| id          | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element                |
| name        | <code>let</code> | No       | <code>string</code>                        | --                                               | Specify a name attribute for the select element |
| invalid     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to indicate an invalid state      |
| invalidText | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the invalid state text                  |
| warn        | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to indicate an warning state      |
| warnText    | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the warning state text                  |
| helperText  | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the helper text                         |
| noLabel     | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to not render a label             |
| labelText   | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
| hideLabel   | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to visually hide the label text   |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| --        | Yes     | --    | --                       |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>string</code> |
| blur       | forwarded  | --                  |

## `SelectItem`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                         |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- |
| value     | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the option value            |
| text      | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the option text             |
| hidden    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the option    |
| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the option |

### Slots

None.

### Events

None.

## `SelectItemGroup`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value                | Description                                         |
| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- |
| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>           | Set to `true` to disable the optgroup element       |
| label     | <code>let</code> | No       | <code>string</code>  | <code>"Provide label"</code> | Specify the label attribute of the optgroup element |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `SelectSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `SelectableTile`

### Props

| Prop name       | Kind             | Reactive | Type                                      | Default value                                    | Description                                                   |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                  |
| selected        | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to select the tile                              |
| light           | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                     |
| disabled        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the tile                             |
| title           | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the selectable tile                      |
| value           | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the selectable tile                      |
| tabindex        | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>                                 | Specify the tabindex                                          |
| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the selectable tile checkmark icon |
| id              | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                               |
| name            | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the input                        |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keydown    | forwarded | --     |

## `SideNav`

### Props

| Prop name           | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                                                                                      |
| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen              | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code> | Set to `true` to toggle the expanded state                                                                                                                                                                                                                       |
| fixed               | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fixed variant                                                                                                                                                                                                                           |
| rail                | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the rail variant                                                                                                                                                                                                                            |
| ariaLabel           | <code>let</code> | No       | <code>string</code>  | --                 | Specify the ARIA label for the nav                                                                                                                                                                                                                               |
| expansionBreakpoint | <code>let</code> | No       | <code>number</code>  | <code>1056</code>  | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />small: 320<br />medium: 672<br />large: 1056<br />x-large: 1312<br />max: 1584 |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name    | Type       | Detail           |
| :------------ | :--------- | :--------------- |
| open          | dispatched | <code>any</code> |
| close         | dispatched | <code>any</code> |
| click:overlay | dispatched | <code>any</code> |

## `SideNavDivider`

### Props

None.

### Slots

None.

### Events

None.

## `SideNavItems`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `SideNavLink`

### Props

| Prop name  | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code>                   | <code>null</code>  | Obtain a reference to the HTML anchor element         |
| isSelected | <code>let</code> | No       | <code>boolean</code>                                         | <code>false</code> | Set to `true` to select the current link              |
| href       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the `href` attribute                          |
| text       | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
| icon       | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `SideNavMenu`

### Props

| Prop name | Kind             | Reactive | Type                                                         | Default value      | Description                                           |
| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                   | <code>null</code>  | Obtain a reference to the HTML button element         |
| expanded  | <code>let</code> | Yes      | <code>boolean</code>                                         | <code>false</code> | Set to `true` to toggle the expanded state            |
| text      | <code>let</code> | No       | <code>string</code>                                          | --                 | Specify the text                                      |
| icon      | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code> | --                 | Specify the icon from `carbon-icons-svelte` to render |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `SideNavMenuItem`

### Props

| Prop name  | Kind             | Reactive | Type                                       | Default value      | Description                                   |
| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>  | Obtain a reference to the HTML anchor element |
| isSelected | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code> | Set to `true` to select the item              |
| href       | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the `href` attribute                  |
| text       | <code>let</code> | No       | <code>string</code>                        | --                 | Specify the item text                         |

### Slots

| Slot name | Default | Props | Fallback            |
| :-------- | :------ | :---- | :------------------ |
| --        | Yes     | --    | <code>{text}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `SkeletonPlaceholder`

### Props

None.

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `SkeletonText`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value       | Description                                     |
| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- |
| lines     | <code>let</code> | No       | <code>number</code>  | <code>3</code>      | Specify the number of lines to render           |
| heading   | <code>let</code> | No       | <code>boolean</code> | <code>false</code>  | Set to `true` to use the heading size variant   |
| paragraph | <code>let</code> | No       | <code>boolean</code> | <code>false</code>  | Set to `true` to use the paragraph size variant |
| width     | <code>let</code> | No       | <code>string</code>  | <code>"100%"</code> | Specify the width of the text (% or px)         |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `SkipToContent`

### Props

| Prop name | Kind             | Reactive | Type                | Default value                | Description                  |
| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- |
| href      | <code>let</code> | No       | <code>string</code> | <code>"#main-content"</code> | Specify the `href` attribute |
| tabindex  | <code>let</code> | No       | <code>string</code> | <code>"0"</code>             | Specify the tabindex         |

### Slots

| Slot name | Default | Props | Fallback                          |
| :-------- | :------ | :---- | :-------------------------------- |
| --        | Yes     | --    | <code>Skip to main content</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |

## `Slider`

### Props

| Prop name      | Kind             | Reactive | Type                                    | Default value                                    | Description                                |
| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ |
| ref            | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the HTML element     |
| value          | <code>let</code> | Yes      | <code>number</code>                     | <code>0</code>                                   | Specify the value of the slider            |
| max            | <code>let</code> | No       | <code>number</code>                     | <code>100</code>                                 | Set the maximum slider value               |
| maxLabel       | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label for the max value        |
| min            | <code>let</code> | No       | <code>number</code>                     | <code>0</code>                                   | Set the minimum slider value               |
| minLabel       | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label for the min value        |
| step           | <code>let</code> | No       | <code>number</code>                     | <code>1</code>                                   | Set the step value                         |
| stepMultiplier | <code>let</code> | No       | <code>number</code>                     | <code>4</code>                                   | Set the step multiplier value              |
| required       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to require a value           |
| inputType      | <code>let</code> | No       | <code>string</code>                     | <code>"number"</code>                            | Specify the input type                     |
| disabled       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to disable the slider        |
| light          | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to enable the light variant  |
| hideTextInput  | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to hide the text input       |
| id             | <code>let</code> | No       | <code>string</code>                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element       |
| invalid        | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to indicate an invalid state |
| labelText      | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label text                     |
| name           | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Set a name for the slider element          |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| mouseover  | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| change     | dispatched | --     |

## `SliderSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `StructuredList`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                                    |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
| selected  | <code>let</code> | Yes      | <code>string</code>  | --                 | Specify the selected structured list row value |
| border    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant      |
| condensed | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant     |
| flush     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to flush the list                |
| selection | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the selection variant     |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| mouseover  | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| change     | dispatched | --     |

## `StructuredListBody`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `StructuredListCell`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                       |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- |
| head      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use as a header  |
| noWrap    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to prevent wrapping |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `StructuredListHead`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `StructuredListInput`

### Props

| Prop name | Kind             | Reactive | Type                                      | Default value                                    | Description                                  |
| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element |
| checked   | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the input             |
| title     | <code>let</code> | No       | <code>string</code>                       | <code>"title"</code>                             | Specify the title of the input               |
| value     | <code>let</code> | No       | <code>string</code>                       | <code>"value"</code>                             | Specify the value of the input               |
| id        | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element              |
| name      | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify a name attribute for the input       |

### Slots

None.

### Events

None.

## `StructuredListRow`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| head      | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use as a header     |
| label     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a label slot |
| tabindex  | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>   | Specify the tabindex                 |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keydown    | forwarded | --     |

## `StructuredListSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| rows      | <code>let</code> | No       | <code>number</code>  | <code>5</code>     | Specify the number of rows                |
| border    | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the bordered variant |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Switch`

### Props

| Prop name | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                      |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the button HTML element                                                                    |
| selected  | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` for the switch to be selected                                                                      |
| text      | <code>let</code> | No       | <code>string</code>                        | <code>"Provide text"</code>                      | Specify the switch text<br />Alternatively, use the "text" slot (e.g., &lt;span slot="text"&gt;...&lt;/span&gt;) |
| disabled  | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the switch                                                                              |
| id        | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element                                                                                 |

### Slots

| Slot name | Default | Props | Fallback            |
| :-------- | :------ | :---- | :------------------ |
| --        | Yes     | --    | <code>{text}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| keydown    | forwarded | --     |

## `Tab`

### Props

| Prop name | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                                  |
| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| ref       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>                                | Obtain a reference to the anchor HTML element                                                                                |
| label     | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the tab label<br />Alternatively, use the default slot (e.g., &lt;Tab&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/Tab&gt;) |
| href      | <code>let</code> | No       | <code>string</code>                        | <code>"#"</code>                                 | Specify the href attribute                                                                                                   |
| disabled  | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the tab                                                                                             |
| tabindex  | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                                                                                         |
| id        | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element                                                                                          |

### Slots

| Slot name | Default | Props | Fallback             |
| :-------- | :------ | :---- | :------------------- |
| --        | Yes     | --    | <code>{label}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TabContent`

### Props

| Prop name | Kind             | Reactive | Type                | Default value                                    | Description                         |
| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- |
| id        | <code>let</code> | No       | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `Table`

### Props

| Prop name        | Kind             | Reactive | Type                                                                | Default value      | Description                             |
| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
| size             | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | --                 | Set the size of the table               |
| zebra            | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use zebra styles       |
| useStaticWidth   | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to use static width       |
| shouldShowBorder | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the bordered variant  |
| sortable         | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` for the sortable variant  |
| stickyHeader     | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code> | Set to `true` to enable a sticky header |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `TableBody`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `TableCell`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TableContainer`

### Props

| Prop name    | Kind             | Reactive | Type                 | Default value      | Description                               |
| :----------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| title        | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the title of the data table       |
| description  | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the description of the data table |
| stickyHeader | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header   |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `TableHead`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TableHeader`

### Props

| Prop name       | Kind             | Reactive | Type                      | Default value                                    | Description                                            |
| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ |
| disableSorting  | <code>let</code> | No       | <code>boolean</code>      | <code>false</code>                               | Set to `true` to disable sorting on this specific cell |
| scope           | <code>let</code> | No       | <code>string</code>       | <code>"col"</code>                               | Specify the `scope` attribute                          |
| translateWithId | <code>let</code> | No       | <code>() => string</code> | <code>() => ""</code>                            | Override the default id translations                   |
| id              | <code>let</code> | No       | <code>string</code>       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element                    |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| click      | forwarded | --     |

## `TableRow`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Tabs`

### Props

| Prop name       | Kind             | Reactive | Type                                      | Default value                    | Description                                 |
| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- |
| selected        | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>                   | Specify the selected tab index              |
| type            | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code>           | Specify the type of tabs                    |
| iconDescription | <code>let</code> | No       | <code>string</code>                       | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon |
| triggerHref     | <code>let</code> | No       | <code>string</code>                       | <code>"#"</code>                 | Specify the tab trigger href attribute      |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |
| content   | No      | --    | --       |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| keypress   | forwarded  | --     |
| click      | forwarded  | --     |
| change     | dispatched | --     |

## `TabsSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                                      | Default value          | Description                          |
| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ |
| count     | <code>let</code> | No       | <code>number</code>                       | <code>4</code>         | Specify the number of tabs to render |
| type      | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code> | Specify the type of tabs             |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Tag`

### Props

| Prop name   | Kind             | Reactive | Type                                                                                                                                                                                    | Default value                                    | Description                                                   |
| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| type        | <code>let</code> | No       | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast"</code> | --                                               | Specify the type of tag                                       |
| size        | <code>let</code> | No       | <code>"sm" &#124; "default"</code>                                                                                                                                                      | <code>"default"</code>                           | --                                                            |
| filter      | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to use filterable variant                       |
| disabled    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to disable a filterable tag                     |
| interactive | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to render a `button` element instead of a `div` |
| skeleton    | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                    | <code>false</code>                               | Set to `true` to display the skeleton state                   |
| title       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag        |
| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                                                                            | --                                               | Specify the icon from `carbon-icons-svelte` to render         |
| id          | <code>let</code> | No       | <code>string</code>                                                                                                                                                                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the filterable tag                              |

### Slots

| Slot name | Default | Props                                                  | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :------- |
| --        | Yes     | <code>{ props: { class: 'bx--tag\_\_label' } } </code> | --       |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| click      | forwarded  | --     |
| mouseover  | forwarded  | --     |
| mouseenter | forwarded  | --     |
| mouseleave | forwarded  | --     |
| close      | dispatched | --     |

## `TagSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                               | Default value          | Description |
| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
| size      | <code>let</code> | No       | <code>"sm" &#124; "default"</code> | <code>"default"</code> | --          |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TextArea`

### Props

| Prop name   | Kind             | Reactive | Type                                         | Default value                                    | Description                                     |
| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLTextAreaElement</code> | <code>null</code>                                | Obtain a reference to the textarea HTML element |
| value       | <code>let</code> | Yes      | <code>string</code>                          | <code>""</code>                                  | Specify the textarea value                      |
| placeholder | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the placeholder text                    |
| cols        | <code>let</code> | No       | <code>number</code>                          | <code>50</code>                                  | Specify the number of cols                      |
| rows        | <code>let</code> | No       | <code>number</code>                          | <code>4</code>                                   | Specify the number of rows                      |
| light       | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to enable the light variant       |
| disabled    | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to disable the input              |
| helperText  | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the helper text                         |
| labelText   | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the label text                          |
| hideLabel   | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to visually hide the label text   |
| invalid     | <code>let</code> | No       | <code>boolean</code>                         | <code>false</code>                               | Set to `true` to indicate an invalid state      |
| invalidText | <code>let</code> | No       | <code>string</code>                          | <code>""</code>                                  | Specify the text for the invalid state          |
| id          | <code>let</code> | No       | <code>string</code>                          | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the textarea element              |
| name        | <code>let</code> | No       | <code>string</code>                          | --                                               | Specify a name attribute for the input          |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| change     | forwarded | --     |
| input      | forwarded | --     |
| keydown    | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `TextAreaSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TextInput`

### Props

| Prop name   | Kind             | Reactive | Type                                      | Default value                                    | Description                                   |
| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element  |
| value       | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>                                  | Specify the input value                       |
| size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | --                                               | Set the size of the input                     |
| type        | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input type                        |
| placeholder | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the placeholder text                  |
| light       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant     |
| disabled    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input            |
| helperText  | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                       |
| id          | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element               |
| name        | <code>let</code> | No       | <code>string</code>                       | --                                               | Specify a name attribute for the input        |
| labelText   | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                        |
| hideLabel   | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text |
| invalid     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an invalid state    |
| invalidText | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the invalid state text                |
| warn        | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state    |
| warnText    | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                |
| required    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required   |
| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the inline variant       |
| readonly    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the read-only variant    |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| change     | forwarded | --     |
| input      | forwarded | --     |
| keydown    | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `TextInputSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
| hideLabel | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the label text |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Theme`

### Types

```ts
export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
```

### Props

| Prop name  | Kind             | Reactive | Type                                                                                                           | Default value                                                                                                 | Description                                                                                                  |
| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| theme      | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                       | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                 |
| tokens     | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                         | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />https://carbondesignsystem.com/guidelines/themes/overview#tokens |
| persist    | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                 |
| persistKey | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                |
| render     | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                          | --                                                                                                            | Render a toggle or select dropdown to control the theme                                                      |
| toggle     | <code>let</code> | No       | <code>import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; }</code> | <code>{ themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, }</code> | Override the default toggle props                                                                            |
| select     | <code>let</code> | No       | <code>import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; }</code>                              | <code>{ themes: themeKeys, labelText: "Themes", hideLabel: false, }</code>                                    | Override the default select props                                                                            |

### Slots

| Slot name | Default | Props                                 | Fallback |
| :-------- | :------ | :------------------------------------ | :------- |
| --        | Yes     | <code>{ theme: CarbonTheme; } </code> | --       |

### Events

| Event name | Type       | Detail                               |
| :--------- | :--------- | :----------------------------------- |
| update     | dispatched | <code>{ theme: CarbonTheme; }</code> |

## `Tile`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
| light     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `TileGroup`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value      | Description                             |
| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
| selected  | <code>let</code> | Yes      | <code>string</code>  | --                 | Specify the selected tile value         |
| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tile group |
| legend    | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                 |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail |
| :--------- | :--------- | :----- |
| select     | dispatched | --     |

## `TimePicker`

### Props

| Prop name   | Kind             | Reactive | Type                                      | Default value                                       | Description                                           |
| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                   | Obtain a reference to the input HTML element          |
| value       | <code>let</code> | Yes      | <code>string</code>                       | <code>""</code>                                     | Specify the input value                               |
| size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | --                                                  | Specify the size of the input                         |
| type        | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                                 | Specify the input type                                |
| placeholder | <code>let</code> | No       | <code>string</code>                       | <code>"hh:mm"</code>                                | Specify the input placeholder text                    |
| pattern     | <code>let</code> | No       | <code>string</code>                       | <code>"(1[012]&#124;[1-9]):[0-5][0-9](\\s)?"</code> | Specify the `pattern` attribute for the input element |
| maxlength   | <code>let</code> | No       | <code>number</code>                       | <code>5</code>                                      | Specify the `maxlength` input attribute               |
| light       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                                  | Set to `true` to enable the light variant             |
| disabled    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                                  | Set to `true` to disable the input                    |
| labelText   | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                     | Specify the label text                                |
| hideLabel   | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                                  | Set to `true` to visually hide the label text         |
| invalid     | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                                  | Set to `true` to indicate an invalid state            |
| invalidText | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                     | Specify the invalid state text                        |
| id          | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code>    | Set an id for the input element                       |
| name        | <code>let</code> | No       | <code>string</code>                       | --                                                  | Specify a name attribute for the input                |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| --        | Yes     | --    | --                       |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| change     | forwarded | --     |
| input      | forwarded | --     |
| keydown    | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `TimePickerSelect`

### Props

| Prop name       | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
| value           | <code>let</code> | Yes      | <code>number &#124; string</code>          | <code>""</code>                                  | Specify the select value                        |
| disabled        | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the select             |
| iconDescription | <code>let</code> | No       | <code>string</code>                        | <code>"Open list of options"</code>              | Specify the ARIA label for the chevron icon     |
| labelText       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
| hideLabel       | <code>let</code> | No       | <code>boolean</code>                       | <code>true</code>                                | --                                              |
| id              | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element                |
| name            | <code>let</code> | No       | <code>string</code>                        | --                                               | Specify a name attribute for the select element |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| --        | Yes     | --    | --                       |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ToastNotification`

### Props

| Prop name       | Kind             | Reactive | Type                                                                                                           | Default value                      | Description                                                             |
| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- |
| kind            | <code>let</code> | No       | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | <code>"error"</code>               | Specify the kind of notification                                        |
| lowContrast     | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to use the low contrast variant                           |
| timeout         | <code>let</code> | No       | <code>number</code>                                                                                            | <code>0</code>                     | Set the timeout duration (ms) to hide the notification after opening it |
| role            | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"alert"</code>               | Set the `role` attribute                                                |
| title           | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the title text                                                  |
| subtitle        | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the subtitle text                                               |
| caption         | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                    | Specify the caption text                                                |
| iconDescription | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Closes notification"</code> | Specify the ARIA label for the icon                                     |
| hideCloseButton | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                 | Set to `true` to hide the close button                                  |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type       | Detail                            |
| :--------- | :--------- | :-------------------------------- |
| close      | dispatched | <code>{ timeout: boolean }</code> |
| click      | forwarded  | --                                |
| mouseover  | forwarded  | --                                |
| mouseenter | forwarded  | --                                |
| mouseleave | forwarded  | --                                |

## `Toggle`

### Props

| Prop name | Kind             | Reactive | Type                               | Default value                                    | Description                                     |
| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| toggled   | <code>let</code> | Yes      | <code>boolean</code>               | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
| size      | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size                         |
| disabled  | <code>let</code> | No       | <code>boolean</code>               | <code>false</code>                               | Set to `true` to disable checkbox input         |
| labelA    | <code>let</code> | No       | <code>string</code>                | <code>"Off"</code>                               | Specify the label for the untoggled state       |
| labelB    | <code>let</code> | No       | <code>string</code>                | <code>"On"</code>                                | Specify the label for the toggled state         |
| labelText | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text                          |
| id        | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
| name      | <code>let</code> | No       | <code>string</code>                | --                                               | Specify a name attribute for the checkbox input |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail                             |
| :--------- | :--------- | :--------------------------------- |
| toggle     | dispatched | <code>{ toggled: boolean; }</code> |
| click      | forwarded  | --                                 |
| mouseover  | forwarded  | --                                 |
| mouseenter | forwarded  | --                                 |
| mouseleave | forwarded  | --                                 |
| change     | forwarded  | --                                 |
| keyup      | forwarded  | --                                 |
| focus      | forwarded  | --                                 |
| blur       | forwarded  | --                                 |

## `ToggleSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                               | Default value                                    | Description                     |
| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- |
| size      | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size         |
| labelText | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text          |
| id        | <code>let</code> | No       | <code>string</code>                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `ToggleSmall`

### Props

| Prop name | Kind             | Reactive | Type                 | Default value                                    | Description                                     |
| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- |
| toggled   | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to toggle the checkbox input      |
| disabled  | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable checkbox input         |
| labelA    | <code>let</code> | No       | <code>string</code>  | <code>"Off"</code>                               | Specify the label for the untoggled state       |
| labelB    | <code>let</code> | No       | <code>string</code>  | <code>"On"</code>                                | Specify the label for the toggled state         |
| labelText | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the label text                          |
| id        | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                 |
| name      | <code>let</code> | No       | <code>string</code>  | --                                               | Specify a name attribute for the checkbox input |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| change     | forwarded | --     |
| keyup      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `ToggleSmallSkeleton`

### Props

| Prop name | Kind             | Reactive | Type                | Default value                                    | Description                     |
| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- |
| labelText | <code>let</code> | No       | <code>string</code> | <code>""</code>                                  | Specify the label text          |
| id        | <code>let</code> | No       | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |

## `Toolbar`

### Props

| Prop name | Kind             | Reactive | Type                               | Default value          | Description              |
| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ |
| size      | <code>let</code> | No       | <code>"sm" &#124; "default"</code> | <code>"default"</code> | Specify the toolbar size |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ToolbarBatchActions`

### Props

| Prop name           | Kind             | Reactive | Type                                           | Default value                                                                                       | Description                            |
| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- |
| formatTotalSelected | <code>let</code> | No       | <code>(totalSelected: number) => string</code> | <code>(totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\`</code> | Override the total items selected text |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ToolbarContent`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ToolbarMenu`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `ToolbarMenuItem`

### Props

None.

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| keydown    | forwarded | --     |

## `ToolbarSearch`

### Props

| Prop name  | Kind             | Reactive | Type                                      | Default value      | Description                                   |
| :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- |
| ref        | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>  | Obtain a reference to the input HTML element  |
| expanded   | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code> | Set to `true` to expand the search bar        |
| value      | <code>let</code> | Yes      | <code>number &#124; string</code>         | <code>""</code>    | Specify the value of the search input         |
| persistent | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to keep the search bar expanded |
| disabled   | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code> | Set to `true` to disable the search bar       |
| tabindex   | <code>let</code> | No       | <code>string</code>                       | <code>"0"</code>   | Specify the tabindex                          |

### Slots

None.

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| clear      | forwarded | --     |
| change     | forwarded | --     |
| input      | forwarded | --     |
| focus      | forwarded | --     |
| blur       | forwarded | --     |

## `Tooltip`

### Props

| Prop name       | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                                                                                        |
| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| refIcon         | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the icon HTML element                                                                                        |
| refTooltip      | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the tooltip HTML element                                                                                     |
| ref             | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the trigger text HTML element                                                                                |
| open            | <code>let</code> | Yes      | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to open the tooltip                                                                                                  |
| align           | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                                                                              |
| direction       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the button                                                                            |
| hideIcon        | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to hide the tooltip icon                                                                                             |
| icon            | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>    | --                                               | Specify the icon from `carbon-icons-svelte` to render for the tooltip button<br />Icon size must be 16px (e.g., `Add16`, `Task16`) |
| iconDescription | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the ARIA label for the tooltip button                                                                                      |
| iconName        | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the icon name attribute                                                                                                    |
| tabindex        | <code>let</code> | No       | <code>string</code>                                             | <code>"0"</code>                                 | Set the button tabindex                                                                                                            |
| tooltipId       | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip                                                                                                          |
| triggerId       | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button                                                                                                   |
| triggerText     | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Set the tooltip button text                                                                                                        |

### Slots

| Slot name   | Default | Props | Fallback                                                                |
| :---------- | :------ | :---- | :---------------------------------------------------------------------- |
| --          | Yes     | --    | --                                                                      |
| icon        | No      | --    | <code>&lt;svelte:component this="{icon}" name="{iconName}" /&gt;</code> |
| triggerText | No      | --    | <code>{triggerText}</code>                                              |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mousedown  | forwarded | --     |

## `TooltipDefinition`

### Props

| Prop name   | Kind             | Reactive | Type                                              | Default value                                    | Description                                           |
| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>        | <code>null</code>                                | Obtain a reference to the button HTML element         |
| tooltipText | <code>let</code> | No       | <code>string</code>                               | <code>""</code>                                  | Specify the tooltip text                              |
| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
| direction   | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
| id          | <code>let</code> | No       | <code>string</code>                               | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element                 |

### Slots

| Slot name | Default | Props | Fallback                   |
| :-------- | :------ | :---- | :------------------------- |
| --        | Yes     | --    | --                         |
| tooltip   | No      | --    | <code>{tooltipText}</code> |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| focus      | forwarded | --     |

## `TooltipFooter`

### Props

| Prop name            | Kind             | Reactive | Type                | Default value                                  | Description                                                                 |
| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- |
| selectorPrimaryFocus | <code>let</code> | No       | <code>string</code> | <code>"a[href], button:not([disabled])"</code> | Specify a selector to be focused inside the footer when opening the tooltip |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `TooltipIcon`

### Props

| Prop name   | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                              |
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                            |
| tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon        | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>    | --                                               | Specify the icon from `carbon-icons-svelte` to render                    |
| disabled    | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the tooltip icon                                |
| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon                    |
| direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon                    |
| id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                                           |

### Slots

| Slot name   | Default | Props | Fallback                                              |
| :---------- | :------ | :---- | :---------------------------------------------------- |
| --          | Yes     | --    | <code>&lt;svelte:component this="{icon}" /&gt;</code> |
| tooltipText | No      | --    | <code>{tooltipText}</code>                            |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
| focus      | forwarded | --     |

## `TreeView`

### Types

```ts
export type TreeNodeId = string | number;

export interface TreeNode {
  id: TreeNodeId;
  text: string;
  icon?: typeof import("carbon-icons-svelte").CarbonIcon;
  disabled?: boolean;
  expanded?: boolean;
}
```

### Props

| Prop name   | Kind             | Reactive | Type                                                     | Default value          | Description                                                     |
| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- |
| selectedIds | <code>let</code> | Yes      | <code>TreeNodeId[]</code>                                | <code>[]</code>        | Set the node ids to be selected                                 |
| activeId    | <code>let</code> | Yes      | <code>TreeNodeId</code>                                  | <code>""</code>        | Set the current active node id<br />Only one node can be active |
| children    | <code>let</code> | No       | <code>Array<TreeNode & { children?: TreeNode[] }></code> | <code>[]</code>        | Provide an array of children nodes to render                    |
| size        | <code>let</code> | No       | <code>"default" &#124; "compact"</code>                  | <code>"default"</code> | Specify the TreeView size                                       |
| labelText   | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>        | Specify the label text                                          |
| hideLabel   | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>     | Set to `true` to visually hide the label text                   |

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelText | No      | --    | <code>{labelText}</code> |

### Events

| Event name | Type       | Detail                                                        |
| :--------- | :--------- | :------------------------------------------------------------ |
| select     | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| toggle     | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| focus      | dispatched | <code>TreeNode & { expanded: boolean; leaf: boolean; }</code> |
| keydown    | forwarded  | --                                                            |

## `Truncate`

### Props

| Prop name | Kind             | Reactive | Type                              | Default value      | Description |
| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
| clamp     | <code>let</code> | No       | <code>"end" &#124; "front"</code> | <code>"end"</code> | --          |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

None.

## `UnorderedList`

### Props

| Prop name  | Kind             | Reactive | Type                 | Default value      | Description                                          |
| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- |
| nested     | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
| expressive | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |

### Slots

| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| --        | Yes     | --    | --       |

### Events

| Event name | Type      | Detail |
| :--------- | :-------- | :----- |
| click      | forwarded | --     |
| mouseover  | forwarded | --     |
| mouseenter | forwarded | --     |
| mouseleave | forwarded | --     |
