diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 4a1ab68e..55a3d38f 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -194,9 +194,9 @@ | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | | title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the named slot "title" (e.g., <div slot="title">...</div>) | +| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | | iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -335,20 +335,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | | hasIconOnly | let | No | boolean | false | Set to `true` for the icon-only variant | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | iconDescription | let | No | string | -- | Specify the ARIA label for the button icon | | tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | | tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | +| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | disabled | let | No | boolean | false | Set to `true` to disable the button | | href | let | No | string | -- | Set the `href` to use an anchor link | | tabindex | let | No | string | "0" | Specify the tabindex | | type | let | No | string | "button" | Specify the `type` attribute for the button element | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -412,17 +412,17 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | checked | let | Yes | boolean | false | Specify whether the checkbox is checked | -| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only | | disabled | let | No | boolean | false | Set to `true` to disable the checkbox | -| labelText | let | No | string | "" | Specify the label text | +| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | name | let | No | string | "" | Set a name for the input element | | title | let | No | string | -- | Specify the title attribute for the label element | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label | +| labelText | let | No | string | "" | Specify the label text | ### Slots @@ -490,22 +490,22 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | | expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) | +| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | | hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | | wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | | light | let | No | boolean | false | Set to `true` to enable the light variant | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | copyButtonDescription | let | No | string | -- | Specify the ARIA label for the copy button icon | -| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | +| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) | | feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | | feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | | showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | | showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | ### Slots @@ -599,25 +599,25 @@ export interface ComboBoxItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | let | Yes | string | "" | Specify the selected combobox value | +| invalidText | let | No | string | "" | Specify the invalid state text | | selectedIndex | let | Yes | number | -1 | Set the selected item by value index | -| items | let | No | ComboBoxItem[] | [] | Set the combobox items | -| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| size | let | No | "sm" | "xl" | -- | Set the size of the combobox | +| value | let | Yes | string | "" | Specify the selected combobox value | +| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | disabled | let | No | boolean | false | Set to `true` to disable the combobox | | titleText | let | No | string | "" | Specify the title text of the combobox | | placeholder | let | No | string | "" | Specify the placeholder text | | helperText | let | No | string | "" | Specify the helper text | -| invalidText | let | No | string | "" | Specify the invalid state text | +| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| items | let | No | ComboBoxItem[] | [] | Set the combobox items | | shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | | translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | | name | let | No | string | -- | Specify a name attribute for the input | +| size | let | No | "sm" | "xl" | -- | Set the size of the combobox | +| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | ### Slots @@ -640,13 +640,13 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | | size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the composed modal | +| open | let | Yes | boolean | false | Set to `true` to open the modal | | danger | let | No | boolean | false | Set to `true` to use the danger variant | | preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | | containerClass | let | No | string | "" | Specify a class for the inner modal | | selectorPrimaryFocus | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -717,9 +717,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | | feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -797,20 +797,20 @@ export interface DataTableCell { | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | -| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | | expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | | rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | -| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | +| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | +| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | | zebra | let | No | boolean | false | Set to `true` to use zebra styles | | sortable | let | No | boolean | false | Set to `true` for the sortable variant | +| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | | batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | +| size | let | No | "compact" | "short" | "tall" | -- | Set the size of the data table | | radio | let | No | boolean | false | Set to `true` for the radio selection variant | +| title | let | No | string | "" | Specify the title of the data table | | batchSelection | let | No | boolean | false | Set to `true` to enable batch selection | +| description | let | No | string | "" | Specify the description of the data table | | stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -868,8 +868,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | Yes | number | string | "" | Specify the date picker input value | | datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | +| value | let | Yes | number | string | "" | Specify the date picker input value | | appendTo | let | No | HTMLElement | -- | Specify the element to append the calendar to | | dateFormat | let | No | string | "m/d/Y" | Specify the date format | | maxDate | let | No | null | string | Date | null | Specify the maximum date | @@ -901,19 +901,19 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | size | let | No | "sm" | "xl" | -- | Set the size of the input | -| type | let | No | string | "text" | Specify the input type | | placeholder | let | No | string | "" | Specify the input placeholder text | | pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | | disabled | let | No | boolean | false | Set to `true` to disable the input | | iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| type | let | No | string | "text" | Specify the input type | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | | name | let | No | string | -- | Set a name for the input element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -968,17 +968,16 @@ export interface DropdownItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| titleText | let | No | string | "" | Specify the title text | | selectedIndex | let | Yes | number | -1 | Specify the selected item index | -| items | let | No | DropdownItem[] | [] | Set the dropdown items | -| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | -| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | | size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field | +| items | let | No | DropdownItem[] | [] | Set the dropdown items | +| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| titleText | let | No | string | "" | Specify the title text | +| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | | helperText | let | No | string | "" | Specify the helper text | @@ -986,6 +985,7 @@ export interface DropdownItem { | translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | | name | let | No | string | -- | Specify a name attribute for the list box | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -1024,15 +1024,15 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level element | -| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | -| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | | expanded | let | Yes | boolean | false | Set to `true` to expand the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | +| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | +| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | | tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | | tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | | tabindex | let | No | string | "0" | Specify the tabindex | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level element | ### Slots @@ -1045,35 +1045,29 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | +| mouseleave | forwarded | -- | | click | forwarded | -- | | keypress | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | ## `FileUploader` -### Types - -```ts -export type Files = string[]; -``` - ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | -| files | let | Yes | Files | [] | Obtain the uploaded file names | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| accept | let | No | Files | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | | labelDescription | let | No | string | "" | Specify the label description | +| files | let | Yes | string[] | [] | Obtain the uploaded file names | +| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| accept | let | No | string[] | [] | Specify the accepted file types | | labelTitle | let | No | string | "" | Specify the label title | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | | buttonLabel | let | No | string | "" | Specify the button label | -| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | | name | let | No | string | "" | Specify a name attribute for the file button uploader input | +| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | ### Slots @@ -1081,40 +1075,34 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----------------- | -| add | dispatched | Files | -| remove | dispatched | Files | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keydown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------- | +| add | dispatched | FileList | +| remove | dispatched | FileList | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| keydown | forwarded | -- | ## `FileUploaderButton` -### Types - -```ts -export type Files = string[]; -``` - ### Props | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | labelText | let | Yes | string | "Add file" | Specify the label text | -| accept | let | No | Files | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| accept | let | No | string[] | [] | Specify the accepted file types | | disabled | let | No | boolean | false | Set to `true` to disable the input | | disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes | | kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | | role | let | No | string | "button" | Specify the label role | | tabindex | let | No | string | "0" | Specify `tabindex` attribute | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | "" | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1130,26 +1118,20 @@ None. ## `FileUploaderDropContainer` -### Types - -```ts -export type Files = string[]; -``` - ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| accept | let | No | Files | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| validateFiles | let | No | (files: Files) => Files | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | -| labelText | let | No | string | "Add file" | Specify the label text | -| role | let | No | string | "button" | Specify the `role` attribute of the drop container | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | +| accept | let | No | string[] | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | +| labelText | let | No | string | "Add file" | Specify the label text | +| role | let | No | string | "button" | Specify the `role` attribute of the drop container | +| disabled | let | No | boolean | false | Set to `true` to disable the input | +| tabindex | let | No | string | "0" | Specify `tabindex` attribute | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | let | No | string | "" | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1157,15 +1139,15 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----------------- | -| add | dispatched | Files | -| dragover | forwarded | -- | -| dragleave | forwarded | -- | -| drop | forwarded | -- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------- | +| add | dispatched | FileList | +| dragover | forwarded | -- | +| dragleave | forwarded | -- | +| drop | forwarded | -- | +| keydown | forwarded | -- | +| change | forwarded | -- | +| click | forwarded | -- | ## `FileUploaderItem` @@ -1372,14 +1354,14 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | | expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | | uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | | href | let | No | string | -- | Specify the `href` attribute | | company | let | No | string | -- | Specify the company name | | platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | | persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1411,10 +1393,10 @@ export interface HeaderActionSlideTransition { | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | isOpen | let | Yes | boolean | false | Set to `true` to open the panel | | icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | | text | let | No | string | -- | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | transition | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`)
Set to `false` to disable the transition | ### Slots @@ -1437,10 +1419,10 @@ export interface HeaderActionSlideTransition { | Prop name | Kind | Reactive | Type | Default value | Description | | :----------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | linkIsActive | let | No | boolean | false | Set to `true` to use the active state | | href | let | No | string | -- | Specify the `href` attribute | | icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1476,9 +1458,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | | isActive | let | No | boolean | false | Set to `true` to use the active variant | | icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | ### Slots @@ -1516,9 +1498,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | href | let | No | string | -- | Specify the `href` attribute | | text | let | No | string | -- | Specify the text | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1529,13 +1511,13 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | | click | forwarded | -- | +| blur | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keyup | forwarded | -- | | keydown | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `HeaderNavMenu` @@ -1543,10 +1525,10 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | | href | let | No | string | "/" | Specify the `href` attribute | | text | let | No | string | -- | Specify the text | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the chevron icon | ### Slots @@ -1559,6 +1541,7 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | +| blur | forwarded | -- | | keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | @@ -1566,7 +1549,6 @@ None. | mouseleave | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `HeaderPanelDivider` @@ -1590,8 +1572,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | href | let | No | string | -- | Specify the `href` attribute | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1637,11 +1619,11 @@ export interface HeaderSearchResult { | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- | -| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | | value | let | Yes | string | "" | Specify the search input value | +| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | results | let | No | HeaderSearchResult[] | [] | Render a list of search results | +| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index | ### Slots @@ -1657,11 +1639,11 @@ export interface HeaderSearchResult { | inactive | dispatched | any | | clear | dispatched | any | | select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } | +| keydown | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | -| keydown | forwarded | -- | ## `HeaderUtilities` @@ -1786,12 +1768,12 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | | size | let | No | "sm" | "lg" | -- | Specify the size of the link | | href | let | No | string | -- | Specify the href value | | inline | let | No | boolean | false | Set to `true` to use the inline variant | | disabled | let | No | boolean | false | Set to `true` to disable the checkbox | | visited | let | No | boolean | false | Set to `true` to allow visited styles | +| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -1847,13 +1829,13 @@ export type ListBoxFieldTranslationId = "close" | "open"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | | disabled | let | No | boolean | false | Set to `true` to disable the list box field | | role | let | No | string | "combobox" | Specify the role attribute | | tabindex | let | No | string | "-1" | Specify the tabindex | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | | translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | ### Slots @@ -1865,12 +1847,12 @@ export type ListBoxFieldTranslationId = "close" | "open"; | Event name | Type | Detail | | :--------- | :-------- | :----- | +| blur | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | | keydown | forwarded | -- | -| blur | forwarded | -- | ## `ListBoxMenu` @@ -1878,8 +1860,8 @@ export type ListBoxFieldTranslationId = "close" | "open"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | ### Slots @@ -1906,8 +1888,8 @@ export type ListBoxMenuIconTranslationId = "close" | "open"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- | | open | let | No | boolean | false | Set to `true` to open the list box menu icon | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | | translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | ### Slots @@ -1954,11 +1936,11 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | | selectionCount | let | No | any | -- | Specify the number of selected items | | disabled | let | No | boolean | false | Set to `true` to disable the list box selection | -| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | | translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | ### Slots @@ -2017,9 +1999,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | | open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | | danger | let | No | boolean | false | Set to `true` to use the danger variant | | alert | let | No | boolean | false | Set to `true` to enable alert mode | | passiveModal | let | No | boolean | false | Set to `true` to use the passive variant | @@ -2027,7 +2008,7 @@ None. | modalLabel | let | No | string | -- | Specify the modal label | | modalAriaLabel | let | No | string | -- | Specify the ARIA label for the modal | | iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | | hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | | primaryButtonText | let | No | string | "" | Specify the primary button text | | primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | @@ -2036,6 +2017,7 @@ None. | selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | | preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | ### Slots @@ -2049,11 +2031,11 @@ None. | Event name | Type | Detail | | :---------------------- | :--------- | :----- | +| mouseleave | forwarded | -- | | keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | | submit | dispatched | -- | | click:button--secondary | dispatched | -- | | close | dispatched | -- | @@ -2146,19 +2128,19 @@ export interface MultiSelectItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | | items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | +| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | +| value | let | Yes | string | "" | Specify the multiselect value | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | | size | let | No | "sm" | "lg" | "xl" | -- | Set the size of the combobox | | type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | | selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | | disabled | let | No | boolean | false | Set to `true` to disable the dropdown | | filterable | let | No | boolean | false | Set to `true` to filter items | | filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| name | let | No | string | -- | Specify a name attribute for the select | | light | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | let | No | string | "en" | Specify the locale | +| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | | placeholder | let | No | string | "" | Specify the placeholder text | | sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | | translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | @@ -2169,7 +2151,7 @@ export interface MultiSelectItem { | helperText | let | No | string | "" | Specify the helper text | | label | let | No | string | "" | Specify the list box label | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | -- | Specify a name attribute for the select | +| locale | let | No | string | "en" | Specify the locale | ### Slots @@ -2281,9 +2263,8 @@ export type NumberInputTranslationId = "increment" | "decrement"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | | value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | | step | let | No | number | 1 | Specify the step increment | | max | let | No | number | -- | Specify the maximum value | | min | let | No | number | -- | Specify the minimum value | @@ -2292,16 +2273,17 @@ export type NumberInputTranslationId = "increment" | "decrement"; | mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | | allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | | disabled | let | No | boolean | false | Set to `true` to disable the input | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | | helperText | let | No | string | "" | Specify the helper text | | label | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | ### Slots @@ -2371,18 +2353,18 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu | -| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | | light | let | No | boolean | false | Set to `true` to enable the light variant | | flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | | menuOptionsClass | let | No | string | -- | Specify the menu options class | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | +| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | | iconClass | let | No | string | -- | Specify the icon class | | iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| size | let | No | "sm" | "xl" | -- | Specify the size of the overflow menu | +| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | ### Slots @@ -2408,15 +2390,15 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | | text | let | No | string | "Provide text" | Specify the item text
Alternatively, use the default slot for a custom element | | href | let | No | string | "" | Specify the `href` attribute if the item is a link | +| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | | disabled | let | No | boolean | false | Set to `true` to disable the item | | hasDivider | let | No | boolean | false | Set to `true` to include a divider | | danger | let | No | boolean | false | Set to `true` to use the danger variant | | requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -2437,22 +2419,22 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | -| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | | page | let | Yes | number | 1 | Specify the current page index | -| totalItems | let | No | number | 0 | Specify the total number of items | +| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | | disabled | let | No | boolean | false | Set to `true` to disable the pagination | | forwardText | let | No | string | "Next page" | Specify the forward button text | | backwardText | let | No | string | "Previous page" | Specify the backward button text | | itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text | | itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text | | itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} items\` | Override the item range text | -| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | +| totalItems | let | No | number | 0 | Specify the total number of items | | pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | | pageSizes | let | No | number[] | [10] | Specify the available page sizes | | pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown | | pageText | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | | pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | ### Slots @@ -2514,17 +2496,16 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| disabled | let | No | boolean | false | Set to `true` to disable the input | | type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | | value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | | placeholder | let | No | string | "" | Specify the placeholder text | | hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text | | showPasswordLabel | let | No | string | "Show password" | Specify the show password label text | | tooltipAlignment | let | No | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon | | tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | | light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | | helperText | let | No | string | "" | Specify the helper text | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | @@ -2532,6 +2513,7 @@ None. | invalidText | let | No | string | "" | Specify the text for the invalid state | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2545,11 +2527,11 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `ProgressIndicator` @@ -2606,8 +2588,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| current | let | Yes | boolean | false | Set to `true` to use the current variant | | complete | let | Yes | boolean | false | Set to `true` for the complete variant | +| current | let | Yes | boolean | false | Set to `true` to use the current variant | | disabled | let | No | boolean | false | Set to `true` to disable the progress step | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | description | let | No | string | "" | Specify the step description | @@ -2637,15 +2619,15 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the radio button | | value | let | No | string | "" | Specify the value of the radio button | +| checked | let | Yes | boolean | false | Set to `true` to check the radio button | | disabled | let | No | boolean | false | et to `true` to disable the radio button | | labelPosition | let | No | "right" | "left" | "right" | Specify the label position | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | "" | Specify a name attribute for the checkbox input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2764,20 +2746,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | | value | let | Yes | string | "" | Specify the value of the search input | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the search input | +| small | let | No | boolean | false | -- | | type | let | No | string | "text" | Specify the `type` attribute of the search input | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | | autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | | autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | | closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | | labelText | let | No | string | "" | Specify the label text | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2791,10 +2773,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | | clear | dispatched | -- | ## `SearchSkeleton` @@ -2825,20 +2807,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | | selected | let | Yes | string | -- | Specify the selected item value | -| size | let | No | "sm" | "xl" | -- | Set the size of the select input | +| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | | inline | let | No | boolean | false | Set to `true` to use the inline variant | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the select element | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | | name | let | No | string | -- | Specify a name attribute for the select element | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| size | let | No | "sm" | "xl" | -- | Set the size of the select input | | invalidText | let | No | string | "" | Specify the invalid state text | | helperText | let | No | string | "" | Specify the helper text | | noLabel | let | No | boolean | false | Set to `true` to not render a label | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | ### Slots @@ -2918,7 +2900,6 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | selected | let | Yes | boolean | false | Set to `true` to select the tile | | light | let | No | boolean | false | Set to `true` to enable the light variant | | title | let | No | string | "title" | Specify the title of the selectable tile | @@ -2927,6 +2908,7 @@ None. | iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | "" | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -2950,9 +2932,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------------ | -| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | | fixed | let | No | boolean | false | Set to `true` to use the fixed variant | | ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | +| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | ### Slots @@ -2986,11 +2968,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | isSelected | let | No | boolean | false | Set to `true` to select the current link | | href | let | No | string | -- | Specify the `href` attribute | | text | let | No | string | -- | Specify the text | | icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -3008,10 +2990,10 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------ | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | | expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | | text | let | No | string | -- | Specify the text | | icon | let | No | { render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; } | -- | Specify the icon props | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | ### Slots @@ -3031,10 +3013,10 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | isSelected | let | No | boolean | -- | Set to `true` to select the item | | href | let | No | string | -- | Specify the `href` attribute | | text | let | No | string | -- | Specify the item text | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -3116,16 +3098,15 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | | value | let | Yes | number | 0 | Specify the value of the slider | -| max | let | No | number | 100 | Set the maximum slider value | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | | maxLabel | let | No | string | "" | Specify the label for the max value | | min | let | No | number | 0 | Set the minimum slider value | | minLabel | let | No | string | "" | Specify the label for the min value | | step | let | No | number | 1 | Set the step value | | stepMultiplier | let | No | number | 4 | Set the step multiplier value | | required | let | No | boolean | false | Set to `true` to require a value | -| inputType | let | No | string | "number" | Specify the input type | +| max | let | No | number | 100 | Set the maximum slider value | | disabled | let | No | boolean | false | Set to `true` to disable the slider | | light | let | No | boolean | false | Set to `true` to enable the light variant | | hideTextInput | let | No | boolean | false | Set to `true` to hide the text input | @@ -3133,6 +3114,7 @@ None. | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | labelText | let | No | string | "" | Specify the label text | | name | let | No | string | "" | Set a name for the slider element | +| inputType | let | No | string | "number" | Specify the input type | ### Slots @@ -3267,12 +3249,12 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | checked | let | Yes | boolean | false | Set to `true` to check the input | | title | let | No | string | "title" | Specify the title of the input | | value | let | No | string | "value" | Specify the value of the input | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | "" | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3336,11 +3318,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | | text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) | +| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | | disabled | let | No | boolean | false | Set to `true` to disable the switch | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -3364,12 +3346,12 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | | label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | | href | let | No | string | "#" | Specify the href attribute | | disabled | let | No | boolean | false | Set to `true` to disable the tab | | tabindex | let | No | string | "0" | Specify the tabindex | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | ### Slots @@ -3650,20 +3632,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | | value | let | Yes | string | "" | Specify the textarea value | -| placeholder | let | No | string | "" | Specify the placeholder text | +| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | | cols | let | No | number | 50 | Specify the number of cols | | rows | let | No | number | 4 | Specify the number of rows | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the input | | helperText | let | No | string | "" | Specify the helper text | -| labelText | let | No | string | "" | Specify the label text | +| placeholder | let | No | string | "" | Specify the placeholder text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the text for the invalid state | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element | | name | let | No | string | -- | Specify a name attribute for the input | +| labelText | let | No | string | "" | Specify the label text | ### Slots @@ -3677,10 +3659,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `TextAreaSkeleton` @@ -3709,22 +3691,22 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| labelText | let | No | string | "" | Specify the label text | | value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | -| type | let | No | string | "" | Specify the input type | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | placeholder | let | No | string | "" | Specify the placeholder text | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the input | | helperText | let | No | string | "" | Specify the helper text | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | -| labelText | let | No | string | "" | Specify the label text | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | | warn | let | No | boolean | false | Set to `true` to indicate an warning state | | warnText | let | No | string | "" | Specify the warning state text | +| type | let | No | string | "" | Specify the input type | | required | let | No | boolean | false | Set to `true` to mark the field as required | | inline | let | No | boolean | false | Set to `true` to use inline version | @@ -3740,11 +3722,11 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `TextInputSkeleton` @@ -3818,21 +3800,21 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| disabled | let | No | boolean | false | Set to `true` to disable the input | | value | let | Yes | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Specify the size of the input | | type | let | No | string | "text" | Specify the input type | | placeholder | let | No | string | "hh=mm" | Specify the input placeholder text | | pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element | | maxlength | let | No | number | 5 | Specify the `maxlength` input attribute | | light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | +| size | let | No | "sm" | "xl" | -- | Specify the size of the input | | labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | | invalidText | let | No | string | "" | Specify the invalid state text | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -3848,10 +3830,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | +| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | ## `TimePickerSelect` @@ -3859,7 +3841,6 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | | value | let | Yes | number | string | "" | Specify the select value | | disabled | let | No | boolean | false | Set to `true` to disable the select | | iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | @@ -3867,6 +3848,7 @@ None. | hideLabel | let | No | boolean | true | -- | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | | name | let | No | string | -- | Specify a name attribute for the select element | +| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | ### Slots @@ -3922,8 +3904,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | | size | let | No | "default" | "sm" | "default" | Specify the toggle size | +| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | | disabled | let | No | boolean | false | Set to `true` to disable checkbox input | | labelA | let | No | string | "Off" | Specify the label for the untoggled state | | labelB | let | No | string | "On" | Specify the label for the toggled state | @@ -3943,8 +3925,8 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| change | forwarded | -- | | keyup | forwarded | -- | +| change | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -4117,11 +4099,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | | value | let | Yes | number | string | "" | Specify the value of the search input | +| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | | persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | | tabindex | let | No | string | "0" | Specify the tabindex | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -4142,19 +4124,19 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| tabindex | let | No | string | "0" | Set the button tabindex | | open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | | iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | | iconName | let | No | string | "" | Specify the icon name attribute | -| tabindex | let | No | string | "0" | Set the button tabindex | +| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | | tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | | triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | | triggerText | let | No | string | "" | Set the tooltip button text | +| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) | +| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | ### Slots @@ -4174,11 +4156,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | tooltipText | let | No | string | "" | Specify the tooltip text | | align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -4203,11 +4185,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | | tooltipText | let | No | string | "" | Specify the tooltip text | | align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | | direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | +| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 453b3c84..3d7ce3b7 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1205,12 +1205,12 @@ ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [ + { "type": "forwarded", "name": "blur", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "forwarded", "name": "keydown", "element": "div" }, - { "type": "forwarded", "name": "blur", "element": "div" } + { "type": "forwarded", "name": "keydown", "element": "div" } ], "typedefs": [ { @@ -2896,10 +2896,10 @@ "name": "mouseleave", "element": "SearchSkeleton" }, + { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "dispatched", "name": "clear" } ], "typedefs": [], @@ -3998,7 +3998,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4111,9 +4111,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "click", "element": "input" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "input" } }, { @@ -4134,7 +4132,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4144,7 +4142,7 @@ "name": "files", "kind": "let", "description": "Obtain the uploaded file names", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4233,8 +4231,8 @@ ], "slots": [], "events": [ - { "type": "dispatched", "name": "add", "detail": "Files" }, - { "type": "dispatched", "name": "remove", "detail": "Files" }, + { "type": "dispatched", "name": "add", "detail": "FileList" }, + { "type": "dispatched", "name": "remove", "detail": "FileList" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, @@ -4246,9 +4244,7 @@ }, { "type": "forwarded", "name": "keydown", "element": "Filename" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, { @@ -4344,7 +4340,7 @@ "name": "accept", "kind": "let", "description": "Specify the accepted file types", - "type": "Files", + "type": "string[]", "value": "[]", "isFunction": false, "constant": false, @@ -4364,7 +4360,7 @@ "name": "validateFiles", "kind": "let", "description": "Override the default behavior of validating uploaded files\nThe default behavior does not validate files", - "type": "(files: Files) => Files", + "type": "(files: FileList) => FileList", "value": "(files) => files", "isFunction": true, "constant": false, @@ -4443,7 +4439,7 @@ ], "slots": [], "events": [ - { "type": "dispatched", "name": "add", "detail": "Files" }, + { "type": "dispatched", "name": "add", "detail": "FileList" }, { "type": "forwarded", "name": "dragover", "element": "div" }, { "type": "forwarded", "name": "dragleave", "element": "div" }, { "type": "forwarded", "name": "drop", "element": "div" }, @@ -4451,9 +4447,7 @@ { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "click", "element": "input" } ], - "typedefs": [ - { "type": "string[]", "name": "Files", "ts": "type Files = string[]" } - ], + "typedefs": [], "rest_props": { "type": "Element", "name": "div" } }, { @@ -5487,11 +5481,11 @@ } ], "events": [ + { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "keydown", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "dispatched", "name": "submit" }, { "type": "dispatched", "name": "click:button--secondary" }, { "type": "dispatched", "name": "close" }, @@ -7857,10 +7851,10 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "textarea" }, { "type": "forwarded", "name": "change", "element": "textarea" }, { "type": "forwarded", "name": "input", "element": "textarea" }, - { "type": "forwarded", "name": "focus", "element": "textarea" }, - { "type": "forwarded", "name": "blur", "element": "textarea" } + { "type": "forwarded", "name": "focus", "element": "textarea" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "textarea" } @@ -8079,11 +8073,11 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, - { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" } + { "type": "forwarded", "name": "focus", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8300,11 +8294,11 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "keydown", "element": "input" }, - { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" } + { "type": "forwarded", "name": "focus", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8479,11 +8473,11 @@ { "name": "below", "default": false, "slot_props": "{}" } ], "events": [ + { "type": "forwarded", "name": "mouseleave", "element": "div" }, { "type": "forwarded", "name": "click", "element": "div" }, { "type": "forwarded", "name": "keypress", "element": "div" }, { "type": "forwarded", "name": "mouseover", "element": "div" }, - { "type": "forwarded", "name": "mouseenter", "element": "div" }, - { "type": "forwarded", "name": "mouseleave", "element": "div" } + { "type": "forwarded", "name": "mouseenter", "element": "div" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8879,10 +8873,10 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, + { "type": "forwarded", "name": "blur", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, - { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" } + { "type": "forwarded", "name": "focus", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -9070,8 +9064,8 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "keyup", "element": "input" }, + { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -9840,13 +9834,13 @@ "slots": [], "events": [ { "type": "forwarded", "name": "click", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" }, { "type": "forwarded", "name": "mouseover", "element": "a" }, { "type": "forwarded", "name": "mouseenter", "element": "a" }, { "type": "forwarded", "name": "mouseleave", "element": "a" }, { "type": "forwarded", "name": "keyup", "element": "a" }, { "type": "forwarded", "name": "keydown", "element": "a" }, - { "type": "forwarded", "name": "focus", "element": "a" }, - { "type": "forwarded", "name": "blur", "element": "a" } + { "type": "forwarded", "name": "focus", "element": "a" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "a" } @@ -9907,14 +9901,14 @@ ], "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }], "events": [ + { "type": "forwarded", "name": "blur", "element": "a" }, { "type": "forwarded", "name": "keydown", "element": "a" }, { "type": "forwarded", "name": "click", "element": "a" }, { "type": "forwarded", "name": "mouseover", "element": "a" }, { "type": "forwarded", "name": "mouseenter", "element": "a" }, { "type": "forwarded", "name": "mouseleave", "element": "a" }, { "type": "forwarded", "name": "keyup", "element": "a" }, - { "type": "forwarded", "name": "focus", "element": "a" }, - { "type": "forwarded", "name": "blur", "element": "a" } + { "type": "forwarded", "name": "focus", "element": "a" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "a" } @@ -10346,11 +10340,11 @@ "name": "select", "detail": "{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }" }, + { "type": "forwarded", "name": "keydown", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, { "type": "forwarded", "name": "input", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, - { "type": "forwarded", "name": "blur", "element": "input" }, - { "type": "forwarded", "name": "keydown", "element": "input" } + { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [ { diff --git a/src/FileUploader/FileUploader.svelte b/src/FileUploader/FileUploader.svelte index 52fcc340..45e8ac32 100644 --- a/src/FileUploader/FileUploader.svelte +++ b/src/FileUploader/FileUploader.svelte @@ -1,8 +1,7 @@