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

fix(types): improve formatting of prop comments (#1779)

Browse source
This commit is contained in:
Eric Liu 2023-07-23 12:25:44 -07:00 • committed by GitHub
commit be763706ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 170 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

188
COMPONENT_INDEX.md
View file

@ -202,12 +202,12 @@
### 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., `&lt;div slot="title"&gt;...&lt;/div&gt;`) |
| 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
@ -534,26 +534,26 @@ 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>false</code> | Set to `true` to enable the show more/less button | | showMoreLess | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to enable the show more/less button |
| 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 />You must use the `code` prop to copy the code | | 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. |
| 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> | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | | 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 |
| wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text<br />Note that `type` must be "multi" | | wrapText | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to wrap the text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| 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 |
| copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon | | copyButtonDescription | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label for the copy button icon |
| copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button | | copyLabel | No | <code>let</code> | No | <code>string</code> | <code>undefined</code> | Specify the ARIA label of the copy button |
| feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet | | feedback | No | <code>let</code> | No | <code>string</code> | <code>"Copied!"</code> | Specify the feedback text displayed when clicking the snippet |
| feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text | | feedbackTimeout | No | <code>let</code> | No | <code>number</code> | <code>2000</code> | Set the timeout duration (ms) to display feedback text |
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text<br />`type` must be "multi" | | showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less text.<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br />`type` must be "multi" | | showMoreText | No | <code>let</code> | No | <code>string</code> | <code>"Show more"</code> | Specify the show more text<br /><br />NOTE: this prop only works with the `type="multi"` variant |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
### Slots ### Slots
@ -841,18 +841,18 @@ 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 |
| icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text | | icon | No | <code>let</code> | Yes | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render<br />Icon is rendered to the left of the label text |
| 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., `&lt;span slot="labelText"&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., &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., `&lt;span slot="shortcutText"&gt;...&lt;/span&gt;`) |
| 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
@ -1604,15 +1604,15 @@ 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 `&lt;Switcher 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 `&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 `&lt;Close size={20} /&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., &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., `&lt;div slot="text"&gt;...&lt;/div&gt;`) |
| 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
@ -2638,17 +2638,17 @@ 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 &#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 |
| primaryFocus | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if the item should be focused when opening the menu | | primaryFocus | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if the item should be focused when opening the menu |
| text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the item text<br />Alternatively, use the default slot for a custom element | | text | No | <code>let</code> | No | <code>string</code> | <code>"Provide text"</code> | Specify the item text.<br />Alternatively, use the default slot |
| href | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the `href` attribute if the item is a link | | href | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the `href` attribute if the item is a link |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the item | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the item |
| hasDivider | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to include a divider | | hasDivider | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to include a divider |
| danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant | | danger | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to use the danger variant |
| requireTitle | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the button `title` attribute | | requireTitle | No | <code>let</code> | No | <code>boolean</code> | <code>true</code> | Set to `false` to omit the button `title` attribute |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
### Slots ### Slots
@ -3488,27 +3488,27 @@ 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 |
| maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value | | maxLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the max value |
| min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value | | min | No | <code>let</code> | No | <code>number</code> | <code>0</code> | Set the minimum slider value |
| minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value | | minLabel | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the label for the min value |
| step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value | | step | No | <code>let</code> | No | <code>number</code> | <code>1</code> | Set the step value |
| stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value | | stepMultiplier | No | <code>let</code> | No | <code>number</code> | <code>4</code> | Set the step multiplier value |
| required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value | | required | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to require a value |
| inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type | | inputType | No | <code>let</code> | No | <code>string</code> | <code>"number"</code> | Specify the input type |
| disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider | | disabled | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the slider |
| light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant | | light | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
| hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input | | hideTextInput | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the text input |
| 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., `&lt;span slot="labelText"&gt;...&lt;/span&gt;`) |
| 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 |
### Slots ### Slots
@ -3712,13 +3712,13 @@ 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., `&lt;span slot="text"&gt;...&lt;/span&gt;`) |
| 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 |
### Slots ### Slots
@ -3740,14 +3740,14 @@ 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., `&lt;Tab&gt;&lt;span&gt;Label&lt;/span&gt;&lt;/Tab&gt;`) |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element | | id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
### Slots ### Slots

28
docs/src/COMPONENT_API.json
View file

