diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index a85d2226..4f690026 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -1,6 +1,6 @@ # Component Index -> 172 components exported from carbon-components-svelte@0.54.0. +> 165 components exported from carbon-components-svelte@0.80.0. ## Components @@ -30,7 +30,6 @@ - [`ContextMenuGroup`](#contextmenugroup) - [`ContextMenuOption`](#contextmenuoption) - [`ContextMenuRadioGroup`](#contextmenuradiogroup) -- [`Copy`](#copy) - [`CopyButton`](#copybutton) - [`DataTable`](#datatable) - [`DataTableSkeleton`](#datatableskeleton) @@ -55,7 +54,6 @@ - [`Header`](#header) - [`HeaderAction`](#headeraction) - [`HeaderActionLink`](#headeractionlink) -- [`HeaderActionSearch`](#headeractionsearch) - [`HeaderGlobalAction`](#headerglobalaction) - [`HeaderNav`](#headernav) - [`HeaderNavItem`](#headernavitem) @@ -65,8 +63,6 @@ - [`HeaderPanelLinks`](#headerpanellinks) - [`HeaderSearch`](#headersearch) - [`HeaderUtilities`](#headerutilities) -- [`Icon`](#icon) -- [`IconSkeleton`](#iconskeleton) - [`ImageLoader`](#imageloader) - [`InlineLoading`](#inlineloading) - [`InlineNotification`](#inlinenotification) @@ -88,7 +84,6 @@ - [`NotificationActionButton`](#notificationactionbutton) - [`NotificationButton`](#notificationbutton) - [`NotificationIcon`](#notificationicon) -- [`NotificationTextDetails`](#notificationtextdetails) - [`NumberInput`](#numberinput) - [`NumberInputSkeleton`](#numberinputskeleton) - [`OrderedList`](#orderedlist) @@ -161,8 +156,6 @@ - [`ToastNotification`](#toastnotification) - [`Toggle`](#toggle) - [`ToggleSkeleton`](#toggleskeleton) -- [`ToggleSmall`](#togglesmall) -- [`ToggleSmallSkeleton`](#togglesmallskeleton) - [`Toolbar`](#toolbar) - [`ToolbarBatchActions`](#toolbarbatchactions) - [`ToolbarContent`](#toolbarcontent) @@ -183,12 +176,12 @@ ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ | -| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | -| disabled | let | No | boolean | false | Set to `true` to disable the accordion | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | +| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | +| disabled | No | let | No | boolean | false | Set to `true` to disable the accordion | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | ### Slots @@ -209,12 +202,12 @@ ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) | -| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- | +| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item | +| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item | +| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) | +| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | ### Slots @@ -238,12 +231,12 @@ ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ---------------------- | ------------------------------------------------ | -| count | let | No | number | 4 | Specify the number of accordion items to render | -| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | -| open | let | No | boolean | true | Set to `false` to close the first accordion item | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ---------------------- | ------------------------------------------------ | +| count | No | let | No | number | 4 | Specify the number of accordion items to render | +| align | No | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the accordion | +| open | No | let | No | boolean | true | Set to `false` to close the first accordion item | ### Slots @@ -262,9 +255,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | No | let | No | "2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -280,10 +273,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | -| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | -| skeleton | let | No | boolean | false | Set to `true` to display skeleton state | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| skeleton | No | let | No | boolean | false | Set to `true` to display skeleton state | ### Slots @@ -304,10 +297,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------- | -| href | let | No | string | undefined | Set the `href` to use an anchor link | -| isCurrentPage | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------------------------- | +| href | No | let | No | string | undefined | Set the `href` to use an anchor link | +| isCurrentPage | No | let | No | boolean | false | Set to `true` if the breadcrumb item represents the current page | ### Slots @@ -328,10 +321,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | -| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | -| count | let | No | number | 3 | Specify the number of breadcrumb items to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------------- | +| noTrailingSlash | No | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | +| count | No | let | No | number | 3 | Specify the number of breadcrumb items to render | ### Slots @@ -358,11 +351,10 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | -| sizes | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | -| size | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | -| breakpoints | const | No | Record | { sm: 320, md: 672, lg: 1056, xlg: 1312, max: 1584, } | Reference the Carbon grid breakpoints | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | +| sizes | No | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | +| size | No | let | Yes | BreakpointSize | undefined | Determine the current Carbon grid breakpoint size | ### Slots @@ -374,30 +366,29 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; | Event name | Type | Detail | | :--------- | :--------- | :----------------------------------------------------------------------- | -| match | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } | +| change | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } | ## `Button` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | -| isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| iconDescription | let | No | string | undefined | Specify the ARIA label for the button icon | -| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon
`hasIconOnly` must be set to `true` | -| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | -| as | 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 | let | No | boolean | false | Set to `true` to display the skeleton state | -| disabled | let | No | boolean | false | Set to `true` to disable the button | -| href | let | No | string | undefined | Set the `href` to use an anchor link | -| tabindex | let | No | string | "0" | Specify the tabindex | -| type | 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 | +| 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" | "lg" | "xl" | "default" | Specify the size of button | +| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | +| isSelected | No | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon 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.
Only applies to icon-only buttons | +| 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 | ### Slots @@ -418,9 +409,9 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- | +| stacked | No | let | No | boolean | false | Set to `true` to stack the buttons vertically | ### Slots @@ -436,11 +427,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | -| href | let | No | string | undefined | Set the `href` to use an anchor link | -| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton | -| small | let | No | boolean | false | -- | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | +| href | No | let | No | string | undefined | Set the `href` to use an anchor link | +| size | No | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button skeleton | ### Slots @@ -459,22 +449,22 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| group | let | Yes | any[] | [] | Specify the bound group | -| checked | let | Yes | boolean | false | Specify whether the checkbox is checked | -| value | let | No | any | "" | Specify the value of the checkbox | -| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| required | let | No | boolean | false | Set to `true` to mark the field as required | -| readonly | let | No | boolean | false | Set to `true` for the checkbox to be read-only | -| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| name | let | No | string | "" | Set a name for the input element | -| title | let | No | string | undefined | Specify the title attribute for the label element | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| title | No | let | Yes | string | undefined | Specify the title attribute for the label element | +| group | No | let | Yes | ReadonlyArray | undefined | Specify the bound group | +| checked | No | let | Yes | boolean | false | Specify whether the checkbox is checked | +| value | No | let | No | any | "" | Specify the value of the checkbox | +| indeterminate | No | let | No | boolean | false | Specify whether the checkbox is indeterminate | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| readonly | No | let | No | boolean | false | Set to `true` for the checkbox to be read-only | +| disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| name | No | let | No | string | "" | Set a name for the input element | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input label | ### Slots @@ -517,12 +507,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ----------------------------------------- | -| clicked | let | Yes | boolean | false | Set to `true` to click the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| href | let | No | string | undefined | Set the `href` | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------- | +| clicked | No | let | Yes | boolean | false | Set to `true` to click the tile | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tile | +| href | No | let | No | string | undefined | Set the `href` | ### Slots @@ -544,26 +534,26 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | let | No | string | undefined | Set the code snippet text
Alternatively, use the default slot (e.g., <CodeSnippet>{`code`}</CodeSnippet>)
You must use the `code` prop to copy the code | -| copy | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | -| hideCopyButton | let | No | boolean | false | Set to `true` to hide the copy button | -| disabled | let | No | boolean | false | Set to `true` for the disabled variant
Only applies to the "single", "multi" types | -| wrapText | let | No | boolean | false | Set to `true` to wrap the text
Note that `type` must be "multi" | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| copyButtonDescription | let | No | string | undefined | Specify the ARIA label for the copy button icon | -| copyLabel | let | No | string | undefined | Specify the ARIA label of the copy button | -| feedback | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | -| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | -| showLessText | let | No | string | "Show less" | Specify the show less text
`type` must be "multi" | -| showMoreText | let | No | string | "Show more" | Specify the show more text
`type` must be "multi" | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | +| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | +| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | +| code | No | let | No | string | undefined | Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).

NOTE: you _must_ use the `code` prop for the copy-to-clipboard functionality. | +| copy | No | let | No | (code: string) => void | async (code) => { try { await navigator.clipboard.writeText(code); } catch (e) { console.log(e); } } | By default, this component uses `navigator.clipboard.writeText` API to copy text to the user's clipboard.

Provide a custom function to override this behavior. | +| hideCopyButton | No | let | No | boolean | false | Set to `true` to hide the copy button | +| disabled | No | let | No | boolean | false | Set to `true` for the disabled variant.
Only applies to the "single", "multi" types | +| wrapText | No | let | No | boolean | false | Set to `true` to wrap the text.

NOTE: this prop only works with the `type="multi"` variant | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| copyButtonDescription | No | let | No | string | undefined | Specify the ARIA label for the copy button icon | +| copyLabel | No | let | No | string | undefined | Specify the ARIA label of the copy button | +| feedback | No | let | No | string | "Copied!" | Specify the feedback text displayed when clicking the snippet | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| showLessText | No | let | No | string | "Show less" | Specify the show less text.

NOTE: this prop only works with the `type="multi"` variant | +| showMoreText | No | let | No | string | "Show more" | Specify the show more text

