From 78a97e5e81027060624198e0fb2636a71eb4b6ef Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 12 Nov 2024 10:15:06 -0800 Subject: [PATCH] feat(writer-markdown): omit escape --- src/writer/writer-markdown.ts | 8 +- tests/e2e/carbon/COMPONENT_INDEX.md | 260 ++++++++++++++-------------- 2 files changed, 132 insertions(+), 136 deletions(-) diff --git a/src/writer/writer-markdown.ts b/src/writer/writer-markdown.ts index 46f54b2..bcf54c3 100644 --- a/src/writer/writer-markdown.ts +++ b/src/writer/writer-markdown.ts @@ -13,10 +13,6 @@ function formatPropType(type?: any) { return `${type.replace(/\|/g, "|")}`; } -function escapeHtml(text: string) { - return text.replace(/\/g, ">"); -} - function formatPropValue(value: any) { if (value === undefined) return `${value}`; return `${value.replace(/`/g, "\\`").replace(/\|/g, "|")}`; @@ -24,7 +20,7 @@ function formatPropValue(value: any) { function formatPropDescription(description: any) { if (description === undefined || description.trim().length === 0) return MD_TYPE_UNDEFINED; - return escapeHtml(description).replace(/\n/g, "
"); + return description.replace(/\n/g, "
"); } function formatSlotProps(props?: string) { @@ -34,7 +30,7 @@ function formatSlotProps(props?: string) { function formatSlotFallback(fallback?: string) { if (fallback === undefined) return MD_TYPE_UNDEFINED; - return formatPropType(escapeHtml(fallback).replace(/\n/g, "
")); + return formatPropType(fallback).replace(/\n/g, "
"); } function formatEventDetail(detail?: string) { diff --git a/tests/e2e/carbon/COMPONENT_INDEX.md b/tests/e2e/carbon/COMPONENT_INDEX.md index 43b4c4f..65099de 100644 --- a/tests/e2e/carbon/COMPONENT_INDEX.md +++ b/tests/e2e/carbon/COMPONENT_INDEX.md @@ -193,12 +193,12 @@ ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | No | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) | -| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | +| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| title | No | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the "title" slot (e.g.,
...
) | +| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -334,22 +334,22 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| hasIconOnly | No | let | Yes | boolean | false | Set to `true` for the icon-only variant
@deprecated inferred using the $$slots API | -| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | No | let | No | "default" | "field" | "small" | "default" | Specify the size of button | -| icon | No | let | No | typeof import("carbon-icons-svelte").CarbonIcon | undefined | Specify the icon from `carbon-icons-svelte` to render | -| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | -| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | -| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Button let:props><div {...props}>...</div></Button>) | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| disabled | No | let | No | boolean | false | Set to `true` to disable the button | -| href | No | let | No | string | undefined | Set the `href` to use an anchor link | -| tabindex | No | let | No | string | "0" | Specify the tabindex | -| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| hasIconOnly | No | let | Yes | boolean | false | Set to `true` for the icon-only variant
@deprecated inferred using the $$slots API | +| kind | No | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | +| size | No | let | No | "default" | "field" | "small" | "default" | Specify the size of button | +| icon | No | let | No | typeof import("carbon-icons-svelte").CarbonIcon | undefined | Specify the icon from `carbon-icons-svelte` to render | +| iconDescription | No | let | No | string | undefined | Specify the ARIA label for the button icon | +| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | +| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., ) | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| disabled | No | let | No | boolean | false | Set to `true` to disable the button | +| href | No | let | No | string | undefined | Set the `href` to use an anchor link | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| type | No | let | No | string | "button" | Specify the `type` attribute for the button element | ### Slots @@ -490,25 +490,25 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | No | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>) | -| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | -| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | -| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | -| light | No | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | -| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | -| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | No | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | -| showMoreText | No | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | No | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., {`code`}) | +| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | +| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | +| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | +| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | +| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | No | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -564,19 +564,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | -| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | -| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | -| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | -| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | -| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | -| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g.,
...
) | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | +| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | +| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | +| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | +| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | +| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | +| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint | ### Slots @@ -1356,16 +1356,16 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | -| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g.,
...
) | +| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots @@ -1381,16 +1381,16 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | -| href | No | let | No | string | undefined | Specify the `href` attribute | -| company | No | let | No | string | undefined | Specify the company name | -| platformName | No | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | -| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav | +| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default | +| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| company | No | let | No | string | undefined | Specify the company name | +| platformName | No | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., ...) | +| persistentHamburgerMenu | No | let | No | boolean | false | Set to `true` to persist the hamburger menu | ### Slots @@ -1420,20 +1420,20 @@ export interface HeaderActionSlideTransition { ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | No | let | No | typeof import("carbon-icons-svelte").CarbonIcon | undefined | Specify the icon from `carbon-icons-svelte` to render | -| text | No | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | -| transition | No | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`)
Set to `false` to disable the transition | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------ | ------------------------------ | ------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel | +| icon | No | let | No | typeof import("carbon-icons-svelte").CarbonIcon | undefined | Specify the icon from `carbon-icons-svelte` to render | +| text | No | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g.,
...
) | +| transition | No | let | No | false | HeaderActionSlideTransition | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`)
Set to `false` to disable the transition | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------- | -| -- | Yes | -- | -- | -| text | No | -- | {#if text}<span>{text}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------- | +| -- | Yes | -- | -- | +| text | No | -- | {#if text}{text}{/if} | ### Events @@ -1493,9 +1493,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------------------------------- | -| -- | Yes | -- | <svelte:component this={icon} /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------------------------- | +| -- | Yes | -- | | ### Events @@ -1656,9 +1656,9 @@ export interface HeaderSearchResult { ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | -| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------ | +| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}– {result.description}{/if} | ### Events @@ -2423,10 +2423,10 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| menu | No | -- | <svelte:component
this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| menu | No | -- | this={icon}
aria-label={iconDescription}
title={iconDescription}
class="bx--overflow-menu\_\_icon {iconClass}"
/> | ### Events @@ -2457,9 +2457,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content={true}>
{text}
</div> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :-------------------------------------------------------------------------------------------------- | +| -- | Yes | -- |

{text}
 | ### Events @@ -2654,9 +2654,9 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------------------- | -| -- | Yes | { props: { class: "bx--progress-label" } } | <p class:bx--progress-label={true}>{label}</p> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :------------------------------------------------------- | :---------------------------------------------------------- | +| -- | Yes | { props: { class: "bx--progress-label" } } |

{label}

 | ### Events @@ -2776,15 +2776,15 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | -| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | -| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g.,
...
) | +| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | +| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant | +| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter | +| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | ### Slots @@ -3373,13 +3373,13 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | -| text | No | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) | -| disabled | No | let | No | boolean | false | Set to `true` to disable the switch | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | +| text | No | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the "text" slot (e.g., ...) | +| disabled | No | let | No | boolean | false | Set to `true` to disable the switch | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3401,14 +3401,14 @@ None. ### Props -| Prop name | Required | Kind | Reactive | Type | Default value | Description | -| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | -| label | No | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | -| href | No | let | No | string | "#" | Specify the href attribute | -| disabled | No | let | No | boolean | false | Set to `true` to disable the tab | -| tabindex | No | let | No | string | "0" | Specify the tabindex | -| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| label | No | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., Label) | +| href | No | let | No | string | "#" | Specify the href attribute | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tab | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4201,11 +4201,11 @@ None. ### Slots -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this={icon} name={iconName} /> | -| triggerText | No | -- | {triggerText} | +| Slot name | Default | Props | Fallback | +| :---------- | :------ | :---- | :------------------------------------------------------------ | +| -- | Yes | -- | -- | +| icon | No | -- | | +| triggerText | No | -- | {triggerText} | ### Events