From 0be42a4b6672e72b1200a4fe648e1d4691df2d6f Mon Sep 17 00:00:00 2001 From: metonym Date: Wed, 1 Sep 2021 12:26:28 -0700 Subject: [PATCH] build: incorporate sveltekit/vite --- .gitignore | 2 + COMPONENT_INDEX.md | 4816 ------------------------------------ app/app.html | 15 + app/routes/__layout.svelte | 5 + app/routes/index.svelte | 5 + package.json | 32 +- rollup.config.js | 46 - svelte.config.js | 18 + vite.config.js | 27 + yarn.lock | 482 ++-- 10 files changed, 237 insertions(+), 5211 deletions(-) delete mode 100644 COMPONENT_INDEX.md create mode 100644 app/app.html create mode 100644 app/routes/__layout.svelte create mode 100644 app/routes/index.svelte delete mode 100644 rollup.config.js create mode 100644 svelte.config.js create mode 100644 vite.config.js diff --git a/.gitignore b/.gitignore index 2fa5e32b..77bbce33 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ +/.svelte-kit +/build /coverage /lib /node_modules diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md deleted file mode 100644 index 05855a9f..00000000 --- a/COMPONENT_INDEX.md +++ /dev/null @@ -1,4816 +0,0 @@ -# Component Index - -> 172 components exported from carbon-components-svelte@0.42.2. - -## Components - -- [`Accordion`](#accordion) -- [`AccordionItem`](#accordionitem) -- [`AccordionSkeleton`](#accordionskeleton) -- [`AspectRatio`](#aspectratio) -- [`Breadcrumb`](#breadcrumb) -- [`BreadcrumbItem`](#breadcrumbitem) -- [`BreadcrumbSkeleton`](#breadcrumbskeleton) -- [`Breakpoint`](#breakpoint) -- [`Button`](#button) -- [`ButtonSet`](#buttonset) -- [`ButtonSkeleton`](#buttonskeleton) -- [`Checkbox`](#checkbox) -- [`CheckboxSkeleton`](#checkboxskeleton) -- [`ClickableTile`](#clickabletile) -- [`CodeSnippet`](#codesnippet) -- [`CodeSnippetSkeleton`](#codesnippetskeleton) -- [`Column`](#column) -- [`ComboBox`](#combobox) -- [`ComposedModal`](#composedmodal) -- [`Content`](#content) -- [`ContentSwitcher`](#contentswitcher) -- [`ContextMenu`](#contextmenu) -- [`ContextMenuDivider`](#contextmenudivider) -- [`ContextMenuGroup`](#contextmenugroup) -- [`ContextMenuOption`](#contextmenuoption) -- [`ContextMenuRadioGroup`](#contextmenuradiogroup) -- [`Copy`](#copy) -- [`CopyButton`](#copybutton) -- [`DataTable`](#datatable) -- [`DataTableSkeleton`](#datatableskeleton) -- [`DatePicker`](#datepicker) -- [`DatePickerInput`](#datepickerinput) -- [`DatePickerSkeleton`](#datepickerskeleton) -- [`Dropdown`](#dropdown) -- [`DropdownSkeleton`](#dropdownskeleton) -- [`ExpandableTile`](#expandabletile) -- [`FileUploader`](#fileuploader) -- [`FileUploaderButton`](#fileuploaderbutton) -- [`FileUploaderDropContainer`](#fileuploaderdropcontainer) -- [`FileUploaderItem`](#fileuploaderitem) -- [`FileUploaderSkeleton`](#fileuploaderskeleton) -- [`Filename`](#filename) -- [`FluidForm`](#fluidform) -- [`Form`](#form) -- [`FormGroup`](#formgroup) -- [`FormItem`](#formitem) -- [`FormLabel`](#formlabel) -- [`Grid`](#grid) -- [`Header`](#header) -- [`HeaderAction`](#headeraction) -- [`HeaderActionLink`](#headeractionlink) -- [`HeaderActionSearch`](#headeractionsearch) -- [`HeaderGlobalAction`](#headerglobalaction) -- [`HeaderNav`](#headernav) -- [`HeaderNavItem`](#headernavitem) -- [`HeaderNavMenu`](#headernavmenu) -- [`HeaderPanelDivider`](#headerpaneldivider) -- [`HeaderPanelLink`](#headerpanellink) -- [`HeaderPanelLinks`](#headerpanellinks) -- [`HeaderSearch`](#headersearch) -- [`HeaderUtilities`](#headerutilities) -- [`Icon`](#icon) -- [`IconSkeleton`](#iconskeleton) -- [`ImageLoader`](#imageloader) -- [`InlineLoading`](#inlineloading) -- [`InlineNotification`](#inlinenotification) -- [`Link`](#link) -- [`ListBox`](#listbox) -- [`ListBoxField`](#listboxfield) -- [`ListBoxMenu`](#listboxmenu) -- [`ListBoxMenuIcon`](#listboxmenuicon) -- [`ListBoxMenuItem`](#listboxmenuitem) -- [`ListBoxSelection`](#listboxselection) -- [`ListItem`](#listitem) -- [`Loading`](#loading) -- [`LocalStorage`](#localstorage) -- [`Modal`](#modal) -- [`ModalBody`](#modalbody) -- [`ModalFooter`](#modalfooter) -- [`ModalHeader`](#modalheader) -- [`MultiSelect`](#multiselect) -- [`NotificationActionButton`](#notificationactionbutton) -- [`NotificationButton`](#notificationbutton) -- [`NotificationIcon`](#notificationicon) -- [`NotificationTextDetails`](#notificationtextdetails) -- [`NumberInput`](#numberinput) -- [`NumberInputSkeleton`](#numberinputskeleton) -- [`OrderedList`](#orderedlist) -- [`OutboundLink`](#outboundlink) -- [`OverflowMenu`](#overflowmenu) -- [`OverflowMenuItem`](#overflowmenuitem) -- [`Pagination`](#pagination) -- [`PaginationNav`](#paginationnav) -- [`PaginationSkeleton`](#paginationskeleton) -- [`PasswordInput`](#passwordinput) -- [`Popover`](#popover) -- [`ProgressBar`](#progressbar) -- [`ProgressIndicator`](#progressindicator) -- [`ProgressIndicatorSkeleton`](#progressindicatorskeleton) -- [`ProgressStep`](#progressstep) -- [`RadioButton`](#radiobutton) -- [`RadioButtonGroup`](#radiobuttongroup) -- [`RadioButtonSkeleton`](#radiobuttonskeleton) -- [`RadioTile`](#radiotile) -- [`RecursiveList`](#recursivelist) -- [`Row`](#row) -- [`Search`](#search) -- [`SearchSkeleton`](#searchskeleton) -- [`Select`](#select) -- [`SelectItem`](#selectitem) -- [`SelectItemGroup`](#selectitemgroup) -- [`SelectSkeleton`](#selectskeleton) -- [`SelectableTile`](#selectabletile) -- [`SideNav`](#sidenav) -- [`SideNavDivider`](#sidenavdivider) -- [`SideNavItems`](#sidenavitems) -- [`SideNavLink`](#sidenavlink) -- [`SideNavMenu`](#sidenavmenu) -- [`SideNavMenuItem`](#sidenavmenuitem) -- [`SkeletonPlaceholder`](#skeletonplaceholder) -- [`SkeletonText`](#skeletontext) -- [`SkipToContent`](#skiptocontent) -- [`Slider`](#slider) -- [`SliderSkeleton`](#sliderskeleton) -- [`StructuredList`](#structuredlist) -- [`StructuredListBody`](#structuredlistbody) -- [`StructuredListCell`](#structuredlistcell) -- [`StructuredListHead`](#structuredlisthead) -- [`StructuredListInput`](#structuredlistinput) -- [`StructuredListRow`](#structuredlistrow) -- [`StructuredListSkeleton`](#structuredlistskeleton) -- [`Switch`](#switch) -- [`Tab`](#tab) -- [`TabContent`](#tabcontent) -- [`Table`](#table) -- [`TableBody`](#tablebody) -- [`TableCell`](#tablecell) -- [`TableContainer`](#tablecontainer) -- [`TableHead`](#tablehead) -- [`TableHeader`](#tableheader) -- [`TableRow`](#tablerow) -- [`Tabs`](#tabs) -- [`TabsSkeleton`](#tabsskeleton) -- [`Tag`](#tag) -- [`TagSkeleton`](#tagskeleton) -- [`TextArea`](#textarea) -- [`TextAreaSkeleton`](#textareaskeleton) -- [`TextInput`](#textinput) -- [`TextInputSkeleton`](#textinputskeleton) -- [`Theme`](#theme) -- [`Tile`](#tile) -- [`TileGroup`](#tilegroup) -- [`TimePicker`](#timepicker) -- [`TimePickerSelect`](#timepickerselect) -- [`ToastNotification`](#toastnotification) -- [`Toggle`](#toggle) -- [`ToggleSkeleton`](#toggleskeleton) -- [`ToggleSmall`](#togglesmall) -- [`ToggleSmallSkeleton`](#togglesmallskeleton) -- [`Toolbar`](#toolbar) -- [`ToolbarBatchActions`](#toolbarbatchactions) -- [`ToolbarContent`](#toolbarcontent) -- [`ToolbarMenu`](#toolbarmenu) -- [`ToolbarMenuItem`](#toolbarmenuitem) -- [`ToolbarSearch`](#toolbarsearch) -- [`Tooltip`](#tooltip) -- [`TooltipDefinition`](#tooltipdefinition) -- [`TooltipFooter`](#tooltipfooter) -- [`TooltipIcon`](#tooltipicon) -- [`TreeView`](#treeview) -- [`Truncate`](#truncate) -- [`UnorderedList`](#unorderedlist) - ---- - -## `Accordion` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | -| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | let | No | "sm" | "xl" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `AccordionItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | -| disabled | let | Yes | boolean | false | Set to `true` to disable the accordion item | -| open | let | Yes | boolean | false | Set to `true` to open the first accordion item | -| title | let | No | string | "title" | Specify the title of the accordion item heading
Alternatively, use the "title" slot (e.g., <div slot="title">...</div>) | -| iconDescription | let | No | string | "Expand/Collapse" | Specify the ARIA label for the accordion item chevron icon | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------- | -| -- | Yes | -- | -- | -| title | No | -- | {title} | - -### Events - -| Event name | Type | Detail | -| :----------- | :-------- | :----- | -| animationend | forwarded | -- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `AccordionSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ------------------------------------------------ | -| count | let | No | number | 4 | Specify the number of accordion items to render | -| align | let | No | "start" | "end" | "end" | Specify alignment of accordion item chevron icon | -| size | let | No | "sm" | "xl" | -- | Specify the size of the accordion | -| open | let | No | boolean | true | Set to `false` to close the first accordion item | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `AspectRatio` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `Breadcrumb` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | -| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | -| skeleton | let | No | boolean | false | Set to `true` to display skeleton state | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `BreadcrumbItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------- | -| href | let | No | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------------------------ | :------- | -| -- | Yes | {props?: { ["aria-current"]?: string; class: "bx--link"; }} | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `BreadcrumbSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------------- | -| noTrailingSlash | let | No | boolean | false | Set to `true` to hide the breadcrumb trailing slash | -| count | let | No | number | 3 | Specify the number of breadcrumb items to render | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Breakpoint` - -### Types - -```ts -export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max"; - -export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :----------------- | :------- | :--------------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------------------- | -| sizes | let | Yes | Record | { sm: false, md: false, lg: false, xlg: false, max: false, } | Carbon grid sizes as an object | -| size | let | Yes | BreakpointSize | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------------------------------ | :------- | -| -- | Yes | { size: BreakpointSize; sizes: Record; } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----------------------------------------------------------------------- | -| match | dispatched | { size: BreakpointSize; breakpointValue: BreakpointValue; } | - -## `Button` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| hasIconOnly | let | Yes | boolean | false | Set to `true` for the icon-only variant | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost" | "primary" | Specify the kind of button | -| size | let | No | "default" | "field" | "small" | "lg" | "xl" | "default" | Specify the size of button | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | -| isSelected | let | No | boolean | false | Set to `true` to enable the selected state for an icon-only, ghost button | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| iconDescription | let | No | string | -- | 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 | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------------------------------------------------------------------------------------------- | :------- | -| -- | Yes | { props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ButtonSet` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| stacked | let | No | boolean | false | Set to `true` to stack the buttons vertically | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ButtonSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------------------------------- | ---------------------- | ------------------------------------ | -| href | let | No | string | -- | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Checkbox` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Specify whether the checkbox is checked | -| indeterminate | let | No | boolean | false | Specify whether the checkbox is indeterminate | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| 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 | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------- | -| check | dispatched | boolean | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| blur | forwarded | -- | - -## `CheckboxSkeleton` - -### Props - -None. - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ClickableTile` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| clicked | let | Yes | boolean | false | Set to `true` to click the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| href | let | No | string | -- | Set the `href` | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `CodeSnippet` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLPreElement | null | Obtain a reference to the pre HTML element | -| showMoreLess | let | Yes | boolean | false | Set to `true` to enable the show more/less button | -| expanded | let | Yes | boolean | false | Set to `true` to expand a multi-line code snippet (type="multi") | -| type | let | No | "single" | "inline" | "multi" | "single" | Set the type of code snippet | -| code | let | No | string | -- | 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 | -- | Specify the ARIA label for the copy button icon | -| copyLabel | let | No | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------ | -| -- | Yes | -- | {code} | - -### Events - -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | - -## `CodeSnippetSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------- | --------------------- | ---------------------------- | -| type | let | No | "single" | "multi" | "single" | Set the type of code snippet | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Column` - -### Types - -```ts -export type ColumnSize = boolean | number; - -export interface ColumnSizeDescriptor { - span?: ColumnSize; - offset: number; -} - -export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Column let:props><article {...props}>...</article></Column>) | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to the column | -| aspectRatio | let | No | "2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1" | -- | Specify the aspect ratio of the column | -| sm | let | No | ColumnBreakpoint | -- | Set the small breakpoint | -| md | let | No | ColumnBreakpoint | -- | Set the medium breakpoint | -| lg | let | No | ColumnBreakpoint | -- | Set the large breakpoint | -| xlg | let | No | ColumnBreakpoint | -- | Set the extra large breakpoint | -| max | let | No | ColumnBreakpoint | -- | Set the maximum breakpoint | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------------ | :------- | -| -- | Yes | {props: { class: string; [key: string]: any; }} | -- | - -### Events - -None. - -## `ComboBox` - -### Types - -```ts -export interface ComboBoxItem { - id: string; - text: string; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown | -| value | let | Yes | string | "" | Specify the selected combobox value | -| selectedIndex | let | Yes | number | -1 | Set the selected item by value index | -| 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" | -- | 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 | -- | 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 | -- | Specify a name attribute for the input | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------------------------------------------------------------------------- | -| select | dispatched | { selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem } | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| clear | forwarded | -- | -| scroll | forwarded | -- | - -## `ComposedModal` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :--------------- | :------- | :---------------------------------------- | ----------------------------------------- | --------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :-------------------- | :--------- | :------------------------------ | -| transitionend | dispatched | { open: boolean; } | -| keydown | forwarded | -- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | - -## `Content` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | --------------------------- | ----------------------------------- | -| id | let | No | string | "main-content" | Specify the id for the main element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ContentSwitcher` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------- | ------------------ | ----------------------------------------- | -| selectedIndex | let | Yes | number | 0 | Set the selected index of the switch item | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| size | let | No | "sm" | "xl" | -- | Specify the size of the content switcher | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | number | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ContextMenu` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLUListElement | null | Obtain a reference to the unordered list HTML element | -| y | let | Yes | number | 0 | Specify the vertical offset of the menu position | -| x | let | Yes | number | 0 | Specify the horizontal offset of the menu position | -| open | let | Yes | boolean | false | Set to `true` to open the menu
Either `x` and `y` must be greater than zero | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | -| open | dispatched | -- | -| close | dispatched | -- | - -## `ContextMenuDivider` - -### Props - -None. - -### Slots - -None. - -### Events - -None. - -## `ContextMenuGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :-------------------- | --------------- | ---------------------- | -| selectedIds | let | Yes | string[] | [] | -- | -| labelText | let | No | string | "" | Specify the label text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ContextMenuOption` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLLIElement | null | Obtain a reference to the list item HTML element | -| selectable | let | Yes | boolean | false | Set to `true` to enable the selectable variant
Automatically set to `true` if `selected` is `true` | -| selected | let | Yes | boolean | false | Set to `true` to use the selected variant | -| icon | let | Yes | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 | -- | -- | -| labelText | No | -- | {labelText} | -| shortcutText | No | -- | {shortcutText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| keydown | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| click | dispatched | -- | - -## `ContextMenuRadioGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------ | --------------- | ------------------------------- | -| selectedId | let | Yes | string | "" | Set the selected radio group id | -| labelText | let | No | string | "" | Specify the label text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `Copy` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------- | ---------------------- | ------------------------------------------------------ | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| feedback | let | No | string | "Copied!" | Set the feedback text shown after clicking the button | -| feedbackTimeout | let | No | number | 2000 | Set the timeout duration (ms) to display feedback text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :--------------------------------------------------------------------------------- | -| -- | Yes | -- | {#if animation}{feedback || $$restProps["aria-label"]}{/if} | - -### Events - -| Event name | Type | Detail | -| :----------- | :-------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | - -## `CopyButton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -| iconDescription | let | No | string | "Copy to clipboard" | Set the title and ARIA label for the copy button | -| text | let | No | string | -- | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :----------- | :--------- | :----- | -| click | forwarded | -- | -| animationend | forwarded | -- | -| copy | dispatched | -- | - -## `DataTable` - -### Types - -```ts -export type DataTableKey = string; - -export type DataTableValue = any; - -export interface DataTableEmptyHeader { - key: DataTableKey; - empty: boolean; - display?: (item: Value) => DataTableValue; - sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); - columnMenu?: boolean; -} - -export interface DataTableNonEmptyHeader { - key: DataTableKey; - value: DataTableValue; - display?: (item: Value) => DataTableValue; - sort?: false | ((a: DataTableValue, b: DataTableValue) => 0 | -1 | 1); - columnMenu?: boolean; -} - -export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader; - -export interface DataTableRow { - id: any; - [key: string]: DataTableValue; -} - -export type DataTableRowId = any; - -export interface DataTableCell { - key: DataTableKey; - value: DataTableValue; - display?: (item: Value) => DataTableValue; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------- | -| selectedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be selected | -| selectable | let | Yes | boolean | false | Set to `true` for the selectable variant
Automatically set to `true` if `radio` or `batchSelection` are `true` | -| expandedRowIds | let | Yes | DataTableRowId[] | [] | Specify the row ids to be expanded | -| expandable | let | Yes | boolean | false | Set to `true` for the expandable variant
Automatically set to `true` if `batchExpansion` is `true` | -| rows | let | Yes | DataTableRow[] | [] | Specify the rows the data table should render
keys defined in `headers` are used for the row ids | -| headers | let | No | DataTableHeader[] | [] | Specify the data table headers | -| size | let | No | "compact" | "short" | "medium" | "tall" | -- | 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 | -| 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 | - -### Slots - -| Slot name | Default | Props | Fallback | -| :----------- | :------ | :-------------------------------------------------------- | :------------------------------------------------------------------ | -| -- | Yes | -- | -- | -| cell | No | { row: DataTableRow; cell: DataTableCell; } | {cell.display ? cell.display(cell.value) : cell.value} | -| cell-header | No | { header: DataTableNonEmptyHeader; } | {header.value} | -| description | No | -- | {description} | -| expanded-row | No | { row: DataTableRow; } | -- | -| title | No | -- | {title} | - -### Events - -| Event name | Type | Detail | -| :------------------- | :--------- | :------------------------------------------------------------------------------------------------------ | -| click | dispatched | { header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; } | -| click:header--expand | dispatched | { expanded: boolean; } | -| click:header | dispatched | { header: DataTableHeader; sortDirection?: "ascending" | "descending" | "none" } | -| click:row | dispatched | DataTableRow | -| mouseenter:row | dispatched | DataTableRow | -| mouseleave:row | dispatched | DataTableRow | -| click:row--expand | dispatched | { expanded: boolean; row: DataTableRow; } | -| click:cell | dispatched | DataTableCell | - -## `DataTableSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------------ | ------------------ | -------------------------------------------------------------------------------------------- | -| columns | let | No | number | 5 | Specify the number of columns
Superseded by `headers` if `headers` is a non-empty array | -| rows | let | No | number | 5 | Specify the number of rows | -| size | let | No | "compact" | "short" | "tall" | -- | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `DatePicker` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :--------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- | -| valueTo | let | Yes | string | "" | Specify the date picker end date value (to)
Only works with the "range" date picker type | -| valueFrom | let | Yes | string | "" | Specify the date picker start date value (from)
Only works with the "range" date picker type | -| value | let | Yes | number | string | "" | Specify the date picker input value | -| datePickerType | let | No | "simple" | "single" | "range" | "simple" | Specify the date picker type | -| dateFormat | let | No | string | "m/d/Y" | Specify the date format | -| maxDate | let | No | null | string | Date | null | Specify the maximum date | -| minDate | let | No | null | string | Date | null | Specify the minimum date | -| locale | let | No | string | "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 | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- | -| change | dispatched | string | { selectedDates: [dateFrom: Date, dateTo?: Date]; dateStr: string | { from: string; to: string; } } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `DatePickerInput` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| size | let | No | "sm" | "xl" | -- | 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 | -- | Set a name for the input element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| blur | forwarded | -- | - -## `DatePickerSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ----------------------------------------- | -| range | let | No | boolean | false | Set to `true` to use the range variant | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Dropdown` - -### Types - -```ts -export type DropdownItemId = string; - -export type DropdownItemText = string; - -export interface DropdownItem { - id: DropdownItemId; - text: DropdownItemText; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------ | ----------------------------------------------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| inline | let | Yes | boolean | false | Set to `true` to use the inline variant | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| selectedIndex | let | Yes | number | -1 | Specify the selected item index | -| 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" | -- | 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 | -- | 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 | -- | 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 | -- | Specify a name attribute for the list box | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :--------------------------------------------------------------------------------------------- | -| select | dispatched | { selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem } | - -## `DropdownSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ExpandableTile` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the top-level element | -| tilePadding | let | Yes | number | 0 | Specify the padding of the tile (number of pixels) | -| tileMaxHeight | let | Yes | number | 0 | Specify the max height of the tile (number of pixels) | -| expanded | let | Yes | boolean | false | Set to `true` to expand the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| tileCollapsedIconText | let | No | string | "Interact to expand Tile" | Specify the icon text of the collapsed tile | -| tileExpandedIconText | let | No | string | "Interact to collapse Tile" | Specify the icon text of the expanded tile | -| tileExpandedLabel | let | No | string | "" | Specify the icon label of the expanded tile | -| tileCollapsedLabel | let | No | string | "" | Specify the icon label of the collapsed tile | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level div element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| above | No | -- | -- | -| below | No | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keypress | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `FileUploader` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :----------------- | :------- | :----------------------------------------------------------------------------------------- | --------------------------------------- | --------------------------------------------------------------------- | -| files | let | Yes | File[] | [] | Obtain the uploaded file names | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| clearFiles | const | No | () => void | () => { files = []; } | Override the default behavior of clearing the array of uploaded files | -| labelDescription | let | No | string | "" | Specify the label description | -| labelTitle | let | No | string | "" | Specify the label title | -| kind | let | No | "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "primary" | Specify the kind of file uploader button | -| buttonLabel | let | No | string | "" | Specify the button label | -| iconDescription | let | No | string | "Provide icon description" | Specify the ARIA label used for the status icons | -| name | let | No | string | "" | Specify a name attribute for the file button uploader input | - -### Slots - -None. - -### Events - -| 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 | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | - -## `FileUploaderDropContainer` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| accept | let | No | string[] | [] | Specify the accepted file types | -| multiple | let | No | boolean | false | Set to `true` to allow multiple files | -| validateFiles | let | No | (files: FileList) => FileList | (files) => files | Override the default behavior of validating uploaded files
The default behavior does not validate files | -| labelText | let | No | string | "Add file" | Specify the label text | -| role | let | No | string | "button" | Specify the `role` attribute of the drop container | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| tabindex | let | No | string | "0" | Specify `tabindex` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------- | -| add | dispatched | FileList | -| dragover | forwarded | -- | -| dragleave | forwarded | -- | -| drop | forwarded | -- | -| keydown | forwarded | -- | -| change | forwarded | -- | -| click | forwarded | -- | - -## `FileUploaderItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file uploader status | -| size | let | No | "default" | "field" | "small" | "default" | Specify the size of button skeleton | -| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| errorSubject | let | No | string | "" | Specify the error subject text | -| errorBody | let | No | string | "" | Specify the error body text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | -| name | let | No | string | "" | Specify the file uploader name | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| delete | dispatched | string | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `FileUploaderSkeleton` - -### Props - -None. - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Filename` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------- | ------------------------ | ------------------------------------------------ | -| status | let | No | "uploading" | "edit" | "complete" | "uploading" | Specify the file name status | -| iconDescription | let | No | string | "" | Specify the ARIA label used for the status icons | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | - -## `FluidForm` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| submit | forwarded | -- | - -## `Form` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| submit | forwarded | -- | - -## `FormGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| noMargin | let | No | boolean | false | Set to `true` for to remove the bottom margin | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| message | let | No | boolean | false | Set to `true` to render a form requirement | -| messageText | let | No | string | "" | Specify the message text | -| legendText | let | No | string | "" | Specify the legend text | -| legendId | let | No | string | "" | Specify an id for the legend element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `FormItem` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `FormLabel` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------------- | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id to be used by the label element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Grid` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Grid let:props><header {...props}>...</header></Grid>) | -| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| fullWidth | let | No | boolean | false | Set to `true` to use the fullWidth variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------------------- | :------- | -| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | - -### Events - -None. - -## `Header` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSideNavOpen | let | Yes | boolean | false | Set to `true` to open the side nav | -| expandedByDefault | let | No | boolean | true | Set to `false` to hide the side nav by default | -| uiShellAriaLabel | let | No | string | -- | Specify the ARIA label for the header | -| href | let | No | string | -- | Specify the `href` attribute | -| company | let | No | string | -- | 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("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the closed state
Defaults to `Menu20` | -| iconClose | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render for the opened state
Defaults to `Close20` | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| platform | No | -- | {platformName} | -| skip-to-content | No | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `HeaderAction` - -### Types - -```ts -export interface HeaderActionSlideTransition { - delay?: number; - duration?: number; - easing?: (t: number) => number; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| isOpen | let | Yes | boolean | false | Set to `true` to open the panel | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| text | let | No | string | -- | 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 | -- | -- | -| text | No | -- | {#if text}<span>{text}</span>{/if} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| close | dispatched | -- | - -## `HeaderActionLink` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| linkIsActive | let | No | boolean | false | Set to `true` to use the active state | -| href | let | No | string | -- | Specify the `href` attribute | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | - -### Slots - -None. - -### Events - -None. - -## `HeaderActionSearch` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | -| searchIsActive | let | Yes | boolean | false | Set to `true` to focus the search | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :------------------ | :--------- | :---------------------------------------------------- | -| inputSearch | dispatched | { action: "search"; textInput: string; } | -| focusInputSearch | dispatched | -- | -| focusOutInputSearch | dispatched | -- | - -## `HeaderGlobalAction` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| isActive | let | No | boolean | false | Set to `true` to use the active variant | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon to render | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :---------------------------------------------------- | -| -- | Yes | -- | <svelte:component this="{icon}" /> | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `HeaderNav` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------- | ---------------------------------- | -| ariaLabel | let | No | string | -- | Specify the ARIA label for the nav | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `HeaderNavItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| href | let | No | string | -- | Specify the `href` attribute | -| text | let | No | string | -- | Specify the text | -| isSelected | let | No | boolean | false | Set to `true` to select the item | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keyup | forwarded | -- | -| keydown | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `HeaderNavMenu` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| href | let | No | string | "/" | Specify the `href` attribute | -| text | let | No | string | -- | Specify the text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| keydown | forwarded | -- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `HeaderPanelDivider` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `HeaderPanelLink` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ----------------- | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| href | let | No | string | -- | Specify the `href` attribute | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `HeaderPanelLinks` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `HeaderSearch` - -### Types - -```ts -export interface HeaderSearchResult { - href: string; - text: string; - description?: string; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :---------------------------------------- | ------------------ | -------------------------------------------------- | -| selectedResultIndex | let | Yes | number | 0 | Specify the selected result index | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| active | let | Yes | boolean | false | Set to `true` to activate and focus the search bar | -| value | let | Yes | string | "" | Specify the search input value | -| results | let | No | HeaderSearchResult[] | [] | Render a list of search results | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------ | -| -- | Yes | { result: HeaderSearchResult; index: number } | {result.text}
{#if result.description}<span>– {result.description}</span>{/if} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :---------------------------------------------------------------------------------------------- | -| 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 | -- | - -## `HeaderUtilities` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `Icon` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | -| render | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `IconSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | --------------- | ------------------------ | -| size | let | No | number | 16 | Set the size of the icon | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ImageLoader` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | let | No | string | "" | Specify the image source | -| alt | let | No | string | "" | Specify the image alt text | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| error | No | -- | -- | -| loading | No | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :--------------- | -| load | dispatched | any | -| error | dispatched | any | - -## `InlineLoading` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------- | -| status | let | No | "active" | "inactive" | "finished" | "error" | "active" | Set the loading status | -| description | let | No | string | -- | Set the loading description | -| iconDescription | let | No | string | -- | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| success | dispatched | -- | - -## `InlineNotification` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | let | No | string | "alert" | Set the `role` attribute | -| title | let | No | string | "" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | -| actions | No | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------- | -| close | dispatched | { timeout: boolean } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Link` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------------------------------------------- | ------------------ | ----------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLParagraphElement | null | Obtain a reference to the top-level HTML element | -| size | let | No | "sm" | "lg" | -- | Specify the size of the link | -| href | let | No | string | -- | Specify the href value | -| inline | let | No | boolean | false | Set to `true` to use the inline variant | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ListBox` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------- | ---------------------- | ------------------------------------------ | -| size | let | No | "sm" | "xl" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| keydown | forwarded | -- | -| click | forwarded | -- | - -## `ListBoxField` - -### Types - -```ts -export type ListBoxFieldTranslationId = "close" | "open"; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :----------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| disabled | let | No | boolean | false | Set to `true` to disable the list box field | -| role | let | No | string | "combobox" | Specify the role attribute | -| tabindex | let | No | string | "-1" | Specify the tabindex | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | -| translateWithId | let | No | (id: ListBoxFieldTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `ListBoxMenu` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | -------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| scroll | forwarded | -- | - -## `ListBoxMenuIcon` - -### Types - -```ts -export type ListBoxMenuIconTranslationId = "close" | "open"; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------- | --------------------------------------------- | -------------------------------------------- | -| open | let | No | boolean | false | Set to `true` to open the list box menu icon | -| translationIds | const | No | { close: "close", open: "open" } | { close: "close", open: "open" } | Default translation ids | -| translateWithId | let | No | (id: ListBoxMenuIconTranslationId) => string | (id) => defaultTranslations[id] | Override the default translation ids | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `ListBoxMenuItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| active | let | No | boolean | false | Set to `true` to enable the active state | -| highlighted | let | No | boolean | false | Set to `true` to enable the highlighted state | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ListBoxSelection` - -### Types - -```ts -export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection"; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :----------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| selectionCount | let | No | number | -- | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| clear | dispatched | -- | - -## `ListItem` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Loading` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| small | let | No | boolean | false | Set to `true` to use the small variant | -| active | let | No | boolean | true | Set to `false` to disable the active state | -| withOverlay | let | No | boolean | true | Set to `false` to disable the overlay | -| description | let | No | string | "Active loading indicator" | Specify the label description | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the label element | - -### Slots - -None. - -### Events - -None. - -## `LocalStorage` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :-------------------- | :------- | :---------------------- | ---------------------------------------------------- | --------------------------------------------------------------- | -| value | let | Yes | any | "" | Provide a value to persist | -| key | let | No | string | "local-storage-key" | Specify the local storage key | -| clearItem | function | No | () => void | () => { localStorage.removeItem(key); } | Remove the persisted key value from the browser's local storage | -| clearAll | function | No | () => void | () => { localStorage.clear(); } | Clear all key values from the browser's local storage | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------------------------------- | -| save | dispatched | any | -| update | dispatched | { prevValue: any; value: any; } | - -## `Modal` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the top-level HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the modal | -| size | let | No | "xs" | "sm" | "lg" | -- | 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 | -- | Specify the modal heading | -| modalLabel | let | No | string | -- | Specify the modal label | -| modalAriaLabel | let | No | string | -- | 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 primary button to be triggered 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------- | -| -- | Yes | -- | -- | -| heading | No | -- | {modalHeading} | -| label | No | -- | {modalLabel} | - -### Events - -| Event name | Type | Detail | -| :---------------------- | :--------- | :------------------------------ | -| transitionend | dispatched | { open: boolean; } | -| click:button--secondary | dispatched | { text: string; } | -| keydown | forwarded | -- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| submit | dispatched | -- | -| click:button--primary | dispatched | -- | -| close | dispatched | -- | -| open | dispatched | -- | - -## `ModalBody` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------- | -| hasForm | let | No | boolean | false | Set to `true` if the modal contains form elements | -| hasScrollingContent | let | No | boolean | false | Set to `true` if the modal contains scrolling content | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ModalFooter` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :-------------------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------------- | -| primaryButtonText | let | No | string | "" | Specify the primary button text | -| primaryButtonDisabled | let | No | boolean | false | Set to `true` to disable the primary button | -| primaryClass | let | No | string | -- | 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 | -- | Specify a class for the secondary button | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :---------------------- | :--------- | :----------------------------- | -| click:button--secondary | dispatched | { text: string; } | - -## `ModalHeader` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------ | -------------------- | ----------------------------------------- | -| title | let | No | string | "" | Specify the modal title | -| label | let | No | string | "" | Specify the modal label | -| labelClass | let | No | string | "" | Specify the label class | -| titleClass | let | No | string | "" | Specify the title class | -| closeClass | let | No | string | "" | Specify the close class | -| closeIconClass | let | No | string | "" | Specify the close icon class | -| iconDescription | let | No | string | "Close" | Specify the ARIA label for the close icon | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `MultiSelect` - -### Types - -```ts -export type MultiSelectItemId = string; - -export type MultiSelectItemText = string; - -export interface MultiSelectItem { - id: MultiSelectItemId; - text: MultiSelectItemText; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :--------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -| selectionRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the selection element | -| fieldRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the field box element | -| multiSelectRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the outer div element | -| inputRef | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the dropdown | -| value | let | Yes | string | "" | Specify the multiselect value | -| selectedIds | let | Yes | MultiSelectItemId[] | [] | Set the selected ids | -| items | let | Yes | MultiSelectItem[] | [] | Set the multiselect items | -| itemToString | let | No | (item: MultiSelectItem) => string | (item) => item.text || item.id | Override the display of a multiselect item | -| size | let | No | "sm" | "lg" | "xl" | -- | 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.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 | -- | 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 | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component | -| name | let | No | string | -- | Specify a name attribute for the select | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------------------------------------------------------------- | -| select | dispatched | { selectedIds: string[]; selected: MultiSelectItem[]; unselected: MultiSelectItem[]; } | -| clear | dispatched | any | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `NotificationActionButton` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `NotificationButton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------- | ----------------------------------------------------- | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| title | let | No | string | -- | Specify the title of the icon | -| iconDescription | let | No | string | "Close icon" | Specify the ARIA label for the icon | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `NotificationIcon` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification icon | -| notificationType | let | No | "toast" | "inline" | "toast" | Set the type of notification | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | - -### Slots - -None. - -### Events - -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 - -```ts -export type NumberInputTranslationId = "increment" | "decrement"; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | Set the size of the input | -| step | let | No | number | 1 | Specify the step increment | -| max | let | No | number | -- | Specify the maximum value | -| min | let | No | number | -- | 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 | -- | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------- | -| label | No | -- | {label} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | number | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| input | forwarded | -- | - -## `NumberInputSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `OrderedList` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | -| native | let | No | boolean | false | Set to `true` to use native list styles | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `OutboundLink` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `OverflowMenu` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | -| menuRef | let | Yes | null | HTMLUListElement | null | Obtain a reference to the overflow menu element | -| buttonRef | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the trigger button element | -| icon | let | Yes | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| open | let | Yes | boolean | false | Set to `true` to open the menu | -| size | let | No | "sm" | "xl" | -- | 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 | -- | Specify the menu options class | -| iconClass | let | No | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| menu | No | -- | <svelte:component
this="{icon}"
aria-label="{iconDescription}"
title="{iconDescription}"
class="bx--overflow-menu\_\_icon {iconClass}"
/> | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------------------- | -| close | dispatched | { index: number; text: string; } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `OverflowMenuItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | HTMLButtonElement | null | Obtain a reference to the HTML element | -| primaryFocus | let | Yes | boolean | false | Set to `true` if the item should be focused when opening the menu | -| text | let | No | string | "Provide text" | Specify the item text
Alternatively, use the default slot for a custom element | -| href | let | No | string | "" | Specify the `href` attribute if the item is a link | -| disabled | let | No | boolean | false | Set to `true` to disable the item | -| hasDivider | let | No | boolean | false | Set to `true` to include a divider | -| danger | let | No | boolean | false | Set to `true` to use the danger variant | -| requireTitle | let | No | boolean | true | Set to `false` to omit the button `title` attribute | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------------------------------------------------------------------------------------------------ | -| -- | Yes | -- | <div class:bx--overflow-menu-options\_\_option-content="{true}">
{text}
</div> | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | - -## `Pagination` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------------- | :--------------- | :------- | :--------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------ | -| pageSize | let | Yes | number | 10 | Specify the number of items to display in a page | -| page | let | Yes | number | 1 | Specify the current page index | -| totalItems | let | No | number | 0 | Specify the total number of items | -| disabled | let | No | boolean | false | Set to `true` to disable the pagination | -| forwardText | let | No | string | "Next page" | Specify the forward button text | -| backwardText | let | No | string | "Previous page" | Specify the backward button text | -| itemsPerPageText | let | No | string | "Items per page:" | Specify the items per page text | -| itemText | let | No | (min: number, max: number) => string | (min, max) => \`${min}–${max} items\` | Override the item text | -| itemRangeText | let | No | (min: number, max: number, total: number) => string | (min, max, total) => \`${min}–${max} of ${total} items\` | Override the item range text | -| pageInputDisabled | let | No | boolean | false | Set to `true` to disable the page input | -| pageSizeInputDisabled | let | No | boolean | false | Set to `true` to disable the page size input | -| pageSizes | let | No | number[] | [10] | Specify the available page sizes | -| pagesUnknown | let | No | boolean | false | Set to `true` if the number of pages is unknown | -| pageText | let | No | (page: number) => string | (page) => \`page ${page}\` | Override the page text | -| pageRangeText | let | No | (current: number, total: number) => string | (current, total) => \`of ${total} page${total === 1 ? "" : "s"}\` | Override the page range text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -None. - -### Events - -| 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 | 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 - -None. - -### Events - -| Event name | Type | Detail | -| :--------------------- | :--------- | :----------------------------- | -| change | dispatched | { page: number; } | -| click:button--previous | dispatched | { page: number; } | -| click:button--next | dispatched | { page: number; } | - -## `PaginationSkeleton` - -### Props - -None. - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `PasswordInput` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| type | let | Yes | "text" | "password" | "password" | Set to `"text"` to toggle the password visibility | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | 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 | -- | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `Popover` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------------------------------------------------ | -| open | let | Yes | boolean | false | Set to `true` to display the popover | -| closeOnOutsideClick | let | No | boolean | false | Set to `true` to close the popover on an outside click | -| caret | let | No | boolean | false | Set to `true` render a caret | -| align | let | No | "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top" | "top" | Specify the alignment of the caret | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| highContrast | let | No | boolean | false | Set to `true` to enable the high contrast variant | -| relative | let | No | boolean | false | Set to `true` to use a relative position | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :------------ | :--------- | :----- | -| click:outside | dispatched | -- | - -## `ProgressBar` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | --------------------------------------------- | -| value | let | No | number | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -None. - -## `ProgressIndicator` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------- | -| currentIndex | let | Yes | number | 0 | Specify the current step index | -| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | -| spaceEqually | let | No | boolean | false | Set to `true` to specify whether the progress steps should be split equally in size in the div | -| preventChangeOnClick | let | No | boolean | false | Set to `true` to prevent `currentIndex` from updating | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | number | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ProgressIndicatorSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| vertical | let | No | boolean | false | Set to `true` to use the vertical variant | -| count | let | No | number | 4 | Specify the number of steps to render | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ProgressStep` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | ------------------------------------------ | -| current | let | Yes | boolean | false | Set to `true` to use the current variant | -| complete | let | Yes | boolean | false | Set to `true` for the complete variant | -| disabled | let | No | boolean | false | Set to `true` to disable the progress step | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| description | let | No | string | "" | Specify the step description | -| label | let | No | string | "" | Specify the step label | -| secondaryLabel | let | No | string | "" | Specify the step secondary label | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------------------------- | :------------------------------------------------------------------------ | -| -- | Yes | { props: { class: 'bx--progress-label' } } | <p class:bx--progress-label="{true}">{label}</p> | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `RadioButton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the radio button | -| value | let | No | string | "" | Specify the value of the radio button | -| disabled | let | No | boolean | false | et to `true` to disable the radio button | -| 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 checkbox input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| change | forwarded | -- | - -## `RadioButtonGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------------------------------ | ------------------------- | -------------------------------------------- | -| selected | let | Yes | string | -- | Set the selected radio button value | -| disabled | let | No | boolean | false | Set to `true` to disable the radio buttons | -| 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 | -- | Set an id for the container div element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :--------- | :------ | :---- | :------------------------ | -| -- | Yes | -- | -- | -| legendText | No | -- | {legendText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | dispatched | -- | - -## `RadioButtonSkeleton` - -### Props - -None. - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `RadioTile` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------- | ------------------------------------------------ | -------------------------------------------------------- | -| checked | let | Yes | boolean | false | Set to `true` to check the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| value | let | No | string | "" | Specify the value of the radio input | -| tabindex | let | No | string | "0" | Specify the tabindex | -| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the radio tile checkmark icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| change | forwarded | -- | -| keydown | forwarded | -- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `RecursiveList` - -### Types - -```ts -export interface RecursiveListNode { - text?: string; - href?: string; - html?: string; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------- | ------------------------ | ---------------------------------- | -| children | let | No | Array | [] | Specify the children to render | -| type | let | No | "unordered" | "ordered" | "ordered-native" | "unordered" | Specify the type of list to render | - -### Slots - -None. - -### Events - -None. - -## `Row` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------ | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| as | let | No | boolean | false | Set to `true` to render a custom HTML element
Props are destructured as `props` in the default slot (e.g., <Row let:props><section {...props}>...</section></Row>) | -| condensed | let | No | boolean | false | Set to `true` to use the condensed variant | -| narrow | let | No | boolean | false | Set to `true` to use the narrow variant | -| noGutter | let | No | boolean | false | Set to `true` to remove the gutter | -| noGutterLeft | let | No | boolean | false | Set to `true` to remove the left gutter | -| noGutterRight | let | No | boolean | false | Set to `true` to remove the right gutter | -| padding | let | No | boolean | false | Set to `true` to add top and bottom padding to all columns | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :-------------------------------------------------------------- | :------- | -| -- | Yes | { props: { class: string; [key: string]: any; } } | -- | - -### Events - -None. - -## `Search` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the value of the search input | -| expanded | let | Yes | boolean | false | Set to `true to expand the search input | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | -| searchClass | let | No | string | "" | Specify the class name passed to the outer div element | -| skeleton | let | No | boolean | false | Set to `true` to display the skeleton state | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the search input | -| expandable | let | No | boolean | false | Set to `true` to enable the expandable variant | -| type | let | No | string | "text" | Specify the `type` attribute of the search input | -| placeholder | let | No | string | "Search..." | Specify the `placeholder` attribute of the search input | -| autocomplete | let | No | "on" | "off" | "off" | Specify the `autocomplete` attribute | -| autofocus | let | No | boolean | false | Set to `true` to auto focus the search element | -| closeButtonLabelText | let | No | string | "Clear search input" | Specify the close button label text | -| labelText | let | No | string | "" | Specify the label text | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :--------------- | -| expand | dispatched | any | -| collapse | dispatched | any | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| clear | dispatched | -- | - -## `SearchSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------ | ------------------------------------ | -| small | let | No | boolean | false | -- | -| size | let | No | "sm" | "lg" | "xl" | "xl" | Specify the size of the search input | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Select` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| selected | let | Yes | string | -- | Specify the selected item value | -| size | let | No | "sm" | "xl" | -- | 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 | -- | 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 | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| -- | Yes | -- | -- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------ | -| change | dispatched | string | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `SelectItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------- | -| value | let | No | string | "" | Specify the option value | -| text | let | No | string | "" | Specify the option text | -| hidden | let | No | boolean | false | Set to `true` to hide the option | -| disabled | let | No | boolean | false | Set to `true` to disable the option | - -### Slots - -None. - -### Events - -None. - -## `SelectItemGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ---------------------------- | --------------------------------------------------- | -| disabled | let | No | boolean | false | Set to `true` to disable the optgroup element | -| label | let | No | string | "Provide label" | Specify the label attribute of the optgroup element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `SelectSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `SelectableTile` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| selected | let | Yes | boolean | false | Set to `true` to select the tile | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the tile | -| title | let | No | string | "title" | Specify the title of the selectable tile | -| value | let | No | string | "value" | Specify the value of the selectable tile | -| tabindex | let | No | string | "0" | Specify the tabindex | -| iconDescription | let | No | string | "Tile checkmark" | Specify the ARIA label for the selectable tile checkmark icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `SideNav` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| isOpen | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| fixed | let | No | boolean | false | Set to `true` to use the fixed variant | -| rail | let | No | boolean | false | Set to `true` to use the rail variant | -| ariaLabel | let | No | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :------------ | :--------- | :--------------- | -| open | dispatched | any | -| close | dispatched | any | -| click:overlay | dispatched | any | - -## `SideNavDivider` - -### Props - -None. - -### Slots - -None. - -### Events - -None. - -## `SideNavItems` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `SideNavLink` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | let | No | boolean | false | Set to `true` to select the current link | -| href | let | No | string | -- | Specify the `href` attribute | -| text | let | No | string | -- | Specify the text | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `SideNavMenu` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------------------------- | ------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the HTML button element | -| expanded | let | Yes | boolean | false | Set to `true` to toggle the expanded state | -| text | let | No | string | -- | Specify the text | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` to render | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `SideNavMenuItem` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :----------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the HTML anchor element | -| isSelected | let | No | boolean | false | Set to `true` to select the item | -| href | let | No | string | -- | Specify the `href` attribute | -| text | let | No | string | -- | Specify the item text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------ | -| -- | Yes | -- | {text} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `SkeletonPlaceholder` - -### Props - -None. - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `SkeletonText` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------- | ----------------------------------------------- | -| lines | let | No | number | 3 | Specify the number of lines to render | -| heading | let | No | boolean | false | Set to `true` to use the heading size variant | -| paragraph | let | No | boolean | false | Set to `true` to use the paragraph size variant | -| width | let | No | string | "100%" | Specify the width of the text (% or px) | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `SkipToContent` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ---------------------------- | ---------------------------- | -| href | let | No | string | "#main-content" | Specify the `href` attribute | -| tabindex | let | No | string | "0" | Specify the tabindex | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :-------------------------------- | -| -- | Yes | -- | Skip to main content | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | - -## `Slider` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------- | :--------------- | :------- | :-------------------------------------- | ------------------------------------------------ | ------------------------------------------ | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the HTML element | -| value | let | Yes | number | 0 | Specify the value of the slider | -| max | let | No | number | 100 | Set the maximum slider value | -| maxLabel | let | No | string | "" | Specify the label for the max value | -| min | let | No | number | 0 | Set the minimum slider value | -| minLabel | let | No | string | "" | Specify the label for the min value | -| step | let | No | number | 1 | Set the step value | -| stepMultiplier | let | No | number | 4 | Set the step multiplier value | -| required | let | No | boolean | false | Set to `true` to require a value | -| inputType | let | No | string | "number" | Specify the input type | -| disabled | let | No | boolean | false | Set to `true` to disable the slider | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| hideTextInput | let | No | boolean | false | Set to `true` to hide the text input | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the slider div element | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| labelText | let | No | string | "" | Specify the label text | -| name | let | No | string | "" | Set a name for the slider element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | dispatched | -- | - -## `SliderSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `StructuredList` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------- | -| selected | let | Yes | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | dispatched | -- | - -## `StructuredListBody` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `StructuredListCell` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------- | -| head | let | No | boolean | false | Set to `true` to use as a header | -| noWrap | let | No | boolean | false | Set to `true` to prevent wrapping | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `StructuredListHead` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `StructuredListInput` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | -------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| checked | let | Yes | boolean | false | Set to `true` to check the input | -| title | let | No | string | "title" | Specify the title of the input | -| value | let | No | string | "value" | Specify the value of the input | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | "" | Specify a name attribute for the input | - -### Slots - -None. - -### Events - -None. - -## `StructuredListRow` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| head | let | No | boolean | false | Set to `true` to use as a header | -| label | let | No | boolean | false | Set to `true` to render a label slot | -| tabindex | let | No | string | "0" | Specify the tabindex | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `StructuredListSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| rows | let | No | number | 5 | Specify the number of rows | -| border | let | No | boolean | false | Set to `true` to use the bordered variant | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Switch` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| selected | let | Yes | boolean | false | Set to `true` for the switch to be selected | -| text | let | No | string | "Provide text" | Specify the switch text
Alternatively, use the "text" slot (e.g., <span slot="text">...</span>) | -| disabled | let | No | boolean | false | Set to `true` to disable the switch | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the button element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------ | -| -- | Yes | -- | {text} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| keydown | forwarded | -- | - -## `Tab` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -| ref | let | Yes | null | HTMLAnchorElement | null | Obtain a reference to the anchor HTML element | -| label | let | No | string | "" | Specify the tab label
Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>) | -| href | let | No | string | "#" | Specify the href attribute | -| disabled | let | No | boolean | false | Set to `true` to disable the tab | -| tabindex | let | No | string | "0" | Specify the tabindex | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------- | -| -- | Yes | -- | {label} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TabContent` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ----------------------------------- | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `Table` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :--------------- | :------- | :------------------------------------------------------------------ | ------------------ | --------------------------------------- | -| size | let | No | "compact" | "short" | "medium" | "tall" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `TableBody` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `TableCell` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TableContainer` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :----------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| title | let | No | string | "" | Specify the title of the data table | -| description | let | No | string | "" | Specify the description of the data table | -| stickyHeader | let | No | boolean | false | Set to `true` to enable a sticky header | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `TableHead` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TableHeader` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------ | ------------------------------------------------ | ------------------------------------------------------ | -| disableSorting | let | No | boolean | false | Set to `true` to disable sorting on this specific cell | -| scope | let | No | string | "col" | Specify the `scope` attribute | -| translateWithId | let | No | () => string | () => "" | Override the default id translations | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the top-level element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| click | forwarded | -- | - -## `TableRow` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Tabs` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :---------------------------------------- | -------------------------------- | ------------------------------------------- | -| selected | let | Yes | number | 0 | Specify the selected tab index | -| type | let | No | "default" | "container" | "default" | Specify the type of tabs | -| 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | -| content | No | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| keypress | forwarded | -- | -| click | forwarded | -- | -| change | dispatched | -- | - -## `TabsSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :---------------------------------------- | ---------------------- | ------------------------------------ | -| count | let | No | number | 4 | Specify the number of tabs to render | -| type | let | No | "default" | "container" | "default" | Specify the type of tabs | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Tag` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------- | -| type | let | No | "red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast" | -- | 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("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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' } } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| close | dispatched | -- | - -## `TagSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ----------- | -| size | let | No | "sm" | "default" | "default" | -- | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TextArea` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLTextAreaElement | null | Obtain a reference to the textarea HTML element | -| value | let | Yes | string | "" | Specify the textarea value | -| placeholder | let | No | string | "" | Specify the placeholder text | -| cols | let | No | number | 50 | Specify the number of cols | -| rows | let | No | number | 4 | Specify the number of rows | -| light | let | No | boolean | false | Set to `true` to enable the light variant | -| disabled | let | No | boolean | false | Set to `true` to disable the input | -| helperText | let | No | string | "" | Specify the helper text | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | -| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state | -| invalidText | let | No | string | "" | Specify the text for the invalid state | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the textarea element | -| name | let | No | string | -- | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `TextAreaSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------------- | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TextInput` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :---------------------------------------- | ------------------------------------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | number | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | 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 | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `TextInputSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ------------------------------------ | -| hideLabel | let | No | boolean | false | Set to `true` to hide the label text | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Theme` - -### Types - -```ts -export type CarbonTheme = "white" | "g10" | "g80" | "g90" | "g100"; -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -| theme | let | Yes | CarbonTheme | "white" | Set the current Carbon theme | -| tokens | let | No | { [token: string]: any; } | {} | Customize a theme with your own tokens
https://carbondesignsystem.com/guidelines/themes/overview#customizing-a-theme | -| persist | let | No | boolean | false | Set to `true` to persist the theme using window.localStorage | -| persistKey | let | No | string | "theme" | Specify the local storage key | -| render | let | No | "toggle" | "select" | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :------------------------------------ | :------- | -| -- | Yes | { theme: CarbonTheme; } | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----------------------------------- | -| update | dispatched | { theme: CarbonTheme; } | - -## `Tile` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | ----------------------------------------- | -| light | let | No | boolean | false | Set to `true` to enable the light variant | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `TileGroup` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------- | ------------------ | --------------------------------------- | -| selected | let | Yes | string | -- | 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 - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :----- | -| select | dispatched | -- | - -## `TimePicker` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :---------------------------------------- | --------------------------------------------------- | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| value | let | Yes | string | "" | Specify the input value | -| size | let | No | "sm" | "xl" | -- | 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 | -- | Specify a name attribute for the input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| -- | Yes | -- | -- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| keydown | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `TimePickerSelect` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :----------------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| ref | let | Yes | null | HTMLSelectElement | null | Obtain a reference to the select HTML element | -| value | let | Yes | number | string | "" | Specify the select value | -| disabled | let | No | boolean | false | Set to `true` to disable the select | -| iconDescription | let | No | string | "Open list of options" | Specify the ARIA label for the chevron icon | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | true | -- | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the select element | -| name | let | No | string | -- | Specify a name attribute for the select element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| -- | Yes | -- | -- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `ToastNotification` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------------------------------- | -| kind | let | No | "error" | "info" | "info-square" | "success" | "warning" | "warning-alt" | "error" | Specify the kind of notification | -| lowContrast | let | No | boolean | false | Set to `true` to use the low contrast variant | -| timeout | let | No | number | 0 | Set the timeout duration (ms) to hide the notification after opening it | -| role | let | No | string | "alert" | Set the `role` attribute | -| title | let | No | string | "" | Specify the title text | -| subtitle | let | No | string | "" | Specify the subtitle text | -| caption | let | No | string | "" | Specify the caption text | -| iconDescription | let | No | string | "Closes notification" | Specify the ARIA label for the icon | -| hideCloseButton | let | No | boolean | false | Set to `true` to hide the close button | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :-------------------------------- | -| close | dispatched | { timeout: boolean } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Toggle` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ----------------------------------------------- | -| toggled | let | Yes | boolean | false | Set to `true` to toggle the checkbox input | -| size | let | No | "default" | "sm" | "default" | Specify the toggle size | -| disabled | let | No | boolean | false | Set to `true` to disable checkbox input | -| labelA | let | No | string | "Off" | Specify the label for the untoggled state | -| labelB | let | No | string | "On" | Specify the label for the toggled state | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | -| name | let | No | string | -- | Specify a name attribute for the checkbox input | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :--------------------------------- | -| toggle | dispatched | { toggled: boolean; } | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `ToggleSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ------------------------------------------------ | ------------------------------- | -| size | let | No | "default" | "sm" | "default" | Specify the toggle size | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| 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 | -- | Specify a name attribute for the checkbox input | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| change | forwarded | -- | -| keyup | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `ToggleSmallSkeleton` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------ | ------------------------------------------------ | ------------------------------- | -| labelText | let | No | string | "" | Specify the label text | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the input element | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | - -## `Toolbar` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :--------------------------------- | ---------------------- | ------------------------ | -| size | let | No | "sm" | "default" | "default" | Specify the toolbar size | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ToolbarBatchActions` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------ | :--------------- | :------- | :--------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------- | -| formatTotalSelected | let | No | (totalSelected: number) => string | (totalSelected) => \`${totalSelected} item${totalSelected === 1 ? "" : "s"} selected\` | Override the total items selected text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ToolbarContent` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ToolbarMenu` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `ToolbarMenuItem` - -### Props - -None. - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| keydown | forwarded | -- | - -## `ToolbarSearch` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :---------------------------------------- | ------------------ | --------------------------------------------- | -| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element | -| expanded | let | Yes | boolean | false | Set to `true` to expand the search bar | -| value | let | Yes | number | string | "" | Specify the value of the search input | -| persistent | let | No | boolean | false | Set to `true` to keep the search bar expanded | -| disabled | let | No | boolean | false | Set to `true` to disable the search bar | -| tabindex | let | No | string | "0" | Specify the tabindex | - -### Slots - -None. - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| clear | forwarded | -- | -| change | forwarded | -- | -| input | forwarded | -- | -| focus | forwarded | -- | -| blur | forwarded | -- | - -## `Tooltip` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- | -| refIcon | let | Yes | null | HTMLDivElement | null | Obtain a reference to the icon HTML element | -| refTooltip | let | Yes | null | HTMLDivElement | null | Obtain a reference to the tooltip HTML element | -| ref | let | Yes | null | HTMLDivElement | null | Obtain a reference to the trigger text HTML element | -| open | let | Yes | boolean | false | Set to `true` to open the tooltip | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "right" | "bottom" | "left" | "bottom" | Set the direction of the tooltip relative to the button | -| hideIcon | let | No | boolean | false | Set to `true` to hide the tooltip icon | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 - -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :---------------------------------------------------------------------- | -| -- | Yes | -- | -- | -| icon | No | -- | <svelte:component this="{icon}" name="{iconName}" /> | -| triggerText | No | -- | {triggerText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mousedown | forwarded | -- | - -## `TooltipDefinition` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------ | ------------------------------------------------ | ----------------------------------------------------- | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| tooltipText | let | No | string | "" | Specify the tooltip text | -| align | let | No | "start" | "center" | "end" | "center" | Set the alignment of the tooltip relative to the icon | -| direction | let | No | "top" | "bottom" | "bottom" | Set the direction of the tooltip relative to the icon | -| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the tooltip div element | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------------------------- | -| -- | Yes | -- | -- | -| tooltip | No | -- | {tooltipText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| focus | forwarded | -- | - -## `TooltipFooter` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :------------------- | :--------------- | :------- | :------------------ | ---------------------------------------------- | --------------------------------------------------------------------------- | -| selectorPrimaryFocus | let | No | string | "a[href], button:not([disabled])" | Specify a selector to be focused inside the footer when opening the tooltip | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `TooltipIcon` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ | -| ref | let | Yes | null | HTMLButtonElement | null | Obtain a reference to the button HTML element | -| tooltipText | let | No | string | "" | Specify the tooltip text.
Alternatively, use the "tooltipText" slot | -| icon | let | No | typeof import("carbon-icons-svelte").CarbonIcon | -- | Specify the icon from `carbon-icons-svelte` 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 - -| Slot name | Default | Props | Fallback | -| :---------- | :------ | :---- | :---------------------------------------------------- | -| -- | Yes | -- | <svelte:component this="{icon}" /> | -| tooltipText | No | -- | {tooltipText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | -| focus | forwarded | -- | - -## `TreeView` - -### Types - -```ts -export type TreeNodeId = string | number; - -export interface TreeNode { - id: TreeNodeId; - text: string; - icon?: typeof import("carbon-icons-svelte").CarbonIcon; - disabled?: boolean; - expanded?: boolean; -} -``` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :---------- | :--------------- | :------- | :------------------------------------------------------- | ---------------------- | --------------------------------------------------------------- | -| expandedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be expanded | -| selectedIds | let | Yes | TreeNodeId[] | [] | Set the node ids to be selected | -| activeId | let | Yes | TreeNodeId | "" | Set the current active node id
Only one node can be active | -| children | let | No | Array | [] | Provide an array of children nodes to render | -| size | let | No | "default" | "compact" | "default" | Specify the TreeView size | -| labelText | let | No | string | "" | Specify the label text | -| hideLabel | let | No | boolean | false | Set to `true` to visually hide the label text | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :----------------------- | -| labelText | No | -- | {labelText} | - -### Events - -| Event name | Type | Detail | -| :--------- | :--------- | :------------------------------------------------------------ | -| select | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } | -| toggle | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } | -| focus | dispatched | TreeNode & { expanded: boolean; leaf: boolean; } | -| keydown | forwarded | -- | - -## `Truncate` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :-------------------------------- | ------------------ | ----------- | -| clamp | let | No | "end" | "front" | "end" | -- | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -None. - -## `UnorderedList` - -### Props - -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------- | :--------------- | :------- | :------------------- | ------------------ | ---------------------------------------------------- | -| nested | let | No | boolean | false | Set to `true` to use the nested variant | -| expressive | let | No | boolean | false | Set to `true` to use Carbon's expressive typesetting | - -### Slots - -| Slot name | Default | Props | Fallback | -| :-------- | :------ | :---- | :------- | -| -- | Yes | -- | -- | - -### Events - -| Event name | Type | Detail | -| :--------- | :-------- | :----- | -| click | forwarded | -- | -| mouseover | forwarded | -- | -| mouseenter | forwarded | -- | -| mouseleave | forwarded | -- | diff --git a/app/app.html b/app/app.html new file mode 100644 index 00000000..77225f78 --- /dev/null +++ b/app/app.html @@ -0,0 +1,15 @@ + + + + + + + %svelte.head% + + +
%svelte.body%
+ + diff --git a/app/routes/__layout.svelte b/app/routes/__layout.svelte new file mode 100644 index 00000000..302eec07 --- /dev/null +++ b/app/routes/__layout.svelte @@ -0,0 +1,5 @@ + + + diff --git a/app/routes/index.svelte b/app/routes/index.svelte new file mode 100644 index 00000000..5488cca6 --- /dev/null +++ b/app/routes/index.svelte @@ -0,0 +1,5 @@ + + + diff --git a/package.json b/package.json index 7ec15b52..8484a2b4 100644 --- a/package.json +++ b/package.json @@ -4,48 +4,53 @@ "license": "Apache-2.0", "description": "Svelte implementation of the Carbon Design System", "svelte": "./src/index.js", - "main": "./lib/index.js", - "module": "./lib/index.mjs", + "module": "./lib/carbon-components-svelte.es.js", + "main": "./lib/carbon-components-svelte.umd.js", + "exports": { + ".": { + "import": "./lib/carbon-components-svelte.es.js", + "require": "./lib/carbon-components-svelte.umd.js" + } + }, "types": "./types/index.d.ts", "sideEffects": [ "css/*.css" ], "scripts": { + "dev": "svelte-kit dev --port 3003", "test": "run-p test:*", "test:types": "svelte-check --workspace tests", "test:preprocess": "node tests/preprocess", + "build:app": "svelte-kit build", "build:css": "node scripts/build-css", "build:api": "node scripts/build-api", - "build:lib": "rollup -c", + "build:lib": "vite build", "prepack": "run-p build:*", - "format": "prettier --write './**/*.{svelte,js,md}'", - "publish-examples": "node scripts/publish-examples" + "format": "prettier --write './**/*.{svelte,js,md}'" }, "dependencies": { "carbon-icons-svelte": "^10.36.0", "flatpickr": "4.6.9" }, "devDependencies": { - "@rollup/plugin-commonjs": "^17.1.0", - "@rollup/plugin-node-resolve": "^11.1.1", + "@sveltejs/adapter-static": "next", + "@sveltejs/kit": "next", + "@sveltejs/vite-plugin-svelte": "^1.0.0-next.20", "@tsconfig/svelte": "^1.0.10", "autoprefixer": "^10.2.4", "carbon-components": "10.40.0", - "gh-pages": "^3.1.0", "husky": "^4.3.8", "lint-staged": "^10.5.3", "npm-run-all": "^4.1.5", "postcss": "^8.2.4", "prettier": "^2.2.1", "prettier-plugin-svelte": "^2.1.5", - "rollup": "^2.38.4", - "rollup-plugin-svelte": "^7.1.0", - "rollup-plugin-terser": "^7.0.2", "sass": "^1.32.6", "sveld": "^0.8.2", "svelte": "^3.40.1", "svelte-check": "^1.1.32", - "typescript": "^4.1.3" + "typescript": "^4.1.3", + "vite": "^2.5.3" }, "husky": { "hooks": { @@ -85,5 +90,6 @@ "contributors": [ "Eric Liu (https://github.com/metonym)", "Josef Aidt (https://github.com/josefaidt)" - ] + ], + "type": "module" } diff --git a/rollup.config.js b/rollup.config.js deleted file mode 100644 index 419a5485..00000000 --- a/rollup.config.js +++ /dev/null @@ -1,46 +0,0 @@ -import { terser } from "rollup-plugin-terser"; -import pkg from "./package.json"; -import resolve from "@rollup/plugin-node-resolve"; -import commonjs from "@rollup/plugin-commonjs"; -import svelte from "rollup-plugin-svelte"; -import sveld from "sveld"; - -export default ["es", "umd"].map((format) => { - const UMD = format === "umd"; - - return { - input: "src", - inlineDynamicImports: true, - output: { - format, - file: UMD ? pkg.main : pkg.module, - name: UMD ? "carbon-components-svelte" : undefined, - globals: { flatpickr: "flatpickr" }, - }, - external: Object.keys(pkg.dependencies), - plugins: [ - svelte({ emitCss: false }), - resolve(), - commonjs(), - UMD && terser(), - UMD && - sveld({ - glob: true, - markdown: true, - markdownOptions: { - onAppend: (type, document, components) => { - if (type === "h1") - document.append( - "quote", - `${components.size} components exported from ${pkg.name}@${pkg.version}.` - ); - }, - }, - json: true, - jsonOptions: { - outFile: "docs/src/COMPONENT_API.json", - }, - }), - ], - }; -}); diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 00000000..81b7f203 --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,18 @@ +import adapter from "@sveltejs/adapter-static"; + +/** @type {import('@sveltejs/kit').Config} */ +const config = { + preprocess: [], + kit: { + adapter: adapter(), + target: "#svelte", + files: { + assets: "app/static", + lib: "app/lib", + routes: "app/routes", + template: "app/app.html", + }, + }, +}; + +export default config; diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 00000000..e9d37231 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,27 @@ +import { defineConfig } from "vite"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; +import { readFile } from "fs/promises"; + +const pkg = JSON.parse( + await readFile(new URL("./package.json", import.meta.url)) +); + +/** + * @type {import('vite').UserConfig} + */ +const config = defineConfig({ + plugins: [svelte({ emitCss: false })], + build: { + lib: { name: pkg.name, entry: "src" }, + rollupOptions: { + external: Object.keys(pkg.dependencies), + output: { + dir: "lib", + inlineDynamicImports: true, + globals: { flatpickr: "flatpickr" }, + }, + }, + }, +}); + +export default config; diff --git a/yarn.lock b/yarn.lock index 66cd212d..f079aba7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -151,20 +151,7 @@ "@nodelib/fs.scandir" "2.1.4" fastq "^1.6.0" -"@rollup/plugin-commonjs@^17.1.0": - version "17.1.0" - resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-17.1.0.tgz#757ec88737dffa8aa913eb392fade2e45aef2a2d" - integrity sha512-PoMdXCw0ZyvjpCMT5aV4nkL0QywxP29sODQsSGeDpr/oI49Qq9tRtAsb/LbYbDzFlOydVEqHmmZWFtXJEAX9ew== - dependencies: - "@rollup/pluginutils" "^3.1.0" - commondir "^1.0.1" - estree-walker "^2.0.1" - glob "^7.1.6" - is-reference "^1.2.1" - magic-string "^0.25.7" - resolve "^1.17.0" - -"@rollup/plugin-node-resolve@^11.0.1", "@rollup/plugin-node-resolve@^11.1.1": +"@rollup/plugin-node-resolve@^11.0.1": version "11.1.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.1.1.tgz#47bc34252914794a1b06fb50371d7520a03f91f3" integrity sha512-zlBXR4eRS+2m79TsUZWhsd0slrHUYdRx4JF+aVQm+MI0wsKdlpC2vlDVjmlGvtZY1vsefOT9w3JxvmWSBei+Lg== @@ -185,11 +172,46 @@ estree-walker "^1.0.1" picomatch "^2.2.2" +"@rollup/pluginutils@^4.1.1": + version "4.1.1" + resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec" + integrity sha512-clDjivHqWGXi7u+0d2r2sBi4Ie6VLEAzWMIkvJLnDmxoOhBYOTfzGbOQBA32THHm11/LiJbd01tJUpJsbshSWQ== + dependencies: + estree-walker "^2.0.1" + picomatch "^2.2.2" + "@sindresorhus/is@^4.0.0": version "4.0.0" resolved "https://registry.npmjs.org/@sindresorhus/is/-/is-4.0.0.tgz#2ff674e9611b45b528896d820d3d7a812de2f0e4" integrity sha512-FyD2meJpDPjyNQejSjvnhpgI/azsQkA4lGbuu5BQZfjvJ9cbRZXzeWL2HceCekW4lixO9JPesIIQkSoLjeJHNQ== +"@sveltejs/adapter-static@next": + version "1.0.0-next.17" + resolved "https://registry.yarnpkg.com/@sveltejs/adapter-static/-/adapter-static-1.0.0-next.17.tgz#63537e4d2b8c1fabb6db96b56f69ec41e56b6334" + integrity sha512-RKYNkQxtsMgt0wD8PhfXR1hGT1Tmq1E5eZeTr1KxIerczITRnWVT8LElfu/9Kusv44yYlyQtNc1mLoYqgloOQw== + +"@sveltejs/kit@next": + version "1.0.0-next.161" + resolved "https://registry.yarnpkg.com/@sveltejs/kit/-/kit-1.0.0-next.161.tgz#c0f34514cf62d04651a30bddb85e1838a69a9630" + integrity sha512-19yrQjfskZXh5TboZI0HGAO8lq5H+JUw/JHnZZ85IGnetqJWr/sYxDmOkXAK9b97UDYAVZ/jy3Ztx5J8Nj4fkQ== + dependencies: + "@sveltejs/vite-plugin-svelte" "^1.0.0-next.16" + cheap-watch "^1.0.3" + sade "^1.7.4" + vite "^2.5.3" + +"@sveltejs/vite-plugin-svelte@^1.0.0-next.16", "@sveltejs/vite-plugin-svelte@^1.0.0-next.20": + version "1.0.0-next.20" + resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.20.tgz#045c67218142913648f005e1b9fc31b32a3d1afb" + integrity sha512-7IbHNr5okZqYVL7WGStNatL8IzpqMLbgKvLY9uobMBQrzVhlc/9qsQwvWn8uLBndZ9kB8Wr+m4/XEiUoeBLijg== + dependencies: + "@rollup/pluginutils" "^4.1.1" + debug "^4.3.2" + kleur "^4.1.4" + magic-string "^0.25.7" + require-relative "^0.8.7" + svelte-hmr "^0.14.7" + "@szmarczak/http-timer@^4.0.5": version "4.0.5" resolved "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-4.0.5.tgz#bfbd50211e9dfa51ba07da58a14cdfd333205152" @@ -217,11 +239,6 @@ resolved "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0" integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ== -"@types/estree@*": - version "0.0.45" - resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz#e9387572998e5ecdac221950dab3e8c3b16af884" - integrity sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g== - "@types/estree@0.0.39": version "0.0.39" resolved "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" @@ -328,30 +345,11 @@ anymatch@~3.1.1: normalize-path "^3.0.0" picomatch "^2.0.4" -array-union@^1.0.1: - version "1.0.2" - resolved "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39" - integrity sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk= - dependencies: - array-uniq "^1.0.1" - -array-uniq@^1.0.1: - version "1.0.3" - resolved "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6" - integrity sha1-r2rId6Jcx/dOBYiUdThY39sk/bY= - astral-regex@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31" integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ== -async@^2.6.1: - version "2.6.3" - resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff" - integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg== - dependencies: - lodash "^4.17.14" - async@^3.1.0: version "3.2.0" resolved "https://registry.npmjs.org/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720" @@ -410,11 +408,6 @@ browserslist@^4.16.1: escalade "^3.1.1" node-releases "^1.1.69" -buffer-from@^1.0.0: - version "1.1.1" - resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef" - integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== - builtin-modules@^3.1.0: version "3.1.0" resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484" @@ -485,6 +478,11 @@ chalk@^4.0.0, chalk@^4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +cheap-watch@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/cheap-watch/-/cheap-watch-1.0.3.tgz#3c4265718bcf8f1ae08f5e450f9f4693432e028e" + integrity sha512-xC5CruMhLzjPwJ5ecUxGu1uGmwJQykUhqd2QrCrYbwvsFYdRyviu6jG9+pccwDXJR/OpmOTOJ9yLFunVgQu9wg== + "chokidar@>=2.0.0 <4.0.0": version "3.5.1" resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" @@ -601,6 +599,11 @@ colorette@^1.2.1: resolved "https://registry.npmjs.org/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== +colorette@^1.2.2: + version "1.3.0" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af" + integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w== + colors@^1.2.1: version "1.4.0" resolved "https://registry.npmjs.org/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" @@ -614,11 +617,6 @@ colorspace@1.1.x: color "3.0.x" text-hex "1.0.x" -commander@^2.18.0, commander@^2.20.0: - version "2.20.3" - resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" - integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== - commander@^6.2.0: version "6.2.0" resolved "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz#b990bfb8ac030aedc6d11bc04d1488ffef56db75" @@ -629,11 +627,6 @@ comment-parser@^0.7.6: resolved "https://registry.npmjs.org/comment-parser/-/comment-parser-0.7.6.tgz#0e743a53c8e646c899a1323db31f6cd337b10f12" integrity sha512-GKNxVA7/iuTnAqGADlTWX4tkhzxZKXp5fLJqKTlQLHkE65XDUKutZ3BHaJC5IGcper2tT3QRD1xr4o3jNpgXXg== -commondir@^1.0.1: - version "1.0.1" - resolved "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b" - integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs= - compare-versions@^3.6.0: version "3.6.0" resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-3.6.0.tgz#1a5689913685e5a87637b8d3ffca75514ec41d62" @@ -704,6 +697,13 @@ debug@^4.1.0, debug@^4.2.0: dependencies: ms "2.1.2" +debug@^4.3.2: + version "4.3.2" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.2.tgz#f0a49c18ac8779e31d4a0c6029dfb76873c7428b" + integrity sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw== + dependencies: + ms "2.1.2" + decompress-response@^6.0.0: version "6.0.0" resolved "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc" @@ -750,11 +750,6 @@ electron-to-chromium@^1.3.634: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.646.tgz#a7dc089d6d83b6d6cc01f91de524e91f12e6ccfa" integrity sha512-P+3q8ugIPezulqoBYaLoUsF0fT4YNpe+zEDmdDUDnHZUAeSbBjMbis+JjJp9duU8BdfWV3VXf27NTBcwhRTsAQ== -email-addresses@^3.0.1: - version "3.1.0" - resolved "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz#cabf7e085cbdb63008a70319a74e6136188812fb" - integrity sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg== - emoji-regex@^8.0.0: version "8.0.0" resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" @@ -830,12 +825,17 @@ es-to-primitive@^1.2.1: is-date-object "^1.0.1" is-symbol "^1.0.2" +esbuild@^0.12.17: + version "0.12.24" + resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.24.tgz#21966fad25a80f368ed308101e88102bce0dc68f" + integrity sha512-C0ibY+HsXzYB6L/pLWEiWjMpghKsIc58Q5yumARwBQsHl9DXPakW+5NI/Y9w4YXiz0PEP6XTGTT/OV4Nnsmb4A== + escalade@^3.1.1: version "3.1.1" resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40" integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw== -escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5: +escape-string-regexp@^1.0.5: version "1.0.5" resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ= @@ -906,28 +906,6 @@ figures@^3.2.0: dependencies: escape-string-regexp "^1.0.5" -filename-reserved-regex@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz#e61cf805f0de1c984567d0386dc5df50ee5af7e4" - integrity sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q= - -filenamify-url@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz#b32bd81319ef5863b73078bed50f46a4f7975f50" - integrity sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A= - dependencies: - filenamify "^1.0.0" - humanize-url "^1.0.0" - -filenamify@^1.0.0: - version "1.2.1" - resolved "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz#a9f2ffd11c503bed300015029272378f1f1365a5" - integrity sha1-qfL/0RxQO+0wABUCknI3jx8TZaU= - dependencies: - filename-reserved-regex "^1.0.0" - strip-outer "^1.0.0" - trim-repeated "^1.0.0" - fill-range@^7.0.1: version "7.0.1" resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40" @@ -935,23 +913,6 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" -find-cache-dir@^3.3.1: - version "3.3.1" - resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880" - integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== - dependencies: - commondir "^1.0.1" - make-dir "^3.0.2" - pkg-dir "^4.1.0" - -find-up@^4.0.0: - version "4.1.0" - resolved "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19" - integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw== - dependencies: - locate-path "^5.0.0" - path-exists "^4.0.0" - find-up@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc" @@ -987,15 +948,6 @@ fraction.js@^4.0.13: resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe" integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA== -fs-extra@^8.1.0: - version "8.1.0" - resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0" - integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^4.0.0" - universalify "^0.1.0" - fs-extra@^9.0.1: version "9.0.1" resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz#910da0062437ba4c39fedd863f1675ccfefcb9fc" @@ -1021,6 +973,11 @@ fsevents@~2.3.1: resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.1.tgz#b209ab14c61012636c8863507edf7fb68cc54e9f" integrity sha512-YR47Eg4hChJGAB1O3yEAOkGO+rlzutoICGqGo9EZ4lKWokzZRSyIW1QmTzqjtw8MJdj9srP869CuWw/hyzSiBw== +fsevents@~2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + function-bind@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" @@ -1043,19 +1000,6 @@ get-stream@^5.0.0, get-stream@^5.1.0: dependencies: pump "^3.0.0" -gh-pages@^3.1.0: - version "3.1.0" - resolved "https://registry.npmjs.org/gh-pages/-/gh-pages-3.1.0.tgz#ec3ed0f6a6e3fc3d888758fa018f08191c96bd55" - integrity sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w== - dependencies: - async "^2.6.1" - commander "^2.18.0" - email-addresses "^3.0.1" - filenamify-url "^1.0.0" - find-cache-dir "^3.3.1" - fs-extra "^8.1.0" - globby "^6.1.0" - glob-parent@^5.1.0, glob-parent@~5.1.0: version "5.1.1" resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229" @@ -1063,7 +1007,7 @@ glob-parent@^5.1.0, glob-parent@~5.1.0: dependencies: is-glob "^4.0.1" -glob@^7.0.3, glob@^7.1.6: +glob@^7.1.6: version "7.1.6" resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6" integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA== @@ -1080,17 +1024,6 @@ globals@^11.1.0: resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -globby@^6.1.0: - version "6.1.0" - resolved "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c" - integrity sha1-9abXDoOV4hyFj7BInWTfAkJNUGw= - dependencies: - array-union "^1.0.1" - glob "^7.0.3" - object-assign "^4.0.1" - pify "^2.0.0" - pinkie-promise "^2.0.0" - got@^11.8.0: version "11.8.1" resolved "https://registry.npmjs.org/got/-/got-11.8.1.tgz#df04adfaf2e782babb3daabc79139feec2f7e85d" @@ -1158,14 +1091,6 @@ human-signals@^1.1.1: resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3" integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw== -humanize-url@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz#f4ab99e0d288174ca4e1e50407c55fbae464efff" - integrity sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8= - dependencies: - normalize-url "^1.0.0" - strip-url-auth "^1.0.0" - husky@^4.3.8: version "4.3.8" resolved "https://registry.npmjs.org/husky/-/husky-4.3.8.tgz#31144060be963fd6850e5cc8f019a1dfe194296d" @@ -1242,6 +1167,13 @@ is-core-module@^2.1.0: dependencies: has "^1.0.3" +is-core-module@^2.2.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19" + integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ== + dependencies: + has "^1.0.3" + is-date-object@^1.0.1: version "1.0.2" resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.2.tgz#bda736f2cd8fd06d32844e7743bfa7494c3bfd7e" @@ -1289,18 +1221,6 @@ is-obj@^2.0.0: resolved "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982" integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w== -is-plain-obj@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e" - integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4= - -is-reference@^1.2.1: - version "1.2.1" - resolved "https://registry.npmjs.org/is-reference/-/is-reference-1.2.1.tgz#8b2dac0b371f4bc994fdeaba9eb542d03002d0b7" - integrity sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ== - dependencies: - "@types/estree" "*" - is-regex@^1.1.1: version "1.1.1" resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz#c6f98aacc546f6cec5468a07b7b153ab564a57b9" @@ -1340,15 +1260,6 @@ isexe@^2.0.0: resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10" integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA= -jest-worker@^26.2.1: - version "26.3.0" - resolved "https://registry.npmjs.org/jest-worker/-/jest-worker-26.3.0.tgz#7c8a97e4f4364b4f05ed8bca8ca0c24de091871f" - integrity sha512-Vmpn2F6IASefL+DVBhPzI2J9/GJUsqzomdeN+P+dK8/jKxbh8R3BtFnx3FIta7wYlPU62cpJMJQo4kuOowcMnw== - dependencies: - "@types/node" "*" - merge-stream "^2.0.0" - supports-color "^7.0.0" - "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -1369,13 +1280,6 @@ json-parse-better-errors@^1.0.1: resolved "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9" integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw== -jsonfile@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" - integrity sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= - optionalDependencies: - graceful-fs "^4.1.6" - jsonfile@^6.0.1: version "6.1.0" resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae" @@ -1392,6 +1296,11 @@ keyv@^4.0.0: dependencies: json-buffer "3.0.1" +kleur@^4.1.4: + version "4.1.4" + resolved "https://registry.yarnpkg.com/kleur/-/kleur-4.1.4.tgz#8c202987d7e577766d039a8cd461934c01cda04d" + integrity sha512-8QADVssbrFjivHWQU7KkMgptGTl6WAcSdlbBPY4uNF+mWr6DGcKrvY2w4FQJoXch7+fKMjj0dRrL75vk3k23OA== + kuler@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/kuler/-/kuler-2.0.0.tgz#e2c570a3800388fb44407e851531c1d670b061b3" @@ -1447,13 +1356,6 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" -locate-path@^5.0.0: - version "5.0.0" - resolved "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0" - integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g== - dependencies: - p-locate "^4.1.0" - locate-path@^6.0.0: version "6.0.0" resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286" @@ -1466,7 +1368,7 @@ lodash.debounce@^4.0.8: resolved "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af" integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168= -lodash@^4.17.14, lodash@^4.17.19: +lodash@^4.17.19: version "4.17.20" resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== @@ -1525,7 +1427,7 @@ magic-string@^0.25.7: dependencies: sourcemap-codec "^1.4.4" -make-dir@^3.0.0, make-dir@^3.0.2: +make-dir@^3.0.0: version "3.1.0" resolved "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f" integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw== @@ -1587,6 +1489,11 @@ minimist@^1.2.5: resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== +mri@^1.1.0: + version "1.1.6" + resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6" + integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ== + ms@2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" @@ -1602,6 +1509,11 @@ nanoid@^3.1.20: resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788" integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw== +nanoid@^3.1.23: + version "3.1.25" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" + integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== + nice-try@^1.0.4: version "1.0.5" resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" @@ -1632,16 +1544,6 @@ normalize-range@^0.1.2: resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= -normalize-url@^1.0.0: - version "1.9.1" - resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c" - integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw= - dependencies: - object-assign "^4.0.1" - prepend-http "^1.0.0" - query-string "^4.1.0" - sort-keys "^1.0.0" - normalize-url@^4.1.0: version "4.5.0" resolved "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129" @@ -1669,11 +1571,6 @@ npm-run-path@^4.0.0: dependencies: path-key "^3.0.0" -object-assign@^4.0.1, object-assign@^4.1.0: - version "4.1.1" - resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" - integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM= - object-inspect@^1.8.0: version "1.8.0" resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0" @@ -1725,13 +1622,6 @@ p-cancelable@^2.0.0: resolved "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.0.0.tgz#4a3740f5bdaf5ed5d7c3e34882c6fb5d6b266a6e" integrity sha512-wvPXDmbMmu2ksjkB4Z3nZWTSkJEb9lqVdMaCKpZUGJG9TMiNp9XcbG3fn9fPKjem04fJMJnXoyFPk2FmgiaiNg== -p-limit@^2.2.0: - version "2.3.0" - resolved "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1" - integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w== - dependencies: - p-try "^2.0.0" - p-limit@^3.0.2: version "3.1.0" resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b" @@ -1739,13 +1629,6 @@ p-limit@^3.0.2: dependencies: yocto-queue "^0.1.0" -p-locate@^4.1.0: - version "4.1.0" - resolved "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07" - integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A== - dependencies: - p-limit "^2.2.0" - p-locate@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834" @@ -1760,11 +1643,6 @@ p-map@^4.0.0: dependencies: aggregate-error "^3.0.0" -p-try@^2.0.0: - version "2.2.0" - resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6" - integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ== - parent-module@^1.0.0: version "1.0.1" resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2" @@ -1837,35 +1715,11 @@ pidtree@^0.3.0: resolved "https://registry.npmjs.org/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a" integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA== -pify@^2.0.0: - version "2.3.0" - resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" - integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= - pify@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY= -pinkie-promise@^2.0.0: - version "2.0.1" - resolved "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa" - integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o= - dependencies: - pinkie "^2.0.0" - -pinkie@^2.0.0: - version "2.0.4" - resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870" - integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA= - -pkg-dir@^4.1.0: - version "4.2.0" - resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3" - integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ== - dependencies: - find-up "^4.0.0" - pkg-dir@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/pkg-dir/-/pkg-dir-5.0.0.tgz#a02d6aebe6ba133a928f74aec20bafdfe6b8e760" @@ -1894,10 +1748,14 @@ postcss@^8.2.4: nanoid "^3.1.20" source-map "^0.6.1" -prepend-http@^1.0.0: - version "1.0.4" - resolved "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc" - integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw= +postcss@^8.3.6: + version "8.3.6" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea" + integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.23" + source-map-js "^0.6.2" prettier-plugin-svelte@^2.1.5: version "2.1.5" @@ -1922,26 +1780,11 @@ pump@^3.0.0: end-of-stream "^1.1.0" once "^1.3.1" -query-string@^4.1.0: - version "4.3.4" - resolved "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb" - integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s= - dependencies: - object-assign "^4.1.0" - strict-uri-encode "^1.0.0" - quick-lru@^5.1.1: version "5.1.1" resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932" integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA== -randombytes@^2.1.0: - version "2.1.0" - resolved "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" - integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ== - dependencies: - safe-buffer "^5.1.0" - read-pkg@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389" @@ -2000,7 +1843,7 @@ resolve-from@^4.0.0: resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g== -resolve@^1.10.0, resolve@^1.17.0: +resolve@^1.10.0: version "1.17.0" resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444" integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w== @@ -2015,6 +1858,14 @@ resolve@^1.19.0: is-core-module "^2.1.0" path-parse "^1.0.6" +resolve@^1.20.0: + version "1.20.0" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" + integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== + dependencies: + is-core-module "^2.2.0" + path-parse "^1.0.6" + responselike@^2.0.0: version "2.0.0" resolved "https://registry.npmjs.org/responselike/-/responselike-2.0.0.tgz#26391bcc3174f750f9a79eacc40a12a5c42d7723" @@ -2035,7 +1886,7 @@ reusify@^1.0.4: resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76" integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw== -rollup-plugin-svelte@^7.0.0, rollup-plugin-svelte@^7.1.0: +rollup-plugin-svelte@^7.0.0: version "7.1.0" resolved "https://registry.npmjs.org/rollup-plugin-svelte/-/rollup-plugin-svelte-7.1.0.tgz#d45f2b92b1014be4eb46b55aa033fb9a9c65f04d" integrity sha512-vopCUq3G+25sKjwF5VilIbiY6KCuMNHP1PFvx2Vr3REBNMDllKHFZN2B9jwwC+MqNc3UPKkjXnceLPEjTjXGXg== @@ -2043,16 +1894,6 @@ rollup-plugin-svelte@^7.0.0, rollup-plugin-svelte@^7.1.0: require-relative "^0.8.7" rollup-pluginutils "^2.8.2" -rollup-plugin-terser@^7.0.2: - version "7.0.2" - resolved "https://registry.npmjs.org/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" - integrity sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ== - dependencies: - "@babel/code-frame" "^7.10.4" - jest-worker "^26.2.1" - serialize-javascript "^4.0.0" - terser "^5.0.0" - rollup-pluginutils@^2.8.2: version "2.8.2" resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" @@ -2067,12 +1908,12 @@ rollup@^2.36.0: optionalDependencies: fsevents "~2.3.1" -rollup@^2.38.4: - version "2.38.4" - resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.38.4.tgz#1b84ea8728c73b1a00a6a6e9c630ec8c3fe48cea" - integrity sha512-B0LcJhjiwKkTl79aGVF/u5KdzsH8IylVfV56Ut6c9ouWLJcUK17T83aZBetNYSnZtXf2OHD4+2PbmRW+Fp5ulg== +rollup@^2.38.5: + version "2.56.3" + resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.56.3.tgz#b63edadd9851b0d618a6d0e6af8201955a77aeff" + integrity sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg== optionalDependencies: - fsevents "~2.3.1" + fsevents "~2.3.2" run-parallel@^1.1.9: version "1.1.10" @@ -2086,16 +1927,23 @@ rxjs@^6.6.3: dependencies: tslib "^1.9.0" -safe-buffer@^5.1.0, safe-buffer@~5.2.0: - version "5.2.1" - resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" - integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== +sade@^1.7.4: + version "1.7.4" + resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691" + integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA== + dependencies: + mri "^1.1.0" safe-buffer@~5.1.0, safe-buffer@~5.1.1: version "5.1.2" resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d" integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g== +safe-buffer@~5.2.0: + version "5.2.1" + resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6" + integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ== + sass@^1.32.6: version "1.32.6" resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.6.tgz#e3646c8325cd97ff75a8a15226007f3ccd221393" @@ -2130,13 +1978,6 @@ semver@^7.3.2: dependencies: lru-cache "^6.0.0" -serialize-javascript@^4.0.0: - version "4.0.0" - resolved "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" - integrity sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw== - dependencies: - randombytes "^2.1.0" - shebang-command@^1.2.0: version "1.2.0" resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea" @@ -2201,27 +2042,17 @@ slice-ansi@^4.0.0: astral-regex "^2.0.0" is-fullwidth-code-point "^3.0.0" -sort-keys@^1.0.0: - version "1.1.2" - resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" - integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0= - dependencies: - is-plain-obj "^1.0.0" - -source-map-support@~0.5.12: - version "0.5.19" - resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61" - integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw== - dependencies: - buffer-from "^1.0.0" - source-map "^0.6.0" +source-map-js@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" + integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== source-map@^0.5.0: version "0.5.7" resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= -source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1: +source-map@^0.6.1: version "0.6.1" resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== @@ -2267,11 +2098,6 @@ stack-trace@0.0.x: resolved "https://registry.npmjs.org/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0" integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA= -strict-uri-encode@^1.0.0: - version "1.1.0" - resolved "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" - integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= - string-argv@0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da" @@ -2357,18 +2183,6 @@ strip-indent@^3.0.0: dependencies: min-indent "^1.0.0" -strip-outer@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz#b2fd2abf6604b9d1e6013057195df836b8a9d631" - integrity sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg== - dependencies: - escape-string-regexp "^1.0.2" - -strip-url-auth@^1.0.0: - version "1.0.1" - resolved "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz#22b0fa3a41385b33be3f331551bbb837fa0cd7ae" - integrity sha1-IrD6OkE4WzO+PzMVUbu4N/oM164= - supports-color@^5.3.0: version "5.5.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -2376,7 +2190,7 @@ supports-color@^5.3.0: dependencies: has-flag "^3.0.0" -supports-color@^7.0.0, supports-color@^7.1.0: +supports-color@^7.1.0: version "7.1.0" resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1" integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g== @@ -2414,6 +2228,11 @@ svelte-check@^1.1.32: svelte-preprocess "^4.0.0" typescript "*" +svelte-hmr@^0.14.7: + version "0.14.7" + resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.7.tgz#7fa8261c7b225d9409f0a86f3b9ea5c3ca6f6607" + integrity sha512-pDrzgcWSoMaK6AJkBWkmgIsecW0GChxYZSZieIYfCP0v2oPyx2CYU/zm7TBIcjLVUPP714WxmViE9Thht4etog== + svelte-preprocess@^4.0.0: version "4.5.2" resolved "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.5.2.tgz#37976d1e0d866eb382411d486f7468d2275087e9" @@ -2444,15 +2263,6 @@ svelte@^3.40.1: resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.40.1.tgz#0c1fa443c812f042ce5ccd8d3bec1654a612c259" integrity sha512-IreCwsCD5yoKlXCDXCyHZ0mh1wNwm3/5QD+nVNBzSWug5dUiWcah/8QWnDcC3IYbJbn0ZRT04b8y4ITMtr1bNQ== -terser@^5.0.0: - version "5.3.0" - resolved "https://registry.npmjs.org/terser/-/terser-5.3.0.tgz#c481f4afecdcc182d5e2bdd2ff2dc61555161e81" - integrity sha512-XTT3D3AwxC54KywJijmY2mxZ8nJiEjBHVYzq8l9OaYuRFWeQNBwvipuzzYEP4e+/AVcd1hqG/CqgsdIRyT45Fg== - dependencies: - commander "^2.20.0" - source-map "~0.6.1" - source-map-support "~0.5.12" - text-hex@1.0.x: version "1.0.0" resolved "https://registry.npmjs.org/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5" @@ -2475,13 +2285,6 @@ to-regex-range@^5.0.1: dependencies: is-number "^7.0.0" -trim-repeated@^1.0.0: - version "1.0.0" - resolved "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz#e3646a2ea4e891312bf7eace6cfb05380bc01c21" - integrity sha1-42RqLqTokTEr9+rObPsFOAvAHCE= - dependencies: - escape-string-regexp "^1.0.2" - triple-beam@^1.2.0, triple-beam@^1.3.0: version "1.3.0" resolved "https://registry.npmjs.org/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9" @@ -2521,11 +2324,6 @@ unique-string@^2.0.0: dependencies: crypto-random-string "^2.0.0" -universalify@^0.1.0: - version "0.1.2" - resolved "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" - integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg== - universalify@^1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d" @@ -2549,6 +2347,18 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +vite@^2.5.3: + version "2.5.3" + resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.3.tgz#88d40a9efb9bec66bd87a7676c5689f35ff63742" + integrity sha512-1wMDnjflvtTTkMov8O/Xb5+w1/VW/Gw8oCf8f6dqgHn8lMOEqq0SaPtFEQeikFcOKCfSbiU0nEi0LDIx6DNsaQ== + dependencies: + esbuild "^0.12.17" + postcss "^8.3.6" + resolve "^1.20.0" + rollup "^2.38.5" + optionalDependencies: + fsevents "~2.3.2" + warning@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c"