NOTE: this prop only works with the `type="multi"` variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the code element | ### Slots @@ -573,22 +563,24 @@ None. ### Events -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :---------------- | +| expand | dispatched | null | +| collapse | dispatched | null | +| copy | dispatched | null | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| animationend | forwarded | -- | ## `CodeSnippetSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- | -| type | let | No | "single" | "multi" | "single" | Set the type of code snippet | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------ | --------------------- | ---------------------------- | +| type | No | let | No | "single" | "multi" | "single" | Set the type of code snippet | ### Slots @@ -620,19 +612,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | 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 | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | -| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column | -| sm | let | No | ColumnBreakpoint | undefined | Set the small breakpoint | -| md | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint | -| lg | let | No | ColumnBreakpoint | undefined | Set the large breakpoint | -| xlg | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint | -| max | 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., <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 | ### Slots @@ -654,40 +646,45 @@ export type ComboBoxItemId = any; export interface ComboBoxItem { id: ComboBoxItemId; text: string; + disabled?: boolean; } ``` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | let | Yes | string | "" | Specify the selected combobox value | -| selectedId | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | -| items | let | No | ComboBoxItem[] | [] | Set the combobox items | -| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | -| size | let | No | "sm" | "xl" | undefined | Set the size of the combobox | -| disabled | let | No | boolean | false | Set to `true` to disable the combobox | -| titleText | let | No | string | "" | Specify the title text of the combobox | -| placeholder | let | No | string | "" | Specify the placeholder text | -| helperText | let | No | string | "" | Specify the helper text | -| invalidText | let | No | string | "" | Specify the invalid state text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the input | -| clear | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :------- | :-------------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| listRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | +| value | No | let | Yes | string | "" | Specify the selected combobox value | +| selectedId | No | let | Yes | ComboBoxItemId | undefined | Set the selected item by value id | +| items | No | let | No | ReadonlyArray | [] | Set the combobox items | +| itemToString | No | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the combobox | +| disabled | No | let | No | boolean | false | Set to `true` to disable the combobox | +| titleText | No | let | No | string | "" | Specify the title text of the combobox | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| helperText | No | let | No | string | "" | Specify the helper text | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| shouldFilterItem | No | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value | +| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No | let | No | (id: "clearSelection") => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" since a combo box can only have on selection. | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| clear | No | function | No | (options?: { focus?: boolean; }) => void | () => { prevSelectedId = null; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; value = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- | +| -- | Yes | { item: ComboBoxItem; index: number } | {itemToString(item)} | +| titleText | No | -- | {titleText} | ### Events @@ -698,6 +695,7 @@ None. | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| paste | forwarded | -- | | clear | forwarded | -- | | scroll | forwarded | -- | @@ -705,15 +703,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the composed modal | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | -| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | -| containerClass | let | No | string | "" | Specify a class for the inner modal | -| selectorPrimaryFocus | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the modal | +| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the composed modal | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| containerClass | No | let | No | string | "" | Specify a class for the inner modal | +| selectorPrimaryFocus | No | let | No | null | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | ### Slots @@ -731,18 +729,18 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | +| submit | dispatched | null | +| click:button--primary | dispatched | null | +| close | dispatched | null | +| open | dispatched | null | ## `Content` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- | -| id | let | No | string | "main-content" | Specify the id for the main element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------- | --------------------------- | ----------------------------------- | +| id | No | let | No | string | "main-content" | Specify the id for the main element | ### Slots @@ -758,11 +756,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------- | ---------------------- | ----------------------------------------- | -| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the content switcher | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ----------------------------- | ---------------------- | ----------------------------------------- | +| selectedIndex | No | let | Yes | number | 0 | Set the selected index of the switch item | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the content switcher | ### Slots @@ -784,13 +781,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLUListElement | null | Obtain a reference to the unordered list HTML element | -| y | let | Yes | number | 0 | Specify the vertical offset of the menu position | -| x | let | Yes | number | 0 | Specify the horizontal offset of the menu position | -| open | let | Yes | boolean | false | Set to `true` to open the menu
Either `x` and `y` must be greater than zero | -| target | let | No | null | HTMLElement | HTMLElement[] | null | Specify an element or list of elements to trigger the context menu.
If no element is specified, the context menu applies to the entire window | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the unordered list HTML element | +| y | No | let | Yes | number | 0 | Specify the vertical offset of the menu position | +| x | No | let | Yes | number | 0 | Specify the horizontal offset of the menu position | +| open | No | let | Yes | boolean | false | Set to `true` to open the menu
Either `x` and `y` must be greater than zero | +| target | No | let | No | null | ReadonlyArray | null | Specify an element or list of elements to trigger the context menu.
If no element is specified, the context menu applies to the entire window | ### Slots @@ -805,7 +802,7 @@ None. | open | dispatched | HTMLElement | | click | forwarded | -- | | keydown | forwarded | -- | -| close | dispatched | -- | +| close | dispatched | null | ## `ContextMenuDivider` @@ -825,10 +822,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- | -| selectedIds | let | Yes | string[] | [] | -- | -| labelText | let | No | string | "" | Specify the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- | +| selectedIds | No | let | Yes | ReadonlyArray | [] | -- | +| labelText | No | let | No | string | "" | Specify the label text | ### Slots @@ -844,44 +841,45 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | -| selectable | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | -| selected | let | Yes | boolean | false | Set to `true` to use the selected variant | -| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | -| indented | let | Yes | boolean | false | Set to `true` to indent the label | -| kind | let | No | "default" | "danger" | "default" | Specify the kind of option | -| disabled | let | No | boolean | false | Set to `true` to enable the disabled state | -| labelText | let | No | string | "" | Specify the label text
Alternatively, use the "labelText" slot (e.g., <span slot="labelText">...</span>) | -| shortcutText | let | No | string | "" | Specify the shortcut text
Alternatively, use the "shortcutText" slot (e.g., <span slot="shortcutText">...</span>) | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | +| selectable | No | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | +| selected | No | let | Yes | boolean | false | Set to `true` to use the selected variant | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
Icon is rendered to the left of the label text | +| indented | No | let | Yes | boolean | false | Set to `true` to indent the label | +| kind | No | let | No | "default" | "danger" | "default" | Specify the kind of option | +| disabled | No | let | No | boolean | false | Set to `true` to enable the disabled state | +| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | +| shortcutText | No | let | No | string | "" | Specify the shortcut text.
Alternatively, use the "shortcutText" slot (e.g., `<span slot="shortcutText">...</span>`) | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Specify the id
It's recommended to provide an id as a value to bind to within a selectable/radio menu group | ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| labelText | No | -- | {labelText} | -| shortcutText | No | -- | {shortcutText} | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this="{icon}" /> | +| labelText | No | -- | {labelText} | +| shortcutText | No | -- | {shortcutText} | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| keydown | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| click | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| keydown | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| click | dispatched | null | ## `ContextMenuRadioGroup` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- | -| selectedId | let | Yes | string | "" | Set the selected radio group id | -| labelText | let | No | string | "" | Specify the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | ------------------- | --------------- | ------------------------------- | +| selectedId | No | let | Yes | string | "" | Set the selected radio group id | +| labelText | No | let | No | string | "" | Specify the label text | ### Slots @@ -893,38 +891,17 @@ None. None. -## `Copy` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | -| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :--------------------------------------------------------------------------------- | -| -- | Yes | -- | {#if animation}{feedback || $$restProps["aria-label"]}{/if} | - -### Events - -| Event name | Type | Detail | -| :----------- | :-------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | - ## `CopyButton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | -| text | let | No | string | undefined | Specify the text to copy | -| copy | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | +| feedback | No | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | +| feedbackTimeout | No | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | +| iconDescription | No | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | +| text | Yes | let | No | string | undefined | Specify the text to copy | +| copy | No | let | No | (text: string) => void | async (text) => { try { await navigator.clipboard.writeText(text); } catch (e) { console.log(e); } } | Override the default copy behavior of using the navigator.clipboard.writeText API to copy text | ### Slots @@ -932,11 +909,11 @@ None. ### Events -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | +| Event name | Type | Detail | +| :----------- | :--------- | :---------------- | +| click | forwarded | -- | +| animationend | forwarded | -- | +| copy | dispatched | null | ## `DataTable` @@ -953,6 +930,8 @@ export interface DataTableEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export interface DataTableNonEmptyHeader { @@ -961,6 +940,8 @@ export interface DataTableNonEmptyHeader { display?: (item: Value) => DataTableValue; sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); columnMenu?: boolean; + width?: string; + minWidth?: string; } export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; @@ -981,38 +962,41 @@ export interface DataTableCell { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | -| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | -| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | -| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| batchExpansion | let | No | boolean | false | Set to `true` to enable batch expansion | -| nonExpandableRowIds | let | No | DataTableRowId[] | [] | Specify the ids for rows that should not be expandable | -| radio | let | No | boolean | false | Set to `true` for the radio selection variant | -| batchSelection | let | No | boolean | false | Set to `true` to enable batch selection | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | -| pageSize | let | No | number | 0 | Specify the number of items to display in a page | -| page | let | No | number | 0 | Set to `number` to set current page | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------- | +| selectedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be selected | +| selectable | No | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | +| expandedRowIds | No | let | Yes | ReadonlyArray | [] | Specify the row ids to be expanded | +| expandable | No | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | +| sortDirection | No | let | Yes | "none" | "ascending" | "descending" | "none" | Specify the sort direction | +| sortKey | No | let | Yes | DataTableKey | null | Specify the header key to sort by | +| headers | No | let | No | ReadonlyArray | [] | Specify the data table headers | +| rows | No | let | No | ReadonlyArray | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | +| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the data table | +| title | No | let | No | string | "" | Specify the title of the data table | +| description | No | let | No | string | "" | Specify the description of the data table | +| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| batchExpansion | No | let | No | boolean | false | Set to `true` to enable batch expansion | +| nonExpandableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids for rows that should not be expandable | +| radio | No | let | No | boolean | false | Set to `true` for the radio selection variant | +| batchSelection | No | let | No | boolean | false | Set to `true` to enable batch selection | +| nonSelectableRowIds | No | let | No | ReadonlyArray | [] | Specify the ids of rows that should not be selectable | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | +| pageSize | No | let | No | number | 0 | Specify the number of items to display in a page | +| page | No | let | No | number | 0 | Set to `number` to set current page | ### Slots -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| cell | No | { row: DataTableRow; cell: DataTableCell; } | {cell.display ? cell.display(cell.value) : cell.value} | -| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | -| description | No | -- | {description} | -| expanded-row | No | { row: DataTableRow; } | -- | -| title | No | -- | {title} | +| Slot name | Default | Props | Fallback | +| :----------- | :------ | :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------ | +| -- | Yes | -- | -- | +| cell | No | { row: DataTableRow; cell: DataTableCell; rowIndex: number; cellIndex: number; } | {cell.display ? cell.display(cell.value) : cell.value} | +| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | +| description | No | -- | {description} | +| expanded-row | No | { row: DataTableRow; } | -- | +| title | No | -- | {title} | ### Events @@ -1021,25 +1005,27 @@ export interface DataTableCell { | click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } | | click:header--expand | dispatched | { expanded: boolean; } | | click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } | +| click:header--select | dispatched | { indeterminate: boolean; selected: boolean; } | | click:row | dispatched | DataTableRow | | mouseenter:row | dispatched | DataTableRow | | mouseleave:row | dispatched | DataTableRow | | click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } | +| click:row--select | dispatched | { selected: boolean; row: DataTableRow; } | | click:cell | dispatched | DataTableCell | ## `DataTableSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- | -| columns | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array | -| rows | let | No | number | 5 | Specify the number of rows | -| size | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table | -| zebra | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows | -| showHeader | let | No | boolean | true | Set to `false` to hide the header | -| headers | let | No | string[] | Partial[] | [] | Set the column headers
Supersedes `columns` if value is a non-empty array | -| showToolbar | let | No | boolean | true | Set to `false` to hide the toolbar | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------- | +| columns | No | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array | +| rows | No | let | No | number | 5 | Specify the number of rows | +| size | No | let | No | "compact" | "short" | "tall" | undefined | Set the size of the data table | +| zebra | No | let | No | boolean | false | Set to `true` to apply zebra styles to the datatable rows | +| showHeader | No | let | No | boolean | true | Set to `false` to hide the header | +| headers | No | let | No | ReadonlyArray> | [] | Set the column headers
Supersedes `columns` if value is a non-empty array | +| showToolbar | No | let | No | boolean | true | Set to `false` to hide the toolbar | ### Slots @@ -1058,20 +1044,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | -| valueTo | let | Yes | string | "" | Specify the date picker end date value (to)
Only works with the "range" date picker type | -| valueFrom | let | Yes | string | "" | Specify the date picker start date value (from)
Only works with the "range" date picker type | -| value | let | Yes | number | string | "" | Specify the date picker input value | -| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | -| dateFormat | let | No | string | "m/d/Y" | Specify the date format | -| maxDate | let | No | null | string | Date | null | Specify the maximum date | -| minDate | let | No | null | string | Date | null | Specify the minimum date | -| locale | let | No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key | "en" | Specify the locale | -| short | let | No | boolean | false | Set to `true` to use the short variant | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | -| flatpickrProps | let | No | import("flatpickr/dist/types/options").Options | {} | Override the options passed to the Flatpickr instance
https://flatpickr.js.org/options | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | +| valueTo | No | let | Yes | string | "" | Specify the date picker end date value (to)
Only works with the "range" date picker type | +| valueFrom | No | let | Yes | string | "" | Specify the date picker start date value (from)
Only works with the "range" date picker type | +| value | No | let | Yes | number | string | "" | Specify the date picker input value | +| datePickerType | No | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | +| dateFormat | No | let | No | string | "m/d/Y" | Specify the date format | +| maxDate | No | let | No | null | string | Date | null | Specify the maximum date | +| minDate | No | let | No | null | string | Date | null | Specify the minimum date | +| locale | No | let | No | import("flatpickr/dist/types/locale").CustomLocale | import("flatpickr/dist/types/locale").key | "en" | Specify the locale | +| short | No | let | No | boolean | false | Set to `true` to use the short variant | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the date picker element | +| flatpickrProps | No | let | No | import("flatpickr/dist/types/options").Options | { static: true } | Override the options passed to the Flatpickr instance.
@see https://flatpickr.js.org/options | ### Slots @@ -1093,24 +1079,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| size | let | No | "sm" | "xl" | undefined | Set the size of the input | -| type | let | No | string | "text" | Specify the input type | -| placeholder | let | No | string | "" | Specify the input placeholder text | -| pattern | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| helperText | let | No | string | "" | Specify the helper text | -| iconDescription | let | No | string | "" | Specify the ARIA label for the calendar icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| name | let | No | string | undefined | Set a name for the input element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | +| type | No | let | No | string | "text" | Specify the input type | +| placeholder | No | let | No | string | "" | Specify the input placeholder text | +| pattern | No | let | No | string | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" | Specify the Regular Expression for the input value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| helperText | No | let | No | string | "" | Specify the helper text | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the calendar icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| name | No | let | No | string | undefined | Set a name for the input element | ### Slots @@ -1126,15 +1112,16 @@ None. | keydown | forwarded | -- | | keyup | forwarded | -- | | blur | forwarded | -- | +| paste | forwarded | -- | ## `DatePickerSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- | -| range | let | No | boolean | false | Set to `true` to use the range variant | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ----------------------------------------- | +| range | No | let | No | boolean | false | Set to `true` to use the range variant | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | ### Slots @@ -1161,39 +1148,41 @@ export type DropdownItemText = string; export interface DropdownItem { id: DropdownItemId; text: DropdownItemText; + disabled?: boolean; } ``` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| selectedId | let | Yes | DropdownItemId | undefined | Specify the selected item id | -| items | let | No | DropdownItem[] | [] | Set the dropdown items | -| itemToString | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | -| type | let | No | "default" | "inline" | "default" | Specify the type of dropdown | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | -| size | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| titleText | let | No | string | "" | Specify the title text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | undefined | Specify the list box label | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the list box | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | +| selectedId | Yes | let | Yes | DropdownItemId | undefined | Specify the selected item id | +| items | No | let | No | ReadonlyArray | [] | Set the dropdown items | +| itemToString | No | let | No | (item: DropdownItem) => string | (item) => item.text || item.id | Override the display of a dropdown item | +| type | No | let | No | "default" | "inline" | "default" | Specify the type of dropdown | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the dropdown menu | +| size | No | let | No | "sm" | "lg" | "xl" | undefined | Specify the size of the dropdown field | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | +| titleText | No | let | No | string | "" | Specify the title text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | undefined | Specify the list box label | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | let | No | string | undefined | Specify a name attribute for the list box | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :--------------------------------------------------- | :-------------------------------- | +| -- | Yes | { item: DropdownItem; index: number; } | {itemToString(item)} | ### Events @@ -1205,9 +1194,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------- | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | ### Slots @@ -1226,19 +1215,19 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element | -| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | -| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | -| expanded | let | Yes | boolean | false | Set to `true` to expand the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | -| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | -| tileExpandedLabel | let | No | string | "" | Specify the icon label of the expanded tile | -| tileCollapsedLabel | let | No | string | "" | Specify the icon label of the collapsed tile | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element | +| tilePadding | No | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | +| tileMaxHeight | No | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand the tile | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| tileCollapsedIconText | No | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | +| tileExpandedIconText | No | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | +| tileExpandedLabel | No | let | No | string | "" | Specify the icon label of the expanded tile | +| tileCollapsedLabel | No | let | No | string | "" | Specify the icon label of the collapsed tile | +| 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 div element | ### Slots @@ -1261,54 +1250,61 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | -| files | let | Yes | File[] | [] | Obtain the uploaded file names | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | -| labelDescription | let | No | string | "" | Specify the label description | -| labelTitle | let | No | string | "" | Specify the label title | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | -| buttonLabel | let | No | string | "" | Specify the button label | -| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | -| name | let | No | string | "" | Specify a name attribute for the file button uploader input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| disabled | No | let | No | boolean | false | Set to `true` to disable the file uploader | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| clearFiles | No | const | No | () => void | () => { files = []; } | Programmatically clear the uploaded files | +| labelTitle | No | let | No | string | "" | Specify the label title.
Alternatively, use the named slot "labelTitle" (e.g., `<span slot="labelTitle">...</span>`) | +| labelDescription | No | let | No | string | "" | Specify the label description.
Alternatively, use the named slot "labelDescription" (e.g., `<span slot="labelDescription">...</span>`) | +| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | +| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button | +| buttonLabel | No | let | No | string | "" | Specify the button label | +| iconDescription | No | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | +| name | No | let | No | string | "" | Specify a name attribute for the file button uploader input | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :--------------- | :------ | :---- | :------------------------------ | +| labelDescription | No | -- | {labelDescription} | +| labelTitle | No | -- | {labelTitle} | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| add | dispatched | File[] | -| remove | dispatched | File[] | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keydown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------- | +| add | dispatched | ReadonlyArray | +| remove | dispatched | ReadonlyArray | +| change | dispatched | ReadonlyArray | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | ## `FileUploaderButton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :----------------------------------------------------------------------------------------- | ------------------------------------------------ | -------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| labelText | let | Yes | string | "Add file" | Specify the label text | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| disableLabelChanges | let | No | boolean | false | Set to `true` to disable label changes | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | -| role | let | No | string | "button" | Specify the label role | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------ | ------------------------------------------------ | -------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| labelText | No | let | Yes | string | "Add file" | Specify the label text | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| disableLabelChanges | No | let | No | boolean | false | Set to `true` to disable label changes | +| kind | No | let | No | import("../Button/Button.svelte").ButtonProps["kind"] | "primary" | Specify the kind of file uploader button | +| size | No | let | No | import("../Button/Button.svelte").ButtonProps["size"] | "small" | Specify the size of the file uploader button | +| role | No | let | No | string | "button" | Specify the label role | +| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -1318,28 +1314,29 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------- | +| change | dispatched | ReadonlyArray | +| keydown | forwarded | -- | +| click | forwarded | -- | ## `FileUploaderDropContainer` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | -| labelText | let | No | string | "Add file" | Specify the label text | -| role | let | No | string | "button" | Specify the `role` attribute of the drop container | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| files | No | let | Yes | ReadonlyArray | [] | Obtain a reference to the uploaded files | +| accept | No | let | No | ReadonlyArray | [] | Specify the accepted file types | +| multiple | No | let | No | boolean | false | Set to `true` to allow multiple files | +| validateFiles | No | let | No | (files: ReadonlyArray) => ReadonlyArray | (files) => files | Override the default behavior of validating uploaded files.
By default, files are not validated | +| labelText | No | let | No | string | "Add file" | Specify the label text | +| role | No | let | No | string | "button" | Specify the `role` attribute of the drop container | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| tabindex | No | let | No | string | "0" | Specify `tabindex` attribute | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -1349,30 +1346,30 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------- | -| add | dispatched | FileList | -| dragover | forwarded | -- | -| dragleave | forwarded | -- | -| drop | forwarded | -- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------- | +| add | dispatched | ReadonlyArray | +| change | dispatched | ReadonlyArray | +| dragover | forwarded | -- | +| dragleave | forwarded | -- | +| drop | forwarded | -- | +| keydown | forwarded | -- | +| click | forwarded | -- | ## `FileUploaderItem` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | -| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| errorSubject | let | No | string | "" | Specify the error subject text | -| errorBody | let | No | string | "" | Specify the error body text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | -| name | let | No | string | "" | Specify the file uploader name | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | +| size | No | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | +| iconDescription | No | let | No | string | "" | Specify the ARIA label used for the status icons | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| errorSubject | No | let | No | string | "" | Specify the error subject text | +| errorBody | No | let | No | string | "" | Specify the error body text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| name | No | let | No | string | "" | Specify the file uploader name | ### Slots @@ -1410,11 +1407,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status | -| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------ | ------------------------------------------------ | +| status | No | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status | +| iconDescription | No | let | No | string | "" | Specify the ARIA label used for the status icons | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | ### Slots @@ -1454,9 +1451,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------- | ----------------- | -------------------------------------- | -| ref | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- | +| ref | No | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element | ### Slots @@ -1479,14 +1476,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| message | let | No | boolean | false | Set to `true` to render a form requirement | -| messageText | let | No | string | "" | Specify the message text | -| legendText | let | No | string | "" | Specify the legend text | -| legendId | let | No | string | "" | Specify an id for the legend element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- | +| noMargin | No | let | No | boolean | false | Set to `true` for to remove the bottom margin | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| message | No | let | No | boolean | false | Set to `true` to render a form requirement | +| messageText | No | let | No | string | "" | Specify the message text | +| legendText | No | let | No | string | "" | Specify the legend text | +| legendId | No | let | No | string | "" | Specify an id for the legend element | ### Slots @@ -1528,9 +1525,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------------- | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | ### Slots @@ -1551,16 +1548,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | 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 | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | 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., <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 | ### Slots @@ -1576,27 +1573,28 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | undefined | Specify the ARIA label for the header | -| href | let | No | string | undefined | Specify the `href` attribute | -| company | let | No | string | undefined | Specify the company name | -| platformName | let | No | string | "" | Specify the platform name
Alternatively, use the named slot "platform" (e.g., <span slot="platform">...</span>) | -| persistentHamburgerMenu | let | No | boolean | false | Set to `true` to persist the hamburger menu | -| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | -| iconMenu | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state
Defaults to `Menu20` | -| iconClose | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state
Defaults to `Close20` | +| 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.

