mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(types): include @default annotations for props that are undefined by default (#1020)

Browse source 
* chore(deps-dev): upgrade sveld to v0.12.1

* Run "yarn build:lib"

* Re-run "yarn build:lib"
This commit is contained in:
Eric Liu 2022-01-20 19:29:06 -08:00 • committed by GitHub
commit 0d78c30b9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 373 additions and 260 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 |

2
package.json
View file

@ -41,7 +41,7 @@
"rollup-plugin-svelte": "^7.1.0", "rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2", "rollup-plugin-terser": "^7.0.2",
"sass": "^1.42.1", "sass": "^1.42.1",
"sveld": "^0.11.1", "sveld": "^0.12.1",
"svelte": "^3.45.0", "svelte": "^3.45.0",
"svelte-check": "^1.1.32", "svelte-check": "^1.1.32",
"typescript": "^4.1.3" "typescript": "^4.1.3"

1
types/Accordion/Accordion.svelte.d.ts vendored
View file

@ -11,6 +11,7 @@ export interface AccordionProps extends AccordionSkeletonProps {
/** /**
* Specify the size of the accordion * Specify the size of the accordion
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";

1
types/Accordion/AccordionSkeleton.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface AccordionSkeletonProps
/** /**
* Specify the size of the accordion * Specify the size of the accordion
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";

1
types/Breadcrumb/BreadcrumbItem.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface BreadcrumbItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["li"]> {
/** /**
* Set the `href` to use an anchor link * Set the `href` to use an anchor link
* @default undefined
*/ */
href?: string; href?: string;

1
types/Breakpoint/Breakpoint.svelte.d.ts vendored
View file

@ -8,6 +8,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
export interface BreakpointProps { export interface BreakpointProps {
/** /**
* Determine the current Carbon grid breakpoint size * Determine the current Carbon grid breakpoint size
* @default undefined
*/ */
size?: BreakpointSize; size?: BreakpointSize;

3
types/Button/Button.svelte.d.ts vendored
View file

@ -46,11 +46,13 @@ export interface ButtonProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the ARIA label for the button icon * Specify the ARIA label for the button icon
* @default undefined
*/ */
iconDescription?: string; iconDescription?: string;
@ -88,6 +90,7 @@ export interface ButtonProps
/** /**
* Set the `href` to use an anchor link * Set the `href` to use an anchor link
* @default undefined
*/ */
href?: string; href?: string;

1
types/Button/ButtonSkeleton.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface ButtonSkeletonProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/** /**
* Set the `href` to use an anchor link * Set the `href` to use an anchor link
* @default undefined
*/ */
href?: string; href?: string;

1
types/Checkbox/Checkbox.svelte.d.ts vendored
View file

@ -64,6 +64,7 @@ export interface CheckboxProps {
/** /**
* Specify the title attribute for the label element * Specify the title attribute for the label element
* @default undefined
*/ */
title?: string; title?: string;

3
types/CodeSnippet/CodeSnippet.svelte.d.ts vendored
View file

@ -12,6 +12,7 @@ export interface CodeSnippetProps {
* Set the code snippet text * Set the code snippet text
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) * Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
* You must use the `code` prop to copy the code * You must use the `code` prop to copy the code
* @default undefined
*/ */
code?: string; code?: string;
@ -61,11 +62,13 @@ export interface CodeSnippetProps {
/** /**
* Specify the ARIA label for the copy button icon * Specify the ARIA label for the copy button icon
* @default undefined
*/ */
copyButtonDescription?: string; copyButtonDescription?: string;
/** /**
* Specify the ARIA label of the copy button * Specify the ARIA label of the copy button
* @default undefined
*/ */
copyLabel?: string; copyLabel?: string;

4
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -24,6 +24,7 @@ export interface ComboBoxProps
/** /**
* Set the selected item by value id * Set the selected item by value id
* @default undefined
*/ */
selectedId?: ComboBoxItemId; selectedId?: ComboBoxItemId;
@ -41,6 +42,7 @@ export interface ComboBoxProps
/** /**
* Set the size of the combobox * Set the size of the combobox
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -112,6 +114,7 @@ export interface ComboBoxProps
/** /**
* Override the default translation ids * Override the default translation ids
* @default undefined
*/ */
translateWithId?: (id: any) => string; translateWithId?: (id: any) => string;
@ -123,6 +126,7 @@ export interface ComboBoxProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

1
types/ComposedModal/ComposedModal.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface ComposedModalProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set the size of the composed modal * Set the size of the composed modal
* @default undefined
*/ */
size?: "xs" | "sm" | "lg"; size?: "xs" | "sm" | "lg";

2
types/ComposedModal/ModalFooter.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface ModalFooterProps
/** /**
* Specify a class for the primary button * Specify a class for the primary button
* @default undefined
*/ */
primaryClass?: string; primaryClass?: string;
@ -35,6 +36,7 @@ export interface ModalFooterProps
/** /**
* Specify a class for the secondary button * Specify a class for the secondary button
* @default undefined
*/ */
secondaryClass?: string; secondaryClass?: string;

1
types/ContentSwitcher/ContentSwitcher.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface ContentSwitcherProps
/** /**
* Specify the size of the content switcher * Specify the size of the content switcher
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
} }

1
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -24,6 +24,7 @@ export interface ContextMenuOptionProps
/** /**
* Specify the icon to render * Specify the icon to render
* Icon is rendered to the left of the label text * Icon is rendered to the left of the label text
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/CopyButton/CopyButton.svelte.d.ts vendored
View file

@ -11,6 +11,7 @@ export interface CopyButtonProps extends CopyProps {
/** /**
* Specify the text to copy * Specify the text to copy
* @default undefined
*/ */
text?: string; text?: string;

1
types/DataTable/DataTable.svelte.d.ts vendored
View file

@ -53,6 +53,7 @@ export interface DataTableProps
/** /**
* Set the size of the data table * Set the size of the data table
* @default undefined
*/ */
size?: "compact" | "short" | "medium" | "tall"; size?: "compact" | "short" | "medium" | "tall";

1
types/DataTable/DataTableSkeleton.svelte.d.ts vendored
View file

@ -20,6 +20,7 @@ export interface DataTableSkeletonProps
/** /**
* Set the size of the data table * Set the size of the data table
* @default undefined
*/ */
size?: "compact" | "short" | "tall"; size?: "compact" | "short" | "tall";

1
types/DataTable/Table.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface TableProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["section"]> {
/** /**
* Set the size of the table * Set the size of the table
* @default undefined
*/ */
size?: "compact" | "short" | "medium" | "tall"; size?: "compact" | "short" | "medium" | "tall";

2
types/DatePicker/DatePickerInput.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface DatePickerInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Set the size of the input * Set the size of the input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -88,6 +89,7 @@ export interface DatePickerInputProps
/** /**
* Set a name for the input element * Set a name for the input element
* @default undefined
*/ */
name?: string; name?: string;

5
types/Dropdown/Dropdown.svelte.d.ts vendored
View file

@ -26,6 +26,7 @@ export interface DropdownProps
/** /**
* Specify the selected item id * Specify the selected item id
* @default undefined
*/ */
selectedId?: DropdownItemId; selectedId?: DropdownItemId;
@ -43,6 +44,7 @@ export interface DropdownProps
/** /**
* Specify the size of the dropdown field * Specify the size of the dropdown field
* @default undefined
*/ */
size?: "sm" | "lg" | "xl"; size?: "sm" | "lg" | "xl";
@ -108,6 +110,7 @@ export interface DropdownProps
/** /**
* Specify the list box label * Specify the list box label
* @default undefined
*/ */
label?: string; label?: string;
@ -119,6 +122,7 @@ export interface DropdownProps
/** /**
* Override the default translation ids * Override the default translation ids
* @default undefined
*/ */
translateWithId?: (id: any) => string; translateWithId?: (id: any) => string;
@ -130,6 +134,7 @@ export interface DropdownProps
/** /**
* Specify a name attribute for the list box * Specify a name attribute for the list box
* @default undefined
*/ */
name?: string; name?: string;

6
types/Grid/Column.svelte.d.ts vendored
View file

@ -45,31 +45,37 @@ export interface ColumnProps
/** /**
* Specify the aspect ratio of the column * Specify the aspect ratio of the column
* @default undefined
*/ */
aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"; aspectRatio?: "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1";
/** /**
* Set the small breakpoint * Set the small breakpoint
* @default undefined
*/ */
sm?: ColumnBreakpoint; sm?: ColumnBreakpoint;
/** /**
* Set the medium breakpoint * Set the medium breakpoint
* @default undefined
*/ */
md?: ColumnBreakpoint; md?: ColumnBreakpoint;
/** /**
* Set the large breakpoint * Set the large breakpoint
* @default undefined
*/ */
lg?: ColumnBreakpoint; lg?: ColumnBreakpoint;
/** /**
* Set the extra large breakpoint * Set the extra large breakpoint
* @default undefined
*/ */
xlg?: ColumnBreakpoint; xlg?: ColumnBreakpoint;
/** /**
* Set the maximum breakpoint * Set the maximum breakpoint
* @default undefined
*/ */
max?: ColumnBreakpoint; max?: ColumnBreakpoint;
} }

1
types/Icon/Icon.svelte.d.ts vendored
View file

@ -7,6 +7,7 @@ export interface IconProps
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> { svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
render?: typeof import("svelte").SvelteComponent; render?: typeof import("svelte").SvelteComponent;

1
types/ImageLoader/ImageLoader.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface ImageLoaderProps
/** /**
* Specify the aspect ratio for the image wrapper * Specify the aspect ratio for the image wrapper
* @default undefined
*/ */
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2";

2
types/InlineLoading/InlineLoading.svelte.d.ts vendored
View file

@ -11,11 +11,13 @@ export interface InlineLoadingProps
/** /**
* Set the loading description * Set the loading description
* @default undefined
*/ */
description?: string; description?: string;
/** /**
* Specify the ARIA label for the loading icon * Specify the ARIA label for the loading icon
* @default undefined
*/ */
iconDescription?: string; iconDescription?: string;

3
types/Link/Link.svelte.d.ts vendored
View file

@ -5,11 +5,13 @@ export interface LinkProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["p"]> {
/** /**
* Specify the size of the link * Specify the size of the link
* @default undefined
*/ */
size?: "sm" | "lg"; size?: "sm" | "lg";
/** /**
* Specify the href value * Specify the href value
* @default undefined
*/ */
href?: string; href?: string;
@ -22,6 +24,7 @@ export interface LinkProps
/** /**
* Specify the icon to render * Specify the icon to render
* `inline` must be `false` * `inline` must be `false`
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/ListBox/ListBox.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface ListBoxProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set the size of the list box * Set the size of the list box
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";

1
types/ListBox/ListBoxSelection.svelte.d.ts vendored
View file

@ -7,6 +7,7 @@ export interface ListBoxSelectionProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the number of selected items * Specify the number of selected items
* @default undefined
*/ */
selectionCount?: number; selectionCount?: number;

4
types/Modal/Modal.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface ModalProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set the size of the modal * Set the size of the modal
* @default undefined
*/ */
size?: "xs" | "sm" | "lg"; size?: "xs" | "sm" | "lg";
@ -34,16 +35,19 @@ export interface ModalProps
/** /**
* Specify the modal heading * Specify the modal heading
* @default undefined
*/ */
modalHeading?: string; modalHeading?: string;
/** /**
* Specify the modal label * Specify the modal label
* @default undefined
*/ */
modalLabel?: string; modalLabel?: string;
/** /**
* Specify the ARIA label for the modal * Specify the ARIA label for the modal
* @default undefined
*/ */
modalAriaLabel?: string; modalAriaLabel?: string;

3
types/MultiSelect/MultiSelect.svelte.d.ts vendored
View file

@ -38,6 +38,7 @@ export interface MultiSelectProps
/** /**
* Set the size of the combobox * Set the size of the combobox
* @default undefined
*/ */
size?: "sm" | "lg" | "xl"; size?: "sm" | "lg" | "xl";
@ -113,6 +114,7 @@ export interface MultiSelectProps
/** /**
* Override the default translation ids * Override the default translation ids
* @default undefined
*/ */
translateWithId?: (id: any) => string; translateWithId?: (id: any) => string;
@ -178,6 +180,7 @@ export interface MultiSelectProps
/** /**
* Specify a name attribute for the select * Specify a name attribute for the select
* @default undefined
*/ */
name?: string; name?: string;

2
types/Notification/NotificationButton.svelte.d.ts vendored
View file

@ -11,11 +11,13 @@ export interface NotificationButtonProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the title of the icon * Specify the title of the icon
* @default undefined
*/ */
title?: string; title?: string;

4
types/NumberInput/NumberInput.svelte.d.ts vendored
View file

@ -7,6 +7,7 @@ export interface NumberInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Set the size of the input * Set the size of the input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -24,11 +25,13 @@ export interface NumberInputProps
/** /**
* Specify the maximum value * Specify the maximum value
* @default undefined
*/ */
max?: number; max?: number;
/** /**
* Specify the minimum value * Specify the minimum value
* @default undefined
*/ */
min?: number; min?: number;
@ -130,6 +133,7 @@ export interface NumberInputProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

4
types/OverflowMenu/OverflowMenu.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface OverflowMenuProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Specify the size of the overflow menu * Specify the size of the overflow menu
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -34,16 +35,19 @@ export interface OverflowMenuProps
/** /**
* Specify the menu options class * Specify the menu options class
* @default undefined
*/ */
menuOptionsClass?: string; menuOptionsClass?: string;
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon class * Specify the icon class
* @default undefined
*/ */
iconClass?: string; iconClass?: string;

1
types/ProgressBar/ProgressBar.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface ProgressBarProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the current value * Specify the current value
* @default undefined
*/ */
value?: number; value?: number;

2
types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface RadioButtonGroupProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Set the selected radio button value * Set the selected radio button value
* @default undefined
*/ */
selected?: string; selected?: string;
@ -34,6 +35,7 @@ export interface RadioButtonGroupProps
/** /**
* Set an id for the container div element * Set an id for the container div element
* @default undefined
*/ */
id?: string; id?: string;
} }

1
types/Search/Search.svelte.d.ts vendored
View file

@ -93,6 +93,7 @@ export interface SearchProps {
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

3
types/Select/Select.svelte.d.ts vendored
View file

@ -5,11 +5,13 @@ export interface SelectProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the selected item value * Specify the selected item value
* @default undefined
*/ */
selected?: string; selected?: string;
/** /**
* Set the size of the select input * Set the size of the select input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -39,6 +41,7 @@ export interface SelectProps
/** /**
* Specify a name attribute for the select element * Specify a name attribute for the select element
* @default undefined
*/ */
name?: string; name?: string;

1
types/StructuredList/StructuredList.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface StructuredListProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/** /**
* Specify the selected structured list row value * Specify the selected structured list row value
* @default undefined
*/ */
selected?: string; selected?: string;

2
types/Tag/Tag.svelte.d.ts vendored
View file

@ -6,6 +6,7 @@ export interface TagProps
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> { svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["span"]> {
/** /**
* Specify the type of tag * Specify the type of tag
* @default undefined
*/ */
type?: type?:
| "red" | "red"
@ -58,6 +59,7 @@ export interface TagProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/TextArea/TextArea.svelte.d.ts vendored
View file

@ -77,6 +77,7 @@ export interface TextAreaProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

2
types/TextInput/PasswordInput.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface PasswordInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Set the size of the input * Set the size of the input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -118,6 +119,7 @@ export interface PasswordInputProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

2
types/TextInput/TextInput.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface TextInputProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Set the size of the input * Set the size of the input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -52,6 +53,7 @@ export interface TextInputProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

1
types/Theme/Theme.svelte.d.ts vendored
View file

@ -31,6 +31,7 @@ export interface ThemeProps {
/** /**
* Render a toggle or select dropdown to control the theme * Render a toggle or select dropdown to control the theme
* @default undefined
*/ */
render?: "toggle" | "select"; render?: "toggle" | "select";

1
types/Tile/ClickableTile.svelte.d.ts vendored
View file

@ -24,6 +24,7 @@ export interface ClickableTileProps
/** /**
* Set the `href` * Set the `href`
* @default undefined
*/ */
href?: string; href?: string;
} }

1
types/Tile/TileGroup.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface TileGroupProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["fieldset"]> {
/** /**
* Specify the selected tile value * Specify the selected tile value
* @default undefined
*/ */
selected?: string; selected?: string;

2
types/TimePicker/TimePicker.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface TimePickerProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
/** /**
* Specify the size of the input * Specify the size of the input
* @default undefined
*/ */
size?: "sm" | "xl"; size?: "sm" | "xl";
@ -82,6 +83,7 @@ export interface TimePickerProps
/** /**
* Specify a name attribute for the input * Specify a name attribute for the input
* @default undefined
*/ */
name?: string; name?: string;

1
types/TimePicker/TimePickerSelect.svelte.d.ts vendored
View file

@ -40,6 +40,7 @@ export interface TimePickerSelectProps
/** /**
* Specify a name attribute for the select element * Specify a name attribute for the select element
* @default undefined
*/ */
name?: string; name?: string;

1
types/Toggle/Toggle.svelte.d.ts vendored
View file

@ -47,6 +47,7 @@ export interface ToggleProps
/** /**
* Specify a name attribute for the checkbox input * Specify a name attribute for the checkbox input
* @default undefined
*/ */
name?: string; name?: string;
} }

1
types/ToggleSmall/ToggleSmall.svelte.d.ts vendored
View file

@ -41,6 +41,7 @@ export interface ToggleSmallProps
/** /**
* Specify a name attribute for the checkbox input * Specify a name attribute for the checkbox input
* @default undefined
*/ */
name?: string; name?: string;
} }

1
types/Tooltip/Tooltip.svelte.d.ts vendored
View file

@ -30,6 +30,7 @@ export interface TooltipProps
/** /**
* Specify the icon to render for the tooltip button * Specify the icon to render for the tooltip button
* Icon size must be 16px (e.g., `Add16`, `Task16`) * Icon size must be 16px (e.g., `Add16`, `Task16`)
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/TooltipIcon/TooltipIcon.svelte.d.ts vendored
View file

@ -12,6 +12,7 @@ export interface TooltipIconProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

5
types/UIShell/GlobalHeader/Header.svelte.d.ts vendored
View file

@ -17,16 +17,19 @@ export interface HeaderProps
/** /**
* Specify the ARIA label for the header * Specify the ARIA label for the header
* @default undefined
*/ */
uiShellAriaLabel?: string; uiShellAriaLabel?: string;
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;
/** /**
* Specify the company name * Specify the company name
* @default undefined
*/ */
company?: string; company?: string;
@ -64,12 +67,14 @@ export interface HeaderProps
/** /**
* Specify the icon to render for the closed state * Specify the icon to render for the closed state
* Defaults to `Menu20` * Defaults to `Menu20`
* @default undefined
*/ */
iconMenu?: typeof import("svelte").SvelteComponent; iconMenu?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon to render for the opened state * Specify the icon to render for the opened state
* Defaults to `Close20` * Defaults to `Close20`
* @default undefined
*/ */
iconClose?: typeof import("svelte").SvelteComponent; iconClose?: typeof import("svelte").SvelteComponent;
} }

3
types/UIShell/GlobalHeader/HeaderAction.svelte.d.ts vendored
View file

@ -17,17 +17,20 @@ export interface HeaderActionProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the icon to render when the action panel is open * Specify the icon to render when the action panel is open
* @default undefined
*/ */
closeIcon?: typeof import("svelte").SvelteComponent; closeIcon?: typeof import("svelte").SvelteComponent;
/** /**
* Specify the text * Specify the text
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) * Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
* @default undefined
*/ */
text?: string; text?: string;

2
types/UIShell/GlobalHeader/HeaderActionLink.svelte.d.ts vendored
View file

@ -11,11 +11,13 @@ export interface HeaderActionLinkProps
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/UIShell/GlobalHeader/HeaderNav.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface HeaderNavProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
/** /**
* Specify the ARIA label for the nav * Specify the ARIA label for the nav
* @default undefined
*/ */
ariaLabel?: string; ariaLabel?: string;
} }

