diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index a465f59b..730982c7 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -202,12 +202,12 @@ ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) | -| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | +| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., <code><div slot="title"></code>...<code></div></code>) | +| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -372,23 +372,23 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | -| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | -| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Alternatively, use the named slot "icon" (e.g., `<Icon slot="icon" size="{20}" />`) | -| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | -| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | -| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | -| as | No | 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 | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| disabled | No | let | No | boolean | false | Set to `true` to disable the button | -| href | No | let | No | string | undefined | Set the `href` to use an anchor link | -| tabindex | No | let | No | string | "0" | Specify the tabindex | -| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | +| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | +| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | +| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Alternatively, use the named slot "icon" (e.g., <code><Icon slot="icon" size="{20}" /></code>) | +| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | +| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon.
Only applies to icon-only buttons | +| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | +| as | No | 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 | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| disabled | No | let | No | boolean | false | Set to `true` to disable the button | +| href | No | let | No | string | undefined | Set the `href` to use an anchor link | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots @@ -540,26 +540,26 @@ 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 | true | Set to `false` to hide the show more/less button

NOTE: this prop only works with the `type="multi"` variant | -| 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.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | -| copy | No | 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.

Provide a custom function to override this behavior. | -| hideCopyButton | No | 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.
Only applies to the "single", "multi" types | -| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | -| light | No | 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.

NOTE: this prop only works with the `type="multi"` variant | -| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | -| id | No | let | 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 | true | Set to `false` to hide the show more/less button

NOTE: this prop only works with the `type="multi"` variant | +| 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.
Alternatively, use the default slot (e.g., <code><CodeSnippet></code>{code}<code></CodeSnippet></code>).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | +| copy | No | 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.

Provide a custom function to override this behavior. | +| hideCopyButton | No | 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.
Only applies to the "single", "multi" types | +| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | +| light | No | 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.

NOTE: this prop only works with the `type="multi"` variant | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -618,19 +618,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | -| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | -| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | -| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | -| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | -| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | -| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | +| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | +| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | +| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | +| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | +| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | +| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | ### Slots @@ -847,27 +847,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | -| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | -| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | -| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | -| indented | No | let | Yes | boolean | false | Set to `true` to indent the label | -| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | -| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | -| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | -| shortcutText | No | let | No | string | "" | Specify the shortcut text.
Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | +| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | +| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | +| indented | No | let | Yes | boolean | false | Set to `true` to indent the label | +| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | +| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | +| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., <code><span slot="labelText"></code>...<code></span></code>) | +| shortcutText | No | let | No | string | "" | Specify the shortcut text.
Alternatively, use the "shortcutText" slot (e.g., <code><span slot="shortcutText"></code>...<code></span></code>) | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this={icon} /> | -| labelText | No | -- | {labelText} | -| shortcutText | No | -- | {shortcutText} | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :---- | :--------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this={icon} /> | +| labelText | No | -- | {labelText} | +| shortcutText | No | -- | {shortcutText} | ### Events @@ -1259,21 +1259,21 @@ 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.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | -| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | -| kind | No | 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.
Alternatively, use the named slot "labelTitle" (e.g., <code><span slot="labelTitle"></code>...<code></span></code>) | +| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., <code><span slot="labelDescription"></code>...<code></span></code>) | +| kind | No | 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 @@ -1557,16 +1557,16 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | -| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | +| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots @@ -1589,12 +1589,12 @@ None. | expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | | uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | | href | No | let | No | string | undefined | Specify the `href` attribute | -| company | No | let | No | string | undefined | Specify the company name.

Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | -| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., `<span slot="platform">...</span>`) | +| company | No | let | No | string | undefined | Specify the company name.

