From 432b5ba09a6125269219501016122f2bc1d40cde Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 26 Jul 2020 20:56:38 -0700 Subject: [PATCH 1/2] docs: add component index [ci skip] --- README.md | 3205 +++++++++++++++++++++++++++++++++++++- src/Button/Button.svelte | 2 +- 2 files changed, 3203 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 9cfe7bd0..9dfb5abc 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,6 @@ > Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system) -## [Storybook](https://ibm.github.io/carbon-components-svelte) - ## Getting Started `carbon-components-svelte` can be installed as a development dependency. @@ -32,7 +30,3208 @@ yarn add -D carbon-components-svelte ``` -Try it in the [CodeSandbox](https://codesandbox.io/s/carbon-components-svelte021-lhvc4). +## Component Index + +### AccordionSkeleton + +
Usage + +**Import Path** + +```js +import { AccordionSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| count | number | 4 | +| open | boolean | true | + +
+ +### Accordion + +
Usage + +**Import Path** + +```js +import { Accordion } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------------------- | :------ | +| align | "start" | "end" | "end" | +| skeleton | boolean | false | + +
+ +### AccordionItem + +
Usage + +**Import Path** + +```js +import { AccordionItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------- | :---------------- | +| title | string | "title" | +| open | boolean | false | +| iconDescription | string | "Expand/Collapse" | + +
+ +### BreadcrumbSkeleton + +
Usage + +**Import Path** + +```js +import { BreadcrumbSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------- | :------ | +| noTrailingSlash | boolean | false | +| count | number | 3 | + +
+ +### Breadcrumb + +
Usage + +**Import Path** + +```js +import { Breadcrumb } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------- | :------ | +| noTrailingSlash | boolean | false | +| skeleton | boolean | false | + +
+ +### BreadcrumbItem + +
Usage + +**Import Path** + +```js +import { BreadcrumbItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------- | :------ | +| href | string | - | +| isCurrentPage | boolean | false | + +
+ +### ButtonSkeleton + +
Usage + +**Import Path** + +```js +import { ButtonSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| href | string | - | +| small | boolean | false | + +
+ +### Button + +
Usage + +**Import Path** + +```js +import { Button } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :----------------------------------------------------------------------------------------- | :-------- | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| size | "default" | "field" | "small" | "default" | +| hasIconOnly | boolean | false | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | +| iconDescription | string | - | +| tooltipAlignment | "start" | "center" | "end" | - | +| tooltipPosition | "top" | "right" | "bottom" | "left" | - | +| as | boolean | false | +| skeleton | boolean | false | +| disabled | boolean | false | +| href | string | - | +| tabindex | string | "0" | +| type | string | "button" | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | + +
+ +### CheckboxSkeleton + +
Usage + +**Import Path** + +```js +import { CheckboxSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### Checkbox + +
Usage + +**Import Path** + +```js +import { Checkbox } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :---------------------------------------- | :------ | +| checked | boolean | false | +| indeterminate | boolean | false | +| skeleton | boolean | false | +| readonly | boolean | false | +| disabled | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| name | string | "" | +| title | string | - | +| id | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### CodeSnippetSkeleton + +
Usage + +**Import Path** + +```js +import { CodeSnippetSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--------------------------------------------------- | :------- | +| type | "single" | "inline" | "multi" | "single" | + +
+ +### CodeSnippet + +
Usage + +**Import Path** + +```js +import { CodeSnippet } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------------- | :--------------------------------------------------- | :---------- | +| type | "single" | "inline" | "multi" | "single" | +| code | string | - | +| expanded | boolean | false | +| light | boolean | false | +| skeleton | boolean | false | +| copyButtonDescription | string | - | +| copyLabel | string | - | +| feedback | string | "Copied!" | +| feedbackTimeout | number | 2000 | +| showLessText | string | "Show more" | +| showMoreLess | boolean | false | +| id | string | - | +| ref | null | HTMLPreElement | null | + +
+ +### ComboBox + +
Usage + +**Import Path** + +```js +import { ComboBox } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :---------------------------------------------------------- | :------------------------------ | +| items | ComboBoxItem[] | [] | +| itemToString | (item: ComboBoxItem) => string; | (item: ComboBoxItem) => string; | +| selectedIndex | number | -1 | +| value | string | "" | +| size | "sm" | "xl" | - | +| disabled | boolean | false | +| titleText | string | "" | +| placeholder | string | "" | +| helperText | string | "" | +| invalidText | string | "" | +| invalid | boolean | false | +| light | boolean | false | +| open | boolean | false | +| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | () => true | +| translateWithId | (id: any) => string; | - | +| id | string | - | +| name | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### ComposedModal + +
Usage + +**Import Path** + +```js +import { ComposedModal } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------------- | :---------------------------------------- | :--------------------------- | +| size | "xs" | "sm" | "lg" | - | +| open | boolean | false | +| danger | boolean | false | +| containerClass | string | "" | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | +| ref | null | HTMLElement | null | + +
+ +### ModalBody + +
Usage + +**Import Path** + +```js +import { ModalBody } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------------ | :------------------- | :------ | +| hasForm | boolean | false | +| hasScrollingContent | boolean | false | + +
+ +### ModalFooter + +
Usage + +**Import Path** + +```js +import { ModalFooter } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------------- | :------------------- | :------ | +| primaryButtonText | string | "" | +| primaryButtonDisabled | boolean | false | +| primaryClass | string | - | +| secondaryButtonText | string | "" | +| secondaryClass | string | - | +| danger | boolean | false | + +
+ +### ModalHeader + +
Usage + +**Import Path** + +```js +import { ModalHeader } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------ | :------ | +| title | string | "" | +| label | string | "" | +| labelClass | string | "" | +| titleClass | string | "" | +| closeClass | string | "" | +| closeIconClass | string | "" | +| iconDescription | string | "Close" | + +
+ +### ContentSwitcher + +
Usage + +**Import Path** + +```js +import { ContentSwitcher } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------- | :------ | +| selectedIndex | number | 0 | +| light | boolean | false | + +
+ +### Switch + +
Usage + +**Import Path** + +```js +import { Switch } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :----------------------------------------- | :------------- | +| text | string | "Provide text" | +| selected | boolean | false | +| disabled | boolean | false | +| id | string | - | +| ref | null | HTMLButtonElement | null | + +
+ +### Copy + +
Usage + +**Import Path** + +```js +import { Copy } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :----------------------------------------- | :-------- | +| feedback | string | "Copied!" | +| feedbackTimeout | number | 2000 | +| ref | null | HTMLButtonElement | null | + +
+ +### CopyButton + +
Usage + +**Import Path** + +```js +import { CopyButton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------ | :------------------ | +| iconDescription | string | "Copy to clipboard" | + +
+ +### DataTable + +
Usage + +**Import Path** + +```js +import { DataTable } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :-------------------------------------------------- | :------ | +| headers | {key: string; value: string;} | [] | +| rows | Object[] | [] | +| size | "compact" | "short" | "tall" | - | +| title | string | "" | +| description | string | "" | +| zebra | boolean | false | +| sortable | boolean | false | +| stickyHeader | boolean | false | + +
+ +### Table + +
Usage + +**Import Path** + +```js +import { Table } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :-------------------------------------------------- | :------ | +| size | "compact" | "short" | "tall" | - | +| zebra | boolean | false | +| useStaticWidth | boolean | false | +| shouldShowBorder | boolean | false | +| sortable | boolean | false | +| stickyHeader | boolean | false | + +
+ +### TableBody + +
Usage + +**Import Path** + +```js +import { TableBody } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### TableCell + +
Usage + +**Import Path** + +```js +import { TableCell } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### TableContainer + +
Usage + +**Import Path** + +```js +import { TableContainer } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :------------------- | :------ | +| title | string | "" | +| description | string | "" | +| stickyHeader | boolean | false | + +
+ +### TableHead + +
Usage + +**Import Path** + +```js +import { TableHead } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### TableHeader + +
Usage + +**Import Path** + +```js +import { TableHeader } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------- | :-------- | +| scope | string | "col" | +| translateWithId | () => string; | () => ""; | +| id | string | - | + +
+ +### TableRow + +
Usage + +**Import Path** + +```js +import { TableRow } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------- | :------------------- | :------ | +| isSelected | boolean | false | + +
+ +### DataTableSkeleton + +
Usage + +**Import Path** + +```js +import { DataTableSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------- | :------ | +| columns | number | 5 | +| rows | number | 5 | +| compact | boolean | false | +| zebra | boolean | false | +| headers | string[] | [] | + +
+ +### DatePickerSkeleton + +
Usage + +**Import Path** + +```js +import { DatePickerSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| range | boolean | false | +| id | string | - | + +
+ +### DatePicker + +
Usage + +**Import Path** + +```js +import { DatePicker } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------- | :--------------------------------------------------- | :------------ | +| datePickerType | "simple" | "single" | "range" | "simple" | +| value | string | "" | +| appendTo | HTMLElement | document.body | +| dateFormat | string | "m/d/Y" | +| maxDate | null | string | Date | null | +| minDate | null | string | Date | null | +| locale | string | "en" | +| short | boolean | false | +| light | boolean | false | +| id | string | - | + +
+ +### DatePickerInput + +
Usage + +**Import Path** + +```js +import { DatePickerInput } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :---------------------------------------- | :------ | +| size | "sm" | "xl" | - | +| type | string | "text" | +| placeholder | string | "" | +| iconDescription | string | "" | +| id | string | - | +| invalid | boolean | false | +| invalidText | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### DropdownSkeleton + +
Usage + +**Import Path** + +```js +import { DropdownSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| inline | boolean | false | + +
+ +### Dropdown + +
Usage + +**Import Path** + +```js +import { Dropdown } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------------------------- | :--------------------------------------- | +| items | DropdownItem[] | [] | +| itemToString | (item: DropdownItem) => string; | (item: DropdownItem) => DropdownItemText | DropdownItemId; | +| selectedIndex | number | -1 | +| type | "default" | "inline" | "default" | +| size | "sm" | "lg" | "xl" | - | +| open | boolean | false | +| inline | boolean | false | +| light | boolean | false | +| disabled | boolean | false | +| titleText | string | "" | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | - | +| translateWithId | (id: any) => string; | - | +| id | string | - | +| name | string | - | +| ref | null | HTMLButtonElement | null | + +
+ +### FileUploaderSkeleton + +
Usage + +**Import Path** + +```js +import { FileUploaderSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### FileUploader + +
Usage + +**Import Path** + +```js +import { FileUploader } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :----------------------------------------------------------------------------------------- | :---------- | +| status | "uploading" | "edit" | "complete" | "uploading" | +| accept | string[] | [] | +| files | string[] | [] | +| multiple | boolean | false | +| clearFiles | () => any; | () => void; | +| labelDescription | string | "" | +| labelTitle | string | "" | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| buttonLabel | string | "" | +| iconDescription | string | "" | +| name | string | - | + +
+ +### FileUploaderButton + +
Usage + +**Import Path** + +```js +import { FileUploaderButton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------------ | :----------------------------------------------------------------------------------------- | :--------- | +| accept | string[] | [] | +| multiple | boolean | false | +| disabled | boolean | false | +| disableLabelChanges | boolean | false | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | +| labelText | string | "Add file" | +| role | string | "button" | +| tabindex | string | "0" | +| id | string | - | +| name | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### FileUploaderDropContainer + +
Usage + +**Import Path** + +```js +import { FileUploaderDropContainer } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :---------------------------------------- | :----------------------- | +| accept | string[] | [] | +| multiple | boolean | false | +| validateFiles | (files: Files) => Files | (files: Files) => Files; | +| labelText | string | "Add file" | +| role | string | "button" | +| disabled | boolean | false | +| tabindex | string | "0" | +| id | string | - | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### FileUploaderItem + +
Usage + +**Import Path** + +```js +import { FileUploaderItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------------------------------------- | :---------- | +| status | "uploading" | "edit" | "complete" | "uploading" | +| iconDescription | string | "" | +| invalid | boolean | false | +| errorSubject | string | "" | +| errorBody | string | "" | +| id | string | - | +| name | string | "" | + +
+ +### Filename + +
Usage + +**Import Path** + +```js +import { Filename } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------------------------------------- | :---------- | +| status | "uploading" | "edit" | "complete" | "uploading" | +| iconDescription | string | "" | +| invalid | boolean | false | + +
+ +### Form + +
Usage + +**Import Path** + +```js +import { Form } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### FormGroup + +
Usage + +**Import Path** + +```js +import { FormGroup } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| invalid | boolean | false | + +
+ +### FormItem + +
Usage + +**Import Path** + +```js +import { FormItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### FormLabel + +
Usage + +**Import Path** + +```js +import { FormLabel } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| id | string | - | + +
+ +### Column + +
Usage + +**Import Path** + +```js +import { Column } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------------------------------------------------------------------------------------- | :------ | +| as | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | +| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | - | +| sm | ColumnBreakpoint | - | +| md | ColumnBreakpoint | - | +| lg | ColumnBreakpoint | - | +| xlg | ColumnBreakpoint | - | +| max | ColumnBreakpoint | - | +| | string[] | - | + +
+ +### Grid + +
Usage + +**Import Path** + +```js +import { Grid } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------- | :------ | +| as | boolean | false | +| condensed | boolean | false | +| narrow | boolean | false | +| fullWidth | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | + +
+ +### Row + +
Usage + +**Import Path** + +```js +import { Row } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------- | :------ | +| as | boolean | false | +| condensed | boolean | false | +| narrow | boolean | false | +| noGutter | boolean | false | +| noGutterLeft | boolean | false | +| noGutterRight | boolean | false | + +
+ +### IconSkeleton + +
Usage + +**Import Path** + +```js +import { IconSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| size | number | 16 | + +
+ +### Icon + +
Usage + +**Import Path** + +```js +import { Icon } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------------------------------------------------------ | :------ | +| render | typeof import("carbon-icons-svelte/lib/Add16").default | - | +| skeleton | boolean | false | + +
+ +### InlineLoading + +
Usage + +**Import Path** + +```js +import { InlineLoading } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :----------------------------------------------------------------------- | :---------------- | +| status | "active" | "inactive" | "finished" | "error" | "active" | +| description | string | - | +| iconDescription | string | "Expand/Collapse" | +| successDelay | number | 1500 | + +
+ +### Link + +
Usage + +**Import Path** + +```js +import { Link } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--------------------------------------------------------------------- | :------ | +| inline | boolean | false | +| disabled | boolean | false | +| ref | null | HTMLAnchorElement | HTMLParagraphElement | null | + +
+ +### ListBox + +
Usage + +**Import Path** + +```js +import { ListBox } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :------------------------------------- | :-------- | +| size | "sm" | "xl" | - | +| type | "default" | "inline" | "default" | +| open | boolean | false | +| light | boolean | false | +| disable | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | + +
+ +### ListBoxField + +
Usage + +**Import Path** + +```js +import { ListBoxField } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------------------------------------ | :-------------- | +| disabled | boolean | false | +| role | string | "combobox" | +| tabindex | string | "-1" | +| | { close: "close"; open: "open"; } | - | +| translateWithId | (id: ListBoxFieldTranslationId) => string; | (id) => string; | +| id | string | - | +| ref | null | HTMLElement | null | + +
+ +### ListBoxMenu + +
Usage + +**Import Path** + +```js +import { ListBoxMenu } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| id | string | - | + +
+ +### ListBoxMenuIcon + +
Usage + +**Import Path** + +```js +import { ListBoxMenuIcon } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :--------------------------------------------------------- | :-------------- | +| open | boolean | false | +| | { close: "close"; open: "open" } | - | +| translateWithId | (id: ListBoxMenuIconTranslationId) => string; | (id) => string; | + +
+ +### ListBoxMenuItem + +
Usage + +**Import Path** + +```js +import { ListBoxMenuItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :------------------- | :------ | +| active | boolean | false | +| highlighted | boolean | false | + +
+ +### ListBoxSelection + +
Usage + +**Import Path** + +```js +import { ListBoxSelection } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :---------------------------------------------------------------------- | :-------------- | +| selectionCount | \* | - | +| disabled | boolean | false | +| | { clearAll: "clearAll"; clearSelection: "clearSelection" } | - | +| translateWithId | (id: ListBoxSelectionTranslationId) => string; | (id) => string; | +| ref | null | HTMLElement | null | + +
+ +### ListItem + +
Usage + +**Import Path** + +```js +import { ListItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### Loading + +
Usage + +**Import Path** + +```js +import { Loading } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :------------------- | :------------------------- | +| small | boolean | false | +| active | boolean | true | +| withOverlay | boolean | false | +| description | string | "Active loading indicator" | +| id | string | - | + +
+ +### Modal + +
Usage + +**Import Path** + +```js +import { Modal } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------------- | :---------------------------------------- | :--------------------------- | +| size | "xs" | "sm" | "lg" | - | +| open | boolean | false | +| danger | boolean | false | +| passiveModal | boolean | false | +| modalHeading | string | - | +| modalLabel | string | - | +| modalAriaLabel | string | - | +| iconDescription | string | "Close the modal" | +| hasForm | boolean | false | +| hasScrollingContent | boolean | false | +| primaryButtonText | string | "" | +| primaryButtonDisabled | boolean | false | +| shouldSubmitOnEnter | boolean | true | +| secondaryButtonText | string | "" | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | +| id | string | - | +| ref | null | HTMLElement | null | + +
+ +### MultiSelect + +
Usage + +**Import Path** + +```js +import { MultiSelect } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------------- | :------------------------------------------------------------------------ | :---------------------------------------------------------- | +| items | MultiSelectItem[] | [] | +| itemToString | (item: MultiSelectItem) => string; | (item: MultiSelectItem) => MultiSelectItemText | MultiSelectItemId; | +| selectedIds | MultiSelectItemId[] | [] | +| value | string | "" | +| size | "sm" | "lg" | "xl" | - | +| type | "default" | "inline" | "default" | +| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | +| disabled | boolean | false | +| filterable | boolean | false | +| filterItem | (item: MultiSelectItem, value: string) => string; | ((item: MultiSelectItem, value: string) => string;) | +| open | boolean | false | +| light | boolean | false | +| locale | string | "en" | +| placeholder | string | "" | +| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem; | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | +| translateWithId | (id: any) => string; | - | +| titleText | string | "" | +| useTitleInItem | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| label | string | - | +| id | string | - | +| name | string | - | + +
+ +### InlineNotification + +
Usage + +**Import Path** + +```js +import { InlineNotification } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| notificationType | "toast" | "inline" | "toast" | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| lowContrast | boolean | false | +| role | string | "alert" | +| title | string | "Title" | +| subtitle | string | "" | +| hideCloseButton | boolean | false | +| iconDescription | string | "Closes notification" | + +
+ +### NotificationActionButton + +
Usage + +**Import Path** + +```js +import { NotificationActionButton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### NotificationButton + +
Usage + +**Import Path** + +```js +import { NotificationButton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------------------------------------------------------ | :----------- | +| notificationType | "toast" | "inline" | "toast" | +| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | - | +| iconDescription | string | "Close icon" | + +
+ +### NotificationIcon + +
Usage + +**Import Path** + +```js +import { NotificationIcon } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| notificationType | "toast" | "inline" | "toast" | +| iconDescription | string | "Closes notification" | + +
+ +### NotificationTextDetails + +
Usage + +**Import Path** + +```js +import { NotificationTextDetails } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :----------------------------------- | :-------- | +| notificationType | "toast" | "inline" | "toast" | +| title | string | "Title" | +| subtitle | string | "" | +| caption | string | "Caption" | + +
+ +### ToastNotification + +
Usage + +**Import Path** + +```js +import { ToastNotification } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | +| notificationType | "toast" | "inline" | "toast" | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | +| lowContrast | boolean | false | +| timeout | number | 0 | +| role | string | "alert" | +| title | string | "Title" | +| subtitle | string | "" | +| caption | string | "Caption" | +| iconDescription | string | "Closes notification" | +| hideCloseButton | boolean | false | + +
+ +### NumberInputSkeleton + +
Usage + +**Import Path** + +```js +import { NumberInputSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| hideLabel | boolean | false | + +
+ +### NumberInput + +
Usage + +**Import Path** + +```js +import { NumberInput } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :-------------------------------------------------------------- | :---------------------------------------- | +| size | "sm" | "xl" | - | +| value | string | "" | +| step | number | 1 | +| max | number | - | +| min | number | - | +| light | boolean | false | +| readonly | boolean | false | +| mobile | boolean | false | +| allowEmpty | boolean | false | +| disabled | boolean | false | +| iconDescription | string | "" | +| invalid | boolean | false | +| invalidText | string | "Provide invalidText" | +| helperText | string | "" | +| label | string | "" | +| hideLabel | boolean | false | +| translateWithId | (id: NumberInputTranslationId) => string; | (id: NumberInputTranslationId) => string; | +| | { increment: "increment"; decrement: "decrement" } | - | +| id | string | - | +| name | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### OrderedList + +
Usage + +**Import Path** + +```js +import { OrderedList } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| nested | boolean | false | + +
+ +### OverflowMenu + +
Usage + +**Import Path** + +```js +import { OverflowMenu } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------------------------------------------------------ | :------------------------------- | +| direction | "top" | "bottom" | "bottom" | +| open | boolean | false | +| light | boolean | false | +| flipped | boolean | false | +| menuOptionsClass | string | - | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | - | +| iconClass | string | - | +| iconDescription | string | "Open and close list of options" | +| id | string | - | + +
+ +### OverflowMenuItem + +
Usage + +**Import Path** + +```js +import { OverflowMenuItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :------------------------------------------------------------------ | :------------- | +| text | string | "Provide text" | +| href | string | "" | +| primaryFocus | boolean | false | +| disabled | boolean | false | +| hasDivider | boolean | false | +| danger | boolean | false | +| requireTitle | boolean | false | +| id | string | - | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | + +
+ +### PaginationSkeleton + +
Usage + +**Import Path** + +```js +import { PaginationSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### Pagination + +
Usage + +**Import Path** + +```js +import { Pagination } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------------- | :---------------------------------------------------------------- | :--------------------------------------------------- | +| page | number | 1 | +| total | number | 0 | +| disabled | boolean | false | +| forwardText | string | "Next page" | +| backwardText | string | "Previous page" | +| itemsPerPageText | string | "Items per page:" | +| itemText | (min: number, max: number) => string; | (min: number, max: number) => string; | +| itemRangeText | (min: number, max: number, total: number) => string; | (min: number, max: number, total: number) => string; | +| pageInputDisabled | boolean | false | +| pageSize | number | 10 | +| pageSizes | number[] | [10] | +| pagesUnknown | boolean | false | +| pageText | (page: number) => string; | (current: number) => string; | +| pageRangeText | (current: number, total: number) => string; | (current: number, total: number) => string; | +| id | string | - | + +
+ +### PaginationItem + +
Usage + +**Import Path** + +```js +import { PaginationItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| page | number | 0 | +| active | boolean | false | + +
+ +### PaginationNav + +
Usage + +**Import Path** + +```js +import { PaginationNav } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :------------------- | :---------- | +| page | number | 0 | +| total | number | 10 | +| shown | number | 10 | +| loop | boolean | false | +| forwardText | string | "Next page" | +| backwardText | string | "Next page" | +| | 4 | - | + +
+ +### PaginationOverflow + +
Usage + +**Import Path** + +```js +import { PaginationOverflow } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| fromIndex | number | 0 | +| count | number | 0 | + +
+ +### ProgressIndicatorSkeleton + +
Usage + +**Import Path** + +```js +import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### ProgressIndicator + +
Usage + +**Import Path** + +```js +import { ProgressIndicator } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :------------------ | :------ | +| currentIndex | number | 0 | + +
+ +### ProgressStep + +
Usage + +**Import Path** + +```js +import { ProgressStep } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------- | :------------------- | :------ | +| complete | boolean | false | +| current | boolean | false | +| disabled | boolean | false | +| invalid | boolean | false | +| descripton | string | "" | +| label | string | "" | +| secondaryLabel | string | "" | +| id | string | - | + +
+ +### RadioButtonSkeleton + +
Usage + +**Import Path** + +```js +import { RadioButtonSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### RadioButton + +
Usage + +**Import Path** + +```js +import { RadioButton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :---------------------------------------- | :------ | +| value | string | "" | +| checked | boolean | false | +| disabled | boolean | false | +| labelPosition | "right" | "left" | "right" | +| labelText | string | "" | +| hideLabel | boolean | false | +| id | string | - | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### RadioButtonGroup + +
Usage + +**Import Path** + +```js +import { RadioButtonGroup } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------ | :------------------------------------------ | :----------- | +| selected | string | - | +| disabled | boolean | false | +| labelPosition | "right" | "left" | "right" | +| orientation | "horizontal" | "vertical" | "horizontal" | + +
+ +### SearchSkeleton + +
Usage + +**Import Path** + +```js +import { SearchSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| small | boolean | false | + +
+ +### Search + +
Usage + +**Import Path** + +```js +import { Search } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------------- | :---------------------------------------- | :------------------- | +| small | boolean | false | +| size | "sm" | "lg" | - | +| skeleton | boolean | false | +| light | boolean | false | +| value | string | "text" | +| type | string | "text" | +| placeholder | string | "Search..." | +| autocomplete | "on" | "off" | "off" | +| autofocus | boolean | false | +| closeButtonLabelText | string | "Clear search input" | +| labelText | string | "" | +| id | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### SelectSkeleton + +
Usage + +**Import Path** + +```js +import { SelectSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| hideLabel | boolean | false | + +
+ +### Select + +
Usage + +**Import Path** + +```js +import { Select } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :----------------------------------------- | :------ | +| selected | string | - | +| size | "sm" | "xl" | - | +| inline | boolean | false | +| light | boolean | false | +| disabled | boolean | false | +| id | string | - | +| name | string | - | +| invalid | boolean | false | +| invalidText | string | "" | +| helperText | string | "" | +| noLabel | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| ref | null | HTMLSelectElement | null | + +
+ +### SelectItem + +
Usage + +**Import Path** + +```js +import { SelectItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### SelectItemGroup + +
Usage + +**Import Path** + +```js +import { SelectItemGroup } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :-------------- | +| disabled | boolean | false | +| label | string | "Provide label" | + +
+ +### SkeletonPlaceholder + +
Usage + +**Import Path** + +```js +import { SkeletonPlaceholder } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### SkeletonText + +
Usage + +**Import Path** + +```js +import { SkeletonText } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------- | :------ | +| lines | number | 3 | +| heading | boolean | false | +| paragraph | boolean | false | +| width | string | "100%" | +| | number[] | - | + +
+ +### SliderSkeleton + +
Usage + +**Import Path** + +```js +import { SliderSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| hideLabel | boolean | false | + +
+ +### Slider + +
Usage + +**Import Path** + +```js +import { Slider } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :----------------------------------- | :------ | +| id | string | - | +| invalid | boolean | false | +| labelText | string | "" | +| light | boolean | false | +| name | string | "" | +| ref | null | HTMLElement | null | + +
+ +### StructuredListSkeleton + +
Usage + +**Import Path** + +```js +import { StructuredListSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| rows | number | 5 | +| border | boolean | false | + +
+ +### StructuredList + +
Usage + +**Import Path** + +```js +import { StructuredList } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| selected | string | - | +| border | boolean | false | +| selection | boolean | false | + +
+ +### StructuredListBody + +
Usage + +**Import Path** + +```js +import { StructuredListBody } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### StructuredListCell + +
Usage + +**Import Path** + +```js +import { StructuredListCell } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| head | boolean | false | +| noWrap | boolean | false | + +
+ +### StructuredListHead + +
Usage + +**Import Path** + +```js +import { StructuredListHead } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### StructuredListInput + +
Usage + +**Import Path** + +```js +import { StructuredListInput } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :---------------------------------------- | :------ | +| checked | boolean | false | +| title | string | "title" | +| value | string | "value" | +| id | string | - | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### StructuredListRow + +
Usage + +**Import Path** + +```js +import { StructuredListRow } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| head | boolean | false | +| label | boolean | false | +| tabindex | string | "0" | + +
+ +### Tab + +
Usage + +**Import Path** + +```js +import { Tab } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| id | string | - | + +
+ +### TabContent + +
Usage + +**Import Path** + +```js +import { TabContent } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| id | string | - | + +
+ +### Tabs + +
Usage + +**Import Path** + +```js +import { Tabs } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### TabsSkeleton + +
Usage + +**Import Path** + +```js +import { TabsSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### TagSkeleton + +
Usage + +**Import Path** + +```js +import { TagSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### Tag + +
Usage + +**Import Path** + +```js +import { Tag } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | +| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | - | +| filter | boolean | false | +| disabled | boolean | false | +| skeleton | boolean | false | +| title | string | "Clear filter" | +| id | string | - | + +
+ +### TextAreaSkeleton + +
Usage + +**Import Path** + +```js +import { TextAreaSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| hideLabel | boolean | false | + +
+ +### TextArea + +
Usage + +**Import Path** + +```js +import { TextArea } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :------------------------------------------- | :------ | +| value | string | "" | +| placeholder | string | "" | +| cols | number | 50 | +| rows | number | 4 | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| id | string | - | +| name | string | - | +| ref | null | HTMLTextAreaElement | null | + +
+ +### PasswordInput + +
Usage + +**Import Path** + +```js +import { PasswordInput } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------------- | :-------------------------------------------------------------- | :-------------- | +| size | "sm" | "xl" | - | +| value | string | "" | +| type | string | "password" | +| placeholder | string | "" | +| hidePasswordLabel | string | "Hide password" | +| showPasswordLabel | string | "Show password" | +| tooltipAlignment | "start" | "center" | "end" | "center" | +| tooltipPosition | "top" | "right" | "bottom" | "left" | "bottom" | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| id | string | - | +| name | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### TextInputSkeleton + +
Usage + +**Import Path** + +```js +import { TextInputSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| hideLabel | boolean | false | + +
+ +### TextInput + +
Usage + +**Import Path** + +```js +import { TextInput } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :---------------------------------------- | :------ | +| size | "sm" | "xl" | - | +| value | string | "" | +| type | string | "" | +| placeholder | string | "" | +| light | boolean | false | +| disabled | boolean | false | +| helperText | string | "" | +| id | string | - | +| name | string | - | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### ClickableTile + +
Usage + +**Import Path** + +```js +import { ClickableTile } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| clicked | boolean | false | +| light | boolean | false | + +
+ +### ExpandableTile + +
Usage + +**Import Path** + +```js +import { ExpandableTile } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------------- | :----------------------------------- | :-------------------------- | +| expanded | boolean | false | +| light | boolean | false | +| tileMaxHeight | number | 0 | +| tilePadding | number | 0 | +| tileCollapsedIconText | string | "Interact to expand Tile" | +| tileExpandedIconText | string | "Interact to collapse Tile" | +| tabindex | string | "0" | +| id | string | - | +| ref | null | HTMLElement | null | + +
+ +### RadioTile + +
Usage + +**Import Path** + +```js +import { RadioTile } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------- | :--------------- | +| checked | boolean | false | +| light | boolean | false | +| value | string | "" | +| tabindex | string | "0" | +| iconDescription | string | "Tile checkmark" | +| id | string | - | +| name | string | "" | + +
+ +### SelectableTile + +
Usage + +**Import Path** + +```js +import { SelectableTile } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :---------------------------------------- | :--------------- | +| selected | boolean | false | +| light | boolean | false | +| title | string | "title" | +| value | string | "value" | +| tabindex | string | "0" | +| iconDescription | string | "Tile checkmark" | +| id | string | - | +| name | string | "" | +| ref | null | HTMLInputElement | null | + +
+ +### Tile + +
Usage + +**Import Path** + +```js +import { Tile } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| light | boolean | false | + +
+ +### TileGroup + +
Usage + +**Import Path** + +```js +import { TileGroup } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| selected | string | - | +| disabled | boolean | false | +| legend | string | - | + +
+ +### TimePicker + +
Usage + +**Import Path** + +```js +import { TimePicker } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :---------------------------------------- | :--------------------- | +| value | string | "" | +| type | string | "text" | +| placeholder | string | "hh=mm" | +| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | +| maxLength | number | 5 | +| light | boolean | false | +| disabled | boolean | false | +| labelText | string | "" | +| hideLabel | boolean | false | +| invalid | boolean | false | +| invalidText | string | "Invalid time format." | +| id | string | - | +| name | string | - | +| ref | null | HTMLInputElement | null | + +
+ +### TimePickerSelect + +
Usage + +**Import Path** + +```js +import { TimePickerSelect } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :----------------------------------------- | :---------------- | +| value | string | "" | +| disabled | boolean | false | +| iconDescription | string | "Expand/Collapse" | +| labelText | string | "" | +| hideLabel | boolean | false | +| id | string | - | +| name | string | - | +| ref | null | HTMLSelectElement | null | + +
+ +### ToggleSkeleton + +
Usage + +**Import Path** + +```js +import { ToggleSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| labelText | string | "" | +| id | string | - | + +
+ +### Toggle + +
Usage + +**Import Path** + +```js +import { Toggle } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| toggled | boolean | false | +| disabled | boolean | false | +| labelA | string | "Off" | +| labelB | string | "On" | +| labelText | string | "" | +| id | string | - | +| name | string | - | + +
+ +### ToggleSmallSkeleton + +
Usage + +**Import Path** + +```js +import { ToggleSmallSkeleton } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| labelText | string | "" | +| id | string | - | + +
+ +### ToggleSmall + +
Usage + +**Import Path** + +```js +import { ToggleSmall } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| toggled | boolean | false | +| disabled | boolean | false | +| labelA | string | "Off" | +| labelB | string | "On" | +| labelText | string | "" | +| id | string | - | +| name | string | - | + +
+ +### Tooltip + +
Usage + +**Import Path** + +```js +import { Tooltip } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------------------------------------------------------ | :------------ | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | +| open | boolean | false | +| hideIcon | boolean | false | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | Information16 | +| iconDescription | string | "" | +| iconName | string | "" | +| tabindex | string | "0" | +| tooltipId | string | - | +| triggerId | string | - | +| triggerText | string | "" | +| ref | null | HTMLElement | null | + +
+ +### TooltipDefinition + +
Usage + +**Import Path** + +```js +import { TooltipDefinition } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :------------------------------------------------ | :------- | +| tooltipText | string | "" | +| align | "start" | "center" | "end" | "center" | +| direction | "top" | "bottom" | "bottom" | +| id | string | - | +| ref | null | HTMLButtonElement | null | + +
+ +### TooltipIcon + +
Usage + +**Import Path** + +```js +import { TooltipIcon } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :---------- | :-------------------------------------------------------------- | :------- | +| tooltipText | string | "" | +| align | "start" | "center" | "end" | "center" | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | +| id | string | - | +| ref | null | HTMLButtonElement | null | + +
+ +### Content + +
Usage + +**Import Path** + +```js +import { Content } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------------- | +| id | string | "main-content" | + +
+ +### SkipToContent + +
Usage + +**Import Path** + +```js +import { SkipToContent } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :-------------- | +| href | string | "#main-content" | +| tabindex | string | "0" | + +
+ +### UnorderedList + +
Usage + +**Import Path** + +```js +import { UnorderedList } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| nested | boolean | false | + +
+ +### Header + +
Usage + +**Import Path** + +```js +import { Header } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------------- | :------------------- | :------ | +| isSideNavOpen | boolean | false | +| uiShellAriaLabel | string | - | +| href | string | - | +| company | string | - | +| platformName | string | - | + +
+ +### HeaderAction + +
Usage + +**Import Path** + +```js +import { HeaderAction } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------ | +| isOpen | boolean | false | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | +| text | string | - | + +
+ +### HeaderActionLink + +
Usage + +**Import Path** + +```js +import { HeaderActionLink } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :----------- | :-------------------------------------------------------------------------------------------------- | :------ | +| linkIsActive | boolean | false | +| href | string | - | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | + +
+ +### HeaderActionSearch + +
Usage + +**Import Path** + +```js +import { HeaderActionSearch } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :------------- | :------------------- | :------ | +| searchIsActive | boolean | false | + +
+ +### HeaderNav + +
Usage + +**Import Path** + +```js +import { HeaderNav } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| ariaLabel | string | - | + +
+ +### HeaderNavItem + +
Usage + +**Import Path** + +```js +import { HeaderNavItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| href | string | - | +| text | string | - | + +
+ +### HeaderNavMenu + +
Usage + +**Import Path** + +```js +import { HeaderNavMenu } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------------- | :------------------- | :---------------- | +| expanded | boolean | false | +| href | string | "/" | +| text | string | - | +| iconDescription | string | "Expand/Collapse" | + +
+ +### HeaderPanelDivider + +
Usage + +**Import Path** + +```js +import { HeaderPanelDivider } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### HeaderPanelLink + +
Usage + +**Import Path** + +```js +import { HeaderPanelLink } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------ | :------ | +| href | string | - | + +
+ +### HeaderPanelLinks + +
Usage + +**Import Path** + +```js +import { HeaderPanelLinks } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### HeaderUtilities + +
Usage + +**Import Path** + +```js +import { HeaderUtilities } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### HamburgerMenu + +
Usage + +**Import Path** + +```js +import { HamburgerMenu } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| ariaLabel | string | - | +| isOpen | boolean | false | + +
+ +### SideNav + +
Usage + +**Import Path** + +```js +import { SideNav } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :------------------- | :------ | +| ariaLabel | string | - | +| isOpen | boolean | false | + +
+ +### SideNavItems + +
Usage + +**Import Path** + +```js +import { SideNavItems } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ +### SideNavLink + +
Usage + +**Import Path** + +```js +import { SideNavLink } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :--------- | :-------------------------------------------------------------------------------------------------- | :------ | +| isSelected | boolean | false | +| href | string | - | +| text | string | - | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | + +
+ +### SideNavMenu + +
Usage + +**Import Path** + +```js +import { SideNavMenu } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------ | +| expanded | boolean | - | +| text | string | - | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | - | + +
+ +### SideNavMenuItem + +
Usage + +**Import Path** + +```js +import { SideNavMenuItem } from "carbon-components-svelte"; +``` + +**API** + +| Prop name | Type | Default | +| :-------- | :--- | :------ | + + +
+ ## Contributing diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte index 1f014da5..a27dd12f 100644 --- a/src/Button/Button.svelte +++ b/src/Button/Button.svelte @@ -57,7 +57,7 @@ /** * Set to `true` to disable the button - * @type [boolean] [disabled=false] + * @type {boolean} [disabled=false] */ export let disabled = false; From 7abde796884fea30a50dc0d97ff404cabd55f2a1 Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Sun, 26 Jul 2020 21:21:27 -0700 Subject: [PATCH 2/2] docs: document available components [ci skip] --- README.md | 869 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 797 insertions(+), 72 deletions(-) diff --git a/README.md b/README.md index 9dfb5abc..4c391645 100644 --- a/README.md +++ b/README.md @@ -30,12 +30,200 @@ yarn add -D carbon-components-svelte ``` +## Available Components + +> 147 components in "carbon-components-svelte" + +- Accordion + - [AccordionSkeleton](#accordionskeleton) + - [Accordion](#accordion) + - [AccordionItem](#accordionitem) +- Breadcrumb + - [BreadcrumbSkeleton](#breadcrumbskeleton) + - [Breadcrumb](#breadcrumb) + - [BreadcrumbItem](#breadcrumbitem) +- Button + - [ButtonSkeleton](#buttonskeleton) + - [Button](#button) +- Checkbox + - [CheckboxSkeleton](#checkboxskeleton) + - [Checkbox](#checkbox) +- CodeSnippet + - [CodeSnippetSkeleton](#codesnippetskeleton) + - [CodeSnippet](#codesnippet) +- [ComboBox](#combobox) +- ComposedModal + - [ComposedModal](#composedmodal) + - [ModalBody](#modalbody) + - [ModalFooter](#modalfooter) + - [ModalHeader](#modalheader) +- ContentSwitcher + - [ContentSwitcher](#contentswitcher) + - [Switch](#switch) +- [Copy](#copy) +- [CopyButton](#copybutton) +- DataTable + - [DataTable](#datatable) + - [Table](#table) + - [TableBody](#tablebody) + - [TableCell](#tablecell) + - [TableContainer](#tablecontainer) + - [TableHead](#tablehead) + - [TableHeader](#tableheader) + - [TableRow](#tablerow) +- [DataTableSkeleton](#datatableskeleton) +- DatePicker + - [DatePickerSkeleton](#datepickerskeleton) + - [DatePicker](#datepicker) + - [DatePickerInput](#datepickerinput) +- Dropdown + - [DropdownSkeleton](#dropdownskeleton) + - [Dropdown](#dropdown) +- FileUploader + - [FileUploaderSkeleton](#fileuploaderskeleton) + - [FileUploader](#fileuploader) + - [FileUploaderButton](#fileuploaderbutton) + - [FileUploaderDropContainer](#fileuploaderdropcontainer) + - [FileUploaderItem](#fileuploaderitem) + - [Filename](#filename) +- [Form](#form) +- [FormGroup](#formgroup) +- [FormItem](#formitem) +- [FormLabel](#formlabel) +- Grid + - [Column](#column) + - [Grid](#grid) + - [Row](#row) +- Icon + - [IconSkeleton](#iconskeleton) + - [Icon](#icon) +- [InlineLoading](#inlineloading) +- [Link](#link) +- ListBox + - [ListBox](#listbox) + - [ListBoxField](#listboxfield) + - [ListBoxMenu](#listboxmenu) + - [ListBoxMenuIcon](#listboxmenuicon) + - [ListBoxMenuItem](#listboxmenuitem) + - [ListBoxSelection](#listboxselection) +- [ListItem](#listitem) +- [Loading](#loading) +- [Modal](#modal) +- [MultiSelect](#multiselect) +- Notification + - [InlineNotification](#inlinenotification) + - [NotificationActionButton](#notificationactionbutton) + - [NotificationButton](#notificationbutton) + - [NotificationIcon](#notificationicon) + - [NotificationTextDetails](#notificationtextdetails) + - [ToastNotification](#toastnotification) +- NumberInput + - [NumberInputSkeleton](#numberinputskeleton) + - [NumberInput](#numberinput) +- [OrderedList](#orderedlist) +- OverflowMenu + - [OverflowMenu](#overflowmenu) + - [OverflowMenuItem](#overflowmenuitem) +- Pagination + - [PaginationSkeleton](#paginationskeleton) + - [Pagination](#pagination) +- PaginationNav + - [PaginationItem](#paginationitem) + - [PaginationNav](#paginationnav) + - [PaginationOverflow](#paginationoverflow) +- ProgressIndicator + - [ProgressIndicatorSkeleton](#progressindicatorskeleton) + - [ProgressIndicator](#progressindicator) + - [ProgressStep](#progressstep) +- RadioButton + - [RadioButtonSkeleton](#radiobuttonskeleton) + - [RadioButton](#radiobutton) +- [RadioButtonGroup](#radiobuttongroup) +- Search + - [SearchSkeleton](#searchskeleton) + - [Search](#search) +- Select + - [SelectSkeleton](#selectskeleton) + - [Select](#select) + - [SelectItem](#selectitem) + - [SelectItemGroup](#selectitemgroup) +- [SkeletonPlaceholder](#skeletonplaceholder) +- [SkeletonText](#skeletontext) +- Slider + - [SliderSkeleton](#sliderskeleton) + - [Slider](#slider) +- StructuredList + - [StructuredListSkeleton](#structuredlistskeleton) + - [StructuredList](#structuredlist) + - [StructuredListBody](#structuredlistbody) + - [StructuredListCell](#structuredlistcell) + - [StructuredListHead](#structuredlisthead) + - [StructuredListInput](#structuredlistinput) + - [StructuredListRow](#structuredlistrow) +- Tabs + - [Tab](#tab) + - [TabContent](#tabcontent) + - [Tabs](#tabs) + - [TabsSkeleton](#tabsskeleton) +- Tag + - [TagSkeleton](#tagskeleton) + - [Tag](#tag) +- TextArea + - [TextAreaSkeleton](#textareaskeleton) + - [TextArea](#textarea) +- TextInput + - [PasswordInput](#passwordinput) + - [TextInputSkeleton](#textinputskeleton) + - [TextInput](#textinput) +- Tile + - [ClickableTile](#clickabletile) + - [ExpandableTile](#expandabletile) + - [RadioTile](#radiotile) + - [SelectableTile](#selectabletile) + - [Tile](#tile) + - [TileGroup](#tilegroup) +- TimePicker + - [TimePicker](#timepicker) + - [TimePickerSelect](#timepickerselect) +- Toggle + - [ToggleSkeleton](#toggleskeleton) + - [Toggle](#toggle) +- ToggleSmall + - [ToggleSmallSkeleton](#togglesmallskeleton) + - [ToggleSmall](#togglesmall) +- [Tooltip](#tooltip) +- [TooltipDefinition](#tooltipdefinition) +- [TooltipIcon](#tooltipicon) +- UIShell + - [Content](#content) + - [SkipToContent](#skiptocontent) + - [Header](#header) + - [HeaderAction](#headeraction) + - [HeaderActionLink](#headeractionlink) + - [HeaderActionSearch](#headeractionsearch) + - [HeaderNav](#headernav) + - [HeaderNavItem](#headernavitem) + - [HeaderNavMenu](#headernavmenu) + - [HeaderPanelDivider](#headerpaneldivider) + - [HeaderPanelLink](#headerpanellink) + - [HeaderPanelLinks](#headerpanellinks) + - [HeaderUtilities](#headerutilities) + - [HamburgerMenu](#hamburgermenu) + - [SideNav](#sidenav) + - [SideNavItems](#sidenavitems) + - [SideNavLink](#sidenavlink) + - [SideNavMenu](#sidenavmenu) + - [SideNavMenuItem](#sidenavmenuitem) +- [UnorderedList](#unorderedlist) + ## Component Index ### AccordionSkeleton
Usage +**Component Group:** Accordion + **Import Path** ```js @@ -51,10 +239,14 @@ import { AccordionSkeleton } from "carbon-components-svelte";
+--- + ### Accordion
Usage +**Component Group:** Accordion + **Import Path** ```js @@ -70,10 +262,14 @@ import { Accordion } from "carbon-components-svelte";
+--- + ### AccordionItem
Usage +**Component Group:** Accordion + **Import Path** ```js @@ -90,10 +286,14 @@ import { AccordionItem } from "carbon-components-svelte";
+--- + ### BreadcrumbSkeleton
Usage +**Component Group:** Breadcrumb + **Import Path** ```js @@ -109,10 +309,14 @@ import { BreadcrumbSkeleton } from "carbon-components-svelte";
+--- + ### Breadcrumb
Usage +**Component Group:** Breadcrumb + **Import Path** ```js @@ -128,10 +332,14 @@ import { Breadcrumb } from "carbon-components-svelte";
+--- + ### BreadcrumbItem
Usage +**Component Group:** Breadcrumb + **Import Path** ```js @@ -147,10 +355,14 @@ import { BreadcrumbItem } from "carbon-components-svelte";
+--- + ### ButtonSkeleton
Usage +**Component Group:** Button + **Import Path** ```js @@ -166,10 +378,14 @@ import { ButtonSkeleton } from "carbon-components-svelte";
+--- + ### Button
Usage +**Component Group:** Button + **Import Path** ```js @@ -197,10 +413,14 @@ import { Button } from "carbon-components-svelte";
+--- + ### CheckboxSkeleton
Usage +**Component Group:** Checkbox + **Import Path** ```js @@ -209,16 +429,18 @@ import { CheckboxSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### Checkbox
Usage +**Component Group:** Checkbox + **Import Path** ```js @@ -243,10 +465,14 @@ import { Checkbox } from "carbon-components-svelte";
+--- + ### CodeSnippetSkeleton
Usage +**Component Group:** CodeSnippet + **Import Path** ```js @@ -261,10 +487,14 @@ import { CodeSnippetSkeleton } from "carbon-components-svelte";
+--- + ### CodeSnippet
Usage +**Component Group:** CodeSnippet + **Import Path** ```js @@ -291,10 +521,14 @@ import { CodeSnippet } from "carbon-components-svelte";
+--- + ### ComboBox
Usage +**Component Group:** ComboBox + **Import Path** ```js @@ -326,10 +560,14 @@ import { ComboBox } from "carbon-components-svelte";
+--- + ### ComposedModal
Usage +**Component Group:** ComposedModal + **Import Path** ```js @@ -349,10 +587,14 @@ import { ComposedModal } from "carbon-components-svelte";
+--- + ### ModalBody
Usage +**Component Group:** ComposedModal + **Import Path** ```js @@ -368,10 +610,14 @@ import { ModalBody } from "carbon-components-svelte";
+--- + ### ModalFooter
Usage +**Component Group:** ComposedModal + **Import Path** ```js @@ -391,10 +637,14 @@ import { ModalFooter } from "carbon-components-svelte";
+--- + ### ModalHeader
Usage +**Component Group:** ComposedModal + **Import Path** ```js @@ -415,10 +665,14 @@ import { ModalHeader } from "carbon-components-svelte";
+--- + ### ContentSwitcher
Usage +**Component Group:** ContentSwitcher + **Import Path** ```js @@ -434,10 +688,14 @@ import { ContentSwitcher } from "carbon-components-svelte";
+--- + ### Switch
Usage +**Component Group:** ContentSwitcher + **Import Path** ```js @@ -456,10 +714,14 @@ import { Switch } from "carbon-components-svelte";
+--- + ### Copy
Usage +**Component Group:** Copy + **Import Path** ```js @@ -476,10 +738,14 @@ import { Copy } from "carbon-components-svelte";
+--- + ### CopyButton
Usage +**Component Group:** CopyButton + **Import Path** ```js @@ -494,10 +760,14 @@ import { CopyButton } from "carbon-components-svelte";
+--- + ### DataTable
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -519,10 +789,14 @@ import { DataTable } from "carbon-components-svelte";
+--- + ### Table
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -542,10 +816,14 @@ import { Table } from "carbon-components-svelte";
+--- + ### TableBody
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -554,16 +832,18 @@ import { TableBody } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### TableCell
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -572,16 +852,18 @@ import { TableCell } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### TableContainer
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -598,10 +880,14 @@ import { TableContainer } from "carbon-components-svelte";
+--- + ### TableHead
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -610,16 +896,18 @@ import { TableHead } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### TableHeader
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -636,10 +924,14 @@ import { TableHeader } from "carbon-components-svelte";
+--- + ### TableRow
Usage +**Component Group:** DataTable + **Import Path** ```js @@ -654,10 +946,14 @@ import { TableRow } from "carbon-components-svelte";
+--- + ### DataTableSkeleton
Usage +**Component Group:** DataTableSkeleton + **Import Path** ```js @@ -676,10 +972,14 @@ import { DataTableSkeleton } from "carbon-components-svelte";
+--- + ### DatePickerSkeleton
Usage +**Component Group:** DatePicker + **Import Path** ```js @@ -695,10 +995,14 @@ import { DatePickerSkeleton } from "carbon-components-svelte";
+--- + ### DatePicker
Usage +**Component Group:** DatePicker + **Import Path** ```js @@ -722,10 +1026,14 @@ import { DatePicker } from "carbon-components-svelte";
+--- + ### DatePickerInput
Usage +**Component Group:** DatePicker + **Import Path** ```js @@ -747,10 +1055,14 @@ import { DatePickerInput } from "carbon-components-svelte";
+--- + ### DropdownSkeleton
Usage +**Component Group:** Dropdown + **Import Path** ```js @@ -765,10 +1077,14 @@ import { DropdownSkeleton } from "carbon-components-svelte";
+--- + ### Dropdown
Usage +**Component Group:** Dropdown + **Import Path** ```js @@ -800,10 +1116,14 @@ import { Dropdown } from "carbon-components-svelte";
+--- + ### FileUploaderSkeleton
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -812,16 +1132,18 @@ import { FileUploaderSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### FileUploader
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -846,10 +1168,14 @@ import { FileUploader } from "carbon-components-svelte";
+--- + ### FileUploaderButton
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -874,10 +1200,14 @@ import { FileUploaderButton } from "carbon-components-svelte";
+--- + ### FileUploaderDropContainer
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -901,10 +1231,14 @@ import { FileUploaderDropContainer } from "carbon-components-svelte";
+--- + ### FileUploaderItem
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -925,10 +1259,14 @@ import { FileUploaderItem } from "carbon-components-svelte";
+--- + ### Filename
Usage +**Component Group:** FileUploader + **Import Path** ```js @@ -945,10 +1283,14 @@ import { Filename } from "carbon-components-svelte";
+--- + ### Form
Usage +**Component Group:** Form + **Import Path** ```js @@ -957,16 +1299,18 @@ import { Form } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### FormGroup
Usage +**Component Group:** FormGroup + **Import Path** ```js @@ -981,10 +1325,14 @@ import { FormGroup } from "carbon-components-svelte";
+--- + ### FormItem
Usage +**Component Group:** FormItem + **Import Path** ```js @@ -993,16 +1341,18 @@ import { FormItem } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### FormLabel
Usage +**Component Group:** FormLabel + **Import Path** ```js @@ -1017,10 +1367,14 @@ import { FormLabel } from "carbon-components-svelte";
+--- + ### Column
Usage +**Component Group:** Grid + **Import Path** ```js @@ -1045,10 +1399,14 @@ import { Column } from "carbon-components-svelte";
+--- + ### Grid
Usage +**Component Group:** Grid + **Import Path** ```js @@ -1069,10 +1427,14 @@ import { Grid } from "carbon-components-svelte";
+--- + ### Row
Usage +**Component Group:** Grid + **Import Path** ```js @@ -1092,10 +1454,14 @@ import { Row } from "carbon-components-svelte";
+--- + ### IconSkeleton
Usage +**Component Group:** Icon + **Import Path** ```js @@ -1110,10 +1476,14 @@ import { IconSkeleton } from "carbon-components-svelte";
+--- + ### Icon
Usage +**Component Group:** Icon + **Import Path** ```js @@ -1129,10 +1499,14 @@ import { Icon } from "carbon-components-svelte";
+--- + ### InlineLoading
Usage +**Component Group:** InlineLoading + **Import Path** ```js @@ -1150,10 +1524,14 @@ import { InlineLoading } from "carbon-components-svelte";
+--- + ### Link
Usage +**Component Group:** Link + **Import Path** ```js @@ -1170,10 +1548,14 @@ import { Link } from "carbon-components-svelte";
+--- + ### ListBox
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1194,10 +1576,14 @@ import { ListBox } from "carbon-components-svelte";
+--- + ### ListBoxField
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1218,10 +1604,14 @@ import { ListBoxField } from "carbon-components-svelte";
+--- + ### ListBoxMenu
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1236,10 +1626,14 @@ import { ListBoxMenu } from "carbon-components-svelte";
+--- + ### ListBoxMenuIcon
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1256,10 +1650,14 @@ import { ListBoxMenuIcon } from "carbon-components-svelte";
+--- + ### ListBoxMenuItem
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1275,10 +1673,14 @@ import { ListBoxMenuItem } from "carbon-components-svelte";
+--- + ### ListBoxSelection
Usage +**Component Group:** ListBox + **Import Path** ```js @@ -1297,10 +1699,14 @@ import { ListBoxSelection } from "carbon-components-svelte";
+--- + ### ListItem
Usage +**Component Group:** ListItem + **Import Path** ```js @@ -1309,16 +1715,18 @@ import { ListItem } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### Loading
Usage +**Component Group:** Loading + **Import Path** ```js @@ -1337,10 +1745,14 @@ import { Loading } from "carbon-components-svelte";
+--- + ### Modal
Usage +**Component Group:** Modal + **Import Path** ```js @@ -1371,10 +1783,14 @@ import { Modal } from "carbon-components-svelte";
+--- + ### MultiSelect
Usage +**Component Group:** MultiSelect + **Import Path** ```js @@ -1412,10 +1828,14 @@ import { MultiSelect } from "carbon-components-svelte";
+--- + ### InlineNotification
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1437,10 +1857,14 @@ import { InlineNotification } from "carbon-components-svelte";
+--- + ### NotificationActionButton
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1449,16 +1873,18 @@ import { NotificationActionButton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### NotificationButton
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1475,10 +1901,14 @@ import { NotificationButton } from "carbon-components-svelte";
+--- + ### NotificationIcon
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1495,10 +1925,14 @@ import { NotificationIcon } from "carbon-components-svelte";
+--- + ### NotificationTextDetails
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1516,10 +1950,14 @@ import { NotificationTextDetails } from "carbon-components-svelte";
+--- + ### ToastNotification
Usage +**Component Group:** Notification + **Import Path** ```js @@ -1543,10 +1981,14 @@ import { ToastNotification } from "carbon-components-svelte";
+--- + ### NumberInputSkeleton
Usage +**Component Group:** NumberInput + **Import Path** ```js @@ -1561,10 +2003,14 @@ import { NumberInputSkeleton } from "carbon-components-svelte";
+--- + ### NumberInput
Usage +**Component Group:** NumberInput + **Import Path** ```js @@ -1599,10 +2045,14 @@ import { NumberInput } from "carbon-components-svelte";
+--- + ### OrderedList
Usage +**Component Group:** OrderedList + **Import Path** ```js @@ -1617,10 +2067,14 @@ import { OrderedList } from "carbon-components-svelte";
+--- + ### OverflowMenu
Usage +**Component Group:** OverflowMenu + **Import Path** ```js @@ -1643,10 +2097,14 @@ import { OverflowMenu } from "carbon-components-svelte";
+--- + ### OverflowMenuItem
Usage +**Component Group:** OverflowMenu + **Import Path** ```js @@ -1669,10 +2127,14 @@ import { OverflowMenuItem } from "carbon-components-svelte";
+--- + ### PaginationSkeleton
Usage +**Component Group:** Pagination + **Import Path** ```js @@ -1681,16 +2143,18 @@ import { PaginationSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### Pagination
Usage +**Component Group:** Pagination + **Import Path** ```js @@ -1719,10 +2183,14 @@ import { Pagination } from "carbon-components-svelte";
+--- + ### PaginationItem
Usage +**Component Group:** PaginationNav + **Import Path** ```js @@ -1738,10 +2206,14 @@ import { PaginationItem } from "carbon-components-svelte";
+--- + ### PaginationNav
Usage +**Component Group:** PaginationNav + **Import Path** ```js @@ -1762,10 +2234,14 @@ import { PaginationNav } from "carbon-components-svelte";
+--- + ### PaginationOverflow
Usage +**Component Group:** PaginationNav + **Import Path** ```js @@ -1781,10 +2257,14 @@ import { PaginationOverflow } from "carbon-components-svelte";
+--- + ### ProgressIndicatorSkeleton
Usage +**Component Group:** ProgressIndicator + **Import Path** ```js @@ -1793,16 +2273,18 @@ import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### ProgressIndicator
Usage +**Component Group:** ProgressIndicator + **Import Path** ```js @@ -1817,10 +2299,14 @@ import { ProgressIndicator } from "carbon-components-svelte";
+--- + ### ProgressStep
Usage +**Component Group:** ProgressIndicator + **Import Path** ```js @@ -1842,10 +2328,14 @@ import { ProgressStep } from "carbon-components-svelte";
+--- + ### RadioButtonSkeleton
Usage +**Component Group:** RadioButton + **Import Path** ```js @@ -1854,16 +2344,18 @@ import { RadioButtonSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### RadioButton
Usage +**Component Group:** RadioButton + **Import Path** ```js @@ -1886,10 +2378,14 @@ import { RadioButton } from "carbon-components-svelte";
+--- + ### RadioButtonGroup
Usage +**Component Group:** RadioButtonGroup + **Import Path** ```js @@ -1907,10 +2403,14 @@ import { RadioButtonGroup } from "carbon-components-svelte";
+--- + ### SearchSkeleton
Usage +**Component Group:** Search + **Import Path** ```js @@ -1925,10 +2425,14 @@ import { SearchSkeleton } from "carbon-components-svelte";
+--- + ### Search
Usage +**Component Group:** Search + **Import Path** ```js @@ -1955,10 +2459,14 @@ import { Search } from "carbon-components-svelte";
+--- + ### SelectSkeleton
Usage +**Component Group:** Select + **Import Path** ```js @@ -1973,10 +2481,14 @@ import { SelectSkeleton } from "carbon-components-svelte";
+--- + ### Select
Usage +**Component Group:** Select + **Import Path** ```js @@ -2004,10 +2516,14 @@ import { Select } from "carbon-components-svelte";
+--- + ### SelectItem
Usage +**Component Group:** Select + **Import Path** ```js @@ -2016,16 +2532,18 @@ import { SelectItem } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### SelectItemGroup
Usage +**Component Group:** Select + **Import Path** ```js @@ -2041,10 +2559,14 @@ import { SelectItemGroup } from "carbon-components-svelte";
+--- + ### SkeletonPlaceholder
Usage +**Component Group:** SkeletonPlaceholder + **Import Path** ```js @@ -2053,16 +2575,18 @@ import { SkeletonPlaceholder } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### SkeletonText
Usage +**Component Group:** SkeletonText + **Import Path** ```js @@ -2081,10 +2605,14 @@ import { SkeletonText } from "carbon-components-svelte";
+--- + ### SliderSkeleton
Usage +**Component Group:** Slider + **Import Path** ```js @@ -2099,10 +2627,14 @@ import { SliderSkeleton } from "carbon-components-svelte";
+--- + ### Slider
Usage +**Component Group:** Slider + **Import Path** ```js @@ -2122,10 +2654,14 @@ import { Slider } from "carbon-components-svelte";
+--- + ### StructuredListSkeleton
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2141,10 +2677,14 @@ import { StructuredListSkeleton } from "carbon-components-svelte";
+--- + ### StructuredList
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2161,10 +2701,14 @@ import { StructuredList } from "carbon-components-svelte";
+--- + ### StructuredListBody
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2173,16 +2717,18 @@ import { StructuredListBody } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### StructuredListCell
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2198,10 +2744,14 @@ import { StructuredListCell } from "carbon-components-svelte";
+--- + ### StructuredListHead
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2210,16 +2760,18 @@ import { StructuredListHead } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### StructuredListInput
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2239,10 +2791,14 @@ import { StructuredListInput } from "carbon-components-svelte";
+--- + ### StructuredListRow
Usage +**Component Group:** StructuredList + **Import Path** ```js @@ -2259,10 +2815,14 @@ import { StructuredListRow } from "carbon-components-svelte";
+--- + ### Tab
Usage +**Component Group:** Tabs + **Import Path** ```js @@ -2277,10 +2837,14 @@ import { Tab } from "carbon-components-svelte";
+--- + ### TabContent
Usage +**Component Group:** Tabs + **Import Path** ```js @@ -2295,10 +2859,14 @@ import { TabContent } from "carbon-components-svelte";
+--- + ### Tabs
Usage +**Component Group:** Tabs + **Import Path** ```js @@ -2307,16 +2875,18 @@ import { Tabs } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### TabsSkeleton
Usage +**Component Group:** Tabs + **Import Path** ```js @@ -2325,16 +2895,18 @@ import { TabsSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### TagSkeleton
Usage +**Component Group:** Tag + **Import Path** ```js @@ -2343,16 +2915,18 @@ import { TagSkeleton } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### Tag
Usage +**Component Group:** Tag + **Import Path** ```js @@ -2372,10 +2946,14 @@ import { Tag } from "carbon-components-svelte";
+--- + ### TextAreaSkeleton
Usage +**Component Group:** TextArea + **Import Path** ```js @@ -2390,10 +2968,14 @@ import { TextAreaSkeleton } from "carbon-components-svelte";
+--- + ### TextArea
Usage +**Component Group:** TextArea + **Import Path** ```js @@ -2421,10 +3003,14 @@ import { TextArea } from "carbon-components-svelte";
+--- + ### PasswordInput
Usage +**Component Group:** TextInput + **Import Path** ```js @@ -2456,10 +3042,14 @@ import { PasswordInput } from "carbon-components-svelte";
+--- + ### TextInputSkeleton
Usage +**Component Group:** TextInput + **Import Path** ```js @@ -2474,10 +3064,14 @@ import { TextInputSkeleton } from "carbon-components-svelte";
+--- + ### TextInput
Usage +**Component Group:** TextInput + **Import Path** ```js @@ -2505,10 +3099,14 @@ import { TextInput } from "carbon-components-svelte";
+--- + ### ClickableTile
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2524,10 +3122,14 @@ import { ClickableTile } from "carbon-components-svelte";
+--- + ### ExpandableTile
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2550,10 +3152,14 @@ import { ExpandableTile } from "carbon-components-svelte";
+--- + ### RadioTile
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2574,10 +3180,14 @@ import { RadioTile } from "carbon-components-svelte";
+--- + ### SelectableTile
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2600,10 +3210,14 @@ import { SelectableTile } from "carbon-components-svelte";
+--- + ### Tile
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2618,10 +3232,14 @@ import { Tile } from "carbon-components-svelte";
+--- + ### TileGroup
Usage +**Component Group:** Tile + **Import Path** ```js @@ -2638,10 +3256,14 @@ import { TileGroup } from "carbon-components-svelte";
+--- + ### TimePicker
Usage +**Component Group:** TimePicker + **Import Path** ```js @@ -2669,10 +3291,14 @@ import { TimePicker } from "carbon-components-svelte";
+--- + ### TimePickerSelect
Usage +**Component Group:** TimePicker + **Import Path** ```js @@ -2694,10 +3320,14 @@ import { TimePickerSelect } from "carbon-components-svelte";
+--- + ### ToggleSkeleton
Usage +**Component Group:** Toggle + **Import Path** ```js @@ -2713,10 +3343,14 @@ import { ToggleSkeleton } from "carbon-components-svelte";
+--- + ### Toggle
Usage +**Component Group:** Toggle + **Import Path** ```js @@ -2737,10 +3371,14 @@ import { Toggle } from "carbon-components-svelte";
+--- + ### ToggleSmallSkeleton
Usage +**Component Group:** ToggleSmall + **Import Path** ```js @@ -2756,10 +3394,14 @@ import { ToggleSmallSkeleton } from "carbon-components-svelte";
+--- + ### ToggleSmall
Usage +**Component Group:** ToggleSmall + **Import Path** ```js @@ -2780,10 +3422,14 @@ import { ToggleSmall } from "carbon-components-svelte";
+--- + ### Tooltip
Usage +**Component Group:** Tooltip + **Import Path** ```js @@ -2808,10 +3454,14 @@ import { Tooltip } from "carbon-components-svelte";
+--- + ### TooltipDefinition
Usage +**Component Group:** TooltipDefinition + **Import Path** ```js @@ -2830,10 +3480,14 @@ import { TooltipDefinition } from "carbon-components-svelte";
+--- + ### TooltipIcon
Usage +**Component Group:** TooltipIcon + **Import Path** ```js @@ -2852,10 +3506,14 @@ import { TooltipIcon } from "carbon-components-svelte";
+--- + ### Content
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2870,10 +3528,14 @@ import { Content } from "carbon-components-svelte";
+--- + ### SkipToContent
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2889,10 +3551,14 @@ import { SkipToContent } from "carbon-components-svelte";
+--- + ### UnorderedList
Usage +**Component Group:** UnorderedList + **Import Path** ```js @@ -2907,10 +3573,14 @@ import { UnorderedList } from "carbon-components-svelte";
+--- + ### Header
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2929,10 +3599,14 @@ import { Header } from "carbon-components-svelte";
+--- + ### HeaderAction
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2949,10 +3623,14 @@ import { HeaderAction } from "carbon-components-svelte";
+--- + ### HeaderActionLink
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2969,10 +3647,14 @@ import { HeaderActionLink } from "carbon-components-svelte";
+--- + ### HeaderActionSearch
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -2987,10 +3669,14 @@ import { HeaderActionSearch } from "carbon-components-svelte";
+--- + ### HeaderNav
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3005,10 +3691,14 @@ import { HeaderNav } from "carbon-components-svelte";
+--- + ### HeaderNavItem
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3024,10 +3714,14 @@ import { HeaderNavItem } from "carbon-components-svelte";
+--- + ### HeaderNavMenu
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3045,10 +3739,14 @@ import { HeaderNavMenu } from "carbon-components-svelte";
+--- + ### HeaderPanelDivider
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3057,16 +3755,18 @@ import { HeaderPanelDivider } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### HeaderPanelLink
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3081,10 +3781,14 @@ import { HeaderPanelLink } from "carbon-components-svelte";
+--- + ### HeaderPanelLinks
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3093,16 +3797,18 @@ import { HeaderPanelLinks } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### HeaderUtilities
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3111,16 +3817,18 @@ import { HeaderUtilities } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### HamburgerMenu
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3136,10 +3844,14 @@ import { HamburgerMenu } from "carbon-components-svelte";
+--- + ### SideNav
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3155,10 +3867,14 @@ import { SideNav } from "carbon-components-svelte";
+--- + ### SideNavItems
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3167,16 +3883,18 @@ import { SideNavItems } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- + ### SideNavLink
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3194,10 +3912,14 @@ import { SideNavLink } from "carbon-components-svelte";
+--- + ### SideNavMenu
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3214,10 +3936,14 @@ import { SideNavMenu } from "carbon-components-svelte";
+--- + ### SideNavMenuItem
Usage +**Component Group:** UIShell + **Import Path** ```js @@ -3226,12 +3952,11 @@ import { SideNavMenuItem } from "carbon-components-svelte"; **API** -| Prop name | Type | Default | -| :-------- | :--- | :------ | - +No exported props.
+--- ## Contributing