@ -91,7 +91,7 @@
{ {
"name": "title", "name": "title",
"kind": "let", "kind": "let",
"description": "Specify the title of the accordion item heading\nAlternatively, use the \"title\" slot (e.g., <div slot=\"title\">...</div>)", "description": "Specify the title of the accordion item heading.\nAlternatively, use the \"title\" slot (e.g., `<div slot=\"title\">...</div>`)",
"type": "string", "type": "string",
"value": "\"title\"", "value": "\"title\"",
"isFunction": false, "isFunction": false,
@ -1024,7 +1024,7 @@
{ {
"name": "code", "name": "code",
"kind": "let", "kind": "let",
"description": "Set the code snippet text\nAlternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)\nYou must use the `code` prop to copy the code", "description": "Set the code snippet text.\nAlternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).\n\nNOTE: you *must* use the `code` prop for the copy-to-clipboard functionality.",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -1035,7 +1035,7 @@
{ {
"name": "copy", "name": "copy",
"kind": "let", "kind": "let",
"description": "Override the default copy behavior of using the navigator.clipboard.writeText API to copy text", "description": "By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.\n\nProvide a custom function to override this behavior.",
"type": "(code: string) => void", "type": "(code: string) => void",
"value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }", "value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }",
"isFunction": true, "isFunction": true,
@ -1071,7 +1071,7 @@
{ {
"name": "disabled", "name": "disabled",
"kind": "let", "kind": "let",
"description": "Set to `true` for the disabled variant\nOnly applies to the \"single\", \"multi\" types", "description": "Set to `true` for the disabled variant.\nOnly applies to the \"single\", \"multi\" types",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -1083,7 +1083,7 @@
{ {
"name": "wrapText", "name": "wrapText",
"kind": "let", "kind": "let",
"description": "Set to `true` to wrap the text\nNote that `type` must be \"multi\"", "description": "Set to `true` to wrap the text.\n\nNOTE: this prop only works with the `type=\"multi\"` variant",
"type": "boolean", "type": "boolean",
"value": "false", "value": "false",
"isFunction": false, "isFunction": false,
@ -1165,7 +1165,7 @@
{ {
"name": "showLessText", "name": "showLessText",
"kind": "let", "kind": "let",
"description": "Specify the show less text\n`type` must be \"multi\"", "description": "Specify the show less text.\n\nNOTE: this prop only works with the `type=\"multi\"` variant",
"type": "string", "type": "string",
"value": "\"Show less\"", "value": "\"Show less\"",
"isFunction": false, "isFunction": false,
@ -1177,7 +1177,7 @@
{ {
"name": "showMoreText", "name": "showMoreText",
"kind": "let", "kind": "let",
"description": "Specify the show more text\n`type` must be \"multi\"", "description": "Specify the show more text\n\nNOTE: this prop only works with the `type=\"multi\"` variant",
"type": "string", "type": "string",
"value": "\"Show more\"", "value": "\"Show more\"",
"isFunction": false, "isFunction": false,
@ -2127,7 +2127,7 @@
{ {
"name": "labelText", "name": "labelText",
"kind": "let", "kind": "let",
"description": "Specify the label text\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)", "description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., `<span slot=\"labelText\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -2163,7 +2163,7 @@
{ {
"name": "shortcutText", "name": "shortcutText",
"kind": "let", "kind": "let",
"description": "Specify the shortcut text\nAlternatively, use the \"shortcutText\" slot (e.g., <span slot=\"shortcutText\">...</span>)", "description": "Specify the shortcut text.\nAlternatively, use the \"shortcutText\" slot (e.g., `<span slot=\"shortcutText\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -4905,7 +4905,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the text\nAlternatively, use the named slot \"text\" (e.g., <div slot=\"text\">...</div>)", "description": "Specify the text.\nAlternatively, use the named slot \"text\" (e.g., `<div slot=\"text\">...</div>`)",
"type": "string", "type": "string",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
@ -8141,7 +8141,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the item text\nAlternatively, use the default slot for a custom element", "description": "Specify the item text.\nAlternatively, use the default slot",
"type": "string", "type": "string",
"value": "\"Provide text\"", "value": "\"Provide text\"",
"isFunction": false, "isFunction": false,
@ -11228,7 +11228,7 @@
{ {
"name": "labelText", "name": "labelText",
"kind": "let", "kind": "let",
"description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., <span slot=\"labelText\">...</span>)", "description": "Specify the label text.\nAlternatively, use the \"labelText\" slot (e.g., `<span slot=\"labelText\">...</span>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -11626,7 +11626,7 @@
{ {
"name": "text", "name": "text",
"kind": "let", "kind": "let",
"description": "Specify the switch text\nAlternatively, use the \"text\" slot (e.g., <span slot=\"text\">...</span>)", "description": "Specify the switch text.\nAlternatively, use the \"text\" slot (e.g., `<span slot=\"text\">...</span>`)",
"type": "string", "type": "string",
"value": "\"Provide text\"", "value": "\"Provide text\"",
"isFunction": false, "isFunction": false,
@ -11710,7 +11710,7 @@
{ {
"name": "label", "name": "label",
"kind": "let", "kind": "let",
"description": "Specify the tab label\nAlternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)", "description": "Specify the tab label.\nAlternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,

4
src/Accordion/AccordionItem.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the title of the accordion item heading * Specify the title of the accordion item heading.
* Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) * Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
*/ */
export let title = "title"; export let title = "title";

26
src/CodeSnippet/CodeSnippet.svelte
View file

@ -12,15 +12,18 @@
export let type = "single"; export let type = "single";
/** /**
* Set the code snippet text * Set the code snippet text.
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) * Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
* You must use the `code` prop to copy the code *
* NOTE: you *must* use the `code` prop for the copy-to-clipboard functionality.
* @type {string} * @type {string}
*/ */
export let code = undefined; export let code = undefined;
/** /**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text * 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.
* @type {(code: string) => void} * @type {(code: string) => void}
*/ */
export let copy = async (code) => { export let copy = async (code) => {
@ -38,14 +41,15 @@
export let hideCopyButton = false; export let hideCopyButton = false;
/** /**
* Set to `true` for the disabled variant * Set to `true` for the disabled variant.
* Only applies to the "single", "multi" types * Only applies to the "single", "multi" types
*/ */
export let disabled = false; export let disabled = false;
/** /**
* Set to `true` to wrap the text * Set to `true` to wrap the text.
* Note that `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
*/ */
export let wrapText = false; export let wrapText = false;
@ -74,14 +78,16 @@
export let feedbackTimeout = 2000; export let feedbackTimeout = 2000;
/** /**
* Specify the show less text * Specify the show less text.
* `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
*/ */
export let showLessText = "Show less"; export let showLessText = "Show less";
/** /**
* Specify the show more text * Specify the show more text
* `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
*/ */
export let showMoreText = "Show more"; export let showMoreText = "Show more";

4
src/ContentSwitcher/Switch.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the switch text * Specify the switch text.
* Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) * Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`)
*/ */
export let text = "Provide text"; export let text = "Provide text";

8
src/ContextMenu/ContextMenuOption.svelte
View file

@ -19,8 +19,8 @@
export let icon = undefined; export let icon = undefined;
/** /**
* Specify the label text * Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
*/ */
export let labelText = ""; export let labelText = "";
@ -34,8 +34,8 @@
export let selectable = false; export let selectable = false;
/** /**
* Specify the shortcut text * Specify the shortcut text.
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) * Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`)
*/ */
export let shortcutText = ""; export let shortcutText = "";

4
src/OverflowMenu/OverflowMenuItem.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the item text * Specify the item text.
* Alternatively, use the default slot for a custom element * Alternatively, use the default slot
*/ */
export let text = "Provide text"; export let text = "Provide text";

2
src/Slider/Slider.svelte
View file

@ -49,7 +49,7 @@
/** /**
* Specify the label text. * Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
*/ */
export let labelText = ""; export let labelText = "";

4
src/Tabs/Tab.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the tab label * Specify the tab label.
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) * Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)
*/ */
export let label = ""; export let label = "";

4
src/UIShell/HeaderAction.svelte
View file

@ -22,8 +22,8 @@
export let closeIcon = Close; export let closeIcon = Close;
/** /**
* Specify the text * Specify the text.
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) * Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
* @type {string} * @type {string}
*/ */
export let text = undefined; export let text = undefined;

4
types/Accordion/AccordionItem.svelte.d.ts vendored
View file

@ -5,8 +5,8 @@ type RestProps = SvelteHTMLElements["li"];
export interface AccordionItemProps extends RestProps { export interface AccordionItemProps extends RestProps {
/** /**
* Specify the title of the accordion item heading * Specify the title of the accordion item heading.
* Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) * Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
* @default "title" * @default "title"
*/ */
title?: string; title?: string;

26
types/CodeSnippet/CodeSnippet.svelte.d.ts vendored
View file

@ -8,15 +8,18 @@ export interface CodeSnippetProps {
type?: "single" | "inline" | "multi"; type?: "single" | "inline" | "multi";
/** /**
* Set the code snippet text * Set the code snippet text.
* Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) * Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
* You must use the `code` prop to copy the code *
* NOTE: you *must* use the `code` prop for the copy-to-clipboard functionality.
* @default undefined * @default undefined
*/ */
code?: string; code?: string;
/** /**
* Override the default copy behavior of using the navigator.clipboard.writeText API to copy text * 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.
* @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } * @default async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }
*/ */
copy?: (code: string) => void; copy?: (code: string) => void;
@ -34,15 +37,16 @@ export interface CodeSnippetProps {
hideCopyButton?: boolean; hideCopyButton?: boolean;
/** /**
* Set to `true` for the disabled variant * Set to `true` for the disabled variant.
* Only applies to the "single", "multi" types * Only applies to the "single", "multi" types
* @default false * @default false
*/ */
disabled?: boolean; disabled?: boolean;
/** /**
* Set to `true` to wrap the text * Set to `true` to wrap the text.
* Note that `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
* @default false * @default false
*/ */
wrapText?: boolean; wrapText?: boolean;
@ -84,15 +88,17 @@ export interface CodeSnippetProps {
feedbackTimeout?: number; feedbackTimeout?: number;
/** /**
* Specify the show less text * Specify the show less text.
* `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
* @default "Show less" * @default "Show less"
*/ */
showLessText?: string; showLessText?: string;
/** /**
* Specify the show more text * Specify the show more text
* `type` must be "multi" *
* NOTE: this prop only works with the `type="multi"` variant
* @default "Show more" * @default "Show more"
*/ */
showMoreText?: string; showMoreText?: string;

4
types/ContentSwitcher/Switch.svelte.d.ts vendored
View file

@ -5,8 +5,8 @@ type RestProps = SvelteHTMLElements["button"];
export interface SwitchProps extends RestProps { export interface SwitchProps extends RestProps {
/** /**
* Specify the switch text * Specify the switch text.
* Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) * Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`)
* @default "Provide text" * @default "Provide text"
*/ */
text?: string; text?: string;

8
types/ContextMenu/ContextMenuOption.svelte.d.ts vendored
View file

@ -30,8 +30,8 @@ export interface ContextMenuOptionProps extends RestProps {
icon?: typeof import("svelte").SvelteComponent<any>; icon?: typeof import("svelte").SvelteComponent<any>;
/** /**
* Specify the label text * Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
* @default "" * @default ""
*/ */
labelText?: string; labelText?: string;
@ -50,8 +50,8 @@ export interface ContextMenuOptionProps extends RestProps {
selectable?: boolean; selectable?: boolean;
/** /**
* Specify the shortcut text * Specify the shortcut text.
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) * Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`)
* @default "" * @default ""
*/ */
shortcutText?: string; shortcutText?: string;

4
types/OverflowMenu/OverflowMenuItem.svelte.d.ts vendored
View file

@ -5,8 +5,8 @@ type RestProps = SvelteHTMLElements["li"];
export interface OverflowMenuItemProps extends RestProps { export interface OverflowMenuItemProps extends RestProps {
/** /**
* Specify the item text * Specify the item text.
* Alternatively, use the default slot for a custom element * Alternatively, use the default slot
* @default "Provide text" * @default "Provide text"
*/ */
text?: string; text?: string;

2
types/Slider/Slider.svelte.d.ts vendored
View file

@ -97,7 +97,7 @@ export interface SliderProps extends RestProps {
/** /**
* Specify the label text. * Specify the label text.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) * Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
* @default "" * @default ""
*/ */
labelText?: string; labelText?: string;

4
types/Tabs/Tab.svelte.d.ts vendored
View file

@ -5,8 +5,8 @@ type RestProps = SvelteHTMLElements["li"];
export interface TabProps extends RestProps { export interface TabProps extends RestProps {
/** /**
* Specify the tab label * Specify the tab label.
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) * Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)
* @default "" * @default ""
*/ */
label?: string; label?: string;

4
types/UIShell/HeaderAction.svelte.d.ts vendored
View file

@ -25,8 +25,8 @@ export interface HeaderActionProps extends RestProps {
closeIcon?: typeof import("svelte").SvelteComponent<any>; closeIcon?: typeof import("svelte").SvelteComponent<any>;
/** /**
* Specify the text * Specify the text.
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) * Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
* @default undefined * @default undefined
*/ */
text?: string; text?: string;