# Component Index

> 165 components exported from carbon-components-svelte@0.89.5.

## 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)
- [`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)
- [`HeaderGlobalAction`](#headerglobalaction)
- [`HeaderNav`](#headernav)
- [`HeaderNavItem`](#headernavitem)
- [`HeaderNavMenu`](#headernavmenu)
- [`HeaderPanelDivider`](#headerpaneldivider)
- [`HeaderPanelLink`](#headerpanellink)
- [`HeaderPanelLinks`](#headerpanellinks)
- [`HeaderSearch`](#headersearch)
- [`HeaderUtilities`](#headerutilities)
- [`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)
- [`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)
- [`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 | Required | Kind             | Reactive | Type                              | Default value          | Description                                      |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| align     | No       | <code>let</code> | No       | <code>"start" &#124; "end"</code> | <code>"end"</code>     | Specify alignment of accordion item chevron icon |
| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>     | <code>undefined</code> | Specify the size of the accordion                |
| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the accordion           |
| skeleton  | No       | <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       | Required | Kind             | Reactive | Type                 | Default value                  | Description                                                                                                                                 |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled        | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to disable the accordion item                                                                                                 |
| open            | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>             | Set to `true` to open the first accordion item                                                                                              |
| title           | No       | <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 | No       | <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 | Required | Kind             | Reactive | Type                              | Default value          | Description                                      |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ |
| count     | No       | <code>let</code> | No       | <code>number</code>               | <code>4</code>         | Specify the number of accordion items to render  |
| align     | No       | <code>let</code> | No       | <code>"start" &#124; "end"</code> | <code>"end"</code>     | Specify alignment of accordion item chevron icon |
| size      | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>     | <code>undefined</code> | Specify the size of the accordion                |
| open      | No       | <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 | Required | Kind             | Reactive | Type                                                                                                                         | Default value      | Description              |
| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio     | No       | <code>let</code> | No       | <code>"2x1" &#124; "2x3" &#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       | Required | Kind             | Reactive | Type                 | Default value      | Description                                         |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- |
| noTrailingSlash | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the breadcrumb trailing slash |
| skeleton        | No       | <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     | Required | Kind             | Reactive | Type                 | Default value          | Description                                                      |
| :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------- |
| href          | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Set the `href` to use an anchor link                             |
| isCurrentPage | No       | <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       | Required | Kind             | Reactive | Type                 | Default value      | Description                                         |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- |
| noTrailingSlash | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to hide the breadcrumb trailing slash |
| count           | No       | <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 | Required | Kind             | Reactive | Type                                         | Default value                                                             | Description                                       |
| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes     | No       | <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      | No       | <code>let</code> | Yes      | <code>BreakpointSize</code>                  | <code>undefined</code>                                                    | Determine the current Carbon grid breakpoint size |

### Slots

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

### Events

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

## `Button`

### Props

| Prop name        | Required | Kind             | Reactive | Type                                                                                                                                      | Default value          | Description                                                                                                                                                                                   |
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code>                                                                       | <code>null</code>      | Obtain a reference to the HTML element                                                                                                                                                        |
| kind             | No       | <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             | No       | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code>                                                              | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
| expressive       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to use Carbon's expressive typesetting                                                                                                                                          |
| isSelected       | No       | <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             | No       | <code>let</code> | No       | <code>any</code>                                                                                                                          | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`)                                                                     |
| iconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>undefined</code> | Specify the ARIA label for the button icon                                                                                                                                                    |
| tooltipAlignment | No       | <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 />Only applies to icon-only buttons                                                                                                 |
| tooltipPosition  | No       | <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               | No       | <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         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to display the skeleton state                                                                                                                                                   |
| disabled         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to disable the button                                                                                                                                                           |
| href             | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>undefined</code> | Set the `href` to use an anchor link                                                                                                                                                          |
| tabindex         | No       | <code>let</code> | No       | <code>string</code>                                                                                                                       | <code>"0"</code>       | Specify the tabindex                                                                                                                                                                          |
| type             | No       | <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> | --       |
| icon      | No      | --                                                                                                                                              | --       |

### Events

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

## `ButtonSet`

### Props

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

### Slots

None.

### Events

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

## `Checkbox`

### Props

| Prop name     | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                       |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- |
| ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element      |
| title         | No       | <code>let</code> | Yes      | <code>string</code>                       | <code>undefined</code>                           | Specify the title attribute for the label element |
| indeterminate | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is indeterminate     |
| group         | No       | <code>let</code> | Yes      | <code>ReadonlyArray<any></code>           | <code>undefined</code>                           | Specify the bound group                           |
| checked       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Specify whether the checkbox is checked           |
| value         | No       | <code>let</code> | No       | <code>any</code>                          | <code>""</code>                                  | Specify the value of the checkbox                 |
| skeleton      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state       |
| required      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required       |
| readonly      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` for the checkbox to be read-only    |
| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the checkbox             |
| labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                            |
| hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text     |
| name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Set a name for the input element                  |
| id            | No       | <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  | --                   |
| focus      | 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 | Required | Kind             | Reactive | Type                 | Default value          | Description                               |
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------- |
| clicked   | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>     | Set to `true` to click the tile           |
| light     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to enable the light variant |
| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile         |
| href      | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</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             | Required | Kind             | Reactive | Type                                                 | Default value                                                                                                     | Description                                                                                                                                                                                                           |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref                   | No       | <code>let</code> | Yes      | <code>null &#124; HTMLPreElement</code>              | <code>null</code>                                                                                                 | Obtain a reference to the pre HTML element                                                                                                                                                                            |
| showMoreLess          | No       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>true</code>                                                                                                 | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant                                                                                                |
| expanded              | No       | <code>let</code> | Yes      | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to expand a multi-line code snippet (type="multi")                                                                                                                                                      |
| type                  | No       | <code>let</code> | No       | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code>                                                                                             | Set the type of code snippet                                                                                                                                                                                          |
| code                  | No       | <code>let</code> | No       | <code>string</code>                                  | <code>undefined</code>                                                                                            | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
| copy                  | No       | <code>let</code> | No       | <code>(code: string) => void</code>                  | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior.                                             |
| hideCopyButton        | No       | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to hide the copy button                                                                                                                                                                                 |
| disabled              | No       | <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              | No       | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant                                                                                                                 |
| light                 | No       | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to enable the light variant                                                                                                                                                                             |
| skeleton              | No       | <code>let</code> | No       | <code>boolean</code>                                 | <code>false</code>                                                                                                | Set to `true` to display the skeleton state                                                                                                                                                                           |
| copyButtonDescription | No       | <code>let</code> | No       | <code>string</code>                                  | <code>undefined</code>                                                                                            | Specify the ARIA label for the copy button icon                                                                                                                                                                       |
| copyLabel             | No       | <code>let</code> | No       | <code>string</code>                                  | <code>undefined</code>                                                                                            | Specify the ARIA label of the copy button                                                                                                                                                                             |
| feedback              | No       | <code>let</code> | No       | <code>string</code>                                  | <code>"Copied!"</code>                                                                                            | Specify the feedback text displayed when clicking the snippet                                                                                                                                                         |
| feedbackTimeout       | No       | <code>let</code> | No       | <code>number</code>                                  | <code>2000</code>                                                                                                 | Set the timeout duration (ms) to display feedback text                                                                                                                                                                |
| showLessText          | No       | <code>let</code> | No       | <code>string</code>                                  | <code>"Show less"</code>                                                                                          | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant                                                                                                                     |
| showMoreText          | No       | <code>let</code> | No       | <code>string</code>                                  | <code>"Show more"</code>                                                                                          | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant                                                                                                                      |
| id                    | No       | <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            |
| :----------- | :--------- | :---------------- |
| expand       | dispatched | <code>null</code> |
| collapse     | dispatched | <code>null</code> |
| copy         | dispatched | <code>null</code> |
| click        | forwarded  | --                |
| mouseover    | forwarded  | --                |
| mouseenter   | forwarded  | --                |
| mouseleave   | forwarded  | --                |
| animationend | forwarded  | --                |

## `CodeSnippetSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                                 | Default value         | Description                  |
| :-------- | :------- | :--------------- | :------- | ------------------------------------ | --------------------- | ---------------------------- |
| type      | No       | <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     | Required | Kind             | Reactive | Type                                                                                               | Default value          | Description                                                                                                                                                                                           |
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | No       | <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      | No       | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code>     | Set to `true` to remove the gutter                                                                                                                                                                    |
| noGutterLeft  | No       | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code>     | Set to `true` to remove the left gutter                                                                                                                                                               |
| noGutterRight | No       | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code>     | Set to `true` to remove the right gutter                                                                                                                                                              |
| padding       | No       | <code>let</code> | No       | <code>boolean</code>                                                                               | <code>false</code>     | Set to `true` to add top and bottom padding to the column                                                                                                                                             |
| aspectRatio   | No       | <code>let</code> | No       | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | <code>undefined</code> | Specify the aspect ratio of the column                                                                                                                                                                |
| sm            | No       | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | <code>undefined</code> | Set the small breakpoint                                                                                                                                                                              |
| md            | No       | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | <code>undefined</code> | Set the medium breakpoint                                                                                                                                                                             |
| lg            | No       | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | <code>undefined</code> | Set the large breakpoint                                                                                                                                                                              |
| xlg           | No       | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | <code>undefined</code> | Set the extra large breakpoint                                                                                                                                                                        |
| max           | No       | <code>let</code> | No       | <code>ColumnBreakpoint</code>                                                                      | <code>undefined</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 type ComboBoxItemId = any;

export interface ComboBoxItem {
  id: ComboBoxItemId;
  text: string;
  disabled?: boolean;
}
```

### Props

| Prop name                | Required | Kind                  | Reactive | Type                                                                                                  | Default value                                                                                                                                                                                                           | Description                                                                                                                                                 |
| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listRef                  | No       | <code>let</code>      | Yes      | <code>null &#124; HTMLDivElement</code>                                                               | <code>null</code>                                                                                                                                                                                                       | Obtain a reference to the list HTML element                                                                                                                 |
| ref                      | No       | <code>let</code>      | Yes      | <code>null &#124; HTMLInputElement</code>                                                             | <code>null</code>                                                                                                                                                                                                       | Obtain a reference to the input HTML element                                                                                                                |
| open                     | No       | <code>let</code>      | Yes      | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to open the combobox menu dropdown                                                                                                            |
| value                    | No       | <code>let</code>      | Yes      | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the selected combobox value                                                                                                                         |
| selectedId               | No       | <code>let</code>      | Yes      | <code>ComboBoxItemId</code>                                                                           | <code>undefined</code>                                                                                                                                                                                                  | Set the selected item by value id                                                                                                                           |
| items                    | No       | <code>let</code>      | No       | <code>ReadonlyArray<ComboBoxItem></code>                                                              | <code>[]</code>                                                                                                                                                                                                         | Set the combobox items                                                                                                                                      |
| itemToString             | No       | <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                | No       | <code>let</code>      | No       | <code>"bottom" &#124; "top"</code>                                                                    | <code>"bottom"</code>                                                                                                                                                                                                   | Specify the direction of the combobox dropdown menu                                                                                                         |
| size                     | No       | <code>let</code>      | No       | <code>"sm" &#124; "xl"</code>                                                                         | <code>undefined</code>                                                                                                                                                                                                  | Set the size of the combobox                                                                                                                                |
| disabled                 | No       | <code>let</code>      | No       | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to disable the combobox                                                                                                                       |
| titleText                | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the title text of the combobox                                                                                                                      |
| hideLabel                | No       | <code>let</code>      | No       | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to visually hide the label text                                                                                                               |
| placeholder              | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the placeholder text                                                                                                                                |
| helperText               | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the helper text                                                                                                                                     |
| invalidText              | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the invalid state text                                                                                                                              |
| invalid                  | No       | <code>let</code>      | No       | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to indicate an invalid state                                                                                                                  |
| warn                     | No       | <code>let</code>      | No       | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to indicate an warning state                                                                                                                  |
| warnText                 | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>""</code>                                                                                                                                                                                                         | Specify the warning state text                                                                                                                              |
| light                    | No       | <code>let</code>      | No       | <code>boolean</code>                                                                                  | <code>false</code>                                                                                                                                                                                                      | Set to `true` to enable the light variant                                                                                                                   |
| shouldFilterItem         | No       | <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          | No       | <code>let</code>      | No       | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code>                                                                                                                                                                                                  | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open                                |
| translateWithIdSelection | No       | <code>let</code>      | No       | <code>(id: "clearSelection") => string</code>                                                         | <code>undefined</code>                                                                                                                                                                                                  | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" since a combo box can only have on selection. |
| id                       | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>"ccs-" + Math.random().toString(36)</code>                                                                                                                                                                        | Set an id for the list box component                                                                                                                        |
| name                     | No       | <code>let</code>      | No       | <code>string</code>                                                                                   | <code>undefined</code>                                                                                                                                                                                                  | Specify a name attribute for the input                                                                                                                      |
| clear                    | No       | <code>function</code> | No       | <code>(options?: { focus?: boolean; }) => void</code>                                                 | <code>() => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically                                                                                                                        |

### Slots

| Slot name | Default | Props                                               | Fallback                          |
| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
| --        | Yes     | <code>{ item: ComboBoxItem; index: number } </code> | <code>{itemToString(item)}</code> |
| titleText | No      | --                                                  | <code>{titleText}</code>          |

### Events

| Event name | Type       | Detail                                                                  |
| :--------- | :--------- | :---------------------------------------------------------------------- |
| select     | dispatched | <code>{ selectedId: ComboBoxItemId; selectedItem: ComboBoxItem }</code> |
| clear      | dispatched | <code>KeyboardEvent &#124; MouseEvent</code>                            |
| keydown    | forwarded  | --                                                                      |
| keyup      | forwarded  | --                                                                      |
| focus      | forwarded  | --                                                                      |
| blur       | forwarded  | --                                                                      |
| paste      | forwarded  | --                                                                      |
| scroll     | forwarded  | --                                                                      |

## `ComposedModal`

### Props

| Prop name                  | Required | Kind             | Reactive | Type                                      | Default value                             | Description                                                           |
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
| ref                        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>   | <code>null</code>                         | Obtain a reference to the top-level HTML element                      |
| open                       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to open the modal                                       |
| size                       | No       | <code>let</code> | No       | <code>"xs" &#124; "sm" &#124; "lg"</code> | <code>undefined</code>                    | Set the size of the composed modal                                    |
| danger                     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to use the danger variant                               |
| preventCloseOnClickOutside | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                        | Set to `true` to prevent the modal from closing when clicking outside |
| containerClass             | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                           | Specify a class for the inner modal                                   |
| selectorPrimaryFocus       | No       | <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 | <code>null</code>               |
| click:button--primary | dispatched | <code>null</code>               |
| close                 | dispatched | <code>null</code>               |
| open                  | dispatched | <code>null</code>               |

## `Content`

### Props

| Prop name | Required | Kind             | Reactive | Type                | Default value               | Description                         |
| :-------- | :------- | :--------------- | :------- | ------------------- | --------------------------- | ----------------------------------- |
| id        | No       | <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     | Required | Kind             | Reactive | Type                          | Default value          | Description                               |
| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- |
| selectedIndex | No       | <code>let</code> | Yes      | <code>number</code>           | <code>0</code>         | Set the selected index of the switch item |
| size          | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code> | <code>undefined</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 | Required | Kind             | Reactive | Type                                                            | Default value      | Description                                                                                                                                        |
| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>                       | <code>null</code>  | Obtain a reference to the unordered list HTML element                                                                                              |
| y         | No       | <code>let</code> | Yes      | <code>number</code>                                             | <code>0</code>     | Specify the vertical offset of the menu position                                                                                                   |
| x         | No       | <code>let</code> | Yes      | <code>number</code>                                             | <code>0</code>     | Specify the horizontal offset of the menu position                                                                                                 |
| open      | No       | <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                                                                   |
| target    | No       | <code>let</code> | No       | <code>null &#124; ReadonlyArray<null &#124; HTMLElement></code> | <code>null</code>  | Specify an element or list of elements to trigger the context menu.<br />If no element is specified, the context menu applies to the entire window |

### Slots

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

### Events

| Event name | Type       | Detail                   |
| :--------- | :--------- | :----------------------- |
| open       | dispatched | <code>HTMLElement</code> |
| click      | forwarded  | --                       |
| keydown    | forwarded  | --                       |
| close      | dispatched | <code>null</code>        |

## `ContextMenuDivider`

### Props

None.

### Slots

None.

### Events

None.

## `ContextMenuGroup`

### Props

| Prop name   | Required | Kind             | Reactive | Type                               | Default value   | Description            |
| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
| selectedIds | No       | <code>let</code> | Yes      | <code>ReadonlyArray<string></code> | <code>[]</code> | --                     |
| labelText   | No       | <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    | Required | Kind             | Reactive | Type                                   | Default value                                    | Description                                                                                                                           |
| :----------- | :------- | :--------------- | :------- | -------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
| ref          | No       | <code>let</code> | Yes      | <code>null &#124; HTMLLIElement</code> | <code>null</code>                                | Obtain a reference to the list item HTML element                                                                                      |
| selectable   | No       | <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     | No       | <code>let</code> | Yes      | <code>boolean</code>                   | <code>false</code>                               | Set to `true` to use the selected variant                                                                                             |
| icon         | No       | <code>let</code> | Yes      | <code>any</code>                       | <code>undefined</code>                           | Specify the icon to render<br />Icon is rendered to the left of the label text                                                        |
| indented     | No       | <code>let</code> | Yes      | <code>boolean</code>                   | <code>false</code>                               | Set to `true` to indent the label                                                                                                     |
| kind         | No       | <code>let</code> | No       | <code>"default" &#124; "danger"</code> | <code>"default"</code>                           | Specify the kind of option                                                                                                            |
| disabled     | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>                               | Set to `true` to enable the disabled state                                                                                            |
| labelText    | No       | <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 | No       | <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           | No       | <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     | --    | --                                                  |
| icon         | No      | --    | <code>&lt;svelte:component this={icon} /&gt;</code> |
| labelText    | No      | --    | <code>{labelText}</code>                            |
| shortcutText | No      | --    | <code>{shortcutText}</code>                         |

### Events

| Event name | Type       | Detail            |
| :--------- | :--------- | :---------------- |
| keydown    | forwarded  | --                |
| mouseenter | forwarded  | --                |
| mouseleave | forwarded  | --                |
| click      | dispatched | <code>null</code> |

## `ContextMenuRadioGroup`

### Props

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

### Slots

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

### Events

None.

## `CopyButton`

### Props

| Prop name       | Required | Kind             | Reactive | Type                                | Default value                                                                                                     | Description                                                                                    |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| feedback        | No       | <code>let</code> | No       | <code>string</code>                 | <code>"Copied!"</code>                                                                                            | Set the feedback text shown after clicking the button                                          |
| feedbackTimeout | No       | <code>let</code> | No       | <code>number</code>                 | <code>2000</code>                                                                                                 | Set the timeout duration (ms) to display feedback text                                         |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                 | <code>"Copy to clipboard"</code>                                                                                  | Set the title and ARIA label for the copy button                                               |
| text            | Yes      | <code>let</code> | No       | <code>string</code>                 | <code>undefined</code>                                                                                            | Specify the text to copy                                                                       |
| copy            | No       | <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 | <code>null</code> |

## `DataTable`

### Types

```ts
export type DataTableKey<Row = DataTableRow> =
  import("./DataTableTypes.d.ts").PropertyPath<Row>;

export type DataTableValue = any;

export interface DataTableEmptyHeader<Row = DataTableRow> {
  key: DataTableKey<Row> | (string & {});
  empty: boolean;
  display?: (item: DataTableValue, row: Row) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export interface DataTableNonEmptyHeader<Row = DataTableRow> {
  key: DataTableKey<Row>;
  value: DataTableValue;
  display?: (item: DataTableValue, row: Row) => DataTableValue;
  sort?: false | ((a: DataTableValue, b: DataTableValue) => number);
  columnMenu?: boolean;
  width?: string;
  minWidth?: string;
}

export type DataTableHeader<Row = DataTableRow> =
  | DataTableNonEmptyHeader<Row>
  | DataTableEmptyHeader<Row>;

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

export type DataTableRowId = any;

export interface DataTableCell<Row = DataTableRow> {
  key: DataTableKey<Row> | (string & {});
  value: DataTableValue;
  display?: (item: DataTableValue, row: DataTableRow) => DataTableValue;
}
```

### Props

| Prop name           | Required | Kind             | Reactive | Type                                                                | Default value                                    | Description                                                                                                                                                                                            |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| selectedRowIds      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>                                  | Specify the row ids to be selected                                                                                                                                                                     |
| selectable          | No       | <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      | No       | <code>let</code> | Yes      | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>                                  | Specify the row ids to be expanded                                                                                                                                                                     |
| expandable          | No       | <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`                                                                                                |
| sortDirection       | No       | <code>let</code> | Yes      | <code>"none" &#124; "ascending" &#124; "descending"</code>          | <code>"none"</code>                              | Specify the sort direction                                                                                                                                                                             |
| sortKey             | No       | <code>let</code> | Yes      | <code>DataTableKey<Row></code>                                      | <code>null</code>                                | Specify the header key to sort by                                                                                                                                                                      |
| headers             | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableHeader<Row>></code>                    | <code>[]</code>                                  | Specify the data table headers                                                                                                                                                                         |
| rows                | No       | <code>let</code> | No       | <code>ReadonlyArray<Row></code>                                     | <code>[]</code>                                  | Specify the rows the data table should render<br />keys defined in `headers` are used for the row ids                                                                                                  |
| size                | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code>                           | Set the size of the data table                                                                                                                                                                         |
| title               | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>                                  | Specify the title of the data table                                                                                                                                                                    |
| description         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>                                  | Specify the description of the data table                                                                                                                                                              |
| inputName           | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>"ccs-" + Math.random().toString(36)</code> | Specify a name attribute for the input elements<br />in a selectable data table (radio or checkbox).<br />When the table is inside a form, this name will<br />be included in the form data on submit. |
| zebra               | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to use zebra styles                                                                                                                                                                      |
| sortable            | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` for the sortable variant                                                                                                                                                                 |
| batchExpansion      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to enable batch expansion                                                                                                                                                                |
| nonExpandableRowIds | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>                                  | Specify the ids for rows that should not be expandable                                                                                                                                                 |
| radio               | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` for the radio selection variant                                                                                                                                                          |
| batchSelection      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to enable batch selection                                                                                                                                                                |
| nonSelectableRowIds | No       | <code>let</code> | No       | <code>ReadonlyArray<DataTableRowId></code>                          | <code>[]</code>                                  | Specify the ids of rows that should not be selectable                                                                                                                                                  |
| stickyHeader        | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to enable a sticky header                                                                                                                                                                |
| useStaticWidth      | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to use static width                                                                                                                                                                      |
| pageSize            | No       | <code>let</code> | No       | <code>number</code>                                                 | <code>0</code>                                   | Specify the number of items to display in a page                                                                                                                                                       |
| page                | No       | <code>let</code> | No       | <code>number</code>                                                 | <code>0</code>                                   | Set to `number` to set current page                                                                                                                                                                    |

### Slots

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

### Events

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

## `DataTableSkeleton`

### Props

| Prop name   | Required | Kind             | Reactive | Type                                                               | Default value          | Description                                                                                  |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
| columns     | No       | <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        | No       | <code>let</code> | No       | <code>number</code>                                                | <code>5</code>         | Specify the number of rows                                                                   |
| size        | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "tall"</code>                | <code>undefined</code> | Set the size of the data table                                                               |
| zebra       | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>     | Set to `true` to apply zebra styles to the datatable rows                                    |
| showHeader  | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>true</code>      | Set to `false` to hide the header                                                            |
| headers     | No       | <code>let</code> | No       | <code>ReadonlyArray<string &#124; Partial<DataTableHeader>></code> | <code>[]</code>        | Set the column headers<br />Supersedes `columns` if value is a non-empty array               |
| showToolbar | No       | <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      | Required | Kind             | Reactive | Type                                                                                                             | Default value                                    | Description                                                                                       |
| :------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
| valueTo        | No       | <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      | No       | <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          | No       | <code>let</code> | Yes      | <code>number &#124; string</code>                                                                                | <code>""</code>                                  | Specify the date picker input value                                                               |
| datePickerType | No       | <code>let</code> | No       | <code>"simple" &#124; "single" &#124; "range"</code>                                                             | <code>"simple"</code>                            | Specify the date picker type                                                                      |
| dateFormat     | No       | <code>let</code> | No       | <code>string</code>                                                                                              | <code>"m/d/Y"</code>                             | Specify the date format                                                                           |
| maxDate        | No       | <code>let</code> | No       | <code>null &#124; string &#124; Date</code>                                                                      | <code>null</code>                                | Specify the maximum date                                                                          |
| minDate        | No       | <code>let</code> | No       | <code>null &#124; string &#124; Date</code>                                                                      | <code>null</code>                                | Specify the minimum date                                                                          |
| locale         | No       | <code>let</code> | No       | <code>import("flatpickr/dist/types/locale").CustomLocale &#124; import("flatpickr/dist/types/locale").key</code> | <code>"en"</code>                                | Specify the locale                                                                                |
| short          | No       | <code>let</code> | No       | <code>boolean</code>                                                                                             | <code>false</code>                               | Set to `true` to use the short variant                                                            |
| light          | No       | <code>let</code> | No       | <code>boolean</code>                                                                                             | <code>false</code>                               | Set to `true` to enable the light variant                                                         |
| id             | No       | <code>let</code> | No       | <code>string</code>                                                                                              | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the date picker element                                                             |
| flatpickrProps | No       | <code>let</code> | No       | <code>import("flatpickr/dist/types/options").Options</code>                                                      | <code>{ static: true }</code>                    | Override the options passed to the Flatpickr instance.<br />@see https://flatpickr.js.org/options |

### 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       | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                        |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element       |
| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>             | <code>undefined</code>                           | Set the size of the input                          |
| type            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"text"</code>                              | Specify the input type                             |
| placeholder     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input placeholder text                 |
| pattern         | No       | <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        | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input                 |
| helperText      | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                            |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the ARIA label for the calendar icon       |
| id              | No       | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                    |
| labelText       | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                             |
| hideLabel       | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text      |
| invalid         | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an invalid state         |
| invalidText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the invalid state text                     |
| warn            | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to indicate an warning state         |
| warnText        | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the warning state text                     |
| name            | No       | <code>let</code> | No       | <code>string</code>                       | <code>undefined</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 | --     |
| paste      | forwarded | --     |

## `DatePickerSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value                                    | Description                               |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ----------------------------------------- |
| range     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the range variant    |
| id        | No       | <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 = any;

export type DropdownItemText = string;

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

### Props

| Prop name       | Required | Kind             | Reactive | Type                                                                                                  | Default value                                         | Description                                                                                                                  |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                                                            | <code>null</code>                                     | Obtain a reference to the button HTML element                                                                                |
| open            | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to open the dropdown                                                                                           |
| selectedId      | Yes      | <code>let</code> | Yes      | <code>DropdownItemId</code>                                                                           | <code>undefined</code>                                | Specify the selected item id                                                                                                 |
| items           | No       | <code>let</code> | No       | <code>ReadonlyArray<DropdownItem></code>                                                              | <code>[]</code>                                       | Set the dropdown items                                                                                                       |
| itemToString    | No       | <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            | No       | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                                | <code>"default"</code>                                | Specify the type of dropdown                                                                                                 |
| direction       | No       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                                    | <code>"bottom"</code>                                 | Specify the direction of the dropdown menu                                                                                   |
| size            | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                             | <code>undefined</code>                                | Specify the size of the dropdown field                                                                                       |
| light           | No       | <code>let</code> | No       | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to enable the light variant                                                                                    |
| disabled        | No       | <code>let</code> | No       | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to disable the dropdown                                                                                        |
| titleText       | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>""</code>                                       | Specify the title text                                                                                                       |
| invalid         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to indicate an invalid state                                                                                   |
| invalidText     | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>""</code>                                       | Specify the invalid state text                                                                                               |
| warn            | No       | <code>let</code> | No       | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to indicate an warning state                                                                                   |
| warnText        | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>""</code>                                       | Specify the warning state text                                                                                               |
| helperText      | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>""</code>                                       | Specify the helper text                                                                                                      |
| label           | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>undefined</code>                                | Specify the list box label                                                                                                   |
| hideLabel       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                  | <code>false</code>                                    | Set to `true` to visually hide the label text                                                                                |
| translateWithId | No       | <code>let</code> | No       | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code> | <code>undefined</code>                                | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open |
| id              | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>"ccs-" + Math.random().toString(36)</code>      | Set an id for the list box component                                                                                         |
| name            | No       | <code>let</code> | No       | <code>string</code>                                                                                   | <code>undefined</code>                                | Specify a name attribute for the list box                                                                                    |

### Slots

| Slot name | Default | Props                                                | Fallback                          |
| :-------- | :------ | :--------------------------------------------------- | :-------------------------------- |
| --        | Yes     | <code>{ item: DropdownItem; index: number; } </code> | <code>{itemToString(item)}</code> |

### Events

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

## `DropdownSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                             |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------- |
| inline    | No       | <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             | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                           |
| :-------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- |
| ref                   | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the top-level element           |
| tilePadding           | No       | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the padding of the tile (number of pixels)    |
| tileMaxHeight         | No       | <code>let</code> | Yes      | <code>number</code>                        | <code>0</code>                                   | Specify the max height of the tile (number of pixels) |
| expanded              | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to expand the tile                      |
| light                 | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant             |
| tileCollapsedIconText | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to expand Tile"</code>           | Specify the icon text of the collapsed tile           |
| tileExpandedIconText  | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Interact to collapse Tile"</code>         | Specify the icon text of the expanded tile            |
| tileExpandedLabel     | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the expanded tile           |
| tileCollapsedLabel    | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the icon label of the collapsed tile          |
| tabindex              | No       | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                  |
| id                    | No       | <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        | Required | Kind               | Reactive | Type                                                               | Default value                           | Description                                                                                                                                             |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| files            | No       | <code>let</code>   | Yes      | <code>ReadonlyArray<File></code>                                   | <code>[]</code>                         | Obtain a reference to the uploaded files                                                                                                                |
| status           | No       | <code>let</code>   | No       | <code>"uploading" &#124; "edit" &#124; "complete"</code>           | <code>"uploading"</code>                | Specify the file uploader status                                                                                                                        |
| disabled         | No       | <code>let</code>   | No       | <code>boolean</code>                                               | <code>false</code>                      | Set to `true` to disable the file uploader                                                                                                              |
| accept           | No       | <code>let</code>   | No       | <code>ReadonlyArray<string></code>                                 | <code>[]</code>                         | Specify the accepted file types                                                                                                                         |
| multiple         | No       | <code>let</code>   | No       | <code>boolean</code>                                               | <code>false</code>                      | Set to `true` to allow multiple files                                                                                                                   |
| clearFiles       | No       | <code>const</code> | No       | <code>() => void</code>                                            | <code>() => { files = []; }</code>      | Programmatically clear the uploaded files                                                                                                               |
| labelTitle       | No       | <code>let</code>   | No       | <code>string</code>                                                | <code>""</code>                         | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `&lt;span slot="labelTitle"&gt;...&lt;/span&gt;`)                   |
| labelDescription | No       | <code>let</code>   | No       | <code>string</code>                                                | <code>""</code>                         | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `&lt;span slot="labelDescription"&gt;...&lt;/span&gt;`) |
| kind             | No       | <code>let</code>   | No       | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code>                  | Specify the kind of file uploader button                                                                                                                |
| size             | No       | <code>let</code>   | No       | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code>                    | Specify the size of the file uploader button                                                                                                            |
| buttonLabel      | No       | <code>let</code>   | No       | <code>string</code>                                                | <code>""</code>                         | Specify the button label                                                                                                                                |
| iconDescription  | No       | <code>let</code>   | No       | <code>string</code>                                                | <code>"Provide icon description"</code> | Specify the ARIA label used for the status icons                                                                                                        |
| name             | No       | <code>let</code>   | No       | <code>string</code>                                                | <code>""</code>                         | Specify a name attribute for the file button uploader input                                                                                             |

