diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 1bd9ef0e..218231c2 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 | 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 |
+| 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,12 @@ import { AccordionItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <div slot="title">...</div>). |
+| 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 +266,12 @@ import { AccordionSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +300,9 @@ import { AspectRatio } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :----------------------- |
-| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------------------------------------------------------------------------------------- | :------------ | :------------------------ |
+| ratio | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | `"2x1"` | Specify the aspect ratio. |
### Slots
@@ -328,10 +328,10 @@ import { Breadcrumb } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +360,10 @@ import { BreadcrumbItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +392,10 @@ import { BreadcrumbSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +424,22 @@ import { Button } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <Button let:props><div {...props}>...</div></Button>). |
+| 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 +468,9 @@ import { ButtonSet } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :-------------------------------------------- |
-| stacked | boolean | false | Set to `true` to stack the buttons vertically |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :--------------------------------------------- |
+| stacked | boolean | `false` | Set to `true` to stack the buttons vertically. |
### Slots
@@ -496,11 +496,11 @@ import { ButtonSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +529,19 @@ import { Checkbox } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +600,11 @@ import { ClickableTile } from "carbon-components-svelte";
### Props
-| 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` |
+| 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 +634,24 @@ import { CodeSnippet } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <CodeSnippet>{`code`}</CodeSnippet>). |
+| 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 +681,9 @@ import { CodeSnippetSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :--------------------------------------------------- | :------------ | :--------------------------- |
-| type | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
+| Prop name | Type | Default value | Description |
+| :-------- | :--------------------------------------------------- | :------------ | :---------------------------- |
+| type | "single" | "inline" | "multi" | `"single"` | Set the type of code snippet. |
### Slots
@@ -725,18 +725,18 @@ interface ColumnSizeDescriptor {
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
```
-| 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 |
+| 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. <Column let:props><article {...props}>...</article></Column>). |
+| 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 +771,26 @@ interface ComboBoxItem {
}
```
-| 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 |
+| 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 +819,15 @@ import { ComposedModal } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +859,9 @@ import { Content } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------- | :---------------------------------- |
-| id | string | "main-content" | Specify the id for the main element |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :--------------- | :----------------------------------- |
+| id | string | `"main-content"` | Specify the id for the main element. |
### Slots
@@ -887,11 +887,11 @@ import { ContentSwitcher } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +920,11 @@ import { Copy } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +951,9 @@ import { CopyButton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------------- | :------------------ | :------------------ | :----------------------------------------------- |
-| iconDescription | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
+| Prop name | Type | Default value | Description |
+| :-------------- | :------------------ | :-------------------- | :------------------------------------------------ |
+| iconDescription | string | `"Copy to clipboard"` | Set the title and ARIA label for the copy button. |
### Slots
@@ -980,16 +980,16 @@ import { DataTable } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1018,15 @@ import { DataTableSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1055,18 @@ import { DatePicker } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1095,21 @@ import { DatePickerInput } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1137,10 @@ import { DatePickerSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1182,26 @@ interface DropdownItem {
}
```
-| 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 |
+| 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 +1227,9 @@ import { DropdownSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :-------------------------------------- |
-| inline | boolean | false | Set to `true` to use the inline variant |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :--------------------------------------- |
+| inline | boolean | `false` | Set to `true` to use the inline variant. |
### Slots
@@ -1258,17 +1258,17 @@ import { ExpandableTile } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1299,19 @@ import { FileUploader } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1343,19 @@ import { FileUploaderButton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1389,18 @@ import { FileUploaderDropContainer } from "carbon-components-svelte";
type Files = string[];
```
-| 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 |
+| 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 +1431,15 @@ import { FileUploaderItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1496,11 @@ import { Filename } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1583,12 @@ import { FormGroup } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1646,9 @@ import { FormLabel } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :---------------------------------------- |
-| id | string | -- | Set an id to be used by the label element |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :----------------------------------------- |
+| id | string | -- | Set an id to be used by the label element. |
### Slots
@@ -1677,15 +1677,15 @@ import { Grid } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <Grid let:props><header {...props}>...</header></Grid>). |
+| 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 +1711,15 @@ import { Header } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <span slot="platform">...</span>). |
+| ref | null | HTMLAnchorElement | `null` | Obtain a reference to the HTML anchor element. |
### Slots
@@ -1745,12 +1745,12 @@ import { HeaderAction } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <div slot="text">...</div>). |
+| ref | null | HTMLButtonElement | `null` | Obtain a reference to the button HTML element. |
### Slots
@@ -1776,12 +1776,12 @@ import { HeaderActionLink } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1807,9 @@ import { HeaderActionSearch } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :------------- | :------------------- | :------------ | :-------------------------------- |
-| searchIsActive | boolean | false | Set to `true` to focus the search |
+| Prop name | Type | Default value | Description |
+| :------------- | :------------------- | :------------ | :--------------------------------- |
+| searchIsActive | boolean | `false` | Set to `true` to focus the search. |
### Slots
@@ -1837,11 +1837,11 @@ import { HeaderGlobalAction } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1867,9 @@ import { HeaderNav } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :--------------------------------- |
-| ariaLabel | string | -- | Specify the ARIA label for the nav |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :---------------------------------- |
+| ariaLabel | string | -- | Specify the ARIA label for the nav. |
### Slots
@@ -1895,11 +1895,11 @@ import { HeaderNavItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1932,13 @@ import { HeaderNavMenu } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +1997,10 @@ import { HeaderPanelLink } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :----------------------------------------- | :------------ | :-------------------------------------------- |
-| href | string | -- | Specify the `href` attribute |
-| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| 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 +2078,10 @@ import { Icon } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2110,9 @@ import { IconSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :----------------------- |
-| size | number | 16 | Set the size of the icon |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :------------------------ |
+| size | number | `16` | Set the size of the icon. |
### Slots
@@ -2141,12 +2141,12 @@ import { InlineLoading } from "carbon-components-svelte";
### Props
-| 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" |
+| 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 +2175,17 @@ import { InlineNotification } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2214,13 @@ import { Link } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2249,15 @@ import { ListBox } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2290,15 @@ import { ListBoxField } from "carbon-components-svelte";
type ListBoxFieldTranslationId = "close" | "open";
```
-| 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 |
+| 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 +2329,10 @@ import { ListBoxMenu } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2364,11 @@ import { ListBoxMenuIcon } from "carbon-components-svelte";
type ListBoxMenuIconTranslationId = "close" | "open";
```
-| 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 |
+| 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 +2394,10 @@ import { ListBoxMenuItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2431,13 @@ import { ListBoxSelection } from "carbon-components-svelte";
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
```
-| 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 |
+| 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 +2492,13 @@ import { Loading } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2524,27 @@ import { Modal } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2577,10 @@ import { ModalBody } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2606,14 @@ import { ModalFooter } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2639,15 @@ import { ModalHeader } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2686,32 @@ interface MultiSelectItem {
}
```
-| 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 |
+| 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 +2768,12 @@ import { NotificationButton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2802,11 @@ import { NotificationIcon } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2832,12 @@ import { NotificationTextDetails } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +2869,29 @@ import { NumberInput } from "carbon-components-svelte";
type NumberInputTranslationId = "increment" | "decrement";
```
-| 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 |
+| 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 +2921,9 @@ import { NumberInputSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------- |
-| hideLabel | boolean | false | Set to `true` to hide the label text |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :------------------------------------ |
+| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
### Slots
@@ -2952,9 +2952,9 @@ import { OrderedList } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :-------------------------------------- |
-| nested | boolean | false | Set to `true` to use the nested variant |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :--------------------------------------- |
+| nested | boolean | `false` | Set to `true` to use the nested variant. |
### Slots
@@ -2983,17 +2983,17 @@ import { OverflowMenu } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3023,17 @@ import { OverflowMenuItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3060,24 @@ import { Pagination } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3103,14 @@ import { PaginationNav } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3167,26 @@ import { PasswordInput } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3220,11 @@ import { ProgressIndicator } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3253,10 @@ import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3285,16 @@ import { ProgressStep } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3324,17 @@ import { RadioButton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3360,13 @@ import { RadioButtonGroup } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3424,15 @@ import { RadioTile } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3463,14 @@ import { Row } from "carbon-components-svelte";
### Props
-| 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 |
+| 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. <Row let:props><section {...props}>...</section></Row>). |
+| 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 +3496,22 @@ import { Search } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3542,9 @@ import { SearchSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :------------------------------------- |
-| small | boolean | false | Set to `true` to use the small variant |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :-------------------------------------- |
+| small | boolean | `false` | Set to `true` to use the small variant. |
### Slots
@@ -3573,22 +3573,22 @@ import { Select } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3614,12 @@ import { SelectItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3645,10 @@ import { SelectItemGroup } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3674,9 @@ import { SelectSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------- |
-| hideLabel | boolean | false | Set to `true` to hide the label text |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :------------------------------------ |
+| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
### Slots
@@ -3705,17 +3705,17 @@ import { SelectableTile } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3745,11 @@ import { SideNav } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3801,13 @@ import { SideNavLink } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3833,12 @@ import { SideNavMenu } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3864,12 @@ import { SideNavMenuItem } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +3924,12 @@ import { SkeletonText } from "carbon-components-svelte";
### Props
-| 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) |
+| 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 +3958,10 @@ import { SkipToContent } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :-------------- | :--------------------------- |
-| href | string | "#main-content" | Specify the `href` attribute |
-| tabindex | string | "0" | Specify the tabindex |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :---------------- | :---------------------------- |
+| href | string | `"#main-content"` | Specify the `href` attribute. |
+| tabindex | string | `"0"` | Specify the tabindex. |
### Slots
@@ -3987,25 +3987,25 @@ import { Slider } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4034,9 @@ import { SliderSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------- |
-| hideLabel | boolean | false | Set to `true` to hide the label text |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :------------------------------------ |
+| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
### Slots
@@ -4065,11 +4065,11 @@ import { StructuredList } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4127,10 @@ import { StructuredListCell } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4188,14 @@ import { StructuredListInput } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4221,11 @@ import { StructuredListRow } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4255,10 @@ import { StructuredListSkeleton } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4287,13 @@ import { Switch } from "carbon-components-svelte";
### Props
-| 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 |
+| Prop name | Type | Default value | Description |
+| :-------- | :----------------------------------------- | :--------------- | :----------------------------------------------------------------------------------------------------------------- |
+| text | string | `"Provide text"` | Specify the switch text. Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>). |
+| 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 +4323,14 @@ import { Tab } from "carbon-components-svelte";
### Props
-| 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 |
+| Prop name | Type | Default value | Description |
+| :-------- | :----------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------- |
+| label | string | `""` | Specify the tab label. Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>). |
+| 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 +4358,9 @@ import { TabContent } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :---------------------------------- |
-| id | string | -- | Set an id for the top-level element |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :----------------------------------- |
+| id | string | -- | Set an id for the top-level element. |
### Slots
@@ -4386,14 +4386,14 @@ import { Table } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4474,11 @@ import { TableContainer } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4533,11 @@ import { TableHeader } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4566,9 @@ import { TableRow } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :--------- | :------------------- | :------------ | :------------------------------ |
-| isSelected | boolean | false | Set to `true` to select the row |
+| Prop name | Type | Default value | Description |
+| :--------- | :------------------- | :------------ | :------------------------------- |
+| isSelected | boolean | `false` | Set to `true` to select the row. |
### Slots
@@ -4597,12 +4597,12 @@ import { Tabs } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4629,9 @@ import { TabsSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :----------------------------------- |
-| count | number | 4 | Specify the number of tabs to render |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :------------------------------------ |
+| count | number | `4` | Specify the number of tabs to render. |
### Slots
@@ -4660,14 +4660,14 @@ import { Tag } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4725,22 @@ import { TextArea } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4773,9 @@ import { TextAreaSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :-------------------------------------------- |
-| hideLabel | boolean | false | Set to `true` to visually hide the label text |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :--------------------------------------------- |
+| hideLabel | boolean | `false` | Set to `true` to visually hide the label text. |
### Slots
@@ -4804,26 +4804,26 @@ import { TextInput } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4857,9 @@ import { TextInputSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :----------------------------------- |
-| hideLabel | boolean | false | Set to `true` to hide the label text |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :------------------------------------ |
+| hideLabel | boolean | `false` | Set to `true` to hide the label text. |
### Slots
@@ -4888,9 +4888,9 @@ import { Tile } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :---------------------------------------- |
-| light | boolean | false | Set to `true` to enable the light variant |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------- | :------------ | :----------------------------------------- |
+| light | boolean | `false` | Set to `true` to enable the light variant. |
### Slots
@@ -4919,11 +4919,11 @@ import { TileGroup } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4949,22 @@ import { TimePicker } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +4997,16 @@ import { TimePickerSelect } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5035,18 @@ import { ToastNotification } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5075,15 @@ import { Toggle } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5116,10 @@ import { ToggleSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------------ |
-| labelText | string | "" | Specify the label text |
-| id | string | -- | Set an id for the input element |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :------------------------------- |
+| labelText | string | `""` | Specify the label text. |
+| id | string | -- | Set an id for the input element. |
### Slots
@@ -5148,15 +5148,15 @@ import { ToggleSmall } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5189,10 @@ import { ToggleSmallSkeleton } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------ | :------------ | :------------------------------ |
-| labelText | string | "" | Specify the label text |
-| id | string | -- | Set an id for the input element |
+| Prop name | Type | Default value | Description |
+| :-------- | :------------------ | :------------ | :------------------------------- |
+| labelText | string | `""` | Specify the label text. |
+| id | string | -- | Set an id for the input element. |
### Slots
@@ -5221,21 +5221,21 @@ import { Tooltip } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5261,13 @@ import { TooltipDefinition } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5297,13 @@ import { TooltipIcon } from "carbon-components-svelte";
### Props
-| 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 |
+| 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 +5333,9 @@ import { UnorderedList } from "carbon-components-svelte";
### Props
-| Prop name | Type | Default value | Description |
-| :-------- | :------------------- | :------------ | :-------------------------------------- |
-| nested | boolean | false | Set to `true` to use the nested variant |
+| 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 a542f53e..b6e20490 100644
--- a/scripts/rollup/generate-index.js
+++ b/scripts/rollup/generate-index.js
@@ -4,6 +4,8 @@ const toMdLink = (text) => `[${text}](#${toLink(text)})`;
const formatType = (type) => `${type.replace(/\|/g, "|")}`;
+const escapeHtml = (text) => text.replace(/\/g, ">");
+
const HEADER_PROPS =
"| Prop name | Type | Default value | Description |\n| :- | :- | :- | :- |\n";
@@ -64,8 +66,8 @@ export function generateIndex(components, groups, pkg) {
code += `| ${name}${
prop.kind === "const" ? " (`constant`)" : ""
} | ${formatType(prop.type)} | ${
- prop.value || "--"
- } | ${prop.description.replace(/\n/g, ". ")} |\n`;
+ prop.value ? "`" + prop.value + "`" : "--"
+ } | ${escapeHtml(prop.description).replace(/\n/g, ". ")}. |\n`;
});
} else {
code += "No exported props.\n\n";