2
types/UIShell/GlobalHeader/HeaderNavItem.svelte.d.ts vendored
View file

@ -5,11 +5,13 @@ export interface HeaderNavItemProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;
/** /**
* Specify the text * Specify the text
* @default undefined
*/ */
text?: string; text?: string;

1
types/UIShell/GlobalHeader/HeaderNavMenu.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface HeaderNavMenuProps
/** /**
* Specify the text * Specify the text
* @default undefined
*/ */
text?: string; text?: string;

1
types/UIShell/GlobalHeader/HeaderPanelLink.svelte.d.ts vendored
View file

@ -5,6 +5,7 @@ export interface HeaderPanelLinkProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> { extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;

1
types/UIShell/HeaderGlobalAction.svelte.d.ts vendored
View file

@ -11,6 +11,7 @@ export interface HeaderGlobalActionProps
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

1
types/UIShell/SideNav/SideNav.svelte.d.ts vendored
View file

@ -17,6 +17,7 @@ export interface SideNavProps
/** /**
* Specify the ARIA label for the nav * Specify the ARIA label for the nav
* @default undefined
*/ */
ariaLabel?: string; ariaLabel?: string;

3
types/UIShell/SideNav/SideNavLink.svelte.d.ts vendored
View file

@ -11,16 +11,19 @@ export interface SideNavLinkProps
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;
/** /**
* Specify the text * Specify the text
* @default undefined
*/ */
text?: string; text?: string;
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

2
types/UIShell/SideNav/SideNavMenu.svelte.d.ts vendored
View file

@ -11,11 +11,13 @@ export interface SideNavMenuProps
/** /**
* Specify the text * Specify the text
* @default undefined
*/ */
text?: string; text?: string;
/** /**
* Specify the icon to render * Specify the icon to render
* @default undefined
*/ */
icon?: typeof import("svelte").SvelteComponent; icon?: typeof import("svelte").SvelteComponent;

2
types/UIShell/SideNav/SideNavMenuItem.svelte.d.ts vendored
View file

@ -11,11 +11,13 @@ export interface SideNavMenuItemProps
/** /**
* Specify the `href` attribute * Specify the `href` attribute
* @default undefined
*/ */
href?: string; href?: string;
/** /**
* Specify the item text * Specify the item text
* @default undefined
*/ */
text?: string; text?: string;

8
yarn.lock
View file

@ -2292,10 +2292,10 @@ supports-color@^7.0.0, supports-color@^7.1.0:
dependencies: dependencies:
has-flag "^4.0.0" has-flag "^4.0.0"
sveld@^0.11.1: sveld@^0.12.1:
version "0.11.1" version "0.12.1"
resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.11.1.tgz#2b24fb8dae6fcd9bb14f826c89480cf88b079dca" resolved "https://registry.yarnpkg.com/sveld/-/sveld-0.12.1.tgz#1b632b5caa14fbe35983d78f9ddebc5977cb12a3"
integrity sha512-cb6sUB6yVomLgeDny0sXSGxgNGrwYPg8CHuI0k80DcGFNF2ML6k7yZeVeFjWjh2Tmj8+/PgSLJj5IYuZEjyQVA== integrity sha512-5tsMeTV+HIGAXqM9Qjdei+HxvjJhFOpfG7ETFugLeHXQpG9QFU23cQrBZyCpMwTUEGhyHXjplHtmsgOqoq9gmQ==
dependencies: dependencies:
"@rollup/plugin-node-resolve" "^11.0.1" "@rollup/plugin-node-resolve" "^11.0.1"
acorn "^8.4.1" acorn "^8.4.1"