### Slots

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

### Events

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

## `FileUploaderButton`

### Props

| Prop name           | Required | Kind             | Reactive | Type                                                               | Default value                                    | Description                                  |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- |
| ref                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                          | <code>null</code>                                | Obtain a reference to the input HTML element |
| labelText           | No       | <code>let</code> | Yes      | <code>string</code>                                                | <code>"Add file"</code>                          | Specify the label text                       |
| files               | No       | <code>let</code> | Yes      | <code>ReadonlyArray<File></code>                                   | <code>[]</code>                                  | Obtain a reference to the uploaded files     |
| accept              | No       | <code>let</code> | No       | <code>ReadonlyArray<string></code>                                 | <code>[]</code>                                  | Specify the accepted file types              |
| multiple            | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>                               | Set to `true` to allow multiple files        |
| disabled            | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>                               | Set to `true` to disable the input           |
| disableLabelChanges | No       | <code>let</code> | No       | <code>boolean</code>                                               | <code>false</code>                               | Set to `true` to disable label changes       |
| kind                | No       | <code>let</code> | No       | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code>                           | Specify the kind of file uploader button     |
| size                | No       | <code>let</code> | No       | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code>                             | Specify the size of the file uploader button |
| role                | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"button"</code>                            | Specify the label role                       |
| tabindex            | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"0"</code>                                 | Specify `tabindex` attribute                 |
| id                  | No       | <code>let</code> | No       | <code>string</code>                                                | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element              |
| name                | No       | <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                           |
| :--------- | :--------- | :------------------------------- |
| change     | dispatched | <code>ReadonlyArray<File></code> |
| keydown    | forwarded  | --                               |
| click      | forwarded  | --                               |