Alternatively, use the named slot "company" (e.g., <code><span slot="company"></code>...<code></span></code>) | +| platformName | No | let | No | string | "" | Specify the platform name.
Alternatively, use the named slot "platform" (e.g., <code><span slot="platform"></code>...<code></span></code>) | | persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | | expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | -| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | -| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | +| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to <code><Menu size={20} /></code> | +| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to <code><Close size={20} /></code> | ### Slots @@ -1615,24 +1615,24 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | -| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | -| text | No | let | No | string | undefined | Specify the text.
Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | -| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | -| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to <code><Switcher size={20} /></code> | +| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to <code><Close size={20} /></code> | +| text | No | let | No | string | undefined | Specify the text.
Alternatively, use the named slot "text" (e.g., <code><div slot="text"></code>...<code></div></code>) | +| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> | -| icon | No | -- | <svelte:component this={icon} size={20} /> | -| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| closeIcon | No | -- | <svelte:component this={closeIcon} size={20} /> | +| icon | No | -- | <svelte:component this={icon} size={20} /> | +| text | No | -- | {#if text}<span class:bx--header\_\_action-text={true}>{text}</span>{/if} | ### Events @@ -1655,9 +1655,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------------------------------------------ | -| icon | No | -- | <svelte:component this={icon} size={20} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------------------------------------------------------------- | +| icon | No | -- | <svelte:component this={icon} size={20} /> | ### Events @@ -1838,9 +1838,9 @@ export interface HeaderSearchResult { ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description={true}
>– {result.description}</span
>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span
class:bx--header-search-menu-description={true}
>– {result.description}</span
>{/if} | ### Events @@ -1978,10 +1978,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this={icon} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this={icon} /> | ### Events @@ -2611,27 +2611,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | -| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | -| open | No | let | Yes | boolean | false | Set to `true` to open the menu | -| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | -| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | -| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | -| iconClass | No | let | No | string | undefined | Specify the icon class | -| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | +| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to <code><OverflowMenuVertical /></code> | +| open | No | let | Yes | boolean | false | Set to `true` to open the menu | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | +| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | +| iconClass | No | let | No | string | undefined | Specify the icon class | +| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### 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 @@ -2662,9 +2662,9 @@ 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 @@ -2922,9 +2922,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- | -| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | +| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> | ### Events @@ -3081,15 +3081,15 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | -| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | +| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots @@ -3105,24 +3105,24 @@ None. ### 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 | -| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | -| value | No | let | Yes | any | "" | Specify the value of the search input | -| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | No | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | -| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | No | let | No | string | "" | Specify the label text | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | +| value | No | let | Yes | any | "" | Specify the value of the search input | +| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | +| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | No | let | No | string | "" | Specify the label text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to <code><Search /></code> | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -3377,10 +3377,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | {text} | -| icon | No | -- | <svelte:component this={icon} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------- | +| -- | Yes | -- | {text} | +| icon | No | -- | <svelte:component this={icon} /> | ### Events @@ -3401,10 +3401,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this={icon} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this={icon} /> | ### Events @@ -3503,27 +3503,27 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| value | No | let | Yes | number | 0 | Specify the value of the slider | -| max | No | let | No | number | 100 | Set the maximum slider value | -| maxLabel | No | let | No | string | "" | Specify the label for the max value | -| min | No | let | No | number | 0 | Set the minimum slider value | -| minLabel | No | let | No | string | "" | Specify the label for the min value | -| step | No | let | No | number | 1 | Set the step value | -| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value | -| required | No | let | No | boolean | false | Set to `true` to require a value | -| inputType | No | let | No | string | "number" | Specify the input type | -| disabled | No | let | No | boolean | false | Set to `true` to disable the slider | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input | -| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | -| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | -| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | -| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | -| name | No | let | No | string | "" | Set a name for the slider element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| value | No | let | Yes | number | 0 | Specify the value of the slider | +| max | No | let | No | number | 100 | Set the maximum slider value | +| maxLabel | No | let | No | string | "" | Specify the label for the max value | +| min | No | let | No | number | 0 | Set the minimum slider value | +| minLabel | No | let | No | string | "" | Specify the label for the min value | +| step | No | let | No | number | 1 | Set the step value | +| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value | +| required | No | let | No | boolean | false | Set to `true` to require a value | +| inputType | No | let | No | string | "number" | Specify the input type | +| disabled | No | let | No | boolean | false | Set to `true` to disable the slider | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input | +| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., <code><span slot="labelText"></code>...<code></span></code>) | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| name | No | let | No | string | "" | Set a name for the slider element | ### Slots @@ -3728,13 +3728,13 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | -| text | No | let | No | string | "Provide text" | Specify the switch text.
Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | -| disabled | No | let | No | boolean | false | Set to `true` to disable the switch | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | +| text | No | let | No | string | "Provide text" | Specify the switch text.
Alternatively, use the "text" slot (e.g., <code><span slot="text"></code>...<code></span></code>) | +| disabled | No | let | No | boolean | false | Set to `true` to disable the switch | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3756,14 +3756,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | -| label | No | let | No | string | "" | Specify the tab label.
Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) | -| href | No | let | No | string | "#" | Specify the href attribute | -| disabled | No | let | No | boolean | false | Set to `true` to disable the tab | -| tabindex | No | let | No | string | "0" | Specify the tabindex | -| 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 | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| label | No | let | No | string | "" | Specify the tab label.
Alternatively, use the default slot (e.g., <code><Tab></code><code><span></code>Label<code></span></code><code></Tab></code>) | +| href | No | let | No | string | "#" | Specify the href attribute | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tab | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4016,10 +4016,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- | -| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- | -| icon | No | -- | <svelte:component this={icon} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :--------------------------------------------------------------- | +| -- | Yes | { props: { class: "bx--tag\_\_label" } } | -- | +| icon | No | -- | <svelte:component this={icon} /> | ### Events @@ -4566,30 +4566,30 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | -| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | -| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | -| iconName | No | let | No | string | "" | Specify the icon name attribute | -| tabindex | No | let | No | string | "0" | Set the button tabindex | -| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | No | let | No | string | "" | Set the tooltip button text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to <code><Information /></code> | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | +| iconName | No | let | No | string | "" | Specify the icon name attribute | +| tabindex | No | let | No | string | "0" | Set the button tabindex | +| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | No | let | No | string | "" | Set the tooltip button text | ### Slots -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this={icon} name={iconName} /> | -| triggerText | No | -- | {triggerText} | +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :------------------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this={icon} name={iconName} /> | +| triggerText | No | -- | {triggerText} | ### Events @@ -4666,10 +4666,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | <svelte:component this={icon} /> | -| tooltipText | No | -- | {tooltipText} | +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :--------------------------------------------------------------- | +| -- | Yes | -- | <svelte:component this={icon} /> | +| tooltipText | No | -- | {tooltipText} | ### Events