Alternatively, use the named slot "company" (e.g., `<span slot="company">...</span>`) | +| 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 | +| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | +| iconMenu | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the closed state.
Defaults to `<Menu size={20} />` | +| iconClose | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the opened state.
Defaults to `<Close size={20} />` | ### Slots -| Slot name | Default | Props | Fallback | -| :-------------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| platform | No | -- | {platformName} | -| skip-to-content | No | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------------- | :------ | :---- | :--------------------------- | +| -- | Yes | -- | -- | +| company | No | -- | {company}  | +| platform | No | -- | {platformName} | +| skip-to-content | No | -- | -- | ### Events @@ -1606,95 +1604,73 @@ None. ## `HeaderAction` -### Types - -```ts -export interface HeaderActionSlideTransition { - delay?: number; - duration?: number; - easing?: (t: number) => number; -} -``` - ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :---------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| isOpen | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| closeIcon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open | -| text | let | No | string | undefined | Specify the text
Alternatively, use the named slot "text" (e.g., <div slot="text">...</div>) | -| transition | 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("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is closed.
Defaults to `<Switcher size={20} />` | +| closeIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render when the action panel is open.
Defaults to `<Close size={20} />` | +| text | No | let | No | string | undefined | Specify the text.
Alternatively, use the named slot "text" (e.g., `<div slot="text">...</div>`) | +| transition | No | let | No | false | import("svelte/transition").SlideParams | { duration: 200 } | Customize the panel transition (i.e., `transition:slide`).
Set to `false` to disable the transition | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the panel from closing when clicking outside | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------------- | -| -- | Yes | -- | -- | -| text | No | -- | {#if text}<span>{text}</span>{/if} | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :--------------------------------------------------------------------- | +| -- | Yes | -- | -- | +| closeIcon | No | -- | <svelte:component this="{closeIcon}" size="{20}" /> | +| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> | +| text | No | -- | {#if text}<span>{text}</span>{/if} | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| close | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| open | dispatched | null | +| close | dispatched | null | +| click | forwarded | -- | ## `HeaderActionLink` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| linkIsActive | let | No | boolean | false | Set to `true` to use the active state | -| href | let | No | string | undefined | Specify the `href` attribute | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| linkIsActive | No | let | No | boolean | false | Set to `true` to use the active state | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------------------- | +| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> | ### Events -None. - -## `HeaderActionSearch` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | -| searchIsActive | let | Yes | boolean | false | Set to `true` to focus the search | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :------------------ | :--------- | :---------------------------------------------------- | -| inputSearch | dispatched | { action: "search"; textInput: string; } | -| focusInputSearch | dispatched | -- | -| focusOutInputSearch | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :-------- | :----- | +| click | forwarded | -- | ## `HeaderGlobalAction` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| isActive | let | No | boolean | false | Set to `true` to use the active variant | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| isActive | No | let | No | boolean | false | Set to `true` to use the active variant | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------- | -| -- | Yes | -- | <svelte:component this="{icon}" /> | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------------------- | +| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> | ### Events @@ -1706,9 +1682,7 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- | -| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav | +None. ### Slots @@ -1724,16 +1698,18 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| href | let | No | string | undefined | Specify the `href` attribute | -| text | let | No | string | undefined | Specify the text | -| isSelected | let | No | boolean | false | Set to `true` to select the item | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| text | No | let | No | string | undefined | Specify the text | +| isSelected | No | let | No | boolean | false | Set to `true` to select the item | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :------------------ | +| -- | Yes | -- | {text} | ### Events @@ -1752,12 +1728,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| href | let | No | string | "/" | Specify the `href` attribute | -| text | let | No | string | undefined | Specify the text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| href | No | let | No | string | "/" | Specify the `href` attribute | +| text | No | let | No | string | undefined | Specify the text | ### Slots @@ -1798,10 +1774,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| href | let | No | string | undefined | Specify the `href` attribute | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| href | No | let | No | string | undefined | Specify the `href` attribute | ### Slots @@ -1845,13 +1821,13 @@ export interface HeaderSearchResult { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- | -| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | -| value | let | Yes | string | "" | Specify the search input value | -| results | let | No | HeaderSearchResult[] | [] | Render a list of search results | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | ------------------ | -------------------------------------------------- | +| selectedResultIndex | No | let | Yes | number | 0 | Specify the selected result index | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| active | No | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | +| value | No | let | Yes | string | "" | Specify the search input value | +| results | No | let | No | ReadonlyArray | [] | Render a list of search results | ### Slots @@ -1863,15 +1839,16 @@ export interface HeaderSearchResult { | Event name | Type | Detail | | :--------- | :--------- | :---------------------------------------------------------------------------------------------- | -| active | dispatched | any | -| inactive | dispatched | any | -| clear | dispatched | any | +| active | dispatched | null | +| inactive | dispatched | null | +| clear | dispatched | null | | select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } | | change | forwarded | -- | | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | | keydown | forwarded | -- | +| paste | forwarded | -- | ## `HeaderUtilities` @@ -1889,63 +1866,20 @@ None. None. -## `Icon` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | ------------------------------------------- | -| render | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `IconSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ | -| size | let | No | number | 16 | Set the size of the icon | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - ## `ImageLoader` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | let | No | string | "" | Specify the image source | -| alt | let | No | string | "" | Specify the image alt text | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | -| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :----------------- | :------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | No | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | No | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | No | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | No | let | No | string | "" | Specify the image source | +| alt | No | let | No | string | "" | Specify the image alt text | +| ratio | No | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | undefined | Specify the aspect ratio for the image wrapper | +| fadeIn | No | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | No | const | No | (url?: string) => void | (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); } | Method invoked to load the image provided a `src` value | ### Slots @@ -1956,21 +1890,21 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :--------------- | -| load | dispatched | any | -| error | dispatched | any | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| load | dispatched | null | +| error | dispatched | null | ## `InlineLoading` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------- | -| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | -| description | let | No | string | undefined | Set the loading description | -| iconDescription | let | No | string | undefined | Specify the ARIA label for the loading icon | -| successDelay | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------- | +| status | No | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | +| description | No | let | No | string | undefined | Set the loading description | +| iconDescription | No | let | No | string | undefined | Specify a description for the loading icon.
Defaults to the `status` prop for the "error" and "finished" states | +| successDelay | No | let | No | number | 1500 | Specify the timeout delay (ms) after `status` is set to "success" | ### Slots @@ -1978,28 +1912,29 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| success | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| success | dispatched | null | ## `InlineNotification` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | let | No | string | "alert" | Set the `role` attribute | -| title | let | No | string | "" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | No | let | No | string | "alert" | Set the `role` attribute | +| title | No | let | No | string | "" | Specify the title text | +| subtitle | No | let | No | string | "" | Specify the subtitle text | +| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | +| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon | +| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button | ### Slots @@ -2024,21 +1959,22 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | -| size | let | No | "sm" | "lg" | undefined | Specify the size of the link | -| href | let | No | string | undefined | Specify the href value | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` | -| disabled | let | No | boolean | false | Set to `true` to disable the checkbox | -| visited | let | No | boolean | false | Set to `true` to allow visited styles | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | +| size | No | let | No | "sm" | "lg" | undefined | Specify the size of the link | +| href | No | let | No | string | undefined | Specify the href value | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render
`inline` must be `false` | +| disabled | No | let | No | boolean | false | Set to `true` to disable the checkbox | +| visited | No | let | No | boolean | false | Set to `true` to allow visited styles | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this="{icon}" /> | ### Events @@ -2053,17 +1989,17 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ | -| size | let | No | "sm" | "xl" | undefined | Set the size of the list box | -| type | let | No | "default" | "inline" | "default" | Set the type of the list box | -| open | let | No | boolean | false | Set to `true` to open the list box | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the list box | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------------------------- | ---------------------- | ------------------------------------------ | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the list box | +| type | No | let | No | "default" | "inline" | "default" | Set the type of the list box | +| open | No | let | No | boolean | false | Set to `true` to open the list box | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the list box | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | ### Slots @@ -2088,15 +2024,15 @@ export type ListBoxFieldTranslationId = "close" | "open"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| disabled | let | No | boolean | false | Set to `true` to disable the list box field | -| role | let | No | string | "combobox" | Specify the role attribute | -| tabindex | let | No | string | "-1" | Specify the tabindex | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | -| translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| id | 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 | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| disabled | No | let | No | boolean | false | Set to `true` to disable the list box field | +| role | No | let | No | string | "combobox" | Specify the role attribute | +| tabindex | No | let | No | string | "-1" | Specify the tabindex | +| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | No | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2120,10 +2056,10 @@ export type ListBoxFieldTranslationId = "close" | "open"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| id | 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 | HTMLDivElement | null | Obtain a reference to the HTML element | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2147,11 +2083,11 @@ export type ListBoxMenuIconTranslationId = "close" | "open"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- | -| open | let | No | boolean | false | Set to `true` to open the list box menu icon | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | -| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- | +| open | No | let | No | boolean | false | Set to `true` to open the list box menu icon | +| translationIds | No | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | +| translateWithId | No | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -2167,10 +2103,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| active | let | No | boolean | false | Set to `true` to enable the active state | -| highlighted | let | No | boolean | false | Set to `true` to enable the highlighted state | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- | +| active | No | let | No | boolean | false | Set to `true` to enable the active state | +| highlighted | No | let | No | boolean | false | Set to `true` to enable the highlighted state | +| disabled | No | let | No | boolean | false | Set to `true` to disable the menu item | ### Slots @@ -2196,13 +2133,13 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| selectionCount | let | No | number | undefined | Specify the number of selected items | -| disabled | let | No | boolean | false | Set to `true` to disable the list box selection | -| translationIds | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | -| translateWithId | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :----------------- | :------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------ | ------------------------------------------------ | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| selectionCount | No | let | No | number | undefined | Specify the number of selected items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the list box selection | +| translationIds | No | const | No | { clearAll: "clearAll", clearSelection: "clearSelection", } | { clearAll: "clearAll", clearSelection: "clearSelection", } | Default translation ids | +| translateWithId | No | let | No | (id: ListBoxSelectionTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | ### Slots @@ -2239,13 +2176,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| small | let | No | boolean | false | Set to `true` to use the small variant | -| active | let | No | boolean | true | Set to `false` to disable the active state | -| withOverlay | let | No | boolean | true | Set to `false` to disable the overlay | -| description | let | No | string | "Active loading indicator" | Specify the label description | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ----------------------------------------------------- | +| small | No | let | No | boolean | false | Set to `true` to use the small variant | +| active | No | let | No | boolean | true | Set to `false` to disable the active state | +| withOverlay | No | let | No | boolean | true | Set to `false` to disable the overlay | +| description | No | let | No | string | "loading" | Specify the description to describe the loading state | ### Slots @@ -2259,12 +2195,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | -| value | let | Yes | any | "" | Provide a value to persist | -| key | let | No | string | "local-storage-key" | Specify the local storage key | -| clearItem | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | -| clearAll | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :-------------------- | :------- | ----------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | +| value | No | let | Yes | any | "" | Provide a value to persist | +| key | No | let | No | string | "local-storage-key" | Specify the local storage key | +| clearItem | No | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | +| clearAll | No | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | ### Slots @@ -2274,35 +2210,36 @@ None. | Event name | Type | Detail | | :--------- | :--------- | :------------------------------------------- | -| save | dispatched | any | +| save | dispatched | null | | update | dispatched | { prevValue: any; value: any; } | ## `Modal` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | -| alert | let | No | boolean | false | Set to `true` to enable alert mode | -| passiveModal | let | No | boolean | false | Set to `true` to use the passive variant | -| modalHeading | let | No | string | undefined | Specify the modal heading | -| modalLabel | let | No | string | undefined | Specify the modal label | -| modalAriaLabel | let | No | string | undefined | Specify the ARIA label for the modal | -| iconDescription | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | -| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | -| primaryButtonText | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | -| shouldSubmitOnEnter | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" | -| secondaryButtonText | let | No | string | "" | Specify the secondary button text | -| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | -| selectorPrimaryFocus | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | -| preventCloseOnClickOutside | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | -| id | 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 | HTMLDivElement | null | Obtain a reference to the top-level HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the modal | +| size | No | let | No | "xs" | "sm" | "lg" | undefined | Set the size of the modal | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | +| alert | No | let | No | boolean | false | Set to `true` to enable alert mode | +| passiveModal | No | let | No | boolean | false | Set to `true` to use the passive variant | +| modalHeading | No | let | No | string | undefined | Specify the modal heading | +| modalLabel | No | let | No | string | undefined | Specify the modal label | +| modalAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the modal | +| iconDescription | No | let | No | string | "Close the modal" | Specify the ARIA label for the close icon | +| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content | +| primaryButtonText | No | let | No | string | "" | Specify the primary button text | +| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| shouldSubmitOnEnter | No | let | No | boolean | true | Set to `true` for the "submit" and "click:button--primary" events
to be dispatched when pressing "Enter" | +| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| selectorPrimaryFocus | No | let | No | string | "[data-modal-primary-focus]" | Specify a selector to be focused when opening the modal | +| preventCloseOnClickOutside | No | let | No | boolean | false | Set to `true` to prevent the modal from closing when clicking outside | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2323,19 +2260,19 @@ None. | mouseover | forwarded | -- | | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | +| submit | dispatched | null | +| click:button--primary | dispatched | null | +| close | dispatched | null | +| open | dispatched | null | ## `ModalBody` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | -| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------- | +| hasForm | No | let | No | boolean | false | Set to `true` if the modal contains form elements | +| hasScrollingContent | No | let | No | boolean | false | Set to `true` if the modal contains scrolling content | ### Slots @@ -2351,15 +2288,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | -| primaryButtonText | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | -| primaryClass | let | No | string | undefined | Specify a class for the primary button | -| secondaryButtonText | let | No | string | "" | Specify the secondary button text | -| secondaryButtons | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | -| secondaryClass | let | No | string | undefined | Specify a class for the secondary button | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------- | +| primaryButtonText | No | let | No | string | "" | Specify the primary button text | +| primaryButtonIcon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the primary button icon | +| primaryButtonDisabled | No | let | No | boolean | false | Set to `true` to disable the primary button | +| primaryClass | No | let | No | string | undefined | Specify a class for the primary button | +| secondaryButtonText | No | let | No | string | "" | Specify the secondary button text | +| secondaryButtons | No | let | No | [{ text: string; }, { text: string; }] | [] | 2-tuple prop to render two secondary buttons for a 3 button modal
supersedes `secondaryButtonText` | +| secondaryClass | No | let | No | string | undefined | Specify a class for the secondary button | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | ### Slots @@ -2377,15 +2315,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- | -| title | let | No | string | "" | Specify the modal title | -| label | let | No | string | "" | Specify the modal label | -| labelClass | let | No | string | "" | Specify the label class | -| titleClass | let | No | string | "" | Specify the title class | -| closeClass | let | No | string | "" | Specify the close class | -| closeIconClass | let | No | string | "" | Specify the close icon class | -| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------- | -------------------- | ----------------------------------------- | +| title | No | let | No | string | "" | Specify the modal title | +| label | No | let | No | string | "" | Specify the modal label | +| labelClass | No | let | No | string | "" | Specify the label class | +| titleClass | No | let | No | string | "" | Specify the title class | +| closeClass | No | let | No | string | "" | Specify the close class | +| closeIconClass | No | let | No | string | "" | Specify the close icon class | +| iconDescription | No | let | No | string | "Close" | Specify the ARIA label for the close icon | ### Slots @@ -2411,60 +2349,68 @@ export type MultiSelectItemText = string; export interface MultiSelectItem { id: MultiSelectItemId; text: MultiSelectItemText; + disabled?: boolean; } ``` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | -| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | -| size | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | -| type | let | No | "default" | "inline" | "default" | Specify the type of multiselect | -| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | -| selectionFeedback | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | -| disabled | let | No | boolean | false | Set to `true` to disable the dropdown | -| filterable | let | No | boolean | false | Set to `true` to filter items | -| filterItem | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| locale | let | No | string | "en" | Specify the locale | -| placeholder | let | No | string | "" | Specify the placeholder text | -| sortItem | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | -| translateWithId | let | No | (id: any) => string | undefined | Override the default translation ids | -| titleText | let | No | string | "" | Specify the title text | -| useTitleInItem | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the list box label | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | undefined | Specify a name attribute for the select | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| highlightedId | No | let | Yes | null | MultiSelectItemId | null | Id of the highlighted ListBoxMenuItem | +| selectionRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | +| fieldRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | +| multiSelectRef | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | +| inputRef | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the dropdown | +| value | No | let | Yes | string | "" | Specify the multiselect value | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the selected ids | +| items | No | let | Yes | ReadonlyArray | [] | Set the multiselect items | +| itemToString | No | let | No | (item: MultiSelectItem) => any | (item) => item.text || item.id | Override the display of a multiselect item | +| itemToInput | No | let | No | (item: MultiSelectItem) => { name?: string; labelText?: any; title?: string; } | (item) => {} | Override the item name, title, labelText passed to the checkbox input | +| size | No | let | No | "sm" | "lg" | "xl" | undefined | Set the size of the combobox | +| type | No | let | No | "default" | "inline" | "default" | Specify the type of multiselect | +| direction | No | let | No | "bottom" | "top" | "bottom" | Specify the direction of the multiselect dropdown menu | +| selectionFeedback | No | let | No | "top" | "fixed" | "top-after-reopen" | "top-after-reopen" | Specify the selection feedback after selecting items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the dropdown | +| filterable | No | let | No | boolean | false | Set to `true` to filter items | +| filterItem | No | let | No | (item: MultiSelectItem, value: string) => string | (item, value) => item.text.toLowerCase().includes(value.trim().toLowerCase()) | Override the filtering logic
The default filtering is an exact string comparison | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| locale | No | let | No | string | "en" | Specify the locale | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| sortItem | No | let | No | ((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void) | (a, b) => a.text.localeCompare(b.text, locale, { numeric: true }) | Override the sorting logic
The default sorting compare the item text value | +| translateWithId | No | let | No | (id: import("../ListBox/ListBoxMenuIcon.svelte").ListBoxMenuIconTranslationId) => string | undefined | Override the chevron icon label based on the open state.
Defaults to "Open menu" when closed and "Close menu" when open | +| translateWithIdSelection | No | let | No | (id: import("../ListBox/ListBoxSelection.svelte").ListBoxSelectionTranslationId) => string | undefined | Override the label of the clear button when the input has a selection.
Defaults to "Clear selected item" and "Clear all items" if more than one item is selected | +| titleText | No | let | No | string | "" | Specify the title text | +| useTitleInItem | No | let | No | boolean | false | Set to `true` to pass the item to `itemToString` in the checkbox | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | "" | Specify the list box label | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | +| name | No | let | No | string | undefined | Specify a name attribute for the select | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- | +| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} | +| titleText | No | -- | {titleText} | ### Events | Event name | Type | Detail | | :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- | | select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } | -| clear | dispatched | any | +| clear | dispatched | null | +| blur | dispatched | FocusEvent | CustomEvent | | keydown | forwarded | -- | | keyup | forwarded | -- | | focus | forwarded | -- | -| blur | forwarded | -- | +| paste | forwarded | -- | ## `NotificationActionButton` @@ -2491,12 +2437,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------- | ----------------------------------- | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| title | let | No | string | undefined | Specify the title of the icon | -| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------- | ----------------------------------- | +| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| title | No | let | No | string | undefined | Specify the title of the icon | +| iconDescription | No | let | No | string | "Close icon" | Specify the ARIA label for the icon | ### Slots @@ -2515,11 +2461,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | +| notificationType | No | let | No | "toast" | "inline" | "toast" | Set the type of notification | +| iconDescription | Yes | let | No | -- | undefined | Specify the ARIA label for the icon | ### Slots @@ -2529,27 +2475,6 @@ None. None. -## `NotificationTextDetails` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :----------------------------------- | ---------------------- | ---------------------------- | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| title | let | No | string | "Title" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| caption | let | No | string | "Caption" | Specify the caption text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - ## `NumberInput` ### Types @@ -2560,32 +2485,31 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | undefined | Set the size of the input | -| step | let | No | number | 1 | Specify the step increment | -| max | let | No | number | undefined | Specify the maximum value | -| min | let | No | number | undefined | Specify the minimum value | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| readonly | let | No | boolean | false | Set to `true` for the input to be read-only | -| mobile | let | No | boolean | false | Set to `true` to enable the mobile variant | -| allowEmpty | let | No | boolean | false | Set to `true` to allow for an empty value | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| hideSteppers | let | No | boolean | false | Set to `true` to hide the input stepper buttons | -| iconDescription | let | No | string | "" | Specify the ARIA label for the increment icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| label | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| translateWithId | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| translationIds | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :----------------- | :------- | --------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | null | number | null | Specify the input value.
Use `null` to denote "no value" | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | +| step | No | let | No | number | 1 | Specify the step increment | +| max | No | let | No | number | undefined | Specify the maximum value | +| min | No | let | No | number | undefined | Specify the minimum value | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| readonly | No | let | No | boolean | false | Set to `true` for the input to be read-only | +| allowEmpty | No | let | No | boolean | false | Set to `true` to allow for an empty value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| hideSteppers | No | let | No | boolean | false | Set to `true` to hide the input stepper buttons | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the increment icons | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| label | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| translateWithId | No | let | No | (id: NumberInputTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | +| translationIds | No | const | No | { increment: "increment"; decrement: "decrement" } | { increment: "increment", decrement: "decrement", } | Default translation ids | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -2595,24 +2519,27 @@ export type NumberInputTranslationId = "increment" | "decrement"; ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | number | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------------------ | +| change | dispatched | null | number | +| input | dispatched | null | number | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| paste | forwarded | -- | ## `NumberInputSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots @@ -2631,11 +2558,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | -| native | let | No | boolean | false | Set to `true` to use native list styles | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- | +| nested | No | let | No | boolean | false | Set to `true` to use the nested variant | +| native | No | let | No | boolean | false | Set to `true` to use native list styles | +| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | ### Slots @@ -2677,20 +2604,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| icon | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | -| direction | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| flipped | let | No | boolean | false | Set to `true` to flip the menu relative to the button | -| menuOptionsClass | let | No | string | undefined | Specify the menu options class | -| iconClass | let | No | string | undefined | Specify the icon class | -| iconDescription | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | +| menuRef | No | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | +| buttonRef | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | +| icon | No | let | Yes | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<OverflowMenuVertical />` | +| open | No | let | Yes | boolean | false | Set to `true` to open the menu | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the overflow menu | +| direction | No | let | No | "top" | "bottom" | "bottom" | Specify the direction of the overflow menu relative to the button | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| flipped | No | let | No | boolean | false | Set to `true` to flip the menu relative to the button | +| menuOptionsClass | No | let | No | string | undefined | Specify the menu options class | +| iconClass | No | let | No | string | undefined | Specify the icon class | +| iconDescription | No | let | No | string | "Open and close list of options" | Specify the ARIA label for the icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -2701,30 +2628,30 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------- | -| close | dispatched | { index: number; text: string; } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------------------------------------------- | +| close | dispatched | null | { index: number; text: string; } | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | ## `OverflowMenuItem` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | -| text | let | No | string | "Provide text" | Specify the item text
Alternatively, use the default slot for a custom element | -| href | let | No | string | "" | Specify the `href` attribute if the item is a link | -| disabled | let | No | boolean | false | Set to `true` to disable the item | -| hasDivider | let | No | boolean | false | Set to `true` to include a divider | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | -| requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | +| primaryFocus | No | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | +| text | No | let | No | string | "Provide text" | Specify the item text.
Alternatively, use the default slot | +| href | No | let | No | string | "" | Specify the `href` attribute if the item is a link | +| disabled | No | let | No | boolean | false | Set to `true` to disable the item | +| hasDivider | No | let | No | boolean | false | Set to `true` to include a divider | +| danger | No | let | No | boolean | false | Set to `true` to use the danger variant | +| requireTitle | No | let | No | boolean | true | Set to `false` to omit the button `title` attribute | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2743,24 +2670,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | -| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | let | Yes | number | 1 | Specify the current page index | -| totalItems | let | No | number | 0 | Specify the total number of items | -| disabled | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | let | No | string | "Next page" | Specify the forward button text | -| backwardText | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text | -| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} items\` | Override the item range text | -| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | let | No | number[] | [10] | Specify the available page sizes | -| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | -| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | 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 | +| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------ | +| pageSize | No | let | Yes | number | 10 | Specify the number of items to display in a page | +| page | No | let | Yes | number | 1 | Specify the current page index | +| totalItems | No | let | No | number | 0 | Specify the total number of items | +| disabled | No | let | No | boolean | false | Set to `true` to disable the pagination | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| itemsPerPageText | No | let | No | string | "Items per page:" | Specify the items per page text | +| itemText | No | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} item${max === 1 ? "" : "s"}\` | Override the item text | +| itemRangeText | No | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} item${max === 1 ? "" : "s"}\` | Override the item range text | +| pageInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page input | +| pageSizeInputDisabled | No | let | No | boolean | false | Set to `true` to disable the page size input | +| pageSizes | No | let | No | ReadonlyArray | [10] | Specify the available page sizes | +| pagesUnknown | No | let | No | boolean | false | Set to `true` if the number of pages is unknown | +| pageText | No | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | +| pageRangeText | No | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -2768,24 +2695,26 @@ None. ### Events -| Event name | Type | Detail | -| :--------------------- | :--------- | :----------------------------------------------- | -| update | dispatched | { pageSize: number; page: number; } | -| click:button--previous | dispatched | { page: number; } | -| click:button--next | dispatched | { page: number; } | +| Event name | Type | Detail | +| :--------------------- | :--------- | :------------------------------------------------ | +| change | dispatched | { page?: number; pageSize?: number } | +| click:button--previous | dispatched | { page: number; } | +| click:button--next | dispatched | { page: number; } | +| update | dispatched | { pageSize: number; page: number; } | ## `PaginationNav` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :------------------- | ---------------------------- | ----------------------------------------- | -| page | let | Yes | number | 0 | Specify the current page index | -| total | let | No | number | 10 | Specify the total number of pages | -| shown | let | No | number | 10 | Specify the total number of pages to show | -| loop | let | No | boolean | false | Set to `true` to loop the navigation | -| forwardText | let | No | string | "Next page" | Specify the forward button text | -| backwardText | let | No | string | "Previous page" | Specify the backward button text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------- | +| page | No | let | Yes | number | 1 | Specify the current page index | +| total | No | let | No | number | 10 | Specify the total number of pages | +| shown | No | let | No | number | 10 | Specify the total number of pages to show | +| loop | No | let | No | boolean | false | Set to `true` to loop the navigation | +| forwardText | No | let | No | string | "Next page" | Specify the forward button text | +| backwardText | No | let | No | string | "Previous page" | Specify the backward button text | +| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "outside" | "inside" | "bottom" | Set the position of the tooltip relative to the pagination buttons. | ### Slots @@ -2822,29 +2751,29 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | undefined | Set the size of the input | -| placeholder | let | No | string | "" | Specify the placeholder text | -| hidePasswordLabel | let | No | string | "Hide password" | Specify the hide password label text | -| showPasswordLabel | let | No | string | "Show password" | Specify the show password label text | -| tooltipAlignment | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| tooltipPosition | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| helperText | let | No | string | "" | Specify the helper text | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the text for the invalid state | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| inline | let | No | boolean | false | Set to `true` to use inline version | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| type | No | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | +| value | No | let | Yes | number | string | "" | Specify the input value | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| hidePasswordLabel | No | let | No | string | "Hide password" | Specify the hide password label text | +| showPasswordLabel | No | let | No | string | "Show password" | Specify the show password label text | +| tooltipAlignment | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| tooltipPosition | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the position of the tooltip relative to the icon | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| helperText | No | let | No | string | "" | Specify the helper text | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the text for the invalid state | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| inline | No | let | No | boolean | false | Set to `true` to use inline version | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -2866,20 +2795,21 @@ None. | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| paste | forwarded | -- | ## `Popover` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ | -| open | let | Yes | boolean | false | Set to `true` to display the popover | -| closeOnOutsideClick | let | No | boolean | false | Set to `true` to close the popover on an outside click | -| caret | let | No | boolean | false | Set to `true` render a caret | -| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant | -| relative | let | No | boolean | false | Set to `true` to use a relative position | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------------------------------------ | +| open | No | let | Yes | boolean | false | Set to `true` to display the popover | +| closeOnOutsideClick | No | let | No | boolean | false | Set to `true` to close the popover on an outside click | +| caret | No | let | No | boolean | false | Set to `true` render a caret | +| align | No | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| highContrast | No | let | No | boolean | false | Set to `true` to enable the high contrast variant | +| relative | No | let | No | boolean | false | Set to `true` to use a relative position | ### Slots @@ -2889,22 +2819,25 @@ None. ### Events -| Event name | Type | Detail | -| :------------ | :--------- | :----- | -| click:outside | dispatched | -- | +| Event name | Type | Detail | +| :------------ | :--------- | :------------------------------------ | +| click:outside | dispatched | { target: HTMLElement; } | ## `ProgressBar` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | No | number | undefined | Specify the current value | -| max | let | No | number | 100 | Specify the maximum value | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| helperText | let | No | string | "" | Specify the helper text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | +| value | No | let | No | number | undefined | Specify the current value | +| max | No | let | No | number | 100 | Specify the maximum value | +| kind | No | let | No | "default" | "inline" | "indented" | "default" | Specify the kind of progress bar | +| status | No | let | No | "active" | "finished" | "error" | "active" | Specify the status | +| size | No | let | No | "sm" | "md" | "md" | Specify the size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| helperText | No | let | No | string | "" | Specify the helper text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the progress bar element | ### Slots @@ -2920,12 +2853,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- | -| currentIndex | let | Yes | number | 0 | Specify the current step index | -| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | -| spaceEqually | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div | -| preventChangeOnClick | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------------------------------------------------- | +| currentIndex | No | let | Yes | number | 0 | Specify the current step index | +| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant | +| spaceEqually | No | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div | +| preventChangeOnClick | No | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating | ### Slots @@ -2947,10 +2880,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | -| count | let | No | number | 4 | Specify the number of steps to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- | +| vertical | No | let | No | boolean | false | Set to `true` to use the vertical variant | +| count | No | let | No | number | 4 | Specify the number of steps to render | ### Slots @@ -2969,16 +2902,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| current | let | Yes | boolean | false | Set to `true` to use the current variant | -| complete | let | Yes | boolean | false | Set to `true` for the complete variant | -| disabled | let | No | boolean | false | Set to `true` to disable the progress step | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| description | let | No | string | "" | Specify the step description | -| label | let | No | string | "" | Specify the step label | -| secondaryLabel | let | No | string | "" | Specify the step secondary label | -| id | 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 | +| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | ------------------------------------------ | +| current | No | let | Yes | boolean | false | Set to `true` to use the current variant | +| complete | No | let | Yes | boolean | false | Set to `true` for the complete variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the progress step | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| description | No | let | No | string | "" | Specify the step description | +| label | No | let | No | string | "" | Specify the step label | +| secondaryLabel | No | let | No | string | "" | Specify the step secondary label | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -3000,18 +2933,18 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the radio button | -| value | let | No | string | "" | Specify the value of the radio button | -| disabled | let | No | boolean | false | Set to `true` to disable the radio button | -| required | let | No | boolean | false | Set to `true` to mark the field as required | -| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the radio button input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | --------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | No | let | Yes | boolean | false | Set to `true` to check the radio button | +| value | No | let | No | string | "" | Specify the value of the radio button | +| disabled | No | let | No | boolean | false | Set to `true` to disable the radio button | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the radio button input | ### Slots @@ -3029,16 +2962,17 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------------------- | -| selected | let | Yes | string | undefined | Set the selected radio button value | -| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons | -| required | let | No | boolean | false | Set to `true` to require the selection of a radio button | -| name | let | No | string | "" | Specify a name attribute for the radio button inputs | -| legendText | let | No | string | "" | Specify the legend text | -| labelPosition | let | No | "right" | "left" | "right" | Specify the label position | -| orientation | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | -| id | let | No | string | undefined | Set an id for the container div element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :--------------- | :------- | ------------------------------------------- | ------------------------- | -------------------------------------------------------- | +| selected | No | let | Yes | string | undefined | Set the selected radio button value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the radio buttons | +| required | No | let | No | boolean | undefined | Set to `true` to require the selection of a radio button | +| name | No | let | No | string | undefined | Specify a name attribute for the radio button inputs | +| legendText | No | let | No | string | "" | Specify the legend text | +| hideLegend | No | let | No | boolean | false | Set to `true` to visually hide the legend | +| labelPosition | No | let | No | "right" | "left" | "right" | Specify the label position | +| orientation | No | let | No | "horizontal" | "vertical" | "horizontal" | Specify the orientation of the radio buttons | +| id | No | let | No | string | undefined | Set an id for the container div element | ### Slots @@ -3080,16 +3014,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- | -| checked | let | Yes | boolean | false | Set to `true` to check the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| value | let | No | string | "" | Specify the value of the radio input | -| tabindex | let | No | string | "0" | Specify the tabindex | -| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------------------------ | -------------------------------------------------------- | +| checked | No | let | Yes | boolean | false | Set to `true` to check the tile | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tile | +| value | No | let | No | string | "" | Specify the value of the radio input | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -3122,10 +3056,10 @@ export interface RecursiveListNode { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | ---------------------------------- | -| children | let | No | Array | [] | Specify the children to render | -| type | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------------------------- | ------------------------ | ---------------------------------- | +| children | No | let | No | Array | [] | Specify the children to render | +| type | No | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render | ### Slots @@ -3139,15 +3073,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | 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 | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | 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., <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 | ### Slots @@ -3163,26 +3097,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the value of the search input | -| expanded | let | Yes | boolean | false | Set to `true to expand the search input | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| type | let | No | string | "text" | Specify the `type` attribute of the search input | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| expanded | No | let | Yes | boolean | false | Set to `true to expand the search input | +| value | No | let | Yes | any | "" | Specify the value of the search input | +| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| searchClass | No | let | No | string | "" | Specify the class name passed to the outer div element | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the search input | +| expandable | No | let | No | boolean | false | Set to `true` to enable the expandable variant | +| placeholder | No | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | +| autocomplete | No | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | +| autofocus | No | let | No | boolean | false | Set to `true` to auto focus the search element | +| closeButtonLabelText | No | let | No | string | "Clear search input" | Specify the close button label text | +| labelText | No | let | No | string | "" | Specify the label text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render.
Defaults to `<Search />` | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -3192,30 +3124,30 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :--------------- | -| expand | dispatched | any | -| collapse | dispatched | any | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| clear | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| expand | dispatched | null | +| collapse | dispatched | null | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| paste | forwarded | -- | +| clear | dispatched | null | ## `SearchSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ | +| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | ### Slots @@ -3234,25 +3166,25 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| selected | let | Yes | string | undefined | Specify the selected item value | -| size | let | No | "sm" | "xl" | undefined | Set the size of the select input | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the select element | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | -| name | let | No | string | undefined | Specify a name attribute for the select element | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| helperText | let | No | string | "" | Specify the helper text | -| noLabel | let | No | boolean | false | Set to `true` to not render a label | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| required | let | No | boolean | false | Set to `true` to mark the field as required | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | +| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | +| selected | No | let | Yes | string | number | undefined | Specify the selected item value | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the select input | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the select element | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | +| name | No | let | No | string | undefined | Specify a name attribute for the select element | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| helperText | No | let | No | string | "" | Specify the helper text | +| noLabel | No | let | No | boolean | false | Set to `true` to not render a label | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | ### Slots @@ -3263,23 +3195,24 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | string | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------------------- | +| update | dispatched | string | number | +| change | forwarded | -- | +| input | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | ## `SelectItem` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- | -| value | let | No | string | "" | Specify the option value | -| text | let | No | string | "" | Specify the option text | -| hidden | let | No | boolean | false | Set to `true` to hide the option | -| disabled | let | No | boolean | false | Set to `true` to disable the option | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------------------------------- | +| value | No | let | No | string | number | "" | Specify the option value | +| text | No | let | No | string | "" | Specify the option text | +| hidden | No | let | No | boolean | false | Set to `true` to hide the option | +| disabled | No | let | No | boolean | false | Set to `true` to disable the option | ### Slots @@ -3293,10 +3226,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- | -| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element | -| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------------- | --------------------------------------------------- | +| disabled | No | let | No | boolean | false | Set to `true` to disable the optgroup element | +| label | No | let | No | string | "Provide label" | Specify the label attribute of the optgroup element | ### Slots @@ -3312,9 +3245,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots @@ -3333,18 +3266,18 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| selected | let | Yes | boolean | false | Set to `true` to select the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| title | let | No | string | "title" | Specify the title of the selectable tile | -| value | let | No | string | "value" | Specify the value of the selectable tile | -| tabindex | let | No | string | "0" | Specify the tabindex | -| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| selected | No | let | Yes | boolean | false | Set to `true` to select the tile | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tile | +| title | No | let | No | string | "title" | Specify the title of the selectable tile | +| value | No | let | No | string | "value" | Specify the value of the selectable tile | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| iconDescription | No | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -3354,25 +3287,27 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :------------------ | +| select | dispatched | string | +| deselect | dispatched | string | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | ## `SideNav` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| fixed | let | No | boolean | false | Set to `true` to use the fixed variant | -| rail | let | No | boolean | false | Set to `true` to use the rail variant | -| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav | -| expansionBreakpoint | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
small: 320
medium: 672
large: 1056
x-large: 1312
max: 1584 | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| isOpen | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| fixed | No | let | No | boolean | false | Set to `true` to use the fixed variant | +| rail | No | let | No | boolean | false | Set to `true` to use the rail variant | +| ariaLabel | No | let | No | string | undefined | Specify the ARIA label for the nav | +| expansionBreakpoint | No | let | No | number | 1056 | The window width (px) at which the SideNav is expanded and the hamburger menu is hidden.
1056 represents the "large" breakpoint in pixels from the Carbon Design System:
- small: 320
- medium: 672
- large: 1056
- x-large: 1312
- max: 1584 | ### Slots @@ -3382,11 +3317,11 @@ None. ### Events -| Event name | Type | Detail | -| :------------ | :--------- | :--------------- | -| open | dispatched | any | -| close | dispatched | any | -| click:overlay | dispatched | any | +| Event name | Type | Detail | +| :------------ | :--------- | :---------------- | +| open | dispatched | null | +| close | dispatched | null | +| click:overlay | dispatched | null | ## `SideNavDivider` @@ -3422,17 +3357,20 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | let | No | boolean | false | Set to `true` to select the current link | -| href | let | No | string | undefined | Specify the `href` attribute | -| text | let | No | string | undefined | Specify the text | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | No | let | No | boolean | false | Set to `true` to select the current link | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| text | No | let | No | string | undefined | Specify the text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots -None. +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | {text} | +| icon | No | -- | <svelte:component this="{icon}" /> | ### Events @@ -3444,18 +3382,19 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| text | let | No | string | undefined | Specify the text | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | +| expanded | No | let | Yes | boolean | false | Set to `true` to toggle the expanded state | +| text | No | let | No | string | undefined | Specify the text | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :---- | :---------------------------------------------------- | +| -- | Yes | -- | -- | +| icon | No | -- | <svelte:component this="{icon}" /> | ### Events @@ -3467,12 +3406,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | let | No | boolean | false | Set to `true` to select the item | -| href | let | No | string | undefined | Specify the `href` attribute | -| text | let | No | string | undefined | Specify the item text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | +| isSelected | No | let | No | boolean | false | Set to `true` to select the item | +| href | No | let | No | string | undefined | Specify the `href` attribute | +| text | No | let | No | string | undefined | Specify the item text | ### Slots @@ -3509,12 +3448,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- | -| lines | let | No | number | 3 | Specify the number of lines to render | -| heading | let | No | boolean | false | Set to `true` to use the heading size variant | -| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant | -| width | let | No | string | "100%" | Specify the width of the text (% or px) | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------- | ----------------------------------------------- | +| lines | No | let | No | number | 3 | Specify the number of lines to render | +| heading | No | let | No | boolean | false | Set to `true` to use the heading size variant | +| paragraph | No | let | No | boolean | false | Set to `true` to use the paragraph size variant | +| width | No | let | No | string | "100%" | Specify the width of the text (% or px) | ### Slots @@ -3533,10 +3472,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- | -| href | let | No | string | "#main-content" | Specify the `href` attribute | -| tabindex | let | No | string | "0" | Specify the tabindex | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------- | ---------------------------- | ---------------------------- | +| href | No | let | No | string | "#main-content" | Specify the `href` attribute | +| tabindex | No | let | No | string | "0" | Specify the tabindex | ### Slots @@ -3554,25 +3493,27 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| value | let | Yes | number | 0 | Specify the value of the slider | -| max | let | No | number | 100 | Set the maximum slider value | -| maxLabel | let | No | string | "" | Specify the label for the max value | -| min | let | No | number | 0 | Set the minimum slider value | -| minLabel | let | No | string | "" | Specify the label for the min value | -| step | let | No | number | 1 | Set the step value | -| stepMultiplier | let | No | number | 4 | Set the step multiplier value | -| required | let | No | boolean | false | Set to `true` to require a value | -| inputType | let | No | string | "number" | Specify the input type | -| disabled | let | No | boolean | false | Set to `true` to disable the slider | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| labelText | let | No | string | "" | Specify the label text | -| name | let | No | string | "" | Set a name for the slider element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | --------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | +| value | No | let | Yes | number | 0 | Specify the value of the slider | +| max | No | let | No | number | 100 | Set the maximum slider value | +| maxLabel | No | let | No | string | "" | Specify the label for the max value | +| min | No | let | No | number | 0 | Set the minimum slider value | +| minLabel | No | let | No | string | "" | Specify the label for the min value | +| step | No | let | No | number | 1 | Set the step value | +| stepMultiplier | No | let | No | number | 4 | Set the step multiplier value | +| required | No | let | No | boolean | false | Set to `true` to require a value | +| inputType | No | let | No | string | "number" | Specify the input type | +| disabled | No | let | No | boolean | false | Set to `true` to disable the slider | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| hideTextInput | No | let | No | boolean | false | Set to `true` to hide the text input | +| fullWidth | No | let | No | boolean | false | Set to `true` for the slider to span
the full width of its containing element. | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| labelText | No | let | No | string | "" | Specify the label text.
Alternatively, use the "labelText" slot (e.g., `<span slot="labelText">...</span>`) | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| name | No | let | No | string | "" | Set a name for the slider element | ### Slots @@ -3594,9 +3535,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots @@ -3615,13 +3556,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ---------------------- | ---------------------------------------------- | -| selected | let | Yes | string | undefined | Specify the selected structured list row value | -| border | let | No | boolean | false | Set to `true` to use the bordered variant | -| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | -| flush | let | No | boolean | false | Set to `true` to flush the list | -| selection | let | No | boolean | false | Set to `true` to use the selection variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | ---------------------------------------------- | +| selected | No | let | Yes | string | undefined | Specify the selected structured list row value | +| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant | +| flush | No | let | No | boolean | false | Set to `true` to flush the list | +| selection | No | let | No | boolean | false | Set to `true` to use the selection variant | ### Slots @@ -3664,10 +3604,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | -| head | let | No | boolean | false | Set to `true` to use as a header | -| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------- | +| head | No | let | No | boolean | false | Set to `true` to use as a header | +| noWrap | No | let | No | boolean | false | Set to `true` to prevent wrapping | ### Slots @@ -3709,14 +3649,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the input | -| title | let | No | string | "title" | Specify the title of the input | -| value | let | No | string | "value" | Specify the value of the input | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ------------------------------------------------ | -------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| checked | No | let | Yes | boolean | false | Set to `true` to check the input | +| title | No | let | No | string | "title" | Specify the title of the input | +| value | No | let | No | string | "value" | Specify the value of the input | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | "" | Specify a name attribute for the input | ### Slots @@ -3730,11 +3670,11 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| head | let | No | boolean | false | Set to `true` to use as a header | -| label | let | No | boolean | false | Set to `true` to render a label slot | -| tabindex | let | No | string | "0" | Specify the tabindex | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | +| head | No | let | No | boolean | false | Set to `true` to use as a header | +| label | No | let | No | boolean | false | Set to `true` to render a label slot | +| tabindex | No | let | No | string | "0" | Specify the tabindex | ### Slots @@ -3756,10 +3696,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| rows | let | No | number | 5 | Specify the number of rows | -| border | let | No | boolean | false | Set to `true` to use the bordered variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- | +| rows | No | let | No | number | 5 | Specify the number of rows | ### Slots @@ -3778,13 +3717,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | -| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) | -| disabled | let | No | boolean | false | Set to `true` to disable the switch | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | +| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected | +| text | No | let | No | string | "Provide text" | Specify the switch text.
Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) | +| disabled | No | let | No | boolean | false | Set to `true` to disable the switch | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | ### Slots @@ -3806,14 +3745,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | -| label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | -| href | let | No | string | "#" | Specify the href attribute | -| disabled | let | No | boolean | false | Set to `true` to disable the tab | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | +| label | No | let | No | string | "" | Specify the tab label.
Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) | +| href | No | let | No | string | "#" | Specify the href attribute | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tab | +| tabindex | No | let | No | string | "0" | Specify the tabindex | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -3834,9 +3773,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- | -| id | 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 | +| :-------- | :------- | :--------------- | :------- | ------------------- | ------------------------------------------------ | ----------------------------------- | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -3852,14 +3791,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ---------------------- | --------------------------------------- | -| size | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | -| zebra | let | No | boolean | false | Set to `true` to use zebra styles | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | -| shouldShowBorder | let | No | boolean | false | Set to `true` for the bordered variant | -| sortable | let | No | boolean | false | Set to `true` for the sortable variant | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ---------------------- | ---------------------------------------------- | +| size | No | let | No | "compact" | "short" | "medium" | "tall" | undefined | Set the size of the table | +| zebra | No | let | No | boolean | false | Set to `true` to use zebra styles | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| tableStyle | No | let | No | string | undefined | Set the style attribute on the `table` element | ### Slots @@ -3912,12 +3851,12 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | -| useStaticWidth | let | No | boolean | false | Set to `true` to use static width | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- | +| title | No | let | No | string | "" | Specify the title of the data table | +| description | No | let | No | string | "" | Specify the description of the data table | +| stickyHeader | No | let | No | boolean | false | Set to `true` to enable a sticky header | +| useStaticWidth | No | let | No | boolean | false | Set to `true` to use static width | ### Slots @@ -3954,12 +3893,14 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ | -| disableSorting | let | No | boolean | false | Set to `true` to disable sorting on this specific cell | -| scope | let | No | string | "col" | Specify the `scope` attribute | -| translateWithId | let | No | () => string | () => "" | Override the default id translations | -| id | 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 | +| :-------------- | :------- | :--------------- | :------- | ---------------------------------------------------------- | ------------------------------------------------ | -------------------------------------- | +| sortable | No | let | No | boolean | false | Set to `true` for the sortable variant | +| sortDirection | No | let | No | "none" | "ascending" | "descending" | "none" | Specify the sort direction | +| active | No | let | No | boolean | false | Set to `true` if the column sorting | +| scope | No | let | No | string | "col" | Specify the `scope` attribute | +| translateWithId | No | let | No | () => string | () => "" | Override the default id translations | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | ### Slots @@ -4001,13 +3942,13 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | -------------------------------------------- | -| selected | let | Yes | number | 0 | Specify the selected tab index | -| type | let | No | "default" | "container" | "default" | Specify the type of tabs | -| autoWidth | let | No | boolean | false | Set to `true` for tabs to have an auto-width | -| iconDescription | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | -| triggerHref | let | No | string | "#" | Specify the tab trigger href attribute | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ----------------------------------------- | -------------------------------- | -------------------------------------------- | +| selected | No | let | Yes | number | 0 | Specify the selected tab index | +| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs | +| autoWidth | No | let | No | boolean | false | Set to `true` for tabs to have an auto-width | +| iconDescription | No | let | No | string | "Show menu options" | Specify the ARIA label for the chevron icon | +| triggerHref | No | let | No | string | "#" | Specify the tab trigger href attribute | ### Slots @@ -4028,10 +3969,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ | -| count | let | No | number | 4 | Specify the number of tabs to render | -| type | let | No | "default" | "container" | "default" | Specify the type of tabs | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ---------------------- | ------------------------------------ | +| count | No | let | No | number | 4 | Specify the number of tabs to render | +| type | No | let | No | "default" | "container" | "default" | Specify the type of tabs | ### Slots @@ -4050,41 +3991,42 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | -| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag | -| size | let | No | "sm" | "default" | "default" | -- | -| filter | let | No | boolean | false | Set to `true` to use filterable variant | -| disabled | let | No | boolean | false | Set to `true` to disable a filterable tag | -| interactive | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| title | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | +| type | No | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | "outline" | undefined | Specify the type of tag | +| size | No | let | No | "sm" | "default" | "default" | -- | +| filter | No | let | No | boolean | false | Set to `true` to use filterable variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable a filterable tag | +| interactive | No | let | No | boolean | false | Set to `true` to render a `button` element instead of a `div` | +| skeleton | No | let | No | boolean | false | Set to `true` to display the skeleton state | +| title | No | let | No | string | "Clear filter" | Set the title for the close button in a filterable tag | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the filterable tag | ### Slots -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :----------------------------------------------------- | :------- | -| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- | +| Slot name | Default | Props | Fallback | +| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- | +| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- | +| icon | No | -- | <svelte:component this="{icon}" /> | ### Events -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| close | dispatched | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| close | dispatched | null | ## `TagSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- | -| size | let | No | "sm" | "default" | "default" | -- | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ----------- | +| size | No | let | No | "sm" | "default" | "default" | -- | ### Slots @@ -4103,22 +4045,24 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | -| value | let | Yes | string | "" | Specify the textarea value | -| placeholder | let | No | string | "" | Specify the placeholder text | -| cols | let | No | number | 50 | Specify the number of cols | -| rows | let | No | number | 4 | Specify the number of rows | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| helperText | let | No | string | "" | Specify the helper text | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the text for the invalid state | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element | -| name | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | -------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| ref | No | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | +| value | No | let | Yes | string | "" | Specify the textarea value | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| cols | No | let | No | number | 50 | Specify the number of cols | +| rows | No | let | No | number | 4 | Specify the number of rows | +| maxCount | No | let | No | number | undefined | Specify the max character count | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | +| helperText | No | let | No | string | "" | Specify the helper text | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the text for the invalid state | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -4140,14 +4084,15 @@ None. | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| paste | forwarded | -- | ## `TextAreaSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | ### Slots @@ -4166,27 +4111,26 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | undefined | Set the size of the input | -| type | let | No | string | "" | Specify the input type | -| placeholder | let | No | string | "" | Specify the placeholder text | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| helperText | let | No | string | "" | Specify the helper text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the input | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| warn | let | No | boolean | false | Set to `true` to indicate an warning state | -| warnText | let | No | string | "" | Specify the warning state text | -| required | let | No | boolean | false | Set to `true` to mark the field as required | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| readonly | let | No | boolean | false | Set to `true` to use the read-only variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | --------------------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | null | number | string | "" | Specify the input value.

