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;