diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8a6286e9..ec796bee 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -183,12 +183,12 @@
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
-| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
-| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion |
-| disabled | let | No | boolean | false | Set to `true` to disable the accordion |
-| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ |
+| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
+| size | let | No | "sm" | "xl" | undefined | Specify the size of the accordion |
+| disabled | let | No | boolean | false | Set to `true` to disable the accordion |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
### Slots
@@ -238,12 +238,12 @@
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ |
-| count | let | No | number | 4 | Specify the number of accordion items to render |
-| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
-| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion |
-| open | let | No | boolean | true | Set to `false` to close the first accordion item |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ |
+| count | let | No | number | 4 | Specify the number of accordion items to render |
+| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon |
+| size | let | No | "sm" | "xl" | undefined | Specify the size of the accordion |
+| open | let | No | boolean | true | Set to `false` to close the first accordion item |
### Slots
@@ -304,10 +304,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- |
-| href | let | No | string | -- | Set the `href` to use an anchor link |
-| isCurrentPage | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------- |
+| href | let | No | string | undefined | Set the `href` to use an anchor link |
+| isCurrentPage | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page |
### Slots
@@ -361,7 +361,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- |
| sizes | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object |
-| size | let | Yes | BreakpointSize | -- | Determine the current Carbon grid breakpoint size |
+| size | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size |
| breakpoints | const | No | Record | { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } | Reference the Carbon grid breakpoints |
### Slots
@@ -388,14 +388,14 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button |
| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting |
| isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
-| iconDescription | let | No | string | -- | Specify the ARIA label for the button icon |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| iconDescription | let | No | string | undefined | Specify the ARIA label for the button icon |
| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` |
| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon |
| as | let | No | 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 | let | No | boolean | false | Set to `true` to display the skeleton state |
| disabled | let | No | boolean | false | Set to `true` to disable the button |
-| href | let | No | string | -- | Set the `href` to use an anchor link |
+| href | let | No | string | undefined | Set the `href` to use an anchor link |
| tabindex | let | No | string | "0" | Specify the tabindex |
| type | let | No | string | "button" | Specify the `type` attribute for the button element |
@@ -438,7 +438,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
-| href | let | No | string | -- | Set the `href` to use an anchor link |
+| href | let | No | string | undefined | Set the `href` to use an anchor link |
| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton |
| small | let | No | boolean | false | -- |
@@ -472,7 +472,7 @@ None.
| labelText | let | No | string | "" | Specify the label text |
| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
| name | let | No | string | "" | Set a name for the input element |
-| title | let | No | string | -- | Specify the title attribute for the label element |
+| title | let | No | string | undefined | Specify the title attribute for the label element |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label |
### Slots
@@ -516,12 +516,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
-| clicked | let | Yes | boolean | false | Set to `true` to click the tile |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| disabled | let | No | boolean | false | Set to `true` to disable the tile |
-| href | let | No | string | -- | Set the `href` |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ----------------------------------------- |
+| clicked | let | Yes | boolean | false | Set to `true` to click the tile |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| disabled | let | No | boolean | false | Set to `true` to disable the tile |
+| href | let | No | string | undefined | Set the `href` |
### Slots
@@ -549,15 +549,15 @@ None.
| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button |
| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
-| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code |
+| code | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code |
| copy | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button |
| disabled | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types |
| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
-| copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon |
-| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button |
+| copyButtonDescription | let | No | string | undefined | Specify the ARIA label for the copy button icon |
+| copyLabel | let | No | string | undefined | Specify the ARIA label of the copy button |
| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" |
@@ -619,19 +619,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | let | No | 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 | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column |
-| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column |
-| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint |
-| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint |
-| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint |
-| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint |
-| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| as | let | No | 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 | let | No | boolean | false | Set to `true` to remove the gutter |
+| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter |
+| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter |
+| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column |
+| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column |
+| sm | let | No | ColumnBreakpoint | undefined | Set the small breakpoint |
+| md | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint |
+| lg | let | No | ColumnBreakpoint | undefined | Set the large breakpoint |
+| xlg | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint |
+| max | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint |
### Slots
@@ -664,11 +664,11 @@ export interface ComboBoxItem {
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
| value | let | Yes | string | "" | Specify the selected combobox value |
-| selectedId | let | Yes | ComboBoxItemId | -- | Set the selected item by value id |
+| selectedId | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id |
| items | let | No | ComboBoxItem[] | [] | Set the combobox items |
| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
-| size | let | No | "sm" | "xl" | -- | Set the size of the combobox |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the combobox |
| disabled | let | No | boolean | false | Set to `true` to disable the combobox |
| titleText | let | No | string | "" | Specify the title text of the combobox |
| placeholder | let | No | string | "" | Specify the placeholder text |
@@ -679,9 +679,9 @@ export interface ComboBoxItem {
| warnText | let | No | string | "" | Specify the warning state text |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
-| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically |
### Slots
@@ -708,7 +708,7 @@ None.
| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- |
| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
| open | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the composed modal |
+| size | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the composed modal |
| danger | let | No | boolean | false | Set to `true` to use the danger variant |
| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside |
| containerClass | let | No | string | "" | Specify a class for the inner modal |
@@ -757,11 +757,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- |
-| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| size | let | No | "sm" | "xl" | -- | Specify the size of the content switcher |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------ | :--------------- | :------- | :---------------------------- | ---------------------- | ----------------------------------------- |
+| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| size | let | No | "sm" | "xl" | undefined | Specify the size of the content switcher |
### Slots
@@ -848,7 +848,7 @@ None.
| ref | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element |
| selectable | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` |
| selected | let | Yes | boolean | false | Set to `true` to use the selected variant |
-| icon | let | Yes | typeof import("svelte").SvelteComponent | -- | Specify the icon to render
Icon is rendered to the left of the label text |
+| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text |
| indented | let | Yes | boolean | false | Set to `true` to indent the label |
| kind | let | No | "default" | "danger" | "default" | Specify the kind of option |
| disabled | let | No | boolean | false | Set to `true` to enable the disabled state |
@@ -922,7 +922,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
-| text | let | No | string | -- | Specify the text to copy |
+| text | let | No | string | undefined | Specify the text to copy |
| copy | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots
@@ -980,27 +980,27 @@ export interface DataTableCell {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected |
-| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` |
-| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded |
-| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` |
-| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids |
-| headers | let | No | DataTableHeader[] | [] | Specify the data table headers |
-| size | let | No | "compact" | "short" | "medium" | "tall" | -- | Set the size of the data table |
-| title | let | No | string | "" | Specify the title of the data table |
-| description | let | No | string | "" | Specify the description of the data table |
-| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
-| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
-| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion |
-| nonExpandableRowIds | let | No | DataTableRowId[] | [] | Specify the ids for rows that should not be expandable |
-| radio | let | No | boolean | false | Set to `true` for the radio selection variant |
-| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection |
-| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
-| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
-| pageSize | let | No | number | 0 | Specify the number of items to display in a page |
-| page | let | No | number | 0 | Set to `number` to set current page |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected |
+| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` |
+| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded |
+| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` |
+| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids |
+| headers | let | No | DataTableHeader[] | [] | Specify the data table headers |
+| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table |
+| title | let | No | string | "" | Specify the title of the data table |
+| description | let | No | string | "" | Specify the description of the data table |
+| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
+| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
+| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion |
+| nonExpandableRowIds | let | No | DataTableRowId[] | [] | Specify the ids for rows that should not be expandable |
+| radio | let | No | boolean | false | Set to `true` for the radio selection variant |
+| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection |
+| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
+| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
+| pageSize | let | No | number | 0 | Specify the number of items to display in a page |
+| page | let | No | number | 0 | Set to `number` to set current page |
### Slots
@@ -1030,15 +1030,15 @@ export interface DataTableCell {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- |
-| columns | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array |
-| rows | let | No | number | 5 | Specify the number of rows |
-| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table |
-| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
-| showHeader | let | No | boolean | true | Set to `false` to hide the header |
-| headers | let | No | string[] | Partial[] | [] | Set the column headers
Supersedes `columns` if value is a non-empty array |
-| showToolbar | let | No | boolean | true | Set to `false` to hide the toolbar |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- |
+| columns | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array |
+| rows | let | No | number | 5 | Specify the number of rows |
+| size | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table |
+| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows |
+| showHeader | let | No | boolean | true | Set to `false` to hide the header |
+| headers | let | No | string[] | Partial[] | [] | Set the column headers
Supersedes `columns` if value is a non-empty array |
+| showToolbar | let | No | boolean | true | Set to `false` to hide the toolbar |
### Slots
@@ -1095,7 +1095,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- |
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
| type | let | No | string | "text" | Specify the input type |
| placeholder | let | No | string | "" | Specify the input placeholder text |
| pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value |
@@ -1109,7 +1109,7 @@ None.
| invalidText | let | No | string | "" | Specify the invalid state text |
| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
| warnText | let | No | string | "" | Specify the warning state text |
-| name | let | No | string | -- | Set a name for the input element |
+| name | let | No | string | undefined | Set a name for the input element |
### Slots
@@ -1170,12 +1170,12 @@ export interface DropdownItem {
| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| inline | let | Yes | boolean | false | Set to `true` to use the inline variant |
| open | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| selectedId | let | Yes | DropdownItemId | -- | Specify the selected item id |
+| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id |
| items | let | No | DropdownItem[] | [] | Set the dropdown items |
| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item |
| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown |
| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu |
-| size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field |
+| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| disabled | let | No | boolean | false | Set to `true` to disable the dropdown |
| titleText | let | No | string | "" | Specify the title text |
@@ -1184,11 +1184,11 @@ export interface DropdownItem {
| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
| warnText | let | No | string | "" | Specify the warning state text |
| helperText | let | No | string | "" | Specify the helper text |
-| label | let | No | string | -- | Specify the list box label |
+| label | let | No | string | undefined | Specify the list box label |
| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | -- | Specify a name attribute for the list box |
+| name | let | No | string | undefined | Specify a name attribute for the list box |
### Slots
@@ -1575,19 +1575,19 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header |
-| href | let | No | string | -- | Specify the `href` attribute |
-| company | let | No | string | -- | Specify the company name |
-| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
-| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu |
-| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 |
-| iconMenu | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render for the closed state
Defaults to `Menu20` |
-| iconClose | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render for the opened state
Defaults to `Close20` |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav |
+| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default |
+| uiShellAriaLabel | let | No | string | undefined | Specify the ARIA label for the header |
+| href | let | No | string | undefined | Specify the `href` attribute |
+| company | let | No | string | undefined | Specify the company name |
+| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) |
+| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu |
+| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 |
+| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state
Defaults to `Menu20` |
+| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state
Defaults to `Close20` |
### Slots
@@ -1621,9 +1621,9 @@ export interface HeaderActionSlideTransition {
| :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| isOpen | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
-| closeIcon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render when the action panel is open |
-| text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open |
+| text | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) |
| transition | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`)
Set to `false` to disable the transition |
### Slots
@@ -1644,12 +1644,12 @@ export interface HeaderActionSlideTransition {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| linkIsActive | let | No | boolean | false | Set to `true` to use the active state |
-| href | let | No | string | -- | Specify the `href` attribute |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :----------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| linkIsActive | let | No | boolean | false | Set to `true` to use the active state |
+| href | let | No | string | undefined | Specify the `href` attribute |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -1683,11 +1683,11 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| isActive | let | No | boolean | false | Set to `true` to use the active variant |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| isActive | let | No | boolean | false | Set to `true` to use the active variant |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -1705,9 +1705,9 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- |
-| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- |
+| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav |
### Slots
@@ -1723,12 +1723,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | let | No | string | -- | Specify the `href` attribute |
-| text | let | No | string | -- | Specify the text |
-| isSelected | let | No | boolean | false | Set to `true` to select the item |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | let | No | string | undefined | Specify the `href` attribute |
+| text | let | No | string | undefined | Specify the text |
+| isSelected | let | No | boolean | false | Set to `true` to select the item |
### Slots
@@ -1751,12 +1751,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| href | let | No | string | "/" | Specify the `href` attribute |
-| text | let | No | string | -- | Specify the text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| href | let | No | string | "/" | Specify the `href` attribute |
+| text | let | No | string | undefined | Specify the text |
### Slots
@@ -1797,10 +1797,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | let | No | string | -- | Specify the `href` attribute |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| href | let | No | string | undefined | Specify the `href` attribute |
### Slots
@@ -1892,10 +1892,10 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | ------------------------------------------- |
-| render | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
-| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------- |
+| render | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
### Slots
@@ -1942,7 +1942,7 @@ None.
| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
| src | let | No | string | "" | Specify the image source |
| alt | let | No | string | "" | Specify the image alt text |
-| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper |
+| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
@@ -1964,12 +1964,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- |
-| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
-| description | let | No | string | -- | Set the loading description |
-| iconDescription | let | No | string | -- | Specify the ARIA label for the loading icon |
-| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------- |
+| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status |
+| description | let | No | string | undefined | Set the loading description |
+| iconDescription | let | No | string | undefined | Specify the ARIA label for the loading icon |
+| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" |
### Slots
@@ -2023,15 +2023,15 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | -------------------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
-| size | let | No | "sm" | "lg" | -- | Specify the size of the link |
-| href | let | No | string | -- | Specify the href value |
-| inline | let | No | boolean | false | Set to `true` to use the inline variant |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render
`inline` must be `false` |
-| disabled | let | No | boolean | false | Set to `true` to disable the checkbox |
-| visited | let | No | boolean | false | Set to `true` to allow visited styles |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element |
+| size | let | No | "sm" | "lg" | undefined | Specify the size of the link |
+| href | let | No | string | undefined | Specify the href value |
+| inline | let | No | boolean | false | Set to `true` to use the inline variant |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` |
+| disabled | let | No | boolean | false | Set to `true` to disable the checkbox |
+| visited | let | No | boolean | false | Set to `true` to allow visited styles |
### Slots
@@ -2054,7 +2054,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ |
-| size | let | No | "sm" | "xl" | -- | Set the size of the list box |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the list box |
| type | let | No | "default" | "inline" | "default" | Set the type of the list box |
| open | let | No | boolean | false | Set to `true` to open the list box |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
@@ -2198,7 +2198,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ |
| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| selectionCount | let | No | number | -- | Specify the number of selected items |
+| selectionCount | let | No | number | undefined | Specify the number of selected items |
| disabled | let | No | boolean | false | Set to `true` to disable the list box selection |
| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
@@ -2284,13 +2284,13 @@ None.
| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- |
| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
| open | let | Yes | boolean | false | Set to `true` to open the modal |
-| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal |
+| size | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal |
| danger | let | No | boolean | false | Set to `true` to use the danger variant |
| alert | let | No | boolean | false | Set to `true` to enable alert mode |
| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant |
-| modalHeading | let | No | string | -- | Specify the modal heading |
-| modalLabel | let | No | string | -- | Specify the modal label |
-| modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal |
+| modalHeading | let | No | string | undefined | Specify the modal heading |
+| modalLabel | let | No | string | undefined | Specify the modal label |
+| modalAriaLabel | let | No | string | undefined | Specify the ARIA label for the modal |
| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon |
| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements |
| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content |
@@ -2350,15 +2350,15 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
-| primaryButtonText | let | No | string | "" | Specify the primary button text |
-| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
-| primaryClass | let | No | string | -- | Specify a class for the primary button |
-| secondaryButtonText | let | No | string | "" | Specify the secondary button text |
-| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
-| secondaryClass | let | No | string | -- | Specify a class for the secondary button |
-| danger | let | No | boolean | false | Set to `true` to use the danger variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
+| primaryButtonText | let | No | string | "" | Specify the primary button text |
+| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button |
+| primaryClass | let | No | string | undefined | Specify a class for the primary button |
+| secondaryButtonText | let | No | string | "" | Specify the secondary button text |
+| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` |
+| secondaryClass | let | No | string | undefined | Specify a class for the secondary button |
+| danger | let | No | boolean | false | Set to `true` to use the danger variant |
### Slots
@@ -2426,7 +2426,7 @@ export interface MultiSelectItem {
| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids |
| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items |
| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox |
+| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox |
| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
@@ -2437,7 +2437,7 @@ export interface MultiSelectItem {
| locale | let | No | string | "en" | Specify the locale |
| placeholder | let | No | string | "" | Specify the placeholder text |
| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value |
-| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids |
| titleText | let | No | string | "" | Specify the title text |
| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
@@ -2448,7 +2448,7 @@ export interface MultiSelectItem {
| label | let | No | string | "" | Specify the list box label |
| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | -- | Specify a name attribute for the select |
+| name | let | No | string | undefined | Specify a name attribute for the select |
### Slots
@@ -2493,8 +2493,8 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------- |
| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
-| title | let | No | string | -- | Specify the title of the icon |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
+| title | let | No | string | undefined | Specify the title of the icon |
| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon |
### Slots
@@ -2563,10 +2563,10 @@ export type NumberInputTranslationId = "increment" | "decrement";
| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| value | let | Yes | number | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
| step | let | No | number | 1 | Specify the step increment |
-| max | let | No | number | -- | Specify the maximum value |
-| min | let | No | number | -- | Specify the minimum value |
+| max | let | No | number | undefined | Specify the maximum value |
+| min | let | No | number | undefined | Specify the minimum value |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| readonly | let | No | boolean | false | Set to `true` for the input to be read-only |
| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant |
@@ -2584,7 +2584,7 @@ export type NumberInputTranslationId = "increment" | "decrement";
| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -2678,14 +2678,14 @@ None.
| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element |
| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element |
-| icon | let | Yes | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| open | let | Yes | boolean | false | Set to `true` to open the menu |
-| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu |
+| size | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu |
| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button |
-| menuOptionsClass | let | No | string | -- | Specify the menu options class |
-| iconClass | let | No | string | -- | Specify the icon class |
+| menuOptionsClass | let | No | string | undefined | Specify the menu options class |
+| iconClass | let | No | string | undefined | Specify the icon class |
| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
@@ -2824,7 +2824,7 @@ None.
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility |
| value | let | Yes | number | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
| placeholder | let | No | string | "" | Specify the placeholder text |
| hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text |
| showPasswordLabel | let | No | string | "Show password" | Specify the show password label text |
@@ -2841,7 +2841,7 @@ None.
| warnText | let | No | string | "" | Specify the warning state text |
| inline | let | No | boolean | false | Set to `true` to use inline version |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -2896,7 +2896,7 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- |
-| value | let | No | number | -- | Specify the current value |
+| value | let | No | number | undefined | Specify the current value |
| max | let | No | number | 100 | Specify the maximum value |
| labelText | let | No | string | "" | Specify the label text |
| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
@@ -3027,12 +3027,12 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- |
-| selected | let | Yes | string | -- | Set the selected radio button value |
+| selected | let | Yes | string | undefined | Set the selected radio button value |
| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons |
| legendText | let | No | string | "" | Specify the legend text |
| labelPosition | let | No | "right" | "left" | "right" | Specify the label position |
| orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons |
-| id | let | No | string | -- | Set an id for the container div element |
+| id | let | No | string | undefined | Set an id for the container div element |
### Slots
@@ -3175,7 +3175,7 @@ None.
| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element |
| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text |
| labelText | let | No | string | "" | Specify the label text |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
### Slots
@@ -3231,13 +3231,13 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- |
| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element |
-| selected | let | Yes | string | -- | Specify the selected item value |
-| size | let | No | "sm" | "xl" | -- | Set the size of the select input |
+| selected | let | Yes | string | undefined | Specify the selected item value |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the select input |
| inline | let | No | boolean | false | Set to `true` to use the inline variant |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| disabled | let | No | boolean | false | Set to `true` to disable the select element |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | let | No | string | -- | Specify a name attribute for the select element |
+| name | let | No | string | undefined | Specify a name attribute for the select element |
| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
| invalidText | let | No | string | "" | Specify the invalid state text |
| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
@@ -3360,13 +3360,13 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| fixed | let | No | boolean | false | Set to `true` to use the fixed variant |
-| rail | let | No | boolean | false | Set to `true` to use the rail variant |
-| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav |
-| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :------------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| fixed | let | No | boolean | false | Set to `true` to use the fixed variant |
+| rail | let | No | boolean | false | Set to `true` to use the rail variant |
+| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav |
+| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 |
### Slots
@@ -3416,13 +3416,13 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | let | No | boolean | false | Set to `true` to select the current link |
-| href | let | No | string | -- | Specify the `href` attribute |
-| text | let | No | string | -- | Specify the text |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | let | No | boolean | false | Set to `true` to select the current link |
+| href | let | No | string | undefined | Specify the `href` attribute |
+| text | let | No | string | undefined | Specify the text |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -3438,12 +3438,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :--------------------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
-| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
-| text | let | No | string | -- | Specify the text |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element |
+| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state |
+| text | let | No | string | undefined | Specify the text |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
### Slots
@@ -3461,12 +3461,12 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- |
-| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSelected | let | No | boolean | false | Set to `true` to select the item |
-| href | let | No | string | -- | Specify the `href` attribute |
-| text | let | No | string | -- | Specify the item text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- |
+| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
+| isSelected | let | No | boolean | false | Set to `true` to select the item |
+| href | let | No | string | undefined | Specify the `href` attribute |
+| text | let | No | string | undefined | Specify the item text |
### Slots
@@ -3609,13 +3609,13 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- |
-| selected | let | Yes | string | -- | Specify the selected structured list row value |
-| border | let | No | boolean | false | Set to `true` to use the bordered variant |
-| condensed | let | No | boolean | false | Set to `true` to use the condensed variant |
-| flush | let | No | boolean | false | Set to `true` to flush the list |
-| selection | let | No | boolean | false | Set to `true` to use the selection variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- |
+| selected | let | Yes | string | undefined | Specify the selected structured list row value |
+| border | let | No | boolean | false | Set to `true` to use the bordered variant |
+| condensed | let | No | boolean | false | Set to `true` to use the condensed variant |
+| flush | let | No | boolean | false | Set to `true` to flush the list |
+| selection | let | No | boolean | false | Set to `true` to use the selection variant |
### Slots
@@ -3846,14 +3846,14 @@ None.
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- |
-| size | let | No | "compact" | "short" | "medium" | "tall" | -- | Set the size of the table |
-| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
-| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
-| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant |
-| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
-| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- |
+| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table |
+| zebra | let | No | boolean | false | Set to `true` to use zebra styles |
+| useStaticWidth | let | No | boolean | false | Set to `true` to use static width |
+| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant |
+| sortable | let | No | boolean | false | Set to `true` for the sortable variant |
+| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header |
### Slots
@@ -4046,14 +4046,14 @@ None.
| Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- |
-| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | -- | Specify the type of tag |
+| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag |
| size | let | No | "sm" | "default" | "default" | -- |
| filter | let | No | boolean | false | Set to `true` to use filterable variant |
| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag |
| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` |
| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state |
| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag |
### Slots
@@ -4112,7 +4112,7 @@ None.
| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
| invalidText | let | No | string | "" | Specify the text for the invalid state |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -4164,14 +4164,14 @@ None.
| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- |
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| value | let | Yes | number | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | -- | Set the size of the input |
+| size | let | No | "sm" | "xl" | undefined | Set the size of the input |
| type | let | No | string | "" | Specify the input type |
| placeholder | let | No | string | "" | Specify the placeholder text |
| light | let | No | boolean | false | Set to `true` to enable the light variant |
| disabled | let | No | boolean | false | Set to `true` to disable the input |
| helperText | let | No | string | "" | Specify the helper text |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
| labelText | let | No | string | "" | Specify the label text |
| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
@@ -4240,7 +4240,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme |
| persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
| persistKey | let | No | string | "theme" | Specify the local storage key |
-| render | let | No | "toggle" | "select" | -- | Render a toggle or select dropdown to control the theme |
+| render | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
| toggle | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
| select | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
@@ -4283,11 +4283,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
-| selected | let | Yes | string | -- | Specify the selected tile value |
-| disabled | let | No | boolean | false | Set to `true` to disable the tile group |
-| legend | let | No | string | "" | Specify the legend text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ---------------------- | --------------------------------------- |
+| selected | let | Yes | string | undefined | Specify the selected tile value |
+| disabled | let | No | boolean | false | Set to `true` to disable the tile group |
+| legend | let | No | string | "" | Specify the legend text |
### Slots
@@ -4309,7 +4309,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- |
| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
| value | let | Yes | string | "" | Specify the input value |
-| size | let | No | "sm" | "xl" | -- | Specify the size of the input |
+| size | let | No | "sm" | "xl" | undefined | Specify the size of the input |
| type | let | No | string | "text" | Specify the input type |
| placeholder | let | No | string | "hh:mm" | Specify the input placeholder text |
| pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element |
@@ -4321,7 +4321,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
| invalidText | let | No | string | "" | Specify the invalid state text |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| name | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -4358,7 +4358,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| labelText | let | No | string | "" | Specify the label text |
| hideLabel | let | No | boolean | true | -- |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element |
-| name | let | No | string | -- | Specify a name attribute for the select element |
+| name | let | No | string | undefined | Specify a name attribute for the select element |
### Slots
@@ -4424,7 +4424,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| labelB | let | No | string | "On" | Specify the label for the toggled state |
| labelText | let | No | string | "" | Specify the label text |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the checkbox input |
+| name | let | No | string | undefined | Specify a name attribute for the checkbox input |
### Slots
@@ -4485,7 +4485,7 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| labelB | let | No | string | "On" | Specify the label for the toggled state |
| labelText | let | No | string | "" | Specify the label text |
| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | let | No | string | -- | Specify a name attribute for the checkbox input |
+| name | let | No | string | undefined | Specify a name attribute for the checkbox input |
### Slots
@@ -4654,7 +4654,7 @@ None.
| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button |
| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) |
| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button |
| iconName | let | No | string | "" | Specify the icon name attribute |
| tabindex | let | No | string | "0" | Set the button tabindex |
@@ -4732,7 +4732,7 @@ None.
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
| tooltipText | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot |
-| icon | let | No | typeof import("svelte").SvelteComponent | -- | Specify the icon to render |
+| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render |
| disabled | let | No | boolean | false | Set to `true` to disable the tooltip icon |
| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon |
| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon |