diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index c48ec72ee2..f308615ddb 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., `<div slot="title">...</div>`) |
+| iconDescription | No | let
| No | string
| "Expand/Collapse"
| Specify the ARIA label for the accordion item chevron icon |
### Slots
@@ -534,26 +534,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
| false
| Set to `true` to enable the show more/less button |
-| expanded | No | let
| Yes | boolean
| false
| Set to `true` to expand a multi-line code snippet (type="multi") |
-| type | No | let
| No | "single" | "inline" | "multi"
| "single"
| Set the type of code snippet |
-| code | No | let
| No | string
| undefined
| Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code |
-| copy | No | let
| No | (code: string) => void
| async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
| Override the default copy behavior of using the navigator.clipboard.writeText API to copy text |
-| 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 that `type` must be "multi" |
-| 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
`type` must be "multi" |
-| showMoreText | No | let
| No | string
| "Show more"
| Specify the show more text
`type` must be "multi" |
-| 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
| false
| Set to `true` to enable the show more/less button |
+| expanded | No | let
| Yes | boolean
| false
| Set to `true` to expand a multi-line code snippet (type="multi") |
+| type | No | let
| No | "single" | "inline" | "multi"
| "single"
| Set the type of code snippet |
+| code | No | let
| No | string
| undefined
| Set the code snippet text.
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 |
### Slots
@@ -841,18 +841,18 @@ 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., `<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 |
### Slots
@@ -1601,15 +1601,15 @@ 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 `<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 |
### Slots
@@ -2635,17 +2635,17 @@ None.
### 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 |
-| primaryFocus | No | let
| Yes | boolean
| false
| Set to `true` if the item should be focused when opening the menu |
-| text | No | let
| No | string
| "Provide text"
| Specify the item text
Alternatively, use the default slot for a custom element |
-| href | No | let
| No | string
| ""
| Specify the `href` attribute if the item is a link |
-| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the item |
-| hasDivider | No | let
| No | boolean
| false
| Set to `true` to include a divider |
-| danger | No | let
| No | boolean
| false
| Set to `true` to use the danger variant |
-| requireTitle | No | let
| No | boolean
| true
| Set to `false` to omit the button `title` attribute |
-| 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 | HTMLButtonElement
| null
| Obtain a reference to the HTML element |
+| primaryFocus | No | let
| Yes | boolean
| false
| Set to `true` if the item should be focused when opening the menu |
+| text | No | let
| No | string
| "Provide text"
| Specify the item text.
Alternatively, use the default slot |
+| href | No | let
| No | string
| ""
| Specify the `href` attribute if the item is a link |
+| disabled | No | let
| No | boolean
| false
| Set to `true` to disable the item |
+| hasDivider | No | let
| No | boolean
| false
| Set to `true` to include a divider |
+| danger | No | let
| No | boolean
| false
| Set to `true` to use the danger variant |
+| requireTitle | No | let
| No | boolean
| true
| Set to `false` to omit the button `title` attribute |
+| id | No | let
| No | string
| "ccs-" + Math.random().toString(36)
| Set an id for the top-level element |
### Slots
@@ -3485,27 +3485,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., `<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 |
### Slots
@@ -3709,13 +3709,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., `<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 |
### Slots
@@ -3737,14 +3737,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., `<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 |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 381a6bcc20..b930f0f815 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -91,7 +91,7 @@
{
"name": "title",
"kind": "let",
- "description": "Specify the title of the accordion item heading\nAlternatively, use the \"title\" slot (e.g.,