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 |
diff --git a/package.json b/package.json
index c0fc225c..c825055f 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.42.1",
- "sveld": "^0.11.1",
+ "sveld": "^0.12.1",
"svelte": "^3.45.0",
"svelte-check": "^1.1.32",
"typescript": "^4.1.3"
diff --git a/types/Accordion/Accordion.svelte.d.ts b/types/Accordion/Accordion.svelte.d.ts
index 1bba1cfd..e1f35470 100644
--- a/types/Accordion/Accordion.svelte.d.ts
+++ b/types/Accordion/Accordion.svelte.d.ts
@@ -11,6 +11,7 @@ export interface AccordionProps extends AccordionSkeletonProps {
/**
* Specify the size of the accordion
+ * @default undefined
*/
size?: "sm" | "xl";
diff --git a/types/Accordion/AccordionSkeleton.svelte.d.ts b/types/Accordion/AccordionSkeleton.svelte.d.ts
index c761f389..6a5fa19f 100644
--- a/types/Accordion/AccordionSkeleton.svelte.d.ts
+++ b/types/Accordion/AccordionSkeleton.svelte.d.ts
@@ -17,6 +17,7 @@ export interface AccordionSkeletonProps
/**
* Specify the size of the accordion
+ * @default undefined
*/
size?: "sm" | "xl";
diff --git a/types/Breadcrumb/BreadcrumbItem.svelte.d.ts b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
index 7b68f56e..866f279d 100644
--- a/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
+++ b/types/Breadcrumb/BreadcrumbItem.svelte.d.ts
@@ -5,6 +5,7 @@ export interface BreadcrumbItemProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the `href` to use an anchor link
+ * @default undefined
*/
href?: string;
diff --git a/types/Breakpoint/Breakpoint.svelte.d.ts b/types/Breakpoint/Breakpoint.svelte.d.ts
index fc520c91..b46f0c3e 100644
--- a/types/Breakpoint/Breakpoint.svelte.d.ts
+++ b/types/Breakpoint/Breakpoint.svelte.d.ts
@@ -8,6 +8,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
export interface BreakpointProps {
/**
* Determine the current Carbon grid breakpoint size
+ * @default undefined
*/
size?: BreakpointSize;
diff --git a/types/Button/Button.svelte.d.ts b/types/Button/Button.svelte.d.ts
index aab2ea9d..8af7d6ff 100644
--- a/types/Button/Button.svelte.d.ts
+++ b/types/Button/Button.svelte.d.ts
@@ -46,11 +46,13 @@ export interface ButtonProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the ARIA label for the button icon
+ * @default undefined
*/
iconDescription?: string;
@@ -88,6 +90,7 @@ export interface ButtonProps
/**
* Set the `href` to use an anchor link
+ * @default undefined
*/
href?: string;
diff --git a/types/Button/ButtonSkeleton.svelte.d.ts b/types/Button/ButtonSkeleton.svelte.d.ts
index 1cc37b25..301f0ec1 100644
--- a/types/Button/ButtonSkeleton.svelte.d.ts
+++ b/types/Button/ButtonSkeleton.svelte.d.ts
@@ -5,6 +5,7 @@ export interface ButtonSkeletonProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the `href` to use an anchor link
+ * @default undefined
*/
href?: string;
diff --git a/types/Checkbox/Checkbox.svelte.d.ts b/types/Checkbox/Checkbox.svelte.d.ts
index 4f75a69f..ebf67ec1 100644
--- a/types/Checkbox/Checkbox.svelte.d.ts
+++ b/types/Checkbox/Checkbox.svelte.d.ts
@@ -64,6 +64,7 @@ export interface CheckboxProps {
/**
* Specify the title attribute for the label element
+ * @default undefined
*/
title?: string;
diff --git a/types/CodeSnippet/CodeSnippet.svelte.d.ts b/types/CodeSnippet/CodeSnippet.svelte.d.ts
index d9e72a38..05cd59b2 100644
--- a/types/CodeSnippet/CodeSnippet.svelte.d.ts
+++ b/types/CodeSnippet/CodeSnippet.svelte.d.ts
@@ -12,6 +12,7 @@ export interface CodeSnippetProps {
* Set the code snippet text
* Alternatively, use the default slot (e.g., {`code`})
* You must use the `code` prop to copy the code
+ * @default undefined
*/
code?: string;
@@ -61,11 +62,13 @@ export interface CodeSnippetProps {
/**
* Specify the ARIA label for the copy button icon
+ * @default undefined
*/
copyButtonDescription?: string;
/**
* Specify the ARIA label of the copy button
+ * @default undefined
*/
copyLabel?: string;
diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts
index 1b2db20b..9054c618 100644
--- a/types/ComboBox/ComboBox.svelte.d.ts
+++ b/types/ComboBox/ComboBox.svelte.d.ts
@@ -24,6 +24,7 @@ export interface ComboBoxProps
/**
* Set the selected item by value id
+ * @default undefined
*/
selectedId?: ComboBoxItemId;
@@ -41,6 +42,7 @@ export interface ComboBoxProps
/**
* Set the size of the combobox
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -112,6 +114,7 @@ export interface ComboBoxProps
/**
* Override the default translation ids
+ * @default undefined
*/
translateWithId?: (id: any) => string;
@@ -123,6 +126,7 @@ export interface ComboBoxProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/ComposedModal/ComposedModal.svelte.d.ts b/types/ComposedModal/ComposedModal.svelte.d.ts
index 0441eae5..daa9c97a 100644
--- a/types/ComposedModal/ComposedModal.svelte.d.ts
+++ b/types/ComposedModal/ComposedModal.svelte.d.ts
@@ -5,6 +5,7 @@ export interface ComposedModalProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the composed modal
+ * @default undefined
*/
size?: "xs" | "sm" | "lg";
diff --git a/types/ComposedModal/ModalFooter.svelte.d.ts b/types/ComposedModal/ModalFooter.svelte.d.ts
index eaf9a749..45d13517 100644
--- a/types/ComposedModal/ModalFooter.svelte.d.ts
+++ b/types/ComposedModal/ModalFooter.svelte.d.ts
@@ -17,6 +17,7 @@ export interface ModalFooterProps
/**
* Specify a class for the primary button
+ * @default undefined
*/
primaryClass?: string;
@@ -35,6 +36,7 @@ export interface ModalFooterProps
/**
* Specify a class for the secondary button
+ * @default undefined
*/
secondaryClass?: string;
diff --git a/types/ContentSwitcher/ContentSwitcher.svelte.d.ts b/types/ContentSwitcher/ContentSwitcher.svelte.d.ts
index 21ffc6ae..5115c345 100644
--- a/types/ContentSwitcher/ContentSwitcher.svelte.d.ts
+++ b/types/ContentSwitcher/ContentSwitcher.svelte.d.ts
@@ -17,6 +17,7 @@ export interface ContentSwitcherProps
/**
* Specify the size of the content switcher
+ * @default undefined
*/
size?: "sm" | "xl";
}
diff --git a/types/ContextMenu/ContextMenuOption.svelte.d.ts b/types/ContextMenu/ContextMenuOption.svelte.d.ts
index 47dfd117..a8e53ec4 100644
--- a/types/ContextMenu/ContextMenuOption.svelte.d.ts
+++ b/types/ContextMenu/ContextMenuOption.svelte.d.ts
@@ -24,6 +24,7 @@ export interface ContextMenuOptionProps
/**
* Specify the icon to render
* Icon is rendered to the left of the label text
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/CopyButton/CopyButton.svelte.d.ts b/types/CopyButton/CopyButton.svelte.d.ts
index 7f2f1870..8af33ec5 100644
--- a/types/CopyButton/CopyButton.svelte.d.ts
+++ b/types/CopyButton/CopyButton.svelte.d.ts
@@ -11,6 +11,7 @@ export interface CopyButtonProps extends CopyProps {
/**
* Specify the text to copy
+ * @default undefined
*/
text?: string;
diff --git a/types/DataTable/DataTable.svelte.d.ts b/types/DataTable/DataTable.svelte.d.ts
index 9c37a3a6..a675a9fb 100644
--- a/types/DataTable/DataTable.svelte.d.ts
+++ b/types/DataTable/DataTable.svelte.d.ts
@@ -53,6 +53,7 @@ export interface DataTableProps
/**
* Set the size of the data table
+ * @default undefined
*/
size?: "compact" | "short" | "medium" | "tall";
diff --git a/types/DataTable/DataTableSkeleton.svelte.d.ts b/types/DataTable/DataTableSkeleton.svelte.d.ts
index d83e0e35..b3763c3d 100644
--- a/types/DataTable/DataTableSkeleton.svelte.d.ts
+++ b/types/DataTable/DataTableSkeleton.svelte.d.ts
@@ -20,6 +20,7 @@ export interface DataTableSkeletonProps
/**
* Set the size of the data table
+ * @default undefined
*/
size?: "compact" | "short" | "tall";
diff --git a/types/DataTable/Table.svelte.d.ts b/types/DataTable/Table.svelte.d.ts
index 6c951052..0c2a302d 100644
--- a/types/DataTable/Table.svelte.d.ts
+++ b/types/DataTable/Table.svelte.d.ts
@@ -5,6 +5,7 @@ export interface TableProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the table
+ * @default undefined
*/
size?: "compact" | "short" | "medium" | "tall";
diff --git a/types/DatePicker/DatePickerInput.svelte.d.ts b/types/DatePicker/DatePickerInput.svelte.d.ts
index 0e9c4a48..f7ed48a5 100644
--- a/types/DatePicker/DatePickerInput.svelte.d.ts
+++ b/types/DatePicker/DatePickerInput.svelte.d.ts
@@ -5,6 +5,7 @@ export interface DatePickerInputProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -88,6 +89,7 @@ export interface DatePickerInputProps
/**
* Set a name for the input element
+ * @default undefined
*/
name?: string;
diff --git a/types/Dropdown/Dropdown.svelte.d.ts b/types/Dropdown/Dropdown.svelte.d.ts
index 1d410992..79054f9e 100644
--- a/types/Dropdown/Dropdown.svelte.d.ts
+++ b/types/Dropdown/Dropdown.svelte.d.ts
@@ -26,6 +26,7 @@ export interface DropdownProps
/**
* Specify the selected item id
+ * @default undefined
*/
selectedId?: DropdownItemId;
@@ -43,6 +44,7 @@ export interface DropdownProps
/**
* Specify the size of the dropdown field
+ * @default undefined
*/
size?: "sm" | "lg" | "xl";
@@ -108,6 +110,7 @@ export interface DropdownProps
/**
* Specify the list box label
+ * @default undefined
*/
label?: string;
@@ -119,6 +122,7 @@ export interface DropdownProps
/**
* Override the default translation ids
+ * @default undefined
*/
translateWithId?: (id: any) => string;
@@ -130,6 +134,7 @@ export interface DropdownProps
/**
* Specify a name attribute for the list box
+ * @default undefined
*/
name?: string;
diff --git a/types/Grid/Column.svelte.d.ts b/types/Grid/Column.svelte.d.ts
index eda8ac8f..1fc48b20 100644
--- a/types/Grid/Column.svelte.d.ts
+++ b/types/Grid/Column.svelte.d.ts
@@ -45,31 +45,37 @@ export interface ColumnProps
/**
* Specify the aspect ratio of the column
+ * @default undefined
*/
aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
/**
* Set the small breakpoint
+ * @default undefined
*/
sm?: ColumnBreakpoint;
/**
* Set the medium breakpoint
+ * @default undefined
*/
md?: ColumnBreakpoint;
/**
* Set the large breakpoint
+ * @default undefined
*/
lg?: ColumnBreakpoint;
/**
* Set the extra large breakpoint
+ * @default undefined
*/
xlg?: ColumnBreakpoint;
/**
* Set the maximum breakpoint
+ * @default undefined
*/
max?: ColumnBreakpoint;
}
diff --git a/types/Icon/Icon.svelte.d.ts b/types/Icon/Icon.svelte.d.ts
index 19977ced..8e59b72a 100644
--- a/types/Icon/Icon.svelte.d.ts
+++ b/types/Icon/Icon.svelte.d.ts
@@ -7,6 +7,7 @@ export interface IconProps
svelte.JSX.HTMLAttributes {
/**
* Specify the icon to render
+ * @default undefined
*/
render?: typeof import("svelte").SvelteComponent;
diff --git a/types/ImageLoader/ImageLoader.svelte.d.ts b/types/ImageLoader/ImageLoader.svelte.d.ts
index 926ad250..03d01b24 100644
--- a/types/ImageLoader/ImageLoader.svelte.d.ts
+++ b/types/ImageLoader/ImageLoader.svelte.d.ts
@@ -17,6 +17,7 @@ export interface ImageLoaderProps
/**
* Specify the aspect ratio for the image wrapper
+ * @default undefined
*/
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";
diff --git a/types/InlineLoading/InlineLoading.svelte.d.ts b/types/InlineLoading/InlineLoading.svelte.d.ts
index a9821f78..61bd8295 100644
--- a/types/InlineLoading/InlineLoading.svelte.d.ts
+++ b/types/InlineLoading/InlineLoading.svelte.d.ts
@@ -11,11 +11,13 @@ export interface InlineLoadingProps
/**
* Set the loading description
+ * @default undefined
*/
description?: string;
/**
* Specify the ARIA label for the loading icon
+ * @default undefined
*/
iconDescription?: string;
diff --git a/types/Link/Link.svelte.d.ts b/types/Link/Link.svelte.d.ts
index 5a5efca3..09e59acb 100644
--- a/types/Link/Link.svelte.d.ts
+++ b/types/Link/Link.svelte.d.ts
@@ -5,11 +5,13 @@ export interface LinkProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the size of the link
+ * @default undefined
*/
size?: "sm" | "lg";
/**
* Specify the href value
+ * @default undefined
*/
href?: string;
@@ -22,6 +24,7 @@ export interface LinkProps
/**
* Specify the icon to render
* `inline` must be `false`
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/ListBox/ListBox.svelte.d.ts b/types/ListBox/ListBox.svelte.d.ts
index 5dc8c898..2a08eccc 100644
--- a/types/ListBox/ListBox.svelte.d.ts
+++ b/types/ListBox/ListBox.svelte.d.ts
@@ -5,6 +5,7 @@ export interface ListBoxProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the list box
+ * @default undefined
*/
size?: "sm" | "xl";
diff --git a/types/ListBox/ListBoxSelection.svelte.d.ts b/types/ListBox/ListBoxSelection.svelte.d.ts
index 0b4e9337..ceaa25d6 100644
--- a/types/ListBox/ListBoxSelection.svelte.d.ts
+++ b/types/ListBox/ListBoxSelection.svelte.d.ts
@@ -7,6 +7,7 @@ export interface ListBoxSelectionProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the number of selected items
+ * @default undefined
*/
selectionCount?: number;
diff --git a/types/Modal/Modal.svelte.d.ts b/types/Modal/Modal.svelte.d.ts
index 0caf5e93..875a416b 100644
--- a/types/Modal/Modal.svelte.d.ts
+++ b/types/Modal/Modal.svelte.d.ts
@@ -5,6 +5,7 @@ export interface ModalProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the modal
+ * @default undefined
*/
size?: "xs" | "sm" | "lg";
@@ -34,16 +35,19 @@ export interface ModalProps
/**
* Specify the modal heading
+ * @default undefined
*/
modalHeading?: string;
/**
* Specify the modal label
+ * @default undefined
*/
modalLabel?: string;
/**
* Specify the ARIA label for the modal
+ * @default undefined
*/
modalAriaLabel?: string;
diff --git a/types/MultiSelect/MultiSelect.svelte.d.ts b/types/MultiSelect/MultiSelect.svelte.d.ts
index dd5ceb30..a568e26f 100644
--- a/types/MultiSelect/MultiSelect.svelte.d.ts
+++ b/types/MultiSelect/MultiSelect.svelte.d.ts
@@ -38,6 +38,7 @@ export interface MultiSelectProps
/**
* Set the size of the combobox
+ * @default undefined
*/
size?: "sm" | "lg" | "xl";
@@ -113,6 +114,7 @@ export interface MultiSelectProps
/**
* Override the default translation ids
+ * @default undefined
*/
translateWithId?: (id: any) => string;
@@ -178,6 +180,7 @@ export interface MultiSelectProps
/**
* Specify a name attribute for the select
+ * @default undefined
*/
name?: string;
diff --git a/types/Notification/NotificationButton.svelte.d.ts b/types/Notification/NotificationButton.svelte.d.ts
index 682c819f..9bf3b372 100644
--- a/types/Notification/NotificationButton.svelte.d.ts
+++ b/types/Notification/NotificationButton.svelte.d.ts
@@ -11,11 +11,13 @@ export interface NotificationButtonProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the title of the icon
+ * @default undefined
*/
title?: string;
diff --git a/types/NumberInput/NumberInput.svelte.d.ts b/types/NumberInput/NumberInput.svelte.d.ts
index 7744f1e1..b05fb9f6 100644
--- a/types/NumberInput/NumberInput.svelte.d.ts
+++ b/types/NumberInput/NumberInput.svelte.d.ts
@@ -7,6 +7,7 @@ export interface NumberInputProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -24,11 +25,13 @@ export interface NumberInputProps
/**
* Specify the maximum value
+ * @default undefined
*/
max?: number;
/**
* Specify the minimum value
+ * @default undefined
*/
min?: number;
@@ -130,6 +133,7 @@ export interface NumberInputProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/OverflowMenu/OverflowMenu.svelte.d.ts b/types/OverflowMenu/OverflowMenu.svelte.d.ts
index 823a6a4b..9cc327b2 100644
--- a/types/OverflowMenu/OverflowMenu.svelte.d.ts
+++ b/types/OverflowMenu/OverflowMenu.svelte.d.ts
@@ -5,6 +5,7 @@ export interface OverflowMenuProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the size of the overflow menu
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -34,16 +35,19 @@ export interface OverflowMenuProps
/**
* Specify the menu options class
+ * @default undefined
*/
menuOptionsClass?: string;
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon class
+ * @default undefined
*/
iconClass?: string;
diff --git a/types/ProgressBar/ProgressBar.svelte.d.ts b/types/ProgressBar/ProgressBar.svelte.d.ts
index bd1d7ed7..7ee4d79b 100644
--- a/types/ProgressBar/ProgressBar.svelte.d.ts
+++ b/types/ProgressBar/ProgressBar.svelte.d.ts
@@ -5,6 +5,7 @@ export interface ProgressBarProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the current value
+ * @default undefined
*/
value?: number;
diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
index 3b0f95db..3dc57d0a 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -5,6 +5,7 @@ export interface RadioButtonGroupProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the selected radio button value
+ * @default undefined
*/
selected?: string;
@@ -34,6 +35,7 @@ export interface RadioButtonGroupProps
/**
* Set an id for the container div element
+ * @default undefined
*/
id?: string;
}
diff --git a/types/Search/Search.svelte.d.ts b/types/Search/Search.svelte.d.ts
index 143e02a5..ade7a549 100644
--- a/types/Search/Search.svelte.d.ts
+++ b/types/Search/Search.svelte.d.ts
@@ -93,6 +93,7 @@ export interface SearchProps {
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/Select/Select.svelte.d.ts b/types/Select/Select.svelte.d.ts
index 7d573125..05fcc27b 100644
--- a/types/Select/Select.svelte.d.ts
+++ b/types/Select/Select.svelte.d.ts
@@ -5,11 +5,13 @@ export interface SelectProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the selected item value
+ * @default undefined
*/
selected?: string;
/**
* Set the size of the select input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -39,6 +41,7 @@ export interface SelectProps
/**
* Specify a name attribute for the select element
+ * @default undefined
*/
name?: string;
diff --git a/types/StructuredList/StructuredList.svelte.d.ts b/types/StructuredList/StructuredList.svelte.d.ts
index e18d31bb..98593117 100644
--- a/types/StructuredList/StructuredList.svelte.d.ts
+++ b/types/StructuredList/StructuredList.svelte.d.ts
@@ -5,6 +5,7 @@ export interface StructuredListProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the selected structured list row value
+ * @default undefined
*/
selected?: string;
diff --git a/types/Tag/Tag.svelte.d.ts b/types/Tag/Tag.svelte.d.ts
index fd6cb90b..75dffdd7 100644
--- a/types/Tag/Tag.svelte.d.ts
+++ b/types/Tag/Tag.svelte.d.ts
@@ -6,6 +6,7 @@ export interface TagProps
svelte.JSX.HTMLAttributes {
/**
* Specify the type of tag
+ * @default undefined
*/
type?:
| "red"
@@ -58,6 +59,7 @@ export interface TagProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/TextArea/TextArea.svelte.d.ts b/types/TextArea/TextArea.svelte.d.ts
index 71d4d6c0..3f59c35b 100644
--- a/types/TextArea/TextArea.svelte.d.ts
+++ b/types/TextArea/TextArea.svelte.d.ts
@@ -77,6 +77,7 @@ export interface TextAreaProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/TextInput/PasswordInput.svelte.d.ts b/types/TextInput/PasswordInput.svelte.d.ts
index defdfffc..b705039b 100644
--- a/types/TextInput/PasswordInput.svelte.d.ts
+++ b/types/TextInput/PasswordInput.svelte.d.ts
@@ -5,6 +5,7 @@ export interface PasswordInputProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -118,6 +119,7 @@ export interface PasswordInputProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts
index 3ac1a155..511dab39 100644
--- a/types/TextInput/TextInput.svelte.d.ts
+++ b/types/TextInput/TextInput.svelte.d.ts
@@ -5,6 +5,7 @@ export interface TextInputProps
extends svelte.JSX.HTMLAttributes {
/**
* Set the size of the input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -52,6 +53,7 @@ export interface TextInputProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/Theme/Theme.svelte.d.ts b/types/Theme/Theme.svelte.d.ts
index 16d10f38..211e180a 100644
--- a/types/Theme/Theme.svelte.d.ts
+++ b/types/Theme/Theme.svelte.d.ts
@@ -31,6 +31,7 @@ export interface ThemeProps {
/**
* Render a toggle or select dropdown to control the theme
+ * @default undefined
*/
render?: "toggle" | "select";
diff --git a/types/Tile/ClickableTile.svelte.d.ts b/types/Tile/ClickableTile.svelte.d.ts
index 0cae6f9f..0a2b43ed 100644
--- a/types/Tile/ClickableTile.svelte.d.ts
+++ b/types/Tile/ClickableTile.svelte.d.ts
@@ -24,6 +24,7 @@ export interface ClickableTileProps
/**
* Set the `href`
+ * @default undefined
*/
href?: string;
}
diff --git a/types/Tile/TileGroup.svelte.d.ts b/types/Tile/TileGroup.svelte.d.ts
index c9ee3884..fdd0124f 100644
--- a/types/Tile/TileGroup.svelte.d.ts
+++ b/types/Tile/TileGroup.svelte.d.ts
@@ -5,6 +5,7 @@ export interface TileGroupProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the selected tile value
+ * @default undefined
*/
selected?: string;
diff --git a/types/TimePicker/TimePicker.svelte.d.ts b/types/TimePicker/TimePicker.svelte.d.ts
index f5e9db5c..e39d6d7a 100644
--- a/types/TimePicker/TimePicker.svelte.d.ts
+++ b/types/TimePicker/TimePicker.svelte.d.ts
@@ -5,6 +5,7 @@ export interface TimePickerProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the size of the input
+ * @default undefined
*/
size?: "sm" | "xl";
@@ -82,6 +83,7 @@ export interface TimePickerProps
/**
* Specify a name attribute for the input
+ * @default undefined
*/
name?: string;
diff --git a/types/TimePicker/TimePickerSelect.svelte.d.ts b/types/TimePicker/TimePickerSelect.svelte.d.ts
index 7d970c9b..7d4607d6 100644
--- a/types/TimePicker/TimePickerSelect.svelte.d.ts
+++ b/types/TimePicker/TimePickerSelect.svelte.d.ts
@@ -40,6 +40,7 @@ export interface TimePickerSelectProps
/**
* Specify a name attribute for the select element
+ * @default undefined
*/
name?: string;
diff --git a/types/Toggle/Toggle.svelte.d.ts b/types/Toggle/Toggle.svelte.d.ts
index c756b5c4..2fe9b233 100644
--- a/types/Toggle/Toggle.svelte.d.ts
+++ b/types/Toggle/Toggle.svelte.d.ts
@@ -47,6 +47,7 @@ export interface ToggleProps
/**
* Specify a name attribute for the checkbox input
+ * @default undefined
*/
name?: string;
}
diff --git a/types/ToggleSmall/ToggleSmall.svelte.d.ts b/types/ToggleSmall/ToggleSmall.svelte.d.ts
index c3a37f6f..00de1e1b 100644
--- a/types/ToggleSmall/ToggleSmall.svelte.d.ts
+++ b/types/ToggleSmall/ToggleSmall.svelte.d.ts
@@ -41,6 +41,7 @@ export interface ToggleSmallProps
/**
* Specify a name attribute for the checkbox input
+ * @default undefined
*/
name?: string;
}
diff --git a/types/Tooltip/Tooltip.svelte.d.ts b/types/Tooltip/Tooltip.svelte.d.ts
index 5e6f28ed..347c4e96 100644
--- a/types/Tooltip/Tooltip.svelte.d.ts
+++ b/types/Tooltip/Tooltip.svelte.d.ts
@@ -30,6 +30,7 @@ export interface TooltipProps
/**
* Specify the icon to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`)
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/TooltipIcon/TooltipIcon.svelte.d.ts b/types/TooltipIcon/TooltipIcon.svelte.d.ts
index c648f307..bfa44f51 100644
--- a/types/TooltipIcon/TooltipIcon.svelte.d.ts
+++ b/types/TooltipIcon/TooltipIcon.svelte.d.ts
@@ -12,6 +12,7 @@ export interface TooltipIconProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/UIShell/GlobalHeader/Header.svelte.d.ts b/types/UIShell/GlobalHeader/Header.svelte.d.ts
index e6dd5d9a..b9dd70ac 100644
--- a/types/UIShell/GlobalHeader/Header.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/Header.svelte.d.ts
@@ -17,16 +17,19 @@ export interface HeaderProps
/**
* Specify the ARIA label for the header
+ * @default undefined
*/
uiShellAriaLabel?: string;
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
/**
* Specify the company name
+ * @default undefined
*/
company?: string;
@@ -64,12 +67,14 @@ export interface HeaderProps
/**
* Specify the icon to render for the closed state
* Defaults to `Menu20`
+ * @default undefined
*/
iconMenu?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon to render for the opened state
* Defaults to `Close20`
+ * @default undefined
*/
iconClose?: typeof import("svelte").SvelteComponent;
}
diff --git a/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts
index 1b35128f..836f1bc5 100644
--- a/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts
@@ -17,17 +17,20 @@ export interface HeaderActionProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon to render when the action panel is open
+ * @default undefined
*/
closeIcon?: typeof import("svelte").SvelteComponent;
/**
* Specify the text
* Alternatively, use the named slot "text" (e.g., ...
)
+ * @default undefined
*/
text?: string;
diff --git a/types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts
index 3ac65409..bd2f03aa 100644
--- a/types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts
@@ -11,11 +11,13 @@ export interface HeaderActionLinkProps
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/UIShell/GlobalHeader/HeaderNav.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderNav.svelte.d.ts
index 7b6cf9b1..20bbd3df 100644
--- a/types/UIShell/GlobalHeader/HeaderNav.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderNav.svelte.d.ts
@@ -5,6 +5,7 @@ export interface HeaderNavProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the ARIA label for the nav
+ * @default undefined
*/
ariaLabel?: string;
}
diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.svelte.d.ts
index 4144a4a6..db31521f 100644
--- a/types/UIShell/GlobalHeader/HeaderNavItem.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderNavItem.svelte.d.ts
@@ -5,11 +5,13 @@ export interface HeaderNavItemProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
/**
* Specify the text
+ * @default undefined
*/
text?: string;
diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.svelte.d.ts
index feb88eb1..95a49b5c 100644
--- a/types/UIShell/GlobalHeader/HeaderNavMenu.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderNavMenu.svelte.d.ts
@@ -17,6 +17,7 @@ export interface HeaderNavMenuProps
/**
* Specify the text
+ * @default undefined
*/
text?: string;
diff --git a/types/UIShell/GlobalHeader/HeaderPanelLink.svelte.d.ts b/types/UIShell/GlobalHeader/HeaderPanelLink.svelte.d.ts
index 05b0e0d8..13e9e3a3 100644
--- a/types/UIShell/GlobalHeader/HeaderPanelLink.svelte.d.ts
+++ b/types/UIShell/GlobalHeader/HeaderPanelLink.svelte.d.ts
@@ -5,6 +5,7 @@ export interface HeaderPanelLinkProps
extends svelte.JSX.HTMLAttributes {
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
diff --git a/types/UIShell/HeaderGlobalAction.svelte.d.ts b/types/UIShell/HeaderGlobalAction.svelte.d.ts
index 113c0fd2..6161050f 100644
--- a/types/UIShell/HeaderGlobalAction.svelte.d.ts
+++ b/types/UIShell/HeaderGlobalAction.svelte.d.ts
@@ -11,6 +11,7 @@ export interface HeaderGlobalActionProps
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/UIShell/SideNav/SideNav.svelte.d.ts b/types/UIShell/SideNav/SideNav.svelte.d.ts
index 0d7a2a5b..39a5716c 100644
--- a/types/UIShell/SideNav/SideNav.svelte.d.ts
+++ b/types/UIShell/SideNav/SideNav.svelte.d.ts
@@ -17,6 +17,7 @@ export interface SideNavProps
/**
* Specify the ARIA label for the nav
+ * @default undefined
*/
ariaLabel?: string;
diff --git a/types/UIShell/SideNav/SideNavLink.svelte.d.ts b/types/UIShell/SideNav/SideNavLink.svelte.d.ts
index 6cb66fc2..33d3795e 100644
--- a/types/UIShell/SideNav/SideNavLink.svelte.d.ts
+++ b/types/UIShell/SideNav/SideNavLink.svelte.d.ts
@@ -11,16 +11,19 @@ export interface SideNavLinkProps
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
/**
* Specify the text
+ * @default undefined
*/
text?: string;
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/UIShell/SideNav/SideNavMenu.svelte.d.ts b/types/UIShell/SideNav/SideNavMenu.svelte.d.ts
index 02e155b3..60e834f2 100644
--- a/types/UIShell/SideNav/SideNavMenu.svelte.d.ts
+++ b/types/UIShell/SideNav/SideNavMenu.svelte.d.ts
@@ -11,11 +11,13 @@ export interface SideNavMenuProps
/**
* Specify the text
+ * @default undefined
*/
text?: string;
/**
* Specify the icon to render
+ * @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;
diff --git a/types/UIShell/SideNav/SideNavMenuItem.svelte.d.ts b/types/UIShell/SideNav/SideNavMenuItem.svelte.d.ts
index 950ebb12..9e761e73 100644
--- a/types/UIShell/SideNav/SideNavMenuItem.svelte.d.ts
+++ b/types/UIShell/SideNav/SideNavMenuItem.svelte.d.ts
@@ -11,11 +11,13 @@ export interface SideNavMenuItemProps
/**
* Specify the `href` attribute
+ * @default undefined
*/
href?: string;
/**
* Specify the item text
+ * @default undefined
*/
text?: string;
diff --git a/yarn.lock b/yarn.lock
index a747e14b..ee2863c2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2292,10 +2292,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies:
has-flag "^4.0.0"
-sveld@^0.11.1:
- version "0.11.1"
- resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.11.1.tgz#2b24fb8dae6fcd9bb14f826c89480cf88b079dca"
- integrity sha512-cb6sUB6yVomLgeDny0sXSGxgNGrwYPg8CHuI0k80DcGFNF2ML6k7yZeVeFjWjh2Tmj8+/PgSLJj5IYuZEjyQVA==
+sveld@^0.12.1:
+ version "0.12.1"
+ resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.12.1.tgz#1b632b5caa14fbe35983d78f9ddebc5977cb12a3"
+ integrity sha512-5tsMeTV+HIGAXqM9Qjdei+HxvjJhFOpfG7ETFugLeHXQpG9QFU23cQrBZyCpMwTUEGhyHXjplHtmsgOqoq9gmQ==
dependencies:
"@rollup/plugin-node-resolve" "^11.0.1"
acorn "^8.4.1"