mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore: re-run build:docs to improve table formatting

Browse source
This commit is contained in:
Eric Liu 2024-11-12 10:28:49 -08:00
commit 2fd5c2c25f
1 changed files with 252 additions and 252 deletions
Download patch file Download diff file Expand all files Collapse all files

134
COMPONENT_INDEX.md
View file

@ -203,10 +203,10 @@
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item | | disabled | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to disable the accordion item |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the first accordion item |
| title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., `&lt;div slot="title"&gt;...&lt;/div&gt;`) | | title | No | <code>let</code> | No | <code>string</code> | <code>"title"</code> | Specify the title of the accordion item heading.<br />Alternatively, use the "title" slot (e.g., <code>&lt;code&gt;</code>&lt;div slot="title"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/div&gt;<code>&lt;/code&gt;</code>) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
### Slots ### Slots
@ -373,17 +373,17 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button | | kind | No | <code>let</code> | No | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button |
| size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button | | size | No | <code>let</code> | No | <code>"default" &#124; "field" &#124; "small" &#124; "lg" &#124; "xl"</code> | <code>"default"</code> | Specify the size of button |
| expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting | | expressive | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use Carbon's expressive typesetting |
| isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button | | isSelected | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selected state for an icon-only, ghost button |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., `&lt;Icon slot="icon" size="{20}" /&gt;`) | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Alternatively, use the named slot "icon" (e.g., <code>&lt;code&gt;</code>&lt;Icon slot="icon" size="{20}" /&gt;<code>&lt;/code&gt;</code>) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the button icon |
| tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons | | tooltipAlignment | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon.<br />Only applies to icon-only buttons |
| tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon | | tooltipPosition | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the position of the tooltip relative to the icon |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Button let:props&gt;&lt;div {...props}&gt;...&lt;/div&gt;&lt;/Button&gt;) | | as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <code>&lt;Button let:props&gt;</code><code>&lt;div {...props}&gt;</code>...<code>&lt;/div&gt;</code><code>&lt;/Button&gt;</code>) |
| skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state | | skeleton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to display the skeleton state |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the button |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the `href` to use an anchor link |
@ -541,12 +541,12 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLPreElement</code> | <code>null</code> | Obtain a reference to the pre HTML element |
| showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>true</code> | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant | | showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>true</code> | Set to `false` to hide the show more/less button<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") | | expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to expand a multi-line code snippet (type="multi") |
| type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet | | type | No | <code>let</code> | No | <code>"single" &#124; "inline" &#124; "multi"</code> | <code>"single"</code> | Set the type of code snippet |
| code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., `&lt;CodeSnippet&gt;{code}&lt;/CodeSnippet&gt;`).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | | code | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Set the code snippet text.<br />Alternatively, use the default slot (e.g., <code>&lt;code&gt;</code>&lt;CodeSnippet&gt;<code>&lt;/code&gt;</code>{code}<code>&lt;code&gt;</code>&lt;/CodeSnippet&gt;<code>&lt;/code&gt;</code>).<br /><br />NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. |
| copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. | | copy | No | <code>let</code> | No | <code>(code: string) => void</code> | <code>async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }</code> | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.<br /><br />Provide a custom function to override this behavior. |
| hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button | | hideCopyButton | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the copy button |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant.<br />Only applies to the "single", "multi" types | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the disabled variant.<br />Only applies to the "single", "multi" types |
@ -619,8 +619,8 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Column let:props&gt;&lt;article {...props}&gt;...&lt;/article&gt;&lt;/Column&gt;) | | as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <code>&lt;Column let:props&gt;</code><code>&lt;article {...props}&gt;</code>...<code>&lt;/article&gt;</code><code>&lt;/Column&gt;</code>) |
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
| noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter | | noGutterLeft | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the left gutter |
| noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter | | noGutterRight | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the right gutter |
@ -848,7 +848,7 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLLIElement</code> | <code>null</code> | Obtain a reference to the list item HTML element |
| selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` | | selectable | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the selectable variant<br />Automatically set to `true` if `selected` is `true` |
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant | | selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to use the selected variant |
@ -856,16 +856,16 @@ None.
| indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label | | indented | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to indent the label |
| kind | No | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option | | kind | No | <code>let</code> | No | <code>"default" &#124; "danger"</code> | <code>"default"</code> | Specify the kind of option |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the disabled state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `&lt;span slot="labelText"&gt;...&lt;/span&gt;`) | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., <code>&lt;code&gt;</code>&lt;span slot="labelText"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., `&lt;span slot="shortcutText"&gt;...&lt;/span&gt;`) | | shortcutText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the shortcut text.<br />Alternatively, use the "shortcutText" slot (e.g., <code>&lt;code&gt;</code>&lt;span slot="shortcutText"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Specify the id<br />It's recommended to provide an id as a value to bind to within a selectable/radio menu group |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :----------- | :------ | :---- | :-------------------------------------------------- | | :----------- | :------ | :---- | :--------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
| labelText | No | -- | <code>{labelText}</code> | | labelText | No | -- | <code>{labelText}</code> |
| shortcutText | No | -- | <code>{shortcutText}</code> | | shortcutText | No | -- | <code>{shortcutText}</code> |
@ -1260,15 +1260,15 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files | | files | No | <code>let</code> | Yes | <code>ReadonlyArray<File></code> | <code>[]</code> | Obtain a reference to the uploaded files |
| status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status | | status | No | <code>let</code> | No | <code>"uploading" &#124; "edit" &#124; "complete"</code> | <code>"uploading"</code> | Specify the file uploader status |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the file uploader |
| accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types | | accept | No | <code>let</code> | No | <code>ReadonlyArray<string></code> | <code>[]</code> | Specify the accepted file types |
| multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files | | multiple | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to allow multiple files |
| clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files | | clearFiles | No | <code>const</code> | No | <code>() => void</code> | <code>() => { files = []; }</code> | Programmatically clear the uploaded files |
| labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., `&lt;span slot="labelTitle"&gt;...&lt;/span&gt;`) | | labelTitle | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label title.<br />Alternatively, use the named slot "labelTitle" (e.g., <code>&lt;code&gt;</code>&lt;span slot="labelTitle"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., `&lt;span slot="labelDescription"&gt;...&lt;/span&gt;`) | | labelDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label description.<br />Alternatively, use the named slot "labelDescription" (e.g., <code>&lt;code&gt;</code>&lt;span slot="labelDescription"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button | | kind | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["kind"]</code> | <code>"primary"</code> | Specify the kind of file uploader button |
| size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button | | size | No | <code>let</code> | No | <code>import("../Button/Button.svelte").ButtonProps["size"]</code> | <code>"small"</code> | Specify the size of the file uploader button |
| buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label | | buttonLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the button label |
@ -1558,8 +1558,8 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Grid let:props&gt;&lt;header {...props}&gt;...&lt;/header&gt;&lt;/Grid&gt;) | | as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <code>&lt;Grid let:props&gt;</code><code>&lt;header {...props}&gt;</code>...<code>&lt;/header&gt;</code><code>&lt;/Grid&gt;</code>) |
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant | | condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant | | narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant | | fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the fullWidth variant |
@ -1589,12 +1589,12 @@ None.
| expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default | | expandedByDefault | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to hide the side nav by default |
| uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header | | uiShellAriaLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the header |
| href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute | | href | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the `href` attribute |
| company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., `&lt;span slot="company"&gt;...&lt;/span&gt;`) | | company | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the company name.<br /><br />Alternatively, use the named slot "company" (e.g., <code>&lt;code&gt;</code>&lt;span slot="company"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., `&lt;span slot="platform"&gt;...&lt;/span&gt;`) | | platformName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the platform name.<br />Alternatively, use the named slot "platform" (e.g., <code>&lt;code&gt;</code>&lt;span slot="platform"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu | | persistentHamburgerMenu | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to persist the hamburger menu |
| expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 | | expansionBreakpoint | No | <code>let</code> | No | <code>number</code> | <code>1056</code> | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.<br />1056 represents the "large" breakpoint in pixels from the Carbon Design System:<br />- small: 320<br />- medium: 672<br />- large: 1056<br />- x-large: 1312<br />- max: 1584 |
| iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to `&lt;Menu size={20} /&gt;` | | iconMenu | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the closed state.<br />Defaults to <code>&lt;code&gt;</code>&lt;Menu size={20} /&gt;<code>&lt;/code&gt;</code> |
| iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to `&lt;Close size={20} /&gt;` | | iconClose | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the opened state.<br />Defaults to <code>&lt;code&gt;</code>&lt;Close size={20} /&gt;<code>&lt;/code&gt;</code> |
### Slots ### Slots
@ -1616,23 +1616,23 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | | :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel | | isOpen | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the panel |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to `&lt;Switcher size={20} /&gt;` | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is closed.<br />Defaults to <code>&lt;code&gt;</code>&lt;Switcher size={20} /&gt;<code>&lt;/code&gt;</code> |
| closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to `&lt;Close size={20} /&gt;` | | closeIcon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render when the action panel is open.<br />Defaults to <code>&lt;code&gt;</code>&lt;Close size={20} /&gt;<code>&lt;/code&gt;</code> |
| text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., `&lt;div slot="text"&gt;...&lt;/div&gt;`) | | text | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the text.<br />Alternatively, use the named slot "text" (e.g., <code>&lt;code&gt;</code>&lt;div slot="text"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/div&gt;<code>&lt;/code&gt;</code>) |
| transition | No | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition | | transition | No | <code>let</code> | No | <code>false &#124; import("svelte/transition").SlideParams</code> | <code>{ duration: 200 }</code> | Customize the panel transition (i.e., `transition:slide`).<br />Set to `false` to disable the transition |
| preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside | | preventCloseOnClickOutside | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to prevent the panel from closing when clicking outside |
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| closeIcon | No | -- | <code>&lt;svelte:component this={closeIcon} size={20} /&gt;</code> | | closeIcon | No | -- | <code><code>&lt;svelte:component this={closeIcon} size={20} /&gt;</code></code> |
| icon | No | -- | <code>&lt;svelte:component this={icon} size={20} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} size={20} /&gt;</code></code> |
| text | No | -- | <code>{#if text}&lt;span class:bx--header\_\_action-text={true}&gt;{text}&lt;/span&gt;{/if}</code> | | text | No | -- | <code>{#if text}<code>&lt;span class:bx--header\_\_action-text={true}&gt;</code>{text}<code>&lt;/span&gt;</code>{/if}</code> |
### Events ### Events
@ -1656,8 +1656,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------------------------------------------ | | :-------- | :------ | :---- | :------------------------------------------------------------------------- |
| icon | No | -- | <code>&lt;svelte:component this={icon} size={20} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} size={20} /&gt;</code></code> |
### Events ### Events
@ -1839,8 +1839,8 @@ export interface HeaderSearchResult {
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}&lt;span<br /> class:bx--header-search-menu-description={true}<br /> &gt;– {result.description}&lt;/span<br /> &gt;{/if}</code> | | -- | Yes | <code>{ result: HeaderSearchResult; index: number } </code> | <code>{result.text}<br /> {#if result.description}<code>&lt;span<br /> class:bx--header-search-menu-description={true}<br /> &gt;</code>– {result.description}<code>&lt;/span<br /> &gt;</code>{/if}</code> |
### Events ### Events
@ -1979,9 +1979,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :-------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
### Events ### Events
@ -2612,10 +2612,10 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | | :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| menuRef | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element | | menuRef | No | <code>let</code> | Yes | <code>null &#124; HTMLUListElement</code> | <code>null</code> | Obtain a reference to the overflow menu element |
| buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element | | buttonRef | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the trigger button element |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;OverflowMenuVertical /&gt;` | | icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to <code>&lt;code&gt;</code>&lt;OverflowMenuVertical /&gt;<code>&lt;/code&gt;</code> |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu | | open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the menu |
| size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu | | size | No | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | <code>undefined</code> | Specify the size of the overflow menu |
| direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button | | direction | No | <code>let</code> | No | <code>"top" &#124; "bottom"</code> | <code>"bottom"</code> | Specify the direction of the overflow menu relative to the button |
@ -2629,9 +2629,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| menu | No | -- | <code>&lt;svelte:component<br /> this={icon}<br /> aria-label={iconDescription}<br /> title={iconDescription}<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code> | | menu | No | -- | <code><code>&lt;svelte:component<br /> this={icon}<br /> aria-label={iconDescription}<br /> title={iconDescription}<br /> class="bx--overflow-menu\_\_icon {iconClass}"<br /> /&gt;</code></code> |
### Events ### Events
@ -2663,8 +2663,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- | | :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------------------------------ |
| -- | Yes | -- | <code>&lt;div class:bx--overflow-menu-options\_\_option-content={true}&gt;<br /> {text}<br /> &lt;/div&gt;</code> | | -- | Yes | -- | <code><code>&lt;div class:bx--overflow-menu-options\_\_option-content={true}&gt;</code><br /> {text}<br /> <code>&lt;/div&gt;</code></code> |
### Events ### Events
@ -2923,8 +2923,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- | | :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------------------------------ |
| -- | Yes | <code>{ props: { class: "bx--progress-label" } } </code> | <code>&lt;p class:bx--progress-label={true}&gt;{label}&lt;/p&gt;</code> | | -- | Yes | <code>{ props: { class: "bx--progress-label" } } </code> | <code><code>&lt;p class:bx--progress-label={true}&gt;</code>{label}<code>&lt;/p&gt;</code></code> |
### Events ### Events
@ -3082,8 +3082,8 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., &lt;Row let:props&gt;&lt;section {...props}&gt;...&lt;/section&gt;&lt;/Row&gt;) | | as | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to render a custom HTML element<br />Props are destructured as `props` in the default slot (e.g., <code>&lt;Row let:props&gt;</code><code>&lt;section {...props}&gt;</code>...<code>&lt;/section&gt;</code><code>&lt;/Row&gt;</code>) |
| condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant | | condensed | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the condensed variant |
| narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant | | narrow | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the narrow variant |
| noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter | | noGutter | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to remove the gutter |
@ -3106,7 +3106,7 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | | :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
| expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input | | expanded | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true to expand the search input |
| value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input | | value | No | <code>let</code> | Yes | <code>any</code> | <code>""</code> | Specify the value of the search input |
@ -3121,7 +3121,7 @@ None.
| autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element | | autofocus | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to auto focus the search element |
| closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text | | closeButtonLabelText | No | <code>let</code> | No | <code>string</code> | <code>"Clear search input"</code> | Specify the close button label text |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to `&lt;Search /&gt;` | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render.<br />Defaults to <code>&lt;code&gt;</code>&lt;Search /&gt;<code>&lt;/code&gt;</code> |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the input element |
### Slots ### Slots
@ -3378,9 +3378,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :-------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------- |
| -- | Yes | -- | <code>{text}</code> | | -- | Yes | -- | <code>{text}</code> |
| icon | No | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
### Events ### Events
@ -3402,9 +3402,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :-------------------------------------------------- | | :-------- | :------ | :---- | :--------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
### Events ### Events
@ -3504,7 +3504,7 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | | :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the HTML element |
| value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider | | value | No | <code>let</code> | Yes | <code>number</code> | <code>0</code> | Specify the value of the slider |
| max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value | | max | No | <code>let</code> | No | <code>number</code> | <code>100</code> | Set the maximum slider value |
@ -3521,7 +3521,7 @@ None.
| fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. | | fullWidth | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` for the slider to span<br />the full width of its containing element. |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the slider div element |
| invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state | | invalid | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
| labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., `&lt;span slot="labelText"&gt;...&lt;/span&gt;`) | | labelText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label text.<br />Alternatively, use the "labelText" slot (e.g., <code>&lt;code&gt;</code>&lt;span slot="labelText"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text | | hideLabel | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to visually hide the label text |
| name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element | | name | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set a name for the slider element |
@ -3729,10 +3729,10 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected | | selected | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` for the switch to be selected |
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text.<br />Alternatively, use the "text" slot (e.g., `&lt;span slot="text"&gt;...&lt;/span&gt;`) | | text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the switch text.<br />Alternatively, use the "text" slot (e.g., <code>&lt;code&gt;</code>&lt;span slot="text"&gt;<code>&lt;/code&gt;</code>...<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code>) |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the switch |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the button element |
@ -3757,9 +3757,9 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | | :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLAnchorElement</code> | <code>null</code> | Obtain a reference to the anchor HTML element |
| label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label.<br />Alternatively, use the default slot (e.g., `&lt;Tab&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/Tab&gt;`) | | label | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tab label.<br />Alternatively, use the default slot (e.g., <code>&lt;code&gt;</code>&lt;Tab&gt;<code>&lt;/code&gt;</code><code>&lt;code&gt;</code>&lt;span&gt;<code>&lt;/code&gt;</code>Label<code>&lt;code&gt;</code>&lt;/span&gt;<code>&lt;/code&gt;</code><code>&lt;code&gt;</code>&lt;/Tab&gt;<code>&lt;/code&gt;</code>) |
| href | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute | | href | No | <code>let</code> | No | <code>string</code> | <code>"#"</code> | Specify the href attribute |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the tab |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex | | tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Specify the tabindex |
@ -4017,9 +4017,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :----------------------------------------------------- | :-------------------------------------------------- | | :-------- | :------ | :----------------------------------------------------- | :--------------------------------------------------------------- |
| -- | Yes | <code>{ props: { class: "bx--tag\_\_label" } } </code> | -- | | -- | Yes | <code>{ props: { class: "bx--tag\_\_label" } } </code> | -- |
| icon | No | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
### Events ### Events
@ -4567,7 +4567,7 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | | :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element | | refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element | | refTooltip | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element | | ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
@ -4575,7 +4575,7 @@ None.
| align | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon | | align | No | <code>let</code> | No | <code>"start" &#124; "center" &#124; "end"</code> | <code>"center"</code> | Set the alignment of the tooltip relative to the icon |
| direction | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button | | direction | No | <code>let</code> | No | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon | | hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` | | icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to <code>&lt;code&gt;</code>&lt;Information /&gt;<code>&lt;/code&gt;</code> |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button | | iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute | | iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex | | tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
@ -4586,9 +4586,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------------------------------------------------ | | :---------- | :------ | :---- | :------------------------------------------------------------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| icon | No | -- | <code>&lt;svelte:component this={icon} name={iconName} /&gt;</code> | | icon | No | -- | <code><code>&lt;svelte:component this={icon} name={iconName} /&gt;</code></code> |
| triggerText | No | -- | <code>{triggerText}</code> | | triggerText | No | -- | <code>{triggerText}</code> |
### Events ### Events
@ -4667,8 +4667,8 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :-------------------------------------------------- | | :---------- | :------ | :---- | :--------------------------------------------------------------- |
| -- | Yes | -- | <code>&lt;svelte:component this={icon} /&gt;</code> | | -- | Yes | -- | <code><code>&lt;svelte:component this={icon} /&gt;</code></code> |
| tooltipText | No | -- | <code>{tooltipText}</code> | | tooltipText | No | -- | <code>{tooltipText}</code> |
### Events ### Events