mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 12:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Re-run "yarn build:lib"

Browse source
This commit is contained in:
Eric Liu 2022-01-20 19:25:20 -08:00
commit d87473f63e
1 changed files with 255 additions and 255 deletions
Download patch file Download diff file Expand all files Collapse all files

510
COMPONENT_INDEX.md
View file

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