`value` will be set to `null` if type="number"
and the value is empty. | +| size | No | let | No | "sm" | "xl" | undefined | Set the size of the input | +| placeholder | No | let | No | string | "" | Specify the placeholder text | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| helperText | No | let | No | string | "" | Specify the helper text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| warn | No | let | No | boolean | false | Set to `true` to indicate an warning state | +| warnText | No | let | No | string | "" | Specify the warning state text | +| required | No | let | No | boolean | false | Set to `true` to mark the field as required | +| inline | No | let | No | boolean | false | Set to `true` to use the inline variant | +| readonly | No | let | No | boolean | false | Set to `true` to use the read-only variant | ### Slots @@ -4196,26 +4140,27 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :-------------------------------------------- | +| change | dispatched | null | number | string | +| input | dispatched | null | number | string | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| keydown | forwarded | -- | +| keyup | forwarded | -- | +| focus | forwarded | -- | +| blur | forwarded | -- | +| paste | forwarded | -- | ## `TextInputSkeleton` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ | +| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text | ### Slots @@ -4240,15 +4185,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | let | No | string | "theme" | Specify the local storage key | -| render | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | -| toggle | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | -| select | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| theme | No | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | +| tokens | No | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
@see https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | +| persist | No | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | +| persistKey | No | let | No | string | "theme" | Specify the local storage key | +| render | No | let | No | "toggle" | "select" | undefined | Render a toggle or select dropdown to control the theme | +| toggle | No | let | No | import("../Toggle/Toggle").ToggleProps & { themes?: [labelA: CarbonTheme, labelB: CarbonTheme]; } | { themes: ["white", "g100"], labelA: "", labelB: "", labelText: "Dark mode", hideLabel: false, } | Override the default toggle props | +| select | No | let | No | import("../Select/Select").SelectProps & { themes?: CarbonTheme[]; } | { themes: themeKeys, labelText: "Themes", hideLabel: false, } | Override the default select props | ### Slots @@ -4266,9 +4211,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| light | let | No | boolean | false | Set to `true` to enable the light variant | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | ### Slots @@ -4289,11 +4234,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ---------------------- | --------------------------------------- | -| selected | let | Yes | string | undefined | Specify the selected tile value | -| disabled | let | No | boolean | false | Set to `true` to disable the tile group | -| legend | let | No | string | "" | Specify the legend text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | -------------------- | ---------------------- | --------------------------------------- | +| selected | No | let | Yes | string | undefined | Specify the selected tile value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tile group | +| legend | No | let | No | string | "" | Specify the legend text | ### Slots @@ -4311,23 +4256,22 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | undefined | Specify the size of the input | -| type | let | No | string | "text" | Specify the input type | -| placeholder | let | No | string | "hh:mm" | Specify the input placeholder text | -| pattern | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element | -| maxlength | let | No | number | 5 | Specify the `maxlength` input attribute | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the invalid state text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :---------- | :------- | :--------------- | :------- | ----------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| value | No | let | Yes | string | "" | Specify the input value | +| size | No | let | No | "sm" | "xl" | undefined | Specify the size of the input | +| placeholder | No | let | No | string | "hh:mm" | Specify the input placeholder text | +| pattern | No | let | No | string | "(1[012]|[1-9]):[0-5][0-9](\\s)?" | Specify the `pattern` attribute for the input element | +| maxlength | No | let | No | number | 5 | Specify the `maxlength` input attribute | +| light | No | let | No | boolean | false | Set to `true` to enable the light variant | +| disabled | No | let | No | boolean | false | Set to `true` to disable the input | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| invalid | No | let | No | boolean | false | Set to `true` to indicate an invalid state | +| invalidText | No | let | No | string | "" | Specify the invalid state text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the input | ### Slots @@ -4350,21 +4294,21 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; | keyup | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| paste | forwarded | -- | ## `TimePickerSelect` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| value | let | Yes | number | string | "" | Specify the select value | -| disabled | let | No | boolean | false | Set to `true` to disable the select | -| iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | true | -- | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | -| name | let | No | string | undefined | Specify a name attribute for the select element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ----------------------------------------------- | +| ref | No | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | +| value | No | let | Yes | number | string | "" | Specify the select value | +| disabled | No | let | No | boolean | false | Set to `true` to disable the select | +| iconDescription | No | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | +| labelText | No | let | No | string | "" | Specify the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | +| name | No | let | No | string | undefined | Specify a name attribute for the select element | ### Slots @@ -4386,17 +4330,19 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | let | No | string | "alert" | Set the `role` attribute | -| title | let | No | string | "" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| caption | let | No | string | "" | Specify the caption text | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | -| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------------- | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- | +| kind | No | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | +| lowContrast | No | let | No | boolean | false | Set to `true` to use the low contrast variant | +| timeout | No | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | +| role | No | let | No | string | "alert" | Set the `role` attribute | +| title | No | let | No | string | "" | Specify the title text | +| subtitle | No | let | No | string | "" | Specify the subtitle text | +| caption | No | let | No | string | "" | Specify the caption text | +| statusIconDescription | No | let | No | string | kind + " icon" | Specify the ARIA label for the status icon | +| closeButtonDescription | No | let | No | string | "Close notification" | Specify the ARIA label for the close button | +| hideCloseButton | No | let | No | boolean | false | Set to `true` to hide the close button | +| fullWidth | No | let | No | boolean | false | Set to `true` for the notification to span
the full width of its containing element. | ### Slots @@ -4421,16 +4367,17 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| size | let | No | "default" | "sm" | "default" | Specify the toggle size | -| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | let | No | string | "On" | Specify the label for the toggled state | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the checkbox input | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ----------------------------------------------- | +| toggled | No | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | +| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size | +| disabled | No | let | No | boolean | false | Set to `true` to disable checkbox input | +| labelA | No | let | No | string | "Off" | Specify the label for the untoggled state | +| labelB | No | let | No | string | "On" | Specify the label for the toggled state | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| name | No | let | No | string | undefined | Specify a name attribute for the checkbox input | ### Slots @@ -4458,11 +4405,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- | -| size | let | No | "default" | "sm" | "default" | Specify the toggle size | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ------------------------------------------------ | ------------------------------- | +| size | No | let | No | "default" | "sm" | "default" | Specify the toggle size | +| labelText | No | let | No | string | "" | Specify the label text | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | ### Slots @@ -4479,66 +4426,13 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; | mouseenter | forwarded | -- | | mouseleave | forwarded | -- | -## `ToggleSmall` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | let | No | string | "On" | Specify the label for the toggled state | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | undefined | Specify a name attribute for the checkbox input | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `ToggleSmallSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - ## `Toolbar` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ | -| size | let | No | "sm" | "default" | "default" | Specify the toolbar size | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ | +| size | No | let | No | "sm" | "default" | "default" | Specify the toolbar size | ### Slots @@ -4554,9 +4448,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- | -| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------ | :------- | :--------------- | :------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------- | +| active | No | let | Yes | undefined | boolean | undefined | Use a boolean to show or hide the toolbar | +| formatTotalSelected | No | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | ### Slots @@ -4567,7 +4462,9 @@ None. ### Events -None. +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| cancel | dispatched | null | ## `ToolbarContent` @@ -4624,14 +4521,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | -| value | let | Yes | number | string | "" | Specify the value of the search input | -| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | -| disabled | let | No | boolean | false | Set to `true` to disable the search bar | -| tabindex | let | No | string | "0" | Specify the tabindex | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| ref | No | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | +| filteredRowIds | No | let | Yes | ReadonlyArray | [] | The filtered row ids | +| expanded | No | let | Yes | boolean | false | Set to `true` to expand the search bar | +| value | No | let | Yes | number | string | "" | Specify the value of the search input | +| persistent | No | let | No | boolean | false | Set to `true` to keep the search bar expanded | +| disabled | No | let | No | boolean | false | Set to `true` to disable the search bar | +| shouldFilterRows | No | let | No | boolean | ((row: import("./DataTable.svelte").DataTableRow, value: number | string) => boolean) | false | Set to `true` to filter table rows using the search value.

