let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object |
-| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------- | ----------- |
+| sizes | No | let | Yes | Record | { |
+
+ sm: false,
+ md: false,
+ lg: false,
+ xlg: false,
+ max: false,
+
+} | Carbon grid sizes as an object |
+| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size |
### Slots
@@ -538,26 +547,34 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element |
-| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button |
-| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
-| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
-| code | No | let | No | string | undefined | Set the code snippet text.let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.let | No | boolean | false | Set to `true` to hide the copy button |
-| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.let | No | boolean | false | Set to `true` to wrap the text.let | No | boolean | false | Set to `true` to enable the light variant |
-| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
-| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon |
-| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button |
-| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet |
-| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
-| showLessText | No | let | No | string | "Show less" | Specify the show less text.let | No | string | "Show more" | Specify the show more textlet | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element |
+| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button |
+| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
+| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
+| code | No | let | No | string | undefined | Set the code snippet text.let | No | (code: string) => void | async (code) => { |
+
+ try {
+ await navigator.clipboard.writeText(code);
+ } catch (e) {
+ console.log(e);
+ }
+
+} | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.let | No | boolean | false | Set to `true` to hide the copy button |
+| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.let | No | boolean | false | Set to `true` to wrap the text.let | No | boolean | false | Set to `true` to enable the light variant |
+| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state |
+| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon |
+| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button |
+| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet |
+| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
+| showLessText | No | let | No | string | "Show less" | Specify the show less text.let | No | string | "Show more" | Specify the show more textlet | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element |
### Slots
@@ -656,32 +673,43 @@ export interface ComboBoxItem {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
-| value | No | let | Yes | string | "" | Specify the selected combobox value |
-| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id |
-| items | No | let | No | ReadonlyArray | [] | Set the combobox items |
-| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox |
-| titleText | No | let | No | string | "" | Specify the title text of the combobox |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
-| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
-| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
+| value | No | let | Yes | string | "" | Specify the selected combobox value |
+| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id |
+| items | No | let | No | ReadonlyArray | [] | Set the combobox items |
+| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
+| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox |
+| titleText | No | let | No | string | "" | Specify the title text of the combobox |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
+| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { |
+
+ prevSelectedId = null;
+ highlightedIndex = -1;
+ highlightedId = undefined;
+ selectedId = undefined;
+ selectedItem = undefined;
+ open = false;
+ value = "";
+ if (options?.focus !== false) ref?.focus();
+
+} | Clear the combo box programmatically |
### Slots
@@ -899,13 +927,21 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button |
-| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
-| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
-| text | Yes | let | No | string | undefined | Specify the text to copy |
-| copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | -------------------------------- | ------------------------------------------------------ |
+| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button |
+| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text |
+| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button |
+| text | Yes | let | No | string | undefined | Specify the text to copy |
+| copy | No | let | No | (text: string) => void | async (text) => { |
+
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch (e) {
+ console.log(e);
+ }
+
+} | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
### Slots
@@ -1254,21 +1290,25 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
-| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
-| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
-| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
-| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files |
-| labelTitle | No | let | No | string | "" | Specify the label title.let | No | string | "" | Specify the label description.let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
-| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
-| buttonLabel | No | let | No | string | "" | Specify the button label |
-| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
-| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :----------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------ |
+| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files |
+| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader |
+| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types |
+| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files |
+| clearFiles | No | const | No | () => void | () => { |
+
+ files = [];
+
+} | Programmatically clear the uploaded files |
+| labelTitle | No | let | No | string | "" | Specify the label title.let | No | string | "" | Specify the label description.let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button |
+| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button |
+| buttonLabel | No | let | No | string | "" | Specify the button label |
+| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons |
+| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input |
### Slots
@@ -1835,9 +1875,10 @@ export interface HeaderSearchResult {
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} |
+| Slot name | Default | Props | Fallback |
+| :----------------------------------------------------------------------------------------- | :------ | :---------------------------------------------------------- | :------------------ |
+| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text} |
+|
{#if result.description}<span>– {result.description}</span>{/if} |
### Events
@@ -1874,16 +1915,26 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
-| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
-| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded |
-| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
-| src | No | let | No | string | "" | Specify the image source |
-| alt | No | let | No | string | "" | Specify the image alt text |
-| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
-| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on loadconst | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image |
+| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded |
+| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false |
+| src | No | let | No | string | "" | Specify the image source |
+| alt | No | let | No | string | "" | Specify the image alt text |
+| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper |
+| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on loadconst | No | (url?: string) => void | (url) => { |
+
+ if (image != null) image = null;
+ loaded = false;
+ error = false;
+ image = new Image();
+ image.src = url || src;
+ image.onload = () => (loaded = true);
+ image.onerror = () => (error = true);
+
+} | Method invoked to load the image provided a `src` value |
### Slots
@@ -1959,6 +2010,27 @@ None.
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
+## `Layer`
+
+### Props
+
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------ |
+| level | No | let | Yes | 0 | 1 | 2 | undefined | Specify the layer level and override any existing levels based on hierarchy. |
+| as | No | let | No | typeof import("svelte").SvelteComponent | "div" | Specify the HTML element to render. If none is specified, a `div` is rendered. |
+| layerProps | No | let | No | import('svelte/elements').HTMLElementAttributes | {} | Specify the Layer HTML element props |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the Layer component |
+
+### Slots
+
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
+
+### Events
+
+None.
+
## `Link`
### Props
@@ -2137,13 +2209,21 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ |
-| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
-| selectionCount | No | let | No | number | undefined | Specify the number of selected items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection |
-| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids |
-| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------- | :------- | :----------------- | :------- | --------------------------------------- | ---------------------- | ------------------------------------------------ |
+| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element |
+| selectionCount | No | let | No | number | undefined | Specify the number of selected items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection |
+| translationIds | No | const | No | { |
+
+ clearAll: "clearAll",
+ clearSelection: "clearSelection",
+
+} | {
+clearAll: "clearAll",
+clearSelection: "clearSelection",
+} | Default translation ids |
+| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
### Slots
@@ -2199,12 +2279,18 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- |
-| value | No | let | Yes | any | "" | Provide a value to persist |
-| key | No | let | No | string | "local-storage-key" | Specify the local storage key |
-| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage |
-| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------- | :------- | :-------------------- | :------- | ----------------------- | -------------------------------- | ----------------------------- |
+| value | No | let | Yes | any | "" | Provide a value to persist |
+| key | No | let | No | string | "local-storage-key" | Specify the local storage key |
+| clearItem | No | function | No | () => void | () => { |
+
+ localStorage.removeItem(key);
+
+} | Remove the persisted key value from the browser's local storage |
+| clearAll | No | function | No | () => void | () => {
+localStorage.clear();
+} | Clear all key values from the browser's local storage |
### Slots
@@ -2359,43 +2445,45 @@ export interface MultiSelectItem {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
-| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
-| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
-| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
-| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
-| value | No | let | Yes | string | "" | Specify the multiselect value |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
-| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items |
-| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
-| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
-| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox |
-| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
-| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
-| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
-| filterable | No | let | No | boolean | false | Set to `true` to filter items |
-| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logiclet | No | boolean | false | Set to `true` to enable the light variant |
-| locale | No | let | No | string | "en" | Specify the locale |
-| placeholder | No | let | No | string | "" | Specify the placeholder text |
-| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logiclet | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.let | No | string | "" | Specify the title text |
-| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the list box label |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | No | let | No | string | undefined | Specify a name attribute for the select |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------------------------------------------------ | :------------------------------------------------------------------------------------ | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem |
+| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element |
+| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element |
+| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element |
+| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown |
+| value | No | let | Yes | string | "" | Specify the multiselect value |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids |
+| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items |
+| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item |
+| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; value?: string } | (item) => {} | Override the item name, title, labelText, or value passed to the user-selectable checkbox input as well as the hidden inputs. |
+| size | No | let | No | "sm" | "lg" | undefined | Set the size of the combobox |
+| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect |
+| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu |
+| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown |
+| filterable | No | let | No | boolean | false | Set to `true` to filter items |
+| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => |
+| item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logiclet | No | boolean | false | Set to `true` to enable the light variant |
+| locale | No | let | No | string | "en" | Specify the locale |
+| placeholder | No | let | No | string | "" | Specify the placeholder text |
+| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => |
+| a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logiclet | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.let | No | string | "" | Specify the title text |
+| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the list box label |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | No | let | No | string | undefined | Specify a name attribute for the select |
### Slots
@@ -2489,31 +2577,36 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| value | No | let | Yes | null | number | null | Specify the input value.let | No | "sm" | "lg" | undefined | Set the size of the input |
-| step | No | let | No | number | 1 | Specify the step increment |
-| max | No | let | No | number | undefined | Specify the maximum value |
-| min | No | let | No | number | undefined | Specify the minimum value |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
-| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only |
-| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
-| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons |
-| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons |
-| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| invalidText | No | let | No | string | "" | Specify the invalid state text |
-| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | No | let | No | string | "" | Specify the warning state text |
-| helperText | No | let | No | string | "" | Specify the helper text |
-| label | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
-| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
-| name | No | let | No | string | undefined | Specify a name attribute for the input |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | -------------------------------------------- | ------------------------------------------------------------- |
+| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| value | No | let | Yes | null | number | null | Specify the input value.let | No | "sm" | "lg" | undefined | Set the size of the input |
+| step | No | let | No | number | 1 | Specify the step increment |
+| max | No | let | No | number | undefined | Specify the maximum value |
+| min | No | let | No | number | undefined | Specify the minimum value |
+| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only |
+| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the input |
+| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons |
+| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons |
+| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| invalidText | No | let | No | string | "" | Specify the invalid state text |
+| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | No | let | No | string | "" | Specify the warning state text |
+| helperText | No | let | No | string | "" | Specify the helper text |
+| label | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids |
+| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { |
+
+ increment: "increment",
+ decrement: "decrement",
+
+} | Default translation ids |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element |
+| name | No | let | No | string | undefined | Specify a name attribute for the input |
### Slots
@@ -2625,10 +2718,16 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| -- | Yes | -- | -- |
-| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------------------------- |
+| -- | Yes | -- | -- |
+| menu | No | -- | <svelte:component |
+
+
this="{icon}"
+
aria-label="{iconDescription}"
+
title="{iconDescription}"
+
class="bx--overflow-menu\_\_icon {iconClass}"
+
/> |
### Events
@@ -2659,9 +2758,12 @@ None.
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ |
-| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :--------------------------------------------------------------------------- |
+| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}"> |
+
+
{text}
+
</div> |
### Events
@@ -2674,24 +2776,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
-| page | No | let | Yes | number | 1 | Specify the current page index |
-| totalItems | No | let | No | number | 0 | Specify the total number of items |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination |
-| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
-| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
-| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
-| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text |
-| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text |
-| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
-| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
-| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
-| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
-| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
-| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------------------------------------------------------------- | :--------------------------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ |
+| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page |
+| page | No | let | Yes | number | 1 | Specify the current page index |
+| totalItems | No | let | No | number | 0 | Specify the total number of items |
+| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination |
+| forwardText | No | let | No | string | "Next page" | Specify the forward button text |
+| backwardText | No | let | No | string | "Previous page" | Specify the backward button text |
+| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text |
+| itemText | No | let | No | (min: number, max: number) => string | (min, max) => |
+| \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text |
+| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => |
+| \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text |
+| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input |
+| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input |
+| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes |
+| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown |
+| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text |
+| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => |
+| \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text |
+| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
### Slots
@@ -4206,15 +4311,27 @@ export type CarbonTheme = "white" | "g10" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
-| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
-| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokenslet | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
-| persistKey | No | let | No | string | "theme" | Specify the local storage key |
-| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
-| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props |
-| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme |
+| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokenslet | No | boolean | false | Set to `true` to persist the theme using window.localStorage |
+| persistKey | No | let | No | string | "theme" | Specify the local storage key |
+| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme |
+| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { |
+
+ themes: ["white", "g100"],
+ labelA: "",
+ labelB: "",
+ labelText: "Dark mode",
+ hideLabel: false,
+
+} | Override the default toggle props |
+| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | {
+themes: themeKeys,
+labelText: "Themes",
+hideLabel: false,
+} | Override the default select props |
### Slots
@@ -4444,10 +4561,11 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- |
-| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar |
-| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
+| Prop name | Required | Kind | Reactive | Type | Default value | Description |
+| :------------------------------------------------------------------------- | :------------------------------------- | :--------------- | :------- | ---------------------------------------------- | ------------------------ | ----------------------------------------- |
+| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar |
+| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => |
+| \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text |
### Slots
@@ -4682,20 +4800,62 @@ export interface TreeNode {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
-| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idlet | No | Array | [] | Provide an array of children nodes to render |
-| size | No | let | No | "xs" | "sm" | "sm" | Specify the TreeView size |
-| labelText | No | let | No | string | "" | Specify the label text |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
-| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes |
-| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes |
-| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.function | No | (id: TreeNodeId) => void | () => { for (const child of children) { const nodes = findNodeById(child, id); if (nodes) { const ids = nodes.map((node) => node.id); const nodeIds = new Set(ids); expandNodes((node) => nodeIds.has(node.id)); const lastId = ids[ids.length - 1]; activeId = lastId; selectedIds = [lastId]; tick().then(() => { ref?.querySelector(\`[id="${lastId}"]\`)?.focus(); }); // Break out of the loop if the node is found. break; } } } | Programmatically show a node by `id`.let | Yes | ReadonlyArray | [] | Set the node ids to be expanded |
+| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected |
+| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node idlet | No | Array | [] | Provide an array of children nodes to render |
+| size | No | let | No | "xs" | "sm" | "sm" | Specify the TreeView size |
+| labelText | No | let | No | string | "" | Specify the label text |
+| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| expandAll | No | function | No | () => void | () => { |
+
+ expandedIds = [...nodeIds];
+
+} | Programmatically expand all nodes |
+| collapseAll | No | function | No | () => void | () => {
+expandedIds = [];
+} | Programmatically collapse all nodes |
+| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => {
+expandedIds = nodes
+.filter(
+(node) =>
+filterNode(node) ||
+node.children?.some((child) => filterNode(child) && child.children)
+)
+.map((node) => node.id);
+} | Programmatically expand a subset of nodes.function | No | (filterId?: (node: TreeNode) => boolean) => void | () => {
+expandedIds = nodes
+.filter((node) => expandedIds.includes(node.id) && !filterNode(node))
+.map((node) => node.id);
+} | Programmatically collapse a subset of nodes.function | No | (id: TreeNodeId) => void | () => {
+for (const child of children) {
+const nodes = findNodeById(child, id);
+
+ if (nodes) {
+ const ids = nodes.map((node) => node.id);
+ const nodeIds = new Set(ids);
+
+ expandNodes((node) => nodeIds.has(node.id));
+
+ const lastId = ids[ids.length - 1];
+
+ activeId = lastId;
+ selectedIds = [lastId];
+
+ tick().then(() => {
+ ref?.querySelector(\`[id="${lastId}"]\`)?.focus();
+ });
+
+ // Break out of the loop if the node is found.
+ break;
+ }
+ }
+
+} | Programmatically show a node by `id`.First layer
+Second layer
+Third layer
+First layer
+Second layer
+Third layer
+