diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 8575c73b..1bd9ef0e 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -230,13 +230,12 @@ import { AccordionItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :--------------------------------------------------------------------------- | :------------------- | :---------------- | :--------------------------------------------------------- | -| title | string | "title" | Specify the title of the accordion item heading | -| Alternatively, use the named slot "title" (e.g.
...
) | -| open | boolean | false | Set to `true` to open the first accordion item | -| disabled | boolean | false | Set to `true` to disable the accordion item | -| iconDescription | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------- | :---------------- | :---------------------------------------------------------------------------------------------------------------------------- | +| title | string | "title" | Specify the title of the accordion item heading. Alternatively, use the named slot "title" (e.g.
...
) | +| open | boolean | false | Set to `true` to open the first accordion item | +| disabled | boolean | false | Set to `true` to disable the accordion item | +| iconDescription | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -425,24 +424,22 @@ import { Button } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :---------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------- | :------------ | :---------------------------------------------------- | -| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of button | -| size | "default" | "field" | "small" | "default" | Specify the size of button | -| hasIconOnly | boolean | false | Set to `true` for the icon-only variant | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | -| iconDescription | string | -- | Specify the ARIA label for the button icon | -| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon | -| `hasIconOnly` must be set to `true` | -| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | -| as | boolean | false | Set to `true` to render a custom HTML element | -| Props are destructured as `props` in the default slot (e.g. ) | -| skeleton | boolean | false | Set to `true` to display the skeleton state | -| disabled | boolean | false | Set to `true` to disable the button | -| href | string | -- | Set the `href` to use an anchor link | -| tabindex | string | "0" | Specify the tabindex | -| type | string | "button" | Specify the `type` attribute for the button element | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| Prop name | Type | Default value | Description | +| :--------------- | :----------------------------------------------------------------------------------------- | :------------ | :--------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| kind | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of button | +| size | "default" | "field" | "small" | "default" | Specify the size of button | +| hasIconOnly | boolean | false | Set to `true` for the icon-only variant | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | +| iconDescription | string | -- | Specify the ARIA label for the button icon | +| tooltipAlignment | "start" | "center" | "end" | -- | Set the alignment of the tooltip relative to the icon. `hasIconOnly` must be set to `true` | +| tooltipPosition | "top" | "right" | "bottom" | "left" | -- | Set the position of the tooltip relative to the icon | +| as | boolean | false | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g. ) | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| disabled | boolean | false | Set to `true` to disable the button | +| href | string | -- | Set the `href` to use an anchor link | +| tabindex | string | "0" | Specify the tabindex | +| type | string | "button" | Specify the `type` attribute for the button element | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -637,28 +634,24 @@ import { CodeSnippet } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :----------------------------------------------------------------------------- | :--------------------------------------------------- | :------------ | :--------------------------------------------------------------- | -| type | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | string | -- | Set the code snippet text | -| Alternatively, use the default slot (e.g. {`code`}) | -| expanded | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| hideCopyButton | boolean | false | Set to `true` to hide the copy button | -| wrapText | boolean | false | Set to `true` to wrap the text | -| Note that `type` must be "multi" | -| light | boolean | false | Set to `true` to enable the light variant | -| skeleton | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon | -| copyLabel | string | -- | Specify the ARIA label of the copy button | -| feedback | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | string | "Show less" | Specify the show less text | -| `type` must be "multi" | -| showMoreText | string | "Show more" | Specify the show more text | -| `type` must be "multi" | -| showMoreLess | boolean | false | Set to `true` to enable the show more/less button | -| id | string | -- | Set an id for the code element | -| ref | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| Prop name | Type | Default value | Description | +| :-------------------- | :--------------------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------- | +| type | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | string | -- | Set the code snippet text. Alternatively, use the default slot (e.g. {`code`}) | +| expanded | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| hideCopyButton | boolean | false | Set to `true` to hide the copy button | +| wrapText | boolean | false | Set to `true` to wrap the text. Note that `type` must be "multi" | +| light | boolean | false | Set to `true` to enable the light variant | +| skeleton | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | string | -- | Specify the ARIA label for the copy button icon | +| copyLabel | string | -- | Specify the ARIA label of the copy button | +| feedback | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | string | "Show less" | Specify the show less text. `type` must be "multi" | +| showMoreText | string | "Show more" | Specify the show more text. `type` must be "multi" | +| showMoreLess | boolean | false | Set to `true` to enable the show more/less button | +| id | string | -- | Set an id for the code element | +| ref | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | ### Slots @@ -732,19 +725,18 @@ interface ColumnSizeDescriptor { type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ``` -| Prop name | Type | Default value | Description | -| :------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | -| as | boolean | false | Set to `true` to render a custom HTML element | -| Props are destructured as `props` in the default slot (e.g.
...
) | -| noGutter | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | boolean | false | Set to `true` to remove the right gutter | -| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | -| sm | ColumnBreakpoint | -- | Set the small breakpoint | -| md | ColumnBreakpoint | -- | Set the medium breakpoint | -| lg | ColumnBreakpoint | -- | Set the large breakpoint | -| xlg | ColumnBreakpoint | -- | Set the extra large breakpoint | -| max | ColumnBreakpoint | -- | Set the maximum breakpoint | +| Prop name | Type | Default value | Description | +| :------------ | :------------------------------------------------------------------------------------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g.
...
) | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | +| aspectRatio | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | +| sm | ColumnBreakpoint | -- | Set the small breakpoint | +| md | ColumnBreakpoint | -- | Set the medium breakpoint | +| lg | ColumnBreakpoint | -- | Set the large breakpoint | +| xlg | ColumnBreakpoint | -- | Set the extra large breakpoint | +| max | ColumnBreakpoint | -- | Set the maximum breakpoint | ### Slots @@ -988,17 +980,16 @@ import { DataTable } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------------------------------------------- | :-------------------------------------------------- | :------------ | :-------------------------------------------- | -| headers | {key: string; value: string;}[] | -- | Specify the data table headers | -| rows | Object[] | -- | Specify the rows the data table should render | -| keys defined in `headers` are used for the row ids | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table | -| title | string | "" | Specify the title of the data table | -| description | string | "" | Specify the description of the data table | -| zebra | boolean | false | Set to `true` to use zebra styles | -| sortable | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Type | Default value | Description | +| :----------- | :-------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------ | +| headers | {key: string; value: string;}[] | -- | Specify the data table headers | +| rows | Object[] | -- | Specify the rows the data table should render. keys defined in `headers` are used for the row ids | +| size | "compact" | "short" | "tall" | -- | Set the size of the data table | +| title | string | "" | Specify the title of the data table | +| description | string | "" | Specify the description of the data table | +| zebra | boolean | false | Set to `true` to use zebra styles | +| sortable | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | boolean | false | Set to `true` to enable a sticky header | ### Slots @@ -1027,16 +1018,15 @@ import { DataTableSkeleton } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :-------------------------------------------------- | :-------------------------------------------------- | :------------ | :-------------------------------------------------------- | -| columns | number | 5 | Specify the number of columns | -| rows | number | 5 | Specify the number of rows | -| size | "compact" | "short" | "tall" | -- | Set the size of the data table | -| zebra | boolean | false | Set to `true` to apply zebra styles to the datatable rows | -| showHeader | boolean | true | Set to `false` to hide the header | -| headers | string[] | -- | Set the column headers | -| If `headers` has one more items, `count` is ignored | -| showToolbar | boolean | true | Set to `false` to hide the toolbar | +| Prop name | Type | Default value | Description | +| :---------- | :-------------------------------------------------- | :------------ | :-------------------------------------------------------------------------- | +| columns | number | 5 | Specify the number of columns | +| rows | number | 5 | Specify the number of rows | +| size | "compact" | "short" | "tall" | -- | Set the size of the data table | +| zebra | boolean | false | Set to `true` to apply zebra styles to the datatable rows | +| showHeader | boolean | true | Set to `false` to hide the header | +| headers | string[] | -- | Set the column headers. If `headers` has one more items, `count` is ignored | +| showToolbar | boolean | true | Set to `false` to hide the toolbar | ### Slots @@ -1399,19 +1389,18 @@ import { FileUploaderDropContainer } from "carbon-components-svelte"; type Files = string[]; ``` -| Prop name | Type | Default value | Description | -| :------------------------------------------- | :---------------------------------------- | :------------ | :--------------------------------------------------------- | -| accept | string[] | -- | Specify the accepted file types | -| multiple | boolean | false | Set to `true` to allow multiple files | -| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files | -| The default behavior does not validate files | -| labelText | string | "Add file" | Specify the label text | -| role | string | "button" | Specify the `role` attribute of the drop container | -| disabled | boolean | false | Set to `true` to disable the input | -| tabindex | string | "0" | Specify `tabindex` attribute | -| id | string | -- | Set an id for the input element | -| name | string | "" | Specify a name attribute for the input | -| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| Prop name | Type | Default value | Description | +| :------------ | :---------------------------------------- | :------------ | :------------------------------------------------------------------------------------------------------- | +| accept | string[] | -- | Specify the accepted file types | +| multiple | boolean | false | Set to `true` to allow multiple files | +| validateFiles | (files: Files) => Files | -- | Override the default behavior of validating uploaded files. The default behavior does not validate files | +| labelText | string | "Add file" | Specify the label text | +| role | string | "button" | Specify the `role` attribute of the drop container | +| disabled | boolean | false | Set to `true` to disable the input | +| tabindex | string | "0" | Specify `tabindex` attribute | +| id | string | -- | Set an id for the input element | +| name | string | "" | Specify a name attribute for the input | +| ref | null | HTMLInputElement | null | Obtain a reference to the input HTML element | ### Slots @@ -1688,16 +1677,15 @@ import { Grid } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------------------------------------------------------------------------------------------------------------ | :------------------- | :------------ | :-------------------------------------------- | -| as | boolean | false | Set to `true` to render a custom HTML element | -| Props are destructured as `props` in the default slot (e.g.
...
) | -| condensed | boolean | false | Set to `true` to use the condensed variant | -| narrow | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | boolean | false | Set to `true` to remove the right gutter | +| Prop name | Type | Default value | Description | +| :------------ | :------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g.
...
) | +| condensed | boolean | false | Set to `true` to use the condensed variant | +| narrow | boolean | false | Set to `true` to use the narrow variant | +| fullWidth | boolean | false | Set to `true` to use the fullWidth variant | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -1723,16 +1711,15 @@ import { Header } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :----------------------------------------------------------------------------------- | :----------------------------------------- | :------------ | :--------------------------------------------- | -| expandedByDefault | boolean | true | Set to `false` to hide the side nav by default | -| isSideNavOpen | boolean | false | Set to `true` to open the side nav | -| uiShellAriaLabel | string | -- | Specify the ARIA label for the header | -| href | string | -- | Specify the `href` attribute | -| company | string | -- | Specify the company name | -| platformName | string | -- | Specify the platform name | -| Alternatively, use the named slot "platform" (e.g. ...) | -| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| Prop name | Type | Default value | Description | +| :---------------- | :----------------------------------------- | :------------ | :-------------------------------------------------------------------------------------------------------------- | +| expandedByDefault | boolean | true | Set to `false` to hide the side nav by default | +| isSideNavOpen | boolean | false | Set to `true` to open the side nav | +| uiShellAriaLabel | string | -- | Specify the ARIA label for the header | +| href | string | -- | Specify the `href` attribute | +| company | string | -- | Specify the company name | +| platformName | string | -- | Specify the platform name. Alternatively, use the named slot "platform" (e.g. ...) | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | ### Slots @@ -1758,13 +1745,12 @@ import { HeaderAction } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------- | :------------ | :-------------------------------------------- | -| isOpen | boolean | false | Set to `true` to open the panel | -| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | -| text | string | -- | Specify the text | -| Alternatively, use the named slot "text" (e.g.
...
) | -| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| Prop name | Type | Default value | Description | +| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ | :------------------------------------------------------------------------------------------- | +| isOpen | boolean | false | Set to `true` to open the panel | +| icon | { render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; } | -- | Specify the icon props | +| text | string | -- | Specify the text. Alternatively, use the named slot "text" (e.g.
...
) | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -2092,11 +2078,10 @@ import { Icon } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :---------------------------------------------- | :------------------------------------------------------------------ | :------------ | :---------------------------------------------------- | -| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render | -| Icon size must be 16px (e.g. `Add16`, `Task16`) | -| skeleton | boolean | false | Set to `true` to display the skeleton state | +| Prop name | Type | Default value | Description | +| :-------- | :------------------------------------------------------------------ | :------------ | :----------------------------------------------------------------------------------------------------- | +| render | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render. Icon size must be 16px (e.g. `Add16`, `Task16`) | +| skeleton | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -2701,34 +2686,32 @@ interface MultiSelectItem { } ``` -| Prop name | Type | Default value | Description | -| :-------------------------------------------------- | :----------------------------------------------------------------------- | :----------------- | :--------------------------------------------------------------- | -| items | MultiSelectItem[] | -- | Set the multiselect items | -| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item | -| selectedIds | MultiSelectItemId[] | -- | Set the selected ids | -| value | string | "" | Specify the multiselect value | -| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox | -| type | "default" | "inline" | "default" | Specify the type of multiselect | -| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | boolean | false | Set to `true` to disable the dropdown | -| filterable | boolean | false | Set to `true` to filter items | -| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic | -| The default filtering is an exact string comparison | -| open | boolean | false | Set to `true` to open the dropdown | -| light | boolean | false | Set to `true` to enable the light variant | -| locale | string | "en" | Specify the locale | -| placeholder | string | "" | Specify the placeholder text | -| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic | -| The default sorting compare the item text value | -| translateWithId | (id: any) => string | -- | Override the default translation ids | -| titleText | string | "" | Specify the title text | -| useTitleInItem | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | string | "" | Specify the invalid state text | -| helperText | string | "" | Specify the helper text | -| label | string | "" | Specify the list box label | -| id | string | -- | Set an id for the list box component | -| name | string | -- | Specify a name attribute for the select | +| Prop name | Type | Default value | Description | +| :---------------- | :----------------------------------------------------------------------- | :----------------- | :-------------------------------------------------------------------------------- | +| items | MultiSelectItem[] | -- | Set the multiselect items | +| itemToString | (item: MultiSelectItem) => string | -- | Override the display of a multiselect item | +| selectedIds | MultiSelectItemId[] | -- | Set the selected ids | +| value | string | "" | Specify the multiselect value | +| size | "sm" | "lg" | "xl" | -- | Set the size of the combobox | +| type | "default" | "inline" | "default" | Specify the type of multiselect | +| selectionFeedback | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | boolean | false | Set to `true` to disable the dropdown | +| filterable | boolean | false | Set to `true` to filter items | +| filterItem | (item: MultiSelectItem, value: string) => string | -- | Override the filtering logic. The default filtering is an exact string comparison | +| open | boolean | false | Set to `true` to open the dropdown | +| light | boolean | false | Set to `true` to enable the light variant | +| locale | string | "en" | Specify the locale | +| placeholder | string | "" | Specify the placeholder text | +| sortItem | (a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem | -- | Override the sorting logic. The default sorting compare the item text value | +| translateWithId | (id: any) => string | -- | Override the default translation ids | +| titleText | string | "" | Specify the title text | +| useTitleInItem | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | string | "" | Specify the invalid state text | +| helperText | string | "" | Specify the helper text | +| label | string | "" | Specify the list box label | +| id | string | -- | Set an id for the list box component | +| name | string | -- | Specify a name attribute for the select | ### Slots @@ -3040,18 +3023,17 @@ import { OverflowMenuItem } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------------------------------------------------- | :------------------------------------------------------------------ | :------------- | :---------------------------------------------------------------- | -| text | string | "Provide text" | Specify the item text | -| Alternatively, use the default slot for a custom element | -| href | string | "" | Specify the `href` attribute if the item is a link | -| primaryFocus | boolean | false | Set to `true` if the item should be focused when opening the menu | -| disabled | boolean | false | Set to `true` to disable the item | -| hasDivider | boolean | false | Set to `true` to include a divider | -| danger | boolean | false | Set to `true` to use the danger variant | -| requireTitle | boolean | true | Set to `false` to omit the button `title` attribute | -| id | string | -- | Set an id for the top-level element | -| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| Prop name | Type | Default value | Description | +| :----------- | :------------------------------------------------------------------ | :------------- | :------------------------------------------------------------------------------ | +| text | string | "Provide text" | Specify the item text. Alternatively, use the default slot for a custom element | +| href | string | "" | Specify the `href` attribute if the item is a link | +| primaryFocus | boolean | false | Set to `true` if the item should be focused when opening the menu | +| disabled | boolean | false | Set to `true` to disable the item | +| hasDivider | boolean | false | Set to `true` to include a divider | +| danger | boolean | false | Set to `true` to use the danger variant | +| requireTitle | boolean | true | Set to `false` to omit the button `title` attribute | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | ### Slots @@ -3481,15 +3463,14 @@ import { Row } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :------------------------------------------------------------------------------------------------------------------ | :------------------- | :------------ | :-------------------------------------------- | -| as | boolean | false | Set to `true` to render a custom HTML element | -| Props are destructured as `props` in the default slot (e.g.
...
) | -| condensed | boolean | false | Set to `true` to use the condensed variant | -| narrow | boolean | false | Set to `true` to use the narrow variant | -| noGutter | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | boolean | false | Set to `true` to remove the right gutter | +| Prop name | Type | Default value | Description | +| :------------ | :------------------- | :------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| as | boolean | false | Set to `true` to render a custom HTML element. Props are destructured as `props` in the default slot (e.g.
...
) | +| condensed | boolean | false | Set to `true` to use the condensed variant | +| narrow | boolean | false | Set to `true` to use the narrow variant | +| noGutter | boolean | false | Set to `true` to remove the gutter | +| noGutterLeft | boolean | false | Set to `true` to remove the left gutter | +| noGutterRight | boolean | false | Set to `true` to remove the right gutter | ### Slots @@ -4306,14 +4287,13 @@ import { Switch } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :--------------------------------------------------------------------------- | :----------------------------------------- | :------------- | :-------------------------------------------- | -| text | string | "Provide text" | Specify the switch text | -| Alternatively, use the named slot "text" (e.g. ...) | -| selected | boolean | false | Set to `true` for the switch to be selected | -| disabled | boolean | false | Set to `true` to disable the switch | -| id | string | -- | Set an id for the button element | -| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| Prop name | Type | Default value | Description | +| :-------- | :----------------------------------------- | :------------- | :---------------------------------------------------------------------------------------------------- | +| text | string | "Provide text" | Specify the switch text. Alternatively, use the named slot "text" (e.g. ...) | +| selected | boolean | false | Set to `true` for the switch to be selected | +| disabled | boolean | false | Set to `true` to disable the switch | +| id | string | -- | Set an id for the button element | +| ref | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | ### Slots @@ -4343,15 +4323,14 @@ import { Tab } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :----------------------------------------------------------------------- | :----------------------------------------- | :------------ | :-------------------------------------------- | -| label | string | "" | Specify the tab label | -| Alternatively, use the default slot (e.g. Label) | -| href | string | "#" | Specify the href attribute | -| disabled | boolean | false | Set to `true` to disable the tab | -| tabindex | string | "0" | Specify the tabindex | -| id | string | -- | Set an id for the top-level element | -| ref | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| Prop name | Type | Default value | Description | +| :-------- | :----------------------------------------- | :------------ | :---------------------------------------------------------------------------------------------- | +| label | string | "" | Specify the tab label. Alternatively, use the default slot (e.g. Label) | +| href | string | "#" | Specify the href attribute | +| disabled | boolean | false | Set to `true` to disable the tab | +| tabindex | string | "0" | Specify the tabindex | +| id | string | -- | Set an id for the top-level element | +| ref | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | ### Slots @@ -5242,22 +5221,21 @@ import { Tooltip } from "carbon-components-svelte"; ### Props -| Prop name | Type | Default value | Description | -| :---------------------------------------------- | :------------------------------------------------------------------ | :------------ | :--------------------------------------------------------------------------- | -| direction | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| open | boolean | false | Set to `true` to open the tooltip | -| hideIcon | boolean | false | Set to `true` to hide the tooltip icon | -| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button | -| Icon size must be 16px (e.g. `Add16`, `Task16`) | -| iconDescription | string | "" | Specify the ARIA label for the tooltip button | -| iconName | string | "" | Specify the icon name attribute | -| tabindex | string | "0" | Set the button tabindex | -| tooltipId | string | -- | Set an id for the tooltip | -| triggerId | string | -- | Set an id for the tooltip button | -| triggerText | string | "" | Set the tooltip button text | -| ref | null | HTMLElement | null | Obtain a reference to the trigger text HTML element | -| refTooltip | null | HTMLElement | null | Obtain a reference to the tooltip HTML element | -| refIcon | null | HTMLElement | null | Obtain a reference to the icon HTML element | +| Prop name | Type | Default value | Description | +| :-------------- | :------------------------------------------------------------------ | :------------ | :---------------------------------------------------------------------------------------------------------------------------- | +| direction | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| open | boolean | false | Set to `true` to open the tooltip | +| hideIcon | boolean | false | Set to `true` to hide the tooltip icon | +| icon | typeof import("carbon-icons-svelte/lib/Add16").default | -- | Specify the icon from `carbon-icons-svelte` to render for the tooltip button. Icon size must be 16px (e.g. `Add16`, `Task16`) | +| iconDescription | string | "" | Specify the ARIA label for the tooltip button | +| iconName | string | "" | Specify the icon name attribute | +| tabindex | string | "0" | Set the button tabindex | +| tooltipId | string | -- | Set an id for the tooltip | +| triggerId | string | -- | Set an id for the tooltip button | +| triggerText | string | "" | Set the tooltip button text | +| ref | null | HTMLElement | null | Obtain a reference to the trigger text HTML element | +| refTooltip | null | HTMLElement | null | Obtain a reference to the tooltip HTML element | +| refIcon | null | HTMLElement | null | Obtain a reference to the icon HTML element | ### Slots diff --git a/scripts/rollup/generate-index.js b/scripts/rollup/generate-index.js index f8223898..a542f53e 100644 --- a/scripts/rollup/generate-index.js +++ b/scripts/rollup/generate-index.js @@ -63,9 +63,9 @@ export function generateIndex(components, groups, pkg) { exported_props.forEach((prop, name) => { code += `| ${name}${ prop.kind === "const" ? " (`constant`)" : "" - } | ${formatType(prop.type)} | ${prop.value || "--"} | ${ - prop.description - } |\n`; + } | ${formatType(prop.type)} | ${ + prop.value || "--" + } | ${prop.description.replace(/\n/g, ". ")} |\n`; }); } else { code += "No exported props.\n\n";