diff --git a/CHANGELOG.md b/CHANGELOG.md index b4bf1c5c..780c1dde 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 +## [0.25.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.25.0) - 2020-11-27 + +**Features** + +- Add `padding` prop to Grid, Row, Column components ([PR #420](https://github.com/IBM/carbon-components-svelte/pull/420), [issue #410](https://github.com/IBM/carbon-components-svelte/issues/410)) +- Add `transition` prop to UI Shell `HeaderAction` to customize panel slide transition; by default, the slide duration is `200`ms ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) + +**Fixes** + +- fix `Files` type for FileUploader ([PR #422](https://github.com/IBM/carbon-components-svelte/pull/422), [issue #421](https://github.com/IBM/carbon-components-svelte/issues/421)) +- remove the fly transition from HamburgerMenu ([PR #419](https://github.com/IBM/carbon-components-svelte/pull/419), [issue #384](https://github.com/IBM/carbon-components-svelte/issues/384)) + +**Documentation** + +- add ["Padded columns"](https://carbon-svelte.vercel.app/components/Grid#padded-columns) example to Grid docs +- demo different transitions in ["Header with app switcher"](https://carbon-svelte.vercel.app/components/UIShell#header-with-app-switcher) example in UI Shell +- describe use case for [using native styles in OrderedList](https://carbon-svelte.vercel.app/components/OrderedList#native-list-styles) + +**Housekeeping** + +- pin development dependency `sveld` to version 0.3.0 + +--- + +**Contributors** + +- [@ispyinternet](https://github.com/ispyinternet) +- [@miedzikd](https://github.com/miedzikd) + ## [0.24.0](https://github.com/IBM/carbon-components-svelte/releases/tag/v0.24.0) - 2020-11-26 **Features** diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index e4d7684b..45400296 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 155 components exported from carbon-components-svelte@0.24.0. +> 155 components exported from carbon-components-svelte@0.25.0. ## Components @@ -194,9 +194,9 @@ | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -| 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 | +| 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>) | | 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 | | :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| 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>) | +| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | | 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 | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | | skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | | disabled | let | No | boolean | false | Set to `true` to disable the button | | href | let | No | string | -- | Set the `href` to use an anchor link | | 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 | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | -| checked | let | Yes | boolean | false | Specify whether the checkbox is checked | | 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 | | 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 | -| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | +| labelText | let | No | string | "" | Specify the label text | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | | name | let | No | string | "" | Set a name for the input element | | title | let | No | string | -- | Specify the title attribute for the label element | | 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 | | :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | -| 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") | +| 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 | +| 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>) | | 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 | -| code | let | No | string | -- | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) | +| copyLabel | let | No | string | -- | Specify the ARIA label of the copy button | | feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | | feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | | showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | | 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 @@ -600,25 +600,25 @@ export interface ComboBoxItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | -| invalidText | let | No | string | "" | Specify the invalid state text | -| selectedIndex | let | Yes | number | -1 | Set the selected item by value index | -| value | let | Yes | string | "" | Specify the selected combobox value | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| 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 | +| 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 | | 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 | -| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| invalidText | let | No | string | "" | Specify the invalid state text | | 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 @@ -641,13 +641,13 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | -| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the composed modal | +| 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 | | 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 @@ -718,9 +718,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 @@ -798,20 +798,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 | -| 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 | +| 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 | | 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 @@ -869,8 +869,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | | value | let | Yes | number | string | "" | Specify the date picker input value | +| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | | 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 | @@ -902,19 +902,19 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | -| 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 | | 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 | -| type | let | No | string | "text" | Specify the input type | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | 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 @@ -969,16 +969,17 @@ export interface DropdownItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | -| titleText | let | No | string | "" | Specify the title text | -| selectedIndex | let | Yes | number | -1 | Specify the selected item index | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| 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 | -| size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field | +| open | let | Yes | boolean | false | Set to `true` to open the dropdown | +| 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 | +| size | let | No | "sm" | "lg" | "xl" | -- | Specify the size of the dropdown field | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | +| titleText | let | No | string | "" | Specify the title text | | 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,7 +987,6 @@ 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 @@ -1025,15 +1025,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 @@ -1046,11 +1046,11 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | -| mouseleave | forwarded | -- | | click | forwarded | -- | | keypress | forwarded | -- | | mouseover | forwarded | -- | | mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | ## `FileUploader` @@ -1058,17 +1058,17 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | -| labelDescription | let | No | string | "" | Specify the label description | | files | let | Yes | FileList | [] | 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 | +| 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 | | 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 @@ -1093,17 +1093,17 @@ 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 | Yes | string | "Add file" | Specify the label text | | accept | let | No | string[] | [] | Specify the accepted file types | +| multiple | let | No | boolean | false | Set to `true` to allow multiple files | | 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 @@ -1123,6 +1123,7 @@ None. | 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 | 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 | @@ -1132,7 +1133,6 @@ None. | 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 @@ -1356,14 +1356,14 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------------- | :--------------- | :------- | :----------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------- | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | +| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | | isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | | uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | | href | let | No | string | -- | Specify the `href` attribute | | company | let | No | string | -- | Specify the company name | | platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | | persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1395,10 +1395,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 @@ -1421,10 +1421,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 @@ -1460,9 +1460,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 @@ -1500,9 +1500,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 @@ -1513,13 +1513,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` @@ -1527,10 +1527,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 @@ -1543,7 +1543,6 @@ None. | Event name | Type | Detail | | :--------- | :-------- | :----- | -| blur | forwarded | -- | | keydown | forwarded | -- | | click | forwarded | -- | | mouseover | forwarded | -- | @@ -1551,6 +1550,7 @@ None. | mouseleave | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | ## `HeaderPanelDivider` @@ -1574,8 +1574,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| href | let | No | string | -- | Specify the `href` attribute | | ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | let | No | string | -- | Specify the `href` attribute | ### Slots @@ -1621,11 +1621,11 @@ export interface HeaderSearchResult { | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- | -| 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 | +| 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 | +| results | let | No | HeaderSearchResult[] | [] | Render a list of search results | ### Slots @@ -1641,11 +1641,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` @@ -1770,12 +1770,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 @@ -1831,13 +1831,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 @@ -1849,12 +1849,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` @@ -1862,8 +1862,8 @@ export type ListBoxFieldTranslationId = "close" | "open"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | -| 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 | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -1890,8 +1890,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 | -| 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 | +| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -1938,11 +1938,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 | -| 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 | +| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -2001,8 +2001,9 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------- | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | +| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | | open | let | Yes | boolean | false | Set to `true` to open the modal | +| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | | 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 | @@ -2010,7 +2011,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 | -| size | let | No | "xs" | "sm" | "lg" | -- | Set the size of the modal | +| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | | hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | | primaryButtonText | let | No | string | "" | Specify the primary button text | | primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | @@ -2019,7 +2020,6 @@ 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 @@ -2033,11 +2033,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 | -- | @@ -2130,19 +2130,19 @@ export interface MultiSelectItem { | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| 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 | +| 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 | | 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 | -| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | +| locale | let | No | string | "en" | Specify the locale | | placeholder | let | No | string | "" | Specify the placeholder text | | sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | | translateWithId | let | No | (id: any) => string | -- | Override the default translation ids | @@ -2153,7 +2153,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 | -| locale | let | No | string | "en" | Specify the locale | +| name | let | No | string | -- | Specify a name attribute for the select | ### Slots @@ -2265,8 +2265,9 @@ export type NumberInputTranslationId = "increment" | "decrement"; | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ---------------------------------------------- | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | value | let | Yes | number | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | | 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 | @@ -2275,17 +2276,16 @@ 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 | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | | 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 | -| 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 | +| 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 | ### Slots @@ -2355,18 +2355,18 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| 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 | +| 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 | +| 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 | | 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 | -| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | | 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 @@ -2392,15 +2392,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 @@ -2421,22 +2421,22 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | -| page | let | Yes | number | 1 | Specify the current page index | | 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 | | 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 | -| totalItems | let | No | number | 0 | Specify the total number of items | +| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | | 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 | -| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | +| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2498,16 +2498,17 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| disabled | let | No | boolean | false | Set to `true` to disable the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | | value | let | Yes | number | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | | 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 | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| 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 | | hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | @@ -2515,7 +2516,6 @@ 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 @@ -2529,11 +2529,11 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | ## `ProgressIndicator` @@ -2590,8 +2590,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| 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 | +| complete | let | Yes | boolean | false | Set to `true` for the complete 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 | @@ -2621,15 +2621,15 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| value | let | No | string | "" | Specify the value of the radio button | +| 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 | | 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 @@ -2749,20 +2749,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | 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 | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute 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 @@ -2776,10 +2776,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | | clear | dispatched | -- | ## `SearchSkeleton` @@ -2810,20 +2810,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| selected | let | Yes | string | -- | Specify the selected item value | | 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 | | 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 | -| size | let | No | "sm" | "xl" | -- | Set the size of the select 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 | | 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 @@ -2903,6 +2903,7 @@ 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 | @@ -2911,7 +2912,6 @@ 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 @@ -2935,9 +2935,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 @@ -2971,11 +2971,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 @@ -2993,10 +2993,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 @@ -3016,10 +3016,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 @@ -3101,15 +3101,16 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| value | let | Yes | number | 0 | Specify the value of the slider | | 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 | | 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 | -| max | let | No | number | 100 | Set the maximum slider value | +| inputType | let | No | string | "number" | Specify the input type | | 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 | @@ -3117,7 +3118,6 @@ 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 @@ -3252,12 +3252,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 @@ -3321,11 +3321,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------- | -| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the named slot "text" (e.g., <span slot="text">...</span>) | +| 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>) | | 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 @@ -3349,12 +3349,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 @@ -3635,20 +3635,20 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| value | let | Yes | string | "" | Specify the textarea value | | 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 | | 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 | -| placeholder | let | No | string | "" | Specify the placeholder text | +| 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 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 @@ -3662,10 +3662,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | ## `TextAreaSkeleton` @@ -3694,22 +3694,22 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| labelText | let | No | string | "" | Specify the label text | -| value | let | Yes | number | string | "" | Specify the input value | | ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | let | Yes | number | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Set the size of the input | +| type | let | No | string | "" | Specify the input type | | placeholder | let | No | string | "" | Specify the placeholder text | | light | let | No | boolean | false | Set to `true` to enable the light variant | | disabled | let | No | boolean | false | Set to `true` to disable the input | | helperText | let | No | string | "" | Specify the helper text | | id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | | name | let | No | string | -- | Specify a name attribute for the input | -| size | let | No | "sm" | "xl" | -- | Set 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 | | 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 | @@ -3725,11 +3725,11 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | keydown | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | ## `TextInputSkeleton` @@ -3803,21 +3803,21 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -| disabled | let | No | boolean | false | Set to `true` to disable the input | +| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | | value | let | Yes | string | "" | Specify the input value | +| size | let | No | "sm" | "xl" | -- | Specify the size of the input | | 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 | -| size | let | No | "sm" | "xl" | -- | Specify the size of the input | +| disabled | let | No | boolean | false | Set to `true` to disable 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 @@ -3833,10 +3833,10 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| blur | forwarded | -- | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | +| blur | forwarded | -- | ## `TimePickerSelect` @@ -3844,6 +3844,7 @@ 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 | @@ -3851,7 +3852,6 @@ 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 @@ -3907,8 +3907,8 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| size | let | No | "default" | "sm" | "default" | Specify the toggle size | | toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| size | let | No | "default" | "sm" | "default" | Specify the toggle size | | 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 | @@ -3928,8 +3928,8 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| keyup | forwarded | -- | | change | forwarded | -- | +| keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | @@ -4102,11 +4102,11 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | -| value | let | Yes | number | string | "" | Specify the value of the search input | +| 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 | | 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 @@ -4127,19 +4127,19 @@ None. | Prop name | Kind | Reactive | Type | Default value | Description | | :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| tabindex | let | No | string | "0" | Set the button tabindex | -| open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| 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 | +| 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`) | | iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | | iconName | let | No | string | "" | Specify the icon name attribute | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| tabindex | let | No | string | "0" | Set the button tabindex | | 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 @@ -4159,11 +4159,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 @@ -4188,11 +4188,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 c4c3b127..799b29d9 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": "keydown", "element": "div" }, + { "type": "forwarded", "name": "blur", "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": [], @@ -5511,11 +5511,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" }, @@ -7881,10 +7881,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": "focus", "element": "textarea" }, + { "type": "forwarded", "name": "blur", "element": "textarea" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "textarea" } @@ -8103,11 +8103,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": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8324,11 +8324,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": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8503,11 +8503,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": "mouseenter", "element": "div" }, + { "type": "forwarded", "name": "mouseleave", "element": "div" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -8903,10 +8903,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": "focus", "element": "input" }, + { "type": "forwarded", "name": "blur", "element": "input" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "div" } @@ -9094,8 +9094,8 @@ { "type": "forwarded", "name": "mouseover", "element": "div" }, { "type": "forwarded", "name": "mouseenter", "element": "div" }, { "type": "forwarded", "name": "mouseleave", "element": "div" }, - { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "change", "element": "input" }, + { "type": "forwarded", "name": "keyup", "element": "input" }, { "type": "forwarded", "name": "focus", "element": "input" }, { "type": "forwarded", "name": "blur", "element": "input" } ], @@ -9864,13 +9864,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": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "a" } @@ -9931,14 +9931,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": "focus", "element": "a" }, + { "type": "forwarded", "name": "blur", "element": "a" } ], "typedefs": [], "rest_props": { "type": "Element", "name": "a" } @@ -10370,11 +10370,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": "blur", "element": "input" }, + { "type": "forwarded", "name": "keydown", "element": "input" } ], "typedefs": [ { diff --git a/package.json b/package.json index ab58a089..92376ad7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "carbon-components-svelte", - "version": "0.24.0", + "version": "0.25.0", "license": "Apache-2.0", "author": "IBM", "description": "Svelte implementation of the Carbon Design System", diff --git a/types/ListBox/ListBoxField.d.ts b/types/ListBox/ListBoxField.d.ts index 5a2fd27f..613f2bd5 100644 --- a/types/ListBox/ListBoxField.d.ts +++ b/types/ListBox/ListBoxField.d.ts @@ -53,11 +53,11 @@ export default class ListBoxField { default: {}; }; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Modal/Modal.d.ts b/types/Modal/Modal.d.ts index 14c3f567..8f6e8dbb 100644 --- a/types/Modal/Modal.d.ts +++ b/types/Modal/Modal.d.ts @@ -120,11 +120,11 @@ export default class Modal { label: {}; }; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "submit", cb: (event: CustomEvent) => void): () => void; $on(eventname: "click:button--secondary", cb: (event: CustomEvent) => void): () => void; $on(eventname: "close", cb: (event: CustomEvent) => void): () => void; diff --git a/types/Search/Search.d.ts b/types/Search/Search.d.ts index aad0f3f9..494e369d 100644 --- a/types/Search/Search.d.ts +++ b/types/Search/Search.d.ts @@ -93,10 +93,10 @@ export default class Search { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "clear", cb: (event: CustomEvent) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/TextArea/TextArea.d.ts b/types/TextArea/TextArea.d.ts index a958d0d6..467eac3b 100644 --- a/types/TextArea/TextArea.d.ts +++ b/types/TextArea/TextArea.d.ts @@ -93,9 +93,9 @@ export default class TextArea { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/TextInput/PasswordInput.d.ts b/types/TextInput/PasswordInput.d.ts index 2be62391..601d9d9c 100644 --- a/types/TextInput/PasswordInput.d.ts +++ b/types/TextInput/PasswordInput.d.ts @@ -114,10 +114,10 @@ export default class PasswordInput { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/TextInput/TextInput.d.ts b/types/TextInput/TextInput.d.ts index 3bb85460..1b56f537 100644 --- a/types/TextInput/TextInput.d.ts +++ b/types/TextInput/TextInput.d.ts @@ -116,10 +116,10 @@ export default class TextInput { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Tile/ExpandableTile.d.ts b/types/Tile/ExpandableTile.d.ts index 379c09aa..c5ffb7c0 100644 --- a/types/Tile/ExpandableTile.d.ts +++ b/types/Tile/ExpandableTile.d.ts @@ -63,10 +63,10 @@ export default class ExpandableTile { below: {}; }; - $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "keypress", cb: (event: WindowEventMap["keypress"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; + $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/TimePicker/TimePicker.d.ts b/types/TimePicker/TimePicker.d.ts index 0395f2b3..7429f046 100644 --- a/types/TimePicker/TimePicker.d.ts +++ b/types/TimePicker/TimePicker.d.ts @@ -100,9 +100,9 @@ export default class TimePicker { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/Toggle/Toggle.d.ts b/types/Toggle/Toggle.d.ts index b4578196..d2440b41 100644 --- a/types/Toggle/Toggle.d.ts +++ b/types/Toggle/Toggle.d.ts @@ -57,8 +57,8 @@ export default class Toggle { $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; - $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; + $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; diff --git a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts index dca37e45..a44bbe67 100644 --- a/types/UIShell/GlobalHeader/HeaderNavItem.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNavItem.d.ts @@ -23,12 +23,12 @@ export default class HeaderNavItem { $$slot_def: {}; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void; $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts index c718593f..80903c90 100644 --- a/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts +++ b/types/UIShell/GlobalHeader/HeaderNavMenu.d.ts @@ -37,7 +37,6 @@ export default class HeaderNavMenu { default: {}; }; - $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void; @@ -45,5 +44,6 @@ export default class HeaderNavMenu { $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void; $on(eventname: "keyup", cb: (event: WindowEventMap["keyup"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; + $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; } diff --git a/types/UIShell/HeaderSearch.d.ts b/types/UIShell/HeaderSearch.d.ts index 44816290..a961d6d2 100644 --- a/types/UIShell/HeaderSearch.d.ts +++ b/types/UIShell/HeaderSearch.d.ts @@ -51,10 +51,10 @@ export default class HeaderSearch { eventname: "select", cb: (event: CustomEvent<{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }>) => void ): () => void; - $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: "change", cb: (event: WindowEventMap["change"]) => void): () => void; $on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void; $on(eventname: "focus", cb: (event: WindowEventMap["focus"]) => void): () => void; $on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void; + $on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void; $on(eventname: string, cb: (event: Event) => void): () => void; }