mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +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

278
COMPONENT_INDEX.md
View file

@ -184,9 +184,9 @@
### Props
| 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 |
| 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 |
| skeleton | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
@ -239,10 +239,10 @@
### Props
| 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 |
| 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 |
### Slots
@ -305,8 +305,8 @@ None.
### Props
| 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 |
### Slots
@ -361,7 +361,7 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| 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 |
| 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 |
### 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 |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the button icon |
| 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> | <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` |
| 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;) |
| 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 |
| 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 |
| 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 |
| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ |
| 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 |
| 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 |
| 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 |
| 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 |
### Slots
@ -517,11 +517,11 @@ None.
### Props
| 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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| copyLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label of the copy button |
| 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> | <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 |
| 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" |
@ -620,18 +620,18 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props
| 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;) |
| 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 |
| 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 |
| 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 |
| sm | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the small breakpoint |
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the medium breakpoint |
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the large breakpoint |
| xlg | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the extra large breakpoint |
| max | <code>let</code> | No | <code>ColumnBreakpoint</code> | -- | Set the maximum breakpoint |
| 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> | <code>undefined</code> | Set the small breakpoint |
| md | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the medium breakpoint |
| lg | <code>let</code> | No | <code>ColumnBreakpoint</code> | <code>undefined</code> | Set the 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> | <code>undefined</code> | Set the maximum breakpoint |
### 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
@ -679,9 +679,9 @@ export interface ComboBoxItem {
| 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 |
| 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 |
| 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 |
### 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 |
| 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 |
| 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 |
@ -758,10 +758,10 @@ None.
### Props
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
@ -922,7 +922,7 @@ None.
| 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 |
| 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 |
### Slots
@ -981,14 +981,14 @@ export interface DataTableCell {
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
@ -1031,10 +1031,10 @@ export interface DataTableCell {
### Props
| 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 |
| 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 |
| 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 |
@ -1095,7 +1095,7 @@ None.
| 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 |
| 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 |
| 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 |
@ -1109,7 +1109,7 @@ None.
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| 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 |
| 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
@ -1576,18 +1576,18 @@ None.
### Props
| 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 |
| 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 |
| uiShellAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the header |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| company | <code>let</code> | No | <code>string</code> | -- | Specify the company name |
| 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> | <code>undefined</code> | Specify the `href` attribute |
| 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;) |
| 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 |
| iconMenu | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</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` |
| 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> | <code>undefined</code> | Specify the icon to render for the opened state<br />Defaults to `Close20` |
### 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 |
| 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 |
| closeIcon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</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;) |
| 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> | <code>undefined</code> | Specify the icon to render when the action panel is open |
| 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 |
### Slots
@ -1645,11 +1645,11 @@ export interface HeaderActionSlideTransition {
### Props
| 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 |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| 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> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -1684,10 +1684,10 @@ None.
### Props
| 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 |
| 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
@ -1706,8 +1706,8 @@ None.
### Props
| 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
@ -1724,10 +1724,10 @@ None.
### Props
| 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 |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| 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 |
### Slots
@ -1752,11 +1752,11 @@ None.
### Props
| 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 |
| 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 |
| 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
@ -1798,9 +1798,9 @@ None.
### Props
| 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 |
| 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
@ -1893,8 +1893,8 @@ None.
### Props
| 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 |
### 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 |
| 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 |
| 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 |
| 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 |
@ -1965,10 +1965,10 @@ None.
### Props
| 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 |
| description | <code>let</code> | No | <code>string</code> | -- | Set the loading description |
| iconDescription | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the loading icon |
| description | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the loading description |
| 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" |
### Slots
@ -2024,12 +2024,12 @@ None.
### Props
| 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 |
| size | <code>let</code> | No | <code>"sm" &#124; "lg"</code> | -- | Specify the size of the link |
| href | <code>let</code> | No | <code>string</code> | -- | Specify the href value |
| 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> | <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 |
| 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 |
| visited | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow visited styles |
@ -2054,7 +2054,7 @@ None.
| 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 |
| 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 |
@ -2198,7 +2198,7 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| modalHeading | <code>let</code> | No | <code>string</code> | -- | Specify the modal heading |
| modalLabel | <code>let</code> | No | <code>string</code> | -- | Specify the modal label |
| modalAriaLabel | <code>let</code> | No | <code>string</code> | -- | Specify the ARIA label for the modal |
| modalHeading | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal heading |
| modalLabel | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the modal label |
| 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 |
| 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 |
@ -2351,13 +2351,13 @@ None.
### Props
| Prop name | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- |
| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- |
| 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 |
| 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 |
| 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 |
### Slots
@ -2426,7 +2426,7 @@ export interface MultiSelectItem {
| 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 |
| 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 |
| 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 |
@ -2437,7 +2437,7 @@ export interface MultiSelectItem {
| 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 |
| 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 |
| 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 |
@ -2448,7 +2448,7 @@ export interface MultiSelectItem {
| 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 |
| 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
@ -2493,8 +2493,8 @@ None.
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| title | <code>let</code> | No | <code>string</code> | -- | Specify the title of the icon |
| 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> | <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 |
### 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 |
| 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 |
| max | <code>let</code> | No | <code>number</code> | -- | Specify the maximum value |
| min | <code>let</code> | No | <code>number</code> | -- | Specify the minimum value |
| max | <code>let</code> | No | <code>number</code> | <code>undefined</code> | Specify the maximum 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 |
| 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 |
@ -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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
| menuOptionsClass | <code>let</code> | No | <code>string</code> | -- | Specify the menu options class |
| iconClass | <code>let</code> | No | <code>string</code> | -- | Specify the icon 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> | <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 |
| 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 |
| 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 |
| 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 |
| 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 |
@ -2841,7 +2841,7 @@ None.
| 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 |
| 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
@ -2896,7 +2896,7 @@ None.
| 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 |
| 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 |
@ -3027,12 +3027,12 @@ None.
| 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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
### Slots
@ -3231,13 +3231,13 @@ None.
| 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 |
| selected | <code>let</code> | Yes | <code>string</code> | -- | Specify the selected item value |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the select input |
| 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> | <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 |
| 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 |
| 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 |
| 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 |
@ -3361,11 +3361,11 @@ None.
### Props
| 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 |
| 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 |
| 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 |
### Slots
@ -3417,12 +3417,12 @@ None.
### Props
| 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 |
| 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 |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the text |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| 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> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -3439,11 +3439,11 @@ None.
### Props
| 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 |
| 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 |
| icon | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent</code> | -- | Specify the icon to render |
| 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> | <code>undefined</code> | Specify the icon to render |
### Slots
@ -3462,11 +3462,11 @@ None.
### Props
| 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 |
| 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 |
| text | <code>let</code> | No | <code>string</code> | -- | Specify the item text |
| href | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| text | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the item text |
### Slots
@ -3610,8 +3610,8 @@ None.
### Props
| 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 |
| 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 |
@ -3847,8 +3847,8 @@ None.
### Props
| 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 |
| 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 |
@ -4046,14 +4046,14 @@ None.
| 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> | -- |
| 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 |
| 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 |
| 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 |
### 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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |
| 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 |
@ -4284,8 +4284,8 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
| 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 |
| legend | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the legend text |
@ -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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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
@ -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 |
| 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 |
| 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 |
| 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 |
@ -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 |
| 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 |
| 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 |

2
package.json
View file

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

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
* @default undefined
*/
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
* @default undefined
*/
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"]> {
/**
* Set the `href` to use an anchor link
* @default undefined
*/
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 {
/**
* Determine the current Carbon grid breakpoint size
* @default undefined
*/
size?: BreakpointSize;

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

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

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

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

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

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

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

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

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

@ -5,6 +5,7 @@ export interface ComposedModalProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
/**
* Set the size of the composed modal
* @default undefined
*/
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
* @default undefined
*/
primaryClass?: string;
@ -35,6 +36,7 @@ export interface ModalFooterProps
/**
* Specify a class for the secondary button
* @default undefined
*/
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
* @default undefined
*/
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
* Icon is rendered to the left of the label text
* @default undefined
*/
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
* @default undefined
*/
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
* @default undefined
*/
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
* @default undefined
*/
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"]> {
/**
* Set the size of the table
* @default undefined
*/
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"]> {
/**
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
@ -88,6 +89,7 @@ export interface DatePickerInputProps
/**
* Set a name for the input element
* @default undefined
*/
name?: string;

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

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

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

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

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

@ -7,6 +7,7 @@ export interface IconProps
svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["svg"]> {
/**
* Specify the icon to render
* @default undefined
*/
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
* @default undefined
*/
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
* @default undefined
*/
description?: string;
/**
* Specify the ARIA label for the loading icon
* @default undefined
*/
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"]> {
/**
* Specify the size of the link
* @default undefined
*/
size?: "sm" | "lg";
/**
* Specify the href value
* @default undefined
*/
href?: string;
@ -22,6 +24,7 @@ export interface LinkProps
/**
* Specify the icon to render
* `inline` must be `false`
* @default undefined
*/
icon?: typeof import("svelte").SvelteComponent;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -93,6 +93,7 @@ export interface SearchProps {
/**
* Specify the icon to render
* @default undefined
*/
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"]> {
/**
* Specify the selected item value
* @default undefined
*/
selected?: string;
/**
* Set the size of the select input
* @default undefined
*/
size?: "sm" | "xl";
@ -39,6 +41,7 @@ export interface SelectProps
/**
* Specify a name attribute for the select element
* @default undefined
*/
name?: string;

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

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

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

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

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

@ -77,6 +77,7 @@ export interface TextAreaProps
/**
* Specify a name attribute for the input
* @default undefined
*/
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"]> {
/**
* Set the size of the input
* @default undefined
*/
size?: "sm" | "xl";
@ -118,6 +119,7 @@ export interface PasswordInputProps
/**
* Specify a name attribute for the input
* @default undefined
*/
name?: string;

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

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

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
* @default undefined
*/
render?: "toggle" | "select";

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

@ -24,6 +24,7 @@ export interface ClickableTileProps
/**
* Set the `href`
* @default undefined
*/
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"]> {
/**
* Specify the selected tile value
* @default undefined
*/
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"]> {
/**
* Specify the size of the input
* @default undefined
*/
size?: "sm" | "xl";
@ -82,6 +83,7 @@ export interface TimePickerProps
/**
* Specify a name attribute for the input
* @default undefined
*/
name?: string;

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
* @default undefined
*/
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
* @default undefined
*/
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
* @default undefined
*/
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
* Icon size must be 16px (e.g., `Add16`, `Task16`)
* @default undefined
*/
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
* @default undefined
*/
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
* @default undefined
*/
uiShellAriaLabel?: string;
/**
* Specify the `href` attribute
* @default undefined
*/
href?: string;
/**
* Specify the company name
* @default undefined
*/
company?: string;
@ -64,12 +67,14 @@ export interface HeaderProps
/**
* Specify the icon to render for the closed state
* Defaults to `Menu20`
* @default undefined
*/
iconMenu?: typeof import("svelte").SvelteComponent;
/**
* Specify the icon to render for the opened state
* Defaults to `Close20`
* @default undefined
*/
iconClose?: typeof import("svelte").SvelteComponent;
}

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

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

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

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

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

@ -5,6 +5,7 @@ export interface HeaderNavProps
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["nav"]> {
/**
* Specify the ARIA label for the nav
* @default undefined
*/
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"]> {
/**
* Specify the `href` attribute
* @default undefined
*/
href?: string;
/**
* Specify the text
* @default undefined
*/
text?: string;

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

@ -17,6 +17,7 @@ export interface HeaderNavMenuProps
/**
* Specify the text
* @default undefined
*/
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"]> {
/**
* Specify the `href` attribute
* @default undefined
*/
href?: string;

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

@ -11,6 +11,7 @@ export interface HeaderGlobalActionProps
/**
* Specify the icon to render
* @default undefined
*/
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
* @default undefined
*/
ariaLabel?: string;

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

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

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

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

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

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

8
yarn.lock
View file

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