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
| 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 |
| 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;) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | Specify the ARIA label for the accordion item chevron icon |
| 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 |
| 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;`) |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>"Expand/Collapse"</code> | 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 | <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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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" |
| 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 |
| 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 |
| 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 |
| showLessText | No | <code>let</code> | No | <code>string</code> | <code>"Show less"</code> | Specify the show less 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 />`type` must be "multi" |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the code element |
| 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 |
| 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") |
| 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. |
| 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 |
| 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 /><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 |
| 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 |
| 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 |
| 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 /><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 /><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 |
### Slots
@ -841,18 +841,18 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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;) |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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;`) |
| 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
@ -1604,15 +1604,15 @@ None.
### Props
| 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 |
| 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;` |
| 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;) |
| 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 |
| 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 |
| 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;` |
| 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;`) |
| 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 |
### Slots
@ -2638,17 +2638,17 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
### Slots
@ -3488,27 +3488,27 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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;) |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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;`) |
| 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 |
### Slots
@ -3712,13 +3712,13 @@ None.
### Props
| 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 |
| 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;) |
| 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 |
| 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 |
| 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;`) |
| 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 |
### Slots
@ -3740,14 +3740,14 @@ None.
### Props
| 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 |
| 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 |
| 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 |
| id | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the top-level element |
| 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 |
| 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 |
| 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 |
| 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

28
docs/src/COMPONENT_API.json
View file

@ -91,7 +91,7 @@
{
"name": "title",
"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",
"value": "\"title\"",
"isFunction": false,
@ -1024,7 +1024,7 @@
{
"name": "code",
"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",
"isFunction": false,
"isFunctionDeclaration": false,
@ -1035,7 +1035,7 @@
{
"name": "copy",
"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",
"value": "async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } }",
"isFunction": true,
@ -1071,7 +1071,7 @@
{
"name": "disabled",
"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",
"value": "false",
"isFunction": false,
@ -1083,7 +1083,7 @@
{
"name": "wrapText",
"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",
"value": "false",
"isFunction": false,
@ -1165,7 +1165,7 @@
{
"name": "showLessText",
"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",
"value": "\"Show less\"",
"isFunction": false,
@ -1177,7 +1177,7 @@
{
"name": "showMoreText",
"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",
"value": "\"Show more\"",
"isFunction": false,
@ -2127,7 +2127,7 @@
{
"name": "labelText",
"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",
"value": "\"\"",
"isFunction": false,
@ -2163,7 +2163,7 @@
{
"name": "shortcutText",
"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",
"value": "\"\"",
"isFunction": false,
@ -4905,7 +4905,7 @@
{
"name": "text",
"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",
"isFunction": false,
"isFunctionDeclaration": false,
@ -8141,7 +8141,7 @@
{
"name": "text",
"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",
"value": "\"Provide text\"",
"isFunction": false,
@ -11228,7 +11228,7 @@
{
"name": "labelText",
"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",
"value": "\"\"",
"isFunction": false,
@ -11626,7 +11626,7 @@
{
"name": "text",
"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",
"value": "\"Provide text\"",
"isFunction": false,
@ -11710,7 +11710,7 @@
{
"name": "label",
"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",
"value": "\"\"",
"isFunction": false,

4
src/Accordion/AccordionItem.svelte
View file

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

26
src/CodeSnippet/CodeSnippet.svelte
View file

@ -12,15 +12,18 @@
export let type = "single";
/**
* 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
* 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.
* @type {string}
*/
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}
*/
export let copy = async (code) => {
@ -38,14 +41,15 @@
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
*/
export let disabled = false;
/**
* Set to `true` to wrap the text
* Note that `type` must be "multi"
* Set to `true` to wrap the text.
*
* NOTE: this prop only works with the `type="multi"` variant
*/
export let wrapText = false;
@ -74,14 +78,16 @@
export let feedbackTimeout = 2000;
/**
* Specify the show less text
* `type` must be "multi"
* Specify the show less text.
*
* NOTE: this prop only works with the `type="multi"` variant
*/
export let showLessText = "Show less";
/**
* Specify the show more text
* `type` must be "multi"
*
* NOTE: this prop only works with the `type="multi"` variant
*/
export let showMoreText = "Show more";

4
src/ContentSwitcher/Switch.svelte
View file

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

8
src/ContextMenu/ContextMenuOption.svelte
View file

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

4
src/OverflowMenu/OverflowMenuItem.svelte
View file

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

2
src/Slider/Slider.svelte
View file

@ -49,7 +49,7 @@
/**
* 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 = "";

4
src/Tabs/Tab.svelte
View file

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

4
src/UIShell/HeaderAction.svelte
View file

@ -22,8 +22,8 @@
export let closeIcon = Close;
/**
* Specify the text
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
* Specify the text.
* Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
* @type {string}
*/
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 {
/**
* Specify the title of the accordion item heading
* Alternatively, use the "title" slot (e.g., <div slot="title">...</div>)
* Specify the title of the accordion item heading.
* Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`)
* @default "title"
*/
title?: string;

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

@ -8,15 +8,18 @@ export interface CodeSnippetProps {
type?: "single" | "inline" | "multi";
/**
* 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
* 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.
* @default undefined
*/
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); } }
*/
copy?: (code: string) => void;
@ -34,15 +37,16 @@ export interface CodeSnippetProps {
hideCopyButton?: boolean;
/**
* Set to `true` for the disabled variant
* Set to `true` for the disabled variant.
* Only applies to the "single", "multi" types
* @default false
*/
disabled?: boolean;
/**
* Set to `true` to wrap the text
* Note that `type` must be "multi"
* Set to `true` to wrap the text.
*
* NOTE: this prop only works with the `type="multi"` variant
* @default false
*/
wrapText?: boolean;
@ -84,15 +88,17 @@ export interface CodeSnippetProps {
feedbackTimeout?: number;
/**
* Specify the show less text
* `type` must be "multi"
* Specify the show less text.
*
* NOTE: this prop only works with the `type="multi"` variant
* @default "Show less"
*/
showLessText?: string;
/**
* Specify the show more text
* `type` must be "multi"
*
* NOTE: this prop only works with the `type="multi"` variant
* @default "Show more"
*/
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 {
/**
* Specify the switch text
* Alternatively, use the "text" slot (e.g., <span slot="text">...</span>)
* Specify the switch text.
* Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`)
* @default "Provide text"
*/
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>;
/**
* Specify the label text
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
* Specify the label text.
* Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
* @default ""
*/
labelText?: string;
@ -50,8 +50,8 @@ export interface ContextMenuOptionProps extends RestProps {
selectable?: boolean;
/**
* Specify the shortcut text
* Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>)
* Specify the shortcut text.
* Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`)
* @default ""
*/
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 {
/**
* Specify the item text
* Alternatively, use the default slot for a custom element
* Specify the item text.
* Alternatively, use the default slot
* @default "Provide text"
*/
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.
* Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>)
* Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`)
* @default ""
*/
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 {
/**
* Specify the tab label
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
* Specify the tab label.
* Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`)
* @default ""
*/
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>;
/**
* Specify the text
* Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>)
* Specify the text.
* Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`)
* @default undefined
*/
text?: string;