## `FileUploaderDropContainer`

### Props

| Prop name     | Required | Kind             | Reactive | Type                                                             | Default value                                    | Description                                                                                          |
| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- |
| ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                        | <code>null</code>                                | Obtain a reference to the input HTML element                                                         |
| files         | No       | <code>let</code> | Yes      | <code>ReadonlyArray<File></code>                                 | <code>[]</code>                                  | Obtain a reference to the uploaded files                                                             |
| accept        | No       | <code>let</code> | No       | <code>ReadonlyArray<string></code>                               | <code>[]</code>                                  | Specify the accepted file types                                                                      |
| multiple      | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                               | Set to `true` to allow multiple files                                                                |
| validateFiles | No       | <code>let</code> | No       | <code>(files: ReadonlyArray<File>) => ReadonlyArray<File></code> | <code>(files) => files</code>                    | Override the default behavior of validating uploaded files.<br />By default, files are not validated |
| labelText     | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"Add file"</code>                          | Specify the label text                                                                               |
| role          | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"button"</code>                            | Specify the `role` attribute of the drop container                                                   |
| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                               | Set to `true` to disable the input                                                                   |
| tabindex      | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"0"</code>                                 | Specify `tabindex` attribute                                                                         |
| id            | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                      |
| name          | No       | <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>ReadonlyArray<File></code> |
| change     | dispatched | <code>ReadonlyArray<File></code> |
| dragover   | forwarded  | --                               |
| dragleave  | forwarded  | --                               |
| drop       | forwarded  | --                               |
| keydown    | forwarded  | --                               |
| click      | forwarded  | --                               |

## `FileUploaderItem`

### Props

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

| Prop name | Required | Kind             | Reactive | Type                                     | Default value     | Description                            |
| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLFormElement</code> | <code>null</code> | Obtain a reference to the form element |

### Slots

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

### Events

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

## `FormGroup`

### Props

| Prop name   | Required | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
| noMargin    | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` for to remove the bottom margin |
| invalid     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state    |
| message     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a form requirement    |
| messageText | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the message text                      |
| legendText  | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the legend text                       |
| legendId    | No       | <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 | Required | Kind             | Reactive | Type                | Default value                                    | Description                               |
| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------------- |
| id        | No       | <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     | Required | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                     |
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | No       | <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     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                                                                                                                                                      |
| narrow        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                                                                                                                                                         |
| fullWidth     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant                                                                                                                                                      |
| noGutter      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                              |
| noGutterLeft  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                         |
| noGutterRight | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                        |
| padding       | No       | <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               | Required | Kind             | Reactive | Type                                       | Default value          | Description                                                                                                                                                                                                                                                                 |
| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref                     | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>      | Obtain a reference to the HTML anchor element                                                                                                                                                                                                                               |
| isSideNavOpen           | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>     | Set to `true` to open the side nav                                                                                                                                                                                                                                          |
| expandedByDefault       | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>true</code>      | Set to `false` to hide the side nav by default                                                                                                                                                                                                                              |
| uiShellAriaLabel        | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the ARIA label for the header                                                                                                                                                                                                                                       |
| href                    | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the `href` attribute                                                                                                                                                                                                                                                |
| company                 | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`)                                                                                                                                      |
| platformName            | No       | <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 | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>     | Set to `true` to persist the hamburger menu                                                                                                                                                                                                                                 |
| expansionBreakpoint     | No       | <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                | No       | <code>let</code> | No       | <code>any</code>                           | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;`                                                                                                                                                                                |
| iconClose               | No       | <code>let</code> | No       | <code>any</code>                           | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;`                                                                                                                                                                               |

### Slots

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

### Events

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

## `HeaderAction`

### Props

| Prop name                  | Required | Kind             | Reactive | Type                                                              | Default value                  | Description                                                                                                                                 |
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| ref                        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                        | <code>null</code>              | Obtain a reference to the button HTML element                                                                                               |
| isOpen                     | No       | <code>let</code> | Yes      | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to open the panel                                                                                                             |
| icon                       | No       | <code>let</code> | No       | <code>any</code>                                                  | <code>undefined</code>         | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;`                                 |
| closeIcon                  | No       | <code>let</code> | No       | <code>any</code>                                                  | <code>undefined</code>         | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;`                                      |
| text                       | No       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify the text displayed next to the icon.<br />Alternatively, use the named slot "text" (e.g., `&lt;div slot="text"&gt;...&lt;/div&gt;`) |
| iconDescription            | No       | <code>let</code> | No       | <code>string</code>                                               | <code>undefined</code>         | Specify an icon tooltip. The tooltip will not be displayed<br />if either the `text` prop or a named slot="text" is used                    |
| tooltipAlignment           | No       | <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 />Only applies when `iconDescription` is provided                                 |
| transition                 | No       | <code>let</code> | No       | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition                                    |
| preventCloseOnClickOutside | No       | <code>let</code> | No       | <code>boolean</code>                                              | <code>false</code>             | Set to `true` to prevent the panel from closing when clicking outside                                                                       |

### Slots

