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