If `true`, the default search excludes `id`, `cells` fields and
only does a basic comparison on string and number type cell values.

To implement your own client-side filtering, pass a function
that accepts a row and value and returns a boolean. | +| tabindex | No | let | No | string | "0" | Specify the tabindex | ### Slots @@ -4646,27 +4545,30 @@ None. | input | forwarded | -- | | focus | forwarded | -- | | blur | forwarded | -- | +| keyup | forwarded | -- | +| keydown | forwarded | -- | +| paste | forwarded | -- | ## `Tooltip` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | -| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button
Icon size must be 16px (e.g., `Add16`, `Task16`) | -| iconDescription | let | No | string | "" | Specify the ARIA label for the tooltip button | -| iconName | let | No | string | "" | Specify the icon name attribute | -| tabindex | let | No | string | "0" | Set the button tabindex | -| tooltipId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | -| triggerId | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | -| triggerText | let | No | string | "" | Set the tooltip button text | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ | +| refIcon | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | +| refTooltip | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | +| ref | No | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | +| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | +| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | +| hideIcon | No | let | No | boolean | false | Set to `true` to hide the tooltip icon | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render for the tooltip button.
Default to `<Information />` | +| iconDescription | No | let | No | string | "" | Specify the ARIA label for the tooltip button | +| iconName | No | let | No | string | "" | Specify the icon name attribute | +| tabindex | No | let | No | string | "0" | Set the button tabindex | +| tooltipId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip | +| triggerId | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip button | +| triggerText | No | let | No | string | "" | Set the tooltip button text | ### Slots @@ -4678,22 +4580,25 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mousedown | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| open | dispatched | null | +| close | dispatched | null | +| click | forwarded | -- | +| mousedown | forwarded | -- | ## `TooltipDefinition` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| tooltipText | let | No | string | "" | Specify the tooltip text | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div 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 | +| open | No | let | Yes | boolean | false | Set to `true` to open the tooltip | +| tooltipText | No | let | No | string | "" | Specify the tooltip text | +| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | No | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element | ### Slots @@ -4704,21 +4609,23 @@ None. ### Events -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| focus | forwarded | -- | +| Event name | Type | Detail | +| :--------- | :--------- | :---------------- | +| open | dispatched | null | +| close | dispatched | null | +| click | forwarded | -- | +| mouseover | forwarded | -- | +| mouseenter | forwarded | -- | +| mouseleave | forwarded | -- | +| focus | forwarded | -- | ## `TooltipFooter` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- | -| selectorPrimaryFocus | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------------- | :------- | :--------------- | :------- | ------------------- | ---------------------------------------------- | --------------------------------------------------------------------------- | +| selectorPrimaryFocus | No | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip | ### Slots @@ -4734,15 +4641,15 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| tooltipText | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot | -| icon | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | -| disabled | let | No | boolean | false | Set to `true` to disable the tooltip icon | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span 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 | +| tooltipText | No | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot | +| icon | No | let | No | typeof import("svelte").SvelteComponent | undefined | Specify the icon to render | +| disabled | No | let | No | boolean | false | Set to `true` to disable the tooltip icon | +| align | No | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | +| direction | No | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the icon | +| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the span element | ### Slots @@ -4770,28 +4677,28 @@ export type TreeNodeId = string | number; export interface TreeNode { id: TreeNodeId; - text: string; - icon?: typeof import("svelte").SvelteComponent; + text: any; + icon?: typeof import("svelte").SvelteComponent; disabled?: boolean; - expanded?: boolean; + children?: TreeNode[]; } ``` ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :-------------------- | :------- | :------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | -| expandedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be expanded | -| selectedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be selected | -| activeId | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | let | No | Array | [] | Provide an array of children nodes to render | -| size | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| expandAll | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | -| collapseAll | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | -| expandNodes | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | -| collapseNodes | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :------------ | :------- | :-------------------- | :------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | +| expandedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be expanded | +| selectedIds | No | let | Yes | ReadonlyArray | [] | Set the node ids to be selected | +| activeId | No | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | +| children | No | let | No | Array | [] | Provide an array of children nodes to render | +| size | No | let | No | "default" | "compact" | "default" | Specify the TreeView size | +| labelText | No | let | No | string | "" | Specify the label text | +| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text | +| expandAll | No | function | No | () => void | () => { expandedIds = [...nodeIds]; } | Programmatically expand all nodes | +| collapseAll | No | function | No | () => void | () => { expandedIds = []; } | Programmatically collapse all nodes | +| expandNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter( (node) => filterNode(node) || node.children?.some((child) => filterNode(child) && child.children) ) .map((node) => node.id); } | Programmatically expand a subset of nodes.
Expands all nodes if no argument is provided | +| collapseNodes | No | function | No | (filterId?: (node: TreeNode) => boolean) => void | () => { expandedIds = nodes .filter((node) => expandedIds.includes(node.id) && !filterNode(node)) .map((node) => node.id); } | Programmatically collapse a subset of nodes.
Collapses all nodes if no argument is provided | ### Slots @@ -4812,9 +4719,9 @@ export interface TreeNode { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- | -| clamp | let | No | "end" | "front" | "end" | -- | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- | +| clamp | No | let | No | "end" | "front" | "end" | -- | ### Slots @@ -4830,10 +4737,10 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | +| Prop name | Required | Kind | Reactive | Type | Default value | Description | +| :--------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ---------------------------------------------------- | +| nested | No | let | No | boolean | false | Set to `true` to use the nested variant | +| expressive | No | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 9e9d4d29..b65ce5a5 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -4788,7 +4788,7 @@ { "name": "company", "kind": "let", - "description": "Specify the company name. \nAlternatively, use the named slot \"company\" (e.g., `...`)", + "description": "Specify the company name.\n\nAlternatively, use the named slot \"company\" (e.g., `...`)", "type": "string", "isFunction": false, "isFunctionDeclaration": false, @@ -9463,7 +9463,6 @@ "kind": "let", "description": "Specify a name attribute for the radio button input", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, "isRequired": false, @@ -9528,9 +9527,9 @@ "kind": "let", "description": "Set to `true` to require the selection of a radio button", "type": "boolean", - "value": "false", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, @@ -9539,9 +9538,9 @@ "kind": "let", "description": "Specify a name attribute for the radio button inputs", "type": "string", - "value": "\"\"", "isFunction": false, "isFunctionDeclaration": false, + "isRequired": false, "constant": false, "reactive": false }, diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte index c4fb1de9..9cc6e9f6 100644 --- a/src/RadioButton/RadioButton.svelte +++ b/src/RadioButton/RadioButton.svelte @@ -26,21 +26,24 @@ /** Set an id for the input element */ export let id = "ccs-" + Math.random().toString(36); - /** Specify a name attribute for the radio button input */ - export let name = ""; + /** + * Specify a name attribute for the radio button input + * @type {string} + */ + export let name = undefined; /** Obtain a reference to the input HTML element */ export let ref = null; import { getContext } from "svelte"; - import { writable } from "svelte/store"; + import { readable } from "svelte/store"; const { add, update, selectedValue, groupName, groupRequired } = getContext( "RadioButtonGroup" ) ?? { - groupName: writable(name), - groupRequired: writable(required), - selectedValue: writable(checked ? value : undefined), + groupName: readable(undefined), + groupRequired: readable(undefined), + selectedValue: readable(checked ? value : undefined), }; if (add) { @@ -59,10 +62,10 @@ bind:this="{ref}" type="radio" id="{id}" - name="{'name' in $$props ? name : $groupName}" + name="{$groupName ?? name}" checked="{checked}" disabled="{disabled}" - required="{'required' in $$props ? required : $groupRequired}" + required="{$groupRequired ?? required}" value="{value}" class:bx--radio-button="{true}" on:change diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte index 8b9be629..7ae8a455 100644 --- a/src/RadioButtonGroup/RadioButtonGroup.svelte +++ b/src/RadioButtonGroup/RadioButtonGroup.svelte @@ -8,11 +8,17 @@ /** Set to `true` to disable the radio buttons */ export let disabled = false; - /** Set to `true` to require the selection of a radio button */ - export let required = false; + /** + * Set to `true` to require the selection of a radio button + * @type {boolean} + */ + export let required = undefined; - /** Specify a name attribute for the radio button inputs */ - export let name = ""; + /** + * Specify a name attribute for the radio button inputs + * @type {string} + */ + export let name = undefined; /** Specify the legend text */ export let legendText = ""; @@ -44,7 +50,7 @@ onMount, setContext, } from "svelte"; - import { writable } from "svelte/store"; + import { readonly, writable } from "svelte/store"; const dispatch = createEventDispatcher(); const selectedValue = writable(selected); @@ -53,8 +59,8 @@ setContext("RadioButtonGroup", { selectedValue, - groupName: { subscribe: groupName.subscribe }, - groupRequired: { subscribe: groupRequired.subscribe }, + groupName: readonly(groupName), + groupRequired: readonly(groupRequired), add: ({ checked, value }) => { if (checked) { selectedValue.set(value); diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts index 5413720e..f7916428 100644 --- a/types/RadioButton/RadioButton.svelte.d.ts +++ b/types/RadioButton/RadioButton.svelte.d.ts @@ -54,7 +54,7 @@ export interface RadioButtonProps extends RestProps { /** * Specify a name attribute for the radio button input - * @default "" + * @default undefined */ name?: string; diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts index 2d2d6a2d..0e259fde 100644 --- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts +++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts @@ -18,13 +18,13 @@ export interface RadioButtonGroupProps extends RestProps { /** * Set to `true` to require the selection of a radio button - * @default false + * @default undefined */ required?: boolean; /** * Specify a name attribute for the radio button inputs - * @default "" + * @default undefined */ name?: string; diff --git a/types/UIShell/Header.svelte.d.ts b/types/UIShell/Header.svelte.d.ts index a4a71ae1..f16a2862 100644 --- a/types/UIShell/Header.svelte.d.ts +++ b/types/UIShell/Header.svelte.d.ts @@ -30,6 +30,7 @@ export interface HeaderProps extends RestProps { /** * Specify the company name. + * * Alternatively, use the named slot "company" (e.g., `...`) * @default undefined */