| Slot name | Default | Props | Fallback                                                                                           |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- |
| --        | Yes     | --    | --                                                                                                 |
| closeIcon | No      | --    | <code>&lt;svelte:component this={closeIcon} size={20} /&gt;</code>                                 |
| icon      | No      | --    | <code>&lt;svelte:component this={icon} size={20} /&gt;</code>                                      |
| text      | No      | --    | <code>{#if text}&lt;span class:bx--header\_\_action-text={true}&gt;{text}&lt;/span&gt;{/if}</code> |

### Events

| Event name | Type       | Detail            |
| :--------- | :--------- | :---------------- |
| open       | dispatched | <code>null</code> |
| close      | dispatched | <code>null</code> |
| click      | forwarded  | --                |

## `HeaderActionLink`

### Props

| Prop name    | Required | Kind             | Reactive | Type                                       | Default value          | Description                                   |
| :----------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref          | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>      | Obtain a reference to the HTML anchor element |
| linkIsActive | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>     | Set to `true` to use the active state         |
| href         | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the `href` attribute                  |
| icon         | No       | <code>let</code> | No       | <code>any</code>                           | <code>undefined</code> | Specify the icon to render                    |

### Slots

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

### Events

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

## `HeaderGlobalAction`

### Props

| Prop name | Required | Kind             | Reactive | Type                           | Default value          | Description                                   |
| :-------- | :------- | :--------------- | :------- | ------------------------------ | ---------------------- | --------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>HTMLButtonElement</code> | <code>null</code>      | Obtain a reference to the HTML button element |
| isActive  | No       | <code>let</code> | No       | <code>boolean</code>           | <code>false</code>     | Set to `true` to use the active variant       |
| icon      | No       | <code>let</code> | No       | <code>any</code>               | <code>undefined</code> | Specify the icon to render                    |

### Slots

None.

### Events

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

## `HeaderNav`

### Props

None.

### Slots

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

### Events

None.

## `HeaderNavItem`

### Props

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

### Slots

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

### Events

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

## `HeaderNavMenu`

### Props

| Prop name | Required | Kind             | Reactive | Type                                       | Default value          | Description                                   |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>      | Obtain a reference to the HTML anchor element |
| expanded  | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>     | Set to `true` to toggle the expanded state    |
| href      | No       | <code>let</code> | No       | <code>string</code>                        | <code>"/"</code>       | Specify the `href` attribute                  |
| text      | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</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 | Required | Kind             | Reactive | Type                                       | Default value          | Description                                   |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>      | Obtain a reference to the HTML anchor element |
| href      | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</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           | Required | Kind             | Reactive | Type                                           | Default value      | Description                                        |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- |
| selectedResultIndex | No       | <code>let</code> | Yes      | <code>number</code>                            | <code>0</code>     | Specify the selected result index                  |
| ref                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>      | <code>null</code>  | Obtain a reference to the input HTML element       |
| active              | No       | <code>let</code> | Yes      | <code>boolean</code>                           | <code>false</code> | Set to `true` to activate and focus the search bar |
| value               | No       | <code>let</code> | Yes      | <code>string</code>                            | <code>""</code>    | Specify the search input value                     |
| results             | No       | <code>let</code> | No       | <code>ReadonlyArray<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<br /> class:bx--header-search-menu-description={true}<br /> &gt;– {result.description}&lt;/span<br /> &gt;{/if}</code> |

### Events

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

## `HeaderUtilities`

### Props

None.

### Slots

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

### Events

None.

## `ImageLoader`

### Props

| Prop name | Required | Kind               | Reactive | Type                                                                                                            | Default value                                                                                                                                                                                                                | Description                                                                                                                 |
| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error     | No       | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` if an error occurs when loading the image                                                                     |
| loaded    | No       | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` when the image is loaded                                                                                      |
| loading   | No       | <code>let</code>   | Yes      | <code>boolean</code>                                                                                            | <code>false</code>                                                                                                                                                                                                           | Set to `true` when `loaded` is `true` and `error` is false                                                                  |
| src       | No       | <code>let</code>   | No       | <code>string</code>                                                                                             | <code>""</code>                                                                                                                                                                                                              | Specify the image source                                                                                                    |
| alt       | No       | <code>let</code>   | No       | <code>string</code>                                                                                             | <code>""</code>                                                                                                                                                                                                              | Specify the image alt text                                                                                                  |
| ratio     | No       | <code>let</code>   | No       | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>undefined</code>                                                                                                                                                                                                       | Specify the aspect ratio for the image wrapper                                                                              |
| fadeIn    | No       | <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 | No       | <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>null</code> |
| error      | dispatched | <code>null</code> |

## `InlineLoading`

### Props

| Prop name       | Required | Kind             | Reactive | Type                                                                     | Default value          | Description                                                                                                          |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- |
| status          | No       | <code>let</code> | No       | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | <code>"active"</code>  | Set the loading status                                                                                               |
| description     | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Set the loading description                                                                                          |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                                      | <code>undefined</code> | Specify a description for the loading icon.<br />Defaults to the `status` prop for the "error" and "finished" states |
| successDelay    | No       | <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 | <code>null</code> |

## `InlineNotification`

### Props

| Prop name              | Required | Kind             | Reactive | Type                                                                                                           | Default value                     | Description                                                             |
| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- |
| kind                   | No       | <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            | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                | Set to `true` to use the low contrast variant                           |
| timeout                | No       | <code>let</code> | No       | <code>number</code>                                                                                            | <code>0</code>                    | Set the timeout duration (ms) to hide the notification after opening it |
| role                   | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"alert"</code>              | Set the `role` attribute                                                |
| title                  | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                   | Specify the title text                                                  |
| subtitle               | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                   | Specify the subtitle text                                               |
| hideCloseButton        | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                | Set to `true` to hide the close button                                  |
| statusIconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>kind + " icon"</code>       | Specify the ARIA label for the status icon                              |
| closeButtonDescription | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Close notification"</code> | Specify the ARIA label for the close button                             |

### Slots

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

### Events

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

## `Link`

### Props

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

### Slots

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

### Events

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

## `ListBox`

### Props

| Prop name   | Required | Kind             | Reactive | Type                                   | Default value          | Description                                |
| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ |
| size        | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>          | <code>undefined</code> | Set the size of the list box               |
| type        | No       | <code>let</code> | No       | <code>"default" &#124; "inline"</code> | <code>"default"</code> | Set the type of the list box               |
| open        | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to open the list box         |
| light       | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to enable the light variant  |
| disabled    | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to disable the list box      |
| invalid     | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to indicate an invalid state |
| invalidText | No       | <code>let</code> | No       | <code>string</code>                    | <code>""</code>        | Specify the invalid state text             |
| warn        | No       | <code>let</code> | No       | <code>boolean</code>                   | <code>false</code>     | Set to `true` to indicate an warning state |
| warnText    | No       | <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       | Required | Kind               | Reactive | Type                                                   | Default value                                    | Description                                      |
| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------ |
| ref             | No       | <code>let</code>   | Yes      | <code>null &#124; HTMLDivElement</code>                | <code>null</code>                                | Obtain a reference to the top-level HTML element |
| disabled        | No       | <code>let</code>   | No       | <code>boolean</code>                                   | <code>false</code>                               | Set to `true` to disable the list box field      |
| role            | No       | <code>let</code>   | No       | <code>string</code>                                    | <code>"combobox"</code>                          | Specify the role attribute                       |
| tabindex        | No       | <code>let</code>   | No       | <code>string</code>                                    | <code>"-1"</code>                                | Specify the tabindex                             |
| translationIds  | No       | <code>const</code> | No       | <code>{ close: "close", open: "open" }</code>          | <code>{ close: "close", open: "open" }</code>    | Default translation ids                          |
| translateWithId | No       | <code>let</code>   | No       | <code>(id: ListBoxFieldTranslationId) => string</code> | <code>(id) => defaultTranslations[id]</code>     | Override the default translation ids             |
| id              | No       | <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 | Required | Kind             | Reactive | Type                                    | Default value                                    | Description                            |
| :-------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the HTML element |
| id        | No       | <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       | Required | Kind               | Reactive | Type                                                      | Default value                                 | Description                                  |
| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- |
| open            | No       | <code>let</code>   | No       | <code>boolean</code>                                      | <code>false</code>                            | Set to `true` to open the list box menu icon |
| translationIds  | No       | <code>const</code> | No       | <code>{ close: "close", open: "open" }</code>             | <code>{ close: "close", open: "open" }</code> | Default translation ids                      |
| translateWithId | No       | <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   | Required | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
| active      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the active state      |
| highlighted | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable the highlighted state |
| disabled    | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to disable the menu item        |

### Slots

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

### Events

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

## `ListBoxSelection`

### Types

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

### Props

| Prop name       | Required | Kind               | Reactive | Type                                                                     | Default value                                                            | Description                                      |
| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ |
| ref             | No       | <code>let</code>   | Yes      | <code>null &#124; HTMLDivElement</code>                                  | <code>null</code>                                                        | Obtain a reference to the top-level HTML element |
| selectionCount  | No       | <code>let</code>   | No       | <code>number</code>                                                      | <code>undefined</code>                                                   | Specify the number of selected items             |
| disabled        | No       | <code>let</code>   | No       | <code>boolean</code>                                                     | <code>false</code>                                                       | Set to `true` to disable the list box selection  |
| translationIds  | No       | <code>const</code> | No       | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | <code>{ clearAll: "clearAll", clearSelection: "clearSelection", }</code> | Default translation ids                          |
| translateWithId | No       | <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 | <code>KeyboardEvent &#124; MouseEvent</code> |

## `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   | Required | Kind             | Reactive | Type                 | Default value          | Description                                           |
| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- |
| small       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the small variant                |
| active      | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>      | Set to `false` to disable the active state            |
| withOverlay | No       | <code>let</code> | No       | <code>boolean</code> | <code>true</code>      | Set to `false` to disable the overlay                 |
| description | No       | <code>let</code> | No       | <code>string</code>  | <code>"loading"</code> | Specify the description to describe the loading state |

### Slots

None.

### Events

None.

## `LocalStorage`

### Props

| Prop name | Required | Kind                  | Reactive | Type                    | Default value                                        | Description                                                     |
| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
| value     | No       | <code>let</code>      | Yes      | <code>any</code>        | <code>""</code>                                      | Provide a value to persist                                      |
| key       | No       | <code>let</code>      | No       | <code>string</code>     | <code>"local-storage-key"</code>                     | Specify the local storage key                                   |
| clearItem | No       | <code>function</code> | No       | <code>() => void</code> | <code>() => { localStorage.removeItem(key); }</code> | Remove the persisted key value from the browser's local storage |
| clearAll  | No       | <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>null</code>                            |
| update     | dispatched | <code>{ prevValue: any; value: any; }</code> |

## `Modal`

### Props

| Prop name                  | Required | Kind             | Reactive | Type                                                | Default value                                    | Description                                                                                                   |
| :------------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref                        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>             | <code>null</code>                                | Obtain a reference to the top-level HTML element                                                              |
| open                       | No       | <code>let</code> | Yes      | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to open the modal                                                                               |
| size                       | No       | <code>let</code> | No       | <code>"xs" &#124; "sm" &#124; "lg"</code>           | <code>undefined</code>                           | Set the size of the modal                                                                                     |
| danger                     | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to use the danger variant                                                                       |
| alert                      | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to enable alert mode                                                                            |
| passiveModal               | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to use the passive variant                                                                      |
| modalHeading               | No       | <code>let</code> | No       | <code>string</code>                                 | <code>undefined</code>                           | Specify the modal heading                                                                                     |
| modalLabel                 | No       | <code>let</code> | No       | <code>string</code>                                 | <code>undefined</code>                           | Specify the modal label                                                                                       |
| modalAriaLabel             | No       | <code>let</code> | No       | <code>string</code>                                 | <code>undefined</code>                           | Specify the ARIA label for the modal                                                                          |
| iconDescription            | No       | <code>let</code> | No       | <code>string</code>                                 | <code>"Close the modal"</code>                   | Specify the ARIA label for the close icon                                                                     |
| hasForm                    | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` if the modal contains form elements                                                             |
| hasScrollingContent        | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` if the modal contains scrolling content                                                         |
| primaryButtonText          | No       | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>                                  | Specify the primary button text                                                                               |
| primaryButtonDisabled      | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to disable the primary button                                                                   |
| primaryButtonIcon          | No       | <code>let</code> | No       | <code>any</code>                                    | <code>undefined</code>                           | Specify the primary button icon                                                                               |
| shouldSubmitOnEnter        | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>true</code>                                | Set to `true` for the "submit" and "click:button--primary" events<br />to be dispatched when pressing "Enter" |
| secondaryButtonText        | No       | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>                                  | Specify the secondary button text                                                                             |
| secondaryButtons           | No       | <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       | No       | <code>let</code> | No       | <code>string</code>                                 | <code>"[data-modal-primary-focus]"</code>        | Specify a selector to be focused when opening the modal                                                       |
| preventCloseOnClickOutside | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>                               | Set to `true` to prevent the modal from closing when clicking outside                                         |
| id                         | No       | <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 | <code>null</code>               |
| click:button--primary   | dispatched | <code>null</code>               |
| close                   | dispatched | <code>null</code>               |
| open                    | dispatched | <code>null</code>               |

## `ModalBody`

### Props

| Prop name           | Required | Kind             | Reactive | Type                 | Default value      | Description                                           |
| :------------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------- |
| hasForm             | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` if the modal contains form elements     |
| hasScrollingContent | No       | <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             | Required | Kind             | Reactive | Type                                                | Default value          | Description                                                                                             |
| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| primaryButtonText     | No       | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>        | Specify the primary button text                                                                         |
| primaryButtonIcon     | No       | <code>let</code> | No       | <code>any</code>                                    | <code>undefined</code> | Specify the primary button icon                                                                         |
| primaryButtonDisabled | No       | <code>let</code> | No       | <code>boolean</code>                                | <code>false</code>     | Set to `true` to disable the primary button                                                             |
| primaryClass          | No       | <code>let</code> | No       | <code>string</code>                                 | <code>undefined</code> | Specify a class for the primary button                                                                  |
| secondaryButtonText   | No       | <code>let</code> | No       | <code>string</code>                                 | <code>""</code>        | Specify the secondary button text                                                                       |
| secondaryButtons      | No       | <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        | No       | <code>let</code> | No       | <code>string</code>                                 | <code>undefined</code> | Specify a class for the secondary button                                                                |
| danger                | No       | <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       | Required | Kind             | Reactive | Type                | Default value        | Description                               |
| :-------------- | :------- | :--------------- | :------- | ------------------- | -------------------- | ----------------------------------------- |
| title           | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the modal title                   |
| label           | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the modal label                   |
| labelClass      | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the label class                   |
| titleClass      | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the title class                   |
| closeClass      | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the close class                   |
| closeIconClass  | No       | <code>let</code> | No       | <code>string</code> | <code>""</code>      | Specify the close icon class              |
| iconDescription | No       | <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 = any;

export type MultiSelectItemText = string;

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

### Props

| Prop name                | Required | Kind             | Reactive | Type                                                                                                       | Default value                                                                              | Description                                                                                                                                                           |
| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| highlightedId            | No       | <code>let</code> | Yes      | <code>null &#124; MultiSelectItemId</code>                                                                 | <code>null</code>                                                                          | Id of the highlighted ListBoxMenuItem                                                                                                                                 |
| selectionRef             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                                    | <code>null</code>                                                                          | Obtain a reference to the selection element                                                                                                                           |
| fieldRef                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                                    | <code>null</code>                                                                          | Obtain a reference to the field box element                                                                                                                           |
| multiSelectRef           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                                                                    | <code>null</code>                                                                          | Obtain a reference to the outer div element                                                                                                                           |
| inputRef                 | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                                  | <code>null</code>                                                                          | Obtain a reference to the input HTML element                                                                                                                          |
| open                     | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to open the dropdown                                                                                                                                    |
| value                    | No       | <code>let</code> | Yes      | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the multiselect value                                                                                                                                         |
| selectedIds              | No       | <code>let</code> | Yes      | <code>ReadonlyArray<MultiSelectItemId></code>                                                              | <code>[]</code>                                                                            | Set the selected ids                                                                                                                                                  |
| items                    | No       | <code>let</code> | No       | <code>ReadonlyArray<MultiSelectItem></code>                                                                | <code>[]</code>                                                                            | Set the multiselect items                                                                                                                                             |
| itemToString             | No       | <code>let</code> | No       | <code>(item: MultiSelectItem) => any</code>                                                                | <code>(item) => item.text &#124;&#124; item.id</code>                                      | Override the display of a multiselect item                                                                                                                            |
| itemToInput              | No       | <code>let</code> | No       | <code>(item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string }</code> | <code>(item) => {}</code>                                                                  | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs.                                         |
| size                     | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code>                                                                  | <code>undefined</code>                                                                     | Set the size of the combobox                                                                                                                                          |
| type                     | No       | <code>let</code> | No       | <code>"default" &#124; "inline"</code>                                                                     | <code>"default"</code>                                                                     | Specify the type of multiselect                                                                                                                                       |
| direction                | No       | <code>let</code> | No       | <code>"bottom" &#124; "top"</code>                                                                         | <code>"bottom"</code>                                                                      | Specify the direction of the multiselect dropdown menu                                                                                                                |
| selectionFeedback        | No       | <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                 | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to disable the dropdown                                                                                                                                 |
| filterable               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to filter items                                                                                                                                         |
| filterItem               | No       | <code>let</code> | No       | <code>(item: MultiSelectItem, value: string) => boolean</code>                                             | <code>(item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase())</code> | Override the filtering logic<br />The default filtering is an exact string comparison                                                                                 |
| light                    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to enable the light variant                                                                                                                             |
| locale                   | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>"en"</code>                                                                          | Specify the locale                                                                                                                                                    |
| placeholder              | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the placeholder text                                                                                                                                          |
| sortItem                 | No       | <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          | No       | <code>let</code> | No       | <code>(id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string</code>      | <code>undefined</code>                                                                     | Override the chevron icon label based on the open state.<br />Defaults to "Open menu" when closed and "Close menu" when open                                          |
| translateWithIdSelection | No       | <code>let</code> | No       | <code>(id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string</code>    | <code>undefined</code>                                                                     | Override the label of the clear button when the input has a selection.<br />Defaults to "Clear selected item" and "Clear all items" if more than one item is selected |
| titleText                | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the title text                                                                                                                                                |
| useTitleInItem           | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to pass the item to `itemToString` in the checkbox                                                                                                      |
| invalid                  | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to indicate an invalid state                                                                                                                            |
| invalidText              | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the invalid state text                                                                                                                                        |
| warn                     | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to indicate an warning state                                                                                                                            |
| warnText                 | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the warning state text                                                                                                                                        |
| helperText               | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the helper text                                                                                                                                               |
| label                    | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>""</code>                                                                            | Specify the list box label                                                                                                                                            |
| hideLabel                | No       | <code>let</code> | No       | <code>boolean</code>                                                                                       | <code>false</code>                                                                         | Set to `true` to visually hide the label text                                                                                                                         |
| id                       | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>"ccs-" + Math.random().toString(36)</code>                                           | Set an id for the list box component                                                                                                                                  |
| name                     | No       | <code>let</code> | No       | <code>string</code>                                                                                        | <code>undefined</code>                                                                     | Specify a name attribute for the select                                                                                                                               |

### Slots

| Slot name | Default | Props                                                  | Fallback                          |
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
| --        | Yes     | <code>{ item: MultiSelectItem; index: number } </code> | <code>{itemToString(item)}</code> |
| titleText | No      | --                                                     | <code>{titleText}</code>          |

### Events

| Event name | Type       | Detail                                                                                                         |
| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
| select     | dispatched | <code>{ selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; }</code> |
| clear      | dispatched | <code>null</code>                                                                                              |
| blur       | dispatched | <code>FocusEvent &#124; CustomEvent<FocusEvent></code>                                                         |
| keydown    | forwarded  | --                                                                                                             |
| input      | forwarded  | --                                                                                                             |
| keyup      | forwarded  | --                                                                                                             |
| focus      | forwarded  | --                                                                                                             |
| paste      | 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        | Required | Kind             | Reactive | Type                                 | Default value             | Description                         |
| :--------------- | :------- | :--------------- | :------- | ------------------------------------ | ------------------------- | ----------------------------------- |
| notificationType | No       | <code>let</code> | No       | <code>"toast" &#124; "inline"</code> | <code>"toast"</code>      | Set the type of notification        |
| icon             | No       | <code>let</code> | No       | <code>any</code>                     | <code>undefined</code>    | Specify the icon to render          |
| title            | No       | <code>let</code> | No       | <code>string</code>                  | <code>undefined</code>    | Specify the title of the icon       |
| iconDescription  | No       | <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        | Required | Kind             | Reactive | Type                                                                                                           | Default value          | Description                           |
| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- |
| kind             | No       | <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 | No       | <code>let</code> | No       | <code>"toast" &#124; "inline"</code>                                                                           | <code>"toast"</code>   | Set the type of notification          |
| iconDescription  | Yes      | <code>let</code> | No       | --                                                                                                             | <code>undefined</code> | Specify the ARIA label for the icon   |

### Slots

None.

### Events

None.

## `NumberInput`

### Types

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

### Props

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

## `NumberInputSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
| hideLabel | No       | <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  | Required | Kind             | Reactive | Type                 | Default value      | Description                                          |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
| nested     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
| native     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use native list styles              |
| expressive | No       | <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        | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                   |
| :--------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------- |
| menuRef          | No       | <code>let</code> | Yes      | <code>null &#124; HTMLUListElement</code>  | <code>null</code>                                | Obtain a reference to the overflow menu element                               |
| buttonRef        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the trigger button element                              |
| icon             | No       | <code>let</code> | Yes      | <code>any</code>                           | <code>undefined</code>                           | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` |
| open             | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to open the menu                                                |
| size             | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>              | <code>undefined</code>                           | Specify the size of the overflow menu                                         |
| direction        | No       | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>         | <code>"bottom"</code>                            | Specify the direction of the overflow menu relative to the button             |
| light            | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to enable the light variant                                     |
| flipped          | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to flip the menu relative to the button                         |
| menuOptionsClass | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code>                           | Specify the menu options class                                                |
| iconClass        | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code>                           | Specify the icon class                                                        |
| iconDescription  | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Open and close list of options"</code>    | Specify the ARIA label for the icon                                           |
| id               | No       | <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>null &#124; { index: number; text: string; }</code> |
| click      | forwarded  | --                                                        |
| mouseover  | forwarded  | --                                                        |
| mouseenter | forwarded  | --                                                        |
| mouseleave | forwarded  | --                                                        |
| keydown    | forwarded  | --                                                        |

## `OverflowMenuItem`

### Props

| Prop name    | Required | Kind             | Reactive | Type                                                                | Default value                                    | Description                                                       |
| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| ref          | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the HTML element                            |
| primaryFocus | No       | <code>let</code> | Yes      | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` if the item should be focused when opening the menu |
| text         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>"Provide text"</code>                      | Specify the item text.<br />Alternatively, use the default slot   |
| href         | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>""</code>                                  | Specify the `href` attribute if the item is a link                |
| disabled     | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to disable the item                                 |
| hasDivider   | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to include a divider                                |
| danger       | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>                               | Set to `true` to use the danger variant                           |
| requireTitle | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>true</code>                                | Set to `false` to omit the button `title` attribute               |
| id           | No       | <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             | Required | Kind             | Reactive | Type                                                             | Default value                                                                                                                                  | Description                                                                                                                                                                                                                                                                                                                                         |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| pageSize              | No       | <code>let</code> | Yes      | <code>number</code>                                              | <code>10</code>                                                                                                                                | Specify the number of items to display in a page                                                                                                                                                                                                                                                                                                    |
| page                  | No       | <code>let</code> | Yes      | <code>number</code>                                              | <code>1</code>                                                                                                                                 | Specify the current page index                                                                                                                                                                                                                                                                                                                      |
| totalItems            | No       | <code>let</code> | No       | <code>number</code>                                              | <code>0</code>                                                                                                                                 | Specify the total number of items                                                                                                                                                                                                                                                                                                                   |
| pageWindow            | No       | <code>let</code> | No       | <code>number</code>                                              | <code>1000</code>                                                                                                                              | If `totalItems` is a large number, it can affect the<br />rendering performance of this component since its value<br />is used to calculate the number of pages in the native<br />select dropdown. This value creates a small window of<br />pages rendered around the current page. By default,<br />a maximum of 1000 select items are rendered. |
| disabled              | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                                                                                             | Set to `true` to disable the pagination                                                                                                                                                                                                                                                                                                             |
| forwardText           | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"Next page"</code>                                                                                                                       | Specify the forward button text                                                                                                                                                                                                                                                                                                                     |
| backwardText          | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"Previous page"</code>                                                                                                                   | Specify the backward button text                                                                                                                                                                                                                                                                                                                    |
| itemsPerPageText      | No       | <code>let</code> | No       | <code>string</code>                                              | <code>"Items per page:"</code>                                                                                                                 | Specify the items per page text                                                                                                                                                                                                                                                                                                                     |
| itemText              | No       | <code>let</code> | No       | <code>(min: number, max: number) => string</code>                | <code>(min, max) => \`${min.toLocaleString()}–${max.toLocaleString()} item${max === 1 ? "" : "s"}\`</code>                                     | Override the item text                                                                                                                                                                                                                                                                                                                              |
| itemRangeText         | No       | <code>let</code> | No       | <code>(min: number, max: number, total: number) => string</code> | <code>(min, max, total) => \`${min.toLocaleString()}–${max.toLocaleString()} of ${total.toLocaleString()} item${max === 1 ? "" : "s"}\`</code> | Override the item range text                                                                                                                                                                                                                                                                                                                        |
| pageInputDisabled     | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                                                                                             | Set to `true` to disable the page input                                                                                                                                                                                                                                                                                                             |
| pageSizeInputDisabled | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                                                                                             | Set to `true` to disable the page size input                                                                                                                                                                                                                                                                                                        |
| pageSizes             | No       | <code>let</code> | No       | <code>ReadonlyArray<number></code>                               | <code>[10]</code>                                                                                                                              | Specify the available page sizes                                                                                                                                                                                                                                                                                                                    |
| pagesUnknown          | No       | <code>let</code> | No       | <code>boolean</code>                                             | <code>false</code>                                                                                                                             | Set to `true` if the number of pages is unknown                                                                                                                                                                                                                                                                                                     |
| pageText              | No       | <code>let</code> | No       | <code>(page: number) => string</code>                            | <code>(page) => \`page ${page.toLocaleString()}\`</code>                                                                                       | Override the page text                                                                                                                                                                                                                                                                                                                              |
| pageRangeText         | No       | <code>let</code> | No       | <code>(current: number, total: number) => string</code>          | <code>(current, total) => \`of ${total.toLocaleString()} page${total === 1 ? "" : "s"}\`</code>                                                | Override the page range text                                                                                                                                                                                                                                                                                                                        |
| id                    | No       | <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                                            |
| :--------------------- | :--------- | :------------------------------------------------ |
| change                 | dispatched | <code>{ page?: number; pageSize?: number }</code> |
| click:button--previous | dispatched | <code>{ page: number; }</code>                    |
| click:button--next     | dispatched | <code>{ page: number; }</code>                    |
| update                 | dispatched | <code>{ pageSize: number; page: number; }</code>  |

## `PaginationNav`

### Props

| Prop name       | Required | Kind             | Reactive | Type                                                                                             | Default value                | Description                                                         |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- |
| page            | No       | <code>let</code> | Yes      | <code>number</code>                                                                              | <code>1</code>               | Specify the current page index                                      |
| total           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages                                   |
| shown           | No       | <code>let</code> | No       | <code>number</code>                                                                              | <code>10</code>              | Specify the total number of pages to show                           |
| loop            | No       | <code>let</code> | No       | <code>boolean</code>                                                                             | <code>false</code>           | Set to `true` to loop the navigation                                |
| forwardText     | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Next page"</code>     | Specify the forward button text                                     |
| backwardText    | No       | <code>let</code> | No       | <code>string</code>                                                                              | <code>"Previous page"</code> | Specify the backward button text                                    |
| tooltipPosition | No       | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left" &#124; "outside" &#124; "inside"</code> | <code>"bottom"</code>        | Set the position of the tooltip relative to the pagination buttons. |

### 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         | Required | Kind             | Reactive | Type                                                            | Default value                                    | Description                                           |
| :---------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref               | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                | Obtain a reference to the input HTML element          |
| type              | No       | <code>let</code> | Yes      | <code>"text" &#124; "password"</code>                           | <code>"password"</code>                          | Set to `"text"` to toggle the password visibility     |
| value             | No       | <code>let</code> | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                  | Specify the input value                               |
| size              | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                                   | <code>undefined</code>                           | Set the size of the input                             |
| placeholder       | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the placeholder text                          |
| hidePasswordLabel | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"Hide password"</code>                     | Specify the hide password label text                  |
| showPasswordLabel | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"Show password"</code>                     | Specify the show password label text                  |
| tooltipAlignment  | No       | <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   | No       | <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             | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to enable the light variant             |
| disabled          | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the input                    |
| helperText        | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the helper text                               |
| labelText         | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the label text                                |
| hideLabel         | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to visually hide the label text         |
| invalid           | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to indicate an invalid state            |
| invalidText       | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the text for the invalid state                |
| warn              | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to indicate an warning state            |
| warnText          | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the warning state text                        |
| inline            | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to use inline version                   |
| id                | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                       |
| name              | No       | <code>let</code> | No       | <code>string</code>                                             | <code>undefined</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 | --     |
| paste      | forwarded | --     |

## `Popover`

### Props

| Prop name           | Required | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value      | Description                                            |
| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ |
| open                | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to display the popover                   |
| closeOnOutsideClick | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to close the popover on an outside click |
| caret               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` render a caret                           |
| align               | No       | <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               | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the light variant              |
| highContrast        | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code> | Set to `true` to enable the high contrast variant      |
| relative            | No       | <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 | <code>{ target: HTMLElement; }</code> |

## `ProgressBar`

### Props

| Prop name  | Required | Kind             | Reactive | Type                                                     | Default value                                    | Description                                   |
| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| value      | No       | <code>let</code> | No       | <code>number</code>                                      | <code>undefined</code>                           | Specify the current value                     |
| max        | No       | <code>let</code> | No       | <code>number</code>                                      | <code>100</code>                                 | Specify the maximum value                     |
| kind       | No       | <code>let</code> | No       | <code>"default" &#124; "inline" &#124; "indented"</code> | <code>"default"</code>                           | Specify the kind of progress bar              |
| status     | No       | <code>let</code> | No       | <code>"active" &#124; "finished" &#124; "error"</code>   | <code>"active"</code>                            | Specify the status                            |
| size       | No       | <code>let</code> | No       | <code>"sm" &#124; "md"</code>                            | <code>"md"</code>                                | Specify the size                              |
| labelText  | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the label text                        |
| hideLabel  | No       | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to visually hide the label text |
| helperText | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the helper text                       |
| id         | No       | <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            | Required | Kind             | Reactive | Type                 | Default value      | Description                                                                                    |
| :------------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------------------------------------------- |
| currentIndex         | No       | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>     | Specify the current step index                                                                 |
| vertical             | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the vertical variant                                                      |
| spaceEqually         | No       | <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 | No       | <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 | Required | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
| vertical  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the vertical variant |
| count     | No       | <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      | Required | Kind             | Reactive | Type                 | Default value                                    | Description                                |
| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ |
| current        | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to use the current variant   |
| complete       | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` for the complete variant     |
| disabled       | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the progress step |
| invalid        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to indicate an invalid state |
| description    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step description               |
| label          | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step label                     |
| secondaryLabel | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the step secondary label           |
| id             | No       | <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     | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                         |
| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
| ref           | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element        |
| checked       | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to check the radio button             |
| value         | No       | <code>let</code> | No       | <code>string &#124; number</code>         | <code>""</code>                                  | Specify the value of the radio button               |
| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the radio button           |
| required      | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required         |
| labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>        | <code>"right"</code>                             | Specify the label position                          |
| labelText     | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                              |
| hideLabel     | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to visually hide the label text       |
| id            | No       | <code>let</code> | No       | <code>string</code>                       | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                     |
| name          | No       | <code>let</code> | No       | <code>string</code>                       | <code>undefined</code>                           | Specify a name attribute for the radio button input |

### Slots

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

### Events

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

## `RadioButtonGroup`

### Props

| Prop name     | Required | Kind             | Reactive | Type                                        | Default value             | Description                                              |
| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- |
| selected      | No       | <code>let</code> | Yes      | <code>string &#124; number</code>           | <code>undefined</code>    | Set the selected radio button value                      |
| disabled      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to disable the radio buttons               |
| required      | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>undefined</code>    | Set to `true` to require the selection of a radio button |
| name          | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</code>    | Specify a name attribute for the radio button inputs     |
| legendText    | No       | <code>let</code> | No       | <code>string</code>                         | <code>""</code>           | Specify the legend text                                  |
| hideLegend    | No       | <code>let</code> | No       | <code>boolean</code>                        | <code>false</code>        | Set to `true` to visually hide the legend                |
| labelPosition | No       | <code>let</code> | No       | <code>"right" &#124; "left"</code>          | <code>"right"</code>      | Specify the label position                               |
| orientation   | No       | <code>let</code> | No       | <code>"horizontal" &#124; "vertical"</code> | <code>"horizontal"</code> | Specify the orientation of the radio buttons             |
| id            | No       | <code>let</code> | No       | <code>string</code>                         | <code>undefined</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                            |
| :--------- | :--------- | :-------------------------------- |
| change     | dispatched | <code>string &#124; number</code> |
| click      | forwarded  | --                                |
| mouseover  | forwarded  | --                                |
| mouseenter | forwarded  | --                                |
| mouseleave | forwarded  | --                                |

## `RadioButtonSkeleton`

### Props

None.

### Slots

None.

### Events

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

## `RadioTile`

### Props

| Prop name       | Required | Kind             | Reactive | Type                 | Default value                                    | Description                                              |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | -------------------------------------------------------- |
| checked         | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>                               | Set to `true` to check the tile                          |
| light           | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to enable the light variant                |
| disabled        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to disable the tile                        |
| required        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>                               | Set to `true` to mark the field as required              |
| value           | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>                                  | Specify the value of the radio input                     |
| tabindex        | No       | <code>let</code> | No       | <code>string</code>  | <code>"0"</code>                                 | Specify the tabindex                                     |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>  | <code>"Tile checkmark"</code>                    | Specify the ARIA label for the radio tile checkmark icon |
| id              | No       | <code>let</code> | No       | <code>string</code>  | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                          |
| name            | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code>                           | Specify a name attribute for the radio tile 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 | Required | Kind             | Reactive | Type                                                                     | Default value            | Description                        |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ------------------------ | ---------------------------------- |
| nodes     | No       | <code>let</code> | No       | <code>Array<RecursiveListNode & { nodes?: RecursiveListNode[]; }></code> | <code>[]</code>          | Specify the nodes to render        |
| type      | No       | <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     | Required | Kind             | Reactive | Type                 | Default value      | Description                                                                                                                                                                                     |
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as            | No       | <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     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant                                                                                                                                                      |
| narrow        | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant                                                                                                                                                         |
| noGutter      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter                                                                                                                                                              |
| noGutterLeft  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter                                                                                                                                                         |
| noGutterRight | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter                                                                                                                                                        |
| padding       | No       | <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            | Required | Kind             | Reactive | Type                                      | Default value                                    | Description                                                     |
| :------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- |
| ref                  | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code> | <code>null</code>                                | Obtain a reference to the input HTML element                    |
| expanded             | No       | <code>let</code> | Yes      | <code>boolean</code>                      | <code>false</code>                               | Set to `true to expand the search input                         |
| value                | No       | <code>let</code> | Yes      | <code>any</code>                          | <code>""</code>                                  | Specify the value of the search input                           |
| size                 | No       | <code>let</code> | No       | <code>"sm" &#124; "lg" &#124; "xl"</code> | <code>"xl"</code>                                | Specify the size of the search input                            |
| searchClass          | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the class name passed to the outer div element          |
| skeleton             | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to display the skeleton state                     |
| light                | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant                       |
| disabled             | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the search input                       |
| expandable           | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the expandable variant                  |
| placeholder          | No       | <code>let</code> | No       | <code>string</code>                       | <code>"Search..."</code>                         | Specify the `placeholder` attribute of the search input         |
| autocomplete         | No       | <code>let</code> | No       | <code>"on" &#124; "off"</code>            | <code>"off"</code>                               | Specify the `autocomplete` attribute                            |
| autofocus            | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to auto focus the search element                  |
| closeButtonLabelText | No       | <code>let</code> | No       | <code>string</code>                       | <code>"Clear search input"</code>                | Specify the close button label text                             |
| labelText            | No       | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the label text                                          |
| icon                 | No       | <code>let</code> | No       | <code>any</code>                          | <code>undefined</code>                           | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` |
| id                   | No       | <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>null</code> |
| collapse   | dispatched | <code>null</code> |
| click      | forwarded  | --                |
| mouseover  | forwarded  | --                |
| mouseenter | forwarded  | --                |
| mouseleave | forwarded  | --                |
| change     | forwarded  | --                |
| input      | forwarded  | --                |
| focus      | forwarded  | --                |
| blur       | forwarded  | --                |
| keydown    | forwarded  | --                |
| keyup      | forwarded  | --                |
| paste      | forwarded  | --                |
| clear      | dispatched | <code>null</code> |

## `SearchSkeleton`

### Props

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

### Slots

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

### Events

| Event name | Type       | Detail                            |
| :--------- | :--------- | :-------------------------------- |
| update     | dispatched | <code>string &#124; number</code> |
| change     | forwarded  | --                                |
| input      | forwarded  | --                                |
| focus      | forwarded  | --                                |
| blur       | forwarded  | --                                |

## `SelectItem`

### Props

| Prop name | Required | Kind             | Reactive | Type                              | Default value          | Description                                                                        |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |
| value     | No       | <code>let</code> | No       | <code>string &#124; number</code> | <code>""</code>        | Specify the option value                                                           |
| text      | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the option text<br />If not specified, the value will be used as the text. |
| hidden    | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to hide the option                                                   |
| disabled  | No       | <code>let</code> | No       | <code>boolean</code>              | <code>false</code>     | Set to `true` to disable the option                                                |
| class     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the class of the `option` element                                          |
| style     | No       | <code>let</code> | No       | <code>string</code>               | <code>undefined</code> | Specify the style of the `option` element                                          |

### Slots

None.

### Events

None.

## `SelectItemGroup`

### Props

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

## `SideNav`

### Props

| Prop name           | Required | Kind             | Reactive | Type                 | Default value          | Description                                                                                                                                                                                                                                                                 |
| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isOpen              | No       | <code>let</code> | Yes      | <code>boolean</code> | <code>false</code>     | Set to `true` to toggle the expanded state                                                                                                                                                                                                                                  |
| fixed               | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the fixed variant                                                                                                                                                                                                                                      |
| rail                | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the rail variant                                                                                                                                                                                                                                       |
| ariaLabel           | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Specify the ARIA label for the nav                                                                                                                                                                                                                                          |
| expansionBreakpoint | No       | <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>null</code> |
| close         | dispatched | <code>null</code> |
| click:overlay | dispatched | <code>null</code> |

## `SideNavDivider`

### Props

None.

### Slots

None.

### Events

None.

## `SideNavItems`

### Props

None.

### Slots

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

### Events

None.

## `SideNavLink`

### Props

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

### Slots

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

### Events

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

## `SideNavMenu`

### Props

| Prop name | Required | Kind             | Reactive | Type                                       | Default value          | Description                                   |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>      | Obtain a reference to the HTML button element |
| expanded  | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>     | Set to `true` to toggle the expanded state    |
| text      | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the text                              |
| icon      | No       | <code>let</code> | No       | <code>any</code>                           | <code>undefined</code> | Specify the icon to render                    |

### Slots

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

### Events

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

## `SideNavMenuItem`

### Props

| Prop name  | Required | Kind             | Reactive | Type                                       | Default value          | Description                                   |
| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
| ref        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>      | Obtain a reference to the HTML anchor element |
| isSelected | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>     | Set to `true` to select the item              |
| href       | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</code> | Specify the `href` attribute                  |
| text       | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</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 | Required | Kind             | Reactive | Type                 | Default value       | Description                                     |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------- | ----------------------------------------------- |
| lines     | No       | <code>let</code> | No       | <code>number</code>  | <code>3</code>      | Specify the number of lines to render           |
| heading   | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>  | Set to `true` to use the heading size variant   |
| paragraph | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>  | Set to `true` to use the paragraph size variant |
| width     | No       | <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 | Required | Kind             | Reactive | Type                | Default value                | Description                  |
| :-------- | :------- | :--------------- | :------- | ------------------- | ---------------------------- | ---------------------------- |
| href      | No       | <code>let</code> | No       | <code>string</code> | <code>"#main-content"</code> | Specify the `href` attribute |
| tabindex  | No       | <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      | Required | Kind             | Reactive | Type                                    | Default value                                    | Description                                                                                                                  |
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| ref            | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code> | <code>null</code>                                | Obtain a reference to the HTML element                                                                                       |
| value          | No       | <code>let</code> | Yes      | <code>number</code>                     | <code>0</code>                                   | Specify the value of the slider                                                                                              |
| max            | No       | <code>let</code> | No       | <code>number</code>                     | <code>100</code>                                 | Set the maximum slider value                                                                                                 |
| maxLabel       | No       | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label for the max value                                                                                          |
| min            | No       | <code>let</code> | No       | <code>number</code>                     | <code>0</code>                                   | Set the minimum slider value                                                                                                 |
| minLabel       | No       | <code>let</code> | No       | <code>string</code>                     | <code>""</code>                                  | Specify the label for the min value                                                                                          |
| step           | No       | <code>let</code> | No       | <code>number</code>                     | <code>1</code>                                   | Set the step value                                                                                                           |
| stepMultiplier | No       | <code>let</code> | No       | <code>number</code>                     | <code>4</code>                                   | Set the step multiplier value                                                                                                |
| required       | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to require a value                                                                                             |
| inputType      | No       | <code>let</code> | No       | <code>string</code>                     | <code>"number"</code>                            | Specify the input type                                                                                                       |
| disabled       | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to disable the slider                                                                                          |
| light          | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to enable the light variant                                                                                    |
| hideTextInput  | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to hide the text input                                                                                         |
| fullWidth      | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` for the slider to span<br />the full width of its containing element.                                          |
| id             | No       | <code>let</code> | No       | <code>string</code>                     | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element                                                                                         |
| invalid        | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to indicate an invalid state                                                                                   |
| labelText      | No       | <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;`) |
| hideLabel      | No       | <code>let</code> | No       | <code>boolean</code>                    | <code>false</code>                               | Set to `true` to visually hide the label text                                                                                |
| name           | No       | <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              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>number</code> |
| input      | dispatched | <code>number</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |

## `SliderSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
| hideLabel | No       | <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 | Required | Kind             | Reactive | Type                 | Default value          | Description                                    |
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------- |
| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected structured list row value |
| condensed | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to use the condensed variant     |
| flush     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to flush the list                |
| selection | No       | <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              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>string</code> |
| click      | forwarded  | --                  |
| mouseover  | forwarded  | --                  |
| mouseenter | forwarded  | --                  |
| mouseleave | forwarded  | --                  |

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

### Slots

None.

### Events

None.

## `StructuredListRow`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
| head      | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use as a header     |
| label     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to render a label slot |
| tabindex  | No       | <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 | Required | Kind             | Reactive | Type                | Default value  | Description                |
| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
| rows      | No       | <code>let</code> | No       | <code>number</code> | <code>5</code> | Specify the number of rows |

### Slots

None.

### Events

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

## `Switch`

### Props

| Prop name | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                         |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code> | <code>null</code>                                | Obtain a reference to the button HTML element                                                                       |
| selected  | No       | <code>let</code> | Yes      | <code>boolean</code>                       | <code>false</code>                               | Set to `true` for the switch to be selected                                                                         |
| text      | No       | <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  | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the switch                                                                                 |
| id        | No       | <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 | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                                                                                                     |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
| ref       | No       | <code>let</code> | Yes      | <code>null &#124; HTMLAnchorElement</code> | <code>null</code>                                | Obtain a reference to the anchor HTML element                                                                                   |
| label     | No       | <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      | No       | <code>let</code> | No       | <code>string</code>                        | <code>"#"</code>                                 | Specify the href attribute                                                                                                      |
| disabled  | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the tab                                                                                                |
| tabindex  | No       | <code>let</code> | No       | <code>string</code>                        | <code>"0"</code>                                 | Specify the tabindex                                                                                                            |
| id        | No       | <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 | Required | Kind             | Reactive | Type                | Default value                                    | Description                         |
| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------- |
| id        | No       | <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      | Required | Kind             | Reactive | Type                                                                | Default value          | Description                                    |
| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- |
| size           | No       | <code>let</code> | No       | <code>"compact" &#124; "short" &#124; "medium" &#124; "tall"</code> | <code>undefined</code> | Set the size of the table                      |
| zebra          | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to use zebra styles              |
| useStaticWidth | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to use static width              |
| sortable       | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` for the sortable variant         |
| stickyHeader   | No       | <code>let</code> | No       | <code>boolean</code>                                                | <code>false</code>     | Set to `true` to enable a sticky header        |
| tableStyle     | No       | <code>let</code> | No       | <code>string</code>                                                 | <code>undefined</code> | Set the style attribute on the `table` element |

### 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      | Required | Kind             | Reactive | Type                 | Default value      | Description                               |
| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
| title          | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the title of the data table       |
| description    | No       | <code>let</code> | No       | <code>string</code>  | <code>""</code>    | Specify the description of the data table |
| stickyHeader   | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to enable a sticky header   |
| useStaticWidth | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use static width         |

### 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       | Required | Kind             | Reactive | Type                                                       | Default value                                    | Description                            |
| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- |
| sortable        | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` for the sortable variant |
| sortDirection   | No       | <code>let</code> | No       | <code>"none" &#124; "ascending" &#124; "descending"</code> | <code>"none"</code>                              | Specify the sort direction             |
| active          | No       | <code>let</code> | No       | <code>boolean</code>                                       | <code>false</code>                               | Set to `true` if the column sorting    |
| scope           | No       | <code>let</code> | No       | <code>string</code>                                        | <code>"col"</code>                               | Specify the `scope` attribute          |
| translateWithId | No       | <code>let</code> | No       | <code>() => string</code>                                  | <code>() => ""</code>                            | Override the default id translations   |
| id              | No       | <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       | Required | Kind             | Reactive | Type                                      | Default value                    | Description                                  |
| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- |
| selected        | No       | <code>let</code> | Yes      | <code>number</code>                       | <code>0</code>                   | Specify the selected tab index               |
| type            | No       | <code>let</code> | No       | <code>"default" &#124; "container"</code> | <code>"default"</code>           | Specify the type of tabs                     |
| autoWidth       | No       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>               | Set to `true` for tabs to have an auto-width |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                       | <code>"Show menu options"</code> | Specify the ARIA label for the chevron icon  |
| triggerHref     | No       | <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              |
| :--------- | :--------- | :------------------ |
| change     | dispatched | <code>number</code> |
| keypress   | forwarded  | --                  |
| click      | forwarded  | --                  |

## `TabsSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                                      | Default value          | Description                          |
| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ---------------------- | ------------------------------------ |
| count     | No       | <code>let</code> | No       | <code>number</code>                       | <code>4</code>         | Specify the number of tabs to render |
| type      | No       | <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   | Required | Kind             | Reactive | Type                                                                                                                                                                                                     | Default value                                    | Description                                                   |
| :---------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
| type        | No       | <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" &#124; "outline"</code> | <code>undefined</code>                           | Specify the type of tag                                       |
| size        | No       | <code>let</code> | No       | <code>"sm" &#124; "default"</code>                                                                                                                                                                       | <code>"default"</code>                           | --                                                            |
| filter      | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to use filterable variant                       |
| disabled    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to disable a filterable tag                     |
| interactive | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to render a `button` element instead of a `div` |
| skeleton    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                                                                                                     | <code>false</code>                               | Set to `true` to display the skeleton state                   |
| title       | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                      | <code>"Clear filter"</code>                      | Set the title for the close button in a filterable tag        |
| icon        | No       | <code>let</code> | No       | <code>any</code>                                                                                                                                                                                         | <code>undefined</code>                           | Specify the icon to render                                    |
| id          | No       | <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> | --                                                  |
| icon      | No      | --                                                     | <code>&lt;svelte:component this={icon} /&gt;</code> |

### Events

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

## `TagSkeleton`

### Props

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

## `TextAreaSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                                   |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
| hideLabel | No       | <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   | Required | Kind             | Reactive | Type                                          | Default value                                    | Description                                                                                                     |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>     | <code>null</code>                                | Obtain a reference to the input HTML element                                                                    |
| value       | No       | <code>let</code> | Yes      | <code>null &#124; number &#124; string</code> | <code>""</code>                                  | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. |
| size        | No       | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                 | <code>undefined</code>                           | Set the size of the input                                                                                       |
| placeholder | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the placeholder text                                                                                    |
| light       | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to enable the light variant                                                                       |
| disabled    | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to disable the input                                                                              |
| helperText  | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the helper text                                                                                         |
| id          | No       | <code>let</code> | No       | <code>string</code>                           | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element                                                                                 |
| name        | No       | <code>let</code> | No       | <code>string</code>                           | <code>undefined</code>                           | Specify a name attribute for the input                                                                          |
| labelText   | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the label text                                                                                          |
| hideLabel   | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to visually hide the label text                                                                   |
| invalid     | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to indicate an invalid state                                                                      |
| invalidText | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the invalid state text                                                                                  |
| warn        | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to indicate an warning state                                                                      |
| warnText    | No       | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the warning state text                                                                                  |
| required    | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to mark the field as required                                                                     |
| inline      | No       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to use the inline variant                                                                         |
| readonly    | No       | <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                                        |
| :--------- | :--------- | :-------------------------------------------- |
| change     | dispatched | <code>null &#124; number &#124; string</code> |
| input      | dispatched | <code>null &#124; number &#124; string</code> |
| click      | forwarded  | --                                            |
| mouseover  | forwarded  | --                                            |
| mouseenter | forwarded  | --                                            |
| mouseleave | forwarded  | --                                            |
| keydown    | forwarded  | --                                            |
| keyup      | forwarded  | --                                            |
| focus      | forwarded  | --                                            |
| blur       | forwarded  | --                                            |
| paste      | forwarded  | --                                            |

## `TextInputSkeleton`

### Props

| Prop name | Required | Kind             | Reactive | Type                 | Default value      | Description                          |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
| hideLabel | No       | <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  | Required | Kind             | Reactive | Type                                                                                                                  | Default value                                                                                                 | Description                                                                                                                    |
| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| theme      | No       | <code>let</code> | Yes      | <code>CarbonTheme</code>                                                                                              | <code>"white"</code>                                                                                          | Set the current Carbon theme                                                                                                   |
| tokens     | No       | <code>let</code> | No       | <code>{ [token: string]: any; }</code>                                                                                | <code>{}</code>                                                                                               | Customize a theme with your own tokens<br />@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist    | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                  | <code>false</code>                                                                                            | Set to `true` to persist the theme using window.localStorage                                                                   |
| persistKey | No       | <code>let</code> | No       | <code>string</code>                                                                                                   | <code>"theme"</code>                                                                                          | Specify the local storage key                                                                                                  |
| render     | No       | <code>let</code> | No       | <code>"toggle" &#124; "select"</code>                                                                                 | <code>undefined</code>                                                                                        | Render a toggle or select dropdown to control the theme                                                                        |
| toggle     | No       | <code>let</code> | No       | <code>import("../Toggle/Toggle.svelte").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     | No       | <code>let</code> | No       | <code>import("../Select/Select.svelte").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 | Required | Kind             | Reactive | Type                 | Default value      | Description                               |
| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
| light     | No       | <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 | Required | Kind             | Reactive | Type                 | Default value          | Description                                              |
| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | -------------------------------------------------------- |
| selected  | No       | <code>let</code> | Yes      | <code>string</code>  | <code>undefined</code> | Specify the selected tile value                          |
| disabled  | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code>     | Set to `true` to disable the tile group                  |
| required  | No       | <code>let</code> | No       | <code>boolean</code> | <code>undefined</code> | Set to `true` to require the selection of a radio button |
| name      | No       | <code>let</code> | No       | <code>string</code>  | <code>undefined</code> | Specify a name attribute for the radio button inputs     |
| legend    | No       | <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 | <code>string</code> |

## `TimePicker`

### Props

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

## `TimePickerSelect`

### Props

| Prop name       | Required | Kind             | Reactive | Type                                       | Default value                                    | Description                                     |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- |
| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLSelectElement</code> | <code>null</code>                                | Obtain a reference to the select HTML element   |
| value           | No       | <code>let</code> | Yes      | <code>number &#124; string</code>          | <code>""</code>                                  | Specify the select value                        |
| disabled        | No       | <code>let</code> | No       | <code>boolean</code>                       | <code>false</code>                               | Set to `true` to disable the select             |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                        | <code>"Open list of options"</code>              | Specify the ARIA label for the chevron icon     |
| labelText       | No       | <code>let</code> | No       | <code>string</code>                        | <code>""</code>                                  | Specify the label text                          |
| id              | No       | <code>let</code> | No       | <code>string</code>                        | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the select element                |
| name            | No       | <code>let</code> | No       | <code>string</code>                        | <code>undefined</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              | Required | Kind             | Reactive | Type                                                                                                           | Default value                     | Description                                                                               |
| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- |
| kind                   | No       | <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            | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                | Set to `true` to use the low contrast variant                                             |
| timeout                | No       | <code>let</code> | No       | <code>number</code>                                                                                            | <code>0</code>                    | Set the timeout duration (ms) to hide the notification after opening it                   |
| role                   | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"alert"</code>              | Set the `role` attribute                                                                  |
| title                  | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                   | Specify the title text                                                                    |
| subtitle               | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                   | Specify the subtitle text                                                                 |
| caption                | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>""</code>                   | Specify the caption text                                                                  |
| statusIconDescription  | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>kind + " icon"</code>       | Specify the ARIA label for the status icon                                                |
| closeButtonDescription | No       | <code>let</code> | No       | <code>string</code>                                                                                            | <code>"Close notification"</code> | Specify the ARIA label for the close button                                               |
| hideCloseButton        | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                | Set to `true` to hide the close button                                                    |
| fullWidth              | No       | <code>let</code> | No       | <code>boolean</code>                                                                                           | <code>false</code>                | Set to `true` for the notification to span<br />the full width of its containing element. |

### Slots

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

### Events

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

## `Toggle`

### Props

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

### Slots

| Slot name | Default | Props | Fallback                 |
| :-------- | :------ | :---- | :----------------------- |
| labelA    | No      | --    | <code>{labelA}</code>    |
| labelB    | No      | --    | <code>{labelB}</code>    |
| 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 | Required | Kind             | Reactive | Type                               | Default value                                    | Description                     |
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- |
| size      | No       | <code>let</code> | No       | <code>"default" &#124; "sm"</code> | <code>"default"</code>                           | Specify the toggle size         |
| labelText | No       | <code>let</code> | No       | <code>string</code>                | <code>""</code>                                  | Specify the label text          |
| id        | No       | <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 | --     |

## `Toolbar`

### Props

| Prop name | Required | Kind             | Reactive | Type                               | Default value          | Description              |
| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ |
| size      | No       | <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           | Required | Kind             | Reactive | Type                                           | Default value                                                                                       | Description                               |
| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| active              | No       | <code>let</code> | Yes      | <code>undefined &#124; boolean</code>          | <code>undefined</code>                                                                              | Use a boolean to show or hide the toolbar |
| formatTotalSelected | No       | <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     | --    | --                  |
| cancel    | No      | --    | <code>Cancel</code> |

### Events

| Event name | Type       | Detail            |
| :--------- | :--------- | :---------------- |
| cancel     | dispatched | <code>null</code> |

## `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        | Required | Kind             | Reactive | Type                                                                                                                   | Default value      | Description                                                                                                                                                                                                                                                                                                                                     |
| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref              | No       | <code>let</code> | Yes      | <code>null &#124; HTMLInputElement</code>                                                                              | <code>null</code>  | Obtain a reference to the input HTML element                                                                                                                                                                                                                                                                                                    |
| filteredRowIds   | No       | <code>let</code> | Yes      | <code>ReadonlyArray<import("./DataTable.svelte").DataTableRowId></code>                                                | <code>[]</code>    | The filtered row ids                                                                                                                                                                                                                                                                                                                            |
| expanded         | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                                   | <code>false</code> | Set to `true` to expand the search bar                                                                                                                                                                                                                                                                                                          |
| value            | No       | <code>let</code> | Yes      | <code>number &#124; string</code>                                                                                      | <code>""</code>    | Specify the value of the search input                                                                                                                                                                                                                                                                                                           |
| persistent       | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                   | <code>false</code> | Set to `true` to keep the search bar expanded                                                                                                                                                                                                                                                                                                   |
| disabled         | No       | <code>let</code> | No       | <code>boolean</code>                                                                                                   | <code>false</code> | Set to `true` to disable the search bar                                                                                                                                                                                                                                                                                                         |
| shouldFilterRows | No       | <code>let</code> | No       | <code>boolean &#124; ((row: import("./DataTable.svelte").DataTableRow, value: number &#124; string) => boolean)</code> | <code>false</code> | Set to `true` to filter table rows using the search value.<br /><br />If `true`, the default search excludes `id`, `cells` fields and<br />only does a basic comparison on string and number type cell values.<br /><br />To implement your own client-side filtering, pass a function<br />that accepts a row and value and returns a boolean. |
| tabindex         | No       | <code>let</code> | No       | <code>string</code>                                                                                                    | <code>"0"</code>   | Specify the tabindex                                                                                                                                                                                                                                                                                                                            |

### Slots

None.

### Events

| Event name | Type       | Detail            |
| :--------- | :--------- | :---------------- |
| clear      | dispatched | <code>null</code> |
| change     | forwarded  | --                |
| input      | forwarded  | --                |
| focus      | forwarded  | --                |
| blur       | forwarded  | --                |
| keyup      | forwarded  | --                |
| keydown    | forwarded  | --                |
| paste      | forwarded  | --                |

## `Tooltip`

### Props

| Prop name       | Required | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                                                |
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the icon HTML element                                                |
| refTooltip      | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the tooltip HTML element                                             |
| ref             | No       | <code>let</code> | Yes      | <code>null &#124; HTMLDivElement</code>                         | <code>null</code>                                | Obtain a reference to the trigger text HTML element                                        |
| open            | No       | <code>let</code> | Yes      | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to open the tooltip                                                          |
| align           | No       | <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       | No       | <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        | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to hide the tooltip icon                                                     |
| icon            | No       | <code>let</code> | No       | <code>any</code>                                                | <code>undefined</code>                           | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the ARIA label for the tooltip button                                              |
| iconName        | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the icon name attribute                                                            |
| tabindex        | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"0"</code>                                 | Set the button tabindex                                                                    |
| tooltipId       | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip                                                                  |
| triggerId       | No       | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button                                                           |
| triggerText     | No       | <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            |
| :--------- | :--------- | :---------------- |
| open       | dispatched | <code>null</code> |
| close      | dispatched | <code>null</code> |
| click      | forwarded  | --                |
| mousedown  | forwarded  | --                |

## `TooltipDefinition`

### Props

| Prop name   | Required | Kind             | Reactive | Type                                              | Default value                                    | Description                                           |
| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
| ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>        | <code>null</code>                                | Obtain a reference to the button HTML element         |
| open        | No       | <code>let</code> | Yes      | <code>boolean</code>                              | <code>false</code>                               | Set to `true` to open the tooltip                     |
| tooltipText | No       | <code>let</code> | No       | <code>string</code>                               | <code>""</code>                                  | Specify the tooltip text                              |
| align       | No       | <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   | No       | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
| id          | No       | <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            |
| :--------- | :--------- | :---------------- |
| open       | dispatched | <code>null</code> |
| close      | dispatched | <code>null</code> |
| click      | forwarded  | --                |
| mouseover  | forwarded  | --                |
| mouseenter | forwarded  | --                |
| mouseleave | forwarded  | --                |
| focus      | forwarded  | --                |

## `TooltipFooter`

### Props

| Prop name            | Required | Kind             | Reactive | Type                | Default value                                  | Description                                                                 |
| :------------------- | :------- | :--------------- | :------- | ------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- |
| selectorPrimaryFocus | No       | <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   | Required | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                              |
| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                            |
| tooltipText | No       | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| icon        | No       | <code>let</code> | No       | <code>any</code>                                                | <code>undefined</code>                           | Specify the icon to render                                               |
| disabled    | No       | <code>let</code> | No       | <code>boolean</code>                                            | <code>false</code>                               | Set to `true` to disable the tooltip icon                                |
| align       | No       | <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   | No       | <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          | No       | <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: any;
  icon?: any;
  disabled?: boolean;
  nodes?: TreeNode[];
}
```

### Props

| Prop name     | Required | Kind                  | Reactive | Type                                                          | Default value                                                                                                                                                                                                                                                                                                                                                                                     | Description                                                                                          |
| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| expandedIds   | No       | <code>let</code>      | Yes      | <code>ReadonlyArray<TreeNodeId></code>                        | <code>[]</code>                                                                                                                                                                                                                                                                                                                                                                                   | Set the node ids to be expanded                                                                      |
| selectedIds   | No       | <code>let</code>      | Yes      | <code>ReadonlyArray<TreeNodeId></code>                        | <code>[]</code>                                                                                                                                                                                                                                                                                                                                                                                   | Set the node ids to be selected                                                                      |
| activeId      | No       | <code>let</code>      | Yes      | <code>TreeNodeId</code>                                       | <code>""</code>                                                                                                                                                                                                                                                                                                                                                                                   | Set the current active node id<br />Only one node can be active                                      |
| nodes         | No       | <code>let</code>      | No       | <code>Array<TreeNode></code>                                  | <code>[]</code>                                                                                                                                                                                                                                                                                                                                                                                   | Provide an array of nodes to render                                                                  |
| size          | No       | <code>let</code>      | No       | <code>"default" &#124; "compact"</code>                       | <code>"default"</code>                                                                                                                                                                                                                                                                                                                                                                            | Specify the TreeView size                                                                            |
| labelText     | No       | <code>let</code>      | No       | <code>string</code>                                           | <code>""</code>                                                                                                                                                                                                                                                                                                                                                                                   | Specify the label text                                                                               |
| hideLabel     | No       | <code>let</code>      | No       | <code>boolean</code>                                          | <code>false</code>                                                                                                                                                                                                                                                                                                                                                                                | Set to `true` to visually hide the label text                                                        |
| expandAll     | No       | <code>function</code> | No       | <code>() => void</code>                                       | <code>() => { expandedIds = [...nodeIds]; }</code>                                                                                                                                                                                                                                                                                                                                                | Programmatically expand all nodes                                                                    |
| collapseAll   | No       | <code>function</code> | No       | <code>() => void</code>                                       | <code>() => { expandedIds = []; }</code>                                                                                                                                                                                                                                                                                                                                                          | Programmatically collapse all nodes                                                                  |
| expandNodes   | No       | <code>function</code> | No       | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = flattenedNodes .filter( (node) => filterNode(node) &#124;&#124; node.nodes?.some((child) => filterNode(child) && child.nodes), ) .map((node) => node.id); }</code>                                                                                                                                                                                                    | Programmatically expand a subset of nodes.<br />Expands all nodes if no argument is provided         |
| collapseNodes | No       | <code>function</code> | No       | <code>(filterId?: (node: TreeNode) => boolean) => void</code> | <code>() => { expandedIds = flattenedNodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); }</code>                                                                                                                                                                                                                                                | Programmatically collapse a subset of nodes.<br />Collapses all nodes if no argument is provided     |
| showNode      | No       | <code>function</code> | No       | <code>(id: TreeNodeId) => void</code>                         | <code>() => { for (const child of nodes) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); break; } } }</code> | Programmatically show a node by `id`.<br />The matching node will be expanded, selected, and focused |

### Slots

| Slot name | Default | Props                                                                                                                             | Fallback                 |
| :-------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
| --        | Yes     | <code>{ node: { id: TreeNodeId; text: string; expanded: boolean, leaf: boolean; disabled: boolean; selected: boolean; } } </code> | <code>{node.text}</code> |
| 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 | Required | Kind             | Reactive | Type                              | Default value      | Description |
| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
| clamp     | No       | <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  | Required | Kind             | Reactive | Type                 | Default value      | Description                                          |
| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- |
| nested     | No       | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the nested variant              |
| expressive | No       | <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 | --     |
