diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f00828c0..a85d2226 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -1,6 +1,6 @@
# Component Index
-> 165 components exported from carbon-components-svelte@0.80.0.
+> 172 components exported from carbon-components-svelte@0.54.0.
## Components
@@ -30,6 +30,7 @@
- [`ContextMenuGroup`](#contextmenugroup)
- [`ContextMenuOption`](#contextmenuoption)
- [`ContextMenuRadioGroup`](#contextmenuradiogroup)
+- [`Copy`](#copy)
- [`CopyButton`](#copybutton)
- [`DataTable`](#datatable)
- [`DataTableSkeleton`](#datatableskeleton)
@@ -54,6 +55,7 @@
- [`Header`](#header)
- [`HeaderAction`](#headeraction)
- [`HeaderActionLink`](#headeractionlink)
+- [`HeaderActionSearch`](#headeractionsearch)
- [`HeaderGlobalAction`](#headerglobalaction)
- [`HeaderNav`](#headernav)
- [`HeaderNavItem`](#headernavitem)
@@ -63,6 +65,8 @@
- [`HeaderPanelLinks`](#headerpanellinks)
- [`HeaderSearch`](#headersearch)
- [`HeaderUtilities`](#headerutilities)
+- [`Icon`](#icon)
+- [`IconSkeleton`](#iconskeleton)
- [`ImageLoader`](#imageloader)
- [`InlineLoading`](#inlineloading)
- [`InlineNotification`](#inlinenotification)
@@ -84,6 +88,7 @@
- [`NotificationActionButton`](#notificationactionbutton)
- [`NotificationButton`](#notificationbutton)
- [`NotificationIcon`](#notificationicon)
+- [`NotificationTextDetails`](#notificationtextdetails)
- [`NumberInput`](#numberinput)
- [`NumberInputSkeleton`](#numberinputskeleton)
- [`OrderedList`](#orderedlist)
@@ -156,6 +161,8 @@
- [`ToastNotification`](#toastnotification)
- [`Toggle`](#toggle)
- [`ToggleSkeleton`](#toggleskeleton)
+- [`ToggleSmall`](#togglesmall)
+- [`ToggleSmallSkeleton`](#togglesmallskeleton)
- [`Toolbar`](#toolbar)
- [`ToolbarBatchActions`](#toolbarbatchactions)
- [`ToolbarContent`](#toolbarcontent)
@@ -176,12 +183,12 @@
### Props
-| 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 |
+| 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 |
### Slots
@@ -202,12 +209,12 @@
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | -------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
-| disabled | No | let | Yes | boolean | false | Set to `true` to disable the accordion item |
-| open | No | let | Yes | boolean | false | Set to `true` to open the first accordion item |
-| title | No | let | No | string | "title" | Specify the title of the accordion item heading.
Alternatively, use the "title" slot (e.g., `<div slot="title">...</div>`) |
-| iconDescription | No | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon |
+| Prop name | 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 |
### Slots
@@ -231,12 +238,12 @@
### Props
-| 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 |
+| 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 |
### Slots
@@ -255,9 +262,9 @@ None.
### Props
-| 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 |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
+| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio |
### Slots
@@ -273,10 +280,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -297,10 +304,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -321,10 +328,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -351,10 +358,11 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
-| 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 |
+| 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 |
### Slots
@@ -366,29 +374,30 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
| Event name | Type | Detail |
| :--------- | :--------- | :----------------------------------------------------------------------- |
-| change | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } |
+| match | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } |
## `Button`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| 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 |
+| 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 |
### Slots
@@ -409,9 +418,9 @@ export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| stacked | No | let | No | boolean | false | Set to `true` to stack the buttons vertically |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically |
### Slots
@@ -427,10 +436,11 @@ None.
### Props
-| 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 |
+| 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 | -- |
### Slots
@@ -449,22 +459,22 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -507,12 +517,12 @@ None.
### Props
-| 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` |
+| 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` |
### Slots
@@ -534,26 +544,26 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------------- | :------- | :--------------- | :------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element |
-| showMoreLess | No | let | Yes | boolean | false | Set to `true` to enable the show more/less button |
-| expanded | No | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") |
-| type | No | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet |
-| code | No | let | No | string | undefined | Set the code snippet text.
Alternatively, use the default slot (e.g., `<CodeSnippet>{code}</CodeSnippet>`).
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 |
+| 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 |
### Slots
@@ -563,24 +573,22 @@ None.
### Events
-| Event name | Type | Detail |
-| :----------- | :--------- | :---------------- |
-| expand | dispatched | null |
-| collapse | dispatched | null |
-| copy | dispatched | null |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| animationend | forwarded | -- |
+| Event name | Type | Detail |
+| :----------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| animationend | forwarded | -- |
+| copy | dispatched | -- |
## `CodeSnippetSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------ | --------------------- | ---------------------------- |
-| type | No | let | No | "single" | "multi" | "single" | Set the type of code snippet |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- |
+| type | let | No | "single" | "multi" | "single" | Set the type of code snippet |
### Slots
@@ -612,19 +620,19 @@ export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to the column |
-| aspectRatio | No | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | undefined | Specify the aspect ratio of the column |
-| sm | No | let | No | ColumnBreakpoint | undefined | Set the small breakpoint |
-| md | No | let | No | ColumnBreakpoint | undefined | Set the medium breakpoint |
-| lg | No | let | No | ColumnBreakpoint | undefined | Set the large breakpoint |
-| xlg | No | let | No | ColumnBreakpoint | undefined | Set the extra large breakpoint |
-| max | No | let | No | ColumnBreakpoint | undefined | Set the maximum breakpoint |
+| Prop name | 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 |
### Slots
@@ -646,45 +654,40 @@ export type ComboBoxItemId = any;
export interface ComboBoxItem {
id: ComboBoxItemId;
text: string;
- disabled?: boolean;
}
```
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :-------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: ComboBoxItem; index: number } | {itemToString(item)} |
-| titleText | No | -- | {titleText} |
+None.
### Events
@@ -695,7 +698,6 @@ export interface ComboBoxItem {
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
| clear | forwarded | -- |
| scroll | forwarded | -- |
@@ -703,15 +705,15 @@ export interface ComboBoxItem {
### Props
-| 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 |
+| 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 |
### Slots
@@ -729,18 +731,18 @@ export interface ComboBoxItem {
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-| submit | dispatched | null |
-| click:button--primary | dispatched | null |
-| close | dispatched | null |
-| open | dispatched | null |
+| submit | dispatched | -- |
+| click:button--primary | dispatched | -- |
+| close | dispatched | -- |
+| open | dispatched | -- |
## `Content`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | --------------------------- | ----------------------------------- |
-| id | No | let | No | string | "main-content" | Specify the id for the main element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- |
+| id | let | No | string | "main-content" | Specify the id for the main element |
### Slots
@@ -756,10 +758,11 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -781,13 +784,13 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -802,7 +805,7 @@ None.
| open | dispatched | HTMLElement |
| click | forwarded | -- |
| keydown | forwarded | -- |
-| close | dispatched | null |
+| close | dispatched | -- |
## `ContextMenuDivider`
@@ -822,10 +825,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ---------------------------------- | --------------- | ---------------------- |
-| selectedIds | No | let | Yes | ReadonlyArray | [] | -- |
-| labelText | No | let | No | string | "" | Specify the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- |
+| selectedIds | let | Yes | string[] | [] | -- |
+| labelText | let | No | string | "" | Specify the label text |
### Slots
@@ -841,45 +844,44 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :----------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
-| labelText | No | -- | {labelText} |
-| shortcutText | No | -- | {shortcutText} |
+| Slot name | Default | Props | Fallback |
+| :----------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| labelText | No | -- | {labelText} |
+| shortcutText | No | -- | {shortcutText} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| keydown | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| click | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| keydown | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| click | dispatched | -- |
## `ContextMenuRadioGroup`
### Props
-| 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 |
+| 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 |
### Slots
@@ -891,17 +893,38 @@ 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 | 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 |
+| 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 |
### Slots
@@ -909,11 +932,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :----------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| animationend | forwarded | -- |
-| copy | dispatched | null |
+| Event name | Type | Detail |
+| :----------- | :--------- | :----- |
+| click | forwarded | -- |
+| animationend | forwarded | -- |
+| copy | dispatched | -- |
## `DataTable`
@@ -930,8 +953,6 @@ 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 {
@@ -940,8 +961,6 @@ 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;
@@ -962,41 +981,38 @@ export interface DataTableCell {
### Props
-| 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 |
+| 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 |
### Slots
-| 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} |
+| 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} |
### Events
@@ -1005,27 +1021,25 @@ 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 | 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 |
+| 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 |
### Slots
@@ -1044,20 +1058,20 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1079,24 +1093,24 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1112,16 +1126,15 @@ None.
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `DatePickerSkeleton`
### Props
-| 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 |
+| 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 |
### Slots
@@ -1148,41 +1161,39 @@ export type DropdownItemText = string;
export interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
- disabled?: boolean;
}
```
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :--------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: DropdownItem; index: number; } | {itemToString(item)} |
+None.
### Events
@@ -1194,9 +1205,9 @@ export interface DropdownItem {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------- |
-| inline | No | let | No | boolean | false | Set to `true` to use the inline variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- |
+| inline | let | No | boolean | false | Set to `true` to use the inline variant |
### Slots
@@ -1215,19 +1226,19 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1250,61 +1261,54 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :--------------- | :------ | :---- | :------------------------------ |
-| labelDescription | No | -- | {labelDescription} |
-| labelTitle | No | -- | {labelTitle} |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| add | dispatched | ReadonlyArray |
-| remove | dispatched | ReadonlyArray |
-| change | dispatched | ReadonlyArray |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| add | dispatched | File[] |
+| remove | dispatched | File[] |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| keydown | forwarded | -- |
## `FileUploaderButton`
### Props
-| 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 |
+| 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 |
### Slots
@@ -1314,29 +1318,28 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| change | dispatched | ReadonlyArray |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| keydown | forwarded | -- |
+| change | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderDropContainer`
### Props
-| 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 |
+| 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 |
### Slots
@@ -1346,30 +1349,30 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------------------- |
-| add | dispatched | ReadonlyArray |
-| change | dispatched | ReadonlyArray |
-| dragover | forwarded | -- |
-| dragleave | forwarded | -- |
-| drop | forwarded | -- |
-| keydown | forwarded | -- |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------- |
+| add | dispatched | FileList |
+| dragover | forwarded | -- |
+| dragleave | forwarded | -- |
+| drop | forwarded | -- |
+| keydown | forwarded | -- |
+| change | forwarded | -- |
+| click | forwarded | -- |
## `FileUploaderItem`
### Props
-| 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 |
+| 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 |
### Slots
@@ -1407,11 +1410,11 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1451,9 +1454,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | -------------------------------------- |
-| ref | No | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------------- | ----------------- | -------------------------------------- |
+| ref | let | Yes | null | HTMLFormElement | null | Obtain a reference to the form element |
### Slots
@@ -1476,14 +1479,14 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1525,9 +1528,9 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -1548,16 +1551,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) |
-| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
-| fullWidth | No | let | No | boolean | false | Set to `true` to use the fullWidth variant |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | 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 |
### Slots
@@ -1573,28 +1576,27 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------------------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| isSideNavOpen | No | let | Yes | boolean | false | Set to `true` to open the side nav |
-| expandedByDefault | No | let | No | boolean | true | Set to `false` to hide the side nav by default |
-| uiShellAriaLabel | No | let | No | string | undefined | Specify the ARIA label for the header |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
-| company | No | let | No | string | undefined | Specify the company name.
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} />` |
+| 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` |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------------- | :------ | :---- | :--------------------------- |
-| -- | Yes | -- | -- |
-| company | No | -- | {company} |
-| platform | No | -- | {platformName} |
-| skip-to-content | No | -- | -- |
+| Slot name | Default | Props | Fallback |
+| :-------------- | :------ | :---- | :-------------------------- |
+| -- | Yes | -- | -- |
+| platform | No | -- | {platformName} |
+| skip-to-content | No | -- | -- |
### Events
@@ -1604,73 +1606,95 @@ None.
## `HeaderAction`
+### Types
+
+```ts
+export interface HeaderActionSlideTransition {
+ delay?: number;
+ duration?: number;
+ easing?: (t: number) => number;
+}
+```
+
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------------------- | :------- | :--------------- | :------- | ----------------------------------------------------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| isOpen | No | let | Yes | boolean | false | Set to `true` to open the panel |
-| icon | No | let | No | typeof import("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 |
+| 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 |
### Slots
-| 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} |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------------- |
+| -- | Yes | -- | -- |
+| text | No | -- | {#if text}<span>{text}</span>{/if} |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| close | dispatched | -- |
## `HeaderActionLink`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| icon | No | -- | <svelte:component this="{icon}" size="{20}" /> |
+None.
### Events
-| Event name | Type | Detail |
-| :--------- | :-------- | :----- |
-| click | forwarded | -- |
+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 | -- |
## `HeaderGlobalAction`
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------------------- |
-| -- | Yes | -- | <svelte:component this="{icon}" size="{20}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :---------------------------------------------------- |
+| -- | Yes | -- | <svelte:component this="{icon}" /> |
### Events
@@ -1682,7 +1706,9 @@ None.
### Props
-None.
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------ | ---------------------- | ---------------------------------- |
+| ariaLabel | let | No | string | undefined | Specify the ARIA label for the nav |
### Slots
@@ -1698,18 +1724,16 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------------------ |
-| -- | Yes | -- | {text} |
+None.
### Events
@@ -1728,12 +1752,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| 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 |
+| 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 |
### Slots
@@ -1774,10 +1798,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| href | No | let | No | string | undefined | Specify the `href` attribute |
+| 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 |
### Slots
@@ -1821,13 +1845,13 @@ export interface HeaderSearchResult {
### Props
-| 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 |
+| 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 |
### Slots
@@ -1839,16 +1863,15 @@ export interface HeaderSearchResult {
| Event name | Type | Detail |
| :--------- | :--------- | :---------------------------------------------------------------------------------------------- |
-| active | dispatched | null |
-| inactive | dispatched | null |
-| clear | dispatched | null |
+| active | dispatched | any |
+| inactive | dispatched | any |
+| clear | dispatched | any |
| select | dispatched | { value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult } |
| change | forwarded | -- |
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
| keydown | forwarded | -- |
-| paste | forwarded | -- |
## `HeaderUtilities`
@@ -1866,20 +1889,63 @@ 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 | 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 |
+| 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 |
### Slots
@@ -1890,21 +1956,21 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| load | dispatched | null |
-| error | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :--------------- |
+| load | dispatched | any |
+| error | dispatched | any |
## `InlineLoading`
### Props
-| 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" |
+| 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" |
### Slots
@@ -1912,29 +1978,28 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| success | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| success | dispatched | -- |
## `InlineNotification`
### Props
-| 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 |
+| 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 |
### Slots
@@ -1959,22 +2024,21 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -1989,17 +2053,17 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2024,15 +2088,15 @@ export type ListBoxFieldTranslationId = "close" | "open";
### Props
-| 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 |
+| 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 |
### Slots
@@ -2056,10 +2120,10 @@ export type ListBoxFieldTranslationId = "close" | "open";
### Props
-| 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 |
+| 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 |
### Slots
@@ -2083,11 +2147,11 @@ export type ListBoxMenuIconTranslationId = "close" | "open";
### Props
-| 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 |
+| 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 |
### Slots
@@ -2103,11 +2167,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2133,13 +2196,13 @@ export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
### Props
-| 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 |
+| 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 |
### Slots
@@ -2176,12 +2239,13 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2195,12 +2259,12 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2210,36 +2274,35 @@ None.
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------- |
-| save | dispatched | null |
+| save | dispatched | any |
| update | dispatched | { prevValue: any; value: any; } |
## `Modal`
### Props
-| 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 |
+| 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 |
### Slots
@@ -2260,19 +2323,19 @@ None.
| mouseover | forwarded | -- |
| mouseenter | forwarded | -- |
| mouseleave | forwarded | -- |
-| submit | dispatched | null |
-| click:button--primary | dispatched | null |
-| close | dispatched | null |
-| open | dispatched | null |
+| submit | dispatched | -- |
+| click:button--primary | dispatched | -- |
+| close | dispatched | -- |
+| open | dispatched | -- |
## `ModalBody`
### Props
-| 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 |
+| 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 |
### Slots
@@ -2288,16 +2351,15 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2315,15 +2377,15 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2349,68 +2411,60 @@ export type MultiSelectItemText = string;
export interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
- disabled?: boolean;
}
```
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :-------------------------------- |
-| -- | Yes | { item: MultiSelectItem; index: number } | {itemToString(item)} |
-| titleText | No | -- | {titleText} |
+None.
### Events
| Event name | Type | Detail |
| :--------- | :--------- | :------------------------------------------------------------------------------------------------------------- |
| select | dispatched | { selectedIds: MultiSelectItemId[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } |
-| clear | dispatched | null |
-| blur | dispatched | FocusEvent | CustomEvent |
+| clear | dispatched | any |
| keydown | forwarded | -- |
| keyup | forwarded | -- |
| focus | forwarded | -- |
-| paste | forwarded | -- |
+| blur | forwarded | -- |
## `NotificationActionButton`
@@ -2437,12 +2491,12 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2461,11 +2515,11 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2475,6 +2529,27 @@ 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
@@ -2485,31 +2560,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Props
-| 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 |
+| 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 |
### Slots
@@ -2519,27 +2595,24 @@ export type NumberInputTranslationId = "increment" | "decrement";
### Events
-| 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 | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | number |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `NumberInputSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -2558,11 +2631,11 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2604,20 +2677,20 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2628,30 +2701,30 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------------------------------- |
-| close | dispatched | null | { index: number; text: string; } |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :-------------------------------------------- |
+| close | dispatched | { index: number; text: string; } |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `OverflowMenuItem`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :----------- | :------- | :--------------- | :------- | ------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element |
-| 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 |
+| 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 |
### Slots
@@ -2670,24 +2743,24 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2695,26 +2768,24 @@ None.
### Events
-| 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; } |
+| Event name | Type | Detail |
+| :--------------------- | :--------- | :----------------------------------------------- |
+| update | dispatched | { pageSize: number; page: number; } |
+| click:button--previous | dispatched | { page: number; } |
+| click:button--next | dispatched | { page: number; } |
## `PaginationNav`
### Props
-| 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. |
+| 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 |
### Slots
@@ -2751,29 +2822,29 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2795,21 +2866,20 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `Popover`
### Props
-| 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 |
+| 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 |
### Slots
@@ -2819,25 +2889,22 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :------------------------------------ |
-| click:outside | dispatched | { target: HTMLElement; } |
+| Event name | Type | Detail |
+| :------------ | :--------- | :----- |
+| click:outside | dispatched | -- |
## `ProgressBar`
### Props
-| 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 |
+| 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 |
### Slots
@@ -2853,12 +2920,12 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2880,10 +2947,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2902,16 +2969,16 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -2933,18 +3000,18 @@ None.
### Props
-| 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 | "" | Specify a name attribute for the radio button input |
+| 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 |
### Slots
@@ -2962,15 +3029,16 @@ None.
### Props
-| 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 |
-| 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 |
+| 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 |
### Slots
@@ -3012,16 +3080,16 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3054,10 +3122,10 @@ export interface RecursiveListNode {
### Props
-| 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 |
+| 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 |
### Slots
@@ -3071,15 +3139,15 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :------------ | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| as | No | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) |
-| condensed | No | let | No | boolean | false | Set to `true` to use the condensed variant |
-| narrow | No | let | No | boolean | false | Set to `true` to use the narrow variant |
-| noGutter | No | let | No | boolean | false | Set to `true` to remove the gutter |
-| noGutterLeft | No | let | No | boolean | false | Set to `true` to remove the left gutter |
-| noGutterRight | No | let | No | boolean | false | Set to `true` to remove the right gutter |
-| padding | No | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns |
+| Prop name | 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 |
### Slots
@@ -3095,24 +3163,26 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3122,30 +3192,30 @@ None.
### Events
-| 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 |
+| 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 | -- |
## `SearchSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ----------------------------------------- | ----------------- | ------------------------------------ |
-| size | No | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input |
+| 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 |
### Slots
@@ -3164,25 +3234,25 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3193,24 +3263,23 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :-------------------------------- |
-| update | dispatched | string | number |
-| change | forwarded | -- |
-| input | forwarded | -- |
-| focus | forwarded | -- |
-| blur | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :--------- | :------------------ |
+| change | dispatched | string |
+| input | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `SelectItem`
### Props
-| 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 |
+| 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 |
### Slots
@@ -3224,10 +3293,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3243,9 +3312,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3264,18 +3333,18 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3285,27 +3354,25 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :------------------ |
-| select | dispatched | string |
-| deselect | dispatched | string |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| keydown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| keydown | forwarded | -- |
## `SideNav`
### Props
-| 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 |
+| 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 |
### Slots
@@ -3315,11 +3382,11 @@ None.
### Events
-| Event name | Type | Detail |
-| :------------ | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click:overlay | dispatched | null |
+| Event name | Type | Detail |
+| :------------ | :--------- | :--------------- |
+| open | dispatched | any |
+| close | dispatched | any |
+| click:overlay | dispatched | any |
## `SideNavDivider`
@@ -3355,20 +3422,17 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | --------------------------------------------------------- | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | {text} |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+None.
### Events
@@ -3380,19 +3444,18 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :---------------------------------------------------- |
-| -- | Yes | -- | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :---- | :------- |
+| -- | Yes | -- | -- |
### Events
@@ -3404,12 +3467,12 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :--------- | :------- | :--------------- | :------- | ------------------------------------------ | ---------------------- | --------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element |
-| 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 |
+| 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 |
### Slots
@@ -3446,12 +3509,12 @@ None.
### Props
-| 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) |
+| 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) |
### Slots
@@ -3470,10 +3533,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3491,27 +3554,25 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3533,9 +3594,9 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -3554,12 +3615,13 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3602,10 +3664,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3647,14 +3709,14 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3668,11 +3730,11 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3694,9 +3756,10 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------- | -------------- | -------------------------- |
-| rows | No | let | No | number | 5 | Specify the number of rows |
+| 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 |
### Slots
@@ -3715,13 +3778,13 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| selected | No | let | Yes | boolean | false | Set to `true` for the switch to be selected |
-| text | No | let | No | string | "Provide text" | Specify the switch text.
Alternatively, use the "text" slot (e.g., `<span slot="text">...</span>`) |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the switch |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element |
+| Prop name | 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 |
### Slots
@@ -3743,14 +3806,14 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element |
-| label | No | let | No | string | "" | Specify the tab label.
Alternatively, use the default slot (e.g., `<Tab><span>Label</span></Tab>`) |
-| href | No | let | No | string | "#" | Specify the href attribute |
-| disabled | No | let | No | boolean | false | Set to `true` to disable the tab |
-| tabindex | No | let | No | string | "0" | Specify the tabindex |
-| id | No | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element |
+| Prop name | 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 |
### Slots
@@ -3771,9 +3834,9 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3789,14 +3852,14 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3849,12 +3912,12 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3891,14 +3954,12 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3940,13 +4001,13 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3967,10 +4028,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -3989,42 +4050,41 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :----------------------------------------------------- | :---------------------------------------------------- |
-| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- |
-| icon | No | -- | <svelte:component this="{icon}" /> |
+| Slot name | Default | Props | Fallback |
+| :-------- | :------ | :----------------------------------------------------- | :------- |
+| -- | Yes | { props: { class: 'bx--tag\_\_label' } } | -- |
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| close | dispatched | null |
+| Event name | Type | Detail |
+| :--------- | :--------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| close | dispatched | -- |
## `TagSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ----------- |
-| size | No | let | No | "sm" | "default" | "default" | -- |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- |
+| size | let | No | "sm" | "default" | "default" | -- |
### Slots
@@ -4043,24 +4103,22 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -4082,15 +4140,14 @@ None.
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `TextAreaSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | --------------------------------------------- |
-| hideLabel | No | let | No | boolean | false | Set to `true` to visually hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- |
+| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text |
### Slots
@@ -4109,26 +4166,27 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -4138,27 +4196,26 @@ None.
### Events
-| 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 | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| change | forwarded | -- |
+| input | forwarded | -- |
+| keydown | forwarded | -- |
+| keyup | forwarded | -- |
+| focus | forwarded | -- |
+| blur | forwarded | -- |
## `TextInputSkeleton`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ------------------------------------ |
-| hideLabel | No | let | No | boolean | false | Set to `true` to hide the label text |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ |
+| hideLabel | let | No | boolean | false | Set to `true` to hide the label text |
### Slots
@@ -4183,15 +4240,15 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### 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 |
+| 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 |
### Slots
@@ -4209,9 +4266,9 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | -------------------- | ------------------ | ----------------------------------------- |
-| light | No | let | No | boolean | false | Set to `true` to enable the light variant |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
### Slots
@@ -4232,11 +4289,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| 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 |
+| 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 |
### Slots
@@ -4254,22 +4311,23 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| 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 |
+| 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 |
### Slots
@@ -4292,21 +4350,21 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
| keyup | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| paste | forwarded | -- |
## `TimePickerSelect`
### Props
-| 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 |
+| 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 |
### Slots
@@ -4328,19 +4386,17 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| 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. |
+| 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 |
### Slots
@@ -4365,17 +4421,16 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| 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 |
+| 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 |
### Slots
@@ -4403,11 +4458,11 @@ export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100";
### Props
-| 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 |
+| 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 |
### Slots
@@ -4424,13 +4479,66 @@ 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 | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | ---------------------------------- | ---------------------- | ------------------------ |
-| size | No | let | No | "sm" | "default" | "default" | Specify the toolbar size |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ |
+| size | let | No | "sm" | "default" | "default" | Specify the toolbar size |
### Slots
@@ -4446,10 +4554,9 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -4460,9 +4567,7 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| cancel | dispatched | null |
+None.
## `ToolbarContent`
@@ -4519,16 +4624,14 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
@@ -4543,30 +4646,27 @@ None.
| input | forwarded | -- |
| focus | forwarded | -- |
| blur | forwarded | -- |
-| keyup | forwarded | -- |
-| keydown | forwarded | -- |
-| paste | forwarded | -- |
## `Tooltip`
### Props
-| 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 |
+| 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 |
### Slots
@@ -4578,25 +4678,22 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
-| mousedown | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mousedown | forwarded | -- |
## `TooltipDefinition`
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| 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 |
+| 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 |
### Slots
@@ -4607,23 +4704,21 @@ None.
### Events
-| Event name | Type | Detail |
-| :--------- | :--------- | :---------------- |
-| open | dispatched | null |
-| close | dispatched | null |
-| click | forwarded | -- |
-| mouseover | forwarded | -- |
-| mouseenter | forwarded | -- |
-| mouseleave | forwarded | -- |
-| focus | forwarded | -- |
+| Event name | Type | Detail |
+| :--------- | :-------- | :----- |
+| click | forwarded | -- |
+| mouseover | forwarded | -- |
+| mouseenter | forwarded | -- |
+| mouseleave | forwarded | -- |
+| focus | forwarded | -- |
## `TooltipFooter`
### Props
-| 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 |
+| 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 |
### Slots
@@ -4639,15 +4734,15 @@ None.
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :---------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
-| ref | No | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element |
-| 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 |
+| 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 |
### Slots
@@ -4675,28 +4770,28 @@ export type TreeNodeId = string | number;
export interface TreeNode {
id: TreeNodeId;
- text: any;
- icon?: typeof import("svelte").SvelteComponent;
+ text: string;
+ icon?: typeof import("svelte").SvelteComponent;
disabled?: boolean;
- children?: TreeNode[];
+ expanded?: boolean;
}
```
### Props
-| 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 |
+| 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 |
### Slots
@@ -4717,9 +4812,9 @@ export interface TreeNode {
### Props
-| Prop name | Required | Kind | Reactive | Type | Default value | Description |
-| :-------- | :------- | :--------------- | :------- | --------------------------------- | ------------------ | ----------- |
-| clamp | No | let | No | "end" | "front" | "end" | -- |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- |
+| clamp | let | No | "end" | "front" | "end" | -- |
### Slots
@@ -4735,10 +4830,10 @@ None.
### Props
-| 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 |
+| 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 |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 2ee1d7e5..9e9d4d29 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9523,6 +9523,28 @@
"constant": false,
"reactive": false
},
+ {
+ "name": "required",
+ "kind": "let",
+ "description": "Set to `true` to require the selection of a radio button",
+ "type": "boolean",
+ "value": "false",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "constant": false,
+ "reactive": false
+ },
+ {
+ "name": "name",
+ "kind": "let",
+ "description": "Specify a name attribute for the radio button inputs",
+ "type": "string",
+ "value": "\"\"",
+ "isFunction": false,
+ "isFunctionDeclaration": false,
+ "constant": false,
+ "reactive": false
+ },
{
"name": "legendText",
"kind": "let",
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index cb6dd084..c4fb1de9 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -35,13 +35,16 @@
import { getContext } from "svelte";
import { writable } from "svelte/store";
- const ctx = getContext("RadioButtonGroup");
- const selectedValue = ctx
- ? ctx.selectedValue
- : writable(checked ? value : undefined);
+ const { add, update, selectedValue, groupName, groupRequired } = getContext(
+ "RadioButtonGroup"
+ ) ?? {
+ groupName: writable(name),
+ groupRequired: writable(required),
+ selectedValue: writable(checked ? value : undefined),
+ };
- if (ctx) {
- ctx.add({ id, checked, disabled, value });
+ if (add) {
+ add({ id, checked, disabled, value });
}
$: checked = $selectedValue === value;
@@ -56,16 +59,16 @@
bind:this="{ref}"
type="radio"
id="{id}"
- name="{name}"
+ name="{'name' in $$props ? name : $groupName}"
checked="{checked}"
disabled="{disabled}"
- required="{required}"
+ required="{'required' in $$props ? required : $groupRequired}"
value="{value}"
class:bx--radio-button="{true}"
on:change
on:change="{() => {
- if (ctx) {
- ctx.update(value);
+ if (update) {
+ update(value);
}
}}"
/>
diff --git a/src/RadioButtonGroup/RadioButtonGroup.svelte b/src/RadioButtonGroup/RadioButtonGroup.svelte
index 60b4fbb1..8b9be629 100644
--- a/src/RadioButtonGroup/RadioButtonGroup.svelte
+++ b/src/RadioButtonGroup/RadioButtonGroup.svelte
@@ -8,6 +8,12 @@
/** 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;
+
+ /** Specify a name attribute for the radio button inputs */
+ export let name = "";
+
/** Specify the legend text */
export let legendText = "";
@@ -42,9 +48,13 @@
const dispatch = createEventDispatcher();
const selectedValue = writable(selected);
+ const groupName = writable(name);
+ const groupRequired = writable(required);
setContext("RadioButtonGroup", {
selectedValue,
+ groupName: { subscribe: groupName.subscribe },
+ groupRequired: { subscribe: groupRequired.subscribe },
add: ({ checked, value }) => {
if (checked) {
selectedValue.set(value);
@@ -67,6 +77,9 @@
selected = value;
dispatch("change", value);
});
+
+ $: $groupName = name;
+ $: $groupRequired = required;
diff --git a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
index 779ade41..2d2d6a2d 100644
--- a/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
+++ b/types/RadioButtonGroup/RadioButtonGroup.svelte.d.ts
@@ -16,6 +16,18 @@ export interface RadioButtonGroupProps extends RestProps {
*/
disabled?: boolean;
+ /**
+ * Set to `true` to require the selection of a radio button
+ * @default false
+ */
+ required?: boolean;
+
+ /**
+ * Specify a name attribute for the radio button inputs
+ * @default ""
+ */
+ name?: string;
+
/**
* Specify the legend text
* @default ""