diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 3cdba203..8575c73b 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -196,12 +196,12 @@ import { Accordion } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------- | :------------ | -| align | "start" | "end" | "end" | -| size | "sm" | "xl" | -- | -| disabled | boolean | false | -| skeleton | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------- | :------------ | :----------------------------------------------- | +| align | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | "sm" | "xl" | -- | Specify the size of the accordion | +| disabled | boolean | false | Set to `true` to disable the accordion | +| skeleton | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -230,12 +230,13 @@ import { AccordionItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------- | :---------------- | -| title | string | "title" | -| open | boolean | false | -| disabled | boolean | false | -| iconDescription | string | "Expand/Collapse" | +| Prop name | Type | Default value | Description | +| :--------------------------------------------------------------------------- | :------------------- | :---------------- | :--------------------------------------------------------- | +| title | string | "title" | Specify the title of the accordion item heading | +| Alternatively, use the named slot "title" (e.g.
...
) | +| open | boolean | false | Set to `true` to open the first accordion item | +| disabled | boolean | false | Set to `true` to disable the accordion item | +| iconDescription | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -266,12 +267,12 @@ import { AccordionSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------- | :------------ | -| count | number | 4 | -| align | "start" | "end" | "end" | -| size | "sm" | "xl" | -- | -| open | boolean | true | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------- | :------------ | :----------------------------------------------- | +| count | number | 4 | Specify the number of accordion items to render | +| align | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | "sm" | "xl" | -- | Specify the size of the accordion | +| open | boolean | true | Set to `false` to close the first accordion item | ### Slots @@ -300,9 +301,9 @@ import { AspectRatio } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | -| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :----------------------- | +| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -328,10 +329,10 @@ import { Breadcrumb } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------- | :------------ | -| noTrailingSlash | boolean | false | -| skeleton | boolean | false | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------- | :------------ | :-------------------------------------------------- | +| noTrailingSlash | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| skeleton | boolean | false | Set to `true` to display skeleton state | ### Slots @@ -360,10 +361,10 @@ import { BreadcrumbItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :------------------- | :------------ | -| href | string | -- | -| isCurrentPage | boolean | false | +| Prop name | Type | Default value | Description | +| :------------ | :------------------- | :------------ | :--------------------------------------------------------------- | +| href | string | -- | Set the `href` to use an anchor link | +| isCurrentPage | boolean | false | Set to `true` if the breadcrumb item represents the current page | ### Slots @@ -392,10 +393,10 @@ import { BreadcrumbSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------- | :------------ | -| noTrailingSlash | boolean | false | -| count | number | 3 | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------- | :------------ | :-------------------------------------------------- | +| noTrailingSlash | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| count | number | 3 | Specify the number of breadcrumb items to render | ### Slots @@ -424,22 +425,24 @@ import { Button } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| size | "default" | "field" | "small" | "default" | -| hasIconOnly | boolean | false | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| iconDescription | string | -- | -| tooltipAlignment | "start" | "center" | "end" | -- | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | -| as | boolean | false | -| skeleton | boolean | false | -| disabled | boolean | false | -| href | string | -- | -| tabindex | string | "0" | -| type | string | "button" | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :---------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------- | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of button | +| size | "default" | "field" | "small" | "default" | Specify the size of button | +| hasIconOnly | boolean | false | Set to `true` for the icon-only variant | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconDescription | string | -- | Specify the ARIA label for the button icon | +| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon | +| `hasIconOnly` must be set to `true` | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| as | boolean | false | Set to `true` to render a custom HTML element | +| Props are destructured as `props` in the default slot (e.g. ) | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| disabled | boolean | false | Set to `true` to disable the button | +| href | string | -- | Set the `href` to use an anchor link | +| tabindex | string | "0" | Specify the tabindex | +| type | string | "button" | Specify the `type` attribute for the button element | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -468,9 +471,9 @@ import { ButtonSet } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| stacked | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------------- | +| stacked | boolean | false | Set to `true` to stack the buttons vertically | ### Slots @@ -496,11 +499,11 @@ import { ButtonSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :--------------------------------------------------- | :------------ | -| href | string | -- | -| size | "default" | "field" | "small" | "default" | -| small | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :--------------------------------------------------- | :------------ | :------------------------------------- | +| href | string | -- | Set the `href` to use an anchor link | +| size | "default" | "field" | "small" | "default" | Specify the size of button skeleton | +| small | boolean | false | Set to `true` to use the small variant | ### Slots @@ -529,19 +532,19 @@ import { Checkbox } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :---------------------------------------- | :------------ | -| checked | boolean | false | -| indeterminate | boolean | false | -| skeleton | boolean | false | -| readonly | boolean | false | -| disabled | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| name | string | "" | -| title | string | -- | -| id | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :------------ | :---------------------------------------- | :------------ | :------------------------------------------------ | +| checked | boolean | false | Specify whether the checkbox is checked | +| indeterminate | boolean | false | Specify whether the checkbox is indeterminate | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| readonly | boolean | false | Set to `true` for the checkbox to be read-only | +| disabled | boolean | false | Set to `true` to disable the checkbox | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| name | string | "" | Set a name for the input element | +| title | string | -- | Specify the title attribute for the label element | +| id | string | -- | Set an id for the input label | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -600,11 +603,11 @@ import { ClickableTile } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| clicked | boolean | false | -| light | boolean | false | -| href | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------- | +| clicked | boolean | false | Set to `true` to click the tile | +| light | boolean | false | Set to `true` to enable the light variant | +| href | string | -- | Set the `href` | ### Slots @@ -634,24 +637,28 @@ import { CodeSnippet } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------------- | :--------------------------------------------------- | :------------ | -| type | "single" | "inline" | "multi" | "single" | -| code | string | -- | -| expanded | boolean | false | -| hideCopyButton | boolean | false | -| wrapText | boolean | false | -| light | boolean | false | -| skeleton | boolean | false | -| copyButtonDescription | string | -- | -| copyLabel | string | -- | -| feedback | string | "Copied!" | -| feedbackTimeout | number | 2000 | -| showLessText | string | "Show less" | -| showMoreText | string | "Show more" | -| showMoreLess | boolean | false | -| id | string | -- | -| ref | null | HTMLPreElement | null | +| Prop name | Type | Default value | Description | +| :----------------------------------------------------------------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------- | +| type | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | string | -- | Set the code snippet text | +| Alternatively, use the default slot (e.g. {`code`}) | +| expanded | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| hideCopyButton | boolean | false | Set to `true` to hide the copy button | +| wrapText | boolean | false | Set to `true` to wrap the text | +| Note that `type` must be "multi" | +| light | boolean | false | Set to `true` to enable the light variant | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon | +| copyLabel | string | -- | Specify the ARIA label of the copy button | +| feedback | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | string | "Show less" | Specify the show less text | +| `type` must be "multi" | +| showMoreText | string | "Show more" | Specify the show more text | +| `type` must be "multi" | +| showMoreLess | boolean | false | Set to `true` to enable the show more/less button | +| id | string | -- | Set an id for the code element | +| ref | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | ### Slots @@ -681,9 +688,9 @@ import { CodeSnippetSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :--------------------------------------------------- | :------------ | -| type | "single" | "inline" | "multi" | "single" | +| Prop name | Type | Default value | Description | +| :-------- | :--------------------------------------------------- | :------------ | :--------------------------- | +| type | "single" | "inline" | "multi" | "single" | Set the type of code snippet | ### Slots @@ -725,18 +732,19 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` -| Prop name | Type | Default value | -| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | -| as | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | -| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | -| sm | ColumnBreakpoint | -- | -| md | ColumnBreakpoint | -- | -| lg | ColumnBreakpoint | -- | -| xlg | ColumnBreakpoint | -- | -| max | ColumnBreakpoint | -- | +| Prop name | Type | Default value | Description | +| :------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element | +| Props are destructured as `props` in the default slot (e.g.
...
) | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | +| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | +| sm | ColumnBreakpoint | -- | Set the small breakpoint | +| md | ColumnBreakpoint | -- | Set the medium breakpoint | +| lg | ColumnBreakpoint | -- | Set the large breakpoint | +| xlg | ColumnBreakpoint | -- | Set the extra large breakpoint | +| max | ColumnBreakpoint | -- | Set the maximum breakpoint | ### Slots @@ -771,26 +779,26 @@ interface ComboBoxItem { } ``` -| Prop name | Type | Default value | -| :--------------- | :---------------------------------------------------------- | :------------ | -| items | ComboBoxItem[] | -- | -| itemToString | (item: ComboBoxItem) => string | -- | -| selectedIndex | number | -- | -| value | string | "" | -| size | "sm" | "xl" | -- | -| disabled | boolean | false | -| titleText | string | "" | -| placeholder | string | "" | -| helperText | string | "" | -| invalidText | string | "" | -| invalid | boolean | false | -| light | boolean | false | -| open | boolean | false | -| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | -| translateWithId | (id: any) => string | -- | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :--------------- | :---------------------------------------------------------- | :------------ | :----------------------------------------------------------------------- | +| items | ComboBoxItem[] | -- | Set the combobox items | +| itemToString | (item: ComboBoxItem) => string | -- | Override the display of a combobox item | +| selectedIndex | number | -- | Set the selected item by value index | +| value | string | "" | Specify the selected combobox value | +| size | "sm" | "xl" | -- | Set the size of the combobox | +| disabled | boolean | false | Set to `true` to disable the combobox | +| titleText | string | "" | Specify the title text of the combobox | +| placeholder | string | "" | Specify the placeholder text | +| helperText | string | "" | Specify the helper text | +| invalidText | string | "" | Specify the invalid state text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| light | boolean | false | Set to `true` to enable the light variant | +| open | boolean | false | Set to `true` to open the combobox menu dropdown | +| shouldFilterItem | (item: ComboBoxItem, value: string) => boolean | -- | Determine if an item should be filtered given the current combobox value | +| translateWithId | (id: any) => string | -- | Override the default translation ids | +| id | string | -- | Set an id for the list box component | +| name | string | -- | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -819,15 +827,15 @@ import { ComposedModal } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------------------- | :---------------------------------------- | :--------------------------- | -| size | "xs" | "sm" | "lg" | -- | -| open | boolean | false | -| danger | boolean | false | -| preventCloseOnClickOutside | boolean | false | -| containerClass | string | "" | -| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :------------------------- | :---------------------------------------- | :--------------------------- | :-------------------------------------------------------------------- | +| size | "xs" | "sm" | "lg" | -- | Set the size of the composed modal | +| open | boolean | false | Set to `true` to open the modal | +| danger | boolean | false | Set to `true` to use the danger variant | +| preventCloseOnClickOutside | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| containerClass | string | "" | Specify a class for the inner modal | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| ref | null | HTMLElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -859,9 +867,9 @@ import { Content } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------- | -| id | string | "main-content" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------- | :---------------------------------- | +| id | string | "main-content" | Specify the id for the main element | ### Slots @@ -887,11 +895,11 @@ import { ContentSwitcher } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :---------------------------- | :------------ | -| selectedIndex | number | 0 | -| light | boolean | false | -| size | "sm" | "xl" | -- | +| Prop name | Type | Default value | Description | +| :------------ | :---------------------------- | :------------ | :---------------------------------------- | +| selectedIndex | number | 0 | Set the selected index of the switch item | +| light | boolean | false | Set to `true` to enable the light variant | +| size | "sm" | "xl" | -- | Specify the size of the content switcher | ### Slots @@ -920,11 +928,11 @@ import { Copy } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :----------------------------------------- | :------------ | -| feedback | string | "Copied!" | -| feedbackTimeout | number | 2000 | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :-------------- | :----------------------------------------- | :------------ | :----------------------------------------------------- | +| feedback | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | number | 2000 | Set the timeout duration (ms) to display feedback text | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -951,9 +959,9 @@ import { CopyButton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------ | :------------------ | -| iconDescription | string | "Copy to clipboard" | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------ | :------------------ | :----------------------------------------------- | +| iconDescription | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | ### Slots @@ -980,16 +988,17 @@ import { DataTable } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :-------------------------------------------------- | :------------ | -| headers | {key: string; value: string;}[] | -- | -| rows | Object[] | -- | -| size | "compact" | "short" | "tall" | -- | -| title | string | "" | -| description | string | "" | -| zebra | boolean | false | -| sortable | boolean | false | -| stickyHeader | boolean | false | +| Prop name | Type | Default value | Description | +| :------------------------------------------------- | :-------------------------------------------------- | :------------ | :-------------------------------------------- | +| headers | {key: string; value: string;}[] | -- | Specify the data table headers | +| rows | Object[] | -- | Specify the rows the data table should render | +| keys defined in `headers` are used for the row ids | +| size | "compact" | "short" | "tall" | -- | Set the size of the data table | +| title | string | "" | Specify the title of the data table | +| description | string | "" | Specify the description of the data table | +| zebra | boolean | false | Set to `true` to use zebra styles | +| sortable | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -1018,15 +1027,16 @@ import { DataTableSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :-------------------------------------------------- | :------------ | -| columns | number | 5 | -| rows | number | 5 | -| size | "compact" | "short" | "tall" | -- | -| zebra | boolean | false | -| showHeader | boolean | true | -| headers | string[] | -- | -| showToolbar | boolean | true | +| Prop name | Type | Default value | Description | +| :-------------------------------------------------- | :-------------------------------------------------- | :------------ | :-------------------------------------------------------- | +| columns | number | 5 | Specify the number of columns | +| rows | number | 5 | Specify the number of rows | +| size | "compact" | "short" | "tall" | -- | Set the size of the data table | +| zebra | boolean | false | Set to `true` to apply zebra styles to the datatable rows | +| showHeader | boolean | true | Set to `false` to hide the header | +| headers | string[] | -- | Set the column headers | +| If `headers` has one more items, `count` is ignored | +| showToolbar | boolean | true | Set to `false` to hide the toolbar | ### Slots @@ -1055,18 +1065,18 @@ import { DatePicker } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------- | :--------------------------------------------------- | :------------ | -| datePickerType | "simple" | "single" | "range" | "simple" | -| value | string | "" | -| appendTo | HTMLElement | -- | -| dateFormat | string | "m/d/Y" | -| maxDate | null | string | Date | null | -| minDate | null | string | Date | null | -| locale | string | "en" | -| short | boolean | false | -| light | boolean | false | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :------------- | :--------------------------------------------------- | :------------ | :-------------------------------------------- | +| datePickerType | "simple" | "single" | "range" | "simple" | Specify the date picker type | +| value | string | "" | Specify the date picker input value | +| appendTo | HTMLElement | -- | Specify the element to append the calendar to | +| dateFormat | string | "m/d/Y" | Specify the date format | +| maxDate | null | string | Date | null | Specify the maximum date | +| minDate | null | string | Date | null | Specify the minimum date | +| locale | string | "en" | Specify the locale | +| short | boolean | false | Set to `true` to use the short variant | +| light | boolean | false | Set to `true` to enable the light variant | +| id | string | -- | Set an id for the date picker element | ### Slots @@ -1095,21 +1105,21 @@ import { DatePickerInput } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :---------------------------------------- | :----------------------------- | -| size | "sm" | "xl" | -- | -| type | string | "text" | -| placeholder | string | "" | -| pattern | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | -| disabled | boolean | false | -| iconDescription | string | "" | -| id | string | -- | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| name | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :-------------- | :---------------------------------------- | :----------------------------- | :------------------------------------------------- | +| size | "sm" | "xl" | -- | Set the size of the input | +| type | string | "text" | Specify the input type | +| placeholder | string | "" | Specify the input placeholder text | +| pattern | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | +| disabled | boolean | false | Set to `true` to disable the input | +| iconDescription | string | "" | Specify the ARIA label for the calendar icon | +| id | string | -- | Set an id for the input element | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| name | string | -- | Set a name for the input element | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1137,10 +1147,10 @@ import { DatePickerSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| range | boolean | false | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------- | +| range | boolean | false | Set to `true` to use the range variant | +| id | string | -- | Set an id to be used by the label element | ### Slots @@ -1182,26 +1192,26 @@ interface DropdownItem { } ``` -| Prop name | Type | Default value | -| :-------------- | :------------------------------------------ | :------------ | -| items | DropdownItem[] | -- | -| itemToString | (item: DropdownItem) => string | -- | -| selectedIndex | number | -- | -| type | "default" | "inline" | "default" | -| size | "sm" | "lg" | "xl" | -- | -| open | boolean | false | -| inline | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| titleText | string | "" | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | -- | -| translateWithId | (id: any) => string | -- | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------------------------------ | :------------ | :-------------------------------------------- | +| items | DropdownItem[] | -- | Set the dropdown items | +| itemToString | (item: DropdownItem) => string | -- | Override the display of a dropdown item | +| selectedIndex | number | -- | Specify the selected item index | +| type | "default" | "inline" | "default" | Specify the type of dropdown | +| size | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field | +| open | boolean | false | Set to `true` to open the dropdown | +| inline | boolean | false | Set to `true` to use the inline variant | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the dropdown | +| titleText | string | "" | Specify the title text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| helperText | string | "" | Specify the helper text | +| label | string | -- | Specify the list box label | +| translateWithId | (id: any) => string | -- | Override the default translation ids | +| id | string | -- | Set an id for the list box component | +| name | string | -- | Specify a name attribute for the list box | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -1227,9 +1237,9 @@ import { DropdownSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| inline | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------- | +| inline | boolean | false | Set to `true` to use the inline variant | ### Slots @@ -1258,17 +1268,17 @@ import { ExpandableTile } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------------- | :----------------------------------- | :-------------------------- | -| expanded | boolean | false | -| light | boolean | false | -| tileMaxHeight | number | 0 | -| tilePadding | number | 0 | -| tileCollapsedIconText | string | "Interact to expand Tile" | -| tileExpandedIconText | string | "Interact to collapse Tile" | -| tabindex | string | "0" | -| id | string | -- | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :-------------------- | :----------------------------------- | :-------------------------- | :---------------------------------------------------- | +| expanded | boolean | false | Set to `true` to expand the tile | +| light | boolean | false | Set to `true` to enable the light variant | +| tileMaxHeight | number | 0 | Specify the max height of the tile (number of pixels) | +| tilePadding | number | 0 | Specify the padding of the tile (number of pixels) | +| tileCollapsedIconText | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | +| tileExpandedIconText | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | +| tabindex | string | "0" | Specify the tabindex | +| id | string | -- | Set an id for the top-level div element | +| ref | null | HTMLElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1299,19 +1309,19 @@ import { FileUploader } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- | -| status | "uploading" | "edit" | "complete" | "uploading" | -| accept | string[] | -- | -| files | string[] | -- | -| multiple | boolean | false | -| clearFiles (`constant`) | () => any | -- | -| labelDescription | string | "" | -| labelTitle | string | "" | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| buttonLabel | string | "" | -| iconDescription | string | "Provide icon description" | -| name | string | "" | +| Prop name | Type | Default value | Description | +| :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- | :-------------------------------------------------------------------- | +| status | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| accept | string[] | -- | Specify the accepted file types | +| files | string[] | -- | Obtain the uploaded file names | +| multiple | boolean | false | Set to `true` to allow multiple files | +| clearFiles (`constant`) | () => any | -- | Override the default behavior of clearing the array of uploaded files | +| labelDescription | string | "" | Specify the label description | +| labelTitle | string | "" | Specify the label title | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| buttonLabel | string | "" | Specify the button label | +| iconDescription | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | string | "" | Specify a name attribute for the file button uploader input | ### Slots @@ -1343,19 +1353,19 @@ import { FileUploaderButton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | -| accept | string[] | -- | -| multiple | boolean | false | -| disabled | boolean | false | -| disableLabelChanges | boolean | false | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | -| labelText | string | "Add file" | -| role | string | "button" | -| tabindex | string | "0" | -| id | string | -- | -| name | string | "" | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :------------------ | :----------------------------------------------------------------------------------------- | :------------ | :------------------------------------------- | +| accept | string[] | -- | Specify the accepted file types | +| multiple | boolean | false | Set to `true` to allow multiple files | +| disabled | boolean | false | Set to `true` to disable the input | +| disableLabelChanges | boolean | false | Set to `true` to disable label changes | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| labelText | string | "Add file" | Specify the label text | +| role | string | "button" | Specify the label role | +| tabindex | string | "0" | Specify `tabindex` attribute | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1389,18 +1399,19 @@ import { FileUploaderDropContainer } from "carbon-components-svelte"; type Files = string[]; ``` -| Prop name | Type | Default value | -| :------------ | :---------------------------------------- | :------------ | -| accept | string[] | -- | -| multiple | boolean | false | -| validateFiles | (files: Files) => Files | -- | -| labelText | string | "Add file" | -| role | string | "button" | -| disabled | boolean | false | -| tabindex | string | "0" | -| id | string | -- | -| name | string | "" | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :------------------------------------------- | :---------------------------------------- | :------------ | :--------------------------------------------------------- | +| accept | string[] | -- | Specify the accepted file types | +| multiple | boolean | false | Set to `true` to allow multiple files | +| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files | +| The default behavior does not validate files | +| labelText | string | "Add file" | Specify the label text | +| role | string | "button" | Specify the `role` attribute of the drop container | +| disabled | boolean | false | Set to `true` to disable the input | +| tabindex | string | "0" | Specify `tabindex` attribute | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1431,15 +1442,15 @@ import { FileUploaderItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------------------------------------------- | :------------ | -| status | "uploading" | "edit" | "complete" | "uploading" | -| iconDescription | string | "" | -| invalid | boolean | false | -| errorSubject | string | "" | -| errorBody | string | "" | -| id | string | -- | -| name | string | "" | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------------------------------------------- | :------------ | :----------------------------------------------- | +| status | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| iconDescription | string | "" | Specify the ARIA label used for the status icons | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| errorSubject | string | "" | Specify the error subject text | +| errorBody | string | "" | Specify the error body text | +| id | string | -- | Set an id for the top-level element | +| name | string | "" | Specify the file uploader name | ### Slots @@ -1496,11 +1507,11 @@ import { Filename } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------------------------------------------- | :------------ | -| status | "uploading" | "edit" | "complete" | "uploading" | -| iconDescription | string | "" | -| invalid | boolean | false | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------------------------------------------- | :------------ | :----------------------------------------------- | +| status | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status | +| iconDescription | string | "" | Specify the ARIA label used for the status icons | +| invalid | boolean | false | Set to `true` to indicate an invalid state | ### Slots @@ -1583,12 +1594,12 @@ import { FormGroup } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------- | :------------ | -| invalid | boolean | false | -| message | boolean | false | -| messageText | string | "" | -| legendText | string | "" | +| Prop name | Type | Default value | Description | +| :---------- | :------------------- | :------------ | :----------------------------------------- | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| message | boolean | false | Set to `true` to render a form requirement | +| messageText | string | "" | Specify the message text | +| legendText | string | "" | Specify the legend text | ### Slots @@ -1646,9 +1657,9 @@ import { FormLabel } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :---------------------------------------- | +| id | string | -- | Set an id to be used by the label element | ### Slots @@ -1677,15 +1688,16 @@ import { Grid } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :------------------- | :------------ | -| as | boolean | false | -| condensed | boolean | false | -| narrow | boolean | false | -| fullWidth | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | +| Prop name | Type | Default value | Description | +| :------------------------------------------------------------------------------------------------------------------ | :------------------- | :------------ | :-------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element | +| Props are destructured as `props` in the default slot (e.g.
...
) | +| condensed | boolean | false | Set to `true` to use the condensed variant | +| narrow | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -1711,15 +1723,16 @@ import { Header } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------------- | :----------------------------------------- | :------------ | -| expandedByDefault | boolean | true | -| isSideNavOpen | boolean | false | -| uiShellAriaLabel | string | -- | -| href | string | -- | -| company | string | -- | -| platformName | string | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :----------------------------------------------------------------------------------- | :----------------------------------------- | :------------ | :--------------------------------------------- | +| expandedByDefault | boolean | true | Set to `false` to hide the side nav by default | +| isSideNavOpen | boolean | false | Set to `true` to open the side nav | +| uiShellAriaLabel | string | -- | Specify the ARIA label for the header | +| href | string | -- | Specify the `href` attribute | +| company | string | -- | Specify the company name | +| platformName | string | -- | Specify the platform name | +| Alternatively, use the named slot "platform" (e.g. ...) | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1745,12 +1758,13 @@ import { HeaderAction } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | -| isOpen | boolean | false | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | -| text | string | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | +| isOpen | boolean | false | Set to `true` to open the panel | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | +| text | string | -- | Specify the text | +| Alternatively, use the named slot "text" (e.g.
...
) | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -1776,12 +1790,12 @@ import { HeaderActionLink } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | -| linkIsActive | boolean | false | -| href | string | -- | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | +| linkIsActive | boolean | false | Set to `true` to use the active state | +| href | string | -- | Specify the `href` attribute | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1807,9 +1821,9 @@ import { HeaderActionSearch } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------- | :------------------- | :------------ | -| searchIsActive | boolean | false | +| Prop name | Type | Default value | Description | +| :------------- | :------------------- | :------------ | :-------------------------------- | +| searchIsActive | boolean | false | Set to `true` to focus the search | ### Slots @@ -1837,11 +1851,11 @@ import { HeaderGlobalAction } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------------------------------------------------------ | :------------ | -| isActive | boolean | false | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :------------------------------------------------------------------ | :------------ | :-------------------------------------------- | +| isActive | boolean | false | Set to `true` to use the active variant | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon to render | +| ref | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | ### Slots @@ -1867,9 +1881,9 @@ import { HeaderNav } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| ariaLabel | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :--------------------------------- | +| ariaLabel | string | -- | Specify the ARIA label for the nav | ### Slots @@ -1895,11 +1909,11 @@ import { HeaderNavItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :----------------------------------------- | :------------ | -| href | string | -- | -| text | string | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :----------------------------------------- | :------------ | :-------------------------------------------- | +| href | string | -- | Specify the `href` attribute | +| text | string | -- | Specify the text | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1932,13 +1946,13 @@ import { HeaderNavMenu } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :----------------------------------------- | :---------------- | -| expanded | boolean | false | -| href | string | "/" | -| text | string | -- | -| ref | null | HTMLAnchorElement | null | -| iconDescription | string | "Expand/Collapse" | +| Prop name | Type | Default value | Description | +| :-------------- | :----------------------------------------- | :---------------- | :-------------------------------------------- | +| expanded | boolean | false | Set to `true` to toggle the expanded state | +| href | string | "/" | Specify the `href` attribute | +| text | string | -- | Specify the text | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| iconDescription | string | "Expand/Collapse" | Specify the ARIA label for the chevron icon | ### Slots @@ -1997,10 +2011,10 @@ import { HeaderPanelLink } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :----------------------------------------- | :------------ | -| href | string | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :----------------------------------------- | :------------ | :-------------------------------------------- | +| href | string | -- | Specify the `href` attribute | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -2078,10 +2092,11 @@ import { Icon } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------------------------------------------------------ | :------------ | -| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| skeleton | boolean | false | +| Prop name | Type | Default value | Description | +| :---------------------------------------------- | :------------------------------------------------------------------ | :------------ | :---------------------------------------------------- | +| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | +| Icon size must be 16px (e.g. `Add16`, `Task16`) | +| skeleton | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -2110,9 +2125,9 @@ import { IconSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| size | number | 16 | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :----------------------- | +| size | number | 16 | Set the size of the icon | ### Slots @@ -2141,12 +2156,12 @@ import { InlineLoading } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :----------------------------------------------------------------------- | :------------ | -| status | "active" | "inactive" | "finished" | "error" | "active" | -| description | string | -- | -| iconDescription | string | -- | -| successDelay | number | 1500 | +| Prop name | Type | Default value | Description | +| :-------------- | :----------------------------------------------------------------------- | :------------ | :---------------------------------------------------------------- | +| status | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | +| description | string | -- | Set the loading description | +| iconDescription | string | -- | Specify the ARIA label for the loading icon | +| successDelay | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | ### Slots @@ -2175,17 +2190,17 @@ import { InlineNotification } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| notificationType | "toast" | "inline" | "inline" | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| lowContrast | boolean | false | -| timeout | number | 0 | -| role | string | "alert" | -| title | string | "Title" | -| subtitle | string | "" | -| hideCloseButton | boolean | false | -| iconDescription | string | "Closes notification" | +| Prop name | Type | Default value | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | :---------------------------------------------------------------------- | +| notificationType | "toast" | "inline" | "inline" | Set the type of notification | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | boolean | false | Set to `true` to use the low contrast variant | +| timeout | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | string | "alert" | Set the `role` attribute | +| title | string | "Title" | Specify the title text | +| subtitle | string | "" | Specify the subtitle text | +| hideCloseButton | boolean | false | Set to `true` to hide the close button | +| iconDescription | string | "Closes notification" | Specify the ARIA label for the icon | ### Slots @@ -2214,13 +2229,13 @@ import { Link } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :--------------------------------------------------------------------- | :------------ | -| href | string | -- | -| inline | boolean | false | -| disabled | boolean | false | -| visited | boolean | false | -| ref | null | HTMLAnchorElement | HTMLParagraphElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :--------------------------------------------------------------------- | :------------ | :----------------------------------------------- | +| href | string | -- | Specify the href value | +| inline | boolean | false | Set to `true` to use the inline variant | +| disabled | boolean | false | Set to `true` to disable the checkbox | +| visited | boolean | false | Set to `true` to allow visited styles | +| ref | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -2249,15 +2264,15 @@ import { ListBox } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------------------------- | :------------ | -| size | "sm" | "xl" | -- | -| type | "default" | "inline" | "default" | -| open | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | +| Prop name | Type | Default value | Description | +| :---------- | :------------------------------------- | :------------ | :----------------------------------------- | +| size | "sm" | "xl" | -- | Set the size of the list box | +| type | "default" | "inline" | "default" | Set the type of the list box | +| open | boolean | false | Set to `true` to open the list box | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the list box | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | ### Slots @@ -2290,15 +2305,15 @@ import { ListBoxField } from "carbon-components-svelte"; type ListBoxFieldTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | -| :-------------------------- | :----------------------------------------------------- | :------------------------------- | -| disabled | boolean | false | -| role | string | "combobox" | -| tabindex | string | "-1" | -| translationIds (`constant`) | { close: "close"; open: "open"; } | { close: "close", open: "open" } | -| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | -| id | string | -- | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :-------------------------- | :----------------------------------------------------- | :------------------------------- | :----------------------------------------------- | +| disabled | boolean | false | Set to `true` to disable the list box field | +| role | string | "combobox" | Specify the role attribute | +| tabindex | string | "-1" | Specify the tabindex | +| translationIds (`constant`) | { close: "close"; open: "open"; } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | (id: ListBoxFieldTranslationId) => string | -- | Override the default translation ids | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -2329,10 +2344,10 @@ import { ListBoxMenu } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------------- | :------------ | -| id | string | -- | -| ref | null | HTMLDivElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------------- | :------------ | :------------------------------------------- | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLDivElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2364,11 +2379,11 @@ import { ListBoxMenuIcon } from "carbon-components-svelte"; type ListBoxMenuIconTranslationId = "close" | "open"; ``` -| Prop name | Type | Default value | -| :-------------------------- | :-------------------------------------------------------- | :------------------------------- | -| open | boolean | false | -| translationIds (`constant`) | { close: "close"; open: "open" } | { close: "close", open: "open" } | -| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | +| Prop name | Type | Default value | Description | +| :-------------------------- | :-------------------------------------------------------- | :------------------------------- | :------------------------------------------- | +| open | boolean | false | Set to `true` to open the list box menu icon | +| translationIds (`constant`) | { close: "close"; open: "open" } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | (id: ListBoxMenuIconTranslationId) => string | -- | Override the default translation ids | ### Slots @@ -2394,10 +2409,10 @@ import { ListBoxMenuItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------- | :------------ | -| active | boolean | false | -| highlighted | boolean | false | +| Prop name | Type | Default value | Description | +| :---------- | :------------------- | :------------ | :-------------------------------------------- | +| active | boolean | false | Set to `true` to enable the active state | +| highlighted | boolean | false | Set to `true` to enable the highlighted state | ### Slots @@ -2431,13 +2446,13 @@ import { ListBoxSelection } from "carbon-components-svelte"; type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ``` -| Prop name | Type | Default value | -| :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- | -| selectionCount | any | -- | -| disabled | boolean | false | -| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | { clearAll: "clearAll", clearSelection: "clearSelection", } | -| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- | :----------------------------------------------- | +| selectionCount | any | -- | Specify the number of selected items | +| disabled | boolean | false | Set to `true` to disable the list box selection | +| translationIds (`constant`) | { clearAll: "clearAll"; clearSelection: "clearSelection" } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | +| translateWithId | (id: ListBoxSelectionTranslationId) => string | -- | Override the default translation ids | +| ref | null | HTMLElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -2492,13 +2507,13 @@ import { Loading } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------- | :------------------------- | -| small | boolean | false | -| active | boolean | true | -| withOverlay | boolean | true | -| description | string | "Active loading indicator" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :---------- | :------------------- | :------------------------- | :----------------------------------------- | +| small | boolean | false | Set to `true` to use the small variant | +| active | boolean | true | Set to `false` to disable the active state | +| withOverlay | boolean | true | Set to `false` to disable the overlay | +| description | string | "Active loading indicator" | Specify the label description | +| id | string | -- | Set an id for the label element | ### Slots @@ -2524,27 +2539,27 @@ import { Modal } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------------------- | :---------------------------------------- | :--------------------------- | -| size | "xs" | "sm" | "lg" | -- | -| open | boolean | false | -| danger | boolean | false | -| alert | 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]" | -| preventCloseOnClickOutside | boolean | false | -| id | string | -- | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :------------------------- | :---------------------------------------- | :--------------------------- | :------------------------------------------------------------------------- | +| size | "xs" | "sm" | "lg" | -- | Set the size of the modal | +| open | boolean | false | Set to `true` to open the modal | +| danger | boolean | false | Set to `true` to use the danger variant | +| alert | boolean | false | Set to `true` to enable alert mode | +| passiveModal | boolean | false | Set to `true` to use the passive variant | +| modalHeading | string | -- | Specify the modal heading | +| modalLabel | string | -- | Specify the modal label | +| modalAriaLabel | string | -- | Specify the ARIA label for the modal | +| iconDescription | string | "Close the modal" | Specify the ARIA label for the close icon | +| hasForm | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | boolean | false | Set to `true` if the modal contains scrolling content | +| primaryButtonText | string | "" | Specify the primary button text | +| primaryButtonDisabled | boolean | false | Set to `true` to disable the primary button | +| shouldSubmitOnEnter | boolean | true | Set to `true` for the primary button to be triggered when pressing "Enter" | +| secondaryButtonText | string | "" | Specify the secondary button text | +| selectorPrimaryFocus | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| preventCloseOnClickOutside | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -2577,10 +2592,10 @@ import { ModalBody } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------------ | :------------------- | :------------ | -| hasForm | boolean | false | -| hasScrollingContent | boolean | false | +| Prop name | Type | Default value | Description | +| :------------------ | :------------------- | :------------ | :---------------------------------------------------- | +| hasForm | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | boolean | false | Set to `true` if the modal contains scrolling content | ### Slots @@ -2606,14 +2621,14 @@ import { ModalFooter } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------------- | :------------------- | :------------ | -| primaryButtonText | string | "" | -| primaryButtonDisabled | boolean | false | -| primaryClass | string | -- | -| secondaryButtonText | string | "" | -| secondaryClass | string | -- | -| danger | boolean | false | +| Prop name | Type | Default value | Description | +| :-------------------- | :------------------- | :------------ | :------------------------------------------ | +| primaryButtonText | string | "" | Specify the primary button text | +| primaryButtonDisabled | boolean | false | Set to `true` to disable the primary button | +| primaryClass | string | -- | Specify a class for the primary button | +| secondaryButtonText | string | "" | Specify the secondary button text | +| secondaryClass | string | -- | Specify a class for the secondary button | +| danger | boolean | false | Set to `true` to use the danger variant | ### Slots @@ -2639,15 +2654,15 @@ import { ModalHeader } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------ | :------------ | -| title | string | "" | -| label | string | "" | -| labelClass | string | "" | -| titleClass | string | "" | -| closeClass | string | "" | -| closeIconClass | string | "" | -| iconDescription | string | "Close" | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------ | :------------ | :---------------------------------------- | +| title | string | "" | Specify the modal title | +| label | string | "" | Specify the modal label | +| labelClass | string | "" | Specify the label class | +| titleClass | string | "" | Specify the title class | +| closeClass | string | "" | Specify the close class | +| closeIconClass | string | "" | Specify the close icon class | +| iconDescription | string | "Close" | Specify the ARIA label for the close icon | ### Slots @@ -2686,32 +2701,34 @@ interface MultiSelectItem { } ``` -| Prop name | Type | Default value | -| :---------------- | :----------------------------------------------------------------------- | :----------------- | -| items | MultiSelectItem[] | -- | -| itemToString | (item: MultiSelectItem) => string | -- | -| selectedIds | MultiSelectItemId[] | -- | -| value | string | "" | -| size | "sm" | "lg" | "xl" | -- | -| type | "default" | "inline" | "default" | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | -| disabled | boolean | false | -| filterable | boolean | false | -| filterItem | (item: MultiSelectItem, value: string) => string | -- | -| open | boolean | false | -| light | boolean | false | -| locale | string | "en" | -| placeholder | string | "" | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | -| translateWithId | (id: any) => string | -- | -| titleText | string | "" | -| useTitleInItem | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | "" | -| id | string | -- | -| name | string | -- | +| Prop name | Type | Default value | Description | +| :-------------------------------------------------- | :----------------------------------------------------------------------- | :----------------- | :--------------------------------------------------------------- | +| items | MultiSelectItem[] | -- | Set the multiselect items | +| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item | +| selectedIds | MultiSelectItemId[] | -- | Set the selected ids | +| value | string | "" | Specify the multiselect value | +| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox | +| type | "default" | "inline" | "default" | Specify the type of multiselect | +| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | boolean | false | Set to `true` to disable the dropdown | +| filterable | boolean | false | Set to `true` to filter items | +| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic | +| The default filtering is an exact string comparison | +| open | boolean | false | Set to `true` to open the dropdown | +| light | boolean | false | Set to `true` to enable the light variant | +| locale | string | "en" | Specify the locale | +| placeholder | string | "" | Specify the placeholder text | +| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic | +| The default sorting compare the item text value | +| translateWithId | (id: any) => string | -- | Override the default translation ids | +| titleText | string | "" | Specify the title text | +| useTitleInItem | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| helperText | string | "" | Specify the helper text | +| label | string | "" | Specify the list box label | +| id | string | -- | Set an id for the list box component | +| name | string | -- | Specify a name attribute for the select | ### Slots @@ -2768,12 +2785,12 @@ import { NotificationButton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :------------------------------------------------------------------ | :------------ | -| notificationType | "toast" | "inline" | "toast" | -| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| title | string | -- | -| iconDescription | string | "Close icon" | +| Prop name | Type | Default value | Description | +| :--------------- | :------------------------------------------------------------------ | :------------ | :---------------------------------------------------- | +| notificationType | "toast" | "inline" | "toast" | Set the type of notification | +| renderIcon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | +| title | string | -- | Specify the title of the icon | +| iconDescription | string | "Close icon" | Specify the ARIA label for the icon | ### Slots @@ -2802,11 +2819,11 @@ import { NotificationIcon } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| notificationType | "toast" | "inline" | "toast" | -| iconDescription | string | "Closes notification" | +| Prop name | Type | Default value | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | :------------------------------------ | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | +| notificationType | "toast" | "inline" | "toast" | Set the type of notification | +| iconDescription | string | "Closes notification" | Specify the ARIA label for the icon | ### Slots @@ -2832,12 +2849,12 @@ import { NotificationTextDetails } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :----------------------------------- | :------------ | -| notificationType | "toast" | "inline" | "toast" | -| title | string | "Title" | -| subtitle | string | "" | -| caption | string | "Caption" | +| Prop name | Type | Default value | Description | +| :--------------- | :----------------------------------- | :------------ | :--------------------------- | +| notificationType | "toast" | "inline" | "toast" | Set the type of notification | +| title | string | "Title" | Specify the title text | +| subtitle | string | "" | Specify the subtitle text | +| caption | string | "Caption" | Specify the caption text | ### Slots @@ -2869,29 +2886,29 @@ import { NumberInput } from "carbon-components-svelte"; type NumberInputTranslationId = "increment" | "decrement"; ``` -| Prop name | Type | Default value | -| :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- | -| size | "sm" | "xl" | -- | -| value | string | "" | -| step | number | 1 | -| max | number | -- | -| min | number | -- | -| light | boolean | false | -| readonly | boolean | false | -| mobile | boolean | false | -| allowEmpty | boolean | false | -| disabled | boolean | false | -| iconDescription | string | "" | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| label | string | "" | -| hideLabel | boolean | false | -| translateWithId | (id: NumberInputTranslationId) => string | -- | -| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- | :--------------------------------------------- | +| size | "sm" | "xl" | -- | Set the size of the input | +| value | string | "" | Specify the input value | +| step | number | 1 | Specify the step increment | +| max | number | -- | Specify the maximum value | +| min | number | -- | Specify the minimum value | +| light | boolean | false | Set to `true` to enable the light variant | +| readonly | boolean | false | Set to `true` for the input to be read-only | +| mobile | boolean | false | Set to `true` to enable the mobile variant | +| allowEmpty | boolean | false | Set to `true` to allow for an empty value | +| disabled | boolean | false | Set to `true` to disable the input | +| iconDescription | string | "" | Specify the ARIA label for the increment icons | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| helperText | string | "" | Specify the helper text | +| label | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | (id: NumberInputTranslationId) => string | -- | Override the default translation ids | +| translationIds (`constant`) | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2921,9 +2938,9 @@ import { NumberInputSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| hideLabel | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------- | +| hideLabel | boolean | false | Set to `true` to hide the label text | ### Slots @@ -2952,9 +2969,9 @@ import { OrderedList } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| nested | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------- | +| nested | boolean | false | Set to `true` to use the nested variant | ### Slots @@ -2983,17 +3000,17 @@ import { OverflowMenu } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :------------------------------------------------------------------ | :------------------------------- | -| direction | "top" | "bottom" | "bottom" | -| open | boolean | false | -| light | boolean | false | -| flipped | boolean | false | -| menuOptionsClass | string | -- | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| iconClass | string | -- | -| iconDescription | string | "Open and close list of options" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :--------------- | :------------------------------------------------------------------ | :------------------------------- | :---------------------------------------------------------------- | +| direction | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| open | boolean | false | Set to `true` to open the menu | +| light | boolean | false | Set to `true` to enable the light variant | +| flipped | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | string | -- | Specify the menu options class | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconClass | string | -- | Specify the icon class | +| iconDescription | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | string | -- | Set an id for the button element | ### Slots @@ -3023,17 +3040,18 @@ import { OverflowMenuItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :------------------------------------------------------------------ | :------------- | -| text | string | "Provide text" | -| href | string | "" | -| primaryFocus | boolean | false | -| disabled | boolean | false | -| hasDivider | boolean | false | -| danger | boolean | false | -| requireTitle | boolean | true | -| id | string | -- | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :------------------------------------------------------- | :------------------------------------------------------------------ | :------------- | :---------------------------------------------------------------- | +| text | string | "Provide text" | Specify the item text | +| Alternatively, use the default slot for a custom element | +| href | string | "" | Specify the `href` attribute if the item is a link | +| primaryFocus | boolean | false | Set to `true` if the item should be focused when opening the menu | +| disabled | boolean | false | Set to `true` to disable the item | +| hasDivider | boolean | false | Set to `true` to include a divider | +| danger | boolean | false | Set to `true` to use the danger variant | +| requireTitle | boolean | true | Set to `false` to omit the button `title` attribute | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -3060,24 +3078,24 @@ import { Pagination } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------------- | :--------------------------------------------------------------- | :---------------- | -| page | number | 1 | -| totalItems | number | 0 | -| disabled | boolean | false | -| forwardText | string | "Next page" | -| backwardText | string | "Previous page" | -| itemsPerPageText | string | "Items per page:" | -| itemText | (min: number, max: number) => string | -- | -| itemRangeText | (min: number, max: number, total: number) => string | -- | -| pageInputDisabled | boolean | false | -| pageSizeInputDisabled | boolean | false | -| pageSize | number | 10 | -| pageSizes | number[] | -- | -| pagesUnknown | boolean | false | -| pageText | (page: number) => string | -- | -| pageRangeText | (current: number, total: number) => string | -- | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------------------- | :--------------------------------------------------------------- | :---------------- | :----------------------------------------------- | +| page | number | 1 | Specify the current page index | +| totalItems | number | 0 | Specify the total number of items | +| disabled | boolean | false | Set to `true` to disable the pagination | +| forwardText | string | "Next page" | Specify the forward button text | +| backwardText | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | string | "Items per page:" | Specify the items per page text | +| itemText | (min: number, max: number) => string | -- | Override the item text | +| itemRangeText | (min: number, max: number, total: number) => string | -- | Override the item range text | +| pageInputDisabled | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | boolean | false | Set to `true` to disable the page size input | +| pageSize | number | 10 | Specify the number of items to display in a page | +| pageSizes | number[] | -- | Specify the available page sizes | +| pagesUnknown | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | (page: number) => string | -- | Override the page text | +| pageRangeText | (current: number, total: number) => string | -- | Override the page range text | +| id | string | -- | Set an id for the top-level element | ### Slots @@ -3103,14 +3121,14 @@ import { PaginationNav } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :------------------- | :-------------- | -| page | number | 0 | -| total | number | 10 | -| shown | number | 10 | -| loop | boolean | false | -| forwardText | string | "Next page" | -| backwardText | string | "Previous page" | +| Prop name | Type | Default value | Description | +| :----------- | :------------------- | :-------------- | :---------------------------------------- | +| page | number | 0 | Specify the current page index | +| total | number | 10 | Specify the total number of pages | +| shown | number | 10 | Specify the total number of pages to show | +| loop | boolean | false | Set to `true` to loop the navigation | +| forwardText | string | "Next page" | Specify the forward button text | +| backwardText | string | "Previous page" | Specify the backward button text | ### Slots @@ -3167,26 +3185,26 @@ import { PasswordInput } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------------- | :-------------------------------------------------------------- | :-------------- | -| size | "sm" | "xl" | -- | -| value | string | "" | -| type | string | "password" | -| placeholder | string | "" | -| hidePasswordLabel | string | "Hide password" | -| showPasswordLabel | string | "Show password" | -| tooltipAlignment | "start" | "center" | "end" | -- | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :---------------- | :-------------------------------------------------------------- | :-------------- | :---------------------------------------------------- | +| size | "sm" | "xl" | -- | Set the size of the input | +| value | string | "" | Specify the input value | +| type | string | "password" | Specify the input type | +| placeholder | string | "" | Specify the placeholder text | +| hidePasswordLabel | string | "Hide password" | Specify the hide password label text | +| showPasswordLabel | string | "Show password" | Specify the show password label text | +| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the input | +| helperText | string | "" | Specify the helper text | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the text for the invalid state | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3220,11 +3238,11 @@ import { ProgressIndicator } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :------------------- | :------------ | -| currentIndex | number | 0 | -| vertical | boolean | false | -| spaceEqually | boolean | false | +| Prop name | Type | Default value | Description | +| :----------- | :------------------- | :------------ | :--------------------------------------------------------------------------------------------- | +| currentIndex | number | 0 | Specify the current step index | +| vertical | boolean | false | Set to `true` to use the vertical variant | +| spaceEqually | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div | ### Slots @@ -3253,10 +3271,10 @@ import { ProgressIndicatorSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| vertical | boolean | false | -| count | number | 4 | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------- | +| vertical | boolean | false | Set to `true` to use the vertical variant | +| count | number | 4 | Specify the number of steps to render | ### Slots @@ -3285,16 +3303,16 @@ import { ProgressStep } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------- | :------------------- | :------------ | -| complete | boolean | false | -| current | boolean | false | -| disabled | boolean | false | -| invalid | boolean | false | -| description | string | "" | -| label | string | "" | -| secondaryLabel | string | "" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :------------- | :------------------- | :------------ | :----------------------------------------- | +| complete | boolean | false | Set to `true` for the complete variant | +| current | boolean | false | Set to `true` to use the current variant | +| disabled | boolean | false | Set to `true` to disable the progress step | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| description | string | "" | Specify the step description | +| label | string | "" | Specify the step label | +| secondaryLabel | string | "" | Specify the step secondary label | +| id | string | -- | Set an id for the top-level element | ### Slots @@ -3324,17 +3342,17 @@ import { RadioButton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :---------------------------------------- | :------------ | -| value | string | "" | -| checked | boolean | false | -| disabled | boolean | false | -| labelPosition | "right" | "left" | "right" | -| labelText | string | "" | -| hideLabel | boolean | false | -| id | string | -- | -| name | string | "" | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :------------ | :---------------------------------------- | :------------ | :---------------------------------------------- | +| value | string | "" | Specify the value of the radio button | +| checked | boolean | false | Set to `true` to check the radio button | +| disabled | boolean | false | Set to `true` to disable the radio button | +| labelPosition | "right" | "left" | "right" | Specify the label position | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the checkbox input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3360,13 +3378,13 @@ import { RadioButtonGroup } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :------------------------------------------ | :------------ | -| selected | string | -- | -| disabled | boolean | false | -| labelPosition | "right" | "left" | "right" | -| orientation | "horizontal" | "vertical" | "horizontal" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :------------ | :------------------------------------------ | :------------ | :------------------------------------------- | +| selected | string | -- | Set the selected radio button value | +| disabled | boolean | false | Set to `true` to disable the radio buttons | +| labelPosition | "right" | "left" | "right" | Specify the label position | +| orientation | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | +| id | string | -- | Set an id for the container div element | ### Slots @@ -3424,15 +3442,15 @@ import { RadioTile } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------- | :--------------- | -| checked | boolean | false | -| light | boolean | false | -| value | string | "" | -| tabindex | string | "0" | -| iconDescription | string | "Tile checkmark" | -| id | string | -- | -| name | string | "" | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------- | :--------------- | :------------------------------------------------------- | +| checked | boolean | false | Set to `true` to check the tile | +| light | boolean | false | Set to `true` to enable the light variant | +| value | string | "" | Specify the value of the radio input | +| tabindex | string | "0" | Specify the tabindex | +| iconDescription | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | ### Slots @@ -3463,14 +3481,15 @@ import { Row } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------ | :------------------- | :------------ | -| as | boolean | false | -| condensed | boolean | false | -| narrow | boolean | false | -| noGutter | boolean | false | -| noGutterLeft | boolean | false | -| noGutterRight | boolean | false | +| Prop name | Type | Default value | Description | +| :------------------------------------------------------------------------------------------------------------------ | :------------------- | :------------ | :-------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element | +| Props are destructured as `props` in the default slot (e.g.
...
) | +| condensed | boolean | false | Set to `true` to use the condensed variant | +| narrow | boolean | false | Set to `true` to use the narrow variant | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -3496,22 +3515,22 @@ import { Search } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------------- | :---------------------------------------- | :------------------- | -| small | boolean | false | -| size | "sm" | "lg" | -- | -| skeleton | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| value | string | "" | -| type | string | "text" | -| placeholder | string | "Search..." | -| autocomplete | "on" | "off" | "off" | -| autofocus | boolean | false | -| closeButtonLabelText | string | "Clear search input" | -| labelText | string | "" | -| id | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :------------------- | :---------------------------------------- | :------------------- | :------------------------------------------------------ | +| small | boolean | false | Set to `true` to use the small variant | +| size | "sm" | "lg" | -- | Specify the size of the search input | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the search input | +| value | string | "" | Specify the value of the search input | +| type | string | "text" | Specify the `type` attribute of the search input | +| placeholder | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | string | "Clear search input" | Specify the close button label text | +| labelText | string | "" | Specify the label text | +| id | string | -- | Set an id for the input element | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3542,9 +3561,9 @@ import { SearchSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| small | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :------------------------------------- | +| small | boolean | false | Set to `true` to use the small variant | ### Slots @@ -3573,22 +3592,22 @@ import { Select } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :----------------------------------------- | :------------ | -| selected | string | -- | -| size | "sm" | "xl" | -- | -| inline | boolean | false | -| light | boolean | false | -| disabled | boolean | false | -| id | string | -- | -| name | string | -- | -| invalid | boolean | false | -| invalidText | string | "" | -| helperText | string | "" | -| noLabel | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| ref | null | HTMLSelectElement | null | +| Prop name | Type | Default value | Description | +| :---------- | :----------------------------------------- | :------------ | :---------------------------------------------- | +| selected | string | -- | Specify the selected item value | +| size | "sm" | "xl" | -- | Set the size of the select input | +| inline | boolean | false | Set to `true` to use the inline variant | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the select element | +| id | string | -- | Set an id for the select element | +| name | string | -- | Specify a name attribute for the select element | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| helperText | string | "" | Specify the helper text | +| noLabel | boolean | false | Set to `true` to not render a label | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| ref | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | ### Slots @@ -3614,12 +3633,12 @@ import { SelectItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| value | string | "" | -| text | string | "" | -| hidden | boolean | false | -| disabled | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------- | +| value | string | "" | Specify the option value | +| text | string | "" | Specify the option text | +| hidden | boolean | false | Set to `true` to hide the option | +| disabled | boolean | false | Set to `true` to disable the option | ### Slots @@ -3645,10 +3664,10 @@ import { SelectItemGroup } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :-------------- | -| disabled | boolean | false | -| label | string | "Provide label" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :-------------- | :-------------------------------------------------- | +| disabled | boolean | false | Set to `true` to disable the optgroup element | +| label | string | "Provide label" | Specify the label attribute of the optgroup element | ### Slots @@ -3674,9 +3693,9 @@ import { SelectSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| hideLabel | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------- | +| hideLabel | boolean | false | Set to `true` to hide the label text | ### Slots @@ -3705,17 +3724,17 @@ import { SelectableTile } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :---------------------------------------- | :--------------- | -| selected | boolean | false | -| light | boolean | false | -| title | string | "title" | -| value | string | "value" | -| tabindex | string | "0" | -| iconDescription | string | "Tile checkmark" | -| id | string | -- | -| name | string | "" | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :-------------- | :---------------------------------------- | :--------------- | :------------------------------------------------------------ | +| selected | boolean | false | Set to `true` to select the tile | +| light | boolean | false | Set to `true` to enable the light variant | +| title | string | "title" | Specify the title of the selectable tile | +| value | string | "value" | Specify the value of the selectable tile | +| tabindex | string | "0" | Specify the tabindex | +| iconDescription | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3745,11 +3764,11 @@ import { SideNav } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| fixed | boolean | false | -| ariaLabel | string | -- | -| isOpen | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------------- | +| fixed | boolean | false | Set to `true` to use the fixed variant | +| ariaLabel | string | -- | Specify the ARIA label for the nav | +| isOpen | boolean | false | Set to `true` to toggle the expanded state | ### Slots @@ -3801,13 +3820,13 @@ import { SideNavLink } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | -| isSelected | boolean | false | -| href | string | -- | -| text | string | -- | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | +| isSelected | boolean | false | Set to `true` to select the current link | +| href | string | -- | Specify the `href` attribute | +| text | string | -- | Specify the text | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -3833,12 +3852,12 @@ import { SideNavMenu } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | -| expanded | boolean | false | -| text | string | -- | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | +| expanded | boolean | false | Set to `true` to toggle the expanded state | +| text | string | -- | Specify the text | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | +| ref | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | ### Slots @@ -3864,12 +3883,12 @@ import { SideNavMenuItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------- | :----------------------------------------- | :------------ | -| isSelected | boolean | -- | -| href | string | -- | -| text | string | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :--------- | :----------------------------------------- | :------------ | :-------------------------------------------- | +| isSelected | boolean | -- | Set to `true` to select the item | +| href | string | -- | Specify the `href` attribute | +| text | string | -- | Specify the item text | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -3924,12 +3943,12 @@ import { SkeletonText } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| lines | number | 3 | -| heading | boolean | false | -| paragraph | boolean | false | -| width | string | "100%" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------------- | +| lines | number | 3 | Specify the number of lines to render | +| heading | boolean | false | Set to `true` to use the heading size variant | +| paragraph | boolean | false | Set to `true` to use the paragraph size variant | +| width | string | "100%" | Specify the width of the text (% or px) | ### Slots @@ -3958,10 +3977,10 @@ import { SkipToContent } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :-------------- | -| href | string | "#main-content" | -| tabindex | string | "0" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :-------------- | :--------------------------- | +| href | string | "#main-content" | Specify the `href` attribute | +| tabindex | string | "0" | Specify the tabindex | ### Slots @@ -3987,25 +4006,25 @@ import { Slider } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :------------- | :----------------------------------- | :------------ | -| value | number | 0 | -| max | number | 100 | -| maxLabel | string | "" | -| min | number | 0 | -| minLabel | string | "" | -| step | number | 1 | -| stepMultiplier | number | 4 | -| required | boolean | false | -| inputType | string | "number" | -| disabled | boolean | false | -| light | boolean | false | -| hideTextInput | boolean | false | -| id | string | -- | -| invalid | boolean | false | -| labelText | string | "" | -| name | string | "" | -| ref | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :------------- | :----------------------------------- | :------------ | :----------------------------------------- | +| value | number | 0 | Specify the value of the slider | +| max | number | 100 | Set the maximum slider value | +| maxLabel | string | "" | Specify the label for the max value | +| min | number | 0 | Set the minimum slider value | +| minLabel | string | "" | Specify the label for the min value | +| step | number | 1 | Set the step value | +| stepMultiplier | number | 4 | Set the step multiplier value | +| required | boolean | false | Set to `true` to require a value | +| inputType | string | "number" | Specify the input type | +| disabled | boolean | false | Set to `true` to disable the slider | +| light | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | boolean | false | Set to `true` to hide the text input | +| id | string | -- | Set an id for the slider div element | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| labelText | string | "" | Specify the label text | +| name | string | "" | Set a name for the slider element | +| ref | null | HTMLElement | null | Obtain a reference to the HTML element | ### Slots @@ -4034,9 +4053,9 @@ import { SliderSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| hideLabel | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------- | +| hideLabel | boolean | false | Set to `true` to hide the label text | ### Slots @@ -4065,11 +4084,11 @@ import { StructuredList } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| selected | string | -- | -| border | boolean | false | -| selection | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :--------------------------------------------- | +| selected | string | -- | Specify the selected structured list row value | +| border | boolean | false | Set to `true` to use the bordered variant | +| selection | boolean | false | Set to `true` to use the selection variant | ### Slots @@ -4127,10 +4146,10 @@ import { StructuredListCell } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| head | boolean | false | -| noWrap | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------- | +| head | boolean | false | Set to `true` to use as a header | +| noWrap | boolean | false | Set to `true` to prevent wrapping | ### Slots @@ -4188,14 +4207,14 @@ import { StructuredListInput } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :---------------------------------------- | :------------ | -| checked | boolean | false | -| title | string | "title" | -| value | string | "value" | -| id | string | -- | -| name | string | "" | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :-------- | :---------------------------------------- | :------------ | :------------------------------------------- | +| checked | boolean | false | Set to `true` to check the input | +| title | string | "title" | Specify the title of the input | +| value | string | "value" | Specify the value of the input | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -4221,11 +4240,11 @@ import { StructuredListRow } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| head | boolean | false | -| label | boolean | false | -| tabindex | string | "0" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------- | +| head | boolean | false | Set to `true` to use as a header | +| label | boolean | false | Set to `true` to render a label slot | +| tabindex | string | "0" | Specify the tabindex | ### Slots @@ -4255,10 +4274,10 @@ import { StructuredListSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| rows | number | 5 | -| border | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------- | +| rows | number | 5 | Specify the number of rows | +| border | boolean | false | Set to `true` to use the bordered variant | ### Slots @@ -4287,13 +4306,14 @@ import { Switch } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :----------------------------------------- | :------------- | -| text | string | "Provide text" | -| selected | boolean | false | -| disabled | boolean | false | -| id | string | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :--------------------------------------------------------------------------- | :----------------------------------------- | :------------- | :-------------------------------------------- | +| text | string | "Provide text" | Specify the switch text | +| Alternatively, use the named slot "text" (e.g. ...) | +| selected | boolean | false | Set to `true` for the switch to be selected | +| disabled | boolean | false | Set to `true` to disable the switch | +| id | string | -- | Set an id for the button element | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -4323,14 +4343,15 @@ import { Tab } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :----------------------------------------- | :------------ | -| label | string | "" | -| href | string | "#" | -| disabled | boolean | false | -| tabindex | string | "0" | -| id | string | -- | -| ref | null | HTMLAnchorElement | null | +| Prop name | Type | Default value | Description | +| :----------------------------------------------------------------------- | :----------------------------------------- | :------------ | :-------------------------------------------- | +| label | string | "" | Specify the tab label | +| Alternatively, use the default slot (e.g. Label) | +| href | string | "#" | Specify the href attribute | +| disabled | boolean | false | Set to `true` to disable the tab | +| tabindex | string | "0" | Specify the tabindex | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | ### Slots @@ -4358,9 +4379,9 @@ import { TabContent } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :---------------------------------- | +| id | string | -- | Set an id for the top-level element | ### Slots @@ -4386,14 +4407,14 @@ import { Table } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :-------------------------------------------------- | :------------ | -| size | "compact" | "short" | "tall" | -- | -| zebra | boolean | false | -| useStaticWidth | boolean | false | -| shouldShowBorder | boolean | false | -| sortable | boolean | false | -| stickyHeader | boolean | false | +| Prop name | Type | Default value | Description | +| :--------------- | :-------------------------------------------------- | :------------ | :-------------------------------------- | +| size | "compact" | "short" | "tall" | -- | Set the size of the table | +| zebra | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | boolean | false | Set to `true` to use static width | +| shouldShowBorder | boolean | false | Set to `true` for the bordered variant | +| sortable | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -4474,11 +4495,11 @@ import { TableContainer } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :----------- | :------------------- | :------------ | -| title | string | "" | -| description | string | "" | -| stickyHeader | boolean | false | +| Prop name | Type | Default value | Description | +| :----------- | :------------------- | :------------ | :---------------------------------------- | +| title | string | "" | Specify the title of the data table | +| description | string | "" | Specify the description of the data table | +| stickyHeader | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -4533,11 +4554,11 @@ import { TableHeader } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------------ | :------------ | -| scope | string | "col" | -| translateWithId | () => string | -- | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------------ | :------------ | :----------------------------------- | +| scope | string | "col" | Specify the `scope` attribute | +| translateWithId | () => string | -- | Override the default id translations | +| id | string | -- | Set an id for the top-level element | ### Slots @@ -4566,9 +4587,9 @@ import { TableRow } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------- | :------------------- | :------------ | -| isSelected | boolean | false | +| Prop name | Type | Default value | Description | +| :--------- | :------------------- | :------------ | :------------------------------ | +| isSelected | boolean | false | Set to `true` to select the row | ### Slots @@ -4597,12 +4618,12 @@ import { Tabs } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :---------------------------------------- | :------------------ | -| selected | number | 0 | -| type | "default" | "container" | "default" | -| iconDescription | string | "Show menu options" | -| triggerHref | string | "#" | +| Prop name | Type | Default value | Description | +| :-------------- | :---------------------------------------- | :------------------ | :------------------------------------------ | +| selected | number | 0 | Specify the selected tab index | +| type | "default" | "container" | "default" | Specify the type of tabs | +| iconDescription | string | "Show menu options" | Specify the ARIA label for the chevron icon | +| triggerHref | string | "#" | Specify the tab trigger href attribute | ### Slots @@ -4629,9 +4650,9 @@ import { TabsSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| count | number | 4 | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :----------------------------------- | +| count | number | 4 | Specify the number of tabs to render | ### Slots @@ -4660,14 +4681,14 @@ import { Tag } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | -| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | -| filter | boolean | false | -| disabled | boolean | false | -| skeleton | boolean | false | -| title | string | "Clear filter" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- | :----------------------------------------------------- | +| type | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | Specify the type of tag | +| filter | boolean | false | Set to `true` to use filterable variant | +| disabled | boolean | false | Set to `true` to disable a filterable tag | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| title | string | "Clear filter" | Set the title for the close button in a filterable tag | +| id | string | -- | Set an id for the filterable tag | ### Slots @@ -4725,22 +4746,22 @@ import { TextArea } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------------------------------- | :------------ | -| value | string | "" | -| placeholder | string | "" | -| cols | number | 50 | -| rows | number | 4 | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLTextAreaElement | null | +| Prop name | Type | Default value | Description | +| :---------- | :------------------------------------------- | :------------ | :---------------------------------------------- | +| value | string | "" | Specify the textarea value | +| placeholder | string | "" | Specify the placeholder text | +| cols | number | 50 | Specify the number of cols | +| rows | number | 4 | Specify the number of rows | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the input | +| helperText | string | "" | Specify the helper text | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the text for the invalid state | +| id | string | -- | Set an id for the textarea element | +| name | string | -- | Specify a name attribute for the input | +| ref | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | ### Slots @@ -4773,9 +4794,9 @@ import { TextAreaSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| hideLabel | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------------- | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | ### Slots @@ -4804,26 +4825,26 @@ import { TextInput } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :---------------------------------------- | :------------ | -| size | "sm" | "xl" | -- | -| value | string | "" | -| type | string | "" | -| placeholder | string | "" | -| light | boolean | false | -| disabled | boolean | false | -| helperText | string | "" | -| id | string | -- | -| name | string | -- | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| warn | boolean | false | -| warnText | string | "" | -| ref | null | HTMLInputElement | null | -| required | boolean | false | -| inline | boolean | false | +| Prop name | Type | Default value | Description | +| :---------- | :---------------------------------------- | :------------ | :-------------------------------------------- | +| size | "sm" | "xl" | -- | Set the size of the input | +| value | string | "" | Specify the input value | +| type | string | "" | Specify the input type | +| placeholder | string | "" | Specify the placeholder text | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the input | +| helperText | string | "" | Specify the helper text | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the input | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| warn | boolean | false | Set to `true` to indicate an warning state | +| warnText | string | "" | Specify the warning state text | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| required | boolean | false | Set to `true` to mark the field as required | +| inline | boolean | false | Set to `true` to use inline version | ### Slots @@ -4857,9 +4878,9 @@ import { TextInputSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| hideLabel | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :----------------------------------- | +| hideLabel | boolean | false | Set to `true` to hide the label text | ### Slots @@ -4888,9 +4909,9 @@ import { Tile } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| light | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------- | +| light | boolean | false | Set to `true` to enable the light variant | ### Slots @@ -4919,11 +4940,11 @@ import { TileGroup } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| selected | string | -- | -| disabled | boolean | false | -| legend | string | "" | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------- | +| selected | string | -- | Specify the selected tile value | +| disabled | boolean | false | Set to `true` to disable the tile group | +| legend | string | "" | Specify the legend text | ### Slots @@ -4949,22 +4970,22 @@ import { TimePicker } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :---------------------------------------- | :------------ | -| value | string | "" | -| type | string | "text" | -| placeholder | string | "hh=mm" | -| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | -| maxlength | number | 5 | -| light | boolean | false | -| disabled | boolean | false | -| labelText | string | "" | -| hideLabel | boolean | false | -| invalid | boolean | false | -| invalidText | string | "" | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLInputElement | null | +| Prop name | Type | Default value | Description | +| :---------- | :---------------------------------------- | :------------ | :-------------------------------------------- | +| value | string | "" | Specify the input value | +| type | string | "text" | Specify the input type | +| placeholder | string | "hh=mm" | Specify the input placeholder text | +| pattern | string | "(1[012] | [1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element | +| maxlength | number | 5 | Specify the `maxlength` input attribute | +| light | boolean | false | Set to `true` to enable the light variant | +| disabled | boolean | false | Set to `true` to disable the input | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | false | Set to `true` to visually hide the label text | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -4997,16 +5018,16 @@ import { TimePickerSelect } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :----------------------------------------- | :--------------------- | -| value | string | "" | -| disabled | boolean | false | -| iconDescription | string | "Open list of options" | -| labelText | string | "" | -| hideLabel | boolean | true | -| id | string | -- | -| name | string | -- | -| ref | null | HTMLSelectElement | null | +| Prop name | Type | Default value | Description | +| :-------------- | :----------------------------------------- | :--------------------- | :---------------------------------------------- | +| value | string | "" | Specify the select value | +| disabled | boolean | false | Set to `true` to disable the select | +| iconDescription | string | "Open list of options" | Specify the ARIA label for the chevron icon | +| labelText | string | "" | Specify the label text | +| hideLabel | boolean | true | | +| id | string | -- | Set an id for the select element | +| name | string | -- | Specify a name attribute for the select element | +| ref | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | ### Slots @@ -5035,18 +5056,18 @@ import { ToastNotification } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | -| notificationType | "toast" | "inline" | "toast" | -| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | -| lowContrast | boolean | false | -| timeout | number | 0 | -| role | string | "alert" | -| title | string | "Title" | -| subtitle | string | "" | -| caption | string | "Caption" | -| iconDescription | string | "Closes notification" | -| hideCloseButton | boolean | false | +| Prop name | Type | Default value | Description | +| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- | :---------------------------------------------------------------------- | +| notificationType | "toast" | "inline" | "toast" | Set the type of notification | +| kind | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | boolean | false | Set to `true` to use the low contrast variant | +| timeout | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | string | "alert" | Set the `role` attribute | +| title | string | "Title" | Specify the title text | +| subtitle | string | "" | Specify the subtitle text | +| caption | string | "Caption" | Specify the caption text | +| iconDescription | string | "Closes notification" | Specify the ARIA label for the icon | +| hideCloseButton | boolean | false | Set to `true` to hide the close button | ### Slots @@ -5075,15 +5096,15 @@ import { Toggle } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| toggled | boolean | false | -| disabled | boolean | false | -| labelA | string | "Off" | -| labelB | string | "On" | -| labelText | string | "" | -| id | string | -- | -| name | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------------- | +| toggled | boolean | false | Set to `true` to toggle the checkbox input | +| disabled | boolean | false | Set to `true` to disable checkbox input | +| labelA | string | "Off" | Specify the label for the untoggled state | +| labelB | string | "On" | Specify the label for the toggled state | +| labelText | string | "" | Specify the label text | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the checkbox input | ### Slots @@ -5116,10 +5137,10 @@ import { ToggleSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| labelText | string | "" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :------------------------------ | +| labelText | string | "" | Specify the label text | +| id | string | -- | Set an id for the input element | ### Slots @@ -5148,15 +5169,15 @@ import { ToggleSmall } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| toggled | boolean | false | -| disabled | boolean | false | -| labelA | string | "Off" | -| labelB | string | "On" | -| labelText | string | "" | -| id | string | -- | -| name | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :---------------------------------------------- | +| toggled | boolean | false | Set to `true` to toggle the checkbox input | +| disabled | boolean | false | Set to `true` to disable checkbox input | +| labelA | string | "Off" | Specify the label for the untoggled state | +| labelB | string | "On" | Specify the label for the toggled state | +| labelText | string | "" | Specify the label text | +| id | string | -- | Set an id for the input element | +| name | string | -- | Specify a name attribute for the checkbox input | ### Slots @@ -5189,10 +5210,10 @@ import { ToggleSmallSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------ | :------------ | -| labelText | string | "" | -| id | string | -- | +| Prop name | Type | Default value | Description | +| :-------- | :------------------ | :------------ | :------------------------------ | +| labelText | string | "" | Specify the label text | +| id | string | -- | Set an id for the input element | ### Slots @@ -5221,21 +5242,22 @@ import { Tooltip } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------------- | :------------------------------------------------------------------ | :------------ | -| direction | "top" | "right" | "bottom" | "left" | "bottom" | -| open | boolean | false | -| hideIcon | boolean | false | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | -| iconDescription | string | "" | -| iconName | string | "" | -| tabindex | string | "0" | -| tooltipId | string | -- | -| triggerId | string | -- | -| triggerText | string | "" | -| ref | null | HTMLElement | null | -| refTooltip | null | HTMLElement | null | -| refIcon | null | HTMLElement | null | +| Prop name | Type | Default value | Description | +| :---------------------------------------------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------------------------------------- | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| open | boolean | false | Set to `true` to open the tooltip | +| hideIcon | boolean | false | Set to `true` to hide the tooltip icon | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button | +| Icon size must be 16px (e.g. `Add16`, `Task16`) | +| iconDescription | string | "" | Specify the ARIA label for the tooltip button | +| iconName | string | "" | Specify the icon name attribute | +| tabindex | string | "0" | Set the button tabindex | +| tooltipId | string | -- | Set an id for the tooltip | +| triggerId | string | -- | Set an id for the tooltip button | +| triggerText | string | "" | Set the tooltip button text | +| ref | null | HTMLElement | null | Obtain a reference to the trigger text HTML element | +| refTooltip | null | HTMLElement | null | Obtain a reference to the tooltip HTML element | +| refIcon | null | HTMLElement | null | Obtain a reference to the icon HTML element | ### Slots @@ -5261,13 +5283,13 @@ import { TooltipDefinition } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :------------------------------------------------ | :------------ | -| tooltipText | string | "" | -| align | "start" | "center" | "end" | "center" | -| direction | "top" | "bottom" | "bottom" | -| id | string | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :---------- | :------------------------------------------------ | :------------ | :---------------------------------------------------- | +| tooltipText | string | "" | Specify the tooltip text | +| align | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | string | -- | Set an id for the tooltip div element | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -5297,13 +5319,13 @@ import { TooltipIcon } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :---------- | :-------------------------------------------------------------- | :------------ | -| tooltipText | string | "" | -| align | "start" | "center" | "end" | "center" | -| direction | "top" | "right" | "bottom" | "left" | "bottom" | -| id | string | -- | -| ref | null | HTMLButtonElement | null | +| Prop name | Type | Default value | Description | +| :---------- | :-------------------------------------------------------------- | :------------ | :---------------------------------------------------- | +| tooltipText | string | "" | Specify the tooltip text | +| align | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | string | -- | Set an id for the span element | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -5333,9 +5355,9 @@ import { UnorderedList } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | -| :-------- | :------------------- | :------------ | -| nested | boolean | false | +| Prop name | Type | Default value | Description | +| :-------- | :------------------- | :------------ | :-------------------------------------- | +| nested | boolean | false | Set to `true` to use the nested variant | ### Slots diff --git a/scripts/rollup/generate-index.js b/scripts/rollup/generate-index.js index 0934ccb3..f8223898 100644 --- a/scripts/rollup/generate-index.js +++ b/scripts/rollup/generate-index.js @@ -4,7 +4,8 @@ const toMdLink = (text) => `[${text}](#${toLink(text)})`; const formatType = (type) => `${type.replace(/\|/g, "|")}`; -const HEADER_PROPS = "| Prop name | Type | Default value |\n| :- | :- | :- |\n"; +const HEADER_PROPS = + "| Prop name | Type | Default value | Description |\n| :- | :- | :- | :- |\n"; /** * Use library component metadata to generate component documentation in markdown format. @@ -62,7 +63,9 @@ export function generateIndex(components, groups, pkg) { exported_props.forEach((prop, name) => { code += `| ${name}${ prop.kind === "const" ? " (`constant`)" : "" - } | ${formatType(prop.type)} | ${prop.value || "--"}|\n`; + } | ${formatType(prop.type)} | ${prop.value || "--"} | ${ + prop.description + } |\n`; }); } else { code += "No exported props.\n\n";